/* ============================================================
   ACADEMIA CAMLEY — Design system
   Navy · Parchment · Brass — an exam-paper, mark-scheme mood
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy: #152244;
  --navy-deep: #0b1530;
  --navy-soft: #2a3a68;
  --parchment: #faf6ec;
  --parchment-dim: #f3ecdc;
  --line: #e2d8bf;
  --brass: #b8863e;
  --brass-deep: #8f6526;
  --ink: #2a2e3a;
  --ink-soft: #5b6072;
  --white: #ffffff;

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1120px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--navy); margin:0 0 .5em; font-weight:600; line-height:1.15; }
p{ margin:0 0 1em; }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Ruled-paper texture, used behind hero / feature sections */
.ruled{
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 37px,
    var(--line) 38px
  );
}

/* Eyebrow / mono labels — mark-scheme tags */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brass-deep);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{ content:'✓'; color:var(--brass); font-weight:700; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--body);
  font-weight:600;
  font-size:.95rem;
  padding:.85em 1.6em;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--navy-deep); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-brass{ background:var(--brass); color:var(--white); }
.btn-brass:hover{ background:var(--brass-deep); }
.btn-whatsapp{ background:#1f2f57; color:var(--white); }

/* ===== Header / nav ===== */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,236,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:var(--max); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
.brand-text{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--navy); }
nav.primary ul{ display:flex; gap:28px; }
nav.primary a{
  font-size:.92rem; font-weight:500; color:var(--ink);
  position:relative; padding:4px 0;
}
nav.primary a:hover, nav.primary a.active{ color:var(--navy); }
nav.primary a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--brass);
}
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }

@media(max-width:860px){
  nav.primary{
    position:fixed; top:63px; left:0; right:0; bottom:auto;
    max-height:calc(100vh - 63px); overflow-y:auto;
    background:var(--parchment);
    padding:24px; border-top:1px solid var(--line);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  nav.primary.open{ opacity:1; visibility:visible; transform:translateY(0); }
  nav.primary ul{ flex-direction:column; gap:18px; }
  .nav-toggle{
    display:block; background:none; border:none; font-size:1.6rem; color:var(--navy); cursor:pointer;
  }
  .nav-cta .btn-outline{ display:none; }
}

/* ===== Hero ===== */
.hero{
  padding:88px 0 64px;
  position:relative;
  overflow:hidden;
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero h1{ font-size:clamp(2.1rem, 4vw, 3.1rem); }
.hero h1 em{ font-style:italic; color:var(--brass-deep); }
.hero p.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:1.8em; flex-wrap:wrap; }
.hero-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:28px; box-shadow:0 18px 40px -22px rgba(21,34,68,.35);
}
.hero-card .stat{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-size:.95rem; }
.hero-card .stat:last-child{ border-bottom:none; }
.hero-card .stat b{ font-family:var(--mono); color:var(--navy); }

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

/* ===== Sections ===== */
section{ padding:72px 0; }
.section-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head.left{ margin:0 0 44px; text-align:left; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.bg-navy{ background:var(--navy); color:#dfe4f2; }
.bg-navy h2, .bg-navy h3{ color:var(--white); }
.bg-navy p{ color:#c3cae0; }
.bg-dim{ background:var(--parchment-dim); }

/* Pillars / value props */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pillar{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:26px 22px; }
.pillar .num{ font-family:var(--mono); color:var(--brass); font-size:.8rem; letter-spacing:.08em; }
.pillar h4{ font-size:1.05rem; margin:.4em 0 .4em; }
.pillar p{ font-size:.92rem; color:var(--ink-soft); margin:0; }
@media(max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* Program cards (home teaser) */
.programs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.program-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column;
}
.program-card .top{ background:var(--navy); color:var(--white); padding:22px; }
.program-card .top .eyebrow{ color:#e7c98a; }
.program-card .top .eyebrow::before{ color:#e7c98a; }
.program-card .top h3{ color:var(--white); margin:0; }
.program-card .body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.program-card ul{ margin:12px 0 20px; }
.program-card li{ padding:5px 0; font-size:.92rem; display:flex; gap:8px; }
.program-card li::before{ content:'✓'; color:var(--brass); font-weight:700; }
.program-card .btn{ margin-top:auto; align-self:flex-start; }
@media(max-width:900px){ .programs-grid{ grid-template-columns:1fr; } }

/* Plan pricing cards */
.plans-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px; }
.plan-card{ background:var(--white); border:1.5px solid var(--line); border-radius:8px; padding:32px; position:relative; }
.plan-card.premium{ border-color:var(--brass); }
.plan-card.premium::before{
  content:'RECOMENDADO'; position:absolute; top:-11px; right:24px;
  background:var(--brass); color:var(--white); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; padding:4px 10px; border-radius:3px;
}
.plan-name{ font-family:var(--mono); letter-spacing:.08em; color:var(--ink-soft); font-size:.8rem; text-transform:uppercase; }
.plan-price{ font-family:var(--display); font-size:2.4rem; color:var(--navy); margin:.15em 0 .1em; }
.plan-price span{ font-family:var(--body); font-size:.9rem; font-weight:500; color:var(--ink-soft); }
.plan-tagline{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.4em; }
.plan-card ul{ margin-bottom:1.6em; }
.plan-card li{ padding:7px 0; border-bottom:1px solid var(--parchment-dim); font-size:.93rem; display:flex; gap:10px; }
.plan-card li::before{ content:'✓'; color:var(--brass); font-weight:700; flex-shrink:0; }
.plan-card li:last-child{ border-bottom:none; }

.subjects-box{ background:var(--parchment-dim); border:1px solid var(--line); border-radius:6px; padding:22px 24px; margin-top:8px; }
.subjects-box h4{ font-size:.95rem; margin-bottom:10px; }
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:5px 14px; font-size:.85rem; }

.discount-note{
  background:var(--navy); color:var(--white); border-radius:6px; padding:20px 24px; margin-top:18px;
  font-size:.92rem; display:flex; gap:12px; align-items:flex-start;
}
.discount-note b{ color:#e7c98a; }

.private-box{
  border:1.5px dashed var(--brass); border-radius:6px; padding:22px 24px; margin-top:18px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.private-box .price{ font-family:var(--display); font-size:1.6rem; color:var(--navy); }

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

/* Program tabs */
.tabs{ display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.tab-btn{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 20px; border:1.5px solid var(--line); border-radius:30px; background:var(--white);
  color:var(--ink-soft); cursor:pointer;
}
.tab-btn.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Team / about */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }
.team-item{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:22px; }
.team-item .mark{ font-family:var(--display); font-style:italic; color:var(--brass-deep); font-size:1.4rem; }
@media(max-width:900px){ .team-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .team-grid{ grid-template-columns:1fr; } }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 4px; display:flex; justify-content:space-between; gap:16px;
  font-family:var(--display); font-weight:600; font-size:1.08rem; color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family:var(--body); color:var(--brass); font-size:1.4rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item .a{ padding:0 4px 22px; color:var(--ink-soft); max-width:70ch; }
.faq-item .a ul{ margin:.6em 0 0; }
.faq-item .a li{ padding:3px 0; display:flex; gap:8px; }
.faq-item .a li::before{ content:'✓'; color:var(--brass); }

/* Forms */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
@media(max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
input,select,textarea{
  width:100%; font-family:var(--body); font-size:.95rem; padding:.85em 1em;
  border:1.5px solid var(--line); border-radius:var(--radius); background:var(--white); color:var(--ink);
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass); }
textarea{ resize:vertical; min-height:110px; }
.checkbox-row{ display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--ink-soft); }
.checkbox-row input{ width:auto; margin-top:3px; }
.checkbox-row a{ color:var(--navy); text-decoration:underline; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:8px; }

.contact-layout{ display:grid; grid-template-columns:1.4fr .9fr; gap:36px; align-items:start; }
@media(max-width:800px){ .contact-layout{ grid-template-columns:1fr; } }

.contact-side{ background:var(--navy); color:var(--white); border-radius:8px; padding:32px; }
.contact-side h3{ color:var(--white); }
.contact-side p{ color:#c3cae0; }
.contact-line{ display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-line:last-child{ border-bottom:none; }
.contact-line .ic{ font-family:var(--mono); color:#e7c98a; }

/* Footer */
footer.site{ background:var(--navy-deep); color:#aeb6cf; padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.footer-grid h5{ color:var(--white); font-family:var(--body); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.footer-grid a{ display:block; padding:5px 0; font-size:.9rem; color:#aeb6cf; }
.footer-grid a:hover{ color:var(--white); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:32px; background:var(--parchment); padding:6px 10px; border-radius:4px; }
footer.site .bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media(max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* Cookie banner */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:70; max-width:640px; margin:0 auto;
  background:var(--navy); color:#dfe4f2; border-radius:8px; padding:20px 22px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:14px;
}
.cookie-banner p{ margin:0; font-size:.88rem; color:#c3cae0; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; justify-content:flex-end; }
@media(max-width:500px){ .cookie-actions{ justify-content:stretch; } .cookie-actions .btn{ flex:1; justify-content:center; } }

/* Floating WhatsApp */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  background:#1f8a4c; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  font-size:1.5rem;
}
.wa-float:hover{ transform:scale(1.06); }

/* Page hero (inner pages) */
.page-hero{ padding:56px 0 40px; }
.page-hero h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.page-hero p{ color:var(--ink-soft); max-width:60ch; font-size:1.05rem; }

/* Utility */
.mt-lg{ margin-top:48px; }
.text-center{ text-align:center; }
.small{ font-size:.85rem; color:var(--ink-soft); }
.legal h2{ margin-top:1.6em; font-size:1.3rem; }
.legal h3{ margin-top:1.2em; font-size:1.05rem; }
.legal p, .legal li{ color:var(--ink-soft); font-size:.95rem; }
.legal ul{ margin:0 0 1em 1.2em; list-style:disc; }
.legal-nav{ display:flex; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.legal-nav a{ font-size:.85rem; padding:8px 14px; border:1px solid var(--line); border-radius:20px; }
.legal-nav a.active{ background:var(--navy); color:var(--white); border-color:var(--navy); }