/*
Theme Name: Elevate English Exams — Child (Twenty Twenty-Five)
Template: twentytwentyfive
Version: 1.2.0 (clean)
Description: Child theme Material 3 con paleta Elevate y títulos con Plus Jakarta Sans. Archivo optimizado.
Text Domain: elevate-child
*/
/* =========================
TOKENS & GLOBALS
========================= */
:root{
/* Paleta (vinculada a theme.json donde aplica) */
--md-primary: #C49B3E; /* mostaza */
--md-on-primary: #ffffff;
--md-secondary: #193446; /* azul petróleo */
--md-on-secondary: #ffffff;
--md-tertiary: #F4C8C1; /* rosa arena suave */
--md-on-tertiary: #2C1E1C;
--md-surface: #FFF8ED; /* crema */
--md-on-surface: #2A2623;
--md-background: #FFFCF7;
--md-outline: color-mix(in srgb, var(--md-primary) 25%, transparent);
/* Elevations */
--elev-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.05);
--elev-2: 0 6px 12px rgba(0,0,0,.06), 0 18px 36px rgba(0,0,0,.06);
--elev-soft: 0 2px 6px rgba(0,0,0,.05), 0 8px 16px rgba(0,0,0,.06);
/* Radios, espacio, tipografía */
--radius-s: 12px;
--radius-m: 18px;
--radius-l: 26px;
--space-1: .5rem; --space-2: .75rem; --space-3: 1rem;
--space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem;
--ff-body: var(--wp--preset--font-family--roboto);
--ff-display: var(--wp--preset--font-family--plus-jakarta-sans);
/* Layout */
--header-h: 68px;
/* Surfaces tonales */
--surface-1: color-mix(in srgb, var(--md-surface) 96%, var(--md-secondary) 4%);
--surface-2: color-mix(in srgb, var(--md-surface) 92%, var(--md-secondary) 8%);
--surface-3: color-mix(in srgb, var(--md-surface) 88%, var(--md-tertiary) 12%);
/* Acentos */
--accent-1: color-mix(in srgb, var(--md-primary) 75%, var(--md-secondary) 25%);
--accent-2: color-mix(in srgb, var(--md-primary) 60%, var(--md-tertiary) 40%);
/* Subrayados H2 */
--accent-navy: var(--md-secondary);
--accent-gold: var(--md-primary);
--accent-rose: var(--md-tertiary);
--underline-w: clamp(90px, 14vw, 180px);
--underline-h: 4px;
}
/* =========================
BASE
========================= */
*{ box-sizing:border-box }
html:focus-within{ scroll-behavior:smooth }
body{ margin:0;
font-family:var(--ff-body);
color:var(--md-on-surface);
background:
radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--md-tertiary) 8%, transparent) 0%, transparent 60%),
radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--md-secondary) 6%, transparent) 0%, transparent 60%),
linear-gradient(180deg, color-mix(in srgb, var(--md-surface) 85%, transparent) 0%, var(--md-background) 60%),
var(--md-background);
line-height:1.65;
text-rendering:optimizeLegibility; }
line-height:1.65;
text-rendering:optimizeLegibility;
}
main{ padding-inline: clamp(16px, 4vw, 48px); }
:target{ scroll-margin-top: var(--header-h); }
a{ color:var(--md-primary); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color: var(--accent-1); text-decoration-thickness:2px; }
img,svg,video{ max-width:100%; height:auto }
p,li{ max-width: 85ch; }
ul,ol{ padding-left: 1.2rem; }
small{ opacity:.85 }
/* Headings */
h1,h2,h3,h4{ font-family: var(--ff-display); font-weight:800; letter-spacing:-0.02em; text-wrap: balance; }
h1{ line-height:1.1; margin: var(--space-6) 0 var(--space-3); font-size: clamp(2.2rem, 2.6vw + 1.6rem, 3.6rem); }
h2{ line-height:1.15; margin: var(--space-5) 0 var(--space-2); font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.3rem); position:relative; }
h3{ font-weight:750; line-height:1.25; margin: var(--space-4) 0 var(--space-2); font-size: clamp(1.25rem, .9vw + 1rem, 1.7rem); }
h4,h5,h6{ font-weight:700; }
/* Subrayado H2 — sistema */
h2{ --underline-gradient: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-rose) 60%, var(--accent-gold) 100%); }
h2::after{
content:""; display:block; height: var(--underline-h); width: var(--underline-w);
margin-top:.35rem; border-radius:999px; opacity:.85;
background: var(--underline-gradient);
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-rose) 10%, transparent);
}
/* variantes opcionales */
.accent--sunrise{ --underline-gradient: linear-gradient(90deg, var(--accent-gold), var(--accent-rose) 60%, var(--accent-gold)); }
.accent--aurora{ --underline-gradient: linear-gradient(90deg, var(--accent-navy), #7c5cff 55%, var(--accent-gold)); }
.accent--rose{ --underline-gradient: linear-gradient(90deg, color-mix(in srgb, var(--accent-navy) 60%, #fff 40%), var(--accent-rose)); }
.accent--mono{ --underline-gradient: linear-gradient(90deg, color-mix(in srgb, var(--accent-navy) 20%, #fff 80%), var(--accent-navy)); }
.accent--thin{ --underline-h: 4px; } .accent--thick{ --underline-h: 10px; }
.accent--short{ --underline-w: 120px; } .accent--wide{ --underline-w: clamp(180px, 30vw, 520px); }
/* Ritmo secciones */
section, header, footer, nav{ margin-block: var(--space-5); }
section > * + *{ margin-top: var(--space-2); }
/* Helpers */
.wp-block-group.alignfull{ margin-left:0; margin-right:0; }
.is-layout-constrained{ max-width: none; }
/* =========================
HEADER & NAV
========================= */
.site-header{
position: sticky; top: 0; z-index: 1000;
background: color-mix(in srgb, var(--surface-2) 85%, transparent);
backdrop-filter: saturate(1.2) blur(10px);
border-bottom: 1px solid color-mix(in srgb, var(--md-on-surface) 10%, transparent);
min-height: var(--header-h);
padding: .6rem clamp(16px, 4vw, 48px);
}
.wp-block-navigation a{ text-decoration:none; padding:.5rem .7rem; border-radius: 999px; }
.wp-block-navigation a:hover{ background: color-mix(in srgb, var(--md-secondary) 18%, transparent); }
.wp-block-navigation__responsive-container{ backdrop-filter: blur(14px); }
/* Submenú (WP Navigation Block) */
/*header,*/ .site-header, .wp-block-navigation { position: relative; z-index: 1000; }
.wp-block-navigation-item { position: relative; }
.wp-block-navigation__submenu-container{
background:#fff !important; border:1px solid rgba(25,52,70,.12) !important; border-radius:16px !important;
padding:8px !important; min-width:240px; margin-top:0 !important; top: calc(100% + 8px) !important;
box-shadow:0 14px 30px rgba(0,0,0,.12) !important;
opacity:0; transform: translateY(6px) scale(.985); pointer-events:none;
transition: opacity .16s ease, transform .16s ease, box-shadow .18s ease;
}
.wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container:hover{
opacity:1; transform: translateY(0) scale(1); pointer-events:auto;
}
/* Puente hover */
.wp-block-navigation-item.has-child::after,
.wp-block-navigation-item:has(> .wp-block-navigation__submenu-container)::after{
content:""; position:absolute; left:0; right:0; top:100%; height:12px;
}
/* Ítems submenú */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content{
display:block; padding:10px 14px !important; border-radius:12px !important;
color:var(--md-secondary) !important; text-decoration:none !important; line-height:1.2; white-space:nowrap;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content{
background: rgba(233,200,98,.18) !important; border:1px solid rgba(25,52,70,.18) !important;
}
/* Header — mobile spacing */
@media (max-width: 767px){
header, .site-header, .wp-block-template-part header { padding: 12px 16px !important; }
.wp-block-site-logo img, .site-logo img { max-height: 32px; height:auto; }
.wp-block-navigation__responsive-container-open { margin-right: 4px; }
}
/* Menú móvil refinado */
@media (max-width: 767px){
.wp-block-navigation__responsive-container{ padding:24px 20px !important; background:#fff; }
.wp-block-navigation__responsive-container .wp-block-navigation-item__content{
display:block; padding:12px 12px !important; margin:0 4px; border-radius:8px; font-size:1.1rem; color:var(--md-secondary);
}
.wp-block-navigation__responsive-container .wp-block-navigation-item + .wp-block-navigation-item{
border-top:1px solid rgba(25,52,70,.08); margin-top:4px; padding-top:4px;
}
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container{
background:transparent !important; border:none !important; box-shadow:none !important;
padding:4px 0 4px 16px !important; margin-top:2px;
}
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
padding:8px 12px !important; font-size:1rem; border-radius:6px;
}
}
/* =========================
HERO
========================= */
#hero.hero-fw{
--ink:var(--md-secondary); --accent:var(--md-primary); --paper:var(--md-background); --card:var(--md-surface); --radius:20px;
position: relative; background: var(--paper); overflow: hidden;
max-width: 1200px; margin: 24px auto; border-radius: 24px; box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
#hero .hero-fw__inner{
max-width: 1200px; margin: 0 auto;
padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 24px);
display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); align-items:center;
}
@media (min-width: 960px){
#hero .hero-fw__inner{ grid-template-columns: 1.2fr 1fr; min-height: 72vh; }
}
/* Texto */
#hero .hero-fw__content h1{
margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.5px; color: var(--ink);
position: relative; margin-bottom: 18px;
}
#hero .hero-fw__content h1::after{
content: "• • • • • • • • •"; display:block;
font-size: clamp(.9rem, 1.2vw, 1.05rem); letter-spacing: .35rem; color: color-mix(in oklab, var(--ink) 70%, transparent);
margin-top: 10px; opacity: .45;
}
#hero .hero-fw__content p{ margin: 0 0 16px; color: var(--ink); opacity: .92; font-size: clamp(1rem, 1.6vw, 1.125rem); }
/* Pills */
#hero .lp-benefits{
display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:8px 0 16px; list-style:none;
}
#hero .lp-benefits li{
display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px;
background: rgba(233,200,98,.18); border:1.5px solid rgba(25,52,70,.22); color:var(--ink); font-weight:600; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
#hero .lp-microtrust{ opacity:.8; font-size:.95rem; }
/* CTA y Form */
html { scroll-behavior: smooth; }
#hero .as-btn--filled{ display:inline-block; padding:12px 18px; border-radius:16px; }
#hero .hero-fw__form .lp-form-card{
background: var(--card); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.08);
padding: 22px; border:1px solid rgba(25,52,70,.12);
}
#hero .lp-form-card h2{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#hero .lp-form-card .lp-form-note{ margin-top:4px; }
/* Mostrar form solo en desktop */
@media (max-width: 959px){ #hero .hero-fw__form{ display:none !important; } }
@media (min-width: 960px){
#hero .hero-fw__content .as-btn--filled{ display:none !important; }
#hero .hero-fw__content p:has(.as-btn--filled){ display:none !important; }
#hero .lp-benefits{ margin-bottom:8px; } #hero .lp-microtrust{ margin-top:8px; }
}
/* Decorativos hero */
#hero.hero-fw::before, #hero.hero-fw::after{
content:""; position:absolute; border-radius:50%; pointer-events:none; opacity:.12;
}
#hero.hero-fw::before{
width:560px; height:560px; right:-180px; top:-140px;
background: repeating-linear-gradient(90deg, var(--md-secondary) 0 3px, transparent 3px 16px),
radial-gradient(circle at 50% 50%, var(--accent) 0 52%, transparent 56%);
-webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 38%, #000 40% 60%, transparent 62%);
mask: radial-gradient(circle at 50% 50%, transparent 0 38%, #000 40% 60%, transparent 62%);
filter: drop-shadow(0 8px 22px rgba(0,0,0,.05));
}
#hero.hero-fw::after{
width: 80vw; height: 80vh; left: -35vw; bottom: -28vh; z-index:0;
background: radial-gradient(60% 60% at 50% 50%, rgba(233,200,98,.18) 0 38%, rgba(233,200,98,.10) 38% 52%, transparent 55%);
-webkit-mask: radial-gradient(80% 80% at 65% 65%, #000 0 72%, transparent 74%);
mask: radial-gradient(80% 80% at 65% 65%, #000 0 72%, transparent 74%);
filter: blur(.6px); opacity:.28;
}
#hero .hero-fw__content, #hero .hero-fw__form { isolation: isolate; }
/* Cambridge badge hero (logo grande con texto debajo) */
.lp-affiliate{
display:flex; flex-direction:column; align-items:flex-start; margin-top:12px; text-align:left;
}
.lp-affiliate__logo{ height:32px; width:auto; object-fit:contain; margin-bottom:4px; }
.lp-affiliate span{ font-size:.95rem; color:var(--md-secondary); font-weight:500; opacity:.9; line-height:1.3; }
/* Mobile del hero */
@media (max-width: 599px){
#hero .hero-fw__inner{ grid-template-columns:1fr; padding:24px 16px 28px; gap:16px; }
#hero .hero-fw__content{ max-width:34ch; }
#hero .hero-fw__content h1{ font-size:clamp(1.6rem, 7.5vw, 2.2rem); line-height:1.12; margin-bottom:14px; letter-spacing:-.3px; }
#hero .hero-fw__content h1::after{
content: "• • • • • • • • •"; display:block;
font-size:.85rem; letter-spacing:.25rem; color: color-mix(in oklab, var(--ink) 70%, transparent);
opacity:0; margin-top:8px; animation: heroDotsFade .8s ease-out forwards;
}
@keyframes heroDotsFade{ from{opacity:0; transform:translateY(6px);} to{opacity:.45; transform:translateY(0);} }
#hero.hero-fw::before, #hero.hero-fw::after{ display:none !important; }
#hero .hero-fw__content > p{ font-size:1rem; margin-bottom:14px; opacity:.95; }
#hero .lp-benefits{ gap:8px; margin:8px 0 14px; }
#hero .lp-benefits li{ padding:8px 12px; font-weight:600; font-size:.95rem; box-shadow:none; border-width:1px; }
#hero .as-btn--filled{ width:100%; text-align:center; padding:14px 16px; border-radius:14px; }
#hero .lp-microtrust{ font-size:.92rem; opacity:.8; }
}
/* Ajustes puntuales */
header{ margin-block:0 !important; }
section#hero{ margin-block:0 !important; }
[data-form-ml]{ padding:0 !important; }
/* =========================
BUTTONS (Material 3)
========================= */
.wp-block-button__link, a.as-btn{
display:inline-flex; gap:.6rem; align-items:center; justify-content:center;
padding:.9rem 1.2rem; border-radius: var(--radius-m); border:1px solid transparent;
font-weight:800; text-decoration:none; box-shadow: var(--elev-1);
transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, outline .2s;
}
.wp-block-button.is-style-fill .wp-block-button__link, a.as-btn--filled{
background: linear-gradient(180deg, color-mix(in srgb, var(--md-primary) 92%, transparent), color-mix(in srgb, var(--md-primary) 78%, transparent));
color: var(--md-on-primary);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover, a.as-btn--filled:hover{
transform: translateY(-1px); box-shadow: var(--elev-2);
}
.wp-block-button.is-style-outline .wp-block-button__link, a.as-btn--tonal{
background: color-mix(in srgb, var(--md-tertiary) 26%, var(--md-surface) 74%);
color: var(--md-on-surface);
border-color: transparent;
}
a.as-btn--outlined{
background: transparent; color: var(--md-primary);
border-width:2px;
border-image: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-rose) 60%, var(--accent-gold) 100%) 1;
box-shadow: none;
}
a.as-btn--text{ background:transparent; border-color:transparent; box-shadow:none; padding:.6rem .4rem; }
/* Focus ring accesible */
:where(a,button,.wp-block-button__link):focus-visible{
outline: 3px solid color-mix(in srgb, var(--md-secondary) 60%, transparent);
outline-offset: 2px;
}
/* =========================
CARDS (genérico)
========================= */
.card, .wp-block-group.is-style-card, section#cursos article, section#listado-cursos li{
background: var(--surface-1);
border: none;
border-radius: var(--radius-l);
box-shadow: var(--elev-1);
padding: var(--space-4);
}
.card > * + *{ margin-top: var(--space-2); }
/* =========================
DETAILS / FAQ
========================= */
details{
border: none; border-radius: var(--radius-m);
padding: .7rem .95rem; background: var(--surface-1);
box-shadow: var(--elev-1);
transition: box-shadow .22s ease, background-color .22s ease, transform .12s ease;
}
details + details{ margin-top: var(--space-2); }
summary{ cursor:pointer; list-style:none; font-weight:800; color:var(--md-on-surface); outline:none; }
summary::marker{ display:none; }
summary::after{ content:"▾"; float:right; transition: transform .2s ease; }
details[open] summary::after{ transform: rotate(-180deg); }
details > div{ margin-top:.6rem; color: var(--md-on-surface); }
details:hover{ box-shadow: var(--elev-soft); background: var(--surface-2); transform: translateY(-1px); }
summary::-webkit-details-marker{ display:none; }
*:focus:not(:focus-visible){ outline: none !important; box-shadow:none !important; }
/* =========================
CURSOS – “Elige tu camino”
========================= */
#cursos {
--ee-primary: var(--md-secondary);
--ee-accent: var(--md-primary);
--ee-card-bg: #fff;
--ee-radius: 16px;
--ee-shadow: 0 2px 12px rgba(0,0,0,.06);
--ee-shadow-hover: 0 10px 24px rgba(0,0,0,.12);
display: grid;
grid-template-columns: 1fr;
gap: clamp(16px, 2vw, 24px);
margin-block: clamp(24px, 6vw, 56px);
}
#cursos > h2{ grid-column:1 / -1; line-height:1.2; position:relative; margin:0 0 8px; }
#cursos > h2::after{ content:""; display:block; width:56px; height:4px; margin-top:10px; background: var(--ee-accent); border-radius:4px; }
@media (min-width: 900px){ #cursos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Card */
#cursos article{
position: relative; background: var(--ee-card-bg);
border-radius: var(--ee-radius); box-shadow: var(--ee-shadow);
padding: 16px 20px 20px; display:grid; grid-template-rows:auto auto auto 1fr; gap:8px; overflow:hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
#cursos article:hover{ transform: translateY(-2px); box-shadow: var(--ee-shadow-hover); }
/* Media placeholder off (sin imagen por ahora) */
#cursos article:not(:has(figure.course-media)){ grid-template-rows: auto auto 1fr; padding-top: 20px; }
/* Título + link estirado */
#cursos h3{ margin:0 0 6px; line-height:1.25; min-height: calc(1.25em * 2); display:block; position:relative; padding-right:26px; }
#cursos h3 a{ color: var(--ee-primary); text-decoration:none; position:relative; }
#cursos h3 a::after{ content:""; position:absolute; inset:-8px; } /* stretched-link */
#cursos h3::after{
content:"→"; position:absolute; right:2px; top:50%;
transform: translateY(-50%) translateX(-6px); opacity:0;
transition: transform .18s ease, opacity .18s ease; pointer-events:none;
}
#cursos article:hover h3::after{ opacity:.9; transform: translateY(-50%) translateX(0); }
/* Duración como pill */
#cursos article > p:last-of-type,
#cursos article > p:not([itemprop]){
display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; padding:8px 14px;
height:36px; box-sizing:border-box; border-radius:999px;
background: rgba(233,200,98,.15); border:1.5px solid rgba(25,52,70,.28);
font-weight:600; font-size:.95rem; line-height:1; color:var(--md-secondary); letter-spacing:.2px;
}
#cursos article > p:last-of-type strong,
#cursos article > p:not([itemprop]) strong{ font-weight:700; }
#cursos article > p:last-of-type strong::before,
#cursos article > p:not([itemprop]) strong::before{ content:"⏱"; font-weight:400; margin-right:4px; }
/* Orden visual */
#cursos article > h3{ grid-row:1; }
#cursos article > p:last-of-type{ grid-row:2; }
#cursos article > p[itemprop="description"]{ grid-row:3; margin:0; color: var(--ee-primary); opacity:.9; }
/* =========================
COMO FUNCIONA
========================= */
#como-funciona{
--ink:var(--md-secondary); --accent:var(--md-primary); --card:#fff; --radius:16px;
counter-reset: paso;
display:grid; grid-template-columns:1fr; gap: clamp(16px,2vw,24px);
margin-block: clamp(24px,6vw,56px);
}
#como-funciona > h2{ grid-column:1 / -1; margin:0 0 8px; line-height:1.2; position:relative; }
#como-funciona > h2::after{ content:""; display:block; width:56px; height:4px; margin-top:10px; background: var(--accent); border-radius:4px; }
@media (min-width: 900px){ #como-funciona{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
#como-funciona > article{
position:relative; background:var(--card);
border:1px solid rgba(25,52,70,.08); border-radius:var(--radius);
box-shadow:0 2px 12px rgba(0,0,0,.05);
padding:18px 18px 20px;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#como-funciona > article:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10); border-color: rgba(25,52,70,.16); }
#como-funciona > article::before{
counter-increment: paso; content: counter(paso, decimal-leading-zero);
position:absolute; left:16px; top:16px; padding:4px 10px; border-radius:999px;
background: rgba(233,200,98,.15); border:1.5px solid rgba(25,52,70,.25);
color:var(--md-secondary); font-weight:600; font-size:.85rem; letter-spacing:.5px; z-index:1;
}
#como-funciona > article h3{ margin:38px 0 8px; line-height:1.25; }
#como-funciona > article p{ margin:0; color:var(--ink); opacity:.92; }
#como-funciona > article:focus-within{ outline:3px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset:2px; }
@media (max-width: 360px){
#como-funciona > article{ padding:16px; }
#como-funciona > article::before{ left:12px; }
}
/* =========================
TABLAS
========================= */
table{ border-collapse:collapse; width:100%; }
th, td{ border:1px solid var(--md-outline); padding:.7rem .9rem; vertical-align:top; }
thead th{
background: var(--surface-2);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--md-on-surface) 12%, transparent);
color: var(--md-on-surface); text-align:left;
}
tbody td{ box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
/* =========================
FORMS
========================= */
input, select, textarea{
font: inherit; color:var(--md-on-surface);
background: var(--md-background);
border:1px solid var(--md-outline); border-radius: var(--radius-s);
padding:.75rem .9rem; width:100%;
}
input:focus, select:focus, textarea:focus{ outline:3px solid color-mix(in srgb, var(--md-primary) 35%, transparent); outline-offset:2px; }
label{ font-weight:650; display:block; margin-bottom:.4rem; }
/* =========================
BLOCKQUOTES & FIGURES
========================= */
blockquote{
margin: var(--space-3) 0; padding: var(--space-2) var(--space-3);
border-left: 5px solid var(--accent-2);
background: color-mix(in srgb, var(--md-tertiary) 14%, var(--md-surface) 86%);
border-radius: var(--radius-s);
}
figcaption{ font-size:.9rem; opacity:.8; }
/* =========================
FOOTER
========================= */
footer.wp-block-template-part{
--ink:var(--md-secondary); --muted:rgba(25,52,70,.70); --bg:var(--md-surface); --border:rgba(25,52,70,.12);
background: var(--bg); color: var(--ink); border-top:1px solid var(--border);
}
footer .has-global-padding{ max-width:1200px; margin-inline:auto; padding-inline: clamp(16px,4vw,24px) !important; }
footer .alignfull.is-content-justification-space-between.wp-block-group-is-layout-flex{
gap: clamp(16px,3vw,40px); align-items:start; flex-wrap:wrap;
}
footer .wp-block-site-logo img{ height:44px; width:auto; }
footer .wp-block-image img[src*="cambridge-logo-transparent"]{ height:26px !important; width:auto !important; object-fit:contain; filter:none; }
footer nav.wp-block-navigation{ min-width: min(260px, 42vw); }
footer .wp-block-navigation__container{ gap:0 !important; }
footer .wp-block-navigation-item__content{ display:block; padding:8px 0; color:var(--ink); text-decoration:none; border-radius:8px; }
footer .wp-block-navigation-item__content:hover{ background: rgba(233,200,98,.14); }
footer .wp-block-spacer[style*="--wp--preset--spacing--70"]{ height:24px !important; }
footer .wp-block-spacer[style*="--wp--preset--spacing--40"]{ height:8px !important; width:0 !important; }
footer .alignfull.wp-block-group-is-layout-flex:last-of-type{ border-top:1px solid var(--border); padding-top:12px; margin-top:16px; }
footer .has-small-font-size{ color: var(--muted); margin:0; }
@media (max-width: 900px){
footer .alignfull.is-content-justification-space-between.wp-block-group-is-layout-flex{ flex-direction:column; gap:18px; }
footer nav.wp-block-navigation{ min-width:0; }
}
/* ocultar duplicado de Política si sigue en el editor */
footer nav.wp-block-navigation a[href$="/politica-de-privacidad/"]:nth-of-type(n+2){ display:none; }
/* =========================
ACCESIBILIDAD & MISC
========================= */
a[href="#contenido"]{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
a[href="#contenido"]:focus{
position:fixed; left:16px; top:16px; width:auto; height:auto; padding:.6rem .8rem;
background: var(--md-primary); color: var(--md-on-primary); border-radius: var(--radius-s); z-index:1001;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
/* HERO casi full-bleed con 12px de margen lateral */
#hero.hero-fw{
margin-left: calc(50% - 50vw + 24px) !important;
margin-right: calc(50% - 50vw + 24px) !important;
width: calc(100vw - 48px) !important; /* 12px + 12px */
max-width: none !important;
border-radius: 24px;
}
/* El contenedor interno no debe re–encoger el ancho */
#hero.hero-fw .hero-fw__inner{
max-width: none !important;
padding-left: clamp(16px, 4vw, 24px);
padding-right: clamp(16px, 4vw, 24px);
}
/* =========================
GUTTERS MÓVILES — solo fuera del HERO
Añade paddings laterales a bloques full-width
========================= */
:root{ --gutter: clamp(12px, 4vw, 24px); }
/* Aplica a secciones de 1er nivel (excepto header/hero/footer) */
.wp-site-blocks > *:not(header):not(#hero):not(footer){
padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
/* Si un bloque usa alignfull, restablece gutters (excepto el hero) */
.wp-site-blocks > .wp-block-group.alignfull:not(#hero),
.wp-site-blocks > .wp-block-cover.alignfull:not(#hero),
.wp-site-blocks > .wp-block-columns.alignfull:not(#hero){
padding-inline: var(--gutter);
}
/* Columnas y grupos internos también con aire en móvil */
@media (max-width: 960px){
.wp-block-group,
.wp-block-columns{ padding-inline: var(--gutter); box-sizing: border-box; }
.wp-block-columns{ gap: 16px; }
}
/* Listas y details: separarlas del borde visual */
@media (max-width: 960px){
ul, ol{ padding-left: 1.2rem; margin-left: .2rem; }
details{ padding-left: calc(var(--gutter) - 2px); padding-right: calc(var(--gutter) - 2px); }
}
/* IMPORTANTE: limita el helper previo para no romper los gutters */
.wp-block-group.alignfull{ margin-left: 0; margin-right: 0; }
.is-layout-constrained{ max-width: none; }
@media (max-width: 960px){
/* Pero mantén full-bleed SOLO el hero */
#hero.hero-fw{
margin-left: calc(50% - 50vw + 24px) !important;
margin-right: calc(50% - 50vw + 24px) !important;
width: calc(100vw - 48px) !important;
}
}
/* Founder pill (M3) */
.founder-intro{
display:inline-flex; align-items:center; gap:12px;
margin: 6px 0 10px;
padding: 8px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--md-surface) 88%, var(--md-primary) 12%);
border: 1px solid color-mix(in srgb, var(--md-secondary) 15%, transparent);
box-shadow: var(--elev-1);
}
.founder-intro img{
width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
outline: 3px solid var(--md-background);
box-shadow: 0 2px 10px rgba(0,0,0,.08);
background:
radial-gradient(60% 60% at 50% 35%, color-mix(in srgb, var(--md-primary) 24%, transparent), transparent 70%);
}
.founder-intro figcaption{ display:flex; flex-direction:column; line-height:1.1 }
.founder-intro figcaption strong{
font-family: var(--ff-display); font-weight:800; color: var(--md-secondary);
}
.founder-intro figcaption span{ font-size:.95rem; opacity:.85 }
/* Desktop: ubicar el pill “flotando” dentro del hero sin tapar el contenido */
@media (min-width: 960px){
#hero .hero-fw__content{ position: relative; padding-bottom: 78px; }
.founder-intro{
position: absolute; left: 0; bottom: 0;
background: color-mix(in srgb, #fff 88%, var(--md-background) 12%);
}
}
/* 1) H1 sin puntitos decorativos en desktop */
@media (min-width: 960px){
#hero .hero-fw__content h1::after{ display:none !important; }
}
/* 2) Reducir separación vertical en la columna del hero */
#hero .hero-fw__content > * + *{ margin-top: .7rem; }
@media (min-width: 960px){
#hero .hero-fw__content > * + *{ margin-top: .8rem; }
}
/* 3) Chips: solo dos y más livianos */
#hero .lp-benefits{ gap:10px; }
#hero .lp-benefits li{
background: color-mix(in srgb, var(--md-background) 88%, var(--md-primary) 12%);
border:1px solid color-mix(in srgb, var(--md-secondary) 18%, transparent);
box-shadow: none;
}
/* Chips principales */
#hero .lp-benefits li{
background: color-mix(in srgb, var(--md-background) 88%, var(--md-primary) 12%);
border: 1px solid color-mix(in srgb, var(--md-secondary) 18%, transparent);
border-radius: 999px;
padding: 8px 14px;
font-weight: 600;
font-size: .95rem;
}
/* Fila de confianza */
.trust-row{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin-top:.5rem; font-size:.95rem;
color: color-mix(in srgb, var(--md-on-surface) 76%, black 0%);
}
.trust-row__logo{ height:20px; width:auto; opacity:.9; }
.trust-row__meta{
display:flex; align-items:center; gap:6px;
}
.trust-row__icon{ color: var(--md-primary); }
.trust-row__founder{
display:flex; align-items:center; gap:8px;
padding:4px 8px;
border-radius:999px;
background: color-mix(in srgb, #fff 88%, var(--md-background) 12%);
border:1px solid color-mix(in srgb, var(--md-secondary) 12%, transparent);
}
.trust-row__founder img{
width:28px; height:28px;
border-radius:50%;
object-fit:cover;
}
.trust-row__founder em{ font-style:normal; font-size:.9rem; opacity:.9; }
/* =======================================================
PRUEBA SOCIAL — Grid ordenado por áreas
======================================================= */
#prueba-social {
display: grid;
gap: clamp(16px, 2.4vw, 24px);
grid-template-areas:
"title"
"panel"
"bullets"
"quotes";
}
/* Desktop: 2 columnas con panel a la izquierda */
@media (min-width: 960px) {
#prueba-social {
grid-template-columns: 340px 1fr;
grid-template-areas:
"title title"
"panel bullets"
"panel quotes";
align-items: start;
column-gap: 32px;
}
}
/* Áreas principales */
#prueba-social > h2 {
grid-area: title;
margin-bottom: 0.25rem;
}
#prueba-social > .founder-panel {
grid-area: panel;
align-self: start;
}
#prueba-social > ul,
#prueba-social > .feature-list {
grid-area: bullets;
}
#prueba-social > section[aria-label="Testimonios"] {
grid-area: quotes;
}
/* =======================================================
LISTA DE BULLETS — Con íconos
======================================================= */
.feature-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 18px; /* más aire entre ítems */
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 1rem;
line-height: 1.5; /* mejora lectura */
}
.feature-list .icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: color-mix(in srgb, var(--md-primary) 14%, var(--md-background) 86%);
color: var(--md-secondary);
box-shadow: var(--elev-1);
}
.feature-list svg {
width: 16px;
height: 16px;
}
@media (min-width: 960px) {
.feature-list {
gap: 20px; /* aún más aire en desktop */
}
}
/* Hover sutil */
.feature-list li:hover .icon {
background: color-mix(in srgb, var(--md-primary) 20%, var(--md-background) 80%);
transform: scale(1.05);
transition: 0.2s ease;
}
/* =======================================================
PANEL DE FUNDADORA
======================================================= */
.founder-panel {
padding: 16px;
border-radius: 18px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--md-surface) 92%, var(--md-primary) 8%) 0%,
var(--md-surface) 100%
);
border: 1px solid color-mix(in srgb, var(--md-secondary) 14%, transparent);
box-shadow: var(--elev-1);
}
.founder-panel__img {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
outline: 3px solid var(--md-background);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.founder-panel__role {
font-size: 0.8rem;
opacity: 0.8;
}
.founder-panel__quote {
margin: 0.6rem 0 0;
}
/* Sticky en desktop */
@media (min-width: 960px) {
#prueba-social > .founder-panel {
position: sticky;
top: calc(var(--header-h, 80px) + 16px);
}
}
/* =======================================================
TESTIMONIOS — Cards consistentes
======================================================= */
#prueba-social section[aria-label="Testimonios"] {
display: grid;
gap: 12px;
max-width: 60ch;
}
#prueba-social section[aria-label="Testimonios"] figure {
margin: 0;
padding: 12px 14px;
border-radius: 14px;
background: color-mix(in srgb, var(--md-surface) 96%, var(--md-primary) 4%);
border: 1px solid color-mix(in srgb, var(--md-secondary) 12%, transparent);
box-shadow: var(--elev-1);
}
#prueba-social section[aria-label="Testimonios"] blockquote {
margin: 0 0 0.4rem;
padding: 0;
border: none;
background: transparent;
}
#prueba-social section[aria-label="Testimonios"] figcaption {
font-size: 0.9rem;
opacity: 0.8;
margin: 0;
}
/* AJUSTES FINALES */
#hero h1{ font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height:1.08; }
#hero p{ line-height:1.55; }
#hero .lp-benefits li{ padding:8px 12px; box-shadow:none; }
.trust-row{ gap:10px; align-items:center; }
.trust-row > *{ line-height:1; }
:root{ --gutter: clamp(14px, 5vw, 24px); }
#cursos article{
background: color-mix(in srgb, var(--md-surface) 94%, var(--md-primary) 6%);
border: 1.5px solid color-mix(in srgb, var(--md-secondary) 16%, transparent);
}
#cursos article > p:last-of-type{
height: 32px; padding:6px 10px; border-width:1px;
font-size:.9rem;
}
@media (min-width: 960px){ .feature-list{ gap: 22px; } }
.founder-panel{
background: linear-gradient(180deg,
color-mix(in srgb, var(--md-surface) 94%, var(--md-primary) 6%) 0%,
var(--md-surface) 100%);
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.06);
}
#prueba-social [aria-label="Testimonios"] figure{ border-radius:12px; }
#prueba-social blockquote{ line-height:1.5; }
#como-funciona article{ min-height: 140px; display:flex; flex-direction:column; gap:.35rem; }
#como-funciona h3{ line-height:1.2; }
#faq details{ transition:border-color .2s ease, background .2s ease; }
#faq summary{ padding:14px 16px; }
#faq details[open]{ background: color-mix(in srgb, var(--md-surface) 96%, var(--md-primary) 4%); }
#formulario input, #formulario button{ height:48px; }
#formulario input:focus, #formulario button:focus{
outline: 2px solid color-mix(in srgb, var(--md-secondary) 60%, white 40%);
outline-offset: 2px;
}
footer{ padding-block: clamp(28px, 4vw, 44px); }
footer a:hover{ text-decoration: underline; text-underline-offset:2px; }
:root{
--elev-0: 0 0 0 rgba(0,0,0,0);
--elev-1: 0 1px 2px rgba(0,0,0,.05), 0 6px 12px rgba(0,0,0,.06);
--elev-2: 0 1px 3px rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.08);
}
.card, #cursos article{ box-shadow: var(--elev-1); }
.card:hover{ box-shadow: var(--elev-2); }
.card:hover{ transform: translateY(-2px); transition: transform .16s ease; }
.as-btn:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.wave-separator {
position: relative;
height: 16px;
margin: 32px 0;
background: url('data:image/svg+xml;utf8,') repeat-x;
background-size: 200px 16px;
opacity: 0.6;
}
/* ===== Ritmo vertical general ===== */
:root{
--section-gap: clamp(40px, 8vw, 96px);
--section-gap-sm: clamp(28px, 5vw, 56px);
}
/* separaciones entre secciones */
#faq{ margin-block: var(--section-gap-sm); }
#faq + #formulario{ margin-top: var(--section-gap); }
/* ===== FAQ: más aire interno ===== */
#faq{ padding-block: clamp(16px, 3vw, 28px); }
#faq details + details{ margin-top: 12px; } /* espacio entre items */
#faq summary{ padding: 14px 16px; } /* hit-area cómodo */
#faq details[open]{ padding-bottom: 8px; }
/* separador ondulado sutil bajo FAQ (azul petróleo) */
#faq::after{
content:""; display:block; height:16px;
margin-top: clamp(20px, 3.5vw, 36px);
background: url('data:image/svg+xml;utf8,')
repeat-x center / 200px 16px;
opacity:.6;
}
/* ==== 1) Quitar ondulado bajo el FAQ (si quedó) ==== */
#faq::after{ content:none !important; display:none !important; }
/* ==== 2) Ritmo consistente de títulos de sección ==== */
/* aplica a todos los h2 dentro de secciones del main */
main section > h2{
margin-top: 0;
margin-bottom: clamp(16px, 2.2vw, 28px); /* mismo respiro en todas */
line-height: 1.15;
}
/* evita “doble margen” si el siguiente bloque ya trae su propio mt */
main section > h2 + *{ margin-top: 0; }
/* refuerzo explícito en los 2 que notaste más pegados */
#faq > h2,
#formulario > h2{
margin-bottom: clamp(18px, 2.4vw, 32px);
}
/* ==== 3) FAQ: mantener aire interno sin ornamentos ==== */
#faq{ padding-block: clamp(16px, 3vw, 28px); }
#faq details + details{ margin-top: 12px; }
#faq summary{ padding: 14px 16px; }
#faq details[open]{ padding-bottom: 8px; }
/* ==== 4) Formulario “al aire” (sin caja) ==== */
#formulario{
max-width: 880px; /* legibilidad */
margin-inline: auto;
padding: 0; /* sin padding extra */
background: none;
border: 0;
box-shadow: none;
}
/* mantener foco y ergonomía */
#formulario input, #formulario button{ height: 48px; }
/* si el embed permite, que los campos tengan un gap cómodo */
#formulario [data-form-ml],
#formulario form{ display: grid; gap: 12px; }
/* ==== 5) Separación entre FAQ y Form (más respiro) ==== */
:root{
--section-gap: clamp(40px, 8vw, 96px);
--section-gap-sm: clamp(28px, 5vw, 56px);
}
#faq{ margin-block: var(--section-gap-sm); }
#faq + #formulario{ margin-top: var(--section-gap); }
/* FAQ – summary limpio con caret consistente */
#faq summary{
display: flex;
align-items: center;
gap: .75rem;
list-style: none; /* por si algún navegador lo muestra */
line-height: 1.25;
}
#faq summary::-webkit-details-marker{ display:none; } /* quita marcador nativo */
/* flecha (caret) propia */
#faq summary::after{
content:"";
margin-left: auto;
width: 18px; height: 18px;
flex: 0 0 18px;
background: url('data:image/svg+xml;utf8,\
') center/contain no-repeat;
opacity: .8;
transition: transform .2s ease;
}
#faq details[open] summary::after{ transform: rotate(180deg); }
/* tactilidad y espaciados en mobile */
@media (max-width: 767px){
#faq summary{ padding: 14px 16px; }
#faq details + details{ margin-top: 12px; }
}
/* ====== MENÚ MÓVIL (WP Navigation) – overlay por encima del header ====== */
@media (max-width: 1024px){
/* 1) El overlay del menú: que sea fullscreen, fijo y con z-index alto */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container[aria-hidden="false"],
.wp-block-navigation__responsive-dialog.is-menu-open,
dialog.wp-block-navigation__responsive-dialog[open] {
position: fixed !important;
inset: 0 !important; /* top/right/bottom/left = 0 */
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
max-width: none !important;
max-height: none !important;
background: #fff !important;
z-index: 10000 !important; /* por encima del header */
padding: calc(env(safe-area-inset-top,0px) + 20px) 20px 24px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
/* (Si el bloque usa