/* ============================================================
   Lugares que cuentan — hoja de estilos
   Indice:
     1. Base y variables
     2. Cabecera y menu
     3. Portada: hero, franja de categorias, tarjetas, regiones, cita
     4. Ficha de un lugar (cabecera, galeria, compartir, etiquetas, bibliografia)
     5. Listados y paginas resumen (categorias, Galicia, /destinos) y paginacion
     6. Colecciones y rutas
     7. Pie
     8. Responsive (movil y otros): TODAS las reglas @media van aqui, al final
        y en este orden a proposito (las de abajo ganan a las de arriba).
        Una regla movil nueva se anade al FINAL de este archivo.
   ============================================================ */

/* --------------------------------------------------- 1. Base y variables */
:root{
  --main:#263746; --gold:#C6A15B; --soft:#F5F2EA; --white:#fff;
  --muted:#6B7880; --ink:#171A1C;
  --serif:"Playfair Display",Georgia,serif; --sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:400 16px/1.65 var(--sans);color:var(--ink);background:var(--white)}
img{max-width:100%;display:block}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.rule{display:block;width:48px;height:2px;background:var(--gold);margin:18px 0}
.btn{display:inline-block;background:var(--gold);color:var(--ink);padding:13px 24px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border-radius:2px}
.btn:hover{filter:brightness(1.06)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.grid{display:grid;gap:20px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ------------------------------------------------- 2. Cabecera y menú */
.site-header{position:relative;z-index:10;background:var(--main);color:#fff}
.home .site-header,.place .site-header{position:absolute;inset:0 0 auto 0;background:linear-gradient(rgba(15,22,30,.6),transparent)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.brand img{height:54px;width:auto}
.brand-text{display:block;font-family:var(--serif);letter-spacing:.2em;line-height:1.1}
.brand-text b{display:block;font-size:24px;font-weight:500}
.brand-text small{font-size:11px;letter-spacing:.32em}
@media(min-width:901px){ .brand img{height:108px} }

.menu{display:flex;align-items:center;gap:18px}
.menu ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.menu ul li{flex-shrink:0}
.menu a{display:inline-block;white-space:nowrap;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--gold)}
.search{display:flex;align-items:center;border-bottom:1px solid #ffffff66;flex-shrink:0}
.search input{background:transparent;border:0;color:#fff;font:inherit;font-size:14px;width:96px;padding:4px 6px}
.search input::placeholder{color:#ffffffaa}
.search button{background:none;border:0;color:#fff;cursor:pointer;padding:4px;display:flex}

.nav-toggle{display:none;background:none;border:0;padding:12px;cursor:pointer;color:#fff}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:24px;height:2px;background:currentColor;position:relative;content:"";transition:.2s}
.nav-toggle span::before{position:absolute;top:-7px;left:0}
.nav-toggle span::after{position:absolute;top:7px;left:0}
.nav-toggle[aria-expanded=true] span{background:transparent}
.nav-toggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* ------------------------------------------- 3. Portada: hero, categorías, tarjetas, regiones, cita */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:flex-end;color:#fff;background:var(--main);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,22,30,.65),rgba(15,22,30,.05) 65%),linear-gradient(0deg,rgba(15,22,30,.5),transparent 45%)}
.hero__body{position:relative;width:100%;max-width:none;padding-top:140px;padding-bottom:64px;padding-left:clamp(24px,4vw,64px)}
.hero__body>*{max-width:560px}
.hero h1{font-size:clamp(38px,7vw,64px)}
.hero__body p{font-size:clamp(17px,2.4vw,20px);margin:0 0 26px}
.hero .hero__credit{position:absolute;right:24px;bottom:20px;margin:0;text-align:right;font-size:13px;line-height:1.4;text-shadow:0 1px 6px #00000088}
/* Linea de cifras bajo el boton de la portada (lugares, provincias, paises).
   AJUSTE: tamano, espaciado y transparencia del texto. */
.hero .hero__stats{margin:22px 0 0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.88);text-shadow:0 1px 6px #00000088}

.cats{background:var(--soft);border-bottom:1px solid #e4dfd0}
.cats__row{display:flex;flex-wrap:nowrap;gap:4px;padding:18px 24px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.cats__row::-webkit-scrollbar{display:none}
.cats__row a{flex:0 0 auto;width:150px;scroll-snap-align:start}
.cats a{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 6px;border-radius:2px}
.cats a:hover{background:#0000000a}
.cats b{display:block;font-family:var(--serif);font-weight:500;font-size:16px}
.cats span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cats svg{color:var(--gold)}

/* Titulos de seccion de la portada: banda de fondo suave. AJUSTE: color en background, grosor de la linea dorada en border-left */
.head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;background:var(--soft);border-left:3px solid var(--gold);border-radius:2px;padding:12px 18px;margin-bottom:22px}
.head h2{font-size:clamp(26px,4.5vw,34px)}
.more{font-size:13px;color:var(--muted)}
.more:hover{color:var(--ink)}
main.wrap>section{padding:52px 0 8px}
.empty{color:var(--muted);background:var(--soft);padding:28px;text-align:center;border:1px dashed #d8d2c2}

.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3-feat{grid-template-columns:repeat(auto-fill,minmax(260px,340px));justify-content:start}
.g3-latest{grid-template-columns:repeat(3,minmax(0,340px));justify-content:start} /* portada: 3 por fila */
.g5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.post{display:block;background:var(--white);border:1px solid #e9e5da;max-width:380px}
.post__img{display:block;width:100%;height:180px;object-fit:cover}
.post__img.ph{background:linear-gradient(160deg,#8fa8b8,#c9a67a)}
.post__body{display:block;padding:16px 18px 18px}
.post small{color:var(--gold);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.post h3{font-size:20px;margin:6px 0}
.post p{color:var(--muted);font-size:14px;margin:0 0 8px}
.post__loc{display:block;font-size:13px;color:var(--muted)}
.post__dist{display:block;margin-top:6px;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--gold)}
.post__town{color:var(--ink);font-weight:600}
.post__loc + p{margin-top:8px}
.post--featured{border:0;background:transparent}
.post--featured .post__img{height:220px}
.post--featured .post__body{padding:16px 2px 0}
.post--featured h3{margin:6px 0 8px}
.post__more{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:2px}

.quote{margin:0;padding:52px 24px;text-align:center;color:#fff;background:linear-gradient(rgba(20,28,36,.55),rgba(20,28,36,.55)),linear-gradient(160deg,var(--main),#4a5a52)}
.quote q{font:italic 400 clamp(20px,3.4vw,28px)/1.4 var(--serif);quotes:none;max-width:640px;margin:0 auto;display:block}

.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:14px;color:#fff;background:linear-gradient(160deg,var(--main),#5c6f80);background-size:cover;background-position:center}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,22,30,.75),rgba(15,22,30,.15) 55%)}
.tile h3,.tile span{position:relative}
.tile h3{font-size:19px}
.tile span{font-size:12px;opacity:.85}

/* --------------------------------------------------- 4. Ficha de un lugar */
.p-hero{position:relative;min-height:420px;display:flex;align-items:flex-end;color:#fff;background:var(--main)}
.p-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,22,30,.75),rgba(15,22,30,.15) 60%)}
.p-hero__body{position:relative;width:100%;max-width:none;padding:140px 24px 40px;padding-left:clamp(24px,4vw,64px)}
.p-hero__body>*{max-width:720px}
.p-hero h1{font-size:clamp(30px,5.5vw,48px)}
.p-loc{margin:6px 0 0;letter-spacing:.1em;text-transform:uppercase;font-size:13px;opacity:.85}
.p-lead{font:italic 400 clamp(17px,2.4vw,20px)/1.5 var(--serif);margin:0;opacity:.95}

.p-cats{display:flex;flex-wrap:wrap;gap:10px;padding:18px 24px;background:var(--soft);border-bottom:1px solid #e4dfd0}
.p-cats a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--main);background:#fff;border:1px solid #e4dfd0;padding:6px 12px;border-radius:20px}
.p-cats svg{width:16px;height:16px;color:var(--gold)}

.page-place{padding:56px 24px 90px}
.p-block{max-width:760px;margin:0 auto 52px}
.p-block h2{font-size:26px}
.p-block p{color:var(--ink);line-height:1.75;margin:0 0 14px}
.p-visit p{font-style:italic;color:var(--muted)}
.p-tips{border-left:3px solid var(--gold);padding:4px 0 4px 20px;background:none}
.p-tips h2{font-size:20px;margin:0 0 8px}
.p-tips ul{list-style:none;margin:0;padding:0}
.p-tips li{color:var(--ink);line-height:1.65;margin:0 0 8px}

.p-gallery{max-width:none;display:flex;flex-wrap:wrap;gap:16px;--h:220px} /* AJUSTE: --h = altura aproximada de cada fila de fotos */
.p-gallery::after{content:"";flex-grow:999999} /* la última fila no se estira */
.p-gallery figure{margin:0;min-width:0}
.p-gallery img{width:100%;height:auto;display:block}
.p-gallery figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.p-gallery img{cursor:zoom-in}

.lightbox{position:fixed;inset:0;background:rgba(10,12,14,.92);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}
.lightbox[hidden]{display:none}
.lightbox__inner{position:relative;max-width:1100px;width:100%;text-align:center}
.lightbox__img{max-width:100%;max-height:80vh;display:inline-block;border-radius:2px}
.lightbox__caption{color:#fff;margin:14px 0 0;font-size:14px;opacity:.85}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:12px}
.lightbox__close{top:-50px;right:-8px;font-size:28px}
.lightbox__prev{left:-8px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:-8px;top:50%;transform:translateY(-50%)}

.p-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0}
.p-facts dt{font-weight:500;color:var(--main)}
.p-facts dd{margin:0;color:var(--muted)}

.p-tags{display:flex;flex-wrap:wrap;gap:8px;padding:14px 24px 18px;background:var(--soft);border-top:1px solid #e4dfd0}
.p-tags a{font-size:12px;padding:5px 14px;border:1px solid var(--gold);border-radius:999px;color:var(--ink)}
.p-tags a:hover{background:var(--gold)}

.p-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 24px;border-bottom:1px solid #e4dfd0}
.p-share__scroll{display:contents}
.p-share__label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.p-share__btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;color:var(--main);
  background:#fff;border:1px solid #e4dfd0;padding:6px 14px;border-radius:20px;cursor:pointer;line-height:1.2}
.p-share__btn svg{color:var(--gold);flex:none}
.p-share__btn:hover{border-color:var(--gold)}

.p-share__like{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;
  font-weight:600;color:var(--main);background:#fff;border:1px solid #e4dfd0;padding:6px 14px;border-radius:20px;cursor:pointer}
.p-share__like svg{color:var(--gold);flex:none;transition:fill .15s}
.p-share__like:hover{border-color:var(--gold)}
.p-share__like.is-liked svg{fill:var(--gold)}
.p-share__like:disabled{cursor:default}

.p-biblio ul{margin:0;padding-left:20px}
.p-biblio li{color:var(--ink);line-height:1.65;margin:0 0 8px;overflow-wrap:anywhere}
.p-biblio a{color:var(--main);text-decoration:underline}

/* Aviso "Aparece en" (colecciones en las que esta el lugar) */
.p-collections__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-collections__list a{display:block;padding:12px 16px;border:1px solid var(--gold);border-radius:999px;color:var(--main);text-decoration:none}
.p-collections__list a:hover{background:var(--gold)}
.p-collections__list small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* --------------------------------- 5. Listados y páginas resumen (categorías, Galicia, /destinos) */
.page{padding:72px 24px 96px;min-height:50vh}
.page h1{font-size:clamp(32px,5vw,46px)}
.page p{color:var(--muted);margin:0 0 28px}
.listing__desc{color:var(--muted);max-width:640px;margin:0 0 32px}
.listing__grid{margin-top:8px}

.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.overview__grid{margin-top:8px}
.overview__card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--soft);border:1px solid #e4dfd0;padding:26px 16px}
.overview__card svg{color:var(--gold)}
.overview__card b{font-family:var(--serif);font-size:18px;font-weight:500}
.overview__card span{font-size:13px;color:var(--muted)}
.overview__card:hover{border-color:var(--gold)}

p.tagcloud__label{margin:40px 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-align:center}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tagcloud a{font-size:13px;padding:6px 14px;border:1px solid var(--gold);border-radius:999px;color:var(--ink)}
.tagcloud a:hover{background:var(--gold)}
.legal h2{font-size:19px;margin:28px 0 8px}
.legal h2:first-child{margin-top:0}

/* Paginacion (estilo igual que el listado de lugares del admin) */
.pager{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:0;border-top:0;font-size:14px}
.pager a{padding:8px 16px;border:1px solid var(--gold);border-radius:999px;color:var(--main);text-decoration:none;transition:background .15s}
.pager a:hover,.pager a:focus-visible{background:var(--gold)}
.pager__status{color:var(--muted)}

/* ------------------------------------------------ 6. Colecciones y rutas */
.col-kind{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.col-kind a{color:inherit;border-bottom:1px solid var(--gold)}
.col-intro{max-width:760px;margin:0 0 26px}
.col-intro p{line-height:1.75;margin:0 0 14px;color:var(--ink)}
.col-card small{display:block}
/* Mapa de la ruta. AJUSTE: altura del mapa */
.col-map{height:380px;border-radius:6px;margin:0 0 34px;z-index:0}
/* Chinchetas de la ruta: el dibujo va en collection.php (SVG); aqui solo se quita el fondo por defecto de Leaflet */
.col-pin{background:none;border:0}
.col-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.col-item{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start;padding-bottom:26px;border-bottom:1px solid #e9e5da}
.col-item:last-child{border-bottom:0}
.col-item__img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#e9e5da}
.col-item__img img,.col-item__img .ph{width:100%;height:100%;object-fit:cover;display:block}
.col-item__body{position:relative;min-width:0}
.col-item__n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--main);color:var(--main);font:700 12px/1 Inter,sans-serif;margin-bottom:8px;
  background:radial-gradient(circle,#fff 0 9.5px,var(--gold) 10px)} /* AJUSTE: 9.5px = radio del circulo blanco interior (como la chincheta del mapa) */
.col-item h2{font-size:24px;margin:0 0 4px}
.col-item h2 a{color:var(--main)}
.col-item__loc{margin:0 0 10px;font-size:14px;color:var(--muted)}
.col-item__note{margin:0 0 12px;line-height:1.7;color:var(--ink)}
.col-item__more{font-size:14px;color:var(--main);border-bottom:1px solid var(--gold)}

/* Paradas pendientes de visitar y progreso. AJUSTE: aspecto atenuado de las pendientes */
.col-progress{margin:0 0 22px;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.col-progress__bar{display:block;width:180px;max-width:100%;height:6px;border-radius:3px;background:#e9e5da;overflow:hidden}
.col-progress__bar i{display:block;height:100%;background:var(--gold)}
.col-item.is-pending{opacity:.62}
.col-item.is-pending .col-item__img .ph{display:block;width:100%;height:100%;background:repeating-linear-gradient(135deg,#efebe0 0 10px,#e6e1d3 10px 20px)}
.col-item.is-pending h2{color:var(--muted)}
.col-item.is-pending .col-item__n{color:var(--muted);border-style:dashed;background:radial-gradient(circle,var(--soft) 0 9.5px,#fff 10px)}
.col-item__soon{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
/* Boton "Centrar" del mapa de la ruta */
.col-center a{display:flex;align-items:center;gap:6px;width:auto!important;height:30px!important;padding:0 12px;font:500 13px/30px Inter,sans-serif;color:var(--main);background:#fff;text-decoration:none}
.col-center a:hover{background:#f5f2ea;color:var(--ink)}

/* ------------------------------------------------------------------- 7. Pie */
.site-footer{background:var(--main);color:#dfe5ea;padding:32px 0;font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer a{border-bottom:1px solid var(--gold)}
.foot-legal{display:flex;margin-top:10px;justify-content:center;gap:20px;font-size:12px;opacity:.75}

/* ---------------------------------------------------------- 8. Responsive (movil y otros) */
/* Menu movil, cabecera de la portada en movil y regiones deslizables */
@media(max-width:900px){
  .nav-toggle{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--main);flex-direction:column;align-items:stretch;padding:8px 24px 24px;gap:16px}
  .menu.open{display:flex}
  .menu ul{flex-direction:column;gap:0}
  .menu li a{display:block;padding:14px 0;border-bottom:1px solid #ffffff1f}
  .search{width:100%}
  .search input{width:100%}

  /* El título va arriba y la línea/texto/botón abajo, para no tapar la foto de cabecera.
     El pie de foto (nombre del lugar) ya no va superpuesto al botón: pasa a ir
     justo debajo, dentro del mismo bloque, en vez de anclado aparte al borde. */
  .hero{flex-direction:column; justify-content:flex-end; align-items:flex-start}
  .hero__body{
    position:relative; inset:auto; width:auto; margin:0;
    padding-top:0; padding-bottom:0;
  }
  .hero .hero__credit{
    position:relative; right:auto; bottom:auto;
    text-align:left; text-shadow:0 1px 6px #00000088;
    margin:14px 0 0;
    padding:0 clamp(24px,4vw,64px) 32px; /* sin env(safe-area-inset-bottom): en iPhone cambia al esconderse la barra de Safari y movia el texto al hacer scroll */
  }

  /* "Destinos por regiones" se desliza en horizontal, como la franja de categorías */
  .g5{
    display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto;
    scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:4px;
  }
  .g5::-webkit-scrollbar{display:none}
  .g5 .tile{flex:0 0 220px; aspect-ratio:1/1; scroll-snap-align:start}
}

/* Lightbox en movil */
@media(max-width:700px){
  .lightbox__close{top:-44px;right:0}
  .lightbox__prev{left:-4px}
  .lightbox__next{right:-4px}
}

/* Móvil: categorías, etiquetas y compartir pasan a una sola fila cada una,
   deslizable con el dedo, en vez de ocupar varias líneas. La estrella queda
   en su propia fila, debajo de la de compartir. Este bloque va al final del
   archivo a propósito: tiene que ganar a las reglas de arriba. */
@media(max-width:900px){
  .p-cats, .p-tags{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  /* mismo espacio arriba y abajo en las pastillas de categorias y etiquetas */
  .p-cats{padding-top:18px;padding-bottom:18px}
  .p-tags{padding-top:14px;padding-bottom:14px}
  .p-cats::-webkit-scrollbar, .p-tags::-webkit-scrollbar{display:none}
  .p-cats a, .p-tags a{flex:none}

  .p-share{flex-direction:column; align-items:stretch; gap:10px; min-width:0}
  .p-share__scroll{
    display:flex; flex-wrap:nowrap; align-items:center; gap:10px;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
    min-width:0; width:100%;
  }
  .p-share__scroll::-webkit-scrollbar{display:none}
  .p-share__scroll .p-share__btn{flex:none}
  .p-share__like{margin-left:0; align-self:flex-start}

  .p-gallery{--h:150px; gap:10px}
}

/* Galería en móvil: una foto debajo de otra (el !important gana al estilo en línea de cada foto).
   AJUSTE: sube 600px si quieres que también las tabletas pequeñas la vean en una columna. */
@media(max-width:600px){
  .p-gallery{display:block}
  .p-gallery figure{flex:none !important;margin:0 0 14px}
}

/* Portada, «Últimas visitas»: 2 por fila en tableta y 1 en móvil. */
@media(max-width:900px){ .g3-latest{grid-template-columns:repeat(2,minmax(0,340px))} }
@media(max-width:600px){
  .g3-latest{grid-template-columns:minmax(0,1fr)}
  /* Portada en movil: solo los 3 primeros destinos (en ordenador salen 6). AJUSTE: 4 = a partir de que posicion se ocultan. */
  .g3-latest>:nth-child(n+4){display:none}
}
/* Portada: solo las 2 primeras colecciones cuando la cuadricula queda en 2 columnas (movil, movil apaisado, tableta vertical); con 3 columnas salen las 3.
   AJUSTE: 867px = ancho de pantalla por debajo del cual caben solo 2 columnas (3 tarjetas de 260px + huecos + margenes); 3 = a partir de que posicion se ocultan. */
@media(max-width:867px){ .g3-cols>:nth-child(n+3){display:none} }

/* ===== Galeria en ordenador: rejilla fija de marcos cuadrados =====
   En pantallas anchas cada foto entra entera en un marco cuadrado invisible, asi que horizontales y verticales
   quedan alineadas. En movil y tableta en vertical no cambia nada (siguen las reglas de arriba).
   AJUSTE: el 3 de repeat(3,...) son las columnas (con 12 fotos por pagina: 3 columnas = 4 filas; 4 columnas = 3 filas).
   AJUSTE: 901px = ancho minimo de pantalla a partir del cual se usa la rejilla. */
@media (min-width:901px){
  .p-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
  .p-gallery::after{display:none}
  .p-gallery figure{flex:none !important}
  .p-gallery img{aspect-ratio:1/1;object-fit:contain;object-position:center}
}
/* Boton "Como llegar" junto a la estrella. En movil la estrella va primero y el boton despues, en una fila
   aparte de la de compartir, separada por una linea dorada; el menu se abre hacia la derecha (si no, se saldria
   de la pantalla). AJUSTE: color y grosor de la linea en border-top. Va al final del archivo. */
@media(max-width:900px){
  .p-share__end{margin-left:0 !important;align-self:stretch;border-top:1px solid var(--gold);padding-top:12px}
  .p-share__end .p-share__like{order:-1}
  .p-route__menu{left:0 !important;right:auto !important}
}

/* Portada en el movil apaisado (pantalla baja): el contenido de la cabecera es mas alto que la pantalla.
   Se deja hueco arriba para el menu y la linea de cifras y el nombre de la foto pasan a la derecha, a la altura del
   boton "Explorar destinos". Solo afecta a horizontal con pantalla baja.
   AJUSTE: 520px = altura maxima de pantalla a la que se aplica; 84px = hueco para el menu;
   55px = distancia de la linea de cifras al borde de abajo (sube o baja si el nombre de la foto ocupa 1 o 2 lineas). */
@media(max-height:520px) and (orientation:landscape){
  .hero__body{width:100%;box-sizing:border-box;padding-top:84px;padding-bottom:20px}
  .hero h1{font-size:32px}
  .hero__body p{font-size:15px;margin-bottom:14px}
  .hero .hero__credit{position:absolute;right:24px;bottom:20px;margin:0;padding:0;text-align:right;font-size:11px;line-height:1.4}
  .hero .hero__stats{position:absolute;right:24px;bottom:55px;margin:0;font-size:11px;letter-spacing:.14em;text-align:right}
}

/* Portada en ordenador: el bloque de la izquierda (frase, boton y cifras) baja hasta quedar a la altura del nombre
   de la foto de la derecha. AJUSTE: 18px = distancia del ultimo texto al borde de abajo (deja la ultima linea a la altura del nombre de la foto). */
@media(min-width:901px){
  .hero__body{padding-bottom:18px}
}

/* Paginacion en movil */
@media(max-width:600px){ .pager{gap:10px} .pager a{padding:8px 14px} }

/* Colecciones y rutas en movil */
@media(max-width:700px){
  .col-map{height:300px}
  .col-item{grid-template-columns:1fr;gap:14px}
  .col-item__img{aspect-ratio:16/10}
}

/* "Ver mas / Ver menos" de la ficha. El recorte lo pone el script; sin JS se ve todo.
   AJUSTE: en .p-biblio li, font-size = escala de la bibliografia. */
.p-more{display:inline-block;margin:6px 0 0;padding:8px 18px;border:1px solid var(--gold);border-radius:999px;background:#fff;color:var(--main);font:500 14px/1 var(--sans, inherit);cursor:pointer}
.col-intro+.p-more{margin:10px 0 28px} /* en colecciones: aire entre el boton y el mapa */
[data-fold].is-folded{overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.p-biblio li{font-size:13.5px;line-height:1.55}