/* Las paginas de captacion: producto, websites, sector, comparar, cambiar,
   datos y faq. Solo lo que esas siete necesitan y sitio.css no tiene ya.

   Reglas de la casa que se respetan aqui:
   - los tokens son los de sitio.css (--fondo, --superficie, --azul, --verde,
     --tinta, --texto-2, --linea); no se define ningun color nuevo;
   - ninguna animacion: estas paginas se leen, no se miran;
   - toda etiqueta mono (.dato, .ceja, .etiqueta-plan) a 14 px o mas.

   Se enlaza desde el block cabeza de cada plantilla, no desde base.html: quien
   entra por la portada no descarga reglas que no va a usar. */

/* --- la etiqueta "Included in Essential / Complete" --- */

.sitio .etiqueta-plan {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-family: var(--fuente-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
  background: rgba(43, 106, 159, .07);
}

/* --- dolores de sector y tarjetas de ley --- */

.sitio .rejilla-dolores {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitio .dolor {
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 4px;
}

.sitio .dolor h3 { margin: 14px 0 10px; }
.sitio .dolor p { color: var(--texto-2); margin: 0; }

/* El superindice de la fuente: pequeno, pero el enlace se puede pulsar. */
.sitio .dolor sup a,
.sitio .tabla-comparar sup a {
  font-family: var(--fuente-mono);
  font-size: 14px;
  padding: 0 4px;
  color: var(--azul);
  text-decoration: none;
}

.sitio .dolor sup a:hover,
.sitio .tabla-comparar sup a:hover { text-decoration: underline; }

/* --- pie de fuentes (sector y comparar) --- */

.sitio .pie-fuentes {
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}

.sitio .lista-fuentes {
  margin: 12px 0 0;
  padding-left: 1.4em;
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.65;
}

.sitio .lista-fuentes li { margin-bottom: 10px; }
.sitio .lista-fuentes a { color: var(--azul); }
.sitio .lista-fuentes .dato { margin-left: 6px; }

/* --- tabla de comparativa --- */

/* La caja permite desplazar la tabla en un movil sin romper el ancho de la
   pagina; el foco del teclado la alcanza porque es tabbable. */
.sitio .tabla-comparar-caja { overflow-x: auto; }

.sitio .tabla-comparar {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.sitio .tabla-comparar th,
.sitio .tabla-comparar td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.sitio .tabla-comparar thead th {
  font-family: var(--fuente-mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul);
  border-bottom: 1px solid var(--azul);
}

.sitio .tabla-comparar tbody th {
  width: 22%;
  font-weight: 600;
  color: var(--tinta);
}

.sitio .tabla-comparar td { color: var(--texto-2); }
.sitio .tabla-comparar .col-demark { background: rgba(43, 106, 159, .06); color: var(--tinta); }

.sitio .nota-tabla {
  margin-top: 16px;
  color: var(--texto-2);
  font-size: 15px;
  max-width: 70ch;
}

/* La seccion "cuando el otro es mejor": mismo tono, sin adorno, para que se
   lea como lo que es y no como una concesion de cara a la galeria. */
.sitio .seccion-honesta { background: var(--superficie); }

.sitio .lista-puntos {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 1.2em;
  max-width: 78ch;
  color: var(--texto-2);
  line-height: 1.7;
}

/* --- filas de funcion con captura (sector) --- */

.sitio .fila-funcion {
  display: grid;
  gap: clamp(18px, 3vw, 36px);
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}

.sitio .fila-funcion-cuerpo h3 { margin: 0 0 6px; }
.sitio .fila-funcion-cuerpo p { color: var(--texto-2); }
.sitio .fila-funcion-img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 4px; }

@media (max-width: 860px) {
  .sitio .fila-funcion { grid-template-columns: 1fr; }
}

/* --- FAQ (pagina larga y bloque de sector) --- */

.sitio .faq-lista { margin: 0; }

.sitio .faq-item {
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--linea);
  max-width: 82ch;
}

.sitio .faq-item dt {
  font-family: var(--fuente-titulo, inherit);
  font-size: clamp(18px, 1.8vw, 21px);
  color: var(--tinta);
  margin: 0 0 8px;
}

.sitio .faq-item dd { margin: 0; color: var(--texto-2); line-height: 1.7; }

.sitio .faq-indice ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- listas de datos (pagina de datos) --- */

.sitio .lista-datos {
  display: grid;
  gap: 0;
  margin: 0;
}

.sitio .lista-datos > div {
  display: grid;
  grid-template-columns: minmax(160px, 22%) 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}

.sitio .lista-datos dt { margin: 0; }
.sitio .lista-datos dd { margin: 0; color: var(--tinta); }

@media (max-width: 640px) {
  .sitio .lista-datos > div { grid-template-columns: 1fr; gap: 6px; }
}

/* --- rejilla de enlaces (los caminos al final de /en/product) --- */

.sitio .rejilla-enlaces {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitio .tarjeta-enlace {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
}

.sitio .tarjeta-enlace:hover { border-color: var(--azul); color: var(--verde); }
.sitio .tarjeta-enlace-nombre { flex: 1; }
.sitio .tarjeta-enlace svg { width: 18px; height: 18px; flex: none; }

/* Una pieza del producto sin captura (los SMS no tienen pantalla propia): la
   banda de texto ocupa la lamina entera en vez de dejar un hueco vacio. */
.sitio .plat-lamina-sin-imagen .plat-banda { position: static; width: 100%; }