/* ==================================================
   Angel Media — Landing page styles
   Built on the Angel Media Design System tokens
   (tokens.css → colors, type, spacing, radii, shadows, motion)
   Extends the marketing UI-kit patterns with the full
   landing structure from the client spec.
   ================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--am-marfil);color:var(--am-fg);font-family:var(--am-font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

/* ---- Bilingual visibility ---- */
[data-lang="es"] .lang-en{display:none !important;}
[data-lang="en"] .lang-es{display:none !important;}

/* ---- Shared layout ---- */
.am-wrap{max-width:1180px;margin:0 auto;}
.am-eyebrow{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--am-rosa);font-weight:500;margin:0;}

/* ---- Buttons ---- */
.am-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--am-font-sans);font-weight:700;
  font-size:13px;letter-spacing:0.22em;text-transform:uppercase;
  padding:16px 28px;border:none;border-radius:999px;cursor:pointer;
  transition:transform var(--am-dur-fast) var(--am-ease),
             opacity var(--am-dur) var(--am-ease),
             box-shadow var(--am-dur) var(--am-ease);
}
.am-btn:hover{transform:translateY(-1px);opacity:0.92;}
.am-btn:active{transform:translateY(0) scale(0.985);}
.am-btn-sm{padding:11px 20px;font-size:11px;}
.am-btn-primary{background:var(--am-gradient);color:#fff;box-shadow:var(--am-shadow-coral);}
.am-btn-solid{background:var(--am-rosa);color:#fff;}
.am-btn-ghost{background:transparent;color:var(--am-fg);border:1.5px solid var(--am-fg);}
.am-btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.5);}
.am-lm-download{display:inline-flex;margin-top:16px;}
.am-lm-download[hidden]{display:none;}
.am-btn .arrow{transition:transform var(--am-dur) var(--am-ease);}
.am-btn:hover .arrow{transform:translateX(3px);}

/* ---- Italic accents ---- */
.am-it-grad{font-family:var(--am-font-display);font-style:italic;font-weight:500;
  background:var(--am-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.am-it-rosa{font-family:var(--am-font-display);font-style:italic;font-weight:500;color:var(--am-rosa);}

/* ==================================================
   Header
   ================================================== */
.am-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 64px;
  background:rgba(13,13,13,0.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.am-header-logo img{height:42px;width:auto;}
.am-header-right{display:flex;align-items:center;gap:28px;}
.am-header-nav{display:flex;gap:30px;}
.am-header-nav a{
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(247,244,239,0.85);font-weight:500;
  transition:color var(--am-dur) var(--am-ease);
}
.am-header-nav a:hover{color:var(--am-rosa);}

/* Language toggle */
.am-lang{display:inline-flex;border:1px solid rgba(255,255,255,0.22);border-radius:999px;
  overflow:hidden;}
.am-lang button{background:transparent;border:none;cursor:pointer;
  font-family:var(--am-font-sans);font-weight:700;font-size:11px;letter-spacing:0.12em;
  color:rgba(247,244,239,0.6);padding:7px 13px;transition:all var(--am-dur) var(--am-ease);}
[data-lang="es"] .am-lang button[data-set="es"],
[data-lang="en"] .am-lang button[data-set="en"]{background:var(--am-gradient);color:#fff;}

/* ==================================================
   Hero (dark)
   ================================================== */
.am-hero{
  background:var(--am-negro);color:var(--am-marfil);
  padding:108px 64px 92px;position:relative;overflow:hidden;
}
.am-hero::after{
  content:"";position:absolute;right:-200px;top:-120px;
  width:620px;height:620px;border-radius:50%;
  background:var(--am-gradient-radial);opacity:0.18;filter:blur(70px);
  pointer-events:none;
}
.am-hero-inner{position:relative;max-width:1180px;margin:0 auto;}
.am-hero-h{
  font-family:var(--am-font-display);font-weight:500;
  font-size:clamp(42px, 6.4vw, 92px);line-height:1.0;
  letter-spacing:-0.025em;margin:22px 0 0;color:var(--am-marfil);max-width:15ch;
}
.am-hero-sub{
  max-width:620px;margin:30px 0 0;
  font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:rgba(247,244,239,0.74);
}
.am-hero-ctas{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;align-items:center;}
.am-hero-micro{margin-top:24px;font-size:13px;line-height:1.55;color:rgba(247,244,239,0.55);max-width:560px;}

/* ==================================================
   Authority bar
   ================================================== */
.am-authority{background:var(--am-negro);color:var(--am-marfil);padding:0 64px 88px;}
.am-authority-inner{max-width:1180px;margin:0 auto;}
.am-authority-text{font-size:15px;line-height:1.6;color:rgba(247,244,239,0.7);max-width:720px;
  margin:0 0 40px;padding-top:40px;border-top:1px solid rgba(255,255,255,0.12);}
.am-authority-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.am-meta-num{font-family:var(--am-font-display);font-weight:500;
  font-size:clamp(40px,4.4vw,56px);line-height:1;letter-spacing:-0.02em;
  background:var(--am-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.am-meta-lbl{margin-top:12px;font-size:13px;line-height:1.45;color:rgba(247,244,239,0.66);}

/* ==================================================
   Light sections (shared)
   ================================================== */
.am-section{background:var(--am-marfil);padding:112px 64px;}
.am-section.soft{background:var(--am-marfil-soft);}
.am-section-head{max-width:1180px;margin:0 auto 56px;}
.am-section-h{font-family:var(--am-font-display);font-weight:500;
  font-size:clamp(34px, 4.4vw, 64px);line-height:1.05;
  letter-spacing:-0.022em;margin:18px 0 18px;max-width:900px;color:var(--am-fg);}
.am-section-lead{font-size:18px;line-height:1.55;color:var(--am-fg-muted);max-width:620px;margin:0;}

/* ---- Problem checklist ---- */
.am-problem-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(2,1fr);gap:16px 40px;}
.am-pain{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;background:#fff;
  border:1px solid var(--am-border-soft);border-radius:14px;}
.am-pain svg{flex:none;width:22px;height:22px;stroke:var(--am-coral);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.am-pain p{margin:0;font-size:15.5px;line-height:1.5;color:var(--am-fg);}
.am-problem-cta{max-width:1180px;margin:48px auto 0;}

/* ---- Services ---- */
.am-services-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:22px;}
.am-service-card{background:#fff;border:1px solid var(--am-border-soft);border-radius:18px;
  padding:34px 30px;display:flex;flex-direction:column;
  transition:transform var(--am-dur) var(--am-ease),box-shadow var(--am-dur) var(--am-ease);}
.am-service-card:hover{transform:translateY(-3px);box-shadow:var(--am-shadow-lg);}
.am-service-icon svg{stroke:var(--am-rosa);stroke-width:1.5;fill:none;width:30px;height:30px;
  stroke-linecap:round;stroke-linejoin:round;}
.am-service-n{font-family:var(--am-font-display);font-style:italic;font-weight:500;
  font-size:30px;color:var(--am-rosa);line-height:1;margin-top:22px;}
.am-service-ti{font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-0.015em;margin:12px 0 6px;}
.am-service-tag{font-weight:700;font-size:13px;color:var(--am-coral);margin:0 0 14px;}
.am-service-body{font-size:14.5px;line-height:1.55;color:var(--am-fg-muted);margin:0 0 18px;}
.am-service-list{display:flex;flex-direction:column;gap:9px;margin:0 0 24px;}
.am-service-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;
  color:var(--am-fg);}
.am-service-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--am-gradient);margin-top:7px;}
.am-service-link{margin-top:auto;color:var(--am-rosa);font-size:11px;letter-spacing:0.22em;
  text-transform:uppercase;font-weight:700;display:inline-flex;gap:8px;align-items:center;}
.am-service-link .arrow{transition:transform var(--am-dur) var(--am-ease);}
.am-service-card:hover .am-service-link .arrow{transform:translateX(3px);}

/* ---- Benefits ---- */
.am-benefits-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:24px;}
.am-benefit{padding:8px 0;}
.am-benefit-icon svg{width:34px;height:34px;stroke:var(--am-rosa);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.am-benefit h3{font-family:var(--am-font-display);font-weight:500;font-size:30px;line-height:1.1;
  letter-spacing:-0.015em;margin:20px 0 10px;}
.am-benefit p{font-size:15px;line-height:1.6;color:var(--am-fg-muted);margin:0;}
.am-mid-cta{max-width:1180px;margin:64px auto 0;text-align:center;
  padding-top:56px;border-top:1px solid var(--am-border);}

/* ---- Process (Cómo funciona) ---- */
.am-process-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:24px;}
.am-step{position:relative;padding:30px 26px;background:#fff;border:1px solid var(--am-border-soft);
  border-radius:16px;}
.am-step-n{font-family:var(--am-font-display);font-style:italic;font-weight:500;font-size:46px;
  line-height:1;background:var(--am-gradient);-webkit-background-clip:text;background-clip:text;
  color:transparent;}
.am-step h3{font-weight:700;font-size:18px;letter-spacing:-0.01em;margin:18px 0 8px;}
.am-step p{font-size:14px;line-height:1.55;color:var(--am-fg-muted);margin:0;}

/* ---- Why Angel Media (dark) ---- */
.am-why{background:var(--am-negro);color:var(--am-marfil);padding:112px 64px;}
.am-why .am-section-h{color:var(--am-marfil);}
.am-why-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.am-why-item{padding-top:28px;border-top:1.5px solid var(--am-border-coral);}
.am-why-item h3{font-family:var(--am-font-display);font-weight:500;font-size:27px;line-height:1.12;
  letter-spacing:-0.015em;margin:0 0 14px;color:var(--am-marfil);}
.am-why-item p{font-size:15px;line-height:1.6;color:rgba(247,244,239,0.7);margin:0 0 10px;}

/* ---- Work / portfolio ---- */
.am-work-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.am-case-card{display:flex;flex-direction:column;}
.am-case-img{aspect-ratio:1.1 / 1;border-radius:18px;display:flex;align-items:flex-end;
  padding:24px;position:relative;overflow:hidden;background:var(--am-marfil-deep);
  border:1px solid var(--am-border-soft);}
.am-case-img.grad{background:var(--am-gradient);}
.am-case-img.dark{background:var(--am-negro);}
.am-case-badge{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,0.9);color:var(--am-negro);}
.am-case-img.dark .am-case-badge,.am-case-img.grad .am-case-badge{background:rgba(255,255,255,0.92);}
.am-case-name{font-family:var(--am-font-display);font-weight:500;font-size:24px;line-height:1.12;
  letter-spacing:-0.015em;margin-top:18px;}
.am-case-line{font-size:14px;line-height:1.5;color:var(--am-fg-muted);margin-top:6px;}
.am-work-note{max-width:1180px;margin:48px auto 0;font-family:var(--am-font-display);
  font-style:italic;font-size:24px;color:var(--am-fg);text-align:center;}

/* ---- Lead magnet ---- */
.am-lead{background:var(--am-negro);color:var(--am-marfil);padding:104px 64px;position:relative;
  overflow:hidden;}
.am-lead::after{content:"";position:absolute;left:-160px;bottom:-200px;width:560px;height:560px;
  border-radius:50%;background:var(--am-gradient-radial);opacity:0.16;filter:blur(70px);}
.am-lead-inner{position:relative;max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.1fr 0.9fr;gap:72px;align-items:center;}
.am-lead h2{font-family:var(--am-font-display);font-weight:500;font-size:clamp(30px,3.4vw,46px);
  line-height:1.1;letter-spacing:-0.02em;margin:14px 0 16px;color:var(--am-marfil);}
.am-lead p{font-size:16px;line-height:1.6;color:rgba(247,244,239,0.72);margin:0;max-width:460px;}
.am-lead-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;padding:36px;}

/* ---- Forms ---- */
.am-field-lbl{display:block;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:500;color:rgba(247,244,239,0.7);margin-bottom:8px;}
.am-field{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--am-border);
  border-radius:999px;padding:6px 6px 6px 22px;margin-bottom:14px;
  transition:border-color var(--am-dur) var(--am-ease),box-shadow var(--am-dur) var(--am-ease);}
.am-field:focus-within{border-color:var(--am-rosa);box-shadow:0 0 0 4px var(--am-rosa-08);}
.am-field input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;
  font-size:15px;color:var(--am-fg);padding:13px 0;}
.am-field input::placeholder{color:var(--am-fg-subtle);}
.am-field-hint{margin-top:10px;font-size:12px;color:rgba(247,244,239,0.5);}
.am-form-msg{margin-top:14px;font-size:13px;color:var(--am-rosa);font-weight:500;min-height:18px;}

/* ---- Testimonials ---- */
.am-testi-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.am-quote{background:#fff;border:1px solid var(--am-border-soft);border-radius:18px;padding:34px 30px;
  display:flex;flex-direction:column;}
.am-quote-mark{font-family:var(--am-font-display);font-style:italic;font-size:64px;line-height:0.5;
  color:var(--am-rosa);margin:0 0 16px;}
.am-quote-body{font-family:var(--am-font-display);font-weight:500;font-size:22px;line-height:1.32;
  letter-spacing:-0.01em;color:var(--am-fg);margin:0 0 26px;}
.am-quote-attr{margin-top:auto;display:flex;align-items:center;gap:14px;}
.am-quote-av{width:44px;height:44px;border-radius:50%;background:var(--am-gradient-soft);flex:none;}
.am-quote-name{font-weight:700;font-size:14px;}
.am-quote-role{font-size:12.5px;color:var(--am-fg-muted);margin-top:2px;}
.am-testi-disclaimer{max-width:1180px;margin:0 auto 40px;font-size:12.5px;color:var(--am-fg-subtle);
  font-style:italic;}

/* ---- FAQ ---- */
.am-faq-list{max-width:840px;margin:0 auto;}
.am-faq{border-bottom:1px solid var(--am-border);}
.am-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:24px;padding:26px 4px;font-weight:700;font-size:19px;letter-spacing:-0.01em;
  color:var(--am-fg);}
.am-faq summary::-webkit-details-marker{display:none;}
.am-faq summary .plus{flex:none;width:24px;height:24px;position:relative;transition:transform var(--am-dur) var(--am-ease);}
.am-faq summary .plus::before,.am-faq summary .plus::after{content:"";position:absolute;
  background:var(--am-rosa);border-radius:2px;}
.am-faq summary .plus::before{top:11px;left:2px;right:2px;height:2px;}
.am-faq summary .plus::after{left:11px;top:2px;bottom:2px;width:2px;transition:opacity var(--am-dur) var(--am-ease);}
.am-faq[open] summary .plus::after{opacity:0;}
.am-faq-a{padding:0 4px 28px;font-size:16px;line-height:1.6;color:var(--am-fg-muted);max-width:680px;}

/* ---- Final CTA (gradient) ---- */
.am-final{background:var(--am-gradient);color:#fff;padding:120px 64px;text-align:center;}
.am-final h2{font-family:var(--am-font-display);font-weight:500;font-size:clamp(36px,4.6vw,72px);
  line-height:1.04;letter-spacing:-0.022em;margin:0 auto 20px;max-width:16ch;color:#fff;}
.am-final p{font-size:18px;line-height:1.55;color:rgba(255,255,255,0.92);max-width:560px;margin:0 auto 36px;}
.am-final-micro{margin-top:20px;font-size:13px;color:rgba(255,255,255,0.85);}

/* ==================================================
   Footer
   ================================================== */
.am-footer{background:var(--am-negro);color:var(--am-marfil);padding:80px 64px 48px;}
.am-footer-top{max-width:1180px;margin:0 auto 48px;display:grid;
  grid-template-columns:1.5fr 1fr 1fr;gap:48px;align-items:start;}
.am-footer-logo{height:44px;width:auto;margin-bottom:18px;}
.am-footer-tag{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;
  color:rgba(247,244,239,0.8);}
.am-footer-tag .rosa{color:var(--am-rosa);}
.am-footer-col h4{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;
  color:rgba(247,244,239,0.5);margin:0 0 16px;}
.am-footer-col a{display:block;font-size:14px;color:rgba(247,244,239,0.78);margin-bottom:11px;
  transition:color var(--am-dur) var(--am-ease);}
.am-footer-col a:hover{color:var(--am-rosa);}
.am-footer-bottom{max-width:1180px;margin:0 auto;padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:12.5px;color:rgba(247,244,239,0.55);}

/* ==================================================
   Reveal-on-scroll
   ================================================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 520ms var(--am-ease),
  transform 520ms var(--am-ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ==================================================
   Responsive
   ================================================== */
@media (max-width:980px){
  .am-header{padding:12px 22px;}
  .am-header-nav{display:none;}
  .am-hero,.am-authority,.am-section,.am-why,.am-lead,.am-final,.am-footer{
    padding-left:22px;padding-right:22px;}
  .am-hero{padding-top:72px;padding-bottom:64px;}
  .am-authority-grid{gap:24px;}
  .am-problem-grid,.am-services-grid,.am-benefits-grid,.am-process-grid,
  .am-why-grid,.am-work-grid,.am-testi-grid{grid-template-columns:1fr;}
  .am-lead-inner,.am-footer-top{grid-template-columns:1fr;gap:36px;}
  .am-section{padding:72px 22px;}
}
@media (max-width:560px){
  .am-authority-grid{grid-template-columns:1fr;}
  .am-hero-ctas{flex-direction:column;align-items:stretch;}
  .am-hero-ctas .am-btn{justify-content:center;}
}