:root{
  --bg:#0a1622; --bg-soft:#0c1a29; --card:#0f2231; --card-2:#0d1c29;
  --text:#eaf2f9; --muted:#b3c2cf; --brand:#26e0a3; --brand-2:#5db0ff; --accent:#ffd166;
}
*{box-sizing:border-box}
html,body{height:100%} html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,209,102,.22), transparent 40%),
    radial-gradient(900px 500px at 90% -20%, rgba(93,176,255,.13), transparent 45%),
    linear-gradient(180deg,#0a1622 0%,#06111a 100%);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px;overflow:hidden}

/* Nav */
.nav{position:sticky;top:0;z-index:10;backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg, rgba(10,22,34,.9), rgba(10,22,34,.6));
  border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center} .brand b{font-weight:800;letter-spacing:.3px}

/* Buttons */
.lang-toggle,.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:0;cursor:pointer}
.lang-toggle{border:1px solid rgba(255,255,255,.15);background:var(--card);color:var(--text)}
.btn{background:linear-gradient(135deg, var(--brand), #17c690);color:#052015;font-weight:800;letter-spacing:.3px;box-shadow:0 8px 30px rgba(38,224,163,.25)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.15)}
.btn.small{padding:8px 10px;font-size:13px}

/* Hero */
.hero{padding:80px 0 40px}
.hero h1{font-weight:800;font-size:42px;line-height:1.05;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 24px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}

/* Cards & layout */
.card{
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.badge{display:inline-flex;gap:8px;align-items:center;background:#0b1b29;border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:999px;color:var(--muted);font-weight:600}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.section{padding:56px 0}
.section h2{font-size:28px;margin:0 0 14px}
.section p.lead{color:var(--muted);margin:0 0 22px}
.hr{height:1px;background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.14), rgba(255,255,255,0));margin:26px 0}

/* KPIs */
.kpi{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.kpi .num{font-weight:800;font-size:22px}

/* Phone mock */
.phone{aspect-ratio:9/19;border-radius:28px;border:10px solid #0d1620;background:#09131c;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.phone .sun{position:absolute;top:-60px;left:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 50% 50%, var(--accent) 0%, #ffce66 30%, rgba(255,209,102,.0) 70%);filter:blur(2px);opacity:.85}
.phone .card-mini{position:absolute;left:16px;right:16px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.phone .card-mini:nth-child(2){top:90px}.phone .card-mini:nth-child(3){top:150px}.phone .card-mini:nth-child(4){top:210px}

/* Forms */
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border-radius:12px;background:#0b1b29;border:1px solid rgba(255,255,255,.08);color:var(--text)}
.form label{font-size:14px;color:var(--muted)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Footer */
footer{padding:32px 0;color:var(--muted)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
ul.clean{list-style:none;padding:0;margin:0;display:grid;gap:10px}

/* --- FIX imágenes & grillas responsivas --- */
img, video{max-width:100%;height:auto;display:block}

/* Marcos uniformes con proporción controlada */
.shots{display:grid;gap:16px}
.shots.cols-3{grid-template-columns:repeat(3,1fr)}
.shots.cols-2{grid-template-columns:repeat(2,1fr)}
.shot{
  border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  aspect-ratio:16/9;
}
.shot > img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Cómo funciona (3 pasos) */
.how-steps{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.how-steps .card{display:flex;flex-direction:column}
.how-steps .frame{
  margin-top:10px;border-radius:14px;overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)
}
.how-steps .frame > img{width:100%;height:100%;object-fit:cover}

/* Tables / FAQ */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{text-align:left;color:var(--muted);font-weight:600}
.table td{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:14px;border-radius:10px}
.faq details{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:14px;border-radius:12px}
.faq summary{cursor:pointer;font-weight:700}

/* Cookie bar */
.cookie{position:fixed;bottom:16px;right:16px;left:16px;z-index:20;display:none}
.cookie.show{display:block}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .shots.cols-3, .how-steps, .shots.cols-2 {grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}


/* --- v3: frames de "Cómo funciona" más estrechas tipo teléfono --- */
.how-steps .frame{
  aspect-ratio: 9 / 16;     /* retrato, no landscape */
  max-width: 420px;         /* NO se hace más ancho que esto */
  margin-inline: auto;      /* centrado en móvil */
}
.how-steps .frame > img{
  object-fit: cover;
}

/* Seguridad extra: evita que cualquier imagen rompa el viewport en Safari iOS */
html, body { overflow-x: hidden; }
section, .container, .card, .frame, .shot { max-width: 100%; }
img { max-width: 100vw; }
@supports not (aspect-ratio: 1 / 1) {
  /* fallback viejos navegadores: altura auto y ancho 100% */
  .how-steps .frame { height: auto; }
  .how-steps .frame > img { height: auto; }
}


/* === v3.2: Mejor contraste entre títulos y descripciones dentro de tarjetas === */
.grid .card h3, .card h3 {
  color: #f5f9ff;           /* más claro para el título */
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 6px;
}
.grid .card p, .card p {
  color: #9fb1bf;           /* descripción más fría y tenue */
  font-weight: 500;
}

/* Sutileza visual: barrita superior en tarjetas para separar bloques */
.card::before{
  content:"";
  display:block;
  height:3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(38,224,163,.9), rgba(93,176,255,.7));
  opacity:.35;
  margin: -4px 0 14px;
}

/* Elevar contraste de contornos y sombra para separar del fondo */
.card{
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}

/* Ajuste fino de los "feature cards" para móvil (espaciado cómodo) */
@media (max-width: 900px){
  .grid .card{padding:18px}
  .grid .card h3{font-size:20px}
  .grid .card p{font-size:15px;line-height:1.45}
}

/* Tipografía más nítida en iOS */
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


/* ===== v3.3: Bloque destacado Modo Pareja (diferente al resto) ===== */
.section.couple {
  padding: 64px 0;
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(93,176,255,.18), transparent 45%),
    radial-gradient(900px 500px at 95% 0%, rgba(196,113,237,.18), transparent 45%),
    linear-gradient(180deg, #0b1220 0%, #0a1020 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.couple .wrap{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;
}
.couple h2{font-size:32px;margin:0 0 10px}
.couple p.lead{font-size:18px;color:#cfe0ff}
.couple .points{display:grid;gap:12px;margin-top:12px}
.couple .point{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  padding:12px 14px; border-radius:14px;
}
.couple .point .dot{
  width:12px;height:12px;border-radius:999px;
  background:linear-gradient(135deg, #26e0a3, #5db0ff);
  margin-top:7px; flex:0 0 auto;
}
.couple .note{margin-top:14px;color:#a8bbd0}
.couple .cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.couple .frame{
  margin:auto;
  aspect-ratio: 9 / 16;
  max-width: 420px;
  border-radius: 18px;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.couple .frame img{width:100%;height:100%;object-fit:cover}

/* Responsive */
@media (max-width: 900px){
  .couple .wrap{grid-template-columns:1fr}
  .couple h2{font-size:26px}
}


/* ==== v3.5 Pricing cards ==== */
.pricing{padding:64px 0}
.pricing .grid{grid-template-columns: repeat(2,1fr)}
.price-card{
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.price-card.highlight{
  background: linear-gradient(180deg, rgba(38,224,163,.10), rgba(38,224,163,.04));
  border-color: rgba(38,224,163,.35);
}
.price-card .badge{
  position:absolute; top:-14px; right:18px;
  background: linear-gradient(135deg, var(--brand), #17c690);
  color:#062219; padding:6px 10px; border-radius:999px; font-weight:800; border:0;
}
.price{display:flex;align-items:flex-end;gap:6px;margin:6px 0 10px}
.price .cur{opacity:.8}
.price .num{font-size:44px;font-weight:900;line-height:1}
.price .per{color:var(--muted)}
.price-feat{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.price-feat li{display:flex;gap:10px;align-items:flex-start}
.price-feat li::before{content:"✓"; color:var(--brand); font-weight:900; margin-top:-1px}
.price-cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.small-note{color:#9fb1bf; margin-top:8px}
@media (max-width: 900px){
  .pricing .grid{grid-template-columns:1fr}
}


/* === v3.6p2: Mobile hamburger (non-invasive) & visual polish === */
.hamb{
  display:none; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px; cursor:pointer;
}
.hamb span{display:block;width:22px;height:2px;background:#eaf2f9;margin:5px 0;border-radius:2px;transition:transform .2s, opacity .2s}
.nav-links{display:flex;gap:16px;align-items:center}
.nav-overlay{position:fixed;inset:0;display:none;background:rgba(3,8,12,.6);backdrop-filter:blur(3px);z-index:9}
.nav-drawer{
  position:fixed;top:0;right:0;width:85vw;max-width:360px;height:100vh;
  background:linear-gradient(180deg,#0b1b29,#0a1622);
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);transition:transform .25s ease;z-index:10;
  display:flex;flex-direction:column;padding:20px
}
.nav-drawer a{padding:14px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.06);margin-bottom:10px}
.nav-open .nav-overlay{display:block}
.nav-open .nav-drawer{transform:translateX(0)}
.nav-open .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .hamb span:nth-child(2){opacity:0}
.nav-open .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width: 900px){
  .nav .nav-links{display:none}
  .hamb{display:inline-block}
}

/* Visual tweaks: títulos y descripciones */
.section h2{color:#f5f9ff;font-weight:900;letter-spacing:.2px}
.section p.lead{color:#9fb1bf}

/* A11y focus */
a:focus, button:focus{outline:2px solid var(--brand, #26e0a3); outline-offset:3px}


/* === v3.6p5: Phone dashboard mock (hero) === */
.phone.dash{
  position: relative; background:#0a1520; border:10px solid #0e1d2a; border-radius:28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow:hidden; aspect-ratio: 9/19;
}
.phone.dash .status{position:absolute; top:14px; left:16px; right:16px; height:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); border-radius:8px;
  border:1px solid rgba(255,255,255,.06);}
.phone.dash .status .bar{height:100%; width:62%; background:linear-gradient(90deg, #5db0ff, #26e0a3);
  border-radius:8px;}

.phone.dash .tiles{position:absolute; top:42px; left:14px; right:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.phone.dash .tile{border-radius:16px; padding:12px; color:#eaf2f9; border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(93,176,255,.22),rgba(93,176,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06)}
.phone.dash .tile.orange{background:linear-gradient(180deg,rgba(255,173,84,.28),rgba(255,173,84,.10))}
.phone.dash .tile.teal{background:linear-gradient(180deg,rgba(38,224,163,.22),rgba(38,224,163,.08))}
.phone.dash .tile .k{opacity:.9; font-size:12px}
.phone.dash .tile .v{font-weight:800; font-size:18px}

.phone.dash .promo{position:absolute; left:14px; right:14px; top:140px; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  display:flex; gap:12px; align-items:center}
.phone.dash .promo .dot{width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#5db0ff,#26e0a3)}

.phone.dash .list{position:absolute; left:14px; right:14px; bottom:94px; top:210px; display:grid; gap:10px; overflow:hidden}
.phone.dash .item{border-radius:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:space-between}
.phone.dash .item .left{display:flex; gap:10px; align-items:center}
.phone.dash .badge{font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(93,176,255,.2); border:1px solid rgba(93,176,255,.45)}

.phone.dash .fab{position:absolute; left:50%; transform:translateX(-50%); bottom:48px; width:56px; height:56px; border-radius:999px;
  background:linear-gradient(135deg,#5db0ff,#26e0a3); display:grid; place-items:center; color:#062219; font-size:32px; font-weight:900;
  box-shadow:0 10px 30px rgba(38,224,163,.35)}

.phone.dash .botnav{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:space-around; padding:8px 14px}
.phone.dash .icon{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08)}