/* ==========================================================================
   Labsware — landing page
   Sistema de diseño: «Guía de estilo Labsware v2.0 · light» (ago 2026)
   Cada valor de este archivo sale de la guía. No inventes tokens nuevos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuentes (self-hosted, extraídas de la guía)
   -------------------------------------------------------------------------- */

/* Space Grotesk — variable 300..700 — titulares */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans — variable 100..700 — cuerpo e interfaz */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono — 400 / 600 — etiquetas y datos técnicos */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens — sección 02 de la guía
   -------------------------------------------------------------------------- */

:root {
  /* Color de marca */
  --grafito:        #262D38;
  --coral:          #F0616B;
  --coral-hover:    #D9505A;
  --coral-texto:    #C7434E;  /* único coral admitido en texto pequeño (AA) */
  --acento:           #3D82E8;
  --acento-texto:     #1F62C4;  /* azul para texto pequeño */

  /* Superficies y neutros */
  --fondo-base:     #FFFFFF;
  --fondo-panel:    #F6F7F9;
  --borde-base:     #E4E7EC;
  --borde-fuerte:   #D2D7E0;
  --deshabilitado:  #EDEFF3;

  /* Texto */
  --texto-debil:    #78828F;
  --texto-medio:    #59636F;
  --texto-fuerte:   #171C24;
  /* Texto de controles (botón secundario, etiquetas de campo, iconos).
     En claro es el grafito de marca; en oscuro no puede serlo. */
  --texto-interfaz: #262D38;
  /* Flecha del <select>, como data-URI: hay que reescribirla por modo. */
  --flecha-select:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2359636F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Tipografía */
  --fuente-titular: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fuente-texto:   'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fuente-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Espaciado — escala 4 8 12 16 24 32 48 76 112 */
  --e-1:   4px;
  --e-2:   8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  76px;
  --e-9: 112px;

  /* Rejilla */
  --ancho-max: 1440px;
  --gutter:    16px;
  --margen:    clamp(20px, 5vw, 56px);

  /* Radio — 6px cajas · 999px pastillas · 8px tarjetas */
  --radio-caja:     6px;
  --radio-tarjeta:  8px;
  --radio-pastilla: 999px;
  /* Extensión de la guía: 6px no se lee sobre una foto de 700px de ancho.
     Solo para imágenes sueltas; las cajas de interfaz siguen a 6/8px. */
  --radio-media:   12px;

  /* Ritmo vertical de sección */
  --seccion: clamp(var(--e-8), 9vw, var(--e-9));
}

/* --------------------------------------------------------------------------
   Modo oscuro — «Guía de estilo Labsware v2 · dark»

   Solo cambian los valores de color. Ni la estructura, ni la escala, ni el
   espaciado, ni el marcado dependen del modo.

   El bloque va dos veces a propósito:
     · @media  → respeta la preferencia del sistema cuando el visitante
                 todavía no ha elegido nada (y también sin JavaScript).
     · [data-tema="oscuro"] → gana cuando sí ha elegido, en cualquier sentido.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo-base:     #0E1116;
    --fondo-panel:    #151A21;
    --borde-base:     #1D232C;
    --borde-fuerte:   #2B3341;
    --deshabilitado:  #232A34;

    --texto-debil:    #5D6875;
    --texto-medio:    #96A0AE;
    --texto-fuerte:   #FFFFFF;
    --texto-interfaz: #E6EAF0;

    /* Sobre fondo oscuro el coral base ya llega a AA (5.97): el #C7434E
       existe solo para texto pequeño sobre blanco. */
    --coral-texto:    #F0616B;

    /* #1F62C4 se hunde sobre #0E1116 (3.00). Este azul da 5.83 sobre panel,
       el mismo contraste que #1F62C4 tiene sobre blanco en modo claro. */
    --acento-texto:   #5A96EC;

    --flecha-select:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396A0AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

:root[data-tema="oscuro"] {
  --fondo-base:     #0E1116;
  --fondo-panel:    #151A21;
  --borde-base:     #1D232C;
  --borde-fuerte:   #2B3341;
  --deshabilitado:  #232A34;

  --texto-debil:    #5D6875;
  --texto-medio:    #96A0AE;
  --texto-fuerte:   #FFFFFF;
  --texto-interfaz: #E6EAF0;

  --coral-texto:    #F0616B;
  --acento-texto:   #5A96EC;

  --flecha-select:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396A0AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo-base);
  color: var(--texto-medio);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.625;          /* 16/26 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titular);
  font-weight: 600;
  color: var(--texto-fuerte);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: var(--coral-texto);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--texto-fuerte); }

/* La guía pide `outline: none` en foco; se sustituye por un anillo visible.
   Un foco invisible rompe la navegación por teclado. */
:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--coral);
  color: #FFFFFF;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--grafito);
  color: #FFFFFF;
  padding: var(--e-3) var(--e-4);
  border-radius: 0 0 var(--radio-caja) 0;
  font-size: 14px;
  font-weight: 600;
}
.salta-al-contenido:focus {
  left: 0;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Utilidades de composición
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  padding-block: var(--seccion);
  border-top: 1px solid var(--borde-base);
}

.seccion--panel { background: var(--fondo-panel); }

/* Cabecera de sección: número mono + titular, igual que la guía */
.seccion-cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: var(--e-7);
  max-width: 62ch;
}
.seccion-cabecera h2 {
  font-size: clamp(27px, 3.4vw, 32px);
  line-height: 1.19;
  letter-spacing: -.025em;
}

/* El punto coral del wordmark cierra cada titular de sección: es el elemento
   que la guía define como distintivo de la marca, y aquí hace de puntuación
   en vez de numerar secciones que no son una secuencia. */
.seccion-cabecera h2::after,
.cierre h2::after {
  content: ".";
  color: var(--coral);
}
.seccion-cabecera .entradilla {
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto-medio);
}

/* Etiqueta mono — mayúsculas con interletrado abierto */
.etiqueta {
  font-family: var(--fuente-mono);
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.etiqueta--debil { color: var(--texto-debil); letter-spacing: .08em; font-size: 11px; }

/* Dato mono en minúscula, sin transformar */
.dato-mono {
  font-family: var(--fuente-mono);
  font-size: 12.5px;
  color: var(--texto-debil);
}

/* Pastillas de contorno — el color vive en el borde y el texto */
.pastilla {
  display: inline-block;
  font-family: var(--fuente-mono);
  font-size: 11.5px;
  line-height: 1.4;
  border-radius: var(--radio-pastilla);
  padding: 5px 12px;
  color: var(--texto-medio);
  border: 1px solid var(--borde-fuerte);
}
.pastilla--coral { color: var(--coral-texto); border-color: var(--coral); }
.pastilla--acento  { color: var(--acento-texto);  border-color: var(--acento); }
.pastilla--solida { color: #FFFFFF; background: var(--grafito); border-color: var(--grafito); }

/* --------------------------------------------------------------------------
   Botones — altura 46 px · radio 6 px · sin emojis
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.25;
  border-radius: var(--radio-caja);
  padding: 13px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-align: center;
}

.btn--principal {
  background: var(--coral);
  color: #FFFFFF;
}
.btn--principal:hover { background: var(--coral-hover); color: #FFFFFF; }

.btn--secundario {
  background: transparent;
  color: var(--texto-interfaz);
  border-color: var(--borde-fuerte);
  padding: 12.5px 22px;
}
.btn--secundario:hover { border-color: var(--texto-medio); color: var(--texto-fuerte); }

.btn--enlace {
  background: transparent;
  color: var(--coral-texto);
  padding: 13px 4px;
}
.btn--enlace:hover { color: var(--texto-fuerte); }

.btn--pequeno {
  font-size: 13.5px;
  border-radius: 5px;
  padding: 9px 16px;
}

.btn[disabled],
.btn--deshabilitado {
  background: var(--deshabilitado);
  color: var(--texto-debil);
  cursor: not-allowed;
}

/* Grupo botón + nota mono al lado */
.cta-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

/* --------------------------------------------------------------------------
   Barra de navegación
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo-base);
  border-bottom: 1px solid var(--borde-base);
}

.nav__interior {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 68px;
}
/* marca · menú · controles. El menú se empuja a la derecha y el conmutador
   de modo queda al final, como control de utilidad. */
.marca          { order: 1; }
.nav__menu      { order: 2; margin-left: auto; }
.nav__controles { order: 3; display: flex; align-items: center; gap: var(--e-2); }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--texto-fuerte);
}
.marca:hover { color: var(--texto-fuerte); }
.marca img { width: 24px; }
.marca__texto {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.02em;
}
.marca__punto { color: var(--coral); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}
.nav__enlaces {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__enlaces a {
  font-size: 14.5px;
  color: var(--texto-medio);
}
.nav__enlaces a:hover { color: var(--texto-fuerte); }

.nav__toggle,
.nav__tema {
  display: none;
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-caja);
  padding: 8px;
  cursor: pointer;
  color: var(--texto-interfaz);
  transition: border-color .15s ease, color .15s ease;
}
.nav__toggle:hover,
.nav__tema:hover { border-color: var(--texto-medio); color: var(--texto-fuerte); }

/* El conmutador sí se ve siempre; la hamburguesa solo en móvil. */
.nav__tema { display: inline-flex; }

/* El icono anuncia el modo al que se va, no el actual. */
.nav__tema-sol { display: none; }
:root[data-tema="oscuro"] .nav__tema-sol  { display: block; }
:root[data-tema="oscuro"] .nav__tema-luna { display: none; }

/* Sin JavaScript no hay `data-tema`: el icono sigue a la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .nav__tema-sol  { display: block; }
  :root:not([data-tema]) .nav__tema-luna { display: none; }
}

/* El isotipo es un disco grafito: sobre #0E1116 se pierde. En oscuro queda el
   wordmark con su punto coral, que es la variante «Inverso» de la guía. */
:root[data-tema="oscuro"] .marca img { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .marca img { display: none; }
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__controles { margin-left: auto; }
  .nav__menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-4);
    background: var(--fondo-base);
    border-bottom: 1px solid var(--borde-base);
    padding: var(--e-5) var(--margen) var(--e-6);
  }
  .nav__menu[data-abierto='true'] { display: flex; }
  .nav__enlaces {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__enlaces a {
    display: block;
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--borde-base);
    font-size: 16px;
  }
  .nav__menu .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--e-7), 7vw, var(--e-8)) var(--seccion);
}

.hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--e-6), 4vw, var(--e-7));
  align-items: center;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

/* Escala del componente «hero» de la guía (sección 05).
   El tamaño se ata al ancho de la columna para que el titular
   nunca pase de dos líneas, que es la regla tipográfica de la guía. */
.hero h1 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -.035em;
  max-width: 20ch;
}

.hero__entradilla {
  font-size: clamp(17px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--texto-medio);
  max-width: 48ch;
}

/* Como en el componente hero de la guía: la foto lleva el radio ella misma,
   sin marco ni fondo detrás. Recortar con `overflow` del padre deja las
   esquinas de la imagen rectas en WebKit y asoma el fondo del contenedor. */
.hero__figura {
  margin: 0;
}
.hero__figura img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-media);
}

@media (max-width: 900px) {
  .hero__rejilla { grid-template-columns: minmax(0, 1fr); }
  .hero__figura { order: -1; }
  .hero__figura img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .hero__figura img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   Tarjetas — borde de 1 px, sin sombras
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--fondo-base);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-tarjeta);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.seccion--panel .tarjeta { background: var(--fondo-base); }
.tarjeta--panel { background: var(--fondo-panel); }

.tarjeta h3 {
  font-size: 19px;
  line-height: 1.32;
  letter-spacing: -.015em;
}
.tarjeta p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-medio);
}

/* Contenedor de icono · 36 px · radio 8 · contorno del mismo tono */
.icono {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radio-tarjeta);
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  color: var(--texto-interfaz);
}
.icono svg { width: 20px; height: 20px; }
.icono--coral { color: var(--coral); }
.icono--acento  { color: var(--acento); }

/* --------------------------------------------------------------------------
   Proceso — tres pasos
   -------------------------------------------------------------------------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.paso__numero {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--texto-debil);
}
.paso strong { color: var(--texto-fuerte); font-weight: 600; }

@media (max-width: 860px) {
  .pasos { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Señales
   -------------------------------------------------------------------------- */

.senales {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(var(--e-6), 4vw, var(--e-7));
  align-items: start;
}

.senales__lista {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.senales__lista legend {
  padding: 0 0 var(--e-3);
}

/* Cada señal es una casilla real: accesible con teclado y con estado propio.
   El contenedor del icono hace de indicador; el coral aparece solo al marcar,
   que es la regla de la guía: coral para lo que se pulsa. */
.senal {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  padding: var(--e-5) var(--e-3);
  margin-inline: calc(var(--e-3) * -1);
  border-top: 1px solid var(--borde-base);
  border-radius: var(--radio-caja);
  cursor: pointer;
  transition: background-color .15s ease;
}
.senal:last-of-type { border-bottom: 1px solid var(--borde-base); }
.senal:hover { background: rgba(240, 97, 107, .04); }

.senal__casilla {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.senal__icono {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--borde-fuerte);
  display: grid;
  place-items: center;
  color: var(--texto-medio);
  background: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.senal__icono svg { width: 20px; height: 20px; }

.senal__texto {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto-medio);
  padding-top: 6px;
  transition: color .15s ease;
}

.senal__casilla:checked ~ .senal__icono {
  background: var(--coral);
  border-color: var(--coral);
  color: #FFFFFF;
}
.senal__casilla:checked ~ .senal__texto {
  color: var(--texto-fuerte);
}
.senal__casilla:focus-visible ~ .senal__icono {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
}

.senales__recuento {
  font-family: var(--fuente-mono);
  font-size: 12.5px;
  color: var(--coral-texto);
}
.senales__recuento[hidden] { display: none; }

/* Dentro de una sección panel, la tarjeta va en blanco:
   panel sobre panel solo se distinguiría por el borde. */
.senales__aparte {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  background: var(--fondo-base);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-tarjeta);
  padding: 28px;
}
.senales__aparte h3 { font-size: 19px; line-height: 1.32; }
.senales__aparte p { font-size: 14.5px; line-height: 1.55; }
.senales__figura {
  margin: 0;
}
.senales__figura img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-media);
}

@media (max-width: 900px) {
  .senales { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Servicios
   -------------------------------------------------------------------------- */

.servicios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

/* La foto va a sangre contra el borde de la tarjeta. Además del `overflow`,
   redondea sus propias esquinas superiores: 7px = radio de la tarjeta
   menos el borde de 1px. Sin esto WebKit las deja rectas. */
.servicio { padding: 0; overflow: hidden; isolation: isolate; }
.servicio__figura { margin: 0; border-bottom: 1px solid var(--borde-base); }
.servicio__figura img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px 7px 0 0;
}
.servicio__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: 26px;
}
.servicio__lista {
  list-style: none;
  margin: var(--e-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

@media (max-width: 860px) {
  .servicios { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--borde-base);
  max-width: 90ch;
}

.faq details {
  border-bottom: 1px solid var(--borde-base);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--texto-fuerte);
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral-texto); }

/* La pregunta es un <h3> real para que entre en el esquema de encabezados.
   Hereda del <summary>, así el marcado no cambia nada visualmente. */
.faq summary h3 {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

.faq__signo {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  position: relative;
  color: var(--texto-debil);
}
.faq__signo::before,
.faq__signo::after {
  content: '';
  position: absolute;
  background: currentColor;
  inset-inline: 2px;
  top: 9.5px;
  height: 1.5px;
  transition: transform .15s ease;
}
.faq__signo::after { transform: rotate(90deg); }
.faq details[open] .faq__signo { color: var(--coral-texto); }
.faq details[open] .faq__signo::after { transform: rotate(0deg); }

.faq__respuesta {
  padding: 0 0 var(--e-5);
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--texto-medio);
}
.faq__respuesta strong { color: var(--texto-fuerte); font-weight: 600; }
.faq__respuesta ul {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* --------------------------------------------------------------------------
   Cierre — CTA + formulario
   -------------------------------------------------------------------------- */

.cierre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(var(--e-6), 4vw, var(--e-7));
  align-items: start;
}

.cierre__texto { display: flex; flex-direction: column; gap: var(--e-5); }
.cierre h2 {
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1.13;
  letter-spacing: -.03em;
  max-width: 22ch;   /* cabe en dos líneas, que es la regla de la guía */
}
.cierre__entradilla { font-size: 17px; line-height: 1.6; max-width: 46ch; }

.cierre__vias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  border-top: 1px solid var(--borde-base);
  padding-top: var(--e-5);
}
.cierre__vias li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: 15px;
}
.cierre__vias .icono {
  width: 30px;
  height: 30px;
  color: var(--texto-debil);
}
.cierre__vias .icono svg { width: 16px; height: 16px; }

/* Formulario — etiqueta arriba, placeholder de ejemplo, error accionable */
.formulario {
  background: var(--fondo-panel);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-tarjeta);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.campo > span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-interfaz);
}
.campo input,
.campo select,
.campo textarea {
  min-width: 0;
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--texto-fuerte);
  background: var(--fondo-base);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-caja);
  padding: 12px 14px;
  transition: border-color .15s ease;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-debil); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--texto-medio); }

.campo select {
  appearance: none;
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* `.campo > span` alcanza también a este span, así que hay que igualar su
   especificidad y devolver el peso normal: el error no va en negrita. */
.campo .campo__error {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--coral-texto);
}
.campo__error:empty { display: none; }

.campo[data-invalido='true'] input,
.campo[data-invalido='true'] select,
.campo[data-invalido='true'] textarea { border-color: var(--coral); }

.formulario__pie {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-debil);
}

.formulario__aviso {
  border: 1px solid var(--acento);
  border-radius: var(--radio-caja);
  padding: var(--e-3) var(--e-4);
  font-size: 14px;
  color: var(--acento-texto);
}
.formulario__aviso[hidden] { display: none; }

@media (max-width: 900px) {
  .cierre { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
  background: var(--grafito);
  color: #C3C9D2;
  padding-block: var(--e-8) var(--e-6);
}
.pie a { color: #C3C9D2; }
.pie a:hover { color: #FFFFFF; }

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--e-5), 3vw, var(--e-7));
  padding-bottom: var(--e-7);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pie .marca { color: #FFFFFF; }
.pie .marca:hover { color: #FFFFFF; }
.marca--inversa .marca__texto { font-size: 20px; }

.pie__intro {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.6;
}

.pie__columna h3 {
  font-family: var(--fuente-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8B94A3;
  margin-bottom: var(--e-4);
}
.pie__columna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  font-size: 14.5px;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-top: var(--e-5);
  font-family: var(--fuente-mono);
  font-size: 11.5px;
  color: #8B94A3;
}
.pie__legal a { color: #8B94A3; }

@media (max-width: 860px) {
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__intro { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Páginas interiores — contenido largo

   Las genera build/generar.py desde el export. Reutilizan los mismos tokens,
   así que heredan el modo claro/oscuro sin nada extra.
   -------------------------------------------------------------------------- */

.miga {
  font-family: var(--fuente-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--texto-debil);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}
.miga a { color: var(--texto-debil); }
.miga a:hover { color: var(--coral-texto); }

/* `ch` se resuelve contra el tamaño de letra del PROPIO elemento. Esta cabecera
   es un <header> a 16px, así que un `max-width` en ch aquí daba ~211px y partía
   el titular en nueve líneas. Se usa la misma medida que el cuerpo para que la
   línea divisoria y el texto queden alineados. */
.prosa-cabecera {
  max-width: 68ch;
  padding-bottom: var(--e-6);
  margin-bottom: var(--e-7);
  border-bottom: 1px solid var(--borde-base);
}
.prosa-cabecera h1 {
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.prosa-cabecera h1::after { content: "."; color: var(--coral); }

/* Medida de lectura: 60-70 caracteres, como pide la guía. */
.prosa {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto-medio);
}
.prosa > * + * { margin-top: var(--e-5); }

.prosa h2,
.prosa h3,
.prosa h4 { letter-spacing: -.02em; }
.prosa h2 { font-size: clamp(24px, 3vw, 28px); line-height: 1.25; margin-top: var(--e-8); }
.prosa h3 { font-size: 20px; line-height: 1.3;  margin-top: var(--e-7); }
.prosa h4 { font-size: 17px; line-height: 1.35; margin-top: var(--e-6); }
.prosa > h2:first-child,
.prosa > h3:first-child { margin-top: 0; }

.prosa strong { color: var(--texto-fuerte); font-weight: 600; }
.prosa em { font-style: italic; }

.prosa ul,
.prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: var(--e-3); }

.prosa blockquote {
  margin: var(--e-6) 0;
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  border-left: 2px solid var(--coral);
  font-size: 18px;
  line-height: 1.55;
  color: var(--texto-fuerte);
}
.prosa blockquote p { margin: 0; }

.prosa img {
  border-radius: var(--radio-media);
  margin-block: var(--e-2);
}

.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.prosa th,
.prosa td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde-base);
}
.prosa th {
  font-family: var(--fuente-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-debil);
}

.prosa code {
  font-family: var(--fuente-mono);
  font-size: .9em;
  background: var(--fondo-panel);
  border: 1px solid var(--borde-base);
  border-radius: 4px;
  padding: 2px 5px;
}

.prosa__cta { margin-top: var(--e-6); }

.prosa__aviso {
  font-family: var(--fuente-mono);
  font-size: 13px;
  color: var(--acento-texto);
  border: 1px solid var(--acento);
  border-radius: var(--radio-caja);
  padding: var(--e-3) var(--e-4);
}

/* Índice del blog */
.indice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gutter);
  max-width: none;
}
/* El índice también lleva la clase .prosa, cuyo `* + *` añade margen superior
   a todo menos al primer hijo. En una rejilla eso descuadra: la primera
   tarjeta queda más alta que el resto de su fila. */
.indice > * + * { margin-top: 0; }

.indice__entrada {
  display: flex;
  flex-direction: column;
  background: var(--fondo-panel);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  isolation: isolate;
}
.indice__figura { margin: 0; border-bottom: 1px solid var(--borde-base); }
/* Las portadas son banners de ~2.33:1 con texto incrustado. Recortarlas a
   16/9 partía las palabras, así que se usa su propia proporción y `contain`
   en vez de `cover`: se ve la imagen entera, sin cortes. */
.indice__figura img {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 3;
  object-fit: contain;
  background: var(--fondo-base);
  border-radius: 7px 7px 0 0;
}
.indice__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: 26px;
}
.indice__entrada h2 { font-size: 18px; line-height: 1.35; margin: 0; letter-spacing: -.015em; }
.indice__entrada h2 a { color: var(--texto-fuerte); }
.indice__entrada h2 a:hover { color: var(--coral-texto); }
.indice__entrada p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--texto-medio); }

/* La trampa antibots: fuera de la vista y del lector de pantalla, pero
   rellenable por un robot que complete todos los campos del formulario. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.formulario__aviso--error {
  color: var(--coral-texto);
  border-color: var(--coral);
}

/* ── Calendario incrustado (Calendly) ─────────────────────────────────────
   Va en un iframe, no con el widget.js de Calendly: así no se ejecuta
   JavaScript de terceros dentro de la página. La altura se fija aquí porque
   el iframe no puede negociarla con el documento que lo contiene. */
.calendario {
  margin-top: var(--e-7);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-media);
  overflow: hidden;
  background: var(--fondo-panel);
}

.calendario iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}

/* En pantallas estrechas Calendly apila el calendario bajo el detalle de la
   cita y necesita bastante más alto para no scrollear dentro de sí mismo. */
@media (max-width: 640px) {
  .calendario iframe { height: 1120px; }
}

.calendario__alterna {
  margin: 0;
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--borde-base);
  font-size: 14px;
  color: var(--texto-medio);
}

.calendario__alterna a { color: var(--acento-texto); }

/* La ruta que falló, en la 404. Nace oculta: sin JavaScript no hay ruta que
   mostrar y una etiqueta «Buscabas:» vacía sería peor que nada. */
.ruta-404 code {
  font-family: var(--fuente-mono);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde-base);
  color: var(--texto-fuerte);
  word-break: break-all;
}

/* ── Tablas dentro de la prosa ────────────────────────────────────────────
   El sitio no tenía ninguna hasta ahora. La envoltura con scroll propio la
   pone el generador: una tabla ancha debe desbordarse dentro de su caja y
   nunca empujar el ancho de la página. */
.prosa .tabla {
  overflow-x: auto;
  margin-top: var(--e-6);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-tarjeta);
  -webkit-overflow-scrolling: touch;
}

.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.prosa th,
.prosa td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde-base);
}

.prosa thead th {
  background: var(--fondo-panel);
  color: var(--texto-fuerte);
  font-family: var(--fuente-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prosa tbody tr:last-child th,
.prosa tbody tr:last-child td { border-bottom: 0; }

.prosa td { color: var(--texto-medio); }
.prosa td strong { color: var(--texto-fuerte); }

/* Las columnas de cifras (de la tercera en adelante) no deben partir un valor
   en dos líneas: «≤ 200 ms» leído como «≤ 200 / ms» se lee mal. La primera y
   la segunda columna sí envuelven, que es donde va el texto largo. */
.prosa th:nth-child(n+3),
.prosa td:nth-child(n+3) { white-space: nowrap; }

/* ── Logros: la lista de «nuestros servicios están diseñados para» ────────
   Sigue siendo un <ul> —es una lista y el lector de pantalla debe anunciarla
   así—, pero se presenta como cuatro columnas. El verbo es la carga útil de
   cada frase, así que lleva la voz cantante en tipografía de titular. */
.prosa .logros {
  list-style: none;
  padding: 0;
  margin-top: var(--e-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-4);
}

.prosa .logros li {
  margin: 0;
  padding-top: var(--e-3);
  border-top: 2px solid var(--borde-base);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto-medio);
}

.logros__verbo {
  display: block;
  font-family: var(--fuente-titular);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--texto-fuerte);
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  .prosa .logros { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .prosa .logros { grid-template-columns: 1fr; }
}

/* ── Pilares: el método C.V.F ─────────────────────────────────────────────
   No son botones: son saltos a las tres secciones de esta misma página, y el
   método es una secuencia —primero se construye, luego se vende, luego se
   fideliza—. Por eso van sobre una misma línea que corre de izquierda a
   derecha, con su inicial como hito, en vez de tres tarjetas sueltas.
   Tres botones corales seguidos, además, rompían la regla de la guía de un
   solo coral por pantalla; aquí el coral aparece solo en el que señalas. */
.prosa .pilares {
  margin-top: var(--e-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.pilar {
  display: block;
  padding: var(--e-4) var(--e-4) var(--e-4) 0;
  border-top: 2px solid var(--borde-base);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}

.pilar__inicial {
  display: block;
  margin-top: calc(var(--e-4) * -1 - 9px);
  margin-bottom: var(--e-3);
  font-family: var(--fuente-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--texto-medio);
  transition: color .15s ease;
}

/* El punto que marca el hito se apoya sobre la línea, delante de la inicial. */
.pilar__inicial::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--e-2);
  border-radius: var(--radio-pastilla);
  background: var(--borde-fuerte);
  vertical-align: 1px;
  transition: background-color .15s ease, transform .15s ease;
}

.pilar__nombre {
  display: block;
  font-family: var(--fuente-titular);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--texto-fuerte);
  transition: color .15s ease;
}

/* La flecha dice lo que pasa al pulsar: te lleva más abajo, a esa sección.
   Es señalización, no adorno, y por eso está siempre visible en vez de
   aparecer al pasar el ratón —donde nadie la encontraría desde el móvil—. */
.pilar__flecha {
  display: inline-block;
  margin-left: var(--e-2);
  font-size: .78em;
  color: var(--texto-debil);
  transition: transform .15s ease, color .15s ease;
}

.pilar:hover .pilar__flecha,
.pilar:focus-visible .pilar__flecha {
  color: var(--coral);
  transform: translateY(3px);
}

.pilar__que {
  display: block;
  margin-top: var(--e-1);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto-medio);
  max-width: 26ch;
}

.pilar:hover,
.pilar:focus-visible { border-top-color: var(--coral); }

.pilar:hover .pilar__nombre,
.pilar:focus-visible .pilar__nombre,
.pilar:hover .pilar__inicial,
.pilar:focus-visible .pilar__inicial { color: var(--coral-texto); }

.pilar:hover .pilar__inicial::before,
.pilar:focus-visible .pilar__inicial::before {
  background: var(--coral);
  transform: scale(1.45);
}

.pilar:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* Apilados, la línea pasa a correr en vertical por la izquierda: el recorrido
   se sigue leyendo como un recorrido y no como tres bloques sueltos. */
@media (max-width: 720px) {
  .prosa .pilares { grid-template-columns: 1fr; }

  .pilar {
    border-top: 0;
    border-left: 2px solid var(--borde-base);
    padding: var(--e-3) 0 var(--e-5) var(--e-4);
  }

  .pilar:last-child { padding-bottom: var(--e-3); }

  .pilar__inicial {
    margin-top: 0;
    margin-left: calc(var(--e-4) * -1 - 8px);
  }

  .pilar:hover,
  .pilar:focus-visible { border-top-color: var(--borde-base); border-left-color: var(--coral); }
}