/* ============================================================
   HOME — front-page.php. Carga condicional (is_front_page()).
   Consume los tokens y componentes del origen único; aquí solo
   vive lo exclusivo del home.
   Ajustes de Calu integrados 2026-07-06 (hero, manifiesto,
   muestra, sobre; onda de audio en esquema gris→negro).
   ============================================================ */

.cw-scope{line-height:1.5}

/* Ajustes exactos del nav del home (difieren 1 paso de las interiores) */
.nav.scrolled{background:rgba(255,255,255,.82);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav.scrolled .nav__cta{border-color:var(--ink);color:var(--ink)}

/* ============ HERO ============ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:90px 24px 100px;background:var(--noche) center/cover no-repeat;position:relative}
.hero__center{display:flex;flex-direction:column;align-items:center;gap:36px}

/* Slogan como texto real (antes SVG): H1 en dos fuentes.
   Specs exactas entregadas desde Figma (2026-07-05). */
.hero__era{width:auto;max-width:94vw;color:#fff;text-align:center;font-weight:400;
  display:inline-flex;flex-direction:column;align-items:center}
.hero__era-caps{font-family:var(--font-hero-pre);font-weight:900;text-transform:uppercase;
  color:#fff;text-align:center;font-size:clamp(34px,7.2vw,90px);line-height:1}
.hero__era-caps-line{display:block}
/* Rosa #FFB6C1: color decorativo exclusivo de este grafismo (viene del
   SVG original), no uno de los 5 tokens globales del sitio. */
.hero__era-script{font-family:var(--font-hero-emphasis);font-weight:400;font-style:normal;
  color:#FFB6C1;text-align:center;font-size:clamp(52px,11vw,140px);line-height:1.2;
  display:inline-block;margin-top: -50px}
.hero__claim{font-family:var(--font-body);font-weight:400;font-size:1.4em;color:#fff;text-align:center;max-width:820px;padding:0 0 30px}
.hero__scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:#fff!important;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.85}
.hero__scroll::after{content:"";width:1px;height:34px;background:#fff;animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ MANIFIESTO ============
   Corrección 2026-07-06: la línea en mayúsculas va pegada al titular
   y el respiro grande queda antes del párrafo. Fondo blanco. */
.manifiesto{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px;background:var(--paper)}
.manifiesto__inner{max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:70px;text-align:center}
.manifiesto__head{display:flex;flex-direction:column;align-items:center;gap:22px}
.manifiesto h2{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.2;max-width:900px;padding-bottom: 10px}
.manifiesto h3{font-family:var(--font-body);font-weight:400;font-size:17px;text-transform:uppercase}
.manifiesto h3 u{text-underline-offset:5px}
.manifiesto p{font-weight:300;font-size:1.2em;line-height:1.5;max-width:1000px}

/* Reproductor de audio del manifiesto (onda de sonido) */
.manifiesto__audio{display:flex;align-items:center;gap:18px;width:min(560px,100%);margin-top:-24px}
.audio__play{flex:0 0 48px;width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);background:transparent;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.audio__play:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.audio__play svg{width:18px;height:18px;margin-left:2px}
.audio__play svg[hidden]{display:none}
.audio__ico-pause{margin-left:0!important}
.audio__wave{flex:1;display:flex;align-items:center;gap:3px;height:44px;cursor:pointer}
.audio__bar{flex:1;min-width:2px;border-radius:2px;background:rgba(0,0,0,.22);transition:background .15s linear}
.audio__bar.played{background:var(--ink)}
.manifiesto__audio.playing .audio__bar.played:last-of-type{animation:pulse .9s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.35)}}
.audio__time{flex:0 0 auto;font-size:11.5px;letter-spacing:.08em;color:#555;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.manifiesto__audio.playing .audio__bar.played:last-of-type{animation:none}}

/* ============ ALINEAR (lavanda) — slider ============ */
.alinear{background:var(--lavanda);padding:100px 24px;display:flex;justify-content:center}
.alinear__slider{max-width:1060px;width:100%;overflow:hidden}
.alinear__track{display:flex;transition:transform .6s var(--ease)}
.alinear__slide{flex:0 0 100%;min-height:60vh;display:flex;align-items:center;justify-content:center;gap:50px;flex-wrap:wrap;padding:0 10px}
.alinear__img{width:300px;flex:0 0 auto;overflow:hidden}
.alinear__img img{height:300px;width:300px;object-fit:cover;transition:transform 1.2s var(--ease)}
.alinear__img:hover img{transform:scale(1.05)}
.alinear__txt{max-width:640px;display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.alinear__txt h2{font-family:var(--font-display);font-weight:400;font-size:2em;line-height:1.3}

/* ============ CAMINO — fases conectadas a servicios ============ */
.camino{background:var(--paper);padding:150px 24px;display:flex;justify-content:center}
.camino__card{max-width:1200px;width:100%;background:var(--glass);border-radius:20px;padding:60px 50px;
  display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 20px 60px rgba(0,0,0,.06)}
.camino__card h2{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.5vw,54px)}
.camino__card h2 em{font-style:italic}
.camino__sub{font-size:1.2em;text-transform:uppercase;line-height:2.1;text-align:center}
.fases{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:24px}
/* Fases informativas: sin cursor, sin hover invertido ni "Ver cómo se
   trabaja" — dejaron de ser enlaces (el test de etapa toma ese rol). */
.fase{border:1px solid var(--ink);padding:30px 30px 26px;display:flex;flex-direction:column;gap:4px;
  background:transparent;text-align:left;font-family:var(--font-body);color:var(--ink)}
.fase+.fase{border-left:none}
.fase small{font-weight:300;font-size:.9em;text-transform:uppercase;letter-spacing:.06em}
.fase h3{font-size:1.7em;font-weight:600;text-transform:uppercase;margin-bottom:16px}
.fase p{font-size:.9em}
@media(max-width:900px){.fases{grid-template-columns:1fr}.fase+.fase{border-left:1px solid var(--ink);border-top:none}}

/* ============ ETAPA — quiz que resalta el servicio ============ */
.etapa{padding:110px 24px 130px;display:flex;justify-content:center;background:var(--paper)}
.etapa__inner{max-width:1000px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.etapa h2{font-family:var(--font-display);font-size:2.4em;line-height:1.15}
.etapa h2 .it{font-style:italic;font-weight:600}
.etapa>.etapa__inner p{max-width:640px}
.etapa__opciones{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:820px;margin-top:26px}
.opcion{font-family:var(--font-body);font-size:.95em;text-align:left;padding:22px 26px;border:1px solid var(--ink);
  border-radius:var(--radius-card);background:transparent;color:var(--ink);cursor:pointer;line-height:1.45;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.opcion:hover,.opcion:focus-visible{transform:translateY(-3px)}
.opcion.selected,.opcion:active{background:var(--ink);color:#fff}
.etapa__resultado{margin-top:26px;min-height:56px;font-size:.95em;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.etapa__resultado.show{opacity:1;transform:none}
.etapa__resultado strong{text-transform:uppercase;letter-spacing:.06em}
@media(max-width:700px){.etapa__opciones{grid-template-columns:1fr}}

/* ============ SERVICIOS (petróleo) ============ */
.servicios{background:var(--petroleo);padding:150px 24px;display:flex;justify-content:center}
.servicios__grid{max-width:1200px;width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.servicio{background:var(--paper);border-radius:var(--radius-card);min-height:450px;padding:56px 50px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.servicio:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.servicio h3{font-size:16px;font-weight:700;text-transform:uppercase}
.servicio h4{font-family:var(--font-display);font-size:1.8em;font-weight:600;line-height:1.25;margin:6px 0 10px}
.servicio p{font-size:14px;text-align:left}
.servicio .btn{align-self:flex-start;margin-top:22px}
.servicio.destacado{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media(max-width:900px){.servicios__grid{grid-template-columns:1fr}.servicio{min-height:0;padding:44px 32px}}

/* ============ WONDER ERA SE VE ASÍ (gris) ============ */
.muestra{background:var(--gris);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 24px}
.muestra__inner{max-width:1200px;width:100%;display:flex;flex-direction:column;gap:0}
.muestra h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(34px,4.5vw,50px);line-height:1.1;align-self:flex-start;padding-top:100px}
.muestra__img{margin-top:-50px;align-self:flex-end;width:900px;max-width:100%}
/* Texto The Wonder Method — abajo a la izquierda, junto al diagrama */
.muestra__txt{align-self:flex-start;max-width:500px;display:flex;flex-direction:column;gap:18px;
  font-size:14px;line-height:1.6;text-align:justify}
.muestra__txt strong{font-weight:600}
@media(min-width:1000px){.muestra__txt{margin-top: -70px}}

/* ============ SOBRE CALU ============ */
.sobre{background:var(--paper);min-height:100vh;display:flex;align-items:center;justify-content:center;gap:50px;
  padding:120px 24px;flex-wrap:wrap}
.sobre__foto{flex:0 1 420px}
.sobre__foto img{border-radius:300px}
.sobre__txt{flex:1 1 480px;max-width:640px}
.sobre__txt h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(40px,5vw,60px);margin-bottom:24px}
.sobre__txt p{font-size:16px;text-align:left;margin-bottom:14px;text-align:justify}

/* ============ TRABAJOS DESTACADOS ============ */
.trabajos{background:var(--paper);padding:130px 24px;display:flex;justify-content:center}
.trabajos__inner{max-width:1200px;width:100%;display:flex;flex-direction:column;gap:54px}
.trabajos h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(34px,4.5vw,50px);line-height:1.1}
.trabajos h2 strong{font-weight:600}
.trabajos__slider{overflow:hidden}
.trabajos__track{display:flex;transition:transform .6s var(--ease)}
.trabajos__slide{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.trabajo{display:flex;flex-direction:column;gap:14px;text-decoration:none;
  transition:transform var(--speed) var(--ease)}
.trabajo:hover{transform:translateY(-6px)}
.trabajo__foto{aspect-ratio:2/1;border-radius:var(--radius-card);overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-family:monospace;font-size:11px;color:#8a8680;letter-spacing:.06em;
  background:repeating-linear-gradient(45deg,#F3F2F0 0 12px,#EAE8E5 12px 24px)}
.trabajo__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.trabajo:hover .trabajo__foto img{transform:scale(1.05)}
.trabajo h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.trabajo p{font-size:12.5px;color:#555}
@media(max-width:900px){.trabajos__slide{grid-template-columns:1fr}}

/* ============ BLOG (sección del home) ============ */
.blog{background:var(--gris);padding:130px 24px;display:flex;justify-content:center}
.blog__inner{max-width:1200px;width:100%;display:flex;flex-direction:column;gap:54px}
.blog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.blog h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(34px,4.5vw,50px);line-height:1.1}
.blog h2 strong{font-weight:600}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.post{display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:transform var(--speed) var(--ease)}
.post:hover{transform:translateY(-6px)}
.post__foto{aspect-ratio:3/2;border-radius:var(--radius-card);overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-family:monospace;font-size:12px;color:#8a8680;letter-spacing:.06em;
  background:repeating-linear-gradient(45deg,#ECEAE6 0 12px,#E2DFDA 12px 24px)}
.post__foto img{width:100%;height:100%;object-fit:cover}
.post__cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#555}
.post h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3}
.post p{font-size:13px;color:#555}
.post__leer{font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:2px}
@media(max-width:900px){.blog__grid{grid-template-columns:1fr}}

/* Footer del home (más alto que el de interiores) */
.home .footer{min-height:300px;gap:40px;padding:60px 20px 20px}