:root{
  --bg:#f6f7fb;
  --panel:#fff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.65);
  --accent:#2563eb;
  --radius:18px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* GENERALES */
section{
  padding:8px 20px;
  max-width:1100px;
  margin:auto;
}

h1,h2{
  font-weight:900;
  letter-spacing:-.02em;
}

p{
  color:var(--muted);
  font-size:15px;
}

/* HERO */
.hero{
  padding-top:5px;
  display: grid;
}

.hero-image{
  display: flex;
  justify-content: center;
}

.hero-title{
  font-size:32px;
  line-height:1.15;
}

.hero-title span{
  display:block;
  color:var(--accent);
}

.hero-sub{
  margin:14px 0 18px;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.badge{
  background:#e5edff;
  color:#1e3a8a;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
}

/* IMÁGENES */
.img-card{
  background:#f9fafb; /* 🔑 leve contraste con fondo */
  border-radius:var(--radius);
  padding:10px;       /* 🔑 marco visual */
  box-shadow:
    0 8px 18px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(15,23,42,.06); /* 🔑 borde elegante */
  overflow:hidden;
}

.img-card img{
  width:100%;
  display:block;
  border-radius:12px;
  background:#fff;
}

.hero-card{
  max-width:360px;
  margin:24px auto 0;
  padding:12px;
  background:#ffffff;
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(15,23,42,.08);
}

/* BLOQUES */
.block{
  display:grid;
  gap:24px;
}

.block.reverse{
  direction:rtl;
}
.block.reverse>*{direction:ltr}

.image-grid{
  display:grid;
  gap:20px;
}

/* BENEFITS */
.benefits{
  padding-left:0;
  list-style:none;
}
.benefits li{
  margin-bottom:6px;
  font-weight:600;
}

/* CLOSING */
.closing{
  text-align:center;
  background:#020617;
  color:#fff;
  border-radius:var(--radius);
}
.closing p{
  color:rgba(255,255,255,.75);
}
.closing-points{
  display:grid;
  gap:10px;
  margin-top:20px;
  font-weight:700;
}

/* SUMMARY */
.summary{
  text-align:center;
}
.summary-grid{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.summary-item{
  background:var(--panel);
  padding:16px;
  border-radius:var(--radius);
  font-weight:700;
}

/* FOOTER */
.footer{
  background:#020617;
  color:#e5e7eb;
  text-align:center;
  padding:48px 20px;
}
.footer-cta{
  display:inline-block;
  margin:16px 0;
  padding:12px 20px;
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
}
.footer-copy{
  display:block;
  margin-top:20px;
  font-size:13px;
  opacity:.7;
}

/* DESKTOP */
@media(min-width:860px){
  .block{
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .image-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* =========================
   MOBILE REFINEMENT
========================= */
@media (max-width: 859px){

  .image-grid{
    gap:18px;
  }

  .img-card{
    padding:12px;
  }

}

/* =========================
   SCROLL REVEAL (ALADDIN)
========================= */

.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Micro-delay por elementos internos */
.reveal .block-text{ transition-delay:.05s; }
.reveal .image-grid{ transition-delay:.15s; }
.reveal .img-card{
  transition-delay:.08s;
}

.reveal .img-card{
  transition-delay:.16s;
}

.form-success{
  background:rgba(34,197,94,.15);
  color:#22c55e;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  margin-bottom:16px;
}

/* =========================
   CONTACT FORM (FOOTER)
========================= */

.contact-form{
  max-width: 720px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Inputs base */
.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
  color: #0f172a;
  box-shadow:
    0 6px 14px rgba(0,0,0,.15),
    inset 0 0 0 1px rgba(15,23,42,.08);
}

/* Placeholder */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: rgba(15,23,42,.45);
  font-weight: 500;
}

/* Textarea ocupa ancho completo */
.contact-form textarea{
  grid-column: 1 / -1;
  resize: none;
  min-height: 120px;
}

/* Botón */
.contact-form button{
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 8px;
}

/* Enfoque */
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.35),
    0 10px 20px rgba(0,0,0,.18);
}

/* MOBILE */
@media (max-width: 640px){
  .contact-form{
    grid-template-columns: 1fr;
  }

  .contact-form button{
    width: 100%;
    max-width: 320px;
  }
}

/* =========================
   HEADER
========================= */

.site-header{
  background:
    linear-gradient(
      180deg,
      rgba(37,99,235,.08),
      rgba(255,255,255,0)
    );
  padding: 20px;
}

.header-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.brand-logo{
  height:56px;              /* 🔑 más grande */
  width:auto;
  flex-shrink:0;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.brand-name{
  font-weight:900;
  font-size:22px;
  letter-spacing:-.02em;
}

.brand-tagline{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}

.brand-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:#16a34a;
}

.status-dot{
  width:8px;
  height:8px;
  background:#22c55e;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(34,197,94,.25);
}

.header-cta{
  padding:10px 18px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(37,99,235,.35);
}

/* Mobile */
@media (max-width: 640px){
  .brand-logo{
    height:48px; /* 🔑 sigue siendo protagonista */
  }

  .brand-name{
    font-size:20px;
  }

  .brand-tagline{
    font-size:12px;
  }

  .header-cta{
    display:none; /* 🔑 no satura mobile */
  }

  .mobile-cta{
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 1000;
  }

  .mobile-cta a{
    display:block;
    text-align:center;
    padding:14px 18px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(37,99,235,.45);
  }
}

@media (min-width: 860px){
  .hero{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }

  .hero-image{
    justify-content: flex-end;
  }
}

/* QR EXPERIENCE HIGHLIGHT */
.qr-experience .img-card{
  background: linear-gradient(
    180deg,
    rgba(37,99,235,.06),
    #f9fafb
  );
}

.qr-experience .img-card img{
  background:#fff;
}

.qr-experience{
  position: relative;
}

.qr-experience::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:24px;
  background:rgba(37,99,235,.04);
  z-index:-1;
}