/* DCG · blog (/blog/ y /blog/<slug>/), 15-oct-2026. Va después de inicio.css y paginas.css: usa sus piezas (cabecera
   marina con las barras del logo, titular de dos tamaños, tarjetas de canal, pasos numerados, visor) y agrega las del
   blog con el mismo idioma de boleto: tarjetas con foto arriba y talón con línea punteada y muescas, la portada de
   cada entrada como postal inclinada, y cada punto de la guía como boleto con su talón («Así sale DCG» o «Pregúntalo»).
   Sin botón de pausa: lo que se mueve pasa una vez al aparecer o lo mueve la persona. */

/* ---------- Barra de lectura (entrada) ---------- */
.progreso-lectura{position:fixed;inset:0 0 auto;z-index:60;height:4px;pointer-events:none}
.progreso-lectura span{display:block;height:100%;background:linear-gradient(90deg,var(--cielo),var(--estrella) 60%,var(--bugambilia));transform-origin:left;transform:scaleX(var(--avance,0))}

/* ---------- Índice: título, filtros y tarjetas ---------- */
.blog__cabeza{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--e3)}
.filtros{display:flex;flex-wrap:wrap;gap:10px}
.filtro{--color:var(--cielo);display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:8px 10px 8px 16px;border:2px solid rgb(30 58 105 / .18);border-radius:var(--r);background:var(--blanco);color:var(--marino);font:800 .95rem/1 var(--letra);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .35s var(--rebote),background-color .25s,border-color .25s}
.filtro::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;background:var(--color);transition:transform .4s var(--rebote)}
.filtro--viajes{--color:var(--bugambilia)}
.filtro--guias{--color:var(--estrella)}
.filtro:hover{transform:translateY(-2px);border-color:var(--color)}
.filtro[aria-pressed="true"]{background:var(--marino);border-color:var(--marino);color:var(--crema)}
.filtro[aria-pressed="true"]::before{transform:rotate(45deg)}
.filtro__cuenta{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;background:rgb(30 58 105 / .1);font-size:.85rem}
.filtro[aria-pressed="true"] .filtro__cuenta{background:var(--color);color:var(--marino-noche)}

.bitacoras{display:grid;gap:var(--e4) var(--e3);margin-top:var(--e4);padding:0;list-style:none}
@media (min-width:720px){.bitacoras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bitacoras{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bitacora{--sello:var(--estrella);--muesca:var(--crema);min-width:0}
.bitacora--viajes{--sello:var(--bugambilia)}
.seccion--blanco .bitacora{--muesca:var(--blanco)}
.bitacora[hidden]{display:none}
.bitacora__enlace{display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:var(--r-grande);color:var(--tinta);text-decoration:none;filter:drop-shadow(0 26px 34px rgb(13 30 59 / .2));transition:transform .45s var(--rebote)}
a.bitacora__enlace:hover{transform:translateY(-6px) rotate(-1deg)}
.bitacora__foto{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--r-grande) var(--r-grande) 0 0;background:var(--marino)}
.bitacora__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--suave)}
a.bitacora__enlace:hover .bitacora__foto img{transform:scale(1.06)}
.bitacora__cuerpo{position:relative;display:grid;gap:12px;align-content:start;padding:26px 24px 24px;border-radius:0 0 var(--r-grande) var(--r-grande);background:var(--blanco)}
.bitacora__cuerpo::before{content:"";position:absolute;left:22px;right:22px;top:-1.5px;border-top:3px dashed rgb(30 58 105 / .25)}
.bitacora__cuerpo::after{content:"";position:absolute;inset:-12px 0 auto;height:24px;pointer-events:none;background:radial-gradient(circle at 0 50%,var(--muesca) 11px,transparent 12px),radial-gradient(circle at 100% 50%,var(--muesca) 11px,transparent 12px)}
.bitacora__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.bitacora__sello{display:inline-flex;padding:5px 10px;border-radius:8px;background:var(--sello);color:var(--marino-noche);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-2deg)}
.bitacora--viajes .bitacora__sello{color:var(--blanco)}
.bitacora__fecha{font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#4A5875}
.bitacora__titulo{margin:0;font:800 clamp(1.3rem,1.1rem + .6vw,1.6rem)/1.15 var(--letra);color:var(--marino);text-wrap:balance}
.bitacora__extracto{color:#3E4C68;line-height:1.5}
.bitacora__leer{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:800;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--marino)}
.bitacora__flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .35s var(--suave)}
a.bitacora__enlace:hover .bitacora__flecha svg{transform:translateX(6px)}
/* Al filtrar: las que entran suben, las que salen se encogen (blog.js). */
.bitacora--entra{animation:bitacora-entra .5s var(--rebote) both;animation-delay:calc(var(--orden,0) * 60ms)}
.bitacora--sale{animation:bitacora-sale .26s ease-in both}
@keyframes bitacora-entra{from{opacity:0;transform:translateY(22px) scale(.97)}}
@keyframes bitacora-sale{to{opacity:0;transform:scale(.94)}}
/* Tema sin entradas (solo en la vista previa). */
.bitacora__foto--vacia{display:flex;align-items:center;justify-content:center;gap:14px;font:900 1.6rem/1 var(--letra);letter-spacing:.06em;color:var(--crema)}
.bitacora__foto--vacia svg{width:42px;fill:var(--cielo)}
.blog__todo{margin-top:var(--e4)}
/* La primera del índice va destacada: foto a un lado y talón al otro (si es la única, ocupa toda la fila). */
@media (min-width:720px){
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child:not(.bitacora--vacia){grid-column:1 / -1}
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child .bitacora__enlace{grid-template-rows:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child .bitacora__foto{aspect-ratio:auto;min-height:340px;border-radius:var(--r-grande) 0 0 var(--r-grande)}
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child .bitacora__cuerpo{align-content:center;padding:clamp(28px,3.4vw,48px);border-radius:0 var(--r-grande) var(--r-grande) 0}
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child .bitacora__cuerpo::before{left:-1.5px;right:auto;top:22px;bottom:22px;border-top:0;border-left:3px dashed rgb(30 58 105 / .25)}
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child .bitacora__cuerpo::after{inset:0 auto 0 -12px;width:24px;height:auto;background:radial-gradient(circle at 50% 0,var(--muesca) 11px,transparent 12px),radial-gradient(circle at 50% 100%,var(--muesca) 11px,transparent 12px)}
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child .bitacora__titulo{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem)}
}
@media (min-width:1100px){
  .bitacoras:not(.bitacoras--mas) > .bitacora:first-child:not(:only-child){grid-column:span 2}
}

.canal--estrella a{background:var(--estrella);color:var(--marino-noche)}
.canal--estrella .canal__tipo{opacity:1}

/* ---------- Entrada: cabecera con la portada como postal ---------- */
.articulo-cabeza .pagina-cabeza__dentro{align-items:center}
.articulo-cabeza__miga{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--e3);padding:7px 14px;border-radius:999px;background:rgb(242 237 232 / .1);box-shadow:inset 0 0 0 2px rgb(242 237 232 / .22);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cielo-claro)}
.articulo-cabeza__miga a{color:var(--crema);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.articulo-cabeza__miga span{opacity:.6}
.articulo-cabeza__titulo{max-width:20ch;font:800 clamp(2.1rem,1.2rem + 3.4vw,4.3rem)/1 var(--letra);letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.articulo-cabeza__datos{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--e3);font-size:var(--t-chico);color:rgb(242 237 232 / .82)}
.articulo-cabeza__datos span + span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:18px;border-radius:50%;background:var(--cielo);vertical-align:middle;translate:0 -2px}
.articulo-cabeza__datos b{color:var(--crema)}
.js .articulo-cabeza__titulo,.js .articulo-cabeza__miga,.js .articulo-cabeza__datos{opacity:0;transform:translateY(18px);transition:opacity .8s var(--suave),transform .9s var(--suave)}
.js .articulo-cabeza__datos{transition-delay:.35s}
.listo .articulo-cabeza__titulo,.listo .articulo-cabeza__miga,.listo .articulo-cabeza__datos{opacity:1;transform:none}

.postal{position:relative;justify-self:center;width:min(100%,340px);margin:var(--e2) 0 0;padding:10px 10px 44px;border-radius:6px;background:var(--crema);box-shadow:0 30px 50px -24px rgb(0 0 0 / .65);transform:rotate(-3deg);transition:transform .6s var(--rebote)}
.postal img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:3px}
.postal:hover{transform:rotate(0deg) scale(1.02)}
.postal__sello{position:absolute;right:-14px;bottom:14px;display:grid;place-items:center;width:78px;height:78px;border:3px dashed var(--bugambilia);border-radius:50%;background:var(--crema);color:var(--bugambilia);font:900 1.15rem/1 var(--letra);letter-spacing:.04em;transform:rotate(14deg)}
.js .postal{opacity:0;transform:rotate(6deg) translateY(30px)}
.listo .postal{opacity:1;transform:rotate(-3deg);transition:opacity .8s var(--suave) .3s,transform 1s var(--rebote) .3s}
.listo .postal:hover{transform:rotate(0deg) scale(1.02);transition:transform .6s var(--rebote)}
@media (min-width:900px){
  .articulo-cabeza .pagina-cabeza__dentro{grid-template-columns:minmax(0,1fr) auto}
  .postal{width:clamp(260px,24vw,360px);margin:0 clamp(40px,7vw,120px) 0 var(--e3)}
}

/* ---------- Entrada: la guía ---------- */
.articulo__intro{max-width:860px}
.indice--guia{margin-top:var(--e3)}
.indice--guia a{border-color:rgb(30 58 105 / .18);background:var(--blanco);color:var(--marino)}
.indice--guia a:hover{color:var(--marino-noche)}

.puntos{display:grid;gap:var(--e4);margin-top:var(--e5);padding:0;list-style:none}
.punto{--muesca:var(--crema);display:grid;border-radius:var(--r-grande);scroll-margin-top:96px;filter:drop-shadow(0 26px 34px rgb(13 30 59 / .18))}
.punto__cuerpo{position:relative;display:grid;gap:14px;align-content:start;padding:clamp(24px,3.4vw,40px);border-radius:var(--r-grande) var(--r-grande) 0 0;background:var(--blanco)}
.punto__cuerpo > *{margin:0}
.punto__numero{justify-self:start;padding:.12em .22em .08em;border-radius:14px;background:var(--cielo);color:var(--marino-noche);font:900 clamp(2.2rem,1.7rem + 1.6vw,3.2rem)/.9 var(--letra);letter-spacing:-.02em;transform:rotate(-4deg);box-shadow:0 12px 24px -14px rgb(13 30 59 / .7)}
.punto:nth-child(3n+2) .punto__numero{background:var(--estrella)}
.punto:nth-child(3n) .punto__numero{background:#FF7FA8}
.punto__titulo{font:800 var(--t-rotulo)/1.08 var(--letra);text-transform:uppercase;color:var(--marino);text-wrap:balance}
.punto__cuerpo p{max-width:68ch;line-height:1.6}
.punto__cuerpo a{color:var(--marino);font-weight:700;text-decoration-thickness:2px;text-underline-offset:.2em}
.punto__fuente{padding-top:12px;border-top:2px solid var(--crema);font-size:var(--t-chico);color:#4A5875}
.punto__fuente a{font-weight:600!important}
.punto__talon{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(24px,3.4vw,36px);border-radius:0 0 var(--r-grande) var(--r-grande);background:var(--marino);color:var(--crema)}
.punto__talon > *{margin:0}
.punto__talon::before{content:"";position:absolute;left:24px;right:24px;top:-1.5px;border-top:3px dashed rgb(30 58 105 / .3)}
.punto__talon::after{content:"";position:absolute;inset:-13px 0 auto;height:26px;pointer-events:none;background:radial-gradient(circle at 0 50%,var(--muesca) 12px,transparent 13px),radial-gradient(circle at 100% 50%,var(--muesca) 12px,transparent 13px)}
.punto__rotulo{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cielo)}
.punto__dato{font:900 clamp(1.5rem,1.1rem + 1.4vw,2.2rem)/1 var(--letra);overflow-wrap:anywhere}
.punto__talon p{line-height:1.55}
.punto__talon a{color:var(--cielo-claro);text-decoration-thickness:2px;text-underline-offset:.2em}
.punto__talon a[href^="tel:"]{white-space:nowrap}
.punto__talon .enlace{justify-self:start;margin-top:4px;color:var(--crema)}
.punto__talon .enlace svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
.punto__talon--pregunta{background:#FFF1C9;color:var(--tinta)}
.punto__talon--pregunta .punto__rotulo{color:var(--bugambilia-honda)}
.punto__talon--pregunta .enlace,.punto__talon--pregunta a{color:var(--marino)}
.js .punto .punto__numero{opacity:0;transform:translateY(24px) rotate(-16deg) scale(.8)}
.js .punto.visto .punto__numero{opacity:1;transform:rotate(-4deg);transition:opacity .7s var(--suave) .2s,transform .9s var(--rebote) .2s}
@media (min-width:960px){
  .punto{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .punto__cuerpo{border-radius:var(--r-grande) 0 0 var(--r-grande)}
  .punto__talon{align-content:center;border-radius:0 var(--r-grande) var(--r-grande) 0}
  .punto__talon::before{left:-1.5px;right:auto;top:24px;bottom:24px;border-top:0;border-left:3px dashed rgb(30 58 105 / .3)}
  .punto__talon::after{inset:0 auto 0 -13px;width:26px;height:auto;background:radial-gradient(circle at 50% 0,var(--muesca) 12px,transparent 13px),radial-gradient(circle at 50% 100%,var(--muesca) 12px,transparent 13px)}
}

.cuenta--ancha{max-width:860px}
.cuenta--ancha li{line-height:1.55}
.cuenta--ancha b{color:var(--marino)}

.fuentes__lista{display:grid;gap:10px;max-width:900px;margin-top:var(--e3);padding-left:1.4em;line-height:1.5}
.fuentes__lista li::marker{font-weight:800;color:var(--bugambilia)}
.fuentes__lista a{color:var(--marino);font-weight:700;text-decoration-thickness:2px;text-underline-offset:.2em}

/* ---------- Entrada de viaje: ficha, texto, galería y PDF ---------- */
.articulo__dentro{display:grid;gap:var(--e3);max-width:860px}
.articulo__ficha{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.articulo__ficha div{padding:12px 16px;border-radius:var(--r);background:var(--blanco);box-shadow:0 14px 30px -24px rgb(13 30 59 / .6)}
.articulo__ficha dt{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#5A6B86}
.articulo__ficha dd{margin:2px 0 0;font-weight:800;color:var(--marino)}
.articulo__prosa > * + *{margin-top:1em}
.articulo__prosa p{max-width:68ch;font-size:1.0625rem;line-height:1.65}

.galeria__cuenta{display:inline-grid;place-items:center;min-width:1.6em;padding:.1em .3em;border-radius:10px;background:var(--cielo);color:var(--marino-noche);font-size:.6em;vertical-align:middle;transform:rotate(-4deg)}
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:var(--e4);padding:0;list-style:none}
@media (min-width:900px){.galeria{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.galeria__enlace{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:1;background:var(--marino)}
.galeria__enlace img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--suave)}
.galeria__enlace:hover img{transform:scale(1.06)}
.visor--fotos .visor__lienzo img{background:transparent}
.visor__pie{grid-column:1 / -1;margin:0;padding:10px var(--margen) 16px;color:rgb(242 237 232 / .85);font-size:var(--t-chico)}
.visor--fotos[open]{grid-template-rows:auto minmax(0,1fr) auto}

.pdfs{display:grid;gap:var(--e2);margin-top:var(--e4);padding:0;list-style:none}
.pdf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;align-items:center;padding:20px;border-radius:var(--r-grande);background:var(--crema)}
.pdf__icono{position:relative;width:56px}
.pdf__icono svg{width:100%}
.pdf__hoja{fill:var(--blanco);stroke:var(--marino);stroke-width:2.5}
.pdf__doblez{fill:none;stroke:var(--marino);stroke-width:2.5}
.pdf__tache{fill:var(--marino)}
.pdf__linea{fill:var(--cielo)}
.pdf__icono b{position:absolute;left:50%;bottom:-6px;translate:-50% 0;padding:2px 6px;border-radius:5px;background:var(--bugambilia);color:var(--blanco);font-size:.7rem;letter-spacing:.08em}
.pdf__titulo{margin:0;font-weight:800;font-size:1.15rem;color:var(--marino)}
.pdf__texto p{margin:2px 0 0;color:#4A5875;font-size:var(--t-chico)}
.pdf__acciones{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.pdf__acciones .boton__avion svg,.pdf__acciones .boton__avion{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.4}
@media (min-width:720px){.pdf{grid-template-columns:auto minmax(0,1fr) auto}.pdf__acciones{grid-column:auto}}
/* Una cotización que llegó como captura (imagen): miniatura en vez del dibujo del PDF. */
.pdf__mini{display:block;width:56px;height:72px;overflow:hidden;border-radius:6px;background:var(--blanco);box-shadow:0 0 0 2px var(--marino)}
.pdf__mini img{width:100%;height:100%;object-fit:cover}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .bitacora--entra,.bitacora--sale{animation:none}
  .js .articulo-cabeza__titulo,.js .articulo-cabeza__miga,.js .articulo-cabeza__datos,.js .postal{opacity:1;transform:none;transition:none}
  .listo .postal,.postal{transform:rotate(-3deg)}
  .js .punto .punto__numero,.js .punto.visto .punto__numero{opacity:1;transform:rotate(-4deg);transition:none}
  a.bitacora__enlace:hover,a.bitacora__enlace:hover .bitacora__foto img,.galeria__enlace:hover img{transform:none}
}

/* ---------- Portada de texto (15-oct-2026): una publicación sin ninguna imagen propia (ni foto, ni captura, ni la
   primera hoja del PDF) lleva el destino en grande sobre marino, nunca una foto de otro lugar. ---------- */
.portada-texto{position:relative;display:grid;align-content:center;justify-items:start;gap:10px;width:100%;height:100%;padding:clamp(20px,4vw,40px);overflow:hidden;
  background:radial-gradient(circle at 85% 15%,rgb(55 181 255 / .45),transparent 55%),radial-gradient(circle at 10% 100%,rgb(214 51 108 / .35),transparent 50%),var(--marino);color:var(--crema)}
.portada-texto::after{content:"";position:absolute;right:-6%;bottom:-18%;width:46%;aspect-ratio:1;border:3px dashed rgb(242 237 232 / .25);border-radius:50%}
.portada-texto__tipo{padding:5px 10px;border-radius:8px;background:var(--estrella);color:var(--marino-noche);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-2deg)}
.portada-texto__destino{max-width:100%;font:900 clamp(2rem,1.2rem + 3vw,3.4rem)/.95 var(--letra);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.portada-texto__avion{width:44px;height:2px;background:linear-gradient(90deg,var(--cielo) 60%,transparent 0) 0 0 / 10px 2px}
.bitacora__foto--texto{display:block}
.postal--texto{display:grid}
.postal--texto .portada-texto{aspect-ratio:4 / 5;border-radius:3px}
.postal--texto .portada-texto__destino{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.8rem)}
