/* Atlas — calas y playas. Se carga en /calas/, en cada página de cala y en las de pueblo con calas. Todo en tokens de site.css (claro/oscuro). */

/* ---------- cabecera ---------- */
.cl-hero{padding-block:clamp(1.2rem,3.4vw,2.6rem) clamp(.6rem,1.6vw,1.2rem)}
.cl-hero h1{font-size:clamp(2.4rem,1.2rem + 4.4vw,5rem);line-height:.96;letter-spacing:-.04em;margin:0 0 .3em;overflow-wrap:anywhere;max-inline-size:16ch}
.cl-hero h1 em{font-style:normal;color:var(--accent)}
.cl-hero .eyebrow{line-height:1.45}
.cl-hero--page{padding-block:clamp(.4rem,1.6vw,1.4rem) clamp(1rem,2.4vw,1.8rem)}
.cl-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem,4vw,4rem);align-items:center}
.cl-hero-in>.crumbs{grid-column:1/-1}.cl-hero-in>.crumbs ol{margin-block:0 .2rem}
.cl-hero--nophoto .cl-hero-in{grid-template-columns:minmax(0,1fr)}
.cl-hero-txt{min-inline-size:0}
.cl-hero--page h1{max-inline-size:none}
.cl-alt{font:500 .86rem/1.4 var(--ff-mono);color:var(--muted);margin:-.2rem 0 .9rem;letter-spacing:.02em}
.cl-hero .lead{margin:0 0 1.2rem}
.cl-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin:0 0 1.3rem;border-block:1px solid var(--line)}
.cl-quick div{padding:.8rem 1rem .85rem 0;min-inline-size:0}.cl-quick div+div{padding-inline-start:1rem;border-inline-start:1px solid var(--line)}
.cl-quick dt{font:500 .68rem/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-block-end:.35rem}
.cl-quick dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}.cl-quick a{text-decoration:none}.cl-quick a:hover{text-decoration:underline}
.cl-cta{margin:0}
.cl-hero-fig{margin:0;min-inline-size:0}
.cl-hero-fig picture{display:block;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--dom,var(--surface-2));box-shadow:var(--shadow-lg)}
.cl-hero-fig img{inline-size:100%;block-size:100%;object-fit:cover}
.cl-hero-fig figcaption{margin-block-start:.5rem}.cl-hero-fig .credit{display:inline-block;max-inline-size:100%;overflow-wrap:anywhere}

/* ---------- navegación de la página ---------- */
.cl-sub{position:sticky;inset-block-start:72px;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px) saturate(1.2);border-block:1px solid var(--line)}
.cl-sub ul{list-style:none;margin:0;padding:.45rem 0;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.cl-sub ul::-webkit-scrollbar{display:none}
.cl-sub a{display:inline-flex;align-items:center;min-block-size:40px;padding:.45rem .9rem;border-radius:999px;font:500 .88rem/1 var(--ff);color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.cl-sub a:hover{color:var(--ink);background:var(--surface-2)}

/* ---------- secciones ---------- */
.cl-body{padding-block-end:clamp(2rem,5vw,4rem)}
.cl-sec{padding-block-start:clamp(2.2rem,5vw,3.8rem)}
.cl-sec>h2,.cl-sec-head h2{margin-block-end:.55em}
.cl-sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;margin-block-end:.4rem}
.cl-sec-head h2{margin:0}
.cl-sec h3{font-size:1.2rem}

/* de un vistazo */
.cl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
.cl-fact{padding:1rem 1.2rem;min-inline-size:0;box-shadow:inset 0 0 0 .5px var(--line)}
.cl-fact dt{font:500 .7rem/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-block-end:.4rem}
.cl-fact dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.cl-fact dd small{display:block;margin-block-start:.35rem;font-weight:400;font-size:.84rem;line-height:1.45;color:var(--muted)}
.cl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cl-chips li{padding:.3rem .65rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-weight:500;font-size:.86rem;line-height:1.3}

/* cómo llegar */
.cl-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-block-start:1rem}
.cl-way{border-block-start:2px solid var(--ink);padding-block-start:.9rem;min-inline-size:0}
.cl-way h3{margin-block-end:.5em}
.cl-way p{margin:0 0 .7em}
.cl-way-v{font-weight:600}
.cl-way-a{margin-block:.4rem 0}
.cl-lines{list-style:none;margin:0 0 .8em;padding:0;display:grid;gap:.4rem}
.cl-lines li{overflow-wrap:anywhere}
/* cómo llegar: iconos de columna, fichas de datos clave e insignias de línea (calas-ways.mjs) */
.cl-way-h{display:flex;align-items:center;gap:.65rem}
.cl-ico{flex:none;display:inline-grid;place-items:center;inline-size:2.2rem;block-size:2.2rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
.cl-ico .cl-i{inline-size:1.25rem;block-size:1.25rem}
.cl-keys{list-style:none;margin:0 0 .6em;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cl-key{display:inline-flex;align-items:center;gap:.4rem;max-inline-size:100%;padding:.28rem .7rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.88rem;line-height:1.3;overflow-wrap:anywhere}
.cl-key .cl-i{flex:none;inline-size:1rem;block-size:1rem;color:var(--accent-ink)}
.cl-way .cl-way-note{margin:0 0 .6em;font-size:.84rem;line-height:1.5;color:var(--muted)}
.cl-lines--bus{gap:0;margin-block-end:.6em}
.cl-lines--bus li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .75rem;align-items:start;padding-block:.55rem;border-block-start:1px solid var(--line)}
.cl-lines--bus li:last-child{border-block-end:1px solid var(--line)}
.cl-badge{display:inline-block;min-inline-size:2.9rem;padding:.25rem .55rem;border-radius:.55rem;background:var(--accent);color:var(--on-accent);font:600 .95rem/1.25 var(--ff-mono);text-align:center;text-decoration:none}
a.cl-badge:hover{background:color-mix(in oklch,var(--accent),black 14%)}
:root[data-theme="dark"] a.cl-badge:hover{background:color-mix(in oklch,var(--accent),white 14%)}
.cl-bus-b{display:grid;gap:.3rem;justify-items:start;min-inline-size:0}
.cl-route{font-weight:600;overflow-wrap:anywhere}
.cl-bus-b small{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}

/* cuándo ir */
.cl-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.cl-when h3{margin-block:1.2rem .5rem}.cl-when>div>h3:first-child,.cl-when>div>.cl-wind>h3:first-child{margin-block-start:0}
.cl-sea{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;align-items:end;block-size:150px;margin-block:.4rem .6rem}
.cl-sea span{position:relative;display:grid;grid-template-rows:1fr auto auto;justify-items:center;block-size:100%;min-inline-size:0;font:500 .6rem/1.2 var(--ff-mono);color:var(--muted)}
.cl-sea i{align-self:end;inline-size:100%;block-size:var(--h,50%);background:color-mix(in srgb,var(--accent) 38%,var(--bg));border-radius:3px 3px 0 0}
.cl-sea span.on i{background:var(--accent)}
.cl-sea b{font-weight:600;color:var(--ink);padding-block-start:.25rem}
.cl-sea small{font:inherit;text-transform:uppercase;letter-spacing:.02em;overflow:hidden;max-inline-size:100%}
.cl-wind{padding:1.1rem 1.25rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cl-wind h3{margin-block-end:.5em}.cl-wind p{margin:0 0 .6em}.cl-wind p:last-child{margin:0}
.cl-when .tq{margin-block-start:1rem}

/* mapa y calas cerca */
.cl-mapgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:1.6rem;align-items:start}
.cl-map-frame{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:color-mix(in oklch,var(--accent) 6%,var(--bg));min-inline-size:0}
.cl-map-frame .isle-map .sea{fill:color-mix(in oklch,var(--accent) 6%,var(--bg))}
.cl-map-frame figcaption{padding:.4rem .8rem}
.cl-near{list-style:none;padding:0;margin:0 0 1.2rem;display:grid}
.cl-near li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:baseline;padding:.6rem 0;border-block-end:1px solid var(--line)}
.cl-near i{inline-size:.6rem;block-size:.6rem;border-radius:50%;background:var(--accent);display:inline-block}
.cl-near a{text-decoration:none;font-weight:500}.cl-near a:hover{text-decoration:underline}
.cl-near span{font:500 .78rem/1 var(--ff-mono);color:var(--muted);white-space:nowrap}
.cl-near-h{font:500 .74rem/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .4rem}
.cl-links{display:grid;gap:.5rem;margin:0}

/* preguntas y fuentes */
.cl-faq details{max-inline-size:none}
.cl-src ul{padding-inline-start:1.1em}.cl-src li{overflow-wrap:anywhere}

/* ---------- tarjetas e índice ---------- */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1.2rem;margin-block:1.2rem 2rem}
.cl-grid--town{margin-block-end:1rem}
.cl-card{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);text-decoration:none;color:inherit;transition:transform .35s var(--ease),border-color .25s,box-shadow .35s}
.cl-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow-lg)}
.cl-card[hidden]{display:none}
.cl-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.cl-card-media picture{display:block;block-size:100%;background:var(--dom,var(--surface-2))}.cl-card-media img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease)}.cl-card:hover .cl-card-media img{transform:scale(1.05)}
.cl-card-ph{display:block;inline-size:100%;block-size:100%;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--line) 70%,transparent) 14px 15px),color-mix(in srgb,var(--sand) 40%,var(--surface-2))}
.cl-card-body{display:grid;gap:.25rem;align-content:start;padding:1rem 1.15rem 1.15rem}
.cl-card-body small{font:500 .7rem/1.3 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cl-card-body strong{font:700 1.3rem/1.1 var(--ff-display);letter-spacing:-.02em}
.cl-card-meta{font-size:.9rem;color:var(--muted)}

/* filtros del índice (se muestran con JS; sin JS, todas las calas visibles) */
.cl-map-frame--hub{margin-block:0}
.cl-filters{display:grid;gap:.9rem;margin-block:.4rem 1rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cl-filters[hidden]{display:none}
.cl-fg{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.4rem 1rem;align-items:center}
.cl-fl{font:500 .7rem/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cl-fp{display:flex;flex-wrap:wrap;gap:.4rem}
.cl-fcount{margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.cl-hero .wrap>.crumbs{margin-block-end:.2rem}

@media (max-width:900px){
  .cl-hero-in,.cl-when,.cl-mapgrid{grid-template-columns:minmax(0,1fr)}
  .cl-hero-fig{order:-1}
  .cl-hero--page .cl-hero-in>.crumbs{order:-2}
}
@media (max-width:560px){
  .cl-fg{grid-template-columns:minmax(0,1fr)}
  .cl-quick{grid-template-columns:minmax(0,1fr)}
  .cl-quick div+div{padding-inline-start:0;border-inline-start:0;border-block-start:1px solid var(--line)}
  .cl-quick div{padding-inline-end:0}
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .cl-card-body{padding:.75rem .8rem .85rem}.cl-card-body strong{font-size:1.1rem}
  .cl-grid--town{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-sea{block-size:130px;gap:2px}.cl-sea small{display:none}
  /* índice con 40 puntos: en un móvil el mapa mide ~350 px, así que los puntos se agrandan (r en unidades del mapa) para verse y poder tocarse */
  #calasmap .pin .dot{r:13px}#calasmap .pin .pulse{r:19px}#calasmap .pin .hit{r:26px}
}
@media (prefers-reduced-motion:reduce){.cl-card,.cl-card-media img{transition:none}.cl-card:hover{transform:none}}
.cl-map-osm{position:absolute;inset-inline-end:.6rem;inset-block-end:.4rem;font:500 .68rem var(--ff-mono);color:var(--muted);pointer-events:none}