:root{
  --navy-900:#0c1730;
  --navy-800:#101d3d;
  --navy-700:#152a52;
  --gold-500:#d6a537;
  --gold-400:#e6bb52;
  --gold-100:#f4e3b8;
  --cream:#f7f5f0;
  --ink:#1c2434;
  --muted:#8fa0c2;
  --muted-light:#6b7280;
  --line:#e7e5df;
  --radius:16px;
  --maxw:1180px;
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(230,187,82,.16), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(240,165,90,.14), transparent 46%),
    radial-gradient(circle at 50% 95%, rgba(230,187,82,.12), transparent 50%),
    var(--cream);
  background-attachment:fixed;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  font-weight:600;
  line-height:1.15;
  color:var(--navy-900);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--gold-500);
  display:block;
  margin-bottom:14px;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;
  border-radius:10px;
  font-weight:600;
  font-size:.95rem;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.nav-cta{
  padding:9px 16px !important;
  font-size:.8rem !important;
  border-radius:8px !important;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  color:var(--navy-900);
  box-shadow:0 8px 20px rgba(214,165,55,.25);
}
.btn-outline{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
}
.btn-navy{
  background:var(--navy-800);
  color:#fff;
}

/* ===== HEADER ===== */
header{
  position:sticky;top:0;z-index:50;
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-badge{
  height:46px;width:46px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;padding:6px;flex-shrink:0;
  background:radial-gradient(circle at 32% 28%, #ffffff, #f3f0e8 65%, #e9e3d4);
  box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 0 2px rgba(214,165,55,.45);
}
.brand-badge img{height:100%;width:100%;object-fit:contain;display:block;}
.brand-name{
  font-family:'Bodoni Moda',serif;
  font-size:1.35rem;color:#fff;font-weight:600;letter-spacing:.01em;
}
.brand-on{color:var(--gold-500);font-weight:700;}
.footer-brand-block{ display:inline-flex; flex-direction:column; align-items:center; }
.footer-brand-block .brand{ justify-content:center; }
.brand-tagline{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#b7c0d6;white-space:nowrap;
}
.tagline-line{width:22px;height:1px;background:var(--gold-500);flex-shrink:0;}
.tagline-dot{width:4px;height:4px;border-radius:50%;background:var(--gold-500);flex-shrink:0;}
@media(max-width:480px){ .brand-tagline{ white-space:normal; } .tagline-line{ display:none; } }
nav.links{display:flex;gap:30px;align-items:center;margin:0 28px;}
nav.links a{
  color:#dfe4f0;font-size:.92rem;font-weight:500;
  transition:color .15s;
}
nav.links a:hover{color:var(--gold-400);}
.nav-right{display:flex;align-items:center;gap:14px;}

/* language switcher */
.lang-switch{position:relative;}
.lang-pill{
  display:flex;align-items:center;gap:6px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;padding:8px 14px;border-radius:30px;font-size:.85rem;
  cursor:pointer;font-family:'Inter',sans-serif;
}
.lang-pill .lang-chev{font-size:.7rem;transition:transform .2s;}
.lang-switch.open .lang-pill .lang-chev{transform:rotate(180deg);}
.lang-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(12,23,48,.25);
  min-width:190px;padding:8px;display:none;flex-direction:column;gap:2px;z-index:60;
}
.lang-switch.open .lang-dropdown{display:flex;}
.lang-dropdown button{
  background:none;border:none;text-align:left;padding:10px 12px;border-radius:8px;
  font-size:.9rem;color:var(--ink);cursor:pointer;font-family:'Inter',sans-serif;
}
.lang-dropdown button:hover{background:var(--cream);}
.lang-dropdown button.active{background:var(--gold-100);font-weight:700;color:var(--navy-900);}

.menu-toggle{
  display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;
  line-height:1;
}

/* mobile nav drawer */
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:4px;
  background:var(--navy-800);
  padding:14px 24px 24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile-nav a{
  color:#dfe4f0;padding:12px 4px;font-size:.98rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-nav.open{display:flex;}

/* ===== HERO ===== */
.hero{
  position:relative;
  background:
    linear-gradient(120deg, rgba(12,23,48,.94), rgba(12,23,48,.75)),
    url('https://images.unsplash.com/photo-1502602898657-3e91760cbb34?q=80&w=1600&auto=format&fit=crop') center/cover;
  color:#fff;
  padding:110px 0 70px;
}
.hero-inner{max-width:760px;margin:0 auto;padding:0 24px;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(230,187,82,.5);
  background:rgba(230,187,82,.08);
  color:var(--gold-400);
  padding:8px 18px;border-radius:30px;
  font-size:.85rem;font-weight:600;margin-bottom:28px;
}
.hero h1{
  font-size:3.4rem;color:#fff;margin-bottom:22px;
  letter-spacing:-.01em;
}
.hero h1 em{color:var(--gold-400);font-style:italic;}
.hero p.lead{
  font-size:1.1rem;color:#c7cfe2;max-width:600px;margin-bottom:34px;
}
.hero-ctas{display:flex;gap:16px;margin-bottom:64px;flex-wrap:wrap;}
.stats-row{display:flex;gap:60px;flex-wrap:wrap;}
.stat b{
  display:block;font-family:'Playfair Display',serif;
  font-size:2rem;color:var(--gold-400);font-weight:700;
}
.stat span{color:#a9b4cc;font-size:.85rem;}

/* ===== SECTION GENERIC ===== */
section{padding:96px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:2.4rem;}
.section-head p{color:var(--muted-light);font-size:1.05rem;margin-top:14px;}
.section-head.light h2{color:#fff;}
.section-head.light p{color:#b7c0d6;}

/* ===== PACKAGES ===== */
.packages{
  background-color:var(--navy-900); color:#fff;
  background-image:
    linear-gradient(135deg, rgba(12,23,48,.55), rgba(16,29,61,.5)),
    url('https://images.unsplash.com/photo-1472173148041-00294f0814a2?q=80&w=1600&auto=format&fit=crop');
  background-size:cover; background-position:center;
}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pkg-card{
  background:var(--navy-700);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:36px 30px;
}
.pkg-card.featured{
  background:linear-gradient(160deg,var(--gold-400),var(--gold-500));
  color:var(--navy-900);
  position:relative;
  transform:translateY(-10px);
}
.pkg-tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--navy-900);color:var(--gold-400);
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  padding:6px 16px;border-radius:20px;text-transform:uppercase;
}
.pkg-name{
  text-transform:uppercase;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;color:var(--gold-400);margin-bottom:14px;
}
.pkg-card.featured .pkg-name{color:var(--navy-900);}
.pkg-price{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:700;}
.pkg-sub{color:#a9b4cc;font-size:.85rem;margin-bottom:22px;}
.pkg-card.featured .pkg-sub{color:rgba(12,23,48,.7);}
.pkg-features{list-style:none;margin-bottom:30px;}
.pkg-features li{
  display:flex;align-items:center;gap:10px;
  font-size:.92rem;padding:7px 0;color:#dfe4f0;
}
.pkg-card.featured .pkg-features li{color:var(--navy-900);}
.pkg-features li::before{
  content:"✓";color:var(--gold-400);font-weight:700;
}
.pkg-card.featured .pkg-features li::before{color:var(--navy-900);}
.pkg-card .btn{width:100%;justify-content:center;}

/* ===== COURSES ===== */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.course-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.course-card:hover{box-shadow:0 14px 30px rgba(16,29,61,.08);transform:translateY(-3px);}
.course-img{width:100%;height:170px;overflow:hidden;background:var(--cream);}
.course-img img{width:100%;height:100%;object-fit:cover;}
.course-body{padding:26px 28px 28px;}
.course-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.course-level{font-size:.78rem;color:var(--muted-light);font-weight:600;}
.course-card h3{font-size:1.3rem;margin-bottom:10px;}
.course-card p{color:var(--muted-light);font-size:.92rem;margin-bottom:24px;}
.course-foot{display:flex;justify-content:space-between;align-items:center;}
.course-price{font-family:'Playfair Display',serif;font-weight:700;font-size:1.4rem;color:var(--navy-900);}
.course-price span{font-family:'Inter',sans-serif;font-weight:500;font-size:.8rem;color:var(--muted-light);}
.course-link{color:var(--gold-500);font-weight:600;font-size:.88rem;}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
.about-photo{
  border-radius:20px;overflow:hidden;
  aspect-ratio:3/4;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about h2{font-size:2.6rem;margin-bottom:6px;}
.about .role{color:var(--gold-500);font-weight:600;margin-bottom:22px;display:block;}
.about p{color:var(--muted-light);margin-bottom:18px;font-size:1rem;}
.philosophy{
  background:var(--cream);border-left:3px solid var(--gold-500);
  border-radius:10px;padding:22px 26px;margin:26px 0;
}
.philosophy strong{display:block;color:var(--navy-900);margin-bottom:8px;}
.philosophy em{color:var(--muted-light);font-style:italic;}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;}
.badges div{display:flex;gap:10px;align-items:center;font-size:.92rem;color:var(--ink);font-weight:500;}
.badges div::before{content:"✓";color:var(--gold-500);font-weight:700;}

/* ===== LEVEL TEST ===== */
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.test-card{
  border-radius:var(--radius);color:#fff;position:relative;overflow:hidden;
}
.test-card.fr{background:linear-gradient(135deg,var(--navy-800),var(--navy-900));}
.test-card.en{background:linear-gradient(135deg,var(--gold-500),#b8862a);}
.test-img{width:100%;height:170px;overflow:hidden;}
.test-img img{width:100%;height:100%;object-fit:cover;opacity:.85;}
.test-body{padding:32px 34px 34px;}
.test-card h3{color:#fff;font-size:1.5rem;margin-bottom:10px;}
.test-card p{margin-bottom:24px;font-size:.92rem;opacity:.9;}
.test-card .btn{background:rgba(255,255,255,.15);color:#fff;}

/* ===== TESTIMONIALS ===== */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.testi-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;
}
.stars{color:var(--gold-500);letter-spacing:2px;margin-bottom:16px;}
.testi-card p.quote{font-size:1.02rem;color:var(--ink);margin-bottom:22px;}
.testi-person{display:flex;gap:12px;align-items:center;}
.avatar-wrap{ position:relative; width:46px; height:46px; flex-shrink:0; }
.avatar-fallback{
  position:absolute; inset:0; border-radius:50%;
  background:var(--navy-800); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; letter-spacing:.02em;
}
.avatar-img{
  position:relative; z-index:1;
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold-100);
}
.testi-person b{display:block;font-size:.95rem;color:var(--navy-900);}
.testi-person span{font-size:.82rem;color:var(--gold-500);font-weight:600;}

/* ===== FAQ ===== */
.faq-item{
  border:1px solid var(--line);border-radius:12px;
  margin-bottom:16px;overflow:hidden;background:#fff;
}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 26px;cursor:pointer;font-weight:600;color:var(--navy-900);
}
.faq-q .chev{transition:transform .2s;color:var(--gold-500);}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 26px 22px;color:var(--muted-light);}

/* ===== CONTACT ===== */
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;}
.contact-item{display:flex;gap:14px;align-items:center;margin-bottom:20px;}
.contact-item .ic{
  width:42px;height:42px;border-radius:10px;background:var(--gold-100);
  display:flex;align-items:center;justify-content:center;color:var(--gold-500);
}
form.contact-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
form.contact-form .full{grid-column:1/-1;}
label{font-size:.85rem;font-weight:600;color:var(--navy-900);margin-bottom:8px;display:block;}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font-family:'Inter',sans-serif;font-size:.92rem;
  background:var(--cream);
}
textarea{resize:vertical;min-height:110px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-400);}

/* ===== SCHEDULE (Google Calendar embed) ===== */
.booking-embed{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 10px 30px rgba(16,29,61,.06);
}
.booking-embed iframe{display:block;width:100%;min-height:700px;}
@media(max-width:600px){
  .booking-embed iframe{min-height:900px;}
}

/* ===== FOOTER ===== */
footer{
  background:var(--navy-900);color:#c7cfe2;padding-top:70px;
  border-top:2px solid rgba(214,165,55,.5);
  position:relative; z-index:1;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.08);}
footer h4{color:#fff;margin-bottom:18px;font-family:'Inter',sans-serif;font-size:1rem;}
footer ul{list-style:none;}
footer ul li{margin-bottom:10px;font-size:.9rem;}
footer ul li a:hover{color:var(--gold-400);}
.social-row{display:flex;gap:14px;margin-top:6px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.95rem;
  transition:transform .15s, box-shadow .15s;
}
.social-row a:hover{ transform:translateY(-2px); }
.social-row a[data-social="facebook"]{
  background:#1877F2; box-shadow:0 4px 12px rgba(24,119,242,.35);
}
.social-row a[data-social="instagram"]{
  background:radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow:0 4px 12px rgba(214,36,159,.35);
}
.social-row a[data-social="linkedin"]{
  background:#0A66C2; box-shadow:0 4px 12px rgba(10,102,194,.35);
}
.footer-bottom{padding:24px 0;text-align:center;font-size:.82rem;color:#7c88a6;}

/* ===== WHATSAPP FLOAT BUTTON ===== */
.whatsapp-float{
  position:fixed;bottom:26px;right:26px;z-index:70;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .15s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
@media(max-width:600px){
  .whatsapp-float{width:54px;height:54px;bottom:18px;right:18px;}
}

/* ===== BLOG ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;
  transition:box-shadow .2s, transform .2s;
  display:flex;flex-direction:column;
}
.blog-card:hover{box-shadow:0 14px 30px rgba(16,29,61,.08);transform:translateY(-3px);}
.blog-img{width:100%;height:180px;overflow:hidden;background:var(--cream);}
.blog-img img{width:100%;height:100%;object-fit:cover;}
.blog-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1;}
.blog-date{font-size:.78rem;color:var(--gold-500);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;}
.blog-card h3{font-size:1.2rem;margin-bottom:10px;}
.blog-card p{color:var(--muted-light);font-size:.92rem;margin-bottom:18px;flex:1;}
.blog-readmore{color:var(--gold-500);font-weight:600;font-size:.88rem;}
.blog-empty{color:var(--muted-light);font-size:.95rem;}

/* Blog modal */
.blog-modal{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(12,23,48,.6);
  align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;
}
.blog-modal.open{display:flex;}
.blog-modal-inner{
  background:#fff;border-radius:var(--radius);max-width:720px;width:100%;
  position:relative;overflow:hidden;
}
.blog-modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(12,23,48,.7);color:#fff;font-size:1rem;cursor:pointer;
}
.blog-modal-inner img{width:100%;height:280px;object-fit:cover;}
.blog-modal-body{padding:32px 34px 40px;}
.blog-modal-date{font-size:.78rem;color:var(--gold-500);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.blog-modal-body h3{font-size:1.7rem;margin:10px 0 20px;}
.blog-modal-body p{color:var(--ink);margin-bottom:16px;line-height:1.7;}

/* ===== LEVEL TEST FLOW (skills, questions, recorder) ===== */
.back-link{
  background:none;border:none;color:var(--gold-500);font-weight:600;
  font-size:.9rem;cursor:pointer;margin-bottom:26px;padding:0;
}
.back-link:hover{text-decoration:underline;}

.skills-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.skill-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 18px;text-align:center;cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.skill-card:hover{box-shadow:0 14px 30px rgba(16,29,61,.08);transform:translateY(-3px);border-color:var(--gold-400);}
.skill-icon{font-size:1.9rem;margin-bottom:12px;}
.skill-card h4{font-size:1rem;margin-bottom:8px;}
.skill-card p{color:var(--muted-light);font-size:.82rem;}

.skill-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;max-width:760px;
}
.skill-panel h3{font-size:1.5rem;margin-bottom:16px;}
.reading-passage{
  background:var(--cream);border-radius:10px;padding:20px 22px;margin-bottom:26px;
  font-size:.98rem;line-height:1.7;color:var(--ink);
}
.reading-passage p{margin-bottom:12px;}
.reading-passage p:last-child{margin-bottom:0;}

/* Bloque uniforme para CUALQUIER pregunta (opción múltiple o texto) */
.tq-block{ margin-bottom:26px; }
.tq-label{
  margin-bottom:12px; color:var(--navy-900); font-weight:600; font-size:.96rem; line-height:1.4;
}

/* Opción múltiple: radio personalizado, alineado a la izquierda, con la
   respuesta justo al lado (sin espacios raros ni texto desalineado) */
.mcq-options{ display:flex; flex-direction:column; gap:10px; }
.mcq-option{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); border-radius:10px; padding:13px 16px;
  cursor:pointer; font-size:.94rem; color:var(--ink);
  transition:border-color .15s, background .15s;
}
.mcq-option:hover{ border-color:var(--gold-400); background:var(--cream); }
.mcq-option input[type="radio"]{
  position:absolute; opacity:0; width:0; height:0; /* ocultamos el radio nativo */
}
.mcq-radio-visual{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--line); position:relative; transition:border-color .15s;
}
.mcq-option input:checked ~ .mcq-radio-visual{ border-color:var(--gold-500); }
.mcq-option input:checked ~ .mcq-radio-visual::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold-500);
}
.mcq-option:has(input:checked), .mcq-option.selected{ border-color:var(--gold-500); background:var(--gold-100); }
.mcq-option-text{ flex:1; text-align:left; line-height:1.4; }

/* Preguntas de respuesta corta: mismo ancho y estilo que el resto del sitio */
.tq-text-input{
  width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:13px 16px; font-family:'Inter',sans-serif; font-size:.94rem;
  background:var(--cream); color:var(--ink);
}
.tq-text-input:focus{ outline:2px solid var(--gold-400); border-color:var(--gold-400); }

/* Escucha: cada audio con sus propias preguntas, separado visualmente */
.listening-section{
  border:1px solid var(--line); border-radius:12px; padding:22px;
  margin-bottom:26px; background:var(--cream);
}
.listening-section-head{
  display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
.listening-badge{
  background:var(--navy-900); color:var(--gold-400); font-size:.75rem; font-weight:700;
  padding:5px 12px; border-radius:20px; letter-spacing:.02em;
}
.listening-label{ color:var(--navy-900); font-weight:600; font-size:.92rem; }
.listening-section .tq-block{ margin-bottom:20px; }
.listening-section .mcq-option, .listening-section .tq-text-input{ background:#fff; }

.writing-example{
  background:var(--cream);border-left:3px solid var(--gold-500);
  border-radius:8px;padding:16px 20px;margin:18px 0;font-size:.92rem;color:var(--muted-light);
}
#ttWritingText{margin-bottom:20px;}

.oral-prompts{margin:18px 0 24px;padding-left:20px;color:var(--ink);}
.oral-prompts li{margin-bottom:10px;font-size:.95rem;}
.record-box{
  background:var(--cream);border-radius:10px;padding:22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
#ttRecordTimer{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--navy-900);}

.id-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.id-fields input{width:100%;}

.tt-result{margin-top:18px;}
.tt-success{color:#1c7a4a;font-weight:600;}
.tt-error{color:#b3261e;font-weight:600;}

@media(max-width:1080px){
  .skills-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:960px){
  .id-fields{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .skills-grid{grid-template-columns:1fr 1fr;}
  .skill-panel{padding:22px;}
  .listening-section{padding:16px;}
}

@media(max-width:960px){
  .blog-grid{grid-template-columns:1fr;}
}

/* El menú pasa a hamburguesa mucho antes que el resto de los ajustes de
   pantallas medianas, para que nunca se vea apretado contra el logo o el
   selector de idioma en laptops con pantalla reducida. */
@media(max-width:1240px){
  nav.links{display:none;}
  .menu-toggle{display:block;}
}

@media(max-width:960px){
  .hero h1{font-size:2.4rem;}
  .pkg-grid,.course-grid,.test-grid,.testi-grid{grid-template-columns:1fr;}
  .pkg-card.featured{transform:none;}
  .about,.contact-wrap,.schedule-wrap{grid-template-columns:1fr;}
  form.contact-form{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .stats-row{gap:34px;}
  .nav-right .nav-cta{display:none;}
}

/* =========================================================
   NUEVO — Servicios (tarjetas giratorias), Paquetes (4 col),
   Contacto (items como links), decoraciones e imágenes
   ambientales, y carruseles de Blog / Testimonios.
========================================================= */

/* (Los íconos decorativos SVG se quitaron; las tarjetas de servicios ahora usan
   fotos reales de fondo en su lugar — ver .flip-card-front en services.js) */

/* ----- Servicios: tarjetas giratorias ----- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:1;
}
.flip-card{ perspective:1200px; height:360px; cursor:pointer; outline:none; }
.flip-card-inner{
  position:relative; width:100%; height:100%; text-align:center;
  transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:var(--radius); padding:30px 26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.flip-card-front{
  background-size:cover; background-position:center; color:#fff;
}
.flip-icon{ font-size:3.1rem; margin-bottom:14px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.flip-card-front h3{
  color:#fff; font-size:1.2rem; margin-bottom:10px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.flip-card-front p{
  color:#f4f6fb; font-size:.92rem; line-height:1.5;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}
.flip-hint{ position:absolute; bottom:14px; right:16px; font-size:.85rem; opacity:.75; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.flip-card-back{
  background-color:var(--navy-900); background-size:cover; background-position:center;
  color:#fff; transform:rotateY(180deg); justify-content:flex-start; overflow-y:auto;
}
.flip-card-back h3{ color:var(--gold-400); font-size:1.2rem; margin-bottom:14px; }
.flip-card-back ul{ list-style:none; text-align:left; width:100%; }
.flip-card-back li{
  font-size:.98rem; line-height:1.55; padding:8px 0 8px 20px; position:relative; color:#f0f2f7;
}
.flip-card-back li::before{ content:"•"; color:var(--gold-400); position:absolute; left:0; font-size:1.1rem; }


/* ----- Paquetes: 4 tarjetas ----- */
.pkg-grid-4{ grid-template-columns:repeat(4,1fr); }
.pkg-card-custom{
  background:transparent; border:1.5px dashed rgba(255,255,255,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.pkg-custom-icon{ font-size:2rem; margin-bottom:14px; }
.pkg-card-custom .pkg-name{ color:#fff; font-size:1.05rem; text-transform:none; letter-spacing:0; }
.pkg-card-custom p{ color:#c7cfe2; font-size:.88rem; margin:10px 0 20px; }
@media(max-width:1080px){ .pkg-grid-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .pkg-grid-4{ grid-template-columns:1fr; } }

/* ----- Contacto: items como links ----- */
a.contact-item{ text-decoration:none; color:inherit; cursor:pointer; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-item .ic{
  width:42px; height:42px; border-radius:10px; background:var(--gold-100);
  display:flex; align-items:center; justify-content:center; color:var(--gold-500); flex-shrink:0;
}
.contact-item b{ display:block; font-size:.8rem; color:var(--muted-light); font-weight:600; margin-bottom:2px; }
.contact-item span, .contact-item a{ display:block; font-size:.95rem; color:var(--ink); }
.contact-item a{ color:var(--navy-900); text-decoration:underline; text-decoration-color:var(--line); }
.contact-item a:hover{ color:var(--gold-500); }

/* ----- Carrusel genérico: flechas, dots, barra de progreso ----- */
.carousel-arrow{
  background:#fff; border:1px solid var(--line); border-radius:50%;
  width:42px; height:42px; font-size:1.3rem; color:var(--navy-900); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s, color .15s;
}
.carousel-arrow:hover{ background:var(--navy-900); color:#fff; }
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.carousel-dot{
  width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0;
}
.carousel-dot.active{ background:var(--gold-500); width:22px; border-radius:5px; transition:width .2s; }

/* ----- Blog: carrusel ----- */
.blog-carousel{ display:flex; align-items:center; gap:16px; }
.blog-viewport{ overflow:hidden; flex:1; }
.blog-track{ display:flex; gap:24px; transition:transform .45s ease; }
.blog-track .blog-card{
  flex:0 0 calc((100% - 48px)/3);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column;
}
@media(max-width:1080px){ .blog-track .blog-card{ flex:0 0 calc((100% - 24px)/2); } }
@media(max-width:700px){ .blog-track .blog-card{ flex:0 0 100%; } .carousel-arrow{ display:none; } }

/* ----- Testimonios: carrusel de 1 en 1 con desvanecido ----- */
.testi-carousel{ display:flex; align-items:center; gap:18px; max-width:780px; margin:0 auto; }
.testi-viewport{ flex:1; min-height:230px; display:flex; align-items:stretch; }
.testi-slide{ width:100%; }
.testi-fade{ animation:testiFadeIn .4s ease; }
@keyframes testiFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.carousel-progress{
  max-width:780px; margin:22px auto 0; height:3px; background:var(--line); border-radius:3px; overflow:hidden;
}
.carousel-progress-bar{ height:100%; width:0%; background:var(--gold-500); }
@media(max-width:700px){ .testi-carousel{ flex-direction:row; } .carousel-arrow{ width:34px; height:34px; font-size:1.05rem; } }

/* ----- Fondo con movimiento ambiental sutil ----- */
.ambient-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.ambient-glow{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.18;
}
.glow-1{ width:420px; height:420px; background:var(--gold-400); top:-100px; left:-100px; animation:driftA 26s ease-in-out infinite; }
.glow-2{ width:380px; height:380px; background:#f0a55a; top:40%; right:-140px; animation:driftB 32s ease-in-out infinite; }
.glow-3{ width:320px; height:320px; background:var(--gold-500); bottom:-120px; left:30%; animation:driftC 30s ease-in-out infinite; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,80px); } }
@keyframes driftB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,60px); } }
@keyframes driftC{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(40px,-60px); } }

.ambient-sparkle{
  position:absolute; width:9px; height:9px; background:var(--gold-400); opacity:0;
  transform:rotate(45deg); border-radius:2px;
  animation:twinkle 5s ease-in-out infinite;
}
.s1{ top:12%; left:8%; animation-delay:0s; }
.s2{ top:22%; left:85%; animation-delay:1.2s; width:6px; height:6px; }
.s3{ top:60%; left:15%; animation-delay:2.4s; width:11px; height:11px; }
.s4{ top:75%; left:80%; animation-delay:.6s; }
.s5{ top:45%; left:50%; animation-delay:3.2s; width:6px; height:6px; }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:rotate(45deg) scale(.6); } 50%{ opacity:.6; transform:rotate(45deg) scale(1); } }

/* Respeta accesibilidad: sin animación si el usuario la desactiva en su sistema */
@media (prefers-reduced-motion: reduce){
  .ambient-glow, .ambient-sparkle, .flip-card-inner, .testi-fade{
    animation:none !important; transition:none !important;
  }
}

@media(max-width:960px){
  .services-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   NUEVO — Sección CV y sección "Realiza tu pago"
========================================================= */

/* ----- CV: 3 tarjetas de descarga, estilo "servicios" (imagen de fondo + texto encima) ----- */
.cv-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  max-width:820px; margin:0 auto;
}
.cv-card{
  border-radius:var(--radius); overflow:hidden; text-decoration:none;
  background-size:cover; background-position:center;
  min-height:220px; padding:26px 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; color:#fff;
  transition:box-shadow .2s, transform .2s;
}
.cv-card:hover{ box-shadow:0 14px 30px rgba(16,29,61,.25); transform:translateY(-3px); }
.cv-flag{ font-size:2.4rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cv-lang{ font-weight:700; color:#fff; font-size:1.1rem; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.cv-download{ color:var(--gold-400); font-weight:700; font-size:.85rem; text-shadow:0 1px 5px rgba(0,0,0,.55); }
@media(max-width:700px){ .cv-grid{ grid-template-columns:1fr; } }

/* ----- Realiza tu pago ----- */
.pay-section{
  position:relative; overflow:hidden; padding:110px 0; color:#fff; text-align:center;
}
.pay-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05); animation:paySlowZoom 18s ease-in-out infinite alternate;
}
@keyframes paySlowZoom{ from{ transform:scale(1.05); } to{ transform:scale(1.14); } }
.pay-overlay{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(12,23,48,.92), rgba(16,29,61,.72));
}
.pay-content{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.pay-content .eyebrow{ color:var(--gold-400); }
.pay-content h2{ color:#fff; font-size:2.3rem; margin-bottom:16px; }
.pay-content p{ color:#dde3f2; font-size:1.05rem; margin-bottom:32px; }

.pay-cta{
  position:relative; overflow:hidden; font-size:1.02rem; padding:16px 34px;
  box-shadow:0 0 0 0 rgba(230,187,82,.55);
  animation:payPulse 2.6s ease-in-out infinite;
}
.pay-cta::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.pay-cta:hover::after{ left:130%; }
@keyframes payPulse{
  0%{ box-shadow:0 0 0 0 rgba(230,187,82,.5); }
  70%{ box-shadow:0 0 0 16px rgba(230,187,82,0); }
  100%{ box-shadow:0 0 0 0 rgba(230,187,82,0); }
}

.pay-badges{
  display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
  margin-top:36px; font-size:.9rem; color:#c7cfe2;
}
.pay-badges span{ display:flex; align-items:center; gap:6px; }

@media(max-width:700px){
  .pay-section{ padding:80px 0; }
  .pay-content h2{ font-size:1.8rem; }
  .pay-badges{ gap:18px; font-size:.82rem; }
}

@media (prefers-reduced-motion: reduce){
  .pay-bg{ animation:none !important; }
  .pay-cta{ animation:none !important; }
}