/* SAGUMA — Home (index.html). Se carga después de saguma.css y
   saguma-marca.css. Mobile first: las reglas base son para el celular y
   los min-width agregan el layout de tablet y desktop.
   Animaciones: al final del archivo (sistema de entrada). Una sola vez por
   elemento, sin librerías, y nada con prefers-reduced-motion. */

[hidden]{display:none!important;}
@media(max-width:600px){.container{padding:0 16px;}}
.container-angosto{max-width:820px;}

/* Ritmo de secciones: foto → blanco → crema → blanco → crema → cierre azul */
.cat-sec,.proc-sec,.prop-sec,.faq-sec{padding:64px 0;}
@media(min-width:960px){.cat-sec,.proc-sec,.prop-sec,.faq-sec{padding:96px 0;}}
.cat-sec,.prop-sec{background:var(--saguma-blanco);}
.proc-sec,.faq-sec,.cierre-home{background:var(--saguma-crema);}
.section-header{margin-bottom:40px;}
.section-title{text-wrap:balance;}


/* Dos CTA con la misma caja: la jerarquía la da el relleno, no el tamaño. */
.cta-par{display:grid;gap:12px;}
.cta-par .btn{justify-content:center;min-height:52px;width:100%;padding-top:12px;padding-bottom:12px;line-height:24px;}
@media(min-width:480px){.cta-par{grid-template-columns:1fr 1fr;}}
.btn svg{flex-shrink:0;}

/* ── 1. Portada: fotos de fondo con velo azul plano ─────────────── */
.portada{position:relative;display:flex;align-items:center;min-height:min(100svh,820px);padding:108px 0 56px;background:var(--saguma-azul);overflow:hidden;}
.portada-fondo{position:absolute;inset:0;}
.portada-fondo picture{position:absolute;inset:0;}
.portada-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transition:opacity 1.2s ease;}
.portada-slide.activa{opacity:1;}
/* Velo plano (sin degradé): asegura el contraste del texto sobre cualquier foto. */
.portada::after{content:'';position:absolute;inset:0;background:rgba(10,30,61,.72);}
.portada-txt{position:relative;z-index:1;width:100%;}
.portada-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.85);margin-bottom:14px;}
.portada h1{font-family:var(--font-titulos);font-weight:700;font-size:clamp(38px,9.6vw,60px);line-height:1.06;color:var(--saguma-crema);margin-bottom:18px;max-width:14em;text-wrap:balance;}
.portada h1::after{content:'';display:block;width:56px;height:6px;margin-top:18px;background:var(--saguma-ambar);}
.portada-sub{font-size:17px;line-height:26px;color:rgba(244,241,236,.9);max-width:34em;margin-bottom:28px;}
.portada .cta-par{max-width:560px;}
.portada .btn-outline{color:var(--saguma-crema);border-color:var(--saguma-crema);}
.portada-datos{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;}
.portada-datos li{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,236,.85);}
@media(min-width:960px){
  .portada{padding:132px 0 88px;}
  .cta-par .btn{min-width:240px;}
}
@media(prefers-reduced-motion:reduce){.portada-slide{transition:none;}}

/* ── 2. Catálogo: carrusel en mobile, grilla en desktop ─────────── */
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;}
.cat-head .section-title{margin-bottom:12px;}
.cat-indicador{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:6px;}
.cat-contador{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--saguma-grafito);}
.cat-progreso{display:block;width:72px;height:3px;border-radius:2px;background:var(--saguma-arena);overflow:hidden;}
.cat-progreso span{display:block;height:100%;background:var(--saguma-azul);transform-origin:left;transform:scaleX(.09);transition:transform .15s linear;}

.cat-fila{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;
  margin:0 -16px;padding:4px 16px 20px;scrollbar-width:none;}
.cat-fila::-webkit-scrollbar{display:none;}
@media(min-width:601px){.cat-fila{margin:0 -24px;padding:4px 24px 20px;scroll-padding-inline:24px;}}
.catalogo-cargando{grid-column:1/-1;padding:60px 0;text-align:center;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--saguma-grafito);}

.cat-card{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--saguma-blanco);border:1.5px solid var(--saguma-arena);border-radius:var(--radio-grande);overflow:hidden;}
.cat-foto{aspect-ratio:1/1;background:var(--saguma-arena);overflow:hidden;}
.cat-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;}
.cat-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px;}
.cat-tag{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--saguma-grafito);margin-bottom:6px;}
.cat-nombre{font-family:var(--font-titulos);font-weight:700;font-size:22px;line-height:28px;color:var(--saguma-azul);margin-bottom:6px;}
.cat-uso{font-size:15px;line-height:22px;color:var(--saguma-grafito);margin-bottom:14px;}
.cat-accion{margin-top:auto;font-size:15px;font-weight:600;color:var(--saguma-azul);text-decoration:none;}
/* La tarjeta entera es el link. */
.cat-accion::after{content:'';position:absolute;inset:0;border-radius:var(--radio-grande);}
.cat-accion:focus-visible{outline:none;}
.cat-accion:focus-visible::after{outline:2px solid var(--saguma-azul);outline-offset:-2px;}
@media(hover:hover){
  .cat-img{transition:transform .3s ease;}
  .cat-card:hover{border-color:var(--saguma-azul);}
  .cat-card:hover .cat-img{transform:scale(1.03);}
  .cat-card:hover .cat-accion{text-decoration:underline;text-underline-offset:3px;}
}
@media(min-width:1024px){
  .cat-fila{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:24px;}
  .cat-indicador{display:none;}
}
.cat-sec .cta-band{margin-top:28px;}

/* ── 4. Proceso: línea de tiempo ───────────────────────────────── */
.proc-lista{list-style:none;position:relative;display:grid;gap:28px;padding:0;margin:0;view-timeline-name:--proc;view-timeline-axis:block;}
/* Riel base (arena) y riel lleno (azul), del primer nodo al último. */
.proc-lista::before,.proc-lista::after{content:'';position:absolute;left:23px;top:24px;bottom:24px;width:2px;}
.proc-lista::before{background:var(--saguma-arena);}
.proc-lista::after{background:var(--saguma-azul);transform-origin:top;}
.proc-paso{position:relative;z-index:1;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;}
/* El riel corre hasta el borde de la lista; en el último paso se corta en el nodo. */
.proc-paso:last-child::before{content:'';position:absolute;left:0;top:48px;bottom:-2px;width:48px;background:var(--saguma-crema);}
.proc-nodo{position:relative;width:48px;height:48px;border-radius:50%;background:var(--saguma-crema);border:1.5px solid var(--saguma-azul);display:grid;place-items:center;color:var(--saguma-azul);}
.proc-txt{padding-top:2px;}
.proc-txt h3{font-family:var(--font-texto);font-weight:800;font-size:18px;line-height:24px;color:var(--saguma-azul);margin-bottom:4px;}
.proc-txt p{font-size:15px;line-height:22px;color:var(--saguma-grafito);margin-bottom:8px;}
.proc-tag{display:inline-block;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--saguma-azul);background:var(--saguma-blanco);border:1px solid var(--saguma-arena);border-radius:var(--radio-chico);padding:4px 8px;}
.proc-nota{font-size:14px;line-height:20px;color:var(--saguma-grafito);margin:28px 0 24px;max-width:40em;}
.proc-cta .btn{justify-content:center;min-height:52px;width:100%;}
@media(min-width:480px){.proc-cta .btn{width:auto;min-width:260px;}}
@media(min-width:960px){
  .proc-lista{grid-template-columns:repeat(5,1fr);gap:24px;}
  .proc-lista::before,.proc-lista::after{top:23px;bottom:auto;height:2px;width:auto;left:24px;right:calc((100% - 96px) / 5 - 24px);}
  .proc-lista::after{transform-origin:left;}
  .proc-paso{grid-template-columns:1fr;gap:16px;}
  .proc-paso:last-child::before{display:none;}
  .proc-nota{margin-top:36px;}
}
/* El riel se llena a medida que la lista entra en pantalla: muestra el
   avance sin JS. Sin soporte (o con reduced motion) queda lleno y quieto. */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .proc-lista::after{animation:procRailY linear both;animation-timeline:--proc;animation-range:entry 30% cover 55%;}
    @media(min-width:960px){.proc-lista::after{animation-name:procRailX;animation-range:entry 60% cover 50%;}}
  }
}
@keyframes procRailY{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes procRailX{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ── 5. Qué recibís ────────────────────────────────────────────── */
.prop-grid{display:grid;gap:28px;}
.prop-intro .section-title{margin-bottom:0;}
.prop-mock{margin:0;background:var(--saguma-blanco);border:1.5px solid var(--saguma-arena);border-radius:var(--radio-grande);overflow:hidden;font-size:14px;}
.prop-cab{position:relative;background:var(--saguma-azul);color:var(--saguma-crema);padding:18px 104px 16px 18px;display:flex;flex-direction:column;gap:4px;}
.prop-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,236,.8);}
.prop-cliente{font-family:var(--font-titulos);font-weight:700;font-size:22px;line-height:28px;}
.prop-ejemplo{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--saguma-azul);background:var(--saguma-crema);border-radius:var(--radio-chico);padding:3px 8px;}
.prop-chips{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1.5px solid var(--saguma-arena);}
.prop-chips div{padding:12px 14px;display:flex;flex-direction:column;gap:2px;}
.prop-chips div+div{border-left:1.5px solid var(--saguma-arena);}
.prop-chips span,.prop-pago span{font-size:12px;color:var(--saguma-grafito);}
.prop-chips b{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--saguma-azul);}
.prop-prod{padding:14px 18px;}
.prop-prod-t{font-weight:800;color:var(--saguma-azul);margin-bottom:8px;}
.prop-prod table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--saguma-azul);}
.prop-prod th{font-family:var(--font-texto);font-weight:600;font-size:12px;color:var(--saguma-grafito);text-align:left;padding:6px 0;border-bottom:1.5px solid var(--saguma-arena);}
.prop-prod td{padding:6px 0;border-bottom:1px solid var(--saguma-arena);}
.prop-prod th:last-child,.prop-prod td:last-child{text-align:right;}
.prop-oculto{color:var(--saguma-grafito);letter-spacing:.1em;}
.prop-pago{margin:0 18px;padding:12px 14px;background:var(--saguma-crema);border-radius:var(--radio-medio);display:grid;gap:6px;}
.prop-pago div{display:flex;justify-content:space-between;align-items:center;}
.prop-pago b{font-family:var(--font-mono);font-weight:500;color:var(--saguma-azul);}
.prop-pie{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--saguma-grafito);padding:14px 18px 16px;}
.prop-lista{list-style:none;display:grid;gap:18px;margin:0;padding:0;}
.prop-lista li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;color:var(--saguma-azul);}
.prop-lista b{display:block;font-weight:800;font-size:17px;line-height:24px;color:var(--saguma-azul);}
.prop-lista span{display:block;font-size:15px;line-height:22px;color:var(--saguma-grafito);}
/* Foto de oficio: grande y con el texto debajo; es la imagen "humana" de la mitad de la página. */
.prop-oficio{margin:28px 0 0;padding-top:24px;border-top:1.5px solid var(--saguma-arena);}
.prop-oficio img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;border-radius:var(--radio-grande);background:var(--saguma-arena);}
.prop-oficio figcaption{font-size:16px;line-height:24px;color:var(--saguma-grafito);margin-top:14px;}
@media(min-width:600px) and (max-width:959px){.prop-oficio img{aspect-ratio:3/2;}}
@media(min-width:960px){.prop-oficio img{aspect-ratio:4/3;object-position:center 30%;}}
@media(min-width:960px){
  .prop-grid{grid-template-columns:1fr 1fr;column-gap:64px;row-gap:32px;align-items:start;}
  .prop-intro{grid-column:1/-1;}
  .prop-mock{grid-row:2;}
  .prop-info{grid-row:2;}
}

/* ── 6. Preguntas ──────────────────────────────────────────────── */
.faq-sec .section-header{text-align:left;}
.faq-sec .section-title::after{margin-left:0;}
@media(min-width:960px){.faq-sec .section-header{text-align:center;}.faq-sec .section-title::after{margin-left:auto;}}

/* ── 7. Cierre ─────────────────────────────────────────────────── */
.cierre-home{padding:0 0 64px;}
@media(min-width:960px){.cierre-home{padding-bottom:96px;}}
.cierre-home .ficha-cierre-txt{max-width:720px;}
.cierre-home .cta-par{margin-top:4px;}

/* ── Barra fija (mobile): entra pasado el hero ─────────────────── */
body[data-barra-tras-hero] .barra-fija{transform:translateY(110%);transition:transform .2s ease-out;}
body[data-barra-tras-hero] .barra-fija.visible{transform:none;}

@media(prefers-reduced-motion:reduce){
  body[data-barra-tras-hero] .barra-fija{transition:none;}
  .cat-img{transition:none;}
}

/* ══ MOVIMIENTO ═════════════════════════════════════════════════════
   Lenguaje único para toda la home:
   · títulos: cada palabra sube desde abajo y se enfoca (blur → nítido),
     en cascada; la firma se dibuja de izquierda a derecha al final;
   · grupos (tarjetas, pasos, preguntas): entran escalonados;
   · la propuesta de ejemplo se arma renglón por renglón.
   El hero anima al cargar con CSS puro (no espera al JS). El resto lo
   dispara assets/catalogo.js al entrar en pantalla, y solo si pudo armarse
   (clase .anim-lista en <html>): sin JS, todo se ve quieto y completo. */
.pal{display:inline-block;}

/* Hero: secuencia de entrada */
@media(prefers-reduced-motion:no-preference){
  .portada-eyebrow{animation:animSubir .7s cubic-bezier(.2,.7,.2,1) .1s both;}
  .portada h1 .pal{animation:animPalabra .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i) * 70ms);}
  .portada h1::after{transform-origin:left;animation:animFirma .7s cubic-bezier(.65,0,.25,1) .8s both;}
  .portada-sub{animation:animSubir .8s cubic-bezier(.2,.7,.2,1) .7s both;}
  .portada .cta-par{animation:animSubir .8s cubic-bezier(.2,.7,.2,1) .85s both;}
  .portada-datos li{animation:animSubir .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(1.05s + var(--i) * 90ms);}
  /* Acercamiento lento de cada foto mientras está en pantalla (se reinicia al rotar). */
  .portada-slide.activa{animation:animAcercar 7s ease-out both;}
}
@keyframes animPalabra{from{opacity:0;filter:blur(8px);transform:translateY(45%);}to{opacity:1;filter:none;transform:none;}}
@keyframes animSubir{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes animFirma{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes animAcercar{from{transform:scale(1.08);}to{transform:scale(1);}}

/* Scroll: estado inicial solo cuando el JS armó el sistema */
.anim-lista [data-anim] .section-label,
.anim-lista [data-anim] .section-desc,
.anim-lista [data-anim] .cat-indicador,
.anim-lista [data-anim] .ficha-cierre-sub,
.anim-lista [data-anim] .cta-par{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.anim-lista [data-anim] .section-desc,.anim-lista [data-anim] .ficha-cierre-sub{transition-delay:.35s;}
.anim-lista [data-anim] .cta-par,.anim-lista [data-anim] .cat-indicador{transition-delay:.5s;}
.anim-lista [data-anim].anim-in .section-label,
.anim-lista [data-anim].anim-in .section-desc,
.anim-lista [data-anim].anim-in .cat-indicador,
.anim-lista [data-anim].anim-in .ficha-cierre-sub,
.anim-lista [data-anim].anim-in .cta-par{opacity:1;transform:none;}

.anim-lista [data-palabras] .pal{opacity:0;filter:blur(8px);transform:translateY(45%);transition:opacity .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.08s + var(--i) * 60ms);}
.anim-lista .anim-in [data-palabras] .pal{opacity:1;filter:none;transform:none;}
.anim-lista [data-palabras]::after{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.65,0,.25,1);transition-delay:calc(.25s + var(--n, 4) * 60ms);}
.anim-lista .section-header [data-palabras]::after{transform-origin:center;}
.anim-lista .anim-in [data-palabras]::after{transform:scaleX(1);}

.anim-lista [data-anim-grupo] > *{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .2s;transition-delay:calc(var(--i, 0) * 90ms);}
.anim-lista [data-anim-grupo].anim-in > *{opacity:1;transform:none;}
.anim-lista [data-anim-grupo].anim-hecho > *{transition-delay:0s;}
/* En el carrusel mobile las tarjetas llegan desde la derecha: anticipa el gesto de deslizar. */
@media(max-width:1023px){.anim-lista .cat-fila[data-anim-grupo] > *{transform:translateX(40px);}}
.anim-lista .cat-fila[data-anim-grupo].anim-in > *{transform:none;}

.anim-lista [data-anim-secuencia]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.anim-lista [data-anim-secuencia].anim-in{opacity:1;transform:none;}
.anim-lista [data-anim-secuencia] .sec{opacity:0;transform:translateX(-10px);transition:opacity .45s ease-out,transform .45s ease-out;transition-delay:calc(.35s + var(--i) * 110ms);}
.anim-lista [data-anim-secuencia].anim-in .sec{opacity:1;transform:none;}
.anim-lista .prop-ejemplo{transition-delay:.2s;}

/* ── Cinta ─────────────────────────────────────────────────────── */
.cinta{background:var(--saguma-azul);border-top:1px solid rgba(244,241,236,.14);overflow:hidden;}
.cinta-pista{display:flex;width:max-content;animation:animCinta 45s linear infinite;}
.cinta:hover .cinta-pista{animation-play-state:paused;}
.cinta span{display:flex;align-items:center;white-space:nowrap;padding:15px 0;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.88);}
.cinta span::after{content:'';width:6px;height:6px;margin:0 22px;background:var(--saguma-ambar);border-radius:1px;}
@keyframes animCinta{to{transform:translateX(-50%);}}

/* Microinteracción: la flecha de los CTA acompaña el hover. */
.btn span[aria-hidden="true"],.cat-accion span[aria-hidden="true"]{display:inline-block;transition:transform .2s ease;}
@media(hover:hover){
  .btn:hover span[aria-hidden="true"],.cat-card:hover .cat-accion span[aria-hidden="true"]{transform:translateX(4px);}
}

@media(prefers-reduced-motion:reduce){
  .cinta-pista{animation:none;flex-wrap:wrap;width:auto;}
  .cinta-pista span:nth-child(n+15){display:none;}
}