/* ============================================
   GRUPO JOSÉ PAZ S.A.S - Estilos principales
   Paleta: Rojo #CC0000 | Amarillo #F5A623 | Verde #1A5C2A
   ============================================ */

/* Las fuentes principales (Caveat, Pacifico, Poppins) se cargan de forma asíncrona y con display=swap en el HTML */

@font-face {
  font-family: "Someone";
  src: url("../assets/fonts/Someone.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Caveat", "Pacifico", "Someone", cursive, sans-serif;
  --rojo:      #CC0000;
  --rojo-dark: #990000;
  --rojo-light:#E83333;
  --amarillo:  #F5A623;
  --verde:     #1A5C2A;
  --verde-dark:#0F3A18;
  --blanco:    #FFFFFF;
  --gris-claro:#F8F9FA;
  --gris:      #E9ECEF;
  --gris-borde:#DEE2E6;
  --texto:     #2B2B2B;
  --texto-muted:#6C757D;
  --sombra:    0 4px 20px rgba(0,0,0,0.08);
  --sombra-lg: 0 10px 40px rgba(0,0,0,0.15);
  --radius:    12px;
  --radius-lg: 20px;
  --transicion:0.3s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Poppins","Segoe UI",sans-serif;color:var(--texto);background:var(--blanco);overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;}
main{flex:1;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.section-pad{padding:80px 0;}
.section-pad-sm{padding:50px 0;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:50px;font-weight:700;font-size:.95rem;letter-spacing:.3px;cursor:pointer;border:none;transition:all var(--transicion);}
.btn-rojo{background:var(--rojo);color:var(--blanco);box-shadow:0 6px 20px rgba(204,0,0,.35);}
.btn-rojo:hover{background:var(--rojo-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(204,0,0,.45);color:var(--blanco);}
.btn-amarillo{background:var(--amarillo);color:#1a1a1a;box-shadow:0 6px 20px rgba(245,166,35,.35);}
.btn-amarillo:hover{background:#e09518;transform:translateY(-2px);color:#000;}
.btn-verde{background:var(--verde);color:var(--blanco);box-shadow:0 6px 20px rgba(26,92,42,.35);}
.btn-verde:hover{background:var(--verde-dark);transform:translateY(-2px);color:var(--blanco);}
.btn-outline{background:transparent;border:2px solid var(--blanco);color:var(--blanco);}
.btn-outline:hover{background:var(--blanco);color:var(--rojo);}
.btn-outline-rojo{background:transparent;border:2px solid var(--rojo);color:var(--rojo);}
.btn-outline-rojo:hover{background:var(--rojo);color:var(--blanco);}

.tag{display:inline-block;background:var(--amarillo);color:var(--verde-dark);font-weight:700;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;padding:5px 16px;border-radius:50px;margin-bottom:14px;}
.tag-rojo{background:rgba(204,0,0,0.12);color:var(--rojo);}
.tag-verde{background:rgba(26,92,42,0.15);color:var(--verde);}
.section-title{font-family:var(--font-display);font-size:clamp(2.4rem,4.8vw,3.6rem);font-weight:700;letter-spacing:0.5px;color:var(--rojo);line-height:1.15;margin-bottom:16px;}
.section-title span{color:var(--verde);}
.section-subtitle{font-size:1.05rem;color:var(--texto-muted);max-width:620px;line-height:1.7;margin-bottom:40px;}
.text-center{text-align:center;}
.text-center .section-subtitle{margin-left:auto;margin-right:auto;margin-bottom:40px;}
.divider{width:60px;height:4px;background:var(--amarillo);border-radius:2px;margin-bottom:20px;}
.text-center .divider{margin-left:auto;margin-right:auto;margin-bottom:20px;}

/* NAVBAR */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--rojo);box-shadow:0 2px 20px rgba(0,0,0,.2);transition:all var(--transicion);}
#navbar.scrolled{background:rgba(204,0,0,.98);backdrop-filter:blur(10px);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;max-width:1180px;margin:0 auto;}
.nav-logo-group{display:flex;align-items:center;gap:12px;}
.nav-logo{display:flex;align-items:center;gap:8px;}
.nav-logo img{height:50px;max-width:150px;object-fit:contain;border-radius:6px;transition:height var(--transicion);}
.nav-logo .brand-name{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--blanco);line-height:1.1;display:none;}
.nav-logo .brand-name span{display:block;font-size:.65rem;font-family:"Poppins",sans-serif;letter-spacing:2px;text-transform:uppercase;opacity:.9;font-weight:500;}

/* BADGE CONTADOR EN HEADER (ADAPTATIVO) */
.nav-visitor-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(245,166,35,0.4);
  border-radius:50px;
  font-size:0.75rem;
  color:rgba(255,255,255,0.92);
  font-weight:500;
  transition:all var(--transicion);
  backdrop-filter:blur(4px);
  white-space:nowrap;
}
.nav-visitor-badge:hover{
  background:rgba(0,0,0,0.35);
  border-color:var(--amarillo);
  transform:scale(1.03);
}
.nav-visitor-badge .badge-icon-mini{
  font-size:0.85rem;
}
.nav-visitor-badge .live-dot{
  width:6px;
  height:6px;
  background:#25D366;
  border-radius:50%;
  box-shadow:0 0 6px #25D366;
  animation:pulseLive 2s infinite ease-in-out;
  flex-shrink:0;
}
.nav-visitor-badge strong{
  color:var(--amarillo);
  font-weight:800;
  font-family:"Poppins",sans-serif;
  letter-spacing:0.3px;
  display:inline-block;
  transition:transform 0.3s ease, color 0.3s ease;
}
.nav-visitor-badge strong.count-bump{
  animation:countBump 0.45s ease-out;
}
@keyframes countBump{
  0%{transform:scale(1);color:var(--amarillo);}
  40%{transform:scale(1.22);color:#fff;text-shadow:0 0 8px rgba(245,166,35,0.8);}
  100%{transform:scale(1);color:var(--amarillo);}
}
@media(max-width:768px){
  .nav-inner{padding:8px 14px;}
  .nav-logo img{height:42px;max-width:120px;}
  .nav-logo-group{gap:8px;}
  .nav-visitor-badge{
    padding:3px 8px;
    font-size:0.68rem;
    gap:4px;
    background:rgba(0,0,0,0.3);
  }
  .nav-visitor-badge .badge-text-full{display:none;}
  .nav-visitor-badge .badge-text-short{display:inline;}
}
@media(max-width:400px){
  .nav-logo img{height:36px;max-width:95px;}
  .nav-visitor-badge{
    padding:2px 6px;
    font-size:0.62rem;
  }
  .nav-visitor-badge .badge-icon-mini{font-size:0.75rem;}
}
@media(min-width:769px){
  .nav-visitor-badge .badge-text-short{display:none;}
  .nav-visitor-badge .badge-text-full{display:inline;}
}

.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{color:rgba(255,255,255,.9);font-weight:500;font-size:.9rem;padding:7px 14px;border-radius:8px;transition:all var(--transicion);}
.nav-links a:hover{color:var(--blanco);background:rgba(255,255,255,.15);}
.nav-links a.active{color:var(--amarillo);background:rgba(0,0,0,.2);font-weight:700;}
.nav-cta{background:var(--amarillo)!important;color:#1a1a1a!important;border-radius:50px!important;font-weight:700!important;padding:8px 20px!important;margin-left:6px;}
.nav-cta:hover{background:#e09518!important;transform:translateY(-1px);color:#000!important;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none;}
.hamburger span{display:block;width:24px;height:2px;background:var(--blanco);border-radius:2px;transition:all var(--transicion);}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.mobile-nav{display:none;flex-direction:column;background:var(--rojo-dark);padding:16px 24px 20px;gap:4px;}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:rgba(255,255,255,.9);font-weight:500;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem;}
.mobile-nav a.active{color:var(--amarillo);font-weight:700;}

/* PAGE HEADER (PÁGINAS INTERNAS) */
.page-header{position:relative;background:linear-gradient(135deg,var(--rojo) 0%,var(--rojo-dark) 100%);color:var(--blanco);padding:140px 0 60px;text-align:center;overflow:hidden;}
.page-header::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%,rgba(245,166,35,.15) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(26,92,42,.2) 0%,transparent 50%);}
.page-header-content{position:relative;z-index:2;}
.page-header h1{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.4rem);font-weight:700;letter-spacing:0.5px;margin-bottom:12px;color:var(--blanco);}
.page-header h1 span{color:var(--amarillo);}
.page-header p{font-size:1.1rem;color:rgba(255,255,255,.88);max-width:650px;margin:0 auto 16px;}
.breadcrumbs{display:flex;justify-content:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.75);}
.breadcrumbs a{color:var(--amarillo);}
.breadcrumbs span{opacity:.5;}

/* HERO (INICIO) */
#hero{position:relative;min-height:92vh;background:var(--rojo);display:flex;align-items:center;overflow:hidden;padding-top:80px;}
.hero-bg-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(245,166,35,.12) 0%,transparent 40%),radial-gradient(circle at 60% 80%,rgba(26,92,42,.15) 0%,transparent 35%);}
.hero-shapes{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.hero-circle{position:absolute;border-radius:50%;pointer-events:none;}
.hero-circle-1{width:560px;height:560px;top:-120px;right:-80px;background:var(--amarillo);opacity:0.18;}
.hero-circle-2{width:320px;height:320px;bottom:-80px;left:-80px;background:var(--amarillo);opacity:0.08;}
.hero-circle-3{width:260px;height:260px;top:20%;right:14%;background:var(--blanco);opacity:0.06;}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:40px;width:100%;max-width:1180px;margin:0 auto;padding:60px 24px;position:relative;z-index:2;}
.hero-content{z-index:2;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:var(--blanco);font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:24px;backdrop-filter:blur(4px);}
.hero-badge::before{content:"★";color:var(--amarillo);}
.hero-title{font-family:var(--font-display);font-size:clamp(3.2rem,6.5vw,5.2rem);font-weight:700;letter-spacing:0.5px;color:var(--blanco);line-height:1.05;margin-bottom:20px;min-height:2.15em;contain:layout;}
.hero-title .typewriter-line1{display:block;min-height:1.05em;}
.hero-title .typewriter-line2{display:block;min-height:1.05em;}
.hero-title .highlight{color:var(--amarillo);}
.typewriter-cursor{display:inline-block;color:var(--amarillo);font-weight:300;margin-left:3px;animation:typeBlink 0.75s infinite;vertical-align:baseline;user-select:none;width:0.3em;}
@keyframes typeBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.hero-subtitle{color:rgba(255,255,255,.9);font-size:1.08rem;line-height:1.7;margin-bottom:34px;max-width:520px;}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px;}
.hero-stats{display:flex;gap:32px;flex-wrap:wrap;}
.stat{text-align:center;}
.stat-number{font-family:"Poppins","Segoe UI",sans-serif;font-weight:800;font-size:1.8rem;color:var(--amarillo);line-height:1;}
.stat-label{font-size:.78rem;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.hero-image{position:relative;display:flex;align-items:center;justify-content:center;z-index:2;}
.hero-mascot-backdrop-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,0.32) 0%,rgba(255,255,255,0.1) 50%,transparent 72%);z-index:1;pointer-events:none;}

/* ELEMENTOS AMBIENTALES Y ORBES FLOTANTES QUE ATRAVIESAN EL LOGO */
.hero-backdrop-elements{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(28px);pointer-events:none;}
.orb-1{width:280px;height:280px;background:radial-gradient(circle,rgba(245,166,35,0.55) 0%,rgba(255,255,255,0.3) 35%,transparent 70%);top:15%;left:20%;animation:orbTraverse1 12s ease-in-out infinite alternate;}
.orb-2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,255,255,0.5) 0%,rgba(245,166,35,0.4) 40%,transparent 70%);bottom:10%;right:15%;animation:orbTraverse2 14s ease-in-out infinite alternate;}
.orb-3{width:340px;height:340px;background:radial-gradient(circle,rgba(245,166,35,0.42) 0%,rgba(204,0,0,0.18) 50%,transparent 75%);top:25%;right:25%;animation:orbTraverse3 16s ease-in-out infinite alternate;}

@keyframes orbTraverse1{0%{transform:translate(-140px,-90px) scale(0.85);}50%{transform:translate(30px,15px) scale(1.25);}100%{transform:translate(160px,120px) scale(0.9);}}
@keyframes orbTraverse2{0%{transform:translate(150px,100px) scale(0.9);}50%{transform:translate(-20px,-20px) scale(1.3);}100%{transform:translate(-160px,-110px) scale(0.85);}}
@keyframes orbTraverse3{0%{transform:translate(180px,-60px) scale(0.9);}50%{transform:translate(-10px,30px) scale(1.2);}100%{transform:translate(-170px,70px) scale(0.95);}}

/* Empanaditas doradas artesanales flotantes y animadas alrededor del logo */
.hero-floating-empanada{
  position:absolute;
  pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3)) drop-shadow(0 0 14px rgba(245,166,35,0.6));
  opacity:0.92;
  z-index:1;
}
.hero-floating-empanada svg{
  width:100%;
  height:100%;
  display:block;
}

/* Cruces y trayectorias dinámicas moderadas */
.emp-1{width:52px;height:34px;left:15%;top:62%;animation:empanadaCross1 16s linear infinite;}
.emp-2{width:56px;height:36px;right:16%;top:34%;animation:empanadaCross2 18s linear infinite 3.5s;}

/* Empanaditas flotando con balanceo suave alrededor de la silueta del logo */
.emp-3{width:46px;height:30px;top:10%;right:20%;animation:empanadaFloat1 6.5s ease-in-out infinite;}
.emp-5{width:44px;height:28px;bottom:12%;right:16%;animation:empanadaFloat3 8s ease-in-out infinite 1.5s;}
.emp-6{width:40px;height:26px;bottom:15%;left:18%;animation:empanadaFloat4 6s ease-in-out infinite 2.2s;}
.emp-7{width:48px;height:31px;top:46%;right:6%;animation:empanadaFloat1 7.2s ease-in-out infinite 3.2s;}
.emp-8{width:38px;height:24px;top:6%;left:44%;animation:empanadaFloat2 5.8s ease-in-out infinite 1.2s;}

@keyframes empanadaCross1{
  0%{transform:translate(-160px, 80px) rotate(-25deg) scale(0.8);opacity:0;}
  15%{opacity:0.92;}
  50%{transform:translate(20px, 10px) rotate(8deg) scale(1.02);opacity:0.95;}
  85%{opacity:0.92;}
  100%{transform:translate(200px, -60px) rotate(35deg) scale(0.8);opacity:0;}
}

@keyframes empanadaCross2{
  0%{transform:translate(180px, -100px) rotate(25deg) scale(0.8);opacity:0;}
  15%{opacity:0.92;}
  50%{transform:translate(-15px, 15px) rotate(-10deg) scale(1.04);opacity:0.95;}
  85%{opacity:0.92;}
  100%{transform:translate(-190px, 120px) rotate(-35deg) scale(0.75);opacity:0;}
}

@keyframes empanadaFloat1{
  0%,100%{transform:translateY(0) rotate(-10deg) scale(1);}
  50%{transform:translateY(-18px) rotate(8deg) scale(1.08);}
}

@keyframes empanadaFloat2{
  0%,100%{transform:translate(0, 0) rotate(14deg) scale(1);}
  50%{transform:translate(12px, -16px) rotate(-6deg) scale(1.1);}
}

@keyframes empanadaFloat3{
  0%,100%{transform:translate(0, 0) rotate(-8deg) scale(1);}
  50%{transform:translate(-12px, 14px) rotate(12deg) scale(1.06);}
}

@keyframes empanadaFloat4{
  0%,100%{transform:translateY(0) rotate(6deg) scale(0.96);}
  50%{transform:translateY(-15px) rotate(-10deg) scale(1.06);}
}

.hero-mascot-wrap{position:relative;z-index:4;animation:mascotFloat 4s ease-in-out infinite;}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}
.hero-mascot-glow{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);width:220px;height:35px;background:rgba(0,0,0,.3);border-radius:50%;filter:blur(15px);animation:shadowFloat 4s ease-in-out infinite;}
@keyframes shadowFloat{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.3;}50%{transform:translateX(-50%) scaleX(.75);opacity:.18;}}
.hero-mascot-wrap img{
  max-height:clamp(260px,36vw,420px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

/* STRIP */
#strip{background:var(--amarillo);padding:14px 0;overflow:hidden;}
.strip-track{display:flex;gap:0;animation:stripScroll 22s linear infinite;white-space:nowrap;}
@keyframes stripScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.strip-item{display:inline-flex;align-items:center;gap:10px;padding:0 30px;font-weight:800;font-size:.88rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--verde-dark);}
.strip-dot{width:6px;height:6px;background:var(--rojo);border-radius:50%;flex-shrink:0;}

/* SECCIÓN NOSOTROS PREVIEW / ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.about-img-main{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra-lg);position:relative;background:#fff;}
.about-img-main img{width:100%;height:440px;object-fit:cover;}
.about-carousel{position:relative;width:100%;height:440px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra-lg);background:#1a1a1a;}
.about-carousel-slides{position:relative;width:100%;height:100%;}
.about-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1.05);}
.about-slide.active{opacity:1;visibility:visible;transform:scale(1);z-index:2;}
.about-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.about-carousel-nav{position:absolute;bottom:20px;left:24px;display:flex;gap:8px;z-index:5;background:rgba(0,0,0,0.45);padding:6px 12px;border-radius:30px;backdrop-filter:blur(4px);}
.about-carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s ease;}
.about-carousel-dot.active{background:var(--amarillo);width:24px;border-radius:10px;}
.about-img-wrap{position:relative;}
.about-badge-float{position:absolute;bottom:-20px;right:-15px;background:var(--verde);color:var(--blanco);border-radius:var(--radius);padding:18px 24px;text-align:center;box-shadow:var(--sombra-lg);min-width:140px;z-index:10;}
.about-badge-float .num{font-family:"Poppins","Segoe UI",sans-serif;font-weight:800;font-size:2rem;color:var(--amarillo);line-height:1;}
.about-badge-float .txt{font-size:.78rem;opacity:.95;line-height:1.3;margin-top:4px;}
.valores-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;}
.valor-card{position:relative;background:#ffffff;border-radius:var(--radius-lg);padding:18px 18px 24px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;transition:all var(--transicion);border:1px solid var(--gris-borde);box-shadow:0 4px 15px rgba(0,0,0,0.04);}
.valor-card:hover{border-color:var(--rojo);box-shadow:0 12px 30px rgba(204,0,0,0.12);transform:translateY(-4px);}
.valor-card .card-photo-badge{width:100%;height:140px;border-radius:12px;overflow:hidden;border:2px solid var(--amarillo);box-shadow:0 4px 14px rgba(0,0,0,0.09);margin:0 0 14px 0;flex-shrink:0;transition:all 0.35s ease;background:#f4f4f4;}
.valor-card .card-photo-badge img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;display:block;}
.valor-card:hover .card-photo-badge{transform:translateY(-3px);border-color:var(--rojo);box-shadow:0 8px 24px rgba(204,0,0,0.20);}
.valor-card:hover .card-photo-badge img{transform:scale(1.07);}
.valor-card .card-content{position:relative;z-index:2;display:flex;flex-direction:column;}
.valor-card h4{font-size:1.05rem;font-weight:800;color:var(--rojo);margin-bottom:8px;line-height:1.25;}
.valor-card p{font-size:.86rem;color:var(--texto-muted);line-height:1.55;margin:0;}
.valor-card.icon-version{display:flex;flex-direction:row;align-items:stretch;gap:16px;padding:12px 16px 12px 12px;min-height:165px;}
.valor-card.icon-version .card-content{display:flex;flex-direction:column;justify-content:center;padding:4px 0;}
.valor-card.icon-version .valor-icon{font-size:2rem;line-height:1;flex-shrink:0;margin:0;}
.valor-card.icon-version p{color:var(--texto-muted);font-weight:400;}

/* SECCIÓN VALORES CORPORATIVOS */
.valores-corporativos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:26px;
  margin-top:40px;
}
.valor-corp-card{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  padding:32px 26px;
  border:1px solid var(--gris-borde);
  box-shadow:var(--sombra);
  position:relative;
  overflow:hidden;
  transition:all var(--transicion);
  display:flex;
  flex-direction:column;
}
.valor-corp-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--rojo), var(--amarillo));
  transition:height 0.3s ease;
}
.valor-corp-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-lg);
  border-color:rgba(204,0,0,0.25);
}
.valor-corp-card:hover::before{
  height:6px;
}
.valor-corp-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.valor-corp-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(204,0,0,0.08);
  color:var(--rojo);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
  transition:all 0.3s ease;
}
.valor-corp-card:hover .valor-corp-icon{
  background:var(--rojo);
  color:var(--blanco);
  transform:scale(1.08) rotate(5deg);
}
.valor-corp-header h3{
  font-size:1.22rem;
  font-weight:700;
  color:var(--texto);
  margin:0;
  line-height:1.2;
}
.valor-corp-card p{
  font-size:0.92rem;
  color:var(--texto-muted);
  line-height:1.7;
  margin:0;
}
.valor-corp-card .valor-corp-num{
  position:absolute;
  top:18px;
  right:20px;
  font-family:"Poppins",sans-serif;
  font-size:2.2rem;
  font-weight:900;
  color:rgba(0,0,0,0.04);
  line-height:1;
  pointer-events:none;
  transition:all 0.3s ease;
}
.valor-corp-card:hover .valor-corp-num{
  color:rgba(204,0,0,0.12);
  transform:scale(1.1);
}


/* CARDS CON IMAGEN REAL DEL EQUIPO */
.team-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:40px;}
.team-card{background:var(--blanco);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--gris-borde);transition:all var(--transicion);}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg);}
.team-card-img{height:260px;overflow:hidden;}
.team-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.team-card:hover .team-card-img img{transform:scale(1.05);}
.team-card-body{padding:22px;}
.team-card-body h3{font-size:1.15rem;font-weight:700;color:var(--rojo);margin-bottom:8px;}
.team-card-body p{font-size:.88rem;color:var(--texto-muted);line-height:1.6;}

/* PRODUCTOS */
.filtros{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
.filtro-btn{padding:10px 22px;border-radius:50px;font-size:.88rem;font-weight:600;cursor:pointer;border:2px solid var(--gris-borde);background:var(--blanco);color:#555;transition:all var(--transicion);}
.filtro-btn.active,.filtro-btn:hover{background:var(--rojo);color:var(--blanco);border-color:var(--rojo);}
.productos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px;}
.producto-card{background:var(--blanco);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--gris-borde);transition:all var(--transicion);display:flex;flex-direction:column;}
.producto-card:hover{transform:translateY(-8px);box-shadow:var(--sombra-lg);}
.producto-card.hidden{display:none;}
.producto-img{height:250px;background:#f8f8f8;display:flex;align-items:center;justify-content:center;font-size:4.5rem;position:relative;overflow:hidden;}
.producto-img.has-img{background:#fafafa;padding:0;}
.producto-img.has-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.producto-img.has-img.packaging-view{background:#ffffff;padding:14px;}
.producto-img.has-img.packaging-view img{object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.12));}
.producto-card:hover .producto-img.has-img img{transform:scale(1.06);}
.producto-badge-pack{position:absolute;top:12px;left:12px;background:var(--amarillo);color:#222;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:50px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.producto-badge-tag{position:absolute;top:12px;right:12px;background:var(--verde);color:var(--blanco);font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:50px;z-index:2;}
.producto-body{padding:22px;flex:1;display:flex;flex-direction:column;}
.producto-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--amarillo);margin-bottom:6px;}
.producto-body h3{font-size:1.15rem;font-weight:700;color:var(--texto);margin-bottom:8px;}
.producto-body p{font-size:.85rem;color:var(--texto-muted);line-height:1.55;margin-bottom:18px;flex:1;}
.producto-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.ingredientes{display:flex;gap:5px;flex-wrap:wrap;}
.ingrediente-tag{background:var(--gris-claro);color:#555;font-size:.72rem;padding:3px 9px;border-radius:50px;border:1px solid var(--gris-borde);font-weight:500;}
.btn-pedir{display:inline-flex;align-items:center;gap:6px;background:var(--verde);color:var(--blanco);font-size:.82rem;font-weight:700;padding:9px 16px;border-radius:50px;transition:all var(--transicion);white-space:nowrap;}
.btn-pedir:hover{background:var(--verde-dark);transform:scale(1.04);color:var(--blanco);}

/* B2B / DISTRIBUIDORES */
.distribuidores-hero-box{background:linear-gradient(135deg,var(--verde) 0%,var(--verde-dark) 100%);color:var(--blanco);border-radius:var(--radius-lg);padding:50px 40px;margin-bottom:60px;box-shadow:var(--sombra-lg);display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;align-items:center;}
.distribuidores-hero-box h2{font-family:var(--font-display);font-size:clamp(2.5rem,4.5vw,3.2rem);font-weight:700;letter-spacing:0.5px;color:var(--amarillo);margin-bottom:14px;line-height:1.15;}
.distribuidores-hero-box p{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.9);margin-bottom:24px;}
.dist-img-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.3);}
.dist-img-wrap img{width:100%;height:320px;object-fit:cover;}

.beneficios-dist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:60px;align-items:stretch;}
.beneficio-dist-card{position:relative;overflow:hidden;background:#ffffff;border:1px solid var(--gris-borde);border-radius:var(--radius-lg);padding:34px 26px;text-align:left;box-shadow:var(--sombra);transition:all var(--transicion);display:flex;flex-direction:column;justify-content:center;min-height:190px;}
.beneficio-dist-card .card-bg-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.20;transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;pointer-events:none;z-index:1;}
.beneficio-dist-card:hover{transform:translateY(-6px);border-color:var(--rojo);box-shadow:0 12px 30px rgba(204,0,0,0.14);}
.beneficio-dist-card:hover .card-bg-photo{opacity:0.35;transform:scale(1.08);}
.beneficio-dist-card .card-content{position:relative;z-index:2;}
.beneficio-dist-card h3{font-size:1.15rem;font-weight:800;color:var(--rojo);margin-bottom:10px;line-height:1.3;}
.beneficio-dist-card.icon-version{text-align:center;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:20px 20px 26px;min-height:auto;}
.beneficio-dist-card.icon-version .dist-icon-top{font-size:2.8rem;margin-bottom:16px;display:inline-block;transition:transform 0.4s ease;}
.beneficio-dist-card.icon-version:hover .dist-icon-top{transform:scale(1.2) translateY(-4px);}
.beneficio-dist-card.icon-version h3{text-align:center;font-size:1.15rem;font-weight:800;color:var(--rojo);margin-bottom:10px;line-height:1.28;min-height:44px;display:flex;align-items:center;justify-content:center;width:100%;}
.beneficio-dist-card.icon-version p{text-align:center;color:var(--texto-muted);font-size:0.88rem;line-height:1.55;margin:0;}

/* FOTOGRAFÍAS EN RECTÁNGULOS CON BORDES REDONDEADOS */
/* Distribuidores: Rectángulo horizontal superior */
.card-photo-badge{width:100%;height:145px;border-radius:12px;overflow:hidden;border:2px solid var(--amarillo);box-shadow:0 4px 14px rgba(0,0,0,0.09);margin:0 0 16px 0;flex-shrink:0;transition:all 0.35s ease;background:#f4f4f4;}
.card-photo-badge img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;display:block;}
.beneficio-dist-card.icon-version:hover .card-photo-badge{transform:translateY(-3px);border-color:var(--rojo);box-shadow:0 8px 24px rgba(204,0,0,0.20);}
.beneficio-dist-card.icon-version:hover .card-photo-badge img{transform:scale(1.07);}

/* Nosotros: Rectángulo vertical que abarca toda la altura de la tarjeta */
.valor-card.icon-version .card-photo-badge-side{width:115px;align-self:stretch;min-height:155px;border-radius:12px;overflow:hidden;border:2px solid var(--amarillo);box-shadow:0 4px 14px rgba(0,0,0,0.09);flex-shrink:0;transition:all 0.35s ease;background:#f4f4f4;margin:0;}
.valor-card.icon-version .card-photo-badge-side img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;display:block;}
.valor-card.icon-version:hover .card-photo-badge-side{transform:translateY(-2px);border-color:var(--rojo);box-shadow:0 6px 18px rgba(204,0,0,0.20);}
.valor-card.icon-version:hover .card-photo-badge-side img{transform:scale(1.07);}

.dist-form-container{background:var(--gris-claro);border-radius:var(--radius-lg);padding:50px 40px;border:1px solid var(--gris-borde);box-shadow:var(--sombra);}

/* BENEFICIOS / VALORES SECTION */
#beneficios{background:var(--verde);position:relative;overflow:hidden;}
#beneficios::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.04);}
.beneficios-header{text-align:center;margin-bottom:50px;}
.beneficios-header .section-title{color:var(--blanco);}
.beneficios-header .section-title span{color:var(--amarillo);}
.beneficios-header .section-subtitle{color:rgba(255,255,255,.8);margin:0 auto;}
.beneficios-header .divider{background:var(--amarillo);margin:0 auto 20px;}
.beneficios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;position:relative;z-index:1;}
.beneficio-card{text-align:center;padding:34px 22px;background:rgba(255,255,255,.08);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.15);transition:all var(--transicion);backdrop-filter:blur(4px);}
.beneficio-card:hover{background:rgba(255,255,255,.15);transform:translateY(-6px);}
.beneficio-img-wrap{width:115px;height:115px;margin:0 auto 18px;border-radius:50%;overflow:hidden;border:3px solid var(--amarillo);box-shadow:0 8px 25px rgba(0,0,0,0.35);transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);background:#1a1a1a;}
.beneficio-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.beneficio-card:hover .beneficio-img-wrap{transform:scale(1.1) translateY(-4px);border-color:#ffffff;box-shadow:0 12px 30px rgba(0,0,0,0.45);}
.beneficio-card:hover .beneficio-img-wrap img{transform:scale(1.12);}
.beneficio-icon{display:flex;align-items:center;justify-content:center;margin-bottom:16px;min-height:64px;color:var(--amarillo);font-size:2.8rem;}
.beneficio-icon svg{width:60px;height:60px;transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25));}
.beneficio-card:hover .beneficio-icon svg{transform:scale(1.12) translateY(-4px);}
.beneficio-card h3{color:var(--amarillo);font-size:1.08rem;font-weight:700;margin-bottom:10px;}
.beneficio-card p{color:rgba(255,255,255,.9);font-size:.85rem;line-height:1.6;}

/* PROCESO */
.proceso-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:40px;}
.proceso-steps::before{content:"";position:absolute;top:40px;left:calc(12.5% + 20px);right:calc(12.5% + 20px);height:3px;background:linear-gradient(to right,var(--amarillo),var(--rojo),var(--verde));border-radius:2px;z-index:0;}
.paso{text-align:center;position:relative;z-index:1;}
.paso-num{width:76px;height:76px;border-radius:50%;background:var(--rojo);color:var(--blanco);font-family:"Poppins","Segoe UI",sans-serif;font-weight:800;font-size:1.6rem;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 6px 20px rgba(204,0,0,.35);transition:all var(--transicion);}
.paso:hover .paso-num{transform:scale(1.1);background:var(--verde);box-shadow:0 6px 20px rgba(26,92,42,.35);}
.paso .paso-icon{font-size:1.5rem;}
.paso h3{font-size:.95rem;font-weight:700;color:var(--texto);margin-bottom:8px;}
.paso p{font-size:.82rem;color:var(--texto-muted);line-height:1.6;}

/* PUNTOS Y CONTACTO */
.sedes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin-bottom:40px;}
.sede-card{background:var(--blanco);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--sombra);border-top:5px solid var(--rojo);transition:all var(--transicion);position:relative;border-left:1px solid var(--gris-borde);border-right:1px solid var(--gris-borde);border-bottom:1px solid var(--gris-borde);}
.sede-card.fabrica{border-top-color:var(--verde);}
.sede-card:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg);}
.sede-badge{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:4px 12px;border-radius:50px;margin-bottom:14px;}
.sede-badge.fabrica{background:rgba(26,92,42,0.12);color:var(--verde);}
.sede-badge.tienda{background:rgba(204,0,0,0.12);color:var(--rojo);}
.sede-card h3{font-size:1.25rem;font-weight:700;color:var(--texto);margin-bottom:12px;}
.sede-detalle{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;font-size:.9rem;color:var(--texto-muted);}
.sede-detalle i{color:var(--rojo);font-size:1.1rem;margin-top:3px;flex-shrink:0;}
.sede-card.fabrica .sede-detalle i{color:var(--verde);}
.sede-card .horario-box{background:var(--gris-claro);padding:10px 14px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--texto);display:flex;align-items:center;gap:8px;margin-top:16px;}
.sede-card .horario-box i{color:var(--amarillo);}

/* CONTACTO DETALLE & FORM */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.contacto-info-box{background:linear-gradient(135deg,var(--rojo) 0%,var(--rojo-dark) 100%);color:var(--blanco);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--sombra-lg);}
.contacto-info-box h3{font-family:var(--font-display);font-size:2.2rem;font-weight:700;letter-spacing:0.5px;color:var(--amarillo);margin-bottom:12px;}
.contacto-info-box p{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.6;margin-bottom:28px;}
.contacto-items{display:flex;flex-direction:column;gap:20px;}
.contacto-item{display:flex;align-items:flex-start;gap:16px;}
.contacto-item-icon{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;color:var(--amarillo);}
.contacto-item-text h4{font-size:.8rem;color:var(--amarillo);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:3px;}
.contacto-item-text p{color:var(--blanco);font-size:.95rem;margin:0;}
.contacto-item-text a{color:var(--blanco);transition:color var(--transicion);}
.contacto-item-text a:hover{color:var(--amarillo);}

.form-box{background:var(--blanco);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--sombra);border:1px solid var(--gris-borde);}
.form-box h3{font-size:1.3rem;font-weight:700;color:var(--texto);margin-bottom:20px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--texto);margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1.5px solid var(--gris-borde);border-radius:var(--radius);font-size:.9rem;color:var(--texto);font-family:inherit;transition:border-color var(--transicion);background:var(--blanco);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(204,0,0,.1);}
.form-group textarea{resize:vertical;min-height:120px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.map-wrapper{margin-top:40px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--gris-borde);}
.map-wrapper iframe{width:100%;height:380px;border:0;display:block;}

/* TESTIMONIOS */
.testimonios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.testimonio-card{background:var(--gris-claro);border-radius:var(--radius-lg);padding:28px;transition:all var(--transicion);position:relative;border:1px solid var(--gris-borde);}
.testimonio-card:hover{transform:translateY(-4px);box-shadow:var(--sombra);background:#fff;}
.testimonio-card::before{content:'"';position:absolute;top:12px;right:20px;font-family:Georgia,serif;font-size:5rem;color:var(--amarillo);line-height:1;opacity:.4;}
.estrellas{color:var(--amarillo);font-size:.95rem;margin-bottom:14px;}
.testimonio-card p{font-size:.88rem;color:var(--texto-muted);line-height:1.7;margin-bottom:18px;font-style:italic;}
.testimonio-autor{display:flex;align-items:center;gap:12px;}
.autor-avatar{width:44px;height:44px;border-radius:50%;background:var(--rojo);display:flex;align-items:center;justify-content:center;color:var(--blanco);font-weight:700;font-size:1rem;flex-shrink:0;}
.autor-info h4{font-size:.9rem;font-weight:700;color:var(--texto);}
.autor-info span{font-size:.78rem;color:#999;}

/* CTA BANNER GLOBAL */
.cta-banner{background:linear-gradient(135deg,var(--rojo) 0%,var(--rojo-dark) 100%);color:var(--blanco);padding:60px 0;text-align:center;position:relative;overflow:hidden;}
.cta-banner h2{font-family:var(--font-display);font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:700;letter-spacing:0.5px;color:var(--amarillo);margin-bottom:12px;}
.cta-banner p{font-size:1.05rem;color:rgba(255,255,255,.9);max-width:600px;margin:0 auto 28px;}
.cta-banner-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* FOOTER */
#footer{background:#111;color:rgba(255,255,255,.75);padding:60px 0 0;margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:50px;}
.footer-brand img{height:70px;max-width:200px;object-fit:contain;margin-bottom:16px;border-radius:8px;}
.footer-brand p{font-size:.85rem;line-height:1.7;opacity:.7;margin-bottom:20px;}
.footer-socials{display:flex;gap:10px;}
.footer-social-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--blanco);font-size:1rem;transition:all var(--transicion);}
.footer-social-btn:hover{background:var(--rojo);transform:translateY(-2px);color:#fff;}
.footer-col h4{color:var(--blanco);font-size:.95rem;font-weight:700;margin-bottom:18px;position:relative;padding-bottom:10px;}
.footer-col h4::after{content:"";position:absolute;bottom:0;left:0;width:30px;height:2px;background:var(--amarillo);border-radius:1px;}
.footer-col ul li{margin-bottom:12px;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.75);}
.footer-col ul li strong{color:var(--blanco);font-weight:600;}
.footer-col ul li a{font-size:.85rem;color:rgba(255,255,255,.7);transition:all var(--transicion);}
.footer-col ul li a:hover{color:var(--amarillo);padding-left:4px;}
.footer-visitor-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 16px;
  background:linear-gradient(135deg, rgba(204,0,0,0.15) 0%, rgba(245,166,35,0.12) 100%);
  border:1px solid rgba(245,166,35,0.3);
  border-radius:50px;
  font-size:0.82rem;
  color:rgba(255,255,255,0.9);
  font-weight:500;
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
  transition:all var(--transicion);
  backdrop-filter:blur(6px);
}
.footer-visitor-badge:hover{
  background:linear-gradient(135deg, rgba(204,0,0,0.25) 0%, rgba(245,166,35,0.22) 100%);
  border-color:var(--amarillo);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(245,166,35,0.25);
}
.footer-visitor-badge .badge-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--amarillo);
  color:#1a1a1a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.75rem;
  font-weight:800;
  box-shadow:0 2px 8px rgba(245,166,35,0.4);
}
.footer-visitor-badge .live-dot{
  width:7px;
  height:7px;
  background:#25D366;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 8px #25D366;
  animation:pulseLive 2s infinite ease-in-out;
}
@keyframes pulseLive{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.8);}}
.footer-visitor-badge strong{
  color:var(--amarillo);
  font-weight:800;
  font-family:"Poppins",sans-serif;
  letter-spacing:0.5px;
}

/* WHATSAPP & SCROLL TOP */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:999;display:flex;align-items:center;gap:10px;}
.whatsapp-btn{width:58px;height:58px;border-radius:50%;background:#25D366;color:var(--blanco);display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 4px 20px rgba(37,211,102,.5);transition:all var(--transicion);animation:waPulse 2.5s ease-in-out infinite;}
.whatsapp-btn:hover{transform:scale(1.1);animation:none;color:#fff;}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.4);}50%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 12px rgba(37,211,102,0);}}
.wa-tooltip{background:var(--verde-dark);color:var(--blanco);padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;opacity:0;transform:translateX(10px);transition:all var(--transicion);pointer-events:none;white-space:nowrap;box-shadow:var(--sombra);}
.whatsapp-float:hover .wa-tooltip{opacity:1;transform:translateX(0);}
.scroll-top{position:fixed;bottom:28px;left:28px;width:46px;height:46px;border-radius:50%;background:var(--rojo);color:var(--blanco);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:var(--sombra);transition:all var(--transicion);opacity:0;transform:translateY(10px);z-index:999;}
.scroll-top.visible{opacity:1;transform:translateY(0);}
.scroll-top:hover{background:var(--rojo-dark);transform:translateY(-2px);}

/* ANIMACIONES REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .65s ease,transform .65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .65s ease,transform .65s ease;}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .65s ease,transform .65s ease;}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0);}
.delay-1{transition-delay:.1s;}.delay-2{transition-delay:.2s;}.delay-3{transition-delay:.3s;}.delay-4{transition-delay:.4s;}.delay-5{transition-delay:.5s;}

/* RESPONSIVE */
@media(max-width:1024px){
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .distribuidores-hero-box{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .proceso-steps{grid-template-columns:repeat(2,1fr);}
  .proceso-steps::before{display:none;}
}
@media(max-width:768px){
  .section-pad{padding:56px 0;}
  .nav-links{display:none;}.hamburger{display:flex;}
  .hero-inner{grid-template-columns:1fr;text-align:center;padding:40px 24px 60px;}
  .hero-image{order:-1;}.hero-mascot-wrap img{height:250px;}
  .hero-btns{justify-content:center;}.hero-stats{justify-content:center;}.hero-subtitle{margin:0 auto 34px;}
  .about-badge-float{right:10px;bottom:-15px;}
  .valores-grid{grid-template-columns:1fr;}
  .contacto-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .dist-form-container{padding:30px 20px;}
  .distribuidores-hero-box{padding:35px 24px;}
}
@media(max-width:480px){
  .hero-btns{flex-direction:column;align-items:stretch;}
  .beneficios-grid{grid-template-columns:1fr;}
  .sedes-grid{grid-template-columns:1fr;}
  .proceso-steps{grid-template-columns:1fr;}
  .whatsapp-float{bottom:18px;right:18px;}.scroll-top{bottom:18px;left:18px;}
}

/* ============================================
   SECCIÓN DE DISTRIBUIDORES - TIPO ACORDEÓN
   Nivel 1: Departamentos | Nivel 2: Municipios | Nivel 3: Tarjetas
   ============================================ */
.distribuidores-accordion-section {
  margin: 50px 0 60px;
  background: #FFFFFF;
  padding: 45px 28px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid #EAEAEA;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.dist-heading-custom {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 auto;
  letter-spacing: 0.5px;
}

/* Contenedor principal de departamentos */
.deptos-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}

/* Card de Departamento */
.depto-accordion-item {
  background: #FFFFFF;
  border: 2px solid #EFEFEF;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.depto-accordion-item.active {
  border-color: #E2E8F0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}

.depto-accordion-item[data-depto="cauca"].active {
  border-color: rgba(26, 92, 42, 0.4);
}

.depto-accordion-item[data-depto="huila"].active {
  border-color: rgba(217, 119, 6, 0.4);
}

/* Header del Departamento (Botón) */
.depto-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #FAFAFA;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  gap: 16px;
  user-select: none;
}

.depto-accordion-header:hover {
  background: #F3F4F6;
}

.depto-accordion-item.active .depto-accordion-header {
  background: #FFFFFF;
  border-bottom: 1px solid #ECEFF1;
}

.depto-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.depto-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.depto-accordion-header:hover .depto-icon-badge {
  transform: scale(1.08);
}

.depto-icon-badge.cauca {
  background: rgba(26, 92, 42, 0.12);
  color: var(--verde);
}

.depto-icon-badge.huila {
  background: rgba(217, 119, 6, 0.12);
  color: #D97706;
}

.depto-text-wrap h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.2;
  margin-bottom: 3px;
}

.depto-text-wrap p {
  font-size: 0.85rem;
  color: var(--texto-muted);
  font-weight: 500;
  margin: 0;
}

.depto-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.depto-pill-count {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  white-space: nowrap;
}

.depto-pill-count.cauca {
  background: rgba(26, 92, 42, 0.12);
  color: var(--verde);
}

.depto-pill-count.huila {
  background: rgba(217, 119, 6, 0.15);
  color: #B45309;
}

.depto-chevron {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto);
  font-size: 0.85rem;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.depto-accordion-item.active .depto-chevron {
  transform: rotate(180deg);
  background: var(--rojo);
  color: #FFFFFF;
}

/* Contenido del Departamento (Municipios) */
.depto-accordion-body {
  display: none;
  padding: 22px 24px 26px;
  background: #FFFFFF;
}

.depto-accordion-item.active .depto-accordion-body {
  display: block;
  animation: fadeInAccordion 0.35s ease;
}

/* Sub-acordeón de Municipios */
.municipios-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.municipio-accordion-item {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #F9FAFB;
  overflow: hidden;
  transition: all 0.25s ease;
}

.municipio-accordion-item.active {
  background: #FFFFFF;
  border-color: #D1D5DB;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.municipio-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}

.municipio-accordion-header:hover {
  background: #F3F4F6;
}

.municipio-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.municipio-pin-icon {
  color: var(--rojo);
  font-size: 1.1rem;
}

.municipio-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--texto);
}

.municipio-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto-muted);
  background: #E5E7EB;
  padding: 3px 10px;
  border-radius: 20px;
}

.municipio-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #4B5563;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.municipio-accordion-item.active .municipio-toggle-icon {
  transform: rotate(45deg);
  background: var(--rojo);
  color: #FFFFFF;
}

/* Contenido de cada Municipio (Grid de Distribuidores) */
.municipio-accordion-body {
  display: none;
  padding: 18px 20px 22px;
  border-top: 1px solid #F3F4F6;
  background: #FFFFFF;
}

.municipio-accordion-item.active .municipio-accordion-body {
  display: block;
  animation: fadeInAccordion 0.3s ease;
}

/* Tabs superiores de acceso rápido */
.dist-quick-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.dist-quick-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  color: var(--texto);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.dist-quick-tab:hover {
  background: #E5E7EB;
  transform: translateY(-2px);
}

.dist-quick-tab.active {
  background: var(--rojo);
  color: #FFFFFF;
  border-color: var(--rojo);
  box-shadow: 0 4px 14px rgba(204, 0, 0, 0.3);
}

.dist-quick-tab.cauca.active {
  background: var(--verde);
  border-color: var(--verde);
  box-shadow: 0 4px 14px rgba(26, 92, 42, 0.3);
}

.dist-quick-tab.huila.active {
  background: #D97706;
  border-color: #D97706;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
}

/* Carrusel horizontal para municipios y sección Todos */
.muni-carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.muni-carousel-track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 4px;
}

.muni-carousel-track::-webkit-scrollbar {
  display: none;
}

.muni-carousel-track .distribuidor-card-item {
  flex: 0 0 calc(33.333% - 11px);
  min-width: 280px;
  max-width: 340px;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .muni-carousel-track .distribuidor-card-item {
    flex: 0 0 calc(50% - 8px);
    min-width: 260px;
  }
}

@media (max-width: 600px) {
  .muni-carousel-container {
    gap: 6px;
  }
  .muni-carousel-track {
    gap: 12px;
    padding: 8px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .muni-carousel-track .distribuidor-card-item {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
}

.muni-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rojo);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.25);
  transition: all 0.25s ease;
  flex-shrink: 0;
  z-index: 5;
}

.muni-nav-btn:hover {
  background: var(--amarillo);
  color: #111111;
  transform: scale(1.1);
}

.muni-nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.muni-nav-btn.hidden {
  display: none !important;
}

/* Grid de Tarjetas de Distribuidores (Fallback o vista secundaria) */
.distribuidores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

/* Tarjeta individual de Distribuidor */
.distribuidor-card-item {
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.distribuidor-card-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--rojo);
  transition: width 0.3s ease;
}

.distribuidor-card-item.cauca::before {
  background: var(--verde);
}

.distribuidor-card-item.huila::before {
  background: #D97706;
}

.distribuidor-card-item:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.distribuidor-card-item:hover::before {
  width: 6px;
}

.dist-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dist-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.dist-card-title-group h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.25;
  margin-bottom: 3px;
}

.dist-card-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texto-muted);
  letter-spacing: 0.5px;
}

.dist-card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: #4B5563;
}

.dist-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

.dist-detail-row i {
  color: var(--rojo);
  margin-top: 3px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dist-detail-row.phone i {
  color: var(--verde);
}

.dist-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed #E5E7EB;
  margin-top: 4px;
}

.dist-badge-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
}

.dist-badge-loc.cauca {
  background: rgba(26, 92, 42, 0.1);
  color: var(--verde);
}

.dist-badge-loc.huila {
  background: rgba(217, 119, 6, 0.15);
  color: #B45309;
}

.dist-action-btns {
  display: flex;
  gap: 6px;
}

.dist-btn-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  text-decoration: none;
}

.dist-btn-link.call {
  background: rgba(26, 92, 42, 0.1);
  color: var(--verde);
}

.dist-btn-link.call:hover {
  background: var(--verde);
  color: #FFFFFF;
}

.dist-btn-link.wa {
  background: rgba(37, 211, 102, 0.15);
  color: #128C7E;
}

.dist-btn-link.wa:hover {
  background: #25D366;
  color: #FFFFFF;
}

.dist-btn-link.mail {
  background: rgba(204, 0, 0, 0.1);
  color: var(--rojo);
}

.dist-btn-link.mail:hover {
  background: var(--rojo);
  color: #FFFFFF;
}

@keyframes fadeInAccordion {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .distribuidores-accordion-section {
    padding: 24px 12px 24px;
  }
  .depto-accordion-header {
    padding: 12px 14px;
  }
  .depto-accordion-body {
    padding: 14px 8px;
  }
  .municipio-accordion-header {
    padding: 12px 10px;
  }
  .municipio-title-group {
    gap: 8px;
    flex-wrap: wrap;
  }
  .municipio-name {
    font-size: 0.98rem;
  }
  .municipio-badge {
    font-size: 0.7rem;
    padding: 2px 7px;
  }
  .municipio-accordion-body {
    padding: 12px 6px;
  }
  .distribuidor-card-item {
    padding: 14px 12px;
    gap: 10px;
  }
  .dist-card-title-group h4 {
    font-size: 0.92rem;
    word-break: break-word;
  }
  .dist-card-details {
    font-size: 0.8rem;
    gap: 6px;
  }
  .dist-detail-row {
    word-break: break-word;
  }
  .dist-card-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .muni-nav-btn {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
  }
  .distribuidores-grid {
    grid-template-columns: 1fr;
  }
  .depto-title-group {
    gap: 10px;
  }
  .depto-icon-badge {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }
  .depto-text-wrap h3 {
    font-size: 1.1rem;
  }
  .depto-pill-count {
    display: none;
  }
}

/* MAPS BUTTONS & FOOTER CREDITS */
.map-link-btn{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--rojo);background:rgba(204,0,0,.08);padding:4px 10px;border-radius:20px;margin-top:6px;transition:all var(--transicion);text-decoration:none;}
.map-link-btn:hover{background:var(--rojo);color:#fff;}
.sede-card.fabrica .map-link-btn{color:var(--verde);background:rgba(26,92,42,.08);}
.sede-card.fabrica .map-link-btn:hover{background:var(--verde);color:#fff;}
.footer-map-links{display:inline-flex;gap:8px;margin-top:6px;flex-wrap:wrap;}
.footer-map-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.1);color:var(--amarillo);font-size:.75rem;padding:3px 9px;border-radius:12px;border:1px solid rgba(255,255,255,.2);transition:all var(--transicion);text-decoration:none;}
.footer-map-pill:hover{background:var(--amarillo);color:#111;border-color:var(--amarillo);}
.footer-credits{margin-top:8px;font-size:.84rem;color:rgba(255,255,255,.7);}
.footer-credits strong{color:var(--amarillo);font-weight:700;}

/* ============================================
   PÁGINA ERROR 404
   ============================================ */
.error-404-section{
  padding:70px 0 90px;
  min-height:75vh;
  display:flex;
  align-items:center;
  background:radial-gradient(circle at 50% 20%, rgba(245,166,35,0.06) 0%, rgba(255,255,255,1) 60%);
}
.error-404-card{
  max-width:850px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:50px 36px 45px;
  border:1px solid var(--gris-borde);
  box-shadow:var(--sombra-lg);
  position:relative;
  overflow:hidden;
}
.error-404-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg, var(--rojo), var(--amarillo), var(--verde));
}
.error-hero-container{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 4vw, 36px);
  margin-bottom:20px;
}
.error-mascot-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(85px, 16vw, 130px);
  height:clamp(85px, 16vw, 130px);
  border-radius:50%;
  background:linear-gradient(135deg, #FFFFFF 0%, #FFF8EE 100%);
  border:4px solid var(--rojo);
  box-shadow:0 8px 24px rgba(204,0,0,0.18);
  padding:6px;
  flex-shrink:0;
  transition:var(--transicion);
  animation:errorMascotFloat 3.5s ease-in-out infinite alternate;
}
.error-mascot-badge:hover{
  transform:scale(1.08) rotate(-4deg);
}
.error-mascot-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}
@keyframes errorMascotFloat{
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(-2deg); }
}
.error-hero-graphic{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.error-big-code{
  font-family:var(--font-display);
  font-size:clamp(5.5rem, 15vw, 9.5rem);
  font-weight:700;
  line-height:0.9;
  color:var(--rojo);
  letter-spacing:0;
  text-shadow:0 10px 30px rgba(204,0,0,0.18);
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:0.75em;
}
.error-big-code.code-first{
  padding-right:12px;
}
.error-big-code.code-second{
  padding-left:4px;
}
.error-empanada-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(85px, 16vw, 130px);
  height:clamp(85px, 16vw, 130px);
  border-radius:50%;
  background:linear-gradient(135deg, #FFF6E5 0%, #FFE6B3 100%);
  border:4px dashed var(--amarillo);
  box-shadow:0 8px 24px rgba(245,166,35,0.3);
  font-size:clamp(3rem, 6.5vw, 5rem);
  line-height:1;
  text-align:center;
  animation:empanadaWiggle 3s ease-in-out infinite;
  flex-shrink:0;
  margin:0 4px;
}
@keyframes empanadaWiggle{
  0%, 100% { transform:rotate(0deg) scale(1); }
  25% { transform:rotate(-8deg) scale(1.05); }
  75% { transform:rotate(8deg) scale(1.05); }
}
.error-title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.5vw, 3rem);
  color:var(--texto);
  line-height:1.2;
  margin-bottom:14px;
}
.error-title span{
  color:var(--rojo);
}
.error-description{
  font-size:1.05rem;
  color:var(--texto-muted);
  max-width:580px;
  margin:0 auto 30px;
  line-height:1.7;
}
.error-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.error-quicklinks{
  border-top:1px dashed var(--gris-borde);
  padding-top:30px;
}
.error-quicklinks h4{
  font-size:0.92rem;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--verde-dark);
  font-weight:700;
  margin-bottom:16px;
}
.error-links-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.error-link-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:calc(25% - 11px);
  min-width:170px;
  padding:12px 16px;
  background:var(--gris-claro);
  border:1px solid var(--gris-borde);
  border-radius:var(--radius);
  font-size:0.9rem;
  font-weight:600;
  color:var(--texto);
  transition:all var(--transicion);
}
.error-link-pill i{
  color:var(--rojo);
  transition:transform 0.3s ease;
}
.error-link-pill:hover{
  background:#fff;
  border-color:var(--rojo);
  color:var(--rojo);
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(204,0,0,0.12);
}
.error-link-pill:hover i{
  transform:scale(1.2);
}

@media(max-width:576px){
  .error-404-card{
    padding:35px 20px 30px;
  }
  .error-hero-container{
    gap:12px;
  }
  .error-mascot-badge{
    width:72px;
    height:72px;
    border-width:3px;
    padding:4px;
  }
  .error-hero-graphic{
    gap:8px;
  }
  .error-big-code.code-first{
    padding-right:6px;
  }
  .error-actions{
    flex-direction:column;
    width:100%;
  }
  .error-actions .btn{
    width:100%;
  }
  .error-links-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }
  .error-link-pill{
    width:calc(50% - 6px);
    min-width:130px;
  }
}

/* ==========================================================================
   SECCIÓN FAQ INTERACTIVA (GEO / SEO & DIRECT ANSWERS)
   ========================================================================== */
.faq-section {
  background: #FFFFFF;
}

.faq-container {
  max-width: 860px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 36px;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq-item:hover {
  border-color: var(--amarillo);
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.12);
}

.faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  user-select: none;
  list-style: none;
  transition: color 0.2s ease;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary:hover {
  color: var(--rojo);
}

.faq-icon-toggle {
  width: 28px;
  height: 28px;
  background: rgba(204, 0, 0, 0.08);
  color: var(--rojo);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-left: 14px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.faq-item[open] .faq-summary {
  color: var(--rojo);
  border-bottom: 1px dashed #F0F0F0;
}

.faq-item[open] .faq-icon-toggle {
  transform: rotate(180deg);
  background: var(--rojo);
  color: #FFFFFF;
}

.faq-answer {
  padding: 20px 24px;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--texto-muted);
  animation: fadeInAccordion 0.3s ease forwards;
}

.faq-answer strong {
  color: #222;
}

.faq-answer a {
  color: var(--rojo);
  font-weight: 600;
  text-decoration: underline;
}

.faq-answer a:hover {
  color: var(--rojo-dark);
}