/* ============================================================
   LA BOLSITA — Design tokens extraidos de "La Bolsita Web 2.psd"
   Canvas original 2880x5020 · escala de trabajo 1:2 (1440px)
   ============================================================ */
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_reg.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_med.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_reg_it.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_med_it.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_bld.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_blk.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Brandon';src:url('../fonts/Brandon_blk_it.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/GothamHTF-Book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/GothamHTF-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/GothamHTF-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gotham Condensed';src:url('../fonts/GothamHTF-BoldCondensed.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* Paleta */
  --lb-navy:#0F1340;          /* barra superior / footer / plates */
  --lb-navy-card:#111860;     /* tarjeta hero */
  --lb-blue-deep:#1E2677;     /* titulares */
  --lb-blue:#28339F;          /* titulares alternos / links */
  --lb-blue-bright:#3645D8;   /* acentos, precio */
  --lb-blue-soft:#5866E0;
  --lb-yellow:#FFF200;        /* barra header / boton primario */
  --lb-yellow-soft:#FFE044;   /* texto destacado sobre azul */
  --lb-yellow-wa:#FFF34A;     /* botón WhatsApp (texto e icono) */
  --lb-navy-ink:#0F133C;      /* texto sobre la franja amarilla */
  --lb-cream:#FFFBE7;         /* campos de formulario */
  --lb-grey-panel:#EDEDF0;    /* panel "Nuestros productos" */
  --lb-grey-page:#E4E4E8;
  --lb-grey-side:#F2F2F4;     /* sidebar tienda */
  --lb-white:#FFFFFF;
  --lb-ink:#464646;
  --lb-muted:#959595;

  /* Tipografia */
  --lb-font:'Brandon','Gotham','Trebuchet MS',system-ui,sans-serif;
  --lb-font-cond:'Gotham Condensed','Arial Narrow','Roboto Condensed',var(--lb-font); /* nombres de categoría y títulos de grupo */

  /* Metricas */
  --lb-container:1220px;
  --lb-radius-lg:26px;
  --lb-radius-md:14px;
  --lb-radius-sm:8px;
  --lb-header-h:81px;
  --lb-shadow:0 10px 30px rgba(15,19,64,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--lb-font);color:var(--lb-ink);
  background:var(--lb-grey-page) url('../img/bg-texture.jpg') center/cover no-repeat fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.lb-container{width:min(100% - 48px,var(--lb-container));margin-inline:auto}

/* ---------- Header ---------- */
.lb-header{position:relative;height:var(--lb-header-h);display:flex;background:var(--lb-yellow)}
.lb-header__brand{
  background:var(--lb-navy);flex:0 0 49.5%;display:flex;align-items:center;gap:34px;
  padding-left:max(24px,calc((100vw - var(--lb-container))/2 - 14px));
}
.lb-header__logo{width:203px;height:auto}
.lb-header__nav{display:flex;align-items:center;gap:22px;margin-left:auto;padding-right:60px}
.lb-header__nav a{color:#fff;font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.lb-header__nav a:hover{color:var(--lb-yellow)}
.lb-cart{width:26px;filter:brightness(0) invert(1)}
.lb-header__contact{
  flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding-right:max(24px,calc((100vw - var(--lb-container))/2 - 14px));
}
.lb-header__contact p{margin:0 4px 0 0;color:var(--lb-navy-ink);font-weight:500;font-style:italic;font-size:19px;letter-spacing:.01em;text-transform:uppercase}
.lb-wa{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 15px 0 16px;border-radius:8.5px;
  background:var(--lb-navy);color:var(--lb-yellow-wa);font-family:'Gotham',var(--lb-font);font-weight:700;font-size:22px;
  line-height:1;letter-spacing:0;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.28);transition:filter .15s ease}
.lb-wa:hover{filter:brightness(1.25)}
.lb-wa img{width:27px;height:27px}
.lb-social{display:block;width:42px;height:42px;border-radius:8px}

/* ---------- Hero (pixel perfect al PSD) ----------
   Las medidas son las del PSD a escala 1:2 (tarjeta de 1217 px de ancho). --u vale 1px cuando
   el hero mide 1217 px y escala proporcionalmente en pantallas más angostas (unidades de contenedor). */
.lb-front{background:var(--lb-grey-page) url('../img/hero-page-bg.jpg') center top/max(100%,1440px) auto no-repeat}
.lb-hero{padding-top:61.5px}
.lb-hero__wrap{width:min(100% - 48px,1217px);margin-inline:auto;container-type:inline-size}
.lb-hero__stage{--u:calc(100cqw / 1217);position:relative;height:calc(625.5 * var(--u))}
.lb-hero__stage > *{position:absolute;margin:0}
.lb-hero__card{left:0;top:0;width:100%;height:calc(512 * var(--u));border-radius:calc(18.5 * var(--u));
  background:#111962 url('../img/hero-card-bg.jpg') center/cover no-repeat}
.lb-hero__title{left:calc(131 * var(--u));top:calc(32.5 * var(--u));width:calc(646 * var(--u));line-height:0}
.lb-hero__logo{width:100%;height:auto;filter:drop-shadow(0 calc(13 * var(--u)) calc(8 * var(--u)) rgba(17,20,52,.74))}
.lb-hero__copy{left:calc(281.5 * var(--u));top:calc(168.5 * var(--u));width:calc(384 * var(--u));color:#fff;
  font-weight:900;font-size:calc(16 * var(--u));line-height:calc(19.8 * var(--u));letter-spacing:0;text-transform:uppercase}
.lb-hero__copy em{color:#FFFF00;font-style:italic}
.lb-hero__btn{left:calc(280 * var(--u));top:calc(280.5 * var(--u));width:calc(258 * var(--u));height:calc(39 * var(--u));
  border-radius:calc(11 * var(--u));background:#FFF200;color:#3645D8;font-weight:900;font-size:calc(26.5 * var(--u));
  line-height:calc(40 * var(--u));text-align:center;letter-spacing:calc(.4 * var(--u));text-transform:uppercase;transition:filter .15s ease}
.lb-hero__btn:hover{filter:brightness(1.06)}
.lb-hero__art{left:calc(661.5 * var(--u));top:calc(72 * var(--u));width:calc(387 * var(--u));height:auto}
.lb-hero__eco{left:calc(281.5 * var(--u));top:calc(348.5 * var(--u));width:calc(658.5 * var(--u));height:calc(45 * var(--u));
  display:flex;align-items:center;justify-content:center;padding:0 calc(18 * var(--u));border-radius:calc(11 * var(--u));
  background:#2533A5;color:#00A650;font-style:italic;font-weight:400;font-size:calc(12.9 * var(--u));
  line-height:calc(12.5 * var(--u));letter-spacing:calc(.2 * var(--u));text-align:center;text-transform:uppercase}
.lb-hero__label{left:calc(4 * var(--u));top:calc(421.5 * var(--u));width:100%;color:#fff;font-weight:900;
  font-size:calc(21.1 * var(--u));line-height:1;letter-spacing:calc(.4 * var(--u));text-align:center;text-transform:uppercase}

/* Sucursales: montan sobre el borde inferior de la tarjeta */
.lb-branches{left:calc(142.5 * var(--u));top:calc(458.5 * var(--u));width:calc(936.5 * var(--u));height:calc(167 * var(--u));
  display:grid;grid-template-columns:repeat(3,1fr);gap:calc(32.5 * var(--u))}
.lb-branch{border-radius:calc(14.5 * var(--u));overflow:hidden;background:#2533A5}
.lb-branch img{display:block;width:100%;height:calc(121.5 * var(--u));object-fit:cover}
.lb-branch__plate{padding:calc(6.5 * var(--u)) calc(14.5 * var(--u)) 0;color:#fff;text-transform:uppercase;font-weight:900}
.lb-branch__plate span{display:block;font-size:calc(12.8 * var(--u));line-height:calc(15.3 * var(--u))}
.lb-branch__plate strong{display:block;color:#FFF34A;font-weight:900;font-size:calc(16.3 * var(--u));line-height:calc(16 * var(--u));letter-spacing:calc(.3 * var(--u))}

.lb-btn{display:inline-block;background:var(--lb-yellow);color:var(--lb-navy);font-weight:900;
  font-size:16px;letter-spacing:.08em;text-transform:uppercase;padding:13px 34px;border-radius:var(--lb-radius-sm);
  transition:transform .15s ease,box-shadow .15s ease}
.lb-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,242,0,.28)}

/* ---------- Nuestros productos ---------- */
.lb-section{padding:64px 0}
.lb-h2{margin:0 0 34px;text-align:center;color:var(--lb-blue);font-weight:900;font-size:34px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
.lb-panel{background:var(--lb-grey-panel);border-radius:var(--lb-radius-lg);padding:44px 40px}
.lb-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.lb-cat{position:relative;background:#fff;border-radius:var(--lb-radius-md);height:123px;overflow:hidden;
  display:flex;align-items:center;box-shadow:0 4px 14px rgba(15,19,64,.07);
  transition:transform .18s ease,box-shadow .18s ease}
.lb-cat:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(15,19,64,.16)}
/* Foto de fondo en la mitad izquierda, recortada por la tarjeta y desvanecida hacia el texto (como el PSD) */
.lb-cat__img{position:absolute;left:0;top:0;width:44%;height:100%;object-fit:cover;object-position:center;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.lb-cat__name{position:relative;margin-left:calc(44% + 2px);padding-right:12px;color:var(--lb-blue);
  font-family:var(--lb-font-cond);font-weight:700;font-size:22px;line-height:1;letter-spacing:0;text-transform:uppercase}
.lb-cat.is-active::after{content:'';position:absolute;inset:0;border:3px solid var(--lb-yellow);border-radius:inherit;pointer-events:none}
.lb-cat--cta{background:var(--lb-blue-soft);justify-content:center}
.lb-cat--cta .lb-cat__name{margin:0;padding:0;color:var(--lb-yellow);font-family:var(--lb-font);font-weight:900;font-style:italic;font-size:20px;letter-spacing:.06em}

/* ---------- Mapas + direcciones ---------- */
.lb-section--light{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.9));padding:70px 0 90px}
.lb-maps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.lb-map{background:var(--lb-navy);border-radius:var(--lb-radius-md);overflow:hidden;box-shadow:var(--lb-shadow)}
.lb-map img{width:100%;height:166px;object-fit:cover}
.lb-map__body{padding:18px 22px 24px;color:#fff}
.lb-map__body h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--lb-yellow-soft);text-transform:uppercase}
.lb-map__body address{font-style:normal;font-weight:900;font-size:14px;line-height:1.35;letter-spacing:.02em;text-transform:uppercase}
.lb-map__body dl{margin:16px 0 0;font-size:13px;line-height:1.5}
.lb-map__body dt{font-weight:700;letter-spacing:.1em;color:var(--lb-yellow-soft);text-transform:uppercase;margin-top:10px}
.lb-map__body dd{margin:0;font-weight:500;color:#dfe4ff;word-break:break-word}

/* ---------- Formulario de contacto ---------- */
.lb-form{background:#fff;border-radius:var(--lb-radius-lg);padding:40px 44px 44px;margin-top:44px;box-shadow:var(--lb-shadow)}
.lb-form h2{margin:0 0 28px;color:var(--lb-blue-deep);font-weight:900;font-size:30px;letter-spacing:.22em;text-transform:uppercase}
.lb-form__grid{display:grid;grid-template-columns:1fr 1.35fr;gap:22px 36px;align-items:start}
.lb-field label{display:block;margin-bottom:8px;color:var(--lb-blue-deep);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.lb-field input,.lb-field textarea{
  width:100%;background:var(--lb-cream);border:1px solid #F3EBC8;border-radius:var(--lb-radius-sm);
  padding:16px 18px;font-family:inherit;font-size:16px;font-weight:500;color:var(--lb-blue-deep)}
.lb-field input::placeholder,.lb-field textarea::placeholder{color:#C9BE8E;letter-spacing:.06em}
.lb-field input:focus,.lb-field textarea:focus{outline:2px solid var(--lb-blue-bright);outline-offset:1px}
.lb-field--msg{grid-column:2;grid-row:1/4;display:flex;flex-direction:column}
.lb-field--msg textarea{flex:1;min-height:214px;resize:vertical}
.lb-form__actions{grid-column:2;justify-self:end}

/* ---------- Footer ---------- */
.lb-footer{background:var(--lb-navy);padding:26px 0;text-align:center}
.lb-footer p{margin:0;color:#8f97d6;font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase}

/* ---------- Tienda (archivo de producto) ---------- */
.lb-shop{display:grid;grid-template-columns:340px 1fr;min-height:70vh}
.lb-shop__aside{background:var(--lb-grey-side);padding:34px 26px 60px}
.lb-shop__aside h2{margin:0 0 22px;padding-left:44px;color:var(--lb-blue);font-weight:900;font-size:21px;letter-spacing:.1em;text-transform:uppercase}
.lb-catlist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lb-catlist .lb-cat{height:112px}
/* En la barra lateral la foto ocupa más de la mitad y lleva un ligero zoom, para que se lea como fondo */
.lb-catlist .lb-cat__img{width:56%;transform:scale(1.18);transform-origin:40% 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.lb-catlist .lb-cat__name{margin-left:calc(50% + 2px);font-size:26px;line-height:.98}
.lb-shop__main{background:#fff;padding:34px 46px 70px}
.lb-crumb{margin:0 0 26px;color:var(--lb-muted);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.lb-group{margin-bottom:44px}
.lb-group__title{margin:0 0 4px;color:var(--lb-blue);font-family:var(--lb-font-cond);font-weight:700;font-size:42px;line-height:1.05;letter-spacing:0;text-transform:uppercase}
.lb-group__kicker{margin:0 0 12px;color:var(--lb-blue-bright);font-weight:500;font-size:15px;letter-spacing:.04em}
.lb-group__body{margin-top:22px}
.lb-group__body{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start}
.lb-group__body img{width:100%;object-fit:contain}
.lb-plist{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lb-plist a{color:var(--lb-blue);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase;
  border-bottom:1px solid transparent}
.lb-plist a:hover{color:var(--lb-blue-bright);border-bottom-color:currentColor}

/* ---------- WordPress: menú, carrito, logo ---------- */
.lb-header__home{display:block;line-height:0}
.lb-header__brand .custom-logo-link{display:block;line-height:0}
.lb-header__brand .custom-logo{width:203px;height:auto}
.lb-menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.lb-menu .current-menu-item > a,.lb-menu .current_page_item > a{color:var(--lb-yellow)}
.lb-cartlink{position:relative;display:inline-flex;align-items:center}
.lb-cart-count{position:absolute;top:-8px;right:-12px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--lb-yellow);color:var(--lb-navy);font-size:12px;font-weight:900;line-height:20px;text-align:center}
.lb-cart-count.is-empty{display:none}
.lb-group__title a{color:inherit}
.lb-group__title a:hover{color:var(--lb-blue-bright)}
.lb-group__body--noimg{grid-template-columns:1fr}
.lb-map > a{display:block;line-height:0}
.lb-map__body a{color:inherit}
.lb-map__body a:hover{color:var(--lb-yellow-soft)}
.lb-btn--ghost{background:transparent;color:var(--lb-blue-deep);box-shadow:inset 0 0 0 2px var(--lb-blue-deep)}
.lb-btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--lb-blue-bright)}
.lb-empty{margin:0;padding:18px 22px;background:var(--lb-grey-side);border-radius:var(--lb-radius-sm);
  color:var(--lb-ink);font-weight:500;font-size:15px}
.lb-empty a{color:var(--lb-blue-bright);font-weight:900;text-decoration:underline}

/* ---------- Avisos del formulario ---------- */
.lb-notice{margin:0 0 22px;padding:14px 18px;border-radius:var(--lb-radius-sm);font-weight:700;font-size:15px}
.lb-notice--success{background:#E8F7EC;color:#1B6B34}
.lb-notice--error{background:#FDECEC;color:#9B1C1C}
.lb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lb-form{position:relative}

/* ---------- Páginas genéricas ---------- */
.lb-page{padding-block:56px 80px}
.lb-page__card{background:#fff;border-radius:var(--lb-radius-lg);padding:44px 48px;box-shadow:var(--lb-shadow)}
.lb-page__title{margin:0 0 28px;color:var(--lb-blue);font-weight:900;font-size:34px;letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.lb-page__content{font-size:17px;line-height:1.6;color:var(--lb-ink)}
.lb-page__content a{color:var(--lb-blue-bright)}
.lb-postlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lb-postlist a{color:var(--lb-blue);font-weight:900;font-size:18px;text-transform:uppercase}
.lb-postlist time{display:block;color:var(--lb-muted);font-size:13px}
.lb-404__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ---------- Accesibilidad ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute !important;word-wrap:normal !important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;z-index:100;top:8px;left:8px;
  background:var(--lb-yellow);color:var(--lb-navy);padding:12px 18px;border-radius:var(--lb-radius-sm);font-weight:900}
:focus-visible{outline:3px solid var(--lb-blue-bright);outline-offset:2px}
.lb-header :focus-visible{outline-color:var(--lb-yellow)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .lb-cats{grid-template-columns:repeat(2,1fr)}
  .lb-shop{grid-template-columns:1fr}
}
@media (max-width:860px){
  .lb-header{height:auto;flex-direction:column}
  .lb-header__brand{flex:none;width:100%;padding:14px 24px;justify-content:space-between}
  .lb-header__nav{padding-right:10px}
  .lb-header__contact{padding:12px 24px;justify-content:center;flex-wrap:wrap}
  .lb-header__contact p{font-size:16px}
  .lb-wa{font-size:19px;height:38px}
  .lb-social{width:38px;height:38px}
  /* Hero apilado: mismo contenido y colores, en flujo normal */
  .lb-hero{padding-top:24px}
  .lb-hero__stage{--u:1px;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    padding:28px 22px 24px;border-radius:18px;background:#111962 url('../img/hero-card-bg.jpg') center/cover no-repeat}
  .lb-hero__stage > *{position:static}
  .lb-hero__card{display:none}
  .lb-hero__title{width:min(100%,420px)}
  .lb-hero__copy{width:auto;font-size:15px;line-height:1.3}
  .lb-hero__copy br{display:none}
  .lb-hero__btn{width:auto;height:44px;padding:0 28px;font-size:20px;line-height:46px}
  .lb-hero__art{width:min(100%,380px);align-self:center}
  .lb-hero__eco{width:100%;height:auto;padding:12px 16px;font-size:12px;line-height:1.35}
  .lb-hero__label{width:100%;font-size:17px}
  .lb-branches{width:100%;height:auto;grid-template-columns:1fr;gap:16px}
  .lb-branch img{height:150px}
  .lb-branch__plate{padding:8px 14.5px 12px}
  .lb-maps{grid-template-columns:1fr}
  .lb-form{padding:30px 22px}
  .lb-form h2{font-size:24px;letter-spacing:.14em}
  .lb-form__grid{grid-template-columns:1fr}
  .lb-field--msg{grid-column:1;grid-row:auto}
  .lb-form__actions{grid-column:1;justify-self:stretch}
  .lb-form__actions .lb-btn{width:100%}
  .lb-group__body{grid-template-columns:1fr}
  .lb-group__body img{max-width:260px}
  .lb-h2,.lb-page__title{font-size:26px}
  .lb-group__title{font-size:32px}
  .lb-page__card{padding:30px 22px}
}
@media (max-width:560px){
  .lb-cats{grid-template-columns:1fr}
  .lb-shop__main{padding:24px 20px 50px}
  .lb-header__contact p{flex-basis:100%;text-align:center}
}