/* Blog personal de Daniel · estilos
   Azul noche: fondos azul oscuro, texto crema y acentos dorados */

:root{
  --bg:#0D1B2A;            /* fondo de la página */
  --barra:#08131F;         /* barra de navegación */
  --card:#13273C;          /* tarjetas */
  --surface:#13273C;
  --panel:#16304A;         /* menús desplegables */
  --foto:#1D3A57;          /* fondo de fotos que cargan */
  --campo:#0F2033;         /* campos de formulario */
  --text:#F1E8D6;
  --text-muted:#A7B6C6;
  --line:rgba(241,232,214,0.14);
  --brass:#C99A48;         /* dorado para líneas y bordes */
  --brass-text:#DDB56B;    /* dorado para texto */
  --pin:#E27A62;
  --rust:#E27A62;
  --mapa-mar:#0F2436;
  --mapa-tierra:#1D3852;
  --mapa-borde:#41627F;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--brass-text);outline-offset:3px;}
[hidden]{display:none !important;}
::selection{background:var(--brass);color:#1c1305;}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px 96px;}
.pagina{max-width:1160px;margin:0 auto;padding:56px 24px 96px;}
.aviso-js{padding:48px 24px;text-align:center;color:var(--text-muted);}

/* ---------- Barra de navegación ---------- */
#cabecera{position:sticky;top:0;z-index:60;}
.cabecera{background:var(--barra);border-bottom:1px solid var(--line);}
.cab-inner{
  position:relative;max-width:1160px;margin:0 auto;padding:0 24px;height:88px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.marca{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:var(--text);}
.marca-icono{width:40px;height:40px;border:1.5px solid var(--brass);border-radius:50%;display:grid;place-items:center;flex:none;}
.marca-icono svg{width:18px;height:18px;}
.marca-texto{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.1;letter-spacing:.01em;}

.nav > ul{display:flex;align-items:stretch;gap:36px;list-style:none;margin:0;padding:0;}
.nav-item{display:flex;}
.nav-link{
  display:flex;align-items:center;gap:6px;box-sizing:border-box;height:88px;margin-bottom:-1px;padding:0 2px;
  background:none;border:none;border-bottom:2px solid transparent;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.01em;
  color:var(--text);text-decoration:none;cursor:pointer;
}
.nav-link:hover,.nav-btn[aria-expanded="true"]{color:var(--brass-text);}
.nav-link.activo{color:var(--brass-text);border-bottom-color:var(--brass);}
.nav-btn svg{width:16px;height:16px;flex:none;transition:transform .2s ease;}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg);}

.cab-menu{
  display:none;width:44px;height:44px;flex:none;place-items:center;
  background:none;border:1px solid rgba(241,232,214,.3);border-radius:2px;color:var(--text);cursor:pointer;
}
.cab-menu svg{width:22px;height:22px;}
.cab-menu .icono-cerrar{display:none;}
.cabecera.nav-abierto .cab-menu .icono-abrir{display:none;}
.cabecera.nav-abierto .cab-menu .icono-cerrar{display:block;}

/* menús desplegables */
.menu-panel{
  position:absolute;top:calc(100% + 8px);right:24px;z-index:70;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 28px 56px -16px rgba(0,0,0,.6);
  max-height:min(70vh,560px);overflow:auto;
}
.menu-destinos{width:min(640px,calc(100vw - 48px));padding:28px 32px 22px;}
.menu-cats{width:min(360px,calc(100vw - 48px));padding:24px 28px 20px;}
.menu-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;}
.menu-cols h3{margin:0 0 8px;font-family:var(--serif);font-style:italic;font-weight:420;font-size:22px;line-height:1.2;}
.menu-cols ul,.menu-lista{list-style:none;margin:0;padding:0;}
.menu-item{display:flex;align-items:center;gap:11px;min-height:38px;font-size:15px;color:var(--text);text-decoration:none;}
.menu-item:hover{color:var(--brass-text);text-decoration:underline dotted;text-decoration-color:var(--brass);text-underline-offset:5px;}
.menu-item .cuenta{margin-left:auto;font-size:13px;color:var(--text-muted);text-decoration:none;}
.menu-cats .menu-item{min-height:40px;gap:12px;}
.menu-pie{margin-top:14px;padding-top:16px;border-top:1px solid var(--line);}
.menu-pie a{font-size:14px;font-weight:500;color:var(--brass-text);text-decoration:underline dotted;text-decoration-color:var(--brass);text-underline-offset:5px;}
.menu-vacio{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted);}
.punto-pin{width:7px;height:7px;border-radius:50%;background:var(--pin);flex:none;}
.rombo{width:7px;height:7px;background:var(--brass-text);transform:rotate(45deg);flex:none;}

@media (max-width:860px){
  .cab-inner{height:68px;padding:0 20px;}
  .marca-icono{width:32px;height:32px;}
  .marca-icono svg{width:16px;height:16px;}
  .marca-texto{font-size:18px;}
  .cab-menu{display:grid;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--panel);border-bottom:1px solid var(--line);
    box-shadow:0 22px 40px -14px rgba(0,0,0,.6);
    max-height:calc(100vh - 68px);overflow:auto;
  }
  .cabecera.nav-abierto .nav{display:block;}
  .nav > ul{flex-direction:column;gap:0;}
  .nav-item{display:block;border-bottom:1px solid var(--line);}
  .nav-link{width:100%;height:56px;margin:0;padding:0 20px;border-bottom:none;justify-content:space-between;font-size:17px;}
  .nav-link.activo{border-bottom:none;}
  .menu-panel{position:static;width:auto;max-height:none;overflow:visible;box-shadow:none;border:none;border-radius:0;background:var(--card);padding:6px 0 10px;}
  .menu-destinos,.menu-cats{width:auto;padding:6px 0 10px;}
  .menu-cols{grid-template-columns:1fr;gap:0;}
  .menu-cols h3{padding:16px 20px 4px;font-size:20px;}
  .menu-item,.menu-cats .menu-item{min-height:44px;padding:0 20px 0 28px;font-size:16px;}
  .menu-pie{margin-top:6px;padding:12px 20px 4px;}
  .menu-vacio{padding:12px 20px;}
  .pagina{padding:36px 20px 72px;}
  .wrap{padding:0 20px 72px;}
}

/* ---------- Encabezado sencillo (solo la página de nueva entrada) ---------- */
header.top{
  padding:56px 0 40px;
  background:var(--barra);
  border-bottom:1px solid var(--line);
  margin-bottom:56px;
}
header.top .inner{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;}
.brand-mark{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--brass);
  display:flex;align-items:center;justify-content:center;
  color:var(--brass);font-family:var(--serif);font-size:19px;flex:none;
}
.brand h1{font-family:var(--serif);font-weight:500;font-size:26px;margin:0;letter-spacing:.01em;}
.brand p{margin:2px 0 0;color:var(--text-muted);font-size:14px;}
.crumbs{font-size:14px;color:var(--text-muted);}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent;}
.crumbs a:hover{border-color:var(--brass);color:var(--brass-text);}
@media (max-width:760px){
  header.top{padding:40px 0 28px;margin-bottom:36px;}
  header.top .inner{padding:0 20px;}
}

/* ---------- Inicio ---------- */
.inicio{max-width:1160px;margin:0 auto;padding:120px 24px 160px;}
.inicio h1{margin:0;max-width:860px;font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.2vw,60px);line-height:1.1;letter-spacing:-.005em;}
.inicio p{margin:28px 0 0;max-width:640px;font-size:clamp(17px,1.6vw,20px);line-height:1.65;color:rgba(241,232,214,.86);}
@media (max-width:860px){.inicio{padding:64px 20px 96px;}}

/* ---------- Páginas de entradas (Blog, Destinos, Categorías) ---------- */
.pagina-titulo{margin-bottom:32px;}
.pagina-titulo h1{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,48px);line-height:1.1;}
.pagina-titulo p{margin:8px 0 0;font-size:15px;color:var(--text-muted);}
.vacio-texto{margin:0;padding:26px 4px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--text-muted);}

.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;}
@media (max-width:1000px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.rejilla{grid-template-columns:minmax(0,1fr);}}

.ent-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  transition:border-color .2s ease, transform .2s ease;
}
.ent-card:hover{border-color:var(--brass);transform:translateY(-2px);}
.ent-body{padding:22px 22px 24px;}
.ent-titulo{margin:0 0 8px;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;}
.ent-titulo a{color:var(--text);text-decoration:none;}
.ent-titulo a::after{content:"";position:absolute;inset:0;z-index:1;}   /* toda la tarjeta es un enlace */
.ent-lugar{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-muted);}
.ent-pais{font-size:13.5px;letter-spacing:.03em;color:var(--brass-text);}
.ent-fecha{margin-top:4px;font-size:14px;color:var(--text-muted);}
.ent-lugar + .ent-fecha{padding-left:17px;}
.ent-chip{position:relative;z-index:2;margin-top:14px;}
.ent-resumen{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.chip{
  display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;
  border:1px solid rgba(201,154,72,.55);border-radius:2px;
  font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--brass-text);text-decoration:none;
  transition:background .2s ease;
}
.chip:hover{background:rgba(201,154,72,.14);}

/* ---------- Carrusel de fotos en las tarjetas ---------- */
.carrusel{position:relative;z-index:2;}
.car-pista{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  aspect-ratio:4/3;background:var(--foto);
  border-bottom:1px solid var(--line);
}
.car-pista::-webkit-scrollbar{display:none;}
.car-pista:focus-visible{outline-offset:-3px;}
.car-foto{flex:0 0 100%;display:block;scroll-snap-align:center;scroll-snap-stop:always;}
.car-foto img{display:block;width:100%;height:100%;object-fit:cover;}
.car-btn{
  position:absolute;top:calc(50% - 18px);z-index:2;
  width:36px;height:36px;padding:0 0 3px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(8,19,31,.68);color:#F1E8D6;font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,opacity .2s ease;
}
.car-btn:hover{background:rgba(8,19,31,.9);}
.car-btn[disabled]{opacity:0;pointer-events:none;}
.car-prev{left:8px;}
.car-next{right:8px;}
.car-puntos{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;
  display:flex;gap:2px;padding:2px 6px;border-radius:12px;background:rgba(8,19,31,.62);
}
.car-punto{width:18px;height:18px;padding:0;border:none;background:none;cursor:pointer;display:grid;place-items:center;}
.car-punto::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(241,232,214,.5);transition:background .2s ease,transform .2s ease;}
.car-punto[aria-current="true"]::after{background:#F1E8D6;transform:scale(1.25);}

/* ---------- Página de una entrada y página de un viaje ---------- */
.trip-header{margin-bottom:36px;}
.trip-header .country{font-size:13px;letter-spacing:.03em;color:var(--brass-text);margin:0 0 6px;}
.trip-header h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,46px);margin:0 0 10px;line-height:1.05;}
.trip-header .dates{font-size:14.5px;color:var(--text-muted);margin:0;}
.trip-header .ent-chip{margin-top:16px;}

.trip-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;align-items:start;}
.trip-grid.sin-mapa{grid-template-columns:minmax(0,760px);}
@media (max-width:760px){
  .trip-grid{grid-template-columns:1fr;gap:32px;}
  .map-panel{order:-1;position:static !important;}   /* en el celular el mapa va primero */
}

.entries{display:flex;flex-direction:column;}
.entry{padding:28px 0;border-top:1px solid var(--line);}
.entry:last-child{border-bottom:1px solid var(--line);}
.entry .date{font-size:12.5px;color:var(--brass-text);letter-spacing:.02em;margin:0 0 8px;}
.entry .caption{margin:0;font-size:16px;line-height:1.65;white-space:pre-line;}  /* respeta los saltos de línea que escribas */
.entry .ent-chip{margin-top:14px;}
.entries > p.hint{margin:6px 0 0;font-size:12.5px;color:var(--text-muted);font-style:italic;}
.entrada-unica .entry{border-top:none;padding-top:0;}
.entrada-unica .entry:last-child{border-bottom:none;}
.entrada-unica .caption{font-size:17px;}
.enlace-viaje{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-muted);}
.enlace-viaje a{color:var(--brass-text);text-decoration:underline dotted;text-decoration-color:var(--brass);text-underline-offset:5px;}

/* ---------- Fotos de una entrada ---------- */
.galeria{display:grid;gap:8px;margin-top:18px;}
.galeria .foto{
  display:block;padding:0;margin:0;cursor:zoom-in;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  transition:border-color .2s ease;
}
.galeria .foto:hover{border-color:var(--brass);}
.galeria img{display:block;width:100%;}
.galeria .foto.grande img{height:auto;max-height:620px;object-fit:contain;}   /* la foto grande se ve completa */
.galeria.g1{grid-template-columns:1fr;}
.galeria.g2{grid-template-columns:1fr 1fr;}
.galeria.g2 .foto{aspect-ratio:4/3;}
.galeria.g2 img{height:100%;object-fit:cover;}
.galeria.gn{grid-template-columns:repeat(3,1fr);}
.galeria.gn .foto.grande{grid-column:1 / -1;}
.galeria.gn .foto:not(.grande){aspect-ratio:1/1;}
.galeria.gn .foto:not(.grande) img{height:100%;object-fit:cover;}
@media (max-width:760px){
  .galeria.gn{grid-template-columns:repeat(2,1fr);}
  .galeria.g2{grid-template-columns:1fr;}
}

.entry-lugar{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;padding:0;
  background:none;border:none;cursor:pointer;
  font-size:12.5px;color:var(--text-muted);
}
.entry-lugar svg{width:14px;height:14px;color:var(--pin);}
.entry-lugar:hover{color:var(--brass-text);}

.video-slot{margin-top:12px;}
.video-slot iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:2px;background:#000;display:block;}

/* ---------- Panel del mapa ---------- */
.map-panel{
  position:sticky;top:112px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:20px 20px 22px;
}
.map-panel h3{font-family:var(--serif);font-weight:500;font-size:16px;margin:0 0 4px;}
.map-panel .sub{font-size:12.5px;color:var(--text-muted);margin:0 0 14px;}

#mapa{
  height:340px;width:100%;
  border:1px solid var(--line);border-radius:1px;
  background:var(--mapa-mar);
  overflow:hidden;
}
@media (max-width:760px){ #mapa{height:300px;} }
.map-error{margin:0;padding:24px;font-size:13.5px;color:var(--text);}

/* Mapa sencillo (contornos de países), en azul noche */
.leaflet-container{background:var(--mapa-mar);font-family:var(--sans);}
.pais{fill:var(--mapa-tierra);fill-opacity:1;stroke:var(--mapa-borde);stroke-width:.6px;stroke-opacity:1;}

/* Calles (solo con el sitio publicado): el mapa claro de OpenStreetMap se oscurece para que combine */
#mapa .leaflet-tile-pane{filter:invert(1) hue-rotate(195deg) brightness(.8) contrast(.9) saturate(.55);}
.leaflet-container a{color:var(--brass-text);}
.leaflet-control-attribution{font-size:10px !important;background:rgba(8,19,31,.78) !important;color:var(--text-muted) !important;}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--panel);color:var(--text);border-bottom-color:var(--line);}
.leaflet-bar a.leaflet-disabled{background:var(--card);color:var(--text-muted);}
.leaflet-bar{border:1px solid var(--line) !important;box-shadow:none !important;border-radius:2px !important;}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.leaflet-popup-tip{background:var(--panel);}
.leaflet-popup-close-button{color:var(--text-muted) !important;}
.leaflet-popup-content{margin:12px 16px;font-size:13.5px;line-height:1.45;}
.leaflet-popup-content strong{font-family:var(--serif);font-weight:500;font-size:15px;}
.popup-nota{color:var(--text-muted);font-size:12.5px;}

.pin-marker span{
  display:block;width:14px;height:14px;margin:4px;border-radius:50%;
  background:var(--pin);border:2px solid #F1E8D6;
  box-shadow:0 0 0 4px rgba(226,122,98,.35);
}

.map-legend{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.map-legend .pin-row{display:flex;align-items:center;gap:9px;font-size:13px;}
.map-legend .pin-row a{text-decoration:none;border-bottom:1px dotted var(--text-muted);}
.map-legend .pin-row a:hover{color:var(--brass-text);border-color:var(--brass);}
.pin-dot{width:9px;height:9px;border-radius:50%;background:var(--pin);flex:none;}

.map-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.map-note{font-size:12px;color:var(--text-muted);margin:10px 0 0;line-height:1.5;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;line-height:1;
  padding:10px 13px;border-radius:2px;
  border:1px solid var(--brass);color:var(--brass-text);background:transparent;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.btn svg{width:15px;height:15px;flex:none;}
.btn:hover{background:var(--brass);color:#1c1305;}

/* ---------- Volver ---------- */
.back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--text-muted);text-decoration:none;
  margin-bottom:28px;
}
.back:hover{color:var(--brass-text);}
.back svg{width:14px;height:14px;}

/* ---------- Galería de fotos a pantalla completa ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(4,9,16,.96);
  display:flex;align-items:center;justify-content:center;
  padding:56px 64px;
}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%;}
.lightbox img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;display:block;border-radius:1px;}
.lightbox figcaption{color:var(--text-muted);font-size:13px;min-height:1em;}
.lb-btn{
  position:absolute;background:none;border:none;color:#F1E8D6;cursor:pointer;
  font-size:40px;line-height:1;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.lb-btn:hover{color:var(--brass-text);}
.lb-close{top:10px;right:10px;font-size:36px;}
.lb-prev{left:6px;top:50%;transform:translateY(-50%);}
.lb-next{right:6px;top:50%;transform:translateY(-50%);}
@media (max-width:760px){
  .lightbox{padding:56px 8px;}
  .lb-prev,.lb-next{top:auto;bottom:8px;transform:none;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;scroll-behavior:auto !important;}
}