:root{
  --bg: #f6fbff;
  --bg2:#eef6ff;
  --card:#ffffff;
  --card2:#f3f9ff;
  --text:#0b1633;
  --muted:#4a5d86;
  --line: rgba(11,22,51,.10);
  --accent:#5aa6ff;
  --accent2:#7dd7c6;
  --shadow: 0 18px 45px rgba(11,22,51,.12);
  --radius: 20px;
  --max: 1120px;
  --anchor-offset: 92px;
}

*{box-sizing:border-box}
html,body{height:100%}
section[id]{ scroll-margin-top: var(--anchor-offset); }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  color:#0b1633cf;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(90,166,255,.16), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(125,215,198,.14), transparent 55%),
    radial-gradient(700px 500px at 50% 85%, rgba(90,166,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.55;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

/* ✅ Hacemos esta sección más ancha para que 7 columnas no queden "angostas" */
#arcangeles .container{
  max-width: 1320px;
}

.skip{
  position:absolute; left:-999px; top:0; padding:10px 12px;
  background:#fff; color:#000; border-radius:10px; z-index:9999;
}
.skip:focus{left:12px; top:12px}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246,251,255,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand strong{font-size:1.06rem; letter-spacing:.2px}
.brand span{font-size:.86rem; color:var(--muted); margin-top:2px}

.nav-links{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav-links a{
  text-decoration:none; font-size:.92rem; color:var(--muted);
  padding:8px 10px; border-radius:12px;
}
.nav-links a:hover{background: rgba(11,22,51,.05); color: var(--text)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(90,166,255,.28);
  background: #32BA46;
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(11,22,51,.10);
  font-weight:650;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.btn.secondary{
  background: #ffffff70;
  border: 1px solid rgba(11,22,51,.10);
  box-shadow:none;
  color: #0b1633cf;
}

/* Hero */
.hero{
  position:relative;
  min-height: calc(100vh - 62px);
  display:grid;
  align-items:end;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;
  inset:-30px;
  background:
    linear-gradient(to top, rgba(246,251,255,.92) 1%, rgba(246,251,255,.70) 1%, rgba(246,251,255,.30) 1%),
    url("images/hero-angel.jpg") center/cover no-repeat;
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform;
  filter: saturate(1.03) contrast(1.03);
}
.hero-inner{position:relative; padding: 52px 10 42px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:22px;
  align-items:end;
}
.kicker{margin-bottom:10px}
.kicker-pill{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(11,22,51,.10);
  box-shadow: 0 10px 24px rgba(11,22,51,.08);
  color: rgba(11,22,51,.78);
  font-weight:650;
  font-size:.88rem;
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(1.85rem, 3.8vw, 3.2rem);
  line-height:1.08;
  letter-spacing:-.6px;
  text-wrap:balance;
}
.hero p{
  margin:0;
  color: #0b1633cf;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 62ch;
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.small-note{margin-top:10px; font-size:.86rem; color: rgba(11,22,51,.72)}
.hero-card{
  background: rgba(255,255,255,.82);
  border:1px solid rgba(11,22,51,.10);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.hero-card-title{display:flex; flex-direction:column; gap:2px; margin-bottom:12px}
.hero-card-title span{color:var(--muted); font-size:.92rem}
.hero-bullets{margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:.96rem}
.hero-bullets li{display:flex; gap:10px; align-items:flex-start; color: var(--muted)}
.dot{
  width:10px; height:10px; border-radius:50%;
  margin-top:7px;
  background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent));
  flex:0 0 auto;
  box-shadow: 0 0 16px rgba(90,166,255,.22);
}

/* Sections */
section{padding: 54px 0}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px}
.section-title h2{margin:0; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing:-.3px}
.section-title p{margin:0; color: var(--muted); max-width: 62ch; font-size: 1rem}
.section-actions{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(243,249,255,.92));
  border:1px solid rgba(11,22,51,.10);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 14px 38px rgba(11,22,51,.10);
}
.card-soft{background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,246,255,.92))}
.card h3{margin:0 0 8px; font-size:1.15rem}
.card p{margin:0; color:var(--muted)}

.pillrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.pill{
  font-size:.86rem;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(11,22,51,.10);
  background: rgba(11,22,51,.04);
  color: rgba(11,22,51,.82);
  white-space:nowrap;
}

/* ✅ Archangels (7 columnas + padding + no cortar texto + imagen top y más alta) */
.angel-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7 columnas en desktop */
  gap:16px;
  align-items:stretch;
}

.angel{
  overflow:hidden;
  border-radius: 18px;
  border:1px solid rgba(11,22,51,.10);
  background: rgba(255,255,255,.70);
  display:flex;
  flex-direction:column;
  box-shadow: 0 14px 30px rgba(11,22,51,.08);
}

.angel img{
  width:100%;
  height:250px;                 /* ✅ alto solicitado */
  object-fit:cover;
  object-position: top center;  /* ✅ recorta desde abajo (nunca desde arriba) */
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

.angel .content{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
}

.angel .name{
  display:flex;
  flex-direction:column;   /* tag debajo del nombre */
  align-items:flex-start;
  gap:8px;
}

.angel .name strong{
  font-size:1.02rem;
  line-height:1.15;
}

.tag{
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(90,166,255,.22);
  color: rgba(11,22,51,.72);
  background: rgba(90,166,255,.12);
  display:inline-flex;
}

.angel p{
  margin:0;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.45;
  overflow-wrap:anywhere;

  /* ✅ padding extra solo al texto descriptivo */
  padding: 6px 6px 10px;

  /* ✅ permite "más alto" si hace falta y evita sensación de texto cortado */
  min-height: 4.6em;
}

/* Responsive: bajamos columnas para que no queden demasiado angostas */
@media (max-width: 1280px){
  .angel-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  .angel-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .nav-links a{display:none}
  .angel-grid{ grid-template-columns: 1fr; }
}

/* Payments */
.pay{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px}
.pay .method{
  flex: 1 1 220px;
  display:flex; align-items:center; gap:12px;
  padding:14px;
  border-radius: 18px;
  border:1px solid rgba(11,22,51,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 26px rgba(11,22,51,.07);
}
.icon{
  width:40px; height:40px;
  border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(125,215,198,.35), rgba(90,166,255,.18));
  border:1px solid rgba(90,166,255,.20);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.method strong{display:block}
.method span{display:block; color:var(--muted); font-size:.92rem}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding: 28px 0 88px;
  color: rgba(11,22,51,.70);
  font-size:.92rem;
  background: rgba(255,255,255,.35);
}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.footer-muted{margin-top:6px; color: var(--muted)}
.copyright{margin-top:14px; color: rgba(11,22,51,.55)}

/* ✅ WhatsApp floating: sombra al logo (no se corta) */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:999px;
  text-decoration:none;
  background: transparent;
  border:none;
  overflow: visible; /* importante */
}
.wa-float:focus-visible{
  outline: 3px solid rgba(90,166,255,.35);
  outline-offset: 4px;
}
.wa-logo{
  width:64px;
  height:64px;
  /* border-radius:999px;*/
  display:block;
  filter: drop-shadow(0 14px 24px rgba(11,22,51,.22));
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hero-bg{transform:none !important}
}


/* =========================
   Mobile: textos más grandes
   ========================= */
html{
  -webkit-text-size-adjust: 100%; /* evita que iOS reduzca texto */
  text-size-adjust: 100%;
}

/* En teléfonos: subimos la base */
@media (max-width: 520px){
  body{
    font-size: 18px;     /* antes dependía del default del navegador */
    line-height: 1.65;   /* un poco más cómodo */
  }

  /* Header / marca */
  .brand strong{ font-size: 1.18rem; }
  .brand span{ font-size: 1rem; }

  /* HERO */
  .hero h1{
    font-size: 2.05rem;   /* fuerza un mínimo más grande que el clamp actual */
    line-height: 1.1;
  }
  .hero p{
    font-size: 1.3rem;
  }

  /* Bullets del hero */
  .hero-bullets{ font-size: 1.03rem; }
  .hero-card-title span{ font-size: 1rem; }

  /* Títulos y textos de secciones */
  .section-title h2{ font-size: 1.7rem; }
  .section-title p{ font-size: 1.08rem; }

  /* Cards */
  .card h3{ font-size: 1.25rem; }
  .card p{ font-size: 1.06rem; }

  /* Botones y pills */
  .btn{ font-size: 1.05rem; padding: 14px 18px; }
  .pill{ font-size: 0.95rem; }

  /* Arcángeles */
  .angel .name strong{ font-size: 1.12rem; }
  .angel p{ font-size: 1.03rem; line-height: 1.55; }
  .tag{ font-size: 0.9rem; }
}