/* ============================================================
   BOOKLIFT · portada
   Hoja propia de la página de inicio. style.css se sigue cargando
   porque de ahí salen el banner de cookies (.cookie-*) y los
   botones (.btn) que inyecta cookies.js; todo lo de aquí va con
   prefijo pt- para no pisar nada de las demás páginas.
   ============================================================ */

:root {
  --pt-ink: #0B0E0C;
  --pt-ink-2: #11150F;
  --pt-cream: #F2EEE5;
  --pt-green: #1AE57A;
  --pt-green-deep: #0E8F4D;
  --pt-coral: #FF5C39;
  --pt-mute: #9CA39A;
  --pt-mute-2: #6B6F6A;
  --pt-line: rgba(242,238,229,.14);
  --pt-ease: cubic-bezier(.16,.8,.24,1);
  --pt-pad: clamp(20px, 4vw, 40px);
  --pt-nav-h: 72px;
}

.pt {
  background: var(--pt-ink);
  color: var(--pt-cream);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
}
.pt * { box-sizing: border-box; }
.pt a { text-decoration: none; }
.pt h1, .pt h2, .pt h3, .pt p { margin: 0; }
.pt img { max-width: 100%; }

.pt-wrap { width: 100%; max-width: 1320px; margin: 0 auto; }
.pt-mono { font-family: "Chivo Mono", ui-monospace, monospace; }
.pt-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: clamp(10.5px, 1.1vw, 12px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--pt-mute); margin-bottom: clamp(14px, 2vw, 22px);
}
.pt-kicker .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--pt-green); flex: 0 0 auto; }
.pt-h2 {
  font-size: clamp(29px, 4.6vw, 70px); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance;
}
.pt-lead { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; color: var(--pt-mute); margin-top: 20px; max-width: 62ch; }
.pt-section { padding: clamp(72px, 9vw, 130px) var(--pt-pad); }
.pt-light { background: var(--pt-cream); color: var(--pt-ink); }
.pt-white { background: #fff; color: var(--pt-ink); }
.pt-light .pt-lead, .pt-white .pt-lead { color: var(--pt-mute-2); }
.pt-light .pt-kicker, .pt-white .pt-kicker { color: var(--pt-green-deep); }
.pt-foot-note { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 12px; color: var(--pt-mute-2); margin-top: 14px; }

.pt-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(13px, 1.5vw, 16px) clamp(20px, 2.4vw, 28px);
  border-radius: 999px; font-weight: 600; font-size: clamp(15px, 1.4vw, 16px);
  border: 2px solid transparent; transition: transform .2s var(--pt-ease), background .2s, color .2s;
}
.pt-cta-btn:active { transform: scale(.97); }
.pt-cta-fill { background: var(--pt-green); color: var(--pt-ink); }
.pt-cta-fill:hover { background: #6BFFAC; }
.pt-cta-ghost { border-color: rgba(242,238,229,.35); color: var(--pt-cream); }
.pt-cta-ghost:hover { border-color: var(--pt-cream); }
.pt-cta-dark { background: var(--pt-ink); color: var(--pt-cream); }
.pt-cta-dark:hover { background: #23291F; }

/* ---------------- preloader ----------------
   Sobrio a propósito: marca, una línea de progreso y fundido. Sin
   contador gigante ni partículas: la portada tiene que aparecer, no
   hacerse esperar. */
.pt-loader {
  position: fixed; inset: 0; z-index: 900; background: var(--pt-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity .7s var(--pt-ease), visibility .7s;
}
.pt-loader.done { opacity: 0; visibility: hidden; }
.pt-loader-brand { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.pt-loader-brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pt-green); box-shadow: 0 0 0 6px rgba(26,229,122,.12); }
.pt-loader-bar { width: min(220px, 50vw); height: 2px; background: rgba(242,238,229,.14); border-radius: 2px; overflow: hidden; }
.pt-loader-bar span { display: block; height: 100%; width: 0%; background: var(--pt-green); transition: width .35s var(--pt-ease); }

/* ---------------- nav ---------------- */
.pt-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  padding: 16px var(--pt-pad); display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.pt-nav.stuck { background: rgba(11,14,12,.82); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--pt-line); }
.pt-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(18px, 2vw, 20px); letter-spacing: -0.02em; color: var(--pt-cream); }
.pt-brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--pt-green); }
.pt-nav-links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); font-size: 14px; font-weight: 500; }
.pt-nav-links a { color: var(--pt-cream); opacity: .82; transition: opacity .2s, color .2s; white-space: nowrap; }
.pt-nav-links a:hover { opacity: 1; color: var(--pt-green); }
.pt-nav-actions { display: flex; align-items: center; gap: 12px; }
.pt-lang { display: inline-flex; border: 1.5px solid var(--pt-line); border-radius: 999px; padding: 3px; gap: 2px; }
.pt-lang button {
  border: none; background: transparent; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font-family: "Chivo Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--pt-mute);
  transition: background .2s, color .2s;
}
.pt-lang button[aria-pressed="true"] { background: var(--pt-cream); color: var(--pt-ink); }
.pt-nav-login { font-size: 14px; font-weight: 600; color: var(--pt-cream); white-space: nowrap; }
.pt-nav-cta { padding: 10px 18px; border-radius: 999px; background: var(--pt-green); color: var(--pt-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.pt-burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--pt-line); background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.pt-burger svg { stroke: var(--pt-cream); }

.pt-menu {
  position: fixed; inset: var(--pt-nav-h) 12px auto 12px; z-index: 399;
  background: #12170F; border: 1px solid var(--pt-line); border-radius: 22px; padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100dvh - var(--pt-nav-h) - 24px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--pt-ease), transform .25s var(--pt-ease), visibility .25s;
}
.pt-menu.open { opacity: 1; visibility: visible; transform: none; }
.pt-menu a { padding: 13px 12px; border-radius: 12px; font-size: 16px; color: var(--pt-cream); }
.pt-menu a:active { background: rgba(242,238,229,.07); }
.pt-menu hr { border: none; border-top: 1px solid var(--pt-line); margin: 8px 0; }
.pt-menu .pt-lang { align-self: flex-start; margin: 6px 0 4px 8px; }

/* ---------------- capa del móvil ---------------- */
/* Vuela de la portada al escenario con transform en una capa fija:
   solo toca la GPU, nunca el layout, que es lo que hace que en iOS
   el scroll no dé tirones. */
.pt-phone-layer {
  position: fixed; left: 0; top: 0; z-index: 180; pointer-events: none;
  width: var(--pt-phw, 380px); height: var(--pt-phh, 800px);
  transform-origin: center center;
  will-change: transform;
  opacity: 0;
  transition: opacity .5s var(--pt-ease);
}
.pt-phone-layer.ready { opacity: 1; }
.pt-phone-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* La pantalla es DOM de verdad encima del cristal del modelo: el chat
   se lee nítido a cualquier tamaño, que es justo lo que se pierde si
   se pinta como textura dentro del 3D.

   Para que no se descuadre al girar, el envoltorio reproduce la cámara de
   three: misma perspectiva (la pone el JS en píxeles), mismo eje de giro
   (el centro del aparato) y la pantalla desplazada en Z hasta el plano del
   cristal. Con eso los dos planos barren el mismo arco. */
.pt-stage3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}
.pt-screen {
  position: absolute; overflow: hidden; background: #000;
  left: var(--pt-scr-x, 4.5%); top: var(--pt-scr-y, 3%);
  width: var(--pt-scr-w, 91%); height: var(--pt-scr-h, 94%);
  border-radius: var(--pt-scr-r, 34px);
  font-size: var(--pt-fs, 13px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
/* respaldo si WebGL no está disponible: chasis dibujado en CSS */
.pt-phone-layer.no3d .pt-screen {
  box-shadow: 0 0 0 9px #0d0f0e, 0 0 0 11px #4a4f52, 0 40px 70px -25px rgba(0,0,0,.8);
}

/* barra de estado */
.pt-ios-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2.9em; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5em 0 1.7em; font-size: .88em; font-weight: 600; letter-spacing: -0.01em; color: #000;
}
.pt-ios-icons { display: inline-flex; align-items: center; gap: .38em; }
.pt-ios-icons svg { display: block; }
.pt-ic-signal { width: 1.22em; height: .86em; }
.pt-ic-wifi { width: 1.15em; height: .86em; }
.pt-ic-batt { width: 1.95em; height: .94em; }
.pt-screen[data-ch="call"] .pt-ios-bar { color: #fff; }
.pt-screen[data-ch="call"] .pt-ios-home { background: #fff; }
.pt-island { position: absolute; top: .6em; left: 50%; transform: translateX(-50%); width: 6.2em; height: 1.8em; border-radius: 1.1em; background: #000; z-index: 25; }
.pt-ios-home { position: absolute; bottom: .45em; left: 50%; transform: translateX(-50%); width: 7.4em; height: .3em; border-radius: .2em; background: #000; opacity: .32; z-index: 30; }

/* escenas */
.pt-scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .4s var(--pt-ease), visibility 0s linear .4s; }
.pt-scene.on { opacity: 1; visibility: visible; transition: opacity .4s var(--pt-ease), visibility 0s; }

.pt-head { padding: 3.2em .75em .55em; display: flex; align-items: center; gap: .5em; flex: 0 0 auto; }
.pt-back { width: .62em; height: 1.05em; flex: 0 0 auto; }
.pt-av { width: 2.15em; height: 2.15em; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.pt-av-wrap { position: relative; flex: 0 0 auto; display: block; }
.pt-dot-on { position: absolute; right: -.05em; bottom: -.05em; width: .62em; height: .62em; border-radius: 50%; background: #31D158; border: .14em solid #fff; }
.pt-who { flex: 1; min-width: 0; }
.pt-who .n { display: block; font-size: .92em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-who .s { display: block; font-size: .7em; color: #8E8E93; line-height: 1.3; }
.pt-act { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

.pt-feed { flex: 1; padding: .7em .72em .4em; display: flex; flex-direction: column; gap: .36em; justify-content: flex-end; overflow: hidden; }
.pt-bb {
  max-width: min(82%, 21em); padding: .45em .65em; border-radius: 1.1em;
  font-size: 1em; line-height: 1.35; position: relative;
  animation: ptBub .4s var(--pt-ease) both;
}
.pt-bb em { font-style: italic; font-weight: 500; }
.pt-bb strong { font-weight: 600; }
.pt-bb .t { display: block; text-align: right; font-size: .6em; margin-top: .15em; opacity: .55; }
.pt-bb .t .tick { color: #34B7F1; letter-spacing: -2px; opacity: 1; }
@keyframes ptBub { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.pt-input { flex: 0 0 auto; padding: .45em .72em 1.2em; display: flex; align-items: center; gap: .5em; }
.pt-field { flex: 1; min-width: 0; border-radius: 1.15em; padding: .52em .8em; font-size: .82em; color: #A5A8AD; }
.pt-ico { width: 1.28em; height: 1.28em; flex: 0 0 auto; }

.pt-sc-wa { background: #F7F4EF; color: #000; }
.pt-sc-wa .pt-head { background: rgba(247,244,239,.94); border-bottom: .5px solid rgba(0,0,0,.11); }
.pt-sc-wa .pt-back, .pt-sc-wa .pt-act, .pt-sc-wa .pt-ico { color: #25D366; }
.pt-sc-wa .pt-bb { color: #0b1411; box-shadow: 0 1px .5px rgba(0,0,0,.12); }
.pt-sc-wa .pt-bb.in { background: #fff; align-self: flex-start; border-bottom-left-radius: .3em; }
.pt-sc-wa .pt-bb.out { background: #E7FFDB; align-self: flex-end; border-bottom-right-radius: .3em; }
.pt-sc-wa .pt-input { background: rgba(247,244,239,.96); border-top: .5px solid rgba(0,0,0,.1); }
.pt-sc-wa .pt-field { background: #fff; border: .5px solid rgba(0,0,0,.1); }

.pt-sc-ig { background: #fff; color: #000; }
.pt-sc-ig .pt-head { border-bottom: .5px solid #EFEFEF; }
.pt-sc-ig .pt-back, .pt-sc-ig .pt-act { color: #000; }
.pt-sc-ig .pt-who .n { font-weight: 700; letter-spacing: -0.02em; }
.pt-sc-ig .pt-bb { border-radius: 1.25em; }
.pt-sc-ig .pt-bb.in { background: #EFEFEF; color: #000; align-self: flex-start; }
.pt-sc-ig .pt-bb.out { background: #3797F0; color: #fff; align-self: flex-end; }
.pt-ig-cam { width: 2em; height: 2em; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF); }
.pt-ig-cam svg { width: 1.05em; height: 1.05em; }
.pt-sc-ig .pt-field { border: 1px solid #DBDBDB; }
.pt-seen { align-self: flex-end; font-size: .62em; color: #8E8E93; }

.pt-sc-ms { background: #fff; color: #050505; }
.pt-sc-ms .pt-head { border-bottom: .5px solid #EDEFF2; }
.pt-sc-ms .pt-back, .pt-sc-ms .pt-act, .pt-sc-ms .pt-ico { color: #0084FF; }
.pt-sc-ms .pt-bb { border-radius: 1.15em; }
.pt-sc-ms .pt-bb.in { background: #F1F2F6; color: #050505; align-self: flex-start; }
.pt-sc-ms .pt-bb.out { background: #0084FF; color: #fff; align-self: flex-end; }
.pt-sc-ms .pt-field { background: #F1F2F6; }
.pt-like { font-size: 1.05em; flex: 0 0 auto; }

.pt-sc-call { background: linear-gradient(175deg,#1b2620,#0d120f 55%,#050706); color: #fff; justify-content: space-between; }
.pt-call-top { padding: 4.4em 1.4em 0; text-align: center; }
.pt-call-av { position: relative; width: 5.4em; height: 5.4em; margin: 0 auto 1em; }
.pt-call-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; display: block; }
.pt-call-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(26,229,122,.6); animation: ptRing 2.2s ease-out infinite; }
@keyframes ptRing { 0%,100% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.85); opacity: 0; } }
.pt-call-meta { font-size: .78em; color: rgba(255,255,255,.6); }
.pt-call-name { font-size: 1.65em; font-weight: 600; letter-spacing: -0.02em; margin-top: .15em; }
.pt-call-badge { display: inline-flex; align-items: center; gap: .42em; margin-top: .85em; padding: .35em .8em; border-radius: 999px; background: rgba(26,229,122,.14); border: 1px solid rgba(26,229,122,.35); color: var(--pt-green); font-size: .74em; font-weight: 600; }
.pt-call-badge .pip { width: .42em; height: .42em; border-radius: 50%; background: var(--pt-green); animation: ptPulse 1.4s infinite; }
@keyframes ptPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.pt-call-bottom { padding: 0 1em 1.6em; }
.pt-transcript { background: rgba(255,255,255,.09); border: .5px solid rgba(255,255,255,.14); border-radius: 1.3em; padding: .8em .95em; }
.pt-tr-head { display: flex; align-items: center; gap: .5em; margin-bottom: .45em; font-size: .64em; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; }
.pt-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.4em; }
.pt-wave i { width: 2.5px; height: 1.4em; border-radius: 2px; background: var(--pt-green); animation: ptWave 1s ease-in-out infinite; }
.pt-wave i:nth-child(2) { animation-delay: .15s; }
.pt-wave i:nth-child(3) { animation-delay: .3s; }
.pt-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes ptWave { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.pt-sc-call .pt-feed { padding: 0; gap: 0; min-height: 5.4em; justify-content: flex-start; }
.pt-tr { display: flex; gap: .5em; padding: .28em 0; animation: ptBub .4s var(--pt-ease) both; }
.pt-tr .who { flex: 0 0 4em; font-family: "Chivo Mono", ui-monospace, monospace; font-size: .66em; font-weight: 700; padding-top: .15em; }
.pt-tr.in .who { color: rgba(255,255,255,.55); }
.pt-tr.out .who { color: var(--pt-green); }
.pt-tr .txt { font-size: .8em; line-height: 1.35; color: rgba(255,255,255,.92); }

/* ---------------- portada ---------------- */
/* La portada no centra su contenido en el alto: lo reparte. El kicker queda
   pegado al techo, justo debajo de la barra, y el resto se escalona hacia
   abajo hasta dejar las cifras a un paso del "desliza". El teléfono sigue
   centrado en su columna (lo hace .pt-hero-grid): aquí solo se ordena el
   texto. */
.pt-hero {
  position: relative; min-height: 100svh; display: flex; align-items: stretch;
  padding: calc(var(--pt-nav-h) + clamp(10px, 2vh, 22px)) var(--pt-pad) clamp(40px, 7vh, 70px);
  overflow: hidden;
}
.pt-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(720px 440px at 74% 4%, rgba(26,229,122,.20), transparent 62%),
              radial-gradient(560px 340px at 2% 98%, rgba(255,92,57,.14), transparent 60%);
}
/* Patrón interactivo: va por encima del degradado del ::after y por debajo
   del texto (que viaja en z-index 2). No recibe eventos —los escucha la
   sección— para no tapar los botones de la portada. */
.pt-hero-fx {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transition: opacity .9s var(--pt-ease);
}
.pt-hero-fx.on { opacity: 1; }
.pt-hero-grid {
  position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
}
/* La columna de texto se estira de arriba abajo y reparte entre sus bloques
   todo el hueco que sobre: en una pantalla alta el aire va a los huecos en
   vez de acumularse debajo del último. Los márgenes de cada bloque siguen
   siendo el mínimo, así que en una pantalla corta el reparto no da nada y el
   escalonado se sostiene solo con ellos.

   La del teléfono no se toca: la fila la marca su alto (620 px) y se queda
   centrada contra ella. */
.pt-hero-grid > div:first-child {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between;
}

/* Los huecos de la portada son más anchos que los de una sección normal: es
   la única pantalla que se lee entera de un golpe y necesita respirar. */
/* Al pasar la columna a flex, el kicker (inline-flex) se estiraría de lado
   a lado. Con flex-start vuelve a medir lo que mide su texto. */
.pt-hero .pt-kicker { margin-bottom: clamp(20px, 3vh, 40px); align-self: flex-start; }
.pt-hero .pt-hero-tag { margin-top: clamp(24px, 3.6vh, 40px); }
.pt-hero .pt-hero-ctas { margin-top: clamp(30px, 4.6vh, 50px); }
.pt-hero .pt-trust { margin-top: clamp(34px, 5.4vh, 58px); }

.pt-h1 {
  font-size: clamp(40px, 7.2vw, 118px); font-weight: 800; line-height: .9;
  letter-spacing: -0.05em; text-wrap: balance;
}
.pt-h1 em { font-style: italic; color: var(--pt-green); }
.pt-hero-tag { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; color: #D7DCD6; max-width: 52ch; margin-top: clamp(18px, 2.6vh, 28px); }
.pt-hero-ctas { display: flex; gap: 14px; margin-top: clamp(22px, 3.4vh, 34px); flex-wrap: wrap; }
.pt-trust { display: flex; gap: clamp(20px, 3vw, 34px); margin-top: clamp(26px, 4.6vh, 46px); flex-wrap: wrap; font-family: "Chivo Mono", ui-monospace, monospace; }
.pt-trust .n { font-size: clamp(34px, 4.2vw, 46px); font-weight: 800; color: var(--pt-green); letter-spacing: -0.03em; line-height: 1.02; }
.pt-trust .l { font-size: 12.5px; color: var(--pt-mute); margin-top: 4px; line-height: 1.25; }
.pt-anchor { justify-self: center; width: var(--pt-box-w, 300px); height: var(--pt-box-h, 620px); }
.pt-scrollhint {
  position: absolute; left: var(--pt-pad); bottom: clamp(16px, 3vh, 34px); z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-family: "Chivo Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pt-mute-2);
}
.pt-scrollhint .line { width: 34px; height: 1px; background: var(--pt-green); }

/* ---------------- escenario de canales ----------------
   Los cuatro canales ocupan el primer 86% del recorrido; el tramo que queda
   es la pista por la que el panel del calendario entra de lado, con la
   pizarra todavía clavada detrás. El reparto exacto lo calcula el JS
   midiendo el solape real, no está escrito a mano en ningún sitio. */
.pt-stage { position: relative; height: 560vh; }
.pt-stage-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .62fr);
  align-items: center; gap: clamp(16px, 2.6vw, 44px); padding: var(--pt-nav-h) var(--pt-pad) 0;
}
.pt-stage-copy { max-width: 430px; }
.pt-stage-copy .pt-kicker { transition: color .4s; }
.pt-stage-h { font-size: clamp(24px, 3.6vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.pt-stage-b { font-size: clamp(14px, 1.4vw, 18px); line-height: 1.5; color: var(--pt-mute); margin-top: clamp(12px, 2vh, 20px); }
.pt-stage-stat { margin-top: clamp(14px, 2.6vh, 28px); font-family: "Chivo Mono", ui-monospace, monospace; }
.pt-stage-stat .n { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; }
.pt-stage-stat .l { font-size: 11.5px; color: var(--pt-mute-2); max-width: 200px; }
.pt-index { justify-self: end; width: 100%; max-width: 250px; }
.pt-index-row { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.4vh, 14px) 0; border-top: 1px solid var(--pt-line); opacity: .32; transition: opacity .4s; }
.pt-index-row.on { opacity: 1; }
.pt-index-row .num { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 12px; color: var(--pt-mute-2); }
.pt-index-row .lbl { flex: 1; font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: -0.01em; }
.pt-index-row .d { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,238,229,.2); transition: background .4s; }
.pt-index-bar { margin-top: 18px; height: 3px; background: rgba(242,238,229,.12); border-radius: 2px; }
.pt-index-bar span { display: block; height: 100%; border-radius: 2px; background: var(--pt-green); width: 0%; }
.pt-index-lbl { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 11px; color: var(--pt-mute-2); margin-top: 8px; letter-spacing: .12em; }

/* ---------------- google calendar ---------------- */
.pt-cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.pt-cal-pill { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: #fff; border: 1px solid #D9D4C5; font-family: "Chivo Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--pt-ink); }
.pt-cal-pill .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--pt-green); animation: ptPulse 1.6s infinite; }
.pt-cal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(18px, 2.4vw, 40px); align-items: start; }
.pt-gcal {
  background: #fff; border: 1px solid #DADCE0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(11,14,12,.35);
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
}
.pt-gcal-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #DADCE0; flex-wrap: nowrap; overflow: hidden; }
.pt-gcal-bar .title { font-size: clamp(16px, 1.6vw, 20px); color: #3C4043; letter-spacing: -0.01em; }
.pt-gcal-chip { padding: 5px 12px; border: 1px solid #DADCE0; border-radius: 6px; font-size: 13px; color: #3C4043; white-space: nowrap; }
.pt-gcal-date { font-size: clamp(14px, 1.5vw, 19px); color: #3C4043; white-space: nowrap; }
.pt-gcal-user { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pt-gcal-avatar { width: 28px; height: 28px; border-radius: 50%; background: #1a73e8; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.pt-gcal-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); }
.pt-gcal-rail { border-right: 1px solid #DADCE0; padding: 14px 12px 18px; }
.pt-gcal-create { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 11px; border-radius: 999px; box-shadow: 0 1px 3px rgba(60,64,67,.3); font-size: 14px; color: #3C4043; margin-bottom: 16px; }
.pt-gcal-month { font-size: 13px; color: #3C4043; font-weight: 500; margin-bottom: 8px; }
.pt-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 18px; }
.pt-mini span { height: 21px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; border-radius: 50%; color: #3C4043; }
.pt-mini span.today { background: #1a73e8; color: #fff; font-weight: 600; }
.pt-callist { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13px; color: #3C4043; }
.pt-callist .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; flex: 0 0 auto; }
.pt-gcal-note { margin-top: 16px; padding: 11px; border: 1px solid #E8EAED; border-radius: 10px; background: #F8FBF9; }
.pt-gcal-note .t { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pt-green-deep); font-weight: 600; }
.pt-gcal-note .t .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-green); }
.pt-gcal-note .d { font-size: 11.5px; color: #5F6368; margin-top: 6px; line-height: 1.4; }
.pt-week { position: relative; min-width: 0; }
.pt-week-head { display: grid; grid-template-columns: 48px repeat(6, minmax(0, 1fr)); border-bottom: 1px solid #DADCE0; }
.pt-week-head > div + div { border-left: 1px solid #E8EAED; padding: 9px 0 7px; text-align: center; }
.pt-week-head .dow { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #70757A; }
.pt-week-head .num { font-size: clamp(15px, 1.7vw, 21px); margin: 2px auto 0; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; color: #3C4043; }
.pt-week-head .num.today { background: #1a73e8; color: #fff; }
.pt-hours { position: relative; }
.pt-hour-row { display: grid; grid-template-columns: 48px repeat(6, minmax(0, 1fr)); height: var(--pt-row, 44px); }
.pt-hour-row .lab { font-size: 10px; color: #70757A; text-align: right; padding-right: 7px; transform: translateY(-6px); }
.pt-hour-row .cell { border-left: 1px solid #E8EAED; border-top: 1px solid #E8EAED; }
.pt-hour-row .cell.today { background: rgba(26,115,232,.03); }
.pt-events { position: absolute; left: 48px; right: 0; top: 0; bottom: 0; }
.pt-ev { position: absolute; border-left: 3px solid; border-radius: 5px; padding: 4px 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.pt-ev .t { font-size: 11px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-ev .s { font-size: 10px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-ev.nuevo { animation: ptEv .5s var(--pt-ease) both, ptGlow 1.8s ease-out 2; }
@keyframes ptEv { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ptGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(26,229,122,.55); } 50% { box-shadow: 0 0 0 8px rgba(26,229,122,0); } }
.pt-now { position: absolute; left: 0; right: 0; height: 2px; background: #EA4335; }
.pt-now span { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #EA4335; }
.pt-thread { display: flex; flex-direction: column; gap: 14px; }
.pt-thread-card { background: #fff; border: 1px solid #D9D4C5; border-radius: 16px; padding: 15px; }
.pt-thread-card .k { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-mute-2); margin-bottom: 11px; }
.pt-thread-wa { background: #E7FFDB; border-radius: 14px; border-bottom-right-radius: 4px; padding: 9px 12px; font-size: 14px; line-height: 1.35; color: #0b1411; font-family: system-ui, -apple-system, sans-serif; }
.pt-thread-link { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--pt-green-deep); }
.pt-thread-link .bar { width: 1px; height: 16px; background: currentColor; opacity: .35; }
.pt-thread-link .s { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.pt-thread-ev { background: var(--pt-ink); color: var(--pt-cream); border-radius: 16px; padding: 15px; }
.pt-thread-ev .k { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-green); margin-bottom: 11px; }
.pt-thread-ev .n { font-size: 15px; font-weight: 600; }
.pt-thread-ev .d { font-size: 13px; color: var(--pt-mute); margin-top: 4px; }
.pt-tags { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.pt-tag { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 10.5px; padding: 5px 9px; border-radius: 999px; background: rgba(26,229,122,.14); color: var(--pt-green); }
.pt-tag.alt { background: rgba(242,238,229,.08); color: var(--pt-mute); }
.pt-fact { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #D9D4C5; }
.pt-fact .b { color: var(--pt-green-deep); font-size: 14px; line-height: 1.2; }
.pt-fact .t { font-size: 14.5px; font-weight: 600; }
.pt-fact .d { font-size: 13px; color: var(--pt-mute-2); line-height: 1.4; margin-top: 2px; }

/* ============================================================
   SECCIÓN DE VOZ
   La parada entre los canales y el calendario. Todo lo que se mueve
   aquí lo mueve el audio de verdad: el halo, la corona de barras y la
   onda leen el analizador de la pista, y el ancho de banda de esa
   lectura entra por --amp (0..1), que escribe el JS una vez por
   fotograma. Lo único que va solo son los anillos decorativos.

   La sección tiene dos vidas. En una pantalla ancha es la que sale de
   escena cuando el panel del calendario cruza por encima: entonces el
   JS le pone .cruza, crece en alto y su contenido se clava con sticky
   para aguantar el cruce. En móvil, o con "menos movimiento", .cruza
   no llega nunca y esto es una sección normal.
   ============================================================ */
.pt-voz {
  position: relative;
  --amp: 0;
  background:
    radial-gradient(120% 90% at 50% 6%, #0D1A2B 0%, #070E19 46%, var(--pt-ink) 100%);
}
.pt-voz-sticky {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--pt-nav-h) + clamp(20px, 4vh, 56px)) var(--pt-pad) clamp(48px, 7vh, 90px);
}
/* Con el carril montado la sección se alarga para que el panel del
   calendario tenga sobre qué cruzar, y el contenido se queda clavado. El
   alto y el margen negativo del carril (-164vh) son la misma cuenta: el
   JS la vuelve a leer del DOM, así que estos números se pueden tocar. */
.pt-voz.cruza { height: 260vh; }
.pt-voz.cruza .pt-voz-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; }

.pt-voz-cielo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* el pie de la sección se funde con el negro para que el canto del panel
   del calendario entre sobre una base limpia */
.pt-voz-velo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, var(--pt-ink) 4%, rgba(11,14,12,0));
  pointer-events: none;
}

.pt-voz-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 68px);
}

/* ---------- el orbe ---------- */
.pt-voz-orbe {
  position: relative; justify-self: center;
  width: min(clamp(280px, 30vw, 460px), 62vh);
  aspect-ratio: 1;
  display: grid; place-items: center;
  animation: ptVozRespira 8s ease-in-out infinite;
}
@keyframes ptVozRespira { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.014); } }

/* el halo lo escala el JS con la amplitud: es el latido de la voz */
.pt-voz-halo {
  position: absolute; left: 50%; top: 50%;
  width: 152%; height: 152%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--amp) * .15));
  border-radius: 50%; filter: blur(10px); pointer-events: none;
  background: radial-gradient(circle,
    rgba(26,229,122,.26) 0%, rgba(26,229,122,.06) 42%, rgba(26,229,122,0) 68%);
}
.pt-voz-pulso {
  position: absolute; left: 50%; top: 50%; width: 104%; height: 104%;
  margin: -52% 0 0 -52%; border-radius: 50%;
  border: 1px solid rgba(26,229,122,.24);
  animation: ptVozOnda 5s ease-out infinite;
}
.pt-voz-pulso.b { border-color: rgba(242,238,229,.12); animation-delay: 2.5s; }
@keyframes ptVozOnda { from { transform: scale(.82); opacity: .55; } to { transform: scale(1.5); opacity: 0; } }

/* barrido cónico: un reflejo que da la vuelta al orbe. El mask lo deja en
   un aro fino, si no sería un disco de color tapando el vídeo. */
.pt-voz-barrido {
  position: absolute; inset: -3%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(26,229,122,0) 0deg, rgba(26,229,122,.85) 90deg,
    rgba(242,238,229,.5) 190deg, rgba(26,229,122,0) 300deg);
  filter: blur(.6px); opacity: .72;
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 70%);
  mask: radial-gradient(circle, transparent 68%, #000 70%);
  animation: ptVozGira 14s linear infinite;
}
.pt-voz-punteado {
  position: absolute; inset: 2%; border-radius: 50%;
  border: 1px dashed rgba(242,238,229,.16);
  animation: ptVozGira 40s linear infinite reverse;
}
@keyframes ptVozGira { to { transform: rotate(360deg); } }

.pt-voz-corona { position: absolute; inset: -15%; width: 130%; height: 130%; pointer-events: none; }

.pt-voz-disco {
  position: relative; width: 76%; height: 76%;
  border-radius: 50%; overflow: hidden; background: #081019;
  box-shadow:
    0 0 0 1px rgba(242,238,229,.18),
    0 0 60px rgba(26,229,122,.22),
    inset 0 0 40px rgba(11,14,12,.5);
}
/* El vídeo ya viene recortado en cuadrado, así que `cover` lo deja a ras
   del disco. El 1.03 es solo el margen contra el redondeo de subpíxel:
   sin él, según el zoom, asomaba una línea del fondo por un borde. */
.pt-voz-disco video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.03); transform-origin: 50% 45%;
}
/* mientras el vídeo no ha llegado el disco no es un agujero negro */
.pt-voz-disco::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, #12324a, #081019 70%);
}
.pt-voz-disco video { position: relative; z-index: 1; }
.pt-voz-brillo {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 118%, rgba(26,229,122,.20), rgba(11,14,12,0) 55%);
}

.pt-voz-chapa {
  position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(11,14,12,.72); border: 1px solid rgba(242,238,229,.14);
  backdrop-filter: blur(8px);
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pt-mute);
}
.pt-voz-chapa i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pt-mute-2); flex: 0 0 auto;
}
.pt-voz.sonando .pt-voz-chapa i { background: var(--pt-green); animation: ptVozPip 1.6s ease-in-out infinite; }
.pt-voz.sonando .pt-voz-chapa { color: var(--pt-cream); border-color: rgba(26,229,122,.4); }
@keyframes ptVozPip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- la columna de texto ---------- */
/* El subtítulo y la línea de voz miden exactamente lo mismo, así que la
   medida se declara una vez aquí. Como `ch` depende del tamaño de letra del
   elemento, el tamaño también tiene que ser el mismo en los dos o la línea
   saldría más ancha o más estrecha que el texto. */
.pt-voz-copy { min-width: 0; --cc-tam: clamp(16px, 1.55vw, 21px); --cc-ancho: 34ch; }
.pt-voz-copy .pt-h2 { font-size: clamp(30px, 3.9vw, 62px); }
/* Caveat es manuscrita y su trazo se sale de la caja de la letra: la "t" de
   Booklift se comía el signo de cierre. El margen le hace sitio. */
.pt-voz-mano {
  font-family: "Caveat", cursive; font-style: normal; font-weight: 700;
  color: var(--pt-green); font-size: 1.14em; line-height: 1;
  margin-right: .12em;
}

/* La transcripción reserva su alto: si creciera y encogiera con cada frase,
   los mandos irían dando saltos durante toda la locución. */
/* El selector lleva .pt-voz delante a propósito: `.pt p { margin: 0 }` tiene
   más peso que una sola clase y se estaba comiendo este margen entero, que es
   por lo que el subtítulo salía pegado al titular. */
.pt-voz .pt-voz-cc {
  margin-top: clamp(42px, 7vh, 88px);
  min-height: 3.9em; max-width: var(--cc-ancho);
  font-size: var(--cc-tam); line-height: 1.45;
  color: rgba(242,238,229,.9); text-wrap: pretty;
}
.pt-voz-cc:empty::before { content: "\200b"; }

/* ---------- la línea de voz ----------
   voiceline.json viene en un lienzo de 1600x1200, pero su dibujo es una
   franja horizontal que ocupa una parte pequeña de ese alto. Aquí no se
   intenta encajarla a mano: el JS le pregunta al navegador dónde ha quedado
   el trazo una vez montado (getBBox) y le recorta el viewBox al alto justo,
   dejando el ancho del autor para que la línea siga entrando y saliendo por
   los cantos. De ahí sale también la proporción de la tira.

   Lo único que se decide desde aquí es la medida: exactamente la del
   subtítulo, y justo debajo de él. */
.pt-voz-onda {
  /* mismo ancho que el subtítulo, justo debajo de él */
  font-size: var(--cc-tam);
  width: 100%; max-width: var(--cc-ancho);
  margin-top: clamp(16px, 2.6vh, 32px);
}
/* La proporción la escribe el JS después de medir el dibujo ya montado; este
   valor es solo el de partida, para que no haya un salto de maquetación entre
   que la animación se pide y llega. Nada de overflow: la línea se ve entera,
   que es justo lo que se le pide. */
.pt-voz-linea {
  width: 100%; aspect-ratio: 7 / 1;
  pointer-events: none;
}
.pt-voz-linea svg { display: block; width: 100%; height: 100%; }

/* ---------- el único mando ----------
   Arriba a la derecha, fuera de la columna de texto: es un interruptor, no
   parte del discurso. Lo normal es que la voz ya esté sonando cuando se
   llega, así que su forma de partida es un círculo discreto. Solo si el
   navegador ha impedido el sonido (.mudo) se abre en píldora con texto y un
   aro que late, porque entonces sí hay algo que pedirle a quien mira. */
.pt-voz-mute {
  position: absolute; z-index: 3;
  top: calc(var(--pt-nav-h) + clamp(12px, 2.4vh, 30px));
  right: var(--pt-pad);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 50px; height: 50px; padding: 0;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242,238,229,.24);
  background: rgba(11,14,12,.62); color: var(--pt-cream);
  backdrop-filter: blur(8px);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: border-color .25s var(--pt-ease), color .25s var(--pt-ease),
              width .35s var(--pt-ease), padding .35s var(--pt-ease);
}
.pt-voz-mute:hover { border-color: var(--pt-green); color: var(--pt-green); }
.pt-voz-mute .ic-off, .pt-voz-mute .aro, .pt-voz-mute-txt { display: none; }
.pt-voz-mute .ic-on, .pt-voz-mute .ic-off { flex: 0 0 auto; }

.pt-voz.mudo .pt-voz-mute {
  width: auto; padding: 0 20px 0 15px;
  border-color: rgba(26,229,122,.45);
}
.pt-voz.mudo .pt-voz-mute .ic-on { display: none; }
.pt-voz.mudo .pt-voz-mute .ic-off,
.pt-voz.mudo .pt-voz-mute .aro,
.pt-voz.mudo .pt-voz-mute-txt { display: inline; }
.pt-voz.mudo .pt-voz-mute .aro { display: block; }

/* el aro que late: solo mientras haya algo que oír y esté en silencio */
.pt-voz-mute .aro {
  position: absolute; inset: -1px; border-radius: 999px; pointer-events: none;
  border: 1px solid var(--pt-green);
  animation: ptVozAro 2.4s var(--pt-ease) infinite;
}
@keyframes ptVozAro {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}

/* sin pista que oír no hay nada que activar */
.pt-voz.sin-pista .pt-voz-mute { display: none; }
.pt-voz-mute:focus-visible { outline: 2px solid var(--pt-green); outline-offset: 3px; }

/* ---------- voz en tableta y móvil ----------
   Sin carril no hay sticky que valga: la sección vuelve al flujo y todo se
   apila. El orbe manda, el resto se ordena debajo y centrado. */
@media (max-width: 980px) {
  .pt-voz-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(18px, 3vh, 34px); }
  .pt-voz-orbe { width: min(74vw, 46vh); }
  .pt-voz-cc { margin-left: auto; margin-right: auto; }
  .pt-voz-onda { margin-left: auto; margin-right: auto; }
  .pt-voz-copy .pt-kicker { justify-content: center; }
  /* el mando se queda donde estaba, arriba a la derecha, pero el orbe baja
     para no pasarle por debajo */
  .pt-voz-sticky { padding-top: calc(var(--pt-nav-h) + 76px); }
}
@media (max-width: 560px) {
  .pt-voz-onda { max-width: none; }
  .pt-voz-mute { width: 44px; height: 44px; font-size: 13px; }
  .pt-voz.mudo .pt-voz-mute { width: auto; padding: 0 16px 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-voz-orbe, .pt-voz-pulso, .pt-voz-barrido, .pt-voz-punteado,
  .pt-voz-mute .aro, .pt-voz.sonando .pt-voz-chapa i { animation: none; }
  .pt-voz.cruza { height: auto; }
  .pt-voz.cruza .pt-voz-sticky { position: static; height: auto; min-height: 100svh; }
}

/* ============================================================
   CARRIL HORIZONTAL DEL CALENDARIO
   Salir de los cuatro canales no es bajar, es cruzar: el panel entra
   desde la derecha con el scroll y sus piezas van girando y
   apareciendo. La clase .activo la pone el JS y solo donde cabe
   (ancho > 900px, alto suficiente y sin "menos movimiento"); sin ella
   todo esto queda inerte y la sección es una sección normal.
   ============================================================ */
.pt-hpan { position: relative; }
/* El margen negativo es lo que hace que esto NO se lea como una sección que
   sube: solapa el carril con el último tramo de la pizarra de canales, de
   modo que mientras el panel cruza, la pizarra sigue clavada donde estaba.
   Las medidas exactas las vuelve a leer el JS del DOM, así que estos números
   se pueden tocar sin descuadrar la sincronía. */
.pt-hpan.activo { height: 300vh; margin-top: -164vh; z-index: 200; }
.pt-hpan-sticky { position: relative; overflow: hidden; }
.pt-hpan.activo .pt-hpan-sticky { position: sticky; top: 0; height: 100svh; }

.pt-hpan-panel { position: relative; background: #FBFAF8; }
.pt-hpan.activo .pt-hpan-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  /* La barra de navegación va fija encima de todo: si el panel se centra en
     el alto completo, su titular acaba debajo de ella. Se reserva su hueco
     arriba y el contenido se centra en lo que queda. */
  padding: calc(var(--pt-nav-h) + 10px) 0 26px;
  transform: translate3d(calc(var(--pan, 0) * 1vw), 0, 0);
  will-change: transform;
  /* sombra en el canto de entrada: da el volumen de una lámina que pasa por
     delante en vez de un cambio de color */
  box-shadow: -40px 0 90px -18px rgba(11,14,12,.55);
}
/* fondo de curvas concéntricas; se pinta en canvas y no recibe eventos: el
   puntero lo escucha el propio panel */
.pt-hpan-fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pt-hpan-track { position: relative; z-index: 1; width: 100%; flex: 0 0 100%; min-width: 0; }
.pt-hpan.activo .pt-hpan-track {
  transform: scale(var(--fit, 1));
  transform-origin: center center;
}
/* la pizarra de canales sale por la izquierda mientras entra el panel */
.pt-pizarra .pt-stage-sticky { will-change: transform; }
/* dentro del carril la sección es transparente: el fondo lo pone el canvas */
.pt-hpan #calendario { background: transparent; }
.pt-hpan.activo #calendario { padding-top: 0; padding-bottom: 0; }
/* a plena página el titular no necesita ser el mayor de la web, y el hueco
   que suelta es alto que se lleva el calendario */
.pt-hpan.activo .pt-cal-head { margin-bottom: clamp(14px, 2.2vh, 30px); }
.pt-hpan.activo #calendario .pt-h2 { font-size: clamp(26px, 3vw, 48px); }
.pt-hpan.activo .pt-gcal-note { margin-top: 12px; padding: 9px; }

/* Cada pieza llega girada y se endereza. El mismo transform lleva la
   inclinación del puntero (--tx/--ty), porque si fueran dos reglas
   distintas sobre el mismo elemento la segunda pisaría a la primera. */
.pt-hpan [data-pan] {
  opacity: var(--p, 1);
  transform:
    translate3d(calc((1 - var(--p, 1)) * 110px), 0, 0)
    rotateX(calc(var(--tx, 0) * 4deg + (1 - var(--p, 1)) * 7deg))
    rotateY(calc(var(--ty, 0) * 5deg + (1 - var(--p, 1)) * -30deg));
  transform-origin: left center;
}
.pt-hpan [data-tilt] { transition: transform .22s var(--pt-ease), box-shadow .22s var(--pt-ease); }
.pt-hpan [data-tilt]:hover { box-shadow: 0 30px 60px -34px rgba(11,14,12,.5); }
/* La perspectiva tiene que estar en el padre directo de cada pieza: la del
   carril solo alcanza a su hijo inmediato, que es la sección entera. */
.pt-cal-head, .pt-cal-grid, .pt-thread { perspective: 1200px; }

/* Sin carril (móvil, pantallas bajas) las piezas entran igualmente, pero
   con un reveal normal en cuanto asoman. La clase .listo la pone el JS:
   si el JS no llegara a correr, nada se queda escondido. */
.pt-hpan.listo:not(.activo) [data-pan] {
  opacity: 0; transform: translateX(38px);
  transition: opacity .6s var(--pt-ease), transform .7s var(--pt-ease);
}
.pt-hpan.listo:not(.activo) [data-pan].dentro { opacity: 1; transform: none; }

/* ---------------- calendario, piezas vivas ----------------
   El panel no es una captura: los eventos responden al puntero, los días
   del mini calendario se marcan y las celdas libres se iluminan. */
.pt-ev { cursor: pointer; transition: transform .18s var(--pt-ease), box-shadow .18s var(--pt-ease); }
.pt-ev:hover { transform: translateY(-2px) scale(1.035); box-shadow: 0 10px 20px -8px rgba(60,64,67,.5); z-index: 4; }
.pt-ev:active { transform: translateY(-1px) scale(1.01); }
/* backwards y no both: con both el fotograma final del alta se quedaba
   fijado en transform:none y se comía el hover de ahí en adelante */
.pt-ev.nuevo { animation: ptEv .5s var(--pt-ease) backwards, ptGlow 1.8s ease-out 2; }
.pt-mini span { transition: background .2s, color .2s, transform .2s; }
.pt-mini span:hover { background: #E8F0FE; color: #1a73e8; transform: scale(1.12); cursor: default; }
.pt-mini span.today:hover { background: #1557b0; color: #fff; }
.pt-hour-row .cell { transition: background .18s; }
.pt-hour-row .cell:hover { background: rgba(26,229,122,.09); }
.pt-callist { transition: color .2s, transform .2s; }
.pt-callist:hover { color: #1a73e8; transform: translateX(3px); }
.pt-gcal-chip, .pt-gcal-create { transition: background .2s, box-shadow .2s; }
.pt-gcal-chip:hover { background: #F1F3F4; }
.pt-gcal-create:hover { box-shadow: 0 2px 8px rgba(60,64,67,.35); }
.pt-tag { transition: transform .2s var(--pt-ease), background .2s; }
.pt-thread-ev:hover .pt-tag { transform: translateY(-2px); }

/* ---------------- problema / datos ---------------- */
.pt-leak { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(32px, 5vw, 60px); }
.pt-leak-q { font-size: clamp(24px, 3.4vw, 50px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.pt-leak-q .strike { text-decoration: line-through; text-decoration-color: var(--pt-coral); text-decoration-thickness: 4px; color: var(--pt-mute-2); }
.pt-leak-q .accent { color: var(--pt-coral); font-style: italic; }
.pt-big { font-size: clamp(50px, 8vw, 116px); font-weight: 800; line-height: .85; letter-spacing: -0.04em; color: var(--pt-coral); }
.pt-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3.6vw, 48px); margin-top: clamp(38px, 6vw, 70px); }
.pt-data > div { border-top: 2px solid currentColor; padding-top: 24px; }
.pt-data .n { font-size: clamp(44px, 6.6vw, 110px); font-weight: 800; line-height: .9; letter-spacing: -0.04em; }
.pt-data .p { font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.35; margin-top: 16px; max-width: 300px; }

/* ---------------- producto ---------------- */
.pt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(32px, 5vw, 60px); }
.pt-card { border: 1px solid #D9D4C5; border-radius: 20px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.pt-card .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--pt-ink); color: var(--pt-green); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pt-card h3 { font-size: clamp(18px, 1.9vw, 21px); font-weight: 600; letter-spacing: -0.01em; }
.pt-card p { font-size: 15px; color: var(--pt-mute-2); line-height: 1.5; }

/* ---------------- pasos ---------------- */
.pt-step { display: grid; grid-template-columns: 100px 1fr 1fr; gap: clamp(18px, 3vw, 48px); padding: clamp(28px, 4vw, 48px) 0; border-top: 1.5px solid #D9D4C5; align-items: center; }
.pt-step-num { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--pt-ink); display: inline-flex; align-items: center; justify-content: center; font-family: "Chivo Mono", ui-monospace, monospace; font-size: 21px; font-weight: 800; }
.pt-step h3 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.pt-step p { font-size: clamp(15px, 1.6vw, 16.5px); color: var(--pt-mute-2); line-height: 1.55; max-width: 460px; }
.pt-step-card { background: #fff; border: 1px solid #D9D4C5; border-radius: 18px; padding: 20px; }
.pt-step-card .k { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; color: var(--pt-green-deep); }
.pt-step-card .v { font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; letter-spacing: -0.01em; margin-top: 9px; }
.pt-step-card .d { font-size: 13.5px; color: var(--pt-mute-2); margin-top: 7px; line-height: 1.4; }

/* ---------------- comparativa ---------------- */
.pt-cmp { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; border-top: 2px solid var(--pt-ink); margin-top: clamp(26px, 4vw, 50px); }
.pt-cmp .h { padding: 16px 18px; font-size: clamp(16px, 1.7vw, 18px); font-weight: 700; letter-spacing: -0.01em; }
.pt-cmp .h.bk { background: #F6FBF7; }
.pt-cmp .h.other { color: var(--pt-mute-2); font-weight: 600; }
.pt-cmp .l { padding: 18px 0; border-top: 1px solid #E8E2D3; font-size: clamp(14px, 1.5vw, 15.5px); font-weight: 600; }
.pt-cmp .c { padding: 18px; border-top: 1px solid #E8E2D3; display: flex; gap: 10px; font-size: clamp(13.5px, 1.4vw, 15px); line-height: 1.4; }
.pt-cmp .c.bk { background: #F6FBF7; }
.pt-cmp .c.bk .m { color: var(--pt-green-deep); }
.pt-cmp .c.other { color: var(--pt-mute-2); }
.pt-cmp .m { flex: 0 0 auto; }

/* ---------------- precios ---------------- */
.pt-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(30px, 5vw, 56px); align-items: stretch; }
.pt-plan { border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 13px; background: #fff; border: 1px solid #D9D4C5; }
.pt-plan.pro { background: var(--pt-ink); color: var(--pt-cream); border-color: var(--pt-ink); }
.pt-plan-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-plan-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.pt-plan-tag { font-family: "Chivo Mono", ui-monospace, monospace; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: var(--pt-cream); color: var(--pt-mute-2); }
.pt-plan.pro .pt-plan-tag { background: rgba(26,229,122,.16); color: var(--pt-green); }
.pt-plan-desc { font-size: 14.5px; color: var(--pt-mute-2); line-height: 1.45; }
.pt-plan.pro .pt-plan-desc { color: var(--pt-mute); }
.pt-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.pt-plan-price .p { font-size: clamp(36px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; }
.pt-plan-price .u { font-size: 14px; color: var(--pt-mute-2); }
.pt-plan.pro .pt-plan-price .u { color: var(--pt-mute); }
.pt-plan-items { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pt-plan-items div { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.35; }
.pt-plan-items .c { color: var(--pt-green-deep); flex: 0 0 auto; }
.pt-plan.pro .pt-plan-items .c { color: var(--pt-green); }
.pt-plan .pt-cta-btn { margin-top: auto; }

/* ---------------- api agencias ---------------- */
.pt-api { position: relative; overflow: hidden; }
.pt-api::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 380px at 88% 12%, rgba(26,229,122,.16), transparent 62%); }
.pt-api-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 72px); align-items: center; }
/* Bifurcación de público de la sección de API. Dos tarjetas en vez de un
   párrafo: la pregunta que se hace quien llega aquí es "¿esto va conmigo?",
   y eso se responde antes leyendo dos rótulos que cuatro líneas de texto.
   La de la izquierda va apagada a propósito —es la salida— y la de la
   derecha encendida en verde, que es la que sigue hacia abajo. */
.pt-api-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 560px; margin: 14px 0 20px;
}
.pt-api-quien {
  padding: 13px 15px 14px; border-radius: 12px;
  border: 1px solid rgba(242,238,229,.16); background: rgba(242,238,229,.035);
}
.pt-api-quien .ic { display: block; color: var(--pt-mute-2); margin-bottom: 7px; }
.pt-api-quien .t { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.pt-api-quien .d { font-size: 12.5px; line-height: 1.45; color: var(--pt-mute-2); margin-top: 4px; }
.pt-api-quien a,
.pt-api-quien .aqui {
  display: inline-block; margin-top: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--pt-mute); text-decoration: none;
}
.pt-api-quien a:hover { color: #F2EEE5; }

/* La tarjeta "es esto": marcada, porque es la que continúa. */
.pt-api-quien.es { border-color: rgba(26,229,122,.42); background: rgba(26,229,122,.08); }
.pt-api-quien.es .ic { color: #1AE57A; }
.pt-api-quien.es .aqui { color: #1AE57A; }

@media (max-width: 560px) {
  .pt-api-split { grid-template-columns: 1fr; }
}
.pt-api-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(26px, 4vw, 44px); }
.pt-api-facts > div { border-top: 1px solid rgba(242,238,229,.16); padding-top: 13px; }
.pt-api-facts .t { font-size: 15.5px; font-weight: 600; }
.pt-api-facts .d { font-size: 13px; color: var(--pt-mute-2); margin-top: 5px; line-height: 1.4; }
.pt-term { background: var(--pt-ink-2); border: 1px solid var(--pt-line); border-radius: 20px; overflow: hidden; min-width: 0; }
.pt-term-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--pt-line); font-family: "Chivo Mono", ui-monospace, monospace; font-size: 12px; color: var(--pt-mute-2); }
.pt-term-bar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; position: relative; }

/* Los símbolos de la ventana. Van de máscara y no de texto: a 9 px, una × o
   un guion de tipografía salen borrosos y descuadrados, y la máscara pinta
   el trazo exacto. Aparecen los tres a la vez al entrar en la barra —así se
   comporta macOS: no espera a que señales un punto concreto— y el color es
   un oscuro traslúcido, que sobre cada punto se lee como un tono más de su
   propio color. */
.pt-term-bar i::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(6, 12, 8, .74);
  -webkit-mask: center / 9px 9px no-repeat; mask: center / 9px 9px no-repeat;
  opacity: 0; transition: opacity .16s var(--pt-ease);
}
.pt-term-bar i.cerrar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Cpath%20d=%22M3.1%203.1%206.9%206.9M6.9%203.1%203.1%206.9%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Cpath%20d=%22M3.1%203.1%206.9%206.9M6.9%203.1%203.1%206.9%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.pt-term-bar i.minimizar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Cpath%20d=%22M2.7%205h4.6%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Cpath%20d=%22M2.7%205h4.6%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.pt-term-bar i.ampliar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Cpath%20d=%22M3.4%206.6V4.6L5.4%206.6Z%22/%3E%3Cpath%20d=%22M6.6%203.4V5.4L4.6%203.4Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Cpath%20d=%22M3.4%206.6V4.6L5.4%206.6Z%22/%3E%3Cpath%20d=%22M6.6%203.4V5.4L4.6%203.4Z%22/%3E%3C/svg%3E"); }
/* El punto de en medio vive apagado; con los símbolos fuera se enciende como
   los otros dos, que es lo que hace la barra de verdad. Su opacidad se
   escribe aquí y no en el HTML: en línea ganaría siempre y no habría hover
   que la levantase. */
.pt-term-bar i.minimizar { opacity: .4; transition: opacity .16s var(--pt-ease); }
.pt-term-bar:hover i.minimizar { opacity: 1; }
.pt-term-bar:hover i::before { opacity: 1; }
.pt-term pre { margin: 0; padding: 20px; font-family: "Chivo Mono", ui-monospace, monospace; font-size: clamp(11px, 1.1vw, 13px); line-height: 1.7; color: #D7DCD6; overflow-x: auto; }
.pt-term .g { color: var(--pt-green); }
.pt-term .c { color: var(--pt-mute-2); }

/* ---------------- cierre ---------------- */
.pt-close { background: var(--pt-green); color: var(--pt-ink); padding: 0 0 clamp(60px, 9vw, 120px); overflow: hidden; }
.pt-marquee { display: flex; width: max-content; padding: clamp(20px, 3vw, 34px) 0; border-bottom: 2px solid var(--pt-ink); animation: ptMarquee 26s linear infinite; }
.pt-marquee > div { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.pt-marquee span { display: inline-flex; align-items: center; gap: 18px; font-size: clamp(20px, 3vw, 42px); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.pt-marquee i { width: 10px; height: 10px; border-radius: 50%; background: var(--pt-ink); display: inline-block; }
@keyframes ptMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pt-close-in {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(18px, 2.6vw, 34px) var(--pt-pad) 0;
  text-align: center;
  /* Centrado por layout y no con márgenes automáticos: así no depende del
     ancho del bloque contenedor, que con la marquesina al lado no siempre
     es el que uno espera. */
  display: flex; flex-direction: column; align-items: center;
}
.pt-close-h { font-size: clamp(40px, 8vw, 132px); font-weight: 800; line-height: .9; letter-spacing: -0.05em; }
.pt-close-p { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; margin: 24px auto 0; max-width: 620px; }
.pt-close-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pt-close .pt-cta-btn { border-color: var(--pt-ink); }
.pt-close-ghost { color: var(--pt-ink); }


/* ---------------- secciones anteriores ----------------
   El bloque problema → precios se reutiliza tal cual de la portada
   anterior: vive sobre fondo crema y tinta oscura, así que el
   contenedor los restituye. Los reset de .pt se devuelven a su valor
   por defecto aquí dentro, porque esas secciones cuentan con los
   márgenes propios de cada etiqueta. */
.pt-legacy { background: var(--pt-cream); color: var(--pt-ink); }
.pt-legacy h1, .pt-legacy h2, .pt-legacy h3, .pt-legacy p { margin: revert; }
.pt-legacy a:not(.btn) { color: inherit; }
.pt-legacy .btn-accent { background: var(--pt-green); color: var(--pt-ink); }

/* ---------------- apariciones del bloque anterior ----------------
   Cada rejilla entra escalonada (--i lo pone el JS) y llegando de un lado
   distinto según su posición, con un punto de giro para que no parezca una
   lista que sube. De la API de agencias hacia abajo no se toca nada. */
.pt-legacy .wrap, .pt-legacy .stats-grid, .pt-legacy .feature-grid,
.pt-legacy .steps-stack, .pt-legacy .pricing-grid, .pt-legacy .prod-list,
.pt-legacy .compare, .pt-legacy .leak-grid { perspective: 1400px; }
.pt-legacy .pt-apa {
  opacity: 0;
  transform: translate3d(var(--dx, 0), 34px, 0) rotateX(10deg);
  transition: opacity .7s var(--pt-ease), transform .85s var(--pt-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.pt-legacy .pt-apa:nth-child(odd)  { --dx: -26px; }
.pt-legacy .pt-apa:nth-child(even) { --dx: 26px; }
.pt-legacy .pt-apa.dentro { opacity: 1; transform: none; }
/* estas dos traen su propio hover de style.css: se les devuelve, porque la
   regla de .dentro es más específica y se lo comía */
.pt-legacy .feature-card.pt-apa.dentro:hover { transform: translateY(-4px); }
.pt-legacy .price-card.pt-apa.dentro:hover { transform: translateY(-6px); }
.pt-legacy .step-row.pt-apa.dentro:hover { transform: translateX(4px); }
.pt-legacy .step-row { transition: transform .3s var(--pt-ease); }

/* ---------------- fondos en movimiento del bloque anterior ----------------
   Manchas de color que flotan y una trama que corre despacio. Todo va en
   pseudoelementos, por debajo del contenido y sin recibir eventos, así que
   ninguna sección cambia de estructura ni de altura. */
.pt-legacy section { position: relative; }
.pt-legacy section > .wrap { position: relative; z-index: 1; }
.pt-legacy section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
#product::before, #pricing::before {
  background:
    radial-gradient(440px 320px at 10% 16%, rgba(26,229,122,.13), transparent 62%),
    radial-gradient(380px 300px at 90% 84%, rgba(255,92,57,.09), transparent 64%);
  animation: ptFlota 20s ease-in-out infinite alternate;
}
/* La comparativa lleva un fondo PROPIO, distinto del de producto y precios.
   Con la misma mancha flotante que las otras dos secciones, el bloque se
   leía como "más de lo mismo" justo donde el argumento cambia de tono.

   Son dos capas de naturaleza distinta a las manchas:

     ::before  una retícula de puntos muy tenue que deriva en diagonal.
               Da textura de "tabla" sin dibujar ninguna línea que compita
               con las filas reales de la comparativa.
     ::after   una banda de luz ancha y lentísima que barre de izquierda a
               derecha, en el verde de la marca. Refuerza la lectura por
               columnas —que es lo que se pide aquí— en vez de dispersar
               la mirada.

   Ambas por debajo del contenido (.wrap lleva z-index 1) y sin eventos:
   la tabla no cambia de estructura ni deja de ser seleccionable. Las
   opacidades son deliberadamente bajas (≤ .07); sobre el blanco de la
   sección se notan como textura, no como decoración. */
#compare::before {
  background-image:
    radial-gradient(rgba(11,14,12,.10) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .5;
  animation: ptPuntos 38s linear infinite;
}
#compare::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(26,229,122,.07) 45%,
    rgba(26,229,122,.04) 55%,
    transparent 70%);
  background-size: 260% 100%;
  animation: ptBarrido 34s ease-in-out infinite;
}
/* El desplazamiento es del tamaño exacto de la trama, así que al reiniciarse
   el ciclo la retícula cae donde estaba: se mueve sin dar un salto. */
@keyframes ptPuntos { to { background-position: 22px 44px; } }
@keyframes ptBarrido {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}
#how::before {
  background-image: repeating-linear-gradient(115deg, rgba(11,14,12,.055) 0 1px, transparent 1px 28px);
  background-position: 0 0;
  animation: ptTrama 24s linear infinite;
}
@keyframes ptFlota {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2.2%, 0) scale(1.07); }
}
@keyframes ptTrama { to { background-position: 320px 0; } }

/* el texto de cierre va centrado con el resto del bloque */
.pt-close-p {
  text-align: center;
  margin: 24px auto 0;
  max-width: 620px;
  /* explícito y con !important porque este párrafo hereda de dos hojas:
     la regla de .pt y la de style.css, y bastaba con que una ganara para
     que quedara alineado a la izquierda. */
  text-align: center !important;
}

/* ---------------- footer ---------------- */
.pt-footer { background: var(--pt-ink); padding: clamp(50px, 7vw, 80px) var(--pt-pad) 40px; }
.pt-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
.pt-footer h4 { font-size: 13px; font-family: "Chivo Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-mute-2); margin-bottom: 13px; font-weight: 600; }
.pt-foot-links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.pt-foot-links a { color: #D7DCD6; }
.pt-foot-links a:hover { color: var(--pt-green); }
.pt-foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(30px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--pt-line); font-size: 13px; color: var(--pt-mute-2); }
.pt-foot-bottom button { background: none; border: none; color: var(--pt-mute-2); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* ============================================================
   ADAPTACIÓN A PANTALLA
   ============================================================ */

/* portátiles: la rejilla del calendario aprieta primero */
@media (max-width: 1180px) {
  .pt-cal-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-thread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .pt-thread-link { grid-column: 1 / -1; flex-direction: row; }
  .pt-thread-link .bar { width: 16px; height: 1px; }
}

@media (max-width: 1024px) {
  .pt-nav-links { display: none; }
  .pt-nav-login { display: none; }
  .pt-burger { display: inline-flex; }
  .pt-api-grid { grid-template-columns: 1fr; }
  .pt-cmp { grid-template-columns: 1fr 1fr; }
  .pt-cmp .l { grid-column: 1 / -1; padding-bottom: 6px; border-top: 1px solid #E8E2D3; }
  .pt-cmp .h:first-of-type { display: none; }
}

/* tablet y móvil: el escenario deja de ser a tres columnas */
@media (max-width: 900px) {
  .pt-hero-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vh, 48px); }
  .pt-anchor { justify-self: center; }
  .pt-hero { min-height: 0; padding-bottom: clamp(60px, 10vh, 90px); }
  .pt-scrollhint { position: static; margin: 26px auto 0; justify-content: center; }

  .pt-stage { height: 420vh; }
  .pt-stage-sticky {
    grid-template-columns: 1fr; grid-template-rows: auto auto;
    align-content: center; justify-items: center; text-align: center;
    gap: clamp(12px, 2vh, 24px); padding-top: calc(var(--pt-nav-h) + 8px);
  }
  .pt-stage-copy { max-width: 560px; }
  .pt-stage-copy .pt-kicker { justify-content: center; }
  .pt-stage-stat .l { max-width: none; }
  .pt-index { display: none; }

  .pt-leak { grid-template-columns: 1fr; }
  .pt-data { grid-template-columns: 1fr; gap: 28px; }
  .pt-data .p { max-width: none; }
  .pt-cards { grid-template-columns: 1fr; }
  .pt-plans { grid-template-columns: 1fr; }
  .pt-step { grid-template-columns: 60px 1fr; row-gap: 18px; }
  .pt-step-card { grid-column: 1 / -1; }
  .pt-api-facts { grid-template-columns: 1fr; gap: 14px; }
  .pt-foot-grid { grid-template-columns: 1fr 1fr; }
  .pt-gcal-body { grid-template-columns: 1fr; }
  .pt-gcal-rail { display: none; }
}

@media (max-width: 560px) {
  .pt-nav-cta { padding: 9px 14px; font-size: 13px; }
  .pt-hero-ctas .pt-cta-btn { flex: 1 1 auto; }
  .pt-trust { gap: 18px; }
  .pt-trust > div { flex: 1 1 40%; }
  .pt-cmp { grid-template-columns: 1fr; }
  .pt-cmp .h { padding: 12px 14px; }
  .pt-cmp .c { padding: 12px 14px; }
  .pt-foot-grid { grid-template-columns: 1fr; }
  .pt-week-head, .pt-hour-row { grid-template-columns: 34px repeat(6, minmax(0, 1fr)); }
  .pt-events { left: 34px; }
  .pt-gcal-bar .pt-gcal-chip, .pt-gcal-bar .arrows { display: none; }
}

/* alturas cortas (móvil apaisado, portátiles bajos) */
@media (max-height: 620px) and (min-width: 901px) {
  .pt-scrollhint { display: none; }
}

/* Si el sistema pide menos movimiento se apaga todo lo que se mueve solo:
   el escenario pasa a ser una lista normal y el móvil se queda quieto. */
@media (prefers-reduced-motion: reduce) {
  .pt-marquee { animation: none; }
  .pt-legacy section::before { animation: none; }
  #compare::after { animation: none; }
  .pt-legacy .pt-apa { opacity: 1; transform: none; transition: none; }
  .pt-hpan.activo { height: auto; }
  .pt-hpan.listo:not(.activo) [data-pan] { opacity: 1; transform: none; transition: none; }
  .pt-call-ring, .pt-wave i, .pt-cal-pill .pip, .pt-call-badge .pip { animation: none; }
  .pt-bb, .pt-tr, .pt-ev.nuevo { animation: none; }
  .pt-stage { height: auto; }
  .pt-stage-sticky { position: static; height: auto; padding: 60px var(--pt-pad); }
}

/* ============================================================
   PASADA DE MÓVIL
   Menos texto y menos densidad: en una pantalla de mano lo que
   convence es el móvil de la demo y los titulares, no los párrafos
   de apoyo. Se ocultan (no se borran: en escritorio siguen ahí).
   ============================================================ */
@media (max-width: 900px) {
  /* alturas reales del navegador móvil, con las barras que aparecen y
     desaparecen; svh evita el salto que da 100vh en iOS */
  .pt-hero { min-height: auto; }
  .pt-stage-sticky { height: 100svh; }

  .pt-scrollhint { display: none; }
  .pt-stage-b { display: none; }          /* basta el titular del canal */
  .pt-api-facts { display: none; }
  .pt-cal-pill { display: none; }
  .pt-thread-card .k, .pt-thread-ev .k { font-size: 10px; }

  .pt-section { padding: clamp(56px, 12vw, 80px) var(--pt-pad); }
  .pt-h2 { font-size: clamp(26px, 7vw, 40px); }
  .pt-lead { font-size: 15.5px; }
  .pt-hero-tag { font-size: 15.5px; }
  .pt-h1 { font-size: clamp(36px, 11vw, 60px); }

  /* el calendario completo no se lee en 390px: se deja la semana */
  .pt-gcal-bar { padding: 10px 12px; gap: 8px; }
  .pt-gcal-bar .title, .pt-gcal-bar .arrows { display: none; }

  /* las secciones anteriores traen su propia densidad: se comprime */
  .pt-legacy .section-pad { padding: 56px 0; }
  .pt-legacy .section-lede { font-size: 15.5px; }
}

@media (max-width: 560px) {
  .pt-nav { padding: 12px 16px; gap: 10px; }
  /* La barra de arriba no cabía entera en una pantalla de mano: entre la
     marca, el conmutador de idioma y el botón de prueba se pasaba del ancho
     y el botón salía cortado por el borde. El idioma se queda solo dentro
     del menú (ahí sigue estando) y el resto encaja sin recortes. */
  .pt-nav > .pt-nav-actions > .pt-lang { display: none; }
  .pt-nav-actions { gap: 8px; min-width: 0; }
  .pt-brand { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pt-nav-cta { flex: 0 0 auto; padding: 9px 13px; font-size: 12.5px; }
  .pt-burger { flex: 0 0 auto; }
  .pt-brand { font-size: 17px; }
  .pt-lang button { padding: 5px 9px; font-size: 11px; }
  .pt-hero-ctas { flex-direction: column; align-items: stretch; }
  .pt-close-h { font-size: clamp(34px, 13vw, 56px); }
  .pt-marquee span { font-size: clamp(18px, 6vw, 26px); }
  .pt-thread { grid-template-columns: 1fr; }
  .pt-gcal-user .pt-gcal-chip { display: none; }
}

/* teléfonos estrechos (SE, Android pequeños): la barra sigue en una línea */
@media (max-width: 370px) {
  .pt-nav { padding: 12px 13px; }
  .pt-nav-cta { padding: 8px 11px; font-size: 12px; }
  .pt-brand { font-size: 16px; }
  .pt-burger { width: 38px; height: 38px; }
}

/* móvil en horizontal: el escenario fijo no cabe, se suelta */
@media (max-height: 480px) and (orientation: landscape) {
  .pt-stage { height: auto; }
  .pt-stage-sticky { position: static; height: auto; padding: 40px var(--pt-pad); }
  .pt-phone-layer { display: none; }
}

/* ============================================================
   PIZARRA DEL ESCENARIO DE CANALES
   Solo cambia el aspecto de la sección #canales: el escenario
   pasa a leerse como una pizarra con apuntes de tiza. La mecánica
   (scroll → canal) sigue siendo la de portada.js, que no se toca.
   Todo el decorado va EN EL FLUJO, no en absoluto: así ninguna
   flecha puede cruzarse con el móvil por mucho que cambien el
   alto de la ventana o el tamaño del aparato.
   ============================================================ */
.pt-pizarra .pt-stage-sticky {
  background:
    radial-gradient(ellipse 130% 90% at 50% 0%, #16302A, #0C1512 68%),
    var(--pt-ink);
  position: sticky;   /* explícito: de él cuelga el polvo de tiza */
}

/* Polvo y borrones: manchas suaves, nada de retícula. */
.pt-board-dust {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 26%, rgba(234,243,238,.05), transparent 12%),
    radial-gradient(circle at 80% 64%, rgba(234,243,238,.045), transparent 14%),
    radial-gradient(circle at 54% 90%, rgba(234,243,238,.04), transparent 11%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.45));
}
.pt-pizarra .pt-stage-copy,
.pt-pizarra .pt-index,
.pt-pizarra .pt-anchor { position: relative; z-index: 1; }

.pt-pizarra .pt-stage-h { color: #EAF3EE; text-shadow: 0 0 10px rgba(234,243,238,.16); }
.pt-pizarra .pt-stage-b { color: rgba(234,243,238,.62); }

.pt-chalk-under {
  display: block; width: 100%; max-width: 460px; height: 14px;
  margin-top: 8px; color: rgba(124,255,178,.65);
}

/* El apunte de la conversión, con la doble flecha entre las dos cifras. */
.pt-board-rail {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(14px, 2.4vh, 24px);
  font-family: "Caveat", "Bricolage Grotesque", cursive;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1;
  color: #FFE96B;
}
.pt-board-arrows { width: 34px; height: 18px; flex: none; color: rgba(234,243,238,.75); }

/* Flechas de tiza: viven dentro de su columna y apuntan al hueco donde
   está el móvil, sin llegar a pisarlo. */
.pt-chalk-arrow { display: block; width: 118px; height: 52px; color: rgba(124,255,178,.5); }
.pt-chalk-arrow-r { margin: clamp(10px, 2vh, 20px) 0 0 auto; }
.pt-chalk-arrow-l { margin: 0 auto clamp(8px, 1.6vh, 16px) 0; }

/* Índice de canales, escrito a mano. */
.pt-pizarra .pt-index-row { border-top: 1px dashed rgba(234,243,238,.2); }
.pt-pizarra .pt-index-row .num {
  font-family: "Caveat", "Chivo Mono", cursive; font-size: 24px;
  color: rgba(234,243,238,.6); min-width: 26px;
}
.pt-pizarra .pt-index-row.on .num { color: #EAF3EE; }
.pt-pizarra .pt-index-bar { background: rgba(234,243,238,.14); }
.pt-pizarra .pt-index-lbl { font-family: "Caveat", cursive; font-size: 18px; letter-spacing: .04em; }

.pt-board-247 {
  /* Baja un cuarto de su propio alto respecto al índice: pegado a la barra
     de progreso quedaba apelotonado. */
  transform: translateY(25%);
  display: flex; align-items: center; gap: 10px; margin-top: clamp(14px, 2.4vh, 22px);
  font-family: "Caveat", cursive; font-size: 20px; color: #57E0FF;
}
.pt-board-247 b {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  border: 2px dashed rgba(87,224,255,.65);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 19px;
}

.pt-board-hint {
  position: absolute; left: var(--pt-pad); bottom: clamp(12px, 2.4vh, 26px); z-index: 1;
  font-family: "Caveat", cursive; font-size: 21px; color: rgba(234,243,238,.5);
}

/* ---------- pizarra en tableta y móvil ---------- */
@media (max-width: 900px) {
  /* Tras la vuelta de la portada al escenario, el móvil se queda centrado
     en el hueco que dejan el titular y el índice, en vez de caer al fondo. */
  .pt-pizarra .pt-stage-sticky {
    grid-template-rows: auto 1fr auto auto;
    align-content: stretch;
    gap: clamp(8px, 1.4vh, 18px);
    padding-bottom: clamp(10px, 2vh, 20px);
  }
  .pt-pizarra .pt-stage-copy { align-self: start; }
  .pt-pizarra .pt-anchor { align-self: center; min-height: 0; }

  .pt-chalk-under { margin: 8px auto 0; }
  .pt-board-rail { font-size: 19px; margin-top: 10px; gap: 9px; }
  .pt-board-arrows { width: 28px; height: 15px; }
  /* En una pantalla de mano no hay margen para las flechas largas: taparían
     el aparato, que es justo lo que hay que mirar. */
  .pt-chalk-arrow, .pt-board-247 { display: none; }

  /* El índice vuelve a verse, pero como cuatro apuntes en una tira. */
  .pt-pizarra .pt-index {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; width: 100%; max-width: none; align-self: end;
    /* Se despega del borde de abajo: pegada chocaba con la línea donde
       arranca la sección siguiente. Antes eran 10svh fijos, que sumados al
       alto del aparato se salían de la caja y cortaban esta misma tira; el
       hueco lo cede ahora el móvil, que se mide contra el contenedor real
       (ver huecoEscenario en portada.js). */
    margin-bottom: clamp(22px, 5vh, 58px);
    margin-bottom: clamp(22px, 5svh, 58px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .pt-pizarra .pt-index-row {
    border: 1px dashed rgba(234,243,238,.2); border-radius: 999px;
    padding: 5px 11px; gap: 7px;
  }
  .pt-pizarra .pt-index-row .num { font-size: 20px; min-width: 0; }
  .pt-pizarra .pt-index-row .lbl { display: none; }
  .pt-pizarra .pt-index-row.on .lbl { display: inline; font-size: 14px; }
  .pt-pizarra .pt-index-row.on { border-color: rgba(234,243,238,.5); }
  .pt-pizarra .pt-index-row .d { width: 8px; height: 8px; }
  .pt-pizarra .pt-index-bar { order: 9; flex: 0 0 62%; margin-top: 10px; }
  .pt-pizarra .pt-index-lbl { display: none; }

  .pt-board-hint {
    position: static; text-align: center; font-size: 18px; margin-top: 2px;
  }
}

/* Pantallas cortas: sobra el pie escrito a mano antes que el móvil. */
@media (max-width: 900px) and (max-height: 700px) {
  .pt-board-hint { display: none; }
  .pt-pizarra .pt-stage-b { display: none; }
}

@media (max-width: 560px) {
  .pt-board-rail { font-size: 17.5px; gap: 8px; }
  .pt-pizarra .pt-index-row { padding: 4px 9px; }
  .pt-pizarra .pt-index-row.on .lbl { font-size: 13px; }
}

/* En horizontal el escenario se suelta y el móvil no se pinta: el decorado
   de tiza tampoco tiene a qué apuntar. */
@media (max-height: 480px) and (orientation: landscape) {
  .pt-chalk-arrow, .pt-board-247, .pt-board-hint { display: none; }
}

/* ---------- patrón matemático del fondo ----------
   Ejes, parábolas, senos y figuras a tiza que llenan lo que queda vacío
   alrededor del móvil. Es solo fondo: va muy bajo de opacidad y se apaga
   hacia el centro con una máscara, para no competir con el aparato ni con
   el texto que se lee encima. */
.pt-board-math {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23EAF3EE%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2096H104M30%2024V112%22%2F%3E%3Cpath%20d%3D%22M34%2040Q60%20116%2098%2044%22%2F%3E%3Cpath%20d%3D%22M30%2024l-4%207M30%2024l4%207M104%2096l-7-4M104%2096l-7%204%22%2F%3E%3Ccircle%20cx%3D%22226%22%20cy%3D%2260%22%20r%3D%2234%22%2F%3E%3Cpath%20d%3D%22M226%2060l30-16M226%2060h34%22%2F%3E%3Cpath%20d%3D%22M246%2060a20%2020%200%200%200-4-10%22%2F%3E%3Ccircle%20cx%3D%22226%22%20cy%3D%2260%22%20r%3D%221.6%22%20fill%3D%22%23EAF3EE%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M14%20216h104%22%20stroke-opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M16%20216c12-30%2026-30%2038%200s26%2030%2038%200%2020-22%2026-12%22%2F%3E%3Cpath%20d%3D%22M182%20268h90l-1-60z%22%2F%3E%3Cpath%20d%3D%22M264%20268v-8h8%22%2F%3E%3Cpath%20d%3D%22M196%20268a16%2016%200%200%200%204-11%22%20stroke-opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M150%20122c8%200%208-10%208-16%200-8%204-10%208-10-4%200-8-2-8-10%200-6%200-16-8-16%22%20stroke-opacity%3D%22.75%22%2F%3E%3Cpath%20d%3D%22M196%20118h22l-13%2012%2013%2012h-22%22%20stroke-opacity%3D%22.75%22%2F%3E%3Cpath%20d%3D%22M120%2040h56M126%2034v12M148%2034v12M170%2034v12%22%20stroke-opacity%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M140%20176h44M162%20154v44%22%20stroke-opacity%3D%22.45%22%2F%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%22150%22%20r%3D%221.6%22%20fill%3D%22%23EAF3EE%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22150%22%20r%3D%221.6%22%20fill%3D%22%23EAF3EE%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22284%22%20r%3D%221.6%22%20fill%3D%22%23EAF3EE%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M40%20260c6-5%2012%205%2018%200M40%20268c6-5%2012%205%2018%200%22%20stroke-opacity%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M262%20214l-16%208%2016%208M240%20232h24%22%20stroke-opacity%3D%22.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: clamp(210px, 21vw, 300px) auto;
  background-repeat: repeat;
  opacity: .13;
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 18%, #000 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 18%, #000 78%);
}

/* Color de tiza del canal en curso: tiñe el subrayado del titular, que es lo
   único que sigue cambiando de color al pasar de un canal a otro. */
.pt-pizarra { --pt-chalk-ch: #7CFFB2; }
.pt-pizarra[data-ch="ig"]   { --pt-chalk-ch: #FF57D8; }
.pt-pizarra[data-ch="ms"]   { --pt-chalk-ch: #57E0FF; }
.pt-pizarra[data-ch="call"] { --pt-chalk-ch: #FFE96B; }
.pt-pizarra .pt-chalk-under { color: var(--pt-chalk-ch); opacity: .7; }

@media (max-width: 900px) {
  /* En una pantalla de mano el móvil ocupa casi todo: el patrón se hace más
     pequeño y aún más tenue para que solo se intuya en los bordes. */
  .pt-board-math { opacity: .1; background-size: 170px auto; }
}
@media (max-height: 620px) {
  .pt-board-math { opacity: .08; }
}

/* ---------- fondo de garabatos de las secciones del problema ----------
   Mosaico denso de iconos de conversación: dibujos propios, colocados en una
   retícula con giro, tamaño y desvío distintos en cada hueco para que no se
   note el patrón. Va a muy poca opacidad: es papel de fondo, y encima se
   siguen leyendo los titulares y las cifras igual que antes. Las dos
   secciones van envueltas juntas para que el mosaico no se corte entre
   ellas. */
.pt-wa-fondo {
  position: relative;
  background-color: var(--pt-cream);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B0E0C%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2819.8%2019.4%29%20rotate%2829%29%20scale%280.585%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M6%206l16%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2869.4%2024.6%29%20rotate%2838%29%20scale%280.636%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M8%2012h4l7-8v20l-7-8H8z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28125.2%2026.7%29%20rotate%28-13%29%20scale%280.548%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M10%2026V13l6-11c3%200%204%202%203%205l-2%206h8a3%203%200%200%201%203%204l-3%207a3%203%200%200%201-3%202z%22%2F%3E%3Cpath%20d%3D%22M1%2013h7v13H1z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28174.5%2022.3%29%20rotate%28-28%29%20scale%280.56%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%2025h26M5%2025V15M12%2025V9M19%2025V17M26%2025V5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28227.5%2022.8%29%20rotate%28-28%29%20scale%280.66%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M14%201%2018%2010l10%201-7%207%202%2010-9-5-9%205%202-10-7-7%2010-1z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28269.4%2025.8%29%20rotate%28-2%29%20scale%280.506%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M27%202%201%2013l11%203%203%2010%204-8%208%203z%22%2F%3E%3Cpath%20d%3D%22M12%2016%2027%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2829.2%2073.6%29%20rotate%28-25%29%20scale%280.482%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M3%204h22a3%203%200%200%201%203%203v9a3%203%200%200%201-3%203H12l-6%205v-5H3a3%203%200%200%201-3-3V7a3%203%200%200%201%203-3z%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2211.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2211.5%22%20r%3D%221.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2871.6%2080.1%29%20rotate%28-38%29%20scale%280.652%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M18%2010a5%205%200%201%200%200%208%208%208%200%201%201%200-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28130.8%2073.8%29%20rotate%2810%29%20scale%280.47%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M2%2010a17%2017%200%200%201%2024%200M6%2015a11%2011%200%200%201%2016%200M10%2020a5%205%200%200%201%208%200%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2224%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28178.3%2072.2%29%20rotate%28-13%29%20scale%280.475%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%206h26v16H1z%22%2F%3E%3Cpath%20d%3D%22M1%207l13%209%2013-9%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28219.2%2073.9%29%20rotate%284%29%20scale%280.477%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M14%2025S3%2018%203%2011a5.5%205.5%200%200%201%2011-2%205.5%205.5%200%200%201%2011%202c0%207-11%2014-11%2014z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28272.0%2070.2%29%20rotate%28-21%29%20scale%280.645%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2212%22%2F%3E%3Cpath%20d%3D%22M2%2014h24M14%202c5%206%205%2018%200%2024M14%202C9%208%209%2020%2014%2026%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2821.1%20125.7%29%20rotate%2824%29%20scale%280.472%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%229%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M2%2024c0-5%203-8%207-8s7%203%207%208M15%2024c0-4%202-6%205-6s6%202%206%206%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2880.8%20128.2%29%20rotate%28-14%29%20scale%280.549%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M9%2011h.01M19%2011h.01M9%2019c3-3%207-3%2010%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28120.4%20124.0%29%20rotate%2811%29%20scale%280.544%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M9%2011h.01M19%2011h.01M9%2020c3%203%207%203%2010%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28179.4%20130.7%29%20rotate%28-4%29%20scale%280.503%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M3%2010h6l10-6v20l-10-6H3z%22%2F%3E%3Cpath%20d%3D%22M22%208a7%207%200%200%201%200%2012%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28221.5%20123.7%29%20rotate%28-36%29%20scale%280.579%29%20translate%28-14%20-14%29%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M1%2022h26l-2%203H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28270.2%20130.9%29%20rotate%2835%29%20scale%280.631%29%20translate%28-14%20-14%29%22%3E%3Crect%20x%3D%228%22%20y%3D%221%22%20width%3D%2212%22%20height%3D%2226%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%2024h4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2819.1%20176.3%29%20rotate%28-5%29%20scale%280.503%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M20%208%209%2019a4%204%200%200%201-6-6L15%202a5%205%200%200%201%208%207L12%2020%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2869.9%20170.1%29%20rotate%2811%29%20scale%280.626%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%205h26v18H1z%22%2F%3E%3Cpath%20d%3D%22M5%209h9v6H5zM17%209h6M17%2013h6M5%2018h18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28119.2%20173.4%29%20rotate%28-7%29%20scale%280.577%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M18%202v13l-6%2011c-3%200-4-2-3-5l2-6H3a3%203%200%200%201-3-4l3-7a3%203%200%200%201%203-2z%22%2F%3E%3Cpath%20d%3D%22M27%2015h-7V2h7z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28180.5%20174.8%29%20rotate%28-22%29%20scale%280.584%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M4%2025%2014%203l10%2022%22%2F%3E%3Cpath%20d%3D%22M8%2017h12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28221.2%20170.8%29%20rotate%2811%29%20scale%280.575%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%205h26v18H1z%22%2F%3E%3Cpath%20d%3D%22M11%2010l7%204-7%204z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28277.7%20170.9%29%20rotate%28-7%29%20scale%280.642%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M2%2013%2014%203l12%2010%22%2F%3E%3Cpath%20d%3D%22M5%2012v13h18V12%22%2F%3E%3Cpath%20d%3D%22M11%2025v-7h6v7%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2820.5%20224.8%29%20rotate%28-30%29%20scale%280.646%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M9%2011h.01M19%2011h.01M9%2020c3%203%207%203%2010%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2872.4%20230.0%29%20rotate%28-29%29%20scale%280.591%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%205h26v18H1z%22%2F%3E%3Cpath%20d%3D%22M11%2010l7%204-7%204z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28119.8%20223.9%29%20rotate%28-36%29%20scale%280.501%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M27%202%201%2013l11%203%203%2010%204-8%208%203z%22%2F%3E%3Cpath%20d%3D%22M12%2016%2027%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28171.1%20223.4%29%20rotate%28-33%29%20scale%280.51%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M20%208%209%2019a4%204%200%200%201-6-6L15%202a5%205%200%200%201%208%207L12%2020%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28220.1%20220.7%29%20rotate%28-22%29%20scale%280.574%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M14%2025S3%2018%203%2011a5.5%205.5%200%200%201%2011-2%205.5%205.5%200%200%201%2011%202c0%207-11%2014-11%2014z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28276.9%20227.3%29%20rotate%284%29%20scale%280.55%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M2%2013%2014%203l12%2010%22%2F%3E%3Cpath%20d%3D%22M5%2012v13h18V12%22%2F%3E%3Cpath%20d%3D%22M11%2025v-7h6v7%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826.1%20280.1%29%20rotate%28-21%29%20scale%280.577%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M18%2010a5%205%200%201%200%200%208%208%208%200%201%201%200-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2877.4%20280.6%29%20rotate%287%29%20scale%280.555%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%206h26v16H1z%22%2F%3E%3Cpath%20d%3D%22M1%207l13%209%2013-9%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28124.8%20277.8%29%20rotate%28-29%29%20scale%280.464%29%20translate%28-14%20-14%29%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2212%22%2F%3E%3Cpath%20d%3D%22M2%2014h24M14%202c5%206%205%2018%200%2024M14%202C9%208%209%2020%2014%2026%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28169.9%20275.6%29%20rotate%28-29%29%20scale%280.524%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M4%2025%2014%203l10%2022%22%2F%3E%3Cpath%20d%3D%22M8%2017h12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28228.5%20280.0%29%20rotate%28-22%29%20scale%280.607%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M1%205h26v18H1z%22%2F%3E%3Cpath%20d%3D%22M5%209h9v6H5zM17%209h6M17%2013h6M5%2018h18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28279.8%20279.5%29%20rotate%2822%29%20scale%280.53%29%20translate%28-14%20-14%29%22%3E%3Cpath%20d%3D%22M14%201%2018%2010l10%201-7%207%202%2010-9-5-9%205%202-10-7-7%2010-1z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: clamp(190px, 19vw, 280px) auto;
  background-repeat: repeat;
}
.pt-wa-fondo > section { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .pt-wa-fondo { background-size: 165px auto; }
}

/* ============================================================
   PRUEBA GUIADA · ventana de los precios
   Aparece una sola vez, al llegar a los precios. Prefijo .pg- para
   no rozar nada de la portada. La lógica está en portada.js.
   ============================================================ */
/* `hidden` frente a `display`. El atributo `hidden` oculta a través de la hoja
   del NAVEGADOR ([hidden]{display:none}), y cualquier regla nuestra que fije
   un display la gana por ser de autor. Sin esta línea el elemento se ve desde
   que carga la página y ponerle `.hidden = true` desde JS no hace nada.
   Se repite por elemento en vez de un [hidden]{display:none !important}
   global: aquí basta la especificidad y no hace falta el !important. */
.pg-fondo[hidden] { display: none; }
.pg-fondo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8,12,10,.72);
  /* El velo y la caja entran a ritmos distintos a propósito: el fondo
     oscurece rápido (es contexto) y la tarjeta llega un poco después (es lo
     que hay que leer). Entrando a la vez, el conjunto se lee como un salto. */
  animation: pgVelo .32s ease-out both;
}
@keyframes pgVelo {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(6px); }
}

.pg-caja {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100dvh - 40px); overflow-y: auto;
  background: #F2EEE5; color: #0B0E0C;
  border-radius: 22px; padding: 34px 32px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  /* 60 ms de retraso: el tiempo justo para que el velo ya esté oscureciendo
     cuando la tarjeta empieza a subir. El muelle del final (una curva que se
     pasa un poco y vuelve) es lo que hace que se sienta como algo que entra
     y no como algo que aparece de golpe. */
  animation: pgSube .42s cubic-bezier(.16, 1.02, .3, 1) 60ms both;
}
@keyframes pgSube {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* Quien pide menos movimiento recibe el cambio sin el viaje: la ventana
   sigue apareciendo, pero sin desplazamientos ni escalados. */
@media (prefers-reduced-motion: reduce) {
  .pg-fondo, .pg-caja { animation-duration: .01ms; animation-delay: 0ms; }
  .pg-fondo { backdrop-filter: blur(6px); }
}

.pg-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(11,14,12,.07); color: #6B6F6A;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pg-cerrar:hover { background: rgba(11,14,12,.13); color: #0B0E0C; }

.pg-kicker {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #0E8F4D; margin-bottom: 10px;
}
.pg-caja h2 { font-size: 25px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 10px; }
.pg-lede { font-size: 14.5px; line-height: 1.55; color: #6B6F6A; margin: 0 0 18px; }

.pg-incluye {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; gap: 8px;
}
.pg-incluye li {
  flex: 1; text-align: center; padding: 11px 6px;
  border: 1.5px solid #D9D4C5; border-radius: 12px;
  font-size: 11.5px; line-height: 1.3; color: #6B6F6A;
}
.pg-incluye b { display: block; font-size: 17px; color: #0B0E0C; margin-bottom: 2px; }

.pg-caja form { display: flex; flex-direction: column; gap: 10px; }
.pg-caja input {
  width: 100%; padding: 14px 16px; border-radius: 13px;
  border: 1.5px solid #D9D4C5; background: #fff;
  font-family: inherit; font-size: 15px; color: #0B0E0C;
}
.pg-caja input:focus { outline: none; border-color: #0E8F4D; box-shadow: 0 0 0 3px rgba(26,229,122,.22); }
/* El código se lee de un tirón: cifras grandes, monoespaciadas y separadas. */
.pg-codigo {
  font-family: "Chivo Mono", ui-monospace, monospace !important;
  font-size: 24px !important; letter-spacing: .22em; text-align: center;
}

.pg-btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: 14px 18px; border: 0; border-radius: 999px;
  background: #0B0E0C; color: #F2EEE5; text-decoration: none;
  font-family: inherit; font-size: 15px; font-weight: 650;
}
.pg-btn:hover { background: #1a211c; }
.pg-btn[disabled] { opacity: .55; cursor: default; }

.pg-error { font-size: 13px; color: #C8341B; margin: 10px 0 0; line-height: 1.45; }
.pg-legal { font-size: 12px; color: #6B6F6A; margin: 14px 0 0; line-height: 1.45; }
.pg-volver {
  display: block; margin: 14px auto 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: #6B6F6A; text-decoration: underline;
}
.pg-volver:hover { color: #0B0E0C; }

.pg-tic {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(26,229,122,.18); color: #0E8F4D;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}

@media (max-width: 480px) {
  .pg-caja { padding: 28px 20px 22px; border-radius: 18px; }
  .pg-caja h2 { font-size: 22px; }
  .pg-incluye { gap: 6px; }
  .pg-incluye li { padding: 9px 4px; font-size: 10.5px; }
  .pg-incluye b { font-size: 15px; }
}

/* ============================================================
   CONOCE A BOOKLIFT · a dos columnas
   Izquierda la información, derecha el anuncio. La columna de texto es
   la que manda el alto —título, entradilla, los tres puntos y el botón—;
   el vídeo es cuadrado, así que se centra frente a ella en vez de estirarse
   y dejar la mitad de la caja vacía.
   ============================================================ */
.pt-legacy .prod-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 56px);
}

/* ---------- la columna de la izquierda ---------- */
.pt-legacy .prod-info .section-title { margin-top: 8px; }
.pt-legacy .prod-info .section-lede { margin-top: 18px; max-width: 46ch; }

.pt-legacy .prod-list {
  list-style: none;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.pt-legacy .prod-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}
/* El número es la única pieza en monoespaciada de la columna: ordena la
   lectura sin pedir un icono para cada punto. */
.pt-legacy .prod-item .n {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--green-deep);
  padding-top: 5px;
}
.pt-legacy .prod-item h3 {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25;
}
.pt-legacy .prod-item p {
  margin: 8px 0 0;
  font-size: 15px; line-height: 1.55; color: var(--mute);
  max-width: 52ch;
}
.pt-legacy .prod-ctas { margin-top: clamp(26px, 3vw, 38px); }

/* ---------- la columna del vídeo ----------
   `aspect-ratio: 1` porque el anuncio es cuadrado: así la caja tiene
   exactamente la forma del vídeo y no queda franja a ningún lado. El
   fondo negro es el seguro de por si el navegador tarda en pintar el
   primer fotograma; con `cover` no llega a verse. Bordes rectos y sin
   sombra: es imagen, no una tarjeta más. */
.pt-legacy .prod-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}
.pt-legacy .prod-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- el sonido del anuncio ----------
   Mismo mando que el de la sección de voz: en mudo se ensancha en píldora
   con el texto, porque ahí es una invitación; con sonido se queda en un
   círculo con el altavoz, porque solo hace falta poder volver atrás. */
.pt-legacy .prod-mute {
  position: absolute; z-index: 2;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 50px; height: 50px; padding: 0;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242,238,229,.24);
  background: rgba(11,14,12,.62); color: var(--cream);
  backdrop-filter: blur(8px);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: border-color .25s var(--pt-ease), color .25s var(--pt-ease),
              width .35s var(--pt-ease), padding .35s var(--pt-ease);
}
.pt-legacy .prod-mute:hover { border-color: var(--pt-green); color: var(--pt-green); }
.pt-legacy .prod-mute:focus-visible { outline: 2px solid var(--pt-green); outline-offset: 3px; }
.pt-legacy .prod-mute .ic-off,
.pt-legacy .prod-mute .aro,
.pt-legacy .prod-mute-txt { display: none; }
.pt-legacy .prod-mute .ic-on,
.pt-legacy .prod-mute .ic-off { flex: 0 0 auto; }
.pt-legacy .prod-mute.mudo {
  width: auto; padding: 0 18px 0 14px;
  border-color: rgba(26,229,122,.55); color: var(--pt-green);
}
.pt-legacy .prod-mute.mudo .ic-on { display: none; }
.pt-legacy .prod-mute.mudo .ic-off,
.pt-legacy .prod-mute.mudo .prod-mute-txt { display: inline; }
.pt-legacy .prod-mute.mudo .aro { display: block; }
.pt-legacy .prod-mute .aro {
  position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid var(--pt-green); pointer-events: none;
  animation: ptVozAro 2.6s var(--pt-ease) infinite;
}

/* En una columna el vídeo va debajo del texto, y con un ancho máximo: a
   pantalla completa un cuadrado de 700px de alto se come la sección entera. */
@media (max-width: 980px) {
  .pt-legacy .prod-split { grid-template-columns: 1fr; }
  .pt-legacy .prod-media { width: 100%; max-width: 540px; }
}
@media (max-width: 900px) {
  .pt-legacy .prod-mute { width: 44px; height: 44px; font-size: 13px; }
  .pt-legacy .prod-mute.mudo { width: auto; padding: 0 16px 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-legacy .prod-mute .aro { animation: none; }
}