/* The English Project · sitio web v2 · colores TEP 2.0 (brand guide tep2 v1.2)
   Tipografía web: Fraunces (títulos) + Inter (texto corrido). Montserrat solo en las bandas oficiales.
   Radios con intención: 0 = bloques, listas, tablas, columnas · 4px = botones y etiquetas · 8px = capturas de producto. */
@font-face{font-family:Fraunces;font-weight:300 900;font-display:swap;src:url(assets/fonts/Fraunces-var-latin.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(assets/fonts/Montserrat-ExtraBold.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(assets/fonts/Montserrat-Bold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(assets/fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(assets/fonts/Inter-SemiBold.woff2) format("woff2")}
:root{--ink:#0A0C0B;--white:#fff;--mist:#F4F6F1;--char:#333029;--graph:#474B44;--rule:#D5D9CF;--lime:#C7F022;--pale:#E9FAA6;--moss:#4D6B00;
  --r0:0;--r1:4px;--r2:8px;--max:1160px;
  --serif:Fraunces,Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--char);font:400 17px/1.6 var(--sans)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.1;margin:0 0 .5em;font-optical-sizing:auto;letter-spacing:-.015em}
h1{font-weight:700;font-size:clamp(2.3rem,6vw,3.5rem)}
h2{font-weight:650;font-size:clamp(1.75rem,3.8vw,2.5rem);max-width:22em}
h3{font-weight:650;font-size:1.3rem;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:var(--moss)}
img{max-width:100%;height:auto;display:block}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r1)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r1);z-index:99}
.skip:focus{left:8px}

/* Header oficial: banda lime con wordmark (sin cambios de marca) */
.hband{background:linear-gradient(90deg,#C7F022 0%,#D6F45F 45%,#EEFAC0 100%);position:sticky;top:0;z-index:20}
.hband .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding-top:8px;padding-bottom:8px}
.logo{display:block;line-height:0}.logo img{height:50px;width:auto}
.nav{display:none;gap:24px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font:600 .95rem var(--sans)}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.hcta{display:inline-flex;align-items:center;background:var(--ink);color:var(--lime);text-decoration:none;font:600 .92rem var(--sans);padding:10px 16px;border-radius:var(--r1);white-space:nowrap}
@media (min-width:900px){.nav{display:flex}.logo img{height:56px}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:600 1rem var(--sans);padding:15px 22px;border-radius:var(--r1);min-height:52px}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--white)}
.btn:hover{filter:brightness(.95)}
.btns{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.tlink{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:5px}

/* Capturas de producto */
.shot{margin:0}
.shot img{border-radius:var(--r2);box-shadow:0 1px 0 var(--rule),0 18px 40px -18px rgba(10,12,11,.35)}
.shot figcaption{font-size:.9rem;color:var(--graph);margin-top:12px;max-width:40em}

/* Hero: texto a la izquierda, producto grande a la derecha que sale del contenedor */
.hero{padding:44px 0 56px;overflow:hidden}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--lime) 62%,var(--lime) 92%,transparent 92%)}
.lead{font-size:1.15rem;max-width:32em;color:var(--char)}
.hero .note{font-size:.92rem;color:var(--graph);margin-top:18px;max-width:30em}
.hero-grid{display:grid;gap:36px}
@media (min-width:980px){
  .hero{padding:72px 0 56px}
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
  .hero-shot{margin-right:calc(-1 * max(20px, (100vw - 1160px) / 2 + 20px))}
  .hero-shot img{border-radius:var(--r2) 0 0 var(--r2)}
}

/* Secciones */
section{padding:72px 0}
.alt{background:var(--mist)}
.intro{max-width:40em;color:var(--graph);font-size:1.06rem}

/* Para quién: lista, no tarjetas */
.split{display:grid;gap:28px}
@media (min-width:980px){.split{grid-template-columns:5fr 7fr;gap:56px;align-items:start}}
.moments{margin:0;border-top:2px solid var(--ink)}
.moments div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.moments div{grid-template-columns:15rem 1fr;gap:20px}}
.moments dt{font:650 1.25rem/1.25 var(--serif);color:var(--ink)}
.moments dd{margin:0;color:var(--graph)}
.level{margin:28px 0 0;max-width:44em;color:var(--char);font-size:1rem;padding-left:16px;border-left:4px solid var(--lime)}

/* Reporte: imagen grande + frase fuerte */
.report{padding-top:24px}
.report-grid{display:grid;gap:36px}
@media (min-width:980px){.report-grid{grid-template-columns:7fr 5fr;gap:56px;align-items:center}}
.statement{font:500 clamp(1.3rem,2.4vw,1.6rem)/1.3 var(--serif);color:var(--ink);margin:4px 0 22px}
.method{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.method li{padding:12px 0;border-bottom:1px solid var(--rule);color:var(--graph)}
.method b{color:var(--ink)}

/* Paquetes: tabla comparativa en columnas con filetes */
.packs{display:grid;margin-top:32px;border-top:2px solid var(--ink)}
@media (min-width:900px){.packs{grid-template-columns:repeat(3,1fr)}.pk+.pk{border-left:1px solid var(--rule)}}
.pk{position:relative;padding:24px 22px 26px;border-bottom:1px solid var(--rule)}
.pk h3{margin-bottom:2px}
.pk .hrs{font:650 2.4rem/1 var(--serif);color:var(--ink);margin:6px 0 12px}
.pk .hrs small{font:600 .9rem var(--sans);color:var(--graph);letter-spacing:0}
.pk ul{margin:0;padding:0;list-style:none}
.pk li{padding:8px 0;border-top:1px solid var(--rule);font-size:.97rem;color:var(--char)}
.pk.star{background:var(--white)}
.tag{position:absolute;top:24px;right:22px;background:var(--lime);color:var(--ink);font:600 .78rem var(--sans);padding:4px 8px;border-radius:var(--r1)}
.cta-line{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.cta-line p{margin:0;color:var(--ink);font-weight:600;max-width:34em}

/* Proceso: lista numerada, sin tarjetas */
.steps{counter-reset:s;list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0 56px}
@media (min-width:800px){.steps{grid-template-columns:1fr 1fr}}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;padding:18px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);font:650 1.5rem/1.2 var(--serif);color:var(--moss)}
.steps h3{grid-column:2;margin:0 0 4px}
.steps p{grid-column:2;margin:0;color:var(--graph)}

/* Sobre David */
.about{display:grid;gap:28px;align-items:start}
.facts{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.facts li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--graph)}
.facts b{color:var(--ink)}
@media (min-width:900px){.about{grid-template-columns:1.1fr 1fr;gap:56px}}

/* FAQ */
.faq-grid{display:grid;gap:12px}
@media (min-width:980px){.faq-grid{grid-template-columns:4fr 8fr;gap:56px}}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font:600 1.05rem var(--sans);color:var(--ink);padding:16px 36px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.5rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--graph);margin:0 0 16px}

/* Contacto: la única sección oscura, a propósito (cierre). Todo el texto ≥ 7:1 */
.contact{background:var(--ink);color:#F1F3EE}
.contact h2{color:#fff}
.contact .intro{color:#F1F3EE}
.contact-grid{display:grid;gap:36px}
@media (min-width:900px){.contact-grid{grid-template-columns:6fr 5fr;gap:56px;align-items:start}}
.channels{list-style:none;margin:0;padding:0;border-top:1px solid #F1F3EE}
.channels a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:16px 0;border-bottom:1px solid #5b6057;color:#fff;text-decoration:none}
.channels a:hover b{color:var(--lime)}
.channels b{font:650 1.2rem var(--serif)}
.channels span{color:#F1F3EE}

/* Footer oficial: banda lime "YOU are the project." (sin cambios de marca) */
.fband{background:linear-gradient(90deg,#EEFAC0 0%,#D6F45F 55%,#C7F022 100%);color:var(--ink)}
.fband .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.yt{font:500 1.25rem Montserrat,sans-serif;margin:0}.yt b{font-weight:800}
.fcl{display:flex;flex-wrap:wrap;gap:6px 20px;font:600 .92rem Inter,sans-serif}
.fcl a{color:var(--ink);text-decoration:none}.fcl a:hover{text-decoration:underline}
.copy{background:var(--white);color:var(--graph);font-size:.8rem;text-align:center;padding:12px 20px}