/* =========================================================
   MAF · Maderas y Construcción — Hoja de estilos principal
   Paleta tomada del LOGO 5 (verde + madera) + blanco
   ---------------------------------------------------------
   Los nombres de variables se conservan (--naranja, --azul…)
   para no reescribir todo el sitio, pero los VALORES son los
   corporativos del logo:
     --verde   = verde de las letras MAF
     --naranja = madera del marco (color de acción)
     --azul    = madera oscura (superficies oscuras)
     --amarillo= veta clara / arena (destacados)
   ========================================================= */

:root{
  /* Marca — colores tomados del LOGO 5 */
  --verde:        #1C441F;   /* verde MAF (letras del logo) */
  --verde-osc:    #102B13;
  --verde-claro:  #2F5532;
  --verde-soft:   #EAF0EA;
  --naranja:      #9C4B22;   /* madera MAF (marco del logo) */
  --naranja-osc:  #7E3B19;
  --naranja-soft: #F8EFE8;
  --azul:         #4A2E1D;   /* madera oscura — superficies oscuras */
  --azul-osc:     #2E1C11;
  --azul-soft:    #F2EBE4;
  --azul-vivo:    #9C4B22;
  --azul-vivo-osc:#7E3B19;
  --amarillo:     #E2D5C6;   /* veta clara del logo */
  --amarillo-osc: #CBBBA7;

  /* Neutros */
  --blanco:  #FFFFFF;
  --gris-05: #F8F8F6;
  --gris-10: #EDEDE9;
  --gris-20: #DCDBD5;
  --gris-40: #A9A79E;
  --gris-60: #6E6C64;
  --gris-80: #3F3E39;
  --texto:   #22261F;
  --amarillo-soft:#F7F1E8;
  --texto-2: #5D6157;

  /* Sistema */
  --radio:     14px;
  --radio-sm:  10px;
  --radio-lg:  22px;
  --sombra:    0 1px 2px rgba(16,26,38,.06), 0 6px 20px rgba(16,26,38,.07);
  --sombra-md: 0 2px 6px rgba(16,26,38,.08), 0 14px 34px rgba(16,26,38,.10);
  --sombra-lg: 0 10px 50px rgba(16,26,38,.16);
  --trans:     180ms cubic-bezier(.4,0,.2,1);
  --header-h:  76px;
  --max:       1240px;

  --font-tit: "Archivo", "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-txt: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--blanco); color:var(--texto);
  font-family:var(--font-txt); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-tit); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(2.1rem,5.4vw,4rem); font-weight:900; text-transform:uppercase; letter-spacing:-.025em; }
h2{ font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:900; text-transform:uppercase; }
h3{ font-size:clamp(1.15rem,1.9vw,1.4rem); }
p{ margin:0 0 1rem; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--naranja); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--naranja); color:#fff; }

/* ---------- Utilidades ---------- */
.contenedor{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px; }
.seccion{ padding:clamp(56px,7vw,104px) 0; }
.seccion--gris{ background:var(--gris-05); }
.seccion--verde{ background:var(--verde); color:#fff; }
.seccion--azul{ background:var(--azul); color:#fff; }
.centrado{ text-align:center; }
.solo-lector{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.saltar{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--naranja); color:#fff; padding:12px 20px; font-weight:700; }
.saltar:focus{ left:12px; top:12px; }

.encabezado-seccion{ max-width:760px; margin:0 auto clamp(32px,4vw,56px); text-align:center; }
.encabezado-seccion p{ color:var(--texto-2); font-size:1.06rem; margin:0; }
.seccion--verde .encabezado-seccion p,
.seccion--azul .encabezado-seccion p{ color:rgba(255,255,255,.8); }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-tit); font-weight:800; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--naranja); margin-bottom:14px;
}
.kicker::before{ content:""; width:26px; height:4px; background:var(--naranja); border-radius:2px; }
/* Sobre fondos oscuros el color madera no contrasta: se usa la veta clara */
.seccion--verde .kicker, .seccion--azul .kicker,
.hero .kicker, .cabecera-pag .kicker, .ofertas-fondo .kicker, .cta-final .kicker{ color:var(--amarillo); }
.seccion--verde .kicker::before, .seccion--azul .kicker::before,
.hero .kicker::before, .cabecera-pag .kicker::before,
.ofertas-fondo .kicker::before, .cta-final .kicker::before{ background:var(--amarillo); }

/* Patrón geométrico "vigas / perfiles" */
.patron{ position:relative; isolation:isolate; }
.patron::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:repeating-linear-gradient(135deg, rgba(28,68,31,.06) 0 2px, transparent 2px 16px);
}
.patron-naranja::before{ background-image:repeating-linear-gradient(135deg, rgba(156,75,34,.10) 0 3px, transparent 3px 18px); opacity:1; }
.patron-blanco::before{ background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 18px); opacity:1; }

/* ---------- Botones ---------- */
.btn{
  --bg:var(--naranja); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px;
  background:var(--bg); color:var(--fg); border:2px solid var(--bd);
  border-radius:var(--radio-sm); cursor:pointer;
  font-family:var(--font-tit); font-weight:800; font-size:.95rem;
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans);
  box-shadow:0 2px 0 rgba(0,0,0,.10);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,26,38,.20); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn--naranja{ --bg:var(--naranja); } .btn--naranja:hover{ --bg:var(--naranja-osc); }
.btn--verde{ --bg:var(--verde); } .btn--verde:hover{ --bg:var(--verde-osc); }
.btn--azul{ --bg:var(--azul); } .btn--azul:hover{ --bg:var(--azul-osc); }
.btn--azulvivo{ --bg:var(--azul-vivo); } .btn--azulvivo:hover{ --bg:var(--azul-vivo-osc); }
.btn--amarillo{ --bg:var(--amarillo); --fg:var(--azul); } .btn--amarillo:hover{ --bg:var(--amarillo-osc); }
.btn--wsp{ --bg:#25D366; --fg:#062E17; } .btn--wsp:hover{ --bg:#1FBA59; }
.btn--blanco{ --bg:#fff; --fg:var(--azul); }
.btn--fantasma{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.55); box-shadow:none; }
.btn--fantasma:hover{ --bg:#fff; --fg:var(--azul); --bd:#fff; }
.btn--linea{ --bg:transparent; --fg:var(--verde); --bd:var(--gris-20); box-shadow:none; }
.btn--linea:hover{ --bd:var(--verde); --bg:var(--verde-soft); }
.btn--sm{ min-height:44px; padding:10px 18px; font-size:.82rem; }
.btn--bloque{ width:100%; }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:200;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--gris-10);
  transition:box-shadow var(--trans), background var(--trans);
}
.header.is-scroll{ box-shadow:0 6px 26px rgba(16,26,38,.10); }
.header__barra{
  height:var(--header-h); display:flex; align-items:center; gap:18px;
}
.marca{ display:flex; align-items:center; flex:none; }
.marca img{ height:54px; width:auto; aspect-ratio:1463/1107; object-fit:contain; }
.nav{ margin-left:auto; }
.nav__lista{ display:flex; align-items:center; gap:2px; }
.nav__link{
  display:block; padding:10px 14px; border-radius:8px;
  font-family:var(--font-tit); font-weight:700; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--azul);
  transition:color var(--trans), background var(--trans);
}
.nav__link:hover{ color:var(--verde); background:var(--verde-soft); }
.nav__link[aria-current="page"]{ color:var(--verde); box-shadow:inset 0 -3px 0 var(--naranja); border-radius:8px 8px 0 0; }
.header__acciones{ display:flex; align-items:center; gap:10px; flex:none; }
.icono-wsp{
  display:grid; place-items:center; width:48px; height:48px; border-radius:12px;
  background:#25D366; color:#fff; transition:transform var(--trans);
}
.icono-wsp:hover{ transform:translateY(-2px) scale(1.04); }
.icono-wsp svg{ width:26px; height:26px; }
.hamburguesa{
  display:none; width:48px; height:48px; border:2px solid var(--gris-20);
  background:#fff; border-radius:12px; cursor:pointer; place-items:center;
}
.hamburguesa span{ display:block; width:22px; height:2.5px; background:var(--azul); border-radius:2px; transition:var(--trans); }
.hamburguesa span+span{ margin-top:5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Menú móvil */
.menu-movil{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:190;
  background:#fff; padding:22px 20px calc(96px + env(safe-area-inset-bottom));
  overflow-y:auto; transform:translateX(100%); visibility:hidden;
  transition:transform 260ms cubic-bezier(.4,0,.2,1), visibility 260ms;
}
.menu-movil.abierto{ transform:none; visibility:visible; }
.menu-movil a.mm-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; border-bottom:1px solid var(--gris-10);
  font-family:var(--font-tit); font-weight:800; font-size:1.16rem; text-transform:uppercase; color:var(--azul);
}
.menu-movil a.mm-link:active{ color:var(--verde); }
.menu-movil .mm-acciones{ display:grid; gap:12px; margin-top:24px; }

body.sin-scroll{ overflow:hidden; }
main{ padding-top:var(--header-h); }

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--verde-osc); color:#fff; overflow:hidden;
  padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,88px);
}
.hero__fondo{ position:absolute; inset:0; z-index:0; }
.hero__fondo img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(2,80,48,.96) 0%, rgba(2,80,48,.88) 42%, rgba(3,113,67,.55) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 3px, transparent 3px 20px);
}
.hero__grid{ position:relative; z-index:1; display:grid; gap:44px; align-items:center; grid-template-columns:1.15fr .85fr; }
.hero h1{ margin-bottom:18px; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--amarillo); }
.hero__bajada{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:rgba(255,255,255,.9); max-width:56ch; }
.hero__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero__sellos{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:40px;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.18);
}
.sello{ display:flex; gap:12px; align-items:flex-start; }
.sello__ico{
  flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:var(--amarillo);
}
.sello__ico svg{ width:22px; height:22px; }
.sello b{ display:block; font-family:var(--font-tit); font-size:.98rem; }
.sello span{ font-size:.85rem; color:rgba(255,255,255,.68); line-height:1.4; display:block; }

/* Tarjeta cotización rápida del hero */
.hero__caja{
  background:#fff; color:var(--texto); border-radius:var(--radio-lg);
  padding:26px; box-shadow:var(--sombra-lg); border-top:6px solid var(--naranja);
}
.hero__caja h2{ font-size:1.35rem; margin-bottom:4px; }
.hero__caja > p{ font-size:.92rem; color:var(--texto-2); margin-bottom:18px; }

/* ---------- Barra de confianza ---------- */
.tira{ background:var(--azul); color:#fff; }
.tira__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tira__item{ display:flex; gap:12px; align-items:center; padding:20px 12px; }
.tira__item svg{ width:26px; height:26px; color:var(--amarillo); flex:none; }
.tira__item span{ font-family:var(--font-tit); font-weight:700; font-size:.92rem; line-height:1.25; text-transform:uppercase; letter-spacing:.02em; }

/* ---------- Grillas ---------- */
.grid{ display:grid; gap:20px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--5{ grid-template-columns:repeat(5,1fr); }

/* ---------- Tarjeta de categoría ---------- */
.cat{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--gris-10); border-radius:var(--radio);
  box-shadow:var(--sombra); transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.cat:hover{ transform:translateY(-4px); box-shadow:var(--sombra-md); border-color:var(--gris-20); }
.cat__img{
  position:relative; aspect-ratio:4/3; background:var(--verde-soft); overflow:hidden;
  display:grid; place-items:center;
}
.cat__img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms cubic-bezier(.4,0,.2,1); }
.cat:hover .cat__img img{ transform:scale(1.05); }
.cat__cuerpo{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.cat__cuerpo h3{ margin-bottom:6px; font-size:1.1rem; }
.cat__cuerpo p{ font-size:.92rem; color:var(--texto-2); margin-bottom:16px; flex:1; }
/* Se apilan solos cuando la tarjeta es angosta (grilla de 4 o 5 columnas) */
.cat__acciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px; }
.cat__acciones .btn{ min-width:0; padding-inline:12px; }

/* Ilustración referencial (mientras no haya foto real del producto) */
.ilustracion{ position:absolute; inset:0; }
.ilustracion svg{ width:100%; height:100%; display:block; }
.cat:hover .ilustracion svg{ transform:scale(1.04); transition:transform 400ms cubic-bezier(.4,0,.2,1); }

/* Marcador de imagen (sin foto cargada aún) */
.marcador{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    linear-gradient(140deg, var(--verde) 0%, var(--verde-osc) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 3px, transparent 3px 18px);
  background-blend-mode:overlay; color:rgba(255,255,255,.92); text-align:center; padding:14px;
}
.marcador::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 18px);
}
/* El ícono queda exactamente al centro de la caja; la leyenda va fija abajo
   (si formara parte del flujo, empujaría el ícono hacia arriba). */
.marcador svg{ width:46px; height:46px; opacity:.95; position:relative; z-index:1; grid-area:1/1; }
.marcador small{
  position:absolute; left:0; right:0; bottom:12px; z-index:1;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--font-tit); font-weight:700; opacity:.7;
}
.marcador--naranja{ background-image:linear-gradient(140deg, var(--naranja) 0%, var(--naranja-osc) 100%); }
.marcador--azul{ background-image:linear-gradient(140deg, #6B4227 0%, var(--azul) 100%); }

/* ---------- Ofertas ---------- */
.ofertas-fondo{
  background:
    radial-gradient(1000px 420px at 90% -10%, rgba(226,213,198,.16), transparent 60%),
    linear-gradient(180deg, #2F5532 0%, var(--verde-osc) 100%);
  color:#fff;
}
.oferta{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; color:var(--texto); border-radius:var(--radio); box-shadow:var(--sombra-md);
  transition:transform var(--trans), box-shadow var(--trans);
}
.oferta:hover{ transform:translateY(-5px); box-shadow:var(--sombra-lg); }
.oferta__img{ position:relative; aspect-ratio:1/1; background:var(--gris-05); overflow:hidden; }
.oferta__img img{ width:100%; height:100%; object-fit:cover; }
.etiquetas{ position:absolute; top:12px; left:12px; right:12px; display:flex; flex-wrap:wrap; gap:6px; z-index:2; }
.etq{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:100px;
  font-family:var(--font-tit); font-weight:800; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--azul); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.etq--vigente{ background:var(--verde); }
.etq--ultimas{ background:#C62828; }
.etq--volumen{ background:var(--azul); }
.etq--consultar{ background:var(--gris-60); }
.etq--descuento{ background:var(--amarillo); color:var(--azul); font-size:.82rem; padding:6px 12px; }
.oferta__cuerpo{ padding:18px; display:flex; flex-direction:column; flex:1; gap:10px; }
.oferta__cuerpo h3{ font-size:1.06rem; margin:0; }
.precio{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.precio__normal{ color:var(--gris-60); text-decoration:line-through; font-size:.95rem; }
.precio__oferta{ font-family:var(--font-tit); font-weight:900; font-size:1.8rem; color:var(--verde); letter-spacing:-.02em; }
.precio__consultar{ font-family:var(--font-tit); font-weight:800; font-size:1.15rem; color:var(--azul); }
.oferta__meta{ font-size:.84rem; color:var(--texto-2); display:grid; gap:4px; margin-top:auto; }
.oferta__meta div{ display:flex; gap:7px; align-items:flex-start; }
.oferta__meta svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--naranja); }

/* Banner campaña */
.campana{
  position:relative; overflow:hidden; border-radius:var(--radio-lg); padding:clamp(28px,4vw,46px);
  background:linear-gradient(115deg, var(--naranja) 0%, #C06A38 55%, var(--amarillo) 100%);
  color:var(--azul-osc); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  margin-bottom:36px;
}
.campana::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.20) 0 8px, transparent 8px 30px);
  opacity:.5;
}
.campana > *{ position:relative; }
.campana h3{ font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:900; text-transform:uppercase; margin:0 0 6px; }
.campana p{ margin:0; font-weight:600; max-width:60ch; }

/* ---------- Empresas ---------- */
.beneficios{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.beneficio{ display:flex; gap:13px; align-items:flex-start; padding:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radio-sm); }
.beneficio svg{ width:22px; height:22px; color:var(--amarillo); flex:none; margin-top:2px; }
.beneficio b{ display:block; font-family:var(--font-tit); font-size:.98rem; }
.beneficio span{ font-size:.86rem; color:rgba(255,255,255,.72); }

/* ---------- Formularios ---------- */
.form{ display:grid; gap:16px; }
.form--caja{ background:#fff; border-radius:var(--radio-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--sombra-md); color:var(--texto); }
.campos{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{ font-family:var(--font-tit); font-weight:700; font-size:.84rem; text-transform:uppercase; letter-spacing:.04em; color:var(--azul); }
.campo label .req{ color:#C62828; }
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 14px; min-height:50px; background:#fff;
  border:2px solid var(--gris-20); border-radius:var(--radio-sm);
  transition:border-color var(--trans), box-shadow var(--trans);
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover{ border-color:var(--gris-40); }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(3,113,67,.12);
}
.campo .ayuda{ font-size:.78rem; color:var(--texto-2); }
.campo .error{ font-size:.8rem; color:#C62828; font-weight:600; display:none; }
.campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea{ border-color:#C62828; background:#FFF6F6; }
.campo.tiene-error .error{ display:block; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--texto-2); }
.check input{ width:22px; height:22px; min-height:0; flex:none; margin-top:2px; accent-color:var(--verde); }
.archivo{
  display:flex; align-items:center; gap:12px; padding:14px; border:2px dashed var(--gris-20);
  border-radius:var(--radio-sm); background:var(--gris-05); cursor:pointer; transition:var(--trans);
}
.archivo:hover{ border-color:var(--verde); background:var(--verde-soft); }
.archivo svg{ width:24px; height:24px; color:var(--verde); flex:none; }
.archivo input{ display:none; }
.archivo span{ font-size:.88rem; color:var(--texto-2); }

.aviso{ padding:14px 16px; border-radius:var(--radio-sm); font-size:.9rem; display:none; gap:10px; align-items:flex-start; }
.aviso.visible{ display:flex; }
.aviso--ok{ background:#E7F6EC; border:1px solid #B7E3C6; color:#1B5E20; }
.aviso--error{ background:#FDECEC; border:1px solid #F4C7C7; color:#B71C1C; }
.aviso svg{ width:20px; height:20px; flex:none; margin-top:2px; }

.btn.cargando{ pointer-events:none; opacity:.75; }
.btn.cargando::before{
  content:""; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* ---------- Sucursales ---------- */
.sucursal{
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border:1px solid var(--gris-10); border-radius:var(--radio); box-shadow:var(--sombra);
  transition:transform var(--trans), box-shadow var(--trans);
}
.sucursal:hover{ transform:translateY(-4px); box-shadow:var(--sombra-md); }
.sucursal__mapa{ aspect-ratio:16/10; background:var(--gris-10); position:relative; overflow:hidden; }
.sucursal__mapa iframe{ width:100%; height:100%; border:0; display:block; }
.sucursal__mapa img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 500ms cubic-bezier(.4,0,.2,1); }
.sucursal:hover .sucursal__mapa img{ transform:scale(1.04); }
/* Botón para cambiar la foto por el mapa (el mapa se carga recién ahí) */
.ver-mapa{
  position:absolute; right:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 14px;
  border:0; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--azul);
  font-family:var(--font-tit); font-weight:800; font-size:.76rem;
  letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 3px 12px rgba(16,26,38,.22); transition:var(--trans);
}
.ver-mapa:hover{ background:#fff; transform:translateY(-2px); }
.ver-mapa svg{ width:15px; height:15px; color:var(--naranja); }
.sucursal__cuerpo{ padding:20px; display:flex; flex-direction:column; gap:14px; flex:1; }
.sucursal__cuerpo h3{ margin:0; font-size:1.3rem; color:var(--verde); }
.datos{ display:grid; gap:9px; font-size:.92rem; }
.datos div{ display:flex; gap:10px; align-items:flex-start; }
.datos svg{ width:18px; height:18px; color:var(--naranja); flex:none; margin-top:3px; }
.sucursal__acciones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; }
.sucursal__acciones .btn--bloque{ grid-column:1 / -1; }

/* ---------- Nosotros / valores ---------- */
.valor{ background:#fff; border:1px solid var(--gris-10); border-radius:var(--radio); padding:24px; box-shadow:var(--sombra); }
.valor__ico{ width:52px; height:52px; border-radius:14px; background:var(--verde-soft); color:var(--verde); display:grid; place-items:center; margin-bottom:14px; }
.valor__ico svg{ width:26px; height:26px; }
.valor h3{ font-size:1.1rem; margin-bottom:6px; }
.valor p{ font-size:.92rem; color:var(--texto-2); margin:0; }

/* ---------- Cinta de marcas ---------- */
.cinta{
  position:relative; overflow:hidden; padding:6px 0;
  /* los logos se desvanecen en los bordes en vez de cortarse de golpe */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta__pista{
  display:flex; align-items:center; gap:18px; width:max-content;
  animation:desfilar var(--duracion,42s) linear infinite;
}
@keyframes desfilar{ to{ transform:translateX(calc(-1 * var(--recorrido,50%) - 18px)); } }
.cinta:hover .cinta__pista, .cinta:focus-within .cinta__pista{ animation-play-state:paused; }

/* El recuadro manda: medida fija. Antes tomaba el ancho de la imagen, así que
   los logos alargados (Truper, Inchalam) se salían, y mientras la foto no
   cargaba la tarjeta quedaba de 34 px y la cinta saltaba. */
.cinta__marca{
  flex:none; display:grid; place-items:center;
  width:210px; height:96px; padding:14px 18px;
  background:#fff; border:1px solid var(--gris-10); border-radius:var(--radio);
  box-shadow:var(--sombra); transition:transform var(--trans), box-shadow var(--trans);
  overflow:hidden;
}
.cinta__marca:hover{ transform:translateY(-3px); box-shadow:var(--sombra-md); }
/* En píxeles, no en %: dentro de la grilla el navegador no resuelve
   max-height:100% y los logos altos se salían de la tarjeta. */
.cinta__marca img{
  max-width:174px; max-height:68px; width:auto; height:auto;
  object-fit:contain; display:block;
}
.cinta__marca-texto{
  font-family:var(--font-tit); font-weight:800; font-size:1rem; color:var(--azul); white-space:nowrap;
}

/* Medios de pago */
/* Sin recuadro: los logos van sueltos sobre el fondo de la sección. A los
   archivos se les quitó el blanco de alrededor, así que se integran solos.
   El marco que conservan Visa, Mastercard, Magna, AMEX y Diners es parte del
   logo de la tarjeta, no un fondo agregado. */
.pagos{
  display:flex; flex-wrap:wrap; gap:14px 26px;
  justify-content:center; align-items:center; margin-top:18px;
}
.pago{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.86rem; font-weight:600; color:var(--texto-2);
}
.pago--logo{ height:34px; }
.pago--logo img{
  max-width:112px; max-height:34px; width:auto; height:auto; object-fit:contain;
}
/* El efectivo no tiene logo de marca: se usa un ícono, como en el resto del
   comercio. No se inventa una marca. */
.pago--efectivo svg{ width:22px; height:22px; color:var(--verde); flex:none; }
@media (max-width:520px){
  .pagos{ gap:12px 18px; }
  .pago--logo{ height:27px; }
  .pago--logo img{ max-width:88px; max-height:27px; }
  .pago{ font-size:.8rem; }
  .pago--efectivo svg{ width:19px; height:19px; }
}

@media (max-width:720px){
  .cinta__marca{ width:158px; height:74px; padding:10px 14px; }
  .cinta__marca img{ max-width:130px; max-height:54px; }
  .cinta__pista{ gap:12px; }
}
@media (prefers-reduced-motion:reduce){
  .cinta__pista{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .cinta{ -webkit-mask-image:none; mask-image:none; }
  .cinta__pista > [aria-hidden="true"]{ display:none; }
}

/* ---------- Mosaico de fotos (página Nosotros) ---------- */
.mosaico{
  position:relative; display:grid; gap:12px;
  grid-template-columns:1.15fr 1fr; grid-template-rows:1fr 1fr;
}
.mosaico figure{
  margin:0; overflow:hidden; border-radius:var(--radio); box-shadow:var(--sombra-md);
  background:var(--gris-10);
}
.mosaico__alto{ grid-row:1 / span 2; }
.mosaico img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 600ms cubic-bezier(.4,0,.2,1);
}
.mosaico figure:hover img{ transform:scale(1.05); }

/* Sello de trayectoria sobre el mosaico */
.mosaico__sello{
  position:absolute; left:-14px; bottom:-14px; z-index:2;
  display:flex; align-items:center; gap:10px; padding:14px 20px 14px 16px;
  background:var(--naranja); color:#fff; border-radius:var(--radio);
  box-shadow:0 10px 30px rgba(74,46,29,.34);
}
.mosaico__sello b{ font-family:var(--font-tit); font-weight:900; font-size:2.5rem; line-height:.9; letter-spacing:-.03em; }
.mosaico__sello span{
  font-family:var(--font-tit); font-weight:700; font-size:.8rem; line-height:1.2;
  text-transform:uppercase; letter-spacing:.06em;
}

@media (max-width:720px){
  .mosaico{ gap:9px; }
  .mosaico__sello{ left:auto; right:-6px; bottom:-12px; padding:11px 15px 11px 13px; }
  .mosaico__sello b{ font-size:2rem; }
  .mosaico__sello span{ font-size:.7rem; }
}

/* ---------- Redes ---------- */
.red{
  position:relative; display:block; overflow:hidden; border-radius:var(--radio);
  aspect-ratio:1/1; box-shadow:var(--sombra); transition:transform var(--trans), box-shadow var(--trans);
}
.red:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--sombra-md); }
.red img{ width:100%; height:100%; object-fit:cover; }
.red__pie{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 13px; color:#fff; font-size:.85rem; font-weight:600;
  background:linear-gradient(transparent, rgba(10,18,26,.85));
}
/* En estas tarjetas el título va abajo: la leyenda del marcador se solapaba */
.red .marcador small{ display:none; }
.red__badge{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:9px;
  background:rgba(255,255,255,.92); color:var(--azul); display:grid; place-items:center; z-index:2;
  box-shadow:0 2px 8px rgba(16,26,38,.14);
}
.red__badge svg{ width:18px; height:18px; }

/* Publicación real embebida (Instagram / Facebook).
   Se carga sola al llegar a la sección: cada embed pesa ~200 KB. */
/* Proporción medida sobre el embed real de Instagram (cabecera + foto cuadrada
   + botones + pie). Se deja un poco de holgura: es preferible un margen abajo
   antes que cortar la foto de la publicación. */
.red--embed{
  aspect-ratio:14/25; background:var(--gris-05); border:1px solid var(--gris-10);
  display:block; overflow:hidden;
}
.red--embed:hover{ transform:none; }
.red--embed iframe{
  width:100%; height:100%; border:0; display:block;
  opacity:0; transition:opacity .45s ease;
}
.red--embed.cargado iframe{ opacity:1; }
.red--embed.cargado .red__cargando{ opacity:0; pointer-events:none; }
.red__cargando{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px;
  padding:18px; text-align:center; transition:opacity .3s ease;
}
.red__cargando small{ font-size:.82rem; color:var(--texto-2); line-height:1.4; }
.red__spinner{
  width:26px; height:26px; border:3px solid var(--gris-20); border-top-color:var(--verde);
  border-radius:50%; animation:girar .8s linear infinite;
}

/* ---------- CTA final ---------- */
.cta-final{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg, var(--verde-osc) 0%, var(--verde) 60%, #2F5532 100%);
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 4px, transparent 4px 24px);
}
.cta-final .contenedor{ position:relative; }
.cta-final__botones{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px; }

/* ---------- Footer ---------- */
.footer{ background:var(--azul-osc); color:rgba(255,255,255,.72); font-size:.93rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding:clamp(44px,5vw,72px) 0 40px; }
.footer h4{ color:#fff; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; font-weight:800; }
.footer a:hover{ color:var(--amarillo); }
.footer__logo{ background:#fff; border-radius:12px; padding:10px 14px; display:inline-block; margin-bottom:16px; }
.footer__logo img{ height:64px; width:auto; aspect-ratio:1463/1107; object-fit:contain; }
.footer li{ margin-bottom:9px; }
.footer__redes{ display:flex; gap:10px; margin-top:16px; }
.footer__redes a{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; transition:var(--trans);
}
.footer__redes a:hover{ background:var(--naranja); transform:translateY(-2px); }
.footer__redes svg{ width:21px; height:21px; }
.footer__legal{
  border-top:1px solid rgba(255,255,255,.10); padding:20px 0 calc(20px + var(--pad-movil,0px));
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.84rem;
}

/* ---------- WhatsApp flotante ---------- */
.wsp-flotante{
  position:fixed; right:18px; bottom:calc(18px + var(--pad-movil,0px)); z-index:150;
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.45); transition:transform var(--trans);
  animation:latir 3.2s ease-in-out infinite;
}
.wsp-flotante:hover{ transform:scale(1.08); }
.wsp-flotante svg{ width:32px; height:32px; }
@keyframes latir{ 0%,88%,100%{ box-shadow:0 8px 26px rgba(37,211,102,.45); } 94%{ box-shadow:0 8px 26px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0); } }

/* Modal selección de sucursal */
.modal{
  position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:20px;
  background:rgba(10,18,26,.6); backdrop-filter:blur(3px);
}
.modal.abierto{ display:grid; }
.modal__caja{
  background:#fff; border-radius:var(--radio-lg); width:min(480px,100%); padding:26px;
  box-shadow:var(--sombra-lg); animation:subir 240ms cubic-bezier(.4,0,.2,1);
  max-height:90vh; overflow-y:auto;
}
@keyframes subir{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.modal__caja h3{ margin-bottom:4px; }
.modal__caja > p{ font-size:.92rem; color:var(--texto-2); margin-bottom:18px; }
.modal__cerrar{
  float:right; width:38px; height:38px; border-radius:10px; border:0; background:var(--gris-10);
  cursor:pointer; display:grid; place-items:center; margin:-6px -6px 0 0;
}
.modal__cerrar svg{ width:20px; height:20px; }
.opcion-suc{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px;
  border:2px solid var(--gris-20); border-radius:var(--radio-sm); background:#fff; cursor:pointer;
  margin-bottom:10px; transition:var(--trans);
}
.opcion-suc:hover{ border-color:var(--verde); background:var(--verde-soft); transform:translateX(3px); }
.opcion-suc__ico{ width:44px; height:44px; border-radius:11px; background:#25D366; color:#fff; display:grid; place-items:center; flex:none; }
.opcion-suc__ico svg{ width:24px; height:24px; }
.opcion-suc b{ display:block; font-family:var(--font-tit); font-size:1.02rem; color:var(--azul); }
.opcion-suc span{ font-size:.84rem; color:var(--texto-2); }

/* ---------- Barra móvil inferior ---------- */
.barra-movil{
  position:fixed; inset:auto 0 0 0; z-index:160; display:none;
  grid-template-columns:repeat(3,1fr); background:#fff;
  border-top:1px solid var(--gris-20); box-shadow:0 -4px 20px rgba(16,26,38,.10);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-movil button, .barra-movil a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:60px; border:0; background:transparent; cursor:pointer; padding:8px 4px;
  font-family:var(--font-tit); font-weight:800; font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--azul);
}
.barra-movil svg{ width:22px; height:22px; }
.barra-movil .bm-llamar{ color:var(--azul); }
.barra-movil .bm-wsp{ color:#128C4A; }
.barra-movil .bm-cotizar{ background:var(--naranja); color:#fff; }

/* ---------- Animaciones al desplazar ---------- */
.anim{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.anim.visible{ opacity:1; transform:none; }
.anim[data-d="1"]{ transition-delay:.07s; }
.anim[data-d="2"]{ transition-delay:.14s; }
.anim[data-d="3"]{ transition-delay:.21s; }
.anim[data-d="4"]{ transition-delay:.28s; }

/* ---------- Migas / cabecera de página interna ---------- */
.cabecera-pag{
  position:relative; overflow:hidden; color:#fff; padding:clamp(40px,5vw,72px) 0;
  background:linear-gradient(115deg, var(--azul) 0%, #6B4227 100%);
}
.cabecera-pag::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 4px, transparent 4px 22px);
}
.cabecera-pag .contenedor{ position:relative; }
.cabecera-pag h1{ font-size:clamp(1.9rem,4.4vw,3.1rem); margin-bottom:10px; }
.cabecera-pag p{ color:rgba(255,255,255,.78); max-width:70ch; margin:0; }
.migas{ font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:14px; display:flex; gap:8px; flex-wrap:wrap; }
.migas a:hover{ color:var(--amarillo); }

/* ---------- Filtros ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:32px; }
.filtro{
  padding:10px 18px; min-height:44px; border:2px solid var(--gris-20); background:#fff;
  border-radius:100px; cursor:pointer; font-family:var(--font-tit); font-weight:700;
  font-size:.86rem; text-transform:uppercase; letter-spacing:.03em; color:var(--azul);
  transition:var(--trans);
}
.filtro:hover{ border-color:var(--verde); color:var(--verde); }
.filtro.activo{ background:var(--verde); border-color:var(--verde); color:#fff; }

/* ---------- Catálogo (productos reales del POS) ---------- */
.buscador{ position:relative; max-width:620px; margin:0 auto 20px; }
.buscador input{
  width:100%; min-height:58px; padding:16px 18px 16px 52px;
  border:2px solid var(--gris-20); border-radius:100px; background:#fff;
  font-size:1.02rem; transition:border-color var(--trans), box-shadow var(--trans);
}
.buscador input:focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(28,68,31,.12); }
.buscador svg{ position:absolute; left:19px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--gris-60); pointer-events:none; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px; }
.chips .filtro span{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:100px;
  background:var(--gris-10); color:var(--texto-2); font-size:.74rem;
}
.chips .filtro.activo span{ background:rgba(255,255,255,.22); color:#fff; }

.resumen-cat{ text-align:center; color:var(--texto-2); font-size:.9rem; margin-bottom:26px; }

.grid-prod{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.prod{
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border:1px solid var(--gris-10); border-radius:var(--radio); box-shadow:var(--sombra);
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.prod:hover{ transform:translateY(-3px); box-shadow:var(--sombra-md); border-color:var(--gris-20); }
.prod__img{ aspect-ratio:4/3; background:var(--gris-05); overflow:hidden; }
.prod__img svg, .prod__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod__cuerpo{ padding:14px 15px 15px; display:flex; flex-direction:column; gap:7px; flex:1; }
.prod__cat{
  font-family:var(--font-tit); font-weight:700; font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--naranja);
}
.prod h3{ font-size:.95rem; line-height:1.3; margin:0; font-weight:700; letter-spacing:-.01em; }
.prod__pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; }
.prod__precio{ font-family:var(--font-tit); font-weight:900; font-size:1.16rem; color:var(--verde); letter-spacing:-.02em; }
.prod__precio small{ font-weight:600; font-size:.7rem; color:var(--texto-2); letter-spacing:0; }
.prod__precio--consultar{ font-size:.92rem; font-weight:800; color:var(--azul); }
.prod__pie .btn{ min-height:40px; padding:8px 12px; }
.prod__pie .btn svg{ width:18px; height:18px; }

.sin-resultados{
  grid-column:1/-1; text-align:center; padding:48px 20px; background:var(--gris-05);
  border:2px dashed var(--gris-20); border-radius:var(--radio-lg);
  display:grid; justify-items:center; gap:14px;
}
.sin-resultados svg{ width:42px; height:42px; color:var(--gris-40); }
.sin-resultados p{ margin:0; color:var(--texto-2); }

.aviso-precios{
  display:flex; gap:12px; align-items:flex-start; max-width:760px; margin:0 auto 26px;
  padding:14px 18px; background:var(--verde-soft); border-left:5px solid var(--verde);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0; font-size:.88rem; color:var(--texto-2);
}
.aviso-precios svg{ width:20px; height:20px; color:var(--verde); flex:none; margin-top:2px; }

@media (max-width:520px){
  .grid-prod{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .prod h3{ font-size:.88rem; }
  .prod__precio{ font-size:1.02rem; }
}

/* ---------- Acordeón (preguntas) ---------- */
.acordeon{ border:1px solid var(--gris-10); border-radius:var(--radio); overflow:hidden; background:#fff; box-shadow:var(--sombra); }
.acordeon details{ border-bottom:1px solid var(--gris-10); }
.acordeon details:last-child{ border-bottom:0; }
.acordeon summary{
  cursor:pointer; padding:18px 20px; font-family:var(--font-tit); font-weight:700; font-size:1rem;
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{ content:"+"; font-size:1.5rem; color:var(--naranja); line-height:1; }
.acordeon details[open] summary::after{ content:"–"; }
.acordeon .respuesta{ padding:0 20px 18px; color:var(--texto-2); font-size:.94rem; }

/* ---------- Nota informativa ---------- */
.nota{
  display:flex; gap:12px; padding:16px 18px; border-radius:var(--radio-sm);
  background:var(--amarillo-soft,#FFF8E1); border-left:5px solid var(--amarillo); font-size:.9rem; color:#5C4600;
}
.nota svg{ width:20px; height:20px; flex:none; margin-top:2px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav__link{ padding:10px 10px; font-size:.86rem; }
  .grid--5{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
}

@media (max-width:960px){
  :root{ --header-h:68px; }
  .nav{ display:none; }
  .hamburguesa{ display:grid; }
  .header__acciones .btn{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
  .tira__grid{ grid-template-columns:repeat(2,1fr); }
  .grid--3, .grid--4, .grid--5{ grid-template-columns:repeat(2,1fr); }
  .campana{ grid-template-columns:1fr; }
  .beneficios{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; --pad-movil:64px; }
  .barra-movil{ display:grid; }
  .wsp-flotante{ width:54px; height:54px; bottom:calc(72px + env(safe-area-inset-bottom)); }
  .campos{ grid-template-columns:1fr; }
  .grid--2{ grid-template-columns:1fr; }
  .hero__sellos{ grid-template-columns:1fr; gap:14px; }
  .seccion{ padding:48px 0; }
  .contenedor{ padding-inline:16px; }
  .footer__grid{ grid-template-columns:1fr; gap:28px; }
  .footer__legal{ padding-bottom:calc(20px + 64px); flex-direction:column; }
  .hero__botones .btn{ width:100%; }
}

@media (max-width:520px){
  .grid--3, .grid--4, .grid--5{ grid-template-columns:1fr; }
  .marca img{ height:42px; }
  .sucursal__acciones{ grid-template-columns:1fr; }
  .cat__acciones{ grid-template-columns:1fr; }
}

/* Impresión y accesibilidad */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .anim{ opacity:1; transform:none; }
}
@media print{
  .header,.barra-movil,.wsp-flotante,.modal,.menu-movil{ display:none !important; }
  main{ padding-top:0; }
}