/* ============================================================   AMIS Teleradiologia - style.css   Seccion 1: design tokens del sistema (fusion de _ds/tokens)   Seccion 2: CSS de la pagina (antes inline en el HTML)   ============================================================ */
/* ===== Design tokens: fonts.css ===== */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/mavenpro-latin-ext-400_900.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: 'Maven Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/mavenpro-latin-400_900.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: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/sourcesans3-latin-ext-300_700.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: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/sourcesans3-latin-300_700.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
}

/* ===== Design tokens: colors.css ===== */
/* Grupo AMIS — colour system.
   Sampled from the AMIS isotype (IMG_6512.png) and the Prevenort brand manual.
   AMIS naranja  = C0 M84 Y89 K0   -> #EE5032
   AMIS naranja oscuro = same + K30 -> #A73823
   AMIS gris     = K30              -> #BBBEBF
   Prevenort naranja = C5 M64 Y97 K0 -> #FF722C (sampled from logo art)
   Prevenort gris    = K40           -> #ABB4B2 */
:root {
  /* --- Base palette: AMIS --- */
  --amis-naranja: #ee5032;
  --amis-naranja-oscuro: #A73823;
  --amis-naranja-tinte: #FCE6E0;
  --amis-naranja-suave: #F7A38F;
  --amis-multiply: #B13A21;
  --amis-gris: #BBBEBF;
  --amis-gris-oscuro: #6E7375;
  --amis-gris-claro: #E3E5E5;
  --amis-naranja-original: #EE5032;
  /* --- Base palette: Prevenort (marca hija) --- */
  --prevenort-naranja: #FF722C;
  --prevenort-naranja-oscuro: #C2531D;
  --prevenort-gris: #ABB4B2;
  --prevenort-gris-oscuro: #6B7472;

  /* --- Neutrals --- */
  --gris-0: #FFFFFF;
  --gris-50: #F7F7F7;
  --gris-100: #EFEFEF;
  --gris-200: #E3E5E5;
  --gris-300: #CFD2D2;
  --gris-400: #BBBEBF;
  --gris-500: #94999A;
  --gris-600: #6E7375;
  --gris-700: #4C5051;
  --gris-800: #2E3132;
  --gris-900: #1A1C1D;

  /* --- Semantic / estado --- */
  --exito: #3E9B6B;
  --exito-tinte: #E6F2EC;
  --alerta: #E0A32E;
  --alerta-tinte: #FBF1DD;
  --error: #C2352C;
  --error-tinte: #F8E4E2;
  --info: #3C7CA6;
  --info-tinte: #E4EEF5;

  /* --- Aliases semánticos --- */
  --marca: var(--amis-naranja);
  --marca-hover: var(--amis-naranja-oscuro);
  --marca-tinte: var(--amis-naranja-tinte);
  --texto-titulo: var(--gris-900);
  --texto-cuerpo: var(--gris-700);
  --texto-suave: var(--gris-500);
  --texto-invertido: var(--gris-0);
  --texto-marca: var(--amis-naranja);
  --texto-enlace: var(--amis-naranja);
  --texto-enlace-hover: var(--amis-naranja-oscuro);
  --superficie-pagina: var(--gris-0);
  --superficie-suave: var(--gris-50);
  --superficie-tarjeta: var(--gris-0);
  --superficie-inversa: var(--gris-900);
  --superficie-marca: var(--amis-naranja);
  --borde: var(--gris-200);
  --borde-fuerte: var(--gris-300);
  --borde-marca: var(--amis-naranja);
  --foco: var(--amis-naranja);
}

[data-marca="prevenort"] {
  --marca: var(--prevenort-naranja);
  --marca-hover: var(--prevenort-naranja-oscuro);
  --texto-marca: var(--prevenort-naranja);
  --texto-enlace: var(--prevenort-naranja);
  --texto-enlace-hover: var(--prevenort-naranja-oscuro);
  --superficie-marca: var(--prevenort-naranja);
  --borde-marca: var(--prevenort-naranja);
  --foco: var(--prevenort-naranja);
}

/* ===== Design tokens: typography.css ===== */
/* Tipografía Grupo AMIS.
   Maven Pro = tipografía de marca (logo AMIS: Maven Pro Medium; titulares: Maven Pro Bold).
   Source Sans 3 = SUSTITUTO de Corbel (tipografía del manual Prevenort). Ver readme.md. */
:root {
  --font-marca: 'Maven Pro', 'Segoe UI', system-ui, sans-serif;
  --font-texto: 'Source Sans 3', 'Corbel', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --peso-regular: 400;
  /* @kind font */
  --peso-medium: 500;
  /* @kind font */
  --peso-semibold: 600;
  /* @kind font */
  --peso-bold: 700;
  /* @kind font */
  --peso-black: 900;
  /* @kind font */

  --texto-2xs: 11px;
  --texto-xs: 12px;
  --texto-sm: 14px;
  --texto-base: 16px;
  --texto-md: 18px;
  --texto-lg: 21px;
  --texto-xl: 26px;
  --texto-2xl: 32px;
  --texto-3xl: 40px;
  --texto-4xl: 52px;
  --texto-5xl: 68px;

  --interlinea-apretada: 1.08;
  /* @kind font */
  --interlinea-titulo: 1.18;
  /* @kind font */
  --interlinea-media: 1.35;
  /* @kind font */
  --interlinea-cuerpo: 1.6;
  /* @kind font */

  --track-display: -0.02em;
  /* @kind font */
  --track-titulo: -0.01em;
  /* @kind font */
  --track-normal: 0;
  /* @kind font */
  --track-nav: 0.12em;
  /* @kind font */
  --track-etiqueta: 0.16em;
  /* @kind font */
}

/* ===== Design tokens: spacing.css ===== */
:root {
  --e-0: 0px;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --e-20: 80px;
  --e-24: 96px;
  --e-32: 128px;

  --ancho-contenido: 100%;
  --ancho-texto: 68ch;
  /* Contenedor máximo de contenido: crece por encima de 1920 (ver bloque
     @media (min-width:1921px) al final de este archivo) */
  --ancho-wrap: min(1760px, 100%);
  /* Columnas del grid de modalidades (#incorpora) y de la FAQ (#preguntas) */
  --cols-modalidades: minmax(150px, 1fr);
  --cols-faq: minmax(0, 1fr);
  /* @kind spacing */
  --canal-lateral: clamp(24px, 4.5vw, 80px);
  --alto-barra: 78px;
  --alto-cinta: 64px;
}

/* ===== Design tokens: radius.css ===== */
:root {
  --radio-0: 0px;
  --radio-xs: 2px;
  --radio-sm: 3px;
  --radio-md: 4px;
  --radio-lg: 8px;
  --radio-xl: 14px;
  --radio-pill: 999px;
  --radio-circulo: 50%;
}

/* ===== Design tokens: elevation.css ===== */
:root {
  --sombra-0: none;
  /* @kind shadow */
  --sombra-1: 0 1px 2px rgba(26, 28, 29, .08);
  --sombra-2: 0 2px 6px rgba(26, 28, 29, .10);
  --sombra-3: 0 6px 18px rgba(26, 28, 29, .12);
  --sombra-4: 0 16px 40px rgba(26, 28, 29, .16);
  --sombra-marca: 0 6px 18px rgba(238, 80, 50, .28);
  --sombra-interna: inset 0 1px 2px rgba(26, 28, 29, .10);
  /* @kind shadow */
  --foco-anillo: 0 0 0 3px rgba(238, 80, 50, .32);
  --velo-foto: linear-gradient(180deg, rgba(26, 28, 29, 0) 38%, rgba(26, 28, 29, .55) 100%);
  /* @kind color */
  --velo-lateral: linear-gradient(90deg, rgba(26, 28, 29, .55) 0%, rgba(26, 28, 29, 0) 62%);
  /* @kind color */
}

/* ===== Design tokens: motion.css ===== */
:root {
  --dur-rapida: 120ms;
  /* @kind other */
  --dur-media: 200ms;
  /* @kind other */
  --dur-lenta: 320ms;
  /* @kind other */
  --curva-estandar: cubic-bezier(.2, 0, .2, 1);
  /* @kind other */
  --curva-salida: cubic-bezier(.4, 0, 1, 1);
  /* @kind other */
  --curva-entrada: cubic-bezier(0, 0, .2, 1);
  /* @kind other */
  --transicion-color: color var(--dur-rapida) var(--curva-estandar), background-color var(--dur-rapida) var(--curva-estandar), border-color var(--dur-rapida) var(--curva-estandar);
  /* @kind other */
}

/* ===== Design tokens: base.css ===== */
html {
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%
}

body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: var(--texto-base);
  line-height: var(--interlinea-cuerpo);
  color: var(--texto-cuerpo);
  background: var(--superficie-pagina)
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-marca);
  color: var(--html-fg);
  margin: 0;
  font-weight: var(--peso-bold);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--track-titulo);
  transition: color .85s ease-in-out
}

p {
  margin: 0 0 var(--e-4);
  text-wrap: pretty
}

a {
  color: var(--texto-enlace);
  text-decoration: none;
  transition: var(--transicion-color)
}

a:hover {
  color: var(--texto-enlace-hover);
  text-decoration: none
}

:focus-visible {
  outline: none;
  box-shadow: var(--foco-anillo);
  border-radius: var(--radio-sm)
}

img {
  max-width: 100%
}

/* ============================================================   CSS DE PAGINA   ============================================================ */
/* Scrollbar personalizada corporativa AMIS */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, var(--amis-naranja)) var(--scroll-track, #141617);
  background: var(--html-bg, #1A1C1D);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scroll-track, #141617);
  border-left: 1px solid transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb, var(--amis-naranja));
  border-radius: 999px;
  border: 2px solid var(--scroll-track, #141617);
  transition: all 0.45s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--amis-naranja-oscuro);
}

::-webkit-scrollbar-corner {
  background: var(--scroll-track, #141617);
}

/* Reglas oficiales Lenis Smooth Scroll con inercia */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  background-color: var(--html-bg, #1A1C1D);
  color: var(--html-fg, #FFFFFF);
  font-family: var(--font-texto);
  /* sin overflow-x:hidden: rompe position:sticky de las 7 ventanas */
}

/* Grano orgánico táctil Awwwards */
.amis-grain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9999;
}

/* ELIMINAR SUBRAYADO BLANCO DE TODAS LAS PALABRAS Y BOTONES DE LA PÁGINA */
*,
*::before,
*::after,
a,
a:hover,
a:focus,
a:active,
button,
button:hover,
.amis-nav-item,
.amis-nav-link,
.amis-btn-secondary,
[class*="amis-"],
[class*="btn"],
span {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* Justificación de textos rigurosa con separación silábica automática */
p,
.amis-justified {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  width: 100%;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  width: 100%;
}

/* Header Sticky Permanente (Fixed Frosted Glass a Ancho Completo) */
.amis-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100vw;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-sizing: border-box;

  transition: background .45s ease, border-color .45s ease;
}

.amis-header-inner {
  width: 100vw;
  margin-left: 0%;
  margin-right: 0%;
  left: 0;
  right: 0;
  min-height: var(--alto-barra);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-6);
  box-sizing: border-box;
}

/* En el nav: hover solo agranda el texto (sin fondo/borde/sombra); activo solo cápsula borde */
.amis-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-texto);
  font-size: var(--texto-sm, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-nav, 0.12em);
  color: var(--header-fg) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
  white-space: nowrap;
  cursor: pointer;
}

.amis-nav-item:hover {
  color: var(--header-fg) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: scale(1.08);
  text-decoration: none !important;
}

.amis-nav-item.active,
.amis-nav-item[aria-current="page"] {
  color: var(--texto-marca) !important;
  background: transparent !important;
  border-color: var(--header-fg) !important;
  box-shadow: none !important;
  transform: none;
  text-decoration: none !important;
}

.amis-nav-item.active:hover,
.amis-nav-item[aria-current="page"]:hover {
  color: var(--texto-marca) !important;
  background: transparent !important;
  border-color: var(--header-fg) !important;
  box-shadow: none !important;
  transform: scale(1.08);
}

/* Pantallas completas (100vh) — base; el sticky se aplica en bloque CLAROSCURA */
.amis-screen {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(48px, 6vw, 96px) var(--canal-lateral);
  position: relative;
  /* padding bottom extra por cinta en hero */
}

#inicio.amis-screen {
  padding-top: calc(var(--alto-barra, 78px) + clamp(16px, 3vw, 40px));
  padding-bottom: calc(var(--alto-cinta, 56px) + clamp(24px, 3vw, 40px));
}

/* Cinta de clientes al pie de #red: mismo reserva de espacio que el hero */
#red.amis-screen {
  padding-bottom: calc(var(--alto-cinta, 56px) + clamp(32px, 4vw, 56px));
}

/* Área de textos ensanchada y adaptable al ancho máximo de la ventana */
.amis-content-wrap {
  width: 100%;
  max-width: 100%;
  margin: 100px auto;
  box-sizing: border-box;
}

/* FAQ: altura reservada (JS) para que al abrir/cerrar el acordeón
       no se recentre la caja ni se mueva la columna de texto */
#preguntas .amis-content-wrap {
  align-items: center;
}

#preguntas .amis-content-wrap> :first-child {
  align-self: center;
  width: 100%;
}

#preguntas .amis-content-wrap> :last-child {
  align-self: center;
  width: 100%;
}

/* Tarjetas Awwwards con brillo especular */
.amis-card {
  background: var(--panel-card, color-mix(in srgb, var(--html-fg) 6%, transparent));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-card-bd, color-mix(in srgb, var(--html-fg) 14%, transparent));
  border-radius: var(--radio-lg);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.amis-card:hover {
  transform: translateY(-5px);
  border-color: rgba(238, 80, 50, 0.4);
  box-shadow: 0 24px 48px -12px rgba(238, 80, 50, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Interacción táctil y visual para tarjetas de sedes operativas */
.amis-sede-card {
  cursor: pointer;
  position: relative;
}

.amis-sede-card:hover,
.amis-sede-card.active {
  border-color: rgba(238, 80, 50, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(238, 80, 50, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.amis-sede-card:hover .amis-sede-title,
.amis-sede-card.active .amis-sede-title {
  color: var(--amis-naranja, #EE5032) !important;
  text-shadow: 0 0 16px rgba(238, 80, 50, 0.5);
}

/* Etiqueta de texto (sin caja ni punto) */
.amis-pill-badge {
  display: block;
  color: var(--html-fg);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: fit-content;
}


/* Cinta de modalidades fluida e interactiva */
.amis-cinta {
  width: 100%;
  background: var(--cinta-bg);
  border-top: 1px solid var(--cinta-bd);
  border-bottom: 1px solid var(--cinta-bd);
  display: flex;
  align-items: stretch;
  min-height: var(--alto-cinta);
  flex-wrap: wrap;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 10;
}

.amis-modalidad {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cinta-fg);
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-etiqueta);
  padding: var(--e-4);
  border-right: 1px solid var(--cinta-bd);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  user-select: none;
}

.amis-modalidad:last-child {
  border-right: none;
}

.amis-modalidad:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  letter-spacing: 0.24em;
}

/* Franja de servicios del hero (#inicio): columnas título + descripción,
       sin líneas divisorias ni animaciones de hover */
#inicio .amis-cinta {
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  /* Subida ~50px respecto al borde inferior (inline style fija bottom:0) */
  bottom: 50px !important;
  /* Centrada en el mismo contenedor que el hero (max-width:min(1280px,100%)
         inline en .amis-content-wrap): a anchos >=1280 el margen izq/der queda
         (vw-1280)/2 y la franja deja de despegarse de los textos del hero.
         El inline style fija left/right:0 y width:100%; margin-inline:auto
         sobre-absuelto las centra y max-width las limita. padding:0 → el
         texto cae a 14px (padding propio de .amis-servicio) del borde del
         contenedor en ambos extremos. border-box evita desborde (inline
         fija padding:0) */
  padding-inline: 0 !important;
  max-width: var(--ancho-wrap) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Los 5 ítems con el MISMO alineamiento (izquierda) y extremos simétricos:
       cada ítem se dimensiona por su contenido (flex:0 1 auto) y space-between
       reparte el sobrante entre ellos → el primer texto queda a 14px del borde
       izq del contenedor y el último a 14px del borde der, sin necesidad de
       alinear la última columna a la derecha. Solo desktop; en ≤860 manda el
       flex:1 1 170px global con la pila en flujo. */
@media (min-width: 861px) {
  #inicio .amis-cinta {
    justify-content: space-between;
  }

  #inicio .amis-servicio {
    flex: 0 1 auto;
  }
}

.amis-servicio {
  flex: 1 1 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(6px, 0.4vw, 12px);
  padding: var(--e-4) clamp(4px, 1vw, 14px);
  text-align: left;
  transition: none;
}

.amis-servicio b {
  font-size: clamp(12.5px, 0.78vw, 27px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cinta-fg);
}

.amis-servicio span {
  font-size: clamp(13px, 0.8vw, 28px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--cinta-fg);
  opacity: 0.72;
  max-width: clamp(160px, 13vw, 480px);
}

/* Botón secundario con glassmorphism */
.amis-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(13px, 0.68vw, 26px) clamp(28px, 1.5vw, 56px);
  border: 1px solid var(--btn2-bd);
  border-radius: 999px;
  color: var(--btn2-fg);
  font-weight: 600;
  font-size: var(--texto-md);
  text-decoration: none;
  line-height: 1.2;
  background: var(--btn2-bg);
  backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.amis-btn-secondary:hover {
  background: var(--html-fg);
  border-color: var(--html-fg);
  color: var(--html-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Acordeón FAQ (patrón FaqAccordion: altura 0↔auto, + rota 45°) */
.amis-faq-item {
  background: var(--panel-card, color-mix(in srgb, var(--html-fg) 5%, transparent));
  backdrop-filter: blur(12px);
  border: 1px solid var(--panel-card-bd, color-mix(in srgb, var(--html-fg) 14%, transparent));
  border-radius: var(--radio-md);
  overflow: hidden;
  margin-bottom: var(--e-4);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.amis-faq-item:hover,
.amis-faq-item.open {
  background: color-mix(in srgb, var(--html-fg) 9%, transparent);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.amis-faq-summary {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-6);
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: var(--texto-md);
  text-transform: none;
  letter-spacing: var(--track-nav);
  color: var(--panel-fg, var(--html-fg));
}

.amis-faq-icon {
  font-family: var(--font-marca);
  font-size: clamp(22px, 1.15vw, 44px);
  font-weight: 500;
  color: var(--panel-fg, var(--html-fg));
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
  display: inline-block;
}

.amis-faq-item:hover .amis-faq-icon,
.amis-faq-item.open .amis-faq-icon {
  color: var(--accent);
}

.amis-faq-item.open .amis-faq-icon {
  transform: rotate(45deg);
}

.amis-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.amis-faq-item.open .amis-faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.amis-faq-answer-clip {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--e-6) var(--e-6);
}

.amis-faq-answer-clip>p {
  margin: var(--e-4) 0 0 0;
  width: 100%;
}

/* Campos de formulario */
.amis-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-texto);
  font-size: var(--texto-base);
  padding: clamp(14px, 0.72vw, 26px) clamp(18px, 0.95vw, 36px);
  border: 1px solid var(--input-bd);
  border-radius: var(--radio-sm);
  background: var(--input-bg);
  color: var(--input-fg);
  outline: none;
  transition: border-color 0.85s ease-in-out, box-shadow 0.25s ease, background 0.85s ease-in-out, color 0.85s ease-in-out;
}

.amis-input::placeholder {
  color: color-mix(in srgb, var(--html-fg) 55%, transparent);
}

.amis-input:focus {
  border-color: var(--accent);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px rgba(238, 80, 50, 0.22);
}

/* Footer a ancho completo (100% edge-to-edge) */
.amis-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border-top: 1px solid var(--header-bd);
  padding: clamp(28px, 3vw, 44px) var(--canal-lateral);
  background: var(--footer-bg);
  box-sizing: border-box;
}

/* Animaciones 3D e isotipo */
@keyframes amis-giro {
  from {
    transform: rotateY(0deg) rotateX(8deg);
  }

  to {
    transform: rotateY(360deg) rotateX(8deg);
  }
}

@keyframes amis-flota {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

@keyframes amis-sombra {

  0%,
  100% {
    transform: scaleX(1);
    opacity: .55;
  }

  50% {
    transform: scaleX(.82);
    opacity: .35;
  }
}

/* ===================== CLAROSCURA: tema + stack ===================== */
:root,
html[data-tema="noche"] {
  --font-texto: 'Barlow', 'Source Sans 3', system-ui, sans-serif;
  --font-marca: 'Barlow', 'Maven Pro', system-ui, sans-serif;

  --p1-bg: #000000;
  --p1-fg: #FFFFFF;
  --p1-muted: rgba(255, 255, 255, .7);
  --p1-card: rgba(255, 255, 255, .05);
  --p1-card-bd: rgba(255, 255, 255, .14);
  --p2-bg: #000000;
  --p2-fg: #FFFFFF;
  --p2-muted: rgba(255, 255, 255, .7);
  --p2-card: rgba(255, 255, 255, .05);
  --p2-card-bd: rgba(255, 255, 255, .14);
  --p3-bg: #000000;
  --p3-fg: #FFFFFF;
  --p3-muted: rgba(255, 255, 255, .7);
  --p3-card: rgba(255, 255, 255, .05);
  --p3-card-bd: rgba(255, 255, 255, .14);
  --p4-bg: #000000;
  --p4-fg: #FFFFFF;
  --p4-muted: rgba(255, 255, 255, .7);
  --p4-card: rgba(255, 255, 255, .05);
  --p4-card-bd: rgba(255, 255, 255, .14);
  --p5-bg: #000000;
  --p5-fg: #FFFFFF;
  --p5-muted: rgba(255, 255, 255, .7);
  --p5-card: rgba(255, 255, 255, .05);
  --p5-card-bd: rgba(255, 255, 255, .14);
  --p6-bg: #000000;
  --p6-fg: #FFFFFF;
  --p6-muted: rgba(255, 255, 255, .7);
  --p6-card: rgba(255, 255, 255, .05);
  --p6-card-bd: rgba(255, 255, 255, .14);
  --p7-bg: #000000;
  --p7-fg: #FFFFFF;
  --p7-muted: rgba(255, 255, 255, .7);
  --p7-card: rgba(255, 255, 255, .05);
  --p7-card-bd: rgba(255, 255, 255, .14);

  --header-bg: #000000;
  --header-fg: #FFFFFF;
  --header-bd: rgba(255, 255, 255, .14);
  --nav-hover-bg: rgba(255, 255, 255, .08);
  --nav-hover-fg: #FFFFFF;
  --btn2-bd: rgba(255, 255, 255, .22);
  --btn2-bg: rgba(255, 255, 255, .06);
  --btn2-fg: #FFFFFF;
  --input-bg: rgba(255, 255, 255, .06);
  --input-bd: rgba(255, 255, 255, .22);
  --input-fg: #FFFFFF;
  --footer-bg: #000000;
  --footer-fg: #FFFFFF;
  --scroll-track: #000000;
  --scroll-thumb: var(--amis-naranja);
  --html-bg: #000000;
  --html-fg: #FFFFFF;
  --texto-enlace: #FFFFFF;
  --sombra-ventana: rgba(0, 0, 0, .65);
  --cinta-bg: #000000;
  --cinta-bd: rgba(255, 255, 255, .16);
  --cinta-fg: #FFFFFF;
  --glow-color: rgba(255, 255, 255, .1);
  --pill-accent: #EE5032;
  --accent: #EE5032;
}

html[data-tema="dia"] {
  --font-texto: 'Barlow', 'Source Sans 3', system-ui, sans-serif;
  --font-marca: 'Barlow', 'Maven Pro', system-ui, sans-serif;

  --p1-bg: #FFFFFF;
  --p1-fg: #000000;
  --p1-muted: rgba(0, 0, 0, .62);
  --p1-card: rgba(0, 0, 0, .04);
  --p1-card-bd: rgba(0, 0, 0, .12);
  --p2-bg: #FFFFFF;
  --p2-fg: #000000;
  --p2-muted: rgba(0, 0, 0, .62);
  --p2-card: rgba(0, 0, 0, .04);
  --p2-card-bd: rgba(0, 0, 0, .12);
  --p3-bg: #FFFFFF;
  --p3-fg: #000000;
  --p3-muted: rgba(0, 0, 0, .62);
  --p3-card: rgba(0, 0, 0, .04);
  --p3-card-bd: rgba(0, 0, 0, .12);
  --p4-bg: #FFFFFF;
  --p4-fg: #000000;
  --p4-muted: rgba(0, 0, 0, .62);
  --p4-card: rgba(0, 0, 0, .04);
  --p4-card-bd: rgba(0, 0, 0, .12);
  --p5-bg: #FFFFFF;
  --p5-fg: #000000;
  --p5-muted: rgba(0, 0, 0, .62);
  --p5-card: rgba(0, 0, 0, .04);
  --p5-card-bd: rgba(0, 0, 0, .12);
  --p6-bg: #FFFFFF;
  --p6-fg: #000000;
  --p6-muted: rgba(0, 0, 0, .62);
  --p6-card: rgba(0, 0, 0, .04);
  --p6-card-bd: rgba(0, 0, 0, .12);
  --p7-bg: #FFFFFF;
  --p7-fg: #000000;
  --p7-muted: rgba(0, 0, 0, .62);
  --p7-card: rgba(0, 0, 0, .04);
  --p7-card-bd: rgba(0, 0, 0, .12);

  --header-bg: #FFFFFF;
  --header-fg: #000000;
  --header-bd: rgba(0, 0, 0, .12);
  --nav-hover-bg: rgba(0, 0, 0, .06);
  --nav-hover-fg: #000000;
  --btn2-bd: rgba(0, 0, 0, .25);
  --btn2-bg: rgba(0, 0, 0, .03);
  --btn2-fg: #000000;
  --input-bg: #FFFFFF;
  --input-bd: rgba(0, 0, 0, .25);
  --input-fg: #000000;
  --footer-bg: #FFFFFF;
  --footer-fg: #000000;
  --scroll-track: #FFFFFF;
  --scroll-thumb: var(--amis-naranja);
  --html-bg: #FFFFFF;
  --html-fg: #000000;
  --texto-enlace: #000000;
  --sombra-ventana: rgba(0, 0, 0, .35);
  --cinta-bg: #FFFFFF;
  --cinta-bd: rgba(0, 0, 0, .16);
  --cinta-fg: #000000;
  --glow-color: rgba(0, 0, 0, .08);
  --pill-accent: #ee3232;
  --accent: #ee3232;
}

html {
  background: var(--html-bg);
  scrollbar-color: var(--scroll-thumb, var(--amis-naranja)) var(--scroll-track);
  transition: background .85s ease-in-out;
}

::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-left-color: transparent;
  transition: background .85s ease-in-out;
}

::-webkit-scrollbar-corner {
  background: var(--scroll-track);
  transition: background .85s ease-in-out;
}

body {
  font-family: var(--font-texto);
  background: var(--html-bg);
  transition: background .85s ease-in-out, color .85s ease-in-out;
}

/* Barlow en todos los textos; Barlow Thin (H1) y Regular (H2–H4) en titulares */
p,
span,
a,
button,
input,
textarea,
summary,
label,
.amis-nav-item,
.amis-modalidad,
.amis-btn-secondary,
.amis-faq-summary,
.amis-pill-badge,
.amis-input,
.amis-sede-title {
  font-family: var(--font-texto);
}

h1,
h2,
h3,
h4 {
  font-family: 'Barlow', var(--font-marca) !important;
  font-weight: 100 !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* 7 ventanas sticky superpuestas (v1 atrás → v7 delante) */
.amis-stack {
  position: relative;
}

.amis-screen {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  box-sizing: border-box;
  border-bottom: none !important;
  background: var(--panel-bg);
  color: var(--panel-fg);
  transition: background .85s ease-in-out, color .85s ease-in-out;
  box-shadow: 0 -18px 50px -6px var(--sombra-ventana);
}

#inicio {
  --panel-bg: var(--p1-bg);
  --panel-fg: var(--p1-fg);
  --panel-muted: var(--p1-muted);
  --panel-card: var(--p1-card);
  --panel-card-bd: var(--p1-card-bd);
  z-index: 1;
}

#red {
  --panel-bg: var(--p2-bg);
  --panel-fg: var(--p2-fg);
  --panel-muted: var(--p2-muted);
  --panel-card: var(--p2-card);
  --panel-card-bd: var(--p2-card-bd);
  z-index: 2;
}

#cobertura {
  --panel-bg: var(--p3-bg);
  --panel-fg: var(--p3-fg);
  --panel-muted: var(--p3-muted);
  --panel-card: var(--p3-card);
  --panel-card-bd: var(--p3-card-bd);
  z-index: 3;
}

#incorpora {
  --panel-bg: var(--p6-bg);
  --panel-fg: var(--p6-fg);
  --panel-muted: var(--p6-muted);
  --panel-card: var(--p6-card);
  --panel-card-bd: var(--p6-card-bd);
  z-index: 4;
}

#preguntas {
  --panel-bg: var(--p4-bg);
  --panel-fg: var(--p4-fg);
  --panel-muted: var(--p4-muted);
  --panel-card: var(--p4-card);
  --panel-card-bd: var(--p4-card-bd);
  z-index: 5;
}

#trabaja {
  --panel-bg: var(--p7-bg);
  --panel-fg: var(--p7-fg);
  --panel-muted: var(--p7-muted);
  --panel-card: var(--p7-card);
  --panel-card-bd: var(--p7-card-bd);
  z-index: 6;
}

/* Trabaja: textos centrados verticalmente (fila auto entre dos 1fr)
   y CTA centrado en el espacio inferior (mitad entre textos y bottom) */
#trabaja .amis-trabaja-wrap {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  width: 100%;
}

#trabaja .amis-trabaja-wrap> :first-child {
  grid-row: 2;
}

#trabaja .amis-trabaja-cta {
  grid-row: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 4 beneficios: filete naranja 2px a la izquierda */
#trabaja .amis-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 48px);
  width: 100%;
}

@media (min-width: 1400px) {
  #trabaja .amis-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#trabaja .amis-benefit {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: 4px 0 4px clamp(16px, 1.4vw, 32px);
  border-left: 2px solid var(--amis-naranja);
}

/* Columnas angostas: alineación izquierda para evitar espacios enormes entre palabras */
#trabaja .amis-benefit h3,
#trabaja .amis-benefit p {
  text-align: left !important;
  hyphens: manual;
  -webkit-hyphens: manual;
}

#contacto {
  --panel-bg: var(--p5-bg);
  --panel-fg: var(--p5-fg);
  --panel-muted: var(--p5-muted);
  --panel-card: var(--p5-card);
  --panel-card-bd: var(--p5-card-bd);
  z-index: 7;
}

.amis-screen .amis-pill-badge {
  color: var(--panel-fg);
  transition: color .85s ease-in-out;
}

.amis-screen h1,
.amis-screen h2,
.amis-screen h3 {
  color: var(--panel-fg) !important;
  transition: color .85s ease-in-out;
}

.amis-screen p,
.amis-screen .amis-justified {
  color: var(--panel-muted) !important;
  transition: color .85s ease-in-out;
}

.amis-screen .amis-card {
  background: var(--panel-card) !important;
  border-color: var(--panel-card-bd) !important;
  color: var(--panel-fg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: background .85s ease-in-out, border-color .85s ease-in-out, color .85s ease-in-out, box-shadow .85s ease-in-out;
}

.amis-screen .amis-card p {
  color: var(--panel-muted) !important;
  transition: color .85s ease-in-out;
}

.amis-screen .amis-card .amis-sede-title,
.amis-screen .amis-card h3 {
  color: var(--panel-fg) !important;
  transition: color .85s ease-in-out;
}

.amis-screen .amis-btn-secondary {
  background: var(--btn2-bg) !important;
  border-color: var(--btn2-bd) !important;
  color: var(--btn2-fg) !important;
  transition: background .85s ease-in-out, border-color .85s ease-in-out, color .85s ease-in-out;
}

.amis-screen .amis-btn-secondary:hover {
  background: var(--html-fg) !important;
  border-color: var(--html-fg) !important;
  color: var(--html-bg) !important;
}

.amis-screen .amis-faq-item {
  background: var(--panel-card) !important;
  border-color: var(--panel-card-bd) !important;
  transition: background .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.amis-screen .amis-faq-item:hover,
.amis-screen .amis-faq-item.open {
  background: var(--panel-card) !important;
  border-color: var(--accent) !important;
  transition: background .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.amis-screen .amis-faq-summary {
  color: var(--panel-fg) !important;
  transition: color .85s ease-in-out;
}

.amis-screen .amis-faq-answer-clip>p {
  color: var(--panel-muted) !important;
  transition: color .85s ease-in-out;
}

.amis-screen .amis-input {
  background: var(--input-bg) !important;
  border-color: var(--input-bd) !important;
  color: var(--input-fg) !important;
  transition: background .85s ease-in-out, border-color .85s ease-in-out, color .85s ease-in-out;
}

.amis-screen .amis-input::placeholder {
  color: var(--panel-muted) !important;
  opacity: .75;
}

.amis-screen .amis-sede-card .amis-sede-title {
  color: var(--panel-fg) !important;
  transition: color .85s ease-in-out;
}

/* Píldoras neutras (texto del panel) + punto naranja pulsante */
.amis-screen .amis-pill-badge {
  color: var(--panel-fg) !important;
}

.amis-screen a.amis-card {
  color: var(--panel-fg) !important;
}

.amis-screen a.amis-card span {
  color: var(--panel-fg);
}

/* Cinta al pie del hero (dentro del stack) */
#inicio .amis-cinta {
  margin-top: clamp(24px, 3vh, 40px);
  position: relative;
  z-index: 6;

}

/* Header transparente siempre; letras del nav siempre gris */
.amis-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  z-index: 1000;
}

.amis-nav-item,
.amis-nav-item:hover {
  color: var(--header-fg) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.amis-nav-item.active,
.amis-nav-item[aria-current="page"] {
  color: var(--texto-marca) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.amis-nav-item.active,
.amis-nav-item[aria-current="page"] {
  border-color: var(--header-fg) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.amis-nav-item:hover {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(1.08);
}

.amis-nav-item.active:hover,
.amis-nav-item[aria-current="page"]:hover {
  border-color: var(--header-fg) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(1.08);
}

/* Toggle día/noche con overlay de contraste */
.amis-tema-toggle {
  position: relative;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: transform .4s ease-in-out, background .55s ease-in-out, box-shadow .4s ease-in-out;
  z-index: 1001;
}

.amis-tema-toggle:hover {
  transform: scale(1.08) rotate(12deg);
}

.amis-tema-toggle:active {
  transform: scale(.96);
}

.amis-tema-toggle:focus-visible {
  outline: 2px solid #EE5032;
  outline-offset: 3px;
}

.amis-tema-toggle__overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

.amis-tema-toggle__overlay::after {
  display: none;
}

.amis-tema-toggle img {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  transition: filter .55s ease-in-out, transform .4s ease-in-out;
}

/* Modo noche → icono blanco; modo día → negro */
html[data-tema="noche"] .amis-tema-toggle img {
  filter: invert(1);
}

html[data-tema="dia"] .amis-tema-toggle img {
  filter: none;
}

/* Footer fuera del stack, se desliza encima al final */
.amis-footer {
  position: relative;
  z-index: 8;
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top-color: var(--header-bd);
  transition: background .85s ease-in-out, color .85s ease-in-out, border-color .85s ease-in-out;
}

.amis-footer a {
  color: var(--footer-fg);
}

.amis-footer img[src*="applus"] {
  background: #FFFFFF;
  padding: 4px;
  border-radius: var(--radio-sm);
}

@media (prefers-reduced-motion: reduce) {

  /* sticky del stack NO se desactiva: es layout, no animación */
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Transiciones de tema y nav se mantienen suaves (colores/escala, no parallax) */
  html,
  body,
  .amis-screen,
  .amis-screen *,
  .amis-footer,
  .amis-nav-item,
  .amis-nav-item:hover,
  .amis-nav-item.active,
  .amis-nav-item[aria-current="page"],
  .amis-tema-toggle,
  .amis-tema-toggle img {
    transition-duration: .85s !important;
    transition-timing-function: ease-in-out !important;
  }

  .amis-nav-item,
  .amis-nav-item:hover,
  .amis-nav-item.active,
  .amis-nav-item[aria-current="page"] {
    transition-duration: .3s !important;
    transition-timing-function: ease-in-out !important;
  }

  /* Acordeón FAQ: mantiene apertura/cierre y rotación +→× */
  .amis-faq-item,
  .amis-faq-answer,
  .amis-faq-icon,
  .amis-faq-item.open .amis-faq-answer,
  .amis-faq-item.open .amis-faq-icon {
    transition-duration: .3s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}


/* Pantallas bajas (~768px de alto): se comprime el aire vertical para que las
       ventanas quepan en el stack sin recortar contenido (baseline ya recortaba
       4/5 ventanas a esta altura; con este ajuste se elimina el clip de #incorpora,
       #preguntas, #red y #cobertura) */
@media (max-height: 820px) and (min-width: 861px) {
  .amis-screen {
    padding-block: clamp(32px, 5vh, 48px);
  }

  #incorpora .amis-content-wrap {
    gap: 14px !important;
  }

  #incorpora .amis-card {
    padding: 18px 22px !important;
  }

  #incorpora h2 {
    font-size: clamp(26px, 3vw, 38px) !important;
  }
}

@media (max-width: 860px) {
  .amis-screen {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    box-shadow: none;
  }

  .amis-header-inner {
    gap: var(--e-3);
  }

  .amis-tema-toggle {
    width: 44px;
    height: 44px;
  }

  .amis-tema-toggle img {
    width: 28px;
    height: 28px;
  }

  /* Nav con 8 items: se comprime para que no tape los H2 en pantallas angostas */
  #amis-navbar {
    gap: 4px !important;
  }

  .amis-nav-item {
    padding: 6px 9px !important;
    font-size: 12.5px !important;
  }

  .amis-tema-toggle {
    flex-shrink: 0;
  }

  /* Hero: la rejilla de 3 columnas (título/párrafos/CTA) en móvil apila en 1 columna
         (repeat(3,1fr) no puede comprimirse bajo min-content y desbordaba el viewport
         ampliando el layout viewport del emulador móvil a 658px) */
  .amis-hero-cols {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 32px) !important;
  }

  /* Cinta de clientes (#red): en móvil pasa a flujo normal para no tapar la última tarjeta
         (en pantallas angostas la cinta envuelve en 3 filas y supera la reserva de padding) */
  #red.amis-screen {
    padding-bottom: clamp(32px, 4vw, 56px);
  }

  #red.amis-screen .amis-cinta {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: clamp(24px, 4vw, 40px) !important;
  }

  /* Cinta del hero (#inicio): lleva position:absolute vía style inline y en
         móvil quedaba sobre el botón CTA (cinta 688-844 vs botón 660-712);
         al igual que #red pasa a flujo y se libera la reserva de padding */
  #inicio.amis-screen {
    padding-bottom: clamp(24px, 3vw, 40px);
  }

  #inicio.amis-screen .amis-cinta {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: clamp(24px, 4vw, 40px) !important;
    /* padding:0 del fix de centrado dejaba el texto a 14px; en flujo móvil
       se recupera el gutter de página (gutter-14 de ul + 14 de li = 24px
       @390, exactamente igual que el resto del contenido) */
    padding-inline: calc(clamp(24px, 4.5vw, 80px) - 14px) !important;
  }

  /* En móvil todas las secciones de 2 columnas pasan a 1 columna */
  #red .amis-content-wrap,
  #cobertura .amis-content-wrap,
  #incorpora .amis-content-wrap,
  #preguntas .amis-content-wrap,
  #trabaja .amis-trabaja-wrap>.amis-justified,
  #contacto .amis-content-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 40px) !important;
  }

  #trabaja .amis-benefits {
    grid-template-columns: 1fr !important;
  }
}

/* Tira de modalidades (#incorpora): las pistas fijas repeat(6,150px)=900px
   no caben bajo 960px y ampliaban el documento (scroll horizontal); pistas
   fluidas + corte de palabras garantizan docWidth == ancho de ventana */
@media (max-width: 960px) {
  .amis-modalidades {
    box-sizing: border-box;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    column-gap: 10px;
    row-gap: 14px;
    padding-inline: 8px;
  }

  .amis-modalidades div {
    overflow-wrap: break-word;
  }

  .amis-beneficio {
    height: auto !important;
  }
}

/* Beneficios (#incorpora): 3 columnas fijas por min-content desbordaban
   el documento bajo 640px (docW 611 > vw 390); pasan a una columna */
@media (max-width: 640px) {
  .amis-beneficios {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
       Botón primario AMIS — equivalente estático del componente Boton (variante
       primaria, tamaño lg) del design system, antes hidratado por _ds_bundle.js
       ========================================================================== */
.amis-btn {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: var(--texto-md);
  line-height: 1.2;
  padding: clamp(12px, 0.65vw, 24px) clamp(24px, 1.4vw, 52px);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  white-space: nowrap;
  text-decoration: none;
  background: var(--html-fg);
  color: var(--html-bg);
  transition: var(--transicion-color), border-color .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--dur-rapida) var(--curva-estandar), transform var(--dur-rapida) var(--curva-estandar);
}

.amis-btn:hover {
  background: var(--html-bg);
  color: var(--html-fg);
  border-color: var(--html-fg);
  text-decoration: none;
}

.amis-btn:active {
  transform: translateY(1px);
}

.amis-btn-full {
  width: auto;
}

[hidden] {
  display: none !important;
}

/* El header es fixed: al saltar por ancla la sección queda bajo él y tapa el H2 */
@media (max-width: 860px) {
  .amis-screen {
    scroll-margin-top: 90px;
  }
}

/* Muy angosto: se oculta el enlace del blog para liberar espacio en el nav */
@media (max-width: 600px) {
  a.amis-nav-item[href="blog/"] {
    display: none;
  }

  /* El logo pasa a su propia fila y el nav ocupa el ancho completo: con 7 items
           side-by-side el nav medía solo 212px (4 filas, header de 196px) y tapaba
           los H2 al hacer scroll; en fila completa son 2 filas (~110px de header) */
  .amis-header-inner {
    flex-wrap: wrap;
  }

  #amis-navbar {
    width: 100%;
    justify-content: center;
  }

  /* 8 items en 342px: se estrecha letra/padding para que quepan en 2 filas
         (3 filas → header 176px tapaba el kicker del hero a ~140px) */
  .amis-nav-item {
    padding: 5px 7px !important;
    font-size: 12px !important;
    letter-spacing: .05em !important;
  }

  /* Marca compacta: con word 192 + logo 96 la fila de marca medía ~96px y el
         header fijo llegaba a 234px, solapando el h1 del hero (top 180px) */
  .amis-hdr-brand {
    gap: 0 16px !important;
  }

  .amis-hdr-word {
    width: 132px !important;
    height: 52px !important;
    margin-left: -14px !important;
  }

  .amis-hdr-logo {
    height: 52px !important;
    width: 52px !important;
    margin-right: 16px !important;
  }

  #amis-navbar {
    margin-top: 14px !important;
  }

  /* Header (marca 52px + nav 2 filas) mide ~170px: el hero arranca con 165px
         de padding para que el h1 (offset +33) quede por debajo del header */
  #inicio.amis-screen {
    padding-top: 165px;
  }

  /* Header fijo ~190px: el salto por ancla debe dejar el H2 debajo */
  .amis-screen {
    scroll-margin-top: 200px;
  }
}

/* Banda de métricas tipo ticker: scroll continuo derecha → izquierda en bucle.
   La pista lleva 6 bloques de los 5 textos (1º visible, 5 copias aria-hidden)
   y la animación traduce -50% = 3 bloques exactos → el reinicio es
   imperceptible. La mitad de la pista (~4830px) SIEMPRE cubre el viewport
   (hasta 4K), por eso no puede quedar un hueco a la derecha al final del
   ciclo. Los 96s mantienen la velocidad original (~50px/s = 4830px/96s). */
.amis-ticker {
  width: auto;
  /* Rompe el padding horizontal de .amis-screen para llegar al borde real
     de la ventana (mismo clamp que el padding del contenedor) */
  margin-inline: calc(-1 * var(--canal-lateral));
  overflow: hidden;
  background: var(--panel-bg, #000000);
  transition: background .85s ease-in-out;
}

html[data-tema="dia"] .amis-ticker {
  background: #FFFFFF;
}

.amis-ticker__track {
  display: flex;
  width: max-content;
  animation: amis-ticker-scroll 96s linear infinite;
}

.amis-ticker__track p {
  margin: 0;
  padding: clamp(11px, 0.7vh, 22px) clamp(24px, 2.5vw, 72px);
  font-size: clamp(13px, 0.75vw, 27px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--panel-fg) !important;
  white-space: nowrap;
}

html[data-tema="dia"] .amis-ticker__track p {
  color: #000000 !important;
}

/* Iconos de teléfono y correo en #contacto: blancos en modo noche, negros en modo día */
#contacto a img[src*="llamada"],
#contacto a img[src*="correo"] {
  filter: brightness(0) invert(1);
  transition: filter .55s ease-in-out;
}

html[data-tema="dia"] #contacto a img[src*="llamada"],
html[data-tema="dia"] #contacto a img[src*="correo"] {
  filter: brightness(0) !important;
}

@keyframes amis-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* El ticker SIEMPRE se mueve aunque el sistema tenga animaciones
   desactivadas (prefers-reduced-motion). Se anula el override global
   de duración/iteración y se ofrece pausa al pasar el cursor. */
.amis-ticker__track {
  animation-duration: 96s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  animation-name: amis-ticker-scroll !important;
}

.amis-ticker:hover .amis-ticker__track {
  animation-play-state: paused;
}

/* ===== Splash de inicio: radiografía monumental "AMIS" → fade + desenfoque =====
   Timeline FULL: 0ms negro+blur30 → encendido de luz posterior y barrido
   radiográfico sobre "AMIS" (2.8s) → 3050ms fade-out + fade negro 1.2s
   + unblur 1.4s → 4450ms revelado.
   Los !important anulan el override global de prefers-reduced-motion. */
.amis-splash-blur {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  animation: amis-splash-unblur 1.4s ease-in 1s forwards;
  animation-duration: 1.4s !important;
  animation-delay: 3.05s !important;
}

.amis-splash {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: #000;
  pointer-events: none;
  animation: amis-splash-fade 1.2s ease-out 1s forwards;
  animation-duration: 1.2s !important;
  animation-delay: 3.05s !important;
}

@keyframes amis-splash-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes amis-splash-unblur {
  from {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }

  to {
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }
}

.amis-splash-logo {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  animation: amis-logo-fade 3.55s linear 1 forwards;
  animation-duration: 3.55s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

@keyframes amis-logo-fade {

  0%,
  6% {
    opacity: 0;
    animation-timing-function: ease-out;
  }

  16%,
  85.9% {
    opacity: 1;
    animation-timing-function: ease-in;
  }

  100% {
    opacity: 0;
  }
}

.amis-splash-word {
  width: clamp(280px, 74vw, 1080px);
  height: auto;
  overflow: visible;
  display: block;
}

/* Luz posterior del negatoscopio y dispersión (halo frío detrás de la letra) */
.amis-splash-word .sp-xr-ambient {
  fill: #cfe2f6;
  opacity: 0;
  animation: amis-sp-ambient 2.85s ease-out .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-scatter {
  fill: #dce8f6;
  opacity: 0;
  animation: amis-sp-scatter 2.85s ease-out .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-edge {
  fill: #dce8f6;
  opacity: 0;
  animation: amis-sp-edge 2.85s ease-out .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

/* Sustrato translúcido de la letra */
.amis-splash-word .sp-xr-core {
  fill: url(#sp-xr-core-grad);
}

/* Espesor medular translúcido y cortical interna recortados al glifo */
.amis-splash-word .sp-xr-medulla {
  fill: none;
  stroke: #b8cee6;
  stroke-width: 32;
  opacity: 0;
  animation: amis-sp-medulla 2.85s ease-out .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-cortex {
  fill: none;
  stroke: #c9d8ea;
  stroke-width: 3.2;
  opacity: 0;
  animation: amis-sp-cortex 2.85s ease-out .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-grain {
  fill: #e4edf7;
  opacity: .24;
}

/* Transiluminación activa al paso del haz */
.amis-splash-word .sp-xr-exposed {
  opacity: 0;
  animation: amis-sp-exposed 2.85s linear .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-bone {
  fill: #f2f7fc;
}

.amis-splash-word .sp-xr-trabecula {
  fill: #030405;
  opacity: .38;
}

.amis-splash-word .sp-xr-flash {
  fill: #f2f7fc;
  opacity: 0;
  animation: amis-sp-flash 2.85s linear .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-beam {
  opacity: 0;
  animation: amis-sp-beam 2.85s linear .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.amis-splash-word .sp-xr-band {
  animation: amis-sp-band 2.85s linear .15s 1 forwards;
  animation-duration: 2.85s !important;
  animation-delay: .15s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

@keyframes amis-sp-ambient {
  0% {
    opacity: 0;
  }

  8% {
    opacity: .28;
  }

  12% {
    opacity: .12;
  }

  24% {
    opacity: .36;
  }

  62% {
    opacity: .68;
  }

  82%,
  100% {
    opacity: .42;
  }
}

@keyframes amis-sp-scatter {
  0% {
    opacity: 0;
  }

  18% {
    opacity: .38;
  }

  56% {
    opacity: .52;
  }

  64% {
    opacity: .95;
  }

  84%,
  100% {
    opacity: .55;
  }
}

@keyframes amis-sp-edge {
  0% {
    opacity: 0;
  }

  16% {
    opacity: .45;
  }

  58% {
    opacity: .88;
  }

  64% {
    opacity: 1;
  }

  84%,
  100% {
    opacity: .9;
  }
}

@keyframes amis-sp-medulla {

  0%,
  10% {
    opacity: 0;
  }

  52% {
    opacity: .34;
  }

  64% {
    opacity: .62;
  }

  84%,
  100% {
    opacity: .38;
  }
}

@keyframes amis-sp-cortex {

  0%,
  8% {
    opacity: 0;
  }

  48% {
    opacity: .52;
  }

  64% {
    opacity: .88;
  }

  84%,
  100% {
    opacity: .62;
  }
}

@keyframes amis-sp-beam {
  0% {
    transform: translateX(-440px);
    opacity: 0;
    animation-timing-function: ease-out;
  }

  8% {
    transform: translateX(-380px);
    opacity: 1;
    animation-timing-function: cubic-bezier(.5, .05, .35, 1);
  }

  56% {
    transform: translateX(1580px);
    opacity: 1;
    animation-timing-function: ease-in;
  }

  62%,
  100% {
    transform: translateX(1660px);
    opacity: 0;
  }
}

@keyframes amis-sp-band {
  0% {
    transform: translateX(-440px);
    animation-timing-function: ease-out;
  }

  8% {
    transform: translateX(-380px);
    animation-timing-function: cubic-bezier(.5, .05, .35, 1);
  }

  56% {
    transform: translateX(1580px);
    animation-timing-function: ease-in;
  }

  62%,
  100% {
    transform: translateX(1660px);
  }
}

@keyframes amis-sp-exposed {
  0% {
    opacity: 0;
  }

  6%,
  58% {
    opacity: 1;
  }

  74%,
  100% {
    opacity: 0;
  }
}

@keyframes amis-sp-flash {

  0%,
  56% {
    opacity: 0;
    animation-timing-function: cubic-bezier(.3, 0, .2, 1);
  }

  64% {
    opacity: .78;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }

  88%,
  100% {
    opacity: 0;
  }
}

/* ---- Recargas de la misma sesión: solo negro 0.5s + fade/unblur ---- */
html.amis-splash-short .amis-splash-logo {
  display: none !important;
}

html.amis-splash-short .amis-splash,
html.amis-splash-short .amis-splash-blur {
  animation-delay: .5s !important;
}

/* Nota: el trazado del splash SIEMPRE se anima, incluso con
   prefers-reduced-motion (sus animation-duration llevan !important con
   especificidad de clase, ganando a la regla global * reduced-motion),
   igual que el isotipo del header. No congelar aquí. */

/* =========================================================================
   Isotipo del header — Suite 01 "Resonancia Magnética" (amis-isotype_2)
   Estado base estático; .is-playing → UNA pasada de 4.2s y vuelve a reposo.
   Disparado por JS en main.js (hover) y en el snippet del blog.
   ========================================================================= */
.amis-hdr-logo {
  display: block;

  overflow: visible;
}

.amis-hdr-logo .se-hdr-loop-grey,
.amis-hdr-logo .se-hdr-loop-orange {
  transform-origin: 641px 641px;
}

.amis-hdr-logo .se-hdr-wave {
  fill: none;
  stroke: var(--amis-naranja);
  stroke-width: 6;
  opacity: 0;
  transform-origin: 634.6px 953.6px;
}

.amis-hdr-logo .se-hdr-dot {
  transform-origin: 634.6px 953.6px;
}

/* multiply solo en día: sobre fondo oscuro (noche) dejaría el bucle invisible */
html[data-tema="dia"] .amis-hdr-logo .se-hdr-loop-orange {
  mix-blend-mode: multiply;
}

/* Duraciones con !important para no ser anuladas por la regla global
   de prefers-reduced-motion (* animation-duration:.01ms !important). */
.amis-hdr-logo.is-playing .se-hdr-loop-grey {
  animation: amis-hdr-loop-grey 4.2s cubic-bezier(0.4, 0, 0.2, 1) 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-logo.is-playing .se-hdr-loop-orange {
  animation: amis-hdr-loop-orange 4.2s cubic-bezier(0.4, 0, 0.2, 1) 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-logo.is-playing .se-hdr-wave {
  animation: amis-hdr-wave 4.2s cubic-bezier(0.1, 0.8, 0.3, 1) 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-logo.is-playing .se-hdr-wave-2 {
  animation-delay: .25s !important;
}

.amis-hdr-logo.is-playing .se-hdr-dot {
  animation: amis-hdr-dot 4.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
  animation-duration: 4.2s !important;
}

@keyframes amis-hdr-loop-grey {

  0%,
  100% {
    transform: rotate(-4deg) scale(0.97);
  }

  32% {
    transform: rotate(5deg) scale(1.02);
  }

  55% {
    transform: rotate(-1deg) scale(1.01);
    filter: drop-shadow(0 0 16px rgba(187, 190, 191, 0.6));
  }

  68%,
  88% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }
}

@keyframes amis-hdr-loop-orange {

  0%,
  100% {
    transform: rotate(4deg) scale(1.03);
  }

  32% {
    transform: rotate(-5deg) scale(0.97);
  }

  55% {
    transform: rotate(1deg) scale(1.01);
    filter: drop-shadow(0 0 24px rgba(238, 50, 50, 0.8));
  }

  68%,
  88% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }
}

@keyframes amis-hdr-wave {

  0%,
  48% {
    r: 91.6px;
    opacity: 0;
    stroke-width: 14px;
  }

  52% {
    opacity: 0.95;
    stroke-width: 8px;
  }

  75% {
    r: 560px;
    opacity: 0;
    stroke-width: 1.5px;
  }

  100% {
    opacity: 0;
  }
}

@keyframes amis-hdr-dot {

  0%,
  48% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }

  55% {
    transform: scale(1.3);
    filter: drop-shadow(0 0 25px var(--amis-naranja));
  }

  68%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }
}

/* =========================================================================
   Wordmark "AMIS" del header — efecto Radiografía (SVG por capas)
   Noche: placa oscura contra negatoscopio (halo frío detrás, cortical clara).
   Día:   placa INVERTIDA (como "invert" del visor DICOM): núcleo claro,
          halo y cortical oscuros → mismo lenguaje, legible sobre blanco.
   Timeline acoplada al isotipo (misma pasada de 4.2s, .is-playing por JS):
     0–7%    el haz de escaneo (rojo marca) aparece a la izquierda
     7–45%   barre AMIS; detrás queda la "exposición" (hueso) que decae
     45–50%  el haz sale hacia el isotipo  → 48% el punto emite la onda
     50–55%  flash de exposición de toda la palabra (pico = pico del punto)
     55–85%  persistencia de fósforo → reposo
   ========================================================================= */
.amis-hdr-word {
  /* noche (por defecto) */
  --xr-core: #030405;
  --xr-halo: #dce8f6;
  --xr-cortex: #c9d8ea;
  --xr-bone: #f2f7fc;
  --xr-grain: #e4edf7;
  --xr-scatter-op: .5;
  --xr-scatter-peak: 1;
  --xr-edge-op: .9;

  display: block;
  width: 192px;
  height: 76px;
  margin-left: -20px;
  /* el viewBox reserva 20u para el halo: compensa el desplazamiento */
  overflow: visible;
  cursor: pointer;
}

html[data-tema="dia"] .amis-hdr-word {
  --xr-core: #ffffff;
  --xr-halo: #0d1117;
  --xr-cortex: #1b222b;
  --xr-bone: #0a0d11;
  --xr-grain: #27303a;
  --xr-scatter-op: .3;
  --xr-scatter-peak: .62;
  --xr-edge-op: .85;
}

.amis-hdr-word use,
.amis-hdr-word rect {
  transition: fill .5s ease, stroke .5s ease;
}

.amis-hdr-word .xr-scatter {
  fill: var(--xr-halo);
  opacity: var(--xr-scatter-op);
}

.amis-hdr-word .xr-edge {
  fill: var(--xr-halo);
  opacity: var(--xr-edge-op);
}

.amis-hdr-word .xr-core {
  fill: var(--xr-core);
}

/* trazo recortado al glifo → solo la mitad interior: "hueso cortical" */
.amis-hdr-word .xr-cortex {
  fill: none;
  stroke: var(--xr-cortex);
  stroke-width: 1.2;
  opacity: .55;
}

.amis-hdr-word .xr-grain {
  fill: var(--xr-grain);
  opacity: .22;
}

.amis-hdr-word .xr-exposed {
  opacity: 0;
}

.amis-hdr-word .xr-bone {
  fill: var(--xr-bone);
}

.amis-hdr-word .xr-trabecula {
  fill: var(--xr-core);
  opacity: .35;
}

.amis-hdr-word .xr-flash {
  fill: var(--xr-bone);
  opacity: 0;
}

.amis-hdr-word .xr-beam {
  opacity: 0;
}

.amis-hdr-word #amisxr-beam-grad stop {
  stop-color: var(--amis-naranja);
}

/* Duraciones con !important: mismo criterio que el isotipo (ignora el
   override global de prefers-reduced-motion para mantener la sincronía). */
.amis-hdr-word.is-playing .xr-beam {
  animation: amis-xr-beam 4.2s linear 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-word.is-playing .xr-band {
  animation: amis-xr-band 4.2s linear 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-word.is-playing .xr-exposed {
  animation: amis-xr-exposed 4.2s linear 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-word.is-playing .xr-flash {
  animation: amis-xr-flash 4.2s linear 1;
  animation-duration: 4.2s !important;
}

.amis-hdr-word.is-playing .xr-scatter {
  animation: amis-xr-scatter 4.2s linear 1;
  animation-duration: 4.2s !important;
}

/* haz y banda comparten trayectoria exacta (la banda es la estela del haz) */
@keyframes amis-xr-beam {
  0% {
    transform: translateX(6px);
    opacity: 0;
    animation-timing-function: ease-out;
  }

  7% {
    transform: translateX(10px);
    opacity: 1;
    animation-timing-function: cubic-bezier(.55, .05, .35, 1);
  }

  45% {
    transform: translateX(180px);
    opacity: 1;
    animation-timing-function: ease-in;
  }

  50%,
  100% {
    transform: translateX(192px);
    opacity: 0;
  }
}

@keyframes amis-xr-band {
  0% {
    transform: translateX(6px);
    animation-timing-function: ease-out;
  }

  7% {
    transform: translateX(10px);
    animation-timing-function: cubic-bezier(.55, .05, .35, 1);
  }

  45% {
    transform: translateX(180px);
    animation-timing-function: ease-in;
  }

  50%,
  100% {
    transform: translateX(192px);
  }
}

@keyframes amis-xr-exposed {
  0% {
    opacity: 0;
  }

  6%,
  48% {
    opacity: 1;
  }

  64%,
  100% {
    opacity: 0;
  }
}

@keyframes amis-xr-flash {

  0%,
  48% {
    opacity: 0;
    animation-timing-function: cubic-bezier(.3, 0, .2, 1);
  }

  54% {
    opacity: .9;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }

  85%,
  100% {
    opacity: 0;
  }
}

@keyframes amis-xr-scatter {

  0%,
  46% {
    opacity: var(--xr-scatter-op);
  }

  54% {
    opacity: var(--xr-scatter-peak);
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  }

  85%,
  100% {
    opacity: var(--xr-scatter-op);
  }
}

/* Skull decorativa del hero (#inicio): capa de fondo a sangre que cubre
   toda el área de la ventana, por debajo del contenido.
   Día → assets/skull_blanca.webp; noche → assets/skull_negra.webp */
.amis-angio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

html[data-tema="noche"] .amis-angio {
  content: url("assets/skull_negra.webp");
}

#inicio .amis-content-wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .amis-angio {
    display: none;
  }
}

/* ============================================================================
   PANTALLAS GRANDES (>=1921px): escalado fluido hacia 2560 / 4K (3840x2160).
   ========================================================================== */
@media (min-width: 1921px) {
  :root {
    --canal-lateral: clamp(80px, 4.5vw, 180px);
    --ancho-wrap: 100%;
    --cols-modalidades: minmax(150px, 1fr);
    --cols-faq: minmax(0, 1fr);

    /* Escalado fluido de tokens tipográficos para monitores QHD / 4K */
    --texto-2xs: clamp(12px, 0.58vw, 22px);
    --texto-xs: clamp(13px, 0.65vw, 25px);
    --texto-sm: clamp(15px, 0.76vw, 29px);
    --texto-base: clamp(17px, 0.86vw, 33px);
    --texto-md: clamp(19px, 0.96vw, 37px);
    --texto-lg: clamp(22px, 1.15vw, 44px);
    --texto-xl: clamp(28px, 1.4vw, 54px);
    --texto-2xl: clamp(34px, 1.75vw, 66px);
    --texto-3xl: clamp(42px, 2.15vw, 82px);
    --texto-4xl: clamp(54px, 2.75vw, 104px);
    --texto-5xl: clamp(70px, 3.45vw, 132px);

    /* Escalado fluido de espaciados y barras a 4K */
    --e-2: clamp(8px, 0.45vw, 16px);
    --e-3: clamp(12px, 0.65vw, 24px);
    --e-4: clamp(16px, 0.85vw, 32px);
    --e-6: clamp(24px, 1.25vw, 48px);
    --e-8: clamp(32px, 1.65vw, 64px);
    --alto-barra: clamp(84px, 5vh, 140px);
    --alto-cinta: clamp(68px, 4.5vh, 116px);
  }

  /* ── Header edge-to-edge: logo al gutter izq., links repartidos, toggle der. */
  .amis-header-inner {
    padding-inline: var(--canal-lateral);
    justify-content: flex-start;
  }

  #amis-navbar {
    width: 100%;
    justify-content: space-between;
    gap: clamp(24px, 1.8vw, 48px);
  }

  .amis-nav-item {
    font-size: clamp(16px, 0.72vw, 27px);
    padding: clamp(7px, 0.42vw, 15px) clamp(20px, 1.1vw, 40px);
  }

  .amis-tema-toggle {
    width: clamp(60px, 2.5vw, 92px);
    height: clamp(60px, 2.5vw, 92px);
  }

  .amis-tema-toggle img {
    width: clamp(40px, 1.65vw, 62px);
    height: clamp(40px, 1.65vw, 62px);
  }

  .amis-hdr-word {
    width: clamp(220px, 8.8vw, 336px);
    height: clamp(86px, 3.45vw, 132px);
  }

  .amis-hdr-logo {
    width: clamp(108px, 4.3vw, 164px) !important;
    height: clamp(108px, 4.3vw, 164px) !important;
  }

  /* ── Franja de servicios del hero: abarca todo el ancho del contenedor y
        su texto queda alineado con el borde del contenido del hero */
  #inicio .amis-cinta {
    max-width: 100% !important;
    padding-inline: var(--canal-lateral) !important;
  }

  .amis-servicio {
    flex: 1 1 0 !important;
    max-width: 18.5% !important;
    padding: var(--e-4) clamp(8px, 0.8vw, 24px);
  }

  .amis-servicio b {
    font-size: clamp(14px, 0.75vw, 28px);
  }

  .amis-servicio span {
    font-size: clamp(15px, 0.78vw, 29px);
    max-width: 100%;
  }

  /* ── #red: cinta inferior de modalidades escalada para 4K */
  .amis-modalidad {
    font-size: var(--texto-sm);
    padding: var(--e-4);
  }

  /* ── #incorpora: modalidades a todo el ancho respetando el gutter */
  .amis-modalidades {
    padding-inline: var(--canal-lateral);
    box-sizing: border-box;
    gap: clamp(24px, 2.5vw, 64px) !important;
  }

  /* ── #trabaja: 4 columnas fluidas que aprovechan todo el ancho */
  #trabaja .amis-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ── Textos >1920: alineados a la izquierda sin cortes silábicos forzados */
  p,
  .amis-justified,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-align: left !important;
    hyphens: none;
  }

  /* Sin tope artificial de 680px: cada bloque ocupa el 100% de su columna */
  .amis-content-wrap h1,
  .amis-content-wrap h2,
  .amis-content-wrap h3,
  .amis-content-wrap .amis-pill-badge,
  .amis-content-wrap p {
    max-width: 100%;
  }

  /* Splash monumental en >1080p / 4K: escala el SVG (texto + barra de luz + filtros)
     proporcionalmente al viewport (56.25vw = 1080px en 1920 y 2160px en 3840 4K,
     con lo que las letras AMIS abarcan el 90% del ancho de pantalla en ambas resoluciones) */
  .amis-splash-word {
    width: 56.25vw;
  }
}

/* ── Gama intermedia (861–1919px): la marca (wordmark+isotipo) sumada a los 8
   links no cabe en una sola fila y forzaba flex-wrap (2 filas) con el wordmark
   pegado al borde izquierdo (gutter 0). Se comprime la marca y el nav para que
   a partir de ~1250px quepan en 1 fila; por debajo envuelve en 2 filas ordenadas.
   No afecta ≥1920 (bloque edge-to-edge) ni ≤860 (móvil, sin cambios). */
@media (min-width: 861px) and (max-width: 1919px) {
  .amis-header-inner {
    padding-inline: clamp(12px, 2vw, 40px);
  }

  .amis-hdr-brand {
    gap: 0 20px !important;
  }

  .amis-hdr-word {
    width: 150px;
    height: 59px;
    /* el viewBox reserva 20/192 del halo: 15.6px ≈ 16px */
    margin-left: -16px;
  }

  .amis-hdr-logo {
    height: 72px !important;
    width: 72px !important;
    margin-right: 14px !important;
  }

  #amis-navbar {
    gap: 10px !important;
  }

  .amis-nav-item {
    padding: 5px 12px !important;
    font-size: 13px !important;
  }
}