/* =========================================================
   La Ferre de Gabriel S de RL de CV — estilos.css
   ========================================================= */

:root{
  --verde:           #02A54E;
  --verde-oscuro:    #027A3B;
  --verde-claro:     #E7F6EC;
  --naranja:         #FF6720;
  --naranja-oscuro:  #E0551A;
  --negro-cinta:     #111111;
  --fondo:           #F7F8F7;
  --texto:           #1f1f1f;
  --texto-claro:     #5a5a5a;
  --blanco:          #ffffff;
  --radio:           6px;
  --sombra:          0 2px 10px rgba(0,0,0,.10);
  --fuente-titulo:   'Poppins', Arial, sans-serif;
  --fuente-texto:    'Open Sans', Arial, sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--fuente-texto);
  color:var(--texto);
  background:var(--fondo);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

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

/* ---------- Barra superior ---------- */
.barra-superior{
  background:linear-gradient(90deg, var(--verde-oscuro), var(--verde));
  color:var(--blanco);
  font-size:.82rem;
}
.barra-superior__interior{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:8px 0;
}
.barra-superior__item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 16px;
  color:var(--blanco);
  border-right:1px solid rgba(255,255,255,.3);
}
.barra-superior__item:last-child{ border-right:none; }
.barra-superior__item svg{ width:15px; height:15px; flex-shrink:0; }
a.barra-superior__item:hover{ color:var(--fondo); text-decoration:underline; }

/* ---------- Header ---------- */
.encabezado{
  background:var(--blanco);
  padding:18px 0;
  text-align:center;
  border-bottom:4px solid var(--verde);
}
.encabezado img{
  margin:0 auto;
  max-height:100px;
}

/* ---------- Navegación ---------- */
.nav-toggle{
  display:none;
  width:100%;
  align-items:center;
  gap:10px;
  background:var(--naranja);
  color:var(--blanco);
  border:none;
  padding:14px 20px;
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

.nav{
  background:var(--naranja);
  display:flex;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:500;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.nav a{
  color:var(--blanco);
  padding:14px 24px;
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  border-bottom:3px solid transparent;
  transition:background .15s ease, border-color .15s ease;
}
.nav a:hover{ background:var(--naranja-oscuro); }
.nav a.activo{
  background:var(--naranja-oscuro);
  border-bottom:3px solid var(--verde-claro);
}

@media (max-width:640px){
  .nav-toggle{ display:flex; }
  .nav{
    flex-direction:column;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    box-shadow:none;
    position:static; /* en móvil no queremos que se quede pegada, para no tapar contenido */
  }
  .nav.abierta{ max-height:260px; box-shadow:0 3px 10px rgba(0,0,0,.15); }
}

/* ---------- Secciones genéricas ---------- */
.seccion{ padding:48px 0; }
.seccion h2{
  font-family:var(--fuente-titulo);
  color:var(--verde-oscuro);
  border-left:5px solid var(--naranja);
  padding-left:14px;
  margin-bottom:24px;
}

/* ---------- Carrusel del banner ---------- */
/* ---------- Carrusel del banner ---------- */
.carrusel{
  position:relative;
  max-width:1290px;   /* mismo ancho que el resto del contenido, ya no 900px */
  aspect-ratio:1290 / 530;        /* más presencia */
  margin:0 auto;
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  background:var(--blanco);   /* ya no gris, se mezcla con el fondo de la página */
}
.carrusel-slide{
  min-width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--blanco);
}
.carrusel-pista{
  display:flex;
  height:100%;
  transition:transform .5s ease;
}

.carrusel-slide img{
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.carrusel-flecha{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.85);
  color:var(--negro-cinta);
  border:none;
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:1.15rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--sombra);
}
.carrusel-flecha:hover{ background:var(--naranja); color:var(--blanco); }
.carrusel-flecha.anterior{ left:12px; }
.carrusel-flecha.siguiente{ right:12px; }
.carrusel-puntos{
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:7px;
}
.carrusel-punto{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  border:2px solid rgba(0,0,0,.15);
  cursor:pointer;
}
.carrusel-punto.activo{ background:var(--naranja); border-color:var(--naranja); }

/* ---------- Empresa (dentro de Inicio) ---------- */
.empresa p{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--texto-claro);
  max-width:900px;
}

.empresa .mision-vision{
  text-align:justify;
  hyphens:auto;
}
.empresa-datos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
  margin-top:28px;
}
.empresa-dato{
  background:var(--blanco);
  border-radius:var(--radio);
  padding:20px;
  box-shadow:var(--sombra);
  text-align:center;
  border-top:3px solid var(--verde);
}
.empresa-dato strong{
  display:block;
  font-family:var(--fuente-titulo);
  font-size:1.6rem;
  color:var(--naranja);
}

/* ---------- Marcas (franja blanca) ---------- */
.franja-marcas{
  display:flex;
  flex-wrap:wrap;
  background:var(--blanco);
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.franja-marcas .marca{
  flex:1 1 220px;
  padding:26px 20px;
  text-align:center;
  border-right:1px solid #eee;
}
.franja-marcas .marca:last-child{ border-right:none; }
.franja-marcas img{ margin:0 auto; max-height:34px; }

/* ---------- Productos (submarcas) ---------- */
.marca-bloque{
  background:var(--blanco);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:28px;
  margin-bottom:34px;
  border-top:4px solid var(--verde);
}
.marca-bloque__encabezado{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.marca-bloque__encabezado .marca-logo-caja{
  width:135px;
  height:49px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.marca-bloque__encabezado .marca-logo-caja img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.marca-bloque__descripcion{
  color:var(--texto-claro);
  line-height:1.6;
  margin-bottom:18px;
}
.marca-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
}
.marca-galeria figure{
  margin:0;
  border-radius:var(--radio);
  overflow:hidden;
  border:1px solid #eee;
}
.marca-galeria img{ aspect-ratio:1/1; object-fit:cover; width:100%; }
.marca-galeria figcaption{
  font-size:.78rem;
  text-align:center;
  padding:6px 4px;
  color:var(--texto-claro);
}

/* ---------- Promociones ---------- */
.visor-pdf{
  width:100%;
  height:75vh;
  border:1px solid #ddd;
  border-radius:var(--radio);
  background:var(--blanco);
}
.promo-pestanas{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:16px;
  border-bottom:2px solid #e0e0e0;
}
.promo-pestana{
  padding:10px 20px;
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  font-family:var(--fuente-titulo);
  font-weight:600;
  font-size:.9rem;
  color:var(--texto-claro);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.promo-pestana:hover{ color:var(--naranja); }
.promo-pestana.activa{
  color:var(--naranja);
  border-bottom:3px solid var(--naranja);
}

.promociones-encabezado{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:24px;
}
.promociones-encabezado h2{ margin-bottom:0; }
.promociones-encabezado img{ max-height:70px; }

/* ---------- Aviso de privacidad ---------- */
.aviso-privacidad{
  background:var(--blanco);
  border-radius:var(--radio);
  padding:30px;
  box-shadow:var(--sombra);
  line-height:1.7;
  color:var(--texto-claro);
}
.aviso-privacidad h3{ color:var(--verde-oscuro); margin-top:26px; }

/* ---------- Footer de contacto (2 columnas) ---------- */
.pie-contacto{
  background:var(--verde);
  padding:44px 0;
}
.pie-contacto__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:start;
}
.pie-contacto__info h2{
  color:var(--blanco);
  border:none;
  padding:0;
  font-family:var(--fuente-titulo);
  margin-bottom:10px;
}
.pie-contacto__info > p{
  color:rgba(255,255,255,.9);
  line-height:1.6;
  margin-bottom:22px;
}
.sucursal-mini-grupo{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

@media (max-width:520px){
  .sucursal-mini-grupo{ grid-template-columns:1fr; }
}
.sucursal-mini{
  background:rgba(255,255,255,.17);
  border-radius:var(--radio);
  padding:14px 16px 14px 18px;
  color:var(--blanco);
  border-left:4px solid var(--naranja);
}
.sucursal-mini.cedis{ background:rgba(255,255,255,.25); }
.sucursal-mini h4{
  margin:0 0 6px;
  font-family:var(--fuente-titulo);
  letter-spacing:.06em;
  color:var(--blanco);
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
}
.sucursal-mini p{
  margin:3px 0;
  font-size:.88rem;
  line-height:1.5;
  color:rgba(255,255,255,.95);
}

.pie-contacto__formulario h2{
  color:var(--blanco);
  border:none;
  padding:0;
  font-family:var(--fuente-titulo);
  margin-bottom:14px;
}
.contacto-caja{
  background:var(--blanco);
  border-radius:var(--radio);
  padding:20px 22px;
  box-shadow:var(--sombra);
}
.contacto-caja .fila-doble{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.campo-trampa{
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}
.contacto-caja label{
  display:block;
  color:var(--texto);
  font-weight:600;
  font-size:.85rem;
  margin:10px 0 5px;
}
.contacto-caja label:first-of-type{ margin-top:6px; }
.contacto-caja input,
.contacto-caja textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid #ddd;
  border-radius:4px;
  font-family:var(--fuente-texto);
  font-size:.9rem;
}
.contacto-caja textarea{
  min-height:80px;
  max-height:160px;
  resize:vertical;
  overflow-y:auto;
}
.contacto-caja button{
  width:100%;
  margin-top:14px;
  padding:11px 20px;
  background:var(--naranja);
  color:var(--blanco);
  border:none;
  border-radius:4px;
  font-family:var(--fuente-titulo);
  font-weight:600;
  cursor:pointer;
}
.contacto-caja button:hover{ background:var(--naranja-oscuro); }

@media (max-width:480px){
  .contacto-caja .fila-doble{ grid-template-columns:1fr; }
}
.mensaje-estado{
  margin:0 0 22px;
  padding:10px 14px;
  border-radius:4px;
  font-size:.85rem;
}
.mensaje-estado.exito{ background:#e3f5e1; color:#1c6b32; }
.mensaje-estado.error{ background:#fbe4e4; color:#8a1c1c; }

@media (max-width:800px){
  .pie-contacto__grid{ grid-template-columns:1fr; }
}

/* ---------- Link de Aviso de Privacidad (debajo del formulario) ---------- */
.aviso-link{
  text-align:center;
  padding:14px 0;
  background:var(--verde-oscuro);
}
.aviso-link a{
  color:var(--blanco);
  font-size:.85rem;
  text-decoration:underline;
}
.aviso-link a:hover{ color:var(--naranja); }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:999;
  transition:transform .15s ease;
}
.whatsapp-flotante:hover{ transform:scale(1.08); }
.whatsapp-flotante svg{ width:28px; height:28px; }

/* ---------- Pie de página ---------- */
.pie{
  background:var(--negro-cinta);
  color:#999;
  text-align:center;
  padding:16px 0;
  font-size:.85rem;
}

@media (max-width:640px){
  .nav{ flex-direction:column; }
  .barra-superior__interior{ flex-direction:column; align-items:center; gap:4px; }
  .franja-marcas .marca{ border-right:none; border-bottom:1px solid #eee; }
}