/* ==========================================================================
   Secciones de la pagina
   ========================================================================== */

/* --------------------------------- Cabecera ------------------------------ */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: .85rem;
  /* Empieza transparente sobre el halo del hero; el JS le pone fondo al
     bajar. Un header opaco desde el primer pixel corta la portada en dos. */
  background: transparent;
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s, padding .35s;
}

.cabecera.posada {
  background: rgba(251, 251, 254, .82);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 0 var(--linea);
  padding-block: .6rem;
}

.cabecera__reja {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.cabecera__marca img { width: 132px; height: auto; }

.cabecera__nav {
  display: none;
  gap: 1.9rem;
  margin-inline: auto;
  font-size: .93rem;
  font-weight: 520;
}
@media (min-width: 900px) { .cabecera__nav { display: flex; } }

.cabecera__nav a {
  color: var(--tinta-media);
  position: relative;
  padding-block: .25rem;
  transition: color .2s;
}
.cabecera__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--violeta);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.cabecera__nav a:hover { color: var(--tinta); }
.cabecera__nav a:hover::after { transform: scaleX(1); }

.cabecera__acciones { display: none; align-items: center; gap: 1.1rem; margin-left: auto; }
@media (min-width: 900px) { .cabecera__acciones { display: flex; } }

.cabecera__enlace { font-size: .93rem; font-weight: 550; color: var(--tinta-media); transition: color .2s; }
.cabecera__enlace:hover { color: var(--violeta); }
.cabecera__acciones .boton { padding: .68rem 1.3rem; font-size: .9rem; }

.cabecera__menu {
  display: grid;
  gap: 5px;
  margin-left: auto;
  padding: .6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 900px) { .cabecera__menu { display: none; } }
.cabecera__menu span {
  display: block;
  width: 22px; height: 2px;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.cabecera__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.cabecera__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Panel movil */
.menu-movil {
  position: fixed;
  inset: 62px 0 auto;
  z-index: 99;
  background: rgba(251, 251, 254, .97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linea);
  padding: 1.2rem 1.25rem 1.6rem;
  display: grid;
  gap: .3rem;

  /* Cerrado: fuera de pantalla por arriba.

     `translateY(-110%)` sube el panel un 110% de SU PROPIA ALTURA, pero el
     panel arranca en `top: 62px`. Con 405px de alto subia 445px y se quedaban
     22px asomando por debajo del borde: esa era la franja blanca que se veia
     sobre el hero en movil.

     `calc(-100% - 62px)` descuenta ademas ese desplazamiento inicial, asi que
     el panel desaparece entero mida lo que mida. */
  transform: translateY(calc(-100% - 62px));

  /* La visibilidad se retrasa hasta que acaba el deslizamiento, para que la
     animacion de cierre se vea entera. Al abrir es inmediata. */
  transition:
    transform .4s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear .4s;
  /* Mientras esta cerrado no captura clics ni lo leen los lectores */
  visibility: hidden;
}

.menu-movil.abierto {
  transform: none;
  visibility: visible;
  transition:
    transform .4s cubic-bezier(.2, .8, .2, 1),
    visibility 0s;
}

/* En escritorio el panel no existe: si la ventana se ensancha con el menu
   abierto, quedaba tapando la pagina entera. */
@media (min-width: 900px) {
  .menu-movil { display: none; }
}
.menu-movil a {
  padding: .8rem .2rem;
  font-size: 1.05rem;
  font-weight: 560;
  border-bottom: 1px solid var(--linea);
}
.menu-movil .boton { margin-top: .9rem; }

/* --------------------------------- Proceso -------------------------------- */

.proceso { background: var(--papel-alto); }

.proceso__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.2rem;
}
/* Las tres columnas las sustituye el recorrido vertical de recorrido.css */

.proceso__item {
  position: relative;
  padding: 2rem 1.75rem 1.9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

/* El numero aqui SI tiene sentido: esto es una secuencia real de tres pasos
   que ocurren en orden. */
.proceso__numero {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 1.2rem;
  border-radius: 10px;
  background: var(--violeta);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}

.proceso__item h3 { margin-bottom: .6rem; }
.proceso__item p { color: var(--tinta-media); font-size: .95rem; }

/* ------------------------------- Capacidades ------------------------------ */

.rejilla-capacidades {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.tarjeta {
  position: relative;
  padding: 1.75rem;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}
@media (min-width: 900px) { .tarjeta--ancha { grid-column: span 2; } }

.tarjeta__cabeza { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(66, 60, 212, .12), rgba(66, 60, 212, .05));
  font-size: 1.15rem;
}

.tarjeta p { color: var(--tinta-media); font-size: .95rem; }

.tarjeta__lista {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
  font-size: .89rem;
  color: var(--tinta-media);
}
.tarjeta__lista li { padding-left: 1.4rem; position: relative; }
.tarjeta__lista li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
}

.tarjeta__sello {
  position: absolute;
  top: 1.3rem; right: 1.3rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: rgba(1, 236, 167, .18);
  color: #04795a;
  font-size: .72rem;
  font-weight: 650;
}

/* ------------------------------ Integraciones ----------------------------- */

.integraciones { background: var(--papel-alto); border-block: 1px solid var(--linea); }

.integraciones__reja { display: grid; gap: 3rem; }
@media (min-width: 900px) { .integraciones__reja { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.integraciones__titulo {
  font-size: .95rem;
  font-weight: 640;
  color: var(--tinta-suave);
  margin-bottom: 1.2rem;
}

.fichas { display: flex; flex-wrap: wrap; gap: .7rem; }

.ficha {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem .7rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  font-size: .9rem;
  font-weight: 560;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s, box-shadow .22s;
}
.ficha:hover {
  transform: translateY(-3px);
  border-color: #c9c7e4;
  box-shadow: 0 10px 22px -12px rgba(37, 31, 107, .35);
}
.ficha img { width: 22px; height: 22px; object-fit: contain; }

/* --------------------------------- Precios -------------------------------- */

.precios__caja {
  display: grid;
  gap: 2.5rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
  box-shadow: var(--sombra-baja);
}
@media (min-width: 860px) {
  .precios__caja { grid-template-columns: 1.4fr 1fr; align-items: center; }
}

.precios__titulo { font-size: 1.5rem; margin-bottom: .8rem; }
.precios__texto { color: var(--tinta-media); }

.precios__lista {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
  font-size: .93rem;
  color: var(--tinta-media);
}
.precios__lista li { padding-left: 1.6rem; position: relative; }
.precios__lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--verde);
  font-weight: 800;
}

.precios__accion {
  text-align: center;
  padding: 1.8rem 1.2rem;
  border-radius: 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
}
.precios__cifra {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}
.precios__pie { font-size: .87rem; color: var(--tinta-suave); margin: .4rem 0 1.4rem; }

/* ----------------------------------- Alta --------------------------------- */

.alta { position: relative; overflow: clip; }

.alta__reja {
  display: grid;
  gap: 2.5rem;
  padding: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  border-radius: 28px;
  background: linear-gradient(125deg, var(--violeta-tinta) 0%, var(--violeta) 55%, #5b4ae8 100%);
  color: #fff;
  box-shadow: var(--sombra-alta);
}
@media (min-width: 900px) {
  .alta__reja { grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; }
}

.alta__titular { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); margin-bottom: 1rem; }
.alta__texto { color: rgba(255, 255, 255, .88); max-width: 46ch; }

.alta__ventajas {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .65rem;
  font-size: .93rem;
  color: rgba(255, 255, 255, .9);
}
.alta__ventajas li { padding-left: 1.6rem; position: relative; }
.alta__ventajas li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
}

/* Formulario */
.formulario {
  display: grid;
  gap: .9rem;
  padding: 1.6rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px);
}

.campo { display: grid; gap: .4rem; }
.campo__etiqueta { font-size: .82rem; font-weight: 560; color: rgba(255, 255, 255, .85); }

.campo input {
  width: 100%;
  padding: .85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .95);
  color: var(--tinta);
  font-size: .98rem;
  transition: box-shadow .25s, border-color .25s;
}
.campo input:focus {
  outline: 0;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
}
.campo input:user-invalid {
  border-color: #ffb4b4;
  box-shadow: 0 0 0 4px rgba(255, 120, 120, .25);
}

.formulario__enviar { width: 100%; margin-top: .3rem; background: #fff; color: var(--violeta-hondo); }
.formulario__enviar:hover { background: #f2f1ff; }

.formulario__aviso {
  min-height: 1.2rem;
  font-size: .86rem;
  color: rgba(255, 255, 255, .92);
  text-align: center;
}
.formulario__aviso.bien { color: var(--verde); font-weight: 600; }

/* ------------------------------------ Pie --------------------------------- */

.pie {
  padding-block: 3.5rem 2.5rem;
  border-top: 1px solid var(--linea);
  background: var(--papel-alto);
}

.pie__reja { display: grid; gap: 2.5rem; }
@media (min-width: 800px) {
  .pie__reja { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
}

.pie__logo { opacity: .9; }
.pie__lema { margin-top: .9rem; font-size: .9rem; color: var(--tinta-suave); max-width: 28ch; }
.pie__correo {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: .9rem;
  color: var(--tinta-media);
  transition: color .2s;
}
.pie__correo:hover { color: var(--violeta); }

/* Los grupos de enlaces, cada uno bajo su encabezado. El encabezado no es
   un enlace mas: va mas pequeno, mas oscuro y sin el desplazamiento al
   pasar, para que se lea como rotulo y no como destino. */
.pie .pie__grupo { display: grid; gap: .65rem; font-size: .9rem; }
.pie .pie__t {
  /* Con la especificidad del componente, no la del elemento: `h2` global
     lleva un clamp() de hasta 3,5rem y en las paginas legales ganaba, asi
     que los rotulos del pie salian como titulares de seccion. */
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--tinta);
}
.pie__grupo a,
.pie__cookies { color: var(--tinta-media); transition: color .2s; }
.pie__grupo a:hover,
.pie__cookies:hover { color: var(--violeta); }

/* --- La barra de cierre --- */

.pie__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  font-size: .9rem;
}
.pie__copy { color: var(--tinta-suave); }
.pie__acciones { display: flex; align-items: center; gap: 1.25rem; }
.pie__entrar { color: var(--tinta-media); transition: color .2s; }
.pie__entrar:hover { color: var(--violeta); }
.pie__cta { padding: .6rem 1.35rem; font-size: .9rem; }

@media (max-width: 560px) {
  /* En movil la barra se apila y las acciones ocupan el ancho: un boton a
     medias en la ultima pantalla no lo pulsa nadie. */
  .pie__cierre { flex-direction: column; align-items: stretch; text-align: center; }
  .pie__acciones { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Ajustes de movil
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  /* Botones a todo el ancho: en tactil, un boton estrecho junto a otro es
     un objetivo pequeno y se falla al pulsar. */
  .portada__pie { flex-direction: column; }
  .portada__pie .boton { width: 100%; }

  /* Tres cifras en fila se quedan sin aire; en dos columnas se leen. */
  .cifras { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .cifras > *:last-child { grid-column: span 2; }

  /* La tabla del producto no cabe entera: se desliza en horizontal sin
     romper el ancho de la pagina. */
  .pantalla { overflow-x: auto; }
  .tabla { min-width: 460px; }
}