/* ==========================================================================
   mail.itcom.es — pagina de acceso
   --------------------------------------------------------------------------
   La carga UNICAMENTE templates/login.html. El skin de dentro no se toca.

   MISMA PALETA QUE itcom.es, variable a variable (desde el 12-sep-2026).
   Las tres pantallas —portada, landing /tu-web/ y esta— son el mismo sistema:

     · tinta      #020811   el oscuro del panel, como el hero de la portada
     · tinta-2    #061d33   el oscuro secundario
     · azul       #007bfe   el de trabajo: botones, precio y enlaces
     · azul-claro #60b6fa   azul sobre fondo oscuro
     · cian       #29baf5   antetitulos sobre fondo oscuro
     · papel-2    #fafbfe   el fondo de la columna de acceso
     · Open Sans, la tipografia del sitio, servida desde este mismo servidor

   **Sin amarillo y sin turquesa.** El amarillo del logotipo no funcionaba con
   el azul; el turquesa era un segundo acento que la portada no tiene y se
   retiro. El acento es UNO, el azul. Si se cambia un color aqui, se cambia en
   las tres pantallas.

   El logo de itcom es un rotulo de CONTORNO con un triangulo. De ahi salen
   las dos formas que se repiten: filetes de 1 px y triangulos.

   Esta hoja va DESPUES de styles.css (Larry), que trae lo suyo para
   #login-form: 580 px de ancho, caja gris oscuro, etiquetas a la derecha.
   Por eso varias reglas de aqui son para deshacer aquello, no capricho.
   ========================================================================== */

@font-face {
  font-family: "Open Sans itcom";
  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 itcom";
  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 itcom";
  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;
}

body.itcom-login-page {
  /* La paleta ES la de itcom.es, variable a variable. Las tres pantallas
     —portada, landing y acceso— son el mismo sistema: si se toca un color
     aqui, se toca en las tres. **Sin amarillo y sin turquesa** desde el
     12-sep-2026. */
  --tinta: #020811;         /* el oscuro del panel, como el hero de la portada */
  --tinta-2: #061d33;       /* el oscuro secundario: banda de cifras y pie */
  --azul: #007bfe;          /* el de trabajo: botones, precio y enlaces */
  --azul-2: #0062d6;        /* su hover */
  --azul-claro: #60b6fa;    /* azul sobre fondo oscuro */
  --cian: #29baf5;          /* antetitulos sobre fondo oscuro */
  --papel: #fff;
  --papel-2: #fafbfe;       /* el fondo de la columna de acceso */
  --texto: #0d2136;
  --texto-2: #5a7085;
  --linea: #e3ebf4;
  --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");
  --letra: "Open Sans itcom", "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--texto);
  background: #fff;
  font-family: var(--letra);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Un solo anillo de foco para toda la pagina. Doble sombra para que se vea
   igual sobre el panel oscuro y sobre el blanco. */
body.itcom-login-page :focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--tinta), 0 0 0 5px rgba(0, 123, 254, .55);
}
body.itcom-login-page .entrada :focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 123, 254, .55);
}

/* --- pantalla partida, a sangre -----------------------------------------
   Sin tarjeta flotante y sin margenes: el panel llega al borde. Es lo que
   separa una pagina de acceso de producto de un formulario dentro de una
   caja. */
.acceso {
  display: grid;
  /* 60 % escaparate / 40 % acceso. El formulario no necesita mas de 440 px,
     asi que el ancho que sobra rinde mas ensenando trabajo. */
  grid-template-columns: 60fr 40fr;
  min-height: 100vh;
}

/* ======================= panel oscuro (escaparate) ======================= */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 46px 52px 44px;
  overflow: hidden;
  color: #fff;
  /* El MISMO oscuro que la banda de cifras de itcom.es (+20 anos, 99,99 %...),
     no el del hero: aqui no hay foto detras que lo levante y el #020811 a
     sangre se comia el panel entero. */
  background: var(--tinta-2);
  background-image:
    radial-gradient(42rem 30rem at 108% -12%, rgba(0, 123, 254, .45), transparent 62%),
    radial-gradient(30rem 26rem at -12% 112%, rgba(41, 186, 245, .2), transparent 60%);
}

.panel > * { position: relative; z-index: 1; }

/* El logo lleva a itcom.es. Va en la misma pestana, como el boton de la
   oferta que tiene debajo: quien lo pulsa quiere ver la web, no volver. */
.panel__logo { display: flex; align-items: center; gap: 13px; width: max-content;
               text-decoration: none; transition: opacity .16s ease; }
.panel__logo img { display: block; width: 168px; height: auto; }
/* El lema, igual que en la cabecera de itcom.es */
.panel__logo 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;
}
.panel__logo:hover { opacity: .82; }

/* El bloque central se centra en el hueco que dejan el logo y el pie. */
.panel__cuerpo { margin: auto 0; padding: 34px 0; }

.panel__antetitulo {
  margin: 0 0 12px;
  color: #29baf5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.panel__titular {
  max-width: 13em;
  margin: 0 0 32px;
  color: #fff;
  font-size: clamp(27px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.03em;
}

/* --- las muestras y la oferta, en la misma fila -------------------------
   Las tres piezas van ENTERAS, sin recortar. Recortarlas para ganar alto se
   llevaba por delante justo lo que explica cada cartel: en el de NumeraZen, el
   chico y el movil quedaban fuera. Lo que se adapta es el DISENO — el precio,
   las ventajas y el boton se mueven a una columna a su derecha, que era el
   hueco que sobraba— y asi caben a su tamano natural usando todo el ancho. */
.piezas {
  display: grid;
  grid-template-columns: 1fr minmax(196px, .32fr);
  gap: 28px;
  align-items: center;
  margin: 0;
}
.piezas__pista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.pieza {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;            /* la misma del fichero: no recorta nada */
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .85);
}
/* Cada pieza es un enlace a la web que ensena; la imagen lo rellena por dentro.
   La clase va en el enlace porque es el hijo de la rejilla y del carrusel. */
a.pieza { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
a.pieza:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -20px rgba(0, 0, 0, .9); }
a.pieza:focus-visible { outline: 2px solid #60b6fa; outline-offset: 3px; }
.pieza img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Escalonadas: alineadas parecerian un catalogo. */
.pieza--b { margin-top: 24px; }
.pieza--c { margin-top: 48px; }

/* La columna de la oferta. */
.oferta__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
  color: #fff;
}
.oferta__precio b {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.oferta__precio span { color: #9fc0da; font-size: 13px; font-weight: 700; }

.ventajas {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: #e4eef8;
  font-size: 14px;
}
.ventajas li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
/* El triangulo del logo, en pequeno, de vineta. */
.ventajas li:before {
  flex: none;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--cian);
  content: "";
}

/* Boton de contorno a proposito: la accion principal de esta pantalla es
   ENTRAR AL CORREO, y su boton es el azul macizo de la derecha. Si el anuncio
   llevara otro boton macizo, competirian. */
.cta {
  box-sizing: border-box;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.cta: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;
}
.cta:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .75);
  transform: translateY(-1px);
}
.cta:hover:after { transform: translateX(3px); }

/* --- los tres productos de la casa, en el orden de las piezas ------------
   Los PNG vienen calados en blanco y montados en un lienzo del mismo alto,
   asi que con un unico `height` los dos rotulos salen del mismo tamano. */
.panel__pie { }
.productos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.producto { display: block; color: inherit; text-decoration: none; }
.producto img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 30px;
  margin: 0 0 8px;
  opacity: .85;
  object-fit: contain;
  object-position: left center;
  transition: opacity .16s ease;
}
.producto span {
  display: block;
  color: #9fc0da;
  font-size: 12.5px;
  line-height: 1.35;
  transition: color .16s ease;
}
.producto:hover img { opacity: 1; }
.producto:hover span { color: #e4eef8; }

.contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 22px 0 0;
  color: #7e9bb4;
  font-size: 12.5px;
}
.contacto a { color: #9fc0da; text-decoration: none; }
.contacto a:hover { color: #fff; text-decoration: underline; }
.contacto i { margin: 0 11px; color: #44637f; font-style: normal; }

/* --- selector de idioma --------------------------------------------------
   El codigo del OTRO idioma con el globo delante, igual que en itcom.es. Va en
   la columna de acceso y no en el panel porque esa es la que ve primero quien
   entra desde el movil: alli el panel queda debajo. */
.idioma {
  position: absolute;
  top: clamp(14px, 2.2vw, 26px);
  right: clamp(14px, 2.2vw, 26px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: rgba(255, 255, 255, .82);
  color: var(--texto-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.idioma:before {
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--globo) no-repeat center / contain;
  mask: var(--globo) no-repeat center / contain;
  content: "";
}
.idioma:hover { border-color: var(--azul); background: #fff; color: var(--azul); }

/* ========================= columna de acceso ============================ */
/* Fondo gris azulado muy claro, no blanco: el formulario va en una tarjeta
   blanca y necesita un fondo en el que apoyarse. Blanco sobre blanco no tiene
   profundidad. */
.entrada {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 46px 60px 44px;
  overflow: hidden;
  background-color: var(--papel-2);
  background-image:
    radial-gradient(38rem 30rem at 92% -8%, rgba(0, 123, 254, .13), transparent 62%),
    radial-gradient(32rem 26rem at -6% 108%, rgba(0, 123, 254, .09), transparent 60%);
}

/* Trama de puntos que se desvanece hacia los bordes. Da textura sin ruido: a
   pantalla completa y sin mascara parecia papel milimetrado. */
.entrada:before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(13, 33, 54, .11) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  content: "";
  pointer-events: none;
}

/* El triangulo del logo, en contorno y grande, asomando por la esquina: la
   misma forma que la marca de agua del panel oscuro, en negativo. Ata las dos
   columnas sin repetir el logotipo. */
.entrada:after {
  position: absolute;
  right: -90px;
  bottom: -70px;
  width: 360px;
  height: 330px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 330' fill='none' stroke='%23007bfe' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M8 322 L250 8 L352 322 Z'/%3E%3Cpath d='M70 322 L250 88 L326 322' stroke-opacity='.09'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
  pointer-events: none;
}
/* El `:not(.idioma)` no es adorno: esta regla levanta el contenido sobre los
   degradados del fondo, y sin la excepcion le ganaba el `relative` al
   `absolute` del selector de idioma, que se quedaba centrado arriba. */
.entrada > *:not(.idioma) { position: relative; z-index: 1; }

/* La tarjeta del formulario. */
.entrada__cuerpo {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  margin: auto 0;
  padding: 40px 40px 32px;
  background: #fff;
  border: 1px solid #e3ebf4;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(13, 33, 54, .05),
    0 28px 56px -24px rgba(13, 33, 54, .28);
}
.entrada a { color: var(--azul); }

.entrada__antetitulo {
  margin: 0 0 11px;
  color: #8a9dae;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.entrada__titulo {
  margin: 0;
  color: var(--texto);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.entrada__sub { margin: 7px 0 28px; color: var(--texto-2); font-size: 14px; }

/* --- el formulario que pinta Roundcube ----------------------------------
   Sale como <table> con td.title y td.input. Se pasa a bloques para que la
   etiqueta vaya encima del campo. */
#login-form { position: static; width: auto; margin: 0; }
#login-form .box-inner {
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
#login-form form table,
#login-form form tbody,
#login-form form tr,
#login-form form td { display: block; width: auto; }
#login-form form table { width: 100%; }
#login-form form tr { margin: 0 0 16px; }

#login-form td.title {
  width: auto;
  padding: 0 0 7px;
  color: #46586a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
}
#login-form td.input { width: auto; padding: 0; }

/* Iconos dentro del campo. Van como fondo del propio input, en SVG en linea:
   Roundcube pinta el formulario y no hay donde colgar un <svg> sin tocar su
   codigo. */
#login-form td.input { position: relative; }
#login-form input[type="text"],
#login-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 10px 14px 10px 46px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 20px 20px;
  color: var(--texto);
  background-color: #fff;
  border: 1px solid var(--linea);
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--letra);
  font-size: 16px;             /* 16 px o iOS hace zoom al enfocar */
  transition: border-color .16s ease, box-shadow .16s ease;
}
#login-form input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a3b2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.9 20c0-3.7 3.2-5.7 7.1-5.7s7.1 2 7.1 5.7'/%3E%3C/svg%3E");
}
#login-form input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a3b2' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.8' rx='2.4'/%3E%3Cpath d='M8.3 10.4V7.9a3.7 3.7 0 0 1 7.4 0v2.5'/%3E%3C/svg%3E");
}

/* El campo de la clave deja sitio al boton de «Mostrar». */
#login-form td.input.con-boton input[type="password"],
#login-form td.input.con-boton input[type="text"] { padding-right: 82px; }
.ver-clave {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 7px 10px;
  color: var(--texto-2);
  background: none;
  border: 0;
  border-radius: 7px;
  font-family: var(--letra);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .16s ease, background-color .16s ease;
}
.ver-clave:hover { color: var(--azul); background: #e8f2fe; }

.aviso-mayus {
  margin: 12px 0 0;
  padding: 9px 13px;
  color: #8a5a06;
  background: #fdf6e8;
  border-left: 3px solid #e0a32e;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

#login-form input[type="text"]:hover,
#login-form input[type="password"]:hover { border-color: #c3cfdb; }
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  outline: 0;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(0, 123, 254, .18);
}

#login-form p.formbuttons { margin: 24px 0 0; text-align: left; }
#login-form button.button {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  color: #fff;
  background: var(--azul);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--letra);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: none;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#login-form button.button:hover {
  color: #fff;
  background: var(--azul-2);
  box-shadow: 0 10px 22px -10px rgba(0, 123, 254, .8);
  transform: translateY(-1px);
}
#login-form button.button:active {
  color: #fff;
  background: var(--azul-2);
  transform: none;
}

/* --- el aviso de Roundcube ----------------------------------------------
   Va ENCIMA del formulario, que es donde se lee. Larry lo pinta con un
   sprite y `white-space: nowrap`: en una columna estrecha se sale. */
#login-form .box-bottom { margin: 0; padding: 0; background: none; }
#login-form #message,
.entrada #message {
  min-height: 0;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14px;
  text-align: left;
}
.entrada #message div {
  display: block;
  padding: 12px 14px;
  background: none;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
}
.entrada #message div.error {
  color: #a4242f;
  background: #fdf0f1;
  border-left: 3px solid #d93a48;
}
.entrada #message div.warning {
  color: #8a5a06;
  background: #fdf6e8;
  border-left: 3px solid #e0a32e;
}
.entrada #message div.confirmation {
  color: #17683f;
  background: #eef8f2;
  border-left: 3px solid #2c9c63;
}

#login-form .noscriptwarning {
  width: auto;
  margin: 14px 0 0;
  color: #a4242f;
  font-size: 13.5px;
  font-weight: 600;
}

.entrada__ayuda {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  color: var(--texto-2);
  font-size: 13px;
}
.entrada__ayuda a { font-weight: 700; text-decoration: none; }
.entrada__ayuda a:hover { text-decoration: underline; }
.entrada__wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.entrada__wa:before {
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007BFE'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.23 8.23 0 0 1 0 16.47Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.71-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.42l-.47-.01c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.06s.89 2.39 1.01 2.56c.12.16 1.74 2.66 4.22 3.73.59.25 1.05.4 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}

/* El pie de la columna clara cierra a la misma altura que el del panel. */
.entrada__pie { width: 100%; max-width: 440px; padding: 0 4px; box-sizing: border-box; }
.entrada__cifrado {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid #e3ebf4;
  color: #6f8193;
  font-size: 12px;
  font-weight: 600;
}
.entrada__cifrado:before {
  flex: none;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c9c63' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.8' rx='2.4'/%3E%3Cpath d='M8.3 10.4V7.9a3.7 3.7 0 0 1 7.4 0v2.5'/%3E%3C/svg%3E") no-repeat center / contain;
  content: "";
}
.entrada__legal { margin: 8px 0 0; color: #8797a7; font-size: 12px; }
.entrada__legal a { color: #7b8b9b; text-decoration: none; }
.entrada__legal a:hover { color: var(--azul); text-decoration: underline; }

/* --- pantallas BAJAS -----------------------------------------------------
   Un portatil de 1280x800 no es un caso raro, es la mitad del parque. Sin
   esto, el pie del panel —los productos y el telefono— se queda fuera de la
   ventana y hay que hacer scroll en una pagina de acceso. Se ajusta por
   ALTURA, y solo cuando hay dos columnas: en el movil manda el apilado. */
@media (min-width: 901px) and (max-height: 940px) {
  .panel { padding: 38px 52px 34px; }
  .panel__cuerpo { padding: 22px 0; }
  .panel__titular { margin-bottom: 26px; }
  .piezas { grid-template-columns: 1fr minmax(186px, .3fr); gap: 24px; }
  .pieza--b { margin-top: 18px; }
  .pieza--c { margin-top: 36px; }
  .oferta__precio { margin-bottom: 16px; }
  .oferta__precio b { font-size: 34px; }
  .ventajas { gap: 9px; margin-bottom: 18px; }
  .entrada { padding: 38px 60px 34px; }
  .entrada__cuerpo { padding: 34px 36px 28px; }
}

@media (min-width: 901px) and (max-height: 820px) {
  .panel { padding: 26px 44px 22px; }
  .panel__cuerpo { padding: 14px 0; }
  .panel__titular { font-size: 26px; margin-bottom: 20px; }
  .panel__antetitulo { margin-bottom: 9px; }
  .piezas { grid-template-columns: 1fr minmax(172px, .28fr); gap: 20px; }
  .piezas__pista { gap: 10px; }
  .pieza--b { margin-top: 14px; }
  .pieza--c { margin-top: 28px; }
  .ventajas { gap: 9px; margin-bottom: 16px; font-size: 13.5px; }
  .cta { padding: 12px 21px; }
  .productos { padding-top: 18px; gap: 20px; }
  .producto img { height: 26px; margin-bottom: 6px; }
  .producto span { font-size: 12px; }
  .contacto { margin-top: 16px; }
  .entrada { padding: 30px 50px 26px; }
  .entrada__cuerpo { padding: 28px 32px 24px; }
  .entrada__sub { margin-bottom: 22px; }
  .entrada__ayuda { margin-top: 20px; padding-top: 16px; }
}

/* Ventanas MUY bajas (un portatil de 768 px deja ~625 de viewport real, porque
   el navegador se come el resto). Aqui ya no hay margen: se recorta mas el
   cartel y se aprieta todo lo demas, pero las muestras siguen a todo el ancho,
   que es lo que se pidio. */
@media (min-width: 901px) and (max-height: 700px) {
  .panel { padding: 20px 44px 16px; }
  .panel__logo img { width: 150px; }
  .panel__cuerpo { padding: 10px 0; }
  .panel__titular { font-size: 24px; margin-bottom: 16px; }
  .piezas { grid-template-columns: 1fr minmax(164px, .26fr); gap: 16px; }
  .pieza--b, .pieza--c { margin-top: 0; }
  .oferta__precio b { font-size: 30px; }
  .ventajas { gap: 8px; margin-bottom: 14px; font-size: 13px; }
  .cta { padding: 10px 19px; }
  .productos { padding-top: 14px; }
  .producto img { height: 24px; }
  .contacto { margin-top: 12px; }
  .entrada { padding: 22px 44px 18px; }
  .entrada__cuerpo { padding: 24px 28px 20px; }
}

/* ======================= pantallas estrechas ============================
   Se apila con el ACCESO primero: quien abre esto casi siempre viene a
   entrar en su correo, no a leer el anuncio. */
@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; min-height: 0; }
  /* El relleno de arriba deja sitio al selector de idioma: apilado, la tarjeta
     empieza casi pegada al borde y el boton se le montaba en la esquina. */
  .entrada { order: 1; padding: 62px 16px 24px; align-items: stretch; }
  .idioma { top: 16px; right: 16px; }
  .entrada:after { right: -120px; bottom: -110px; width: 280px; height: 256px; }
  .entrada__cuerpo { padding: 30px 24px 26px; border-radius: 16px; }
  .panel { order: 2; padding: 34px 26px 32px; }
  .panel__logo img { width: 142px; }
  .panel__cuerpo { max-width: none; padding: 26px 0 0; }
  /* Apilado: la oferta baja debajo de las muestras. */
  .piezas { grid-template-columns: 1fr; gap: 24px; }
  .pieza--b { margin-top: 18px; }
  .pieza--c { margin-top: 36px; }
  .panel__pie { max-width: none; margin-top: 30px; }
  .panel__titular { margin-bottom: 26px; }
  .cta { width: 100%; justify-content: center; }
  .entrada__cuerpo,
  .entrada__pie { max-width: none; }
  .entrada__pie { margin-top: 20px; }
}

@media (max-width: 640px) {
  .piezas { max-width: none; }
  .piezas__pista {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .piezas__pista::-webkit-scrollbar { display: none; }
  .pieza { flex: 0 0 64%; scroll-snap-align: center; }
  .pieza--b, .pieza--c { margin-top: 0; }
}

@media (max-width: 440px) {
  .entrada { padding: 56px 12px 20px; }   /* sigue dejando sitio al selector */
  .idioma { top: 12px; right: 12px; }
  .entrada__cuerpo { padding: 26px 20px 22px; }
  .panel { padding: 28px 20px 28px; }
  .ventajas { gap: 9px; }
  .productos { grid-template-columns: 1fr; gap: 18px; }
}

/* Quien lo pide, no ve movimiento. */
@media (prefers-reduced-motion: reduce) {
  body.itcom-login-page * { transition: none !important; }
  .cta:hover,
  #login-form button.button:hover { transform: none; }
}