:root{
/* Tema claro. Arena muy palida de fondo, turquesa de mar para los
acentos y un coral calido para los detalles: paleta de costa sin
caer en el azul corporativo. */
--bg:#fdfbf7; --bg2:#f5f0e8; --bg3:#ffffff;
--b1:#e6ded2; --b2:#d5c9b8;
--tx:#22303a; --tx2:#4d5f6c; --tx3:#7b8a95;
--ac:#0f8f86; --ac-h:#0b6f68; --ac-sv:#e6f4f2;
--cal:#e07a4f;
--sombra:0 1px 2px rgba(34,48,58,.05),0 4px 14px rgba(34,48,58,.06);
--sombra-h:0 3px 8px rgba(34,48,58,.08),0 14px 34px rgba(34,48,58,.11);
--max:1180px;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-left:24px;padding-right:24px}
.wrap.estrecho{max-width:740px}
/* ---- Cabecera --------------------------------------------------- */
.top{position:sticky;top:0;z-index:50;background:rgba(253,251,247,.88);
backdrop-filter:blur(14px);border-bottom:1px solid var(--b1)}
.nav{display:flex;align-items:center;justify-content:space-between;
gap:18px;padding-top:14px;padding-bottom:14px}
.marca{font-size:1.15rem;letter-spacing:-.02em;color:var(--tx2);font-weight:600}
.marca strong{color:var(--ac);font-weight:800}
.top nav{display:flex;gap:26px}
.top nav a{font-size:.94rem;color:var(--tx2);font-weight:500;
transition:color .16s}
.top nav a:hover{color:var(--ac)}
.hamb{display:none;position:relative;width:44px;height:44px;flex:none;
background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hamb span,.hamb span::before,.hamb span::after{content:"";position:absolute;
left:50%;width:19px;height:1.7px;margin-left:-9.5px;border-radius:2px;
background:var(--tx2);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.hamb span{top:50%;margin-top:-.85px}
.hamb span::before{top:-6px}
.hamb span::after{top:6px}
.top.abierto .hamb span{background:transparent}
.top.abierto .hamb span::before{transform:translateY(6px) rotate(45deg)}
.top.abierto .hamb span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){
.hamb{display:block;z-index:80}
.hamb[hidden]{display:none}
.top .nav nav{position:absolute;left:0;right:0;top:100%;display:grid;
grid-template-rows:0fr;overflow:hidden;visibility:hidden;
background:var(--bg);border-bottom:1px solid transparent;
box-shadow:var(--sombra);
transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),
visibility 0s linear .3s}
.top.abierto .nav nav{grid-template-rows:1fr;visibility:visible;
border-bottom-color:var(--b1);
transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),visibility 0s}
.top .nav nav>a{min-height:0}
.top .nav nav a{display:block;padding:15px 24px;font-size:1rem;
border-bottom:1px solid var(--b1);opacity:0;transform:translateY(-4px);
transition:opacity .2s linear,transform .2s ease}
.top.abierto .nav nav a{opacity:1;transform:none;transition-delay:.06s}
.top .nav nav a:last-child{border-bottom:0}
}
/* ---- Portada ---------------------------------------------------- */
.hero{position:relative;min-height:clamp(380px,56vh,520px);display:flex;
align-items:flex-end;overflow:hidden}
.hero .foto{position:absolute;inset:0;z-index:0}
.hero .foto img{width:100%;height:100%;object-fit:cover}
/* Degradado para que el texto blanco tenga contraste sobre cualquier
zona de la foto, por clara que sea. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(14,32,42,.82) 0%,
rgba(14,32,42,.45) 46%,rgba(14,32,42,.12) 100%)}
.hero>.wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:44px;
width:100%}
.hero .tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;font-weight:700;color:#fff;
background:rgba(15,143,134,.92);padding:6px 13px;border-radius:99px;
margin-bottom:16px}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.08;
letter-spacing:-.03em;font-weight:800;color:#fff;margin-bottom:14px;
text-shadow:0 2px 20px rgba(0,0,0,.28)}
.hero .lead{font-size:clamp(1rem,2vw,1.16rem);color:rgba(255,255,255,.93);
max-width:580px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero .credito{position:absolute;right:10px;bottom:6px;z-index:3;
font-size:.66rem;color:rgba(255,255,255,.62)}
.hero .credito a{text-decoration:underline}
.seccion{padding:74px 0}
.seccion.alt{background:var(--bg2);border-top:1px solid var(--b1);
border-bottom:1px solid var(--b1)}
.seccion h2{font-size:clamp(1.5rem,3vw,1.95rem);letter-spacing:-.025em;
font-weight:750;margin-bottom:10px}
/* Subapartados dentro de una seccion de texto largo (Sobre Nayarit).
Sin esta regla saldrian con el tamano por defecto del navegador, que
no guarda ninguna relacion con la escala del resto del sitio. */
.seccion h3{font-size:1.12rem;letter-spacing:-.015em;font-weight:700;
color:var(--tx);margin:34px 0 11px}
.seccion h3:first-of-type{margin-top:30px}
.seccion .intro{color:var(--tx3);margin-bottom:36px;font-size:1.02rem}
.seccion p+p{margin-top:15px}
.seccion.alt p{color:var(--tx2)}
.seccion em{font-style:italic;color:var(--tx2)}
/* Los enlaces del texto corrido deben verse como enlaces: en una
seccion de prosa larga, el color solo no basta. */
.seccion .wrap.estrecho p a{color:var(--ac);text-decoration:underline;
text-underline-offset:2px}
.seccion .wrap.estrecho p a:hover{color:var(--ac-h)}
/* ---- Tarjetas de destino ---------------------------------------- */
.rejilla{display:grid;gap:26px;
grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tarjeta{display:block;background:var(--bg3);border:1px solid var(--b1);
border-radius:14px;overflow:hidden;box-shadow:var(--sombra);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-h);
border-color:var(--b2)}
.tarjeta .marco{aspect-ratio:3/2;overflow:hidden;background:var(--bg2)}
.tarjeta .marco img{width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.25,.8,.3,1)}
.tarjeta:hover .marco img{transform:scale(1.05)}
.tarjeta .texto{padding:20px 22px 24px}
.tarjeta .zona{display:inline-block;font-size:.68rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--ac-h);font-weight:700;
background:var(--ac-sv);padding:4px 9px;border-radius:99px}
.tarjeta h3{font-size:1.28rem;margin:11px 0 7px;letter-spacing:-.02em;
font-weight:700}
.tarjeta p{font-size:.94rem;color:var(--tx3);line-height:1.55}
/* ---- Ficha de destino ------------------------------------------- */
.cabecera{position:relative;min-height:clamp(300px,46vh,420px);
display:flex;align-items:flex-end;overflow:hidden}
.cabecera .foto{position:absolute;inset:0;z-index:0}
.cabecera .foto img{width:100%;height:100%;object-fit:cover}
.cabecera::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(14,32,42,.84) 0%,
rgba(14,32,42,.42) 50%,rgba(14,32,42,.1) 100%)}
.cabecera>.wrap{position:relative;z-index:2;padding-top:48px;
padding-bottom:38px;width:100%}
.cabecera .zona{display:inline-block;font-size:.7rem;letter-spacing:.13em;
text-transform:uppercase;font-weight:700;color:#fff;
background:rgba(15,143,134,.92);padding:6px 12px;border-radius:99px;
margin-bottom:14px}
.cabecera h1{font-size:clamp(2rem,4.8vw,3.1rem);letter-spacing:-.03em;
line-height:1.1;font-weight:800;color:#fff;margin-bottom:12px;
text-shadow:0 2px 20px rgba(0,0,0,.3)}
.cabecera .entradilla{font-size:clamp(1rem,1.9vw,1.14rem);
color:rgba(255,255,255,.93);max-width:640px;
text-shadow:0 1px 12px rgba(0,0,0,.32)}
.cabecera .credito{position:absolute;right:10px;bottom:6px;z-index:3;
font-size:.66rem;color:rgba(255,255,255,.62)}
.cabecera .credito a{text-decoration:underline}
.cuerpo{padding:52px 0 60px}
/* Dos columnas: el texto a la izquierda con medida legible y el clima
y el mapa en una banda lateral. Antes la prosa iba sola dentro de un
contenedor de 1180px y dejaba 498px de hueco muerto a la derecha, que
es justo donde caben las dos piezas que no son texto corrido. La
galeria queda FUERA de la rejilla: es la unica que gana con el ancho
completo. */
.columnas{display:grid;gap:38px;align-items:start;
grid-template-columns:minmax(0,1fr) 340px}
.prosa{max-width:74ch;min-width:0}
.lateral{position:sticky;top:22px;display:flex;flex-direction:column;gap:20px}
/* Por debajo de 1000px la banda lateral no cabe sin estrangular el
texto: se apilan y el clima vuelve arriba, que es donde se consulta
antes de leer nada. */
@media(max-width:1000px){
/* minmax(0,1fr) y no 1fr a secas: por defecto una pista de
rejilla no encoge por debajo del contenido minimo de sus
hijos (min-width:auto), asi que la columna se quedaba en
492px dentro de un contenedor de 342 y el movil salia con
scroll horizontal. Medido: scrollWidth 516 -> 390. */
.columnas{grid-template-columns:minmax(0,1fr);gap:30px}
.lateral{position:static;order:-1}
}
.cuerpo h2{font-size:1.42rem;letter-spacing:-.022em;font-weight:750;
margin:42px 0 15px;padding-top:24px;border-top:1px solid var(--b1)}
.cuerpo h2:first-child{border-top:0;padding-top:0;margin-top:0}
.cuerpo p{color:var(--tx2);margin-bottom:17px}
.cuerpo strong{color:var(--tx);font-weight:650}
.cuerpo ul{margin:0 0 17px 21px;color:var(--tx2)}
.cuerpo li{margin-bottom:9px}
/* Galeria dentro de la ficha */
.galeria{margin:42px 0 8px}
.galeria h2{margin-bottom:22px}
.fotos{display:grid;gap:18px;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Revelado al entrar en pantalla. El estado inicial solo se aplica si
hay JS (.js en el html): sin el, las fotos deben verse tal cual, no
quedarse invisibles para siempre esperando un observer que no va a
llegar. Es el mismo motivo por el que no se usa animation-delay
fijo: el retardo lo pone el observer segun el orden de aparicion.
El transform va en un HIJO (.marco, .foto-pie figcaption) y NUNCA en
.foto-pie, que es quien contiene la ![]()
. Poner un
transform en el contenedor le crea un contexto de composicion propio
y Chrome deja de diferir la descarga: medido en la misma pagina, las
fotos animadas a 1909px se bajaban al cargar mientras las de
cercanos, sin transform y mas abajo (2523px), esperaban. Es decir:
la animacion estaba anulando el lazy loading.
El recorrido es de 34px y 620ms: con los 14px y 500ms de antes la
animacion era tecnicamente correcta y practicamente invisible. */
.js .foto-pie.por-revelar .marco,
.js .foto-pie.por-revelar figcaption{opacity:0;
transform:translateY(34px) scale(.965)}
.foto-pie .marco,.foto-pie figcaption{
transition:opacity .62s ease,transform .62s cubic-bezier(.16,.84,.44,1)}
/* El pie entra un pelin despues que la foto: se lee como una sola
pieza que aparece, no como dos cosas sueltas. */
.foto-pie figcaption{transition-delay:.06s}
/* Mismo numero de clases que la regla de arriba y va despues: si se
escribe con menos especificidad pierde, y la foto se queda en
opacity 0 con la clase puesta. */
.js .foto-pie.por-revelar.revelada .marco,
.js .foto-pie.por-revelar.revelada figcaption{opacity:1;transform:none}
/* La foto crece un pelo al pasar el raton: indica que se puede ampliar
sin anadir un icono encima. El marco tiene overflow hidden, asi que
la imagen crece por dentro y el recuadro no se mueve. */
.foto-pie .marco img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.foto-pie:hover .marco img{transform:scale(1.045)}
.foto-pie a.ampliar:focus-visible{outline:2px solid var(--ac);
outline-offset:3px;border-radius:6px}
.foto-pie{background:var(--bg3);border:1px solid var(--b1);border-radius:12px;
overflow:hidden;box-shadow:var(--sombra)}
.foto-pie .marco{aspect-ratio:3/2;overflow:hidden;background:var(--bg2)}
.foto-pie img{width:100%;height:100%;object-fit:cover}
.foto-pie figcaption{padding:12px 15px 14px;font-size:.87rem;
color:var(--tx2);line-height:1.5}
.foto-pie .cred{display:block;margin-top:5px;font-size:.74rem;color:var(--tx3)}
.foto-pie .cred a{text-decoration:underline}
.volver{padding:0 0 74px}
/* Solo cuando el boton sigue al bloque beige de cercanos: ahi arranca
justo donde cambia el fondo y se lee como parte de esa seccion. En
las paginas de tipo NO hace falta, porque la rejilla que va antes ya
cierra con 74px de aire propio: por eso el selector es adyacente y
no un padding-top global. */
.cercanos + .volver{padding-top:46px}
.btn{display:inline-block;padding:12px 22px;border:1px solid var(--b2);
border-radius:9px;font-size:.94rem;font-weight:550;color:var(--tx2);
background:var(--bg3);transition:border-color .2s,color .2s,box-shadow .2s}
.btn:hover{border-color:var(--ac);color:var(--ac);box-shadow:var(--sombra)}
/* ---- Pie -------------------------------------------------------- */
.pie{padding:54px 0 64px;border-top:1px solid var(--b1);background:var(--bg2)}
.pie p{color:var(--tx3);font-size:.93rem;max-width:540px}
.marca-pie{font-size:1.08rem;color:var(--tx2);margin-bottom:12px;font-weight:600}
.marca-pie strong{color:var(--ac);font-weight:800}
.pie .tenue{margin-top:18px;font-size:.84rem;color:#96a2ab}
.pie a{color:var(--tx3);text-decoration:underline}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important;scroll-behavior:auto}
/* Sin transiciones, una foto que empieza en opacity:0 se queda
invisible para siempre: la clase .revelada ya no anima nada. Quien
pide menos movimiento quiere ver el contenido, no perderlo. */
.js .foto-pie.por-revelar .marco,
.js .foto-pie.por-revelar figcaption{opacity:1!important;
transform:none!important}
/* Lo mismo en el visor: ui.js ya evita las clases de animacion, pero
si alguna quedara puesta la foto no puede quedarse a medio camino. */
.visor .visor-caja,.visor-caja img,.visor-caja figcaption{
opacity:1!important;transform:none!important}
}
/* ---- Pagina del clima ------------------------------------------- */
.clima-cab{padding:64px 0 34px;
background:linear-gradient(180deg,var(--ac-sv) 0%,var(--bg) 100%)}
.clima-cab .tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;font-weight:700;color:#fff;background:var(--ac);
padding:6px 13px;border-radius:99px;margin-bottom:16px}
.clima-cab h1{font-size:clamp(1.9rem,4.6vw,2.9rem);letter-spacing:-.03em;
font-weight:800;margin-bottom:12px}
.clima-cab .lead{font-size:1.06rem;color:var(--tx2);max-width:560px}
.clima-cab .sello{margin-top:14px;font-size:.87rem;color:var(--tx3)}
.clima-resumen{padding:0 0 12px}
.destacados{display:grid;gap:16px;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.destacados .dato{background:var(--bg3);border:1px solid var(--b1);
border-radius:13px;padding:20px 22px;box-shadow:var(--sombra)}
.destacados .etiq{display:block;font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--tx3);font-weight:700;margin-bottom:6px}
.destacados .cifra{display:block;font-size:2.3rem;line-height:1;
font-weight:800;letter-spacing:-.03em;color:var(--ac-h)}
.destacados .donde{display:block;margin-top:6px;font-size:.92rem;
color:var(--tx2)}
.clima-zonas{padding:38px 0 64px}
.clima-zonas .zona{margin-bottom:44px}
.clima-zonas .zona h2{font-size:1.28rem;letter-spacing:-.02em;font-weight:750;
margin-bottom:18px;padding-bottom:11px;border-bottom:1px solid var(--b1)}
.lugares{display:grid;gap:15px;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lugar{background:var(--bg3);border:1px solid var(--b1);border-radius:13px;
padding:17px 18px 15px;box-shadow:var(--sombra);
transition:transform .18s ease,box-shadow .18s ease}
.lugar:hover{transform:translateY(-2px);box-shadow:var(--sombra-h)}
.lugar .cab{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.lugar .ico{width:26px;height:26px;flex:none}
.lugar h3{font-size:.99rem;font-weight:650;letter-spacing:-.01em;
line-height:1.25}
/* Color del icono segun el tiempo: da lectura a simple vista. */
.lugar.g-sol .ico{color:#e8a33d}
.lugar.g-nubes .ico{color:#8fa3b2}
.lugar.g-lluvia .ico{color:#3d8fd6}
.lugar.g-tormenta .ico{color:#7a63c9}
.lugar.g-niebla .ico{color:#9aa8b0}
.lugar .ahora{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.lugar .ahora strong{font-size:1.85rem;line-height:1;font-weight:800;
letter-spacing:-.03em}
.lugar .ahora span{font-size:.83rem;color:var(--tx3);line-height:1.3}
.lugar .detalle{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
padding-top:12px;border-top:1px solid var(--b1)}
.lugar .detalle div{text-align:center}
.lugar .detalle dt{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
color:var(--tx3);font-weight:650;margin-bottom:3px}
.lugar .detalle dd{font-size:.93rem;font-weight:650;color:var(--tx2)}
.lugar .manana{margin-top:11px;font-size:.78rem;color:var(--tx3);
padding-top:9px;border-top:1px dashed var(--b1)}
.fuente{margin-top:20px;font-size:.87rem;color:var(--tx3)}
.fuente a{text-decoration:underline}
/* Firma del pie */
.firma{margin-top:22px;padding-top:18px;border-top:1px solid var(--b1);
font-size:.88rem;color:var(--tx3)}
.firma a{color:var(--ac-h);text-decoration:none;font-weight:600}
.firma a:hover{text-decoration:underline}
/* Enlace a redes en el pie */
.social{margin-top:14px}
.social a{display:inline-flex;align-items:center;gap:9px;
padding:9px 15px 9px 12px;border:1px solid var(--b1);border-radius:99px;
background:var(--bg3);color:var(--tx2);text-decoration:none;
font-size:.9rem;font-weight:600;
transition:border-color .18s ease,color .18s ease,transform .18s ease}
.social a:hover{border-color:var(--ac);color:var(--ac-h);transform:translateY(-1px)}
.social svg{width:19px;height:19px;flex:none;color:#1877f2}
/* ---- Tira del tiempo dentro de cada ficha ----------------------- */
.clima-aqui{background:var(--bg3);border:1px solid var(--b1);
border-radius:14px;padding:16px 20px;margin:0 0 32px;
box-shadow:var(--sombra)}
.clima-aqui .ahora-fila{display:flex;align-items:center;gap:18px;
flex-wrap:wrap}
.clima-aqui .izq{display:flex;align-items:center;gap:13px;flex:1 1 auto}
.clima-aqui .ico{width:38px;height:38px;flex:none}
/* Grafica de 24 horas. El SVG se genera en el build; aqui solo se
colorea, asi que el tema se cambia sin volver a generar nada. */
.cl-grafica{margin:16px 0 0;padding-top:14px;
border-top:1px solid var(--b1)}
.cl-grafica svg{width:100%;height:auto;display:block;overflow:visible}
.cl-lluvia{fill:var(--ac);opacity:.16}
.cl-linea{fill:none;stroke:var(--cal);stroke-width:2;
stroke-linejoin:round;stroke-linecap:round}
.cl-punto{fill:var(--cal);stroke:var(--bg3);stroke-width:2}
.cl-hora{fill:var(--tx3);font-size:11px;text-anchor:middle}
.cl-temp{fill:var(--tx);font-size:12px;font-weight:700;text-anchor:middle}
.cl-grafica figcaption{color:var(--tx3);font-size:.78rem;margin-top:8px}
/* Grafica destacada de la pagina del clima: misma pieza, pero suelta
en la pagina y no dentro del recuadro de una ficha. */
.cl-destacada{background:var(--bg3);border:1px solid var(--b1);
border-radius:14px;padding:22px 24px 18px;margin-bottom:34px;
box-shadow:var(--sombra)}
.cl-destacada h2{font-size:1.16rem;font-weight:700;margin-bottom:6px}
.cl-destacada .cl-grafica{margin:0;padding-top:10px;border-top:0}
/* En movil el SVG se encoge con el ancho y la grafica queda aplastada
a 45 px de alto, donde la linea de temperatura no se distingue de una
raya. Se le da altura minima y se deja que el viewBox se estire: es
un grafico de tendencia, no un plano a escala. Nada de scroll
horizontal, que esconderia media grafica. */
@media(max-width:520px){
.cl-grafica svg{min-height:120px}
.cl-hora{font-size:13px}
.cl-temp{font-size:14px}
.cl-grafica figcaption{font-size:.74rem}
}
.clima-aqui.g-sol .ico{color:#e8a33d}
.clima-aqui.g-nubes .ico{color:#8fa3b2}
.clima-aqui.g-lluvia .ico{color:#3d8fd6}
.clima-aqui.g-tormenta .ico{color:#7a63c9}
.clima-aqui.g-niebla .ico{color:#9aa8b0}
.clima-aqui .et{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--tx3);font-weight:700;margin-bottom:3px}
.clima-aqui .t{display:flex;align-items:baseline;gap:9px}
.clima-aqui .t strong{font-size:1.75rem;line-height:1;font-weight:800;
letter-spacing:-.03em}
.clima-aqui .t span{font-size:.87rem;color:var(--tx3)}
.clima-aqui .der{display:flex;gap:20px;padding-left:20px;
border-left:1px solid var(--b1)}
.clima-aqui .der div{text-align:center}
.clima-aqui .der dt{font-size:.66rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--tx3);font-weight:650;margin-bottom:3px}
.clima-aqui .der dd{font-size:1rem;font-weight:700;color:var(--tx2)}
.clima-aqui .mas{font-size:.84rem;font-weight:600;color:var(--ac-h);
text-decoration:none;white-space:nowrap}
.clima-aqui .mas:hover{text-decoration:underline}
/* El widget en la banda lateral (340px). Ocupaba 543px de alto, mas de
media pantalla, para un dato que se consulta de un vistazo. En la
columna estrecha se reordena en vertical y se encoge: la fila "ahora"
se apila, la semana pasa a una tira que se desliza y la grafica baja
de 255 a 96 px de alto. */
.lateral .clima-aqui{padding:15px 16px;margin:0}
.lateral .clima-aqui .ahora-fila{gap:10px}
.lateral .clima-aqui .izq{flex:1 1 100%}
.lateral .clima-aqui .ico{width:30px;height:30px}
.lateral .clima-aqui .et{font-size:.66rem;margin-bottom:1px}
.lateral .clima-aqui .t strong{font-size:1.45rem}
.lateral .clima-aqui .t span{font-size:.8rem}
/* Los tres datos (max, min, lluvia) pasan a una fila propia bajo el
grande, sin el separador vertical que aqui no separa nada. */
.lateral .clima-aqui .der{padding-left:0;border-left:0;gap:10px;
width:100%;justify-content:space-between;margin-top:2px;
padding-top:9px;border-top:1px solid var(--b1)}
.lateral .clima-aqui .der dt{font-size:.62rem}
.lateral .clima-aqui .der dd{font-size:.92rem}
.lateral .clima-aqui .mas{margin-top:9px;display:inline-block;
font-size:.8rem}
.lateral .cl-grafica{margin-top:12px;padding-top:11px}
.lateral .cl-grafica svg{max-height:96px}
.lateral .cl-grafica figcaption{font-size:.72rem;margin-top:6px}
/* La semana de 7 dias NO va en la banda lateral. Ahi el widget es una
consulta rapida ("que tiempo hace aqui ahora"), y el pronostico
semanal anadia 161px de alto a un bloque que ya ocupaba media
pantalla. Quien quiera la semana entera la tiene en /clima/, que es
justo lo que ofrece el enlace de abajo. En movil, cuando el widget
vuelve a ancho completo, si se muestra. */
.lateral .semana{display:none}
@media(max-width:1000px){
.lateral .semana{display:grid}
}
@media(max-width:620px){
/* En movil el separador vertical estorba: la tira se apila. */
.clima-aqui .ahora-fila{gap:13px}
.clima-aqui .der{padding-left:0;border-left:0;padding-top:13px;
border-top:1px solid var(--b1);width:100%;justify-content:space-between}
.clima-aqui .mas{width:100%}
}
/* Pronostico de siete dias */
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
list-style:none;margin:16px 0 0;padding:15px 0 0;
border-top:1px solid var(--b1)}
.semana li{display:flex;flex-direction:column;align-items:center;gap:5px;
padding:9px 3px;border-radius:9px;text-align:center;
transition:background .16s ease}
.semana li:hover{background:var(--bg2)}
.semana .d{font-size:.7rem;font-weight:700;letter-spacing:.03em;
color:var(--tx3);text-transform:uppercase}
.semana .ico{width:23px;height:23px}
.semana li.g-sol .ico{color:#e8a33d}
.semana li.g-nubes .ico{color:#8fa3b2}
.semana li.g-lluvia .ico{color:#3d8fd6}
.semana li.g-tormenta .ico{color:#7a63c9}
.semana li.g-niebla .ico{color:#9aa8b0}
.semana .tt{display:flex;flex-direction:column;line-height:1.25}
.semana .tt strong{font-size:.93rem;font-weight:750}
.semana .tt em{font-size:.79rem;font-style:normal;color:var(--tx3)}
.semana .ll{font-size:.7rem;color:#3d8fd6;font-weight:650}
@media(max-width:620px){
/* Siete columnas no caben en un movil: se desliza en horizontal. */
.semana{grid-template-columns:repeat(7,minmax(62px,1fr));
overflow-x:auto;scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;padding-bottom:5px}
.semana li{scroll-snap-align:start}
}
/* Semana dentro de la tarjeta de municipio. Omite "Hoy": el dato de
hoy ya esta arriba en grande, repetirlo solo gasta espacio. */
.semana.chica{grid-template-columns:repeat(6,1fr);gap:2px;margin-top:11px;
padding-top:11px}
.semana.chica li{padding:5px 1px;gap:3px;border-radius:6px}
.semana.chica .d{font-size:.6rem;letter-spacing:0}
.semana.chica .ico{width:17px;height:17px}
.semana.chica .tt strong{font-size:.78rem}
.semana.chica .tt em{font-size:.68rem}
.semana.chica .ll{font-size:.6rem}
@media(max-width:620px){
/* La tarjeta de municipio ya ocupa todo el ancho en movil: caben las
seis columnas sin necesidad de desplazamiento horizontal. */
.semana.chica{grid-template-columns:repeat(6,1fr);overflow-x:visible}
}
/* ---- Mapas SVG ----------------------------------------------------
Generados en el build desde el contorno de OSM. Sin JavaScript ni
peticiones a terceros: el SVG viaja dentro del HTML. */
.mapa{display:block;width:100%;height:auto}
.mapa-tierra{fill:var(--ac-sv);stroke:var(--ac);stroke-width:1;
stroke-linejoin:round}
/* Divisiones municipales: linea fina y clara, sin relleno. Son
contexto, no protagonistas: deben leerse por debajo de las
chinchetas sin competir con ellas.
SIN vector-effect:non-scaling-stroke a proposito. El SVG se dibuja
con un viewBox de 760 y se muestra a ~1130 px, o sea a 1.5x; con
non-scaling-stroke la linea se quedaba clavada en 0.85 px de
pantalla y, al 55% de opacidad, daba 0.47 px de tinta: invisible en
cualquier pantalla que no sea retina. Dejandola escalar, el trazo
crece con el mapa igual que todo lo demas. */
.mapa-municipio{fill:none;stroke:var(--ac);stroke-width:1.1;
stroke-opacity:.8;stroke-linejoin:round;
transition:fill .15s ease,stroke-opacity .15s ease}
/* Cada municipio lleva un , asi que el navegador ya muestra su
nombre al posar el cursor. Un relleno tenue al pasar por encima
convierte eso en algo descubrible, sin una linea de JavaScript.
pointer-events solo en el trazo: el relleno invisible no debe
robarle el clic a las chinchetas que hay encima. */
.mapa-municipio{pointer-events:stroke}
.mapa-municipio:hover{fill:rgba(15,143,134,.09);stroke-opacity:.85;
pointer-events:all}
/* El circulo grande es solo area de toque: invisible, pero da un
objetivo de 26px en movil, donde la chincheta de 5px no basta. */
.mapa-area{fill:transparent}
.mapa-chincheta{fill:var(--cal);stroke:#fff;stroke-width:2;
transition:r .15s ease}
/* text-anchor NO se pone aqui: en SVG las propiedades CSS ganan a los
atributos de presentacion, asi que declararlo anularia la colocacion
lateral que calcula mapa.py para esquivar solapes. */
.mapa-punto text{font:600 12px/1 var(--sans);fill:var(--tx2);
paint-order:stroke;stroke:var(--bg);stroke-width:3.5;
transition:fill .15s ease}
.mapa-punto{cursor:pointer}
.mapa-punto:hover .mapa-chincheta,
.mapa-punto:focus-visible .mapa-chincheta{r:8}
.mapa-punto:hover text,
.mapa-punto:focus-visible text{fill:var(--ac-h)}
.mapa-punto:focus{outline:none}
.mapa-punto:focus-visible .mapa-area{fill:rgba(15,143,134,.16)}
/* Mini mapa de las fichas */
.mapa-caja{margin:2.5rem 0 0;padding-top:2rem;border-top:1px solid var(--b1)}
.mapa-caja h2{margin-bottom:.9rem}
.mapa-mini{max-width:340px}
.mapa-mini .mapa-tierra{fill:var(--bg2);stroke:var(--b2)}
/* El mini mapa se muestra a 340 px de un viewBox de 360: casi 1:1, sin
el aumento de 1.5x del mapa grande. El trazo se sube un poco para
que las divisiones se lean igual de bien. */
.mapa-mini .mapa-municipio{stroke:var(--b2);stroke-width:1.2;
stroke-opacity:.9}
/* El municipio del destino, relleno en el color calido de la
chincheta: responde de un vistazo a "en que municipio cae esto". */
.mapa-mini .mapa-municipio.propio{fill:rgba(224,122,79,.16);
stroke:var(--cal);stroke-width:1.6;stroke-opacity:.9}
.mapa-halo{fill:rgba(224,122,79,.22)}
.mapa-pie{margin-top:.6rem;font-size:.82rem;color:var(--tx3)}
/* En movil no caben las 22 etiquetas sin pisarse, pero un mapa de
puntos mudos es una adivinanza. Solucion intermedia: se conservan
los nombres de los destinos mas buscados y se ocultan los demas,
que siguen siendo enlaces con aria-label para lector de pantalla. */
@media(max-width:640px){
.mapa-punto text{display:none}
.mapa-punto.clave text{display:block;font-size:13px;stroke-width:4}
.mapa-chincheta{r:6.5}
/* El area de toque sube a 22 de radio: en un SVG de 342 px de ancho
sobre un viewBox de 760, eso son ~20 px reales de lado a lado,
frente a los 12 que daba r=13. Ganar mas exigiria solapar
destinos vecinos. */
.mapa-area{r:22}
/* Aqui el SVG se muestra a MENOS de su viewBox (342 de 760, o sea
0.45x), asi que el trazo encoge en vez de crecer: 1.1 se queda en
0.4 px de tinta. Se compensa el factor para que la linea se vea
igual de marcada que en escritorio. */
.mapa-municipio{stroke-width:2.6;stroke-opacity:.85}
}
/* Respetar a quien pide menos animacion. */
@media(prefers-reduced-motion:reduce){
.mapa-chincheta,.mapa-punto text{transition:none}
}
/* ---- Visor de imagenes (lightbox) ---------------------------------
El dialogo lo crea ui.js; aqui solo se viste. Sin JavaScript nada de
esto existe y la foto se abre como enlace normal. */
/* La cruz de la galeria: senal de que la foto se amplia. */
.marco .ampliar{display:block;cursor:zoom-in}
.marco .ampliar img{display:block;transition:transform .35s ease}
.marco{overflow:hidden}
@media(hover:hover){
.marco .ampliar:hover img{transform:scale(1.04)}
}
.marco .ampliar:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
/* ---- Animaciones del visor ---------------------------------------
Cuatro momentos: abrir, cambiar de foto, cerrar y el fondo. El
<dialog> no anima la salida por su cuenta (close() lo quita en el
acto), asi que ui.js pinta la animacion y cierra al terminar; aqui
solo viven los tiempos.
Se anima la CAJA y el ::backdrop por separado: la foto entra con
escala y el fondo solo con opacidad, que es lo que hace que se lea
como "la foto viene hacia mi" y no como "la pantalla parpadea". */
.visor .visor-caja{transition:opacity .26s ease,
transform .3s cubic-bezier(.16,.84,.44,1)}
.visor::backdrop{transition:opacity .26s ease}
/* Abrir: la foto crece desde un 92% mientras el fondo se funde. */
@keyframes visor-entra{
from{opacity:0;transform:scale(.92)}
to{opacity:1;transform:none}
}
@keyframes visor-fondo{from{opacity:0}to{opacity:1}}
.visor.abriendo .visor-caja{animation:visor-entra .3s
cubic-bezier(.16,.84,.44,1) both}
.visor.abriendo::backdrop{animation:visor-fondo .26s ease both}
/* Cerrar: el camino inverso, un poco mas rapido. Cerrar siempre se
siente mejor rapido que lento. */
.visor.cerrando .visor-caja{opacity:0;transform:scale(.94)}
.visor.cerrando::backdrop{opacity:0}
/* Cambiar de foto: entra desde el lado contrario al gesto. Solo se
anima la imagen y el pie, no la caja entera, para que los botones de
navegacion no se muevan mientras se pulsan. */
@keyframes visor-izq{
from{opacity:0;transform:translateX(38px)}
to{opacity:1;transform:none}
}
@keyframes visor-der{
from{opacity:0;transform:translateX(-38px)}
to{opacity:1;transform:none}
}
.visor-caja.ent-izq img,.visor-caja.ent-izq figcaption{
animation:visor-izq .28s cubic-bezier(.16,.84,.44,1) both}
.visor-caja.ent-der img,.visor-caja.ent-der figcaption{
animation:visor-der .28s cubic-bezier(.16,.84,.44,1) both}
/* El pie entra un pelin detras de la foto. */
.visor-caja.ent-izq figcaption,.visor-caja.ent-der figcaption{
animation-delay:.05s}
.visor{border:0;padding:0;background:transparent;max-width:100vw;
max-height:100vh;width:100vw;height:100dvh;overflow:hidden}
.visor::backdrop{background:rgba(12,22,28,.92);
backdrop-filter:blur(3px)}
/* Con el visor abierto, el fondo no debe poder desplazarse: sin esto
la rueda del raton mueve la pagina por detras del dialogo. */
body:has(dialog.visor[open]){overflow:hidden}
.visor-caja{margin:0;height:100dvh;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:.9rem;
padding:3.6rem 1rem 2.6rem}
.visor-caja img{max-width:min(1400px,94vw);max-height:78dvh;
width:auto;height:auto;object-fit:contain;border-radius:10px;
box-shadow:0 18px 50px rgba(0,0,0,.5)}
.visor-caja figcaption{color:#fff;text-align:center;max-width:70ch;
font-size:.95rem;line-height:1.45}
.visor-pie{display:block}
.visor-cred{display:block;margin-top:.3rem;font-size:.86rem;
color:rgba(255,255,255,.82)}
.visor-cred a{color:#fff;text-decoration:underline}
/* Controles. Area de toque de 44px, que es el minimo comodo en movil. */
.visor-x,.visor-nav{position:fixed;border:0;cursor:pointer;color:#fff;
background:rgba(0,0,0,.38);border-radius:50%;
display:grid;place-items:center;line-height:1;
transition:background .15s ease,transform .15s ease}
.visor-x{top:1rem;right:1rem;width:46px;height:46px;font-size:1.9rem}
.visor-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;
font-size:2.6rem;padding-bottom:.2rem}
.visor-nav.prev{left:1rem}
.visor-nav.sig{right:1rem}
@media(hover:hover){
.visor-x:hover,.visor-nav:hover{background:rgba(0,0,0,.62)}
}
.visor-x:focus-visible,.visor-nav:focus-visible{
outline:3px solid #fff;outline-offset:2px}
@media(max-width:640px){
.visor-caja{padding:3.4rem .6rem 4.6rem}
/* Las flechas viven abajo en movil, asi que el pie debe quedar por
encima de ellas: la foto se lleva el espacio que sobra. */
.visor-caja img{max-height:62dvh}
/* En movil las flechas laterales estorban sobre la foto: se bajan a
los bordes inferiores, donde cae el pulgar. */
.visor-nav{top:auto;bottom:1rem;transform:none;width:48px;height:48px}
}
/* ---- Etiquetas de tipo ---------------------------------------------
Bajo la entradilla de cada ficha. La primera (el tipo) enlaza al
filtro de la portada; las demas son matices sin enlace. */
.etiquetas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.etq{display:inline-block;padding:.3rem .72rem;border-radius:999px;
font-size:.82rem;font-weight:600;line-height:1.3;
background:var(--bg2);color:var(--tx2);border:1px solid var(--b2)}
a.etq-tipo{background:var(--ac-sv);color:var(--ac-h);
border-color:transparent;text-decoration:none;
transition:background .15s ease,transform .15s ease}
@media(hover:hover){
a.etq-tipo:hover{background:var(--ac);color:#fff}
}
a.etq-tipo:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
/* ---- Destinos cercanos ---------------------------------------------
Cierra la ficha respondiendo "y que mas hay cerca". Los tiempos son
de coche real, no linea recta: en la sierra 40 km son dos horas. */
/* El padding de abajo era 8px: las tarjetas casi tocaban el borde
donde acaba el fondo beige, y el boton de volver quedaba pegado al
cambio de color. Se iguala con el de arriba para que la seccion
respire por los dos lados. */
.cercanos{padding:52px 0 56px;background:var(--bg2);
border-top:1px solid var(--b2)}
.cercanos h2{margin-bottom:.35rem}
.cercanos-sub{color:var(--tx3);font-size:.9rem;margin-bottom:1.5rem}
.cercanos-lista{display:grid;gap:1.1rem;
grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cerca{display:flex;flex-direction:column;text-decoration:none;
background:var(--bg);border:1px solid var(--b2);border-radius:12px;
overflow:hidden;color:inherit;
transition:transform .18s ease,box-shadow .18s ease,
border-color .18s ease}
@media(hover:hover){
.cerca:hover{transform:translateY(-3px);border-color:var(--ac);
box-shadow:0 10px 26px rgba(12,60,70,.13)}
.cerca:hover .cerca-foto img{transform:scale(1.05)}
}
.cerca:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.cerca-foto{aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.cerca-foto img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .4s ease}
.cerca-foto.vacia{background:linear-gradient(135deg,
var(--ac-sv) 0%,var(--bg2) 100%)}
.cerca-txt{display:block;padding:.85rem .95rem 1rem}
.cerca-nom{display:block;font-weight:700;color:var(--tx);
font-size:1.02rem;line-height:1.25}
.cerca-tipo{display:inline-block;margin-top:.38rem;font-size:.76rem;
font-weight:600;color:var(--ac-h);background:var(--ac-sv);
padding:.16rem .5rem;border-radius:999px}
.cerca-dato{display:block;margin-top:.5rem;font-size:.87rem;
color:var(--tx2);font-variant-numeric:tabular-nums}
.cerca-km{color:var(--tx3)}
@media(max-width:520px){
/* En pantalla estrecha, dos columnas siguen cabiendo si la foto se
hace mas baja: cuatro tarjetas apiladas serian un scroll eterno. */
.cercanos-lista{grid-template-columns:1fr 1fr;gap:.8rem}
.cerca-foto{aspect-ratio:3/2}
.cerca-txt{padding:.7rem .75rem .85rem}
.cerca-nom{font-size:.95rem}
.cerca-dato{font-size:.82rem}
}
/* ---- Filtros de tipo en la portada ---------------------------------
Enlaces reales a /tipo/<slug>/: sin JavaScript recargan y funcionan
igual. ui.js los convierte en filtro instantaneo. */
/* El filtro oculta tarjetas con el atributo hidden, pero .tarjeta
declara display:block y eso GANA sobre el [hidden]{display:none} que
trae el navegador: una regla de clase tiene mas peso que la hoja de
usuario-agente. Sin esta linea el filtro marca las tarjetas y no
desaparece ninguna. */
.tarjeta[hidden]{display:none}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.filtro{display:inline-block;padding:.45rem .95rem;border-radius:999px;
font-size:.88rem;font-weight:600;text-decoration:none;
background:var(--bg);color:var(--tx2);border:1px solid var(--b2);
transition:background .15s ease,color .15s ease,border-color .15s ease}
@media(hover:hover){
.filtro:hover{border-color:var(--ac);color:var(--ac-h)}
}
.filtro.activo,.filtro[aria-current]{background:var(--ac);color:#fff;
border-color:var(--ac)}
.filtro:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.filtro-cuenta{color:var(--tx3);font-size:.88rem;margin:-.9rem 0 1.1rem;
min-height:1.2em}
/* Tipo dentro de la tarjeta de la portada. */
.tarjeta .t-tipo{display:inline-block;margin:.1rem 0 .4rem;
font-size:.74rem;font-weight:600;color:var(--ac-h);
background:var(--ac-sv);padding:.14rem .48rem;border-radius:999px}
/* Migas de pan de las paginas de tipo. */
.migas{color:var(--tx3);font-size:.88rem;margin-bottom:.4rem}
.migas a{color:var(--tx2)}
/* ---- Boton "Como llegar" bajo el mapa de la ficha ------------------
Abre Google Maps con la coordenada verificada como destino y sin
origen, para que use la ubicacion real de quien lo pulsa. */
.mapa-acciones{display:flex;align-items:center;flex-wrap:wrap;
gap:.6rem .9rem;margin:.9rem 0 .2rem}
.btn-llegar{display:inline-flex;align-items:center;gap:.5rem;
padding:.6rem 1.1rem;border-radius:999px;text-decoration:none;
background:var(--ac);color:#fff;font-weight:600;font-size:.94rem;
border:1px solid var(--ac);
transition:background .16s ease,transform .16s ease,
box-shadow .16s ease}
@media(hover:hover){
.btn-llegar:hover{background:var(--ac-h);border-color:var(--ac-h);
transform:translateY(-1px);box-shadow:0 6px 16px rgba(12,60,70,.18)}
}
.btn-llegar:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.ico-ruta{width:18px;height:18px;flex:none}
/* La coordenada a la vista: quien usa otra app de mapas puede
copiarla, y de paso deja claro que el enlace apunta a un punto
concreto y no a una busqueda por nombre. */
.mapa-coord{font-size:.82rem;color:var(--tx3);
font-variant-numeric:tabular-nums;user-select:all}
@media(max-width:520px){
/* En movil el boton ocupa el ancho: es la accion principal de esta
seccion y el pulgar no deberia tener que apuntar. */
.btn-llegar{width:100%;justify-content:center;padding:.75rem 1.1rem}
.mapa-acciones{gap:.5rem}
}
/* Fuentes: de donde salen los datos de la ficha.
Deliberadamente discreto: es una nota al pie, no una seccion. Letra
pequena, color atenuado y sin caja que compita con el contenido. */
.seccion-fuentes{padding:1.8rem 0 2.6rem}
.fuentes{max-width:1180px;margin:0 auto;padding:1rem 0 0;
border-top:1px solid var(--b1)}
.fuentes h2{font-size:.78rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--tx3);margin:0 0 .45rem}
.fuentes ul{list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.fuentes li{font-size:.82rem;line-height:1.5;color:var(--tx3)}
.fuentes a{color:var(--tx3);text-decoration:underline;
text-decoration-color:var(--b1);text-underline-offset:2px}
.fuentes a:hover,.fuentes a:focus-visible{color:var(--ac-h);
text-decoration-color:currentColor}
@media(max-width:640px){
.fuentes ul{flex-direction:column;gap:.35rem}
}
/* Tour de afiliado. Sobrio a proposito: es una recomendacion util, no
un anuncio. La etiqueta "Enlace comercial" va ARRIBA y visible
porque PROFECO exige identificar la publicidad en posicion clara, y
porque un lector que se entera despues se siente enganado. */
.tour{max-width:1180px;margin:0 auto;padding:30px 24px 34px;
border-top:1px solid var(--b1)}
.tour-et{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
color:var(--tx2);font-weight:600;margin:0 0 7px}
.tour h2{font-size:1.06rem;font-weight:650;margin:0 0 10px;color:var(--tx)}
.tour-nom{margin:0 0 4px;font-size:1rem}
.tour-nom a{color:var(--ac-h);font-weight:600;text-decoration:underline;
text-underline-offset:2px}
.tour-nom a:hover{color:var(--ac)}
.tour-desc{margin:0 0 8px;color:var(--tx2);font-size:.92rem}
/* El precio pesa y el deslinde no: son cosas distintas y competian
en la misma linea gris. El precio es lo que decide al lector; el
deslinde tiene que estar y poder leerse, no reclamar atencion. */
.tour-precio{margin:0 0 6px;color:var(--tx2);font-size:.96rem}
.tour-precio b{color:var(--tx);font-size:1.34rem;font-weight:700;
letter-spacing:-.02em}
.tour-pie{margin:0;color:var(--tx3);font-size:.76rem;line-height:1.45}
@media(max-width:640px){.tour{padding:24px 16px 28px}}