/* ============================================
   HIDRÁULICA DEL PACÍFICO - Hoja de estilos
   Paleta: #002f4e #0384be #1ba4d7 #303b43
============================================ */

:root{
  --azul-oscuro:#002f4e;
  --azul-medio:#0384be;
  --celeste:#1ba4d7;
  --naranja:#F58220;
  --naranja-hover:#d66e13;
  --gris:#303b43;
  --gris-claro:#f5f7fa;
  --blanco:#ffffff;
  --borde:#e3e8ee;
  --sombra:0 4px 16px rgba(0,47,78,.08);
  --sombra-fuerte:0 10px 30px rgba(0,47,78,.15);
  --radio:10px;
  --transicion:all .25s ease;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:'Inter','Segoe UI',Roboto,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--gris);
  line-height:1.6;
  background:var(--blanco);
}

img{max-width:100%;display:block;height:auto}

a{color:var(--azul-medio);text-decoration:none;transition:var(--transicion)}
a:hover{color:var(--celeste)}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============== TOP BAR ============== */
.topbar{
  background:var(--azul-oscuro);
  color:#c9dae6;
  font-size:.85rem;
  padding:8px 0;
}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.topbar a{color:#c9dae6}
.topbar a:hover{color:var(--celeste)}
.topbar-info{display:flex;gap:20px;flex-wrap:wrap}
.topbar-info span{display:inline-flex;align-items:center;gap:6px}

/* ============== HEADER / NAV ============== */
.site-header{
  background:var(--blanco);
  box-shadow:var(--sombra);
  position:sticky;
  top:0;
  z-index:1000;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.logo img{height:60px;width:auto;display:block}
.logo a{display:block}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.8rem;
  color:var(--azul-oscuro);
  cursor:pointer;
}

.main-nav ul{
  list-style:none;
  display:flex;
  gap:6px;
  align-items:center;
}
.main-nav a{
  display:block;
  padding:10px 14px;
  color:var(--azul-oscuro);
  font-weight:600;
  border-radius:6px;
  font-size:.95rem;
}
.main-nav a:hover,
.main-nav a.activo{background:var(--gris-claro);color:var(--azul-medio)}

.btn-cotizar{
  background:var(--naranja);
  color:var(--blanco) !important;
  padding:10px 20px !important;
  border-radius:30px !important;
}
.btn-cotizar:hover{background:var(--naranja-hover) !important;color:var(--blanco) !important}

/* ============== BOTONES ============== */
.btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:30px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  border:2px solid transparent;
  transition:var(--transicion);
  font-size:.95rem;
}
.btn-primary{background:var(--naranja);color:var(--blanco)}
.btn-primary:hover{background:var(--naranja-hover);color:var(--blanco)}
.btn-secondary{background:var(--azul-medio);color:var(--blanco)}
.btn-secondary:hover{background:var(--azul-oscuro);color:var(--blanco)}
.btn-outline{border-color:var(--blanco);color:var(--blanco)}
.btn-outline:hover{background:var(--blanco);color:var(--azul-oscuro)}
.btn-outline-dark{border-color:var(--azul-medio);color:var(--azul-medio)}
.btn-outline-dark:hover{background:var(--azul-medio);color:var(--blanco)}
.btn-outline-naranja{border-color:var(--naranja);color:var(--naranja)}
.btn-outline-naranja:hover{background:var(--naranja);color:var(--blanco)}

/* ============== HERO ============== */
.hero{
  position:relative;
  color:var(--blanco);
  padding:120px 0;
  min-height:480px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,var(--azul-oscuro) 0%,var(--azul-medio) 60%,var(--celeste) 100%);
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  /* mejora la nitidez en pantallas retina */
  image-rendering:-webkit-optimize-contrast;
  transform:translateZ(0);
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* overlay más fuerte y uniforme para garantizar legibilidad sobre cualquier foto */
  background:
    linear-gradient(135deg,rgba(0,47,78,.92) 0%,rgba(0,47,78,.65) 50%,rgba(3,132,190,.55) 100%),
    linear-gradient(to top,rgba(0,0,0,.35),transparent 50%);
}
.hero::before{
  content:"";
  position:absolute;
  top:-50%;right:-10%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
  border-radius:50%;
  z-index:1;
}
.hero-inner{position:relative;z-index:2;max-width:720px}
.hero h1{
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.15;
  margin-bottom:18px;
  font-weight:800;
}
.hero p{font-size:1.15rem;margin-bottom:28px;opacity:.95}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}

/* Hero chico para subpáginas */
.page-hero{
  position:relative;
  background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-medio));
  color:var(--blanco);
  padding:80px 0;
  min-height:240px;
  display:flex;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
.page-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center center;
  image-rendering:-webkit-optimize-contrast;
  transform:translateZ(0);
}
.page-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* doble capa: degradado de marca + vignette sutil */
  background:
    linear-gradient(135deg,rgba(0,47,78,.92) 0%,rgba(3,132,190,.78) 100%),
    radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.25) 100%);
}
.page-hero .container{position:relative;z-index:2;width:100%}
.page-hero h1{font-size:2.4rem;margin-bottom:10px}
.page-hero .breadcrumb{font-size:.9rem;opacity:.95}
.page-hero .breadcrumb a{color:var(--celeste)}

/* ============== SECCIONES ============== */
section{padding:70px 0}
.section-title{
  text-align:center;
  margin-bottom:50px;
}
.section-title h2{
  font-size:2rem;
  color:var(--azul-oscuro);
  margin-bottom:12px;
  font-weight:800;
}
.section-title p{color:var(--gris);max-width:620px;margin:0 auto}
.section-title::after{
  content:"";
  display:block;
  width:60px;height:4px;
  background:var(--naranja);
  margin:16px auto 0;
  border-radius:2px;
}

/* ============== CATEGORÍAS GRID ============== */
.categorias-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.categoria-card{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:32px 24px;
  text-align:center;
  transition:var(--transicion);
  text-decoration:none;
  color:var(--gris);
  box-shadow:var(--sombra);
}
.categoria-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-fuerte);
  border-color:var(--naranja);
  color:var(--gris);
}
.categoria-icono{
  width:72px;height:72px;
  background:linear-gradient(135deg,var(--azul-medio),var(--celeste));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  color:var(--blanco);
  font-size:2rem;
}
.categoria-card h3{
  color:var(--azul-oscuro);
  margin-bottom:10px;
  font-size:1.2rem;
}
.categoria-card p{font-size:.92rem;color:var(--gris)}

/* ============== PRODUCTOS GRID ============== */
.productos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:28px;
}
.producto-card{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  transition:var(--transicion);
  display:flex;flex-direction:column;
  box-shadow:var(--sombra);
}
.producto-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-fuerte);
  border-color:var(--naranja);
}
.producto-img{
  background:var(--blanco);
  aspect-ratio:4/3;
  overflow:hidden;
  border-top-left-radius:var(--radio);
  border-top-right-radius:var(--radio);
  display:flex;
  align-items:center;
  justify-content:center;
}
.producto-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.producto-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#d7e5ee,#b9d2e0);
  color:var(--azul-oscuro);
  font-size:3rem;font-weight:700;
}
.producto-body{padding:22px;flex:1;display:flex;flex-direction:column}
.producto-tag{
  display:inline-block;
  background:var(--gris-claro);
  color:var(--azul-medio);
  font-size:.75rem;
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  align-self:flex-start;
}
.producto-body h3{
  color:var(--azul-oscuro);
  margin-bottom:8px;
  font-size:1.15rem;
}
.producto-body p{font-size:.9rem;margin-bottom:14px;flex:1}
.producto-specs{
  list-style:none;
  font-size:.85rem;
  margin-bottom:16px;
  border-top:1px solid var(--borde);
  padding-top:12px;
}
.producto-specs li{padding:3px 0;display:flex;gap:6px}
.producto-specs li strong{color:var(--azul-oscuro);min-width:80px}
.producto-card .btn{align-self:flex-start;padding:8px 18px;font-size:.85rem}

/* ============== DETALLE DE PRODUCTO ============== */
.detalle-producto{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.detalle-img{background:var(--gris-claro);border-radius:var(--radio);padding:40px;display:flex;align-items:center;justify-content:center;min-height:400px}
.detalle-info h1{color:var(--azul-oscuro);font-size:2rem;margin-bottom:8px}
.detalle-info .subtitulo{color:var(--azul-medio);font-weight:600;margin-bottom:20px}
.detalle-tabla{
  width:100%;border-collapse:collapse;margin:20px 0;
}
.detalle-tabla td{
  padding:10px 14px;
  border-bottom:1px solid var(--borde);
  font-size:.95rem;
}
.detalle-tabla td:first-child{font-weight:600;color:var(--azul-oscuro);width:35%;background:var(--gris-claro)}
.detalle-bloque{background:var(--gris-claro);padding:20px;border-radius:var(--radio);margin-top:20px}
.detalle-bloque h4{color:var(--azul-oscuro);margin-bottom:10px}
.detalle-bloque ul{padding-left:22px;font-size:.93rem}

/* ============== BANDAS / CTA ============== */
.cta-banda{
  background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-medio));
  color:var(--blanco);
  padding:60px 0;
  text-align:center;
}
.cta-banda h2{font-size:1.8rem;margin-bottom:14px}
.cta-banda p{margin-bottom:24px;opacity:.95}

/* ============== CARACTERÍSTICAS / VENTAJAS ============== */
.features{background:var(--gris-claro)}
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
}
.feature-item{
  background:var(--blanco);
  padding:30px 24px;
  border-radius:var(--radio);
  text-align:center;
  box-shadow:var(--sombra);
}
.feature-icono{
  width:64px;height:64px;
  background:var(--gris-claro);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  font-size:1.8rem;
  color:var(--azul-medio);
}
.feature-item h3{color:var(--azul-oscuro);margin-bottom:8px;font-size:1.05rem}
.feature-item p{font-size:.9rem}

/* ============== GALERÍA ============== */
.galeria-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:120px;
  gap:12px;
}
.galeria-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radio);
  background:var(--gris-claro);
  cursor:pointer;
}
.galeria-item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  display:block;
}
.galeria-item:hover img{transform:scale(1.06)}
.galeria-item::after{
  content:"\f00e";  /* fa-magnifying-glass-plus */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.8);
  width:48px;height:48px;
  background:rgba(0,47,78,.85);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:all .25s ease;
  pointer-events:none;
  font-size:1.1rem;
}
.galeria-item:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ============== LIGHTBOX ============== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.93);
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:50px 60px;
  opacity:0;
  transition:opacity .25s ease;
}
.lightbox.abierto{display:flex;opacity:1}
.lightbox-img-wrap{
  position:relative;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-img-wrap img{
  max-width:100%;
  max-height:88vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:block;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:0;
  width:50px;height:50px;
  border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  transition:background .2s ease,transform .2s ease;
  backdrop-filter:blur(4px);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{background:var(--naranja);transform:scale(1.08)}
.lightbox-close{top:24px;right:24px}
.lightbox-prev{top:50%;left:24px;transform:translateY(-50%)}
.lightbox-next{top:50%;right:24px;transform:translateY(-50%)}
.lightbox-prev:hover{transform:translateY(-50%) scale(1.08)}
.lightbox-next:hover{transform:translateY(-50%) scale(1.08)}
.lightbox-counter{
  position:absolute;
  bottom:24px;left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.12);
  color:#fff;
  padding:8px 18px;
  border-radius:30px;
  font-size:.85rem;
  font-weight:500;
  backdrop-filter:blur(4px);
  letter-spacing:.5px;
}
body.lightbox-open{overflow:hidden}
/* Patrón mosaico para 10 fotos
   Fila 1-2: 1 feature horizontal (8x2) + 1 vertical (4x2)
   Fila 3:   3 horizontales medianas (4x1 c/u)
   Fila 4-5: 4 verticales (3x2 c/u)
   Fila 6:   1 banda panorámica final (12x1) */
.galeria-item:nth-child(1) {grid-column:span 8;grid-row:span 2}
.galeria-item:nth-child(2) {grid-column:span 4;grid-row:span 2}
.galeria-item:nth-child(3) {grid-column:span 4;grid-row:span 1}
.galeria-item:nth-child(4) {grid-column:span 4;grid-row:span 1}
.galeria-item:nth-child(5) {grid-column:span 4;grid-row:span 1}
.galeria-item:nth-child(6) {grid-column:span 3;grid-row:span 2}
.galeria-item:nth-child(7) {grid-column:span 3;grid-row:span 2}
.galeria-item:nth-child(8) {grid-column:span 3;grid-row:span 2}
.galeria-item:nth-child(9) {grid-column:span 3;grid-row:span 2}
.galeria-item:nth-child(10){grid-column:span 12;grid-row:span 1}

/* ============== CONTACTO ============== */
.contacto-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
}
.contacto-info{background:var(--gris-claro);padding:34px;border-radius:var(--radio)}
.contacto-info h3{color:var(--azul-oscuro);margin-bottom:20px}
.contacto-item{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start}
.contacto-item .icono{
  width:44px;height:44px;
  background:var(--azul-medio);
  border-radius:50%;
  color:var(--blanco);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.contacto-item h4{color:var(--azul-oscuro);margin-bottom:4px;font-size:1rem}
.contacto-item p,.contacto-item a{font-size:.95rem;color:var(--gris)}
.contacto-item a:hover{color:var(--azul-medio)}

.form-contacto{background:var(--blanco);padding:34px;border-radius:var(--radio);box-shadow:var(--sombra);border:1px solid var(--borde)}
.form-contacto h3{color:var(--azul-oscuro);margin-bottom:20px}
.form-grupo{margin-bottom:16px}
.form-grupo label{display:block;margin-bottom:6px;font-weight:600;font-size:.9rem;color:var(--azul-oscuro)}
.form-grupo input,
.form-grupo select,
.form-grupo textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--borde);
  border-radius:8px;
  font-family:inherit;
  font-size:.95rem;
  transition:var(--transicion);
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus{
  outline:none;
  border-color:var(--azul-medio);
  box-shadow:0 0 0 3px rgba(3,132,190,.15);
}
.form-grupo textarea{resize:vertical;min-height:120px}

/* ============== FOOTER ============== */
.site-footer{
  background:var(--azul-oscuro);
  color:#c9dae6;
  padding:60px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-col h4{
  color:var(--blanco);
  margin-bottom:18px;
  font-size:1.05rem;
  position:relative;
  padding-bottom:10px;
}
.footer-col h4::after{
  content:"";
  position:absolute;
  bottom:0;left:0;
  width:35px;height:3px;
  background:var(--naranja);
  border-radius:2px;
}
.footer-col p{font-size:.92rem;line-height:1.7}
.footer-logo img{height:70px;margin-bottom:16px;filter:brightness(0) invert(1)}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{color:#c9dae6;font-size:.92rem}
.footer-col ul a:hover{color:var(--celeste);padding-left:4px}
.footer-contacto-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.9rem}
.footer-contacto-item .icono{color:var(--celeste);flex-shrink:0;margin-top:2px}
.redes-sociales{display:flex;gap:10px;margin-top:14px}
.redes-sociales a{
  width:38px;height:38px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--blanco);
  font-size:1rem;
}
.redes-sociales a:hover{background:var(--celeste);color:var(--blanco)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px 0;
  text-align:center;
  font-size:.85rem;
}
.credito-mexa{
  color:var(--naranja);
  font-weight:600;
  text-decoration:none;
  transition:var(--transicion);
}
.credito-mexa:hover{color:var(--blanco)}

/* ============== WHATSAPP FLOTANTE ============== */
.whatsapp-float{
  position:fixed;
  bottom:24px;right:24px;
  width:58px;height:58px;
  background:#25D366;
  color:var(--blanco);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
  z-index:1000;
  transition:var(--transicion);
}
.whatsapp-float:hover{transform:scale(1.1);color:var(--blanco)}

/* ============== RESPONSIVE ============== */

/* Tablets - hasta 900px */
@media (max-width:900px){
  .detalle-producto{grid-template-columns:1fr}
  .contacto-grid{grid-template-columns:1fr;gap:24px}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
  }
  .hero h1{font-size:clamp(1.7rem,3.5vw,2.6rem)}
  .features-grid{gap:20px}
  .productos-grid{gap:22px}
}

/* Móvil grande - hasta 768px */
@media (max-width:768px){
  .container{padding:0 16px}

  /* TOPBAR: dejar visible solo info clave en formato compacto y tappeable */
  .topbar{padding:6px 0;font-size:.78rem}
  .topbar .container{gap:6px;justify-content:center;text-align:center}
  .topbar-info{gap:14px;flex-wrap:wrap;justify-content:center}
  .topbar-info span{white-space:nowrap}
  .topbar-info:last-child{display:none}  /* ocultar horario, queda en footer */
  .topbar a{color:var(--celeste);text-decoration:underline}

  /* HEADER: logo compacto + botón hamburguesa grande */
  .header-inner{padding:10px 0}
  .logo img{height:46px}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    font-size:1.5rem;
    border-radius:8px;
  }
  .nav-toggle:hover{background:var(--gris-claro)}

  /* MENÚ móvil: full-width con touch targets generosos */
  .main-nav{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--blanco);
    box-shadow:var(--sombra-fuerte);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav.abierto{max-height:80vh;overflow-y:auto}
  .main-nav ul{flex-direction:column;gap:0;padding:8px 0}
  .main-nav a{
    padding:14px 20px;
    border-radius:0;
    border-bottom:1px solid var(--borde);
    font-size:1rem;
  }
  .main-nav li:last-child a{border-bottom:0}
  .btn-cotizar{
    margin:10px 16px 6px;
    text-align:center;
    border-radius:30px !important;
  }

  /* HERO móvil */
  .hero{padding:60px 0;min-height:360px}
  .hero h1{font-size:1.7rem;line-height:1.2}
  .hero p{font-size:1rem}
  .hero-buttons{flex-direction:column;gap:10px}
  .hero-buttons .btn{width:100%;padding:14px 24px;font-size:1rem}

  /* Sub-hero móvil */
  .page-hero{padding:50px 0;min-height:180px}
  .page-hero h1{font-size:1.8rem}

  /* SECCIONES */
  section{padding:40px 0}
  .section-title{margin-bottom:32px}
  .section-title h2{font-size:1.55rem}
  .section-title p{font-size:.95rem}

  /* CATEGORÍAS: 2 columnas en pantallas medianas */
  .categorias-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .categoria-card{padding:24px 14px}
  .categoria-icono{width:60px;height:60px;font-size:1.6rem;margin-bottom:14px}
  .categoria-card h3{font-size:1.05rem}
  .categoria-card p{font-size:.85rem}

  /* PRODUCTOS: una columna ancha es más legible en móvil */
  .productos-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .producto-card{max-width:480px;margin:0 auto;width:100%}
  .producto-img{aspect-ratio:5/4}

  /* GALERÍA móvil: grid simple de 2 columnas con feature ancho */
  .galeria-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:140px;
    gap:8px;
  }
  .galeria-item{grid-column:span 1 !important;grid-row:span 1 !important}
  .galeria-item:nth-child(1){grid-column:span 2 !important;grid-row:span 1 !important}
  .galeria-item:nth-child(10){grid-column:span 2 !important;grid-row:span 1 !important}

  /* LIGHTBOX móvil */
  .lightbox{padding:60px 12px}
  .lightbox-img-wrap img{max-height:80vh}
  .lightbox-close{top:14px;right:14px;width:42px;height:42px;font-size:1.1rem}
  .lightbox-prev,.lightbox-next{
    width:42px;height:42px;font-size:1.1rem;
    top:auto;bottom:24px;transform:none;
  }
  .lightbox-prev{left:30%;transform:translateX(-50%)}
  .lightbox-next{right:30%;transform:translateX(50%)}
  .lightbox-prev:hover{transform:translateX(-50%) scale(1.08)}
  .lightbox-next:hover{transform:translateX(50%) scale(1.08)}
  .lightbox-counter{bottom:78px;font-size:.78rem}

  /* FEATURES: 2 columnas */
  .features-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .feature-item{padding:22px 14px}
  .feature-icono{width:54px;height:54px;font-size:1.5rem}
  .feature-item h3{font-size:.98rem}
  .feature-item p{font-size:.86rem}

  /* CTA banda */
  .cta-banda{padding:46px 0}
  .cta-banda h2{font-size:1.4rem}

  /* CONTACTO */
  .contacto-info, .form-contacto{padding:24px 20px}

  /* FOOTER móvil: layout solicitado
     - Logo/descripción: ancho completo arriba
     - Enlaces + Categorías: 2 columnas en medio
     - Contacto: ancho completo abajo
  */
  .site-footer{padding:46px 0 0}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:30px 20px;
  }
  .footer-col:nth-child(1){grid-column:1 / -1}  /* logo span 2 */
  .footer-col:nth-child(4){grid-column:1 / -1}  /* contacto span 2 */
  .footer-logo img{height:60px}
  .footer-col h4{font-size:1rem}

  /* WhatsApp más cerca del borde y un toque más chico */
  .whatsapp-float{
    width:54px;height:54px;
    bottom:18px;right:18px;
    font-size:1.55rem;
  }
}

/* Móvil pequeño - hasta 480px */
@media (max-width:480px){
  .topbar{font-size:.74rem;padding:5px 0}
  .topbar-info{gap:10px}

  .hero{padding:42px 0}
  .hero h1{font-size:1.5rem}
  .hero p{font-size:.95rem}

  .page-hero{padding:32px 0}
  .page-hero h1{font-size:1.55rem}

  .section-title h2{font-size:1.4rem}

  /* Categorías: una columna para que se lean mejor */
  .categorias-grid{grid-template-columns:1fr;gap:12px}
  .categoria-card{padding:22px 18px}

  /* Features: una columna */
  .features-grid{grid-template-columns:1fr}

  /* Footer: una sola columna abajo del todo */
  .footer-grid{grid-template-columns:1fr 1fr}
  /* Mantenemos Enlaces+Categorías en 2 cols, contacto y logo a ancho completo */
}