/* El Sombrero de Goya — hoja de estilos
   Papel de acuarela, tinta y la llama naranja del sombrero.
   Pigmentos de la paleta = colores de la marca (brand book Impulser). */

:root{
  --papel:#F3ECDD;      /* Crema papel (marca) */
  --papel-2:#ECE3D0;
  --papel-3:#DCD0B8;
  --blanco:#FBF8F1;     /* passe-partout */
  --tinta:#1A1A22;      /* Negro tinta (marca) */
  --tinta-2:#46434D;
  --tinta-3:#77727E;
  --llama:#F0701E;      /* Naranja llama (marca) */
  --llama-2:#B84E0C;    /* llama para texto sobre papel (contraste AA) */
  --cobalto:#2B4C9B;
  --sepia:#78563A;
  --marco:#2A241E;

  --f-disp:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-text:'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --w:1320px;
  --gut:clamp(16px, 4vw, 48px);
  --r:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sombra-cuadro:0 1px 1px rgba(26,26,34,.08), 0 14px 30px -14px rgba(26,26,34,.35);
}

@font-face{font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f-text);font-size:17px;line-height:1.6;font-weight:400;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
/* grano del papel */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .40  0 0 0 0 .33  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body>*{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:420;line-height:1.04;margin:0;letter-spacing:-.015em;
  font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;text-wrap:balance}
em,.it{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
h1 em,h2 em{color:var(--llama-2)}
:focus-visible{outline:2px solid var(--llama);outline-offset:3px;border-radius:2px}
::selection{background:rgba(240,112,30,.25)}

.wrap{width:100%;max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografía utilitaria ---------- */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--tinta-2);max-width:58ch}
.h-xl{font-size:clamp(46px,7.4vw,112px);font-weight:380;letter-spacing:-.03em;line-height:.96}
.h-l{font-size:clamp(36px,4.8vw,68px);letter-spacing:-.025em}
.h-m{font-size:clamp(26px,2.8vw,38px)}
.h-s{font-size:clamp(21px,1.8vw,25px);line-height:1.15}
.mono{font-family:var(--f-mono)}
.muted{color:var(--tinta-3)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;
  font:600 15.5px/1 var(--f-text);text-decoration:none;border:1.5px solid var(--tinta);cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-tinta{background:var(--tinta);color:var(--papel)}
.btn-tinta:hover{background:#000}
.btn-tinta .dot{width:8px;height:8px;border-radius:50%;background:var(--llama);box-shadow:0 0 0 4px rgba(240,112,30,.22)}
.btn-linea{background:transparent;color:var(--tinta)}
.btn-linea:hover{background:var(--tinta);color:var(--papel)}
.btn:active{transform:translateY(1px)}
.enlace{font-weight:600;text-decoration:none;background:linear-gradient(var(--llama),var(--llama)) 0 100%/100% 2px no-repeat;padding-bottom:2px;transition:background-size .3s var(--ease)}
.enlace:hover{background-size:0 2px;background-position:100% 100%}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(243,236,221,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-color:var(--papel-3)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.logo{display:block;flex:none}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav>a,.nav .dd>button{font:500 15px/1 var(--f-text);color:var(--tinta);text-decoration:none;padding:10px 12px;border-radius:999px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav .dd>button:hover,.nav>a[aria-current]{background:var(--papel-2)}
.dd{position:relative}
.dd svg{width:12px;height:12px;transition:transform .2s}
.dd-panel{position:absolute;top:calc(100% + 8px);left:-8px;min-width:290px;background:var(--blanco);border:1px solid var(--papel-3);border-radius:10px;padding:8px;box-shadow:0 20px 40px -20px rgba(26,26,34,.35);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.2s var(--ease)}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd:hover svg,.dd.open svg{transform:rotate(180deg)}
.dd-panel a{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:7px;text-decoration:none}
.dd-panel a:hover{background:var(--papel)}
.dd-panel b{display:block;font:600 15px/1.3 var(--f-text)}
.dd-panel small{display:block;color:var(--tinta-3);font-size:13px;line-height:1.35;margin-top:2px}
.pig{width:14px;height:14px;border-radius:50% 45% 55% 50%;margin-top:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.top-cta{display:flex;align-items:center;gap:10px}
.top-cta .btn{min-height:44px;padding:0 18px;font-size:14.5px}
.tel{font:500 14.5px var(--f-mono);text-decoration:none;color:var(--tinta-2);padding:8px 6px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--tinta);background:none;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--tinta);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--tinta)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-m{display:none}
@media (max-width:1080px){
  .nav,.tel{display:none}
  .burger{display:inline-flex}
  .menu-m{position:fixed;inset:78px 0 0 0;background:var(--papel);z-index:49;padding:24px var(--gut) 40px;overflow:auto;display:block;opacity:0;visibility:hidden;transition:.25s var(--ease)}
  body.menu-open .menu-m{opacity:1;visibility:visible}
  .menu-m a{display:block;font:420 30px/1.15 var(--f-disp);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--papel-3)}
  .menu-m .sub a{font:500 17px/1.3 var(--f-text);padding:10px 0 10px 18px;border:0}
  .menu-m .btn{margin-top:24px;width:100%;justify-content:center;font:600 16px var(--f-text);border-bottom:1.5px solid var(--tinta)}
}
@media (max-width:560px){
  .top-in{height:68px}
  .logo img{height:38px}
  .menu-m{inset:68px 0 0 0}
  .top-cta .btn{display:none}
}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-alt{background:var(--papel-2)}
.sec-tinta{background:var(--tinta);color:var(--papel)}
.sec-tinta .eyebrow,.sec-tinta .lead{color:#C9C2B3}
.sec-tinta h2 em{color:var(--llama)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head .h-l{margin-top:16px}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- HERO ---------- */
.hero{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(40px,6vw,80px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero h1{margin:22px 0 26px}
.hero h1 .l2{display:block;padding-left:clamp(0px,6vw,90px)}
.hero .lead{margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:24px;border-top:1px solid var(--papel-3);font-size:14.5px;color:var(--tinta-2)}
.hero-meta b{font-weight:600;color:var(--tinta)}
.g-rating{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.g-rating .st{color:#E7A52A;letter-spacing:1px}
@media (max-width:900px){.hero-g{grid-template-columns:minmax(0,1fr)}.hero-visual{order:-1;max-width:440px;margin:0 auto;width:100%;justify-self:center}}

.hero-visual{width:min(100%, calc((100svh - 250px) * .74));min-width:min(100%,340px);justify-self:end}
.lienzo{position:relative;aspect-ratio:900/1216;width:100%}
.lienzo canvas,.lienzo>img{position:absolute;inset:0;width:100%;height:100%}
.lienzo>img{object-fit:cover}
.lienzo.gl>img{opacity:0}
.fases{display:flex;justify-content:space-between;gap:8px;margin-top:14px;border-top:1px solid var(--tinta);padding-top:12px}
.fase{background:none;border:0;padding:4px 0;cursor:pointer;font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);text-align:left;transition:color .3s}
.fase b{display:block;font:420 22px/1 var(--f-disp);letter-spacing:0;text-transform:none;color:inherit;margin-bottom:4px}
.fase.on{color:var(--tinta)}
.fase.on b{color:var(--llama-2)}
.cartela{font-size:13px;line-height:1.45;color:var(--tinta-2);margin-top:14px}
.cartela b{font-weight:600;color:var(--tinta)}
.cartela i{font-family:var(--f-disp);font-size:15px}

/* ---------- tira para pintar (pincel.js) ---------- */
.pincel{position:relative;margin-block:clamp(8px,2vw,24px);padding-inline:clamp(0px,1vw,14px)}
.pincel canvas{display:block;width:100%;height:clamp(150px,17vw,230px);touch-action:pan-y;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='9' fill='none' stroke='%231A1A22' stroke-width='1.5'/><circle cx='14' cy='14' r='1.6' fill='%231A1A22'/></svg>") 14 14,crosshair;
  transition:opacity .45s var(--ease)}
.pincel.lavando canvas{opacity:0}
.hoja{position:relative;background:#FCFAF4;box-shadow:0 1px 1px rgba(26,26,34,.06),0 18px 34px -22px rgba(26,26,34,.4);margin-bottom:18px}
.hoja canvas{position:relative;z-index:1}
/* cinta de carrocero en las esquinas, como se fija el papel al tablero */
.hoja::before,.hoja::after{content:"";position:absolute;z-index:2;top:-11px;width:clamp(70px,8vw,104px);height:26px;background:rgba(226,211,172,.82);
  box-shadow:0 1px 2px rgba(26,26,34,.10);clip-path:polygon(3% 8%,12% 0,24% 7%,36% 1%,50% 6%,63% 0,77% 7%,90% 1%,100% 9%,97% 92%,86% 100%,73% 93%,60% 100%,46% 94%,33% 100%,20% 93%,8% 100%,0 90%)}
.hoja::before{left:-14px;transform:rotate(-9deg)}
.hoja::after{right:-14px;transform:rotate(8deg)}
.pincel .pincel-ui{border-top:0;padding-top:0}
.pincel-ui{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;border-top:1px solid var(--papel-3);padding-top:14px}
.pincel-hint{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);display:inline-flex;align-items:center;gap:10px}
.pincel-hint::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;box-shadow:inset 0 0 0 5px var(--papel),inset 0 0 0 9px currentColor}
.pincel.usado .pincel-hint{opacity:.55}
.pigmentos{display:flex;flex-wrap:wrap;gap:6px}
.pigmentos button,.pincel [data-limpiar]{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;border:1px solid var(--papel-3);background:transparent;cursor:pointer;font:500 13px var(--f-text);color:var(--tinta-2)}
.pigmentos i{width:16px;height:16px;border-radius:50% 45% 55% 48%;display:block}
.pigmentos button[aria-pressed="true"]{border-color:var(--tinta);color:var(--tinta);background:var(--blanco)}
.pincel [data-limpiar]{padding-left:12px}
@media (max-width:620px){.pigmentos button span{display:none}.pigmentos button{padding:7px}}

/* ---------- tira de técnicas ---------- */
.tecnicas{border-block:1px solid var(--tinta);overflow:hidden;white-space:nowrap}
.tecnicas-in{display:inline-flex;gap:0;animation:desliza 60s linear infinite;padding-block:18px}
.tecnicas span{font:italic 400 clamp(22px,2.4vw,32px)/1 var(--f-disp);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;padding-inline:26px;display:inline-flex;align-items:center;gap:52px}
.tecnicas span::after{content:"";width:9px;height:14px;background:var(--llama);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(12deg)}
@keyframes desliza{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tecnicas-in{animation:none}}

/* ---------- tarjetas de clase ---------- */
.clases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.clase{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.clase .marco-f{aspect-ratio:4/5}
.clase-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:22px}
.clase-h h3{font-size:clamp(26px,2.6vw,36px)}
.clase p{color:var(--tinta-2);margin:12px 0 16px;font-size:16px}
.clase .mono{font-size:12.5px;color:var(--tinta-3)}
.clase:hover .marco-f img{transform:scale(1.035)}
@media (max-width:900px){.clases{grid-template-columns:1fr 1fr}.clases .clase:last-child{grid-column:1/-1}.clases .clase:last-child .marco-f{aspect-ratio:16/10}}
@media (max-width:600px){.clases{grid-template-columns:minmax(0,1fr)}.clases .clase:last-child .marco-f{aspect-ratio:4/5}}

/* marcos: foto con passe-partout y moldura fina */
.marco-f{position:relative;overflow:hidden;background:var(--papel-3);border-radius:2px}
.marco-f img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.chip{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(251,248,241,.94);border-radius:999px;padding:6px 12px 6px 8px;font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.chip i{width:12px;height:12px;border-radius:50%}

/* ---------- método ---------- */
.metodo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px;row-gap:0;border-top:1px solid currentColor}
.paso{position:relative;padding:28px 0 8px}
.paso+.paso::before{content:"";position:absolute;left:-24px;top:0;bottom:0;width:1px;background:rgba(201,194,179,.25)}
.paso-img{aspect-ratio:4/3;overflow:hidden;border-radius:2px;margin-bottom:22px;background:#0f0f14}
.paso-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.metodo:hover .paso-img img{filter:saturate(.6) brightness(.8)}
.metodo .paso:hover .paso-img img{filter:none;transform:scale(1.06)}
.paso .n{font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--llama)}
.paso h3{font-size:clamp(26px,2.4vw,34px);margin:18px 0 12px}
.paso p{color:#C9C2B3;font-size:15.5px}
@media (max-width:900px){.metodo{grid-template-columns:repeat(2,minmax(0,1fr))}.paso:nth-child(3)::before{display:none}.paso:nth-child(n+3){border-top:1px solid rgba(201,194,179,.25);margin-top:12px}}
@media (max-width:540px){.metodo{grid-template-columns:minmax(0,1fr)}.paso+.paso::before{display:none}.paso+.paso{border-top:1px solid rgba(201,194,179,.25);margin-top:12px}}

/* ---------- estudio ---------- */
.estudio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.estudio .marco-f{aspect-ratio:3/2}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border-top:1px solid var(--papel-3)}
.dato{padding:20px 16px 20px 0;border-bottom:1px solid var(--papel-3)}
.dato:nth-child(odd){border-right:1px solid var(--papel-3)}
.dato:nth-child(even){padding-left:20px}
.dato b{display:block;font:400 clamp(30px,3vw,42px)/1 var(--f-disp);font-variation-settings:"opsz" 144}
.dato span{font-size:14px;color:var(--tinta-2)}
@media (max-width:900px){.estudio{grid-template-columns:minmax(0,1fr)}}

/* ---------- salón (galería colgada) ----------
   columnas tipo masonry: cada obra conserva su proporción real, nunca se recorta */
.salon{columns:3 260px;column-gap:clamp(20px,3vw,44px)}
.obra{margin:0 0 clamp(26px,3.4vw,48px);display:block;break-inside:avoid;cursor:zoom-in}
.obra .lamina{background:var(--blanco);padding:clamp(10px,1.4vw,20px);border:clamp(5px,.55vw,8px) solid var(--marco);box-shadow:var(--sombra-cuadro);transition:transform .4s var(--ease),box-shadow .4s}
.obra.dorado .lamina{border-color:#9C7A3C;background:#F7F1E3}
.obra.fino .lamina{border-width:2px;padding:clamp(14px,2vw,28px)}
.obra.sin .lamina{border:0;padding:0;background:none;box-shadow:none}
.obra.sin .lamina img{box-shadow:var(--sombra-cuadro)}
.obra .lamina img{width:100%;height:auto}
.obra:hover .lamina{transform:translateY(-3px);box-shadow:0 1px 1px rgba(26,26,34,.08),0 24px 40px -18px rgba(26,26,34,.45)}
.obra figcaption{margin-top:12px;font-size:12.5px;line-height:1.35;color:var(--tinta-2);display:flex;gap:10px}
.obra figcaption .num{font:500 11px/1.5 var(--f-mono);color:var(--tinta-3)}
.obra figcaption b{font-family:var(--f-disp);font-style:italic;font-weight:420;font-size:15px;color:var(--tinta);display:block}
@media (max-width:540px){.salon{columns:2;column-gap:14px}.obra .lamina{padding:6px;border-width:4px}.obra.fino .lamina{padding:10px}}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filtro{font:500 14px/1 var(--f-text);padding:11px 16px;border-radius:999px;border:1px solid var(--papel-3);background:transparent;cursor:pointer;color:var(--tinta-2)}
.filtro span{font-family:var(--f-mono);font-size:11px;color:var(--tinta-3);margin-left:6px}
.filtro[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.filtro[aria-pressed="true"] span{color:#C9C2B3}
.obra.oculta{display:none}

/* visor */
.visor{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.94);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.visor.on{display:flex}
.visor figure{margin:0;display:flex;flex-direction:column;align-items:center;max-height:100%;max-width:100%}
.visor img{max-height:calc(100vh - 150px);max-width:100%;width:auto;object-fit:contain;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.visor figcaption{color:#E8E1D2;margin-top:16px;font-size:14px;text-align:center}
.visor figcaption b{font:italic 420 19px var(--f-disp);display:block;margin:2px 0}
.visor figcaption .num{display:block;font:500 11px var(--f-mono);letter-spacing:.1em;color:#A9A396}
.visor button{position:absolute;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:20px;display:grid;place-items:center}
.visor .x{top:18px;right:18px}.visor .ant{left:18px;top:50%}.visor .sig{right:18px;top:50%}
@media (max-width:600px){.visor .ant,.visor .sig{top:auto;bottom:18px}}

/* ---------- profesores ---------- */
.profes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.profes .marco-f{aspect-ratio:4/5}
.profe-nombre{font-size:clamp(40px,5vw,72px);margin:14px 0 6px}
.profe-rol{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--tinta-2);margin-bottom:24px}
.cv{list-style:none;padding:0;margin:26px 0;border-top:1px solid var(--papel-3)}
.cv li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--papel-3);font-size:15.5px}
.cv li span:first-child{font-family:var(--f-mono);font-size:13px;color:var(--tinta-3);padding-top:2px}
.profe-2{margin-top:36px;padding:26px;border:1px solid var(--papel-3);border-radius:6px;background:rgba(251,248,241,.5)}
.profe-2 h3{font-size:30px;margin:6px 0 8px}
@media (max-width:900px){.profes{grid-template-columns:minmax(0,1fr)}.profes .marco-f{max-width:520px}}

/* ---------- fuera del aula ---------- */
.cuaderno{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,26vw,360px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--tinta-3) transparent}
.cuaderno figure{margin:0;scroll-snap-align:start}
.cuaderno .marco-f{aspect-ratio:3/4}
.cuaderno figcaption{margin-top:12px;font-size:14px;color:var(--tinta-2)}
.cuaderno figcaption b{display:block;font:italic 420 19px/1.2 var(--f-disp);color:var(--tinta)}
.cuaderno-nav{display:flex;gap:8px}
.cuaderno-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--tinta);background:none;cursor:pointer;display:grid;place-items:center}
.cuaderno-nav svg{width:18px;height:18px}

/* ---------- reseñas ---------- */
.resenas{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.nota{position:sticky;top:110px}
.nota .num{font:350 clamp(90px,10vw,140px)/.9 var(--f-disp);font-variation-settings:"opsz" 144,"SOFT" 100;letter-spacing:-.04em}
.nota .st{color:#E7A52A;font-size:26px;letter-spacing:3px;margin:8px 0}
.nota p{font-size:15px;color:#C9C2B3;margin:0 0 20px}
.gG{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.gG svg{width:22px;height:22px}
.citas{columns:2;column-gap:clamp(18px,2.4vw,32px)}
.cita{break-inside:avoid;margin:0 0 clamp(18px,2.4vw,32px);padding:26px 26px 22px;border:1px solid rgba(201,194,179,.22);border-radius:6px;background:rgba(255,255,255,.03)}
.cita blockquote{margin:0 0 18px;font:400 18px/1.5 var(--f-disp);font-variation-settings:"opsz" 24}
.cita blockquote::before{content:"“";display:block;font:italic 400 54px/.6 var(--f-disp);color:var(--llama);margin-bottom:10px}
.cita footer{font-size:13.5px;color:#C9C2B3}
.cita footer b{color:var(--papel);font-weight:600}
@media (max-width:900px){.resenas{grid-template-columns:minmax(0,1fr)}.nota{position:static}.citas{columns:1}}

/* ---------- horario ---------- */
.horario{width:100%;min-width:560px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.horario-wrap{overflow-x:auto}
.horario th,.horario td{padding:14px 10px;text-align:center;border-bottom:1px solid var(--papel-3);font-size:14.5px}
.horario thead th{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);border-bottom:1px solid var(--tinta)}
.horario tbody th{text-align:left;font:500 13.5px var(--f-mono);color:var(--tinta-2);white-space:nowrap}
.horario td .h{display:inline-block;min-width:74px;padding:7px 8px;border-radius:4px;background:var(--blanco);border:1px solid var(--papel-3);font-size:13px}
.horario td .h.of{background:rgba(240,112,30,.12);border-color:rgba(240,112,30,.4)}
.horario td.no{color:var(--papel-3)}
.leyenda{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:13.5px;color:var(--tinta-2)}
.leyenda i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;background:var(--blanco);border:1px solid var(--papel-3)}
.leyenda i.of{background:rgba(240,112,30,.12);border-color:rgba(240,112,30,.4)}

.tarifas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.tarifa{background:var(--blanco);border:1px solid var(--papel-3);border-radius:8px;padding:28px 26px;display:flex;flex-direction:column}
.tarifa.dest{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.tarifa h3{font-size:30px;margin:10px 0 4px}
.tarifa .cuando{font-size:14px;color:var(--tinta-2)}
.tarifa.dest .cuando,.tarifa.dest .eyebrow{color:#C9C2B3}
.precios{list-style:none;padding:0;margin:22px 0;flex:1}
.precios li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px dashed var(--papel-3);font-size:15px}
.tarifa.dest .precios li{border-color:rgba(201,194,179,.3)}
.precios b{font:420 28px/1 var(--f-disp);font-variant-numeric:lining-nums}
.precios small{font-size:13px;color:var(--tinta-3)}
.tarifa.dest .precios small{color:#C9C2B3}
.tarifa .btn{justify-content:center}
.tarifa.dest .btn{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.nota-precio{margin-top:22px;font-size:14px;color:var(--tinta-2)}
@media (max-width:980px){.tarifas{grid-template-columns:minmax(0,1fr)}}

/* ---------- páginas interiores ---------- */
.p-hero{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(48px,7vw,96px)}
.p-hero-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:end}
.p-hero h1{font-size:clamp(44px,6.4vw,96px);letter-spacing:-.03em;margin:18px 0 24px}
.p-hero .marco-f{aspect-ratio:4/5}
.p-hero.solo .p-hero-g{grid-template-columns:minmax(0,1fr)}
.migas{font:500 12.5px var(--f-mono);color:var(--tinta-3);letter-spacing:.04em}
.migas a{text-decoration:none;color:var(--tinta-2)}
.migas a:hover{color:var(--tinta)}
@media (max-width:900px){.p-hero-g{grid-template-columns:minmax(0,1fr)}.p-hero .marco-f{aspect-ratio:4/3}}

.dos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
.dos .h-l{margin-top:14px}
@media (max-width:900px){.dos{grid-template-columns:minmax(0,1fr)}}
.prosa{font-size:18px;line-height:1.7;color:var(--tinta-2);max-width:64ch}
.prosa p+p{margin-top:0}
.prosa strong{color:var(--tinta);font-weight:600}

.temario{list-style:none;padding:0;margin:0;counter-reset:t;border-top:1px solid var(--tinta)}
.temario li{counter-increment:t;display:grid;grid-template-columns:64px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--papel-3)}
.temario li::before{content:counter(t,decimal-leading-zero);font:500 13px var(--f-mono);color:var(--llama-2);padding-top:5px}
.temario h3{font-size:24px;margin-bottom:6px}
.temario p{margin:0;color:var(--tinta-2);font-size:16px}

.para{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.para>div{padding:26px;border-top:2px solid var(--tinta)}
.para h3{font-size:24px;margin-bottom:10px}
.para p{color:var(--tinta-2);font-size:16px;margin:0}
@media (max-width:860px){.para{grid-template-columns:minmax(0,1fr)}}

.tira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.tira .marco-f{aspect-ratio:1}
.tira .marco-f.alta{aspect-ratio:auto;grid-row:span 2}
@media (max-width:760px){.tira{grid-template-columns:1fr 1fr}}

.mat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.mat ul{list-style:none;padding:0;margin:22px 0 0}
.mat li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--papel-3);font-size:16px}
.mat li::before{content:"";flex:none;width:8px;height:12px;margin-top:7px;background:var(--llama);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
@media (max-width:860px){.mat{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{border-top:1px solid var(--tinta)}
.faq details{border-bottom:1px solid var(--papel-3)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font:420 clamp(20px,1.8vw,24px)/1.25 var(--f-disp)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--tinta),var(--tinta)) center/14px 1.5px no-repeat,linear-gradient(var(--tinta),var(--tinta)) center/1.5px 14px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--tinta-2);margin:0 0 22px;max-width:68ch}

/* ---------- CTA final ---------- */
.cta{position:relative;overflow:hidden}

.cta-g{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.cta h2{font-size:clamp(46px,6.6vw,100px);letter-spacing:-.03em;line-height:.95}
.cta .hero-actions{margin-top:32px}
.visita{list-style:none;margin:0;padding:0;border-top:1px solid rgba(201,194,179,.35)}
.visita li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid rgba(201,194,179,.35);font-size:15.5px}
.visita li span:first-child{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#C9C2B3;padding-top:3px}
.visita a{color:var(--papel)}
.sec-tinta .btn-linea{color:var(--papel);border-color:var(--papel)}
.sec-tinta .btn-linea:hover{background:var(--papel);color:var(--tinta)}
.sec-tinta .btn-tinta{background:var(--llama);border-color:var(--llama);color:var(--tinta)}
.sec-tinta .btn-tinta .dot{background:var(--tinta);box-shadow:none}
@media (max-width:900px){.cta-g{grid-template-columns:minmax(0,1fr)}}

/* formulario de reserva (compone un WhatsApp) */
.reserva{background:var(--blanco);border:1px solid var(--papel-3);border-radius:10px;padding:clamp(22px,3vw,36px)}
.reserva label{display:block;font:500 12.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin:18px 0 8px}
.reserva input,.reserva select,.reserva textarea{width:100%;font:400 16px var(--f-text);padding:13px 14px;border:1px solid var(--papel-3);border-radius:6px;background:var(--papel);color:var(--tinta)}
.reserva textarea{min-height:96px;resize:vertical}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{margin:0;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--papel-3);border-radius:999px;cursor:pointer;font:500 14px var(--f-text);text-transform:none;letter-spacing:0;color:var(--tinta)}
.opciones input{width:auto;accent-color:var(--llama)}
.opciones label:has(input:checked){background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.reserva .btn{width:100%;justify-content:center;margin-top:24px}
.reserva small{display:block;margin-top:12px;color:var(--tinta-3);font-size:13px}

/* online */
.online{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
.curso{border:1px solid var(--papel-3);border-radius:6px;background:var(--blanco);display:flex;flex-direction:column;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.curso:hover{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(26,26,34,.45)}
.curso.oculta{display:none}
.curso-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--papel-2)}
.curso-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.curso:hover .curso-img img{transform:scale(1.04)}
.curso-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.curso .eyebrow{font-size:11px}
.curso h3{font-size:24px;margin:10px 0 8px}
.curso p{font-size:15px;color:var(--tinta-2);flex:1;margin-bottom:16px}
.nivel{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--f-mono);letter-spacing:.04em;color:var(--tinta-2);padding:12px 0;border-top:1px dashed var(--papel-3);margin-bottom:14px}
.pastillas{display:inline-flex;gap:3px}
.pastillas i{width:14px;height:10px;border-radius:2px;background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--papel-3)}
.pastillas i.on:nth-child(1){background:#F3A56C;box-shadow:none}
.pastillas i.on:nth-child(2){background:var(--llama);box-shadow:none}
.pastillas i.on:nth-child(3){background:#A8430B;box-shadow:none}
.filtro .pastillas{margin-right:8px;vertical-align:-1px}
.filtro[aria-pressed="true"] .pastillas i:not(.on){background:#3A3A44;box-shadow:none}
.curso a.ext{font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center;align-self:flex-start}
.curso a.ext svg{width:14px;height:14px}
@media (max-width:980px){.online{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.online{grid-template-columns:minmax(0,1fr)}}

/* legales */
.legal{max-width:760px}
.legal h2{font-size:28px;margin:44px 0 14px}
.legal p,.legal li{color:var(--tinta-2);font-size:16px}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:#C9C2B3;padding-top:clamp(56px,7vw,96px);padding-bottom:28px;font-size:15px}
.pie-g{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.pie img{height:54px;width:auto;margin-bottom:22px}
.pie h4{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--papel);margin-bottom:16px}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{padding:5px 0}
.pie a{text-decoration:none;color:#C9C2B3}
.pie a:hover{color:var(--papel)}
.pie-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:22px;border-top:1px solid rgba(201,194,179,.2);font-size:13px}
@media (max-width:900px){.pie-g{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pie-g{grid-template-columns:minmax(0,1fr)}}

/* botón flotante móvil */
.flota{display:none}
@media (max-width:760px){
  .flota{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:8px}
  .flota a{flex:1;justify-content:center;box-shadow:0 10px 24px -10px rgba(26,26,34,.5)}
  .flota .btn-linea{background:var(--papel);flex:0 0 52px;padding:0}
  body{padding-bottom:76px}
}

/* aparición: siempre visible en reposo; solo se anima si el JS la arma */
.rev{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rev.armed{opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){.js .rev.armed{opacity:1;transform:none}}

/* lupa del visor */
.lupa{position:fixed;width:clamp(160px,18vw,240px);height:clamp(160px,18vw,240px);border-radius:50%;pointer-events:none;z-index:101;
  border:2px solid rgba(243,236,221,.9);box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.2);background-repeat:no-repeat;display:none;transform:translate(-50%,-50%)}
.visor.on .lupa.on{display:block}
.visor .pista{font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#A9A396;margin-top:8px}
@media (hover:none){.visor .pista{display:none}}

/* ====== cambios de Emmanuel (2026-10-06) ====== */
/* portada: el ejercicio de pintura, en horizontal */
.hero-ancho{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero-ancho .hero-visual{width:100%;min-width:0;justify-self:stretch}
.lienzo.lienzo-ancho{aspect-ratio:1200/928}
@media (max-width:900px){.hero-ancho{grid-template-columns:minmax(0,1fr)}.hero-ancho .hero-visual{order:-1;max-width:640px;margin:0 auto;width:100%;justify-self:center}}
/* saber ver: pestañas dibujo / pintura y 4 fases solo con título */
.ej-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ej-tabs button{font:500 14px/1 var(--f-text);padding:12px 18px;border-radius:999px;border:1px solid rgba(201,194,179,.35);background:transparent;color:#C9C2B3;cursor:pointer;transition:.2s var(--ease)}
.ej-tabs button b{font-weight:600;color:var(--papel)}
.ej-tabs button:hover{border-color:var(--papel)}
.ej-tabs button[aria-selected="true"]{background:var(--papel);border-color:var(--papel);color:var(--tinta-2)}
.ej-tabs button[aria-selected="true"] b{color:var(--tinta)}
.metodo[hidden]{display:none}
.metodo figure.paso{margin:0}
.ej-dibujo .paso-img{aspect-ratio:3/4;background:#F6F1E4}
.paso figcaption{display:flex;align-items:baseline;gap:14px}
.paso figcaption h3{margin:0;font-size:clamp(22px,2vw,28px)}
.regalo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(201,194,179,.3)}
.regalo h3{font-size:clamp(26px,2.6vw,36px);margin:12px 0 10px}
.regalo h3 em{color:var(--llama)}
.regalo p{color:#C9C2B3;max-width:56ch;margin:0}
/* salón: todas las obras iguales y sin marco (entera en el visor) */
.salon.iguales{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.salon.iguales .obra{margin:0}
.salon.iguales .obra .lamina{aspect-ratio:4/5;padding:0;border:0;background:var(--papel-3);box-shadow:none;overflow:hidden;border-radius:2px}
.salon.iguales .obra .lamina img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.salon.iguales .obra:hover .lamina{transform:none;box-shadow:none}
.salon.iguales .obra:hover .lamina img{transform:scale(1.04)}
@media (max-width:540px){.salon.iguales{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
/* horario: lunes y sábados diferenciados */
.horario td .h.lu{background:rgba(43,76,155,.1);border-color:rgba(43,76,155,.35)}
.leyenda i.lu{background:rgba(43,76,155,.1);border-color:rgba(43,76,155,.35)}
.tarifas.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.tarifas.t4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tarifas.t4{grid-template-columns:minmax(0,1fr)}}
.tarifa .matricula{font-size:14px;font-weight:600;margin:-8px 0 18px}
.tarifa.dest .matricula{color:var(--llama)}
.tarifa.dest .enlace{color:var(--papel)}
/* nuestros talleres */
.t-indice{display:flex;flex-wrap:wrap;gap:10px}
.t-indice a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--papel-3);border-radius:999px;text-decoration:none;font-weight:600;font-size:15px}
.t-indice a:hover{background:var(--papel-2)}
.t-indice .mono{font:500 12px var(--f-mono);color:var(--llama-2)}
.taller-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start;margin-bottom:clamp(36px,4vw,56px)}
.taller-ficha{position:sticky;top:110px}
.taller-n{font:500 13px var(--f-mono);letter-spacing:.12em;color:var(--llama-2)}
.taller-ficha .h-l{margin:12px 0 10px}
.taller-sub{font:italic 420 20px/1.35 var(--f-disp);color:var(--tinta-2)}
.taller-ficha .cv li{grid-template-columns:118px 1fr;font-size:15px}
.taller-ficha .btn{margin-top:6px}
.taller-txt p{margin:0 0 1.1em}
.procs{list-style:none;counter-reset:p;padding:0;margin:6px 0 26px;display:grid;gap:12px}
.procs li{counter-increment:p;position:relative;padding:16px 18px 16px 56px;background:var(--blanco);border:1px solid var(--papel-3);border-radius:8px;font-size:16.5px;line-height:1.55}
.procs li::before{content:counter(p,decimal-leading-zero);position:absolute;left:18px;top:17px;font:500 12px var(--f-mono);color:var(--llama-2)}
.procs b{color:var(--tinta)}
@media (max-width:900px){.taller-g{grid-template-columns:minmax(0,1fr)}.taller-ficha{position:static}}
/* la escuela: forma de enseñar y atención en clase */
.prosa > p{margin:0 0 1.05em}
.para.para-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,4vw,56px)}
.para.para-2 p{margin:0 0 .9em}
@media (max-width:860px){.para.para-2{grid-template-columns:minmax(0,1fr)}}
.lead-prosa p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--tinta-2);margin:0 0 .9em;max-width:60ch}
.sec-tinta .lead-prosa p{color:#C9C2B3}
.clase-pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);border-top:1px solid currentColor}
.clase-pasos li{padding-top:26px}
.clase-pasos .mono{font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--llama)}
.clase-pasos h3{font-size:clamp(24px,2.2vw,30px);margin:14px 0 12px}
.clase-pasos p{color:#C9C2B3;font-size:16px;line-height:1.6;margin:0}
@media (max-width:860px){.clase-pasos{grid-template-columns:minmax(0,1fr)}}
blockquote.destacado{margin:28px 0 0;padding-left:22px;border-left:2px solid var(--llama);font:italic 420 clamp(21px,2vw,26px)/1.4 var(--f-disp);color:var(--tinta)}
p.destacado{font:italic 420 clamp(21px,2vw,26px)/1.4 var(--f-disp);color:var(--tinta);border-left:2px solid var(--llama);padding-left:20px}
/* caballete (atril) para la obra de la portada */
.atril{position:relative;width:100%;aspect-ratio:1000/1090}
.atril-madera{position:absolute;inset:0;width:100%;height:100%}
.atril-lienzo{position:absolute;left:8%;right:8%;top:4.6%;}
.atril-lienzo .lienzo{box-shadow:0 2px 0 #E9E1CF inset,0 26px 40px -18px rgba(26,26,34,.55),0 6px 12px -6px rgba(26,26,34,.35)}
.atril-lienzo::after{content:"";position:absolute;top:2px;bottom:-2px;right:-7px;width:7px;background:linear-gradient(90deg,#CFC6B2,#B6AC96);transform:skewY(40deg);transform-origin:left top;border-radius:0 1px 1px 0}
.lienzo.lienzo-ancho{aspect-ratio:1200/888}
.hero-ancho .fases{margin-top:6px}
@media (max-width:900px){.hero-ancho .hero-visual{max-width:520px}}
/* fases del ejercicio como objetos: lienzos (pintura) y hojas con cinta (dibujo) */
.ej-pintura .paso-img{overflow:visible;background:none;border-radius:1px;position:relative}
.ej-pintura .paso-img img{box-shadow:0 18px 28px -14px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05)}
.ej-pintura .paso-img::after{content:"";position:absolute;top:1px;bottom:-1px;right:-5px;width:5px;background:linear-gradient(90deg,#3A342C,#26221E);transform:skewY(40deg);transform-origin:left top}
.ej-dibujo .paso-img{overflow:visible;background:#F6F1E4;padding:9% 8% 8%;position:relative;box-shadow:0 18px 30px -16px rgba(0,0,0,.85);aspect-ratio:3/4}
.ej-dibujo .paso-img img{object-fit:contain;mix-blend-mode:multiply}
.ej-dibujo .paso-img::before,.ej-dibujo .paso-img::after{content:"";position:absolute;top:-9px;width:30%;height:22px;background:rgba(222,206,160,.82);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.ej-dibujo .paso-img::before{left:-6%;transform:rotate(-14deg)}
.ej-dibujo .paso-img::after{right:-6%;transform:rotate(12deg)}
.metodo .paso:hover .paso-img img{transform:none}
.ej-pintura .paso:hover .paso-img,.ej-dibujo .paso:hover .paso-img{transform:translateY(-4px) rotate(-.4deg)}
.ej-pintura .paso-img,.ej-dibujo .paso-img{transition:transform .5s var(--ease)}
.hero-ancho .fases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hero-ancho .fase{font-size:11px;line-height:1.3}
.hero-ancho .fase{letter-spacing:.04em;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:540px){.hero-ancho .fases{gap:8px}.hero-ancho .fase{font-size:9.5px}.hero-ancho .fase b{font-size:19px}}
/* horario: franjas como bloques de calendario, no como botones */
.horario td{padding:4px 3px}
.horario td .h{display:block;min-width:0;padding:12px 4px;border:0;border-radius:0;background:var(--papel-3);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);cursor:default;user-select:none}
.horario td .h.of{background:rgba(240,112,30,.22);border:0}
.horario td .h.lu{background:rgba(43,76,155,.18);border:0}
.leyenda i{border:0;border-radius:0;background:var(--papel-3)}
.leyenda i.of{background:rgba(240,112,30,.22);border:0}
.leyenda i.lu{background:rgba(43,76,155,.18);border:0}
.horario td{padding:0 2px;border-bottom:2px solid var(--papel-2)}
.horario td .h{height:46px;padding:0;font-size:0;line-height:0;color:transparent;overflow:hidden}
.horario td.no{font-size:14px}
.sec:not(.sec-alt) .horario td{border-bottom-color:var(--papel)}
.leyenda{gap:14px 26px;font-size:14px}
.leyenda i{width:22px;height:14px}
.horario td .h.lu,.leyenda i.lu{background:rgba(43,76,155,.32)}
.horario td .h.of,.leyenda i.of{background:rgba(240,112,30,.32)}