/* =========================================================
   sc-que-ver.css — Qué ver y hacer en Ribadesella (inc/que-ver.php)
   Copiado del <style> de la maqueta que-ver-hacer-en-ribadesella.html (07/10/2026). Cambios:
   el fondo crema lo elige cada bloque (.guide-block--crema, antes :nth-child(even)) y la foto
   puede ir a la derecha sin depender del orden del HTML (.rev).
   ========================================================= */
.guide-intro{padding:56px 0;background:var(--cream)}
.guide-intro h2{font-size:clamp(20px,3.5vw,28px);font-weight:600;color:var(--green-ink);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 16px}
.guide-intro p{font-size:16px;line-height:1.75;color:var(--slate);max-width:72ch}
.guide-block{padding:64px 0;background:var(--white)}
.guide-block--crema{background:var(--cream)}
.guide-split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.guide-img{overflow:hidden;aspect-ratio:4/3}
.guide-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.guide-img:hover img{transform:scale(1.04)}
.guide-num{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--sunset);margin-bottom:8px}
.guide-h{font-size:clamp(22px,4.5vw,34px);font-weight:600;text-transform:uppercase;color:var(--green-ink);line-height:.96;letter-spacing:.005em;margin:4px 0 20px}
.guide-texto p{font-size:15.5px;line-height:1.75;color:var(--slate);margin:0 0 14px}
.guide-texto p:last-child{margin-bottom:0}
.guide-solo .guide-texto{max-width:72ch}
.guide-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.06);padding:5px 10px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink);margin-top:16px}
.guide-tag .ic{width:14px;height:14px;stroke:var(--green-ink)}
.icon-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
.icon-tile{display:flex;gap:14px;align-items:flex-start}
.icon-tile .ico{width:40px;height:40px;flex-shrink:0;color:var(--green);border-color:rgba(6,145,131,.32)}
.icon-tile .ico .ic{width:20px;height:20px}
.icon-tile h4{font-size:14px;font-weight:700;color:var(--green-ink);text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.icon-tile p{font-size:13.5px;line-height:1.55;color:var(--slate);margin:0}
@media(min-width:600px){.icon-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .guide-split{grid-template-columns:1fr 1fr;gap:72px}
  .guide-split.rev{direction:rtl}.guide-split.rev>*{direction:ltr}
  .icon-grid{grid-template-columns:repeat(3,1fr)}
}

/* Fondos verdes (07/10/2026): verde claro = degradado de «06 · El mar» de la maqueta, verde
   oscuro = su banda final. Texto en blanco. */
.guide-block--verde{background:var(--sea-deep)}
.guide-block--oscuro{background:var(--green-ink)}
.guide-block--verde .guide-h,.guide-block--oscuro .guide-h{color:#fff}
.guide-block--verde .guide-num,.guide-block--oscuro .guide-num{color:rgba(255,255,255,.6)}
.guide-block--verde .guide-texto p,.guide-block--oscuro .guide-texto p{color:rgba(255,255,255,.85)}
.guide-block--verde .guide-texto strong,.guide-block--oscuro .guide-texto strong{color:#fff}
.guide-block--verde .guide-texto a,.guide-block--oscuro .guide-texto a{color:#fff}
.guide-block--verde .guide-tag,.guide-block--oscuro .guide-tag{background:rgba(255,255,255,.12);color:#fff}
.guide-block--verde .guide-tag .ic,.guide-block--oscuro .guide-tag .ic{stroke:#fff}
.guide-block--oscuro .lead-rule{background:rgba(255,255,255,.25)} /* en verde claro, la raya de color (.sunset) */
.guide-block--verde .icon-tile h4,.guide-block--oscuro .icon-tile h4{color:#fff}
.guide-block--verde .icon-tile p,.guide-block--oscuro .icon-tile p{color:rgba(255,255,255,.8)}
.guide-block--verde .icon-tile .ico,.guide-block--oscuro .icon-tile .ico{color:var(--cyan-soft);border-color:rgba(159,217,220,.5)}
/* Hasta dos botones bajo el texto */
.guide-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}