/* ==========================================================================
   itcombox.com — hoja unica del sitio (parte de la de itcom.es:
   /root/itcom-web/css/itcom.css. Misma paleta y mismas variables: si cambia un
   color alli, se cambia aqui)
   --------------------------------------------------------------------------
   REPRODUCE EL CONCEPTO, no lo interpreta. Los valores no son "a ojo": estan
   medidos sobre `/root/capturas/file_0000…9cbc…png` (lienzo de 1024 px) con
   `comparar-concepto.py`, que vuelve a comprobarlos despues de cada cambio.

     · fondo del hero      #020811   casi negro, con la FOTO visible detras
     · azul vivo           #007BFE   botones, «ITCOM», enlaces, checks
     · azul del titular    #60B6FA   solo la palabra destacada sobre oscuro
     · antetitulo del hero #29BAF5
     · banda de cifras     #061D33
     · fondo claro         #FAFBFE
     · contenido           93,75 % del ancho, como en el concepto

   La escala parte de ese lienzo de 1024: los `clamp()` dan exactamente los
   valores medidos a 1024 px y crecen con mesura hasta 1440.
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/opensans-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/opensans-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fuentes/opensans-800.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tinta: #020811;
  --tinta-2: #061d33;
  --azul: #007bfe;
  --azul-2: #0062d6;
  --azul-claro: #60b6fa;
  --cian: #29baf5;
  --papel: #fff;
  --papel-2: #fafbfe;
  --texto: #0d2136;
  --texto-2: #5a7085;
  --linea: #e3ebf4;
  --letra: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --aire: clamp(30px, 3.25vw, 46px);     /* 33 px sobre el lienzo de 1024 */
  --globo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15 0 18M12 3c-2.5 2.6-2.5 15 0 18'/%3E%3C/svg%3E");
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h16M13 5.5l6.5 6.5L13 18.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--texto);
  background: var(--papel);
  font-family: var(--letra);
  font-size: clamp(13.5px, 1.35vw, 16px);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--azul); }
:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 123, 254, .65); }
.oscuro :focus-visible { box-shadow: 0 0 0 2px var(--tinta), 0 0 0 5px rgba(0, 123, 254, .8); }
.centro { width: min(93.75%, 1280px); margin: 0 auto; }
.voz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Los dos rotulos a mano del concepto. NO son tipografia: son el trazo del
   propio concepto, recortado, ampliado x4 y con el fondo a transparente (ver
   hacer-imagenes.py). Se probo con Caveat y no se parecia en nada. */
.mano { position: absolute; z-index: 2; display: block; height: auto; pointer-events: none; }
/* El ingles tiene los suyos desde el 12-sep-2026, generados con la misma mano.
   «Your project in good hands» cae en CUATRO lineas y no en tres, asi que es mas
   alto: se le da menos ancho para que pese lo mismo que el espanol. */
html[lang="en"] .doble__mano { width: clamp(84px, 10.9vw, 161px); }

/* ============================== cabecera ================================ */
.cab { position: relative; z-index: 20; color: #fff; background: var(--tinta); }
.cab--sobre-hero { position: absolute; top: 0; right: 0; left: 0; background: transparent; }
.cab .centro { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); padding: 20px 0; }
.marca { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.marca img { display: block; width: clamp(112px, 12vw, 150px); height: auto; }
.marca span {
  padding-left: 13px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  color: #c6d8ea;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.menu { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); margin: 0 0 0 auto; padding: 0; }
.menu > li { position: relative; list-style: none; }
.menu a {
  display: inline-block;
  padding: 8px 0;
  color: #e4eef8;
  font-size: clamp(13px, 1.35vw, 15.5px);
  text-decoration: none;
  transition: color .16s ease;
}
.menu a:hover { color: #fff; }
.menu ul {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 258px;
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 46px -18px rgba(2, 8, 17, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.menu li:hover > ul, .menu li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.menu ul li { list-style: none; }
.menu ul a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--texto); font-size: 14.5px; }
.menu ul a:hover { color: var(--azul); background: var(--papel-2); }
.menu__flecha { margin-left: 5px; font-size: 10px; opacity: .8; }
.cab__acceso {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  color: #fff !important;
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.cab__acceso:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
/* Selector de idioma: el codigo de dos letras, no el nombre del idioma, con el
   globo delante para que «EN» no se lea como otra cosa. Misma caja que
   «Area de clientes» pero menor, para que se lea como parte del juego y no como
   un enlace suelto.

   Va DOS veces en el HTML: aqui, en la barra, y como ultima entrada del menu.
   En movil la barra se reordena y esta se oculta; sin la del menu no habria
   forma de cambiar de idioma con el telefono. */
.cab__idioma {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: clamp(9px, 1.2vw, 16px);
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 9px;
  color: #cfe0f2 !important;
  font-size: clamp(11px, 1.1vw, 12.5px);
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.cab__idioma:before {
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--globo) no-repeat center / contain;
  mask: var(--globo) no-repeat center / contain;
  content: "";
}
.cab__idioma:hover { color: #fff !important; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.menu__idioma { display: none; }
.cab__hamburguesa {
  display: none;
  margin-left: auto;
  padding: 9px;
  color: #fff;
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 9px;
  cursor: pointer;
}
.cab__hamburguesa span { display: block; width: 20px; height: 2px; margin: 4px 0; background: #fff; }

/* ================================ hero ==================================
   La foto ocupa TODO el ancho y se sigue viendo detras del texto: el velo es
   un degradado, no un rectangulo. En el concepto se distinguen los racks
   tambien en la mitad izquierda. */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--tinta); }
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: brightness(1.18) saturate(1.08);
}
.hero:after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(2, 8, 17, .9) 0%, rgba(2, 8, 17, .8) 30%,
                    rgba(2, 8, 17, .48) 55%, rgba(2, 8, 17, .16) 76%, rgba(2, 8, 17, .3) 100%),
    linear-gradient(180deg, rgba(2, 8, 17, .75) 0%, transparent 22%);
  content: "";
}
.hero .centro { position: relative; z-index: 2; padding: clamp(96px, 9.6vw, 130px) 0 clamp(38px, 4.1vw, 58px); }
.hero--interior .centro { padding: clamp(92px, 9.2vw, 124px) 0 clamp(46px, 4.6vw, 64px); }

/* --- hero a dos columnas, con la pieza de producto a la derecha ----------
   Solo lo llevan las paginas que traen `pieza` en su hero. La foto de fondo se
   queda: aporta textura, pero el velo se aclara por la derecha para que la
   pieza no compita con ella. */
.hero--pieza .centro {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.hero--pieza:after {
  background:
    linear-gradient(96deg, rgba(2, 8, 17, .93) 0%, rgba(2, 8, 17, .88) 42%,
                    rgba(2, 8, 17, .74) 70%, rgba(2, 8, 17, .66) 100%),
    linear-gradient(180deg, rgba(2, 8, 17, .75) 0%, transparent 22%);
}
.hero__pieza {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(2, 8, 17, .5), 0 34px 70px -26px rgba(2, 8, 17, .95);
}
/* En esas paginas el titular puede ocupar su columna entera. */
.hero--pieza h1 { max-width: none; }
.hero--pieza .hero__entrada { max-width: none; }
.antetitulo {
  margin: 0 0 clamp(10px, 1.15vw, 15px);
  color: var(--azul);                    /* medido #007BFE en las dos secciones claras */
  font-size: clamp(9px, .95vw, 11px);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.oscuro .antetitulo { color: var(--cian); }   /* sobre foto, el cian del concepto */
.hero h1 {
  max-width: 12.5em;
  margin: 0;
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.028em;
}
.hero h1 em { color: var(--azul-claro); font-style: normal; white-space: nowrap; }
.hero__entrada {
  max-width: 27em;
  margin: clamp(16px, 1.9vw, 26px) 0 0;
  color: #ccdeee;
  font-size: clamp(15px, 1.72vw, 20px);
  line-height: 1.42;
}
/* Medido en el concepto: la caja del trazo va de x 861 a 975 y de y 420 a 550
   sobre el lienzo de 1024, con el hero acabando en 565. */
.hero__mano { right: 4.74vw; bottom: 1.42vw; width: clamp(96px, 11.16vw, 168px); }
.hero__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(22px, 3.2vw, 46px);
  margin: clamp(28px, 3.3vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
.hero__marcas li { display: flex; align-items: center; gap: 10px; color: #e4eef8; font-size: clamp(12.5px, 1.3vw, 14.5px); line-height: 1.3; }
.hero__marcas svg { flex: none; width: 25px; height: 25px; stroke: var(--azul); fill: none; stroke-width: 1.7; }

/* =============================== botones ================================ */
.botonera { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(22px, 2.6vw, 36px) 0 0; }
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 1.17vw, 15px) clamp(20px, 2.85vw, 36px);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: clamp(13.5px, 1.48vw, 17px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
/* En el concepto es una flecha de trazo, no un triangulo macizo. */
.boton:after {
  flex: none;
  width: .95em;
  height: .95em;
  background: currentColor;
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  content: "";
  transition: transform .16s ease;
}
.boton--principal { color: #fff; background: var(--azul); }
.boton--principal:hover { background: var(--azul-2); box-shadow: 0 14px 28px -12px rgba(0, 123, 254, .75); transform: translateY(-1px); }
.boton--claro { color: #fff; border-color: rgba(255, 255, 255, .5); }
.boton--claro:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.boton--borde { color: #0a5acd; background: #fff; border-color: #3f9df3; }
.boton--borde:hover { border-color: var(--azul); box-shadow: 0 12px 24px -14px rgba(0, 123, 254, .5); }
.boton:hover:after { transform: translateX(3px); }
/* Botón que todavía no lleva a ningún sitio (descarga sin publicar). */
.boton--inactivo { opacity: .55; cursor: not-allowed; }
.boton--inactivo:hover { background: var(--azul); box-shadow: none; transform: none; }
.boton--inactivo:after, .boton--inactivo:hover:after { display: none; }
/* Insignia oficial de Google Play, recortada a su borde: mide lo mismo que un boton. */
.insignia-play { display: inline-flex; align-items: center; }
.insignia-play img { display: block; height: clamp(44px, 4.1vw, 54px); width: auto; }

/* ============================== secciones =============================== */
.seccion { padding: var(--aire) 0; background: var(--papel-2); }
.seccion--blanca { background: var(--papel); }
.seccion__cabeza {
  display: grid;
  grid-template-columns: 2.15fr 1fr;
  gap: clamp(24px, 3vw, 46px);
  align-items: end;
  margin-bottom: clamp(18px, 2.1vw, 30px);
}
h2 {
  margin: 0;
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.028em;
}

/* --- como parten las lineas ---------------------------------------------
   `balance` reparte un titular entre sus lineas en vez de dejar la ultima
   palabra sola: «Lo que necesitas para estar en / Internet» era lo que pasaba
   antes. No evita que parta —eso se arregla acortando el texto—, evita que
   parta MAL. `pretty` hace lo propio con el ultimo renglon de los parrafos.
   El navegador que no las entienda las ignora y se queda como estaba. */
h1, h2, h3, .antetitulo, .cierre p, .hero__entrada, .seccion__entrada {
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
.seccion h2 { max-width: 19em; }
h1 em, h2 em, h3 em { color: var(--azul); font-style: normal; }
.seccion__entrada { margin: 0; color: var(--texto-2); font-size: clamp(12.5px, 1.3vw, 15px); }

/* --- rejilla de servicios: SEIS en una sola fila, como el concepto ------ */
.servicios { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(9px, 1.1vw, 15px); }
.servicio {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #f4f9fe);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 33, 54, .05), 0 12px 26px -16px rgba(13, 33, 54, .35);
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.servicio:hover { box-shadow: 0 1px 2px rgba(13, 33, 54, .05), 0 22px 38px -18px rgba(13, 33, 54, .5); transform: translateY(-3px); }
/* El bloque de texto CRECE hasta donde empieza la foto, y el «Saber mas» se va
   a su fondo con `margin-top: auto`. Sin esto el enlace cae justo detras del
   parrafo, que mide dos o tres lineas segun la tarjeta, y los seis salian
   escalonados: medidos, 37 px de desviacion. Las fotos ya estaban alineadas
   porque `.servicio__media` si llevaba su `margin-top: auto`. */
.servicio__texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(13px, 1.7vw, 22px) clamp(10px, 1.4vw, 18px) clamp(11px, 1.35vw, 16px);
}
.servicio__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 3vw, 38px);
  height: clamp(28px, 3vw, 38px);
  margin-bottom: clamp(9px, 1.15vw, 14px);
  background: #e8f2fe;
  border-radius: 10px;
}
.servicio__icono svg { width: 55%; height: 55%; stroke: var(--azul); fill: none; stroke-width: 1.9; }
.servicio h3 {
  margin: 0 0 6px;
  font-size: clamp(12.5px, 1.37vw, 16px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.servicio p { margin: 0; color: var(--texto-2); font-size: clamp(10.5px, 1.13vw, 13px); line-height: 1.4; }
.servicio__mas {
  display: block;
  /* `auto` empuja el enlace al fondo del bloque de texto, que es lo que alinea
     los seis. La separacion sobre el parrafo pasa a `padding`: si se deja como
     `margin-top`, pisa al `auto` y vuelven a salir escalonados. */
  margin-top: auto;
  padding-top: clamp(9px, 1.1vw, 14px);
  color: var(--azul);
  font-size: clamp(10.5px, 1.1vw, 12.5px);
  font-weight: 700;
}
.servicio__media { position: relative; margin-top: auto; }
.servicio__foto { display: block; width: 100%; height: clamp(88px, 10.5vw, 150px); object-fit: cover; }

/* --- banda de cifras ---------------------------------------------------- */
.datos { color: #fff; background: var(--tinta-2); }
.datos .centro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: clamp(28px, 3.5vw, 50px) 0;
}
.dato { display: flex; align-items: center; gap: clamp(11px, 1.5vw, 20px); padding: 0 clamp(10px, 1.8vw, 26px); }
.dato + .dato { border-left: 1px solid rgba(255, 255, 255, .16); }
.dato svg { flex: none; width: clamp(26px, 3.2vw, 40px); height: clamp(26px, 3.2vw, 40px); stroke: #7cc4fb; fill: none; stroke-width: 1.6; }
.dato b { display: block; font-size: clamp(17px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.dato span { color: #9fc0da; font-size: clamp(10.5px, 1.16vw, 13.5px); }

/* --- dos columnas con foto a sangre ------------------------------------- */
.doble { display: grid; grid-template-columns: .905fr 1fr; align-items: stretch; background: var(--papel); }
.doble__foto { width: 100%; height: 100%; min-height: clamp(300px, 39vw, 520px); object-fit: cover; }
.doble__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(24px, 3vw, 44px) clamp(16px, 2.4vw, 36px) clamp(24px, 3vw, 44px) clamp(22px, 3vw, 46px);
}
/* El titular de esta seccion es algo menor que el de las secciones sueltas:
   33 px de tinta frente a 38 en el concepto. */
.doble__texto h2 { margin-bottom: clamp(9px, 1.1vw, 15px); font-size: clamp(22px, 3.04vw, 36px); }
.doble__texto .antetitulo { margin-bottom: clamp(5px, .68vw, 10px); }
.doble__texto p:not(.antetitulo) {
  max-width: 26em;
  margin: 0 0 clamp(8px, 1vw, 14px);
  color: var(--texto-2);
  font-size: clamp(12.5px, 1.32vw, 15.5px);
  line-height: 1.41;
}
.doble__texto .boton {
  align-self: flex-start;              /* si no, el flex lo estira de lado a lado */
  padding: clamp(9px, 1.07vw, 14px) clamp(15px, 2.1vw, 27px);
  font-size: clamp(11.5px, 1.25vw, 14.5px);
  letter-spacing: -.015em;
}
/* Medido: la caja del trazo va de x 851 a 989 y de y 1316 a 1475 sobre el
   lienzo de 1024, con el panel empezando en y 1109. Su base queda 9 px por
   encima de la del boton, y nunca se le monta encima. */
.doble__mano { right: 6.5%; bottom: clamp(32px, 3.85vw, 56px); width: clamp(104px, 13.53vw, 200px); }
.lista { margin: clamp(3px, .4vw, 6px) 0 clamp(24px, 2.88vw, 40px); padding: 0; list-style: none; }
.lista li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: clamp(5px, .7vw, 10px); font-size: clamp(11.5px, 1.22vw, 14.5px); }
.lista li:before {
  flex: none;
  width: clamp(16px, 1.86vw, 22px);
  height: clamp(16px, 1.86vw, 22px);
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23007BFE'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}

/* --- tarjetas de contenido ---------------------------------------------- */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.ficha { padding: clamp(18px, 2.2vw, 30px) clamp(16px, 2vw, 26px); background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(13, 33, 54, .05), 0 12px 26px -18px rgba(13, 33, 54, .35); }
.ficha h3 { margin: 0 0 9px; font-size: clamp(14.5px, 1.6vw, 18px); font-weight: 800; letter-spacing: -.02em; }
.ficha p { margin: 0; color: var(--texto-2); font-size: clamp(12.5px, 1.32vw, 15px); }
.ficha__icono { display: flex; align-items: center; justify-content: center; width: clamp(30px, 3.2vw, 40px); height: clamp(30px, 3.2vw, 40px); margin-bottom: 14px; background: #e8f2fe; border-radius: 10px; }
.ficha__icono svg { width: 55%; height: 55%; stroke: var(--azul); fill: none; stroke-width: 1.9; }

/* --- cita --- */
/* La cita NO va en tarjeta ni con filete: cualquier caja con relleno la
   desplaza a la derecha y deja el texto sin alinear con los parrafos que tiene
   encima, que es justo lo que se veia mal. Arranca en el mismo margen
   izquierdo; lo que la separa es la letra, el cuerpo mayor y la comilla azul. */
.cita {
  max-width: 40em;
  margin: 0;
  padding: 0;
  color: #44586d;
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  /* Cuerpo atado al de los parrafos de encima, no al ojo de la letra: la altura
     de la x de Crimson Pro es un 21 % mas corta que la de la Open Sans, asi que
     18,5 px de cursiva se leen del mismo tamano que los 15 px de los parrafos.
     Puesto mas alto, el bloque parecia en negrita. */
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.68;
}
.cita:before {
  display: block;
  margin: 0 0 4px;
  color: #8fc2f2;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: .6;
  content: "\201C";
}
/* La firma NO va en cursiva: es un dato, no la voz de quien habla. */
.cita footer {
  margin-top: 14px;
  color: var(--texto-2);
  font-family: var(--letra);
  font-style: normal;
  font-size: clamp(12.5px, 1.3vw, 14.5px);
  font-weight: 700;
}

/* --- cierre --- */
.cierre { padding: clamp(40px, 4.6vw, 66px) 0; text-align: center; color: #fff; background: var(--tinta); }
.cierre h2 { max-width: none; margin: 0 auto; }
.cierre p { max-width: 34em; margin: 14px auto 0; color: #ccdeee; font-size: clamp(14px, 1.5vw, 17.5px); }
.cierre .botonera { justify-content: center; }

/* ================================= pie ================================== */
.pie { padding: clamp(36px, 4.2vw, 60px) 0 clamp(20px, 2.4vw, 34px); color: #9fc0da; background: var(--tinta-2); font-size: clamp(13px, 1.35vw, 15px); }
/* CINCO columnas: el bloque de marca y las cuatro listas de `sitio.PIE`.
   Estaba declarada a cuatro y «Legal» se caia a una segunda fila. Si algun dia
   se anade o se quita una lista de `PIE`, hay que tocar esto. */
.pie__cols { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: clamp(16px, 2.1vw, 32px); }
.pie h2 { margin: 0 0 14px; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li { padding: 4px 0; }
.pie a { color: #9fc0da; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__logo { display: block; width: clamp(120px, 13vw, 155px); height: auto; margin: 0 0 16px; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: clamp(28px, 3.4vw, 46px) 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); color: #7e9bb4; font-size: 12.5px; }
.pie__legal span:first-child { margin-right: auto; }

/* ============================== cookies ================================= */
.cookies {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: none;
  width: min(100% - 36px, 410px);
  padding: 20px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 56px -20px rgba(2, 8, 17, .6);
  font-size: 13.5px;
}
.cookies[data-ver] { display: block; }
.cookies p { margin: 0 0 15px; color: var(--texto-2); }
.cookies .botonera { gap: 10px; margin: 0; }
.cookies .boton { padding: 9px 16px; font-size: 13.5px; }

/* ========================== pantallas estrechas ========================= */
@media (max-width: 1000px) {
  .pie__cols { grid-template-columns: 1.2fr 1fr 1fr; }
  .servicios { grid-template-columns: repeat(3, 1fr); }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .doble { grid-template-columns: 1fr; }
  .doble__foto { min-height: 260px; }
  .seccion__cabeza { grid-template-columns: 1fr; align-items: start; }
  .datos .centro { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .dato:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 860px) {
  .cab__hamburguesa { display: block; }
  .cab--sobre-hero { position: relative; background: var(--tinta); }
  .cab .centro { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .menu { display: none; order: 3; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 4px 0 6px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
  .menu[data-abierto] { display: flex; }
  .menu > li { width: 100%; }
  .menu a { display: block; padding: 11px 0; }
  .menu ul { position: static; min-width: 0; margin: 0 0 6px 14px; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .menu ul a { padding: 8px 0; color: #b9cde0; }
  .menu ul a:hover { background: none; }
  .menu__flecha { display: none; }
  .cab__idioma { display: none; }
  .menu__idioma { display: block; border-top: 1px solid rgba(255, 255, 255, .18); }
  .menu__idioma a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: .09em; }
  .menu__idioma a:before {
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--globo) no-repeat center / contain;
    mask: var(--globo) no-repeat center / contain;
    content: "";
  }
  .cab__acceso { order: 4; width: 100%; justify-content: center; }
  .hero .centro, .hero--interior .centro { padding: clamp(34px, 6vw, 56px) 0 clamp(34px, 6vw, 56px); }
  .hero__foto { object-position: 70% center; }
  .hero:after { background: linear-gradient(180deg, rgba(2, 8, 17, .88), rgba(2, 8, 17, .95)); }
  .hero__mano, .doble__mano { display: none; }
  /* Apilado: la pieza baja debajo del texto y deja de competir con el. */
  .hero--pieza .centro { grid-template-columns: 1fr; }
  .servicios { grid-template-columns: repeat(2, 1fr); }
  /* Apiladas, la tarjeta se ensancha y con `height: 88px` la foto quedaba en un
     buzon de proporcion 6,3:1 —una rebanada— que se comia la composicion. Aqui
     manda la proporcion de la pieza apaisada y no se recorta nada. */
  .servicio__foto { height: auto; aspect-ratio: 928 / 261; }
  .pie__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .centro { width: min(100% - 32px, 1280px); }
  .servicios, .rejilla, .rejilla--2 { grid-template-columns: 1fr; }
  .datos .centro { grid-template-columns: 1fr; }
  .dato { padding: 0; border-left: 0 !important; }
  .dato + .dato { margin-top: 4px; }
  .boton { width: 100%; justify-content: center; }
  .pie__cols { grid-template-columns: 1fr; }
  .pie__legal span:first-child { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .boton:hover, .servicio:hover { transform: none; }
}

/* ==========================================================================
   Lo propio de itcombox.com: la incubadora
   ========================================================================== */

/* --- hero de la portada: sin foto. El fondo es la tinta con dos halos de azul
   y, a la derecha, el mosaico con los iconos de los productos. --- */
.hero--incubadora { background:
    radial-gradient(60% 80% at 85% 30%, rgba(0, 123, 254, .28), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(41, 186, 245, .14), transparent 70%),
    var(--tinta); }
.hero--incubadora:after { display: none; }
.hero--incubadora .centro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.mosaico a {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 14%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  transition: background-color .16s ease, transform .16s ease, border-color .16s ease;
}
.mosaico a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(96, 182, 250, .6); transform: translateY(-2px); }
.mosaico img { display: block; width: 100%; height: auto; border-radius: 14px; }
.mosaico a:nth-child(even) { transform: translateY(18%); }
.mosaico a:nth-child(even):hover { transform: translateY(calc(18% - 2px)); }

/* --- tarjetas de producto --- */
.productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.producto {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  color: var(--texto); text-decoration: none;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 16px;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.producto:hover { border-color: #bcd7f5; box-shadow: 0 22px 40px -26px rgba(13, 33, 54, .45); transform: translateY(-2px); }
.producto__cabeza { display: flex; align-items: center; gap: 14px; }
.producto__icono { flex: none; width: 56px; height: 56px; border-radius: 13px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.producto h3 { margin: 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 800; letter-spacing: -.015em; }
.producto p { margin: 0; color: var(--texto-2); font-size: clamp(13px, 1.3vw, 15px); }
.producto__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.producto__mas { color: var(--azul); font-size: 14px; font-weight: 700; }
.categoria + .categoria { margin-top: clamp(34px, 4vw, 54px); }
.categoria__titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 18px; }
.categoria__titulo h3 { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.categoria__titulo span { color: var(--texto-2); font-size: 14.5px; }

/* sello de estado y chips de plataforma */
.sello { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sello:before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.sello--disponible, .sello--descarga { color: #0a7a3d; background: #e5f6ec; }
.sello--proximamente, .sello--pronto { color: #0a5acd; background: #e8f2fe; }
.oscuro .sello--disponible, .oscuro .sello--descarga { color: #7ee2a8; background: rgba(126, 226, 168, .12); }
.oscuro .sello--proximamente, .oscuro .sello--pronto { color: var(--azul-claro); background: rgba(96, 182, 250, .14); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 3px 9px; color: var(--texto-2); background: var(--papel-2); border: 1px solid var(--linea); border-radius: 7px; font-size: 12px; font-weight: 600; }
.oscuro .chips li { color: #cfe0f2; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }

/* --- hero de una ficha de producto --- */
.hero--producto { background:
    radial-gradient(55% 90% at 90% 20%, rgba(0, 123, 254, .26), transparent 70%), var(--tinta); }
.hero--producto:after { display: none; }
.hero--producto .centro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero--producto.hero--sin-pieza .centro { grid-template-columns: 1fr; }
.hero__producto { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(16px, 1.8vw, 24px); }
.hero__producto img { width: clamp(56px, 6vw, 76px); height: auto; border-radius: 16px; background: #fff; }
.hero__producto .sello { margin-left: 2px; }
.hero--producto h1 { max-width: 14em; font-size: clamp(28px, 3.9vw, 48px); }
.hero--producto .chips { margin-top: clamp(18px, 2vw, 26px); }
.hero__nota { margin: 12px 0 0; color: #9fb6cc; font-size: 13.5px; }
.hero__volver { display: inline-block; margin: 0 0 clamp(16px, 1.8vw, 22px); color: #9fb6cc; font-size: 14px; font-weight: 600; text-decoration: none; }
.hero__volver:hover { color: #fff; }

/* --- capturas --- */
.capturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.capturas--movil { grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center; }
.capturas img { display: block; width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 22px 44px -30px rgba(13, 33, 54, .55); }
.capturas--movil img { border-radius: 22px; }
.capturas--folleto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.precio { margin: clamp(18px, 2vw, 26px) 0 0; padding: 14px 18px; color: var(--texto); background: #e8f2fe; border-radius: 12px; font-weight: 600; }

/* --- «cómo funciona»: esquema y pasos numerados (ficha de IMAP365) --- */
.como { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.como__esquema { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 1.6vw, 22px); }
.como__nodo { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; text-align: center; font-size: clamp(12.5px, 1.3vw, 15.5px); font-weight: 700; line-height: 1.25; }
.como__nodo img, .como__dibujo { width: clamp(60px, 7.6vw, 100px); height: auto; aspect-ratio: 1; border-radius: 22%; }
.como__dibujo { display: flex; align-items: center; justify-content: center; background: #e8f2fe; }
.como__dibujo svg { width: 56%; height: 56%; stroke: var(--azul); fill: none; stroke-width: 1.7; }
.como__flecha { align-self: flex-start; color: var(--azul); font-size: clamp(20px, 2.6vw, 32px); line-height: clamp(60px, 7.6vw, 100px); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-content: start; padding: clamp(16px, 1.9vw, 24px); background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(13, 33, 54, .05), 0 12px 26px -18px rgba(13, 33, 54, .35); counter-increment: paso; }
.pasos li:before { content: counter(paso); grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: clamp(34px, 3.4vw, 42px); height: clamp(34px, 3.4vw, 42px); color: #fff; background: var(--azul); border-radius: 50%; font-weight: 800; }
.pasos h3 { margin: 0; font-size: clamp(14.5px, 1.5vw, 17px); font-weight: 800; letter-spacing: -.02em; }
.pasos p { margin: 0; color: var(--texto-2); font-size: clamp(12.5px, 1.32vw, 15px); }

@media (max-width: 1000px) {
  .productos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero--incubadora .centro, .hero--producto .centro { grid-template-columns: 1fr; }
  .como, .pasos { grid-template-columns: 1fr; }
  .mosaico { max-width: 420px; }
  .mosaico a:nth-child(even) { transform: none; }
  .capturas--movil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .productos { grid-template-columns: 1fr; }
  .capturas, .capturas--folleto { grid-template-columns: 1fr; }
  .capturas--movil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}