/* =========================================================
   IUDEX MG — Home v0.1
   Design tokens
   ========================================================= */
:root{
  /* superficies oscuras (Hero, Tecnología, CTA final, Footer) */
  --petrol-0:#0e1e21;
  --petrol-1:#16292c;
  --paper:#eef1ec;      /* texto sobre fondo oscuro */
  --muted:#8fa39d;       /* texto secundario sobre fondo oscuro */
  --hair-dark:rgba(238,241,236,0.12);

  /* superficies claras (Presentación, Soluciones, Método, Confianza) */
  --white:#ffffff;
  --surface-alt:#f4f6f3;
  --ink:#10201f;          /* texto sobre fondo claro (nunca negro puro) */
  --ink-muted:#5c655f;
  --hair-light:#dde1db;

  /* marca */
  --green:#11ad04;
  --green-dim:#0c7603;

  /* espaciado oficial */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;

  /* tipografía (provisional, ver README) */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --max-content:1180px;
}

/* =========================================================
   Reset mínimo
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* foco visible en todo elemento interactivo, siempre */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}
.dark a:focus-visible,
.dark button:focus-visible{
  outline-color:var(--paper);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--green);
  color:var(--petrol-0);
  padding:12px 20px;
  z-index:100;
  font-family:var(--font-mono);
  font-size:13px;
}
.skip-link:focus{ left:var(--sp-2); top:var(--sp-2); }

/* =========================================================
   Utilidades de sección
   ========================================================= */
.dark{ background:var(--petrol-0); color:var(--paper); }
.light{ background:var(--white); color:var(--ink); }
.light-alt{ background:var(--surface-alt); color:var(--ink); }

.wrap{
  max-width:var(--max-content);
  margin:0 auto;
  padding-left:var(--sp-3);
  padding-right:var(--sp-3);
}
@media (min-width:900px){
  .wrap{ padding-left:var(--sp-6); padding-right:var(--sp-6); }
}

section{ padding:var(--sp-7) 0; scroll-margin-top:105px; }
@media (min-width:900px){
  section{ padding:var(--sp-8) 0; }
}
.site-footer{ scroll-margin-top:105px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
  padding-bottom:var(--sp-2);
  border-bottom:3px solid var(--green);
  display:inline-block;
  width:max-content;
  margin-bottom:var(--sp-5);
}

h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:16ch;
  margin-bottom:var(--sp-4);
}
@media (min-width:900px){
  h2{ font-size:42px; }
}

.section-lede{
  font-size:17px;
  color:var(--ink-muted);
  max-width:56ch;
  margin-bottom:var(--sp-5);
}
.dark .section-lede{ color:var(--muted); }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--petrol-0);
  border-bottom:0.5px solid var(--hair-dark);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--sp-2);
  padding-bottom:var(--sp-2);
}
.lockup{
  display:inline-block;
  line-height:0;
}
.logo-img{
  height:64px;
  width:auto;
}
.footer-logo-img{
  height:36px;
  width:auto;
  margin-bottom:var(--sp-2);
}

.nav-list{
  display:none;
  align-items:center;
  gap:var(--sp-4);
}
.nav-list a{
  font-size:14px;
  text-decoration:none;
  color:var(--paper);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.nav-list a:hover{ border-color:var(--green); }
.nav-list a[aria-disabled="true"]{
  color:var(--muted);
  cursor:default;
}
.nav-portal{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  border:0.5px solid var(--hair-dark);
  padding:8px 14px;
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease;
}
.nav-portal:hover{ color:var(--paper); border-color:var(--muted); }

.nav-toggle{
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:0.5px solid var(--hair-dark);
  padding:8px 12px;
}
.nav-toggle:hover{ border-color:var(--muted); }

@media (min-width:900px){
  .logo-img{ height:88px; } /* header resultante: ~120px */
  section{ scroll-margin-top:135px; }
  .site-footer{ scroll-margin-top:135px; }
}

.mobile-nav{
  display:none;
  flex-direction:column;
  gap:0;
  padding:0 var(--sp-3) var(--sp-3);
  border-top:0.5px solid var(--hair-dark);
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{
  display:block;
  width:100%;
  font-size:16px;
  text-decoration:none;
  color:var(--paper);
  padding:var(--sp-3) 0;
  border-bottom:0.5px solid var(--hair-dark);
}
.mobile-nav a[aria-disabled="true"]{ color:var(--muted); }

@media (min-width:900px){
  .nav-list{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
.hero .wrap{ max-width:var(--max-content); }
.hero-copy{ max-width:640px; }

h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-0.01em;
  max-width:11ch;
  margin-bottom:var(--sp-2);
}
.rotator-line{
  overflow-x:visible;
  overflow-y:hidden;
  margin-bottom:var(--sp-4);
  line-height:1.08;
}
.rotator{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--green);
  opacity:0;
  transform:translateY(6px);
}
.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.hero-sub{
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  max-width:34ch;
  margin-bottom:var(--sp-5);
}

.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  background:var(--green);
  color:var(--petrol-0);
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  padding:16px 22px;
  text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  transition:background-color .2s ease;
}
.cta:hover{ background:var(--green-dim); }
.cta:active{ background:var(--green-dim); }

.flow-hint{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  letter-spacing:0.04em;
  margin-top:var(--sp-3);
}

.hero-secondary{
  display:block;
  width:max-content;
  margin-top:var(--sp-2);
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.hero-secondary:hover{
  color:var(--paper);
  border-color:var(--muted);
}

@media (min-width:900px){
  .hero-copy{ max-width:700px; margin-left:var(--sp-6); }
  h1{ font-size:64px; max-width:700px; }
  .rotator{ font-size:64px; white-space:nowrap; }
}

/* =========================================================
   Presentación
   ========================================================= */
#presentacion .wrap{ max-width:900px; }

/* =========================================================
   Soluciones — lista editorial, sin tarjetas ni iconografía
   ========================================================= */
.solutions-list{
  border-top:0.5px solid var(--hair-light);
}
.solution-row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
  padding:var(--sp-4) 0;
  border-bottom:0.5px solid var(--hair-light);
}
.solution-row h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
}
.solution-row p{
  color:var(--ink-muted);
  font-size:15px;
  max-width:56ch;
}
.solution-link{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--green);
  text-decoration:none;
  width:max-content;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.solution-link:hover{ border-color:var(--green); }

@media (min-width:700px){
  .solution-row{
    grid-template-columns:1fr 2fr auto;
    align-items:start;
    gap:var(--sp-4);
  }
}

/* =========================================================
   Nuestro Método — secuencia real, numeración justificada
   ========================================================= */
.method-list{
  border-left:1px solid var(--hair-light);
  margin-left:6px;
  list-style:none;
}
.method-step{
  position:relative;
  padding:0 0 var(--sp-6) var(--sp-5);
}
.method-step:last-child{ padding-bottom:0; }
.method-step::before{
  content:"";
  position:absolute;
  left:-5px; top:4px;
  width:9px; height:9px;
  background:var(--green);
}
.method-number{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--green);
  letter-spacing:0.08em;
  display:block;
  margin-bottom:var(--sp-1);
}
.method-step h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  margin-bottom:var(--sp-1);
}
.method-step p{
  color:var(--ink-muted);
  max-width:52ch;
}

/* =========================================================
   Tecnología (fondo oscuro)
   ========================================================= */
.tech-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media (min-width:700px){
  .tech-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5) var(--sp-6); }
}
.tech-item{
  border-top:0.5px solid var(--hair-dark);
  padding-top:var(--sp-2);
}
.tech-item h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  margin-bottom:var(--sp-1);
  color:var(--paper);
}
.tech-item p{
  color:var(--muted);
  font-size:15px;
}

/* =========================================================
   Confianza — sin datos inventados, placeholders honestos
   ========================================================= */
.trust-note{ margin-bottom:var(--sp-5); }
.trust-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}
@media (min-width:700px){
  .trust-grid{ grid-template-columns:repeat(3,1fr); }
}
.trust-placeholder{
  border:1px dashed var(--hair-light);
  padding:var(--sp-4);
  text-align:left;
}
.trust-placeholder .label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
  display:block;
  margin-bottom:var(--sp-1);
}
.trust-placeholder p{
  color:var(--ink-muted);
  font-size:14px;
}

/* =========================================================
   CTA final (fondo oscuro)
   ========================================================= */
.cta-final .wrap{ max-width:760px; text-align:left; }
.cta-final h2{ max-width:32ch; }
.cta-final .section-lede{ margin-bottom:var(--sp-4); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ padding:var(--sp-6) 0 var(--sp-4); }
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  padding-bottom:var(--sp-5);
  border-bottom:0.5px solid var(--hair-dark);
}
@media (min-width:700px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr; }
}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--sp-2);
}
.footer-col ul{ display:flex; flex-direction:column; gap:8px; }
.footer-col a{
  text-decoration:none;
  color:var(--paper);
  font-size:14px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.footer-col a:hover{ border-color:var(--green); }
.footer-col a[aria-disabled="true"]{ color:var(--muted); }
.footer-company{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  margin-bottom:var(--sp-2);
}
.footer-address{
  color:var(--muted);
  font-size:13px;
  max-width:34ch;
}
.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding-top:var(--sp-4);
  font-size:12px;
  color:var(--muted);
}
@media (min-width:700px){
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}
.footer-legal{ display:flex; gap:var(--sp-3); }
.footer-legal a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-legal a:hover{ border-color:var(--muted); }

/* =========================================================
   WhatsApp — botón flotante discreto
   ========================================================= */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  width:52px;
  height:52px;
  background:#25D366;
  color:#ffffff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:scale(1.06);
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
}
.whatsapp-float:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
}
@media (min-width:900px){
  .whatsapp-float{ right:32px; bottom:32px; width:56px; height:56px; }
}

/* =========================================================
   Landing pages de servicio — bloques reutilizables
   (usados por primera vez en /cobro-facturas-comerciales/)
   ========================================================= */

/* Lista con marcador cuadrado verde (reutiliza el lenguaje visual de .method-step) */
.service-list{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
}
@media (min-width:700px){
  .service-list{ grid-template-columns:repeat(2,1fr); gap:var(--sp-2) var(--sp-5); }
}
.service-list li{
  position:relative;
  padding-left:var(--sp-3);
  font-size:15px;
  line-height:1.6;
}
.light .service-list li,
.light-alt .service-list li{ color:var(--ink-muted); }
.dark .service-list li{ color:var(--muted); }
.service-list li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:8px; height:8px;
  background:var(--green);
}

/* Caja de documentación / checklist previo al contacto */
.doc-checklist{
  border:1px dashed var(--hair-light);
  padding:var(--sp-4);
}
.dark .doc-checklist{ border-color:var(--hair-dark); }

/* Preguntas frecuentes */
.faq-list{ border-top:0.5px solid var(--hair-light); }
.faq-item{
  padding:var(--sp-4) 0;
  border-bottom:0.5px solid var(--hair-light);
}
.faq-item h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  margin-bottom:var(--sp-1);
}
.faq-item p{
  color:var(--ink-muted);
  font-size:15px;
  max-width:64ch;
}

/* Hero de landing — mismo lenguaje del Hero institucional, sin rotador */
.landing-hero{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
@media (min-width:900px){
  .landing-hero{ padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
}