/* =====================================================
   Joyería El Palacio del Amor — design tokens
===================================================== */
:root{
  --color-gold: #B8872E;
  --color-gold-light: #E4C374;
  --color-gold-pale: #F6E9C9;
  --color-gold-dark: #82611D;
  --color-wine: #6E1F2B;
  --color-wine-dark: #4E1620;
  --color-wine-pale: #F3E1E1;
  --color-espresso: #4A3423;
  --color-espresso-dark: #33241A;
  --color-ink: #1C1712;
  --color-ink-soft: #2A2117;
  --color-cream: #FBF6EC;
  --color-cream-alt: #F3ECDD;
  --color-white: #FFFFFF;
  --color-border: #E7DCC3;
  --color-text: #2A2117;
  --color-muted: #716755;

  /* Toda la tipografía del sitio en Arial (pedido del cliente).
     Helvetica/sans-serif quedan como respaldo para equipos que no la tengan. */
  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --container: 1280px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(28,23,18,.07);
  --shadow-md: 0 12px 32px rgba(28,23,18,.12);
  --shadow-lg: 0 22px 48px rgba(28,23,18,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5{ font-family: var(--font-display); margin:0; color: var(--color-ink); font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
input,textarea,select{ font-family:inherit; }

:focus-visible{ outline: 2.5px solid var(--color-gold-dark); outline-offset: 2px; border-radius: 4px; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}

.icon{ width:20px; height:20px; }
.icon--xs{ width:13px; height:13px; }
.icon--sm{ width:17px; height:17px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight:600;
  font-size: .92rem;
  border:none;
  cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s;
}
.btn--gold{
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-ink);
  box-shadow: 0 10px 24px rgba(184,135,46,.35);
}
.btn--gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(184,135,46,.44); }
.btn--wine{ background: var(--color-wine); color:#fff; box-shadow: 0 10px 24px rgba(110,31,43,.3); }
.btn--wine:hover{ background: var(--color-wine-dark); transform: translateY(-2px); }
.btn--outline{ background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink); }
.btn--outline:hover{ background: var(--color-ink); color:#fff; }
.btn--outline-light{ background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,.6); }
.btn--outline-light:hover{ background: rgba(255,255,255,.14); border-color:#fff; }
.btn:active{ transform: translateY(0); }

/* Ornamental gold divider — signature motif */
.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 0 0 18px; }
.divider__line{ height:1px; width:64px; background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-gold)); }
.divider__line.divider__line--r{ background: linear-gradient(90deg, var(--color-gold), var(--color-gold), transparent); }
.divider__gem{ width:9px; height:9px; background: var(--color-gold); transform: rotate(45deg); flex-shrink:0; }
.divider--left{ justify-content:flex-start; }
.divider--left .divider__line:first-child{ display:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-gold-dark);
}

/* =====================================================
   Top bar
===================================================== */
.topbar{ background: var(--color-cream-alt); color: var(--color-muted); font-size:.8rem; border-bottom:1px solid var(--color-border); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:38px; gap:20px; }
.topbar__tagline{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__tagline strong{ color: var(--color-gold-dark); font-weight:600; }
.topbar__right{ display:flex; align-items:center; gap:18px; white-space:nowrap; }
.topbar__whatsapp{ display:flex; align-items:center; gap:6px; color: var(--color-ink); font-weight:600; }
.topbar__whatsapp:hover{ color: var(--color-gold-dark); }
.topbar__social{ display:flex; align-items:center; gap:12px; }
.topbar__social a{ color: var(--color-muted); opacity:.8; transition:opacity .2s, color .2s; }
.topbar__social a:hover{ opacity:1; color: var(--color-gold-dark); }

/* =====================================================
   Header
===================================================== */
.site-header{ background: var(--color-cream); border-bottom: 1px solid var(--color-border); position: sticky; top:0; z-index: 60; }
.header__inner{ display:flex; align-items:center; gap:26px; padding-block:10px; transition: padding .25s var(--ease); }
.site-header.is-compact .header__inner{ padding-block:6px; }
.site-header.is-compact .logo__img{ height:66px; }

.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
/* El logo nuevo es apaisado-cuadrado (ratio ~1.35) en vez del horizontal
   anterior, por eso necesita más alto para verse del mismo tamaño. */
.logo__img{ height:96px; width:auto; display:block; transition: height .25s var(--ease); }
.logo--footer .logo__img{ height:96px; }

/* min-width:0 para que el buscador pueda encogerse dentro del header en
   pantallas medianas; sin esto empujaba el header fuera de la pantalla. */
.search{ position:relative; flex:1; min-width:0; display:flex; max-width: 620px; }
.search__results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:65;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow:hidden;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.search__results.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.search__result{ display:flex; align-items:center; gap:12px; padding:10px 14px; }
.search__result:hover, .search__result.is-active{ background: var(--color-cream-alt); }
.search__result img{ width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; background: var(--color-cream-alt); }
.search__result div{ min-width:0; }
.search__result strong{ display:block; font-size:.86rem; color: var(--color-text); font-weight:600; }
.search__result span{ display:block; font-size:.74rem; color: var(--color-muted); }
.search__empty{ padding:16px; font-size:.86rem; color: var(--color-muted); text-align:center; }
.search__more{ display:block; padding:10px 14px; font-size:.8rem; font-weight:700; color: var(--color-gold-dark); border-top:1px solid var(--color-cream-alt); text-align:center; }
.search__more:hover{ background: var(--color-cream-alt); }
.search__select{
  border: 1.5px solid var(--color-border); border-right:none;
  background: var(--color-white); padding: 0 14px; font-size:.86rem;
  color: var(--color-muted); border-radius: 10px 0 0 10px;
}
.search__input{
  flex:1; min-width:0; border: 1.5px solid var(--color-border); border-left:none; border-right:none;
  padding: 12px 16px; font-size:.92rem; background: var(--color-white);
  transition: border-color .2s;
}
.search__input:focus{ outline:none; border-color: var(--color-gold); }
/* Botón gris (#CCCCCC) con texto oscuro: sobre ese gris el texto blanco no
   se leería (1.6:1), en oscuro queda en 11:1. */
.search__btn{
  display:flex; align-items:center; gap:8px;
  background: #CCCCCC; color: var(--color-ink);
  border: 1.5px solid var(--color-border); border-left:none;
  padding: 0 22px; border-radius: 0 10px 10px 0; font-weight:600; font-size:.88rem;
  transition: background .2s;
}
.search__btn:hover{ background: #BDBDBD; }

.header__actions{ display:flex; align-items:center; gap:20px; flex-shrink:0; }
.header__call{ display:flex; align-items:center; gap:10px; }
.header__call-icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background: var(--color-gold-pale); color: var(--color-gold-dark); }
.header__call-text{ display:flex; flex-direction:column; font-size:.72rem; color: var(--color-muted); line-height:1.5; white-space:nowrap; }
.header__call-text strong{ font-size:.9rem; color: var(--color-ink); font-family: var(--font-display); }

.hamburger{ display:none; width:42px; height:42px; border-radius:10px; background: var(--color-cream-alt); border:none; color: var(--color-ink); align-items:center; justify-content:center; flex-shrink:0; }

/* =====================================================
   Nav bar
===================================================== */
/* El navbar se pega justo DEBAJO del header (que también es sticky); si ambos
   usaran top:0 el header taparía el menú al hacer scroll y quedaba un hueco
   vacío. --header-h lo calcula js/main.js según la altura real del header. */
.navbar{ background: var(--color-white); border-bottom:1px solid var(--color-border); box-shadow: var(--shadow-sm); position: sticky; top: var(--header-h, 104px); z-index:50; }
.navbar__inner{ display:flex; align-items:center; gap:4px; height:52px; }
.main-nav{ display:flex; align-items:center; gap:2px; flex:1; height:100%; }
/* Items are static so the mega menu anchors to the sticky navbar (full width)
   and never clips at the viewport edge; only dropdown items need a local anchor. */
.main-nav__item{ position:static; height:100%; display:flex; align-items:center; }
.main-nav__item:has(.dropdown){ position:relative; }
.main-nav__link{
  display:flex; align-items:center; gap:6px; height:100%;
  padding: 0 17px; color: var(--color-text); font-weight:600; font-size:.88rem;
  transition: background .2s, color .2s;
}
.main-nav__link:hover, .main-nav__link.is-active{ background: var(--color-cream-alt); color: var(--color-gold-dark); }
.main-nav__link .icon{ transition: transform .25s var(--ease); }
.main-nav__item:hover .main-nav__link .icon, .main-nav__item.is-open .main-nav__link .icon{ transform: rotate(180deg); }

.promo-pill{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-ink); padding: 8px 18px; border-radius:999px;
  font-weight:700; font-size:.82rem; flex-shrink:0;
}
.promo-pill:hover{ filter: brightness(1.06); }

/* Simple dropdown (Quiénes Somos) */
.dropdown{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lg); padding:8px;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  z-index:55;
}
.main-nav__item:hover .dropdown, .main-nav__item.is-open .dropdown{
  opacity:1; visibility:visible; transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.dropdown a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; font-size:.87rem; font-weight:600; color: var(--color-ink); }
.dropdown a:hover{ background: var(--color-cream-alt); color: var(--color-wine); padding-left:18px; }

/* Mega menu (Productos) — anchored to the navbar, centered, clamped to viewport
   6 columnas (JOYAS / RELOJERÍA / TROFEOS & PLACAS / PERFUMES /
   CORPORATIVOS & REGALOS / IMPLE. DEPORTIVOS), misma distribución de la
   página antigua más Corporativos, que antes solo se alcanzaba por el
   buscador; el título de cada columna enlaza a su sección en productos.html. */
.mega{
  position:absolute; top:100%; left:50%;
  width:min(1180px, calc(100vw - 32px));
  background:#fff; border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 24px 24px 0;
  display:grid; grid-template-columns: repeat(6,1fr); gap: 0 18px;
  opacity:0; visibility:hidden; transform: translate(-50%,-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  z-index:55;
}
.main-nav__item:hover .mega, .main-nav__item.is-open .mega{
  opacity:1; visibility:visible; transform: translate(-50%,0);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.mega__col{ padding:0 14px 20px; border-left:1px solid var(--color-cream-alt); }
.mega__col:first-child{ border-left:none; padding-left:0; }
.mega__col:nth-child(6){ padding-right:0; }
.mega__col-img{ width:100%; aspect-ratio: 16/10; border-radius: var(--radius-sm); object-fit:cover; margin-bottom:12px; border:1px solid var(--color-border); }
.mega__col h5{ font-family: var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--color-gold-dark); margin-bottom:10px; }
.mega__col h5 a{ color:inherit; }
.mega__col h5 a:hover{ color: var(--color-wine); text-decoration:underline; }
.mega__col a{ display:block; padding:5px 0; font-size:.85rem; color: var(--color-text); font-weight:500; transition: color .2s, padding-left .2s; }
.mega__col a:hover{ color: var(--color-wine); padding-left:4px; }
.mega__more{ margin-top:2px; font-weight:700 !important; color: var(--color-gold-dark) !important; font-size:.78rem !important; }
.mega__foot{
  grid-column: 1 / -1; margin-top:2px; padding:16px 0; border-top:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.mega__foot p{ font-size:.82rem; color: var(--color-muted); }
.mega__foot p strong{ color: var(--color-ink); }
.mega__cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color: var(--color-wine); font-size:.9rem; white-space:nowrap; }
.mega__cta:hover{ color: var(--color-gold-dark); }

/* =====================================================
   Page hero banner (subpages)
===================================================== */
.page-hero{
  position:relative;
  background:
    radial-gradient(120% 180% at 15% 0%, rgba(184,135,46,.16), transparent 60%),
    linear-gradient(120deg, var(--color-cream-alt), var(--color-cream) 60%, var(--color-gold-pale));
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  padding: 56px 0;
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(184,135,46,.4) 1px, transparent 1.4px);
  background-size: 22px 22px; opacity:.3; pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; }
.page-hero .eyebrow{ color: var(--color-gold-dark); }
.page-hero h1{ color: var(--color-ink); font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 10px 0 12px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.82rem; color: var(--color-muted); }
.breadcrumb a:hover{ color: var(--color-gold-dark); }

/* =====================================================
   Hero (home)
===================================================== */
.hero{ display:grid; grid-template-columns: 1fr 320px; gap:22px; padding-block:28px; }
.hero__slider{ position:relative; border-radius: var(--radius-lg); overflow:hidden; min-height:480px; background: var(--color-cream-alt); }
/* Cada slide admite dos imágenes: --img (horizontal, computadora/tablet) y
   --img-movil (vertical, celular). En celular el hueco es más alto que ancho,
   así que una foto horizontal se recortaría demasiado. Si un slide no tiene
   versión de celular, se usa la horizontal automáticamente. */
.hero__slide{
  position:absolute; inset:0; display:flex; align-items:center; padding:0 60px;
  background-image: linear-gradient(100deg, rgba(15,12,8,.55) 0%, rgba(15,12,8,.05) 60%), var(--img);
  background-size:cover; background-position:center;
  opacity:0; visibility:hidden; transform: scale(1.04);
  transition: opacity .8s var(--ease), transform 7s linear, visibility 0s linear .8s;
}
@media (max-width: 560px){
  .hero__slide{
    /* velo parejo: el texto va centrado, así se lee sobre cualquier foto */
    background-image: linear-gradient(180deg, rgba(15,12,8,.42) 0%, rgba(15,12,8,.62) 100%), var(--img-movil, var(--img));
  }
}
.hero__slide.is-active{ opacity:1; visibility:visible; transform: scale(1); transition: opacity .8s var(--ease), transform 7s linear; }
.hero__copy{ max-width:480px; color:#fff; }
.hero__copy .eyebrow{ color: var(--color-gold-light); }
.hero__slide h1{ font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height:1.12; color:#fff; margin: 14px 0 16px; font-style:italic; }
.hero__desc{ font-size:.98rem; line-height:1.6; color:#EDE6D8; margin-bottom:26px; max-width:420px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Las flechas van abajo a la derecha: antes iban a media altura sobre los
   bordes y la de la izquierda se montaba encima del título del slider. */
.hero__nav{ position:absolute; bottom:22px; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); display:grid; place-items:center; color:#fff; opacity:0; transition: opacity .25s, background .2s, transform .2s; z-index:5; }
.hero__slider:hover .hero__nav, .hero__nav:focus-visible{ opacity:1; }
.hero__nav:hover{ background: rgba(255,255,255,.34); transform: scale(1.06); }
.hero__nav--prev{ right:74px; } .hero__nav--next{ right:24px; }
.hero__dots{ position:absolute; left:60px; bottom:26px; display:flex; gap:9px; z-index:5; }
.hero__dot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.4); border:none; padding:0; cursor:pointer; transition: background .25s, width .25s; }
.hero__dot.is-active{ background: var(--color-gold-light); width:26px; border-radius:6px; }

/* Accesos rápidos junto al slider — antes eran 3 tarjetas grandes con foto de
   fondo teñida cuya imagen no correspondía al rótulo. Ahora son 6 cuadros
   blancos con la foto real del producto y el nombre debajo: se muestran más
   productos y el texto no depende del color de la foto. */
.promo-stack{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; align-content:start; }
.promo-tile{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.promo-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--color-gold-light); }
.promo-tile img{ width:100%; aspect-ratio: 1/1; object-fit:contain; display:block; padding:10px; background:#fff; }
.promo-tile span{
  display:block; text-align:center; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; color: var(--color-ink);
  padding:7px 6px; border-top:1px solid var(--color-cream-alt);
}

/* Stats ribbon */
.stats{ background: var(--color-gold-pale); border-block: 1px solid var(--color-border); }
.stats__inner{ display:grid; grid-template-columns: repeat(4,1fr); padding-block:32px; }
.stat{ text-align:center; border-right:1px solid rgba(28,23,18,.1); padding: 0 12px; }
.stat:last-child{ border-right:none; }
.stat strong{ display:block; font-family: var(--font-display); font-size: clamp(1.7rem,2.4vw,2.3rem); color: var(--color-gold-dark); }
.stat span{ font-size:.78rem; color: var(--color-ink-soft); letter-spacing:.03em; }

/* =====================================================
   Section headers
===================================================== */
.section{ padding-block: 56px; }
.section--alt{ background: var(--color-cream-alt); }
.section__head{ text-align:center; max-width:640px; margin: 0 auto 40px; }
.section__head h2{ font-size: clamp(1.6rem,2.6vw,2.1rem); margin: 10px 0 12px; }
.section__head p{ color: var(--color-muted); font-size:.96rem; line-height:1.6; }

/* Category grid (home) — foto del producto en cuadro blanco, texto debajo.
   Antes el texto iba encima de la foto con un degradado oscuro: el producto
   se perdía y el color del texto cambiaba según la foto. */
.cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.cat-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.cat-card__media{ display:block; background:#fff; padding:12px; }
.cat-card__media img{ width:100%; aspect-ratio: 4/3; object-fit:contain; display:block; }
.cat-card__body{ padding: 4px 18px 18px; border-top:1px solid var(--color-cream-alt); padding-top:14px; }
.cat-card__body span{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--color-gold-dark); font-weight:700; }
.cat-card__body h3{ color: var(--color-ink); font-size:1rem; margin:5px 0 8px; line-height:1.3; }
.cat-card__body .cat-card__cta{ font-size:.76rem; font-weight:700; color: var(--color-wine); display:inline-flex; align-items:center; gap:6px; }

/* Quote banner */
.quote-banner{
  background: var(--color-cream-alt);
  border-block: 1px solid var(--color-border);
  color: var(--color-ink); text-align:center; padding: 48px 24px;
}
.quote-banner svg{ color: var(--color-gold); }
.quote-banner blockquote{ max-width:760px; margin:0 auto; font-family: var(--font-display); font-style:italic; color: var(--color-ink-soft); font-size: clamp(1.1rem,1.8vw,1.4rem); line-height:1.5; }

/* Product grid & cards */
.product-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.product-card{ background:#fff; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--color-border); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.product-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Fondo blanco (no crema) para que las fotos de producto —que casi todas
   vienen recortadas sobre blanco— se fundan con el cuadro y no se vean
   franjas de color alrededor del producto. */
.product-card__img{
  position:relative; aspect-ratio: 1/1;
  background-color:#fff;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-origin:content-box; background-clip:content-box;
  padding:14px;
  border-bottom:1px solid var(--color-cream-alt);
}
.product-card__badge{ position:absolute; top:12px; left:12px; background: var(--color-wine); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.06em; padding:4px 9px; border-radius:999px; }
.product-card__body{ padding: 14px 16px 18px; }
.product-card__cat{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-gold-dark); font-weight:700; }
.product-card__body h3{ font-size:.92rem; margin: 5px 0 6px; line-height:1.3; }
.product-card__body p{ font-size:.78rem; color: var(--color-muted); line-height:1.5; }
.product-card__cta{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color: var(--color-wine); }

/* Photo grid (category listing pages — real product photos) */
.photo-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.photo-card{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  overflow:hidden; display:block;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* contain (no cover): así no se recorta el producto y queda entero dentro
   del cuadro blanco, igual en todas las fotos aunque vengan de distinto tamaño. */
.photo-card img{ width:100%; aspect-ratio: 1/1; object-fit:contain; display:block; background:#fff; padding:10px; }
.photo-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.photo-card__foot{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; font-size:.78rem; font-weight:700; color: var(--color-gold-dark); border-top:1px solid var(--color-cream-alt); }

/* =====================================================
   Popup publicitario del Inicio
===================================================== */
.promo-popup{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.promo-popup.is-open{ opacity:1; visibility:visible; transition: opacity .3s var(--ease); }
.promo-popup__backdrop{ position:absolute; inset:0; background: rgba(15,12,8,.7); }
.promo-popup__panel{
  position:relative; z-index:1; background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:14px;
  width:min(460px, 100%); max-height:92vh;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transform: scale(.94); transition: transform .3s var(--ease);
}
.promo-popup.is-open .promo-popup__panel{ transform: scale(1); }
.promo-popup__x{
  position:absolute; top:-12px; right:-12px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:#fff; color: var(--color-ink); display:grid; place-items:center;
  box-shadow: var(--shadow-md); transition: transform .2s, background .2s;
}
.promo-popup__x:hover{ background: var(--color-cream-alt); transform: scale(1.08); }
.promo-popup__link{ display:block; width:100%; border-radius: var(--radius-md); overflow:hidden; }
.promo-popup__link img{ width:100%; height:auto; max-height:70vh; object-fit:contain; display:block; }
.promo-popup__close{ width:100%; }

@media (max-width: 560px){
  .promo-popup{ padding:16px; }
  .promo-popup__x{ top:6px; right:6px; }
}

/* =====================================================
   Lightbox — vista rápida de una foto de producto
===================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition: opacity .25s var(--ease); }
.lightbox__backdrop{ position:absolute; inset:0; background: rgba(15,12,8,.72); backdrop-filter: blur(2px); }
.lightbox__panel{
  position:relative; z-index:1; background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width:min(920px, 100%); max-height: 90vh;
  display:grid; grid-template-columns: 1.3fr 1fr; overflow:hidden;
  transform: scale(.96) translateY(8px); transition: transform .25s var(--ease);
}
.lightbox.is-open .lightbox__panel{ transform: scale(1) translateY(0); }
.lightbox__media{ position:relative; background:#fff; display:flex; align-items:center; justify-content:center; min-height:280px; }
.lightbox__media img{ width:100%; height:100%; max-height:80vh; object-fit:contain; display:block; }
.lightbox__close{
  position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--color-ink); display:grid; place-items:center;
  box-shadow: var(--shadow-sm); transition: background .2s, transform .2s;
}
.lightbox__close:hover{ background:#fff; transform: scale(1.06); }
.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.88); color: var(--color-ink); display:grid; place-items:center;
  box-shadow: var(--shadow-sm); transition: background .2s, transform .2s;
}
.lightbox__nav:hover{ background:#fff; }
.lightbox__nav--prev{ left:14px; }
.lightbox__nav--next{ right:14px; }
.lightbox__nav:disabled{ opacity:.35; pointer-events:none; }
.lightbox__info{ padding:28px 26px; display:flex; flex-direction:column; overflow-y:auto; }
.lightbox__count{ font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-gold-dark); margin-bottom:8px; }
.lightbox__info h3{ font-size:1.3rem; margin-bottom:10px; }
.lightbox__info p{ font-size:.92rem; color: var(--color-muted); line-height:1.6; margin-bottom:22px; }
.lightbox__info .btn{ margin-top:auto; width:100%; }

/* Gallery strip (history photos) */
.gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-top:22px; }
.gallery img{ width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius: var(--radius-sm); border:1px solid var(--color-border); display:block; }

/* Hub group header */
.hub-group{ margin-bottom:52px; }
.hub-group__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; }
.hub-group__head h2{ font-size:1.45rem; }
.hub-group__head span{ font-size:.82rem; color: var(--color-muted); white-space:nowrap; }

/* Filter chips */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.filter-chip{
  padding: 9px 20px; border-radius:999px; border:1.5px solid var(--color-border);
  background:#fff; font-size:.86rem; font-weight:600; color: var(--color-text);
  transition: background .2s, color .2s, border-color .2s;
}
.filter-chip:hover{ border-color: var(--color-gold); }
.filter-chip.is-active{ background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); border-color: var(--color-gold); color: var(--color-ink); }

/* Features strip */
.features{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
.feature{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding:20px 18px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.feature:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feature__icon{ flex-shrink:0; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background: var(--color-gold-pale); color: var(--color-gold-dark); }
.feature h4{ font-size:.9rem; margin-bottom:3px; font-family: var(--font-body); font-weight:700; }
.feature p{ font-size:.78rem; color: var(--color-muted); line-height:1.4; }

/* Timeline (history) */
.timeline{ position:relative; padding-left: 32px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background: var(--color-border); }
.timeline__item{ position:relative; padding-bottom: 34px; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{ content:""; position:absolute; left:-32px; top:4px; width:14px; height:14px; border-radius:50%; background: var(--color-gold); border:3px solid var(--color-cream); box-shadow: 0 0 0 2px var(--color-gold); }
.timeline__year{ font-family: var(--font-display); font-weight:700; color: var(--color-wine); font-size:1.05rem; margin-bottom:6px; }
.timeline__item p{ color: var(--color-text); line-height:1.7; font-size:.94rem; }

/* Sidebar (subpages) */
.layout-sidebar{ display:grid; grid-template-columns: 1fr 300px; gap:36px; align-items:start; }
/* Los items de grid traen min-width:auto y por eso una palabra larga (un
   correo, por ejemplo) podía ensanchar la columna y sacar la página de la
   pantalla en móvil. */
.layout-sidebar > *{ min-width:0; }
/* Variantes por clase (antes iban como style="" en el HTML, y al ser estilos
   en línea le ganaban a las media queries: en móvil no se apilaban y la
   página se salía de la pantalla). */
.layout-sidebar--form{ grid-template-columns: 1.2fr 1fr; }
.branch-grid--3{ grid-template-columns: repeat(3,1fr); }
.side-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding:22px; }
.side-card h5{ font-family: var(--font-display); font-size:1.05rem; margin-bottom:14px; }
.side-card ul{ display:flex; flex-direction:column; gap:2px; }
.side-card a{ display:flex; align-items:center; justify-content:space-between; padding:10px 4px; font-size:.88rem; font-weight:600; border-bottom:1px solid var(--color-cream-alt); transition: color .2s, padding-left .2s; }
.side-card a:hover{ color: var(--color-wine); padding-left:6px; }
.side-card--cta{ background: var(--color-gold-pale); border-color: var(--color-gold-light); text-align:center; }
.side-card--cta h5{ color: var(--color-ink); }
.side-card--cta p{ font-size:.85rem; color: var(--color-ink-soft); margin-bottom:16px; line-height:1.5; }

.prose h2{ font-size:1.25rem; margin: 30px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ line-height:1.8; color: var(--color-text); margin-bottom:14px; font-size:.95rem; }
.prose ul{ margin: 0 0 16px; display:flex; flex-direction:column; gap:8px; }
.prose ul li{ display:flex; gap:10px; font-size:.95rem; line-height:1.6; }
.prose ul li .icon{ color: var(--color-gold-dark); flex-shrink:0; margin-top:3px; }
.pillars{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-bottom:20px; }
.pillar{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:16px 18px; display:flex; gap:12px; align-items:flex-start; }
.pillar .icon{ color: var(--color-gold-dark); flex-shrink:0; margin-top:2px; }
.pillar strong{ display:block; font-size:.92rem; margin-bottom:2px; }
.pillar span{ font-size:.82rem; color: var(--color-muted); }

/* Accordion (FAQ) */
.accordion{ display:flex; flex-direction:column; gap:12px; }
.accordion__item{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; }
.accordion__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:none; border:none; text-align:left; font-family: var(--font-body); font-weight:700; font-size:.96rem; color: var(--color-ink); }
.accordion__q .icon{ flex-shrink:0; transition: transform .25s var(--ease); color: var(--color-gold-dark); }
.accordion__item.is-open .accordion__q .icon{ transform: rotate(180deg); }
.accordion__a{ max-height:0; overflow:hidden; transition: max-height .3s var(--ease); }
.accordion__a p{ padding: 0 20px 18px; color: var(--color-muted); font-size:.9rem; line-height:1.6; }

/* Process steps (genuine sequence) */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; counter-reset: step; }
.step{ position:relative; padding-top:8px; }
.step::before{
  counter-increment: step; content: counter(step,decimal-leading-zero);
  font-family: var(--font-display); font-size:2.4rem; font-weight:700;
  color: var(--color-gold-light); -webkit-text-stroke: 1.5px var(--color-gold-dark);
  display:block; margin-bottom:10px;
}
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ font-size:.88rem; color: var(--color-muted); line-height:1.6; }
.step:not(:last-child)::after{ content:""; position:absolute; top:26px; left:calc(100% - 4px); width:calc(100% - 20px); height:1px; border-top:1.5px dashed var(--color-border); display:none; }
@media (min-width:861px){ .step:not(:last-child)::after{ display:block; } }

/* Service cards */
.service-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.service-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding:28px 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.service-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-card__icon{ width:54px; height:54px; border-radius:14px; background: linear-gradient(135deg, var(--color-gold-pale), #fff); color: var(--color-gold-dark); display:grid; place-items:center; margin-bottom:16px; }
.service-card h3{ font-size:1.08rem; margin-bottom:8px; }
.service-card p{ font-size:.88rem; color: var(--color-muted); line-height:1.6; }

/* Branch / contact cards */
.branch-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.branch-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding:26px; }
.branch-card h3{ font-size:1.1rem; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.branch-card h3 .icon{ color: var(--color-wine); }
.branch-row{ display:flex; gap:10px; font-size:.88rem; color: var(--color-text); padding:8px 0; border-top:1px solid var(--color-cream-alt); }
.branch-row:first-of-type{ border-top:none; }
.branch-row .icon{ color: var(--color-gold-dark); flex-shrink:0; margin-top:2px; }
.branch-row strong{ display:block; font-size:.78rem; color: var(--color-muted); font-weight:600; }

.map-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.map-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; }
.map-card h4{ display:flex; align-items:center; gap:8px; font-size:.92rem; padding:14px 16px; border-bottom:1px solid var(--color-border); }
.map-card h4 .icon{ color: var(--color-wine); flex-shrink:0; }
.map-card iframe{ width:100%; aspect-ratio: 4/3; border:0; display:block; }
.map-card__link{ display:block; padding:10px 16px; font-size:.8rem; font-weight:600; color: var(--color-gold-dark); border-top:1px solid var(--color-cream-alt); }

/* Contact form */
.form-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-size:.82rem; font-weight:600; color: var(--color-text); }
.field input, .field select, .field textarea{
  border: 1.5px solid var(--color-border); border-radius: 10px; padding: 12px 14px;
  font-size:.9rem; background: var(--color-cream); transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--color-gold); background:#fff; }
.field textarea{ resize: vertical; min-height:110px; }
.form-note{ font-size:.78rem; color: var(--color-muted); margin-top:14px; line-height:1.5; }
.form-success{ display:none; align-items:center; gap:10px; background: var(--color-gold-pale); color: var(--color-gold-dark); padding:14px 16px; border-radius:10px; font-size:.88rem; font-weight:600; margin-bottom:16px; }
.form-success.is-visible{ display:flex; }

/* News */
.news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.news-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.news-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.news-card__img{ aspect-ratio: 16/10; background-size:cover; background-position:center; position:relative; }
.news-card__tag{ position:absolute; top:12px; left:12px; background: rgba(28,23,18,.82); color: var(--color-gold-light); font-size:.66rem; font-weight:700; letter-spacing:.05em; padding:5px 10px; border-radius:999px; }
.news-card__body{ padding:18px 20px 22px; }
.news-card__date{ font-size:.76rem; color: var(--color-muted); font-weight:600; }
.news-card__body h3{ font-size:1.02rem; margin: 8px 0 10px; line-height:1.35; }
.news-card__body p{ font-size:.85rem; color: var(--color-muted); line-height:1.6; }
.placeholder-note{
  background: var(--color-gold-pale); border:1px dashed var(--color-gold); border-radius: var(--radius-sm);
  padding: 14px 18px; font-size:.85rem; color: var(--color-gold-dark); display:flex; gap:10px; align-items:flex-start;
  max-width: 760px; margin: 0 auto 36px;
}
.placeholder-note .icon{ flex-shrink:0; margin-top:2px; }

/* WhatsApp floating button */
.wa-float{
  position:fixed; left:22px; bottom:22px; z-index:70;
  display:flex; align-items:center; gap:10px;
  background:#17823F; color:#fff; padding:14px 20px; border-radius:999px;
  font-weight:700; font-size:.86rem; box-shadow: 0 12px 26px rgba(23,130,63,.4);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(37,211,102,.5); }

/* =====================================================
   Footer
===================================================== */
/* Gris #CCCCCC, el mismo de la página antigua. Sobre ese gris el gris-texto
   normal se queda corto de contraste, así que dentro del footer se redefinen
   los tokens a tonos un poco más oscuros (solo aquí, no afecta al resto). */
.site-footer{
  background: #CCCCCC;
  color: #5C5343;
  border-top: 1px solid rgba(0,0,0,.14);
  margin-top: 20px;
  --color-muted: #5C5343;
  --color-gold-dark: #6B5018;
  --color-border: rgba(0,0,0,.14);
}
.footer__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:32px; padding-block:52px 36px; }
.footer__col h5{ color: var(--color-ink); font-family: var(--font-display); font-size:1rem; margin-bottom:18px; }
.footer__col ul{ display:flex; flex-direction:column; gap:12px; font-size:.86rem; }
.footer__col a:hover{ color: var(--color-gold-dark); }
.footer__col--brand p{ font-size:.86rem; line-height:1.7; margin: 14px 0 20px; max-width:300px; }
.logo--footer .logo__name{ color: var(--color-ink); }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: var(--color-white); border:1px solid var(--color-border); color: var(--color-ink); transition: background .2s, transform .2s, border-color .2s; }
.footer__social a:hover{ background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink); transform: translateY(-2px); }
.footer__contact li{ display:flex; align-items:flex-start; gap:10px; color: var(--color-text); }
.footer__contact .icon{ color: var(--color-gold-dark); flex-shrink:0; margin-top:3px; }

.payments{ border-top:1px solid var(--color-border); padding-block:22px; }
.payments__label{ font-size:.76rem; color: var(--color-muted); margin-bottom:12px; }
.payments__row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.payments__badge{ background: var(--color-white); border:1px solid var(--color-border); padding:7px 14px; border-radius:8px; font-size:.74rem; font-weight:700; letter-spacing:.03em; color: var(--color-text); }
.payments__row img{ height:34px; width:auto; background:#fff; border:1px solid var(--color-border); border-radius:8px; padding:5px 10px; display:block; }

.footer__bottom{ display:flex; align-items:center; justify-content:space-between; padding-block:18px; border-top:1px solid var(--color-border); font-size:.76rem; color: var(--color-muted); }

/* =====================================================
   Responsive
===================================================== */
@media (max-width: 1100px){
  /* El bloque "Llámanos" no encogía y empujaba el header fuera de la pantalla
     en tablets (aparecía barra de scroll horizontal). */
  .header__call{ display:none; }
  .hero{ grid-template-columns: 1fr; }
  .promo-stack{ grid-template-columns: repeat(6,1fr); }
  .hero__slider{ min-height:400px; }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .product-grid{ grid-template-columns: repeat(3,1fr); }
  .photo-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery{ grid-template-columns: repeat(3,1fr); }
  .features{ grid-template-columns: repeat(3,1fr); }
  .layout-sidebar, .layout-sidebar--form{ grid-template-columns: 1fr; }
  .branch-grid--3{ grid-template-columns: repeat(2,1fr); }
  .stats__inner{ grid-template-columns: repeat(2,1fr); row-gap:24px; }
  .stat:nth-child(2){ border-right:none; }
  .service-grid{ grid-template-columns: repeat(2,1fr); }
  .news-grid{ grid-template-columns: repeat(2,1fr); }
  .map-grid{ grid-template-columns: 1fr; }
  /* 6 columnas → 2 filas de 3 */
  .mega{ grid-template-columns: repeat(3,1fr); width:min(760px, calc(100vw - 32px)); }
  .mega__col{ border-left:1px solid var(--color-cream-alt); border-top:none; padding:0 14px 18px; }
  .mega__col:nth-child(3n+1){ border-left:none; padding-left:0; }
  .mega__col:nth-child(3n){ padding-right:0; }
  .mega__col:nth-child(n+4){ border-top:1px solid var(--color-cream-alt); padding-top:16px; }
  .mega__foot{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width: 860px){
  .topbar__social{ display:none; }
  .header__call{ display:none; }
  /* flex-basis 100% SIN encoger: obliga al buscador a bajar a su propia fila.
     Con width:100% + flex-shrink por defecto se quedaba apretado junto al logo. */
  .search{ order:3; flex: 1 0 100%; max-width:none; margin-top:12px; }
  .header__inner{ flex-wrap:wrap; }
  .hamburger{ display:flex; }
  .main-nav{ position:absolute; top:100%; left:0; right:0; background: var(--color-white); border-bottom:1px solid var(--color-border); box-shadow: var(--shadow-md); flex-direction:column; align-items:stretch; padding:8px; gap:2px; max-height:0; overflow:hidden; transition: max-height .3s var(--ease); height:auto; z-index:54; }
  .main-nav.is-open{ max-height:600px; overflow-y:auto; }
  .main-nav__item{ height:auto; flex-direction:column; align-items:stretch; }
  .main-nav__link{ padding:13px 16px; }
  .dropdown, .mega{ position:static; left:auto; opacity:1; visibility:visible; transform:none; box-shadow:none; background: var(--color-cream-alt); width:auto; display:none; grid-template-columns:1fr; padding:6px 6px 6px 18px; transition:none; }
  .main-nav__item.is-open .dropdown, .main-nav__item.is-open .mega{ display:grid; transform:none; }
  .main-nav__item:hover .dropdown, .main-nav__item:hover .mega{ transform:none; }
  .dropdown a, .mega__col a{ color: var(--color-text); }
  .mega__col{ border-left:none !important; border-top:1px solid var(--color-cream-alt); padding:14px 0 !important; }
  .mega__col:first-child{ border-top:none; }
  .mega__col-img{ display:none; }
  .mega__foot{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px 0; }
  .navbar__inner{ flex-wrap:wrap; position:relative; }
  .promo-pill span{ display:none; }
  .promo-stack{ grid-template-columns: repeat(3,1fr); }
  .cat-grid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .photo-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .features{ grid-template-columns: repeat(2,1fr); }
  .form-row{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .news-grid{ grid-template-columns: 1fr; }
  .branch-grid, .branch-grid--3{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .pillars{ grid-template-columns: 1fr; }
  .lightbox{ padding:0; }
  .lightbox__panel{ grid-template-columns:1fr; max-height:100vh; height:100%; border-radius:0; overflow-y:auto; }
  .lightbox__media{ min-height:220px; }
  .lightbox__media img{ max-height:46vh; }
}

@media (max-width: 560px){
  .search__select{ display:none; }
  .search__input{ border-left:1.5px solid var(--color-border); border-radius:10px 0 0 10px; }
  .search__btn span{ display:none; }
  /* espacio abajo para que los botones no choquen con los puntos y las flechas */
  .hero__slide{ padding: 0 24px 62px; }
  .hero__dots{ left:24px; bottom:16px; }
  .hero__nav{ bottom:14px; width:34px; height:34px; }
  .hero__nav--prev{ right:64px; } .hero__nav--next{ right:20px; }
  .product-grid{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .stats__inner{ grid-template-columns: 1fr 1fr; }
  .wa-float span{ display:none; }
  .wa-float{ padding:14px; }
}