/* =====================================================================
   Páginas de texto · inec.com · ES y PT
   Condiciones, soporte, organización, protección de datos y cookies,
   contacto... Todas las páginas de es|pt/paginas/ que llevan el texto en
   #scroll con .texto-condiciones y no tienen formulario.
   Se carga en comunes/paginas/head.php después de catalogo.css.
   Para volver al diseño anterior basta con quitar esa línea.
   Solo cambia el aspecto: no toca textos, enlaces ni datos de Velneo.
   Colores de la guía de INEC: amarillo #FCCB28 · azul #1B2732
   ===================================================================== */

/* Aire a los lados, igual que en las páginas de catálogo */
#content:has(> #scroll > .texto-condiciones):not(:has(form)){
  box-sizing:border-box;
  padding-left:22px;
  padding-right:12px;
  padding-bottom:28px;
}

/* ---------- Título de la página ---------- */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #cabecera-familia h4{
  margin:8px 0 22px;
  padding:0;
  border:0;
  font:700 26px/1.2 var(--ui);
  letter-spacing:-.01em;
  color:var(--azul);
  text-wrap:balance;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #cabecera-familia h4::after{
  content:"";
  display:block;
  width:44px;
  height:4px;
  margin-top:12px;
  border-radius:2px;
  background:var(--amarillo);
}

/* ---------- Cuerpo ---------- */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll{
  max-width:none; /* el texto ocupa todo el ancho, sin hueco a la derecha */
  margin:0;
  font:400 14px/1.65 var(--ui);
  color:#2f3a45;
}
/* Los saltos de línea sueltos entre bloques sobran: el espacio lo dan los márgenes */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > br,
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .datos-condiciones > br{display:none}

/* Párrafos: sin sangría y alineados a la izquierda (el justificado abre huecos) */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .texto-condiciones{
  margin:0 0 12px;
  padding:0;
  text-indent:0;
  text-align:left;
  font:inherit;
  color:inherit;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll b{font-weight:600;color:var(--azul)}

/* ---------- Apartados ---------- */
/* h5 en casi todas las páginas; en Protección de datos los apartados son h4 */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > h5,
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > h4,
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > a > h5{
  margin:30px 0 10px;
  padding:1px 0 1px 12px;
  border:0;
  border-left:3px solid var(--amarillo);
  text-indent:0;
  text-decoration:none;
  text-align:left;
  font:700 17px/1.3 var(--ui);
  color:var(--azul);
  text-wrap:balance;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > :is(h4,h5):first-child{margin-top:4px}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > a:has(> h5){text-decoration:none}

/* Donde los apartados son h4, los h5 son subapartados (tipos de cookies...) */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll:has(> h4) > h5{
  margin:18px 0 6px;
  padding:0;
  border:0;
  font:600 14.5px/1.4 var(--ui);
  color:var(--azul);
}

/* "INFORMACIÓN SOBRE LAS COOKIES": segunda parte de la página, con su propio título */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > #cookies{
  margin:44px 0 20px;
  padding:28px 0 0;
  border:0;
  border-top:1px solid var(--linea);
  text-align:left;
  font:700 22px/1.25 var(--ui);
  color:var(--azul);
  text-transform:lowercase;
  scroll-margin-top:16px;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > #cookies::first-letter{text-transform:uppercase}

/* ---------- Listas y datos (.datos-condiciones) ---------- */
/* Las líneas seguidas forman un bloque gris: viñetas, dirección de envío... */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .datos-condiciones{
  margin:0;
  padding:3px 16px 3px 30px;
  text-indent:-12px;
  background:var(--fondo-suave);
  font:400 14px/1.6 var(--ui);
  color:#2f3a45;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .datos-condiciones:not(.datos-condiciones + .datos-condiciones){
  margin-top:2px;
  padding-top:12px;
  border-radius:10px 10px 0 0;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .datos-condiciones:not(:has(+ .datos-condiciones)){
  margin-bottom:14px;
  padding-bottom:12px;
  border-radius:0 0 10px 10px;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .datos-condiciones:not(.datos-condiciones + .datos-condiciones):not(:has(+ .datos-condiciones)){
  border-radius:10px;
}

/* ---------- Enlaces ---------- */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll a[href]{
  font:inherit;
  font-weight:600;
  color:var(--azul);
  text-decoration:underline;
  text-decoration-color:var(--amarillo);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:text-decoration-color 150ms ease;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll a[href]:hover{text-decoration-color:var(--azul)}
/* "Ver mapa maior" (contacto PT) trae el color escrito en la etiqueta */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll small a[style]{color:var(--azul) !important}

/* ---------- Imágenes y mapa ---------- */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > div[align="center"]{margin:18px 0 20px}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll > div[align="center"] img{
  display:block;
  width:420px;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:12px;
}
#content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll iframe{
  display:block;
  width:100%;
  height:340px;
  margin:8px 0 6px;
  border:0;
  border-radius:12px;
  background:var(--pozo);
}

/* ---------- Pie de la página ---------- */
#content:has(> #scroll > .texto-condiciones):not(:has(form)) .creditos{
  margin:28px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--linea);
  text-indent:0;
  text-align:left;
  font:400 12px/1.4 var(--ui);
  color:var(--suave);
}

@media (prefers-reduced-motion:reduce){
  #content:has(> #scroll > .texto-condiciones):not(:has(form)) #scroll a[href]{transition:none}
}