/* Estilos del sitio. Los colores/medidas vienen de las variables CSS que la
   landing inyecta en :root desde apps/landing/content.py (THEME); los
   fallbacks de var() replican esos valores para páginas sin ese bloque. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text, #111827);
  background: var(--color-bg, #ffffff);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--max-width, 1080px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 640px;
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* El h1 de la página de contacto se ve como un h2 de sección. */
h2,
.contact h1 {
  font-size: 2rem;
  text-align: center;
}

.section-sub {
  text-align: center;
  color: var(--color-muted, #6b7280);
  max-width: 560px;
  margin: 0.75rem auto 0;
}

section {
  padding: 5rem 0;
}

a {
  color: var(--color-primary, #1a56db);
}

/* Visible solo para lectores de pantalla. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Aparición al hacer scroll --- */

/* static/js/reveal.js añade .is-revealed al entrar el elemento en pantalla y,
   cuando la animación termina, le quita el atributo data-reveal para que estas
   reglas dejen de aplicarse. Así el elemento queda limpio y la animación no
   compite con las que ya usan .prop:hover o .card. */
[data-reveal] {
  opacity: 0;
}

[data-reveal].is-revealed {
  opacity: 1;
  animation: reveal-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* El hero ya está en pantalla al cargar, así que se escalona en cualquier ancho. */
.hero [data-reveal]:nth-child(2) { animation-delay: 110ms; }
.hero [data-reveal]:nth-child(3) { animation-delay: 220ms; }

/* El escalonado solo aporta cuando varios elementos entran a la vez. En una
   sola columna cada bloque llega por su cuenta y el retardo solo haría esperar. */
@media (min-width: 641px) {
  [data-reveal-group] > *:nth-child(2) { animation-delay: 90ms; }
  [data-reveal-group] > *:nth-child(3) { animation-delay: 180ms; }
  [data-reveal-group] > *:nth-child(4) { animation-delay: 270ms; }
  [data-reveal-group] > *:nth-child(5) { animation-delay: 360ms; }
  [data-reveal-group] > *:nth-child(6) { animation-delay: 450ms; }
}

/* --- Nav --- */

nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  max-width: var(--max-width, 1080px);
  margin: 0 auto;
  /* El margen inferior lo aportaba antes el hueco transparente del PNG; sin él
     el aire hay que ponerlo arriba, donde el logo llegaría al borde. */
  padding: 2rem 1.5rem 0;
}

/* Dos animaciones a la vez sin conflicto: la entrada usa `opacity` y `scale`,
   la flotación usa `translate`. Al ser propiedades independientes de
   `transform`, cada una anima la suya sin pisar a la otra. */
.logo-frame {
  position: relative;
  display: inline-block;
  animation:
    logo-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
    logo-float 4.5s ease-in-out 0.8s infinite;
}

.logo {
  display: block;
  height: 11rem;
  width: auto;
}

/* Destello: la máscara con el propio PNG limita el brillo a la silueta del
   logo en lugar de barrer todo su rectángulo. */
.logo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 44%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 56%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url("../img/logo-trimmed.76a475262507.png") center / contain no-repeat;
  mask: url("../img/logo-trimmed.76a475262507.png") center / contain no-repeat;
  animation: logo-shine 6s ease-in-out 1.8s infinite;
}

@keyframes logo-in {
  from {
    opacity: 0;
    scale: 0.85;
  }
}

@keyframes logo-float {
  50% {
    translate: 0 -6px;
  }
}

/* Porcentajes altos desplazan el degradado hacia la izquierda, de ahí que el
   recorrido vaya de mayor a menor para que el brillo barra de izquierda a derecha. */
@keyframes logo-shine {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -80% 0;
  }
}

nav a {
  text-decoration: none;
  color: var(--color-text, #111827);
  font-weight: 500;
}

nav a:hover {
  color: var(--color-primary, #1a56db);
}

/* --- Botones --- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: none;
  border-radius: var(--radius, 12px);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary {
  background: var(--color-primary, #1a56db);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--color-primary-dark, #1e429f);
}

/* --- Hero --- */

/* El margen superior es la mitad del anterior: el logo queda cerca del titular
   pero sin llegar a tocarlo. */
.hero {
  padding: 3.25rem 0 5.5rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  max-width: 820px;
  margin: 0 auto;
}

.hero-sub {
  font-size: 1.2rem;
  color: var(--color-muted, #6b7280);
  max-width: 640px;
  margin: 1.25rem auto 2.25rem;
}

/* --- Servicios --- */

.services {
  background: var(--color-surface, #f6f8fb);
}

/* Las tarjetas entran desde su lado y pueden asomar fuera del contenedor
   durante la animación; `clip` lo recorta sin crear scroll horizontal y, al no
   ser un contenedor de scroll, no aplana el 3D de las tarjetas. */
.services {
  overflow-x: clip;
}

.timeline {
  position: relative;
  list-style: none;
  display: grid;
  gap: 3rem;
  margin-top: 3.5rem;
}

/* Hilo conductor: ::before es la guía gris completa y ::after el trazo azul,
   cuya altura marca --timeline-progress desde static/js/timeline.js. */
.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  border-radius: 1px;
}

.timeline::before {
  bottom: 0;
  background: var(--color-border, #e5e7eb);
}

.timeline::after {
  height: var(--timeline-progress, 0%);
  background: var(--color-primary, #1a56db);
  transition: height 0.15s linear;
}

/* Tres columnas: tarjeta | nodo | icono. Las pares intercambian los extremos,
   de ahí el zigzag. Todo en la misma fila para que el nodo quede centrado. */
/* Las líneas son pseudo-elementos absolutos de .timeline, así que por orden de
   pintado quedarían por encima del contenido. Posicionar la fila las manda
   detrás de nodos e iconos. */
.timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 2.5rem;
}

.timeline-item > * {
  grid-row: 1;
}

.timeline-item > .card {
  grid-column: 1;
}

.timeline-item > .timeline-icon {
  grid-column: 3;
}

.timeline-item:nth-child(even) > .card {
  grid-column: 3;
}

.timeline-item:nth-child(even) > .timeline-icon {
  grid-column: 1;
}

/* El relleno usa el fondo de la sección, no el blanco de las tarjetas: así el
   punto tapa el hilo sin que se note el recorte. */
.timeline-node {
  grid-column: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface, #f6f8fb);
  border: 2px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.timeline-icon {
  justify-self: center;
  font-size: 4rem;
  line-height: 1;
  opacity: 0;
}

/* Dos marcas distintas de static/js/timeline.js: .is-lit sigue al trazo en
   ambos sentidos (el punto vuelve a su color al subir) y .is-shown es de ida,
   para que el icono no parpadee cada vez que se sube y se baja. */
.timeline-item.is-lit .timeline-node {
  background: var(--color-primary, #1a56db);
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 0 0 6px rgba(26, 86, 219, 0.12);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary, #1a56db) 12%, transparent);
}

.timeline-item.is-shown .timeline-icon {
  animation: icon-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes icon-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  55% {
    opacity: 1;
    transform: scale(1.15);
  }
  75% {
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* La fila entra con un fundido corto (el nodo apenas se mueve del hilo) y la
   tarjeta llega girando desde su lado. */
.timeline-item[data-reveal].is-revealed {
  animation: timeline-item-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timeline-item.is-revealed > .card {
  animation: timeline-card-left 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timeline-item:nth-child(even).is-revealed > .card {
  animation-name: timeline-card-right;
}

@keyframes timeline-item-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes timeline-card-left {
  from {
    transform: perspective(1000px) translate3d(-48px, 0, 0) rotateY(-12deg);
  }
}

@keyframes timeline-card-right {
  from {
    transform: perspective(1000px) translate3d(48px, 0, 0) rotateY(12deg);
  }
}

/* Dos capas para que los efectos 3D no compitan por `transform`: .card recibe
   la entrada lateral y .card-face la inclinación que sigue al puntero. La
   `perspective` de .card da a cada tarjeta su propio punto de fuga. */
.card {
  display: flex;
  perspective: 900px;
}

.card-face {
  flex: 1;
  padding: 1.75rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 18%, transparent);
  border-radius: var(--radius, 12px);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.05),
    0 10px 24px -18px rgba(17, 24, 39, 0.4);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.18s ease-out,
    translate 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Profundidad real: el texto flota por delante del cuerpo de la tarjeta. */
.card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  transform: translateZ(var(--depth-title, 0px));
  transition: transform 0.25s ease-out;
}

.card p {
  color: var(--color-muted, #6b7280);
  font-size: 0.95rem;
  transform: translateZ(var(--depth-text, 0px));
  transition: transform 0.25s ease-out;
}

/* La inclinación solo tiene sentido con ratón; en táctil la sustituye
   .is-active, que cards-3d.js asigna a la tarjeta centrada en pantalla. */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    --depth-title: 26px;
    --depth-text: 12px;
  }

  .card:hover .card-face {
    border-color: var(--color-primary, #1a56db);
    box-shadow:
      0 1px 2px rgba(17, 24, 39, 0.06),
      0 26px 48px -26px rgba(26, 86, 219, 0.55);
    box-shadow:
      0 1px 2px rgba(17, 24, 39, 0.06),
      0 26px 48px -26px color-mix(in srgb, var(--color-primary, #1a56db) 55%, transparent);
  }
}

.card.is-active {
  --depth-title: 16px;
  --depth-text: 8px;
}

.card.is-active .card-face {
  --tilt-x: -4deg;
  translate: 0 -6px;
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 45%, transparent);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 22px 40px -26px rgba(26, 86, 219, 0.5);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 22px 40px -26px color-mix(in srgb, var(--color-primary, #1a56db) 50%, transparent);
}

/* --- Value props --- */

/* Por qué elegirnos: más ancho, más grande y en el color del texto que un
   .section-sub normal, para que se lea antes que las tarjetas. */
.props-intro {
  max-width: 860px;
  margin-top: 1.25rem;
  color: var(--color-text, #111827);
  font-size: 1.15rem;
  line-height: 1.7;
}

/* La frase que presenta las tarjetas, en el color de marca. */
.props-lead-in {
  margin-top: 1.25rem;
  color: var(--color-primary, #1a56db);
  font-weight: 600;
  text-align: center;
}

.props-lead-in + .props-grid {
  margin-top: 1.75rem;
}

@media (max-width: 640px) {
  .props-intro {
    font-size: 1.05rem;
  }
}

.props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}

/* El borde/sombra se derivan de --color-primary con color-mix; los navegadores
   sin soporte descartan esas declaraciones y conservan las de la línea previa. */
.prop {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
  border-radius: var(--radius, 12px);
  transition: translate 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.prop:hover {
  translate: 0 -6px;
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 12px 24px -12px rgba(26, 86, 219, 0.45);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--color-primary, #1a56db) 45%, transparent);
  animation: prop-buzz 0.45s ease-in-out;
}

/* Balanceo amortiguado, tipo notificación. Anima `rotate` en lugar de
   `transform` para no pisar el `translate` de la elevación. */
@keyframes prop-buzz {
  0% { rotate: 0deg; }
  20% { rotate: 1.5deg; }
  45% { rotate: -1.2deg; }
  70% { rotate: 0.8deg; }
  88% { rotate: -0.4deg; }
  100% { rotate: 0deg; }
}

.prop h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary, #1a56db);
}

.prop p {
  color: var(--color-muted, #6b7280);
  font-size: 0.95rem;
}

/* --- Llamada a la acción intermedia --- */

/* Cierra el bloque de ventajas, así que va pegada a él: sin padding arriba y
   con el de una sección normal abajo. */
.mid-cta {
  padding-top: 0;
  text-align: center;
}

/* Un 2 % por encima del botón estándar: la misma pieza, con algo más de peso
   por ser el único elemento de la sección. */
.mid-cta .btn {
  scale: 1.02;
}

/* --- Pasos --- */

.steps {
  background: var(--color-surface, #f6f8fb);
}

/* Pasos apilados: el padding izquierdo es el carril por el que sale el haz,
   que necesita tanto ancho como alto tiene la tarjeta (el dígito la iguala). */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.5rem;
  margin-top: 2.5rem;
  padding-left: 11.5rem;
  list-style: none;
}

/* La tarjeta pinta su superficie en ::after para que quede POR ENCIMA del haz:
   el número y su difuminado nacen debajo del cuadro y se escapan hacia fuera. */
/* Las tarjetas ocupan todo el ancho disponible; el min-height evita que, al
   caber el texto en una línea, se queden tan bajas que el dígito (que iguala
   su altura) pierda presencia. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8.5rem;
  padding: 1.75rem 2.25rem;
}

.step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 12px);
}

.step h3,
.step p {
  position: relative;
  z-index: 1;
}

.step-number {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: -10.75rem;
  width: 12rem;
  pointer-events: none;
  user-select: none;
}

/* El haz: arranca ya atenuado en su origen (dentro del cuadro, tapado por
   ::after) y se apaga en línea recta hacia la izquierda. Se desborda por
   arriba, abajo y por la izquierda para darle aire al blur, y el clip-path
   recorta después el derrame vertical: ni un píxel de haz fuera de la altura
   del cuadro. Hacia la izquierda no se recorta, ahí es donde tiene que
   difuminarse. */
.step-number::before {
  content: '';
  position: absolute;
  inset: -1.5rem 0 -1.5rem -1.5rem;
  clip-path: inset(1.5rem 0);
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--color-primary, #1a56db) 42%, transparent) 0%,
    color-mix(in srgb, var(--color-primary, #1a56db) 26%, transparent) 20%,
    color-mix(in srgb, var(--color-primary, #1a56db) 12%, transparent) 48%,
    color-mix(in srgb, var(--color-primary, #1a56db) 4%, transparent) 74%,
    transparent 100%
  );
  filter: blur(14px);
}

/* El "cuello": una elipse achatada pegada al borde del cuadro, más densa y
   menos alta que el haz. Da la sensación de materia estirándose al separarse,
   como si el número se estuviera despegando de la tarjeta. */
.step-number::after {
  content: '';
  position: absolute;
  inset: -1.5rem 0;
  clip-path: inset(1.5rem 0);
  background: radial-gradient(
    130% 58% at 100% 50%,
    color-mix(in srgb, var(--color-primary, #1a56db) 58%, transparent) 0%,
    color-mix(in srgb, var(--color-primary, #1a56db) 30%, transparent) 42%,
    transparent 72%
  );
  filter: blur(10px);
}

/* El SVG escala con la altura de la banda: el dígito la desborda un pelín por
   arriba y por abajo (font-size > viewBox) y se alinea por su derecha, medio
   palmo por debajo de la tarjeta. Al ir del color de la sección, el haz parece
   recortado a su alrededor. */
.step-digit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.step-digit text {
  fill: var(--color-surface, #f6f8fb);
  font-family: inherit;
  font-size: 146px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.step h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--color-muted, #6b7280);
  font-size: 0.95rem;
}

/* Al pasar el ratón se aparta la tarjeta —superficie y texto— hacia la
   derecha y deja al descubierto el trozo de dígito que tenía tapado. El
   número y su haz no se mueven: son el punto fijo del gesto. */
.step::after,
.step h3,
.step p {
  transition: translate 0.3s ease;
}

.step:hover::after,
.step:hover h3,
.step:hover p {
  translate: 0.9rem;
}

/* --- Formulario --- */

.contact form {
  margin-top: 2rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-actions {
  margin-top: 0.5rem;
  text-align: center;
}

/* Página 404: los dos botones, centrados y apilados si no caben. */
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.form-field label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--color-text, #111827);
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius, 12px) / 2);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 1px;
  border-color: transparent;
}

/* Ayuda bajo un campo (p. ej. el código del diagnóstico en /contacto/). */
.form-help {
  margin-top: 0.35rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.85rem;
}

.form-help a {
  color: var(--color-primary, #1a56db);
  font-weight: 500;
}

.errorlist {
  list-style: none;
  color: #b91c1c;
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

.btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

/* Casilla de privacidad (templates/partials/form-consent.html): texto pequeño
   junto a la casilla, sin las medidas de los campos de texto. */
.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.form-field.form-consent input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  padding: 0;
  accent-color: var(--color-primary, #1a56db);
}

.form-consent-notice {
  margin-top: 0.5rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Honeypot: fuera de pantalla para humanos, visible para bots */
.hp-field {
  position: absolute;
  left: -9999px;
}

/* --- Mensajes (base.html / partials/messages.html) --- */

.messages {
  list-style: none;
  max-width: var(--max-width, 1080px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.messages li {
  padding: 0.85rem 1.25rem;
  margin: 0.75rem 0;
  border-radius: var(--radius, 12px);
  background: var(--color-surface, #f6f8fb);
  border: 1px solid var(--color-border, #e5e7eb);
}

.messages li.success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.messages li.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Mensaje de confirmación bajo el formulario de contacto */

.form-feedback .messages {
  max-width: none;
  padding: 0;
}

.form-feedback .messages li {
  margin: 1.25rem 0 0;
  text-align: center;
  font-weight: 500;
  animation: feedback-in 0.35s ease-out both;
}

@keyframes feedback-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* --- Confeti (static/js/confetti.js) --- */

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* El logo se muestra fijo: ni entrada, ni flotación, ni destello. */
  .logo-frame {
    animation: none;
  }

  .logo-frame::after {
    display: none;
  }

  .form-feedback .messages li {
    animation: none;
  }

  /* Se conservan el borde y la sombra; se eliminan elevación y balanceo. */
  .prop {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .prop:hover {
    translate: none;
    animation: none;
  }

  /* Los pasos no se apartan al pasar el ratón. */
  .step:hover::after,
  .step:hover h3,
  .step:hover p {
    translate: none;
  }

  /* Todo aparece ya colocado: ni entrada al hacer scroll ni 3D. */
  [data-reveal],
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .card-face,
  .card.is-active .card-face {
    transform: none;
    translate: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .card h3,
  .card p {
    transform: none;
    transition: none;
  }

  /* El hilo se muestra completo en lugar de trazarse con el scroll, y los
     iconos aparecen sin rebote. */
  .timeline-item.is-revealed > .card {
    animation: none;
    transform: none;
  }

  .timeline::after {
    height: 100%;
    transition: none;
  }

  .timeline-icon,
  .timeline-item.is-shown .timeline-icon {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* --- Footer --- */

.footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
  text-align: center;
  color: var(--color-muted, #6b7280);
  font-size: 0.9rem;
}

/* En la home, el footer sigue a "Quién está detrás" sin filete y más pegado:
   las redes se leen como cierre de esa sección. */
.team:has(+ .footer) {
  padding-bottom: 3rem;
}

.team + .footer {
  padding-top: 0;
  border-top: none;
}

/* Redes del footer de la home (home/partials/footer.html): píldoras como la
   de la marca de "Nuestra tecnología" (.tech-partner), con el logo oficial
   de Instagram a color. Encima del copyright y separadas de él por un filete. */
.footer-social {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.footer-social-title {
  margin-bottom: 0.9rem;
  color: var(--color-text, #111827);
  font-size: 0.95rem;
  font-weight: 600;
}

.footer-social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  list-style: none;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.1rem 0.45rem 0.6rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
  border-radius: 999px;
  color: var(--color-text, #111827);
  font-weight: 600;
  text-decoration: none;
  transition: translate 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-social-link:hover {
  translate: 0 -2px;
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 8px 18px -10px rgba(26, 86, 219, 0.45);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-primary, #1a56db) 45%, transparent);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 3px;
}

.footer-social-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link:hover {
    translate: none;
  }
}

/* Enlaces legales (templates/partials/legal-links.html): una línea discreta
   bajo el copyright, del mismo gris que el resto del pie. Es un <nav>, así que
   anula el padding superior de la `nav` genérica de la landing. */
.footer-legal {
  margin-top: 0.1rem;
  padding-top: 0;
  font-size: 0.8rem;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a[aria-current='page'] {
  color: var(--color-text, #111827);
  text-decoration: underline;
}

/* --- Páginas legales (apps/legal) --- */

.legal {
  display: block;
  padding: 3.5rem 0 4.5rem;
}

.legal h1 {
  font-size: 2rem;
}

.legal-updated {
  margin: 0.5rem 0 2rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.85rem;
}

.legal h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.15rem;
  text-align: left;
}

.legal p,
.legal ul {
  margin-bottom: 0.8rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.35rem;
}

.legal a {
  overflow-wrap: anywhere;
}

/* --- Timeline en pantallas estrechas --- */

/* El zigzag deja las tarjetas por debajo de 300 px: se pasa a columna única
   con el hilo pegado al margen izquierdo, alineado con el centro del nodo. */
@media (max-width: 768px) {
  .timeline {
    gap: 2.25rem;
  }

  .timeline::before,
  .timeline::after {
    left: 1.75rem;
  }

  .timeline-item {
    grid-template-columns: 3.5rem 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }

  /* Sin lado contrario disponible, el icono vuelve a hacer de nodo y el punto
     sobra. El disco toma el color de la sección: el hilo pasa por detrás sin
     que se vea ni el cruce ni el propio disco. */
  .timeline-node {
    display: none;
  }

  .timeline-item > .timeline-icon,
  .timeline-item:nth-child(even) > .timeline-icon {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
    border-radius: 50%;
    background: var(--color-surface, #f6f8fb);
  }

  .timeline-item > .card,
  .timeline-item:nth-child(even) > .card {
    grid-column: 2;
  }

  /* Sin zigzag, todas las tarjetas entran desde el mismo lado que el hilo. */
  .timeline-item.is-revealed > .card,
  .timeline-item:nth-child(even).is-revealed > .card {
    animation-name: timeline-card-left;
  }
}

/* --- Móvil --- */

@media (max-width: 640px) {
  section {
    padding: 3.5rem 0;
  }

  .hero {
    padding: 2rem 0 3.5rem;
  }

  /* A 11 rem el logo se comería buena parte de la primera pantalla. */
  .logo {
    height: 8rem;
  }

  h2,
  .contact h1 {
    font-size: 1.6rem;
  }

  .hero-sub {
    font-size: 1.05rem;
  }

  /* Sin ancho para un carril de 12rem: el haz se acorta y el dígito queda
     limitado por el ancho de la banda, no por la altura de la tarjeta. */
  .steps-grid {
    padding-left: 5.5rem;
  }

  .step-number {
    left: -5rem;
    width: 6rem;
  }
}

/* --- Chat flotante (apps/landing/templates/landing/partials/chat-widget.html, static/js/chat.js) --- */

/* Todo el widget cuelga de la esquina inferior derecha. Queda por encima de
   la página pero por debajo del confeti (z-index 9999). */
.chat {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;
}

/* Entra con un pequeño rebote poco después que el hero y luego "late": cada
   10 s emite una onda desde ::after y el contador da un saltito. El latido
   para en cuanto el visitante abre el chat o cierra la burbuja (.is-seen). */
.chat-launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: none;
  border-radius: 50%;
  /* Degradado al doble de tamaño: el hover lo desplaza hacia el tono oscuro
     (un degradado no se puede animar, su posición sí). */
  background: linear-gradient(
    135deg,
    var(--color-primary, #1a56db),
    var(--color-primary-dark, #1e429f)
  ) 0 0 / 200% 200%;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(26, 86, 219, 0.7);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--color-primary, #1a56db) 70%, transparent);
  transition:
    background-position 0.3s ease,
    translate 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    scale 0.2s ease;
  /* `backwards` y no `both`: una animación que se queda aplicada al terminar
     taparía las transiciones de opacity y scale del cierre en móvil. */
  animation: chat-launcher-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.6s backwards;
}

.chat-launcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #1a56db);
  opacity: 0;
  pointer-events: none;
  animation: chat-launcher-wave 10s ease-out 1.4s infinite;
}

.chat-launcher:hover {
  background-position: 100% 100%;
  translate: 0 -2px;
}

.chat.is-seen .chat-launcher::after,
.chat.is-open .chat-launcher::after {
  animation: none;
}

@keyframes chat-launcher-in {
  from {
    opacity: 0;
    scale: 0.4;
  }
}

/* La onda ocupa los primeros ~1,6 s del ciclo; el resto, reposo. */
@keyframes chat-launcher-wave {
  0% {
    opacity: 0.6;
    scale: 1;
  }
  16%,
  100% {
    opacity: 0;
    scale: 1.75;
  }
}

/* Contador "1": el saludo que espera dentro del chat. Salta al compás de la
   onda y se retira al abrir el chat. Color de aviso: THEME['color_accent']. */
.chat-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  display: grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  border: 2px solid var(--color-bg, #ffffff);
  border-radius: 999px;
  background: var(--color-accent, #e02424);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.2s ease, scale 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  animation: chat-badge-beat 10s ease-out 1.4s infinite;
}

.chat.is-seen .chat-badge,
.chat.is-open .chat-badge {
  opacity: 0;
  scale: 0.4;
  animation: none;
}

@keyframes chat-badge-beat {
  0%,
  8%,
  100% {
    translate: 0 0;
  }
  4% {
    translate: 0 -0.3rem;
  }
}

/* Burbuja de bienvenida sobre el botón, con la misma forma que los mensajes
   del asistente (esquina recortada hacia el botón). La muestra chat.js a los
   pocos segundos, una vez por sesión. Todo el texto es un botón que abre el
   chat; la ✕ solo la cierra. */
.chat-teaser {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.9rem);
  display: flex;
  align-items: flex-start;
  width: max-content;
  max-width: min(17rem, calc(100vw - 3rem));
  padding: 0.3rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1.1rem;
  border-bottom-right-radius: 0.35rem;
  box-shadow:
    0 2px 6px rgba(17, 24, 39, 0.06),
    0 16px 36px -14px rgba(17, 24, 39, 0.35);
  transform-origin: bottom right;
  animation: chat-teaser-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* `display: flex` taparía el `hidden` del navegador. */
.chat-teaser[hidden] {
  display: none;
}

.chat-teaser-text {
  flex: 1;
  padding: 0.45rem 0.35rem 0.45rem 0.7rem;
  border: none;
  border-radius: 0.8rem;
  background: none;
  color: var(--color-text, #111827);
  font: inherit;
  font-size: 0.925rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.chat-teaser-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-teaser-close:hover {
  background: var(--color-surface, #f6f8fb);
  color: var(--color-text, #111827);
}

.chat-teaser-text:focus-visible,
.chat-teaser-close:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 1px;
}

.chat-teaser-close svg {
  width: 0.9rem;
  height: 0.9rem;
}

@keyframes chat-teaser-in {
  from {
    opacity: 0;
    scale: 0.85;
    translate: 0 0.5rem;
  }
}

/* Los dos iconos ocupan la misma celda: al abrir, el bocadillo gira y se
   desvanece mientras la ✕ entra girando desde el lado contrario. */
.chat-launcher-icon {
  grid-area: 1 / 1;
  width: 1.8rem;
  height: 1.8rem;
  transition:
    opacity 0.2s ease,
    rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-launcher-close {
  opacity: 0;
  rotate: -90deg;
  scale: 0.6;
}

.chat.is-open .chat-launcher-open {
  opacity: 0;
  rotate: 90deg;
  scale: 0.6;
}

.chat.is-open .chat-launcher-close {
  opacity: 1;
  rotate: 0deg;
  scale: 1;
}

.chat-launcher:focus-visible,
.chat-send:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 3px;
}

/* Cerrado sigue en el DOM (para animar) pero `visibility` lo saca del foco y
   de los lectores de pantalla. Al cerrar, la visibilidad cambia al final de
   la transición; al abrir, al principio. */
.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1rem);
  display: flex;
  flex-direction: column;
  width: min(22.5rem, calc(100vw - 3rem));
  height: min(32.5rem, calc(100vh - 8rem));
  height: min(32.5rem, calc(100dvh - 8rem));
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius, 12px) * 1.5);
  box-shadow:
    0 2px 6px rgba(17, 24, 39, 0.06),
    0 24px 60px -20px rgba(17, 24, 39, 0.35);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  scale: 0.92;
  translate: 0 0.75rem;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    scale 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.25s;
}

.chat.is-open .chat-panel {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.chat-panel:focus {
  outline: none;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.75rem 1rem 1.25rem;
  background: linear-gradient(
    135deg,
    var(--color-primary, #1a56db),
    var(--color-primary-dark, #1e429f)
  );
  color: #ffffff;
}

.chat-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.chat-avatar svg {
  width: 1.35rem;
  height: 1.35rem;
}

.chat-heading {
  flex: 1;
  min-width: 0;
}

/* Es un <p>: el peso y el interlineado replican los de un encabezado. */
.chat-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  letter-spacing: -0.01em;
}

.chat-subtitle {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Punto de "en línea" con un latido suave. `inline-block` en vez de flex:
   el subtítulo puede ocupar dos líneas, y con flex el punto se centraba
   contra ese bloque entero en vez de quedar junto a la primera línea. Así
   fluye como parte del texto y solo se alinea con la línea en la que está. */
.chat-status {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: #81d66c;
  vertical-align: middle;
  animation: chat-status 2.4s ease-in-out infinite;
}

@keyframes chat-status {
  50% {
    opacity: 0.4;
  }
}

.chat-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Sobre la cabecera azul el anillo de foco tiene que ser blanco. */
.chat-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.chat-close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface, #f6f8fb);
}

/* pre-line respeta los saltos de línea que escriba el agente. */
.chat-bubble {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  font-size: 0.925rem;
  line-height: 1.5;
  border-radius: 1.1rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
  animation: chat-bubble-in 0.25s ease-out backwards;
}

.chat-bubble-bot {
  align-self: flex-start;
  color: var(--color-text, #111827);
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-bottom-left-radius: 0.35rem;
}

.chat-bubble-user {
  align-self: flex-end;
  color: #ffffff;
  background: var(--color-primary, #1a56db);
  border-bottom-right-radius: 0.35rem;
}

/* Mismos tonos que el mensaje de error del formulario (.messages li.error). */
.chat-bubble-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.chat-bubble-error a {
  color: inherit;
  font-weight: 600;
}

@keyframes chat-bubble-in {
  from {
    opacity: 0;
    translate: 0 0.5rem;
  }
}

.chat-typing {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
}

.chat-typing-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-muted, #6b7280);
  animation: chat-typing 1.2s ease-in-out infinite;
}

.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing {
  0%, 60%, 100% {
    opacity: 0.35;
    translate: 0 0;
  }
  30% {
    opacity: 1;
    translate: 0 -4px;
  }
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.35rem 0.5rem;
  padding: 0.75rem 0.75rem 0.5rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg, #ffffff);
}

/* 1rem de letra como mínimo: por debajo, iOS hace zoom al enfocar el campo. */
.chat-form textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  max-height: 7.5rem;
  padding: 0.6rem 1rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text, #111827);
  background: var(--color-surface, #f6f8fb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1.375rem;
  resize: none;
  overflow-y: auto;
}

.chat-form textarea:focus {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 1px;
  border-color: transparent;
}

.chat-send {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: var(--color-primary, #1a56db);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, scale 0.15s ease;
}

.chat-send:hover {
  background: var(--color-primary-dark, #1e429f);
}

.chat-send:active {
  scale: 0.92;
}

.chat-send:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* El avión de papel pesa visualmente a la izquierda: un píxel lo centra. */
.chat-send svg {
  width: 1.15rem;
  height: 1.15rem;
  translate: -1px 1px;
}

.chat-disclaimer {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--color-muted, #6b7280);
  text-align: center;
}

.chat-disclaimer a {
  color: inherit;
}

/* En móvil el panel ocupa toda la pantalla: el botón flotante se retira (la ✕
   de la cabecera cierra) y la página de detrás deja de hacer scroll. */
@media (max-width: 640px) {
  .chat {
    right: 1rem;
    bottom: 1rem;
  }

  /* Algo más pequeño que en escritorio para no tapar tanto contenido. */
  .chat-launcher {
    width: 3.5rem;
    height: 3.5rem;
  }

  .chat-launcher-icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .chat-teaser {
    max-width: calc(100vw - 2rem);
  }

  .chat-panel {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
  }

  .chat-form {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .chat.is-open .chat-launcher {
    opacity: 0;
    scale: 0.6;
    visibility: hidden;
  }

  html:has(.chat.is-open) {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* El panel aparece con un fundido, sin escalarse ni desplazarse. */
  .chat-panel,
  .chat.is-open .chat-panel {
    scale: none;
    translate: none;
  }

  /* Sin latido ni rebotes: el contador y la burbuja aparecen quietos. */
  .chat-launcher,
  .chat-launcher::after,
  .chat-badge,
  .chat-teaser,
  .chat-status,
  .chat-bubble {
    animation: none;
  }

  .chat-launcher:hover {
    translate: none;
  }

  .chat-launcher-icon {
    rotate: none;
    scale: none;
  }

  .chat.is-open .chat-launcher-open,
  .chat.is-open .chat-launcher-close {
    rotate: none;
    scale: none;
  }

  .chat-typing-dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ===================================================================== */
/* --- Web home (apps/home/templates/home/home.html) --- */
/* ===================================================================== */

/* Barra fija y translúcida: deja ver el contenido que pasa por debajo,
   difuminado. Sin soporte de color-mix se queda con el blanco casi opaco. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(255, 255, 255, 0.85);
  background: color-mix(in srgb, var(--color-bg, #ffffff) 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  border-bottom-color: color-mix(in srgb, var(--color-border, #e5e7eb) 70%, transparent);
}

/* Anula la `nav` genérica de la landing (centrada y con aire arriba). */
.site-nav {
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

.site-nav-brand {
  display: inline-flex;
  flex-shrink: 0;
}

.site-nav-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.site-nav-links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
}

.site-nav-links a {
  position: relative;
  padding: 0.35rem 0;
}

.site-nav-links a[aria-current='page'] {
  color: var(--color-primary, #1a56db);
}

.site-nav-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary, #1a56db);
}

/* Las anclas no quedan tapadas por la barra fija. */
.intro,
.products,
.support,
.tech,
.sectors,
.faq,
.team {
  scroll-margin-top: 4.5rem;
}

/* En móvil los enlaces no caben junto al logo: la fila se desplaza en
   horizontal, sin barra visible, en lugar de partirse en dos líneas. */
@media (max-width: 640px) {
  .site-nav {
    gap: 1rem;
  }

  .site-nav-links {
    gap: 1.1rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    font-size: 0.925rem;
  }

  .site-nav-links::-webkit-scrollbar {
    display: none;
  }
}

/* --- Hueco de foto (mientras no haya imagen real) --- */

.photo {
  display: block;
  width: 100%;
  border-radius: var(--radius, 12px);
  object-fit: cover;
}

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--color-surface, #f6f8fb);
  border: 2px dashed var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 30%, transparent);
  color: var(--color-muted, #6b7280);
  font-size: 0.9rem;
  text-align: center;
}

.photo-placeholder svg {
  width: 3rem;
  height: 3rem;
  color: var(--color-primary, #1a56db);
  opacity: 0.6;
}

/* --- Bloque 1: presentación --- */

.intro {
  padding: 5rem 0 6rem;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3.5rem;
}

.eyebrow {
  margin-bottom: 0.75rem;
  color: var(--color-primary, #1a56db);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.intro-description {
  margin-top: 1.25rem;
  color: var(--color-muted, #6b7280);
  font-size: 1.1rem;
}

.intro-description p + p {
  margin-top: 1rem;
}

.intro-photo {
  aspect-ratio: 4 / 3;
}

/* --- Sectores: carrusel 3D "antes y después" --- */

/* Sin JS (o con "reducir movimiento") los paneles van en una fila plana que
   se desliza con scroll-snap. static/js/sectors.js añade .is-enhanced: los
   paneles se apilan en la misma celda y cada uno se coloca en 3D según su
   data-pos. Los paneles laterales sobresalen de la página: la sección los
   recorta para que no aparezca scroll horizontal. */
.sectors {
  overflow: hidden;
  overflow: clip;
}

.sectors-carousel {
  margin-top: 3rem;
}

.sectors-track {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.sector-panel {
  flex: 0 0 min(88%, 560px);
  scroll-snap-align: center;
  padding: 2rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-top: 3px solid var(--color-primary, #1a56db);
  border-radius: var(--radius, 12px);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.05),
    0 10px 24px -18px rgba(17, 24, 39, 0.4);
}

.sectors-carousel.is-enhanced .sectors-track {
  display: grid;
  padding: 1rem 0 2rem;
  overflow: visible;
  scroll-snap-type: none;
  perspective: 1600px;
}

/* Todos en la misma celda: la pista mide lo que el panel más alto. */
.is-enhanced .sector-panel {
  grid-area: 1 / 1;
  justify-self: center;
  width: min(100%, 560px);
  backface-visibility: hidden;
  /* La capa (z-index) cambia con retraso: el panel que sale se aparta antes
     de que el que entra se le ponga delante. */
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.9s ease,
    z-index 0s linear 0.25s;
}

/* Como un tambor que gira: los laterales, más al fondo y con el borde
   exterior hundido; el siguiente entra por la derecha y sale por la
   izquierda. */
.is-enhanced .sector-panel[data-pos='active'] {
  z-index: 3;
  transform: none;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 28px 52px -30px rgba(26, 86, 219, 0.55);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 28px 52px -30px color-mix(in srgb, var(--color-primary, #1a56db) 55%, transparent);
}

.is-enhanced .sector-panel[data-pos='next'],
.is-enhanced .sector-panel[data-pos='prev'] {
  z-index: 2;
  opacity: 0.5;
  cursor: pointer;
}

.is-enhanced .sector-panel[data-pos='next'] {
  transform: translateX(62%) translateZ(-260px) rotateY(32deg);
}

.is-enhanced .sector-panel[data-pos='prev'] {
  transform: translateX(-62%) translateZ(-260px) rotateY(-32deg);
}

.is-enhanced .sector-panel[data-pos='next']:hover,
.is-enhanced .sector-panel[data-pos='prev']:hover {
  opacity: 0.7;
}

.is-enhanced .sector-panel[data-pos^='hidden'] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.is-enhanced .sector-panel[data-pos='hidden-right'] {
  transform: translateX(105%) translateZ(-560px) rotateY(60deg);
}

.is-enhanced .sector-panel[data-pos='hidden-left'] {
  transform: translateX(-105%) translateZ(-560px) rotateY(-60deg);
}

/* Colocación sin animar: al arrancar y al recolocar un panel oculto. */
.is-enhanced .sector-panel.is-instant {
  transition: none;
}

.sector-panel h3 {
  font-size: 1.3rem;
}

.sector-tagline {
  margin-top: 0.35rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.9rem;
}

.sector-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* "Antes" apagado sobre gris; "Con IAbits" teñido del color de marca. */
.sector-before,
.sector-after {
  padding: 1.1rem 1.1rem 1.25rem;
  border-radius: calc(var(--radius, 12px) * 0.75);
}

.sector-before {
  background: var(--color-surface, #f6f8fb);
}

.sector-after {
  background: var(--color-surface, #f6f8fb);
  background: color-mix(in srgb, var(--color-primary, #1a56db) 7%, var(--color-bg, #ffffff));
}

.sector-label {
  margin-bottom: 0.75rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sector-after .sector-label {
  color: var(--color-primary, #1a56db);
}

.sector-compare ul {
  display: grid;
  gap: 0.65rem;
  list-style: none;
}

.sector-compare li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.sector-before li {
  color: var(--color-muted, #6b7280);
}

/* Antes: un guion tenue. Después: la marca de verificación de los planes. */
.sector-before li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: calc(0.75em - 1px);
  width: 0.55rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.6;
}

.sector-after li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.25rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--color-primary, #1a56db);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

/* --- Controles: flechas laterales --- */

.sectors-stage {
  position: relative;
}

.sectors-arrow[hidden] {
  display: none;
}

/* Las flechas flotan a los lados del escenario, centradas en el panel (la
   pista tiene 1rem de relleno arriba y 2rem abajo). Invisibles hasta que el
   ratón entra en el escenario o el teclado enfoca una de ellas; mientras no
   se ven, tampoco se pueden pulsar por accidente. */
.sectors-arrow {
  position: absolute;
  top: calc(50% - 0.5rem);
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
  border-radius: 50%;
  background: var(--color-bg, #ffffff);
  color: var(--color-primary, #1a56db);
  box-shadow: 0 4px 12px -6px rgba(17, 24, 39, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    opacity 0.2s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.sectors-arrow-prev {
  left: 0;
}

.sectors-arrow-next {
  right: 0;
}

/* Solo con ratón: en táctil, :hover se queda pegado tras tocar. */
@media (hover: hover) {
  .sectors-stage:hover .sectors-arrow {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Con teclado se ven las dos en cuanto una tiene el foco. Van en reglas
   separadas: un navegador sin :has() descartaría la lista entera. */
.sectors-arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.sectors-stage:has(.sectors-arrow:focus-visible) .sectors-arrow {
  opacity: 1;
  pointer-events: auto;
}

.sectors-arrow:hover {
  background: var(--color-primary, #1a56db);
  border-color: var(--color-primary, #1a56db);
  color: #ffffff;
}

.sectors-arrow svg {
  width: 0.95rem;
  height: 0.95rem;
}

.sectors-arrow:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 3px;
}

/* Temporizador invisible: el panel activo corre una animación que no cambia
   nada visible y, al terminar, sectors.js pasa al siguiente. Cambiar este
   tiempo cambia el ritmo del carrusel. */
.is-enhanced .sector-panel[data-pos='active'] {
  animation: sectors-timer 6s linear forwards;
}

.sectors-carousel.is-paused .sector-panel {
  animation-play-state: paused;
}

@keyframes sectors-timer {
  from {
    --sectors-timer: 0;
  }
  to {
    --sectors-timer: 1;
  }
}

.sectors-cta {
  margin-top: 2.5rem;
  text-align: center;
}

.sectors-cta p {
  margin-bottom: 1.25rem;
  color: var(--color-muted, #6b7280);
}

@media (max-width: 640px) {
  .sector-panel {
    padding: 1.5rem 1.25rem;
  }

  .sector-compare {
    grid-template-columns: 1fr;
  }

  /* En móvil el panel ocupa casi todo el ancho: de los laterales solo
     asoma el borde, como pista de que hay más. */
  .is-enhanced .sector-panel[data-pos='next'] {
    transform: translateX(78%) translateZ(-260px) rotateY(32deg);
  }

  .is-enhanced .sector-panel[data-pos='prev'] {
    transform: translateX(-78%) translateZ(-260px) rotateY(-32deg);
  }
}

/* --- Bloque 2: productos --- */

/* Los fondos alternan blanco / gris en el orden de la home: presentación,
   tecnología (gris), sectores, productos (gris), soporte, preguntas (gris) y
   equipo. Si se reordenan las secciones, hay que mover también estos fondos. */
.products {
  background: var(--color-surface, #f6f8fb);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 880px;
  margin: 3rem auto 0;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 3rem auto 0;
}

/* Botón "Solicitar información" bajo los planes. La separación con el bloque
   del equipo la pone el padding inferior de la sección. */
.support-cta {
  margin-top: 3rem;
  text-align: center;
}

/* Columna flexible: el botón se queda abajo aunque una tarjeta tenga menos
   características que la otra. */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 12px);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.05),
    0 10px 24px -18px rgba(17, 24, 39, 0.4);
}

.product-featured {
  border: 2px solid var(--color-primary, #1a56db);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 24px 48px -28px rgba(26, 86, 219, 0.55);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 24px 48px -28px color-mix(in srgb, var(--color-primary, #1a56db) 55%, transparent);
}

.product-badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--color-primary, #1a56db);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.product h3 {
  font-size: 1.4rem;
}

.product-summary {
  margin-top: 0.5rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.95rem;
}

.product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 1.5rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.product-amount {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.product-price-note {
  color: var(--color-muted, #6b7280);
  font-size: 0.9rem;
}

/* "Impuestos incluidos": en su propia línea, más pequeño y justo encima del
   filete; el aire bajo el importe pasa a su margen superior. */
.product-tax-note {
  flex-basis: 100%;
  margin-top: 1.1rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.78rem;
}

.product-features {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 2rem;
  list-style: none;
}

/* Marca de verificación dibujada con dos bordes de una caja girada. */
.product-features li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.95rem;
}

.product-features li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--color-primary, #1a56db);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.product .btn {
  margin-top: auto;
  text-align: center;
}

/* Nota bajo el botón (PRODUCTS['cta_note']). Va en el relleno inferior de
   la tarjeta, fuera del flujo, para que el botón quede a la misma altura
   que el de la tarjeta vecina, que no lleva nota. */
.product-cta-note {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 0.55rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.78rem;
  text-align: center;
}

/* Variante secundaria del botón: mismo tamaño que .btn-primary, sin relleno. */
.btn-outline {
  background: transparent;
  color: var(--color-primary, #1a56db);
  box-shadow: inset 0 0 0 2px var(--color-primary, #1a56db);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-outline:hover {
  background: var(--color-primary, #1a56db);
  color: #ffffff;
}

/* --- Bloque 4: tecnología --- */

/* Fondo de superficie entre la presentación y los sectores (blancos): los
   fondos siguen alternando. */
.tech {
  background: var(--color-surface, #f6f8fb);
}

/* Seis columnas y tarjetas de dos: 3 por fila. Si la última fila queda
   incompleta, se centra sola, así que TECH_ITEMS puede crecer o menguar sin
   tocar el CSS:
   - 2 sueltas: empiezan en la columna 2 y la 4.
   - 1 suelta: ocupa las columnas 3 y 4. */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 3rem auto 0;
}

.tech-item {
  grid-column: span 2;
}

.tech-item:nth-child(3n + 1):nth-last-child(2) {
  grid-column: 2 / span 2;
}

.tech-item:nth-child(3n + 1):nth-last-child(2) + .tech-item {
  grid-column: 4 / span 2;
}

.tech-item:nth-child(3n + 1):last-child {
  grid-column: 3 / span 2;
}

.tech-item {
  padding: 1.75rem 1.5rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-top: 3px solid var(--color-primary, #1a56db);
  border-radius: var(--radius, 12px);
  /* La subida usa una curva de despegue (arranca rápido y frena suave); el
     borde y la luz, la misma transición que .prop. */
  transition:
    translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Levitación: igual que .prop:hover de la landing (elevación, borde y luz de
   fondo), pero sin balanceo: sube y se queda arriba mientras dura el hover.
   :active cubre el toque en pantallas táctiles, donde no hay hover. */
.tech-item:hover,
.tech-item:active {
  translate: 0 -6px;
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 12px 24px -12px rgba(26, 86, 219, 0.45);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--color-primary, #1a56db) 45%, transparent);
}

/* Subtítulo + marca en la misma línea; en pantallas estrechas la marca baja
   a la siguiente, centrada. */
.tech-powered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.65rem;
}

/* Píldora como .product-badge, pero en blanco con borde: acompaña al
   subtítulo sin competir con el título de la sección. */
/* El emblema va en un círculo pegado al borde izquierdo de la píldora, con el
   mismo aire alrededor que arriba y abajo. */
.tech-partner {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
  border-radius: 999px;
  color: var(--color-text, #111827);
  font-weight: 600;
  text-decoration: none;
  transition: translate 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.tech-partner:hover {
  translate: 0 -2px;
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 8px 18px -10px rgba(26, 86, 219, 0.45);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-primary, #1a56db) 45%, transparent);
}

a.tech-partner:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 3px;
}

/* El emblema tiene simetría de 90°: al pasar el ratón da un cuarto de vuelta
   y termina igual que empezó, un guiño sin cambiar el aspecto. */
.tech-partner-logo {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  object-fit: cover;
  transition: rotate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

a.tech-partner:hover .tech-partner-logo {
  rotate: 90deg;
}

@media (prefers-reduced-motion: reduce) {
  a.tech-partner:hover {
    translate: none;
  }

  /* Como .prop: se conservan el borde y la luz; se elimina la levitación. */
  .tech-item:hover,
  .tech-item:active {
    translate: none;
  }

  a.tech-partner:hover .tech-partner-logo {
    rotate: none;
  }
}

.tech-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.tech-item p {
  color: var(--color-muted, #6b7280);
  font-size: 0.95rem;
}

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

/* Acordeón con <details>/<summary>. Al abrir, la altura crece suave
   (::details-content + interpolate-size) y la respuesta entra con un fundido
   corto. Los navegadores sin ::details-content descartan esa regla y abren
   de golpe, pero conservan el fundido. */

/* Gris solo en la home, donde sigue al soporte (blanco). En la landing va
   tras los pasos (gris) y se queda en blanco. */
.support + .faq {
  background: var(--color-surface, #f6f8fb);
}

.faq-list {
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin: 3rem auto 0;
}

.faq-item {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 12px);
  interpolate-size: allow-keywords;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 40%, transparent);
}

/* Abierta: borde de marca y la misma luz que .tech-item, más contenida. */
.faq-item[open] {
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 12px 24px -16px rgba(26, 86, 219, 0.35);
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-primary, #1a56db) 35%, transparent);
}

.faq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    content-visibility 0.35s allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

/* Sin el triángulo del navegador: el icono propio va a la derecha. */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 3px;
}

/* «+» dibujado con dos barras: al abrir, la vertical gira hasta tumbarse
   sobre la horizontal y queda un «−». */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-primary, #1a56db);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
  transition: rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-icon::after {
  rotate: 90deg;
}

.faq-item[open] .faq-icon::after {
  rotate: 0deg;
}

.faq-answer {
  padding: 0 1.5rem 1.4rem;
  color: var(--color-muted, #6b7280);
}

.faq-answer p + p {
  margin-top: 0.75rem;
}

.faq-item[open] .faq-answer {
  animation: faq-answer-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes faq-answer-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* "Ver más preguntas": static/js/faq.js pone .is-collapsed en la lista y
   .faq-more (las preguntas a partir de FAQ_SECTION['visible']) se pliega.
   La altura va de 0fr a 1fr, que sí se anima, y las preguntas entran con un
   fundido. Sin JS no hay .is-collapsed: se ven todas.
   El recorte (.faq-more-clip) sobresale 0.75rem por los lados y 1.5rem por
   debajo, y .faq-more-inner lo compensa con relleno: así la sombra de una
   pregunta abierta no se corta. Esos 1.5rem siguen asomando con la lista
   plegada, por eso el contenido se oculta además con visibility. El margen
   negativo de .faq-more anula el hueco de la lista, que repone el relleno
   superior. */
.faq-more {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: -1rem;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-more-clip {
  min-height: 0;
  margin: 0 -0.75rem -1.5rem;
  overflow: hidden;
}

.faq-more-inner {
  display: grid;
  gap: 1rem;
  padding: 1rem 0.75rem 1.5rem;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.faq-list.is-collapsed .faq-more {
  grid-template-rows: 0fr;
}

/* Al plegar, se funde antes de cerrarse y se oculta al terminar. */
.faq-list.is-collapsed .faq-more-inner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.45s;
}

/* Al cargar, faq.js pliega sin animar. */
.faq-list.is-instant .faq-more,
.faq-list.is-instant .faq-more-inner {
  transition: none;
}

.faq-toggle-wrap {
  margin-top: 2rem;
  text-align: center;
}

.faq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-color: color-mix(in srgb, var(--color-primary, #1a56db) 30%, transparent);
  border-radius: 999px;
  background: var(--color-bg, #ffffff);
  color: var(--color-primary, #1a56db);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-toggle:hover {
  border-color: var(--color-primary, #1a56db);
  box-shadow: 0 12px 24px -16px rgba(26, 86, 219, 0.35);
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-primary, #1a56db) 35%, transparent);
}

.faq-toggle:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 3px;
}

/* El mismo «+» que cada pregunta, algo menor: desplegada, queda en «−». */
.faq-toggle .faq-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.faq-toggle[aria-expanded='true'] .faq-icon::after {
  rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .faq-icon::before,
  .faq-icon::after,
  .faq-more,
  .faq-more-inner,
  .faq-list.is-collapsed .faq-more-inner {
    transition: none;
  }

  .faq-item[open] .faq-answer {
    animation: none;
  }
}

@media (max-width: 640px) {
  .faq-question {
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
  }

  .faq-answer {
    padding: 0 1.25rem 1.2rem;
  }
}

/* --- Bloque 5: equipo --- */

.team-list {
  display: grid;
  gap: 2rem;
  max-width: 820px;
  margin: 3rem auto 0;
}

.team-member {
  display: grid;
  grid-template-columns: 12rem 1fr;
  align-items: center;
  gap: 2.5rem;
  padding: 2.25rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 12px);
}

.team-photo {
  aspect-ratio: 1;
  border-radius: 50%;
}

/* Con foto, el círculo es un marco que recorta y la imagen se acerca dentro
   hacia el punto de enfoque. Zoom y enfoque llegan como variables desde
   TEAM['photo_zoom'] y TEAM['photo_focus'] (home.html). */
.team-photo:has(.team-photo-img) {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #f6f8fb);
  /* Volumen por fuera, sin borde: dos sombras, una amplia y neutra que la
     despega de la tarjeta y otra corta teñida de marca. Las sombras no las
     recorta `overflow`, que solo afecta al contenido. */
  box-shadow:
    0 22px 44px -14px rgba(17, 24, 39, 0.45),
    0 8px 18px -8px rgba(26, 86, 219, 0.45);
  box-shadow:
    0 22px 44px -14px rgba(17, 24, 39, 0.45),
    0 8px 18px -8px color-mix(in srgb, var(--color-primary, #1a56db) 45%, transparent);
}

/* Volumen por dentro, encima de la foto: un brillo suave arriba a la
   izquierda (como si la luz viniera de ahí) y una viñeta que oscurece el
   borde del círculo. */
.team-photo:has(.team-photo-img)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.08), transparent 45%),
    radial-gradient(circle, transparent 58%, rgba(17, 24, 39, 0.3) 100%);
}

.team-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-focus, 50% 50%);
  transform-origin: var(--photo-focus, 50% 50%);
  scale: var(--photo-zoom, 1);
}

.team-photo.photo-placeholder {
  font-size: 0.8rem;
}

.team-photo.photo-placeholder svg {
  width: 2.5rem;
  height: 2.5rem;
}

.team-text h3 {
  font-size: 1.35rem;
}

.team-role {
  margin: 0.25rem 0 0.9rem;
  color: var(--color-primary, #1a56db);
  font-size: 0.95rem;
  font-weight: 600;
}

.team-text p:last-child {
  color: var(--color-muted, #6b7280);
}

/* --- Home en pantallas estrechas --- */

@media (max-width: 768px) {
  .intro {
    padding: 3rem 0 4rem;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 2.5rem;
  }

  .support-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 2.5rem;
  }

  /* En móvil, una sola columna: se anulan las posiciones de las tarjetas. */
  .tech-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .tech-item,
  .tech-item:nth-child(3n + 1):nth-last-child(2),
  .tech-item:nth-child(3n + 1):nth-last-child(2) + .tech-item,
  .tech-item:nth-child(3n + 1):last-child {
    grid-column: auto;
  }

  .team-member {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .team-photo {
    width: 10rem;
  }
}

/* --- Cuestionario (/encuesta/, apps/survey) ---

   Sin JS los pasos (.survey-step) se ven todos, uno debajo de otro, con un
   único botón de envío. static/js/survey.js enseña un paso cada vez, la barra
   de progreso y los botones de navegación. */

/* .btn y otras clases fijan display: sin esto, [hidden] no ocultaría nada. */
.survey [hidden] {
  display: none !important;
}

.survey {
  padding: 3.5rem 0 5rem;
}

.survey-header h1 {
  font-size: 2rem;
  text-align: center;
}

.survey-notes {
  display: grid;
  gap: 0.4rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--color-surface, #f6f8fb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 12px);
  color: var(--color-muted, #6b7280);
  font-size: 0.875rem;
}

.survey-notes li {
  position: relative;
  padding-left: 1.1rem;
}

.survey-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-primary, #1a56db);
}

.survey-form {
  margin-top: 2rem;
}

/* Botón de pruebas (solo con DEBUG=True): borde discontinuo para que no se
   confunda con la página real. */
.survey-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border: 2px dashed var(--color-accent, #e02424);
  border-radius: var(--radius, 12px);
}

.survey-demo-badge {
  flex-basis: 100%;
  color: var(--color-accent, #e02424);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.survey-demo-select {
  flex: 1;
  min-width: 14rem;
  width: auto;
}

/* Progreso */

.survey-progress {
  margin-bottom: 1.25rem;
}

.survey-progress-text {
  margin-bottom: 0.5rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.85rem;
  font-weight: 500;
}

.survey-progress-track {
  height: 6px;
  overflow: hidden;
  background: var(--color-border, #e5e7eb);
  border-radius: 999px;
}

.survey-progress-bar {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--color-primary, #1a56db);
  border-radius: inherit;
  transition: width 0.35s ease;
}

/* Pasos: tarjetas. El <legend> flota para no quedar montado sobre el borde
   del <fieldset>, que es como lo pintan los navegadores por defecto. */

.survey-step {
  min-width: 0;
  padding: 2rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius, 12px) * 1.5);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -16px rgba(17, 24, 39, 0.12);
}

.survey-step + .survey-step {
  margin-top: 1.5rem;
}

.survey-step.is-entering {
  animation: survey-step-in 0.35s ease-out both;
}

@keyframes survey-step-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.survey-step-title {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Recibe el foco al cambiar de paso (lectores de pantalla), sin anillo. */
.survey-step-title:focus {
  outline: none;
}

.survey-step-number {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary, #1a56db);
  color: #ffffff;
  font-size: 0.95rem;
}

.survey-step-sub {
  clear: both;
  padding-top: 0.4rem;
  color: var(--color-muted, #6b7280);
}

/* Preguntas */

.survey-question {
  min-width: 0;
  margin: 1.75rem 0 0;
  padding: 0;
  border: 0;
}

.survey-question-title {
  display: block;
  margin-bottom: 0.6rem;
  padding: 0;
  font-weight: 600;
  line-height: 1.4;
}

legend.survey-question-title {
  float: left;
  width: 100%;
}

.survey-question > legend + * {
  clear: both;
}

.survey-required {
  color: var(--color-primary, #1a56db);
}

.survey-hint {
  margin: -0.3rem 0 0.75rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.85rem;
}

/* Opciones: píldoras pulsables. La casilla real queda oculta pero sigue
   recibiendo el foco y el teclado; el ::before dibuja el círculo (una
   opción) o el cuadrado (varias). */

.survey-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.survey-option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.survey-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.survey-option-text {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  font-size: 0.925rem;
  line-height: 1.3;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.survey-option-text::before {
  content: '';
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 50%;
  background: var(--color-bg, #ffffff);
}

.survey-options-multiple .survey-option-text::before {
  border-radius: 4px;
}

.survey-option:hover .survey-option-text {
  border-color: var(--color-primary, #1a56db);
}

.survey-option input:checked + .survey-option-text {
  background: var(--color-primary, #1a56db);
  border-color: var(--color-primary, #1a56db);
  color: #ffffff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary, #1a56db) 70%, transparent);
}

/* Marcada: punto (una opción) o tic (varias), en blanco sobre el azul. */
.survey-option input:checked + .survey-option-text::before {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 3px var(--color-primary, #1a56db);
  background: #ffffff;
}

.survey-options-multiple .survey-option input:checked + .survey-option-text::before {
  width: 0.4rem;
  height: 0.75rem;
  margin: 0 0.25rem 0.15rem;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(45deg);
}

.survey-option input:focus-visible + .survey-option-text {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 2px;
}

/* Campos de texto: mismas medidas que los del formulario de contacto. */

.survey-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--color-text, #111827);
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius, 12px) / 2);
}

.survey-input:focus {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: 1px;
  border-color: transparent;
}

textarea.survey-input {
  resize: vertical;
}

.survey-other-input {
  max-width: 22rem;
  margin-top: 0.75rem;
}

.survey-group-error {
  margin-top: 0.5rem;
  color: #b91c1c;
  font-size: 0.9rem;
}

/* Deslizador 1–5: pista rellena hasta el valor (--fill, que pone survey.js)
   y marcas debajo, alineadas con el centro del tirador (22 px). */

.survey-scale-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.survey-scale-value {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -0.3rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 50%;
  background: var(--color-surface, #f6f8fb);
  color: var(--color-primary, #1a56db);
  font-weight: 700;
}

.survey-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 0.9rem 0 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-primary, #1a56db) var(--fill, 50%),
    var(--color-border, #e5e7eb) var(--fill, 50%)
  );
  cursor: pointer;
}

.survey-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-primary, #1a56db);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
  transition: transform 0.15s ease;
}

.survey-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-primary, #1a56db);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
  transition: transform 0.15s ease;
}

.survey-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.survey-range:active::-moz-range-thumb {
  transform: scale(1.12);
}

.survey-range:focus {
  outline: none;
}

.survey-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
}

.survey-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #1a56db) 25%, transparent);
}

.survey-scale-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 11px;
  color: var(--color-muted, #6b7280);
  font-size: 0.75rem;
}

.survey-scale-ticks span {
  display: flex;
  justify-content: center;
  width: 0;
}

.survey-scale-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.8rem;
}

.survey-scale-labels span:last-child {
  text-align: right;
}

/* Último paso: contacto en dos columnas y la casilla de privacidad. */

.survey-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.survey-contact .survey-question {
  margin-top: 1.25rem;
}

.survey-step .form-consent {
  margin: 1.75rem 0 0;
}

/* Navegación */

.survey-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.survey-nav [data-survey-prev] {
  margin-right: auto;
}

/* Cierre tras enviar: tarjeta centrada con el botón hacia la home. */

.survey-done {
  margin-top: 2rem;
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius, 12px) * 1.5);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -16px rgba(17, 24, 39, 0.12);
  animation: survey-step-in 0.45s ease-out both;
}

.survey-done-icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary, #1a56db) 12%, transparent);
  color: var(--color-primary, #1a56db);
}

.survey-done-title {
  font-size: 1.5rem;
}

.survey-done-text {
  max-width: 460px;
  margin: 0.75rem auto 0;
  color: var(--color-muted, #6b7280);
}

.survey-done-cta {
  margin-top: 1.25rem;
}

/* Presentación del fundador entre la confirmación y el botón, separada por
   filetes. Foto y textos reutilizan las clases del equipo de la home. */

.survey-founder,
.survey-done-next {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.survey-founder-label {
  margin-bottom: 1.25rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.survey-founder-card {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
  gap: 1.75rem;
  text-align: left;
}

.survey-founder-text h3 {
  font-size: 1.2rem;
}

.survey-founder-text .team-role {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.9rem;
}

.survey-founder-bio {
  color: var(--color-muted, #6b7280);
  font-size: 0.925rem;
}

/* Propuestas de la IA bajo el cierre (survey/partials/report.html). Cada
   tarjeta compara el "antes" (gris) con el "después" (azul de marca). */

.survey-report {
  margin-top: 3rem;
}

.survey-report-title {
  font-size: 1.5rem;
  text-align: center;
}

.survey-report-intro,
.survey-report-loading,
.survey-report-failed {
  margin-top: 0.75rem;
  color: var(--color-muted, #6b7280);
  text-align: center;
}

.survey-report-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.survey-report-spinner {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border, #e5e7eb);
  border-top-color: var(--color-primary, #1a56db);
  border-radius: 50%;
  animation: survey-spin 0.8s linear infinite;
}

@keyframes survey-spin {
  to {
    transform: rotate(360deg);
  }
}

.survey-report-failed {
  padding: 1rem 1.25rem;
  background: var(--color-surface, #f6f8fb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 12px);
}

.survey-report-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

.survey-idea {
  padding: 1.5rem;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: calc(var(--radius, 12px) * 1.5);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -16px rgba(17, 24, 39, 0.12);
  animation: survey-step-in 0.4s ease-out both;
}

.survey-idea-title {
  font-size: 1.1rem;
  line-height: 1.35;
}

.survey-idea-service {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary, #1a56db) 10%, transparent);
  color: var(--color-primary, #1a56db);
  font-size: 0.8rem;
  font-weight: 600;
}

.survey-idea-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.1rem;
  font-size: 0.925rem;
}

.survey-idea-before,
.survey-idea-after {
  padding: 0.9rem 1rem;
  border-radius: var(--radius, 12px);
}

.survey-idea-before {
  background: var(--color-surface, #f6f8fb);
  color: var(--color-muted, #6b7280);
}

.survey-idea-after {
  background: color-mix(in srgb, var(--color-primary, #1a56db) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #1a56db) 20%, transparent);
}

.survey-idea-label {
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.survey-idea-after .survey-idea-label {
  color: var(--color-primary, #1a56db);
}

.survey-report-note {
  margin-top: 1.25rem;
  color: var(--color-muted, #6b7280);
  font-size: 0.8rem;
  text-align: center;
}

.survey-report-cta {
  margin-top: 2rem;
  text-align: center;
}

.survey-report-cta p {
  margin-bottom: 1rem;
  color: var(--color-muted, #6b7280);
}

@media (max-width: 640px) {
  .survey {
    padding: 2.5rem 0 4rem;
  }

  .survey-step {
    padding: 1.5rem 1.25rem;
  }

  .survey-contact {
    grid-template-columns: 1fr;
  }

  .survey-done {
    padding: 2rem 1.25rem;
  }

  .survey-founder-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
  }

  .survey-founder-photo {
    width: 7.5rem;
  }

  .survey-idea {
    padding: 1.25rem;
  }

  .survey-idea-compare {
    grid-template-columns: 1fr;
  }

  .survey-nav .btn {
    flex: 1;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .survey-step.is-entering,
  .survey-done,
  .survey-idea {
    animation: none;
  }

  /* La rueda de carga sigue girando, pero despacio. */
  .survey-report-spinner {
    animation-duration: 2.4s;
  }

  .survey-progress-bar,
  .survey-option-text {
    transition: none;
  }

  /* Por separado: un pseudo-elemento que el navegador no conoce invalida
     todo el selector que lo incluye. */
  .survey-range::-webkit-slider-thumb {
    transition: none;
  }

  .survey-range::-moz-range-thumb {
    transition: none;
  }
}