/* Tipografías estilo referencia: Inter Tight (≈ PP Neue Montreal) + Fragment Mono (idéntica) */
  @font-face{font-family:'Inter Tight';src:url('fonts/InterTight.woff2') format('woff2');
    font-weight:100 900;font-display:swap}
  @font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Italic.woff2') format('woff2');
    font-weight:100 900;font-style:italic;font-display:swap}
  @font-face{font-family:'Fragment Mono';src:url('fonts/FragmentMono.woff2') format('woff2');
    font-weight:400;font-display:swap}
  @font-face{font-family:'Fragment Mono';src:url('fonts/FragmentMono-Italic.woff2') format('woff2');
    font-weight:400;font-style:italic;font-display:swap}
  /* caligráfica del crédito "Ji Group" (misma de lahistorica.mx) */
  @font-face{font-family:'Mairo';src:url('fonts/Mairo.otf') format('opentype');
    font-weight:400;font-style:normal;font-display:swap}
  :root{
    --vino:#60241E;      /* ground principal (rol del azul Cantor8) */
    --vino-deep:#3F1511; /* bloques oscuros */
    --ink:#1E0B08;       /* casi negro cálido (rol del negro) */
    --wine:#95271D;
    --brick:#B34A44;
    --terra:#E77B49;     /* acento (rol del cyan) */
    --cream:#F4EEE3;     /* texto sobre vino */
    --paper:#FBF8F1;     /* cards claras */
    --cream-ink:#2A1512; /* texto oscuro sobre fondos claros */
    --mono:"Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --grot:"Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  /* overflow-x:clip (no hidden): hidden convierte al body en contenedor de scroll en Safari
     y rompe position:sticky — clip recorta sin crear scroller */
  body{background:var(--vino);color:var(--cream);font-family:var(--grot);-webkit-font-smoothing:antialiased;overflow-x:clip}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .mono{font-family:var(--mono)}

  /* ============ NAV (pill central, como referencia) ============ */
  header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
    padding:16px clamp(16px,3vw,36px);pointer-events:none}
  header>*{pointer-events:auto}
  /* franja sutil bajo el nav para que el logo no se pierda sobre texto */
  header::before{content:"";position:absolute;inset:0;height:150%;pointer-events:none;z-index:-1;
    background:linear-gradient(rgba(30,11,8,.42),rgba(30,11,8,.18) 55%,transparent);
    opacity:0;transition:opacity .35s ease}
  header.scrolled::before{opacity:1}
  header.light::before{background:linear-gradient(rgba(251,248,241,.92),rgba(251,248,241,.55) 55%,transparent)}
  .logo{display:flex;align-items:center}
  .logo img{height:52px;width:auto;filter:brightness(0) invert(1);transition:height .35s ease}
  header.scrolled .logo img{height:34px} /* versión blanca sobre vino */
  /* menú limpio, sin fondo, a la izquierda del CTA */
  .navright{display:flex;gap:clamp(10px,2vw,28px);align-items:center}
  .navright .lnk{font-size:14px;padding:8px 2px;color:var(--cream);font-weight:600;
    border-bottom:2px solid transparent;transition:border-color .2s,opacity .2s}
  .navright .lnk:hover,.navright .lnk.on{border-color:var(--terra)}
  .btn-touch{display:inline-flex;align-items:center;gap:8px;background:var(--paper);color:var(--vino);
    font-weight:700;font-size:13.5px;padding:10px 16px;border:1px solid var(--paper);transition:background .2s;margin-left:10px}
  .btn-touch:hover{background:var(--terra);border-color:var(--terra);color:var(--ink)}
  .btn-touch svg{width:13px;height:13px}
  @media(max-width:900px){.navright .lnk{display:none}}
  @media(max-width:560px){header .btn-touch{display:none}.logo img{height:42px}}
  /* nav sobre secciones claras: cambia a tinta oscura y logo original */
  header.light .lnk{color:var(--cream-ink)}
  header.light .logo img{filter:none}
  header.light .btn-touch{background:var(--vino);border-color:var(--vino);color:var(--paper)}
  header.light .btn-touch:hover{background:var(--terra);border-color:var(--terra);color:var(--ink)}

  /* ============ HERO — foto de Andrea y Karina, texto abajo-izq ============ */
  /* Efecto cortina Safari-proof: el contenido del hero es fixed pero queda RECORTADO
     a la caja del hero via clip-path (el clip-path convierte al hero en containing block
     del fixed). El hero fluye normal; al scrollear, Fundamento lo va tapando. Sin sticky. */
  .curtain{position:relative}
  .hero{position:relative;z-index:0;height:100svh;min-height:600px;overflow:clip;
    clip-path:inset(0);background:var(--vino)}
  .hero-fix{position:fixed;top:0;left:0;width:100%;height:100svh;min-height:600px}
  .hero .ph{position:absolute;inset:0}
  /* scale 1.12: acerca la imagen y deja fuera de cuadro la marca de agua de la esquina */
  .hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;
    transform:scale(1.12);transform-origin:center 40%}
  /* tratamiento de marca: veladura vino + gradiente para legibilidad */
  .hero .ph::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(96,36,30,.30) 0%, rgba(96,36,30,.12) 40%, rgba(30,11,8,.78) 100%),
               linear-gradient(90deg, rgba(63,21,17,.55) 0%, transparent 55%)}
  .hero .ph-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,var(--wine),var(--vino) 60%,var(--vino-deep));
    font-family:var(--mono);font-size:11px;letter-spacing:.25em;color:rgba(244,238,227,.5);text-transform:uppercase;text-align:center;padding:20px}
  .hero-roles{position:absolute;right:clamp(18px,3.5vw,40px);top:50%;transform:translateY(-50%);z-index:5;
    display:flex;flex-direction:column;gap:16px;text-align:right}
  .hero-roles .r{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--cream);opacity:.9;text-transform:uppercase;
    text-shadow:0 1px 14px rgba(30,11,8,.85), 0 0 3px rgba(30,11,8,.6)}
  .hero-roles .r b{display:block;font-family:var(--grot);font-size:15px;letter-spacing:.02em;color:#fff;font-weight:800;margin-bottom:3px}
  @media(max-width:760px){.hero-roles{display:none}}
  .hero-inner{position:absolute;left:clamp(18px,3.5vw,40px);bottom:clamp(22px,5vh,48px);z-index:5}
  .hero h1{font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.04;font-weight:500;letter-spacing:-.025em;color:#fff;text-wrap:balance}
  .hero .cta{margin-top:22px;display:inline-flex;align-items:center;gap:9px;background:var(--paper);color:var(--vino);
    font-weight:700;font-size:13.5px;padding:11px 16px;transition:background .2s,transform .15s}
  .hero .cta:hover{background:var(--terra);color:var(--ink);transform:translateY(-2px)}
  .hero .cta svg{width:15px;height:15px}
  .scrolldown{position:absolute;right:clamp(18px,3.5vw,40px);bottom:clamp(22px,5vh,48px);z-index:5;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.32em;color:var(--cream);opacity:.75;animation:blink 2.4s infinite}
  @keyframes blink{0%,100%{opacity:.75}50%{opacity:.3}}

  /* ============ secciones base ============ */
  section{position:relative}
  /* blindaje de apilado: todo lo posterior a la cortina queda SIEMPRE sobre el hero,
     en cualquier navegador — nada puede asomarse por detrás */
  .pixband,.backed,.trusted,.suite,.photo,.moments,.news,.cta-final,footer{position:relative;z-index:2}
  .pixband{background:var(--vino)} /* fondo sólido: sin transparencias detrás de los píxeles */
  .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(18px,3.5vw,40px)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra)}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ============ FUNDAMENTO (Foundation, con líneas escalera) ============ */
  .foundation{background:var(--vino);position:relative;overflow:hidden;
    padding:clamp(90px,14vh,160px) 0 clamp(90px,16vh,180px);min-height:130vh;
    display:flex;flex-direction:column;justify-content:space-between}
  /* escalerita: se dibuja progresivamente con el scroll (JS controla dashoffset) */
  /* título pegado a la esquina superior izquierda, como la referencia */
  .foundation .head{position:relative;z-index:2;padding:0 clamp(18px,3.5vw,40px);max-width:none}
  .foundation h2{font-size:clamp(2.1rem,4.4vw,4.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.04;
    max-width:16ch;margin:14px 0 0;color:#fff}
  /* bloque de texto: centro-derecha (no pegado a la orilla) */
  .f-row{position:relative;z-index:2;padding:0 clamp(18px,3.5vw,40px)}
  .f-block{max-width:520px;margin-left:52%;margin-top:clamp(60px,12vh,140px)}
  @media(max-width:900px){.f-block{margin-left:0}}
  .f-sub{font-size:clamp(1.3rem,2.4vw,2.1rem);font-weight:550;letter-spacing:-.015em;line-height:1.15;color:#fff}
  .f-txt{margin-top:18px;font-size:15.5px;line-height:1.62;color:#EBD9C9}
  .btn-card{display:inline-flex;align-items:center;gap:26px;margin-top:28px;background:var(--paper);color:var(--vino);
    font-weight:700;font-size:15px;padding:15px 18px;border:1px solid var(--paper);transition:background .2s,color .2s}
  .btn-card svg{width:15px;height:15px}
  .btn-card:hover{background:var(--terra);border-color:var(--terra);color:var(--ink)}
  .lnk-arrow{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-weight:700;font-size:14.5px}
  .lnk-arrow svg{width:13px;height:13px}

  /* ============ RESPALDO — texto en vino (después de La Firma, como referencia) ============ */
  .backed{background:var(--vino);text-align:center;padding:clamp(150px,26vh,300px) 0}
  .backed h3{font-size:clamp(1.8rem,3.4vw,3.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.08;
    color:#fff;text-wrap:balance;max-width:22ch;margin:0 auto}
  .backed p{margin:26px auto 0;max-width:62ch;font-size:15.5px;line-height:1.65;color:#EBD9C9;font-weight:400}
  /* sección clara a pantalla completa: texto arriba-derecha, logos abajo */
  .trusted{background:var(--paper);min-height:100svh;padding:clamp(100px,16vh,180px) 0 0;
    display:flex;flex-direction:column;justify-content:space-between}
  .t-head{display:flex;justify-content:flex-end}
  .t-head .inner{max-width:580px;text-align:left}
  .trusted h3{font-size:clamp(1.8rem,3.4vw,3.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.08;
    color:var(--cream-ink);text-wrap:balance}
  .trusted p{margin:22px 0 0;max-width:56ch;font-size:15.5px;line-height:1.65;color:#6B4A3E;font-weight:400}
  /* los 6 logos en UN solo renglón */
  .t-logos{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
    gap:clamp(24px,4vw,64px);max-width:1280px;margin:clamp(40px,7vh,80px) auto 0;
    padding:0 clamp(18px,3.5vw,40px) clamp(70px,10vh,130px)}
  /* en móvil: cuadrícula de 2 en 2 (tres filas) */
  @media(max-width:980px){.t-logos{display:grid;grid-template-columns:1fr 1fr;gap:36px 20px;justify-items:center;align-items:start}
    .t-logos .it figcaption{white-space:normal;text-align:center}}
  .t-logos .it{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;
    opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  /* logos más chicos y con tope de ancho (evita que Economía/RPC se disparen) */
  .t-logos .it img{height:clamp(24px,3vw,40px);width:auto;max-width:170px;object-fit:contain}
  .t-logos .it figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:#6B4A3E;white-space:nowrap}
  .t-logos.go .it{opacity:1;transform:none}

  /* ============ PIXEL BAND (media pantalla, como referencia) ============ */
  .pixband{height:clamp(220px,46vh,420px);position:relative;overflow:hidden}
  .pixband .pgrid{position:absolute;inset:0;display:grid}
  .pixband .pgrid i{display:block;opacity:0;transition:opacity .06s linear}
  .pixband .pgrid i.on{opacity:1}

  /* ============ SERVICIOS (Product Suite, fondo oscuro) ============ */
  .suite{background:var(--ink);padding:clamp(100px,16vh,180px) 0 clamp(70px,10vh,130px);
    min-height:100svh;display:flex}
  .suite>.wrap{display:flex;flex-direction:column;justify-content:space-between;flex:1;width:100%}
  .suite-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
  @media(max-width:820px){.suite-head{grid-template-columns:1fr}}
  .suite h2{font-size:clamp(3rem,9vw,7.4rem);font-weight:500;letter-spacing:-.03em;line-height:.92;color:#fff}
  .suite-desc{max-width:38ch;font-size:15px;line-height:1.6;color:#E6D5C6;justify-self:end}
  @media(max-width:820px){.suite-desc{justify-self:start}}
  .rail-outer{margin-top:46px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x mandatory;padding-bottom:8px}
  .rail-outer::-webkit-scrollbar{display:none}
  .rail{display:flex;gap:14px;width:max-content;padding-right:clamp(18px,3.5vw,40px)}
  .s-card{width:clamp(260px,26vw,330px);flex:none;background:var(--vino);padding:20px 20px 24px;
    display:flex;flex-direction:column;min-height:340px;scroll-snap-align:start;
    transition:transform .25s,background .25s;position:relative}
  .s-card:hover{transform:translateY(-6px);background:var(--wine)}
  .s-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra)}
  .s-arrow{position:absolute;top:18px;right:18px;width:20px;height:20px}
  .s-art{margin:34px 0 22px;height:110px;display:flex;align-items:center;justify-content:center}
  .s-card h4{font-size:20px;font-weight:800;letter-spacing:-.01em;color:#fff}
  .s-card p{margin-top:10px;font-size:13.8px;line-height:1.55;color:#EFDFCF}
  .rail-nav{display:flex;gap:8px;margin-top:26px}
  .rail-nav button{width:44px;height:44px;background:var(--vino);border:1px solid rgba(244,238,227,.2);
    color:var(--cream);font-size:18px;cursor:pointer;transition:background .2s}
  .rail-nav button:hover{background:var(--wine)}

  /* ============ FOTO GRANDE (split: foto izq / texto der, como referencia) ============ */
  .photo{display:grid;grid-template-columns:1.15fr .85fr;min-height:100svh;background:var(--ink)}
  @media(max-width:860px){.photo{grid-template-columns:1fr;min-height:auto}}
  .photo .pic{position:relative;overflow:hidden;min-height:60vh}
  .photo .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;
    filter:sepia(.22) saturate(.9)} /* liga la B/N con la paleta cálida */
  .photo .txt{display:flex;flex-direction:column;justify-content:space-between;gap:40px;
    padding:clamp(28px,5vh,64px) clamp(22px,3.5vw,52px)}
  .photo h2{font-size:clamp(2rem,3.6vw,3.6rem);font-weight:500;letter-spacing:-.025em;max-width:14ch;line-height:1.04;color:#fff}
  .photo .low p{max-width:46ch;font-size:15.5px;line-height:1.65;color:#E6D5C6}
  .photo .low .btn-card{margin-top:26px}

  /* ============ MOMENTOS (4 columnas workflows) ============ */
  .moments{background:var(--vino);min-height:100svh;display:flex;padding:clamp(100px,16vh,180px) 0 clamp(70px,10vh,130px)}
  .moments>.wrap{flex:1;width:100%;display:flex;flex-direction:column;justify-content:space-between}
  .moments h2{font-size:clamp(1.9rem,4.2vw,3.6rem);font-weight:500;letter-spacing:-.025em;max-width:18ch;line-height:1.05;color:#fff}
  .m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px;border-top:1px solid rgba(244,238,227,.18)}
  @media(max-width:960px){.m-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.m-grid{grid-template-columns:1fr}}
  .m-col{border-right:1px solid rgba(244,238,227,.18);padding:26px 22px 34px;min-height:230px}
  .m-col:last-child{border-right:0}
  @media(max-width:960px){.m-col{border-bottom:1px solid rgba(244,238,227,.18)}}
  .m-col .idx{font-family:var(--mono);font-size:11px;color:var(--cream);font-weight:700;letter-spacing:.2em}
  .m-col h5{font-size:19px;font-weight:800;margin:14px 0 10px;color:#fff}
  .m-col p{font-size:13.8px;line-height:1.58;color:#EBD9C9}

  /* ============ BLOG (estilo Newsroom: claro, cards con imagen y pills) ============ */
  .news{background:var(--paper);padding:clamp(90px,14vh,160px) 0 clamp(70px,10vh,130px)}
  /* cards contenidas al ancho estándar del sitio */
  .news>.wrap{max-width:1440px}
  .news h2{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:500;letter-spacing:-.03em;color:var(--wine)}
  .n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(36px,6vh,64px)}
  @media(max-width:900px){.n-grid{grid-template-columns:1fr}}
  .n-card{background:rgba(96,36,30,.07);padding:20px;display:flex;flex-direction:column;transition:transform .25s,background .25s}
  .n-card:hover{transform:translateY(-6px);background:rgba(96,36,30,.12)}
  .n-img{aspect-ratio:16/10;position:relative;overflow:hidden}
  .n-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .n-body{padding:16px 2px 8px}
  .n-meta{display:flex;gap:8px}
  .n-meta span{border:1px solid rgba(96,36,30,.3);color:var(--wine);font-size:13px;font-weight:600;
    padding:5px 12px;background:var(--paper)}
  .n-body h4{margin-top:14px;font-size:clamp(17px,1.2vw,21px);font-weight:600;line-height:1.32;color:var(--wine);max-width:26ch}

  /* ============ CTA FINAL (claro, pantalla completa, estilo "let's work") ============ */
  .cta-final{background:var(--paper);min-height:100svh;position:relative;overflow:hidden;
    padding:clamp(100px,15vh,170px) 0 clamp(60px,9vh,110px);display:flex}
  .cta-final>.wrap{flex:1;width:100%;max-width:1760px;position:relative;z-index:2;
    display:flex;flex-direction:column;justify-content:space-between}
  .cta-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
  .cta-head .eyebrow{color:var(--wine)}
  .cta-block{max-width:680px}
  .cta-final h2{font-size:clamp(2.2rem,4.4vw,4.4rem);font-weight:500;letter-spacing:-.028em;line-height:1.05;
    color:var(--wine);text-wrap:balance}
  .cta-final .btn-big{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:var(--wine);color:var(--paper);
    font-weight:700;font-size:14.5px;padding:13px 20px;transition:transform .15s,background .2s}
  .cta-final .btn-big:hover{transform:translateY(-2px);background:var(--vino)}
  .cta-note{max-width:42ch;font-size:15px;line-height:1.6;color:#6B4A3E}
  @media(max-width:860px){.cta-head{flex-direction:column}.cta-block{max-width:none}}
  /* líneas escalera de fondo con etiquetas mono */

  /* ============ FOOTER (negro, minimal, mucho espacio — estilo referencia) ============ */
  footer{background:#0A0505;min-height:100svh;display:flex;padding:clamp(80px,12vh,130px) 0 36px}
  footer>.wrap{max-width:1760px;flex:1;width:100%;display:flex;flex-direction:column;justify-content:space-between}
  .f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:clamp(24px,3vw,50px)}
  @media(max-width:1100px){.f-top{grid-template-columns:1fr 1fr}.f-form{grid-column:1/-1;margin-bottom:26px}}
  @media(max-width:900px){footer{min-height:auto}
    .f-form input{font-size:16px}}
  @media(max-width:560px){.f-top{grid-template-columns:1fr 1fr;gap:34px 20px}.f-form{grid-column:1/-1}}
  .f-form h3{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#fff;max-width:15ch}
  .f-form form{margin-top:22px;display:flex;max-width:420px}
  .f-form input{flex:1;background:transparent;border:1px solid rgba(244,238,227,.25);border-right:0;color:var(--cream);
    padding:13px 15px;font-size:14px;font-family:var(--grot);outline:none;min-width:0}
  .f-form input:focus{border-color:var(--terra)}
  .f-form button{background:var(--terra);color:var(--ink);border:0;font-weight:700;font-size:14px;padding:13px 20px;cursor:pointer}
  .f-col .k{font-size:13.5px;color:#9C8B85;margin-bottom:16px;font-weight:500}
  .f-col a{display:block;font-size:15px;padding:5px 0;color:#F0E8DC;font-weight:500}
  .f-col a:hover{color:var(--terra)}
  .f-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
    margin-top:clamp(60px,10vh,120px)}
  .f-logo img{height:clamp(64px,8vw,110px);width:auto;filter:brightness(0) invert(1)}
  .f-copy{font-size:13.5px;color:#9C8B85}
  .f-credit{font-size:13.5px;color:#9C8B85}
  .f-credit a{color:#C9B8AE;border-bottom:1px solid rgba(201,184,174,.4)}
  .f-credit a:hover{color:#fff}
  /* bloque Compartir de artículos (lo inyecta/normaliza site.js en todos los artículos) */
  .share{background:var(--wine);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;margin-top:10px}
  .share b{color:#fff;font-size:14.5px;font-weight:600}
  .share .ic{display:flex;gap:10px}
  .share a{width:34px;height:34px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:background .2s;cursor:pointer}
  .share a:hover{background:var(--terra)}
  .share svg{width:15px;height:15px}

  /* "Ji Group" caligráfico con aparición tipo escritura (efecto de lahistorica.mx) */
  .f-credit .accent{font-family:'Mairo',cursive;font-size:1.9em;line-height:.8;font-weight:400;
    color:var(--terra);display:inline-block;margin:0 .08em;vertical-align:-3px;border-bottom:0}
  .f-credit a:has(.accent){border-bottom:0}
  .scribe{opacity:0;transform:translateX(-.18em);transition:opacity .8s ease,transform .8s cubic-bezier(.66,0,.34,1)}
  .scribe.scribe-in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.scribe,.scribe.scribe-in{opacity:1;transform:none;transition:none}}
  /* bloque de identidad: logo izq + copy en una línea + crédito (igual en todos los tamaños) */
  .f-bottom{border-top:1px solid rgba(244,238,227,.14);padding-top:34px}
  .f-id{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .f-id .f-copy{white-space:nowrap}
  @media(max-width:900px){
    .f-bottom{margin-top:60px}
    .f-col a{padding:9px 0}
    .share a{width:42px;height:42px}
    .f-logo img{height:56px}
    .f-id .f-copy{white-space:normal}
  }

  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
      .scrolldown{animation:none}
    }

  /* ============ ACORDEÓN DE SERVICIOS (estilo lista gigante) ============ */
  .acc{border-top:1px solid rgba(244,238,227,.22);margin-top:clamp(36px,6vh,64px)}
  .acc-item{border-bottom:1px solid rgba(244,238,227,.22)}
  .acc-head{display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:clamp(16px,2.6vh,26px) 0;cursor:pointer;user-select:none}
  .acc-title{font-size:clamp(1.3rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.015em;
    line-height:1.15;color:#fff;transition:color .2s}
  .acc-head:hover .acc-title{color:var(--terra)}
  /* flecha hacia abajo (gira al abrir) en lugar del signo + */
  .acc-plus{flex:none;width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);position:relative;transition:transform .35s ease}
  .acc-plus::before{content:"";position:absolute;left:50%;top:50%;width:38%;height:38%;
    border-right:2px solid #fff;border-bottom:2px solid #fff;
    transform:translate(-50%,-64%) rotate(45deg)}
  .acc-item.open .acc-plus{transform:rotate(180deg)}
  .acc-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
  .acc-item.open .acc-body{max-height:340px}
  .acc-inner{padding:0 0 clamp(26px,4vh,44px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,60px);align-items:start}
  @media(max-width:760px){.acc-inner{grid-template-columns:1fr}.acc-item.open .acc-body{max-height:520px}}
  .acc-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);padding-top:4px}
  .acc-desc{font-size:15.5px;line-height:1.6;color:#E6D5C6;max-width:58ch}
  .acc-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff;white-space:nowrap}
  .acc-cta:hover{color:var(--terra)}

  /* ============ BANNER DE COOKIES ============ */
  .ck{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#0A0505;
    transform:translateY(110%);transition:transform .5s ease;padding:18px clamp(18px,3.5vw,40px)}
  .ck.show{transform:none}
  .ck-in{max-width:1760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .ck b{display:block;color:#fff;font-size:14.5px;font-weight:600}
  .ck p{color:#C9B8AE;font-size:13px;line-height:1.5;margin-top:4px;max-width:62ch}
  .ck a{color:#fff;text-decoration:underline;text-underline-offset:2px}
  .ck-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .ck-btns button{font-family:var(--grot);font-size:13.5px;font-weight:700;cursor:pointer;padding:11px 18px;border:0}
  .ck-no{background:transparent;color:#C9B8AE;border:1px solid rgba(201,184,174,.4) !important}
  .ck-no:hover{color:#fff;border-color:#fff !important}
  .ck-yes{background:var(--terra);color:var(--ink)}
  .ck-yes:hover{background:#F28A5B}
  .ck-set{background:transparent;color:#C9B8AE;border:1px solid rgba(201,184,174,.4) !important}
  .ck-set:hover{color:#fff;border-color:#fff !important}
  /* panel de configuración granular */
  .ck-panel{display:none;width:100%;margin-top:16px;border-top:1px solid rgba(201,184,174,.18);padding-top:16px}
  .ck.open .ck-panel{display:block}
  .ck-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid rgba(201,184,174,.12)}
  .ck-row:last-of-type{border-bottom:0}
  .ck-row .t b{color:#fff;font-size:13.5px}
  .ck-row .t p{margin-top:2px;font-size:12.5px;color:#9C8B85;max-width:70ch}
  /* interruptor */
  .ck-sw{position:relative;flex:none;width:42px;height:24px;border-radius:12px;background:rgba(201,184,174,.25);
    cursor:pointer;transition:background .2s;border:0;margin-top:2px}
  .ck-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
  .ck-sw[aria-checked="true"]{background:var(--terra)}
  .ck-sw[aria-checked="true"]::after{transform:translateX(18px)}
  .ck-sw[aria-disabled="true"]{opacity:.55;cursor:default}
  .ck-panel .ck-save{margin-top:16px;background:var(--terra);color:var(--ink);font-family:var(--grot);font-weight:700;font-size:13.5px;padding:11px 18px;border:0;cursor:pointer}
  .ck-panel .ck-save:hover{background:#F28A5B}

  /* renglón-liga: abre página en vez de desplegar */
  a.acc-item{display:block}
  a.acc-item .acc-head{cursor:pointer}
  .acc-go{flex:none;width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);transition:transform .25s ease}
  .acc-go svg{width:100%;height:100%}
  a.acc-item:hover .acc-go{transform:translate(3px,-3px)}

  /* ============ MEGAMENÚ DE SERVICIOS ============ */
  .mega{position:fixed;left:0;right:0;top:0;z-index:90;pointer-events:none}
  .mega-band{margin-top:0;background:rgba(14,6,5,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    padding:calc(76px + 26px) clamp(18px,3.5vw,40px) 36px;
    opacity:0;transform:translateY(-12px);transition:opacity .28s ease,transform .28s ease}
  .mega.open{pointer-events:auto}
  .mega.open .mega-band{opacity:1;transform:none}
  .mega-in{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:1fr 2.2fr;gap:clamp(24px,4vw,80px)}
  .mega-intro .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra)}
  .mega-intro h4{font-size:clamp(1.2rem,1.6vw,1.6rem);font-weight:500;color:#fff;margin-top:12px;line-height:1.2;max-width:16ch}
  .mega-intro a{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:700;color:#fff;
    border-bottom:1px solid var(--terra);padding-bottom:3px}
  .mega-intro a:hover{color:var(--terra)}
  .mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px clamp(16px,2vw,36px)}
  .mega-grid a{display:block;padding:12px 10px;transition:background .2s}
  .mega-grid a:hover{background:rgba(244,238,227,.07)}
  .mega-grid b{display:block;font-size:14.5px;font-weight:600;color:#fff}
  .mega-grid span{display:block;font-size:12.5px;color:#C9B8AE;margin-top:3px;line-height:1.4}
  @media(max-width:900px){.mega{display:none}}

  /* ============ MENÚ MÓVIL (hamburguesa ≤900px) ============ */
  .burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;
    padding:0 8px;margin-left:6px;background:transparent;border:0;cursor:pointer}
  .burger span{display:block;height:2px;width:100%;background:var(--cream);transition:transform .3s ease,opacity .2s,background .2s}
  header.light .burger span{background:var(--cream-ink)}
  @media(max-width:900px){.burger{display:flex}}
  body.mnav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.mnav-open .burger span:nth-child(2){opacity:0}
  body.mnav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  body.mnav-open .burger span{background:var(--cream)!important}
  body.mnav-open header .logo img{filter:brightness(0) invert(1)!important}
  body.mnav-open header .btn-touch{background:var(--paper)!important;border-color:var(--paper)!important;color:var(--vino)!important}

  .mnav{position:fixed;inset:0;z-index:98;background:var(--vino);display:flex;flex-direction:column;overscroll-behavior:contain;
    padding:calc(76px + 4vh) clamp(20px,6vw,40px) 34px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
  body.mnav-open .mnav{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease}
  body.mnav-open{overflow:hidden}
  .mnav .mn-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#C9B8AE;text-transform:uppercase;margin-bottom:14px}
  .mnav .mn-lnk{display:flex;align-items:baseline;gap:14px;padding:11px 0;color:#fff;
    font-size:clamp(1.7rem,7vw,2.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.05;
    border-bottom:1px solid rgba(244,238,227,.14)}
  .mnav .mn-lnk i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--terra)}
  .mnav .mn-lnk.on{color:var(--terra)}
  .mnav .mn-sub{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 0 4px}
  .mnav .mn-sub a{font-size:14px;font-weight:600;color:#EBD9C9;padding:10px 0}
  .mnav .mn-sub a:active{color:var(--terra)}
  .mnav .mn-cta{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:12px}
  .mnav .mn-cta .btn-go{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--terra);
    color:var(--ink);font-weight:700;font-size:15.5px;padding:16px 20px}
  .mnav .mn-cta .btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(244,238,227,.4);
    color:#fff;font-weight:600;font-size:14.5px;padding:14px 20px}
  .mnav .mn-cta svg{width:14px;height:14px}
  @media(min-width:901px){.mnav{display:none}}

  /* la card de progreso de lectura solo aporta en el aside sticky de escritorio */
  @media(max-width:960px){.art-aside .current{display:none}}