/* ── Tokens ──────────────────────────────────────────────────────────────
   Kether Life. Fondo blanco con neutros sesgados hacia el teal del
   logotipo (#2BB596 → #0F6E5C). El teal profundo es el color de texto y
   de acento; el brillante queda para gráficos y rellenos, donde no tiene
   que cumplir contraste de lectura. Un solo mundo visual: la página pinta
   todos sus colores de forma explícita y no hereda el tema del sistema.  */
:root{
  --paper:#FFFFFF;       /* fondo base                       */
  --paper-2:#F3F8F6;     /* superficie tenue, sesgo teal     */
  --paper-3:#E8F1EE;     /* superficie 2                     */
  --ink:#0A2A25;         /* texto principal, teal-negro      */
  --ink-dim:#4E6F68;     /* texto secundario   (5.3:1)       */
  --teal:#0F6E5C;        /* marca, texto y acento (5.9:1)    */
  --teal-mid:#17997F;    /* marca, títulos grandes           */
  --teal-bright:#2BB596; /* marca, sólo gráficos             */
  --mint:#7FE9CB;        /* gráficos sobre fondo oscuro      */
  --deep:#04231F;        /* panel de contacto                */
  --deep-2:#0A3A32;

  --rule:1px solid rgba(15,110,92,.16);
  --hair:rgba(15,110,92,.15);
  /* Medida de lectura. A ancho completo: el contenedor ya está topado en
     1180px, así que la línea no se dispara, y con un tope menor el bloque
     justificado cerraba 330px antes que los filetes y los títulos, que sí
     llegan al margen. Ese escalón se leía como texto cortado.          */
  --measure:100%;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(28px,4vw,56px);

  --f-display:"Sora","Trebuchet MS",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(15px,1.02vw + 12px,17px)/1.65 var(--f-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
img{max-width:100%;height:auto;display:block}

/* Aviso breve, abajo y al centro. Sólo opacidad para ocultarlo: con
   visibility o display el lector de pantalla no anunciaría el cambio de
   texto de la región viva. Por encima del encabezado pegajoso (z-index 20)
   y de sus submenús (30).                                               */
.aviso{
  position:fixed;left:50%;bottom:24px;z-index:60;margin:0;
  max-width:calc(100% - 32px);padding:12px 20px;border-radius:999px;
  background:var(--deep);color:#fff;
  font:500 13.5px/1.4 var(--f-mono);letter-spacing:.02em;text-align:center;
  box-shadow:0 18px 40px -20px rgba(4,35,31,.8);
  opacity:0;pointer-events:none;transform:translate(-50%,12px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1);
}
.aviso.is-on{opacity:1;transform:translate(-50%,0)}

/* ── Texto corrido justificado ───────────────────────────────────────────
   Todo el texto corrido de la página cierra a ambos lados. Va con :where()
   —especificidad cero— para que cualquier regla que ya fije una alineación
   propia siga ganando, como el aviso o el pie de una figura, que van
   centrados.

   No entran los títulos: usan text-wrap:balance, que es la herramienta
   correcta para ellos, y justificarlos abriría huecos entre las palabras
   de una línea suelta.

   La partición de palabras no es un adorno aquí: varias columnas de
   tarjeta miden unos 40 caracteres, y a ese ancho el justificado sin
   guiones abre ríos de espacio. Es el <html lang="es-MX"> el que hace que
   los cortes caigan donde el español los admite.                        */
:where(p,li,dd,blockquote){
  text-align:justify;text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
}

/* La partición de palabras es un remedio para columnas estrechas. El texto
   corrido que ocupa el ancho completo ronda los 110 caracteres por línea:
   ahí sobra sitio para repartir los espacios sin abrir ríos, así que los
   guiones dejan de hacer falta y sólo estorban a la lectura. Se apagan a
   partir de 1000px, que es donde esos bloques ya son anchos; por debajo la
   columna se encoge y los guiones vuelven a ser necesarios. Las tarjetas
   —pilares, casos, soluciones— nunca los pierden: miden unos 40
   caracteres incluso con la ventana maximizada.                        */
@media (min-width:1000px){
  .lede,.contact-lede,.chains-note,
  .faq .answer,.faq .answer p,.faq .answer li,
  .sheet-body p,.sheet-body li{
    -webkit-hyphens:manual;hyphens:manual;
  }
}

/* Etiquetas monoespaciadas y cifras. El justificado no las toca —son de
   una línea, y la última línea nunca se justifica—, pero la partición sí
   las estropearía el día que envuelvan: "Lunes a vier-nes" en una etiqueta
   se ve mal.                                                            */
.eyebrow,.hours,.tag,.cta-note,.metric dt,.metric dd,.aviso,figcaption{
  -webkit-hyphens:manual;hyphens:manual;
}

a{color:var(--teal)}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:4px;
}

/* ── Rejilla base ─────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:clamp(56px,7vw,104px)}
.band + .band{border-top:var(--rule)}

/* Antetítulo: rótulo tipo libro mayor. Marca de sección, no decoración. */
.eyebrow{
  font:500 12px/1 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(15,110,92,.4),transparent)}

h1,h2,h3{font-family:var(--f-display);font-weight:600;text-wrap:balance;margin:0;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(33px,4.6vw,55px);font-weight:700;line-height:1.05;letter-spacing:-.03em;max-width:19ch}
h2{font-size:clamp(26px,3.3vw,40px)}
h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.012em}
p{margin:0}
.lede{max-width:var(--measure);color:var(--ink-dim);font-size:clamp(16px,1.1vw + 12px,19px);line-height:1.75}