/* guia-territorial.css — Capa de la guía territorial (plantilla 1.3, de todomalaga 1.1)
   Se carga solo si app/tema.php tiene 'guia_css' => true (layout.php). Es un ejemplo de identidad turística
   (sol, mar, cal); reescribe colores, tipografías y adornos para cada sitio. Mantén los selectores:
   .hero-foto, .dest-grid, figure.foto, .galeria, .lugares, .mapa-prov, .cal, .barras-t, .dist, .plan-filtros,
   .planes, .ruta, .webs, .creditos y las variables --z-1…--z-10 (colores de las zonas del mapa). */
/* ==========================================================================
   Capa «guía territorial» 1.0 (todomalaga) — identidad turística: sol y mar (rehacer colores y tipografías por sitio)
   ========================================================================== */
:root {
  --sun: #ffb703; --coral: #e4572e; --turq: #1fa9a0; --sea: #0866a8; --navy: #0b2a42;
  /* Colores de las zonas del mapa (z-1 … z-10, en el orden de tema.php → guia.mapa.zonas) */
  --z-1: #f39c12; --z-2: #e4572e; --z-3: #1fa9a0; --z-4: #7cb342; --z-5: #8e5bd8;
  --z-6: #c0703a; --z-7: #2e8b57; --z-8: #3a86c8; --z-9: #c0397a; --z-10: #6b7a8f;
  --shadow: 0 10px 30px -12px rgba(15, 45, 69, .35);
}
@media (prefers-color-scheme: dark) { :root { --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); } }
body { background: var(--paper); }
h1, h2, h3 { font-family: var(--f-display); }
h1 { font-weight: 650; font-variation-settings: "SOFT" 60, "WONK" 1; letter-spacing: -.02em; }
h2 { font-weight: 620; font-variation-settings: "SOFT" 50; letter-spacing: -.01em; }
.site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--sea), var(--turq), var(--sun), var(--coral)) 1; }
.brand-name { font-family: var(--f-display); font-variation-settings: "SOFT" 100; }
.brand-name b { color: var(--coral); font-weight: 750; }
.btn { background: var(--sea); border-color: var(--sea); color: #fff; border-radius: 999px; }
.btn:hover { background: transparent; color: var(--sea); }
.btn-ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn-test { background: var(--sun); border-color: var(--sun); color: #3a2a00; }
.btn-test:hover { background: transparent; color: var(--ink); border-color: var(--sun); }
@media (prefers-color-scheme: dark) { .btn { color: #06243a; background: #6cc4ff; border-color: #6cc4ff; } .btn:hover { color: #6cc4ff; } }

/* ---- Portada con foto ---- */
.hero-foto { position: relative; min-height: min(82vh, 760px); display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.hero-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 30, 48, .15) 0%, rgba(8, 30, 48, .35) 45%, rgba(8, 30, 48, .88) 100%); }
.hero-foto .wrap { padding-top: 6rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); width: 100%; }
.hero-foto h1 { color: #fff; font-size: clamp(2.7rem, 8vw, 6rem); line-height: .98; max-width: 12ch; margin: 0 0 1rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero-foto h1 em { font-style: italic; color: var(--sun); }
.hero-foto .lede { color: #f3f7fa; font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 42rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.hero-foto .btn-ghost { color: #fff; border-color: #fff; }
.hero-foto .btn-ghost:hover { background: #fff; color: var(--navy); }
.hero-foto .btn { color: #fff; background: var(--coral); border-color: var(--coral); }
.hero-foto .btn:hover { background: transparent; color: #fff; }
.hero-foto .hero-credit { position: absolute; right: .75rem; bottom: .5rem; font-size: .75rem; color: rgba(255, 255, 255, .8); margin: 0; }
.hero-foto .hero-credit a { color: inherit; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.hero-chips a { display: inline-block; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; text-decoration: none; font-size: .95rem; backdrop-filter: blur(4px); }
.hero-chips a:hover { background: rgba(255, 255, 255, .3); }

/* ---- Tarjetas de destino con foto ---- */
.destinos { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.dest-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.dest-grid > li { min-width: 0; margin: 0; }
.dest-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 20rem; border-radius: var(--r-l); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; box-shadow: var(--shadow); }
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.dest-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(6, 22, 36, .88)); }
.dest-card:hover img { transform: scale(1.06); }
.dest-card .dc-body { padding: 1.2rem 1.25rem 1.3rem; }
.dest-card h3 { color: #fff; font-size: 1.5rem; margin: .35rem 0 .3rem; }
.dest-card p { margin: 0; color: #e8eef4; font-size: .98rem; line-height: 1.45; }
.dest-card .dc-tag { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--sun); color: #3a2a00; padding: .2rem .6rem; border-radius: 999px; }
.prose .dest-grid { margin: 1.5rem 0 2rem; padding: 0; }
.prose .dest-card { min-height: 15rem; }

/* ---- Fotos dentro de los artículos ---- */
.prose figure.foto { margin: 1.8rem 0 2.2rem; }
.prose figure.foto img { display: block; width: 100%; border-radius: var(--r-m); box-shadow: var(--shadow); aspect-ratio: 3 / 2; object-fit: cover; background: var(--line); }
.prose figure.foto.foto-alta img { aspect-ratio: 4 / 5; }
.prose figure.foto figcaption { font-size: .95rem; color: var(--ink-2); margin-top: .6rem; line-height: 1.45; }
.credito { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .15rem; }
.credito a { color: inherit; }
.prose .galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 1.5rem 0 2rem; }
.prose .galeria > * { min-width: 0; }
.prose .galeria figure.foto { margin: 0; }
.prose figure.foto-portada { margin-top: 0; }
@media (min-width: 1080px) { .prose figure.foto-portada { margin-right: -6rem; } }

/* ---- Fichas de lugares ---- */
.lugares { list-style: none; padding: 0 !important; margin: 1.5rem 0 2rem; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.lugares > li { min-width: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--c, var(--turq)); border-radius: var(--r-m); padding: 1rem 1.1rem; }
.lugares strong { display: block; font-family: var(--f-display); font-size: 1.15rem; margin-bottom: .25rem; }
.lugares span { color: var(--ink-2); font-size: .98rem; line-height: 1.45; display: block; }
.keypoints { border-left: 6px solid var(--sun); background: color-mix(in srgb, var(--sun) 10%, var(--surface)); }
.keypoints .kp-title .icon { color: var(--coral); }
.callout { border-radius: var(--r-m); }

/* ---- Mapa de la provincia ---- */
.mapa-prov { margin: 1.5rem 0 2rem; }
.mapa-prov svg { width: 100%; height: auto; display: block; }
.mapa-prov .mar { fill: color-mix(in srgb, var(--sea) 14%, var(--paper)); }
.mapa-prov .zona path { stroke: var(--paper); stroke-width: 1.6; stroke-linejoin: round; transition: filter .2s, opacity .2s; }
.mapa-prov a.zona:hover path, .mapa-prov a.zona:focus path { filter: brightness(1.12) saturate(1.2); }
.mapa-prov a.zona:focus { outline: none; }
.mapa-prov a.zona:focus-visible path { stroke: var(--ink); stroke-width: 3; }
.mapa-prov .z-1 path { fill: var(--z-1); }
.mapa-prov .z-2 path { fill: var(--z-2); }
.mapa-prov .z-3 path { fill: var(--z-3); }
.mapa-prov .z-4 path { fill: var(--z-4); }
.mapa-prov .z-5 path { fill: var(--z-5); }
.mapa-prov .z-6 path { fill: var(--z-6); }
.mapa-prov .z-7 path { fill: var(--z-7); }
.mapa-prov .z-8 path { fill: var(--z-8); }
.mapa-prov .z-9 path { fill: var(--z-9); }
.mapa-prov .z-10 path { fill: var(--z-10); }
.ig.mapa-prov svg text { font-family: var(--f-text); }
.ig.mapa-prov svg .zl { font: 800 15px/1 var(--f-text); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .45); stroke-width: 3px; pointer-events: none; text-anchor: middle; }
.ig.mapa-prov svg .pl { font: 600 11.5px/1 var(--f-text); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; pointer-events: none; }
.ig.mapa-prov svg .pt { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.ig.mapa-prov svg .pt-star { fill: var(--sun); stroke: var(--ink); stroke-width: 1.2; }
.ig.mapa-prov svg .mar-t { font: italic 600 18px/1 var(--f-display); fill: color-mix(in srgb, var(--sea) 70%, var(--paper)); letter-spacing: .2em; }
.mapa-ley { list-style: none; padding: 0 !important; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .95rem; }
.mapa-ley li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.mapa-ley i { width: .95rem; height: .95rem; border-radius: 4px; display: inline-block; }

/* ---- Calendario de fiestas ---- */
.cal { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.cal > li { min-width: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.cal .mes { display: block; font: 700 .95rem/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; padding: .55rem .9rem; color: #fff; background: var(--c); }
.cal ul { list-style: none; padding: .6rem .9rem .8rem !important; margin: 0; }
.cal ul li { font-size: .95rem; line-height: 1.35; padding: .3rem 0; border-top: 1px dashed var(--line); margin: 0; }
.cal ul li:first-child { border-top: 0; }
.cal ul li b { display: block; }
.cal ul li small { color: var(--ink-3); }

/* ---- Barras de clima / distancias ---- */
.barras-t { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; align-items: end; height: 13rem; margin: 1rem 0 .4rem; }
.barras-t > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.barras-t span.b { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--coral), var(--sun)); }
.barras-t span.v { font-size: .78rem; font-weight: 700; margin-bottom: .2rem; }
.barras-t span.m { font-size: .78rem; color: var(--ink-3); margin-top: .3rem; }
.dist { list-style: none; padding: 0 !important; margin: 1rem 0 0; display: grid; gap: .45rem; }
.dist li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 4.5rem; gap: .7rem; align-items: center; margin: 0; font-size: .95rem; }
.dist .bar { height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--turq), var(--sea)); }
.dist b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Planificador ---- */
.plan-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.plan-filtros button { font: inherit; padding: .5rem 1rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.plan-filtros button[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
@media (prefers-color-scheme: dark) { .plan-filtros button[aria-pressed="true"] { color: #06243a; background: #6cc4ff; border-color: #6cc4ff; } }
.planes { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.planes > li { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; }
.planes > li[hidden] { display: none; }
.planes img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.planes .pb { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.planes h3 { font-size: 1.2rem; margin: 0; }
.planes p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.45; }
.planes .tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .5rem; }
.planes .tags span { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); }
.ruta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem 1.4rem; margin: 0 0 1.2rem; }
.ruta h3 { margin-top: 0; }
.ruta ol { margin: 0; padding-left: 1.3em; }
.ruta li { margin-bottom: .45rem; }

/* ---- Webs recomendadas ---- */
.webs { list-style: none; padding: 0 !important; margin: 1.5rem 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.webs > li { min-width: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.1rem 1.2rem; }
.webs a.w { font: 650 1.2rem/1.2 var(--f-display); text-decoration: none; }
.webs span { display: block; color: var(--ink-2); font-size: .97rem; margin-top: .35rem; line-height: 1.45; }

/* ---- Créditos ---- */
.creditos { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.creditos li { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; font-size: .9rem; }
.creditos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.creditos .cb { padding: .6rem .8rem .8rem; line-height: 1.4; word-break: break-word; }

/* ---- Pie ---- */
.site-footer { background: var(--navy); position: relative; margin-top: 4rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -29px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30C120 0 240 0 360 15s240 15 360 0 240-15 360 0 240 15 360-3v18z' fill='%230b2a42'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.site-footer .brand-name b { color: var(--sun); }
.site-footer .footer-h { color: var(--sun); }