/* viajesenlaweb.com sobre la hoja base app.css de sitios/. Reproduce el diseño del tema anterior (newsmaker): caja de 1.140 px
   sobre gris claro, cabecera verde #6ab616, menú verde oscuro, carrusel de destacadas, listados con miniatura a la izquierda y
   barra lateral a la derecha. Lato en local; iconos SVG en línea; claro y oscuro. Los verdes con texto blanco se han oscurecido
   un poco (#448500) para llegar al contraste AA. */
@font-face { font-family: Lato; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fuentes/Lato-400.woff2) format("woff2"); }
@font-face { font-family: Lato; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fuentes/Lato-400i.woff2) format("woff2"); }
@font-face { font-family: Lato; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fuentes/Lato-700.woff2) format("woff2"); }
@font-face { font-family: Lato; font-weight: 900; font-style: normal; font-display: swap; src: url(/assets/fuentes/Lato-900.woff2) format("woff2"); }

:root {
  --fuente-texto: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-titulos: var(--fuente-texto);
  --marca: #6ab616;            /* cabecera */
  --marca-texto: #fff;
  --marca-oscura: #356a00;     /* hover de botones */
  --verde-menu: #448500;       /* menú y botones (texto blanco, contraste 4,6) */
  --fondo-pagina: #f1f1f1;
  --fondo: #fff;
  --fondo-suave: #f7f7f7;
  --texto: #555;
  --titulos: #1d1d1d;
  --texto-suave: #666;
  --borde: #e3e3e3;
  --enlace: #3a7500;
  --etiqueta: #c4290a;
  --pie-fondo: #3b3b3e;
  --ancho: 1140px;
  --barra: 360px;
  --pad: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca: #3b7208;
    --verde-menu: #2b5204;
    --marca-oscura: #3b7208;
    --fondo-pagina: #101215;
    --fondo: #1b1f23;
    --fondo-suave: #232830;
    --texto: #cdd2d7;
    --titulos: #f2f4f6;
    --texto-suave: #a3abb3;
    --borde: #2f353b;
    --enlace: #9bd44a;
    --etiqueta: #b3240a;
    --pie-fondo: #0b0d10;
  }
}
@media (min-width: 720px) { :root { --pad: 32px; } }
@media (min-width: 960px) { :root { --pad: 50px; } }

body { background: var(--fondo-pagina); font-family: var(--fuente-texto); font-size: 1rem; line-height: 1.75; }
h1, h2, h3 { color: var(--titulos); }
.cuerpo h2, .cuerpo h3 { font-weight: 700; }
a { color: var(--enlace); }
.principal h1 { font: 900 clamp(1.5rem, 4vw, 2.1rem)/1.2 var(--fuente-texto); text-transform: uppercase; }
.principal .legal h2 { text-transform: none; }

/* Cabecera verde a todo el ancho; el menú y la caja blanca, a 1.140 px */
.cabecera { background: var(--marca); }
.cabecera-in { max-width: var(--ancho); margin: 0 auto; padding: 1.2rem 16px 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.marca { display: block; flex: 0 1 390px; min-width: 0; }
.marca img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 64; }
@media (min-width: 1172px) { .cabecera-in { padding-left: 0; padding-right: 0; } }
.cab-herr { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.redes-cab { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; }
.redes-cab .icono, .cab-buscar .icono { width: 20px; height: 20px; }
.redes-cab a, .cab-buscar button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgb(0 0 0 / .22); color: #fff; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
.redes-cab a:hover, .cab-buscar button:hover { background: rgb(0 0 0 / .4); }
.cab-buscar { display: flex; }
.cab-buscar input { width: 190px; height: 40px; padding: 0 .8rem; border: 0; border-radius: 0; background: rgb(255 255 255 / .92); color: #222; font: inherit; font-size: .95rem; }
.cab-buscar input::placeholder { color: #666; }
.menu-caja { max-width: var(--ancho); margin: -1px auto 0; background: var(--verde-menu); box-shadow: 0 2px 4px rgb(0 0 0 / .2); position: relative; }
.menu ul { gap: 0; flex-wrap: wrap; }
.menu li { border-right: 1px solid rgb(255 255 255 / .16); }
.menu a { padding: 1.3rem 1.6rem; border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font: 400 .86rem/1.2 var(--fuente-texto); color: #fff; }
.menu a:hover { background: rgb(0 0 0 / .18); }
.menu a.activo { background: rgb(0 0 0 / .26); box-shadow: none; }
.menu-boton { display: none; align-items: center; gap: .6rem; width: 100%; padding: .9rem 1rem; background: none; border: 0; color: #fff; font: 700 .9rem var(--fuente-texto); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.menu-boton .icono { width: 22px; height: 22px; }
.cabecera :focus-visible, .menu-caja :focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
@media (max-width: 719px) {
  .js .menu-boton { display: flex; }
  .js .menu { display: none; }
  .js .menu.abierto { display: block; }
  .menu ul { flex-direction: column; }
  .menu li { border-right: 0; border-top: 1px solid rgb(255 255 255 / .16); }
  .menu a { padding: .9rem 1rem; }
  .cab-herr { width: 100%; }
  .cab-buscar { flex: 1; }
  .cab-buscar input { flex: 1; width: 100%; min-width: 0; }
}

/* Caja blanca con la barra lateral */
.caja { background: var(--fondo-pagina); }
.caja-in { max-width: var(--ancho); margin: 0 auto; background: var(--fondo); box-shadow: 0 0 6px rgb(0 0 0 / .12); display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .caja-in { grid-template-columns: minmax(0, 1fr) var(--barra); } }
.principal { min-height: 60vh; padding-bottom: 2rem; min-width: 0; }
.principal .ancho { max-width: none; padding: 0 var(--pad); }
.principal .lectura { max-width: none; }
.barra { padding: 1.5rem var(--pad) 2rem; background: var(--fondo-suave); border-top: 1px solid var(--borde); }
@media (min-width: 960px) { .barra { border-top: 0; border-left: 1px solid var(--borde); padding: 2rem 28px; } }
.widget { margin-bottom: 2rem; }
.widget-titulo { margin: 0 0 .8rem; padding-bottom: .5rem; font: 900 .95rem/1.3 var(--fuente-texto); text-transform: uppercase; letter-spacing: .06em; border-bottom: 3px solid var(--marca); color: var(--titulos); }
.widget-lista { list-style: none; margin: 0; padding: 0; }
.widget-lista li { padding: .45rem 0; border-bottom: 1px solid var(--borde); font-size: .95rem; line-height: 1.45; }
.widget-lista a { text-decoration: none; }
.widget-lista a:hover { text-decoration: underline; }
.widget-lista .n { float: right; color: var(--texto-suave); font-size: .85rem; }
.widget-recientes time { font-size: .8rem; color: var(--texto-suave); }

/* Carrusel de destacadas */
.destacadas { position: relative; }
.dest-lista { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.dest-lista::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .dest-lista { scroll-behavior: auto; } }
.dest { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 4 / 3; background: #222; }
@media (min-width: 600px) { .dest { aspect-ratio: 780 / 468; } }
.dest-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dest-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.5rem var(--pad) 1.2rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .82)); }
.etiquetas-cat { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.etiqueta { text-transform: lowercase; display: inline-block; padding: .1rem .6rem; background: var(--etiqueta); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.6; text-decoration: none; border-radius: 2px; }
.etiqueta:hover { filter: brightness(1.12); }
.dest-titulo { margin: 0 0 .3rem; font: 900 clamp(1.15rem, 3.2vw, 2rem)/1.15 var(--fuente-texto); text-transform: uppercase; color: #fff; }
.dest-titulo a { color: #fff; text-decoration: none; }
.dest-titulo a::after { content: ""; position: absolute; inset: 0; }
.dest-resumen { margin: 0; font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 599px) { .dest-resumen { display: none; } }
.dest-barras { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; background: var(--fondo); }
.dest-barras li { flex: 1; }
.dest-barras a { display: block; height: 14px; padding: 4px 1px; background: #616165; background-clip: content-box; }
.dest-barras a.activa { background-color: var(--marca); }
@media (prefers-color-scheme: dark) { .dest-barras a { background-color: #4b5159; } .dest-barras a.activa { background-color: #6ab616; } }
.dest-lista:focus-visible { outline: 3px solid var(--enlace); outline-offset: -3px; }

/* Entradas recientes (portada) y relacionadas */
.recientes { padding: 0 0 .5rem; }
.relacionados { padding: 0; }
.rec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 1.2rem; padding: 1.1rem var(--pad); background: var(--fondo-suave); border-left: 8px solid var(--marca); }
.rec-titulo { margin: 0; font: 900 1.05rem/1.3 var(--fuente-texto); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.relacionados { padding: 0; margin-top: 2.5rem; border-top: 3px solid var(--marca); padding-top: 1.2rem; }
.relacionados .rec-titulo { margin-bottom: 1rem; }
.ver-mas { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); text-decoration: none; }
.ver-mas:hover { text-decoration: underline; }
.recientes .rejilla { padding: 0 var(--pad); }
.rejilla { display: grid; gap: 1.5rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.ent-caja { display: flex; flex-direction: column; gap: .6rem; }
.ent-caja .ent-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ent-caja .ent-titulo { font-size: 1rem; }
.ent-caja .ent-resumen { display: none; }

/* Listados con miniatura a la izquierda */
.entradas { margin-top: 1rem; }
.ent-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "t t" "m m" "f r" "f b"; gap: 0 1rem; grid-template-rows: auto auto auto 1fr; padding: 1.6rem 0; border-bottom: 1px solid var(--borde); align-items: start; }
.ent-fila .ent-texto { display: contents; }
.ent-fila .ent-titulo { grid-area: t; margin: 0 0 .4rem; }
.ent-fila .meta-ent { grid-area: m; margin: 0 0 1rem; }
.ent-fila .ent-foto { grid-area: f; }
.ent-fila .ent-foto img { display: block; width: 96px; height: 96px; object-fit: cover; padding: 2px; border: 1px solid var(--borde); background: var(--fondo); }
.ent-fila .ent-resumen { grid-area: r; margin: 0 0 .8rem; }
.ent-fila > .ent-texto > p:last-child { grid-area: b; margin: 0; }
.ent-fila:not(:has(.ent-foto)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "m" "r" "b"; }
@media (min-width: 640px) {
  .ent-fila { grid-template-columns: 200px minmax(0, 1fr); gap: 0 1.6rem; padding: 2rem 0; }
  .ent-fila .ent-foto img { width: 200px; height: 200px; padding: 3px; }
  .ent-fila .ent-titulo { font-size: 1.5rem; }
}
.ent-titulo { font-family: var(--fuente-texto); font-weight: 900; font-size: 1.25rem; line-height: 1.25; text-transform: uppercase; margin: 0 0 .3rem; }
.ent-titulo a { color: var(--titulos); text-decoration: none; }
.ent-titulo a:hover { color: var(--enlace); }
.meta-ent { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.meta-ent span { display: inline-flex; align-items: center; gap: .35rem; }
.icono { flex: none; width: 14px; height: 14px; }
.boton-peq { padding: .4rem .9rem; font: 700 .75rem var(--fuente-texto); text-transform: uppercase; letter-spacing: .03em; background: var(--verde-menu); color: #fff; border-radius: 2px; }
.boton, button[type=submit] { background: var(--verde-menu); color: #fff; }
.boton:hover, button[type=submit]:hover { background: var(--marca-oscura); }
.cab-lista { margin: 1rem calc(-1 * var(--pad)) 0; padding: 1.2rem var(--pad); background: var(--fondo-suave); border-left: 8px solid var(--marca); }
.cab-lista .meta { display: none; }
.principal .cab-lista h1 { margin: 0; font: 900 clamp(1.15rem, 3vw, 1.4rem)/1.2 var(--fuente-texto); color: var(--texto-suave); }
.cab-lista .entradilla { margin: .5rem 0 0; font-size: 1rem; }
.paginas { border-top: 1px solid var(--borde); padding-top: 1.2rem; }

/* La entrada */
.migas { margin-top: 1rem; }
.articulo { padding-bottom: 1rem; }
.articulo .foto-cabecera { margin: 0 calc(-1 * var(--pad)); }
.articulo .foto-cabecera img { width: 100%; border-radius: 0; }
.articulo .foto-cabecera figcaption { padding: .4rem var(--pad) 0; text-align: right; }
.art-cab { margin: 1.4rem 0 1.2rem; }
.art-cab h1 { margin: .2em 0 .35em; font: 900 clamp(1.6rem, 4.4vw, 2.4rem)/1.15 var(--fuente-texto); text-transform: uppercase; }
.cuerpo { font-size: 1.0625rem; }
.cuerpo .foto { margin: 1.4rem 0; }
.cuerpo .foto img { border-radius: 0; }
.cuerpo a.foto-enlace { cursor: zoom-in; }
.cuerpo hr { border: 0; border-top: 1px solid var(--borde); margin: 2rem 0; }
.cuerpo li .foto { margin: .8rem 0; }
.nota-historica { padding: .7rem 1rem; border-left: 4px solid var(--etiqueta); background: var(--fondo-suave); font-size: .95rem; }
.fuentes { font-size: .95rem; color: var(--texto-suave); }

/* Zoom de las fotos al pasar el ratón (como en el tema anterior: scale 1,05 en .35 s). Solo con puntero fino y sin reducir movimiento;
   el recorte va en el contenedor, así que no cambia el tamaño de la caja ni provoca CLS ni scroll. */
.ent-foto, .dest, .articulo .foto-cabecera { overflow: hidden; }
.ent-foto { display: block; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ent-foto img, .dest-img, .articulo .foto-cabecera img { transition: transform .4s ease-in-out; }
  .ent:hover .ent-foto img, .dest:hover .dest-img, .articulo .foto-cabecera:hover img { transform: scale(1.06); }
  /* el pie de foto queda por encima de la imagen ampliada */
  .articulo .foto-cabecera figcaption { position: relative; background: var(--fondo); }
}

/* Visor de fotos */
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.visor::backdrop { background: rgb(0 0 0 / .88); }
.visor-in { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor button { position: absolute; top: .8rem; right: .8rem; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; background: #fff; color: #000; border: 0; border-radius: 50%; cursor: pointer; }

/* Pie */
.pie { background: var(--pie-fondo); text-align: center; padding: 1.6rem 16px; margin-top: 0; }
.pie .legal, .pie .copia { margin: 0 auto; border: 0; padding: 0; }
.pie .legal { margin-bottom: .5rem; }
.pie a, .pie .enlace { color: #fff; }
.pie .copia { color: #c4c8cc; }

.anuncio { margin: 1.5rem var(--pad); max-width: none; }
.principal .anuncio-portada-lista { margin: 1rem var(--pad); }
.salto:focus { z-index: 1000; }
@media print { .barra, .menu-caja, .cab-herr { display: none; } }