/* =====================================================================
   Aunexto · web corporativa
   Réplica en HTML/CSS del diseño de Framer.
   Puntos de corte (los mismos que en Framer):
     escritorio ≥ 1200px · tablet 810–1199px · móvil ≤ 809px
   ===================================================================== */

:root {
  /* Marca (guía de marca) */
  --cyan: #22D3EE;
  --blue: #1D4ED8;
  --navy: #1E3A8A;

  /* Interfaz: valores tomados del diseño de Framer */
  --ink: #3D3D3D;          /* títulos y texto principal */
  --muted: #6B6B6B;        /* texto secundario (oscurecido para mejorar la lectura) */
  --muted-strong: #5B5B5B; /* texto secundario con más contraste */
  --footer-bg: #EAF2FE;   /* fondo plano del pie (azul claro de marca) */
  --footer-text: #3B4A6B; /* gris azulado oscuro del pie */
  --sec-gap: clamp(72px, 8vw, 136px); /* separación vertical entre secciones */
  --icon: #384360;         /* iconos de las tarjetas */
  --surface: #FAFAFA;      /* tarjetas */
  --section: #F5F5F5;      /* fondo de "Cómo trabajamos" */
  --hero-bg: #F9F9F9;
  --white: #FFFFFF;

  --grad-btn: linear-gradient(100deg, #22D3EE 0%, #1D4ED8 100%);
  --grad-band: linear-gradient(0deg, #22D3EE 0%, #1D4ED8 100%);

  --nav-h: 108px;          /* altura de la cabecera */

  /* Animaciones: duración común (entre 300 y 350 ms) y curva suave */
  --t: 340ms;
  --t-ui: 300ms;           /* selector de etapas */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Anchos de la página: el contenido ocupa hasta --wide y deja un margen lateral que crece con la pantalla */
  --wide: 1680px;
  --gutter: clamp(24px, 5vw, 96px);
  --gl: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gr: max(var(--gutter), env(safe-area-inset-right, 0px));

  /* Flecha de los botones */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (max-width: 809px) {
  :root { --gutter: 16px; --nav-h: 96px; }
}

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

html {
  scroll-behavior: smooth; /* desplazamiento suave al pulsar los enlaces del menú */
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); /* deja libre la cabecera fija */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

h1, h2, h3, h4, p, ul { margin: 0; }
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 50;
  padding: 10px 16px; border-radius: 8px;
  background: var(--navy); color: #fff;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Banda que tapa la zona segura superior en móviles con muesca */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 30;
  height: env(safe-area-inset-top, 0px); background: var(--white);
}

.material-icons { font-size: 32px; color: var(--icon); width: 32px; height: 32px; overflow: hidden; white-space: nowrap; }

/* ---------- Botones (píldora con degradado y flecha) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 30px; border-radius: 999px;
  font-size: 20px; font-weight: 500; line-height: 1; color: #fff; white-space: nowrap;
  border: 0; cursor: pointer; font-family: inherit;
  box-shadow: 0 14px 28px -12px rgba(29, 78, 216, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn::after {
  content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .2s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(29, 78, 216, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:hover::after { transform: translateX(4px); }
.btn--gradient { background: var(--grad-btn); }
.btn--white { background: #fff; color: var(--navy); box-shadow: 0 14px 28px -12px rgba(30, 58, 138, .55); }
.btn--lg { height: 62px; padding: 0 38px; font-size: 22px; }

/* ---------- Cabecera fija ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  /* Blanco sólido casi hasta el borde: el logo nunca queda sobre la zona de degradado */
  background: linear-gradient(180deg, #fff 0%, #fff 86%, rgba(255, 255, 255, 0) 100%);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: calc(var(--wide) + var(--gl) + var(--gr)); height: var(--nav-h);
  margin: 0 auto; padding: 0 var(--gr) 16px var(--gl);
}

.brand { display: flex; flex: none; }
.brand img { height: 64px; width: auto; }

.nav__list { display: flex; align-items: center; gap: 14px; }
.nav__link {
  /* data-label reserva el ancho en negrita para que el texto no "salte" al pasar el ratón */
  display: inline-grid; align-content: center; justify-items: center;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 20px; font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* Seis enlaces + botón: se compacta por debajo de 1700 px (y pasa a hamburguesa por debajo de 1100 px) */
@media (max-width: 1699px) {
  .nav__list { gap: 4px; }
  .nav__link { padding: 0 14px; font-size: 18px; }
}
@media (max-width: 1299px) {
  .nav__list { gap: 2px; }
  .nav__link { padding: 0 10px; font-size: 17px; }
  .site-header__inner { gap: 12px; }
}
.nav__link::after {
  content: attr(data-label); height: 0; overflow: hidden; visibility: hidden;
  font-weight: 700; pointer-events: none;
}
/* Burbuja azul claro con degradado al pasar el ratón / enfocar con teclado */
.nav__link:hover, .nav__link:focus-visible {
  color: var(--navy); font-weight: 700;
  background: linear-gradient(135deg, rgba(34, 211, 238, .22) 0%, rgba(29, 78, 216, .12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 24px -10px rgba(29, 78, 216, .4);
}

/* Botón de hamburguesa (solo móvil) */
.nav__toggle {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.nav__toggle .bar {
  position: absolute; left: 10px; width: 24px; height: 2px; border-radius: 10px;
  background: #999; transition: transform .25s ease, opacity .25s ease;
}
.nav__toggle .bar--top { top: 13px; }
.nav__toggle .bar--mid { top: 21px; }
.nav__toggle .bar--bot { top: 29px; }
.site-header.is-open .bar--top { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .bar--mid { opacity: 0; }
.site-header.is-open .bar--bot { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav__toggle { display: block; margin-right: -10px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: 12px var(--gr) 20px var(--gl); background: #fff;
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .28);
  }
  .site-header.is-open { background: #fff; }
  .site-header.is-open .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { display: flex; align-items: center; justify-content: flex-start; height: 52px; }
  .nav__link::after { display: none; }
  .nav__list .btn { width: 100%; margin-top: 8px; }
}

/* ---------- Hero (ancho completo) ---------- */
.hero { padding: 0; }

.hero__card { position: relative; overflow: hidden; background: var(--hero-bg); }

.hero__panel {
  position: relative; z-index: 1; width: 62%;
  display: flex; flex-direction: column; gap: 40px;
  padding-block: clamp(56px, 5vw, 104px);
  /* El texto se alinea con el logo de la cabecera */
  padding-left: max(var(--gl), calc((100% - var(--wide)) / 2));
  padding-right: 48px;
  background: linear-gradient(90deg, #F9F9F9 70%, rgba(249, 249, 249, 0) 100%);
}
.hero__copy { display: flex; flex-direction: column; gap: clamp(24px, 2vw, 36px); max-width: clamp(560px, 44vw, 880px); }
.hero__title { font-size: clamp(46px, 3.4vw, 68px); font-weight: 700; }
.hero__lead { font-size: clamp(20px, 1.3vw, 26px); font-weight: 500; line-height: 1.6; color: var(--muted); }

/* "IA" con el degradado de los botones */
.grad-text {
  background: var(--grad-btn);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__note { display: flex; align-items: center; gap: 8px; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.4; color: #6B6B6B; }
.hero__note .material-icons { flex: none; width: 22px; height: 22px; font-size: 22px; color: var(--blue); }

/* Imagen: sale por la derecha y lleva un ligero tono azulado */
.hero__art {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 0;
  width: clamp(943px, 54vw, 1500px); max-width: none; height: 100%;
  object-fit: cover; object-position: right center; /* rellena el alto del hero en cualquier pantalla */
  filter: hue-rotate(12deg) saturate(1.18) brightness(.99);
}

/* Entrada al cargar: texto desde la izquierda, imagen desde la derecha (--t ≈ 340 ms).
   Solo se oculta si hay JS (clase "js"); script.js añade "hero--play" cuando el hero
   está realmente a la vista, así la animación no se pierde si la pestaña carga en segundo plano. */
@keyframes hero-in-left  { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes hero-in-right { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
.js .hero__copy, .js .hero__actions, .js .hero__art { opacity: 0; }
.hero--play .hero__copy    { animation: hero-in-left var(--t) var(--ease) 0ms both; }
.hero--play .hero__actions { animation: hero-in-left var(--t) var(--ease) 90ms both; }
.hero--play .hero__art     { animation: hero-in-right var(--t) var(--ease) 0ms both; }

@media (max-width: 1199px) {
  .hero__panel {
    width: 75%; padding-left: var(--gl);
    background: linear-gradient(90deg, #F9F9F9 80.18%, rgba(249, 249, 249, 0) 100%);
  }
  .hero__title { font-size: 42px; }
  .hero__lead { font-size: 20px; }
  .hero__copy { max-width: 620px; }
  .hero__art { width: 943px; }
}
@media (max-width: 809px) {
  .hero__panel {
    z-index: 2; width: 100%; padding: 32px var(--gr) 40px var(--gl);
    background: linear-gradient(177deg, #F9F9F9 65%, rgba(249, 249, 249, 0) 100%);
  }
  .hero__title { font-size: 34px; }
  .hero__lead { font-size: 18px; }
  .hero__copy { max-width: none; }
  .btn--lg { height: 56px; font-size: 20px; padding: 0 30px; }
  .hero__art { top: auto; height: auto; width: 546px; right: -105px; }
}


/* ---------- Secciones ---------- */
.section {
  display: flex; flex-direction: column; align-items: center; gap: 85px;
  padding: var(--sec-gap) var(--gr) 0 var(--gl);
}
.section__title { font-size: 48px; font-weight: 700; text-align: center; }

/* Tarjetas (servicios y sobre nosotros) */
.card-grid { display: grid; gap: 30px; width: 100%; max-width: var(--wide); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: 16px; background: var(--surface);
}
.card__icon {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 8px; background: #fff;
}
.card__title { font-size: 24px; font-weight: 500; }
.card__text { font-size: 16px; line-height: 160%; color: var(--muted); }

/* Tarjetas de "Servicios": icono en círculo con degradado + elevación al pasar el ratón */
.card--service {
  position: relative; overflow: hidden; gap: 14px; padding: 28px 28px 32px;
  background: #fff; border: 1px solid rgba(30, 58, 138, .08); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(30, 58, 138, .04), 0 8px 22px -14px rgba(29, 78, 216, .12);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Línea fina superior con el degradado del icono; el overflow la recorta con las esquinas redondeadas */
.card--service::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  opacity: 0; transform: scaleX(.55); transform-origin: center;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.card--service .card__icon {
  width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);
  box-shadow: 0 10px 20px -8px rgba(29, 78, 216, .4);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card--service .material-icons { width: 30px; height: 30px; font-size: 30px; color: #fff; }

@media (hover: hover) {
  .card--service:hover {
    transform: translateY(-7px);
    box-shadow: 0 2px 4px rgba(30, 58, 138, .05), 0 24px 44px -18px rgba(29, 78, 216, .28);
  }
  .card--service:hover::before { opacity: 1; transform: none; }
  .card--service:hover .card__icon {
    transform: scale(1.06);
    box-shadow: 0 14px 26px -8px rgba(29, 78, 216, .55);
  }
}

/* ---------- Aparición al hacer scroll ----------
   script.js añade "is-in" cuando el elemento entra en pantalla.
   Se usa la propiedad "translate" (no "transform") para no chocar con el hover de las tarjetas. */
.js .reveal {
  opacity: 0; translate: 0 28px;
  transition: opacity var(--t) ease var(--d, 0ms), translate var(--t) var(--ease) var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }
/* Las tarjetas de servicios combinan la aparición con su efecto hover */
.js .card--service.reveal {
  transition:
    opacity var(--t) ease var(--d, 0ms),
    translate var(--t) var(--ease) var(--d, 0ms),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
/* Escalonado suave dentro de cada fila de tarjetas */
.card-grid--4 > :nth-child(4n+2) { --d: 60ms; }
.card-grid--4 > :nth-child(4n+3) { --d: 120ms; }
.card-grid--4 > :nth-child(4n+4) { --d: 180ms; }
.card-grid--3 > :nth-child(3n+2) { --d: 60ms; }
.card-grid--3 > :nth-child(3n+3) { --d: 120ms; }

@media (max-width: 1199px) { .card-grid--4, .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .card-grid--4, .card-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cómo trabajamos (selector de etapas) ---------- */
.process {
  display: flex; flex-direction: column; align-items: center; gap: 56px;
  /* La caja sobresale 24px por cada lado de las tarjetas, como en Framer */
  --inset: max(0px, calc(var(--gutter) - 24px));
  width: calc(100% - 2 * var(--inset)); max-width: calc(var(--wide) + 48px);
  margin: var(--sec-gap) auto 0; border-radius: 32px;
  padding: 48px calc(var(--gutter) - var(--inset)) 72px;
  background: #EEF9FF url("assets/fondo-ondas.svg") center / cover no-repeat; /* mismo fondo de ondas que Preguntas frecuentes */
}
.process__head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 760px; text-align: center; }
.process__lead { font-size: 16px; line-height: 160%; color: var(--muted-strong); }

.stages { display: flex; flex-direction: column; gap: 28px; width: 100%; }

/* Selector: cuatro botones (pestañas) */
.stages__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stage-tab {
  display: flex; align-items: center; gap: 16px; min-width: 0;
  padding: 18px 22px; text-align: left; font: inherit; color: var(--navy); cursor: pointer;
  background: #fff; border: 1px solid rgba(30, 58, 138, .12); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(30, 58, 138, .04), 0 8px 18px -12px rgba(29, 78, 216, .16);
  transition: transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
.stage-tab__num {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(29, 78, 216, .09); color: var(--navy); font-size: 18px; font-weight: 500;
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.stage-tab__label { display: block; min-width: 0; padding-left: 16px; border-left: 1px solid rgba(30, 58, 138, .14); line-height: 1.35; }
.stage-tab__label strong { display: block; font-size: 18px; font-weight: 700; color: var(--navy); }
.stage-tab__label span { display: block; font-size: 17px; font-weight: 400; color: var(--muted-strong); }

@media (hover: hover) {
  .stage-tab:hover {
    transform: translateY(-3px); border-color: rgba(29, 78, 216, .45);
    box-shadow: 0 1px 2px rgba(30, 58, 138, .05), 0 16px 28px -14px rgba(29, 78, 216, .32);
  }
}
.stage-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.stage-tab[aria-selected="true"] {
  border-color: var(--blue); background: linear-gradient(180deg, #F1F7FF 0%, #E6F0FE 100%);
  box-shadow: 0 0 0 1px var(--blue), 0 16px 30px -14px rgba(29, 78, 216, .45);
}
.stage-tab[aria-selected="true"] .stage-tab__num {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); color: #fff;
  box-shadow: 0 8px 16px -6px rgba(29, 78, 216, .5);
}

/* Panel: una sola tarjeta; las 4 etapas están en el HTML, apiladas en la misma celda
   (así la altura es la de la más alta y no hay saltos al cambiar de etapa) */
.stages__panels {
  --stage-gap: clamp(24px, 3vw, 48px);
  container-type: inline-size; /* permite usar "cqw" para calcular el alto mínimo de la imagen */
  display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 2.4vw, 36px);
  background: #fff; border: 1px solid rgba(30, 58, 138, .07); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(30, 58, 138, .04), 0 14px 34px -20px rgba(29, 78, 216, .22);
}
.stage-panel { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stage-gap); align-items: stretch; margin-bottom: 0;
  /* Alto mínimo = alto de la imagen completa (16:9) en su columna: así nunca se recorta por arriba ni por abajo */
  min-height: calc((100cqw - var(--stage-gap)) * 9 / 32); }
.stage-panel:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 12px; }

.stage-panel__body { align-self: center; }
.stage-panel__title { font-size: clamp(28px, 2.5vw, 40px); font-weight: 700; color: var(--navy); }
.stage-panel__num { color: var(--blue); }
.stage-items { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(24px, 2.4vw, 36px); }
.stage-item { display: flex; align-items: flex-start; gap: 18px; }
.stage-item__icon {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: #EEF4FF; color: var(--blue); box-shadow: 0 6px 14px -8px rgba(29, 78, 216, .35);
}
.stage-item__icon svg { width: 26px; height: 26px; }
.stage-item__title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.stage-item__text { margin-top: 2px; font-size: 16px; line-height: 160%; color: var(--muted-strong); }

.stage-panel__media { position: relative; min-width: 0; border-radius: 16px; overflow: hidden; background: #EEF4FD; }
.stage-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; /* si hay que recortar, siempre por la izquierda */ }

/* Con JS: solo se ve la etapa activa y el cambio es un fundido con 8px de desplazamiento.
   Sin JS: las cuatro etapas se muestran una debajo de otra. */
html:not(.js) .stages__tabs { display: none; }
html:not(.js) .stages__panels { gap: 40px; }
.js .stage-panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; translate: 0 8px;
  transition: opacity 180ms ease-out, translate 180ms ease-out, visibility 0s linear 180ms;
}
.js .stage-panel.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0;
  transition: opacity var(--t-ui) ease-out 100ms, translate var(--t-ui) ease-out 100ms, visibility 0s;
}

@media (max-width: 1099px) {
  .stages__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .process { gap: 40px; padding-bottom: 48px; }
  .stages__tabs { gap: 12px; }
  .stage-tab { gap: 10px; padding: 12px; border-radius: 14px; }
  .stage-tab__num { width: 36px; height: 36px; font-size: 14px; }
  .stage-tab__label { padding-left: 10px; }
  .stage-tab__label strong { font-size: 14px; }
  .stage-tab__label span { font-size: 13px; }
  .stage-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-height: 0; }
  .stage-panel__media { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .stage-item { gap: 14px; }
  .stage-item__icon { width: 44px; height: 44px; border-radius: 12px; }
  .stage-item__icon svg { width: 22px; height: 22px; }
  .stage-panel__title { font-size: 26px; }
}

/* ---------- Sobre nosotros (fondo blanco, sin caja envolvente) ---------- */
.about { gap: 64px; }
.about__head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 900px; text-align: center; }
.about__lead { font-size: 16px; line-height: 160%; color: var(--muted-strong); }

.about__intro {
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center;
  gap: clamp(24px, 4vw, 72px); width: 100%; max-width: var(--wide);
}
.about__copy { display: flex; flex-direction: column; gap: 24px; }
.about__title { font-size: clamp(28px, 2.7vw, 46px); font-weight: 700; line-height: 1.15; color: var(--navy); }
.about__text { max-width: 600px; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.7; color: var(--muted-strong); }

/* Etiquetas informativas (no son botones: sin cursor de enlace ni efecto al pasar el ratón) */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px;
  border: 1px solid rgba(29, 78, 216, .14); border-radius: 999px; background: #EEF4FF;
  font-size: 15px; font-weight: 500; line-height: 1; color: var(--navy); cursor: default;
}
.tag svg { flex: none; width: 20px; height: 20px; color: var(--blue); }

/* Imagen del nexo: se funde con el fondo blanco; el difuminado solo afecta a los bordes */
.about__art {
  display: block; width: 100%; height: auto; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, rgba(0, 0, 0, 0) 100%);
}

.card--service .card__icon svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 809px) {
  .about { gap: 48px; }
  .about__intro { grid-template-columns: minmax(0, 1fr); }
  .about__title { font-size: 28px; }
}

/* ---------- Preguntas frecuentes (acordeón) ---------- */
.faq {
  --inset: max(0px, calc(var(--gutter) - 24px));
  width: calc(100% - 2 * var(--inset)); max-width: calc(var(--wide) + 48px);
  margin: var(--sec-gap) auto 0;
}
.faq__box {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: clamp(32px, 4vw, 64px) calc(var(--gutter) - var(--inset)) clamp(40px, 5vw, 72px);
  border-radius: 28px;
  /* Fondo de ondas de seda azul hielo, como en la business card (assets/fondo-ondas.svg) */
  background: #EEF9FF url("assets/fondo-ondas.svg") center / cover no-repeat;
}
.faq__head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 760px; text-align: center; }

.faq__list { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 960px; }
.faq-item {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid rgba(30, 58, 138, .08); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(30, 58, 138, .04), 0 8px 22px -14px rgba(29, 78, 216, .14);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
/* Línea fina superior con degradado (solo en la pregunta abierta); el overflow la recorta con las esquinas */
.faq-item::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.faq-item.is-open { box-shadow: 0 2px 4px rgba(30, 58, 138, .05), 0 22px 40px -22px rgba(29, 78, 216, .3); }
.faq-item.is-open::before { opacity: 1; }
@media (hover: hover) {
  .faq-item:not(.is-open):hover {
    border-color: rgba(29, 78, 216, .35);
    box-shadow: 0 1px 2px rgba(30, 58, 138, .05), 0 14px 28px -16px rgba(29, 78, 216, .26);
  }
}

.faq-item__heading { margin: 0; font-size: inherit; }
.faq-item__btn {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 24px 28px; background: none; border: 0; border-radius: 20px;
  font: inherit; text-align: left; color: var(--navy); cursor: pointer;
}
.faq-item__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -4px; }
.faq-item__icon {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);
  box-shadow: 0 10px 20px -8px rgba(29, 78, 216, .4);
}
.faq-item__icon svg { width: 28px; height: 28px; fill: #fff; }
.faq-item__q { flex: 1; min-width: 0; font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; line-height: 1.35; color: var(--navy); }
.faq-item__chev { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--blue); transition: transform var(--t) var(--ease); }
.faq-item__chev svg { width: 30px; height: 30px; fill: currentColor; }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }

/* Despliegue: la altura se anima con grid-template-rows (0fr → 1fr) más un fundido */
.faq-item__panel {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--t) var(--ease), opacity var(--t) ease, visibility 0s linear var(--t);
}
.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--t) var(--ease), opacity var(--t) ease .05s, visibility 0s;
}
.faq-item__inner { min-height: 0; overflow: hidden; }
.faq-item__inner p {
  padding: 0 32px 28px calc(28px + 56px + 20px); /* alineada con el texto de la pregunta */
  font-size: clamp(16px, 1.1vw, 18px); line-height: 1.7; color: var(--muted-strong);
}
/* Sin JavaScript todas las respuestas se muestran abiertas (contenido accesible e indexable) */
html:not(.js) .faq-item__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
html:not(.js) .faq-item__chev { display: none; }

/* Las preguntas combinan la aparición al hacer scroll con su propio hover */
.js .faq-item.reveal {
  transition:
    opacity var(--t) ease var(--d, 0ms),
    translate var(--t) var(--ease) var(--d, 0ms),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

@media (max-width: 809px) {
  .faq { margin-bottom: 56px; }
  .faq__box { gap: 32px; border-radius: 24px; }
  .faq__list { gap: 14px; }
  .faq-item { border-radius: 18px; }
  .faq-item__btn { gap: 14px; padding: 18px 16px; border-radius: 18px; }
  .faq-item__icon { width: 44px; height: 44px; }
  .faq-item__icon svg { width: 22px; height: 22px; }
  .faq-item__q { font-size: 17px; }
  .faq-item__chev { width: 28px; height: 28px; }
  .faq-item__inner p { padding: 0 18px 22px 18px; }
}

/* ---------- Banda de contacto ---------- */
.cta {
  display: flex; flex-direction: column; align-items: center; gap: 47px;
  width: 100%; max-width: var(--wide); margin: 0 auto; border-radius: 32px;
  padding: 32px 25px 52px; text-align: center;
  background: var(--grad-band);
}
.cta__title { font-size: 48px; font-weight: 700; color: #fff; }
.cta__title em { font-style: normal; color: var(--navy); }
.cta .btn:focus-visible { outline-color: #fff; }

/* ---------- Pie (ancho completo, fondo plano) ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer__inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 6vw, 120px);
  align-items: start; width: 100%; max-width: calc(var(--wide) + var(--gl) + var(--gr)); margin: 0 auto;
  padding: clamp(48px, 5vw, 80px) var(--gr) clamp(36px, 4vw, 56px) var(--gl);
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer__logo { display: block; width: 120px; height: auto; }
.footer__brand p { max-width: 320px; font-size: 16px; line-height: 1.6; color: var(--navy); }
.footer__title { margin-bottom: 16px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a {
  color: var(--footer-text); font-size: 16px; line-height: 1.4; text-decoration: underline transparent; text-underline-offset: 4px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.footer__links a:hover { color: var(--blue); text-decoration-color: currentColor; }
.site-footer a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.footer__bottom {
  max-width: calc(var(--wide) + var(--gl) + var(--gr)); margin: 0 auto; padding: 0 var(--gr) 0 var(--gl);
}
.footer__bottom p {
  padding: 24px 0 32px; border-top: 1px solid rgba(30, 58, 138, .14);
  font-size: 14px; line-height: 1.5; color: var(--footer-text);
}

@media (max-width: 1099px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 809px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .footer__bottom p { padding: 20px 64px 28px 0; }   /* deja libre el botón flotante del chat */
}

/* ---------- Páginas interiores (contacto y legales) ---------- */
.page { padding: 32px var(--gr) 80px var(--gl); }
.page__title { font-size: 48px; font-weight: 700; text-align: center; }

.contact__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.contact__lead { font-size: 16px; color: var(--muted); }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 390fr) minmax(0, 706fr);
  align-items: start; gap: 56px; max-width: 1400px; margin: 85px auto 0;
}
.info-card__label { font-size: 16px; color: var(--muted); }
.info-card__value {
  display: block; align-self: stretch; padding: 12px 14px; border-radius: 8px;
  background: #fff; font-size: 24px; color: var(--ink); overflow-wrap: anywhere;
}
.info-card__value:hover { color: var(--blue); }

.form-card { padding: 24px; gap: 24px; align-items: stretch; }
.form-card__title { font-size: 24px; font-weight: 500; }
.field input[type="text"], .field input[type="email"], .field textarea {
  display: block; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-size: 24px; line-height: 1.5;
}
.field textarea { min-height: 170px; resize: vertical; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--blue); outline-offset: 0; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; color: #000; }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.consent a { text-decoration: underline; }
.form-card .btn { width: 100%; }
.form-card .btn[disabled] { opacity: .6; cursor: progress; }
.form__status { min-height: 1.6em; font-size: 16px; }
.form__status[data-state="ok"] { color: #0F6B3A; }
.form__status[data-state="error"] { color: #B42318; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 809px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 48px; }
}

.legal { max-width: 1000px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 40px; color: var(--ink); }
.legal h2 { margin-bottom: 4px; font-size: 24px; font-weight: 500; }
.legal p, .legal li { line-height: 160%; }
.legal ul { list-style: disc; padding-left: 1.4em; }
.legal a { text-decoration: underline; }

/* Si el sistema tiene activado "reducir movimiento" (p. ej. Windows con "Efectos de animación"
   desactivados) no hay desplazamientos: solo fundidos suaves. Para ver las animaciones completas
   en esa situación, abre la web con #movimiento al final de la dirección (clase "force-motion"). */
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) { scroll-behavior: auto; }
  html:not(.force-motion) .reveal { translate: none; }
  html:not(.force-motion) .hero--play .hero__copy,
  html:not(.force-motion) .hero--play .hero__actions,
  html:not(.force-motion) .hero--play .hero__art { animation-name: hero-fade; }
  html:not(.force-motion) .card--service:hover,
  html:not(.force-motion) .card--service:hover .card__icon { transform: none; }
  html:not(.force-motion) .btn:hover { transform: none; }
  html:not(.force-motion) .stage-tab:hover { transform: none; }
  html:not(.force-motion) .faq-item__panel { transition: opacity var(--t) ease, visibility 0s linear var(--t); }
  html:not(.force-motion) .faq-item.is-open .faq-item__panel { transition: opacity var(--t) ease, visibility 0s; }
  html:not(.force-motion) .faq-item__chev { transition: none; }
  html:not(.force-motion) .stage-panel, html:not(.force-motion) .stage-panel.is-active { translate: none; }
}


/* =====================================================================
   Hablemos de tu proyecto (sección + ventanas emergentes)
   ===================================================================== */
html { scrollbar-gutter: stable; }               /* evita saltos de ancho al bloquear el scroll con una ventana abierta */
html.modal-open { overflow: hidden; }

.contact-sec {
  --inset: max(0px, calc(var(--gutter) - 24px));
  width: calc(100% - 2 * var(--inset)); max-width: calc(var(--wide) + 48px);
  margin: var(--sec-gap) auto var(--sec-gap);
}
.contact-sec__box {
  display: flex; flex-direction: column; align-items: center; gap: 56px;
  padding: clamp(48px, 6vw, 96px) calc(var(--gutter) - var(--inset));
  border-radius: 28px; color: #fff;
  background: #1D4ED8 url("assets/fondo-azul.webp") center / cover no-repeat;   /* imagen del proyecto, sin modificar */
}
.contact-sec__head { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 760px; text-align: center; }
.contact-sec__head .section__title { color: #fff; }
.contact-sec__head p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: rgba(255, 255, 255, .92); }

.contact-sec__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 1040px;
}
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(28px, 3vw, 44px); border-radius: 24px; color: var(--ink);
  background: #fff; border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 24px 48px -24px rgba(10, 30, 100, .45);
}
.contact-card__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);
  box-shadow: 0 10px 20px -8px rgba(29, 78, 216, .4);
}
.contact-card__icon svg { width: 30px; height: 30px; fill: #fff; }
.contact-card__title { font-size: 26px; font-weight: 700; color: var(--ink); }
.contact-card__text { flex: 1; font-size: 17px; line-height: 1.65; color: var(--muted-strong); }
.contact-card__btn { width: 100%; margin-top: 12px; height: 60px; font-size: 19px; }

/* Botón secundario (solo en esta sección): mismo tamaño y radio que el primario */
.btn--outline {
  background: #fff; color: var(--navy); border: 2px solid var(--blue);
  box-shadow: none;
}
.btn--outline:hover { background: #F2F6FF; box-shadow: 0 14px 26px -14px rgba(29, 78, 216, .5); filter: none; }
.btn--outline::after { background: var(--blue); }

/* ---------- Ventanas emergentes (<dialog> nativo: foco atrapado y Escape incluidos) ---------- */
.modal {
  padding: 0; border: 0; background: transparent; color: var(--ink);
  width: min(100% - 24px, 640px); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; overflow: visible;
}
.modal[open] { display: block; }
.modal::backdrop {
  background: rgba(15, 23, 60, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 250ms var(--ease);
}
.modal.is-shown::backdrop { opacity: 1; }
.modal__panel {
  display: flex; flex-direction: column; max-height: calc(100dvh - 32px);
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(10, 30, 100, .55);
  opacity: 0; transform: scale(.96) translateY(8px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.modal.is-shown .modal__panel { opacity: 1; transform: none; }
.modal__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px 18px 32px; border-bottom: 1px solid rgba(30, 58, 138, .08);
}
.modal__title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--ink); }
.modal__close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #F2F6FF; color: var(--navy); cursor: pointer; transition: background var(--t-ui) var(--ease);
}
.modal__close:hover { background: #E3ECFE; }
.modal__close svg { width: 24px; height: 24px; fill: currentColor; }
.modal__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 32px 32px; }
.modal__intro { margin-bottom: 20px; font-size: 17px; line-height: 1.6; color: var(--muted-strong); }

.modal :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.modal .btn:focus-visible { outline-offset: 3px; }

/* Campos */
.mfield { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.mfield label { font-size: 15px; font-weight: 500; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--muted); }
.mfield input, .mfield textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #C9D3E6; border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit; font-size: 17px; line-height: 1.4;
  transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.mfield textarea { resize: vertical; min-height: 110px; }
.mfield input:focus, .mfield textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .22); }
.mfield [aria-invalid="true"] { border-color: #B42318; }
.mconsent { margin: 4px 0 8px; }
.mconsent .consent { font-size: 15px; }
.modal__submit { width: 100%; margin-top: 8px; }
.modal__submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.modal .form__status { margin: 6px 0 0; min-height: 0; }
.modal .form__status:empty { display: none; }

.modal__done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 8px; text-align: center; }
.modal__done[hidden] { display: none; }
.modal__done h3 { font-size: 24px; font-weight: 700; }
.modal__done p { max-width: 420px; line-height: 1.6; color: var(--muted-strong); }
.modal__done .btn { margin-top: 12px; }
.modal__done-icon svg { width: 64px; height: 64px; fill: var(--blue); }

/* Calendario */
.book-notice {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5;
  background: #FFF6E5; color: #6B4600; border: 1px solid #F3D9A0;
}
.book-notice[hidden] { display: none; }
.cal { max-width: 380px; margin: 0 auto; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__month { font-size: 20px; font-weight: 700; color: var(--ink); }
.cal__month::first-letter, .slots__title::first-letter { text-transform: uppercase; }
.cal__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #C9D3E6; border-radius: 50%;
  background: #fff; color: var(--navy); cursor: pointer; transition: background var(--t-ui) var(--ease);
}
.cal__arrow:hover:not(:disabled) { background: #F2F6FF; }
.cal__arrow:disabled { opacity: .35; cursor: not-allowed; }
.cal__arrow svg { width: 24px; height: 24px; fill: currentColor; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__week span { padding: 6px 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); }
.cal__day {
  justify-self: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); cursor: pointer;
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.cal__day:hover:not(:disabled):not([aria-pressed="true"]) { background: #E3ECFE; }
.cal__day:disabled { color: #AEB6C6; cursor: not-allowed; }
.cal__day.is-today { box-shadow: inset 0 0 0 2px rgba(29, 78, 216, .35); }
.cal__day[aria-pressed="true"] { background: var(--blue); color: #fff; font-weight: 700; }
.cal__blank { height: 44px; }

/* Horarios */
.slots { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(30, 58, 138, .08); }
.slots[hidden], .slots__msg[hidden] { display: none; }
.slots__title { margin-bottom: 12px; font-size: 18px; font-weight: 700; }
.slots__msg { padding: 14px 16px; border-radius: 12px; background: #F2F6FF; color: var(--navy); line-height: 1.5; }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.slot {
  height: 46px; border: 1px solid #C9D3E6; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--navy); cursor: pointer;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.slot:hover { border-color: var(--blue); background: #F2F6FF; }
.slot[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.slots__tz { margin-top: 12px; font-size: 14px; color: var(--muted); }
.slots__actions { margin-top: 20px; }

/* Resumen */
.summary { margin-bottom: 20px; padding: 16px 18px; border-radius: 14px; background: #F2F6FF; }
.summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0 0 8px; }
.summary dt { font-size: 13px; color: var(--muted); }
.summary dd { margin: 2px 0 0; font-weight: 500; color: var(--ink); }
.summary dd:first-letter { text-transform: capitalize; }
.link-btn { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--blue); text-decoration: underline; cursor: pointer; }

@media (max-width: 809px) {
  .contact-sec { margin-bottom: 72px; }
  .contact-sec__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-sec__box { gap: 36px; border-radius: 24px; }
  .modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .modal__panel { max-height: calc(100dvh - 16px); }
  .modal__head { padding: 16px 12px 14px 20px; }
  .modal__body { padding: 20px 20px 28px; }
  .summary dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1099px) and (min-width: 810px) {
  .contact-sec__cards { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .modal__panel { transform: none; transition: opacity 150ms linear; }
  html:not(.force-motion) .modal::backdrop { transition: opacity 150ms linear; }
}

.contact-sec__cards > :nth-child(2) { --d: 80ms; }


/* =====================================================================
   Asistente de IA (botón flotante + ventana de conversación)
   Jerarquía de capas: cabecera 20 · asistente 40 · enlace "saltar" 50 ·
   ventanas modales (<dialog>, capa superior del navegador): siempre por encima de todo.
   ===================================================================== */
:root { --z-chat: 40; --chat-gap: 24px; }
html.chat-open-lock { overflow: hidden; }          /* solo se aplica en móvil (ventana a pantalla completa) */

.chat-fab {
  position: fixed; z-index: var(--z-chat);
  right: calc(var(--chat-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--chat-gap) + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 56px; height: 56px; padding: 3px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);   /* anillo de marca */
  box-shadow: 0 12px 28px -8px rgba(29, 78, 216, .55); cursor: pointer;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.chat-fab:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 16px 32px -8px rgba(29, 78, 216, .65); }
.chat-fab:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* El símbolo original lleva sus propios colores (azul marino y degradado), así que se apoya en un disco blanco para que se vea */
.chat-fab__disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.chat-fab__disc img { width: 62%; height: auto; display: block; }

.chat {
  position: fixed; z-index: var(--z-chat); display: flex; flex-direction: column; overflow: hidden;
  right: calc(var(--chat-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--chat-gap) + 56px + 14px + env(safe-area-inset-bottom, 0px));
  width: 384px; max-width: calc(100vw - 2 * var(--chat-gap));
  height: min(620px, calc(100dvh - 56px - 14px - 2 * var(--chat-gap) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)));
  border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 70px -18px rgba(10, 30, 100, .45), 0 0 0 1px rgba(30, 58, 138, .06);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.98); transform-origin: bottom right;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
}
.chat.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

.chat__head {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; color: #fff;
  background: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 100%);
}
.chat__avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; }
.chat__avatar img { width: 26px; height: auto; display: block; }
.chat__heading { flex: 1; min-width: 0; }
.chat__title { font-size: 17px; font-weight: 700; line-height: 1.2; color: #fff; }
.chat__sub { font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .92); }
.chat__close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; transition: background 200ms ease;
}
.chat__close:hover { background: rgba(255, 255, 255, .32); }
.chat__close svg { width: 22px; height: 22px; fill: currentColor; }
.chat :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.chat__head :focus-visible { outline-color: #fff; }

.chat__status { flex: none; padding: 10px 16px; font-size: 13.5px; line-height: 1.45; background: #FFF6E5; color: #6B4600; border-bottom: 1px solid #F3D9A0; }
.chat__status[hidden] { display: none; }

.chat__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; background: #fff;
}
.msg { display: flex; flex-direction: column; max-width: 86%; gap: 8px; }
.msg--bot, .msg--system { align-self: flex-start; align-items: flex-start; }
.msg--user { align-self: flex-end; align-items: flex-end; }
.msg__bubble { padding: 10px 14px; border-radius: 16px; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msg__bubble p + p, .msg__bubble p + ul, .msg__bubble ul + p { margin-top: 8px; }
.msg__bubble ul { padding-left: 20px; list-style: disc; }
.msg__bubble a { color: var(--blue); text-decoration: underline; }
.msg--bot .msg__bubble { background: #EEF3FB; color: var(--ink); border-bottom-left-radius: 6px; }
.msg--user .msg__bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg--user .msg__bubble a { color: #fff; }
.msg--system .msg__bubble { background: #FFF6E5; color: #6B4600; border: 1px solid #F3D9A0; font-size: 14.5px; }
.msg__actions, .chat__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__quick { align-self: flex-start; }
.chat__chip {
  padding: 9px 14px; border: 1px solid #B9C8EA; border-radius: 999px; background: #fff; color: var(--navy);
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.chat__chip:hover { background: #F2F6FF; border-color: var(--blue); }
.chat__chip--action { background: var(--blue); border-color: var(--blue); color: #fff; }
.chat__chip--action:hover { background: var(--navy); border-color: var(--navy); }
.chat__chip:disabled { opacity: .55; cursor: default; }

.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #7E93BE; animation: chat-dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.chat__privacy { flex: none; padding: 8px 16px 0; font-size: 12.5px; line-height: 1.4; color: var(--muted-strong); border-top: 1px solid rgba(30, 58, 138, .08); }
.chat__privacy a { color: var(--blue); text-decoration: underline; }
.chat__form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.chat__form textarea {
  flex: 1; min-width: 0; max-height: 120px; resize: none; padding: 11px 14px; border: 1px solid #C9D3E6; border-radius: 20px;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.chat__form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .2); }
.chat__send {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); color: #fff; transition: filter 200ms ease, opacity 200ms ease;
}
.chat__send:hover:not(:disabled) { filter: brightness(1.1); }
.chat__send:disabled { opacity: .5; cursor: default; }
.chat__send svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 809px) {
  :root { --chat-gap: 16px; }
  .chat-fab { width: 52px; height: 52px; }
  /* Casi pantalla completa; la altura la ajusta el script al teclado virtual (--chat-h / --chat-top) */
  .chat {
    inset: var(--chat-top, 0px) 0 auto 0; width: auto; max-width: none; height: var(--chat-h, 100dvh);
    border-radius: 0; transform: translateY(24px);
  }
  .chat__head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .chat__log, .chat__privacy { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .chat.is-open ~ .chat-fab, .chat-fab[aria-expanded="true"] { visibility: hidden; }
  .msg { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .chat, html:not(.force-motion) .chat-fab { transition: opacity 150ms linear; transform: none; }
  html:not(.force-motion) .chat-fab:hover { transform: none; }
  html:not(.force-motion) .typing i { animation: none; opacity: .7; }
}


/* =====================================================================
   Aviso de cookies (esquina inferior izquierda; no oscurece ni bloquea la web)
   Capa 35: por debajo del asistente (40) y de las ventanas modales (capa superior).
   ===================================================================== */
.cookie {
  position: fixed; z-index: 35; display: flex; flex-direction: column; gap: 12px;
  left: calc(24px + env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 384px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 24px; border-radius: 20px; background: #fff; color: var(--ink);
  border: 1px solid rgba(30, 58, 138, .12); box-shadow: 0 24px 60px -16px rgba(29, 78, 216, .3);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.cookie[hidden] { display: none; }
.cookie.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie__top { display: flex; align-items: center; gap: 12px; }
.cookie__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); box-shadow: 0 8px 16px -8px rgba(29, 78, 216, .45);
}
.cookie__icon svg { width: 24px; height: 24px; fill: #fff; }
.cookie__title { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.cookie__title:focus { outline: none; }
.cookie__text { font-size: 15px; line-height: 1.55; color: var(--muted-strong); }
.cookie__state { padding: 10px 12px; border-radius: 10px; background: #F2F6FF; font-size: 14px; line-height: 1.45; color: var(--navy); }
.cookie__state[hidden] { display: none; }
.cookie__link { align-self: flex-start; font-size: 15px; font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cookie__link:hover { color: var(--navy); }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
/* Mismo tamaño, mismo peso y misma facilidad de uso en las dos opciones */
.cookie__btn { width: 100%; height: 48px; padding: 0 16px; font-size: 16px; font-weight: 500; justify-content: center; }
.cookie__btn::after { display: none; }
.cookie :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Enlace «Configurar cookies» del pie: botón con el aspecto exacto de los demás enlaces legales */
.footer__links .footer__linkbtn {
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left;
  color: var(--footer-text); font-size: 16px; line-height: 1.4; text-decoration: underline transparent; text-underline-offset: 4px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.footer__links .footer__linkbtn:hover { color: var(--blue); text-decoration-color: currentColor; }

@media (max-width: 809px) {
  .cookie { left: 50%; right: auto; width: min(440px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); max-width: none;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 20px; translate: -50% 0; }
  /* El botón del asistente sube mientras el aviso está visible, para no solaparse */
  html.cookie-open .chat-fab { bottom: calc(var(--chat-gap) + var(--cookie-h, 0px) + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) { .cookie__actions { gap: 10px; } .cookie__btn { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .cookie { transform: none; transition: opacity 150ms linear; }
}