/* ─────────────────────────────────────────────────────────────────────────
   paginas.css — páginas sueltas (/{slug}/) y landings (/lp/{slug}/).
   Agente C4.

   Complementa a site.css; no lo sustituye ni lo toca. Se carga solo en estas
   páginas, desde `head_extra`, porque nadie más usa estas clases.

   Todas las variables (--azul, --acento, --linea…) vienen de site.css.
   Si mañana aparece el post-12.css original y la paleta cambia allí, esto
   cambia con ella sin tocar una línea de aquí.

   Prefijo `pg-` para todo, y ni un `!important`.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────── Estructura ─────────────────────────── */

.pg-seccion { padding-block: clamp(1.5rem, .8rem + 2.5vw, 3rem); }

/* Franjas alternas: en el original las daba el fondo que Elementor guarda en
   su propio CSS, que no está en el export. Esto es lo más parecido que se
   puede hacer sin inventarse colores: alternar el gris tenue del núcleo. */
.pg > .pg-seccion:nth-of-type(even) { background: var(--gris-claro); }

.pg-bloque + .pg-bloque { margin-top: 1.5rem; }

/* Los bloques hermanos que caben en fila, van en fila. Es el reparto que hacía
   Elementor con sus contenedores flex, sin sus 40 kB de utilidades. */
.pg-seccion > .contenedor > .pg-bloque:first-child:nth-last-child(n+2),
.pg-seccion > .contenedor > .pg-bloque:first-child:nth-last-child(n+2) ~ .pg-bloque {
  display: block;
}
@media (min-width: 48rem) {
  .pg-seccion > .contenedor:has(> .pg-bloque + .pg-bloque) {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
  }
  .pg-bloque + .pg-bloque { margin-top: 0; }
}

/* ─────────────────────────── Texto ─────────────────────────── */

.pg h1, .pg h2 { color: var(--azul); }
.pg h1 { margin-bottom: .5rem; }
.pg h2 { margin-top: 0; }
.pg h3 { color: var(--azul-oscuro); }

.pg-texto { max-width: var(--ancho-texto); }
.pg-texto p { margin: 0 0 1rem; }
.pg-texto p:last-child { margin-bottom: 0; }
.pg-texto ul, .pg-texto ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.pg-texto li { margin-bottom: .35rem; }

/* Rótulo: en el original era un «encabezado» de Elementor pintado con una
   etiqueta que no era un encabezado (<p>, <span>). Se conserva el aspecto de
   destacado sin meterlo en el esquema del documento. */
.pg-rotulo {
  max-width: var(--ancho-texto);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin: 0 0 1rem;
}

.pg-cta { margin: 1.25rem 0; }

.pg-valoracion {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  background: var(--azul-tenue);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  padding: .5rem .9rem;
  margin: 0 0 1rem;
  font-size: .95rem;
}
.pg-valoracion strong { color: var(--azul); font-size: 1.15rem; }

/* Cifra grande. Ojo: el original animaba de 0 al valor con JavaScript, así que
   sin script mostraba un 0. Aquí se pinta el número de verdad. */
.pg-cifra { margin: 0 0 1rem; }
.pg-cifra__numero {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  line-height: 1;
  color: var(--azul);
}
.pg-cifra__texto { color: var(--tinta-suave); }

/* ─────────────────────────── Listas e iconos ─────────────────────────── */

.pg-lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-width: var(--ancho-texto);
}
.pg-lista li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5rem;
}
/* La marca sustituye al SVG de «check» que Elementor incrustaba en cada
   elemento. Es decorativa, así que va en CSS y no en el HTML. */
.pg-lista li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .45em;
  width: .5rem;
  height: .85rem;
  border: solid var(--azul);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pg-icono {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
}
.pg-icono__titulo { margin: 0 0 .5rem; font-size: 1.05rem; }
.pg-icono .pg-texto { max-width: none; }

.pg-tarjeta-info {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--azul);
  border-radius: var(--radio);
  padding: 1.25rem;
}
.pg-tarjeta-info h3 { margin-top: 0; }

/* ─────────────────────────── Imágenes ─────────────────────────── */

.pg-figura { margin: 0 0 1.25rem; }
.pg-figura img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radio);
}

.pg-galeria {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.pg-galeria img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  display: block;
}

/* ─────────────────────────── Opiniones ─────────────────────────── */

.pg-opiniones {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.pg-opinion {
  margin: 0;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.25rem;
  height: 100%;
}
.pg-opinion blockquote { margin: 0 0 .75rem; }
.pg-opinion blockquote p { margin: 0 0 .5rem; }
.pg-opinion figcaption { color: var(--tinta-suave); font-size: .9rem; }
.pg-opinion cite { font-style: normal; font-weight: 600; color: var(--azul); }
.pg-opinion__nota { margin-left: .4rem; }

/* ─────────────────────────── Desplegables ─────────────────────────── */

.pg-desplegable {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  margin-bottom: .6rem;
}
.pg-desplegable > summary {
  cursor: pointer;
  padding: .85rem 1rem;
  font-weight: 600;
  color: var(--azul);
  list-style-position: inside;
}
.pg-desplegable > summary:hover { background: var(--azul-tenue); }
.pg-desplegable[open] > summary { border-bottom: 1px solid var(--linea); }
.pg-desplegable > *:not(summary) { padding: 0 1rem 1rem; }
.pg-desplegable .pg-seccion,
.pg-desplegable .pg-bloque { padding-block: .75rem; }
.pg-desplegable .contenedor { width: auto; }

/* La declaración de cookies llega del plugin con su propia anidación. */
.pg-cookies details { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .6rem; }
.pg-cookies summary { cursor: pointer; padding: .75rem 1rem; }
.pg-cookies summary h3 { margin: 0; display: inline; font-size: 1rem; }
.pg-cookies summary + div { padding: 0 1rem 1rem; }
.pg-cookies h4 { margin: .8rem 0 .3rem; font-size: .95rem; }

/* ─────────────────────────── Formulario ─────────────────────────── */

.pg-formulario {
  background: var(--gris-claro);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1rem, .6rem + 1.5vw, 2rem);
  margin: 1.5rem 0;
  /* Que el ancla #formulario no deje el título debajo de la cabecera fija. */
  scroll-margin-top: 5rem;
}

.pg-form__campos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pg-form__grupo--completo { grid-column: 1 / -1; }

.pg-form__etiqueta {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--tinta);
}
.pg-form__obligatorio { color: var(--acento); }
.pg-form__opcional { font-weight: 400; color: var(--gris); font-size: .875rem; }

.pg-form__control {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;   /* 16px: por debajo, iOS hace zoom al enfocar. */
}
.pg-form__control:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 1px;
}
textarea.pg-form__control { resize: vertical; min-height: 7rem; }

.pg-form__casilla { display: flex; gap: .6rem; align-items: flex-start; }
.pg-form__casilla input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .2rem;
  flex: 0 0 auto;
  accent-color: var(--azul);
}
.pg-form__casilla label { line-height: 1.45; }

.pg-form__grupo--error .pg-form__control { border-color: var(--acento); border-width: 2px; }
.pg-form__error { color: var(--acento-oscuro); font-size: .9rem; margin: .3rem 0 0; font-weight: 600; }

.pg-form__nota { color: var(--gris); font-size: .875rem; margin: 1rem 0 0; }
.pg-form__enviar { margin: 1.25rem 0 0; }
.pg-form__rgpd { margin-top: 1.25rem; }
.pg-form__rgpd ul { margin: 0; }

.pg-aviso {
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 2px solid var(--acento);
  background: var(--blanco);
}
.pg-aviso__titulo { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--acento-oscuro); }
.pg-aviso ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.pg-aviso:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* El campo trampa. Fuera de la pantalla, no `display:none`: algunos robots
   descartan lo que está oculto con display, y este campo solo sirve si lo
   rellenan. Ninguna persona llega a él: no recibe foco (tabindex="-1") y su
   contenedor va con aria-hidden. */
.pg-form__trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─────────────────────────── Tablas heredadas ─────────────────────────── */

.pg-texto .tabla-envoltorio { margin: 0 0 1rem; }
.pg-texto .tabla { min-width: 34rem; }

/* ─────────────────────────── Impresión ─────────────────────────── */

@media print {
  .pg-formulario, .pg-cta { display: none; }
  .pg-desplegable > *:not(summary) { display: block; }
}