/* BAW v13 · «Por qué diseñamos así» (#metodo-aureo) + firma φ del pie
   Prefijos: .ma- (sección) y .baw-sign (firma). Espaciados Fibonacci 8·13·21·34·55·89 */
.ma{--ma-ink:#111126;--ma-blue:#243BCE;--ma-violet:#5125C9;--ma-mag:#AC145B;--ma-sun:#FFE36B;--ma-mint:#6CF0C2;--ma-paper:#FFFDF8;position:relative;color:var(--ma-ink);overflow-x:clip}
.ma-sala{position:relative;isolation:isolate;padding:89px 24px}
.ma-edge{margin-top:-30px;padding-top:119px;-webkit-mask:url(lienzo-borde.svg) top left/1440px 32px repeat-x,linear-gradient(#000 0 0) 0 31px/100% calc(100% - 31px) no-repeat;mask:url(lienzo-borde.svg) top left/1440px 32px repeat-x,linear-gradient(#000 0 0) 0 31px/100% calc(100% - 31px) no-repeat}
.ma-paper{background:var(--ma-paper)}
.ma-pastel{background:linear-gradient(160deg,#F3EEFF 0%,#FFF1F6 100%)}
.ma-pastel2{background:linear-gradient(160deg,#E9FBF4 0%,#EEF3FF 100%)}
.ma-color{background:linear-gradient(135deg,#3B2BB0 0%,#5125C9 45%,#AC145B 100%);color:#FFFFFF}
.ma-color2{background:linear-gradient(135deg,#1D4ED8 0%,#5125C9 55%,#9A1A6E 100%);color:#FFFFFF}
.ma-wrap{max-width:1200px;margin:0 auto;position:relative}
.ma-grid{display:grid;grid-template-columns:1fr;gap:55px;align-items:center}
@media (min-width:1100px){.ma-grid{grid-template-columns:1.618fr 1fr}.ma-grid.ma-rev{grid-template-columns:1fr 1.618fr}.ma-grid.ma-rev>.ma-arg{order:2}}
.ma-kicker,.ma-num,.ma-demo-k,.ma-real-k,.ma-cta-k{font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin:0 0 13px;color:var(--ma-violet)}
.ma-color .ma-num,.ma-color .ma-demo-k,.ma-color2 .ma-num,.ma-color2 .ma-cta-k{color:var(--ma-sun)}
.ma-h{font:700 clamp(36px,5.2vw,68px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:0;position:relative}
.ma-h3{font:700 clamp(28px,3.4vw,42px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.03em;margin:0 0 21px;position:relative;padding-bottom:13px}
.ma-h3::after{content:'';position:absolute;left:0;bottom:0;width:61.8%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ma-mag),var(--ma-violet),var(--ma-blue));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.6,0,.2,1) .2s;opacity:.85}
.ma-color .ma-h3::after,.ma-color2 .ma-h3::after{background:linear-gradient(90deg,var(--ma-sun),var(--ma-mint))}
.ma-in .ma-h3::after{transform:scaleX(1)}
.ma-arg p:not(.ma-num){font-size:18px;line-height:1.618;margin:0 0 13px;max-width:62ch}
.ma-paper .ma-arg p:not(.ma-num),.ma-pastel .ma-arg p:not(.ma-num),.ma-pastel2 .ma-arg p:not(.ma-num){color:#2B3140}
.ma-color .ma-arg p:not(.ma-num),.ma-color2 .ma-arg p:not(.ma-num){color:#F4F2FF}

/* Sala 0 · apertura con boceto áureo */
.ma-open{text-align:left;max-width:1000px}
.ma-titlebox{position:relative;padding:34px 0}
.ma-phi{position:absolute;width:520px;height:321px;left:0;top:0;color:#6b4a2e;opacity:.32;pointer-events:none;z-index:-1}
.ma-sk{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.2s cubic-bezier(.5,0,.2,1)}
.ma-sk:nth-child(2){transition-delay:.4s}.ma-sk:nth-child(3){transition-delay:.9s}
.ma-in .ma-sk{stroke-dashoffset:0}
.ma-eye{fill:var(--ma-mag);opacity:0;transform-box:fill-box;transform-origin:50% 50%;transition:opacity .6s 3.4s}
.ma-in .ma-eye{opacity:.9;animation:maEye 2.6s ease-in-out 4s infinite}
@keyframes maEye{0%,100%{scale:1}50%{scale:1.6}}
.ma-key{background:linear-gradient(90deg,var(--ma-sun),#FFC94D) no-repeat 0 88%/0% 36%;transition:background-size 1.2s cubic-bezier(.6,0,.2,1) 3.6s;padding:0 4px;border-radius:4px}
.ma-in .ma-key{background-size:100% 36%}
.ma-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.618;color:#2B3140;max-width:61.8%;margin:21px 0 0}
@media (max-width:760px){.ma-lead{max-width:none}.ma-phi{width:300px;height:185px}}

/* Sala 1 · con φ / sin φ */
.ma-toggle{display:inline-flex;align-items:center;gap:13px;min-height:48px;padding:6px 18px 6px 8px;border-radius:999px;border:1.5px solid #CFC6F5;background:#FFFFFF;font:600 15px 'IBM Plex Sans',sans-serif;color:var(--ma-ink);margin-bottom:21px;box-shadow:0 8px 21px rgba(81,37,201,.12)}
.ma-sw{width:52px;height:30px;border-radius:999px;background:#D7DBE5;position:relative;transition:background .4s}
.ma-sw i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.ma-toggle[aria-pressed="true"] .ma-sw{background:var(--ma-violet)}
.ma-toggle[aria-pressed="true"] .ma-sw i{transform:translateX(22px)}
.ma-tl,.ma-tr{opacity:.45;transition:opacity .3s}
.ma-toggle[aria-pressed="false"] .ma-tl,.ma-toggle[aria-pressed="true"] .ma-tr{opacity:1}
.ma-toggle:focus-visible{outline:2px solid var(--ma-violet);outline-offset:3px}
.ma-lab{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:17px;padding:7px 23px 31px 11px;background:#FFFFFF;border-radius:21px;border:1px solid #E4E0F5;box-shadow:0 21px 55px rgba(40,20,120,.12);transition:grid-template-columns .6s cubic-bezier(.4,0,.2,1),gap .6s,padding .6s;overflow:hidden;min-height:260px}
.ma-lab-txt{line-height:1.2;transition:line-height .6s;align-self:start;padding-top:9px}
.ma-lab-k{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ma-violet);margin:0 0 5px}
.ma-lab-h{font:700 23px 'Space Grotesk',sans-serif;line-height:inherit;margin:0 0 4px;color:var(--ma-ink)}
.ma-lab-p{font-size:15px;margin:0 0 11px;color:#3A4152}
.ma-lab-b{display:inline-block;padding:9px 15px;border-radius:999px;background:var(--ma-blue);color:#FFFFFF;font-size:14px;font-weight:600;transition:padding .6s}
.ma-lab-img{border-radius:13px;background:linear-gradient(150deg,#FFE36B,#FF8A5C 50%,#AC145B);min-height:140px;align-self:end;position:relative;overflow:hidden;transition:min-height .6s}
.ma-lab-img span{position:absolute;inset:auto 13px 13px auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.6)}
.ma-lab-state{grid-column:1/-1;margin:8px 0 0;font:500 12px/1.4 'IBM Plex Mono',monospace;color:#6B7280}
.ma-guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.ma-guides path{fill:none;stroke:var(--ma-mag);stroke-width:1.2;stroke-dasharray:4 5}
.ma-lab.is-phi{grid-template-columns:1.618fr 1fr;gap:34px;padding:34px 34px 21px}
.ma-lab.is-phi .ma-lab-txt{line-height:1.618;padding-top:0}
.ma-lab.is-phi .ma-lab-b{padding:13px 21px}
.ma-lab.is-phi .ma-lab-img{min-height:162px;align-self:center}
.ma-lab.is-phi .ma-guides{opacity:.7}

/* Sala 2 · cartelas y paleta */
.ma-cartelas{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:13px}
.ma-cartela{background:#FFFFFF;color:var(--ma-ink);border-left:5px solid var(--ma-sun);border-radius:4px 13px 13px 4px;padding:13px 21px;box-shadow:0 13px 34px rgba(20,8,70,.28);display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateY(21px) rotate(-.6deg);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.ma-cartela:nth-child(2){transition-delay:.25s;border-left-color:var(--ma-mint)}.ma-cartela:nth-child(3){transition-delay:.5s;border-left-color:#FF8FB8}
.ma-in .ma-cartela{opacity:1;transform:none}
.ma-cartela b{font:700 15px 'Space Grotesk',sans-serif}
.ma-cartela i{font:italic 15px/1.45 Georgia,serif;color:#3A4152}
.ma-cartela span{font:500 11px 'IBM Plex Mono',monospace;color:var(--ma-violet);letter-spacing:.06em}
.ma-pal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ma-pal li{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;padding:8px 13px 8px 8px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);outline:none;transition:background .3s,transform .3s}
.ma-chip{grid-row:1/3;width:34px;height:34px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.85);transition:transform .4s}
.ma-pal b{font:600 14px 'Space Grotesk',sans-serif;color:#FFFFFF}
.ma-pal em{font:normal 12px/1.35 'IBM Plex Sans',sans-serif;color:#E9E5FF;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .4s}
.ma-pal li:hover,.ma-pal li:focus-visible{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.ma-pal li:focus-visible{outline:2px solid var(--ma-sun);outline-offset:2px}
.ma-pal li:hover .ma-chip,.ma-pal li:focus-visible .ma-chip{transform:scale(1.15)}
.ma-pal li:hover em,.ma-pal li:focus-visible em{max-height:40px;opacity:1}
@media (hover:none){.ma-pal em{max-height:none;opacity:1}}

/* Sala 3 · acuarela */
.ma-wc{display:flex;flex-direction:column;gap:34px;align-items:center}
.ma-word{position:relative;width:min(400px,100%);aspect-ratio:400/160;display:grid;place-items:center}
.ma-blob{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease .3s}
.ma-in .ma-blob{opacity:1}
.ma-word-t{position:relative;margin:0;font:700 clamp(40px,5vw,56px)/1 'Space Grotesk',sans-serif;letter-spacing:-.03em;color:#0B3A5C}
.ma-stroke{position:absolute;left:12%;right:12%;bottom:12%;width:76%;height:18px}
.ma-stroke path{fill:none;stroke:var(--ma-mag);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) 1.2s}
.ma-in .ma-stroke path{stroke-dashoffset:0}
.ma-btns{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
.ma-btns figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.ma-btns figcaption{font:500 12px 'IBM Plex Mono',monospace;color:#6B7280;letter-spacing:.08em;text-transform:uppercase}
.ma-b-flat{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;background:#243BCE;color:#FFFFFF;font-weight:600;border-radius:4px}
.ma-b-wc{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;color:#FFFFFF;font-weight:600}
.ma-b-wc svg{position:absolute;inset:0;width:100%;height:100%}
.ma-b-wc b{position:relative;font-weight:600}

/* Sala 4 · la firma anotada */
.ma-signdemo{display:flex;flex-direction:column;gap:21px}
.ma-plano{padding:55px 21px 34px;border-radius:21px;background:#2B1F7A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cpath d='M21 0H0V21' fill='none' stroke='%23ffffff' stroke-opacity='.08'/%3E%3C/svg%3E");display:flex;justify-content:center;box-shadow:0 21px 55px rgba(30,15,90,.28)}
.ma-pin{position:absolute;top:-30px;left:50%;translate:-50% 0;width:20px;height:20px;border-radius:50%;background:#FFFFFF;color:var(--ma-violet);font:700 11px/20px 'IBM Plex Mono',monospace;text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--ma-sun)}
.ma-pin::after{content:'';position:absolute;left:50%;top:20px;width:1px;height:10px;background:rgba(255,255,255,.7)}
.baw-txt b,.baw-txt,.ma-pt{position:relative}
.ma-pt .ma-pin,b .ma-pin{position:relative;top:-.55em;left:auto;translate:none;display:inline-block;width:17px;height:17px;line-height:17px;font-size:10px;margin-left:3px;vertical-align:baseline}
.ma-pt .ma-pin::after,b .ma-pin::after{display:none}
.ma-pin5{top:auto;bottom:-32px;left:auto;right:21px;translate:none}
.ma-pin5::after{top:auto;bottom:20px}
.ma-legend{margin:0;padding:0 0 0 21px;display:grid;gap:5px;font-size:15px;line-height:1.5;color:#2B3140}
.ma-legend li::marker{font:700 13px 'IBM Plex Mono',monospace;color:var(--ma-violet)}
.ma-real{padding:21px;border-radius:13px;background:linear-gradient(135deg,#3B2BB0,#6A2FC0 55%,#A33BA8);display:flex;justify-content:center}

/* Sala 5 · prueba y llamada */
.ma-link{color:var(--ma-sun);font-weight:600;text-underline-offset:5px}
.ma-cta{padding:34px;border-radius:21px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);text-align:center}
.ma-cta-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;background:#25D366;color:#052E16;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 13px 34px rgba(0,0,0,.25);transition:transform .2s}
.ma-cta-b:hover{transform:translateY(-2px)}
.ma-cta-s{margin:13px 0 0;color:#F4F2FF;font-size:15px}
.ma-count{color:var(--ma-sun)}

/* ===== Firma φ (pie y demostraciones) ===== */
.baw-sign-row{position:relative;display:flex;justify-content:center;padding:34px 16px 8px}
.baw-sign-row::before{content:'';position:absolute;left:50%;top:50%;width:520px;height:160px;translate:-50% -40%;background:radial-gradient(closest-side,rgba(255,227,107,.16),rgba(255,227,107,0) 61.8%);pointer-events:none}
.baw-sign{--lz:#FFE36B;--bg:#2B1A63;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:13px;max-width:max-content;padding:13px 21px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#E6E3FF;font-size:13px;line-height:1.618;text-decoration:none;transition:transform .3s,background .3s,border-color .3s}
.baw-ring{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.baw-ring::before{content:'';position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 76%,var(--lz) 78% 96%,transparent 97%);animation:bawSpin 8s linear infinite}
.baw-ring::after{content:'';position:absolute;inset:1.5px;border-radius:inherit;background:var(--bg)}
.baw-phi{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--lz);color:#111126;display:grid;place-items:center;font:italic 19px/1 Georgia,'Times New Roman',serif;animation:bawBeat 4.2s ease-in-out infinite}
.baw-txt{position:relative}
.baw-txt b{font-weight:700;background:linear-gradient(90deg,var(--lz),#FFFFFF,var(--lz));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bawShine 5s linear infinite}
a.baw-sign:hover,a.baw-sign:focus-visible,.baw-sign--demo:hover{border-color:var(--lz);background:rgba(255,255,255,.08);transform:translateY(-1px)}
a.baw-sign:hover .baw-ring::before,a.baw-sign:focus-visible .baw-ring::before,.baw-sign--demo:hover .baw-ring::before{animation-duration:2.6s}
a.baw-sign:hover .baw-phi,a.baw-sign:focus-visible .baw-phi,.baw-sign--demo:hover .baw-phi{animation:bawTurn .9s cubic-bezier(.4,0,.2,1)}
a.baw-sign:focus-visible{outline:2px solid var(--lz);outline-offset:3px}
.baw-sign--demo{--bg:#3A2A9E;cursor:default}
.ma-real .baw-sign--demo{--bg:#3B2690}
.baw-sign--big{font-size:16px;padding:17px 26px}
.baw-sign--big .baw-phi{width:44px;height:44px;font-size:24px}
@keyframes bawSpin{to{rotate:360deg}}
@keyframes bawBeat{0%,76%,100%{box-shadow:0 0 0 0 rgba(255,227,107,0)}88%{box-shadow:0 0 0 7px rgba(255,227,107,.35)}}
@keyframes bawShine{to{background-position:-200% 0}}
@keyframes bawTurn{to{rotate:360deg}}
@media (max-width:560px){.baw-sign{border-radius:16px;font-size:12px;text-align:left}.baw-sign--big{font-size:13px;padding:13px 16px}.ma-pin{display:none}.ma-plano{padding:21px 13px}footer{padding-bottom:88px}}

/* pausa, movimiento reducido y modo liviano */
.ma-off *,.ma-off *::before,.ma-off *::after{animation-play-state:paused!important}
.m10-paused .baw-ring::before,.m10-paused .baw-phi,.m10-paused .baw-txt b{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .ma *,.ma *::before,.ma *::after,.baw-ring::before,.baw-phi,.baw-txt b{animation:none!important;transition:none!important}
  .ma-sk{stroke-dashoffset:0}.ma-eye{opacity:.9}.ma-key{background-size:100% 36%}.ma-cartela{opacity:1;transform:none}.ma-blob{opacity:1}.ma-stroke path{stroke-dashoffset:0}.ma-h3::after{transform:scaleX(1)}
  .baw-ring::before{display:none}
}
.ma-lite .baw-ring::before{display:none}.ma-lite .baw-phi,.ma-lite .ma-eye{animation:none}