:root{
  --dark:#0E3B2E;
  --beige:#F7F2EA;
  --white:#FFFFFF;
  --gray:#F4F4F4;
  --green:#1F6A4A;
}
*{scroll-behavior:smooth;}
body{font-family:'Inter', sans-serif; background:var(--beige); color:var(--dark);}
h1,h2,h3,h4,.font-heading,button,nav a,.logo{font-family:'Poppins', sans-serif;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease;}
.reveal-scale.visible{opacity:1; transform:scale(1);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{transition:none; opacity:1; transform:none;}
}

/* header */
.header-blur{backdrop-filter: blur(14px); background: rgba(247,242,234,0.82);}

/* buttons */
.btn-primary{
  background:var(--dark); color:var(--beige);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 8px 20px -8px rgba(14,59,46,0.45);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(14,59,46,0.55); background:#0b2f24;}
.btn-secondary{
  border:1.5px solid var(--dark); color:var(--dark); background:transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.btn-secondary:hover{ background:var(--dark); color:var(--beige); transform: translateY(-2px); }

/* cards */
.card-hover{ transition: transform .35s ease, box-shadow .35s ease; }
.card-hover:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(14,59,46,0.25); }

/* phone mockup */
.phone{
  width: 270px; height: 560px; border-radius: 42px;
  background: #0b241c;
  box-shadow: 0 40px 80px -30px rgba(14,59,46,0.55), 0 0 0 10px #0b241c, 0 0 0 11px rgba(255,255,255,0.06);
  position: relative; overflow:hidden;
}
.phone-screen{
  position:absolute; inset:8px; border-radius:34px; background:var(--white); overflow:hidden;
}

/* plan badge */
.badge-popular{
  background: var(--beige); color:var(--dark);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.25);
}

/* dotted divider */
.dots-bg{
  background-image: radial-gradient(rgba(14,59,46,0.15) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}

input, textarea{ font-family:'Inter', sans-serif; }
input:focus, textarea:focus{ outline: 2px solid var(--green); outline-offset: 2px; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }

.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--dark);
  transition: width .25s ease;
}
.nav-link:hover::after{ width:100%; }

.leaf-decor{ pointer-events:none; user-select:none; }

/* ===== Marcos de dispositivo: capturas reales del producto ===== */
.browser-frame{
  border-radius: 16px; background:var(--white);
  box-shadow: 0 40px 80px -30px rgba(14,59,46,0.35), 0 1px 0 rgba(14,59,46,0.06);
  overflow:hidden;
}
.browser-frame-bar{
  display:flex; align-items:center; gap:6px;
  padding:11px 14px; background:#EDE6D8; border-bottom:1px solid rgba(14,59,46,0.06);
}
.browser-frame-dot{ width:9px; height:9px; border-radius:50%; background:rgba(14,59,46,0.18); }
.screenshot-slot{
  aspect-ratio: 2/1; width:100%; display:block; object-fit:cover; object-position: top;
  background: linear-gradient(135deg, var(--gray), #EDE6D8);
}
.phone-sm{ width:230px; height:478px; border-radius:38px; }
.phone-sm .phone-screen{ inset:7px; border-radius:31px; }
.phone-sm .phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }

/* ===== FAQ (acordeón <details>/<summary>) ===== */
summary{ cursor:pointer; }
summary::-webkit-details-marker{ display:none; }
summary::marker{ content:''; }
details > summary svg{ transition: transform .25s ease; }
details[open] > summary svg{ transform: rotate(45deg); }
details{ transition: background-color .25s ease; }

/* ===== Skip link (accesibilidad / SEO técnico) ===== */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--dark); color:var(--beige);
  padding:.75rem 1.25rem; border-radius:0 0 .75rem 0;
  font-weight:600; font-size:.875rem;
}
.skip-link:focus{ left:0; }

/* ===== Imagen responsiva por defecto ===== */
img{ max-width:100%; height:auto; }