/* ═══════════════════════════════════════════════════════════════
   main.css — MontevideoWifi
   TODO el diseño vive acá. Si un estilo aparece 2 veces, es un componente.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Variables (lo único que se toca para recolorear el sitio) ──
   La paleta sale del logo: azul marino #002090 y ámbar #f9a01b.
   El tema claro es el que manda, porque es donde el logo se lee (12,2:1). */
:root{
  --bg:#f5f8fc;          /* fondo */
  --surface:#ffffff;     /* tarjetas y paneles */
  --surface-2:#eaf1f9;   /* variante */
  --line:#ccd9ea;        /* bordes */
  --ink:#0d1626;         /* texto principal */
  --ink-soft:#3d4a61;    /* texto secundario */
  --dim:#66738a;         /* texto tenue */
  --brand:#002090;       /* azul del logo — CTA y enlaces */
  --sobre-brand:#ffffff; /* texto encima del color de marca */
  --brand-2:#f9a01b;     /* ámbar del logo — solo para superficies y trazos */
  --brand-2-ink:#8a5200; /* el ámbar no se lee sobre blanco: esta es su versión texto */
  --wa:#25d366;          /* verde WhatsApp, solo para el botón de contacto */
  /* semáforo de señal, usado en los gráficos */
  --senal-ok:#002090; --senal-media:#a35d00; --senal-mala:#c0392b;
  --shadow:0 12px 30px -14px rgba(20,40,70,.20);
  --radius:14px;
  --wrap:1100px;
}
html[data-theme="dark"]{
  --bg:#080e1a; --surface:#111c30; --surface-2:#0c1526; --line:#20304d;
  --ink:#eef4ff; --ink-soft:#c2cfe4; --dim:#8593ab;
  --brand:#6b9bff;       /* el marino no contrasta en oscuro: se aclara */
  --sobre-brand:#08122b;
  --brand-2:#f9a01b; --brand-2-ink:#f9a01b;
  --senal-ok:#6b9bff; --senal-media:#f9a01b; --senal-mala:#ff8175;
  --shadow:0 18px 40px -18px rgba(0,0,0,.55);
}

/* ── 2. Reset y base ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Sora',system-ui,sans-serif;line-height:1.2;font-weight:700}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.4rem,3.5vw,2rem);margin-top:2.6rem;margin-bottom:.8rem}
h3{font-size:1.1rem}
p{margin-bottom:1rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap--narrow{max-width:780px}

/* Salto al contenido: accesibilidad de teclado, sin ocultar nada al robot */
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--sobre-brand);
  padding:.6rem 1rem;border-radius:0 0 8px 0;font-weight:600;z-index:100}
.skip:focus{left:0}

/* ── 3. Barra superior ── */
.topbar{border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0;z-index:50}
.topbar nav{display:flex;align-items:center;gap:1.2rem;padding:.85rem 0}
.brand{font-family:'Sora',system-ui,sans-serif;font-weight:800;color:var(--ink);
  text-decoration:none;font-size:1.05rem;display:flex;align-items:center;gap:.55rem}
.brand img{width:48px;height:48px;flex:none}
.brand span{white-space:nowrap}
.brand b{color:var(--brand);font-weight:800}
/* En tema oscuro el logo azul marino no contrasta: se le da su propia superficie clara */
html[data-theme="dark"] .brand img{background:#fff;border-radius:50%;padding:2px}
.nav-links{display:flex;gap:1.1rem;margin-left:auto}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--brand)}
.nav-cta{background:var(--brand);color:var(--sobre-brand);text-decoration:none;padding:.55rem 1.1rem;
  border-radius:99px;font-weight:700;font-size:.9rem;white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);
  font-size:1.1rem;padding:.35rem .6rem;border-radius:8px;cursor:pointer}
#themeToggle{background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  border-radius:8px;padding:.3rem .5rem;font-size:.95rem;line-height:1}

/* ── 4. Hero ── */
.hero{padding:3.5rem 0 2.5rem;text-align:center}
.hero p{color:var(--ink-soft);max-width:62ch;margin:1rem auto 1.6rem;font-size:1.08rem}
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.eyebrow{display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);border:1px solid var(--line);
  background:var(--surface-2);border-radius:99px;padding:.3rem .9rem;margin-bottom:1rem}

/* ── 5. Botones ── */
.btn-primary,.btn-ghost{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:.85rem 1.5rem;border-radius:99px;transition:transform .15s,box-shadow .15s;
}
.btn-primary{background:var(--brand);color:var(--sobre-brand)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--brand)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ── 6. Tarjetas ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;margin:1.4rem 0}
/* 4 tarjetas: 2x2 en escritorio, para no dejar una huérfana en la última fila.
   El min() evita que el mínimo de 360px desborde en pantallas angostas. */
.grid--duo{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;text-decoration:none;color:var(--ink);display:block;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--brand);transform:translateY(-3px)}
.card h3{font-size:1.1rem;margin-bottom:.4rem;margin-top:0}
.card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:0}
.card .card-mas{display:inline-block;margin-top:.7rem;color:var(--brand);font-weight:600;font-size:.9rem}

/* ── 7. Bandas de aviso (reutilizar, no inventar) ── */
.nota,.alerta,.dato{border:1px solid var(--line);border-left-width:4px;border-radius:12px;
  padding:1rem 1.2rem;margin:1.2rem 0;background:var(--surface)}
.nota{border-left-color:var(--brand)}      /* idea clave */
.alerta{border-left-color:var(--senal-mala)} /* cuidado / error típico */
.dato{border-left-color:var(--brand-2)}     /* dato o ejemplo */
.nota p:last-child,.alerta p:last-child,.dato p:last-child{margin-bottom:0}

/* ── 8. Banda de conversión ── */
.cta-band{
  display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.8rem;margin:2.5rem 0;
}
.cta-band h2{font-size:1.25rem;margin:0 0 .3rem}
.cta-band p{color:var(--ink-soft);font-size:.96rem;max-width:60ch;margin-bottom:0}

/* ── 9. FAQ (el texto visible debe coincidir con el schema) ── */
.faq-item{border-top:1px solid var(--line);padding:1.1rem 0}
.faq-item h3{font-size:1.03rem;margin:0 0 .35rem}
.faq-item p{color:var(--ink-soft);margin-bottom:0}

/* ── 10. Respuesta directa (arriba de cada página, para GEO) ── */
.respuesta{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand-2);
  border-radius:12px;padding:1.2rem 1.4rem;margin:1.6rem 0}
.respuesta p{font-size:1.04rem;color:var(--ink);margin-bottom:0}

/* ── 11. Lista de puntos con marca ── */
.checks{list-style:none;margin:1.2rem 0;display:grid;gap:.7rem}
.checks li{padding-left:1.8rem;position:relative;color:var(--ink-soft)}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}

/* ── 12. Pasos numerados ── */
.pasos{list-style:none;counter-reset:p;display:grid;gap:1rem;margin:1.4rem 0}
.pasos li{counter-increment:p;padding-left:2.6rem;position:relative;color:var(--ink-soft)}
.pasos li::before{content:counter(p);position:absolute;left:0;top:-.1rem;width:1.8rem;height:1.8rem;
  display:grid;place-items:center;border-radius:50%;background:var(--brand);color:var(--sobre-brand);
  font-weight:800;font-size:.9rem;font-family:'Sora',sans-serif}
.pasos li b{color:var(--ink);display:block}

/* ── 13. Migas ── */
.migas{font-size:.87rem;color:var(--dim);padding-top:1.2rem}
.migas a{color:var(--dim);text-decoration:none}
.migas a:hover{color:var(--brand)}

/* ── 14. Botón flotante de WhatsApp ── */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--wa);color:#04331a;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7);transition:transform .15s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:currentColor}

/* ── 15. Footer ── */
footer{border-top:1px solid var(--line);margin-top:3rem;padding:2rem 0 4.5rem;
  color:var(--dim);font-size:.9rem;text-align:center}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--brand)}
.foot-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.9rem}

/* ── 16. Responsive ── */
/* Con el logo y seis entradas, el menú ya no entra por debajo de ~1080px:
   medido, a 1000px desbordaba la página. Por eso colapsa acá. */
@media (max-width:1080px){
  .nav-toggle{display:block;margin-left:auto}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--surface);border-bottom:1px solid var(--line);padding:1rem 22px;margin:0}
  nav.open .nav-links{display:flex}
  .nav-cta{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
}

/* ── 17. Accesibilidad ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ═══════════════════════════════════════════════════════════════
   18. Piezas gráficas — SVG a medida, sin imágenes externas.
   Explican el servicio; no son decoración. Si una pieza necesita
   que le expliquen qué es, no va: se saca.
   ═══════════════════════════════════════════════════════════════ */

/* Tira de credenciales bajo el hero */
.tira{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:1.5rem 0 .5rem;
}
.tira div{background:var(--surface);padding:1rem 1.1rem}
.tira b{display:block;font-family:'Sora',sans-serif;font-size:1.35rem;color:var(--brand-2-ink);line-height:1.1}
.tira span{color:var(--ink-soft);font-size:.88rem}

/* Ícono dentro de las tarjetas de servicio */
.card-ico{width:44px;height:44px;margin-bottom:.9rem;display:block}
.card-ico svg{width:100%;height:100%;fill:none;stroke:var(--brand);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.card:hover .card-ico svg{stroke:var(--brand-2)}

/* Comparativa de tres opciones */
.comparativa{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.opcion{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;text-align:center}
.opcion svg{width:100%;height:88px;margin-bottom:.7rem}
.opcion h3{font-size:1rem;margin:0 0 .35rem}
.opcion p{color:var(--ink-soft);font-size:.9rem;margin:0}
.opcion .veredicto{display:inline-block;margin-top:.7rem;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:.25rem .7rem;border-radius:99px}
.opcion .v-si{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.opcion .v-ojo{background:color-mix(in srgb,var(--brand-2) 22%,transparent);color:var(--brand-2-ink)}

/* ── 19b. Retrato del perfil ── */
.retrato{width:148px;height:148px;border-radius:50%;display:block;margin:0 auto 1.3rem;
  background:var(--surface);border:4px solid var(--surface);box-shadow:var(--shadow)}

/* ── 19. Blog ── */
.post-meta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;
  color:var(--dim);font-size:.9rem;margin:0 0 1.4rem}
.post-meta b{color:var(--brand-2-ink);font-weight:600}
.card time{display:block;color:var(--dim);font-size:.82rem;margin-bottom:.45rem}
/* Cierre de artículo: el paso de "leí esto" a "escribo" */
.post-cierre{border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.6rem}
.post-cierre h2{margin-top:0}

/* Solo para lectores de pantalla. No es ocultar contenido al buscador:
   es dar contexto a quien no ve la tabla. Por eso no se usa display:none. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tabla comparativa. El scroll va en el contenedor, nunca en la página. */
.tabla{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius)}
.tabla table{border-collapse:collapse;width:100%;min-width:420px}
.tabla th,.tabla td{padding:.8rem .95rem;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
.tabla th{background:var(--surface-2);font-family:'Sora',sans-serif;font-size:.88rem;color:var(--ink)}
.tabla td{color:var(--ink-soft)}
.tabla td:first-child{color:var(--ink);font-weight:600}
.tabla tr:last-child td{border-bottom:0}

/* Acento cálido detrás del hero: da color sin pedir interpretación.
   El inset queda en 0: si se estira hacia los lados, desborda la página. */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(75% 85% at 50% 28%,color-mix(in srgb,var(--brand-2) 15%,transparent),transparent 72%);
}

/* ═══════════════════════════════════════════════════════════════
   20. Movimiento ligado al scroll

   Tres decisiones deliberadas acá:

   1. Sin JavaScript. Son animaciones nativas de scroll (`view()` y
      `scroll()`). No hay observadores ni clases que agregue un script,
      así que no hay forma de que el contenido quede escondido por un
      JS que no cargó.

   2. Todo detrás de @supports. Si el navegador no soporta
      animation-timeline, no se aplica NADA: la página se ve completa y
      quieta. El fallback es el sitio tal como estaba.

   3. NADA se desvanece: se mueve, pero siempre en opacidad 1.
      La primera versión de esto usaba un fade clásico (opacity 0 → 1).
      Medido en un viewport de 2400 px, la banda de CTA de los artículos
      largos quedaba en opacity 0, porque está más abajo que eso y su
      animación todavía no había arrancado. Un rastreador la habría
      capturado invisible. Con desplazamiento puro el problema no existe:
      el texto está siempre visible, en cualquier posición de la página.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    @keyframes surgir{
      from{transform:translateY(22px)}
      to{transform:none}
    }

    /* Elementos de apoyo: tarjetas, tira, comparativa, bandas de CTA y tabla. */
    .card,.tira div,.opcion,.cta-band,.tabla{
      animation-name:surgir;
      animation-duration:auto;
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.22,.61,.36,1);
      animation-timeline:view();
      /* Termina cuando el elemento asomó apenas: nunca se queda a medio camino. */
      animation-range:entry 0% entry 38%;
    }

    /* Escalonado dentro de una misma fila: entran de a una, no en bloque. */
    .grid .card:nth-child(2),.comparativa .opcion:nth-child(2),.tira div:nth-child(2){
      animation-range:entry 0% entry 48%;
    }
    .grid .card:nth-child(3),.comparativa .opcion:nth-child(3),.tira div:nth-child(3){
      animation-range:entry 0% entry 58%;
    }
    .grid .card:nth-child(4),.tira div:nth-child(4){
      animation-range:entry 0% entry 68%;
    }

    /* Los pasos numerados se corren de costado: acompaña la lectura en orden. */
    @keyframes deslizar{
      from{transform:translateX(-14px)}
      to{transform:none}
    }
    .pasos li{
      animation-name:deslizar;
      animation-duration:auto;
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.22,.61,.36,1);
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }

    /* La barra superior se despega con una sombra al empezar a bajar. */
    @keyframes elevar-barra{
      from{box-shadow:0 0 0 rgba(0,0,0,0)}
      to{box-shadow:0 10px 24px -16px rgba(13,22,38,.55)}
    }
    .topbar{
      animation-name:elevar-barra;
      animation-duration:auto;
      animation-fill-mode:both;
      animation-timeline:scroll(root block);
      animation-range:0 140px;
    }

    /* Progreso de lectura, solo en artículos (son los que tienen .post-meta).
       Va como pseudo-elemento de la barra: no necesita marcado nuevo. */
    @keyframes avance-lectura{
      from{transform:scaleX(0)}
      to{transform:scaleX(1)}
    }
    body:has(.post-meta) .topbar::after{
      content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
      background:linear-gradient(90deg,var(--brand),var(--brand-2));
      transform-origin:0 50%;
      animation-name:avance-lectura;
      animation-duration:auto;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-timeline:scroll(root block);
    }
  }
}