/* Landing "Conversa con tus Datos" — estilos propios de la página.
   El sistema de diseño va en design-system.css; aquí sólo lo que es de esta página.
   Todas las rutas de este archivo son relativas. */

html{scroll-behavior:smooth}
:root{--section-py:clamp(64px,7vw,112px);--agenda-h:980px;--nav-h:78px}
@media (max-width:1180px){:root{--agenda-h:1180px}}
@media (max-width:640px){:root{--agenda-h:1320px}}

/* Anclas de nivel 1 bajo la cabecera sticky. */
[data-level="1"]{scroll-margin-top:calc(76px - var(--section-py) + 32px)}

.oa-logo{flex-shrink:0}
.oa-logo span{white-space:nowrap}
.oa-nav__link{white-space:nowrap}
@media (max-width:860px){.oa-nav__link{display:none}}
#contacto a{text-decoration:none;border-bottom:0}
a.oa-btn:hover,a.oa-btn:focus{border-color:inherit}
a.oa-btn--primary:hover{border-color:var(--brand-primary-hover)}
a.oa-btn--secondary:hover{border-color:var(--brand-ink)}
a.oa-btn--ghost:hover{border-color:var(--brand-bone)}

/* ---- Capa de movimiento --------------------------------------------------
   El contenido existe antes que su animación: el estado base ES el estado final.
   Cada sección de lectura trae su propio compás ([data-compas]) y lo ejecuta sola
   al entrar en pantalla, una sola vez, sin encadenarse con nadie. Lo que cambia de
   una sección a otra no es el gesto: es el escalón (--paso). */
@keyframes ccdEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ccdTrazo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ccdTrazoBg{from{background-size:0 1px}to{background-size:100% 1px}}
@keyframes ccdDescubre{from{clip-path:inset(0 0 104% 0)}to{clip-path:inset(0 0 -4% 0)}}
[data-t="0"]{--t:0}[data-t="1"]{--t:1}[data-t="2"]{--t:2}[data-t="3"]{--t:3}[data-t="4"]{--t:4}
[data-t="5"]{--t:5}[data-t="6"]{--t:6}[data-t="7"]{--t:7}[data-t="8"]{--t:8}[data-t="9"]{--t:9}[data-t="10"]{--t:10}
[data-compas]{--paso:80ms}
#costo-status-quo{--paso:110ms}
#solucion{--paso:70ms}
#agendar{--paso:80ms}
[data-compas].is-in [data-t]:not([data-linea]){animation:ccdEntra var(--duration-reveal) var(--ease-out) both;animation-delay:calc(var(--paso) * var(--t))}
/* Las líneas se dibujan de izquierda a derecha, y antes del texto que encabezan. */
[data-linea]{position:relative;border-top-color:transparent !important}
[data-linea]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--linea-color,var(--border-hairline));transform-origin:left}
.oa-on-dark [data-linea]{--linea-color:var(--border-hairline-inverse)}
[data-compas].is-in [data-linea]::before{animation:ccdTrazo 480ms var(--ease-out) both;animation-delay:calc(var(--paso) * var(--t))}
/* Los cinco bloques de la solución: su filete se traza y su número se descubre. */
#solucion [data-bloques] > *:nth-child(1){--t:3}
#solucion [data-bloques] > *:nth-child(2){--t:4}
#solucion [data-bloques] > *:nth-child(3){--t:5}
#solucion [data-bloques] > *:nth-child(4){--t:6}
#solucion [data-bloques] > *:nth-child(5){--t:7}
#solucion .oa-block{border-top-color:transparent !important;background-image:linear-gradient(var(--border-hairline-inverse),var(--border-hairline-inverse));background-repeat:no-repeat;background-position:left top;background-size:100% 1px}
[data-compas].is-in [data-bloques] .oa-block{animation:ccdEntra var(--duration-reveal) var(--ease-out) both,ccdTrazoBg 480ms var(--ease-out) both;animation-delay:calc(var(--paso) * var(--t) + 60ms),calc(var(--paso) * var(--t))}
[data-compas].is-in [data-bloques] .oa-block__mark{animation:ccdDescubre 520ms var(--ease-out) both;animation-delay:calc(var(--paso) * var(--t) + 150ms)}
/* Cabecera: al volverse sólida traza su borde inferior en vez de aparecer de golpe. */
@media (min-width:641px){
  .oa-nav--solid{border-bottom-color:transparent}
  .oa-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--border-hairline);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);pointer-events:none}
  .oa-nav--solid::after{transform:scaleX(1)}
}
/* Atmósfera: las nubes derivan lentísimo, cada una con su fase; el grano respira.
   La deriva usa `translate` (propiedad aparte) para no pisar el transform de silueta. */
@keyframes ccdNube{0%,100%{translate:0 0}50%{translate:1.1% -1.4%}}
@keyframes ccdGrano{0%,100%{background-position:0 0}50%{background-position:3px -2px}}
.oa-blob{animation:ccdNube var(--nube-ciclo,64s) var(--ease-in-out) var(--nube-fase,0s) infinite}
#costo-status-quo .oa-blob{--nube-ciclo:72s;--nube-fase:-11s}
#solucion .oa-blob{--nube-ciclo:58s;--nube-fase:-27s}
#agendar .oa-blob{--nube-ciclo:66s;--nube-fase:-42s}
.oa-section__grain,.oa-grain{animation:ccdGrano 24s var(--ease-in-out) infinite}
.oa-blob::after{animation:ccdGrano 31s var(--ease-in-out) -9s infinite}
@media (prefers-reduced-motion:reduce){
  [data-compas].is-in [data-t]:not([data-linea]),[data-compas].is-in [data-linea]::before,[data-compas].is-in [data-bloques] .oa-block,[data-compas].is-in [data-bloques] .oa-block__mark,.oa-blob,.oa-blob::after,.oa-section__grain,.oa-grain{animation:none !important}
  .oa-nav::after{transition:none}
}

/* Deriva de la portada: 16 s hacia la izquierda y 16 s de vuelta (antes 30 s: por debajo
   del umbral en que el ojo registra el movimiento). Mismo carril, en menos tiempo.
   La escala inicial no cambia; la final baja a 1.12 para que sea recorrido y no
   acercamiento. Geometría: el sobrante por lado (1.12−1)/2 = 6 % cubre la traslación de
   4.5 % — no bajarla más sin rehacer esa cuenta. */
@keyframes derivaHero{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-4.5%,0,0) scale(1.12)}}
/* ---- Portada -------------------------------------------------------------
   La imagen corre por debajo de la cabecera: el campo índigo llega al borde superior. */
#hero{margin-top:calc(var(--nav-h) * -1);padding-top:calc(var(--section-py) + var(--nav-h))}
#hero [data-hero-img]{position:absolute;top:calc((var(--section-py) + var(--nav-h)) * -1);bottom:calc(var(--section-py) * -1);left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;background:#141B3D}
#hero [data-hero-img] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;will-change:transform;animation:derivaHero 16s cubic-bezier(0.1,0,0.9,1) infinite alternate}
#hero [data-hero-scrim]{position:absolute;inset:0;background:linear-gradient(90deg,#141B3D 0%,rgba(20,27,61,0.92) 26%,rgba(20,27,61,0.62) 44%,rgba(20,27,61,0.18) 62%,rgba(20,27,61,0) 78%)}
#hero [data-hero-scrim-top]{position:absolute;left:0;right:0;top:0;height:180px;background:linear-gradient(180deg,rgba(20,27,61,0.82) 0%,rgba(20,27,61,0.5) 55%,rgba(20,27,61,0) 100%)}
#hero .oa-section__inner{min-height:calc(100svh - var(--nav-h) - 2 * var(--section-py));display:flex;flex-direction:column;justify-content:center}
#hero [data-hero-texto]{position:relative;color:var(--text-inverse)}
#hero [data-hero-col]{max-width:min(var(--container-narrow),46%)}
#hero h1{font-size:var(--type-display-size);line-height:var(--type-display-lh);letter-spacing:var(--type-display-ls);font-weight:600;margin:0;max-width:22ch;color:var(--text-inverse)}
#hero [data-hero-bajada]{margin:24px 0 0;font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh);color:var(--text-inverse-secondary);max-width:60ch}
#cta-anchor{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
@media (max-width:900px){#hero [data-hero-col]{max-width:60%}}

/* Llamado a la acción: un solo latido, una sola vez, y sólo tras unos segundos sin
   scroll. Deja de ser ruido de fondo y vuelve a ser un llamado. */
@keyframes ccdLatido{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,68,0,0.22)}
  40%{transform:scale(1.035);box-shadow:0 0 0 12px rgba(255,68,0,0.14)}
  72%{transform:scale(0.998);box-shadow:0 0 0 20px rgba(255,68,0,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,68,0,0)}
}
.oa-btn[data-latido]{animation:ccdLatido 1100ms var(--ease-out) 1}
.oa-btn[data-latido]:hover{animation:none}
@media (prefers-reduced-motion:reduce){.oa-btn[data-latido]{animation:none}}


/* ---- CTA fijo de móvil ---------------------------------------------------
   Nace en el hero y baja a la orilla inferior cuando el titular toca la cabecera.
   Estado seguro sin JS: en la orilla, con su velo, visible y pulsable. */
:root{--scrim-0:rgba(247,245,242,0);--scrim-1:rgba(247,245,242,0.97)}
[data-cta-movil]{display:none;position:fixed;left:0;right:0;top:0;z-index:60;will-change:transform;transform:translateY(calc(100svh - 100%));padding:36px 24px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,var(--scrim-0) 0%,var(--scrim-1) 46%,var(--scrim-1) 100%)}
[data-cta-movil] .oa-btn{width:100%;justify-content:center}
[data-cta-movil][data-modo="inicio"]{padding:0 24px;background:none}

/* ---- Agenda --------------------------------------------------------------- */
[data-agenda-marco]{margin-top:clamp(40px,4vw,64px);position:relative}
[data-agenda-marco] iframe{display:block;width:100%;height:var(--agenda-h);border:0;background:transparent}
[data-agenda-respaldo]{display:none;position:absolute;inset:0;background:var(--bg-light);flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:clamp(24px,4vw,48px)}
[data-agenda-marco][data-fallo] [data-agenda-respaldo]{display:flex}
/* Sin consentimiento el iframe no tiene src: en su lugar se muestra el permiso. */
[data-agenda-permiso]{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-height:clamp(320px,38vw,420px);padding:clamp(24px,4vw,48px);border:1px solid var(--border-hairline);border-radius:8px;background:var(--bg-light)}
[data-agenda-marco][data-permitido] [data-agenda-permiso]{display:none}
[data-agenda-marco]:not([data-permitido]) iframe[data-agenda]{display:none}

@media (prefers-reduced-motion:reduce){#hero [data-hero-img] img,[data-hero-img] img{animation:none !important;transform:none !important}}

/* ---- Aviso de cookies ---------------------------------------------------- */
[data-cookies]{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(247,245,242,0.97);backdrop-filter:blur(12px);border-top:1px solid var(--border-hairline);box-shadow:0 1px 2px rgba(20,20,20,0.06),0 12px 32px rgba(20,20,20,0.10)}
body[data-cookies-estado="pendiente"] [data-cookies]{display:block}
[data-cookies] > div{max-width:var(--container-max);margin:0 auto;padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:20px clamp(24px,4vw,64px);align-items:center;justify-content:space-between}
[data-cookies] p{margin:0;flex:1 1 420px;font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--text-secondary);max-width:76ch;text-wrap:pretty}
[data-cookies-acciones]{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Un solo llamado a la vez: mientras el aviso está arriba, el CTA fijo se retira. */
body[data-cookies-estado="pendiente"] [data-cta-movil]{display:none}
@media (max-width:640px){
  [data-cookies] > div{padding:20px 24px calc(20px + env(safe-area-inset-bottom));gap:16px}
  [data-cookies] p{flex:1 1 100%;font-size:16px}
  [data-cookies-acciones]{flex:1 1 100%}
  [data-cookies-acciones] .oa-btn{flex:1 1 140px;justify-content:center}
}

/* ---- Móvil ---------------------------------------------------------------- */
@media (max-width:640px){
  html{overflow-x:hidden}
  :root{--section-py:clamp(48px,12vw,72px);--nav-h:58px}
  /* El retrato se centra y la imagen se oscurece pareja: el texto va al medio, sobre el rostro. */
  #hero [data-hero-img] img{object-position:58% 38%}
  #hero [data-hero-scrim]{background:linear-gradient(180deg,rgba(20,27,61,0.88) 0%,rgba(20,27,61,0.74) 42%,rgba(20,27,61,0.72) 70%,rgba(20,27,61,0.84) 100%)}
  #hero [data-hero-scrim-top]{display:none}
  #hero [data-hero-col]{max-width:none}
  #hero h1{font-size:var(--type-h1-size);line-height:var(--type-h1-lh);letter-spacing:var(--type-h1-ls)}
  /* La fila de la cabecera cabe completa: el nombre del producto se queda y el CTA se acorta. */
  .oa-nav{padding-left:16px;padding-right:16px}
  .oa-nav__links{gap:12px}
  .oa-logo{min-width:0}
  .oa-logo span{font-size:16px}
  .oa-logo svg{width:22px;height:22px}
  /* Un solo CTA en móvil: la barra fija de abajo. */
  .oa-nav .oa-btn{display:none}
  #solucion .oa-btn{display:none}
  #cta-anchor{width:100%}
  #cta-anchor .oa-btn{width:100%;justify-content:center;visibility:hidden}
  [data-cta-movil]{display:block}
  .oa-nav,.oa-nav--solid{background:rgba(247,245,242,0.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-hairline)}
  .oa-nav--transparent,.oa-nav--transparent-ink{background:transparent;border-bottom:0}
  /* Las nubes se retiran del área de lectura. */
  #costo-status-quo .oa-blob{width:96vw;height:62vw;bottom:-40vw;left:-52vw}
  #solucion .oa-blob{width:96vw;height:62vw;top:-38vw;right:-50vw}
  #agendar .oa-blob{width:80vw;height:52vw;top:-40vw;left:-56vw}
  #contacto [data-pie]{gap:28px}
  /* Cuerpo mínimo 16px en móvil. */
  [data-col2]{grid-template-columns:1fr}
}