:root{
  --bg1:#ffffff;
  --bg2:#eaf3ff;      /* soft blue */
  --card:#ffffff;
  --text:#0b1220;
  --muted:#445067;
  --blue:#1e86ff;     /* GMOVIL blue-ish */
  --blue2:#0b5ed7;
  --green:#20d14a;    /* GMOVIL green-ish */
  --border:rgba(11,18,32,.10);
  --shadow:0 10px 30px rgba(11,18,32,.10);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(30,134,255,.18), transparent 55%),
    radial-gradient(900px 500px at 95% 10%, rgba(32,209,74,.14), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}

a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0;}

.brand{display:flex;align-items:center;gap:14px;min-width:240px;}
.brand img{height:44px;width:auto;display:block;}

.badge{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid var(--border);
  border-radius:14px;background:rgba(234,243,255,.8);
}
.badge small{color:var(--muted);font-weight:600}
.badge img{height:20px;width:auto}

nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
nav a{
  padding:8px 10px;border-radius:12px;text-decoration:none;
  color:var(--muted);border:1px solid transparent
}
nav a:hover{color:var(--text);border-color:var(--border);background:rgba(30,134,255,.06)}

.hero{padding:56px 0 22px 0;}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}

.card{
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
}
.card .p{padding:22px}

h1{
  font-size:40px;line-height:1.05;margin:0 0 10px 0;
  background:linear-gradient(90deg,var(--blue2),var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{font-size:26px;margin:0 0 10px 0}
h3{font-size:18px;margin:18px 0 8px 0}
p{line-height:1.6;margin:0 0 12px 0}
.kicker{color:var(--muted);margin:0 0 10px 0;font-weight:600}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{
  padding:8px 10px;border-radius:999px;border:1px solid var(--border);
  color:var(--muted);background:rgba(255,255,255,.7);font-size:13px
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.iconbox{
  padding:18px;border-radius:18px;border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(30,134,255,.06), rgba(255,255,255,.85));
}
.iconbox b{display:block;margin-bottom:6px}
.iconbox p{color:var(--muted);margin:0}

.section{padding:22px 0}
.hr{height:1px;background:var(--border);margin:10px 0 0 0}

footer{padding:28px 0 44px 0;color:var(--muted)}
footer a{color:var(--blue2)}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.note{font-size:12px;color:var(--muted);line-height:1.5}

.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 14px;border-radius:14px;border:1px solid var(--border);
  text-decoration:none;color:var(--text);
  background:linear-gradient(180deg, rgba(30,134,255,.10), rgba(255,255,255,.90));
}
.btn:hover{border-color:rgba(11,18,32,.20);background:linear-gradient(180deg, rgba(32,209,74,.10), rgba(255,255,255,.92))}

ul{margin:8px 0 12px 18px}
li{margin:6px 0}

@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  nav{justify-content:flex-start}
}


/* ===== Header layout update ===== */
header .header-inner{
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.brand{
  justify-content:center;
  min-width:auto;
}

.brand img{
  height:80px; /* bigger GMOVIL21 logo */
}

.badge{
  margin-top:6px;
}

nav{
  width:100%;
  justify-content:center;
  border-top:1px solid var(--border);
  padding-top:10px;
}


/* ===== Header layout v3 ===== */
header .header-inner{
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* GMOVIL21 logo big and centered */
.brand{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.brand img{
  height:110px; /* BIG logo */
}

/* Distribuidor Autorizado text under logo */
.brand .dist-text{
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
}

/* TELCEL logo small on the right */
.telcel-right{
  position:absolute;
  top:18px;
  right:24px;
  display:flex;
  align-items:center;
  gap:6px;
}

.telcel-right img{
  height:28px;
  width:auto;
}

nav{
  width:100%;
  justify-content:center;
  border-top:1px solid var(--border);
  padding-top:12px;
}


/* ===== Visual sync to new GMOVIL21 logo (airy white + luminous blues + neon green) ===== */
:root{
  --bg1:#ffffff;
  --bg2:#e9f4ff;
  --card:rgba(255,255,255,.92);
  --text:#071226;
  --muted:#3a4b66;

  /* extracted vibe from logo */
  --blue:#2a8bff;
  --blue2:#0b63e6;
  --blue3:#7fc5ff;
  --green:#32e24f;
  --green2:#11c53a;

  --border:rgba(7,18,38,.10);
  --shadow:0 14px 36px rgba(7,18,38,.12);
}

/* Background that echoes the logo glow without using a background image */
html,body{
  background:
    radial-gradient(900px 500px at 18% 18%, rgba(127,197,255,.40), transparent 60%),
    radial-gradient(780px 420px at 88% 22%, rgba(50,226,79,.20), transparent 62%),
    radial-gradient(900px 500px at 50% 92%, rgba(11,99,230,.18), transparent 62%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}

/* Slightly more luminous headings to match logo */
h1{
  background:linear-gradient(90deg,var(--blue2),var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(42,139,255,.12);
}

/* Cards look cleaner on light background */
.card{
  background:var(--card);
  box-shadow:var(--shadow);
}

/* Buttons aligned to brand colors */
.btn{
  background:linear-gradient(180deg, rgba(42,139,255,.14), rgba(255,255,255,.92));
}
.btn:hover{
  background:linear-gradient(180deg, rgba(50,226,79,.16), rgba(255,255,255,.92));
}

/* Icon boxes with soft blue-to-white glow */
.iconbox{
  background:linear-gradient(180deg, rgba(127,197,255,.16), rgba(255,255,255,.90));
}

/* Header: keep logo prominent */
.brand img{
  height:140px;
  filter: drop-shadow(0 10px 24px rgba(11,99,230,.18));
}

.header-inner{position:relative}


/* ===== Integrated Hero (tech network) ===== */
.hero{padding:34px 0 10px 0;}
.hero-wrap{overflow:hidden; position:relative;}
.hero-inner{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  padding:26px;
}
.hero-tech::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(900px 420px at 12% 40%, rgba(127,197,255,.40), transparent 60%),
    radial-gradient(800px 420px at 85% 25%, rgba(50,226,79,.18), transparent 60%),
    radial-gradient(900px 520px at 55% 105%, rgba(11,99,230,.18), transparent 60%);
}
.hero-wrap::before{
  /* "network" pattern via inline SVG */
  content:"";
  position:absolute;
  inset:0;
  opacity:.40;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22700%22%20viewBox%3D%220%200%201200%20700%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%2811%2C99%2C230%2C0.35%29%22%20stroke-width%3D%221%22%3E%0A%3Cpath%20d%3D%22M80%20520%20L260%20420%20L430%20520%20L610%20410%20L780%20520%20L980%20430%20L1120%20520%22/%3E%0A%3Cpath%20d%3D%22M120%20220%20L290%20300%20L470%20220%20L650%20310%20L820%20220%20L1000%20300%22/%3E%0A%3Cpath%20d%3D%22M260%20420%20L290%20300%20L610%20410%20L650%20310%20L980%20430%20L1000%20300%22/%3E%0A%3C/g%3E%0A%3Cg%20fill%3D%22rgba%28127%2C197%2C255%2C0.55%29%22%3E%0A%3Ccircle%20cx%3D%22260%22%20cy%3D%22420%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%22520%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22610%22%20cy%3D%22410%22%20r%3D%224%22/%3E%0A%3Ccircle%20cx%3D%22780%22%20cy%3D%22520%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22980%22%20cy%3D%22430%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22300%22%20r%3D%224%22/%3E%0A%3Ccircle%20cx%3D%22650%22%20cy%3D%22310%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%221000%22%20cy%3D%22300%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22470%22%20cy%3D%22220%22%20r%3D%224%22/%3E%0A%3C/g%3E%0A%3Cg%20fill%3D%22rgba%2850%2C226%2C79%2C0.35%29%22%3E%0A%3Ccircle%20cx%3D%221120%22%20cy%3D%22520%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22220%22%20r%3D%225%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-size:cover;
  background-position:center;
}
.hero-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.86));
  mix-blend-mode:soft-light;
}
.hero-inner, .hero-wrap > *{position:relative; z-index:1}

.hero-left{min-width:0}
.hero-logo{
  width:min(640px, 100%);
  height:auto;
  display:block;
  margin:0 auto 8px auto;
  filter: drop-shadow(0 14px 34px rgba(11,99,230,.22));
}
.hero-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:4px 0 14px 0;
}
.hero-dot{opacity:.55}
.hero-telcel{color:var(--blue2); text-decoration:none}
.hero-telcel:hover{text-decoration:underline}

.hero-lead{
  max-width:62ch;
  margin:0 auto 12px auto;
  text-align:center;
  font-size:16px;
}

.hero-right{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-self:stretch;
}
.hero-metrics{
  display:grid;
  gap:10px;
}
.metric{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.85);
  padding:14px 14px;
}
.metric b{display:block;margin-bottom:6px}
.metric p{margin:0;color:var(--muted)}
.hero-note{
  border:1px dashed rgba(7,18,38,.18);
  border-radius:18px;
  background:rgba(255,255,255,.75);
  padding:12px 14px;
}

@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr; padding:18px}
  .hero-right{order:2}
  .hero-logo{width:min(520px, 100%)}
}

/* Header logo bigger */
.brand img{height:160px;}


/* ===== Header size normalization ===== */
.brand img{
  height:90px;        /* GMOVIL21 adjusted */
}

.telcel-right img{
  height:28px;        /* TELCEL stays smaller but proportionally balanced */
}

/* Ensure header spacing looks aligned */
header .header-inner{
  padding-top:16px;
  padding-bottom:10px;
}


/* ===== TELCEL-aligned header (conservative use) =====
   Nota: Ajuste visual para respeto de marca (no modifica el logo de TELCEL, mantiene espacio y neutralidad).
*/
header{
  background:#ffffff;
  border-bottom:1px solid var(--border);
}

.header-inner{
  position:relative;
  padding:18px 0 10px 0;
}

/* Center block (GMOVIL21 + descriptor) */
.brand{
  text-align:center;
  gap:10px;
}
.brand a{display:inline-block}
.brand img{
  height:86px;
  width:auto;
  display:block;
  margin:0 auto;
}

/* Descriptor: neutral, no usa marca TELCEL en texto (solo “Distribuidor Autorizado”) */
.brand .dist-text{
  font-size:13px;
  font-weight:700;
  letter-spacing:.10em;
  color:var(--muted);
}

/* TELCEL mark on right: keep small, with clearspace and no extra framing */
.telcel-right{
  position:absolute;
  top:18px;
  right:0;
  padding:8px 10px;          /* clearspace */
  border-radius:10px;
  background:transparent;     /* no badge */
}
.telcel-right a{display:inline-flex;align-items:center}
.telcel-right img{
  height:26px;
  width:auto;
  display:block;
}

/* Nav on second line */
nav{
  width:100%;
  justify-content:center;
  padding-top:12px;
  border-top:1px solid rgba(7,18,38,.08);
}

/* ===== Simple animations ===== */
@keyframes fadeSlideDown{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}
header{animation:fadeSlideDown .35s ease-out both}

/* Subtle hover */
.brand a:hover img{transform:scale(1.02)}
.brand img{transition:transform .18s ease, filter .18s ease}
.telcel-right a:hover img{transform:scale(1.03)}
.telcel-right img{transition:transform .18s ease}

/* Nav underline animation */
nav a{
  position:relative;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
nav a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--blue2),var(--blue),var(--green));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
  opacity:.85;
}
nav a:hover::after{transform:scaleX(1)}
nav a[aria-current="page"]{
  color:var(--text);
  border-color:rgba(7,18,38,.10);
  background:rgba(127,197,255,.14);
}
nav a[aria-current="page"]::after{transform:scaleX(1)}


/* ===== Final logo size sync GMOVIL21 vs TELCEL ===== */
.brand img{
  height:72px;   /* GMOVIL21 adjusted to match TELCEL visual weight */
}

.telcel-right img{
  height:26px;   /* TELCEL reference size */
}


/* ===== Micro-adjust (+) GMOVIL21 logo ===== */
.brand img{
  height:78px;   /* +6px for better balance */
}


/* ===== Micro-adjust (++) GMOVIL21 logo ===== */
.brand img{
  height:84px;   /* +6px again for final balance */
}


/* ===== Big jump (+++++) GMOVIL21 logo ===== */
.brand img{
  height:110px;   /* strong increase, still within conservative header */
}


/* ===== HEADER FULL (banner corporativo) ===== */
header{
  position:relative;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(127,197,255,.45), transparent 60%),
    radial-gradient(700px 380px at 90% 30%, rgba(50,226,79,.25), transparent 60%),
    linear-gradient(180deg,#ffffff,#e9f4ff);
  border-bottom:1px solid var(--border);
}

.header-inner{
  padding:38px 0 26px 0;
}

/* Logo protagonista */
.brand img{
  height:130px;
}

/* Distribuidor autorizado más visible */
.brand .dist-text{
  margin-top:6px;
  font-size:14px;
  letter-spacing:.14em;
}

/* TELCEL discreto, alineado */
.telcel-right{
  top:22px;
  right:10px;
}

/* Menú integrado al banner */
nav{
  margin-top:22px;
  border-top:none;
  padding-top:0;
}

nav a{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(7,18,38,.10);
}

nav a:hover{
  background:rgba(255,255,255,.85);
}


/* ===== MOBILE HEADER FULL ===== */
@media (max-width: 768px){
  header{
    background:
      radial-gradient(520px 260px at 50% 0%, rgba(127,197,255,.45), transparent 60%),
      linear-gradient(180deg,#ffffff,#eef6ff);
  }

  .header-inner{
    padding:26px 0 18px 0;
  }

  .brand img{
    height:96px;   /* Mobile balanced */
  }

  .brand .dist-text{
    font-size:12px;
    letter-spacing:.12em;
  }

  .telcel-right{
    position:relative;
    top:auto;
    right:auto;
    margin-top:8px;
    justify-content:center;
  }

  .telcel-right img{
    height:22px;
  }

  nav{
    margin-top:16px;
    gap:6px;
    flex-wrap:wrap;
  }

  nav a{
    font-size:14px;
    padding:8px 12px;
  }
}


/* ===== PREMIUM HEADER ANIMATION ===== */
@keyframes shimmerSweep{
  0%{transform:translateX(-120%) skewX(-14deg); opacity:0}
  10%{opacity:.22}
  55%{opacity:.18}
  100%{transform:translateX(140%) skewX(-14deg); opacity:0}
}

header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  width:45%;
  height:100%;
  top:0;
  left:0;
  filter:blur(0px);
  animation:shimmerSweep 2.8s ease-in-out 0.6s 1;
  mix-blend-mode:soft-light;
}

@keyframes floatIn{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}
header .brand{animation:floatIn .55s cubic-bezier(.2,.8,.2,1) both}
header nav{animation:floatIn .65s cubic-bezier(.2,.8,.2,1) .05s both}
header .telcel-right{animation:floatIn .6s cubic-bezier(.2,.8,.2,1) .08s both}

@keyframes pulseGlow{
  0%,100%{filter:drop-shadow(0 10px 24px rgba(11,99,230,.16))}
  50%{filter:drop-shadow(0 14px 34px rgba(42,139,255,.22))}
}
.brand img{animation:pulseGlow 3.6s ease-in-out 0.4s 1}

/* ===== MOBILE MENU ICONS ===== */
.navicon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-block;
  vertical-align:middle;
}

@media (max-width: 768px){
  nav a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:14px;
  }
}


/* ===== VISTOSA ANIMACIÓN DE BANNER PRINCIPAL (AL ABRIR) ===== */
/* 1) Reveal suave + zoom mínimo del fondo */
@keyframes bannerReveal{
  0%{opacity:0; transform:translateY(-14px) scale(1.01)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
header{animation:bannerReveal .55s cubic-bezier(.2,.9,.2,1) both}

/* 2) "Blob" luminoso animado (solo 1 ciclo al cargar) */
@keyframes blobDrift{
  0%{transform:translate(-18%, -10%) scale(.92); opacity:.0}
  15%{opacity:.55}
  55%{transform:translate(10%, 6%) scale(1.02); opacity:.40}
  100%{transform:translate(22%, 12%) scale(1.08); opacity:0}
}
header::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:0;
  top:0;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(127,197,255,.60), rgba(11,99,230,.18), transparent 65%);
  filter:blur(10px);
  pointer-events:none;
  animation:blobDrift 1.6s ease-out .05s 1 both;
  mix-blend-mode:screen;
}

/* 3) Sweep brillante (ya existía) — lo hacemos más "wow" y un poco más largo */
@keyframes shimmerSweep2{
  0%{transform:translateX(-130%) skewX(-16deg); opacity:0}
  10%{opacity:.28}
  65%{opacity:.18}
  100%{transform:translateX(150%) skewX(-16deg); opacity:0}
}
header::after{
  width:55%;
  animation:shimmerSweep2 3.3s ease-in-out .35s 1;
}

/* 4) Subrayado del menú aparece "dibujándose" al cargar */
@keyframes navUnderlineIn{
  from{transform:scaleX(0); opacity:0}
  to{transform:scaleX(1); opacity:.85}
}
@media (min-width: 769px){
  nav a[aria-current="page"]::after{
    animation:navUnderlineIn .35s ease-out .55s both;
  }
}

/* Mobile: ligera elevación de botones del menú al cargar */
@keyframes navPop{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@media (max-width: 768px){
  nav a{animation:navPop .38s ease-out .55s both}
  nav a:nth-child(2){animation-delay:.60s}
  nav a:nth-child(3){animation-delay:.65s}
  nav a:nth-child(4){animation-delay:.70s}
  nav a:nth-child(5){animation-delay:.75s}
  nav a:nth-child(6){animation-delay:.80s}
}


/* =========================
   BRANDING REFINES (TELCEL + GMOVIL21)
   ========================= */
.telcel-right{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:10px 12px !important;   /* clearspace */
}
.telcel-right img{
  height:24px !important;
  width:auto !important;
  display:block;
  filter:none !important;
}
.brand .dist-text{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--muted);
}
.header-inner{gap:12px;}

/* =========================
   MOBILE OPTIMIZATION
   ========================= */
@media (max-width: 768px){
  header{animation:none !important;}
  header::before, header::after{animation:none !important; opacity:0 !important;}

  .header-inner{padding:18px 0 14px 0 !important;}

  .telcel-right{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    margin:10px auto 0 auto !important;
    display:flex;
    justify-content:center;
    padding:8px 10px !important;
  }

  .brand img{
    height:92px !important;
    max-width:92vw;
    animation:none !important; /* remove breathe on mobile */
    transform:none !important;
  }

  nav{
    margin-top:14px !important;
    justify-content:center;
    gap:8px !important;
    flex-wrap:wrap;
  }
  nav a{
    padding:10px 14px !important;
    font-size:14px !important;
    border-radius:14px !important;
  }
}

@media (max-width: 420px){
  .brand img{height:84px !important;}
  nav a{padding:10px 12px !important;}
}

@media (prefers-reduced-motion: reduce){
  header, header::before, header::after,
  .brand img, nav a{
    animation:none !important;
    transition:none !important;
  }
}


/* ===== Productos: Hero dinámico con transiciones ===== */
.section-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}

.products-hero{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(7,18,38,.10);
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(127,197,255,.32), transparent 60%),
    radial-gradient(800px 450px at 85% 25%, rgba(50,226,79,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(233,244,255,.92));
  box-shadow:0 18px 46px rgba(7,18,38,.10);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  min-height:380px;
}

.products-hero-media{
  position:relative;
  isolation:isolate;
}

.ph-slide{
  position:absolute;
  inset:0;
  background-image: var(--ph-img);
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  opacity:0;
  filter:saturate(1.05) contrast(1.02);
  transition:opacity .55s ease, transform .9s ease;
}

.ph-slide.is-active{
  opacity:1;
  transform:scale(1.0);
}

.ph-glow{
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 55% 35%, rgba(255,255,255,.58), rgba(255,255,255,0) 55%);
  mix-blend-mode:soft-light;
  pointer-events:none;
  animation: phGlow 6s ease-in-out infinite;
  opacity:.55;
}

@keyframes phGlow{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3%, -2%) scale(1.03)}
}

.products-hero-content{
  padding:22px 22px 22px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ph-kicker{
  font-size:12px;
  letter-spacing:.16em;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
}

.ph-title{
  font-size:28px;
  line-height:1.1;
  margin:0;
}

.ph-desc{
  margin:0;
  color:rgba(7,18,38,.80);
}

.ph-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:2px;
}

.ph-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.ph-tile{
  text-align:left;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(7,18,38,.10);
  border-radius:18px;
  padding:12px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  min-height:88px;
}

.ph-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(7,18,38,.12);
  background:rgba(255,255,255,.86);
}

.ph-tile.is-active{
  border-color: rgba(11,99,230,.28);
  box-shadow:0 16px 34px rgba(11,99,230,.12);
}

.ph-ico{font-size:18px}
.ph-name{font-weight:900}
.ph-sub{font-size:12px; color:rgba(7,18,38,.70)}
.ph-note{margin-top:auto; font-size:13px; color:rgba(7,18,38,.70)}

@media (max-width: 900px){
  .products-hero{grid-template-columns:1fr; min-height:460px}
  .products-hero-content{padding:18px}
  .ph-slide{border-radius:0}
}

@media (max-width: 520px){
  .ph-title{font-size:24px}
  .ph-grid{grid-template-columns:1fr}
  .ph-tile{min-height:auto}
}

@media (prefers-reduced-motion: reduce){
  .ph-glow{animation:none}
  .ph-slide{transition:none}
  .ph-tile{transition:none}
}



/* Posicionamiento tipo collage minimal */
.basicos_collage,
.protectores_collage,
.equipos_collage,
.micas_collage{
  background-size: 46%, 46%, 46%, 46%;
  background-position:
    6% 10%,
    54% 10%,
    6% 56%,
    54% 56%;
  background-repeat:no-repeat;
}


/* ===== Collages con imágenes reales (fix) ===== */
.ph-slide{
  background-size: 46%, 46%, 46%, 46%;
  background-position:
    6% 10%,
    54% 10%,
    6% 56%,
    54% 56%;
  background-repeat:no-repeat;
  background-color: transparent;
}

.basicos-collage{
  background-image:
    url('assets/basicos_basicos1.png'),
    url('assets/basicos_basicos2.png'),
    url('assets/basicos_basicos3.png'),
    url('assets/basicos_basicos4.png');
}

.protectores-collage{
  background-image:
    url('assets/protectores_prot1.png'),
    url('assets/protectores_prot2.png'),
    url('assets/protectores_prot3.png'),
    url('assets/protectores_prot4.png');
}

.equipos-collage{
  background-image:
    url('assets/equipos_eq1.png'),
    url('assets/equipos_eq2.png'),
    url('assets/equipos_eq3.png'),
    url('assets/equipos_eq4.png');
}

.micas-collage{
  background-image:
    url('assets/micas_mic1.png'),
    url('assets/micas_mic2.png'),
    url('assets/micas_mic3.png'),
    url('assets/micas_mic4.png');
}

/* Mobile: bigger tiles and no crop */
@media (max-width: 520px){
  .ph-slide{
    background-size: 48%, 48%, 48%, 48%;
    background-position:
      4% 8%,
      52% 8%,
      4% 54%,
      52% 54%;
  }
}


/* ===== Productos: carrusel de imágenes dentro de cada slide ===== */
.ph-slide[data-ph-type="carousel"]{
  overflow:hidden;
}

.ph-slide[data-ph-type="carousel"] .ph-carousel{
  position:absolute;
  inset:0;
  display:flex;
  width:400%;
  height:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,248,253,.92));
  animation: phCarousel 12s cubic-bezier(.2,.9,.2,1) infinite;
  animation-play-state:paused; /* solo corre en el slide activo */
}

.ph-slide.is-active[data-ph-type="carousel"] .ph-carousel{
  animation-play-state:running;
}

.ph-slide[data-ph-type="carousel"] .ph-carousel img{
  width:25%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
}

/* Pausas “Apple-like”: mantiene cada frame un momento */
@keyframes phCarousel{
  0%{transform:translateX(0%)}
  20%{transform:translateX(0%)}
  30%{transform:translateX(-25%)}
  50%{transform:translateX(-25%)}
  60%{transform:translateX(-50%)}
  80%{transform:translateX(-50%)}
  90%{transform:translateX(-75%)}
  100%{transform:translateX(-75%)}
}

/* Suaviza bordes y legibilidad */
.products-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%),
    radial-gradient(800px 420px at 20% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ph-slide[data-ph-type="carousel"] .ph-carousel{
    animation:none !important;
    transform:none !important;
    width:100%;
  }
  .ph-slide[data-ph-type="carousel"] .ph-carousel img{
    width:100%;
  }
}


/* ===== Ajuste: imágenes completas (contain) ===== */
.ph-slide[data-ph-type="carousel"] .ph-carousel{
  align-items:center;
}
.ph-slide[data-ph-type="carousel"] .ph-carousel img{
  padding:18px;
  background:transparent;
}
@media (max-width: 520px){
  .ph-slide[data-ph-type="carousel"] .ph-carousel img{padding:14px;}
}


/* ===== Products Hero: Badge de categoría ===== */
.ph-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(7,18,38,.78);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(7,18,38,.10);
  backdrop-filter: blur(10px);
  box-shadow:0 16px 34px rgba(7,18,38,.10);
}

/* Mobile-first refinements */
@media (max-width: 900px){
  .products-hero{
    grid-template-columns:1fr !important;
    min-height:560px;
  }
  .products-hero-media{
    min-height:320px;
  }
}
@media (max-width: 520px){
  .products-hero{
    min-height:600px;
    border-radius:22px;
  }
  .products-hero-content{
    padding:18px !important;
  }
  .ph-badge{
    top:12px;
    left:12px;
    padding:9px 11px;
    border-radius:13px;
    font-size:11px;
  }
  .ph-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Make nav and layout safer on mobile */


/* ===== FIX: Productos en móvil (mantener hero + carrusel ordenado) ===== */
@media (max-width: 900px){
  .products-hero{
    border-radius:24px !important;
    overflow:hidden !important;
  }

  .products-hero-media{
    position:relative !important;
    overflow:hidden !important;
    height: clamp(240px, 46vh, 360px) !important;
    min-height: 240px !important;
  }

  .products-hero-media .ph-slide{
    position:absolute !important;
    inset:0 !important;
  }

  .ph-slide[data-ph-type="carousel"] .ph-carousel{
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
  }

  .ph-slide[data-ph-type="carousel"] .ph-carousel img{
    width:25% !important;
    height:100% !important;
    object-fit:contain !important;
    padding:16px !important;
  }
}

@media (max-width: 520px){
  .products-hero{
    border-radius:22px !important;
    box-shadow:0 18px 44px rgba(7,18,38,.10) !important;
  }

  .products-hero-content{
    padding:16px !important;
  }

  .ph-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .ph-tile{
    padding:12px 12px !important;
    border-radius:18px !important;
    min-height:86px !important;
  }

  .ph-actions{gap:10px !important;}
  .ph-actions .btn{
    width:100% !important;
    justify-content:center !important;
  }
}

@media (max-width: 380px){
  .ph-grid{grid-template-columns:1fr !important;}
}


/* ===== QUIÉNES SOMOS: Hero formal con imagen (FIX) ===== */





.qs2-kicker{
  font-size:12px;
  letter-spacing:.16em;
  font-weight:900;
  color:rgba(7,18,38,.56);
  text-transform:uppercase;
  margin-bottom:8px;
}

.qs2-title{
  margin:0;
  font-size:38px;
  line-height:1.04;
  letter-spacing:-.02em;
}

.qs2-subtitle{
  margin:10px 0 0 0;
  color:rgba(7,18,38,.74);
  max-width:70ch;
}

.qs2-cards{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}

.qs2-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(7,18,38,.10);
  border-radius:18px;
  padding:14px 14px;
  box-shadow:0 14px 30px rgba(7,18,38,.06);
  backdrop-filter: blur(10px);
}

.qs2-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.qs2-card-head h3{
  margin:0;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
}
.qs2-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(11,99,230,.10);
  border:1px solid rgba(11,99,230,.16);
}

.qs2-card p{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:rgba(7,18,38,.70);
}

.qs2-list{
  list-style:none;
  padding:0;
  margin:4px 0 0 0;
  display:grid;
  gap:8px;
}
.qs2-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:rgba(7,18,38,.72);
}
.qs2-list .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(50,226,79,.85);
  box-shadow:0 8px 16px rgba(50,226,79,.18);
}

.qs2-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
    .qs2-cards{grid-template-columns:1fr 1fr;}
  }
@media (max-width: 600px){
      .qs2-title{font-size:30px;}
  .qs2-cards{grid-template-columns:1fr;}
  .qs2-actions .btn{width:100%; justify-content:center;}
  }

@media (prefers-reduced-motion: reduce){
  }


/* ===== QUIÉNES SOMOS – Ajustes (más claro + estilo TELCEL) ===== */

/* Cards más TELCEL: limpio, azul corporativo, sin “glass” exagerado */
.qs2-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,82,165,.14) !important;
  box-shadow: 0 14px 34px rgba(0,82,165,.10) !important;
  backdrop-filter: none !important;
  position:relative;
}

.qs2-card::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:12px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,82,165,.92), rgba(0,82,165,.16));
}

.qs2-card-head{
  margin-top:10px;
}

.qs2-icon{
  background: rgba(0,82,165,.10) !important;
  border: 1px solid rgba(0,82,165,.18) !important;
}

/* dot más sobrio (verde TELCEL-like) */
.qs2-list .dot{
  background: rgba(58, 214, 112, .92) !important;
}

/* Mobile: asegurar que SÍ se noten cambios */
@media (max-width: 600px){
  
  
  
  .qs2-title{
    font-size: 30px !important;
  }

  .qs2-subtitle{
    font-size: 14px !important;
  }

  .qs2-cards{
    gap: 12px !important;
  }

  .qs2-card{
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }
}


/* ===== QUIÉNES SOMOS: Layout FIX (imagen completa en web + móvil) ===== */
.qs2-hero.qs2-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:stretch;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(7,18,38,.08);
  background:#fff;
  box-shadow:0 22px 60px rgba(7,18,38,.10);
}

/* Panel de imagen */
.qs2-media{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,253,.98));
  /* tu imagen es 1:1, mantenemos proporción */
  aspect-ratio: 1 / 1;
  min-height: 420px;
}

.qs2-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain; /* COMPLETA */
  display:block;
}

.qs2-scrim{
  position:absolute;
  inset:0;
  /* más claro */
  background:
    radial-gradient(900px 520px at 30% 20%, rgba(255,255,255,.82), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.0) 55%);
  pointer-events:none;
}

/* Contenido */
.qs2-content{
  padding:30px 30px 26px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Responsive */
@media (max-width: 980px){
  .qs2-hero.qs2-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .qs2-media{
    min-height: 320px;
    aspect-ratio: 1 / 1;
  }
  .qs2-content{
    padding:18px;
  }
}

/* Móvil: imagen arriba, luego tarjetas (sin desproporción) */
@media (max-width: 600px){
  .qs2-hero.qs2-grid{border-radius:22px;}
  .qs2-media{
    min-height: 320px;
    aspect-ratio: 1 / 1;
  }
  .qs2-title{font-size:30px;}
  .qs2-cards{grid-template-columns:1fr;}
  .qs2-actions .btn{width:100%; justify-content:center;}
}


/* ===== QUIÉNES SOMOS: FIX corte lado derecho en web ===== */
/* Evita que el contenido del grid se desborde y sea recortado por overflow hidden */
.qs2-hero.qs2-grid > *{
  min-width:0; /* clave para grids */
}

.qs2-content{
  min-width:0;
}

.qs2-cards{
  min-width:0;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.qs2-card{
  min-width:0;
  max-width:100%;
}

/* En pantallas no tan anchas, baja a 2 columnas antes para evitar overflow */
@media (max-width: 1180px){
  .qs2-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ===== QUIÉNES SOMOS: Imagen 1:1 integrada orgánicamente ===== */
.qs2-hero.qs2-grid{
  padding:18px;            /* integra visualmente */
  gap:18px;
}

/* Panel de imagen como “card” premium */
.qs2-media{
  aspect-ratio: 1 / 1 !important;  /* 1x1 */
  height: auto !important;
  min-height: unset !important;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(0,82,165,.12);
  box-shadow: 0 18px 44px rgba(0,82,165,.10);
  align-self:center;        /* centra con el contenido */
}

.qs2-media img{
  object-fit: cover;        /* se ve orgánica; sin bandas */
  object-position: center;
}

/* Overlay más sutil para no “lavar” la imagen */
.qs2-scrim{
  background:
    radial-gradient(900px 520px at 35% 25%, rgba(255,255,255,.58), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%) !important;
}

/* Contenido con menos padding lateral porque ya hay padding en el hero */
.qs2-content{
  padding: 8px 10px 8px 6px !important;
}

/* Ajuste para pantallas medianas */
@media (max-width: 980px){
  .qs2-hero.qs2-grid{padding:14px;}
  .qs2-media{border-radius:18px;}
  .qs2-content{padding: 12px 4px 2px 4px !important;}
}

/* Móvil: mantiene 1:1 pero sin ocupar “demasiado” */
@media (max-width: 600px){
  .qs2-hero.qs2-grid{padding:12px;}
  .qs2-media{
    width: min(420px, 100%);
    margin: 0 auto;
  }
}


/* ===== Políticas: fichas/tarjetas ===== */
.page-hero{ padding: 10px 0 18px 0; }
.page-kicker{
  font-size:12px; letter-spacing:.16em; font-weight:900;
  color:rgba(7,18,38,.55); text-transform:uppercase;
}
.page-title{ margin:8px 0 0 0; font-size:42px; letter-spacing:-.02em; }
.page-subtitle{ margin:10px 0 0 0; color:rgba(7,18,38,.70); max-width: 70ch; }

.policy-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

.policy-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,82,165,.14);
  border-radius: 22px;
  padding: 16px 16px;
  box-shadow: 0 18px 44px rgba(0,82,165,.08);
  position:relative;
  overflow:hidden;
}
.policy-card::before{
  content:"";
  position:absolute;
  left:16px; right:16px; top:14px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,82,165,.92), rgba(0,82,165,.12));
}
.policy-top{ padding-top:12px; }
.policy-badge{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(0,82,165,.86);
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.14);
  padding: 6px 10px;
  border-radius: 999px;
}
.policy-title{ margin:10px 0 6px 0; font-size:18px; letter-spacing:-.01em; }
.policy-desc{ margin:0; color:rgba(7,18,38,.70); line-height:1.45; }
.policy-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.policy-note{
  margin-top:18px;
  border:1px dashed rgba(0,82,165,.22);
  border-radius:18px;
  padding:14px 14px;
  background: rgba(255,255,255,.78);
  color:rgba(7,18,38,.70);
}

.pdf-viewer{
  border:1px solid rgba(0,82,165,.14);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 44px rgba(0,82,165,.06);
}
@media (max-width: 820px){
  .policy-grid{ grid-template-columns:1fr; }
  .page-title{ font-size:34px; }
}


/* ===== Políticas: categorías ===== */
.policy-category{ margin-top: 18px; }
.policy-cat-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin: 6px 0 12px 0;
}
.policy-cat-title{
  margin:0;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
  color:rgba(7,18,38,.82);
}
.policy-cat-line{
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(0,82,165,.24), rgba(0,82,165,0));
}


/* ===== Index: Legal cards ===== */
.section-head h2{ margin:0; font-size:34px; letter-spacing:-.02em; }
.section-head p{ margin:10px 0 0 0; color:rgba(7,18,38,.70); }

.legal-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.legal-card{
  display:block;
  text-decoration:none;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,82,165,.14);
  border-radius: 22px;
  padding: 16px 16px;
  box-shadow: 0 18px 44px rgba(0,82,165,.08);
  color: inherit;
  position:relative;
  overflow:hidden;
}

.legal-card::before{
  content:"";
  position:absolute;
  left:16px; right:16px; top:14px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,82,165,.92), rgba(0,82,165,.12));
}

.legal-card.primary{
  border-color: rgba(0,82,165,.22);
  box-shadow: 0 22px 64px rgba(0,82,165,.10);
}

.legal-badge{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,82,165,.86);
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.14);
  padding: 6px 10px;
  border-radius: 999px;
  margin-top:12px;
}

.legal-title{
  margin:10px 0 6px 0;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
}

.legal-desc{
  margin:0;
  color:rgba(7,18,38,.70);
  line-height:1.45;
}

@media (max-width: 920px){
  .legal-grid{ grid-template-columns:1fr; }
  .section-head h2{ font-size:30px; }
}


/* ===== Políticas de la empresa: HERO formal y llamativo ===== */
.pol-hero{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(0,82,165,.12);
  background:#fff;
  box-shadow:0 26px 78px rgba(0,82,165,.10);
  padding:22px;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:18px;
}

.pol-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 22% 18%, rgba(0,82,165,.16), rgba(0,82,165,0) 60%),
    radial-gradient(700px 420px at 92% 8%, rgba(50,226,79,.12), rgba(50,226,79,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,248,253,.92));
  pointer-events:none;
}

.pol-hero-content{
  position:relative;
  z-index:2;
  padding:10px 10px 10px 10px;
}

.pol-kicker{
  font-size:12px;
  letter-spacing:.16em;
  font-weight:900;
  color:rgba(7,18,38,.55);
  text-transform:uppercase;
}

.pol-title{
  margin:10px 0 0 0;
  font-size:38px;
  line-height:1.04;
  letter-spacing:-.02em;
}

.pol-subtitle{
  margin:10px 0 0 0;
  color:rgba(7,18,38,.72);
  max-width: 70ch;
}

.pol-pills{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pol-pill{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:rgba(0,82,165,.92);
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.14);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.pol-pill:hover{
  transform: translateY(-1px);
  background: rgba(0,82,165,.10);
  box-shadow: 0 14px 30px rgba(0,82,165,.10);
}

.pol-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pol-hero-cards{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
  align-content:start;
}

.pol-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,82,165,.14);
  border-radius: 22px;
  padding: 14px 14px;
  box-shadow: 0 18px 44px rgba(0,82,165,.08);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pol-card::before{
  content:"";
  position:absolute;
  left:14px; right:14px; top:12px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,82,165,.92), rgba(0,82,165,.12));
}

.pol-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 78px rgba(0,82,165,.12);
}

.pol-card-top{
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pol-badge{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,82,165,.86);
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.14);
  padding: 6px 10px;
  border-radius: 999px;
  white-space:nowrap;
}

.pol-card-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
  text-align:right;
  flex:1;
}

.pol-card-desc{
  margin-top:10px;
  color:rgba(7,18,38,.70);
  line-height:1.45;
  font-size:13px;
}

/* Responsive */
@media (max-width: 980px){
  .pol-hero{grid-template-columns:1fr; padding:16px;}
  .pol-title{font-size:32px;}
}
@media (max-width: 600px){
  .pol-hero{border-radius:22px;}
  .pol-actions .btn{width:100%; justify-content:center;}
}



.pol-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 30%, rgba(0,82,165,.10), transparent 60%);
  opacity:.6;
  animation: polFloat 8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes polFloat{
  0%{ transform: translateY(0px); opacity:.55; }
  50%{ transform: translateY(-6px); opacity:.75; }
  100%{ transform: translateY(0px); opacity:.55; }
}

.pol-card{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.78);
}


/* ===== FIX: imagen de Políticas visible ===== */
.pol-hero{ background: transparent !important; }
.pol-hero-bg{
  background:
    radial-gradient(900px 520px at 22% 18%, rgba(0,82,165,.14), rgba(0,82,165,0) 60%),
    radial-gradient(700px 420px at 92% 8%, rgba(50,226,79,.10), rgba(50,226,79,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(248,250,254,.88)),
    url('assets/policies-hero.png') !important;
  background-size: cover !important;
  background-position: center !important;
  filter: saturate(1.02) contrast(1.02);
}

/* ===== Micro-animaciones tipo Apple (stagger + smooth) ===== */
@media (prefers-reduced-motion: no-preference){
  .pol-hero-content, .pol-hero-cards{
    animation: appleFadeUp .65s cubic-bezier(.2,.8,.2,1) both;
  }
  .pol-hero-content{ animation-delay: .06s; }
  .pol-hero-cards{ animation-delay: .14s; }

  .pol-pill{
    opacity:0;
    transform: translateY(10px);
    animation: appleFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
  }
  .pol-pill:nth-child(1){ animation-delay:.18s;}
  .pol-pill:nth-child(2){ animation-delay:.22s;}
  .pol-pill:nth-child(3){ animation-delay:.26s;}
  .pol-pill:nth-child(4){ animation-delay:.30s;}
  .pol-pill:nth-child(5){ animation-delay:.34s;}

  .pol-card{
    opacity:0;
    transform: translateY(12px);
    animation: appleFadeUp .6s cubic-bezier(.2,.8,.2,1) both;
  }
  .pol-card:nth-child(1){ animation-delay:.22s;}
  .pol-card:nth-child(2){ animation-delay:.28s;}
  .pol-card:nth-child(3){ animation-delay:.34s;}

  /* hover micro-interactions: subtle scale + shine */
  .pol-card{
    will-change: transform, box-shadow;
  }
  .pol-card:hover{
    transform: translateY(-2px) scale(1.01);
  }

  .pol-card::after{
    content:"";
    position:absolute;
    inset:-40%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
    transform: translateX(-18%) translateY(6%) rotate(8deg);
    opacity:0;
    transition: opacity .25s ease;
    pointer-events:none;
  }
  .pol-card:hover::after{ opacity:.35; }

  /* background subtle parallax-like drift */
  .pol-hero-bg{
    animation: heroDrift 10s ease-in-out infinite;
  }
}

@keyframes appleFadeUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes heroDrift{
  0%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-6px) scale(1.01); }
  100%{ transform: translateY(0px) scale(1); }
}


/* ===== HERO layout with left square image ===== */

.pol-hero{
  grid-template-columns: .9fr 1.1fr !important;
  align-items: center;
}

.pol-hero-visual{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pol-hero-visual img{
  width:100%;
  max-width:420px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 26px;
  background: rgba(255,255,255,.65);
  box-shadow: 0 30px 90px rgba(0,82,165,.18);
  padding: 18px;
  animation: appleFadeUp .7s cubic-bezier(.2,.8,.2,1) both;
}

/* Background becomes softer since image is explicit */

.pol-hero-bg{
  opacity:.55;
}

@media (max-width: 980px){
  .pol-hero{
    grid-template-columns: 1fr !important;
  }
  .pol-hero-visual img{
    max-width: 320px;
  }
}


/* ===== Políticas: versión compacta (mini tarjetas) ===== */
.pol-title-center{ text-align:center; }
.pol-subtitle-center{ text-align:center; margin-left:auto; margin-right:auto; }

.pol-actions-center{ justify-content:center; }

.pol-mini-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}

.pol-mini{
  display:block;
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(0,82,165,.14);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: 0 14px 36px rgba(0,82,165,.08);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pol-mini::before{
  content:"";
  position:absolute;
  left:12px; right:12px; top:10px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,82,165,.88), rgba(0,82,165,.10));
}

.pol-mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 68px rgba(0,82,165,.12);
}

.pol-mini-badge{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(0,82,165,.86);
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.14);
  padding: 6px 9px;
  border-radius: 999px;
  margin-top:10px;
}

.pol-mini-title{
  margin:10px 0 6px 0;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
}

.pol-mini-desc{
  margin:0;
  font-size:12.5px;
  color:rgba(7,18,38,.70);
  line-height:1.35;
}

.pol-mini-cta{
  border-color: rgba(0,82,165,.22);
  background: rgba(255,255,255,.92);
}

@media (max-width: 600px){
  .pol-mini-grid{ grid-template-columns: 1fr; }
}

/* micro-animaciones tipo Apple para mini cards */
@media (prefers-reduced-motion: no-preference){
  .pol-mini{
    opacity:0;
    transform: translateY(10px);
    animation: appleFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
  }
  .pol-mini:nth-child(1){ animation-delay:.18s;}
  .pol-mini:nth-child(2){ animation-delay:.22s;}
  .pol-mini:nth-child(3){ animation-delay:.26s;}
  .pol-mini:nth-child(4){ animation-delay:.30s;}
  .pol-mini:nth-child(5){ animation-delay:.34s;}
  .pol-mini:nth-child(6){ animation-delay:.38s;}
}


/* ===== Hero layout refinement: image on RIGHT ===== */

.pol-hero{
  grid-template-columns: 1.05fr .95fr !important;
  align-items: center;
}

.pol-hero-visual{
  order: 2;
  justify-content: center;
}

.pol-hero-visual img{
  max-width: 520px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 30px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 40px 120px rgba(0,82,165,.22);
  padding: 22px;
  animation: heroImageFloat 7s ease-in-out infinite;
}

/* Smooth premium floating animation */

@keyframes heroImageFloat{
  0%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-8px) scale(1.015); }
  100%{ transform: translateY(0px) scale(1); }
}

/* Mobile stacking preserved */

@media (max-width: 980px){
  .pol-hero{
    grid-template-columns: 1fr !important;
  }
  .pol-hero-visual{
    order: -1;
  }
  .pol-hero-visual img{
    max-width: 340px;
  }
}


/* ===== Ensure right image block exists and is visible ===== */
.pol-hero-visual{ display:flex; }
.pol-hero-visual img{ opacity:1 !important; transform:none; }


/* ===== Ubicaciones (Mapa + tarjetas) ===== */
.loc-wrap{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: start;
}

.loc-map{
  height: 520px;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(0,82,165,.14);
  box-shadow: 0 26px 78px rgba(0,82,165,.10);
  background: #fff;
}

.loc-cards{
  display:grid;
  gap: 12px;
}

.loc-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,82,165,.14);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 44px rgba(0,82,165,.08);
}

.loc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.loc-title{
  font-weight: 900;
  letter-spacing:-.01em;
  font-size: 16px;
}

.loc-badge{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,82,165,.86);
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.14);
  padding: 6px 10px;
  border-radius: 999px;
  white-space:nowrap;
}

.loc-line{
  margin-top: 8px;
  color: rgba(7,18,38,.70);
  line-height: 1.45;
}

.loc-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.loc-note{
  background: linear-gradient(135deg, rgba(0,82,165,.06), rgba(50,226,79,.05));
  border: 1px solid rgba(0,82,165,.12);
  border-radius: 22px;
  padding: 14px;
}

.loc-note-title{
  font-weight: 900;
  letter-spacing:-.01em;
}

.loc-note-desc{
  margin-top: 6px;
  color: rgba(7,18,38,.70);
  line-height: 1.45;
}

/* responsive */
@media (max-width: 980px){
  .loc-wrap{ grid-template-columns:1fr; }
  .loc-map{ height: 420px; }
}
@media (max-width: 600px){
  .loc-map{ height: 360px; border-radius: 22px; }
}


/* PREMIUM PRODUCTOS HERO */
#productos {
    animation: premiumFadeUp 0.9s ease forwards;
}

.productos-hero, .hero-productos {
    min-height: 520px;
}

@keyframes premiumFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ===== Contacto ===== */
.contact-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.contact-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,82,165,.14);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 44px rgba(0,82,165,.08);
}

.contact-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,82,165,.08);
  border: 1px solid rgba(0,82,165,.12);
  margin-bottom: 10px;
}

.contact-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(7,18,38,.55);
}

.contact-value{
  display:block;
  margin-top: 8px;
  font-weight: 900;
  color: rgba(7,18,38,.84);
  text-decoration: none;
  word-break: break-word;
}

.contact-value:hover{
  color: rgba(0,82,165,.92);
}

.contact-cta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .contact-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-cta .btn{ width:100%; justify-content:center; }
}


/* ===== WhatsApp floating button ===== */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  text-decoration:none;
  background: linear-gradient(135deg, rgba(38,211,102,1), rgba(18,140,126,1));
  box-shadow: 0 22px 66px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.28);
  transform: translateZ(0);
}

.wa-float-icon{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 13px;
  color: rgba(255,255,255,.96);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(8px);
}

.wa-float-ring{
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(38,211,102,.25), rgba(38,211,102,0) 60%);
  opacity: .55;
}

@media (prefers-reduced-motion: no-preference){
  .wa-float{ animation: waPop .65s cubic-bezier(.2,.8,.2,1) both; }
  .wa-float-ring{ animation: waPulse 2.2s ease-in-out infinite; }
  .wa-float:hover{ transform: translateY(-2px) scale(1.02); }
  .wa-float:active{ transform: translateY(0px) scale(.98); }
}

@keyframes waPulse{
  0%{ transform: scale(.88); opacity: .35; }
  50%{ transform: scale(1.08); opacity: .65; }
  100%{ transform: scale(.88); opacity: .35; }
}

@keyframes waPop{
  from{ transform: translateY(10px) scale(.95); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* Safe area for iPhone bottom bar */
@supports (padding: env(safe-area-inset-bottom)){
  .wa-float{ bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ===== Premium CTA micro-animation ===== */
.cta-premium{
  position: relative;
  overflow: hidden;
}

.cta-premium::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  transform: translateX(-22%) translateY(8%) rotate(10deg);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.cta-premium:hover::after{
  opacity:.35;
}

@media (prefers-reduced-motion: no-preference){
  .cta-premium{
    animation: ctaBreath 3.6s ease-in-out infinite;
  }
  @keyframes ctaBreath{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-1px); }
    100%{ transform: translateY(0); }
  }
}


/* ===== WhatsApp Official Style ===== */

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: #25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .25s ease, box-shadow .25s ease;
}

.wa-icon{
  width: 30px;
  height: 30px;
  fill: white;
}

.wa-float:hover{
  transform: scale(1.06);
  box-shadow: 0 22px 65px rgba(0,0,0,.32);
}

.wa-float:active{
  transform: scale(.96);
}

@media (prefers-reduced-motion: no-preference){
  .wa-float{
    animation: waBreath 2.8s ease-in-out infinite;
  }
  @keyframes waBreath{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.04); }
    100%{ transform: scale(1); }
  }
}

@supports (padding: env(safe-area-inset-bottom)){
  .wa-float{ bottom: calc(18px + env(safe-area-inset-bottom)); }
}


/* ===== WhatsApp Dynamic Hours ===== */

.wa-float.wa-open{
  background: #25D366;
}

.wa-float.wa-closed{
  background: #9aa0a6;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.wa-float.wa-closed .wa-icon{
  opacity: .85;
}

@media (prefers-reduced-motion: no-preference){
  .wa-float.wa-open{
    animation: waBreath 2.8s ease-in-out infinite;
  }
  .wa-float.wa-closed{
    animation: none;
  }
}

.wa-float.wa-closed:hover{
  transform: scale(1.02);
}