/* =====================================================================
   PANTALLA · Web pública · INICIO → TODO LO QUE INCLUYE
   Qué hace:    una tabla de una sola columna («Plan Completo», con el
                precio de la Política de precios) con todo lo que se ofrece,
                agrupado por los 4 tiempos, el panel y el servicio. Al bajar,
                los grupos aparecen uno por uno al ritmo del desplazamiento
                (al subir, al revés). Solo tokens del sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css, componentes/icono
   Requisitos:  R-WEB-12, 14
   ===================================================================== */

.web-inicio__detalle {
  padding-block: var(--espacio-7) var(--espacio-8);
  text-align: center;
}

.web-inicio__detalle .web-inicio__subtitulo {
  margin-bottom: var(--espacio-6);
}

.web-inicio__tabla-caja {
  max-width: 44rem;
  margin-inline: auto;
}

.web-inicio__tabla {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/* La columna del plan va con su propio tono y esquinas redondas arriba (como una ficha) */
.web-inicio__tabla-plan {
  width: 11rem;
  padding: var(--espacio-5) var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  background: var(--color-superficie-resaltada);
  font-family: var(--letra-titulo);
  font-size: var(--tamano-m);
  font-weight: 500;
  text-align: center;
}

.web-inicio__tabla-precio {
  display: block;
  color: var(--color-acento);
  font-size: var(--tamano-l);
  font-variant-numeric: tabular-nums;
}

.web-inicio__tabla td {
  padding: var(--espacio-3);
  border-top: 1px solid var(--color-borde);
}

.web-inicio__tabla-si {
  background: var(--color-superficie-resaltada);
  color: var(--color-acento);
  text-align: center;
}

/* «Incluido» lo leen los lectores de pantalla; a la vista basta el ✓ */
.web-inicio__tabla-texto-si {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La fila del título de cada grupo lleva su celda del plan vacía: así la columna sigue entera */
.web-inicio__tabla-grupo td {
  border-top: 0;
}

.web-inicio__tabla-grupo th {
  padding: var(--espacio-5) var(--espacio-3) var(--espacio-2);
  color: var(--color-acento);
  font-size: var(--tamano-chico);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.web-inicio__tabla-cuerpo:last-child tr:last-child .web-inicio__tabla-si {
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
}

.web-inicio__detalle-nota {
  margin: var(--espacio-4) 0 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-chico);
}

/* Los grupos aparecen uno por uno al ritmo del desplazamiento (inicio.js pone --progreso de 0 a
   1 en la caja; cada grupo usa su sexta parte). Solo con --animar. */
.web-inicio__tabla-cuerpo:nth-of-type(2) { --orden: 1; }
.web-inicio__tabla-cuerpo:nth-of-type(3) { --orden: 2; }
.web-inicio__tabla-cuerpo:nth-of-type(4) { --orden: 3; }
.web-inicio__tabla-cuerpo:nth-of-type(5) { --orden: 4; }
.web-inicio__tabla-cuerpo:nth-of-type(6) { --orden: 5; }

.web-inicio__tabla-caja--animar .web-inicio__tabla-cuerpo {
  --aparece: clamp(0, calc(var(--progreso, 0) * 6 - var(--orden, 0)), 1);
  opacity: var(--aparece);
}

@media (max-width: 30rem) {
  .web-inicio__tabla-plan {
    width: 6rem;
  }
}