/* Versión clara, sobria: crema, tinta casi negra, un tostado apagado como único acento. Mucho aire y mayúsculas finas. */
:root {
  --fondo: #F4EFE7; --fondo-2: #EBE4D8; --linea: #D9CFBF;
  --beige: #24211E; --beige-suave: #6E665C; --laton: #8A6A45; --salvia: #6F7A62;
  color-scheme: light;
}
body { font-weight: 300; }
h1, h2 { font-weight: 400; letter-spacing: -0.005em; }
h2 { font-style: normal; }
h1 em { font-style: italic; color: var(--beige); }
.eyebrow { color: var(--beige-suave); letter-spacing: .36em; }
.marca { gap: 6px; }
.marca .nombre { font: 500 22px/1 var(--titulo); letter-spacing: .34em; padding-left: .34em; }
.marca .oficio { font: 9.5px/1 var(--mayus); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: var(--beige-suave); }
.boton { background: var(--beige); border-color: var(--beige); color: var(--fondo); }
.boton.hueco { background: transparent; color: var(--beige); border-color: var(--beige); }
.foto-arco img { border-radius: 0; }
.foto-arco figcaption { background: var(--fondo); }
.paso { border-top-color: var(--beige); }
.paso .n { color: var(--beige-suave); }
.servicio .precio, .faq summary::after { color: var(--beige-suave); }
.comparar .tirador::after { background: var(--fondo); }
.cta-final { border-color: var(--beige); }
.texto p, .texto li { color: #3A3530; }
.garantias li::before { border-color: var(--beige-suave); }
@media (max-width: 600px) { .marca .nombre { font-size: 19px; } }

/* ---------- Primera idea 3D: formulario ---------- */
.idea { padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 8vw, 110px); }
.idea-cabeza { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: 1.2fr 1fr; align-items: end; margin: 18px 0 clamp(32px, 5vw, 56px); }
.idea-cabeza h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; margin: 10px 0 18px; }
.idea-cabeza h1 em { font-style: italic; color: var(--laton); }
.pasos-idea { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 18px; }
.pasos-idea li { counter-increment: p; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; color: var(--beige-suave); font-size: 15px; line-height: 1.55; }
.pasos-idea li::before { content: "0" counter(p); grid-row: span 2; font: 400 30px/1 'Cormorant Garamond', serif; color: var(--laton); }
.pasos-idea b { color: var(--beige); font-weight: 500; }
.formulario { display: grid; gap: 22px; max-width: 920px; }
.formulario fieldset { border: 1px solid var(--linea); background: var(--fondo-2); margin: 0; padding: clamp(18px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.formulario legend { font: 12px/1 'Tenor Sans', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--laton); padding: 0 10px; }
.formulario label { display: grid; gap: 7px; font-size: 13px; letter-spacing: .04em; color: var(--beige-suave); }
.formulario .ancho { grid-column: 1 / -1; }
.formulario input:not([type=checkbox]), .formulario select, .formulario textarea { font: 400 16px/1.4 'Jost', sans-serif; color: var(--beige); background: var(--fondo); border: 1px solid var(--linea); border-radius: 0; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 1px solid var(--laton); border-color: var(--laton); }
.formulario input[type=file] { padding: 10px; font-size: 14px; }
.formulario .nota { font-size: 13px; color: var(--beige-suave); margin: 0; }
.formulario .acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.formulario .acepto input { margin-top: 3px; accent-color: var(--beige); }
.formulario button { justify-self: start; }
@media (max-width: 760px) {
  .idea-cabeza, .formulario fieldset { grid-template-columns: 1fr; }
  .formulario button { justify-self: stretch; }
}

/* ---------- Revisión: menos texto, renders grandes ---------- */
.pasos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.directo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
figure.obra.ancha img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .pasos.tres { grid-template-columns: 1fr; } }
.lamina { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lamina figure { margin: 0; background: var(--fondo-2); border: 1px solid var(--linea); padding: clamp(14px, 2vw, 24px); }
.lamina img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
@media (max-width: 760px) { .lamina { grid-template-columns: minmax(0, 1fr); } }
.lecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; max-width: 980px; }
.pasos-idea.lecciones li::before { content: counter(p, decimal-leading-zero); }
.lecciones li b { display: block; }
@media (max-width: 760px) { .lecciones { grid-template-columns: minmax(0, 1fr); } }
.suscribir { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin-top: 8px; }
.suscribir input[type=email] { flex: 1 1 220px; min-width: 0; font: 400 16px/1.4 'Jost', sans-serif; color: var(--beige); background: var(--fondo); border: 1px solid var(--linea); border-radius: 0; padding: 13px 14px; }
.suscribir input[type=email]:focus { outline: 1px solid var(--laton); border-color: var(--laton); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Pasada de lujo: aire, imagen a sangre, sin cajas ---------- */
section { border-top: 0; padding-block: clamp(44px, 6vw, 88px); }
header.cabecera { border-bottom: 0; padding-block: 22px 14px; background: color-mix(in srgb, var(--fondo) 92%, transparent); }
header.cabecera .envoltura { flex-direction: column; justify-content: center; gap: 16px; }
nav.menu { justify-content: center; gap: 6px clamp(14px, 2.4vw, 34px); font-size: 11px; letter-spacing: .26em; }
.marca .nombre { font-weight: 400; font-size: 24px; letter-spacing: .42em; padding-left: .42em; }
.marca .oficio { letter-spacing: .5em; padding-left: .5em; font-size: 9px; }
.boton { padding: 16px 30px; font-size: 11px; letter-spacing: .28em; }
.enlace { justify-self: start; display: inline-block; font: 11px/1 var(--mayus); letter-spacing: .3em; text-transform: uppercase; color: var(--beige); text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid var(--beige); transition: letter-spacing .4s ease; }
.enlace:hover { letter-spacing: .36em; }
@media (prefers-reduced-motion: reduce) { .enlace { transition: none; } }
.sangre { margin: 0 calc(-1 * clamp(16px, 5vw, 64px)); }
.sangre img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
.portada-lujo { padding-block: 0 clamp(64px, 10vw, 140px); gap: clamp(40px, 6vw, 80px); }
.lema { display: grid; justify-items: center; text-align: center; gap: 26px; }
.lema h1 { font-size: clamp(38px, 5.4vw, 76px); max-width: 15ch; text-wrap: balance; font-weight: 300; }
.lema .enlace { justify-self: center; }
.pie-foto { font: 11px/1.6 var(--mayus); letter-spacing: .26em; text-transform: uppercase; color: var(--beige-suave); text-align: center; max-width: none; }
.cabeza h2 { font-style: normal; font-weight: 300; }
.servicios { border: 0; gap: clamp(28px, 4vw, 64px); }
.servicio { padding: 0; }
.servicio + .servicio { border-left: 0; }
.servicio h3 { font-weight: 400; }
.paso { border-top-width: 1px; border-top-color: var(--linea); }
.directo { justify-items: center; text-align: center; margin-inline: auto; }
.directo .botones, .directo .suscribir { justify-content: center; }
.lamina figure { border: 0; background: transparent; }
@media (max-width: 760px) {
  .sangre img { aspect-ratio: 4 / 5; }
  .marca .nombre { font-size: 18px; letter-spacing: .32em; }
}
.guia-banda { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.guia-img { display: block; }
.guia-img img { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; box-shadow: 0 18px 40px -18px rgba(36,33,30,.35); }
.guia-banda h1 { font-size: clamp(34px, 4.6vw, 60px); text-wrap: balance; }
.servicios:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .guia-banda { grid-template-columns: minmax(0, 1fr); } .guia-img img { max-width: 240px; } }

/* Aula y clases online */
.aula-cabeza{padding-bottom:24px}
.progreso{height:3px;background:rgba(46,42,38,.12);max-width:420px;margin-top:28px}
.progreso i{display:block;height:100%;width:0;background:var(--laton);transition:width .4s}
.progreso-num{font-size:13px;margin-top:8px}
.aula-lista{list-style:none;padding:0;margin:0;border-top:1px solid var(--linea)}
.aula-lista a{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}
.aula-lista a:hover{background:rgba(176,141,87,.06)}
.aula-lista .num{font-family:'Cormorant Garamond',serif;font-size:28px;opacity:.55}
.aula-lista b{display:block;font-weight:500;margin-bottom:2px}
.aula-lista .estado{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.aula-lista a.vista .estado{opacity:1}
.aula-lista a.vista .estado::before{content:'✓ '}
.aula-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.aula-rejilla{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:56px;align-items:start;margin-top:24px}
.aula-video{width:100%;aspect-ratio:9/16;background:#EDE6DA;display:block}
.aula-video.pronto{display:grid;place-content:center;text-align:center;padding:24px}
.ejercicio{border-left:2px solid var(--laton);padding:6px 0 6px 18px;margin:8px 0}
.aula-nav{justify-content:space-between;margin-top:48px}
.muestra{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:56px;align-items:center}
.muestra video{width:100%;aspect-ratio:9/16;background:#EDE6DA}
@media (max-width:760px){
  .aula-extra,.aula-rejilla,.muestra{grid-template-columns:1fr;gap:28px}
  .aula-video,.muestra video{max-width:340px;margin:0 auto}
  .aula-lista a{grid-template-columns:40px 1fr;}
  .aula-lista .estado{grid-column:2}
}
@media (min-width:761px){.rejilla:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}}
.aula-bienvenida{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
.portada .fecha{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;margin:4px 0 8px}
@media (max-width:760px){.aula-bienvenida{grid-template-columns:1fr;gap:24px}}
/* Galería de proyectos */
.galeria{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.galeria figure{margin:0;position:relative;overflow:hidden}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.galeria figure:hover img{transform:scale(1.03)}
.galeria figcaption{position:absolute;left:18px;bottom:14px;color:#fff;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.g-alta{grid-column:span 4;aspect-ratio:4/5}
.g-ancha{grid-column:span 8;aspect-ratio:16/10}
.galeria .g-ancha:nth-child(3){grid-column:span 8}
/* Instagram */
.ig-banda{padding:72px 0 24px;text-align:center}
.ig-cabeza{display:grid;gap:6px;text-decoration:none;color:inherit;margin-bottom:28px}
.ig-usuario{font-family:'Cormorant Garamond',serif;font-size:32px;font-style:italic}
.ig-rejilla{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ig-rejilla img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:opacity .3s}
.ig-rejilla a:hover img{opacity:.85}
@media (max-width:760px){
  .galeria{grid-template-columns:1fr 1fr;gap:10px}
  .g-alta{grid-column:span 1}
  .g-ancha,.galeria .g-ancha:nth-child(3){grid-column:span 2}
  .ig-rejilla{grid-template-columns:repeat(3,1fr);gap:4px}
}
/* Láminas */
section.lamina{grid-template-columns:1.6fr 1fr}
.laminas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
.laminas a{display:block;text-decoration:none;color:inherit}
.laminas img{width:100%;height:auto;display:block;box-shadow:0 18px 40px -24px rgba(46,42,38,.45)}
.laminas span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:10px;opacity:.75}
.tabs{display:flex;gap:22px;justify-content:center;margin:0 0 22px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:1px solid transparent;padding:4px 0;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:inherit;opacity:.6}
.tabs button[aria-pressed="true"]{opacity:1;border-bottom-color:currentColor}
@media (max-width:760px){section.lamina{grid-template-columns:1fr}.laminas{grid-template-columns:1fr 1fr}.laminas a:first-child{grid-row:span 2}}
/* módulos del curso */
.aula-lista li.modulo,.lecciones li.modulo{list-style:none;margin:28px 0 8px;padding:0;border:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave,#8a7f74);counter-increment:none}
.aula-lista li.modulo:first-child,.lecciones li.modulo:first-child{margin-top:0}
.aula-video::cue{font-size:15px}
.lecciones.modulos{counter-reset:p -1}
.aula-leccion.ancha .aula-rejilla{grid-template-columns:1fr;gap:32px}
.aula-leccion.ancha .aula-video{aspect-ratio:16/9;max-width:none;background:#1f1c19}
.aula-leccion.ancha .aula-rejilla>.pila{max-width:760px}
@media (max-width:760px){.aula-leccion.ancha .aula-video{max-width:none}}
/* antes y después vertical (vestidor) */
.antes-despues{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:64px;align-items:center}
.comparar.vertical{aspect-ratio:941/1672}
@media (max-width:760px){.antes-despues{grid-template-columns:1fr;gap:28px}.comparar.vertical{aspect-ratio:941/1672;max-width:420px;width:100%;margin:0 auto}}
.marca .sello { display: block; justify-self: center; color: var(--laton); margin-bottom: 4px; line-height: 0; }
.pie-web .marca .sello { justify-self: start; }
.texto .garantias { margin-top: 18px; }
/* accesibilidad */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--beige); color: var(--fondo); padding: 10px 16px; font-size: 13px; letter-spacing: .1em; }
.saltar:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: 140px; }
a, button { touch-action: manipulation; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }
.servicios-lista { row-gap: clamp(28px, 4vw, 48px); }
.rejilla.servicios-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rejilla.servicios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rejilla.servicios-lista { grid-template-columns: minmax(0, 1fr); } }