/* Circlay — landing. IndieLob, 2026.
   Misma estructura que la de Vuelto, pero en claro: fondos blancos y
   gris muy suave, con los colores de los círculos del ícono como acentos. */

:root{
  --bg:#ffffff;
  --soft:#f5f5f8;
  --tint:#f3f1fb;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --dim:#6e6e73;
  --dim-2:#86868b;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.14);
  --accent:#2f6fed;
  --warn:#e5484d;
  --ok:#1f9d67;
  /* los círculos del ícono */
  --c1:#3fae8c; --c2:#4d8ff0; --c3:#e9a23b; --c4:#f07a5a; --c5:#7b63f0; --c6:#d4608f;
  --radius:22px;
  --nav-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit}

/* ---------- barra superior ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1024px; margin:0 auto; height:100%;
  padding:0 22px;
  display:flex; align-items:center; gap:26px;
}
.nav-logo{
  display:flex; align-items:center; gap:9px;
  font-size:18px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; color:var(--ink); flex:0 0 auto;
}
.nav-logo img{width:26px; height:26px; border-radius:6.5px}
.nav-links{display:flex; gap:22px; flex:1 1 auto}
.nav-links a{
  font-size:12.5px; color:var(--ink-2); text-decoration:none;
  transition:color .2s var(--ease); white-space:nowrap;
}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex; align-items:center; gap:14px; flex:0 0 auto; margin-left:auto}

.lang-wrap{position:relative; display:flex; align-items:center}
.lang-wrap svg{position:absolute; left:8px; width:13px; height:13px; opacity:.6; pointer-events:none}
#lang{
  appearance:none; -webkit-appearance:none;
  background:rgba(0,0,0,.05); color:var(--ink);
  border:1px solid var(--line); border-radius:99px;
  font:inherit; font-size:12.5px; line-height:1;
  padding:6px 24px 6px 26px; cursor:pointer;
}
#lang:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lang-wrap::after{
  content:""; position:absolute; right:10px; width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid rgba(0,0,0,.55); pointer-events:none;
}

.nav-cta{
  font-size:12.5px; font-weight:500; text-decoration:none;
  background:var(--ink); color:#fff;
  padding:6px 14px; border-radius:99px; white-space:nowrap;
  transition:opacity .2s var(--ease);
}
.nav-cta:hover{opacity:.82}
@media (max-width:1000px){ .nav-links{gap:14px} }
@media (max-width:860px){ .nav-links{display:none} }
@media (max-width:420px){ .nav-logo span{display:none} }

/* ---------- estructura ---------- */
section{position:relative; overflow:hidden; scroll-margin-top:60px}
.wrap{max-width:1024px; margin:0 auto; padding:0 22px}
.narrow{max-width:760px; margin-left:auto; margin-right:auto}
.center{text-align:center}

.plain{background:var(--bg)}
.soft{background:var(--soft)}
.tint{background:linear-gradient(180deg,#f6f4fd 0%,#f1f6fb 100%)}

.pad{padding:110px 0}
.pad-sm{padding:70px 0}
@media (max-width:740px){ .pad{padding:76px 0} .pad-sm{padding:52px 0} }

/* ---------- tipografía ---------- */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--accent); margin:0 0 12px;
}
.c1{color:var(--c1)} .c2{color:var(--c2)} .c3{color:var(--c3)}
.c4{color:var(--c4)} .c5{color:var(--c5)} .c6{color:var(--c6)}
h1{
  font-size:clamp(40px,7.6vw,80px);
  line-height:1.04; letter-spacing:-.035em; font-weight:700;
  margin:0 auto 20px; max-width:900px;
}
h2{
  font-size:clamp(31px,5vw,52px);
  line-height:1.08; letter-spacing:-.03em; font-weight:700;
  margin:0 0 18px;
}
.sub{
  font-size:clamp(18px,2.2vw,22px); line-height:1.42; letter-spacing:-.018em;
  color:var(--dim); margin:0 auto 30px; max-width:680px;
}
.center h2 + .sub{margin-top:22px}
.body{font-size:17.5px; line-height:1.55; color:var(--dim); margin:0 0 16px}
.tiny{font-size:12.5px; line-height:1.5; color:var(--dim-2)}
.tiny a{color:var(--accent); text-decoration:none}
.tiny a:hover{text-decoration:underline}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:16px; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; padding:13px 26px; border-radius:99px;
  transition:transform .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{opacity:.9; transform:translateY(-1px)}
.btn-primary{background:var(--ink); color:#fff; box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.btn-ghost{border:1px solid var(--line-2); color:var(--ink); background:rgba(255,255,255,.6)}
.btn svg{width:17px; height:17px}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px}

/* ---------- marco del iPhone ---------- */
.iphone{
  position:relative; width:100%; max-width:var(--w,300px); margin:0 auto;
  aspect-ratio:1320/2868;
  background:linear-gradient(160deg,#d9dade,#a9abb1 45%,#d4d5da);
  border-radius:13.5%/6.2%;
  padding:1.1%;
  box-shadow:0 44px 80px -36px rgba(30,30,60,.45), 0 0 0 .5px rgba(0,0,0,.22);
}
.iphone-screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:12.6%/5.8%; background:#f2f2f5;
}
.iphone-screen img{width:100%; height:100%; object-fit:cover; object-position:top center}
.iphone::after{ /* isla dinámica */
  content:""; position:absolute; top:2.1%; left:50%; transform:translateX(-50%);
  width:29%; height:2.5%; background:#000; border-radius:99px; z-index:2;
}

/* ---------- héroe ---------- */
.hero{padding:70px 0 0; text-align:center; background:linear-gradient(180deg,#fbfbfd 0%,#ffffff 70%)}
.blobs{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.blobs i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55}
.blobs .b1{width:420px; height:420px; background:#ffd6c7; top:-120px; left:8%}
.blobs .b2{width:380px; height:380px; background:#d9d2ff; top:40px; right:4%}
.blobs .b3{width:340px; height:340px; background:#c9ecdf; top:520px; left:-80px}
.blobs .b4{width:320px; height:320px; background:#cfe0ff; top:640px; right:-60px}
.hero .wrap{position:relative}
.hero-logo{
  width:clamp(96px,12vw,128px); height:auto; margin:0 auto 24px;
  border-radius:22.4%;
  box-shadow:0 22px 44px -20px rgba(20,20,50,.55);
}
.hero-device{margin-top:54px; position:relative}
.hero-device .iphone{--w:318px}
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:170px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}

/* ---------- cifras ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center}
.stat .n{
  font-size:clamp(38px,5vw,56px); font-weight:700; letter-spacing:-.035em;
  line-height:1; margin:0 0 8px;
}
.stat .l{font-size:14px; color:var(--dim); line-height:1.35; margin:0 auto; max-width:170px}
@media (max-width:740px){ .stats{grid-template-columns:repeat(2,1fr); gap:34px 18px} }

/* ---------- filas de función ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.feature.flip .feature-text{order:2}
@media (max-width:860px){
  .feature{grid-template-columns:1fr; gap:44px; text-align:center}
  .feature.flip .feature-text{order:0}
}
.feature .iphone{--w:290px}
.checks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.checks li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16px; line-height:1.45; color:var(--ink-2);
}
.checks li::before{
  content:""; flex:0 0 auto; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") center/11px no-repeat;
}
.checks li:nth-child(1)::before{background-color:var(--c1)}
.checks li:nth-child(2)::before{background-color:var(--c2)}
.checks li:nth-child(3)::before{background-color:var(--c5)}
@media (max-width:860px){ .checks{max-width:430px; margin-left:auto; margin-right:auto; text-align:left} }

/* ---------- varios iPhone juntos ---------- */
.phones{display:grid; gap:34px; margin:48px auto 0}
.phones.two{grid-template-columns:1fr 1fr; max-width:680px}
.phones.two .iphone{--w:300px}
.phones.three{grid-template-columns:repeat(3,1fr); max-width:980px}
.phones.three .iphone{--w:270px}
.phones figure{margin:0}
.phones figcaption{margin:22px auto 0; max-width:260px; display:grid; gap:4px}
.phones figcaption b{font-size:17px; font-weight:600; letter-spacing:-.015em}
.phones figcaption span{font-size:14.5px; color:var(--dim); line-height:1.4}
@media (max-width:820px){
  .phones.three{grid-template-columns:1fr; max-width:340px; gap:50px}
}
@media (max-width:560px){
  .phones.two{gap:14px}
}

/* ---------- más funciones ---------- */
.cats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:12px; margin-top:44px; text-align:left;
}
.cat{
  background:var(--soft); border-radius:18px; padding:22px 20px;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  border:1px solid var(--line);
}
.cat svg{width:30px; height:30px; padding:6px; border-radius:9px; stroke:#fff; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; background:var(--c2)}
.cat:nth-child(6n+1) svg{background:var(--c4)}
.cat:nth-child(6n+2) svg{background:var(--c3)}
.cat:nth-child(6n+3) svg{background:var(--c1)}
.cat:nth-child(6n+4) svg{background:var(--c2)}
.cat:nth-child(6n+5) svg{background:var(--c5)}
.cat:nth-child(6n+6) svg{background:var(--c6)}
.cat b{font-size:15.5px; font-weight:600; letter-spacing:-.015em}
.cat span{font-size:13.5px; color:var(--dim); line-height:1.38}

/* ---------- privacidad ---------- */
.priv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; text-align:left}
@media (max-width:860px){ .priv-grid{grid-template-columns:1fr} }
.priv{
  background:rgba(255,255,255,.85); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 26px;
  box-shadow:0 18px 40px -30px rgba(40,40,90,.35);
}
.priv .k{font-size:16px; font-weight:600; margin:0 0 8px; letter-spacing:-.015em}
.priv .v{font-size:14.5px; color:var(--dim); margin:0; line-height:1.5}
.priv .tag{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 10px; border-radius:99px; margin-bottom:14px;
  background:rgba(63,174,140,.13); color:#1f7f62;
}
.priv:nth-child(2) .tag{background:rgba(77,143,240,.13); color:#2a62c4}
.priv:nth-child(3) .tag{background:rgba(123,99,240,.13); color:#5a44c9}

/* ---------- precios ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; align-items:stretch; text-align:left}
@media (max-width:740px){ .plans{grid-template-columns:1fr} }
.plan{
  border-radius:var(--radius); padding:32px 30px;
  border:1px solid var(--line); background:var(--soft);
}
.plan.pro{
  position:relative; background:#fff; border:1.5px solid transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(120deg,var(--c1),var(--c2),var(--c5),var(--c6),var(--c4),var(--c3));
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:0 30px 60px -36px rgba(60,50,140,.45);
}
.plan .pname{font-size:13px; font-weight:600; letter-spacing:.02em; margin:0 0 6px; color:var(--dim)}
.plan.pro .pname{color:var(--c5)}
.plan .price{font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:0 0 6px}
.plan .pnote{font-size:13.5px; color:var(--dim-2); margin:0 0 22px}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.plan li{font-size:15px; line-height:1.45; display:flex; gap:10px; color:var(--ink-2)}
.plan li::before{content:"—"; color:#c7c7cc; flex:0 0 auto}
.plan.pro li::before{color:var(--c5)}

/* ---------- soporte ---------- */
.support{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
@media (max-width:900px){ .support{grid-template-columns:1fr; gap:40px} }
.support-alt{margin:18px 0 0}

.support-form{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 28px;
  display:grid; gap:17px;
  box-shadow:0 24px 50px -36px rgba(30,30,70,.4);
}
@media (max-width:520px){ .support-form{padding:24px 20px} }

.field{display:grid; gap:7px}
.field label{font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--soft);
  border:1px solid var(--line-2); border-radius:13px;
  padding:12px 14px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{color:#a1a1a6}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); background:#fff;
}
.field [aria-invalid="true"]{border-color:var(--warn)}
.field textarea{min-height:132px; line-height:1.5; resize:vertical}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231d1d1f' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:10px;
}

.consent{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  font-size:14px; line-height:1.45; color:var(--dim);
}
.consent input{
  flex:0 0 auto; width:18px; height:18px; margin:2px 0 0;
  accent-color:var(--accent); cursor:pointer;
}

.form-foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.form-foot .btn{border:0; cursor:pointer; font-family:inherit}
.form-foot .btn[disabled]{opacity:.5; pointer-events:none}
.form-status{flex:1 1 210px; margin:0; font-size:14px; line-height:1.4; color:var(--dim)}
.form-status.ok{color:var(--ok)}
.form-status.bad{color:var(--warn)}
.form-status:empty{display:none}
.form-note{margin:0}
.form-note a{color:var(--dim)}

/* el campo trampa: fuera de la vista y fuera del tabulador */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- pie ---------- */
.footer{background:var(--soft); padding:56px 0 40px; border-top:1px solid var(--line)}
.foot-top{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:34px}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.foot-links a{font-size:13.5px; color:var(--ink-2); text-decoration:none}
.foot-links a:hover{color:var(--ink); text-decoration:underline}
.foot-note{font-size:12px; color:var(--dim-2); line-height:1.6; max-width:680px; margin:0}
.foot-brand{margin:0 0 22px}
.foot-brand img{height:22px; width:auto; opacity:.9}

/* ---------- aparición al hacer scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }

@media print{ .nav, .blobs{display:none} .reveal{opacity:1; transform:none} }