/* ============================================
   DYNDO.ORG — Identidad "Dino-WIFI"
   Flat design · mobile-first · sin gradientes
   ============================================ */

:root {
  /* Marca */
  --dyndo-dark-blue: #042C53;
  --dyndo-navy-soft: #0C447C;
  --dyndo-lime: #8ED12A;
  --dyndo-lime-light: #C9F27A;
  --dyndo-gold: #FAC725;
  --dyndo-pink: #D4537E;
  --dyndo-cyan: #00BCD4;
  --dyndo-white: #FFFFFF;
  --dyndo-bg-light: #F1EFE8;
  --dyndo-text: #23262B;
  --dyndo-text-secondary: #5F5E5A;
  --dyndo-border: #E3E0D6;
  --dyndo-card: #FFFFFF;

  /* Radios y sombras */
  --r-card: 16px;
  --r-pill: 9999px;
  --shadow: 0 4px 20px rgba(4,44,83,.08);
  --shadow-hover: 0 10px 32px rgba(4,44,83,.14);
  --transition: 200ms cubic-bezier(.16,1,.3,1);

  /* Tipografía */
  --font-head: 'Poppins','Nunito Sans',system-ui,sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;

  --container: 1160px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{min-height:100dvh;font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--dyndo-text);background:var(--dyndo-bg-light)}
img,svg{display:block;max-width:100%}
ul[role="list"]{list-style:none}
input,button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--dyndo-lime-light)}
:focus-visible{outline:3px solid var(--dyndo-cyan);outline-offset:3px;border-radius:8px}
button{cursor:pointer;background:none;border:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--dyndo-lime);color:var(--dyndo-dark-blue);padding:.75rem 1rem;font-weight:600;z-index:200;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-head);font-size:.95rem;font-weight:600;line-height:1;padding:.9rem 1.6rem;border-radius:var(--r-pill);border:2px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn--sm{padding:.65rem 1.2rem;font-size:.9rem}
.btn--block{width:100%}
/* Primario: fondo lima, texto azul oscuro (regla de contraste) */
.btn--primary{background:var(--dyndo-lime);color:var(--dyndo-dark-blue)}
.btn--primary:hover{background:var(--dyndo-lime-light);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
/* Secundario claro (sobre fondo claro) */
.btn--outline{background:transparent;color:var(--dyndo-dark-blue);border-color:var(--dyndo-dark-blue)}
.btn--outline:hover{background:var(--dyndo-dark-blue);color:var(--dyndo-white)}
/* Secundario sobre fondo oscuro */
.btn--onDark{background:transparent;color:var(--dyndo-white);border-color:rgba(255,255,255,.35)}
.btn--onDark:hover{border-color:var(--dyndo-lime);color:var(--dyndo-lime)}

.eyebrow{display:inline-block;font-family:var(--font-head);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dyndo-dark-blue);background:var(--dyndo-lime-light);padding:.4rem .9rem;border-radius:var(--r-pill)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--dyndo-dark-blue)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.75rem}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__img{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.brand__name{font-family:var(--font-head);font-size:1.25rem;font-weight:700;color:var(--dyndo-white)}
.nav{display:flex;align-items:center;gap:.25rem}
.nav .btn{display:none}/* CTA dentro del nav solo en móvil */
.nav a{font-family:var(--font-head);font-size:.95rem;font-weight:500;color:rgba(255,255,255,.82);padding:.5rem .9rem;border-radius:var(--r-pill);transition:all var(--transition)}
.nav a:hover{color:var(--dyndo-white);background:var(--dyndo-navy-soft)}
.header__actions{display:flex;align-items:center;gap:.75rem}
.hamburger{display:none;width:2.75rem;height:2.75rem;place-items:center;color:var(--dyndo-white);border-radius:12px}
.hamburger:hover{background:var(--dyndo-navy-soft)}

/* ---------- Hero ---------- */
.hero{background:var(--dyndo-dark-blue);color:var(--dyndo-white);padding-block:clamp(3rem,7vw,6rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:1.1fr .9fr;gap:3rem}}
.hero .eyebrow{background:var(--dyndo-navy-soft);color:var(--dyndo-lime)}
.hero__title{font-size:clamp(2.5rem,1.5rem + 4vw,3.5rem);margin:1.25rem 0 0;color:var(--dyndo-white)}
.hero__title .accent{color:var(--dyndo-lime)}
.hero__sub{font-size:1.15rem;color:rgba(255,255,255,.8);margin-top:1.25rem;max-width:36ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__micro{font-size:.9rem;color:rgba(255,255,255,.6);margin-top:1.1rem}
.hero__art{display:grid;place-items:center}
.hero__mascot{width:min(100%,420px);filter:drop-shadow(0 20px 40px rgba(0,0,0,.3));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.hero__mascot{animation:none}}

/* ---------- Secciones ---------- */
.section{padding-block:clamp(3rem,8vw,7.5rem)}
.section--light{background:var(--dyndo-bg-light)}
.section--white{background:var(--dyndo-white)}
.section__head{max-width:660px;margin:0 auto clamp(2.5rem,5vw,3.5rem);text-align:center}
.section__title{font-size:clamp(1.75rem,1.3rem + 1.6vw,2rem);margin-top:.9rem}
.section__lead{font-size:1.0625rem;color:var(--dyndo-text-secondary);margin-top:.9rem}

.grid{display:grid;gap:1.5rem}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:920px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--3{grid-template-columns:1fr}}

/* Beneficios */
.benefit{background:var(--dyndo-card);border:1px solid var(--dyndo-border);border-radius:var(--r-card);padding:2rem 1.75rem;box-shadow:var(--shadow);transition:all var(--transition)}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.benefit__icon{width:3.25rem;height:3.25rem;display:grid;place-items:center;border-radius:14px;margin-bottom:1.25rem}
.benefit__icon svg{width:26px;height:26px}
.icon-gold{background:rgba(250,199,37,.16);color:#b98a00}
.icon-pink{background:rgba(212,83,126,.14);color:var(--dyndo-pink)}
.icon-cyan{background:rgba(0,188,212,.14);color:#0091a3}
.icon-blue{background:rgba(4,44,83,.08);color:var(--dyndo-dark-blue)}
.icon-lime{background:rgba(142,209,42,.18);color:#5a8f10}
.benefit h3{font-size:1.2rem;margin-bottom:.55rem}
.benefit p{font-size:.95rem;color:var(--dyndo-text-secondary)}

/* Casos de uso */
.usecase{background:var(--dyndo-card);border:1px solid var(--dyndo-border);border-radius:var(--r-card);padding:1.4rem 1.35rem;box-shadow:var(--shadow);transition:all var(--transition)}
.usecase:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.usecase__icon{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:12px;margin-bottom:.9rem}
.usecase__icon svg{width:22px;height:22px}
.usecase h3{font-size:1rem;color:var(--dyndo-dark-blue);margin-bottom:.4rem}
.usecase p{font-size:.875rem;color:var(--dyndo-text-secondary);line-height:1.5}

/* ---------- Cobertura LATAM ---------- */
.coverage{background:var(--dyndo-dark-blue);color:var(--dyndo-white)}
.coverage__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:820px){.coverage__grid{grid-template-columns:1fr 1fr}}
.coverage .eyebrow{background:var(--dyndo-navy-soft);color:var(--dyndo-lime)}
.coverage h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2rem);color:var(--dyndo-white);margin-top:.9rem}
.coverage p{color:rgba(255,255,255,.78);margin-top:.9rem}
.coverage__legend{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.legend{display:flex;align-items:center;gap:1rem}
.legend__wave{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.legend__wave svg{width:22px;height:22px}
.wave-gold{background:rgba(250,199,37,.18);color:var(--dyndo-gold)}
.wave-pink{background:rgba(212,83,126,.2);color:var(--dyndo-pink)}
.wave-lime{background:rgba(142,209,42,.2);color:var(--dyndo-lime)}
.legend__txt strong{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--dyndo-white)}
.legend__txt span{font-size:.9rem;color:rgba(255,255,255,.65)}
/* Panel de señal */
.signal-card{background:var(--dyndo-navy-soft);border-radius:var(--r-card);padding:2rem;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.signal-card__bar{display:flex;align-items:center;gap:.4rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.signal-card__url{font-family:'Inter',monospace;font-size:.82rem;color:rgba(255,255,255,.7)}
.host{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;font-size:.9rem}
.host+.host{border-top:1px solid rgba(255,255,255,.08)}
.host__name{font-family:'Inter',monospace;font-size:.82rem;color:rgba(255,255,255,.9)}
.host__pill{font-size:.72rem;font-weight:600;padding:.25rem .65rem;border-radius:var(--r-pill)}
.pill-ok{background:rgba(142,209,42,.2);color:var(--dyndo-lime)}
.pill-sync{background:rgba(0,188,212,.2);color:var(--dyndo-cyan)}
.signal-card__foot{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);font-family:'Inter',monospace;font-size:.8rem;color:var(--dyndo-lime)}
.dot{width:.7rem;height:.7rem;border-radius:50%}
.dot-r{background:#e06c5e}.dot-y{background:var(--dyndo-gold)}.dot-g{background:var(--dyndo-lime)}

/* ---------- Planes ---------- */
.pricing{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;max-width:1080px;margin-inline:auto}
.plan{position:relative;background:var(--dyndo-card);border:1px solid var(--dyndo-border);border-radius:var(--r-card);padding:2rem 1.75rem;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:all var(--transition)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.plan--featured{background:var(--dyndo-lime-light);border-color:var(--dyndo-lime)}
@media (min-width:900px){.plan--featured{transform:scale(1.04)}.plan--featured:hover{transform:scale(1.04) translateY(-4px)}}
.plan__badge{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--dyndo-gold);color:var(--dyndo-dark-blue);font-family:var(--font-head);font-size:.78rem;font-weight:600;padding:.35rem 1rem;border-radius:var(--r-pill);box-shadow:var(--shadow)}
.plan__name{font-family:var(--font-head);font-size:1.2rem;color:var(--dyndo-dark-blue)}
.plan__price{display:flex;align-items:baseline;gap:.5rem;margin:.65rem 0 .4rem}
.plan__amount{font-family:var(--font-head);font-size:2.25rem;font-weight:700;color:var(--dyndo-dark-blue);letter-spacing:-.02em;white-space:nowrap}
.plan__amount--sm{font-size:1.6rem}
.plan__period{font-size:.82rem;color:var(--dyndo-text-secondary)}
.plan__hook{font-size:.92rem;color:var(--dyndo-text-secondary);min-height:2.7em}
.plan__incl{font-family:var(--font-head);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dyndo-text-secondary);margin:1.25rem 0 .75rem}
.plan__features{display:flex;flex-direction:column;gap:.7rem;margin:1.25rem 0 1.75rem;flex:1}
.plan__incl + .plan__features{margin-top:0}
.plan__features li{position:relative;padding-left:1.75rem;font-size:.92rem}
.plan__features li::before{content:"";position:absolute;left:0;top:.15em;width:1.15rem;height:1.15rem;background:var(--dyndo-lime);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23042C53' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.plan__micro{font-size:.78rem;color:var(--dyndo-text-secondary);text-align:center;margin-top:.75rem}

.guarantees{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem;margin-top:3rem}
.guarantees li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--dyndo-text-secondary)}
.guarantees li::before{content:"✓";position:absolute;left:0;color:var(--dyndo-lime);font-weight:800}

/* ---------- Cierre ---------- */
.closing{background:var(--dyndo-lime-light);border-radius:24px;padding:clamp(2rem,5vw,3.5rem);display:grid;gap:2.5rem;align-items:center}
@media (min-width:820px){.closing{grid-template-columns:1.1fr .9fr}}
.closing__title{font-size:clamp(1.75rem,1.3rem + 1.6vw,2rem);color:var(--dyndo-dark-blue)}
.closing__sub{font-size:1.05rem;color:var(--dyndo-dark-blue);opacity:.85;margin-top:.9rem;max-width:42ch}
.closing__points{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:1.5rem}
.closing__points li{position:relative;padding-left:1.6rem;font-size:.92rem;font-weight:500;color:var(--dyndo-dark-blue)}
.closing__points li::before{content:"✓";position:absolute;left:0;color:var(--dyndo-dark-blue);font-weight:800}
.closing__form{background:var(--dyndo-white);border-radius:var(--r-card);padding:1.75rem;box-shadow:var(--shadow)}
.closing__label{display:block;font-family:var(--font-head);font-size:.95rem;font-weight:600;margin-bottom:.75rem;color:var(--dyndo-dark-blue)}
.field{display:flex;flex-direction:column;gap:.7rem}
.field input{padding:.9rem 1rem;border:2px solid var(--dyndo-border);border-radius:12px;background:var(--dyndo-bg-light);font-size:.95rem;transition:border-color var(--transition)}
.field input:focus{outline:none;border-color:var(--dyndo-lime)}
.field input::placeholder{color:#9a9992}
.closing__note{font-size:.78rem;color:var(--dyndo-text-secondary);margin-top:.85rem;text-align:center}

/* ---------- Footer ---------- */
.footer{background:var(--dyndo-dark-blue);color:var(--dyndo-white);padding-block:3rem 1.75rem}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__tag{font-size:.92rem;color:rgba(255,255,255,.65);margin-top:.85rem;max-width:34ch}
.footer__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.footer__nav a{font-size:.92rem;color:rgba(255,255,255,.7);transition:color var(--transition)}
.footer__nav a:hover{color:var(--dyndo-lime)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.5rem;font-size:.82rem;color:rgba(255,255,255,.5)}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .hamburger{display:grid}
  .nav{position:fixed;inset:4.75rem 0 auto 0;flex-direction:column;align-items:stretch;gap:.25rem;background:var(--dyndo-dark-blue);padding:1rem 1.25rem 1.5rem;border-top:1px solid rgba(255,255,255,.12);transform:translateY(-120%);transition:transform var(--transition);box-shadow:0 20px 40px rgba(0,0,0,.3)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:.85rem 1rem;font-size:1.05rem}
  .nav .btn{display:inline-flex;text-align:center;justify-content:center}
  .header__actions .btn.always{display:none}
}
@media (min-width:821px){.hamburger{display:none}}