/* ==========================================================================
   playas.com.es — capa visual propia v1.0 (2026-10-15)
   Mar profundo, turquesa, arena, sol y sandía. Elemento protagonista: la portada con foto, la ola del borde
   y los banderines de los tipos de playa. Se carga después de style.css y guia-territorial.css.
   ========================================================================== */
:root {
  --sol: #ffc23d;
  --sandia: #ff5a5f;
  --arena: #f6e5c3;
  --arena-2: #fbf1dc;
  --turquesa: #0fb5ba;
  --mar: #0b3954;
  --ph-sky: #bfe9f0;
  --ph-sea: #3cc2c9;
  --ph-sand: #f3dfb6;
  --z-1: #0fb5ba; --z-2: #ffb020; --z-3: #ff5a5f; --z-4: #7c5cff; --z-5: #22a861;
  --z-6: #f472b6; --z-7: #3b82f6; --z-8: #c08a2e;
  --sombra: 0 1px 2px rgba(11, 57, 84, .08), 0 8px 24px -12px rgba(11, 57, 84, .25);
}
@media (prefers-color-scheme: dark) {
  :root {
    --arena: #3a3220; --arena-2: #2a2618; --ph-sky: #12384a; --ph-sea: #12707a; --ph-sand: #5c4f33;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -12px rgba(0, 0, 0, .6);
  }
}

h1, h2, h3 { letter-spacing: -.01em; }
h1 { font-weight: 800; }
.brand-name b { color: var(--accent); font-weight: 700; }
.site-header { backdrop-filter: saturate(1.4) blur(8px); }
.btn { border-radius: 999px; font-family: var(--f-display); font-weight: 700; letter-spacing: .01em; }
.btn-test { background: var(--sandia); border-color: var(--sandia); color: #fff; }
.btn-test:hover { background: #e8484d; color: #fff; }

/* ---------- Portada: hero con foto, buscador y ola ---------- */
.hero-playa {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(520px, 78vh, 760px); display: flex; align-items: flex-end;
  background: linear-gradient(180deg, #7fd3dc 0%, #2bb3bd 55%, #0b7f8a 100%);
  color: #fff; padding: 0 0 96px;
}
.hero-playa .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-playa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 32, 45, .62) 0%, rgba(6, 32, 45, .34) 45%, rgba(6, 32, 45, 0) 75%), linear-gradient(180deg, rgba(6, 32, 45, .2) 0%, rgba(6, 32, 45, .08) 40%, rgba(6, 32, 45, .55) 100%);
}
.hero-playa-in { width: 100%; }
.hero-playa h1 {
  font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .95; margin: 0 0 .25em; max-width: 12ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35); font-weight: 800;
}
.hero-playa .lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 56ch; margin: 0 0 1.4rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); color: #fff; }
.hero-buscar {
  display: flex; align-items: center; gap: .5rem; max-width: 640px; background: #fff; color: var(--mar);
  border-radius: 999px; padding: .35rem .35rem .35rem 1.1rem; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .45);
}
.hero-buscar .icon { width: 1.3em; height: 1.3em; color: #567489; flex: none; }
.hero-buscar input { flex: 1; min-width: 0; border: 0; font: 600 1.05rem var(--f-text); color: var(--mar); background: transparent; padding: .7rem .2rem; outline: none; }
.hero-buscar input::placeholder { color: #6b8696; }
.hero-buscar .btn { background: var(--sandia); border-color: var(--sandia); color: #fff; padding: .7rem 1.3rem; }
.hero-cerca { margin: .9rem 0 0; }
.hero-cerca a { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; background: rgba(255, 255, 255, .16); padding: .35rem .8rem; border-radius: 999px; backdrop-filter: blur(4px); }
.hero-cerca a:hover { background: rgba(255, 255, 255, .28); }
.hero-credito { position: absolute; right: 12px; bottom: 58px; margin: 0; font-size: .72rem; color: rgba(255, 255, 255, .85); max-width: 60ch; text-align: right; }
.hero-credito a { color: inherit; }
.ola-borde { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; fill: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .hero-playa h1, .hero-playa .lede, .hero-buscar { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-playa .lede { animation-delay: .08s; }
  .hero-buscar { animation-delay: .16s; }
  @keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Banderines (tipos de playa) ---------- */
.home-banderines { padding: 1.2rem 0 1rem; }
.home-banderines h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .8rem; }
.banderines {
  list-style: none; margin: 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 14px 10px; position: relative;
}
.banderines::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 10px); opacity: .5;
}
.banderines li { position: relative; min-width: 0; }
.banderines li::before { content: ""; position: absolute; top: -13px; left: 50%; width: 2px; height: 12px; background: var(--ink-3); opacity: .5; }
.banderines a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none;
  background: var(--c); color: #fff; padding: .55rem .75rem 1.2rem; min-width: 92px; max-width: 150px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  font: 700 .82rem/1.15 var(--f-display); text-align: center;
  transition: transform .18s ease;
}
.banderines a .icon { width: 1.35em; height: 1.35em; }
.banderines a:hover, .banderines a:focus-visible { transform: translateY(3px) rotate(-2deg); }
.banderines-grandes a { min-width: 110px; font-size: .9rem; }

/* ---------- Costas ---------- */
.home-costas { padding: 2rem 0; background: linear-gradient(180deg, transparent, var(--arena-2) 20%, var(--arena-2) 80%, transparent); }
.home-costas-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; align-items: center; }
.home-costas-in > * { min-width: 0; }
.home-costas h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 .5rem; }
@media (max-width: 860px) { .home-costas-in { grid-template-columns: minmax(0, 1fr); } }

.ig-espana svg, .ig-mapa-costa svg { width: 100%; height: auto; display: block; }
.ig-espana .me-recuadro { fill: none; stroke: var(--line); stroke-dasharray: 4 4; }
.ig-espana .me-tierra { fill: var(--surface); stroke: var(--ink-3); stroke-width: .6; }
.ig-espana .me-prov { fill: none; stroke: var(--line); stroke-width: .6; }
.ig-espana .me-costa path { fill: var(--cc); stroke: var(--cc); stroke-width: 2.4; stroke-linejoin: round; transition: stroke-width .15s; }
.ig-espana .me-costa:hover path, .ig-espana .me-costa:focus path { stroke-width: 6; }
.me-leyenda, .mc-leyenda { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .3rem .9rem; font-size: .9rem; }
.me-leyenda li, .mc-leyenda li { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.me-leyenda li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cc); flex: none; }
.mc-leyenda li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--zc); flex: none; }
.me-leyenda span, .mc-leyenda span { color: var(--ink-3); font-size: .8rem; margin-left: auto; }
.ig-mapa-costa .mc-base { fill: var(--surface); stroke: var(--line); stroke-width: .8; }
.ig-mapa-costa .mc-zona path { fill: var(--zc); fill-opacity: .82; stroke: #fff; stroke-width: 1.2; transition: fill-opacity .15s; }
.ig-mapa-costa .mc-zona:hover path, .ig-mapa-costa .mc-zona:focus path { fill-opacity: 1; }
.ig.ig-mapa-costa svg .mc-lugar circle { fill: var(--mar); stroke: #fff; stroke-width: 1.5; }
.ig.ig-mapa-costa svg .mc-lugar text { fill: var(--ink); font: 700 13px var(--f-text); paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; }
@media (prefers-color-scheme: dark) { .ig.ig-mapa-costa svg .mc-lugar circle { fill: #fff; stroke: var(--mar); } }

/* ---------- Tarjetas de playa ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1.1rem; margin: 1rem 0 1.5rem; }
.pgrid > * { min-width: 0; }
.pcard { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; position: relative; }
.pcard-media { display: block; aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--ph-sky); }
.pcard-media img, .pcard-media svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-tiempo { position: absolute; left: 10px; bottom: 10px; }
.pcard-body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.pcard h3 { font-size: 1.18rem; line-height: 1.15; margin: 0; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard h3 a:focus-visible { outline: none; }
.pcard:has(h3 a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.pcard-mun { margin: 0; color: var(--ink-3); font-size: .9rem; display: flex; align-items: center; gap: .3rem; }
.pcard-mun .icon { width: 1em; height: 1em; }
.pcard-tipos { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; position: relative; z-index: 1; }
.pill-tipo {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px;
  font: 700 .75rem/1.3 var(--f-text); color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); text-decoration: none; white-space: nowrap;
}
.pill-tipo .icon { width: 1em; height: 1em; }
a.pill-tipo:hover { background: var(--c); color: #fff; }
@media (prefers-color-scheme: dark) { .pill-tipo { color: color-mix(in srgb, var(--c) 55%, #fff); } }
.tmini {
  display: inline-flex; align-items: center; gap: .3rem; background: rgba(255, 255, 255, .94); color: #0b3954;
  padding: .2rem .55rem; border-radius: 999px; font: 700 .85rem var(--f-text); box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.tmini .icon { width: 1.15em; height: 1.15em; color: #e0a526; }
.tmini-agua { display: inline-flex; align-items: center; gap: .15rem; color: #0b7f8a; font-weight: 700; margin-left: .2rem; }
.tmini-agua .icon { color: #0fb5ba; width: 1em; height: 1em; }

/* ---------- Cifras, guías ---------- */
.home-cifras { padding: 1.5rem 0; }
.cifras-banda { list-style: none; margin: 0; padding: 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1rem;
  background: var(--mar); color: #fff; border-radius: 28px; position: relative; overflow: hidden; }
.cifras-banda::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--sol); opacity: .9; z-index: 0; }
.cifras-banda li { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.cifras-banda b { font: 800 clamp(2rem, 4vw, 3rem)/1 var(--f-display); color: var(--sol); }
.cifras-banda li:last-child b { color: #fff; }
.cifras-banda span { font-size: .95rem; opacity: .92; }
.home-guias { padding: 1rem 0 2rem; }
.home-guias h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.guias-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .9rem; }
.guias-grid a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: 1rem; border-radius: 18px; background: var(--surface); box-shadow: var(--sombra); text-decoration: none; color: var(--ink); height: 100%; }
.guias-grid .g-ico { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.guias-grid .g-ico .icon { width: 26px; height: 26px; }
.guias-grid strong { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.2; }
.guias-grid span:last-child { color: var(--ink-3); font-size: .92rem; }
.guias-grid a:hover strong { color: var(--accent); }

/* ---------- Listas de playas ---------- */
.cifras-lista { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cifras-lista li { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c, var(--accent)); border-radius: 12px; padding: .35rem .8rem; font-size: .95rem; }
.cifras-lista b { font-family: var(--f-display); font-size: 1.15rem; margin-right: .15rem; }
.indice-grupos ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.indice-grupos a { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.indice-grupos span { font-size: .78rem; color: var(--ink-3); }
.grupo-playas { margin: 1.4rem 0; }
.grupo-playas h3 { font-size: 1.25rem; border-bottom: 3px solid var(--arena); padding-bottom: .2rem; margin-bottom: .5rem; }
.grupo-playas h3 a { color: var(--ink); text-decoration: none; }
.grupo-playas .n, .ccaa-card .n { font: 700 .8rem var(--f-text); background: var(--sol); color: #3b2a00; border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; }
.lista-compacta { list-style: none; padding: 0; margin: 0; columns: 3 220px; column-gap: 1.5rem; font-size: .96rem; }
.prose .lista-compacta li { margin: 0 0 .25rem; break-inside: avoid; }
.lista-compacta small { color: var(--ink-3); }
.mini-ico { display: inline-flex; color: var(--c); margin-left: .2rem; vertical-align: -2px; }
.mini-ico .icon { width: .95em; height: .95em; }
.nota-fuente { font-size: .85rem; color: var(--ink-3); }
.mas-enlaces { margin: .6rem 0 1.2rem; }
.botones-costa, .botones-llegar { display: flex; flex-wrap: wrap; gap: .5rem; }
.aviso-vacio { display: flex; gap: .6rem; align-items: center; background: var(--accent-soft); border-radius: 14px; padding: .8rem 1rem; }
.cifra-grande b { font: 800 2.4rem var(--f-display); color: var(--accent); }

.ccaa-grid, .costas-grid, .tipos-grid, .zonas-grid, .islas-grid, .tiempo-costas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; margin: 1rem 0 1.5rem;
}
.ccaa-grid > *, .costas-grid > *, .tipos-grid > *, .zonas-grid > *, .islas-grid > *, .tiempo-costas > * { min-width: 0; }
.ccaa-card, .tipo-card, .zona-card, .tiempo-costa { background: var(--surface); border-radius: 18px; padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.ccaa-card h2, .tipo-card h2, .tiempo-costa h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.ccaa-card h2 a, .tipo-card h2 a, .zona-card h3 a, .tiempo-costa h2 a { color: var(--ink); text-decoration: none; }
.ccaa-card ul, .zona-card ul, .tiempo-costa ul { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.ccaa-card li, .zona-card li, .tiempo-costa li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed var(--line); align-items: center; }
.ccaa-card li span, .zona-card li span { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.zona-card { border-top: 6px solid var(--zc); }
.zona-card h3 { margin: 0 0 .4rem; }
.tiempo-costa { border-top: 6px solid var(--cc); }
.tiempo-costa .tmini { box-shadow: none; background: var(--accent-soft); color: var(--ink); }
.tiempo-costa .tmini-agua { color: var(--accent); }
.ver-todas { margin: .5rem 0 0; font-weight: 700; }
.tipo-card { border-left: 6px solid var(--c); }
.tipo-card h2 { display: flex; align-items: center; gap: .5rem; }
.tipo-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; }
.tipo-n { font-weight: 800; color: var(--c); margin: 0 0 .3rem; font-family: var(--f-display); font-size: 1.15rem; }
@media (prefers-color-scheme: dark) { .tipo-n { color: color-mix(in srgb, var(--c) 55%, #fff); } }
.costa-card { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); border-top: 6px solid var(--cc); }
.costa-media { display: block; aspect-ratio: 16 / 9; background: var(--ph-sky); overflow: hidden; }
.costa-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.costa-body { padding: .8rem 1rem 1rem; }
.costa-body h2 { margin: 0; font-size: 1.35rem; }
.costa-body h2 a { color: var(--ink); text-decoration: none; }
.costa-n { color: var(--ink-3); font-size: .9rem; margin: .1rem 0 .4rem; }
.costa-links { display: flex; flex-wrap: wrap; gap: .8rem; font-weight: 700; font-size: .92rem; }
.costa-links a { display: inline-flex; gap: .25rem; align-items: center; text-decoration: none; }
.isla-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--sombra); text-decoration: none; color: var(--ink); }
.isla-media { aspect-ratio: 16 / 10; background: linear-gradient(160deg, var(--ph-sky), var(--ph-sea)); overflow: hidden; }
.isla-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isla-body { padding: .7rem 1rem .9rem; display: flex; flex-direction: column; }
.isla-body b { font: 800 1.3rem var(--f-display); }
.isla-body span { color: var(--ink-3); font-size: .9rem; }
.atajos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.atajos a { display: inline-flex; gap: .4rem; align-items: center; padding: .55rem 1rem; border-radius: 999px; background: var(--surface); box-shadow: var(--sombra); font-weight: 700; text-decoration: none; color: var(--ink); }
.chips-costas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips-costas a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; border: 2px solid var(--cc); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.chips-costas a:hover { background: var(--cc); color: #fff; }
.tabla-mapas .dot-costa { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--cc); margin-right: .45rem; vertical-align: 0; }
.tabla-mapas a, .tabla-tiempo a { font-weight: 700; }
.tabla-mapas td a { display: inline-flex; gap: .3rem; align-items: center; }

/* ---------- Ficha de playa ---------- */
.ficha-foto { margin: 0 0 1rem; border-radius: 24px; overflow: hidden; position: relative; background: var(--ph-sky); }
.ficha-foto img, .ficha-foto svg { width: 100%; max-height: 560px; object-fit: cover; display: block; }
.ficha-foto.ph svg { aspect-ratio: 12 / 5; height: auto; }
.ficha-foto figcaption { font-size: .78rem; color: var(--ink-3); padding: .45rem .8rem; background: var(--surface); }
.ficha-tipos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.ficha-tipos .pill-tipo { font-size: .85rem; padding: .3rem .7rem; }
.tiempo-dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .6rem; overflow-x: auto; padding: .2rem .2rem .6rem; scroll-snap-type: x mandatory; }
.tdia { background: var(--surface); border-radius: 18px; padding: .8rem; box-shadow: var(--sombra); scroll-snap-align: start; min-width: 0; }
.tdia:first-child { background: linear-gradient(160deg, #e6f8fa, #fff6dc); }
@media (prefers-color-scheme: dark) { .tdia:first-child { background: linear-gradient(160deg, #0f3d4a, #3a3220); } }
.tdia-n { margin: 0; font: 800 1rem var(--f-display); }
.tdia-ico .icon { width: 42px; height: 42px; color: #e0a526; margin: .2rem 0; }
.tdia-c { margin: 0; font-size: .85rem; color: var(--ink-2); }
.tdia-t { margin: .2rem 0; font-family: var(--f-display); }
.tdia-t b { font-size: 1.6rem; }
.tdia-t span { color: var(--ink-3); }
.tdia-x { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .82rem; color: var(--ink-2); }
.prose .tdia-x li { margin: 0 0 .15rem; display: flex; gap: .3rem; align-items: center; }
.tdia-x .icon { width: 1em; height: 1em; color: var(--accent); }
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.ficha-datos > div { background: var(--surface); border-radius: 14px; padding: .6rem .8rem; border: 1px solid var(--line); min-width: 0; }
.ficha-datos dt { font-size: .78rem; color: var(--ink-3); font-weight: 700; }
.ficha-datos dd { margin: 0; font-weight: 700; display: flex; gap: .3rem; align-items: center; overflow-wrap: anywhere; }
.wiki-extracto { margin: 1rem 0; padding: 1rem 1.2rem; border-left: 5px solid var(--sol); background: var(--arena-2); border-radius: 0 16px 16px 0; }
.wiki-extracto footer { font-size: .82rem; color: var(--ink-3); margin-top: .4rem; }
.ficha-desc { margin: 0 0 1rem; }

/* ---------- Mapas Leaflet ---------- */
.mapa-leaflet { height: 460px; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); background: var(--ph-sky); margin: .6rem 0 1rem; position: relative; z-index: 0; }
.mapa-grande { height: min(74vh, 720px); }
.mapa-ficha { height: 360px; }
.mapa-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .2rem; }
.mapa-filtros button { display: inline-flex; align-items: center; gap: .3rem; border: 2px solid var(--c, var(--accent)); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .25rem .7rem; font: 700 .82rem var(--f-text); cursor: pointer; }
.mapa-filtros button[aria-pressed="true"] { background: var(--c, var(--accent)); color: #fff; }
.mapa-filtros .mf-n { font-weight: 400; opacity: .8; }
.mapa-contador { font-size: .85rem; color: var(--ink-3); margin: .2rem 0 0; }
.pin-playa { width: 16px; height: 16px; border-radius: 50%; background: var(--pc, #0fb5ba); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.pin-playa.dest { width: 26px; height: 26px; background: var(--sandia); border-width: 3px; }
.leaflet-popup-content { font: 400 .92rem/1.4 var(--f-text); }
.leaflet-popup-content b { font-family: var(--f-display); font-size: 1.05rem; }
.leaflet-popup-content a.btn { color: #fff; padding: .3rem .8rem; font-size: .85rem; margin-top: .3rem; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(15, 181, 186, .3); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: rgba(11, 127, 138, .85); color: #fff; font: 700 12px var(--f-text); }

/* ---------- Buscador ---------- */
.buscador { background: var(--surface); border-radius: 24px; padding: 1rem; box-shadow: var(--sombra); margin-bottom: .8rem; }
.buscador-fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.buscador-fila input[type="search"] { flex: 1 1 240px; min-width: 0; font: 600 1.05rem var(--f-text); padding: .7rem 1rem; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); }
.buscador-ico { display: none; }
.buscador select { font: 600 1rem var(--f-text); padding: .45rem .8rem; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); max-width: 100%; }
.btn-cerca { background: var(--sandia); border-color: var(--sandia); color: #fff; }
.buscador-tipos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.buscador-tipos legend { font-weight: 800; margin-bottom: .4rem; font-family: var(--f-display); }
.chip-tipo { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 2px solid var(--c); cursor: pointer; font: 700 .85rem var(--f-text); user-select: none; }
.chip-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-tipo:has(input:checked) { background: var(--c); color: #fff; }
.chip-tipo:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip-tipo .icon { width: 1em; height: 1em; }
.buscador-res { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.mapa-buscador { height: 620px; position: sticky; top: 84px; margin: 0; }
.buscador-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 620px; overflow: auto; }
.buscador-lista li { display: grid; grid-template-columns: 88px 1fr; gap: .7rem; align-items: center; background: var(--surface); border-radius: 16px; padding: .5rem; box-shadow: var(--sombra); }
.buscador-lista img, .buscador-lista .bl-ph { width: 88px; height: 64px; object-fit: cover; border-radius: 12px; background: var(--ph-sky); display: block; }
.buscador-lista b a { color: var(--ink); text-decoration: none; font-family: var(--f-display); font-size: 1.08rem; }
.buscador-lista small { color: var(--ink-3); display: block; }
.buscador-estado { font-weight: 700; }
@media (max-width: 860px) { .buscador-res { grid-template-columns: minmax(0, 1fr); } .mapa-buscador { height: 380px; position: relative; top: 0; } .buscador-lista { max-height: none; } }

/* ---------- Tiempo ---------- */
.tcielo { display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
.tcielo .icon { color: #e0a526; }
.t-pendiente { color: var(--ink-3); font-style: italic; }
.tiempo-mun h2 { font-size: 1.3rem; }

/* ---------- Infografías propias ---------- */
.ig-banderas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .8rem; }
.ig-banderas li { display: grid; grid-template-columns: 56px 1fr; gap: .7rem; align-items: start; background: var(--surface); border-radius: 16px; padding: .8rem; border: 1px solid var(--line); }
.ig-banderas svg { width: 56px; height: 56px; }
.ig-banderas strong { font-family: var(--f-display); font-size: 1.1rem; display: block; }
.ig-banderas span { font-size: .9rem; color: var(--ink-2); }
.ig-uv { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 14px; overflow: hidden; font-size: .85rem; }
.ig-uv > div { padding: .6rem .5rem; color: #fff; min-width: 0; }
.ig-uv b { display: block; font: 800 1.2rem var(--f-display); }
@media (max-width: 640px) { .ig-uv { grid-template-columns: minmax(0, 1fr); } }
.ig-calidad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.ig-calidad > div { border-radius: 14px; padding: .7rem; color: #fff; min-width: 0; }
.ig-calidad b { display: block; font: 800 1.15rem var(--f-display); }
@media (max-width: 640px) { .ig-calidad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Mejores playas (guía) ---------- */
.top-playa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.2rem; align-items: center; margin: 1.6rem 0; }
.top-playa figure { margin: 0; }
.top-playa h3 { margin: 0 0 .3rem; font-size: 1.35rem; }
.top-playa .donde { color: var(--ink-3); font-weight: 700; font-size: .9rem; margin: 0 0 .4rem; }
@media (max-width: 760px) { .top-playa { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Webs recomendadas ---------- */
.webs-grid { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .8rem; }
.prose .webs-grid li { margin: 0; }
.webs-grid a { display: block; height: 100%; padding: .9rem 1rem; border-radius: 16px; background: var(--surface); box-shadow: var(--sombra); text-decoration: none; color: var(--ink); }
.webs-grid strong { display: block; font-family: var(--f-display); font-size: 1.12rem; color: var(--accent); }
.webs-grid span { font-size: .92rem; color: var(--ink-2); }

@media (max-width: 640px) {
  .hero-playa { min-height: 560px; padding-bottom: 84px; }
  .hero-buscar { flex-wrap: wrap; border-radius: 22px; padding: .5rem; }
  .hero-buscar .icon { display: none; }
  .hero-buscar input { padding-left: .6rem; }
  .hero-buscar .btn { width: 100%; justify-content: center; }
  .hero-credito { bottom: 52px; left: 12px; text-align: left; }
  .banderines a { min-width: 80px; font-size: .76rem; }
  .mapa-leaflet { height: 380px; }
}

/* Listas, mapas y herramientas a todo el ancho (el texto largo sigue con su medida) */
.t-list .prose-solo, .t-tool .prose-solo { max-width: none; }
.t-list .prose-solo > p, .t-tool .prose-solo > p, .t-list .prose-solo > h2, .t-tool .prose-solo > h2 { max-width: var(--measure); }