/* ==========================================================================
   Cazurreo — guía (fichas, listados, zonas, Mi ruta)
   Se carga solo en esas páginas, encima de main.css.
   ========================================================================== */

/* ── Hero de ficha / zona ─────────────────────────────────────────────── */

.czr-fhero {
	position: relative; display: flex; align-items: flex-end;
	min-height: 340px; margin-bottom: 1.25rem; overflow: hidden;
	background: var(--czr-navy); color: #fff;
}
@media (min-width: 768px) { .czr-fhero { min-height: 440px; } }
.czr-fhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.czr-fhero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,30,53,.15) 0%, rgba(11,30,53,.35) 45%, rgba(11,30,53,.92) 100%);
}
.czr-fhero--noimg { min-height: 0; background: linear-gradient(135deg, var(--czr-navy), var(--czr-navy-mid)); }
.czr-fhero--noimg::after { display: none; }
.czr-fhero__in { position: relative; z-index: 1; width: 100%; padding-top: 2rem; padding-bottom: 1.75rem; display: flex; flex-direction: column; gap: .6rem; }
.czr-fhero .czr-crumbs { color: rgba(255,255,255,.75); margin: 0; }
.czr-fhero .czr-crumbs a:hover { color: #fff; }
.czr-fhero__title { font-size: clamp(1.9rem, 1.3rem + 3vw, 3.2rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.08; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.czr-fhero__sub { margin: 0; max-width: 60ch; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: rgba(255,255,255,.9); display: flex; gap: .4rem; align-items: center; }
.czr-fhero__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.czr-fhero__rating { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .35rem; }

.czr-chip {
	display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px;
	background: rgba(255,255,255,.16); color: #fff; font-size: .8rem; font-weight: 700;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.czr-chip:hover { background: rgba(255,255,255,.28); color: #fff; }
.czr-chip--hot { background: var(--czr-primary); }
.czr-chip small { opacity: .75; font-weight: 600; }

/* Estrellas con relleno proporcional: --r de 0 a 5 */
.czr-stars { --pct: calc(var(--r) / 5 * 100%); display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; }
.czr-stars::before {
	content: "★★★★★";
	background: linear-gradient(90deg, #ffb400 var(--pct), rgba(255,255,255,.35) var(--pct));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Datos rápidos y acciones ─────────────────────────────────────────── */

.czr-facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
	margin: 0 0 1rem; border: 1px solid var(--czr-border); border-radius: var(--czr-radius);
	background: var(--czr-border); overflow: hidden;
}
.czr-facts__item { padding: .8rem 1rem; background: #fff; }
.czr-facts dt { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--czr-k, var(--czr-text-light)); }
.czr-facts dd { margin: .25rem 0 0; font-weight: 600; font-size: .95rem; }
.czr-open { display: inline-block; margin-top: .35rem; padding: .15rem .5rem; border-radius: 4px; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.czr-open.is-open { background: #e7f5ec; color: #1f6b3e; }
.czr-open.is-closed { background: #fdecea; color: #a1281e; }
.czr-factions { margin-bottom: 1.5rem; }

/* ── Bloques de contenido ─────────────────────────────────────────────── */

.czr-steps { list-style: none; counter-reset: st; display: grid; gap: .6rem; padding: 0; }
.czr-steps li { counter-increment: st; }
.czr-steps a { display: flex; align-items: center; gap: .9rem; padding: .6rem; border: 1px solid var(--czr-border); border-radius: var(--czr-radius); font-weight: 700; }
.czr-steps a::before {
	content: counter(st); flex: 0 0 30px; height: 30px; display: grid; place-items: center;
	border-radius: 50%; background: var(--czr-k, var(--czr-primary)); color: #fff; font-weight: 900;
}
.czr-steps img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; }
.czr-steps a:hover { border-color: var(--czr-k, var(--czr-primary)); }
.czr-chips span { display: inline-block; padding: .45rem .85rem; border-radius: 999px; background: var(--czr-bg-soft); font-size: .9rem; font-weight: 600; }
.czr-gallery a { display: block; cursor: zoom-in; }

/* ── Mapas (Leaflet bajo demanda) ─────────────────────────────────────── */

.czr-map {
	position: relative; height: 320px; border-radius: var(--czr-radius); overflow: hidden;
	background: var(--czr-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23e6e1d8'/%3E%3C/svg%3E");
	display: grid; place-items: center; z-index: 0;
}
.czr-map--lg { height: 520px; }
@media (max-width: 767px) { .czr-map--lg { height: 420px; } }
.czr-map__load { padding: .7rem 1.2rem; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-weight: 700; }
.czr-map.is-loading::after { content: "Cargando mapa…"; color: var(--czr-text-light); font-size: .9rem; }
.czr-map__addr { margin: .6rem 0 0; color: var(--czr-text-mid); font-size: .92rem; }
.czr-map__err { color: var(--czr-text-mid); }
.czr-pin { display: block; width: 18px; height: 18px; margin: 4px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.czr-pin--num { width: 26px; height: 26px; margin: 0; display: grid; place-items: center; color: #fff; font: 800 12px/1 var(--czr-font); border-width: 2px; }
.czr-popup { display: flex; flex-direction: column; gap: .15rem; color: var(--czr-text) !important; }
.czr-popup small { color: var(--czr-text-light); text-transform: uppercase; font-size: .68rem; font-weight: 800; letter-spacing: .05em; }
.czr-popup strong { font-size: .95rem; }

/* ── Barra lateral de ficha ───────────────────────────────────────────── */

.czr-fbox { display: flex; flex-direction: column; gap: 1rem; }
.czr-ruta-add.is-added { background: #2f7d4f; }
.czr-rate__label { margin: 0 0 .3rem; font-weight: 700; font-size: .92rem; }
.czr-rate__stars { display: flex; gap: .15rem; }
.czr-rate__stars button { border: 0; background: none; padding: 0 .1rem; font-size: 1.7rem; line-height: 1; color: #d9d4cb; transition: color .1s, transform .1s; }
.czr-rate__stars button.is-on { color: #ffb400; }
.czr-rate:not(.is-done) .czr-rate__stars:hover button { color: #ffb400; }
.czr-rate:not(.is-done) .czr-rate__stars button:hover ~ button { color: #d9d4cb; }
.czr-rate:not(.is-done) .czr-rate__stars button:hover { transform: scale(1.15); }
.czr-rate__info { margin: .3rem 0 0; font-size: .85rem; color: var(--czr-text-light); }

.czr-alerta form, .czr-claim form { display: flex; flex-direction: column; gap: .5rem; }
.czr-alerta select, .czr-alerta input, .czr-claim input, .czr-claim textarea {
	width: 100%; padding: .6rem .8rem; border: 1px solid var(--czr-border); border-radius: 8px; font: inherit; font-size: .92rem; background: #fff;
}
.czr-form-msg { margin: 0; font-size: .85rem; color: var(--czr-text-mid); min-height: 1em; }
.czr-claim summary { cursor: pointer; font-weight: 700; font-size: .92rem; }
.czr-claim form { margin-top: .75rem; }
.czr-claim p { margin: 0; font-size: .88rem; color: var(--czr-text-mid); }
.czr-claim__upd { margin-top: .75rem !important; font-size: .78rem !important; color: var(--czr-text-light) !important; }
.czr-wx { display: flex; align-items: center; gap: .8rem; margin: 0; }
.czr-wx__i { font-size: 2.2rem; line-height: 1; }

/* Barra fija inferior en móvil (llamar / reservar / cómo llegar) */
.czr-stickybar { display: none; }
@media (max-width: 1023px) {
	.czr-stickybar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 1px;
		background: var(--czr-border); box-shadow: 0 -4px 16px rgba(0,0,0,.08);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.czr-stickybar a { flex: 1; padding: .95rem .5rem; background: #fff; text-align: center; font-weight: 800; font-size: .92rem; }
	.czr-stickybar a.is-main { background: var(--czr-primary); color: #fff; }
	body:has(.czr-stickybar) { padding-bottom: 56px; }
	body:has(.czr-stickybar) .czr-fab { bottom: 72px; }
}

/* Botón flotante "Mi ruta" */
.czr-fab {
	position: fixed; right: 16px; bottom: 16px; z-index: 95; display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1rem; border-radius: 999px; background: var(--czr-navy); color: #fff; font-weight: 800; font-size: .9rem;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.czr-fab:hover { color: #fff; background: var(--czr-navy-mid); }
.czr-fab span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--czr-primary); font-size: .78rem; }

/* Galería ampliada */
.czr-lb { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(5,12,22,.94); }
.czr-lb[hidden] { display: none; }
.czr-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.czr-lb button { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; }
.czr-lb button:hover { background: rgba(255,255,255,.25); }
.czr-lb__x { top: 16px; right: 16px; font-size: 1.2rem !important; }
.czr-lb__p { left: 12px; top: 50%; transform: translateY(-50%); }
.czr-lb__n { right: 12px; top: 50%; transform: translateY(-50%); }

/* ── Listados ─────────────────────────────────────────────────────────── */

.czr-listhead--guide { border-bottom-color: var(--czr-k, var(--czr-navy)); }
.czr-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: .75rem 0 1.25rem; }
.czr-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--czr-text-light); }
.czr-filters select { min-width: 150px; padding: .55rem .8rem; border: 1px solid var(--czr-border); border-radius: 8px; font: 600 .92rem var(--czr-font); color: var(--czr-text); background: #fff; text-transform: none; letter-spacing: 0; }
.czr-filters__clear { align-self: center; font-size: .88rem; font-weight: 700; color: var(--czr-primary-dark); }
.czr-views { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.czr-views button { padding: .55rem .95rem; border: 1px solid var(--czr-border); border-radius: 999px; background: #fff; font-weight: 700; font-size: .88rem; }
.czr-views button[aria-selected="true"] { background: var(--czr-navy); border-color: var(--czr-navy); color: #fff; }
.czr-views .czr-near { border-color: var(--czr-primary); color: var(--czr-primary-dark); }
@media (max-width: 767px) {
	.czr-filters label { flex: 1 1 140px; }
	.czr-filters select { min-width: 0; width: 100%; }
	.czr-views { margin-left: 0; width: 100%; }
}
.czr-feat { margin-bottom: .5rem; padding: 1rem 1rem .5rem; border-radius: 16px; background: #fffaf3; }
.czr-feat .czr-h2 { font-size: 1.1rem; }
.czr-count { margin: 0 0 .75rem; font-size: .88rem; color: var(--czr-text-light); }
.czr-results__ad { grid-column: 1 / -1; }
.czr-nc.is-sponsored .czr-nc__img { outline: 3px solid var(--czr-primary); outline-offset: -3px; }
.czr-nc__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.czr-nc__rate { color: #b07800; font-weight: 800; }
.czr-nc__dist { color: var(--czr-primary-dark); font-weight: 800; }
.czr-cta-biz--soft { background: linear-gradient(120deg, var(--czr-navy), var(--czr-navy-mid)); margin-top: 2rem; }

/* Calendario */
.czr-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.czr-cal__nav strong { font-size: 1.2rem; }
.czr-cal__nav button { width: 40px; height: 40px; border: 1px solid var(--czr-border); border-radius: 50%; background: #fff; font-size: 1.3rem; }
.czr-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.czr-cal__dow { padding: .3rem; text-align: center; font-size: .75rem; font-weight: 800; color: var(--czr-text-light); }
.czr-cal__day { min-height: 92px; padding: .35rem; border: 1px solid var(--czr-border); border-radius: 8px; background: #fff; display: flex; flex-direction: column; gap: .2rem; overflow: hidden; }
.czr-cal__day.is-today { border-color: var(--czr-primary); }
.czr-cal__day.has-ev { background: #fbf6ff; }
.czr-cal__n { font-size: .8rem; font-weight: 800; color: var(--czr-text-mid); }
.czr-cal__day a { display: block; padding: .15rem .3rem; border-radius: 4px; background: var(--czr-k, #8a3fa0); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
	.czr-cal__day { min-height: 54px; }
	.czr-cal__day a { font-size: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; display: inline-block; }
}

/* ── Mi ruta ──────────────────────────────────────────────────────────── */

.czr-ruta__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.czr-ruta__item { display: flex; align-items: center; gap: .75rem; padding: .6rem; border: 1px solid var(--czr-border); border-radius: var(--czr-radius); }
.czr-ruta__n { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--czr-primary); color: #fff; font-weight: 900; font-size: .85rem; }
.czr-ruta__item img, .czr-ruta__ph { flex: 0 0 64px; width: 64px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--czr-bg-soft); }
.czr-ruta__item > a { flex: 1; min-width: 0; font-weight: 700; }
.czr-ruta__btns { display: flex; gap: .25rem; }
.czr-ruta__btns button { width: 32px; height: 32px; border: 1px solid var(--czr-border); border-radius: 50%; background: #fff; font-size: .85rem; }
.czr-ruta__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.czr-ruta__empty { padding: 2rem 0; }

@media print {
	.czr-topbar, .czr-header, .czr-sections, .czr-breaking, .czr-footer, .czr-ruta__actions, .czr-ruta__btns, .czr-fab, .czr-stickybar { display: none !important; }
	.czr-cols { display: block; }
}
.czr-wx__days { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.czr-wx small { text-transform: capitalize; color: var(--czr-text-light); font-weight: 700; }
.czr-weather--finde { margin-bottom: 1rem; }