/* ==========================================================================
   ADVANCE Global Tech · hoja de estilos única
   Paleta y tipografía tomadas del Plano Maestro del Sitio V2 (secciones 8-9).
   Editar solo las variables de :root para ajustar la identidad.
   ========================================================================== */
:root{
  --bg: #F5F8FB;
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --line: #E3EAF1;
  --line-soft: #EDF2F7;
  --text: #16202B;
  --muted: #4A5A6A;
  --accent: #1E88E5;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(30,136,229,.10);
  --cta: #1E88E5;
  --cta-ink: #FFFFFF;
  --header: rgba(255,255,255,.92);
  --footer: #0C3A5A;
  --footer-text: #EAF2F8;
  --shadow: 0 14px 34px rgba(12,58,90,.12);
  --radius: 16px;
  --warm: #F6A821;
  --deep: #0C3A5A;
  --tick: #F6A821;
  --badge: #F6A821;
  --badge-ink: #16202B;
  --max: 1200px;
  --gap: 24px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --ff-display: "Manrope", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0 0 var(--s2)}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 var(--s2)}
p,li,dd,td,h1,h2,h3{overflow-wrap:break-word}
.grid>*,.split>*,.pdp>*,.hero-grid>*{min-width:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.muted{color:var(--muted)}
.section{padding:var(--s6) 0}
.section--tight{padding:var(--s5) 0}
.section--alt{background:var(--bg-alt)}
.center{text-align:center}
.lead{font-size:1.1rem;color:var(--muted);max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* --- eyebrow: regla de ingeniería (elemento firma) ---------------------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 var(--s2);
  font-family:var(--ff-body);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{
  content:"";width:34px;height:9px;flex:none;
  border-left:1px solid var(--tick);border-right:1px solid var(--tick);
  border-bottom:1px solid var(--tick);opacity:.8;
}
.eyebrow--muted{color:var(--muted)}
.eyebrow--muted::before{border-color:var(--muted)}

/* --- botones ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  font-family:var(--ff-body);font-size:.95rem;font-weight:600;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--cta);color:var(--cta-ink)}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--sm{padding:9px 16px;font-size:.85rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}

/* --- barra superior de utilidad ---------------------------------------- */
.util{
  background:var(--footer);color:var(--footer-text);
  font-size:.78rem;border-bottom:1px solid var(--line-soft);
}
.util .muted{color:inherit;opacity:.72}
.util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.util a:hover{color:var(--accent)}
.util-links{display:flex;gap:18px;align-items:center}
/* El selector de idioma: EN primero, que es el idioma por defecto del sitio.
   La pastilla activa lleva su propio borde redondeado y el contenedor un relleno de 2 px, en
   vez de recortar al hijo con overflow:hidden. Recortar un fondo contra una esquina redonda es
   justo lo que dejaba el borde dentado. */
.lang{display:inline-flex;align-items:center;gap:2px;padding:2px;
      border:1px solid rgba(255,255,255,.3);border-radius:999px}
.lang a{padding:3px 11px;border-radius:999px;font-weight:700;font-size:.72rem;
        letter-spacing:.06em;line-height:1.45}
.lang a:hover{color:#fff}
.lang a[aria-current]{background:var(--accent);color:var(--accent-ink)}

/* --- cabecera ---------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;background:var(--header);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
}
.hdr .wrap{display:flex;align-items:center;gap:var(--s3);min-height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:700;font-size:1.12rem;letter-spacing:.02em}
/* El logo lleva el eslogan debajo del nombre en letra muy pequena: por debajo de 40 px esa
   linea deja de leerse. La cabecera mide 70 px, asi que 42 entra de sobra. */
.brand img{width:auto;height:auto;max-height:42px;max-width:100%}
/* El nombre en texto es el plan B del logo: si la imagen carga, sobra. El onerror del <img>
   lo saca del DOM cuando falla, y entonces este selector deja de aplicar y el texto aparece. */
.brand img + span{display:none}
.brand span small{display:block;font-family:var(--ff-body);font-size:.6rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:26px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav a{padding:6px 0;border-bottom:2px solid transparent;color:var(--muted)}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--text);border-color:var(--accent)}
.hdr-cta{display:flex;gap:10px;align-items:center}
.cta-short{display:none}
.hdr-cta .btn{white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);margin:4px 0}

/* --- hero -------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:var(--s6) 0 var(--s5);background:var(--bg)}
.hero::after{
  content:"";position:absolute;left:50%;bottom:-45%;width:min(900px,110%);height:600px;
  transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:center}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:1.18rem}
/* cotas de medida sobre la imagen héroe (elemento firma) */
.hero-shot{position:relative;padding:26px 34px}
.hero-shot .frame{border-radius:var(--radius);padding:8px}
.hero-shot .frame img{filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.callout{position:absolute;display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.callout--top{top:0;left:34px;right:34px;justify-content:center}
.callout--top::before,.callout--top::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.45}
.callout--bottom{bottom:0;left:34px;right:34px;justify-content:center}
.callout--bottom::before,.callout--bottom::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.45}
@media (max-width:900px){.callout{display:none}.hero-shot{padding:0}}

/* --- franja de cifras -------------------------------------------------- */
.stats{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-alt)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
.stat{background:var(--bg-alt);padding:var(--s4) var(--s3)}
.stat b{display:block;font-family:var(--ff-display);font-size:2rem;font-weight:700;letter-spacing:-.03em}
.stat small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* --- certificaciones --------------------------------------------------- */
.certs{display:flex;flex-wrap:wrap;gap:12px}
.cert{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
}
.cert svg{width:16px;height:16px;color:var(--accent);flex:none}

/* --- rejillas y tarjetas ---------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card--link:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.card h3{margin-bottom:6px}
.card p{font-size:.94rem;color:var(--muted);margin:0}
.card-more{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);font-size:.85rem;font-weight:600;color:var(--accent)}
.card-icon{width:34px;height:34px;color:var(--accent);margin-bottom:var(--s2)}

/* --- tarjeta de producto --------------------------------------------- */
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.pmedia{position:relative;aspect-ratio:4/3;background:var(--raised);display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.pmedia img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Sin foto todavia. El aviso es mudo a proposito: esta misma hoja sirve a las paginas en
   espanol y a las de ingles, y un texto aqui saldria en el idioma equivocado en la mitad
   del sitio. Antes remataba ademas con una nota interna de mantenimiento, que no tiene por
   que leer un visitante. El detalle esta en la seccion 37 de ESTADO-PROYECTO.md. */
.pmedia.is-empty::after,.gallery-main.is-empty::after,.frame.is-empty::after{
  content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='m21 15-4.5-4.5L9 18'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.45;
}
.pmedia.is-empty::after{width:38px;height:38px}
.pbody{padding:var(--s3);display:flex;flex-direction:column;gap:8px;flex:1}
.pbody h3{margin:0;font-size:1.05rem}
.ptag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{font-size:.75rem;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.pfoot{margin-top:auto;padding-top:var(--s2);font-size:.85rem;font-weight:600;color:var(--accent);display:inline-flex;gap:8px;align-items:center}
.pfoot--soon{color:var(--muted);font-weight:500}
.pfoot svg,.card-more svg{width:15px;height:15px;flex:none}
.badge{position:absolute;top:12px;left:12px;z-index:2;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--badge);color:var(--badge-ink)}

/* --- PDP -------------------------------------------------------------- */
.crumbs{font-size:.82rem;color:var(--muted);padding:var(--s3) 0 0}
.crumbs a:hover{color:var(--accent)}
/* El <h1> de la ficha es el codigo de canal: 15 caracteres sin punto de corte, que al
   tamano normal de h1 se parten a mitad de palabra. Aqui manda un cuerpo menor. */
.pdp h1{font-size:clamp(1.7rem,3.2vw,2.4rem);overflow-wrap:anywhere}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:start;padding-top:var(--s4)}
.gallery-main{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.gallery-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gallery-main.is-empty::after{width:56px;height:56px}
.frame.is-empty::after{width:72px;height:72px}
.frame.is-empty{min-height:260px}
.thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumb{flex:none;width:74px;height:74px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer}
.thumb[aria-current]{border-color:var(--accent)}
.thumb img{width:100%;height:100%;object-fit:contain}
.feature-list{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:12px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.feature-list svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:4px}
.spec-table{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:var(--s3)}
.spec-table caption{text-align:left;font-family:var(--ff-display);font-size:1.2rem;font-weight:600;padding-bottom:var(--s2)}
.spec-table th,.spec-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.spec-table th{width:34%;font-weight:600;color:var(--muted);font-size:.85rem;letter-spacing:.04em}
.spec-table tbody tr:nth-child(odd){background:var(--surface)}
.spec-group th{background:var(--raised);color:var(--text);font-family:var(--ff-display);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.pend{
  display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  padding:2px 9px;border-radius:6px;border:1px dashed var(--accent);color:var(--accent);
  background:var(--accent-soft);
}
.dl{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}
.dl a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:.9rem;font-weight:600}
.dl a:hover{border-color:var(--accent);color:var(--accent)}
.dl svg{width:17px;height:17px;color:var(--accent)}

/* --- split ------------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}

/* --- distribuidores --------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0}
.filters button{
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 15px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:var(--ff-body);
}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dist-list{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.dist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.dist header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dist h3{margin:0;font-size:1rem}
.dist .region{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dist dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.9rem}
.dist dt{color:var(--muted);font-size:.82rem}
.dist dd{margin:0;overflow-wrap:anywhere}

/* --- formularios ------------------------------------------------------ */
form.f{display:grid;gap:var(--s2)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-alt);color:var(--text);font-family:var(--ff-body);font-size:.95rem;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.8rem;color:var(--muted)}
.form-msg{display:none;padding:12px 16px;border-radius:10px;border:1px solid var(--accent);background:var(--accent-soft);font-size:.9rem}
.form-msg.show{display:block}

/* --- FAQ -------------------------------------------------------------- */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--ff-display);font-size:1.02rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--muted);font-size:.95rem}

/* --- pasos ------------------------------------------------------------ */
.steps{list-style:none;counter-reset:s;padding:0;margin:var(--s3) 0 0;display:grid;gap:16px}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.steps li::before{
  content:counter(s,decimal-leading-zero);flex:none;font-family:var(--ff-display);font-weight:700;
  font-size:.8rem;letter-spacing:.06em;color:var(--accent);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;background:var(--surface);
}

/* --- CTA final -------------------------------------------------------- */
.cta-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5);padding-bottom:var(--s5)}

/* --- pie -------------------------------------------------------------- */
.ftr{background:var(--footer);color:var(--footer-text);padding:var(--s5) 0 var(--s3);border-top:1px solid var(--line-soft)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
.ftr h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--ff-body);font-weight:600;margin-bottom:14px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.9rem}
.ftr li{overflow-wrap:anywhere}
.ftr a{color:var(--footer-text);opacity:.85}
.ftr a:hover{opacity:1;color:var(--accent)}
.social{display:flex;gap:10px;margin-top:var(--s2)}
.social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center}
.social svg{width:17px;height:17px}
.ftr-base{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.ftr-base ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}

/* --- aviso de contenido pendiente ------------------------------------ */
.notice{border:1px dashed var(--accent);background:var(--accent-soft);border-radius:var(--radius);padding:var(--s3);font-size:.9rem}
.notice b{color:var(--accent)}

/* --- scroll reveal ---------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* --- responsive ------------------------------------------------------- */
@media (max-width:1024px){
  .hero-grid,.pdp,.split{grid-template-columns:1fr;gap:var(--s4)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
}
@media (max-width:820px){
  .nav{
    display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg-alt);border-bottom:1px solid var(--line);padding:8px 24px 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .burger{display:block}
  .hdr-cta .btn--ghost{display:none}
  .stats-grid,.grid--3,.grid--2,.dist-list,.f-row{grid-template-columns:1fr}
  .section{padding:var(--s5) 0}
}
@media (max-width:600px){
  .ftr-grid{grid-template-columns:1fr}
  .util .muted{display:none}
  .util .wrap{justify-content:flex-end}
  .cta-long{display:none}
  .cta-short{display:inline}
}
@media (max-width:480px){
  body{font-size:16px}
  .hdr .wrap{gap:12px}
  .hdr-cta .btn{padding:9px 13px;font-size:.82rem}
  .thumb{width:60px;height:60px}
  .grid--4{grid-template-columns:1fr}
  .stat b{font-size:1.7rem}
}