/* Ballet Brío · sistema visual orquestado (31 oct 2026). Lenguaje tomado de las publicaciones de Brío: fondo lila de estudio, píldora azul rey, Montserrat negrita con una palabra en cursiva. */ @font-face{font-family:"Montserrat";src:url("assets/montserrat-variable.ttf") format("truetype");font-weight:100 900;font-display:swap} :root{ --lila:#efbdf2; --lila-deep:#d8a6d9; --lila-soft:#f7e6f8; --rosa:#e1bcdb; --azul:#2929d6; --azul-2:#4465e6; --ink:#17145e; --ink-soft:#3b3a7a; --paper:#fffaff; --white:#fff; --radius:28px; --pill:999px; --gutter:clamp(20px,5vw,72px); --max:1240px; --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-expo:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.45,.64,1); --header-h:76px; color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--paper);color:var(--ink);font:500 1.0625rem/1.6 "Montserrat",system-ui,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} picture{display:contents} a{color:inherit} h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.035em;text-wrap:balance} p{margin:0;text-wrap:pretty} em{font-style:italic;font-weight:700} address{font-style:normal} :focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px} .skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--azul);color:var(--white);padding:12px 18px;border-radius:var(--pill);font-weight:700;text-decoration:none} .skip:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Píldora: el marcador de Brío en Instagram */ .pill{display:inline-flex;align-items:center;min-height:34px;padding:4px 16px;border-radius:var(--pill);background:var(--azul);color:var(--white);font-weight:800;font-size:.875rem;letter-spacing:-.01em;line-height:1.2} .pill-light{background:var(--white);color:var(--azul)} /* Botones: uno principal y uno secundario en todo el sitio */ .button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:12px 26px;border-radius:var(--pill);font-weight:700;font-size:1rem;text-decoration:none;transition:background-color .2s,color .2s,box-shadow .2s} @media (prefers-reduced-motion:no-preference){.button{transition:transform .2s var(--ease-out),background-color .2s,color .2s,box-shadow .2s}.button:active{transform:scale(.97)}} .button-primary{background:var(--azul);color:var(--white);box-shadow:0 10px 30px -12px rgba(41,41,214,.7)} .button-primary:hover{background:#1f1fb8} .button-ghost{background:transparent;color:var(--azul);box-shadow:inset 0 0 0 2px var(--azul)} .button-ghost:hover{background:var(--azul);color:var(--white)} .text-link{display:inline-flex;align-items:center;gap:.35em;min-height:44px;color:var(--azul);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px} .text-link:hover{text-decoration-color:var(--rosa)} .text-link.light{color:var(--white)} @media (prefers-reduced-motion:no-preference){ .button span[aria-hidden],.text-link span[aria-hidden],.journal-link,.niveles a{transition:translate .25s var(--ease-out)} .button:hover span[aria-hidden],.text-link:hover span[aria-hidden]{translate:3px -2px} .button[href^="#"]:hover span[aria-hidden]{translate:0 3px} .text-link{transition:text-decoration-color .2s,text-underline-offset .25s var(--ease-out)} .text-link:hover{text-underline-offset:8px} } /* Encabezado */ .header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:20px;height:var(--header-h);padding:0 var(--gutter);transition:background-color .3s,box-shadow .3s,translate .45s var(--ease-expo)} .header.is-hidden:not(:focus-within){translate:0 -100%} @media (prefers-reduced-motion:reduce){.header{transition:background-color .3s,box-shadow .3s}} .header.is-scrolled{background:rgba(255,250,255,.92);box-shadow:0 1px 0 rgba(23,20,94,.08);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)} .brand{display:flex;align-items:center;min-height:44px;margin-right:auto;view-transition-name:brand} .brand img{width:72px} /* logo-azul-transparente.png: derivado del original, solo sin la placa blanca */ #navigation{display:flex;align-items:center;gap:6px} #navigation a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--pill);font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink);transition:background-color .2s,color .2s} #navigation a:hover,#navigation a[aria-current]{background:rgba(41,41,214,.1);color:var(--azul)} #navigation .nav-cta{background:var(--azul);color:var(--white);margin-left:8px;padding:0 20px} #navigation .nav-cta:hover{background:#1f1fb8;color:var(--white)} .menu-toggle{display:none} @media (max-width:1100px){ .menu-ready .menu-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:0;border-radius:var(--pill);background:var(--azul);color:var(--white);font:700 .95rem "Montserrat",sans-serif;cursor:pointer} /* Sin JS: los enlaces quedan visibles en una fila desplazable bajo el logo. */ .header{flex-wrap:wrap;height:auto;min-height:var(--header-h);padding-top:8px;padding-bottom:8px} #navigation{flex-wrap:wrap} .menu-ready .header{flex-wrap:nowrap;height:var(--header-h);padding-top:0;padding-bottom:0} .menu-ready #navigation{position:fixed;inset:var(--header-h) 12px auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;max-height:calc(100dvh - var(--header-h) - 24px);overflow-y:auto;padding:12px;border-radius:24px;background:var(--white);box-shadow:0 24px 60px -20px rgba(23,20,94,.35);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s} .menu-ready #navigation.open{opacity:1;visibility:visible;transition:opacity .2s} #navigation a{min-height:52px;padding:0 18px;font-size:1.05rem} #navigation .nav-cta{margin:6px 0 0;justify-content:center} } @media (max-width:1100px) and (prefers-reduced-motion:no-preference){ .menu-ready #navigation{transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility 0s .22s} .menu-ready #navigation.open{transform:none;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)} .menu-ready #navigation.open a{animation:menu-item .4s var(--ease-expo) both} .menu-ready #navigation.open a:nth-child(2){animation-delay:.03s}.menu-ready #navigation.open a:nth-child(3){animation-delay:.06s}.menu-ready #navigation.open a:nth-child(4){animation-delay:.09s}.menu-ready #navigation.open a:nth-child(5){animation-delay:.12s}.menu-ready #navigation.open a:nth-child(6){animation-delay:.15s} } @keyframes menu-item{from{opacity:0;transform:translateY(-6px)}} /* Cortina de entrada: un telón azul que sube una vez por visita; nunca bloquea la interacción */ .intro{display:none} .intro-on .intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--azul);pointer-events:none;clip-path:inset(0 0 0 0 round 0);animation:curtain-up .7s var(--ease-expo) .48s forwards} .intro-on .intro img{width:min(42vw,220px);animation:logo-in .45s var(--ease-out) both,logo-out .5s var(--ease-in-out) .48s forwards} @keyframes logo-in{from{opacity:0;transform:translateY(16px) scale(.94)}} @keyframes logo-out{to{opacity:0;transform:translateY(-48px) scale(.96)}} /* El borde inferior se curva al subir, como un telón. */ @keyframes curtain-up{to{clip-path:inset(0 0 100% 0 round 0 0 50% 50% / 0 0 22vh 22vh);visibility:hidden}} /* Portada */ .hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(112px,16vh,150px) 0 0;background:linear-gradient(180deg,var(--lila) 0%,var(--lila) 48%,var(--lila-deep) 100%);text-align:center;overflow:clip;view-timeline:--hero} .hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:960px;padding:0 var(--gutter)} .hero h1{font-size:clamp(2.9rem,9.4vw,7.4rem);color:var(--azul);letter-spacing:-.05em;line-height:.94} /* Cada línea es una ventana: el texto sube desde detrás de ella. El relleno evita cortar acentos, descendentes y la cursiva. */ .hero h1 .line{display:block;overflow:clip;padding:.14em .14em .2em;margin:-.14em -.14em -.2em} .hero h1 .line>span{display:inline-block} .hero h1 em{font-weight:700;letter-spacing:-.04em;color:var(--ink)} .hero-lead{max-width:36ch;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink);font-weight:500} .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px} .hero-photo{position:relative;z-index:1;width:min(100%,1080px);margin:clamp(24px,4vh,48px) 0 0; /* Funde los bordes de la foto con el fondo lila: no se nota dónde termina. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 94%,transparent);-webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 94%,transparent);mask-composite:intersect} .hero-photo img{width:100%} /* Entrada de portada, encadenada con el telón: píldora, líneas del titular, texto, botones y foto. */ @media (prefers-reduced-motion:no-preference){ .hero{--d:0s} .intro-seq .hero{--d:.55s} .hero-pill{animation:pill-in .7s var(--ease-spring) calc(var(--d) + .05s) both} .hero h1 .line>span{animation:line-up 1.05s var(--ease-expo) both} .hero h1 .line:nth-child(1)>span{animation-delay:calc(var(--d) + .12s)} .hero h1 .line:nth-child(2)>span{animation-delay:calc(var(--d) + .22s)} .hero-lead{animation:rise .9s var(--ease-expo) calc(var(--d) + .38s) both} .hero-actions{animation:rise .9s var(--ease-expo) calc(var(--d) + .48s) both} .hero-photo{animation:photo-in 1.5s var(--ease-expo) calc(var(--d) + .3s) both} } @keyframes pill-in{from{opacity:0;transform:translateY(10px) scale(.86)}} @keyframes line-up{from{transform:translateY(105%) rotate(2deg)}} @keyframes rise{from{opacity:0;transform:translateY(24px)}} /* La foto llega desenfocada y se asienta, como al enfocar la cámara. */ @keyframes photo-in{from{opacity:0;transform:translateY(56px) scale(1.06);filter:blur(12px)}to{filter:blur(0)}} /* Al bajar, la foto se aleja y el texto se despide (solo con soporte nativo; es decorativo) */ @media (prefers-reduced-motion:no-preference){ @supports ((animation-timeline:view()) and (animation-range:entry)){ .hero-photo img{animation:drift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%} .hero-copy{animation:fade-up linear both;animation-timeline:--hero;animation-range:exit 0% exit 55%} } } @keyframes drift{to{transform:translateY(-5%) scale(.95);opacity:.65}} @keyframes fade-up{to{transform:translateY(-48px);opacity:0}} /* Franja de datos */ .facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;background:var(--azul);color:var(--white)} .facts li{padding:22px var(--gutter);font-weight:700;font-size:1rem;line-height:1.35;border-left:1px solid rgba(255,255,255,.18)} .facts li:first-child{border-left:0} .facts span:not([aria-hidden]){display:block;font-weight:500;font-size:.85rem;color:#d7d9ff} .facts a{display:block;min-height:44px;text-decoration:none} .facts a:hover{text-decoration:underline;text-underline-offset:4px} @media (max-width:900px){.facts{grid-template-columns:1fr 1fr}.facts li:nth-child(3){border-left:0}.facts li{border-top:1px solid rgba(255,255,255,.18);padding:18px 20px}} /* Secciones */ .section{padding:clamp(80px,12vw,150px) var(--gutter)} .section-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:var(--max);margin:0 auto clamp(40px,6vw,72px)} .section-head h2{font-size:clamp(2.4rem,6vw,4.6rem);color:var(--azul);max-width:14ch} .section-head h2 em{color:var(--ink)} .section-head p:not(.pill){max-width:52ch;color:var(--ink-soft)} .nota{max-width:var(--max);margin:28px auto 0;color:var(--ink-soft);font-size:.95rem} /* Clases */ .clases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);max-width:var(--max);margin:0 auto;align-items:start} .clase{display:flex;flex-direction:column;border-radius:var(--radius);background:var(--white);overflow:hidden;box-shadow:0 30px 60px -40px rgba(23,20,94,.45)} .clase:nth-child(2){margin-top:clamp(0px,6vw,80px)} .clase img{width:100%;aspect-ratio:4/5;object-fit:cover} .clase-body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 18px} .clase h3{font-size:1.75rem;color:var(--azul)} .clase p{color:var(--ink-soft)} .clase-type{background:var(--lila)} .clase-quote{display:grid;place-items:center;aspect-ratio:4/5;padding:28px;background:var(--azul);color:var(--white);font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:800;font-style:italic;letter-spacing:-.04em;line-height:.95;text-align:center} .clase-type p{color:var(--ink)} @media (max-width:900px){.clases-grid{grid-template-columns:1fr;max-width:560px}.clase:nth-child(2){margin-top:0}.clase img,.clase-quote{aspect-ratio:5/4}} /* Método */ .metodo{padding:clamp(80px,12vw,150px) var(--gutter);background:var(--azul);color:var(--white)} .metodo-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:center;max-width:var(--max);margin:0 auto} .metodo-photo{margin:0;border-radius:var(--radius);overflow:hidden} .metodo-photo img{width:100%;aspect-ratio:4/5;object-fit:cover} .metodo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px} .metodo h2{font-size:clamp(2.6rem,6vw,5rem)} .metodo h2 em{color:var(--rosa)} .metodo blockquote{margin:0;padding-left:22px;border-left:4px solid var(--rosa)} .metodo blockquote p{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;line-height:1.25;letter-spacing:-.02em} .metodo blockquote footer{margin-top:10px;font-weight:600;color:#d7d9ff} .metodo blockquote footer a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:4px} cite{display:block;margin-top:6px;font-style:normal;font-size:.88rem} cite a{display:inline-flex;align-items:center;min-height:44px;color:var(--azul);font-weight:700;text-underline-offset:4px} .metodo-copy>p:not(.pill){max-width:50ch;color:#e6e7ff} @media (max-width:900px){.metodo-inner{grid-template-columns:1fr}.metodo-photo{max-width:460px}} /* Maestras */ .maestras{background:var(--lila-soft)} .maestras-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);max-width:var(--max);margin:0 auto} .maestra{padding:clamp(26px,3vw,40px);border-radius:var(--radius);background:var(--white)} .maestra h3{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--azul);max-width:14ch} .niveles{display:grid;gap:4px;margin:22px 0 0;padding:0;list-style:none} .niveles li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:12px 0;border-top:1px solid rgba(23,20,94,.12);color:var(--ink-soft)} .niveles strong{color:var(--ink)} .niveles a{display:inline-flex;align-items:center;min-height:44px;color:var(--azul);font-weight:700;text-underline-offset:4px} @media (max-width:900px){.maestras-grid{grid-template-columns:1fr}} /* Bitácora (tarjetas generadas por bitacora.js) */ .feed-grid,.archivo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);max-width:var(--max);margin:0 auto} .journal-card{display:flex;flex-direction:column;border-radius:var(--radius);background:var(--white);overflow:hidden;box-shadow:0 30px 60px -40px rgba(23,20,94,.45)} .journal-cover-link{display:block;overflow:hidden} .journal-cover{width:100%;aspect-ratio:4/3;object-fit:cover} @media (prefers-reduced-motion:no-preference){.clase img,.journal-cover{transition:transform .9s var(--ease-out)}.clase:hover img,.journal-card:hover .journal-cover{transform:scale(1.03)}} .journal-cover-type{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:26px;background:var(--lila);color:var(--ink)} .journal-cover-type span{font-weight:700;font-size:.85rem;color:var(--azul)} .journal-cover-type strong{font-size:1.35rem;line-height:1.15;letter-spacing:-.02em} .journal-card-content{display:flex;flex-direction:column;gap:10px;padding:24px 24px 16px} .journal-meta{font-size:.85rem;font-weight:700;color:var(--azul)} .journal-title{font-size:1.3rem;line-height:1.2;letter-spacing:-.02em} .journal-title a{text-decoration:none} .journal-title a:hover{text-decoration:underline;text-underline-offset:4px} .journal-summary{color:var(--ink-soft);font-size:.98rem} .journal-link{display:inline-flex;align-items:center;min-height:44px;color:var(--azul);font-weight:700;text-underline-offset:4px} .archive-empty,.archive-notice{grid-column:1/-1;padding:24px;border-radius:var(--radius);background:var(--lila-soft);color:var(--ink)} .feed-more{display:flex;justify-content:center;margin-top:44px} @media (max-width:900px){.feed-grid,.archivo-grid{grid-template-columns:1fr;max-width:560px}} /* Escenario */ .escenario{position:relative;isolation:isolate;overflow:clip;padding:clamp(80px,12vw,150px) var(--gutter);background:var(--ink);color:var(--white)} /* Bruma de tinta azul y rosa (video decorativo de stock, sin personas). Se reproduce una vez al entrar; con movimiento reducido queda el póster. */ .escenario-bruma{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.28;mix-blend-mode:screen;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 70%)} .escenario-inner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center;max-width:var(--max);margin:0 auto} .escenario-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px} .escenario h2{font-size:clamp(2.6rem,6vw,5rem)} .escenario h2 em{color:var(--lila)} .escenario-copy>p:not(.pill){max-width:44ch;color:#e6e7ff} .escenario-photo{margin:0;max-width:440px;justify-self:center} .escenario-photo img{width:100%;border-radius:var(--radius)} .escenario-photo figcaption{margin-top:12px;font-size:.88rem;color:#c9caf2} @media (max-width:900px){.escenario-inner{grid-template-columns:1fr}} /* Visítanos */ .visitanos{background:linear-gradient(180deg,var(--paper),var(--lila-soft))} .visitanos-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:center;max-width:var(--max);margin:0 auto} .visitanos-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px} .visitanos h2{font-size:clamp(2.3rem,5vw,4rem);color:var(--azul)} .visitanos h2 em{color:var(--ink)} .visitanos address{font-size:1.1rem;font-weight:600;color:var(--ink)} .visitanos-actions{display:flex;flex-wrap:wrap;gap:12px} .visitanos-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0;padding:0;list-style:none} .visitanos-photo{margin:0;border-radius:var(--radius);overflow:hidden} .visitanos-photo img{width:100%;aspect-ratio:16/10;object-fit:cover} @media (max-width:900px){.visitanos-inner{grid-template-columns:1fr}} /* Pie */ .footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px var(--gutter);background:var(--azul);color:var(--white);text-align:center} .footer img{width:110px} .footer-note{font-size:.88rem;color:#d7d9ff} /* Aparición al hacer scroll: nativa donde existe; IntersectionObserver en brio.js para el resto. Encabezados de sección en cascada (píldora, título, texto), tarjetas escalonadas y fotos que se abren como una ventana. */ @media (prefers-reduced-motion:no-preference){ @supports ((animation-timeline:view()) and (animation-range:entry)){ .reveal,.section-head>*,.facts li{animation:reveal-in var(--ease-out) both;animation-timeline:view();animation-range:entry 5% cover 30%} .section-head>.pill{animation-name:pill-in;animation-timing-function:var(--ease-spring)} .section-head>:nth-child(2){animation-range:entry 12% cover 34%} .section-head>:nth-child(3){animation-range:entry 20% cover 38%} .clases-grid>:nth-child(2),.maestras-grid>:nth-child(2),.feed-grid>:nth-child(2),.archivo-grid>:nth-child(3n+2),.facts li:nth-child(2){animation-range:entry 14% cover 36%} .clases-grid>:nth-child(3),.feed-grid>:nth-child(3),.archivo-grid>:nth-child(3n),.facts li:nth-child(3){animation-range:entry 24% cover 42%} .facts li:nth-child(4){animation-range:entry 32% cover 46%} .feed-grid>*,.archivo-grid>*{animation:reveal-in var(--ease-out) both;animation-timeline:view();animation-range:entry 5% cover 30%} .metodo-photo,.visitanos-photo,.escenario-photo img{animation:window-open var(--ease-out) both;animation-timeline:view();animation-range:entry 0% cover 45%} .metodo-photo img,.visitanos-photo img{animation:settle linear both;animation-timeline:view();animation-range:cover 0% cover 100%} } @supports not ((animation-timeline:view()) and (animation-range:entry)){ .reveal-ready :is(.reveal,.section-head>*){opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)} .reveal-ready :is(.reveal,.section-head>*).is-in{opacity:1;transform:none} .reveal-ready .section-head>:nth-child(2){transition-delay:.08s} .reveal-ready .section-head>:nth-child(3),.reveal-ready .clases-grid>:nth-child(2){transition-delay:.16s} .reveal-ready .clases-grid>:nth-child(3){transition-delay:.24s} } } @keyframes reveal-in{from{opacity:0;transform:translateY(56px)}} @keyframes window-open{from{clip-path:inset(14% 10% 14% 10% round 40px);opacity:.4}to{clip-path:inset(0 0 0 0 round var(--radius));opacity:1}} @keyframes settle{from{transform:scale(1.14) translateY(-3%)}to{transform:scale(1.02) translateY(2%)}} /* Cambio de página portada ↔ bitácora */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:.24s var(--ease-in-out) both vt-out} ::view-transition-new(root){animation:.36s var(--ease-expo) both vt-in} /* El logo y el título «Lo que bailamos…» viajan de una página a la otra. */ ::view-transition-group(brand),::view-transition-group(bitacora-title){animation-duration:.36s;animation-timing-function:var(--ease-expo)} /* De regreso a la portada, el movimiento va en sentido contrario. */ :active-view-transition-type(back){&::view-transition-old(root){animation-name:vt-out-back}&::view-transition-new(root){animation-name:vt-in-back}} } #bitacora-title,#archivo-title{view-transition-name:bitacora-title} @keyframes vt-out{to{opacity:0;transform:translateY(-32px)}} @keyframes vt-in{from{opacity:0;transform:translateY(48px)}} @keyframes vt-out-back{to{opacity:0;transform:translateY(32px)}} @keyframes vt-in-back{from{opacity:0;transform:translateY(-48px)}} /* Bitácora: página de archivo */ .archivo-hero{padding:clamp(130px,18vh,180px) var(--gutter) clamp(40px,6vw,64px);background:linear-gradient(180deg,var(--lila),var(--lila-soft))} .archivo-hero .section-head{margin-bottom:0} .archivo-hero h1{font-size:clamp(3rem,9vw,6.4rem);color:var(--azul);letter-spacing:-.05em} .archivo-hero h1 em{color:var(--ink)} .archivo-filtros{padding:28px var(--gutter) 0} .filtros-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;max-width:var(--max);margin:0 auto} .filtros-grid label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem;color:var(--ink)} .filtros-grid input,.filtros-grid select{min-height:52px;padding:0 18px;border:2px solid rgba(23,20,94,.16);border-radius:var(--pill);background:var(--white);color:var(--ink);font:500 1rem "Montserrat",sans-serif} .filtros-grid input:focus,.filtros-grid select:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 4px rgba(41,41,214,.18)} #archive-count{max-width:var(--max);margin:18px auto 0;font-weight:700;color:var(--ink-soft)} .archivo-feed{padding-top:32px} @media (max-width:700px){.filtros-grid{grid-template-columns:1fr}} /* Historia en diálogo */ #story-dialog{width:min(860px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--radius);background:var(--white);color:var(--ink);box-shadow:0 40px 120px -30px rgba(23,20,94,.55)} #story-dialog::backdrop{background:rgba(23,20,94,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* Entrada y salida de la historia con @starting-style; donde no hay soporte, se abre y cierra sin animación. */ #story-dialog{opacity:0;transform:translateY(32px) scale(.97);transition:opacity .3s var(--ease-out),transform .45s var(--ease-expo),display .45s,overlay .45s;transition-behavior:allow-discrete} #story-dialog[open]{opacity:1;transform:none;@starting-style{opacity:0;transform:translateY(32px) scale(.97)}} #story-dialog::backdrop{transition:background-color .35s,backdrop-filter .35s,display .35s,overlay .35s;transition-behavior:allow-discrete} #story-dialog:not([open])::backdrop{background:rgba(23,20,94,0);backdrop-filter:blur(0)} @starting-style{#story-dialog[open]::backdrop{background:rgba(23,20,94,0);backdrop-filter:blur(0)}} @media (prefers-reduced-motion:reduce){#story-dialog,#story-dialog[open],#story-dialog::backdrop{transform:none;transition:none}@starting-style{#story-dialog[open]{transform:none}}} [data-close-story]{position:sticky;top:12px;display:block;z-index:2;min-height:44px;margin:12px 12px 0 auto;padding:0 18px;border:0;border-radius:var(--pill);background:var(--azul);color:var(--white);font:700 .95rem "Montserrat",sans-serif;cursor:pointer} #story-content{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,4vw,48px)} .story-title{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--azul)} .story-summary{font-size:1.1rem;font-weight:600} .story-image{width:100%;max-height:70vh;object-fit:contain;border-radius:20px;background:var(--lila-soft)} .story-body{display:grid;gap:14px;color:var(--ink-soft)} .story-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .story-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px} .story-documents{display:grid;gap:12px} .story-document{padding:18px 20px;border-radius:20px;background:var(--lila-soft)} .story-document h4{margin:0 0 6px;font-size:1.05rem} .story-source{font-size:.92rem;color:var(--ink-soft)} .story-videos video{width:100%;border-radius:16px} /* ===== Todo el material de la carpeta (31 oct, 12:30) ===== */ /* Franja de datos: patrón de cintas de la marca bajo un velo azul. */ .facts{background:linear-gradient(rgba(41,41,214,.88),rgba(41,41,214,.88)),url("assets/marca/patron-cintas.webp") center/620px repeat} /* Método: humo rosa sobre azul (Pexels) como profundidad. */ .metodo{position:relative;isolation:isolate;overflow:clip} .metodo::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/ambiente/humo-rosa.webp") right center/auto 120% no-repeat;opacity:.38;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%)} .metodo-detalles{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:420px} .metodo-detalles img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px} .credito{grid-column:1/-1;font-size:.8rem;color:#c9caf2} /* Bitácora: B con cintas como ornamento. */ .bitacora{position:relative;isolation:isolate;overflow:clip} .bitacora::before{content:"";position:absolute;right:-60px;top:40px;z-index:-1;width:min(34vw,360px);aspect-ratio:1;background:url("assets/marca/b-cintas.webp") center/cover;border-radius:50%;opacity:.16;pointer-events:none} /* Galería en mosaico */ .galeria{background:var(--lila-soft)} .galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:clamp(10px,1.4vw,18px);max-width:var(--max);margin:0 auto} .g-item{margin:0;border-radius:22px;overflow:hidden;background:var(--lila)} .g-item img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center 40%)} .g-tall{grid-row:span 2} .g-wide{grid-column:span 2} @media (prefers-reduced-motion:no-preference){.g-item img{transition:transform .9s var(--ease-expo)}.g-item:hover img{transform:scale(1.04)}} @media (max-width:900px){.galeria-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}} @media (max-width:480px){.galeria-grid{grid-auto-rows:140px}} /* Clase muestra: foco de escenario de la marca. */ .muestra{position:relative;isolation:isolate;overflow:clip;padding:clamp(90px,13vw,170px) var(--gutter);background:var(--azul) url("assets/marca/escenario-foco.webp") left center/cover no-repeat;color:var(--white)} .muestra::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,20,94,.15) 0%,rgba(41,41,214,.82) 52%,var(--azul) 100%)} .muestra-inner{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:560px;margin-left:auto} .muestra h2{font-size:clamp(2.3rem,5vw,4rem)} .muestra h2 em{color:var(--lila)} .muestra p:not(.pill){color:#e6e7ff;max-width:42ch} .button-light{background:var(--white);color:var(--azul)} .button-light:hover{background:var(--lila)} @media (max-width:700px){.muestra{background-position:20% center}.muestra::before{background:linear-gradient(180deg,rgba(41,41,214,.55),rgba(41,41,214,.9) 45%)}.muestra-inner{margin:0}} /* Bitácora (página): tul con el logo como fondo de cabecera. */ .archivo-hero{position:relative;isolation:isolate;overflow:clip} .archivo-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/ambiente/cielo.webp") center 40%/cover no-repeat;opacity:.35;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 80%);mask-image:linear-gradient(90deg,transparent 35%,#000 80%)} /* Bitácora: categorías como botones (sincronizan el