/* ===========================================================================
   zona-servicio.css — ZONA-SERVICIO-001 (2026-09-12).
   Una tabla larga que se lee en el móvil. Sin colores nuevos: tokens del sitio.
   =========================================================================== */
.zs-intro { max-width: 800px; margin: 0 auto; padding: 32px 20px 8px; }
.ws-zona-servicio .zs-intro h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; margin: 0 0 12px; }
.zs-intro p { margin: 0 0 12px; }
.zs-nota { color: var(--gris); font-size: 14.5px; }

.zs-tabla-envoltorio { max-width: 1100px; margin: 0 auto; padding: 12px 20px 32px; overflow-x: auto; }
.zs-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.zs-tabla caption { text-align: left; color: var(--gris); font-size: 14px; padding-bottom: 10px; }
.zs-tabla th, .zs-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--linea, #e3e8ef); text-align: left; vertical-align: top; }
.zs-tabla thead th { background: #f3f7fa; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; }
.zs-tabla tbody th { font-weight: 700; white-space: nowrap; }
.zs-tabla tbody tr:hover { background: #f8fbfd; }
.zs-tabla td:nth-child(2) { color: var(--gris); font-size: 14px; }

/* Sin dato NO es un hueco en blanco: dice qué pasa. */
.zs-pendiente { color: var(--gris); font-style: italic; }

/* Marca de "atendemos en inglés": la mitad de los clientes de WS Cover son
   extranjeros y es la información que más buscan de entrada. */
.zs-en {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border-radius: 4px; background: var(--marca, #1cb3e3); color: #fff;
  font-size: 11px; font-weight: 700; text-decoration: none; cursor: help;
}

.zs-cierre { max-width: 800px; margin: 0 auto; padding: 0 20px 48px; }
.ws-zona-servicio .zs-cierre h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; }

/* ESPACIADO-ZS-001 (2026-09-12, visto en producción en un móvil de 375 px).
   `editorial-productos.css` le mete a TODA sección de `.ws-product` un
   padding-block de 72 a 120 px, y esa regla gana por especificidad: entre la
   entradilla y la tabla quedaban 144 px en blanco — casi un quinto de la
   pantalla de un móvil, con la tabla empujada fuera de la primera vista.

   Esa separación tiene sentido en las páginas de producto, que alternan
   bloques grandes; aquí no, porque esto es una entradilla corta y una tabla
   que el cliente ha venido a leer. Se repite la misma cadena de `:not()` de
   la regla original para ganarle de forma explícita, en vez de a base de
   `!important`. Solo afecta a esta página. */
.ws-product section.zs-intro:not(.hero):not(.problema):not(.cta) {
  /* El de ARRIBA no se toca: la cabecera del sitio es `position:absolute` y
     mide 73 px, así que este padding es lo que impide que el h1 le quede
     debajo. Recortarlo a 28 px escondió el titular — visto en el móvil antes
     de subirlo. Lo que sobraba era el de ABAJO. */
  padding-block: clamp(88px, 9vw, 120px) 10px;
}
.ws-product section.zs-tabla-envoltorio:not(.hero):not(.problema):not(.cta) {
  padding-block: 0 clamp(28px, 4vw, 48px);
}
.ws-product section.zs-cierre:not(.hero):not(.problema):not(.cta) {
  padding-block: 0 clamp(32px, 5vw, 56px);
}

@media (max-width: 620px) {
  .zs-tabla { font-size: 14px; }
  .zs-tabla th, .zs-tabla td { padding: 8px 6px; }
  .zs-tabla td:nth-child(2) { font-size: 12.5px; }
}

/* ZONA-COSTA-001: etiqueta de la zona de costa. Nombra la política, NO la
   justifica — orden de Florin 2026-09-12: «no tenemos por qué dar
   explicaciones, simplemente es nuestra política». El porqué es interno. */
.zs-costa {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  border: 1px solid rgba(28, 179, 227, .45);
  background: rgba(28, 179, 227, .10);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}

/* ZONAS-SEO-001 (2026-09-14): tarjetas de zona en el índice (de la más
   cercana a la más lejana), fotos de trabajos en cada página de zona, miga y
   lista de otras zonas. Sin colores nuevos. */
.zs-zonas { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.ws-product section.zs-zonas:not(.hero):not(.problema):not(.cta) { padding-block: 0 clamp(24px, 4vw, 40px); }
.ws-zona-servicio .zs-zonas h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; margin: 0 0 14px; }
.zs-zonas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.zs-zona-tarjeta {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--linea, #e3e8ef); border-radius: 12px; overflow: hidden; background: #fff;
}
.zs-zona-tarjeta:hover { border-color: var(--marca, #1cb3e3); }
.zs-zona-tarjeta img { width: 100%; height: 130px; object-fit: cover; display: block; }
.zs-zona-cuerpo { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; font-size: 14px; color: var(--gris); }
.zs-zona-cuerpo strong { color: inherit; font-size: 15.5px; color: var(--texto, #111); }

.zs-miga { font-size: 14px; color: var(--gris); margin: 0 0 6px; }
.zs-miga a { color: inherit; }

.zs-fotos { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ws-product section.zs-fotos:not(.hero):not(.problema):not(.cta) { padding-block: 0 clamp(24px, 4vw, 40px); }
.zs-fotos figure { margin: 0; }
.zs-fotos img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; display: block; }
.zs-fotos figcaption { font-size: 13.5px; color: var(--gris); padding-top: 6px; }

.zs-otras { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.zs-otras a { color: var(--marca, #1cb3e3); font-weight: 600; }

/* PRECIOS-POR-MEDIDA-001 (2026-09-25): /precio-cubierta-piscina/ reutiliza esta
   tabla. La fila 8 × 4 (la medida más buscada) se distingue sin color nuevo. */
.pr-tabla thead th small, .pr-tabla tbody th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gris); font-size: 12.5px; }
.pr-tabla td { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* La tabla de zonas pone en gris su 2.ª columna (códigos postales); aquí es un precio. */
.pr-tabla td:nth-child(2) { color: inherit; font-size: inherit; }
.pr-tabla tr.pr-destacada { background: #f3f7fa; }
.pr-tabla tr.pr-destacada th, .pr-tabla tr.pr-destacada td { font-weight: 700; }

/* SEO-8X4-001 (2026-10-02): los h2 de las páginas largas de precio/zona, a tamaño de lectura (el de sección de producto era enorme). */
.ws-zona-servicio .zs-intro h2 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; margin: 26px 0 10px; }
.ws-zona-servicio .zs-intro h3 { font-size: 18px; margin: 18px 0 6px; }