/*
 * Paginas de modulo: indice /modulos/ (Tarea 4) y plantilla de cada modulo (Tarea 7).
 * Fase 2, spec §8 y §9.
 */

/* Indice */

/* Al llegar por /modulos/#area-x, el titulo del area no queda debajo de la cabecera pegajosa. */
.modulos-area {
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
}

.modulos-area-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.modulos-area-cabecera h2 {
  margin: 0;
}

.modulos-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 900px) {
  .modulos-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .modulos-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tarjeta-modulo {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--rojo);
  border-radius: 14px;
  box-shadow: var(--sombra-suave);
  padding: 22px;
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
}

.tarjeta-modulo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tarjeta-modulo h3 {
  margin: 0;
}

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

.tarjeta-modulo .tarjeta-modulo-precio {
  font-family: var(--display);
  font-weight: 700;
  color: var(--rojo-texto);
}

.tarjeta-modulo:target {
  box-shadow: 0 0 0 3px var(--rojo), var(--sombra-suave);
}

/* Plantilla de modulo */
.miga {
  font-size: .88rem;
  color: var(--tinta-2);
}

.miga a {
  color: inherit;
}

.miga [aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
}

.modulo-heroe {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  align-content: center;
  min-height: 560px;
}

.modulo-heroe-texto {
  display: grid;
  gap: 18px;
}

.modulo-etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.modulo-etiqueta .logo-producto {
  margin: 0;
}

.modulo-etiqueta-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.modulo-heroe h1 {
  margin: 0;
}

/* A sangre por la derecha: `right` se mide sobre la seccion (.contenedor centrado), asi que
   50% - 50vw la lleva justo al borde de la ventana. */
.modulo-heroe-foto {
  position: absolute;
  right: calc(50% - 50vw);
  top: 50%;
  width: min(40vw, 600px);
  transform: translateY(-50%);
  z-index: -1;
}

.modulo-incluye {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr) 200px;
  gap: 48px;
  align-items: center;
}

/* A sangre por la izquierda: el hueco hasta el borde de la ventana es el margen del .contenedor
   (1100 px centrados) mas su relleno de 34 px. No se guarda en una variable CSS porque
   test/tokens.test.js exige declarar toda variable en el :root. */
.modulo-incluye-fotos {
  display: grid;
  gap: 24px;
  margin-left: calc(-1 * (max(0px, (100vw - 1100px) / 2) + 34px));
  width: calc(100% + max(0px, (100vw - 1100px) / 2) + 34px);
}

.modulo-incluye-fotos .capsula:last-child {
  width: 75%;
}

.modulo-incluye-texto {
  display: grid;
  gap: 16px;
}

.modulo-incluye-texto h2 {
  margin: 0;
}

.modulo-movil {
  width: 100%;
  height: auto;
}

.modulo-precio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 64px;
  align-items: center;
}

.modulo-precio-texto {
  display: grid;
  gap: 16px;
}

.modulo-precio-texto h2 {
  margin: 0;
}

.modulo-precio-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
}

.tramos {
  margin: 12px 0 18px;
}

.tramo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--linea);
}

.tramo dt {
  color: var(--tinta-2);
}

.tramo dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--rojo-texto);
  text-align: right;
}

.modulo-precio-tabla .btn {
  display: block;
  text-align: center;
}

.modulo-casos .rejilla-casos {
  margin-top: 30px;
}

/* Por debajo de 1000 px la foto del heroe pisaria el texto: pasa debajo, a sangre por la derecha. */
@media (max-width: 1000px) {
  .modulo-heroe {
    min-height: 0;
  }

  .modulo-heroe-foto {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: calc(100% + 34px);
    margin: 28px -34px 0 0;
    z-index: auto;
    justify-self: end;
  }
}

@media (max-width: 860px) {
  .modulo-incluye,
  .modulo-precio {
    grid-template-columns: minmax(0, 1fr);
  }

  .modulo-incluye-fotos {
    display: none;
  }

  .modulo-movil {
    max-width: 200px;
    justify-self: center;
  }
}

/*
 * Capacidad que el dossier comercial promete y el producto todavia no hace (fase 3a, 2026-09-18).
 * Va en la misma lista que las demas PERO SIN EL VISTO: un visto rojo afirma "esto lo tienes", y
 * junto a una etiqueta "Pronto" se contradice con ella. Quien lea la lista de arriba abajo tiene
 * que poder distinguirlas sin leer la etiqueta. El punto gris dice "esta en la lista, todavia no".
 */
.lista-check li.capacidad-pronto {
  color: var(--tinta-2);
}

.lista-check li.capacidad-pronto::before {
  background: none;
  border-radius: 50%;
  border: 2px dashed var(--linea-fuerte);
  width: 18px;
  height: 18px;
  margin: 3px;
}