/* ============================================================
   Agua — el CSS del mockup aprobado mockups/agua.html, tal cual (brief §0). Solo se quitaron
   las reglas de su barra de demostración (.intro, .brand, .note, .hint) y de sus rótulos de
   maqueta (.chip). Lo que pide el build va aparte, al final.
   ============================================================ */
  :root{
    --ground:#0B1A1E; --ground2:#10262B; --ink:#F2F5F4; --muted:#8FA8A6;
    --water:#7FC6D6; --water-deep:#2D7C8F; --moss:#1F4D3A; --mist:#DCE7E6;
    --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  html{color-scheme:dark;scroll-behavior:auto}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);
       padding-inline:0;-webkit-font-smoothing:antialiased}
  a{color:var(--water)}
  .wrap{padding-inline:clamp(16px,5vw,64px)}


  /* ---- pinned scrollytelling ---- */
  .scrolly{position:relative;height:720vh}
  .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--ground)}
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block}


  .rail{position:absolute;right:clamp(16px,5vw,64px);top:50%;transform:translateY(-50%);
        display:flex;flex-direction:column;gap:18px;font-size:11px;letter-spacing:.2em;
        text-transform:uppercase;color:var(--muted)}
  .rail span{display:flex;align-items:center;gap:10px;transition:color .3s}
  .rail span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
  .rail span.on{color:var(--water)}
  .rail span.on::before{opacity:1;box-shadow:0 0 0 4px rgba(127,198,214,.18)}

  .chapter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
           padding:0 clamp(16px,5vw,64px) 14vh;pointer-events:none;opacity:0;
           transform:translateY(24px);max-width:34rem;box-sizing:border-box}
  .chapter.center{justify-content:center;align-items:center;text-align:center;padding-bottom:0;max-width:none}
  .eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--water);margin:0 0 14px}
  .chapter h2{font-weight:300;font-size:clamp(28px,5vw,54px);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
  .chapter h2 strong{font-weight:800}
  .chapter p{margin:16px 0 0;font-size:clamp(14px,1.6vw,17px);line-height:1.55;color:var(--mist);max-width:44ch}
  .big{font-weight:800;font-size:clamp(72px,18vw,180px);line-height:.9;letter-spacing:-.04em;
       font-variant-numeric:tabular-nums;transform-origin:left bottom;display:inline-block}
  .steps{display:flex;flex-direction:column;gap:10px;margin-top:22px;font-size:clamp(15px,1.8vw,20px)}
  .steps span{opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s;
              display:flex;align-items:center;gap:12px}
  .steps span::before{content:"";width:22px;height:1px;background:var(--water)}
  .steps span.on{opacity:1;transform:none}
  .steps b{font-weight:600}


  .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:32% 62%;
      opacity:0;will-change:transform,opacity}
  .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,30,.15) 0%,rgba(11,26,30,0) 35%,rgba(11,26,30,.55) 70%,rgba(11,26,30,.92) 100%);pointer-events:none}
  .chapter h2,.chapter p,.eyebrow{text-shadow:0 1px 18px rgba(11,26,30,.6)}
  canvas{mix-blend-mode:screen;opacity:.85}


  .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:inherit;margin-top:22px!important}
  .cta span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--ground)}
  .cta span.ghost{background:transparent;color:var(--ink)}
  /* ---- parte baja (mockup agua-abajo.html, 16.09.2026) ---- */
  /* Tipografía del mockup, con alcance a las cinco secciones de la parte baja: el recorrido
     tiene la suya y no se toca. (Se habían perdido al reemplazar el bloque, 16.09.2026.) */
  .abajo-a .eb,.sb .eb,.sd .eb,.se .eb{font-size:11px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--water);margin:0 0 12px}
  .abajo-a h3,.sb h3,.sd h3,.se h3{font-weight:300;font-size:clamp(24px,3.2vw,40px);
    margin:0 0 10px;line-height:1.1;text-wrap:balance}
  .abajo-a h3 b,.sb h3 b,.sd h3 b,.se h3 b{font-weight:800}
  .abajo-a h4,.sb h4,.sd h4,.se h4{font-weight:800;font-size:18px;margin:0 0 8px}
  .abajo-a p,.sb p,.sd p,.se p{color:var(--muted);line-height:1.6;max-width:56ch;
    margin:10px 0 0;font-size:15px}
  .abajo-a .fn,.sb .fn,.sd .fn,.se .fn{font-size:12px!important}
  .abajo-a .lnk,.sb .lnk,.sd .lnk,.se .lnk{color:var(--water);font-size:13px;letter-spacing:.08em}
  .abajo-a .media,.sb .media,.sd .media,.se .media{border:1px dashed rgba(220,231,230,.3);
    border-radius:3px;position:relative;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);padding:14px}
  .abajo-a .media b,.sb .media b{display:block;font-weight:800;margin-bottom:4px}
  /* (10.10.2026) el botón es el <span> de adentro (relleno, como en el recorrido); el enlace ya
     no lleva su propio recuadro: con los dos, «Quiero Agua Cedral» se veía con marco doble */
  .abajo-a .cta a,.sb .cta a,.se .cta a{display:inline-block;margin-top:18px;padding:0;border:0;
    color:var(--ink);text-decoration:none;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;font-weight:600}
  /* A · Cómo sabe + Lo que no lleva, con la foto a toda la altura */
  .abajo-a{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch;
           padding-block:80px;border-top:1px solid rgba(220,231,230,.12)}
  .abajo-a .txt{display:flex;flex-direction:column;justify-content:center;gap:44px}
  /* opacity:1 porque la regla .ph de las capas del recorrido arranca en 0 y solo agua.js
     enciende las seis del escenario: sin esto, F09 y su espacio quedaban invisibles (22.09.2026) */
  .abajo-a .ph{min-height:520px;position:relative;overflow:hidden;opacity:1}
  .abajo-a .ph > .media,.abajo-a .ph > .foto{position:absolute;inset:0}
  /* el espacio de foto se ve sobre el fondo oscuro: su propio velo claro, con el código y la
     descripción arriba a la izquierda, como en el mockup */
  /* el código y la descripción, arriba a la izquierda, como en el mockup; el velo y los colores
     los pone .media.on-dark, que es lo que usa el resto del sitio sobre fondo oscuro */
  /* el borde punteado del mockup: sobre este fondo (#0B1A1E) hace falta este valor para
     llegar a ~3:1 y que el espacio de foto se distinga (medido, no a ojo) */
  .abajo-a .ph > .media{border:1px dashed rgba(220,231,230,.45);border-radius:3px;
                        align-items:flex-start;justify-content:flex-start;text-align:left;padding:18px}
  .abajo-a .ph > .media::after{text-align:left;max-width:42ch;margin-top:20px}
  /* B · Análisis, en el segundo oscuro y con líneas arriba y abajo */
  .sb{background:var(--ground2);border-top:1px solid rgba(220,231,230,.12);
      border-bottom:1px solid rgba(220,231,230,.12);padding-block:80px}
  .sb .in{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
  .sb .side{padding-top:6px;border-left:1px solid rgba(220,231,230,.18);padding-left:32px}
  .ficha{margin-top:24px;border:1.5px solid var(--mist);border-radius:3px;display:grid;
         grid-template-columns:auto 1fr auto;font-variant-numeric:tabular-nums;
         background:rgba(220,231,230,.04)}
  .ficha>div{padding:14px 16px;border-right:1.5px solid var(--mist)}
  .ficha>div:last-child,.f-dots{border-right:0}
  .f-ph{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:84px}
  .f-ph b{font-weight:800;font-size:30px;line-height:1}
  .f-ph span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .f-min{display:grid;grid-template-columns:repeat(3,1fr);padding:0!important}
  .f-min div{padding:12px 10px;border-right:1px solid rgba(220,231,230,.35);text-align:center;
             display:flex;flex-direction:column;gap:2px}
  .f-min div:last-child{border-right:0}
  .f-min b{font-weight:800;font-size:15px}
  .f-min i{font-style:normal;font-size:17px;font-weight:300}
  .f-min span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .f-dots{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-width:110px}
  .f-dots .grid{display:grid;grid-template-columns:repeat(4,10px);gap:7px}
  .f-dots .grid i{width:10px;height:10px;border-radius:50%;border:1.2px solid var(--mist)}
  .f-dots .grid i.on{background:var(--mist)}
  .f-dots span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .f-foot{grid-column:1/-1;border-top:1.5px solid var(--mist);border-right:0!important;display:flex;
          justify-content:space-between;flex-wrap:wrap;gap:6px 18px;font-size:11px;letter-spacing:.06em;
          color:var(--muted);padding:10px 16px!important}
  .f-foot b{color:var(--ink);font-weight:600}
  .perfil{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin-top:14px}
  .perfil div{border-top:1px solid rgba(220,231,230,.25);padding-top:8px;display:flex;
              justify-content:space-between;font-size:14px}
  .perfil div span{color:var(--muted)}
  /* D · Hoteles y restaurantes, en crema con tarjetas blancas */
  .sd{background:var(--crema);color:var(--tinta);padding-block:80px}
  .sd .eb{color:var(--khaki-t)}      /* 18.09.2026: --khaki (2,77:1) → khaki de texto */
  .sd p{color:#5b625e}
  /* (16.10.2026) sin la franja de botellas, las tarjetas van directo después de la introducción */
  .sd .two{margin-top:48px}
  /* los formatos, como dato dentro de «Sirva Cedral»: regla fina arriba, una fila por formato */
  .card .formatos{margin:24px 0 0;padding-top:18px;border-top:1px solid rgba(34,54,49,.16);display:grid;gap:14px}
  .card .formatos dt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0}
  .card .formatos dt b{color:var(--tinta);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
  .card .formatos dd{margin:4px 0 0;color:#5b625e;font-size:14px;line-height:1.5}
  .card .etq{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;
    line-height:1;border-radius:2px;background:rgba(34,54,49,.08);color:var(--tinta)}
  .card .etq.hoy{background:var(--pino);color:#fff}
  /* las curvas de la marca en beige (beech) sobre el hueso, sutiles, detrás de las tarjetas */
  #hoteles > .curvas-hoteles{--curvas:var(--beech);opacity:.4;z-index:-1}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px}
  .card{background:#fff;border:1px solid rgba(34,54,49,.15);padding:36px 36px 40px;display:flex;
        flex-direction:column}
  .card h4{color:var(--tinta);font-size:22px;font-weight:800;margin:0 0 8px}
  .card .cta{margin-top:auto;padding-top:28px}
  .card .cta a{display:inline-block;padding:12px 22px;background:var(--pino);border:1px solid var(--pino);
    color:#fff;text-decoration:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
  .sd .fn{margin-top:28px}
  /* E · Cierre, oscuro y centrado, con las curvas del sitio */
  .se{background:var(--ground);text-align:center;padding-block:120px;position:relative;overflow:clip}
  .se .in{position:relative;z-index:1}
  .se p{margin-inline:auto}
  .se h3{max-width:none}
  .se .cta{justify-content:center}
  @media (max-width:820px){
    .abajo-a,.sb .in,.two{grid-template-columns:1fr}
    /* en móvil la foto va arriba y ocupa el ancho de la columna: sin esto, el .ph conserva el
       ancho de la rejilla de escritorio y la página se sale a lo ancho */
    .abajo-a .ph{min-height:280px;order:-1;width:100%;max-width:100%}
    .sb .side{border-left:0;padding-left:0;border-top:1px solid rgba(220,231,230,.18);padding-top:28px}
    .abajo-a,.sb,.sd,.se{padding-block:56px}
    /* la ficha se apila: sus tres columnas (117 + 274 + 143) no caben en una pantalla de 390 y
       hacían que la página se saliera 165 px a lo ancho */
    .ficha{grid-template-columns:1fr 1fr}
    .f-ph{min-width:0;border-right:1.5px solid var(--mist)}
    .f-dots{min-width:0;border-right:0}
    .f-min{grid-column:1/-1;border-top:1.5px solid var(--mist);border-right:0!important}
    .f-foot{order:4}
    .perfil{grid-template-columns:1fr}
  }

  /* ---- after the pin: normal flow resumes ---- */
  .after{padding-block:64px 80px;border-top:1px solid rgba(220,231,230,.12);display:grid;
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
  .after h3{grid-column:1/-1;font-weight:300;font-size:clamp(22px,3vw,34px);margin:0 0 8px}
  .after h3 b{font-weight:800}
  .block{border:1px dashed rgba(220,231,230,.3);border-radius:3px;padding:18px;min-height:120px;
         font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
         display:flex;align-items:flex-end}
  .after p{grid-column:1/-1;color:var(--muted);font-size:13px;line-height:1.55;max-width:60ch;margin:0}

  @media (max-width:640px){
    .rail{top:auto;bottom:22px;right:auto;left:clamp(16px,5vw,64px);transform:none;flex-direction:row;gap:14px;font-size:9px}
    .chapter{padding-bottom:20vh}
  }
  @media (prefers-reduced-motion:reduce){
    .chapter,.steps span,.rail span{transition:none}
  }

/* ================================================================
   Adaptación al build (brief §0), lo único que no viene del mockup.
   ================================================================ */

/* (contenedor) El texto de los capítulos vive en el mismo eje que el resto del sitio: el fondo
   sigue a sangre, la columna de texto se centra con el contenedor en pantallas grandes. */
.chapter{max-width:none;padding-inline:var(--borde)}
.chapter > *{max-width:34rem}
.chapter.center > *{max-width:none}
/* Los capítulos centrados (portada y cierre) dejan libre el riel de la derecha, a los dos lados
   para seguir centrados: a 768 y 1024 el título del cierre pasaba por debajo del riel
   (auditoría del 18.09.2026). 132 px: el riel más largo («Ligereza», «Lightness») y aire. */
@media (min-width:641px){
  .chapter.center{padding-inline:max(var(--borde),calc(clamp(16px,5vw,64px) + 132px))}
}

/* (h1) El título del primer capítulo es el <h1> de la página; el mockup los tenía todos como
   <h2>. Mismas reglas, mismo aspecto. */
.chapter h1{font-weight:300;font-size:clamp(28px,5vw,54px);line-height:1.08;margin:0;
  text-wrap:balance;letter-spacing:-.01em;text-shadow:0 1px 18px rgba(11,26,30,.6)}
.chapter h1 strong{font-weight:800}
/* El mockup se aprobó dentro del marco de artifact de claude.ai, cuyo reset pone el cuerpo a
   14 px (y las imágenes a max-width:100%): todo lo que el mockup mide en ch o hereda, se mide así. */
body{font-size:14px}
img{max-width:100%}
/* (d) Fotos F##: cada capa del recorrido es un espacio F##; la foto, cuando llega, la llena */
.stage > .ph > .media,.stage > .ph > .foto{position:absolute;inset:0}
/* 18.09.2026: el espacio vacío de cada capa lleva su código y su descripción arriba a la
   izquierda, como los otros espacios de la página: centrados, se cruzaban con el título de los
   capítulos centrados (AGU-00 y AGU-06) al entrar a la página */
.stage > .ph > .media{align-items:flex-start;justify-content:flex-start;text-align:left;padding:34px 18px 18px}
.stage > .ph > .media::after{text-align:left;max-width:42ch}
.stage > .ph > .foto img{object-fit:cover}
.ph2{position:relative;overflow:hidden}
.ph2 > .media,.ph2 > .foto{position:absolute;inset:0}
.ph2 > .media{background:none;padding:30px 12px 12px;align-items:flex-start;justify-content:flex-start;text-align:left}
.ph2 > .media::after{text-align:left;max-width:none}
/* los botones del mockup son etiquetas; en el sitio llevan a Comprar, a hoteles o a WhatsApp, y
   solo se tocan en el capítulo visible */
.cta a{text-decoration:none}
.chapter.activo .cta a{pointer-events:auto}
/* Con movimiento reducido el recorrido se apila quieto (brief 3.4); sin JS, igual (noscript) */
@media (prefers-reduced-motion:reduce){
  .scrolly{height:auto}
  .stage{position:relative;height:auto;overflow:visible}
  .stage > .ph,.scrim,#cv,.rail{display:none}
  .chapter{position:relative;inset:auto;opacity:1;transform:none;max-width:none;
    padding:12vh clamp(16px,5vw,64px)}   /* sin raya entre capítulos (fundidos, 09.10.2026) */
  .chapter .steps span{opacity:1;transform:none}
  .chapter .cta a{pointer-events:auto}
}

/* (curvas IGN, 16.09.2026) Aquí el fondo es oscuro: el trazo va en beech para verse. */
.scrolly,.se{--curvas:var(--beech)}

/* objetivos táctiles de esta página (ver cedral.css, 18.09.2026) */
@media (pointer:coarse), (max-width:760px){
  .chapter .cta a{display:inline-flex}
  .chapter .cta a span{min-height:var(--toque);display:inline-flex;align-items:center;box-sizing:border-box}
  /* los botones de las tarjetas y del cierre: en una sola línea medían 43,6 px */
  .abajo-a .cta a,.sb .cta a,.se .cta a,.card .cta a{min-height:var(--toque);display:inline-flex;align-items:center;
    justify-content:center;box-sizing:border-box}
}

/* (09.10.2026) Fundidos entre bloques (mecánica en cedral.css): del fondo de la página al de la
   ficha, de la ficha a la crema de hoteles y de ahí al cierre, cada bloque pone su mitad. */
:root{--m-fichas:color-mix(in oklab,var(--ground),var(--ground2));
      --m-hoteles:color-mix(in oklab,var(--ground2),var(--crema));
      --m-cierre:color-mix(in oklab,var(--crema),var(--ground))}
.abajo-a{--funde-sale:var(--m-fichas)}
.sb{--funde-entra:var(--m-fichas);--funde-sale:var(--m-hoteles)}
.sd{--funde-entra:var(--m-hoteles);--funde-sale:var(--m-cierre)}
.se{--funde-entra:var(--m-cierre)}
/* (10.10.2026) en escritorio el cierre tiene 120 px de relleno: el paso entero desde la crema va
   dentro de él, con sus curvas apareciendo en todo el tramo (la crema de hoteles no tiene curvas) */
@media (min-width:769px){
  /* la crema llega hasta el borde: su píxel de solape tapa en crema la fila compartida */
  .sd{--funde-sale:var(--crema);--funde-sale-alto:0px}
  .se{--funde-entra:var(--crema);--funde-entra-alto:var(--funde)}
}