@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital@0;1&display=swap');

  :root{
    --navy:#0F1F3D;
    --navy-2:#16294F;
    --paper:#F4F0E6;
    --amber:#E8A33D;
    --amber-dark:#C97F1E;
    --ink:#0F1F3D;
    --muted:#6B7280;
    --mint:#E7F2EE;
    --lilac:#EFE6F7;
    --line:#DDD6C4;
    --wame:#128c7e;
  }
  *{ box-sizing:border-box; }
  body{ margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); font-size:14px; }
  
h1{ font-size:42px; line-height:1.15; }
h2{ font-size:50px; line-height:50px; font-weight:normal; margin-bottom:25px; }
h3{ font-size:24px; line-height:1.25; }
h4{ font-size:18px; line-height:1.3; }
h5{ font-size:15px; line-height:1.3; }
h6{ font-size:13px; line-height:1.3; }
p{ font-size:15px; }

button, input, select{ font:inherit; }
  img{ display:block; max-width:100%; }
  .ph-wrap{ position:relative; }
  .ph-wrap img{ width:100%; height:100%; object-fit:cover; }
  a{ text-decoration:none; color:inherit; }
  .ph{ background:#E4DECB; display:flex; align-items:center; justify-content:center;
       color:#A79E86; font-family:'Barlow Condensed'; letter-spacing:1px;
       text-transform:uppercase; width:100%; height:100%; }




       

  /* ============ HERO ============ */
  .hero{ position:relative; min-height:59em; overflow:hidden; }
  .hero-bg{ position:absolute; inset:0; }
  .hero-bg video{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .hero-bg .ph{ height:100%; }
  .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,31,61,0.35), rgba(15,31,61,0.15)); }

  /* ============ HEADER (independiente, reutilizable con include) ============ */
  .site-header{ position:absolute; top:0; left:0; right:0; z-index:5; padding:26px 0 0; }


  .hero-nav{
  width:90%; max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
 
/* La regla vieja tenía justify-self:center para el grid — ya no aplica en flex */
.hero-logo{ justify-self:unset; }
 
@media (max-width:820px){
  .hero-nav-side.right a{ display:none; }
  .hero-nav-toggle{ display:flex; }
}
 






.bannerpostheaderhome{
background: black; text-align: center;
}

.bannerpostheaderhome img{
  margin: auto;
  width:100%;
  max-width: 1200px;
}

  .bannerpostheader{
    padding: 2em;
    text-align: center;
    background: black;
    background-image: url(../img/topproducts.jpg);
    background-repeat:  no-repeat; background-size: contain; background-position: center; color: white;
  }

   .bannerpostheader h1{
color: gold;
  }


  .hero-nav-side{ display:flex; align-items:center; gap:28px; }
  .hero-nav-side.left{ justify-content:flex-start; }
  .hero-nav-side.right{ justify-content:flex-end; }
  .hero-nav-side a{
    color:white; font-weight:600;
    text-transform:uppercase; letter-spacing:0.6px;
  }
  .hero-nav-side a:hover{ color:var(--amber); }

  .hero-logo{
    padding:8px 18px; display:flex; align-items:center; gap:8px;
    justify-self:center; white-space:nowrap; max-width: 300px;
  }
  .hero-logo .flag{ width:18px; height:12px; border-radius:2px;
    background: repeating-linear-gradient(180deg,#B22234 0 2px,#fff 2px 4px); }


/* ============ Nav: ícono + texto alineados en fila, centrados ============ */

.hero-nav-side.right a{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hero-nav-side.right a img{
  width:30px;
  display:block;
  flex-shrink:0;
}

/* Mismo tratamiento en el menú móvil, con ícono un poco más grande
   porque ahí el texto también es más grande */
.mobile-menu a{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.mobile-menu a img{
  width:22px;
  height:22px;
  display:block;
  flex-shrink:0;
}


.logos-track img{
  width:140px;
}
  .hero-nav-toggle{
    display:none; background:rgba(255,255,255,0.14); border:none; width:38px; height:38px;
    border-radius:6px; align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px;
  }
  .hero-nav-toggle span{ display:block; width:18px; height:2px; background:white; border-radius:2px; }

  /* ============ MENU MÓVIL (lightbox) ============ */
  .mobile-menu{
    position:fixed; inset:0; z-index:50; background:var(--navy);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .3s ease, opacity .25s ease;
  }
  .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-menu a{
    color:white; font-family:'Playfair Display'; font-style:italic;
  }
  .mobile-menu a:hover{ color:var(--amber); }
  .mobile-menu-close{
    position:absolute; top:22px; right:22px; background:rgba(255,255,255,0.12); border:none;
    color:white; width:40px; height:40px; border-radius:50%; cursor:pointer;
  }

  @media (max-width:820px){
    .hero-nav-side.left{ display:none; }
    .hero-nav-side.right a{ display:none; }
    .hero-nav-toggle{ display:flex; }
  }

  /* Contenedor que centra ambos bloques (blanco + oscuro) en el centro del hero */
  .hero-content{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding: 100px 20px 24px;
  }

    .hero-content-all{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    gap:10px; padding: 100px 20px 24px; color:white;
  }




  .hero-box{
    width:80%; max-width:600px; border-radius:40px;
    box-shadow:0 20px 40px rgba(15,31,61,0.25);
  }
  .hero-box-white{ background:white; padding:4em 3em; }
  .hero-box-white h1{  font-family:'Barlow Condensed'; font-size:5em; margin:0; padding: 0px; line-height:1;color:var(--ink); }


  .hero-box-white p{ color:var(--muted); margin:0; }

  .hero-box-dark{ background:var(--navy);  padding:2em 3em; }
  .hero-form-label{ font-weight:700; margin-bottom:4px; color:white; }
  .hero-form-sub{ color:rgba(255,255,255,0.55); margin-bottom:14px; line-height:1.4; }
  .hero-form{ display:flex; gap:8px; }
  .hero-form input{ flex:1; padding:11px 12px; border:1px solid rgba(255,255,255,0.2); border-radius:6px; background:rgba(255,255,255,0.06); color:white; }
  .hero-form input::placeholder{ color:rgba(255,255,255,0.5); }
  .hero-form button{ background:var(--amber); color:var(--navy); border:none; width:42px; border-radius:6px; cursor:pointer; }
  .hero-badge{ position:absolute; z-index:3; }


@media (max-width:760px){
  .hero-box-white h1{  font-size:2.5em;
  }


}
  /* Variante de hero para páginas internas: más corto, imagen de fondo, solo título */
  .hero.hero-page{ min-height:20vh; }
  .hero-bg img{ width:100%; height:100%; object-fit:cover; }
  .hero-content-simple{ padding:0 20px; text-align:center; }
  .hero-page-title{
     font-family:'Barlow Condensed';
text-transform: uppercase;
     font-style:italic; color:white;
    margin:0; line-height:1.15;
    text-shadow:0 4px 24px rgba(0,0,0,0.35);
  }


  @media (max-width:600px){
    .hero-page-title{ font-size:30px; }
  }

  /* ============ LOGO CAROUSEL ============ */
  .logos{
    background:white; border-bottom:1px solid var(--line);
    padding:20px 0; overflow:hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .logos-track{
    display:flex; width:200%;
    animation: logos-scroll 22s linear infinite;
  }
  .logos:hover .logos-track{ animation-play-state: paused; }
  .logos-set{
    display:flex; justify-content:space-between; align-items:center;
    flex:0 0 50%; width:50%; padding:0 40px;
  }
  .logos-set span{
    font-family:'Barlow Condensed'; font-weight:700;
    letter-spacing:0.5px; color:var(--navy); opacity:0.55; white-space:nowrap;
  }
  @keyframes logos-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .logos-track{ animation: none; }
  }

  /* ============ BEST SELLERS ============ */
  section{ padding:60px 24px; }
  .wrap{ width:90%; max-width:1800px; margin:0 auto; }

  .bestsellers{ background:var(--mint); }
  .bs-grid{ display:grid; grid-template-columns: 260px repeat(3,1fr); gap:18px; }
  .bs-intro{  padding:26px 22px; display:flex; flex-direction:column; justify-content:center; }
  .bs-eyebrow{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:1px; color:var(--amber-dark); font-weight:700; }
  .bs-title{ font-family:'Playfair Display'; font-style:italic; margin:6px 0 10px; }
  .bs-desc{ color:var(--muted); line-height:1.3; margin:0 0 18px; }
  .bs-btn{ background:var(--navy); color:white; text-align:center; padding:11px; border-radius:6px; font-weight:600; }

  .product-card{
    background:white; border-radius:10px; overflow:hidden; display:flex; flex-direction:column;
    border:2px solid transparent; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .product-card:has(.select-check-input:checked){
    border-color:var(--amber);
    box-shadow:0 0 0 3px rgba(232,163,61,0.18);
  }
  .product-card .ph-wrap{ aspect-ratio:4/5; overflow:hidden; }
  .product-card .body{ padding:14px 16px 16px; }
  .product-card .name{ font-weight:600; margin-bottom:10px;  }
  .product-card .price{ font-weight:700; color:#212121; margin-bottom:4px; font-family:'Barlow Condensed'; text-transform:uppercase; font-size:40px; line-height:40px; margin-top:10px; }
 .product-card .desc{ font-size:12px; margin:0px; }

  .product-card .limit{ color:var(--muted); margin-bottom:10px; }
  .product-card .size-label{ font-weight:600; margin-bottom:4px; }
  .product-card select{ width:100%; padding:8px; border:1px solid var(--line); border-radius:6px;  margin-bottom:20px; }
  .product-card .add-btn{ background:var(--wame); color:white; border:none; width:100%; padding:11px; border-radius:6px; font-weight:700; cursor:pointer; }

  /* ============ WHAT WE DO ============ */
  .howworks{ text-align:center; background:white; }
  .howworks h2{ font-family:'Playfair Display'; font-style:italic; margin:0 0 6px; }
  .howworks h3{ margin:0 0 14px; font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.5px; }
  .howworks p{ max-width:560px; margin:0 auto 24px; color:var(--muted); line-height:1.6; }
  .howworks .story-btn{ display:inline-block; background:var(--navy); color:white; padding:12px 26px; border-radius:6px; font-weight:600; margin-bottom:44px; }

  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; }
  .steps .ph-wrap{ aspect-ratio:4/5; border-radius:8px; overflow:hidden; margin-bottom:14px; }
  .steps .icon{ margin-bottom:6px; }
  .steps .step-title{ font-family:'Barlow Condensed'; text-transform:uppercase; font-weight:700; letter-spacing:0.5px; }
  .steps .step-sub{ color:var(--muted); margin-top:15px; padding:1em; }

  /* ============ ESSENTIALS (lilac) ============ */
  .essentials{ background:#f9f9f9; }
  .es-grid{ display:grid; grid-template-columns:260px repeat(3,1fr); gap:18px; align-items:start; }
  .es-intro{ display:flex; flex-direction:column; justify-content:center; padding-top:10px; }
  .es-eyebrow{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:1px; color:var(--amber-dark); font-weight:700; }
  .es-title{ font-family:'Playfair Display'; font-style:italic; margin:6px 0 18px; line-height:1.2; }
  .es-btn{ display:inline-block; border:1px solid var(--navy); padding:10px 20px; border-radius:20px; font-weight:600; width:fit-content; }

  .es-card .ph-wrap{ aspect-ratio:4/5; border-radius:8px; overflow:hidden; margin-bottom:10px; }
  .es-card .name{ font-weight:600; margin-bottom:2px; }
  .es-card .price{  color:var(--muted); }

  /* ============ TESTIMONIAL ============ */
  .testimonial{ background:white; }
  .test-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
  .test-grid .ph-wrap{ aspect-ratio:4/5; border-radius:8px; overflow:hidden; }
  .test-eyebrow{ font-family:'Barlow Condensed'; text-transform:uppercase;  letter-spacing:1px; color:var(--muted); margin-bottom:10px; }
  .test-quote{ font-family:'Playfair Display'; font-size:28px; line-height:1.35; margin:0 0 16px; }
  .test-author{ color:var(--muted); }
  .test-highlight{ background:var(--amber); color:var(--navy); font-weight:700; padding:2px 4px; border-radius:3px; }

  /* ============ FOOTER ============ */
  footer{ background:var(--navy); color:rgba(255,255,255,0.75); padding:90px 0 32px; }
  .footer-grid{
    width:90%; max-width:1600px; margin:0 auto 90px;
    display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap;
  }
  .footer-brand-block{ max-width:340px; }
  .footer-brand{ color:white; font-family:'Playfair Display'; font-style:italic;  margin-bottom:14px; }
  .footer-sub{ line-height:1.55; margin-bottom:22px; }
  .newsletter{ display:flex; gap:8px; max-width:360px; }
  .newsletter input{ flex:1; padding:12px 16px; border:none; border-radius:20px;  }
  .newsletter button{ background:var(--amber); color:var(--navy); border:none; padding:0 22px; border-radius:20px; font-weight:700;  cursor:pointer; white-space:nowrap; }

  .footer-links{ display:flex; gap:100px; flex-wrap:wrap; }
  .footer-col h4{
    color:white;  margin-bottom:18px; font-family:'Barlow Condensed';
    text-transform:uppercase; letter-spacing:1.5px; font-weight:700;
  }
  .footer-col a, .footer-col p{ display:block; margin-bottom:13px; color:rgba(255,255,255,0.7); }
  .footer-col a:hover{ color:white; }

  .footer-divider{ width:90%; max-width:1600px; margin:0 auto; border:none; border-top:1px solid rgba(255,255,255,0.14); }

  .footer-tagline{
    width:90%; max-width:1600px; margin:32px auto 0;
    font-family:'Playfair Display'; font-style:italic; color:white; line-height:1.3;
  }

  .footer-bottom{
    width:90%; max-width:1600px; margin:40px auto 0;
     color:rgba(255,255,255,0.5);
  }



  /* ============ Carrusel de "Cómo funciona": flechas + drag ============ */

.steps-carousel{ position:relative; }

.steps-arrow{
  display:none; /* solo se muestran en móvil, ver @media abajo */
  position:absolute; top:35%; z-index:3; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(15,31,61,0.75); color:white; font-size:20px; line-height:1;
  align-items:center; justify-content:center; cursor:pointer;
}
.steps-arrow:hover{ background:rgba(15,31,61,0.9); }
.steps-arrow.prev{ left:-4px; }
.steps-arrow.next{ right:-4px; }

.steps{ cursor:grab; user-select:none; }
.steps.arrastrando{ cursor:grabbing; scroll-snap-type:none; } /* mientras arrastra, que no "salte" al snap */

@media (max-width:820px){
  .steps-arrow{ display:flex; }
}




  @media (max-width:820px){
    .bs-grid, .es-grid{ grid-template-columns:1fr; }
  

  /* ============================================================
   Reemplaza SOLO esta línea dentro de tu @media (max-width:820px):

     .steps{ grid-template-columns:1fr; }

   por este bloque completo (el resto de reglas de ese @media,
   como .bs-grid, .es-grid, etc., las dejas tal cual están).
   ============================================================ */

.steps{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:14px;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;       /* Firefox: oculta la barra de scroll */
}
.steps::-webkit-scrollbar{ display:none; } /* Chrome/Safari: oculta la barra de scroll */

.steps > div{
  flex:0 0 85%;                /* cada paso ocupa 85% del ancho -> se asoma un poquito el siguiente */
  scroll-snap-align:center;    /* "engancha" cada paso al centro al soltar el swipe */
}


    .test-grid{ grid-template-columns:1fr; }
    .footer-grid{ flex-direction:column; gap:40px; }
    .footer-links{ gap:50px; }
  }

  /* ============ TOPBAR (páginas internas, sin hero) ============ */
  .topbar{ background:var(--navy); padding:16px 0; }
  .topbar-row{ width:90%; max-width:1600px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .topbar-brand{ font-family:'Playfair Display'; font-style:italic; color:white; display:flex; align-items:center; gap:10px; }
  .topbar-brand .flag{ width:18px; height:12px; border-radius:2px;
    background: repeating-linear-gradient(180deg,#B22234 0 2px,#fff 2px 4px); }
  .topbar-nav{ display:flex; align-items:center; gap:26px; }
  .topbar-nav a{ color:rgba(255,255,255,0.75); font-weight:600; font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.5px; }
  .topbar-nav a:hover{ color:white; }
  .topbar-nav a.active{ color:var(--amber); }
  .topbar-cta{ background:var(--amber); color:var(--navy); padding:9px 18px; border-radius:6px;  font-weight:700; }

  /* ============ PAGE HEADER ============ */
  .page-header{ background:var(--mint); padding:34px 0; }
  .page-header .eyebrow{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:1px; color:var(--amber-dark); font-weight:700; }
  .page-header h1{ font-family:'Playfair Display'; font-style:italic; margin:6px 0 4px; }
  .page-header .count{ color:var(--muted); }

/* ============ CATALOG LAYOUT ============ */
.catalog{ padding:40px 0 70px; background:#F7F7F7F7; }
.catalog-grid{ display:grid; grid-template-columns:250px 1fr; gap:26px; align-items:start; }

.filters{ border-radius:10px; padding:22px 20px; position:sticky; top:20px; }
.filters h4{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:1px; margin:0 0 16px; }
.filters .group{ margin-bottom:22px; }
.filters .group:last-child{ margin-bottom:0; }
.filters .group h5{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin:0 0 10px; }
.filters label{ display:flex; align-items:center; gap:9px; margin-bottom:10px; cursor:pointer; }

.tipo-filtro-link{
  display:flex; align-items:center; gap:6px; padding:8px 10px; margin-bottom:6px;
  border-radius:6px; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none;
}
.tipo-filtro-link:hover{ background:var(--paper); }
.tipo-filtro-link.activo{ background:var(--navy); color:white; }
.tipo-filtro-link.activo .filter-count{ color:rgba(255,255,255,0.7); }
.filters input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--navy); cursor:pointer; }





/* ============ Filtros: colapsable solo en móvil ============ */

.filters-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; padding:0; margin:0 0 16px; font:inherit;
  text-align:left; cursor:default;
}
.filters-toggle h4{ margin:0; } /* conserva el estilo que ya tenías en el h4 */

.filters-chevron{
  display:none; font-size:18px; color:var(--muted); transition:transform .2s ease;
}

@media (max-width:820px){
  .filters-toggle{ cursor:pointer; margin-bottom:0; }
  .filters-chevron{ display:block; }
  .filters-toggle.abierto .filters-chevron{ transform:rotate(180deg); }

  .filters-body{ display:none; padding-top:16px; }
  .filters-body.abierto{ display:block; }
}




.catalog-main{ min-width:0; } /* evita que el grid se desborde en pantallas angostas */

.catalog-note{
  background:var(--mint); border:1px solid #CDE8DE; color:var(--navy);
  padding:12px 16px; border-radius:8px; font-size:13.5px; font-weight:600;
  margin:0 0 20px;
}

.catalog-results{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.catalog-note{
  grid-column: 1 / -1;
  background:#FFF7EB; border:1px solid #F3D9A6; color:var(--amber-dark);
  padding:12px 16px; border-radius:8px; font-size:13.5px; font-weight:600; margin:0;
}

@media (max-width:1200px){
  .catalog-results{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:820px){
  .catalog-grid{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .topbar-nav{ display:none; }
}

  .tile{ background:white; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; }
  .tile:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,31,61,0.1); }
  .tile .ph-wrap{ aspect-ratio:4/5; position:relative; }
  .tile .badge-off{ position:absolute; top:8px; right:-6px; background:var(--amber); color:var(--navy);
    font-family:'Archivo Black'; padding:5px 10px 5px 12px; border-radius:3px 0 0 3px; box-shadow:-2px 2px 0 rgba(0,0,0,0.08); }
  .tile .badge-stock{ position:absolute; top:8px; left:8px; background:rgba(15,31,61,0.85); color:white;
    font-family:'Barlow Condensed'; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
  .tile .badge-stock.low{ background:#B23A2F; }
  .tile .body{ padding:13px 15px 15px; display:flex; flex-direction:column; gap:5px; flex:1; }
  .tile .cat{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.8px; color:var(--amber-dark); font-weight:700; }
  .tile .name{ font-weight:600; line-height:1.3; min-height:36px; }
  .tile .code{ font-family:'Barlow Condensed'; color:var(--muted); }
  .tile .price-row{ margin-top:2px; display:flex; align-items:baseline; gap:7px; }
  .tile .price-old{  color:var(--muted); text-decoration:line-through; }
  .tile .price-new{ font-family:'Archivo Black'; color:#B23A2F; }
  .tile .cta-wa{ margin-top:9px; display:flex; align-items:center; justify-content:center; gap:7px;
    background:#25D366; color:white; font-weight:700;  padding:10px; border-radius:6px; }
  .tile .cta-wa:hover{ background:#1EBE59; }
  .tile .cta-wa svg{ width:14px; height:14px; fill:white; }

  /* ============ SELECCIÓN POR LOTE ============ */
  .card-actions{ display:flex; gap:8px; margin-top:10px; }
  .card-actions > *{
    flex:1 1 50%; text-align:center; border-radius:6px;
    font-weight:700; font-size:12.5px; cursor:pointer; border:none; font-family:inherit;
  }
  .btn-wa{ background:var(--wame); color:white; text-decoration:none; display:block; }
  .btn-select{
    background:white; border:1px solid var(--line); color:var(--navy);
    display:flex; align-items:center; justify-content:center; gap:6px; transition:.15s ease;
  }
  .btn-select input{ display:none; }
  .btn-select:has(input:checked){ background:var(--amber); border-color:var(--amber); }

  .lote-bar{
    position:fixed; left:0; right:0; bottom:-120px; z-index:200;
    background:var(--navy); color:white; padding:16px 0;
    box-shadow:0 -8px 24px rgba(0,0,0,0.18); transition:bottom .3s ease;
  }
  .lote-bar.show{ bottom:0; }
  .lote-bar-inner{
    width:90%; max-width:1600px; margin:0 auto; display:flex; align-items:center;
    justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .lote-bar-texto{ font-family:'Barlow Condensed'; font-weight:700; letter-spacing:0.3px; }
  .lote-bar-texto span{ color:var(--amber); }
  .lote-bar-actions{ display:flex; gap:10px; }
  .lote-btn{
    padding:10px 18px; border-radius:6px; font-weight:700; border:none;
    cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; font-family:inherit;
  }
  .lote-btn.amber{ background:var(--amber); color:var(--navy); }
  .lote-btn.ghost{ background:rgba(255,255,255,0.14); color:white; }

  /* ============ BOTÓN "VER OFERTA" (Virales/Ofertas) ============ */
  .btn-ver-oferta{
    width:100%; background:#E8A33D; color:white; border:none;
    border-radius:10px; font-weight:700;cursor:pointer; font-family:inherit; transition: all ease 0.5s;
  }
  .btn-ver-oferta:hover{ background:#16294F; }

  /* ============ BADGE "AHORRAS" en la tarjeta ============ */
  .card-ahorras{
    display:inline-block; background:#FFF1DA; color:var(--amber-dark); font-size:11.5px;
    font-weight:700; padding:4px 10px; border-radius:14px; margin:2px 0 10px;
  }

  /* ============ MINI CUPÓN "raspa y gana" en la tarjeta (Cupones) ============ */
  /* ============ MINI "RASPA Y GANA" en la tarjeta (Cupones) — navy/ámbar ============ */
  .cupon-peel-wrap{
    display:flex; align-items:stretch; width:100%; border-radius:20px; overflow:hidden;
    border:2px dashed #f4f0e6; cursor:pointer; 
  }

  .cupon-peel-wrap img{
    width: 40px;
  }

  .cupon-peel-wrap:active{ transform:scale(0.98); }
  .cupon-peel-left{
    flex:1; 
    animation: changeBackgroundColor 3s infinite;
    color:white;
    display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:12.5px; white-space:nowrap;
    padding:14px 10px;
    background-image: url("../img/borderstiicker.png");background-position: right; background-repeat: no-repeat; background-size: contain;
  }

@keyframes changeBackgroundColor {
  0% {
    background-color: #83cc11;
  }
  50% {
    background-color: #11c5cc;
  }
  100% {
    background-color: #83cc11;
  }
}


  .cupon-peel-right{
    display:none; /* se omite: el bloque verde ocupa todo el ancho */
  }
  .cupon-peel-right::before,
  .cupon-peel-right::after{
    
  }
  .cupon-peel-right::before{ top:-11px; }
  .cupon-peel-right::after{ bottom:-11px; }
  .cupon-peel-wrap.revelado .cupon-peel-left{ background:linear-gradient(135deg, #1E6B3C, #29874C); }
  .cupon-peel-wrap.revelado .cupon-peel-right{ color:#1E6B3C; }

  /* ============ LIGHTBOX DE PRODUCTO (Cupones/Virales/Ofertas) ============ */
  .overlay-producto{
    position:fixed; inset:0; background:rgba(15,31,61,0.6); display:none;
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .overlay-producto.open{ display:flex; }
  .modal-producto{
    background:white; border-radius:14px; width:100%; max-width:420px;
    max-height:92vh; overflow-y:auto; position:relative;
  }
  .modal-producto-close{
    position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px;
    border-radius:50%; background:rgba(15,31,61,0.7); color:white; border:none;
    font-size:16px; cursor:pointer;
  }
  /* ============ LIGHTBOX DE PRODUCTO: imagen + carrusel ============ */

  .modal-producto-media{ display:flex; flex-direction:column; }

  .modal-producto-img{
    position:relative; background:#EDE7D8;
  }
  .modal-producto-img img{ width:100%; height:auto; display:block; }

  .modal-producto-descuento{
    position:absolute; top:12px; left:12px; background:var(--amber); color:var(--navy);
    font-family:'Archivo Black'; font-size:13px; padding:5px 10px; border-radius:4px;
  }

  /* Flechas ‹ › sobre la imagen */
  .modal-producto-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:50%; border:none;
    background:rgba(15,31,61,0.6); color:white; font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  }
  .modal-producto-arrow:hover{ background:rgba(15,31,61,0.85); }
  .modal-producto-arrow.prev{ left:10px; }
  .modal-producto-arrow.next{ right:10px; }

  /* Tira de miniaturas debajo de la imagen */
  .modal-producto-thumbs{
    display:flex; gap:6px; padding:10px; overflow-x:auto; background:white; flex-shrink:0;
  }
  .modal-producto-thumbs img{
    width:52px; height:52px; object-fit:cover; border-radius:6px; cursor:pointer;
    border:2px solid transparent; flex-shrink:0; opacity:0.6; transition:.15s ease;
  }

  /* ============ Imagen fija de cierre del lightbox (Cupones/Virales/Ofertas) ============ */

.lb-footer-img{
  display:block;
  width:100%;
  border-radius:8px;
  margin-top:16px;
}


  .modal-producto-thumbs img:hover{ opacity:0.85; }
  .modal-producto-thumbs img.activa{ border-color:var(--amber); opacity:1; }

  .modal-producto-body{ padding:20px 22px 24px; }
  .modal-producto-vendidos{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; }
  .modal-producto-body h3{ margin:0 0 8px; font-size:19px; }
  .modal-producto-desc{ font-size:13.5px; color:var(--muted); line-height:1.5; margin:0 0 14px; }
  .modal-producto-precio{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
  .modal-producto-precio .old{ font-size:14px; color:var(--muted); text-decoration:line-through; }
  .modal-producto-precio .nuevo{ font-family:'Archivo Black'; font-size:26px; color:var(--ink); }

  /* Pantallas grandes: dos columnas lado a lado en vez de todo apilado */
  @media (min-width:760px){
    .modal-producto{
      max-width:1300px; max-height:82vh; 
      display:flex; align-items:flex-start; /* antes: stretch (forzaba a la imagen a igualar la altura del texto) */
    }
    .modal-producto-media{
      width:44%; flex-shrink:0; display:flex; flex-direction:column;
    }
    .modal-producto-img{
      max-height:82vh; /* tope de seguridad solo por si la foto es MUY vertical */
    }
    .modal-producto-img img{
      max-height:82vh;
      object-fit:contain; /* solo entra en juego si se topa con el límite de arriba -> nunca recorta */
    }
    .modal-producto-body{
      flex:1; max-height:82vh; overflow-y:auto; padding:28px 30px;
    }
  }

  .lb-ahorras{
    display:inline-block; background:#FFF1DA; color:var(--amber-dark); font-size:12.5px;
    font-weight:700; padding:6px 14px; border-radius:20px; margin-bottom:16px;
  }

  /* ---- Cupón "código verificado" — verde, estilo DealSeek ---- */
  .lb-cupon-titulo{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin-bottom:8px; }

  .lb-cupon-box{
    background:#DFF3E6; border-radius:10px; padding:16px 18px; margin-bottom:12px;
  }
  .lb-cupon-row{ display:flex; align-items:center; gap:12px; }
  .lb-cupon-icon{
    width:36px; height:36px; border-radius:50%; background:white; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .lb-cupon-label{ font-size:11.5px; font-weight:700; color:#1E6B3C; margin-bottom:3px; }
  .lb-cupon-code{
    font-family:'Courier New', monospace; font-weight:800; font-size:19px;
    letter-spacing:1.5px; color:#14532D;
  }
  .lb-cupon-sep{ border-top:1px dashed #9ED8B5; margin:12px 0 10px; }
  .lb-cupon-verificado{ font-size:12px; color:#1E6B3C; display:flex; align-items:center; gap:5px; font-weight:600; }

  .lb-cta-btn{
    display:block; width:100%; text-align:center; background:var(--amber); color:var(--navy);
    font-weight:800; font-size:14.5px; padding:14px; border-radius:8px; text-decoration:none;
    border:none; cursor:pointer; font-family:inherit; margin-bottom:16px;
  }
  .lb-cta-btn:hover{ background:var(--amber-dark); color:white; }
  .lb-cta-btn.lb-cta-verde{ background:#22A559; color:white; }
  .lb-cta-btn.lb-cta-verde:hover{ background:#1C8A4A; }

  /* ============ HOVER: zoom de imagen al pasar el mouse sobre la tarjeta ============ */

  /* Necesario para que el zoom no se salga de las esquinas redondeadas */
  .ph-wrap{ overflow:hidden; }

  .ph-wrap img{
    transition: transform .35s ease;
  }

  .product-card:hover .ph-wrap img{
    transform: scale(1.07);
  }

  /* Que la tarjeta entera también "se sienta" al pasar el mouse */
  .product-card{
    transition: box-shadow .2s ease, transform .2s ease;
  }

  .product-card:hover{
    box-shadow: 0 10px 26px rgba(15,31,61,0.14);
    transform: translateY(-3px);
  }


.hero-form-flash{
  padding:9px 12px; border-radius:6px; font-size:12.5px; font-weight:600; margin-bottom:12px;
}
.hero-form-flash.ok{ background:rgba(34,165,89,0.18); color:#7FE0A8; }
.hero-form-flash.error{ background:rgba(178,58,47,0.2); color:#F3A79E; }














/* ============ "Cómo funciona": texto superpuesto sobre la imagen ============ */

.step-card{
  position:relative; overflow:hidden; border-radius:50px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(15,31,61,0.18);
}

.step-card .ph-wrap{ margin-bottom:0; } /* ya no hace falta el espacio, el texto va encima */

.step-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:32px 22px 24px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.82) 100%);
  text-align:center;
}

.step-badge{
  display:inline-flex; align-items:center; gap:6px;
   color:white;
  font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
  font-size:33px; padding:6px 14px; border-radius:20px;
  margin-bottom:12px;
}

.step-overlay .step-sub{
  color:rgba(255,255,255,0.92);
  margin:0; padding:0;
  line-height:1.5;
}

/* ============ "Cómo funciona": todo el texto centrado ============ */

.howworks{ text-align:center; }
.howworks .wrap{ text-align:center; }

.step-overlay{ text-align:center; }
.step-overlay .step-sub{ text-align:center; }
/* ============ "Cómo funciona": acordeón al hacer hover (solo desktop/tablet) ============ */

@media (min-width:821px){
  .steps{
    display:flex;      /* antes era grid de 3 columnas fijas */
    gap:18px;
    text-align:center;
  }

  /* La imagen ya no depende del ancho para su alto (aspect-ratio) —
     ahora tiene una altura fija, así todas quedan parejas aunque
     una se ensanche y las otras se achiquen */
  .steps .ph-wrap{
    aspect-ratio:unset;
    height:360px;
    margin-bottom:0;
  }

  .step-card{
    flex:1 1 0%;              /* las 3 arrancan iguales, ~33% cada una */
    min-width:0;               /* necesario para que sí puedan achicarse de verdad */
    transition:flex-grow .35s ease;
  }

  .step-card:hover{
    flex-grow:1.4;              /* la que tiene el mouse encima crece -> ~40% */
  }
}


/* ============ OTROS PRODUCTOS (fila de 5, sin el layout de intro lateral) ============ */

.otros-productos{ background:white; padding-top:20px; }

.otros-titulo{
  text-align:center; font-family:'Barlow Condensed'; text-transform:uppercase;
  letter-spacing:1px; font-size:16px; font-weight:700; color:var(--muted);
  margin:0 0 26px;
}

.otros-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}

@media (max-width:1200px){
  .otros-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:820px){
  .otros-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .otros-grid{ grid-template-columns:1fr; }
}


/* ============ Footer: fila de 2 columnas debajo del divider ============ */

.footer-bottom-row{
  width:90%; max-width:1600px; margin:32px auto 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}

/* Como ahora viven adentro de .footer-bottom-row (que ya se encarga
   del ancho/centrado), le quitamos ese comportamiento propio a los
   textos de la izquierda para que no peleen entre sí. */
.footer-bottom-row .footer-tagline,
.footer-bottom-row .footer-bottom{
  width:auto; max-width:none; margin:0 0 6px;
}
.footer-bottom-row .footer-bottom{ margin-bottom:0; }

.footer-garantia{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.footer-garantia-texto{
  color:rgba(255,255,255,0.7); font-size:13px; white-space:nowrap;
}
.footer-garantia-logo{
 width:auto; display:block;
}

.footer-garantia img{
  width: 80px;
}
@media (max-width:600px){
  .footer-bottom-row{ flex-direction:column; align-items:flex-start; gap:16px; }
}


/* ============ Zona de precio "con cupón / sin cupón" (solo Cupones) ============ */

.cupon-precio-box{
  background:#F0FBF4; border:1px solid #BEE6CC; border-radius:10px;
  padding:14px; margin:8px 0 10px; display:flex; flex-direction:column; gap:10px;
}

.cupon-precio-con{ display:flex; flex-direction:column; gap:5px; }

.cupon-precio-badge{
  display:inline-flex; align-items:center; gap:4px; width:fit-content;
  background:#22A559; color:white; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.3px;
}

.cupon-precio-monto{
  font-family:'Barlow Condensed'; font-weight:800; font-size:32px; color:#1E6B3C; line-height:1;
}

.cupon-precio-check{
  font-size:11.5px; color:#1E6B3C; font-weight:600;
}

.cupon-precio-sin{
  display:flex; align-items:baseline; gap:8px;
  padding-top:8px; border-top:1px dashed #BEE6CC;
}

.cupon-precio-label-sin{ font-size:11px; color:var(--muted); }

.cupon-precio-monto-sin{
  font-size:15px; color:var(--muted); text-decoration:line-through; font-weight:700;
}

.cupon-ahorras-banner{
  background:#FFF1DA; border:1px solid #F3D9A6; border-radius:10px;
  padding:14px 16px; margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}

.cupon-ahorras-icon{ font-size:22px; flex-shrink:0; }

.cupon-ahorras-texto{
  font-size:15px; font-weight:800; color:var(--ink);
  text-transform:uppercase; letter-spacing:0.3px;
}
.cupon-ahorras-texto strong{
  color:var(--amber-dark); font-size:18px; text-transform:none;
}

.cupon-ahorras-divider{ color:#F3D9A6; font-weight:300; }

.cupon-ahorras-pct{
  background:var(--amber); color:var(--navy); font-weight:800; font-size:15px;
  padding:4px 12px; border-radius:14px; margin-left:auto; flex-shrink:0;
}

.cupon-trust-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; font-size:12px; color:var(--ink); font-weight:600;
  margin-bottom:10px; text-align:center;
}
.cupon-trust-item{ white-space:nowrap; }
.cupon-trust-sep{ color:var(--line); }



/* ============ Sección de videos tipo reels (9:16) ============ */

.reels-header{ text-align:center; margin-bottom:28px; }
.reels-eyebrow{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:1px;
  color:var(--amber-dark); font-weight:700; font-size:18px;
}
.reels-title{
  font-family:'Playfair Display'; font-style:italic; font-size:30px;
  margin:6px 0 0; color:var(--ink);
}

.reels-carousel{ position:relative; }

.reels-track{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 4px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab; user-select:none;
}
.reels-track::-webkit-scrollbar{ display:none; }
.reels-track.arrastrando{ cursor:grabbing; scroll-snap-type:none; }

/* 4 tarjetas visibles de entrada en desktop (si hay menos de 4, se
   reparten el ancho completo igual; si hay más, aparece scroll) */
.reel-item{
  position:relative;
  flex:0 0 calc((100% - 3*14px)/4);
  aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  background:#0F1F3D;
  scroll-snap-align:start;
  box-shadow:0 10px 24px rgba(15,31,61,0.16);
}
.reel-item video{
  width:100%; height:100%; object-fit:cover; display:block; cursor:pointer;
}

/* Overlay del botón de play (sin autoplay) */
.reel-play-overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.28); cursor:pointer;
  transition:opacity .2s ease;
}
.reel-play-overlay.oculto{ opacity:0; pointer-events:none; }
.reel-play-icon{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.92); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; padding-left:3px; /* centra ópticamente el triángulo ▶ */
}

.reel-mute-btn{
  position:absolute; bottom:10px; right:10px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:white; border:none; font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.reel-mute-btn:hover{ background:rgba(0,0,0,0.75); }

.reels-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(15,31,61,0.75); color:white; font-size:20px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.reels-arrow:hover{ background:rgba(15,31,61,0.9); }
.reels-arrow.prev{ left:-6px; }
.reels-arrow.next{ right:-6px; }

/* 3 visibles en tablet, 2 en celular grande, ~1.3 (con "peek") en celular chico */
@media (max-width:1100px){
  .reel-item{ flex-basis:calc((100% - 2*14px)/3); }
}
@media (max-width:760px){
  .reel-item{ flex-basis:calc((100% - 1*14px)/2); }
}
@media (max-width:480px){
  .reel-item{ flex-basis:78%; }
  .reels-arrow{ width:32px; height:32px; font-size:17px; }
}


.hero-animated-title {
  min-height: 1.3em; /* ajusta según tu font-size */
}


.hero-animated-title .flag-icon {
  display: inline !important;
  height: 0.8em;
  width: auto;
  vertical-align: middle;
  margin: 0 4px;
}

.hero-animated-title .line {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-animated-title .line.active {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   RESPONSIVE MÓVIL — Tarjetas de producto (2 columnas)
   Todo lo de acá abajo achica textos, márgenes y paddings de
   .product-card (y sus variantes stock / cupones / virales-ofertas)
   SOLO en pantallas de celular. En PC/tablet no cambia nada.
   ============================================================ */

@media (max-width:600px){

  /* --- espacio general del catálogo en móvil --- */
  .catalog{ padding:24px 0 40px; }
  .catalog-grid{ gap:16px; }
  .catalog-results{ gap:10px; }
  .bannerpostheader{ padding:1.4em; }
  .filters{ padding:16px 14px; }

  /* --- tarjeta base --- */
  .product-card{ border-radius:8px; }
  .product-card .body{ padding:9px 10px 11px; }

  /* nombre del producto */
  .product-card .name{
    font-size:12.5px;
    line-height:1.25;
    margin-bottom:5px;
    min-height:auto;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .product-card .cat{ font-size:9.5px; }

  /* precio (tipo stock / virales / ofertas) */
  .product-card .price{
    font-size:19px;
    line-height:21px;
    margin-top:4px;
    margin-bottom:2px;
  }
  .product-card .price span{ font-size:12px !important; }

  .card-ahorras{
    font-size:9.5px;
    padding:3px 7px;
    margin:2px 0 6px;
  }

  .product-card .limit{ font-size:9.5px; margin-bottom:6px; }

  .product-card select{
    padding:6px;
    font-size:11px;
    margin-bottom:8px;
  }

  /* badges sobre la imagen */
  .badge-off{ font-size:11px; padding:4px 8px 4px 10px; top:6px; }
  .badge-stock{ font-size:9px; padding:2px 6px; top:6px; left:6px; }

  /* --- zona de precio "con cupón / sin cupón" --- */
  .cupon-precio-box{ padding:10px; margin:6px 0 8px; gap:6px; border-radius:8px; }
  .cupon-precio-badge{ font-size:9px; padding:3px 8px; gap:3px; }
  .cupon-precio-monto{ font-size:20px; }
  .cupon-precio-check{ font-size:9px; }
  .cupon-precio-sin{ gap:6px; padding-top:6px; }
  .cupon-precio-label-sin{ font-size:9px; }
  .cupon-precio-monto-sin{ font-size:11px; }

  .cupon-ahorras-banner{ padding:8px 10px; gap:6px; margin-bottom:6px; border-radius:8px; }
  .cupon-ahorras-icon{ font-size:15px; }
  .cupon-ahorras-texto{ font-size:9.5px; }
  .cupon-ahorras-texto strong{ font-size:11.5px; }
  .cupon-ahorras-pct{ font-size:10.5px; padding:3px 8px; }

  .cupon-trust-row{ font-size:8.5px; gap:4px; margin-bottom:6px; }

  /* mini "raspa y gana" — botón revelar cupón */
  .cupon-peel-wrap{ border-radius:8px; }
  .cupon-peel-wrap img{ width:22px; }
  .cupon-peel-left{ font-size:10.5px; gap:4px; padding:12px 10px; }
  .cupon-peel-left h4{ font-size:10.5px !important; margin:0; }

  /* botones de acción (WhatsApp / seleccionar / ver oferta) */
  .card-actions{ gap:5px; margin-top:6px; }
  .card-actions > *{ font-size:9.5px; border-radius:5px; }
  .btn-wa{ padding:10px 4px !important; }
  .btn-select{ padding:8px 4px; gap:4px; }
  .btn-ver-oferta{ padding:10px 4px; border-radius:8px; }
  .btn-ver-oferta h4{ font-size:11px; margin:0; }
}

/* Celulares chicos: un empujoncito extra */
@media (max-width:380px){
  .product-card .name{ font-size:12px; }
  .product-card .price{ font-size:17px; line-height:19px; }
  .cupon-precio-monto{ font-size:18px; }
  .card-actions > *{ font-size:9px; }
}


/* ============================================================
   RESPONSIVE MÓVIL — Hero de inicio (video + caja blanca/navy),
   logo del header y menú móvil
   ============================================================ */

@media (max-width:760px){

  /* --- Logo del header: en celular el contenedor de 300px se sentía
     gigante (~75% del ancho de pantalla). Lo bajamos bastante. --- */
  .hero-logo{
    max-width:150px;
    padding:6px 10px;
  }

  /* --- Caja blanca (título) y caja navy (suscripción): menos "paging"
     interno, para que el bloque completo se sienta más compacto --- */
  .hero-box{ width:92%; border-radius:22px; }

  .hero-box-white{ padding:1.6em 1.3em; }
  .hero-box-white p{ font-size:14px; }

  .hero-box-dark{ padding:1.5em 1.3em; }
  .hero-form-label{ font-size:15px; line-height:1.35; }
  .hero-form-sub{ font-size:12.5px; margin-bottom:12px; }
  .hero-form input{ padding:9px 10px; }

  .hero-content{ padding:90px 16px 20px; gap:12px; }

  /* --- Título animado del hero: grande, pero calculado para entrar
     siempre en una sola línea (escala con el ancho de pantalla) --- */
  .hero-box-white h1{
    font-size:clamp(1.55em, 8.6vw, 2.2em);
    line-height:1.05;
    white-space:nowrap;
  }
}

/* En pantallas MUY angostas, si aun así el texto más largo ("AL MEJOR
   PRECIO!") no entrara, dejamos de forzar una sola línea para que no
   se recorte — mejor que se parta a que quede invisible. */
@media (max-width:340px){
  .hero-box-white h1{ white-space:normal; }
}

/* --- Menú móvil (overlay navy con Inicio/Cupones/Liquidación/...):
   se veía chico, lo agrandamos junto con sus íconos --- */
.mobile-menu a{
  font-size:26px;
  gap:12px;
}
.mobile-menu a img{
  width:26px;
  height:26px;
}


/* ============ "Tienda: Amazon" chiquito, debajo del nombre (Cupones/Virales/Ofertas) ============ */

.tienda-amazon{
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--muted); margin:2px 0 6px;
}

.tienda-amazon-logo{
  height:14px; width:auto; display:block;
}

/* ============ Detalle de producto: 50/50 ancho completo (reemplaza pagina-producto.css y detalle-producto.css viejos) ============ */

.detalle-producto{ padding:40px 24px 70px; background:white; }

.detalle-volver{
  display:inline-block; margin-bottom:20px;
  color:var(--muted); font-weight:600; font-size:13.5px;
}
.detalle-volver:hover{ color:var(--navy); }

.detalle-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:start;
}

/* Imagen SIN encajonar: sin caja blanca, sin sombra de tarjeta, sin aspect-ratio forzado */
.detalle-media-img{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#EDE7D8;
}
.detalle-media-img img{
  width:100%;
  height:auto;
  display:block;
}

.detalle-info h1{
  font-size:26px; margin:0 0 10px; color:var(--ink); line-height:1.25;
}
.detalle-info .modal-producto-desc{ margin-top:0; }

@media (max-width:900px){
  .detalle-grid{
    grid-template-columns:1fr; /* imagen arriba, info abajo — orden natural del HTML */
    gap:28px;
  }
}


/* ============ Botón "Compartir este producto" ============ */

.lb-compartir-btn{
  display:block; width:100%; text-align:center;
  background:none; border:1px solid var(--line); color:var(--ink);
  font-weight:700; font-size:13.5px; padding:12px; border-radius:8px;
  cursor:pointer; font-family:inherit; margin-bottom:16px;
  transition:background .15s ease, border-color .15s ease;
}
.lb-compartir-btn:hover{ background:var(--paper); border-color:var(--muted); }