/* ============================================================
   Rise Language Lab — Landing Curso Aptis Online
   Sistema de diseño extraído de riselanguagelab.com
   ============================================================ */
:root{
  --color-coral:     #C4503C;
  --color-red-dark:  #C25544;
  --color-pink-pale: #FDF3F1;
  --color-pink-soft: #F8DCD8;
  --color-navy:      #0F172A;
  --color-slate:     #475569;
  --color-bg-light:  #F8FAFC;
  --white:           #FFFFFF;

  --text-dark:       #14110C;             /* texto principal de la web */
  --bg-alt:          #FBF0EB;             /* secciones alternas */
  --input-bg:        #FAF8F6;
  --input-border:    rgba(20, 17, 12, 0.08);

  --font-display: "DM Sans", sans-serif;
  --font-body:    "Inter", sans-serif;

  --radius: 8px;
  --transition: all 0.3s ease;
  --container-width: 1200px;
  --header-height: 80px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  [data-reveal], [data-stagger] > *{ opacity:1 !important; transform:none !important; }
}

/* ==================== Animaciones de entrada ==================== */
@keyframes cc-fadeUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }
@keyframes cc-fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cc-wa-pulse{
  0%{ transform:scale(.9); opacity:.7; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}

/* Scroll-reveal genérico: se activa añadiendo .is-visible vía IntersectionObserver */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
[data-stagger].is-visible > *{ opacity:1; transform:none; }
[data-stagger].is-visible > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].is-visible > *:nth-child(2){ transition-delay:.14s; }
[data-stagger].is-visible > *:nth-child(3){ transition-delay:.23s; }
[data-stagger].is-visible > *:nth-child(4){ transition-delay:.32s; }
[data-stagger].is-visible > *:nth-child(5){ transition-delay:.41s; }
[data-stagger].is-visible > *:nth-child(6){ transition-delay:.5s; }

body{
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--white);
  line-height:1.65;
  font-size:1rem;
}

.container{ max-width:var(--container-width); margin-inline:auto; padding-inline:24px; }
.container-narrow{ max-width:780px; }

h1,h2,h3{ font-family:var(--font-display); color:var(--text-dark); line-height:1.15; }
h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:800; letter-spacing:-0.02em; }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.15rem); font-weight:800; margin-bottom:.55em; }
h3{ font-size:1.12rem; font-weight:700; margin-bottom:.35em; }

a{ color:var(--color-coral); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--color-pink-soft); outline-offset:2px;
}

/* Firma visual: subrayado suave en color de marca. Se "dibuja" de izquierda a derecha al cargar la página */
.hl{
  background-image:linear-gradient(180deg, transparent 62%, var(--color-pink-soft) 62%, var(--color-pink-soft) 94%, transparent 94%);
  background-repeat:no-repeat;
  background-position:left;
  background-size:0% 100%;
  padding-inline:.04em;
  animation:cc-hl-draw 1s cubic-bezier(.22,1,.36,1) both .9s;
}
@keyframes cc-hl-draw{
  to{ background-size:100% 100%; }
}
@keyframes hl-draw{
  from{ background-size:0% 100%; }
  to{ background-size:100% 100%; }
}
.hl:hover{
  animation:hl-draw .55s cubic-bezier(.22,1,.36,1) both;
}

/* ==================== Header ==================== */
.site-header{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--input-border);
  box-shadow:0 4px 24px rgba(20,17,12,0.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-height);
}
.logo{ display:flex; align-items:center; transition:var(--transition); }
.logo:hover{ opacity:.8; }
.logo img{ display:block; height:44px; width:auto; }

/* ==================== Botones ==================== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--color-coral); color:var(--white);
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:12px 24px; border:2px solid var(--color-coral); border-radius:var(--radius);
  text-decoration:none; cursor:pointer;
  transition:var(--transition);
}
.btn-primary:hover{ background:var(--color-red-dark); border-color:var(--color-red-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(196,80,60,0.25); }
.btn-primary:active{ transform:translateY(0); box-shadow:none; }
.header-cta{ padding:9px 20px; font-size:.95rem; }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:transparent; color:var(--color-coral);
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:12px 24px; border:2px solid var(--color-coral); border-radius:var(--radius);
  text-decoration:none; cursor:pointer;
  transition:var(--transition);
}
.btn-secondary:hover{ background:var(--color-pink-pale); transform:translateY(-2px); }
.btn-secondary:active{ transform:translateY(0); }

/* ==================== Hero ==================== */
.hero-section{ padding:56px 0 96px; background:var(--white); }
.hero-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start;
}
.hero-eyebrow{
  display:inline-block;
  background:var(--bg-alt); color:var(--color-coral);
  font-size:.85rem; font-weight:600;
  padding:6px 16px; border-radius:100px;
  margin-bottom:20px;
  animation:cc-fadeIn .5s ease both .1s;
}
.hero-copy h1{ animation:cc-fadeUp .8s cubic-bezier(.22,1,.36,1) both .2s; }
.lead{
  font-size:1.15rem; color:var(--color-slate); margin-top:18px; max-width:56ch;
  animation:cc-fadeUp .8s cubic-bezier(.22,1,.36,1) both .32s;
}
.hero-ctas{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;
  animation:cc-fadeUp .8s cubic-bezier(.22,1,.36,1) both .44s;
}
.trust-row{
  display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; margin-top:28px;
}
.trust-row li{
  font-size:.92rem; font-weight:500; color:var(--color-slate);
  display:flex; align-items:center; gap:.5em;
  opacity:0; transform:translateX(-10px);
  transition:opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), color .2s ease, background .2s ease;
  padding:.15em .35em; border-radius:6px; margin-inline:-.35em;
}
.trust-row li.is-checked{ opacity:1; transform:translateX(0); }
.trust-row li:hover{ color:var(--color-coral); background:rgba(196,80,60,0.06); }
.trust-row li::before{
  content:"✓";
  color:var(--color-coral); font-weight:700;
  opacity:0; transform:scale(0) rotate(-30deg);
  transition:opacity .2s ease .08s, transform .32s cubic-bezier(.34,1.56,.64,1) .08s;
}
.trust-row li.is-checked::before{ opacity:1; transform:scale(1) rotate(0deg); }

/* Tarjeta lateral del hero */
.hero-card{
  background:var(--bg-alt);
  border-radius:16px;
  padding:28px 28px 18px;
  animation:cc-fadeUp .9s cubic-bezier(.22,1,.36,1) both .3s;
}
.hero-card-title{
  font-family:var(--font-display); font-weight:800; font-size:1.1rem;
  color:var(--text-dark); margin-bottom:12px;
}
.hero-card dl div{
  display:grid; grid-template-columns:100px 1fr; gap:12px;
  padding-block:10px; padding-inline:8px; margin-inline:-8px;
  border-top:1px solid rgba(20,17,12,0.08); border-radius:6px;
  transition:background .2s ease;
}
.hero-card dl div:first-child{ border-top:0; }
.hero-card dl div:hover{ background:rgba(196,80,60,0.06); }
.hero-card dt{
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--color-coral); padding-top:3px;
}
.hero-card dd{ font-size:.94rem; color:var(--text-dark); }

/* ==================== Secciones ==================== */
.section{ padding:80px 0; }
.section-alt{ background:var(--bg-alt); }
.section-intro{ color:var(--color-slate); max-width:62ch; margin-bottom:36px; }
.section-title-accent{ font-size:clamp(1.85rem, 3.6vw, 2.4rem); color:var(--color-red-dark); }

/* Cards "para quién" */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:20px;
}
.card{
  background:var(--white); border-radius:12px;
  padding:26px;
  box-shadow:0 2px 12px rgba(20,17,12,0.05);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--color-coral); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(20,17,12,0.1);
}
.card:hover::before{ transform:scaleX(1); }
.card h3{ color:var(--color-coral); }
.card p{ font-size:.94rem; color:var(--color-slate); }

/* Sección invertida (fondo oscuro) */
.section-dark{
  background:linear-gradient(145deg, var(--text-dark) 0%, #1D1810 100%);
}
.section-dark h2{ color:var(--white); }

/* Pasos */
.steps{
  list-style:none; counter-reset:step;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.steps li{
  counter-increment:step; position:relative;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:28px 24px 26px;
  transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, box-shadow .35s ease;
}
.steps li:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(196,80,60,0.45);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}
.steps li::before{
  content:counter(step);
  width:42px; height:42px; border-radius:50%;
  background:var(--color-coral); color:var(--white);
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  display:grid; place-items:center;
  margin-bottom:18px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.steps li:hover::before{
  transform:scale(1.1);
  box-shadow:0 6px 16px rgba(196,80,60,0.45);
}
.steps h3{ color:var(--steps-title-color, var(--white)); }
.steps p{ font-size:.94rem; color:var(--steps-text-color, rgba(255,255,255,0.65)); }

/* Dos columnas: checklist + comparativa */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.checklist{ list-style:none; margin-top:6px; }
.checklist li{
  padding:11px 0 11px 32px; position:relative;
  border-bottom:1px solid rgba(20,17,12,0.08);
  font-size:.97rem;
  transition:padding-left .2s ease, color .2s ease;
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:10px;
  color:var(--color-coral); font-weight:700; font-size:1.05rem;
  transition:transform .2s ease;
}
.checklist li:hover{ padding-left:38px; }
.checklist li:hover::before{ transform:scale(1.15); }
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare-col{
  background:var(--white); border-radius:12px; padding:22px;
  box-shadow:0 2px 12px rgba(20,17,12,0.05);
  border-top:3px solid transparent;
  transition:var(--transition);
}
.compare-col:hover{
  transform:translateY(-5px);
  border-top-color:var(--color-coral);
  box-shadow:0 14px 32px rgba(20,17,12,0.08);
}
.compare-col h3{ color:var(--color-coral); }
.compare-col p{ font-size:.92rem; color:var(--color-slate); }
.compare-note{ font-size:.9rem; color:var(--color-slate); margin-top:14px; font-style:italic; }

/* FAQ */
details{
  background:var(--white); border:1px solid var(--input-border); border-radius:12px;
  padding:18px 22px; margin-bottom:12px;
  box-shadow:0 2px 8px rgba(20,17,12,0.04);
  transition:var(--transition);
}
details:hover{
  border-color:var(--color-pink-soft);
  box-shadow:0 8px 20px rgba(20,17,12,0.07);
}
summary{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  color:var(--text-dark); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  transition:color .2s ease;
  margin:-4px -6px; padding:4px 6px; border-radius:8px;
}
summary::-webkit-details-marker{ display:none; }
summary:hover{ color:var(--color-coral); }
summary::after{ content:"+"; font-size:1.4rem; color:var(--color-coral); flex-shrink:0; transition:transform .25s ease; }
details[open] summary::after{ content:"–"; transform:rotate(180deg); }
details p{ margin-top:12px; font-size:.95rem; color:var(--color-slate); }

/* ==================== Formulario (idéntico a contacto.html) ==================== */
.ct-form-wrapper{
  max-width:760px; margin:0 auto;
  background:var(--white); border-radius:20px;
  padding:3rem 4rem;
  box-shadow:0 10px 40px rgba(20,17,12,0.05);
  border:1px solid rgba(20,17,12,0.05);
}
.ct-form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
}
.form-group.full{ grid-column:1 / -1; }
.form-group label{
  display:block; font-family:var(--font-display);
  font-size:.85rem; font-weight:700; color:var(--text-dark);
  margin-bottom:.5rem;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%; background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  padding:.9rem 1rem;
  font-family:var(--font-body); font-size:.9rem;
  color:var(--text-dark);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
  box-sizing:border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none; border-color:var(--color-coral); background:var(--white);
  box-shadow:0 0 0 4px rgba(196,80,60,0.1);
}
.ct-form-footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:2rem; flex-wrap:wrap; gap:1rem;
}
.ct-form-note{ font-size:.8rem; color:rgba(90,78,71,0.6); margin:0; }
.or-whatsapp{ margin-top:24px; text-align:center; color:var(--color-slate); font-size:.95rem; }
.or-whatsapp a{ font-weight:600; transition:color .2s ease; }
.or-whatsapp a:hover{ color:var(--color-red-dark); text-decoration:underline; }

/* ==================== Modal de confirmación (idéntico a contacto.html) ==================== */
.ct-modal-overlay{
  position:fixed; inset:0; background:rgba(20,17,12,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  padding:1.5rem;
}
.ct-modal-overlay.is-open{ opacity:1; visibility:visible; }
.ct-modal{
  background:#fff; border-radius:20px; padding:3rem 2.5rem;
  max-width:440px; width:100%; text-align:center;
  box-shadow:0 30px 60px rgba(20,17,12,0.18);
  transform:translateY(20px) scale(.97);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.ct-modal-overlay.is-open .ct-modal{ transform:translateY(0) scale(1); }
.ct-modal-icon{
  width:64px; height:64px; background:var(--bg-alt); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem;
}
.ct-modal-icon svg{ width:30px; height:30px; stroke:var(--color-coral); }
.ct-modal h2{
  font-size:1.6rem; font-weight:800; color:var(--text-dark);
  margin-bottom:.75rem; letter-spacing:-.3px;
}
.ct-modal p{
  font-size:.97rem; line-height:1.75; color:var(--color-slate);
  font-weight:300; margin-bottom:2rem;
}
.ct-modal .btn-primary{ display:inline-flex; }

/* ==================== Footer ==================== */
.site-footer{ background:var(--text-dark); }
.footer-inner{
  display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between;
  padding-block:28px; font-size:.88rem; color:rgba(255,255,255,.75);
}
.footer-inner a{ color:rgba(255,255,255,.9); transition:color .2s ease; }
.footer-inner a:hover{ color:var(--color-coral); }

/* WhatsApp flotante */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:none; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease;
  opacity:0; animation:cc-fadeIn .6s ease both 1.4s;
}
.wa-float::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:cc-wa-pulse 2.4s ease-out infinite;
}
.wa-float:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
}
.wa-float:hover::before{ animation-play-state:paused; }

/* ==================== Responsive ==================== */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-card{ max-width:480px; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .two-col{ grid-template-columns:1fr; gap:48px; }
}
@media (max-width: 640px){
  .hero-section{ padding:40px 0 64px; }
  .section{ padding:56px 0; }
  .ct-form-wrapper{ padding:2rem 1.5rem; }
  .ct-form-grid{ grid-template-columns:1fr; }
  .compare-grid{ grid-template-columns:1fr; }
  .wa-float{ display:grid; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary{ width:100%; }
}

/* ==================== Icono de éxito (gracias.html) ==================== */
.success-icon{
  width:72px; height:72px; margin:0 auto 24px;
  background:var(--bg-alt); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.success-icon svg{ width:34px; height:34px; color:var(--color-coral); }

/* ==================== Checkbox de consentimiento RGPD ==================== */
.consent-row{ margin-top:.5rem; }
.consent-label{
  display:flex; align-items:flex-start; gap:.65rem;
  cursor:pointer;
}
.consent-label input[type="checkbox"]{
  width:18px; height:18px; flex-shrink:0; margin-top:3px;
  accent-color:var(--color-coral);
  cursor:pointer;
}
.consent-label span{
  font-size:.85rem; line-height:1.55; color:var(--color-slate); font-weight:400;
}
.consent-label a{ color:var(--color-coral); font-weight:600; transition:color .2s ease; }
.consent-label a:hover{ color:var(--color-red-dark); text-decoration:underline; }