/* =============================================================
   SAGARA — sistema visual
   Amarillo domina · charcoal corta · cian = material · magenta = señal
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Reduced motion
   ============================================================= */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root{
  --yellow:   #FFEE52;
  --yellow-2: #F6E23A;
  --paper:    #FBF6DF;
  --paper-2:  #F3ECD2;

  --ink:      #141110;
  --ink-2:    #1E1A16;
  --charcoal: #2A2521;

  --cream:    #FFFBDC;
  --cyan:     #35CDEC;
  --cyan-ink: #075F73;
  --pink:     #E72C78;
  --pink-ink: #A81050;   /* magenta legible sobre el amarillo nuevo (AA) */
  --gold:     #DCCF71;

  --txt:      #2A2521;
  --txt-mute: rgba(42,37,33,.74);
  --txt-dim:  rgba(42,37,33,.48);
  --line:     rgba(42,37,33,.18);
  --line-2:   rgba(42,37,33,.10);

  /* sobre fondo oscuro */
  --d-txt:      var(--cream);
  --d-txt-mute: rgba(255,251,220,.66);
  --d-txt-dim:  rgba(255,251,220,.42);
  --d-line:     rgba(255,251,220,.14);

  --display:"Outfit","Century Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);

  --wrap:1280px;
  --pad:clamp(1.2rem,4vw,3.4rem);
  --nav-h:74px;
}

/* ── 1b. AMARILLO POR DISPOSITIVO ────────────────────────────
   El mismo #FFEE52 se ve distinto según la pantalla:

   · En el monitor del proyecto (P3, 30 bits, HDR, sin gestión de perfil)
     se ve como un amarillo sólido y cálido. Ahí el color de marca funciona
     y se deja intacto.

   · En móvil y tablet, que sí gestionan color, ese mismo valor se muestra
     como un limón verdoso y apagado. Además tiene el verde muy alto, así
     que sobre primarias P3 se va todavía más al limón.

   Se comparó una escala de amarillos en el móvil contra el PC y se eligió
   la variante G: menos verde, más dorada. Se aplica SOLO en pantallas
   táctiles, que es donde hacía falta.

   El discriminador es el puntero, no la gama: el monitor del PC y el
   iPhone son ambos P3, así que color-gamut no los separa. */
@media (hover: none) and (pointer: coarse){
  :root{
    --yellow:   #FBC900;
    --yellow-2: #EFB800;
  }
  @media (color-gamut: p3){
    :root{
      --yellow:   color(display-p3 0.99 0.77 0.11);   /* variante G */
      --yellow-2: color(display-p3 0.95 0.72 0.07);
      --cyan:     color(display-p3 0.2078 0.8039 0.9255);
      --pink:     color(display-p3 0.9059 0.1725 0.4706);
    }
  }
}

/* ── 2. RESET ────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 10px);
}
body{
  background:var(--paper);
  color:var(--txt);
  font-family:var(--display);
  font-size:16px; font-weight:400; line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; padding:0; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:900; line-height:.92; letter-spacing:-.04em; text-wrap:balance; }
h1 em,h2 em,h3 em{ font-style:normal; color:var(--pink); }
::selection{ background:var(--pink); color:var(--cream); }
:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; }

/* ── 3. UTILIDADES ───────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.6rem 1rem; background:var(--ink); color:var(--yellow);
  border-radius:8px; font-weight:600;
}
.skip-link:focus{ top:1rem; }

/* grano global — el acabado impreso que evita el aspecto de plantilla */
.grain-layer{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 4. TIPOGRAFÍA ───────────────────────────────────────── */
.kicker{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-mute);
}
.kicker::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--pink); flex:none;
}
.kicker.cy::before{ background:var(--cyan); }

/* acentos de puntuación — medidos sobre el glifo real de Outfit 900:
   el punto de la "i" es un círculo de .20em, a .045em del origen
   y .74em sobre la línea base. Se tapa exacto, no se añade otro. */
.dot-i{ position:relative; display:inline-block; line-height:1; }
.dot-i::after{
  content:""; position:absolute; z-index:2;
  width:.212em; height:.212em; border-radius:50%;
  left:.039em; top:.124em;
  background:var(--pink);
}
.dot-i.cy::after{ background:var(--cyan); }
.pc{ color:var(--cyan); }   /* coma cian */
.pm{ color:var(--pink); }

.h-sec{ font-size:clamp(2.4rem,6.2vw,5.4rem); }
.h-sub{ font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:800; letter-spacing:-.03em; }

/* Segunda línea del titular. En las secciones NO se desenfoca: lleva
   información y debe leerse. La jerarquía se hace con tono.
   El desenfoque queda sólo en el hero, donde es decorativo. */
.ghost{
  display:block;
  opacity:.55;
  margin-top:-.04em;
}
.lead{
  font-size:clamp(1rem,1.35vw,1.15rem);
  font-weight:400; color:var(--txt-mute);
  max-width:60ch; margin-top:1.5rem;
}
.sec-head{ margin-bottom:clamp(2.6rem,5.5vw,4.2rem); }
.sec-head .h-sec{ margin-top:1.3rem; }

/* ── 5. COMPONENTES ──────────────────────────────────────── */

/* acrílico pavonado: velo lechoso + desenfoque + grano.
   El material se define por cómo desatura lo que atraviesa. */
.acryl{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),           /* filo superior */
    inset 0 -34px 44px -38px rgba(20,17,16,.32),   /* grosor del canto inferior */
    0 2px 6px -2px rgba(20,17,16,.16),             /* sombra de contacto */
    0 32px 62px -32px rgba(20,17,16,.42);          /* flotación */
}
@supports (backdrop-filter: blur(10px)){
  .acryl{
    background:linear-gradient(165deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    backdrop-filter:blur(22px) saturate(1.5) brightness(1.04);
    -webkit-backdrop-filter:blur(22px) saturate(1.5) brightness(1.04);
  }
}
/* Filo de luz direccional: brilla arriba-izquierda y se apaga al girar,
   como el canto biselado de una lámina real. Un borde uniforme no lo hace. */
.acryl::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1.3px;
  background:linear-gradient(140deg,
    rgba(255,255,255,1)   0%,
    rgba(255,255,255,.5) 16%,
    rgba(255,255,255,.1) 40%,
    rgba(255,255,255,0)  56%,
    rgba(255,255,255,.3) 84%,
    rgba(255,255,255,.7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.acryl::before{                       /* grano: el acabado mate */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='an'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23an)'/%3E%3C/svg%3E");
}
.acryl > *{ position:relative; z-index:2; }

/* botón acrílico */
.btn-acryl{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  color:var(--pink-ink);
  font-weight:600; font-size:.86rem;
  background:linear-gradient(170deg, rgba(255,255,255,.34), rgba(255,255,255,.20));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 16px 28px -16px rgba(20,17,16,.42);
  transition:background .35s, color .35s, transform .35s;
}
@supports (backdrop-filter: blur(6px)){
  .btn-acryl{
    background:linear-gradient(170deg, rgba(255,255,255,.19), rgba(255,255,255,.09));
    backdrop-filter:blur(18px) saturate(1.35);
    -webkit-backdrop-filter:blur(18px) saturate(1.35);
  }
}
.btn-acryl::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='bn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23bn)'/%3E%3C/svg%3E");
}
.btn-acryl:hover{ transform:translateY(-2px); }
.btn-acryl.cy{ color:var(--cyan-ink); }
.btn-acryl.sm{ padding:.75rem 1.4rem; font-size:.8rem; }

/* acrílico sobre acrílico: el panel ya puso su velo, el botón apenas tiñe */
.acryl .btn-acryl{
  background:linear-gradient(170deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 20px -14px rgba(20,17,16,.45);
}
@supports (backdrop-filter: blur(6px)){
  .acryl .btn-acryl{
    background:linear-gradient(170deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    backdrop-filter:blur(10px) saturate(1.25);
    -webkit-backdrop-filter:blur(10px) saturate(1.25);
  }
}
.acryl .btn-acryl::before{ opacity:.28; }

/* botón sólido, para fondos oscuros */
.btn-solid{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:999px;
  background:var(--yellow); color:var(--ink);
  font-weight:700; font-size:.86rem;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px color-mix(in srgb, var(--yellow) 70%, transparent); }
.btn-line{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:999px;
  border:1.5px solid var(--cyan); color:var(--cyan);
  font-weight:600; font-size:.86rem;
  transition:background .35s, color .35s;
}
.btn-line:hover{ background:var(--cyan); color:var(--ink); }

.actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:300;
  height:var(--nav-h);
  display:flex; align-items:center; gap:1.5rem;
  padding-inline:var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-out), border-color .4s;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--yellow) 94%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:rgba(42,37,33,.16);
}
.nav-logo{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-mark{ width:42px; }
.nav-word{ width:92px; }
.nav-links{ display:flex; gap:1.7rem; margin-left:auto; }
.nav-links a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.25rem; border-bottom:1.5px solid transparent;
  transition:border-color .35s;
}
.nav-links a:hover{ border-bottom-color:var(--pink); }
.nav-right{ display:flex; align-items:center; gap:1rem; }
/* mismo charcoal que las rayas del menú, para que la barra se lea pareja.
   El idioma activo se marca con subrayado en vez de con color. */
.lang{ display:flex; align-items:center; gap:.3rem; font-family:var(--mono); font-size:.7rem; color:var(--charcoal); }
.lang > span{ opacity:.45; }
.lang-btn{ color:var(--charcoal); opacity:.7; padding:.2rem 0; transition:opacity .3s; border-bottom:1.5px solid transparent; text-decoration:none; cursor:pointer; }
.lang-btn.is-on{ opacity:1; font-weight:500; border-bottom-color:currentColor; }
.lang-btn:hover{ opacity:1; }
.nav-burger{ display:none; width:34px; height:34px; flex-direction:column; justify-content:center; gap:6px; }
.nav-burger span{ display:block; height:2px; background:var(--charcoal); transition:transform .4s var(--ease-out); }
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ── 6. SECCIONES ────────────────────────────────────────── */
.sec{ position:relative; padding-block:clamp(4.5rem,10vh,8rem); overflow:hidden; }
/* El acrílico necesita algo detrás que difuminar. Sobre un amarillo plano no
   hay información que refractar y la lámina se lee como un rectángulo más
   claro, no como vidrio. Este campo tonal da relieve sin meter elementos
   decorativos: sigue siendo amarillo, pero deja de ser liso. */
.sec-yellow{
  background:
    radial-gradient(58% 42% at 10% 6%,   color-mix(in srgb, var(--yellow) 55%, #fff)      0%, transparent 64%),
    radial-gradient(52% 46% at 90% 20%,  var(--yellow-2)                                   0%, transparent 60%),
    radial-gradient(64% 50% at 78% 94%,  color-mix(in srgb, var(--yellow-2) 90%, #2A2521) 0%, transparent 62%),
    radial-gradient(46% 38% at 26% 74%,  color-mix(in srgb, var(--yellow) 62%, #fff)      0%, transparent 60%),
    var(--yellow);
}
.sec-paper { background:var(--paper); }
.sec-dark{
  background:var(--ink); color:var(--d-txt);
}
.sec-dark .kicker{ color:var(--d-txt-mute); }
.sec-dark .lead{ color:var(--d-txt-mute); }
.sec-dark h2,.sec-dark h3{ color:var(--cream); }

/* ══ HERO ══ */
/* Composición apilada y centrada: la palabra manda, el fantasma
   atraviesa toda la pantalla y la lámina se apoya debajo. */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  background:var(--yellow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 1vh) var(--pad) 4.2rem;
  text-align:center;
}
/* banda charcoal que corta por debajo de la lámina */
.hero-band{
  position:absolute; inset:auto -10% -42px -10%; height:clamp(240px,28.5vh,320px); z-index:1;
  background:var(--ink);
  transform:rotate(-3deg);
}
.hero-word{
  position:relative; z-index:4;
  font-size:min(clamp(4.7rem,24.7vw,20.8rem), 30vh); font-weight:900;
  letter-spacing:-.05em; line-height:.82;
  color:var(--charcoal); white-space:nowrap; margin:0;
}
/* el fantasma es más ancho que "China," a propósito: se corta contra los bordes */
.hero-word .ghost{
  display:block; white-space:nowrap;
  /* proporcional al viewport: siempre cruza la pantalla de lado a lado */
  font-size:min(clamp(4rem,23vw,26rem), 26vh); margin-top:-.30em; margin-bottom:-.30em;
  color:var(--charcoal); opacity:.22;
  filter:blur(clamp(6px,.9vw,15px));
}
.hero-panel{
  position:relative; z-index:6;
  width:100%; max-width:940px;
  margin-top:clamp(1rem,6.5vh,4.8rem);
  padding:clamp(1.5rem,2.8vw,2.3rem);
  border-radius:24px;
  text-align:left;
}
.hero-panel h2{ font-size:clamp(2rem,4vw,3.4rem); margin-top:.9rem; }
.hero-panel p{ font-size:.92rem; line-height:1.65; margin-top:.9rem; color:var(--txt); max-width:72ch; }
.hero-panel .actions{ margin-top:1.5rem; gap:1rem; }
/* Estos botones cruzan la frontera amarillo/negro. Al ser controles pueden
   llevar un velo más sólido: así se leen igual sobre los dos fondos. */
.hero-panel .btn-acryl{ background:rgba(255,255,255,.58); }
@supports (backdrop-filter: blur(6px)){
  .hero-panel .btn-acryl{ background:rgba(255,255,255,.46); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); }
}
/* Sin franja propia: se conserva el corte diagonal. La legibilidad se resuelve
   subiendo la banda (ver .hero-band) para que la tira quede holgadamente
   dentro del negro incluso en su punto más bajo, el del borde izquierdo. */
.hero-strip{
  position:absolute; z-index:6;
  left:var(--pad); right:var(--pad); bottom:1.1rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.7rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--d-txt-mute);
}
.hero-strip li{ display:flex; align-items:center; gap:.5rem; }
.hero-strip i{ width:6px; height:6px; border-radius:50%; }

/* ══ MANIFIESTO ══ */
.pillars{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line-2);
  border-block:1px solid var(--line-2);
  margin-top:clamp(2.8rem,6vw,4rem);
}
.pillar{ background:var(--paper); padding:2rem 1.6rem; position:relative; transition:background .5s; }
.pillar::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c);
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease-out);
}
.pillar:hover{ background:var(--paper-2); }
.pillar:hover::before{ transform:scaleY(1); }
/* ficha de material: el color va al fondo, no al texto.
   Así el amarillo y el cian pueden ir a plena saturación y seguir leyéndose. */
.pillar-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:11px;
  background:var(--c); color:var(--on,var(--ink));
  font-family:var(--mono); font-size:.84rem; font-weight:500; letter-spacing:.02em;
  box-shadow:0 8px 16px -10px rgba(31,27,23,.65);
}
.pillar h3{ font-size:1.35rem; margin-top:1rem; }
.pillar p{ font-size:.88rem; color:var(--txt-mute); margin-top:.55rem; }

/* ══ SERVICIOS — láminas de acrílico, el muestrario ══ */
.svc-list{ display:flex; flex-direction:column; gap:1.4rem; }
.svc{
  display:grid; grid-template-columns:1.1fr .9fr;
  border-radius:24px;
  transition:transform .5s var(--ease-out);
}
.svc:hover{ transform:translateY(-4px); }
.svc-body{ padding:clamp(1.7rem,3.2vw,2.8rem); }
.svc-num{ font-family:var(--mono); font-size:.76rem; letter-spacing:.2em; color:var(--txt-dim); }
/* el claim va siempre en magenta: es la voz de marca, no el código del servicio */
.svc-claim{ font-weight:800; font-size:.95rem; color:var(--pink-ink); margin-top:.7rem; }
.svc h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-top:.4rem; }
.svc-desc{ font-size:.92rem; color:var(--txt-mute); margin-top:.9rem; max-width:46ch; }
.svc-ul{ display:grid; gap:.5rem; margin-top:1.4rem; }
.svc-ul li{ position:relative; padding-left:1.2rem; font-size:.85rem; color:var(--txt-mute); }
.svc-ul li::before{
  content:""; position:absolute; left:0; top:.6em;
  /* todas las viñetas en cian: contrapunto al magenta de los claims */
  width:6px; height:6px; border-radius:50%; background:var(--cyan-ink);
}
.svc-art{ position:relative; overflow:hidden; min-height:230px; }
.svc-art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.svc:hover .svc-art img{ transform:scale(1.05); }
.svc-mat{                                  /* muestra de material cuando no hay foto */
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, var(--c) 70%, transparent), transparent 70%),
    radial-gradient(55% 55% at 75% 75%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%),
    var(--yellow-2);
}
.svc-cta{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.6rem; padding-bottom:.3rem;
  font-weight:700; font-size:.87rem;
  border-bottom:1.5px solid var(--line);
  transition:color .3s, border-color .3s, gap .35s var(--ease-out);
}
.svc-cta::after{ content:"⟶"; }
.svc-cta:hover{ color:var(--c-txt); border-color:var(--c-txt); gap:.8rem; }

/* ══ PROCESO ══ */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1px; background:var(--line-2); border:1px solid var(--line-2);
}
.step{ background:var(--paper); padding:1.9rem 1.6rem; display:flex; gap:1rem; transition:background .45s; }
.step:hover{ background:var(--paper-2); }
.step-n{
  font-family:var(--mono); font-size:1.5rem; font-weight:500; line-height:1; flex:none;
  color:transparent; -webkit-text-stroke:1.2px var(--pink);
}
.step h3{ font-size:1.08rem; letter-spacing:-.02em; }
.step p{ font-size:.86rem; color:var(--txt-mute); margin-top:.45rem; }

/* ══ PRODUCTOS (oscuro: la foto de producto brilla) ══ */
.prd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.1rem; }
.prd{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:16px; min-height:290px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.prd-lg{ grid-column:span 2; min-height:380px; }
.prd img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.prd::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(20,17,16,.94) 0%, rgba(20,17,16,.45) 48%, transparent 82%);
}
.prd:hover img{ transform:scale(1.05); }
.prd-cap{ padding:1.5rem; }
.prd-cap h3{ font-size:1.28rem; color:var(--cream); }
.prd-cap p{ font-size:.85rem; color:var(--d-txt-mute); margin-top:.3rem; }
.prd-ask{ background:var(--yellow); justify-content:center; }
.prd-ask::after{ display:none; }
.prd-ask .prd-cap h3{ color:var(--ink); }
.prd-ask .prd-cap p{ color:rgba(42,37,33,.72); }
.prd-ask .svc-cta{ --c-txt:var(--pink); color:var(--ink); border-color:rgba(42,37,33,.28); }

/* ══ CASOS ══ */
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.case{
  border-radius:22px; padding:1.9rem 1.7rem;
  border-top:4px solid var(--c);
  transition:transform .5s var(--ease-out);
}
.case:hover{ transform:translateY(-5px); }
.case-k{ font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-txt); }
.case h3{ font-size:1.2rem; margin-top:.9rem; }
.case p{ font-size:.88rem; color:var(--txt-mute); margin-top:.7rem; }

/* ══ BLOQUE DE TENSIÓN (lenguaje V3) ══ */
.tension{
  position:relative; overflow:hidden; background:var(--ink); color:var(--d-txt);
  padding-bottom:calc(clamp(4.5rem,10vh,8rem) + 90px);   /* hueco para la tira de registro */
}
.tension-blur{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center end;
  padding-right:2vw;
  font-size:34vw; font-weight:900; letter-spacing:-.06em; line-height:.8;
  color:var(--yellow); filter:blur(26px); opacity:.85;
  white-space:nowrap; pointer-events:none;
}
/* velo que devuelve el contraste al texto sin matar el resplandor */
.tension::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(100deg, var(--ink) 26%, rgba(20,17,16,.82) 52%, rgba(20,17,16,.25) 78%, transparent);
}
.tension-blur .chroma::before{ transform:translate(-.03em,-.012em); }
.tension-blur .chroma::after{ transform:translate(.03em,.012em); }
.tension-grid{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:linear-gradient(90deg, rgba(53,205,236,.14) 1px, transparent 1px);
  background-size:11.111% 100%;
}
.tension .wrap{ position:relative; z-index:10; }
.tension .kicker::before{ background:var(--pink); }
/* aberración cromática: registro de imprenta descuadrado */
.chroma{ position:relative; isolation:isolate; display:inline-block; }
.chroma::before,.chroma::after{ content:attr(data-t); position:absolute; left:0; top:0; z-index:-1; white-space:nowrap; }
.chroma::before{ color:var(--cyan); }
.chroma::after{ color:var(--pink); }

/* tira de registro tricolor */
.reg-strip{ position:absolute; z-index:6; left:0; bottom:0; display:flex; height:14vh; max-height:110px; }
.reg-strip i{ display:block; height:100%; }
.reg-strip i:nth-child(1){ width:34vw; background:var(--yellow); }
.reg-strip i:nth-child(2){ width:5vw;  background:var(--pink); }
.reg-strip i:nth-child(3){ width:2.5vw;background:var(--cyan); }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; background:var(--d-line); border:1px solid var(--d-line);
  margin-top:clamp(2.5rem,5vw,3.6rem);
}
.stat{ background:var(--ink); padding:2rem 1.4rem; text-align:center; }
.stat-n{
  display:block; font-weight:900; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1;
  color:var(--yellow);
}
.stat p{ font-size:.8rem; color:var(--d-txt-mute); margin-top:.7rem; }

/* ══ FUNDADORES ══ */
.team{ display:flex; flex-direction:column; gap:1.4rem; }
.founder{ border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr; }
.founder-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-2); }
.founder-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
/* En escritorio la foto va al costado: así conserva su formato vertical.
   Antes iba arriba a todo el ancho y el recorte le cortaba la cabeza. */
@media (min-width:861px){
  .hero{ padding-bottom:2.2rem; }
  .hero-strip{ bottom:.5rem; }
  /* Solo color: cuando el parrafo del hero queda sobre la banda negra
     (lo decide main.js midiendo el fondo real), pasa a crema. */
  .hero-panel.is-onink > p:not(.kicker){ color:var(--cream); }
}
@media (min-width:961px){
  .founder{ grid-template-columns:minmax(290px,32%) 1fr; }
  .founder-photo{ aspect-ratio:auto; height:100%; min-height:430px; }
  .founder:nth-child(even){ grid-template-columns:1fr minmax(290px,32%); }
  .founder:nth-child(even) .founder-photo{ order:2; }
  .founder-photo::after{ height:24%; }   /* el fundido basta con ser leve en vertical */
}
/* el retrato se funde con el carbón por abajo, no queda un rectángulo pegado */
.founder-photo::after{
  content:""; position:absolute; inset:auto 0 0 0; height:42%; pointer-events:none;
  background:linear-gradient(to top, var(--ink) 0%, rgba(20,17,16,.55) 45%, transparent 100%);
}
/* hueco para el retrato pendiente — se lee como intencional, no como imagen rota */
.founder-photo.is-pending{
  display:grid; place-items:center; gap:.9rem;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,251,220,.07), transparent 70%),
    var(--ink-2);
}
.founder-photo.is-pending::after{ display:none; }
.founder-ph-mark{ width:52%; max-width:190px; opacity:.09; filter:grayscale(1) brightness(1.9); }
.founder-ph-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--d-txt-dim);
}
.founder-body{ padding:clamp(1.5rem,2.6vw,2.2rem); }
.founder-zone{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--yellow); display:flex; align-items:center; gap:.6rem;
}
.founder-zone::before{ content:""; width:22px; height:1px; background:var(--yellow); flex:none; }
.founder h3{ font-size:clamp(1.5rem,2.4vw,2rem); margin-top:.9rem; color:var(--cream); }
.founder-role{
  font-weight:700; font-size:.88rem; color:var(--cyan); margin-top:.35rem;
}
.founder-body p:not(.founder-zone):not(.founder-role){
  font-size:.9rem; line-height:1.68; color:var(--d-txt-mute); margin-top:1rem;
}

/* ══ NOSOTROS ══ */
.places{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
.places li{
  font-family:var(--mono); font-size:.79rem;
  padding:.5rem .9rem; border:1px solid var(--line); border-radius:999px;
  color:var(--txt-mute); transition:border-color .35s, color .35s;
}
.places li:hover{ border-color:var(--pink); color:var(--pink); }

/* ══ CONTACTO ══ */
.form{
  display:grid; gap:1rem;
  max-width:840px; margin:clamp(2.2rem,5vw,3rem) auto 0;
  padding:clamp(1.5rem,3.5vw,2.6rem);
  border-radius:24px;
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-dim);
}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .95rem; border-radius:10px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  font-size:.93rem;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(231,44,120,.16);
}
.form .btn-acryl{ justify-self:start; margin-top:.4rem; }
.form-ok{
  font-family:var(--mono); font-size:.8rem; color:var(--cyan-ink);
  border-left:3px solid var(--cyan); padding-left:.85rem;
}
.form-alt{ font-size:.85rem; color:var(--txt-dim); }
.form-alt a{ color:var(--pink-ink); border-bottom:1px solid rgba(194,21,96,.45); }

/* ══ FOOTER ══ */
.foot{ background:var(--ink); color:var(--d-txt); padding-top:clamp(3.2rem,7vw,4.6rem); }
.foot-wrap{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; }
.foot-mark{ width:54px; }
.foot-word{ width:106px; margin-top:.7rem; }
.foot-claim{ font-weight:900; font-size:1.5rem; color:var(--yellow); margin-top:1rem; letter-spacing:-.03em; }
.foot-tag{ font-family:var(--mono); font-size:.71rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-txt-dim); margin-top:.6rem; }
.foot-col{ display:flex; flex-direction:column; gap:.55rem; }
.foot-col h4{
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:.4rem;
}
.foot-col a{ font-size:.86rem; color:var(--d-txt-mute); transition:color .3s; }
.foot-col a:hover{ color:var(--cream); }
.foot-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-block:1.4rem; border-top:1px solid var(--d-line);
  font-size:.76rem; color:var(--d-txt-dim);
}
.foot-bottom a{ border-bottom:1px solid var(--d-line); }
.foot-bottom a:hover{ color:var(--yellow); }

/* ── 7. EFECTOS ──────────────────────────────────────────── */
.splash{
  position:fixed; inset:0; z-index:998;
  background:var(--yellow); display:grid; place-items:center;
  transition:opacity .7s var(--ease-out), visibility .7s;
  animation:splashSafety .01s 4.5s forwards;   /* red de seguridad si el JS falla */
}
.splash-mark{ width:112px; animation:splashPulse 1.9s ease-in-out infinite; }
@keyframes splashPulse{ 0%,100%{opacity:.5;transform:scale(.94)} 50%{opacity:1;transform:scale(1)} }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
/* defensa: reveal + split nunca puede quedar invisible */
.reveal[data-split]{ opacity:1; transform:none; }

/* colores de servicio, oscurecidos para poder usarse como texto.
   Se declaran donde --c existe; en :root se resolverían una sola vez. */
.svc,.pillar,.case{ --c-txt: color-mix(in srgb, var(--c) 55%, #17120E); }

/* ── 8. RESPONSIVE ───────────────────────────────────────── */
@media (max-width:960px){
  .svc{ grid-template-columns:1fr; }
  .svc-art{ min-height:190px; order:-1; }
  .prd-lg{ grid-column:span 1; }
  .foot-wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--yellow); border-bottom:1px solid var(--line-2);
    padding:.8rem var(--pad) 1.4rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  }
  .nav-links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding-block:.85rem; border-bottom:1px solid var(--line-2); font-size:.8rem; }
  .nav-burger{ display:flex; }
  /* .nav-links pasa a position:fixed y sale del flujo, así que se lleva
     consigo el margin-left:auto que empujaba a la derecha. Se lo devolvemos
     al bloque de idioma + menú para que quede alineado al borde. */
  .nav-right{ margin-left:auto; }

  /* padding inferior = distancia de la tira al borde: es lo que la centra
     respecto a la banda negra, que va anclada al fondo del hero */
  .hero{ min-height:auto; padding-bottom:7.4rem; }
  .hero-band{ height:clamp(200px,24vh,240px); bottom:-32px; }
  .hero-panel{ padding:1.25rem 1.15rem; }
  .hero-panel h2{ font-size:1.75rem; margin-top:.7rem; }
  .hero-panel p{ font-size:.86rem; margin-top:.7rem; }
  .hero-panel .actions{ margin-top:1.1rem; gap:.7rem; }
  .tension-blur{ font-size:52vw; }

}
@media (max-width:640px){
  .f-row{ grid-template-columns:1fr; }
  .foot-wrap{ grid-template-columns:1fr; gap:1.8rem; }
  .sec{ padding-block:3.6rem; }
}

/* ── 9. REDUCED MOTION (sólo lo intrusivo) ───────────────── */
@media (prefers-reduced-motion: reduce){
  .splash-mark{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════
   CANALES DIRECTOS · REDES · GUÍA · SUBPÁGINAS
   ═══════════════════════════════════════════════════════════ */

/* ── Canales directos (WhatsApp / correo) ─────────────────── */
.canales{
  display:grid; gap:1rem; margin-bottom:1.6rem;
  grid-template-columns:1fr;
}
@media (min-width:721px){ .canales{ grid-template-columns:1fr 1fr; } }

.canal{
  border-radius:22px; padding:clamp(1.3rem,2.4vw,1.9rem);
  display:flex; flex-direction:column; gap:.55rem;
  text-decoration:none; color:var(--txt);
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.canal:hover{ transform:translateY(-3px); }
.canal-ico{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:var(--c, var(--ink)); color:var(--cream);
}
.canal-ico svg{ width:20px; height:20px; fill:currentColor; }
.canal-t{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-mute); margin-top:.5rem;
}
.canal h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.02em; }
.canal p{ font-size:.9rem; line-height:1.6; color:var(--txt-mute); }
.canal-go{
  margin-top:.5rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-txt, var(--pink-ink));
  display:inline-flex; align-items:center; gap:.45rem;
  transition:gap .25s cubic-bezier(.2,.7,.3,1);
}
.canal:hover .canal-go{ gap:.8rem; }
.sec-dark .canal{ color:var(--d-txt); }
.sec-dark .canal p{ color:var(--d-txt-mute); }
.sec-dark .canal-t{ color:var(--d-txt-dim); }

.form-o{
  display:flex; align-items:center; gap:1rem; margin:2.2rem 0 1.2rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-mute);
}
.form-o::before,.form-o::after{ content:""; height:1px; flex:1; background:currentColor; opacity:.3; }

/* ── Botón flotante de WhatsApp ───────────────────────────── */
.fab{
  position:fixed; z-index:60; right:clamp(.9rem,2.5vw,1.6rem); bottom:clamp(.9rem,2.5vw,1.6rem);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.1rem; border-radius:999px; text-decoration:none;
  background:var(--ink); color:var(--cream);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 10px 30px -12px rgba(20,17,16,.6), 0 2px 6px -2px rgba(20,17,16,.4);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s;
}
.fab svg{ width:20px; height:20px; fill:var(--yellow); flex:none; }
.fab:hover{ transform:translateY(-2px); background:var(--charcoal); }
.fab-txt{ display:none; }
@media (min-width:861px){ .fab-txt{ display:inline; } }

/* ── Redes sociales ───────────────────────────────────────── */
.redes{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.red{
  border-radius:18px; padding:1.1rem 1.1rem 1rem;
  display:flex; flex-direction:column; gap:.5rem;
  text-decoration:none; color:var(--d-txt);
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.red:hover{ transform:translateY(-3px); }
.red-ico{ width:26px; height:26px; }
.red-ico svg{ width:100%; height:100%; fill:currentColor; }
.red-nom{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.red-estado{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d-txt-dim);
}
.red.is-soon{ opacity:.42; cursor:default; }
.red.is-soon:hover{ transform:none; }

/* ── Preguntas frecuentes ─────────────────────────────────── */
.faq{ display:flex; flex-direction:column; gap:.7rem; }
.faq-item{ border-radius:18px; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.05rem 1.2rem;
  display:flex; align-items:flex-start; gap:.9rem;
  font-size:1.02rem; font-weight:700; letter-spacing:-.01em; line-height:1.35;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; margin-left:auto; flex:none; font-weight:400;
  font-family:var(--mono); font-size:1.2rem; line-height:1; opacity:.55;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-r{ padding:0 1.2rem 1.25rem; }
.faq-item .faq-r p{ font-size:.92rem; line-height:1.72; color:var(--txt-mute); }
.faq-item .faq-r p + p{ margin-top:.8rem; }
.sec-dark .faq-item .faq-r p{ color:var(--d-txt-mute); }

/* ── Tabla (Incoterms, aranceles) ─────────────────────────── */
.tabla-env{ overflow-x:auto; margin-top:1.6rem; border-radius:18px; }
.tabla{ width:100%; border-collapse:collapse; min-width:560px; font-size:.88rem; }
.tabla th,.tabla td{ padding:.85rem 1rem; text-align:left; vertical-align:top; line-height:1.55; }
.tabla thead th{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid rgba(42,37,33,.22); white-space:nowrap;
}
.tabla tbody tr + tr td{ border-top:1px solid rgba(42,37,33,.12); }
.tabla td:first-child{ font-weight:700; white-space:nowrap; }
.sec-dark .tabla thead th{ border-bottom-color:rgba(255,251,220,.24); }
.sec-dark .tabla tbody tr + tr td{ border-top-color:rgba(255,251,220,.12); }
.tabla-nota{ font-size:.8rem; line-height:1.6; color:var(--txt-mute); margin-top:.9rem; }
.sec-dark .tabla-nota{ color:var(--d-txt-dim); }

/* ── Subpáginas: cabecera compacta ────────────────────────── */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(2.5rem,7vh,5rem)) 0 clamp(2.5rem,6vh,4.5rem);
  background:var(--yellow);
}
.page-hero .wrap{ position:relative; z-index:2; }
.crumbs{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-mute); display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
}
.crumbs a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.crumbs a:hover{ border-bottom-color:currentColor; }
.crumbs i{ opacity:.45; font-style:normal; }
.page-hero h1{
  font-size:clamp(2.5rem,6.6vw,5.2rem); font-weight:900; letter-spacing:-.045em;
  line-height:.94; margin-top:1.1rem; color:var(--ink);
}
.page-hero .lead{ margin-top:1.3rem; max-width:62ch; }
.page-hero .actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }

/* ── Subpáginas: texto largo ──────────────────────────────── */
.prosa{ max-width:74ch; }
.prosa h3{
  font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.02em;
  margin-top:2.4rem;
}
.prosa > h3:first-child{ margin-top:0; }
.prosa p{ font-size:.96rem; line-height:1.78; margin-top:1rem; color:var(--txt-mute); }
.prosa ul{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.6rem; }
.prosa li{
  font-size:.94rem; line-height:1.6; padding-left:1.4rem; position:relative;
  color:var(--txt-mute);
}
.prosa li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:50%; background:var(--c, var(--pink));
}
.sec-dark .prosa p,.sec-dark .prosa li{ color:var(--d-txt-mute); }
.prosa strong{ color:var(--txt); font-weight:700; }
.sec-dark .prosa strong{ color:var(--d-txt); }

/* ── Rejilla de dos columnas para subpáginas ──────────────── */
.dos{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:1fr; }
@media (min-width:961px){
  .dos{ grid-template-columns:1.25fr 1fr; align-items:start; }
  .dos-lado{ position:sticky; top:calc(var(--nav-h) + 1.2rem); }
}

/* ── Enlaces entre páginas ────────────────────────────────── */
.enlaces{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.enlace{
  border-radius:16px; padding:1.05rem 1.15rem; text-decoration:none;
  display:flex; flex-direction:column; gap:.3rem; color:inherit;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.enlace:hover{ transform:translateY(-3px); }
.enlace b{ font-size:.98rem; font-weight:700; letter-spacing:-.01em; }
.enlace span{ font-size:.82rem; line-height:1.5; color:var(--txt-mute); }
.sec-dark .enlace span{ color:var(--d-txt-mute); }

/* ── Caja lateral de contacto ─────────────────────────────── */
.caja{ border-radius:22px; padding:clamp(1.3rem,2.4vw,1.8rem); }
.caja h4{ font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.caja p{ font-size:.89rem; line-height:1.65; color:var(--txt-mute); margin-top:.7rem; }
.sec-dark .caja p{ color:var(--d-txt-mute); }
.caja .btn-acryl{ margin-top:1.1rem; }
.caja-dato{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  margin-top:1rem; display:block; color:var(--txt-mute); text-decoration:none;
}
.sec-dark .caja-dato{ color:var(--d-txt-dim); }

/* ── Ajustes del pie con el boton flotante ────────────────── */
.foot-horario{
  display:block; margin-top:.9rem;
  font-family:var(--mono); font-size:.72rem; line-height:1.6; letter-spacing:.06em;
  color:var(--d-txt-dim);
}
/* el boton flotante vive en la esquina: se deja aire para que no
   se coma el enlace de creditos */
.foot-bottom{ padding-bottom:4.2rem; }
@media (min-width:861px){ .foot-bottom{ padding-bottom:3.2rem; } }