@import url("/web/content/785?v=61642c58");

/* =========================================================================
   SINFOTRAN — Hoja de estilos
   Escrita a mano, sin frameworks ni dependencias externas.
   Organizacion: 1) variables  2) base  3) piezas reutilizables
                 4) cabecera   5) secciones  6) pie  7) responsive
   ========================================================================= */

/* ---------- 1. Variables ------------------------------------------------ */
:root {
  /* Colores de marca, los mismos de siempre */
  --azul-marino:   #0D2159;
  --azul:          #1A4DBE;
  --azul-claro:    #3A76F0;
  --gris-fondo:    #F4F7FA;
  --gris-texto:    #54595F;

  /* Papeles asignados (modo claro) */
  --fondo:          #FFFFFF;
  --fondo-alterno:  var(--gris-fondo);
  --fondo-tarjeta:  #FFFFFF;
  --borde:          #E3E9F2;
  --titulo:         var(--azul-marino);
  --texto:          var(--gris-texto);
  --texto-suave:    #7A8290;
  --acento:         var(--azul);
  --acento-claro:   var(--azul-claro);
  --sobre-acento:   #FFFFFF;
  --sombra:         0 1px 2px rgba(13, 33, 89, .04), 0 8px 24px rgba(13, 33, 89, .06);
  --sombra-alta:    0 2px 4px rgba(13, 33, 89, .06), 0 16px 40px rgba(13, 33, 89, .12);

  /* Tipografia fluida: se adapta al ancho sin saltos bruscos */
  /* El maximo se ha fijado para que el titular del heroe entre en dos
     lineas, como en la web original, sin partir las frases. */
  --t-titular:  clamp(2.1rem, 1.25rem + 2.6vw, 3rem);
  --t-seccion:  clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --t-tarjeta:  clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --t-cuerpo:   clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-pequeno:  .9375rem;

  /* Medidas */
  --ancho:        1200px;
  --ancho-texto:  68ch;
  --radio:        14px;
  --radio-chico:  8px;
  --alto-cabecera: 76px;

  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);

  /* Avisa al navegador del tema, para que barras de desplazamiento y
     controles de formulario se pinten acordes */
  color-scheme: light;
}

/* Modo oscuro: sigue la preferencia del sistema... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo:         #0A1428;
    --fondo-alterno: #0E1B33;
    --fondo-tarjeta: #132445;
    --borde:         #21365E;
    --titulo:        #EAF0FB;
    --texto:         #A9B6CC;
    --texto-suave:   #7D8CA6;
    --acento:        #5B8CF7;
    --acento-claro:  #8FB2FA;
    --sobre-acento:  #06122B;
    --sombra:        0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --sombra-alta:   0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .5);
  }
}

/* ...y el boton de la cabecera puede forzarlo en cualquier sentido */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo:         #0A1428;
  --fondo-alterno: #0E1B33;
  --fondo-tarjeta: #132445;
  --borde:         #21365E;
  --titulo:        #EAF0FB;
  --texto:         #A9B6CC;
  --texto-suave:   #7D8CA6;
  --acento:        #5B8CF7;
  --acento-claro:  #8FB2FA;
  --sobre-acento:  #06122B;
  --sombra:        0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-alta:   0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .5);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transicion), color var(--transicion);
}

h1, h2, h3, h4 {
  font-family: Montserrat, system-ui, sans-serif;
  color: var(--titulo);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

button { font-family: inherit; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento-claro); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--acento-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenido, para quien navega con teclado */
.salto-contenido {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 200; background: var(--acento); color: var(--sobre-acento);
  padding: .7rem 1.4rem; border-radius: 0 0 var(--radio-chico) var(--radio-chico);
  font-weight: 600; text-decoration: none; transition: translate var(--transicion);
}
.salto-contenido:focus { translate: -50% 0; color: var(--sobre-acento); }

/* ---------- 3. Piezas reutilizables ------------------------------------- */
.contenedor {
  width: 100%; max-width: var(--ancho);
  margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.seccion { padding-block: clamp(3.5rem, 7vw, 7rem); }
.seccion--alterna { background: var(--fondo-alterno); }

.antetitulo {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 1rem;
}

.titulo-seccion { font-size: var(--t-seccion); font-weight: 800; }
.titulo-seccion em { font-style: normal; color: var(--acento); }

.entradilla {
  max-width: var(--ancho-texto);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--texto);
}

/* Botones */
.boton {
  --relleno: .85rem 1.75rem;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: var(--relleno);
  font-family: Montserrat, sans-serif; font-size: .9375rem; font-weight: 700;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), translate var(--transicion),
              box-shadow var(--transicion);
}
.boton:hover { translate: 0 -2px; }
.boton:active { translate: 0 0; }

.boton--principal {
  background: var(--acento); color: var(--sobre-acento);
  box-shadow: 0 4px 14px rgba(26, 77, 190, .3);
}
.boton--principal:hover {
  background: var(--azul-marino); color: #fff;
  box-shadow: 0 8px 24px rgba(26, 77, 190, .38);
}

.boton--secundario {
  background: transparent; color: var(--acento); border-color: var(--borde);
}
.boton--secundario:hover { border-color: var(--acento); background: var(--fondo-alterno); }

/* Aparicion al desplazar. Sin JavaScript activo todo se ve igualmente:
   la clase .aparece solo se anade desde el script. */
.aparece {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .3, 1);
}
.aparece.visible { opacity: 1; translate: 0 0; }

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

/* ---------- 4. Cabecera ------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  height: var(--alto-cabecera);
  display: flex; align-items: center;
}

/* El efecto cristal va en un pseudoelemento a proposito: aplicar
   backdrop-filter directamente sobre .cabecera la convertiria en bloque
   contenedor y encerraria dentro de ella el menu de movil, que necesita
   ocupar toda la pantalla. */
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion);
}
.cabecera.desplazada::before { border-bottom-color: var(--borde); box-shadow: var(--sombra); }

.cabecera__interior {
  display: flex; align-items: center; gap: 1.5rem; width: 100%;
}
.cabecera__logo { margin-right: auto; display: flex; align-items: center; }
.cabecera__logo img { height: 38px; width: auto; }

/* El logo es azul oscuro: en modo oscuro se aclara para que se lea */
:root[data-tema="oscuro"] .cabecera__logo img,
:root[data-tema="oscuro"] .pie__logo img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cabecera__logo img,
  :root:not([data-tema="claro"]) .pie__logo img { filter: brightness(0) invert(1); }
}

.menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative; display: block;
  padding: .5rem .9rem; border-radius: var(--radio-chico);
  font-family: Montserrat, sans-serif; font-size: .9375rem; font-weight: 600;
  color: var(--titulo); text-decoration: none;
  transition: color var(--transicion), background-color var(--transicion);
}
.menu a:hover { color: var(--acento); background: var(--fondo-alterno); }
.menu a[aria-current="page"] { color: var(--acento); }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .15rem;
  height: 2px; border-radius: 2px; background: var(--acento);
}

/* Boton de tema */
.tema {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  background: transparent; color: var(--titulo);
  border: 1px solid var(--borde); border-radius: 50%;
  cursor: pointer; transition: all var(--transicion);
}
.tema:hover { color: var(--acento); border-color: var(--acento); rotate: 12deg; }
.tema svg { width: 19px; height: 19px; }
.tema .icono-luna { display: none; }
:root[data-tema="oscuro"] .tema .icono-sol { display: none; }
:root[data-tema="oscuro"] .tema .icono-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .icono-sol { display: none; }
  :root:not([data-tema="claro"]) .tema .icono-luna { display: block; }
}

/* Boton hamburguesa: solo en movil */
.hamburguesa {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  cursor: pointer;
}
.hamburguesa span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--titulo); border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
body.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
body.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Secciones ------------------------------------------------ */

/* Heroe */
.heroe {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem);
  background:
    radial-gradient(120% 90% at 85% 8%, color-mix(in srgb, var(--azul-claro) 16%, transparent) 0%, transparent 60%),
    radial-gradient(90% 80% at 5% 95%, color-mix(in srgb, var(--azul) 10%, transparent) 0%, transparent 55%),
    var(--fondo);
}
.heroe__interior {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
.heroe__titulo {
  font-size: var(--t-titular); font-weight: 800; margin-bottom: 1.2rem;
}
.heroe__titulo span { color: var(--acento); display: block; }
.heroe__texto {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  max-width: 46ch; margin-bottom: 2rem;
}
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }
.heroe__imagen { position: relative; }
.heroe__imagen img {
  width: 100%;
  /* Todas las laminas ocupan la misma caja. Sin esto, una captura mas alta
     que otra hace que el carrusel pegue un salto al cambiar. 'contain'
     porque son pantallazos: recortarlos seria peor que dejar aire. */
  aspect-ratio: 712 / 485; object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(13, 33, 89, .18));
}

/* ---------- Carrusel de la portada --------------------------------------
   Las laminas se apilan en la misma celda de una rejilla, no una al lado de
   otra. Asi la altura del carrusel es la de la lamina mas alta y no hay que
   calcular nada con JavaScript.

   Sin JavaScript solo se ve la primera, que es justo lo que habia antes de
   montar esto. El carrusel es un anadido, no un requisito. */
.heroe__pista { display: grid; }
.heroe__diapositiva {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.heroe__diapositiva[data-activa] { opacity: 1; visibility: visible; }

.heroe__mandos {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.heroe__flecha, .heroe__pausa {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%;
  background: var(--fondo); color: var(--titulo);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.heroe__pausa { font-size: .75rem; margin-left: .5rem; }
.heroe__flecha:hover, .heroe__pausa:hover {
  background: var(--fondo-alterno); border-color: var(--acento);
}
.heroe__puntos { display: flex; gap: .5rem; margin-inline: .5rem; }
.heroe__punto {
  width: .625rem; height: .625rem; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--borde);
  transition: background var(--transicion), transform var(--transicion);
}
.heroe__punto[aria-current="true"] { background: var(--acento); transform: scale(1.3); }

/* Con un solo hero no hay nada que manejar */
.heroe__mandos:has(.heroe__punto:only-child) { display: none; }

/* Titulo accesible que no se ve, para buscadores y lectores de pantalla */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Tarjetas de servicios */
/* El minimo de 245px permite cuatro tarjetas en una fila en pantallas
   grandes, y baja a tres, dos o una segun el ancho disponible. */
.rejilla-servicios {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.servicio {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--acento) 40%, var(--borde));
}
.servicio__icono {
  width: 84px; height: 84px; margin-bottom: 1.25rem;
  object-fit: contain; object-position: left center;
}
.servicio h3 { font-size: var(--t-tarjeta); font-weight: 700; margin-bottom: .5rem; }
.servicio__lema {
  font-family: Montserrat, sans-serif; font-weight: 600;
  color: var(--acento); margin-bottom: .75rem;
}
.servicio p:last-child { color: var(--texto); font-size: var(--t-pequeno); }

/* Ecosistema 360 */
.ecosistema__interior {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: .9fr 1.1fr; align-items: center;
}
.ecosistema__imagen img {
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}

.cifras {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin-block: clamp(2rem, 4vw, 3rem);
  list-style: none; padding: 0;
}
.cifra {
  padding: 1.25rem 1rem;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  text-align: center;
}
.cifra__numero {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  font-weight: 800; line-height: 1; color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.cifra__etiqueta {
  display: block; margin-top: .5rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
}

/* Tecnologia: bloques alternos */
.bloques-tecnologia {
  display: grid; gap: clamp(3rem, 6vw, 5.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bloque-tec {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.bloque-tec:nth-child(even) .bloque-tec__imagen { order: 2; }
.bloque-tec__imagen img {
  width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.bloque-tec h3 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight: 700;
}
.bloque-tec__logo { height: 30px; width: auto; margin-bottom: 1.1rem; }

/* Llamada final */
.llamada {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--azul-marino), var(--azul));
  color: #fff; text-align: center;
}
.llamada h2 { color: #fff; font-size: var(--t-seccion); font-weight: 800; }
.llamada p { color: rgba(255, 255, 255, .85); max-width: 56ch; margin-inline: auto; }
.llamada .boton--principal {
  margin-top: 1.75rem; background: #fff; color: var(--azul-marino);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}
.llamada .boton--principal:hover { background: var(--gris-fondo); color: var(--azul-marino); }

/* ---------- 5b. Páginas interiores -------------------------------------- */

/* Encabezado de página (Servicios, Nosotros, Contacto, textos legales...) */
.portada-interior {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(110% 100% at 90% 0%, color-mix(in srgb, var(--azul-claro) 14%, transparent) 0%, transparent 62%),
    var(--fondo-alterno);
  border-bottom: 1px solid var(--borde);
}
.portada-interior h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; margin-bottom: .5rem;
}
.portada-interior p { max-width: var(--ancho-texto); margin-bottom: 0; }

/* Migas de pan */
.migas { margin-bottom: 1rem; font-size: .875rem; color: var(--texto-suave); }
.migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.migas li:not(:last-child)::after { content: "›"; margin-left: .4rem; opacity: .6; }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }

/* Texto largo: avisos legales, privacidad, artículos del blog */
.prosa { max-width: 74ch; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 700;
  margin-top: 2.2em; margin-bottom: .6em;
}
.prosa h3 {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); font-weight: 700;
  margin-top: 1.8em; margin-bottom: .5em;
}
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li + li { margin-top: .4em; }
.prosa strong { color: var(--titulo); }
.prosa a { font-weight: 600; }
.prosa table {
  width: 100%; border-collapse: collapse; font-size: var(--t-pequeno);
  display: block; overflow-x: auto;
}
.prosa th, .prosa td { padding: .6rem .8rem; border: 1px solid var(--borde); text-align: left; }
.prosa th { background: var(--fondo-alterno); color: var(--titulo); font-weight: 700; }

/* Listado del blog */
.rejilla-blog {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.tarjeta-post {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.tarjeta-post:hover {
  transform: translateY(-6px); box-shadow: var(--sombra-alta);
  border-color: color-mix(in srgb, var(--acento) 40%, var(--borde));
}
.tarjeta-post__imagen { aspect-ratio: 16 / 10; overflow: hidden; }
.tarjeta-post__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-post:hover .tarjeta-post__imagen img { scale: 1.04; }
.tarjeta-post__imagen img { transition: scale var(--transicion); }
.tarjeta-post__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.tarjeta-post h2, .tarjeta-post h3 {
  font-size: var(--t-tarjeta); font-weight: 700; margin-bottom: .6rem;
}
.tarjeta-post h2 a, .tarjeta-post h3 a { color: inherit; text-decoration: none; }
.tarjeta-post h2 a:hover, .tarjeta-post h3 a:hover { color: var(--acento); }
.tarjeta-post p { font-size: var(--t-pequeno); }
.tarjeta-post__enlace {
  margin-top: auto; padding-top: 1rem;
  font-family: Montserrat, sans-serif; font-size: .875rem; font-weight: 700;
  color: var(--acento); text-decoration: none;
}
.tarjeta-post__enlace:hover { text-decoration: underline; }
.tarjeta-post__enlace::after { content: " →"; }

/* Artículo del blog */
.articulo { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.articulo__imagen {
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta);
}
.articulo__imagen img { width: 100%; }

/* Bloques alternos de texto e imagen (Nosotros, Servicios) */
.bloques-alternos { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }

/* Pasos numerados de la metodología */
.pasos {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: paso;
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
}
.paso {
  counter-increment: paso;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.paso::before {
  content: counter(paso);
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  color: var(--acento); border-radius: 50%;
  font-family: Montserrat, sans-serif; font-size: 1.05rem; font-weight: 800;
}
.paso h3 { font-size: var(--t-tarjeta); font-weight: 700; margin-bottom: .4rem; }
.paso p { font-size: var(--t-pequeno); margin-bottom: 0; }

/* Capturas de pantalla de una aplicacion.
   Se usan en la pagina de hosteleria. El fondo alterno evita que una captura
   de fondo claro se funda con la pagina, y el borde la separa del texto. */
.captura {
  margin: 0;
  background: var(--fondo-alterno);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}
.captura img { width: 100%; }
.captura figcaption {
  padding: .8rem 1.1rem;
  font-size: .8125rem; color: var(--texto-suave);
  border-top: 1px solid var(--borde);
}
/* La captura principal, a todo el ancho del texto */
.captura--destacada { box-shadow: var(--sombra-alta); }

/* El recibo del TPV es un ticket de papel: estrecho y muy alto. Se limita al
   ancho que tiene de verdad, unos 8 cm, para que se lea como lo que es y no
   como un cartel. */
.captura--recibo { max-width: 340px; margin-inline: auto; }

/* La factura impresa es vertical, como el folio que es. A todo el ancho de la
   pagina ocuparia una pantalla entera, asi que se limita y se centra. */
.captura--documento {
  max-width: 620px; margin-inline: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- La demo abierta ---------------------------------------------
   Lleva fondo propio para que no parezca una seccion mas: es la unica de la
   pagina donde se le pide algo al visitante. */
.demo-abierta {
  background:
    radial-gradient(90% 80% at 15% 10%, color-mix(in srgb, var(--azul-claro) 14%, transparent) 0%, transparent 60%),
    var(--fondo-alterno);
}
.demo-abierta__enlace {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem; margin: 2rem 0 0;
}
.demo-abierta__enlace span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9375rem; color: var(--texto-suave);
}
.demo-abierta__titulo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 1.25rem; color: var(--titulo);
}
/* La clave, destacada: es lo que el visitante viene a copiar. */
.demo-abierta__clave { margin: 0 0 .75rem; }
.demo-abierta__clave code {
  display: inline-block; padding: .35rem .7rem;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio-chico, .4rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875rem; color: var(--acento); font-weight: 600;
  user-select: all;
}

/* Esquema del recorrido de una comanda. Va en SVG dentro del HTML para que
   siga el tema claro/oscuro: los colores salen de las variables, no del
   archivo. */
.esquema {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  background: var(--fondo-alterno);
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.esquema svg { width: 100%; height: auto; display: block; }
.esquema figcaption {
  margin-top: 1rem; font-size: .8125rem; color: var(--texto-suave);
}
.esq__origen rect { fill: var(--acento); }
.esq__destino rect { fill: var(--fondo); stroke: var(--borde); stroke-width: 1.5; }
/* Las que van al papel se distinguen con el borde de acento: el color solo
   no vale, hay quien no lo diferencia. Por eso ademas pone "Impresora". */
.esq__destino--impresora rect { stroke: var(--acento); stroke-dasharray: 6 4; }
.esq__nombre {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px;
  text-anchor: middle; fill: var(--titulo);
}
.esq__origen .esq__nombre, .esq__origen .esq__tipo { fill: #fff; }
.esq__tipo { font-size: 13px; text-anchor: middle; fill: var(--texto-suave); }
.esq__linea { fill: none; stroke: var(--borde); stroke-width: 2; }

/* Rejilla de capturas. El minimo de 300px deja dos por fila en tableta
   y una sola en movil, que es cuando el detalle deja de leerse. */
.galeria {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Capturas de movil: son verticales y muy altas. Sin frenarlas ocuparian
   media pagina cada una, asi que se limitan y se centran, como dos telefonos
   uno al lado del otro. */
.galeria--movil {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px));
  justify-content: center;
}

/* ---------- 5c. Formulario ---------------------------------------------- */
.formulario { display: grid; gap: 1.1rem; max-width: 640px; }
.campo { display: grid; gap: .4rem; }
.campo label {
  font-family: Montserrat, sans-serif; font-size: .875rem; font-weight: 600;
  color: var(--titulo);
}
.campo input, .campo textarea {
  width: 100%; padding: .8rem 1rem;
  font-family: inherit; font-size: 1rem; color: var(--titulo);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-suave); }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
.campo textarea { resize: vertical; min-height: 150px; }
.campo--requerido label::after { content: " *"; color: var(--acento); }

.aceptacion { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-pequeno); }
.aceptacion input { flex: none; width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--acento); }

/* Campo trampa para robots: invisible para las personas */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Datos de contacto junto al formulario */
.contacto__interior {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.1fr .9fr; align-items: start;
}
.datos-contacto {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fondo-alterno);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.datos-contacto h2 { font-size: var(--t-tarjeta); font-weight: 700; }
.datos-contacto ul { list-style: none; margin: 0; padding: 0; }
.datos-contacto li + li { margin-top: 1rem; }
.datos-contacto a { font-weight: 600; text-decoration: none; }
.datos-contacto a:hover { text-decoration: underline; }
.datos-contacto span {
  display: block; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
}

/* Aviso de resultado del envío */
.aviso {
  padding: 1.25rem 1.5rem; border-radius: var(--radio);
  border-left: 4px solid var(--acento); background: var(--fondo-alterno);
  max-width: 640px;
}
.aviso--bien { border-left-color: #1a7f37; }
.aviso--mal { border-left-color: #b3261e; }
.aviso h2 { font-size: var(--t-tarjeta); font-weight: 700; margin-bottom: .4rem; }

/* ---------- 6. Pie ------------------------------------------------------ */
.pie {
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  background: var(--fondo-alterno);
  border-top: 1px solid var(--borde);
  font-size: var(--t-pequeno);
}
.pie__superior {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.2fr 1fr 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--borde);
}
.pie__logo img { height: 40px; width: auto; margin-bottom: 1rem; }
.pie h2 {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--titulo); margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li + li { margin-top: .5rem; }
.pie a { color: var(--texto); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie__contacto a { font-weight: 600; }

.pie__inferior {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.5rem; color: var(--texto-suave);
}

.kit-digital {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--borde); text-align: center;
}
.kit-digital p {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 1.25rem;
}
.kit-digital__logos {
  display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center; justify-content: center;
}
.kit-digital__logos img { height: 44px; width: auto; }
/* Los sellos oficiales no se pueden alterar; en modo oscuro se les pone
   un fondo claro para que sigan siendo legibles y fieles. */
:root[data-tema="oscuro"] .kit-digital__logos img {
  background: #fff; padding: 6px 10px; border-radius: var(--radio-chico);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .kit-digital__logos img {
    background: #fff; padding: 6px 10px; border-radius: var(--radio-chico);
  }
}

/* ---------- Boton flotante de contacto ---------------------------------- */
.flotante {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .75rem;
}
.flotante__opciones {
  display: flex; flex-direction: column; gap: .6rem;
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity var(--transicion), translate var(--transicion), visibility var(--transicion);
}
.flotante[data-abierto="true"] .flotante__opciones { opacity: 1; visibility: visible; translate: 0 0; }
.flotante__opcion {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.1rem .6rem .8rem;
  background: var(--fondo-tarjeta); color: var(--titulo);
  border: 1px solid var(--borde); border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-family: Montserrat, sans-serif; font-size: .875rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--transicion), color var(--transicion);
}
.flotante__opcion:hover { transform: translateX(-3px); color: var(--acento); }
.flotante__opcion svg { width: 20px; height: 20px; flex: none; }
.flotante__boton {
  display: grid; place-items: center;
  width: 58px; height: 58px; padding: 0;
  background: var(--acento); color: var(--sobre-acento);
  border: none; border-radius: 50%; cursor: pointer;
  box-shadow: 0 6px 22px rgba(26, 77, 190, .4);
  transition: transform var(--transicion), background-color var(--transicion);
}
.flotante__boton:hover { transform: scale(1.07); background: var(--azul-marino); color: #fff; }
.flotante__boton svg { width: 26px; height: 26px; }
.flotante__boton .icono-cerrar { display: none; }
.flotante[data-abierto="true"] .flotante__boton .icono-chat { display: none; }
.flotante[data-abierto="true"] .flotante__boton .icono-cerrar { display: block; }

/* ---------- Aviso de cookies -------------------------------------------- */
/* Va abajo y ocupa el ancho, sin tapar el contenido ni bloquear la web:
   la pagina no pone cookies de terceros, solo informa. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  padding: clamp(.75rem, 2vw, 1.25rem);
}
.cookies[hidden] { display: none; }

.cookies__caja {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: space-between;
  max-width: var(--ancho); margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.5vw, 1.75rem);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.cookies__titulo {
  font-size: 1rem; font-weight: 700; margin-bottom: .3rem;
}
.cookies p { font-size: var(--t-pequeno); margin-bottom: 0; max-width: 74ch; }
.cookies__acciones {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
}
.cookies__acciones a { font-size: var(--t-pequeno); font-weight: 600; white-space: nowrap; }
.cookies__acciones .boton { --relleno: .7rem 1.5rem; }

/* Con el aviso abierto, el botón flotante se aparta para no solaparse.
   La altura real la mide el script y la deja en --alto-cookies, porque el
   aviso cambia de alto segun el ancho de la pantalla. */
body.cookies-visibles .flotante {
  bottom: calc(clamp(1rem, 3vw, 2rem) + var(--alto-cookies, 9rem));
}

/* ---------- 7. Responsive ----------------------------------------------- */
@media (max-width: 980px) {
  .heroe__interior,
  .ecosistema__interior,
  .contacto__interior,
  .bloque-tec { grid-template-columns: 1fr; }
  .heroe__imagen { order: -1; max-width: 520px; margin-inline: auto; }
  .bloque-tec:nth-child(even) .bloque-tec__imagen { order: 0; }
  .pie__superior { grid-template-columns: 1fr 1fr; }
}

/* El menu pasa a hamburguesa en 980, no en 820.
   Con siete entradas, la barra horizontal necesita unos 900px solo para el
   menu: entre 821 y 980 se comia el logotipo, que llegaba a quedarse en siete
   pixeles de ancho. Si algun dia se quita una entrada, esto se puede bajar.
   Ojo: app.js escucha (min-width: 981px) para cerrar el menu; van juntos. */
@media (max-width: 980px) {
  .hamburguesa { display: block; }

  /* Menu a pantalla completa */
  .menu {
    position: fixed; inset: 0; z-index: 150;
    flex-direction: column; justify-content: center; gap: .5rem;
    padding: 5rem 2rem 2rem;
    background: var(--fondo);
    opacity: 0; visibility: hidden; translate: 0 -12px;
    transition: opacity var(--transicion), translate var(--transicion), visibility var(--transicion);
  }
  body.menu-abierto .menu { opacity: 1; visibility: visible; translate: 0 0; }
  body.menu-abierto { overflow: hidden; }
  .menu a {
    padding: 1rem 1.25rem; border-radius: var(--radio);
    font-size: 1.375rem; text-align: center;
  }
  .menu a[aria-current="page"]::after { display: none; }
  .menu a[aria-current="page"] { background: var(--fondo-alterno); }
  /* La hamburguesa y el boton de tema quedan por encima del menu */
  .hamburguesa, .tema { position: relative; z-index: 160; }

  /* Las imagenes verticales (la factura impresa) se descontrolan al apilarse:
     a todo el ancho del contenedor ocupan una pantalla entera. Las de siempre
     son apaisadas y no lo necesitan, por eso va con clase propia. */
  .ecosistema__imagen--documento { max-width: 460px; margin-inline: auto; }
}

@media (max-width: 820px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra { display: flex; align-items: baseline; justify-content: center; gap: .75rem; text-align: left; }
  .cifra__etiqueta { margin-top: 0; }
}

@media (max-width: 560px) {
  .pie__superior { grid-template-columns: 1fr; gap: 2rem; }
  .heroe__acciones .boton { flex: 1 1 100%; justify-content: center; }
  .kit-digital__logos img { height: 34px; }
}

/* ---------- Impresion --------------------------------------------------- */
@media print {
  .cabecera, .flotante, .hamburguesa, .tema, .salto-contenido { display: none !important; }
  body { background: #fff; color: #000; }
  .aparece { opacity: 1; translate: none; }
}