/*
 Theme Name:   Viajes Yanbal
 Theme URI:    https://yanbal.com
 Description:  Child theme de GeneratePress para la PWA Viajes Yanbal. Colores y tipografía de marca Yanbal. Totalmente personalizable desde Apariencia > Personalizar.
 Author:       Yanbal Digital
 Author URI:   https://yanbal.com
 Template:     generatepress
 Version:      4.4.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  viajes-yanbal
*/

/* ═══════════════════════════════════════
   CSS VARIABLES — Defaults from Yanbal Brand
   Todos sobreescribibles desde el Customizer
   ═══════════════════════════════════════ */
:root {
  /* Colores de marca Yanbal (Brandbook) */
  --vy-orange: #dc582a;          /* Naranja Yanbal PANTONE 7579 C */
  --vy-black: #1c1f28;           /* Negro Yanbal PANTONE 532 C */
  --vy-white: #ffffff;
  --vy-peach: #ffbe8e;           /* Soporte claro */
  --vy-coral: #ff8a62;           /* Soporte medio */

  /* Personalizables desde Customizer */
  --vy-bg: #f5f0eb;              /* Fondo app (beige/crema de la ref) */
  --vy-bg-card: #ffffff;         /* Fondo de cards */
  --vy-text: #1c1f28;            /* Texto principal */
  --vy-text-2: #5a5650;          /* Texto secundario */
  --vy-text-3: #8e8983;          /* Texto terciario/muted */
  --vy-accent: #dc582a;          /* Color de acento (badge, links) */
  --vy-header-bg: #1c1f28;       /* Fondo header */
  --vy-header-text: #ffffff;     /* Texto header */
  --vy-nav-bg: #ffffff;          /* Fondo bottom nav */
  --vy-nav-active: #dc582a;      /* Nav icon activo */
  --vy-nav-inactive: #8e8983;    /* Nav icon inactivo */
  --vy-nav-border: #e8e3de;      /* Borde top nav */

  /* Tipografía (Maison Neue no disponible en Google Fonts, usamos alternativa similar) */
  --vy-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vy-font-display: 'Playfair Display', Georgia, serif; /* Similar a Ogg */

  /* Layout */
  --vy-header-h: 56px;
  --vy-nav-h: 62px;
  --vy-r: 16px;
  --vy-r-sm: 10px;
}

/* ═══════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{margin-top:0!important;scroll-behavior:smooth}
body{
  font-family:var(--vy-font)!important;
  background:var(--vy-bg)!important;
  color:var(--vy-text);
  -webkit-font-smoothing:antialiased;
  margin:0;padding:0;
  padding-bottom:calc(var(--vy-nav-h) + env(safe-area-inset-bottom,0px) + 20px)!important;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
}

/* Ocultar GeneratePress chrome */
.site-header,.main-navigation,#site-navigation,.nav-below-header,
.nav-above-header,.navigation-search,.site-footer,#wpadminbar,
.entry-meta,.cat-links,.tags-links,.post-navigation,.comments-area{display:none!important}
.site-content,.inside-article,.entry-content{padding:0!important;margin:0!important}
a{text-decoration:none;color:inherit}
a:hover,a:focus{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--vy-accent);color:#fff}

/* ═══════════════════════════════════════
   HEADER 1 — Fijo, siempre visible
   ═══════════════════════════════════════ */
.vy-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  height:var(--vy-header-h);
  padding-top:env(safe-area-inset-top,0px);
  background:var(--vy-header-bg);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* Sin box-shadow para no oscurecer el header 2 debajo */
}
/* Overlay oscuro cuando hay imagen de fondo (para legibilidad) */
.vy-header__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.35);
  z-index:0;pointer-events:none;
}
.vy-header__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 16px;width:100%;
}
.vy-header__logo{max-height:70%;width:auto;object-fit:contain}
.vy-header__title{
  font-family:var(--vy-font-display);
  font-size:18px;font-weight:600;color:var(--vy-header-text);
  margin:0;line-height:1;letter-spacing:0.3px;
}

/* ═══════════════════════════════════════
   HEADER 2 — Desaparece al scroll
   ═══════════════════════════════════════ */
.vy-header2{
  position:fixed;left:0;right:0;z-index:998;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:transform 0.3s ease,opacity 0.3s ease;
}
.vy-header2--hidden{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
.vy-header2__text{
  position:relative;z-index:1;
  font-family:var(--vy-font-display);
  font-size:15px;font-weight:600;
  letter-spacing:0.3px;
}

/* Padding-top dinámico inyectado desde PHP según headers activos */
.vy-main{padding-top:56px} /* fallback, sobreescrito por PHP inline */

/* ═══════════════════════════════════════
   SECTION HEADING
   ═══════════════════════════════════════ */
.vy-sh{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px}
.vy-sh__title{font-family:var(--vy-font-display);font-size:22px;font-weight:700;color:var(--vy-text);margin:0}
.vy-sh__link{font-size:12px;font-weight:700;color:var(--vy-accent);text-transform:uppercase;letter-spacing:0.5px}

/* ═══════════════════════════════════════
   HORIZONTAL SCROLL (Touch swipe nativo)
   ═══════════════════════════════════════ */
.vy-hscroll{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;gap:14px;padding:0 16px 20px;
  scrollbar-width:none;
  /* Cursor grab para desktop */
  cursor:grab;
}
.vy-hscroll:active{cursor:grabbing}
.vy-hscroll::-webkit-scrollbar{display:none}

/* ═══════════════════════════════════════
   ITINERARY CARD — Full-bleed image
   Adaptado del HTML de referencia:
   Imagen cubre TODA la card, overlay degradé,
   badge naranja top-left, texto blanco abajo.
   ═══════════════════════════════════════ */
.vy-icard{
  flex:0 0 280px;height:340px;
  scroll-snap-align:start;
  border-radius:var(--vy-r);
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  overflow:hidden;
  color:#fff;
  position:relative;
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:box-shadow 0.3s ease,transform 0.3s ease;
}
.vy-icard:hover{box-shadow:0 8px 30px rgba(0,0,0,0.25);transform:translateY(-4px)}
.vy-icard:active{transform:scale(0.97)}

/* Imagen de fondo — ocupa TODA la tarjeta */
.vy-icard__img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
  transition:transform 0.5s ease;
}
.vy-icard:hover .vy-icard__img{transform:scale(1.06)}

/* Overlay degradé oscuro para legibilidad */
.vy-icard__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.50) 60%,
    rgba(0,0,0,0.82) 100%
  );
  pointer-events:none;
}

/* Badge naranja — esquina superior izquierda */
.vy-icard__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--vy-accent);color:#fff;
  border-radius:10px;
  padding:5px 11px;text-align:center;
  box-shadow:0 3px 8px rgba(242,122,26,0.4);
  display:flex;flex-direction:column;align-items:center;
  min-width:46px;
}
.vy-icard__badge-day{font-size:20px;font-weight:800;line-height:1}
.vy-icard__badge-month{font-size:11px;font-weight:600;text-transform:lowercase}

/* Contenido superpuesto (parte inferior) */
.vy-icard__body{
  position:relative;z-index:2;
  margin-top:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:4px;
}
.vy-icard__time{
  font-size:12px;font-weight:600;
  color:var(--vy-accent);
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.vy-icard__title{
  font-size:17px;font-weight:700;color:#fff;
  line-height:1.25;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  margin:0;
  font-family:var(--vy-font);
}
.vy-icard__subtitle{
  font-size:12px;color:rgba(255,255,255,0.85);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.vy-icard__loc{
  font-size:11px;color:rgba(255,255,255,0.7);
  display:flex;align-items:center;gap:5px;
  margin-top:4px;
}
.vy-icard__loc svg{width:12px;height:12px;flex-shrink:0;stroke:rgba(255,255,255,0.7);fill:none;stroke-width:2}

/* ═══════════════════════════════════════
   SECTION SEPARATOR
   ═══════════════════════════════════════ */
.vy-sect{padding:28px 0 8px}

/* ═══════════════════════════════════════
   INFO CARD (Información Importante) — en slider horizontal
   ═══════════════════════════════════════ */
.vy-infocard{
  flex:0 0 280px;scroll-snap-align:start;
  background:var(--vy-bg-card);border-radius:var(--vy-r);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  transition:transform 0.2s ease;
}
.vy-infocard:active{transform:scale(0.97)}
.vy-infocard__img{width:100%;height:160px;object-fit:cover}
.vy-infocard__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.vy-infocard__title{
  font-family:var(--vy-font-display);
  font-size:15px;font-weight:700;color:var(--vy-text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;
}
.vy-infocard__excerpt{
  font-size:13px;color:var(--vy-text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0;
}

/* ═══════════════════════════════════════
   FEATURED CARD (Guía de Looks / Hotel) — Full width
   ═══════════════════════════════════════ */
.vy-feat{padding:28px 0 8px}
.vy-fcard{
  display:block;margin:0 16px 16px;background:var(--vy-bg-card);
  border-radius:var(--vy-r);overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  transition:transform 0.2s ease;
}
.vy-fcard:active{transform:scale(0.98)}
.vy-fcard__img{width:100%;height:210px;object-fit:cover}
.vy-fcard__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.vy-fcard__date{font-size:12px;color:var(--vy-text-3);font-weight:500}
.vy-fcard__title{font-family:var(--vy-font-display);font-size:17px;font-weight:700;color:var(--vy-text);line-height:1.3;margin:0}
.vy-fcard__excerpt{
  font-size:13px;color:var(--vy-text-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0;
}

/* ═══════════════════════════════════════
   BOTTOM NAVIGATION
   ═══════════════════════════════════════ */
.vy-bnav{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  height:var(--vy-nav-h);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--vy-nav-bg);
  border-top:1px solid var(--vy-nav-border);
  display:flex;align-items:center;justify-content:space-around;
  box-shadow:0 -2px 12px rgba(0,0,0,0.04);
}
.vy-bnav__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 6px;min-width:52px;
  color:var(--vy-nav-inactive);transition:color 0.15s ease;
}
.vy-bnav__item:hover,.vy-bnav__item:focus{color:var(--vy-nav-active)}
.vy-bnav__item--active{color:var(--vy-nav-active)}
.vy-bnav__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.vy-bnav__icon svg{width:24px;height:24px;stroke-width:1.8}
.vy-bnav__icon img{width:24px;height:24px;object-fit:contain}
.vy-bnav__label{font-size:10px;font-weight:600;line-height:1;letter-spacing:0.1px}

/* Botón "Más" */
.vy-bnav__more-btn{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 6px;min-width:52px;
  color:var(--vy-nav-inactive);transition:color 0.15s ease;
  font-family:inherit;
}
.vy-bnav__more-btn:hover,.vy-bnav__more-btn:focus{color:var(--vy-nav-active);outline:none}

/* Drawer que aparece al tocar "Más" */
.vy-bnav__drawer{
  position:fixed;bottom:var(--vy-nav-h);left:0;right:0;z-index:998;
  background:var(--vy-nav-bg);
  border-top:1px solid var(--vy-nav-border);
  box-shadow:0 -4px 20px rgba(0,0,0,0.1);
  padding:12px 16px;
  display:none;flex-direction:column;gap:4px;
  border-radius:16px 16px 0 0;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}
.vy-bnav__drawer--open{display:flex}

.vy-bnav__drawer-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 8px;
  border-radius:10px;
  color:var(--vy-text);
  font-size:14px;font-weight:600;
  transition:background 0.15s ease;
}
.vy-bnav__drawer-item:hover{background:rgba(0,0,0,0.04)}
.vy-bnav__drawer-item .vy-bnav__icon{color:var(--vy-accent)}

/* ═══════════════════════════════════════
   BACK BUTTON — Volver a Home
   ═══════════════════════════════════════ */

/* Sobre la imagen hero — pill semitransparente con flecha + texto */
.vy-back{
  position:absolute;top:12px;left:12px;z-index:5;
  height:36px;border-radius:20px;
  padding:0 14px 0 8px;
  background:rgba(0,0,0,0.4);
  display:flex;align-items:center;gap:4px;
  transition:background 0.2s ease,transform 0.2s ease;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;font-size:13px;font-weight:600;
}
.vy-back svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;flex-shrink:0}
.vy-back:hover{background:rgba(0,0,0,0.6);transform:scale(1.04);color:#fff}
.vy-back:active{transform:scale(0.95)}

/* Versión inline — cuando no hay imagen hero */
.vy-back--inline{
  position:relative;top:auto;left:auto;
  background:rgba(0,0,0,0.05);
  color:var(--vy-text);
  flex-shrink:0;
}
.vy-back--inline svg{stroke:var(--vy-text)}
.vy-back--inline:hover{background:rgba(0,0,0,0.1);color:var(--vy-text)}

/* Barra con botón volver + título (para pages y archives sin hero) */
.vy-back-bar{
  display:flex;align-items:center;gap:10px;
  padding:16px 16px 12px;
}

/* ═══════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════ */
.vy-single-hero{position:relative}
.vy-single-hero__img{width:100%;height:260px;object-fit:cover}
.vy-single-hero__ov{
  position:absolute;bottom:0;left:0;right:0;
  padding:52px 16px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,0.75));
}
.vy-single-hero__t{font-family:var(--vy-font-display);font-size:24px;font-weight:700;color:#fff;line-height:1.2;margin:0}
.vy-single-meta{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,0.06)}
.vy-single-meta__badge{
  display:inline-block;background:var(--vy-accent);color:#fff;
  font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;
}
.vy-single-meta__date{font-size:13px;color:var(--vy-text-3)}
.vy-single-content{padding:20px 16px 32px;font-size:15px;line-height:1.75;color:var(--vy-text-2)}
.vy-single-content p{margin:0 0 16px}
.vy-single-content img{border-radius:var(--vy-r-sm);margin:16px 0}
.vy-single-content h2,.vy-single-content h3{font-family:var(--vy-font-display);color:var(--vy-text);margin:24px 0 8px}

/* ═══════════════════════════════════════
   ARCHIVE
   ═══════════════════════════════════════ */
.vy-archive-hdr{padding:24px 16px 16px}
.vy-archive-hdr__t{font-family:var(--vy-font-display);font-size:26px;font-weight:700;color:var(--vy-text);margin:0}
.vy-archive-hdr__c{font-size:13px;color:var(--vy-text-3);margin-top:4px}
.vy-archive-list{padding:8px 16px 16px;display:flex;flex-direction:column;gap:12px}
.vy-hcard{
  display:flex;background:var(--vy-bg-card);border-radius:var(--vy-r-sm);
  overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.05);transition:transform 0.2s ease;
}
.vy-hcard:active{transform:scale(0.98)}
.vy-hcard__img{width:110px;min-height:90px;object-fit:cover;flex-shrink:0}
.vy-hcard__body{padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;flex:1;min-width:0}
.vy-hcard__date{font-size:11px;color:var(--vy-text-3);font-weight:500}
.vy-hcard__title{
  font-family:var(--vy-font-display);
  font-size:14px;font-weight:700;color:var(--vy-text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(min-width:375px){
  .vy-icard{flex:0 0 290px;height:350px}
}
@media(min-width:480px){
  .vy-icard{flex:0 0 280px;height:340px}
}
@media(min-width:768px){
  .vy-icard{flex:0 0 300px;height:360px}
  .vy-infocard{flex:0 0 320px}
  .vy-fcard__img{height:260px}
}
@media(min-width:1024px){
  .vy-header,.vy-header2,.vy-bnav{max-width:430px;left:50%;transform:translateX(-50%);border-radius:0}
  .vy-header2--hidden{transform:translateX(-50%) translateY(-100%)}
  .vy-main,.site-content{max-width:430px;margin-left:auto!important;margin-right:auto!important}
  body{background:#e8e3de!important}
}

/* Pagination */
.nav-links{display:flex;justify-content:center;gap:8px;padding:16px}
.nav-links a,.nav-links span{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--vy-r-sm);font-size:14px;
  font-weight:600;color:var(--vy-text);background:var(--vy-bg-card);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.nav-links .current{background:var(--vy-accent);color:#fff}

.vy-empty{text-align:center;padding:48px 16px;color:var(--vy-text-3);font-size:14px}

/* ═══════════════════════════════════════
   ITINERARY ARCHIVE — Agrupado por día
   ═══════════════════════════════════════ */
.vy-day-group{padding:0 16px;margin-bottom:8px}
.vy-day-header{
  display:flex;align-items:center;gap:12px;
  padding:20px 0 12px;
}
.vy-day-badge{
  width:56px;height:56px;border-radius:50%;
  background:var(--vy-accent);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.vy-day-badge__day{font-size:22px;font-weight:800}
.vy-day-badge__month{font-size:10px;font-weight:700;text-transform:uppercase;margin-top:1px}
.vy-day-label{
  font-family:var(--vy-font-display);
  font-size:18px;font-weight:700;color:var(--vy-text);
}
.vy-day-label span{display:block;font-size:13px;font-weight:400;color:var(--vy-text-3);margin-top:2px}

/* Evento individual en la lista agrupada */
.vy-event{
  display:flex;background:var(--vy-bg-card);border-radius:var(--vy-r-sm);
  overflow:hidden;margin-bottom:10px;
  box-shadow:0 1px 6px rgba(0,0,0,0.05);
  transition:transform 0.2s ease;
  position:relative;
}
.vy-event:active{transform:scale(0.98)}

/* Barra lateral de hora */
.vy-event__time-bar{
  width:70px;flex-shrink:0;
  background:var(--vy-accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;padding:8px 4px;
  text-align:center;gap:2px;
}
.vy-event__time-start{font-size:14px;font-weight:700}
.vy-event__time-end{font-size:11px;font-weight:400;opacity:0.8}
.vy-event__time-sep{font-size:9px;opacity:0.6}

.vy-event__body{
  padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  flex:1;min-width:0;
}
.vy-event__title{
  font-family:var(--vy-font-display);
  font-size:15px;font-weight:700;color:var(--vy-text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;
}
.vy-event__loc{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--vy-text-3);margin-top:2px;
}
.vy-event__loc svg{width:12px;height:12px;color:var(--vy-accent);flex-shrink:0}

/* Timeline line between events */
.vy-day-group .vy-event:not(:last-child)::before{
  content:'';position:absolute;left:35px;bottom:-10px;
  width:2px;height:10px;background:var(--vy-accent);opacity:0.3;
}