/* ==========================================================================
   PORTADA — la landing de viewroom3d.com
   Requiere base.css cargado antes; se carga DESPUÉS de marketing.css.

   De dónde sale esto: el dueño diseñó la portada en Claude Design y bajó el
   export. Ese archivo NO se puede publicar (410 KB de los cuales 408 son un
   bundle de JS que dibuja la página entera en el navegador: mata el SEO, que
   es toda la estrategia de adquisición, y este proyecto no tiene paso de
   compilación). Lo que se hizo fue extraer la plantilla del bundle y
   reimplementarla acá: HTML servido por PHP, textos en lang/, y este CSS.

   Por qué un vocabulario propio `pt-*` y no `mk-*`: marketing.css es el
   sistema del resto del sitio (tokens en oklch, tarjetas planas). La portada
   tiene su propio lenguaje visual —vidrio esmerilado sobre la panorámica,
   sombras largas de color, azul de acento sólido— y mezclarlo con `mk-*`
   habría obligado a ensuciar todas las demás páginas. Los dos conviven: el
   encabezado y el pie siguen siendo los del layout (`mk-nav`, `mk-pie`), y acá
   solo se les cambia la piel para el tramo de la portada.

   La paleta es exactamente la que el dueño eligió, medida sobre el bundle:
   #0E4FD1 (96 usos), #5C6E8D (82), #0B2141 (73), #DCE4F0 (55)…
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta
   Se declara en `.pt` y no en :root para que no se filtre a /precio, /demo ni
   al showroom del cliente, que tienen su propio sistema de color.
   -------------------------------------------------------------------------- */

.pt {
  --pt-azul:        #0E4FD1;
  /* Texto que va ENCIMA del azul. En claro es blanco (6,4:1 contra #0E4FD1);
     en oscuro el azul se aclara para separarse del fondo y entonces el blanco
     cae a 2,4:1, así que ahí el texto pasa a marino. */
  --pt-azul-txt:    #ffffff;
  --pt-azul-hover:  #0A3CA6;
  --pt-azul-claro:  #EAF1FE;
  --pt-azul-borde:  #CFE0FF;
  --pt-azul-suave:  #8FB4F2;

  --pt-marino:      #0B2141;   /* texto fuerte */
  --pt-pizarra:     #44577A;   /* cuerpo */
  --pt-pizarra-2:   #5C6E8D;   /* secundario */
  --pt-pizarra-3:   #334A70;   /* listas */
  --pt-pizarra-4:   #8494AE;   /* migas apagadas */

  --pt-plata:       #DCE4F0;   /* bordes */
  --pt-plata-2:     #C6D2E4;   /* bordes fuertes */
  --pt-plata-3:     #A8B6CC;   /* iconos apagados */

  /* Borde de un CONTROL, que no es lo mismo que el borde de una tarjeta.
     DISENO §7 pide 3:1 en el limite de un control, y la familia plata no llega
     ni cerca sobre blanco: #DCE4F0 da 1,28:1, #C6D2E4 da 1,53:1 y #A8B6CC da
     2,05:1. El boton secundario "Parte con mi plan gratis" es blanco sobre
     blanco, asi que su borde es lo UNICO que dice donde empieza el boton, y con
     1,53:1 no se veia. Este tono continua la misma rampa (mismo azul apagado,
     un paso mas oscuro) y mide 3,45:1 sobre #FFFFFF y 3,18:1 sobre #F2F6FC, que
     es el relleno del boton al pasar el mouse. Sigue siendo un borde plateado:
     no se convirtio el boton en azul, que lo pondria a competir con el primario
     de al lado. Medido con la formula de luminancia relativa de WCAG 2.1, la
     misma que usa app/Core/Color.php. */
  --pt-plata-ctrl:  #7A8BA8;   /* limite de controles claros: 3,45:1 sobre blanco */

  --pt-lienzo:      #ffffff;
  --pt-lienzo-alt:  #F2F6FC;
  --pt-lienzo-pano: #DDE7F4;   /* fondo mientras carga la panorámica */
  --pt-final:       #0A2A5C;   /* bloque final y pie */
  --pt-final-txt:   #C9DBF7;
  --pt-final-txt-2: #7FA3DE;

  /* Vidrio esmerilado. Se declara una vez: son seis bloques que lo usan. */
  --pt-vidrio:      rgba(255, 255, 255, .62);
  --pt-vidrio-alto: rgba(255, 255, 255, .60);
  --pt-vidrio-bde:  rgba(255, 255, 255, .80);

  --pt-sombra-carta: 0 1px 2px rgba(11, 33, 65, .04), 0 18px 40px -30px rgba(11, 33, 65, .4), inset 0 1px 0 rgba(255, 255, 255, .9);
  --pt-sombra-alta:  0 1px 2px rgba(11, 33, 65, .04), 0 24px 50px -34px rgba(11, 33, 65, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  --pt-sombra-azul:  0 14px 28px -12px rgba(14, 79, 209, .8), inset 0 1px 0 rgba(255, 255, 255, .3);

  --pt-caja: 1220px;

  background: var(--pt-lienzo);
  color: var(--pt-marino);
}

/* NO hay variante oscura, y es una decisión, no un olvido.
   El diseño que aprobó el dueño es BLANCO: ese es el color principal de la
   marca. Con `@media (prefers-color-scheme: dark)` la portada se servía con
   fondo marino a cualquiera que tuviera Windows o el navegador en oscuro, que
   es exactamente lo que pasó y lo primero que reportó. El layout público manda
   `data-tema="claro"` en el <html>, así que base.css tampoco cambia las
   superficies. El showroom del cliente sí sigue las dos preferencias: ahí los
   colores los elige él en su panel. */

/* --------------------------------------------------------------------------
   2. Encabezado y pie del layout, vestidos de portada
   El <header> y el <footer> siguen siendo los de views/layout/publico.php: los
   enlaces son reales (precio, demo, contacto, entrar, registro) y el menú de
   celular sigue funcionando. Acá solo cambia la piel.
   -------------------------------------------------------------------------- */

/* Fija y translúcida: en el diseño la panorámica pasa POR DEBAJO del
   encabezado. Con `sticky` la barra ocupa su hueco y el héroe empieza más
   abajo, que es justo el efecto que se quería evitar. El hueco lo compensa el
   padding superior de .pt-hero-cuerpo. */
.cuerpo-portada .mk-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-bottom: 1px solid rgba(11, 33, 65, .08);
}
.cuerpo-portada .contenedor { max-width: 1220px; }
.cuerpo-portada .mk-nav-link { color: #44577A; font-weight: 520; }
.cuerpo-portada .mk-nav-link:hover { color: #0B2141; background: transparent; }

/* El pie continúa el bloque final: en el diseño la página termina en un solo
   plano marino, no en una franja gris pegada a un bloque oscuro. */
.cuerpo-portada .mk-pie {
  background: var(--pt-final, #0A2A5C);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #C9DBF7;
}
.cuerpo-portada .mk-pie a { color: #C9DBF7; }
.cuerpo-portada .mk-pie a:hover { color: #fff; }
.cuerpo-portada .mk-pie-legal { border-top-color: rgba(255, 255, 255, .14); color: #7FA3DE; }
.cuerpo-portada .mk-pie-marca { color: #fff; }

/* --------------------------------------------------------------------------
   3. Piezas comunes
   -------------------------------------------------------------------------- */

.pt-sec { padding: 104px 28px; }
.pt-sec--alt  { background: var(--pt-lienzo-alt); }
.pt-sec--claro { background: var(--pt-lienzo); }
.pt-caja { max-width: var(--pt-caja); margin-inline: auto; }

.pt-cab { max-width: 760px; }
.pt-cab--ancha { max-width: 800px; }

.pt-kicker {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pt-pizarra-2);
}
.pt-kicker--azul { color: var(--pt-azul); display: inline-flex; align-items: center; gap: 8px; }
.pt-kicker--azul::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pt-h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--pt-marino);
  text-wrap: balance;
}
.pt-h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 660;
  color: var(--pt-marino);
}
.pt-lead {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pt-pizarra);
  max-width: 62ch;
  text-wrap: pretty;
}
.pt-p { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: var(--pt-pizarra); }
.pt-nota { font-size: 14px; color: var(--pt-pizarra-2); }

/* Fila de llamado a la acción + su letra chica al lado. */
.pt-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   4. Botones
   Todos con 44px de alto mínimo: son la única puerta al registro y en un
   celular no se puede fallar el toque (DISENO §4.2).
   -------------------------------------------------------------------------- */

.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 620;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms cubic-bezier(.4, 0, .2, 1), color 160ms cubic-bezier(.4, 0, .2, 1);
}
.pt-btn:hover { text-decoration: none; }

.pt-btn--azul {
  background: var(--pt-azul);
  color: var(--pt-azul-txt);
  box-shadow: var(--pt-sombra-azul);
}
.pt-btn--azul:hover { background: var(--pt-azul-hover); color: var(--pt-azul-txt); }

/* Blanco sobre blanco: las tres veces que aparece (portada, planes y galeria)
   este boton vive dentro de una tarjeta de --pt-lienzo, o sea del mismo color
   que su relleno. El borde no es decoracion, es el limite del control, y por
   eso usa --pt-plata-ctrl y no la plata de las tarjetas. */
.pt-btn--borde {
  background: var(--pt-lienzo);
  color: var(--pt-marino);
  border-color: var(--pt-plata-ctrl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* En hover solo cambia el relleno: el borde se queda igual a proposito, porque
   ya cumple 3:1 contra los dos fondos y moverlo haria parpadear el contorno. */
.pt-btn--borde:hover { background: var(--pt-lienzo-alt); color: var(--pt-marino); }

.pt-btn--vidrio {
  background: rgba(255, 255, 255, .72);
  color: #0B2141;
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-btn--vidrio:hover { background: #fff; color: #0B2141; }

.pt-btn--blanco {
  background: #fff;
  color: var(--pt-final);
  min-height: 54px;
  padding: 16px 28px;
  font-weight: 660;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-btn--blanco:hover { background: #EAF1FE; color: var(--pt-final); }

.pt-btn--transparente {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  min-height: 54px;
  padding: 16px 26px;
  font-weight: 600;
}
.pt-btn--transparente:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.pt-btn--sm { min-height: 48px; padding: 13px 20px; font-size: 15px; border-radius: 12px; }
.pt-btn--full { width: 100%; }

/* --------------------------------------------------------------------------
   5. Héroe con panorámica arrastrable
   -------------------------------------------------------------------------- */

.pt-hero {
  position: relative;
  width: 100%;
  height: min(94vh, 880px);
  min-height: 620px;
  overflow: hidden;
  background: var(--pt-lienzo-pano);
  cursor: grab;
  /* pan-y y no `none`: sin esto, el dedo que quiere bajar por la página se
     queda atrapado girando la panorámica. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.pt-hero[data-arrastrando="1"] { cursor: grabbing; }

/* Contenedor de la esfera. PSV inyecta acá su <canvas>. */
.pt-hero-360 { position: absolute; inset: 0; z-index: 0; }
.pt-hero-360 canvas { display: block; outline: none; }

/* Póster: la misma equirectangular ampliada sobre el ecuador. Se ve mientras
   baja el motor y se queda para siempre si el navegador no tiene WebGL. */
.pt-hero-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Ampliada: en el centro de una equirectangular la deformación es mínima, así
     que un recorte del ecuador se lee como una foto ancha normal. Sin esto, el
     póster muestra el techo y el suelo estirados y parece un error. */
  transform: scale(1.75);
  transform-origin: 50% 48%;
  transition: opacity .55s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pt-hero[data-360="listo"] .pt-hero-poster { opacity: 0; }

/* Marcador pegado a la esfera. El punto es el ancla que PSV posiciona; la
   etiqueta cuelga a su derecha y por eso va en position:absolute: si contara
   para el tamaño del marcador, PSV lo centraría mal. */
.pt-pin360 {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 6px 18px -8px rgba(11, 33, 65, .45);
  cursor: pointer;
}
.pt-pin360 i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #0E4FD1;
  box-shadow: 0 0 0 4px rgba(14, 79, 209, .22);
}
.pt-pin360 b {
  position: absolute;
  left: 53px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #0B2141;
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .8);
  padding: 7px 11px;
  border-radius: 9px;
  white-space: nowrap;
}

.pt-hero-cuerpo {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--pt-caja);
  margin-inline: auto;
  /* 132px arriba porque el encabezado va fijo y flota sobre la panorámica. */
  padding: 132px 28px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}

.pt-hero-panel {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  max-width: 620px;
  background: var(--pt-vidrio-alto);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  padding: 34px 32px 30px;
  box-shadow: 0 30px 70px -34px rgba(11, 33, 65, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* El brillo diagonal del vidrio. Decorativo puro, por eso va en ::before y no
   como un <div> más en el HTML. */
.pt-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.pt-hero-panel > * { position: relative; }

/* Sin velo, un titular oscuro sobre una panorámica clara pierde contraste en
   cuanto el visitante gira hacia una ventana. El panel de vidrio ES el velo
   (DISENO §2.3) y por eso el texto se mantiene en marino. */
.pt-hero-h1 {
  margin: 14px 0 0;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -.033em;
  font-weight: 700;
  color: var(--pt-marino);
  text-wrap: balance;
}
.pt-hero-sub {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.58;
  color: var(--pt-pizarra-3);
  max-width: 52ch;
  text-wrap: pretty;
}
.pt-hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pt-hero-nota { margin: 18px 0 0; font-size: 13px; font-weight: 520; color: var(--pt-pizarra); }

.pt-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--pt-vidrio);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--pt-vidrio-bde);
  box-shadow: 0 10px 26px -14px rgba(11, 33, 65, .5);
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-marino);
  white-space: nowrap;
  transition: opacity .5s ease;
  pointer-events: none;
}
.pt-hint[data-oculto="1"] { opacity: 0; }

/* --------------------------------------------------------------------------
   6. Rejillas
   -------------------------------------------------------------------------- */

.pt-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.pt-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pt-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.pt-split { display: grid; grid-template-columns: 1fr .9fr; gap: 44px; align-items: center; }
.pt-split--arriba { align-items: start; }
/* Estos dos se usan SOLOS en el marcado, sin `.pt-split` al lado, asi que
   declaran su propio display: grid. Sin el se sirven apilados y la seccion del
   recorrido mide el doble de alto. */
.pt-split--visor { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; margin-top: 44px; align-items: start; }
.pt-split--faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: start; }

/* --------------------------------------------------------------------------
   7. Tarjetas
   -------------------------------------------------------------------------- */

.pt-tarjeta {
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: var(--pt-sombra-carta);
}
.pt-tarjeta .pt-h3 { margin-top: 16px; font-size: 17px; letter-spacing: -.015em; }

.pt-icono { color: var(--pt-azul); }
.pt-icono svg { width: 26px; height: 26px; }

/* Pasos. El botón se pega abajo con el hueco flexible para que las tres
   tarjetas lo alineen aunque el texto tenga distinto largo. */
.pt-paso {
  display: flex;
  flex-direction: column;
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-shadow: var(--pt-sombra-alta);
}
.pt-paso-num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--pt-azul-claro);
  border: 1px solid var(--pt-azul-borde);
  font-size: 15px;
  font-weight: 700;
  color: var(--pt-azul);
}
.pt-paso h3 {
  margin: 18px 0 0;
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--pt-marino);
}
.pt-paso p { margin: 10px 0 0; font-size: 16px; line-height: 1.56; color: var(--pt-pizarra); }
.pt-paso .pt-btn { margin-top: 24px; }
.pt-empuja { flex: 1; }

.pt-etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.pt-etiqueta {
  font-size: 13px;
  font-weight: 560;
  color: var(--pt-pizarra-3);
  background: var(--pt-lienzo-alt);
  border: 1px solid var(--pt-plata);
  padding: 6px 10px;
  border-radius: 8px;
}

.pt-url {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--pt-lienzo-alt);
  border: 1px solid var(--pt-plata);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--pt-azul);
}
.pt-url span {
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-pizarra-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Comparación (visor de terceros vs. el nuestro)
   -------------------------------------------------------------------------- */

.pt-comparar {
  background: var(--pt-lienzo-alt);
  border: 1px solid var(--pt-plata);
  border-radius: 20px;
  padding: 28px 26px;
}
.pt-comparar h3 { color: var(--pt-pizarra-2); }
.pt-comparar--nuestro {
  position: relative;
  overflow: hidden;
  background: var(--pt-lienzo);
  border-color: var(--pt-azul-borde);
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 28px 60px -36px rgba(14, 79, 209, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-comparar--nuestro h3 { color: var(--pt-azul); }

.pt-marcas { margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pt-marcas li { display: flex; gap: 12px; align-items: flex-start; }
.pt-marcas svg { flex: 0 0 auto; margin-top: 2px; width: 20px; height: 20px; }
.pt-marcas span { font-size: 16px; line-height: 1.5; color: var(--pt-pizarra); }
.pt-comparar--nuestro .pt-marcas span { color: var(--pt-pizarra-3); }

/* --------------------------------------------------------------------------
   9. Recorrido jerárquico
   -------------------------------------------------------------------------- */

.pt-niveles { display: flex; flex-direction: column; gap: 10px; }
.pt-nivel {
  text-align: left;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--pt-plata);
  background: var(--pt-vidrio);
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.pt-nivel[aria-current="true"] {
  background: var(--pt-lienzo);
  border-color: var(--pt-azul);
  box-shadow: 0 14px 30px -18px rgba(14, 79, 209, .75), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-nivel-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--pt-lienzo-alt);
  border: 1px solid var(--pt-plata);
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-pizarra-2);
  transition: background 160ms, color 160ms, border-color 160ms;
}
.pt-nivel[aria-current="true"] .pt-nivel-num {
  background: var(--pt-azul);
  border-color: var(--pt-azul);
  color: var(--pt-azul-txt);
}
.pt-nivel-t { display: block; font-size: 16px; font-weight: 660; color: var(--pt-marino); }
.pt-nivel-d { display: block; font-size: 14px; color: var(--pt-pizarra-2); margin-top: 2px; }

.pt-nivel-mas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px dashed var(--pt-plata-2);
  background: var(--pt-vidrio);
  font-size: 14px;
  color: var(--pt-pizarra-2);
}
.pt-nivel-mas b { font-size: 19px; font-weight: 600; line-height: 1; }

.pt-visor {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--pt-plata);
  background: var(--pt-lienzo-pano);
  box-shadow: 0 1px 2px rgba(11, 33, 65, .05), 0 34px 70px -40px rgba(11, 33, 65, .55);
}
.pt-visor-marco { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.pt-visor-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1);
  transform-origin: 52% 42%;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
  -webkit-user-drag: none;
}

.pt-migas {
  position: absolute;
  left: 16px; top: 16px; right: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--pt-vidrio-alto);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid var(--pt-vidrio-bde);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-miga { font-size: 13px; font-weight: 560; color: var(--pt-pizarra-2); transition: color 160ms; }
.pt-miga[data-estado="hecha"] { color: var(--pt-pizarra-3); }
.pt-miga[data-estado="actual"] { color: var(--pt-azul); font-weight: 620; }
.pt-miga-sep { font-size: 13px; color: var(--pt-pizarra-4); }

.pt-visor-pie {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--pt-vidrio-alto);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid var(--pt-vidrio-bde);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-visor-pie-t { font-size: 16px; font-weight: 660; color: var(--pt-marino); }
.pt-visor-pie-d { font-size: 14px; line-height: 1.5; color: var(--pt-pizarra); margin-top: 4px; }

/* --------------------------------------------------------------------------
   10. Editor de presentación (los bloques se arrastran de verdad)
   -------------------------------------------------------------------------- */

.pt-editor {
  margin-top: 40px;
  border: 1px solid var(--pt-plata);
  border-radius: 22px;
  overflow: hidden;
  background: var(--pt-lienzo-alt);
  box-shadow: 0 1px 2px rgba(11, 33, 65, .05), 0 34px 70px -42px rgba(11, 33, 65, .5);
}
.pt-editor-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pt-plata);
  background: var(--pt-lienzo);
}
.pt-editor-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--pt-plata); }
.pt-editor-titulo { font-size: 13px; font-weight: 600; color: var(--pt-pizarra-2); margin-left: 6px; }
.pt-editor-pista { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--pt-azul); }

.pt-lienzo {
  position: relative;
  width: 100%;
  height: clamp(320px, 44vw, 460px);
  overflow: hidden;
  background: var(--pt-lienzo-pano);
}
.pt-lienzo > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 38% 48%;
  -webkit-user-drag: none;
  pointer-events: none;
}

.pt-bloque { position: absolute; cursor: grab; touch-action: none; }
.pt-bloque[data-arrastrando="1"] { cursor: grabbing; z-index: 9; }
.pt-ficha {
  left: 26px; top: 28px;
  max-width: 290px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--pt-vidrio-alto);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid var(--pt-vidrio-bde);
  box-shadow: 0 20px 46px -24px rgba(11, 33, 65, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-ficha-k { font-size: 13px; font-weight: 620; letter-spacing: .09em; text-transform: uppercase; color: var(--pt-azul); }
.pt-ficha-t { margin-top: 7px; font-size: 19px; font-weight: 680; letter-spacing: -.02em; color: var(--pt-marino); }
.pt-ficha-d { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--pt-pizarra); }

.pt-boton-falso {
  left: 26px; top: 200px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 13px;
  background: var(--pt-azul);
  color: var(--pt-azul-txt);
  font-size: 15px;
  font-weight: 620;
  box-shadow: 0 16px 32px -14px rgba(14, 79, 209, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.pt-lienzo-nota {
  position: absolute;
  right: 16px; bottom: 16px;
  pointer-events: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-marino);
  background: var(--pt-vidrio);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--pt-vidrio-bde);
  padding: 9px 13px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   11. Avisos de contacto
   -------------------------------------------------------------------------- */

.pt-avisos { display: flex; flex-direction: column; gap: 14px; }
.pt-aviso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 20px 44px -32px rgba(11, 33, 65, .45);
}
.pt-aviso-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--pt-azul-claro);
  border: 1px solid var(--pt-azul-borde);
  color: var(--pt-azul);
}
.pt-aviso-icono--gris {
  background: var(--pt-lienzo-alt);
  border-color: var(--pt-plata);
  color: var(--pt-pizarra-2);
}
.pt-aviso-t { font-size: 15px; font-weight: 660; color: var(--pt-marino); }
.pt-aviso-d { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--pt-pizarra); }
.pt-aviso-m { margin-top: 7px; font-size: 13px; font-weight: 560; color: var(--pt-pizarra-2); }

.pt-recuadro {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-recuadro-t { font-size: 15px; font-weight: 660; color: var(--pt-marino); }
.pt-recuadro p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--pt-pizarra); }

/* --------------------------------------------------------------------------
   12. Avance de obra: Gantt y bitácora
   -------------------------------------------------------------------------- */

.pt-gantt {
  margin-top: 40px;
  border: 1px solid var(--pt-plata);
  border-radius: 20px;
  background: var(--pt-lienzo);
  padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 26px 56px -38px rgba(11, 33, 65, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-gantt-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.pt-gantt-meta { font-size: 13px; font-weight: 560; color: var(--pt-pizarra-2); }
/* El scroll horizontal vive acá adentro y nunca en el <body> (DISENO §7). */
.pt-gantt-scroll { margin-top: 20px; overflow-x: auto; }
.pt-gantt-ancho { min-width: 620px; }
.pt-gantt-fila { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.pt-gantt-filas { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.pt-gantt-meses { display: grid; grid-template-columns: repeat(12, 1fr); }
.pt-gantt-mes { font-size: 13px; font-weight: 560; color: var(--pt-pizarra-2); text-align: center; }
.pt-gantt-nombre { font-size: 14px; font-weight: 560; color: var(--pt-pizarra-3); }
.pt-gantt-pista {
  position: relative;
  height: 28px;
  background: var(--pt-lienzo-alt);
  border-radius: 7px;
  border: 1px solid var(--pt-plata);
}
.pt-barra { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; background: var(--pt-azul); }
.pt-barra--curso { background: linear-gradient(90deg, var(--pt-azul) 0%, var(--pt-azul) 30%, var(--pt-azul-suave) 30%, var(--pt-azul-suave) 100%); }
.pt-barra--pend { background: var(--pt-plata); border: 1px solid var(--pt-plata-2); }

.pt-leyenda { display: flex; flex-wrap: wrap; gap: 16px; }
.pt-leyenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--pt-pizarra-2); }
.pt-leyenda i { width: 14px; height: 9px; border-radius: 3px; }

.pt-foto {
  border: 1px solid var(--pt-plata);
  border-radius: 18px;
  overflow: hidden;
  background: var(--pt-lienzo);
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 20px 44px -34px rgba(11, 33, 65, .45);
}
.pt-foto img { display: block; width: 100%; height: 170px; object-fit: cover; }
.pt-foto-cuerpo { padding: 18px 20px; }
.pt-foto-fecha { font-size: 13px; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-azul); }
.pt-foto-t { margin-top: 7px; font-size: 15px; font-weight: 620; color: var(--pt-marino); }
.pt-foto p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--pt-pizarra); }

/* --------------------------------------------------------------------------
   13. Ciertas / lo que no somos
   -------------------------------------------------------------------------- */

.pt-hechos { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.pt-hecho { display: flex; gap: 12px; align-items: flex-start; }
.pt-hecho svg { flex: 0 0 auto; margin-top: 2px; width: 20px; height: 20px; }
.pt-hecho span { font-size: 16px; line-height: 1.5; color: var(--pt-pizarra-3); }
.pt-hecho strong { font-weight: 660; color: var(--pt-marino); }

.pt-nosomos {
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 24px 52px -36px rgba(11, 33, 65, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-guiones { margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.pt-guiones li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--pt-pizarra); }
.pt-guiones li::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 9px;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--pt-plata-2);
}
.pt-nosomos .pt-btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   14. Precios
   -------------------------------------------------------------------------- */

.pt-periodo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 28px;
  padding: 5px;
  border-radius: 13px;
  background: var(--pt-lienzo-alt);
  border: 1px solid var(--pt-plata);
}
.pt-periodo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 620;
  color: var(--pt-pizarra-2);
  cursor: pointer;
}
.pt-periodo-btn[aria-pressed="true"] {
  background: var(--pt-lienzo);
  border-color: var(--pt-plata);
  color: var(--pt-marino);
  box-shadow: 0 4px 12px -6px rgba(11, 33, 65, .3);
}
.pt-regalo {
  font-size: 13px;
  font-weight: 620;
  color: var(--pt-azul);
  background: var(--pt-azul-claro);
  border: 1px solid var(--pt-azul-borde);
  padding: 3px 8px;
  border-radius: 7px;
}

.pt-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; align-items: start; }

.pt-plan {
  display: flex;
  flex-direction: column;
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  border-radius: 22px;
  padding: 30px 26px;
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 24px 52px -38px rgba(11, 33, 65, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-plan--destacado {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--pt-azul);
  transform: scale(1.035);
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 34px 70px -34px rgba(14, 79, 209, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pt-plan-cinta {
  position: absolute;
  right: 22px; top: 22px;
  font-size: 13px;
  font-weight: 620;
  color: var(--pt-azul-txt);
  background: var(--pt-azul);
  padding: 5px 11px;
  border-radius: 8px;
}
.pt-plan-nombre { font-size: 15px; font-weight: 660; color: var(--pt-marino); }
.pt-plan--destacado .pt-plan-nombre { color: var(--pt-azul); }
.pt-plan-lema { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--pt-pizarra-2); }

.pt-precio { display: flex; align-items: baseline; gap: 7px; margin-top: 22px; }
.pt-precio-moneda { font-size: 15px; font-weight: 600; color: var(--pt-pizarra-2); }
.pt-precio-cifra { font-size: 46px; font-weight: 700; letter-spacing: -.035em; color: var(--pt-marino); line-height: 1; }
.pt-precio-periodo { font-size: 16px; font-weight: 560; color: var(--pt-pizarra-2); }
.pt-precio-nota { margin-top: 6px; font-size: 14px; color: var(--pt-pizarra-2); }

/* Los dos periodos viven en el HTML y el JS solo cambia cuál se ve: así el
   buscador (y el visitante sin JS) leen los cuatro precios de todos modos. */
.pt-plan [data-periodo="anual"] { display: none; }
.pt-planes[data-periodo="anual"] [data-periodo="anual"] { display: flex; }
.pt-planes[data-periodo="anual"] .pt-precio-nota[data-periodo="anual"] { display: block; }
.pt-planes[data-periodo="anual"] [data-periodo="mensual"] { display: none; }

.pt-features { margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pt-features li { display: flex; gap: 11px; align-items: flex-start; }
.pt-features svg { flex: 0 0 auto; margin-top: 3px; width: 18px; height: 18px; color: var(--pt-azul); }
.pt-features span { font-size: 15px; line-height: 1.5; color: var(--pt-pizarra-3); }
.pt-features li[data-menos] span { color: var(--pt-pizarra-2); }
.pt-features li[data-menos]::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 11px;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--pt-plata-2);
}
.pt-plan .pt-btn { margin-top: 26px; }

/* --------------------------------------------------------------------------
   15. Preguntas frecuentes
   <details> nativo: abre con teclado, se puede buscar con Ctrl+F y la
   respuesta está en el HTML aunque el JS no cargue. El diseño original animaba
   un max-height con JS y dejaba el texto invisible para quien no lo ejecuta.
   -------------------------------------------------------------------------- */

.pt-faq { display: flex; flex-direction: column; gap: 10px; }
.pt-faq details {
  background: var(--pt-lienzo);
  border: 1px solid var(--pt-plata);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 160ms;
}
.pt-faq details[open] { border-color: var(--pt-azul-borde); }
.pt-faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 20px 22px;
  font-size: 16px;
  font-weight: 620;
  color: var(--pt-marino);
  cursor: pointer;
  list-style: none;
}
.pt-faq summary::-webkit-details-marker { display: none; }
.pt-faq summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--pt-pizarra-2);
  border-bottom: 2px solid var(--pt-pizarra-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms ease;
}
.pt-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pt-faq p { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.6; color: var(--pt-pizarra); }

/* --------------------------------------------------------------------------
   16. Bloque final
   -------------------------------------------------------------------------- */

.pt-final { background: var(--pt-final); padding: 0; }
.pt-final .pt-kicker { color: var(--pt-azul-suave); }
.pt-final-h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -.033em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.pt-final-p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pt-final-txt);
  max-width: 52ch;
  text-wrap: pretty;
}
.pt-final-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pt-final-nota { margin: 20px 0 0; font-size: 13px; font-weight: 520; color: var(--pt-azul-suave); }

/* --------------------------------------------------------------------------
   17. Aparición al hacer scroll
   El estado oculto lo pone el JS, nunca el CSS: si el script no corre, la
   página se ve completa en vez de quedar en blanco.
   -------------------------------------------------------------------------- */

[data-aparece][data-oculto="1"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
[data-aparece] { transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  .pt *,
  .pt *::before,
  .pt *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   18. Tramos
   Mismo criterio que el resto del producto: se quita contenido y se reordena,
   nunca se encoge la letra por debajo de 13px.
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .pt-g4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .pt-g2,
  .pt-split,
  .pt-split--visor,
  .pt-split--faq { grid-template-columns: 1fr; }
  .pt-g3 { grid-template-columns: 1fr 1fr; }
  .pt-planes { grid-template-columns: 1fr; max-width: 640px; }
  .pt-plan--destacado { transform: none; }
}

@media (max-width: 900px) {
  .pt-sec { padding: 76px 22px; }
  .pt-hero { height: 82vh; min-height: 520px; }
  .pt-hero-cuerpo { padding: 96px 22px 28px; }
}

@media (max-width: 700px) {
  .pt-g3 { grid-template-columns: 1fr; max-width: 640px; }
}

@media (max-width: 560px) {
  .pt-sec { padding: 60px 18px; }
  .pt-g4 { grid-template-columns: 1fr; }
  .pt-fila,
  .pt-hero-acciones,
  .pt-final-acciones { flex-direction: column; align-items: stretch; }
  .pt-fila > *,
  .pt-hero-acciones > *,
  .pt-final-acciones > * { width: 100%; }
  .pt-fila .pt-nota { text-align: center; }
  /* En un celular el panel de vidrio es MÁS ALTO que 78vh en cuanto los dos
     botones se apilan a ancho completo. Con una altura fija, la segunda
     llamada a la acción y la nota del plan gratis quedaban cortadas por el
     borde de la sección. Acá manda el contenido y el 78vh pasa a ser el piso. */
  .pt-hero { height: auto; min-height: 78vh; }
  .pt-hero-cuerpo { padding: 92px 18px 88px; }
  .pt-hero-panel { padding: 26px 22px 24px; border-radius: 20px; }
  .pt-hero-sub { font-size: 16px; }
}

@media (max-width: 380px) {
  .pt-sec { padding: 52px 15px; }
  /* Lo decorativo se va: en 360px cada bloque se gana el espacio. */
  .pt-editor-pista,
  .pt-lienzo-nota,
  .pt-gantt-cab .pt-gantt-meta { display: none; }
  .pt-hint { font-size: 13px; padding: 9px 12px; }
}

/* --------------------------------------------------------------------------
   19. Galería pública
   Vive en esta hoja y no en marketing.css porque usa el mismo lenguaje visual
   que la portada: la galería es la continuación del "mira un ejemplo".
   -------------------------------------------------------------------------- */

.pt-galeria-cabecera { padding-top: 152px; }   /* el encabezado va fijo */
.cuerpo-galeria .mk-nav { position: sticky; }  /* acá no hay héroe que tapar */

.pt-tarjeta-showroom {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pt-plata);
  border-radius: 20px;
  overflow: hidden;
  background: var(--pt-lienzo);
  box-shadow: var(--pt-sombra-carta);
  text-decoration: none;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.pt-tarjeta-showroom:hover {
  border-color: var(--pt-azul-borde);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(11, 33, 65, .04), 0 30px 60px -34px rgba(14, 79, 209, .5);
  text-decoration: none;
}

.pt-tarjeta-foto {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--pt-lienzo-pano);
  overflow: hidden;
}
.pt-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin portada subida: el color de marca del proyecto con su inicial. Nunca un
   hueco roto, que es lo que una galería no se puede permitir. */
.pt-tarjeta-inicial {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(150deg, var(--marca, #0E4FD1), color-mix(in oklab, var(--marca, #0E4FD1) 55%, #0B2141));
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.pt-tarjeta-cinta {
  position: absolute;
  left: 14px; top: 14px;
  font-size: 13px;
  font-weight: 620;
  color: var(--pt-azul-txt);
  background: var(--pt-azul);
  padding: 5px 11px;
  border-radius: 8px;
}

.pt-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; }
.pt-tarjeta-nombre { font-size: 18px; font-weight: 680; letter-spacing: -.02em; color: var(--pt-marino); }
.pt-tarjeta-sub    { font-size: 15px; line-height: 1.5; color: var(--pt-pizarra); }
.pt-tarjeta-meta   { font-size: 13px; font-weight: 560; color: var(--pt-pizarra-2); margin-top: 4px; }
.pt-tarjeta-ver    { margin-top: 12px; font-size: 15px; font-weight: 620; color: var(--pt-azul); }

/* Estado vacío. Es el que se ve hoy, así que se trata como una pantalla de
   producto: caja, título y una salida, no una disculpa suelta. */
.pt-vacio {
  max-width: 620px;
  padding: 40px 34px;
  border: 1px dashed var(--pt-plata-2);
  border-radius: 20px;
  background: var(--pt-lienzo);
}
.pt-vacio .pt-h3 { font-size: 21px; }

@media (max-width: 900px) {
  .pt-galeria-cabecera { padding-top: 116px; }
}