/* ===========================================================
   Cacharrería La 11 — estilos de la página de inicio (mockup)
   Extiende base.css. Solo consume tokens de tokens.css.
   =========================================================== */

/* ===== Barra de logo (azul marca) con lockup + buscador ===== */
.brandbar{background:var(--color-primary)}
.brandbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:16px 0}
.lockup{display:inline-flex;align-items:center;gap:12px}
.lockup__iso{height:46px;width:auto}
.lockup__img{height:52px;width:auto;display:block}
.lockup__word{font-family:var(--font-display);font-weight:var(--fw-bold);color:#fff;font-size:30px;line-height:1;letter-spacing:.5px}
.lockup__word small{display:block;white-space:nowrap;font-family:var(--font-detail);font-weight:var(--fw-medium);font-size:11px;letter-spacing:2px;color:var(--color-accent);text-transform:uppercase;margin-top:3px}

.search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius-pill);padding:11px 18px;width:min(380px,42vw)}
.search svg{width:18px;height:18px;fill:var(--color-text-muted);flex:none}
.search input{border:0;outline:0;flex:1;font-family:var(--font-detail);font-size:var(--text-md);color:var(--color-text);background:none}
.search input::placeholder{color:#9aa1bb}

/* nav centrado para esta página */
.nav--home .nav__inner{justify-content:center;position:relative}
.nav--home .nav__menu{gap:var(--space-3)}

/* ===== Hero banner único (verano) ===== */
.hero-single{padding:var(--space-8) 0}
.banner-slot{
  display:block;width:100%;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(120deg,#7ad0e6,#bfe3f0 38%,#f7d9c4 62%,#f6b6c8);
  border:0;box-shadow:var(--shadow-card);
}
.banner-slot--hero{aspect-ratio:1536/577}
.hero-slider{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.hero-slider .slide img{width:100%;aspect-ratio:1536/577;object-fit:cover;display:block}
.banner-slot--promo{aspect-ratio:2281/711;background:linear-gradient(120deg,#f6a96b,#f48a8a 55%,#ef6fa2)}
.banner-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Título tipo píldora ===== */
.pill-title{display:block;width:max-content;max-width:90%;margin:0 auto;background:var(--color-accent);color:var(--color-primary);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-2xl);line-height:1;padding:12px 38px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:1px;text-align:center;box-shadow:var(--shadow-card)}

/* ===== Carrusel de marcas con flechas ===== */
.brand-carousel{display:flex;align-items:center;gap:var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border-soft);padding:22px 0}
.brand-carousel__arrow{flex:none;width:42px;height:42px;border-radius:var(--radius-full);border:1.5px solid var(--color-border);background:#fff;color:var(--color-secondary);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.brand-carousel__arrow:hover{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}
.brand-carousel__viewport{overflow:hidden;flex:1}
.brand-carousel__track{display:flex;align-items:center;gap:var(--space-12);transition:transform var(--transition-base) ease;width:max-content}
.brand-carousel__track img{height:50px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter var(--transition-base),opacity var(--transition-base)}
.brand-carousel__track img:hover{filter:none;opacity:1}

/* ===== Cards editoriales "Lo más vendido" ===== */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-10)}
.feature{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);padding:var(--space-5);min-height:320px;box-shadow:var(--shadow-card);transition:transform var(--transition-base),box-shadow var(--transition-base);overflow:hidden}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.feature__img{height:130px;object-fit:contain;align-self:center;mix-blend-mode:multiply}
.feature__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-lg);color:var(--color-primary);line-height:var(--leading-snug);margin-top:var(--space-4)}
.feature__text{font-family:var(--font-detail);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:6px;flex:1}
.feature__btn{align-self:flex-start;white-space:nowrap;margin-top:var(--space-4);background:var(--color-accent);color:var(--color-primary);font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--text-sm);padding:9px 20px;border-radius:var(--radius-pill);transition:filter var(--transition-fast)}
.feature__btn:hover{filter:brightness(.95)}
.feature--beige{background:#F3E7DB}
.feature--white{background:#fff;border:1px solid var(--color-border-soft)}
.feature--pink{background:#FBE1EA}
.feature--navy{background:var(--color-primary)}
.feature--navy .feature__img{mix-blend-mode:normal}
.feature--navy .feature__title{color:#fff}
.feature--navy .feature__text{color:#cdd6ec}
.feature--navy .feature__btn{background:var(--color-accent);color:var(--color-primary)}

/* ===== Mosaico tipo Instagram ===== */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.ig-handle{text-align:center;margin:var(--space-4) 0 0;font-family:var(--font-detail);font-weight:var(--fw-semibold);font-size:var(--text-lg)}
.ig-handle a{color:var(--color-campaign);transition:color var(--transition-fast)}
.ig-handle a:hover{color:var(--color-primary)}
.ig-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6);align-items:start}
.ig-feed .instagram-media{min-width:0 !important;width:100% !important;margin:0 !important}
@media (max-width:900px){.ig-feed{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ig-feed{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}}
.tile{position:relative;aspect-ratio:1/1.02;border-radius:var(--radius-md);overflow:hidden;background:#e4e9f4}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--transition-base)}
.tile:hover img{transform:scale(1.05)}
.tile__label{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 13px;background:linear-gradient(to top,rgba(1,47,114,.78),transparent);color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-lg);letter-spacing:.5px;pointer-events:none}
.tile__label span{display:block;font-family:var(--font-detail);font-weight:var(--fw-medium);font-size:var(--text-xs);letter-spacing:.3px;opacity:.9;margin-top:2px}

/* ===== Cards de producto "Lo más recomendado" ===== */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-10)}
.product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.product__media{height:180px;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#fff}
.product__media img{max-height:100%;width:auto;object-fit:contain}
.product__body{padding:0 var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:5px;flex:1}
.product__title{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-base);color:var(--color-primary);text-transform:uppercase;letter-spacing:.3px;line-height:var(--leading-snug)}
.product__desc{font-family:var(--font-detail);font-size:var(--text-sm);color:var(--color-text-muted);flex:1}
.product__price{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-lg);padding:13px;letter-spacing:.5px}

/* ===== Ritmo de fondos: solo blanco y #dadfed alternados ===== */
body{background:#fff}
.tinted{background:#dadfed}
.pill-tag{white-space:nowrap}

/* ===== Banda eslogan (amarilla, script) ===== */
.slogan{position:relative;background:#F6B62D;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:clamp(190px,18.75vw,300px);padding:32px var(--space-6)}
/* Fuente de marca para el eslogan. Si subes el archivo real (Authentic Signature)
   a tienda/assets/fonts/, calza exacto; si no, cae al brush de respaldo. */
@font-face{
  font-family:'Authentic Signature';
  src:url('../assets/fonts/authentic-signature.woff2') format('woff2'),
      url('../assets/fonts/authentic-signature.otf') format('opentype');
  font-weight:400 700;font-display:swap;
}

.slogan__text{position:relative;z-index:1;font-family:'Authentic Signature','Kaushan Script','Dancing Script',cursive;font-weight:400;font-size:clamp(30px,4.3vw,56px);color:#012F72;line-height:1.18;white-space:nowrap;text-align:center}
.slogan__wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:clamp(170px,18vw,280px);width:auto;opacity:.3;pointer-events:none}
@media (max-width:680px){.slogan__text{white-space:normal;font-size:clamp(26px,7vw,40px)}.slogan__wm{opacity:.26}}

/* ===== Footer: logos sobre azul ===== */
.site-footer__logos{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:var(--space-4)}
.site-footer__logos img{height:60px;width:auto}
.site-footer__bottom{background:var(--color-accent);color:var(--color-primary);font-weight:var(--fw-semibold)}

/* ===========================================================
   Responsive (extiende el de base.css)
   =========================================================== */
@media (max-width:980px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .brandbar__inner{flex-direction:column;gap:var(--space-4)}
  .search{width:100%}
  .nav--home .nav__inner{justify-content:space-between}
}
@media (max-width:560px){
  .feature-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr}
  .brand-carousel__track{gap:var(--space-8)}
}