:root,
[data-modo="dia"] {
color-scheme: light;
--paper:        #FDF8F0;
--paper-2:      #F6EDE0;
--surface:      #FFFCF7;
--surface-sink: #F1E6D6;
--ink:   #2A1E17;  
--ink-2: #6B5647;  
--ink-3: #8C7A6B;  
--gold-ink:  #8A5E12;  
--rosa-ink:  #9C2F50;  
--verde-ink: #3E6138;  
--lila-ink:  #5B4A7A;  
--danger:    #A32B22;  
--rosa:  #F2C9D3;
--verde: #CFE0C6;
--lila:  #DCD2EA;
--rosa-tint:  #F7DCE3;  
--verde-tint: #DDEAD6;  
--ambar-tint: #F6E4C0;  
--gris-tint:  #EDE4D8;  
--gold-deco: #C9922E;  
--gold-600:  #B8801F;  
--sobre-oro: #2A1E17;
--gold-700:  #8A5E12;  
--banda-fuerte:       #241A2E;
--banda-fuerte-tinta: #FDF8F0;
--banda-fuerte-tenue: #C9BBD4;
--hairline: #E3D5C2;  
--stroke:   #9C8877;  
--control-borde:   #9C8877;  
--control-elegido: #8A5E12;  
--focus: #6B3FA0;     
--shadow-1: 0 1px 2px rgba(90, 62, 40, .10), 0 2px 8px rgba(90, 62, 40, .06);
--shadow-2: 0 1px 2px rgba(90, 62, 40, .14), 0 12px 28px rgba(90, 62, 40, .16);
--scrim:    rgba(42, 30, 23, .48);
--input-bg: var(--surface);
--wash:            multiply;   
--grano:           .035;       
--grano-blend:     normal;
--brillo:          none;       
--picado-opacidad: 1;
--luna-opacidad:   0;          
--cartel-filtro:   none;
--cartel-sombra:   var(--shadow-2);
--parpadeo:        none;       
}
[data-modo="noche"] {
color-scheme: dark;
font-size: 17px;   
--paper:        #17111C;
--paper-2:      #1E1723;
--surface:      #221A28;
--surface-sink: #2E2434;
--ink:   #F7F0E6;  
--ink-2: #C9BBB2;  
--ink-3: #9E8F87;  
--gold-ink:  #F2C879;  
--rosa-ink:  #F6B8C6;  
--verde-ink: #A9D69C;  
--lila-ink:  #C6B8E6;  
--danger:    #FF9E8F;  
--rosa-tint:  #3A2430;  
--verde-tint: #23301F;  
--ambar-tint: #382B18;  
--gris-tint:  #2B2530;  
--gold-deco: #F2C879;
--gold-600:  #F2C879;  
--sobre-oro: #2A1E17;
--gold-700:  #C99A45;
--danger-bg: #B33A2B;  
--banda-fuerte:       #0C0810;
--banda-fuerte-tinta: #F3EBF7;
--banda-fuerte-tenue: #A9A0B4;
--hairline: #3D3247;
--stroke:   #7A6A88;   
--control-borde:   #7A6A88;  
--control-elegido: #F2C879;  
--focus:    #F2C879;
--shadow-1: inset 0 1px 0 rgba(242, 200, 121, .16);
--shadow-2: inset 0 1px 0 rgba(242, 200, 121, .24), 0 16px 40px rgba(0, 0, 0, .55);
--scrim:    rgba(6, 4, 8, .64);
--input-bg: #241C2A;   
--wash:            screen;
--grano:           .055;
--grano-blend:     screen;
--brillo:          drop-shadow(0 0 5px rgba(242, 200, 121, .55));
--picado-opacidad: .8;
--luna-opacidad:   .40;
--cartel-filtro:   brightness(.92) saturate(1.04);
--cartel-sombra:   0 0 0 1px rgba(242, 200, 121, .22), 0 18px 40px rgba(0, 0, 0, .5);
--parpadeo:        luces-parpadeo;
}
@media (prefers-color-scheme: dark) {
:root:not([data-modo="dia"]):not([data-modo="noche"]) {
color-scheme: dark;
font-size: 17px;   
--paper:        #17111C;
--paper-2:      #1E1723;
--surface:      #221A28;
--surface-sink: #2E2434;
--ink:   #F7F0E6;  
--ink-2: #C9BBB2;  
--ink-3: #9E8F87;  
--gold-ink:  #F2C879;  
--rosa-ink:  #F6B8C6;  
--verde-ink: #A9D69C;  
--lila-ink:  #C6B8E6;  
--danger:    #FF9E8F;  
--rosa-tint:  #3A2430;  
--verde-tint: #23301F;  
--ambar-tint: #382B18;  
--gris-tint:  #2B2530;  
--gold-deco: #F2C879;
--gold-600:  #F2C879;  
--sobre-oro: #2A1E17;
--gold-700:  #C99A45;
--danger-bg: #B33A2B;  
--banda-fuerte:       #0C0810;
--banda-fuerte-tinta: #F3EBF7;
--banda-fuerte-tenue: #A9A0B4;
--hairline: #3D3247;
--stroke:   #7A6A88;   
--focus:    #F2C879;
--shadow-1: inset 0 1px 0 rgba(242, 200, 121, .16);
--shadow-2: inset 0 1px 0 rgba(242, 200, 121, .24), 0 16px 40px rgba(0, 0, 0, .55);
--scrim:    rgba(6, 4, 8, .64);
--input-bg: #241C2A;   
--control-borde:   #7A6A88;  
--control-elegido: #F2C879;  
--wash:            screen;
--grano:           .055;
--grano-blend:     screen;
--brillo:          drop-shadow(0 0 5px rgba(242, 200, 121, .55));
--picado-opacidad: .8;
--luna-opacidad:   .40;
--cartel-filtro:   brightness(.92) saturate(1.04);
--cartel-sombra:   0 0 0 1px rgba(242, 200, 121, .22), 0 18px 40px rgba(0, 0, 0, .5);
--parpadeo:        luces-parpadeo;
}
}
[data-modo="noche"][data-farol="1"] {
font-size: 19px;
--paper: #0F0A13;
}
@font-face {
font-family: "Fraunces";
src: url("/fuentes/fraunces.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Ephesis";
src: url("/fuentes/ephesis.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
--font-text:    system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", sans-serif;
--font-script:  "Ephesis", "Snell Roundhand", "Apple Chancery", cursive;
--font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--fs-script:     3.25rem;    
--fs-display-xl: 2.75rem;    
--fs-display-l:  2.125rem;   
--fs-h1:         1.75rem;    
--fs-h2:         1.375rem;   
--fs-h3:         1.125rem;   
--fs-body-l:     1.0625rem;  
--fs-body:       1rem;       
--fs-body-s:     0.9375rem;  
--fs-label:      0.8125rem;  
--fs-micro:      0.75rem;    
--fs-eyebrow:    0.8125rem;  
}
:root {
--s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px; --s5: 20px;
--s6: 24px; --s8: 32px;  --s10: 40px; --s12: 48px; --s14: 56px;
--s16: 64px; --s20: 80px;
--r-card:  14px 14px 16px 14px;
--r-btn:   12px;
--r-field: 10px;
--r-chip:  8px;
--r-sheet: 20px 20px 0 0;
--tap-primary:   52px;
--tap-secondary: 48px;
--tap-min:       44px;
--fila:          64px;
}
[data-modo="noche"] {
--tap-primary:   56px;
--tap-secondary: 52px;
--fila:          72px;
}
[data-modo="noche"][data-farol="1"] {
--tap-primary: 60px;
}
:root {
--t-sheet-in:  240ms;
--t-sheet-out: 180ms;
--t-toast:     180ms;
--t-press:      80ms;
--t-riel:      260ms;
--t-modo:      400ms;
--e-sheet-in:  cubic-bezier(.32, .72, 0, 1);
--e-sheet-out: cubic-bezier(.4, 0, 1, 1);
--e-riel:      cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.luces { animation: none !important; }
}
[data-farol="1"] *,
[data-farol="1"] *::before,
[data-farol="1"] *::after {
animation: none !important;
transition: none !important;
}
.modo-ranura { display: inline-flex; }
.modo-btn {
display: inline-flex; align-items: center; gap: var(--s2);
min-height: var(--tap-min); min-width: var(--tap-min);
justify-content: center;
padding: 0 var(--s3);
border: 1px solid var(--control-borde);
border-radius: 999px;
background: transparent;
color: var(--ink-2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.modo-btn:hover { color: var(--ink); border-color: var(--stroke); }
.modo-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.modo-glifo { font-size: 1.05em; line-height: 1; }
@media (max-width: 30rem) { .modo-texto { display: none; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background var(--t-modo), color var(--t-modo);
}
main { display: block; }
.saltar {
position: absolute; left: -9999px;
background: var(--gold-600); color: var(--ink);
padding: var(--s3) var(--s5); border-radius: var(--r-btn);
font-weight: 600; text-decoration: none;
}
.saltar:focus { left: var(--s4); top: var(--s4); z-index: 99; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
a { color: var(--gold-ink); text-underline-offset: 3px; }
h1, h2, h3 {
font-family: var(--font-display);
font-variation-settings: "SOFT" 0, "WONK" 1;
font-weight: 600;
line-height: 1.12;
text-wrap: balance;
margin: 0;
}
.s {
padding: var(--s14) var(--s5);
max-width: 40rem;
margin: 0 auto;
}
.s > h2 { font-size: var(--fs-display-l); margin-bottom: var(--s5); }
.s > .entrada { color: var(--ink-2); margin: 0 0 var(--s6); font-size: var(--fs-body-l); }
.vacio { color: var(--ink-2); font-style: italic; margin: 0; }
.hueco {
background: var(--ambar-tint);
color: var(--gold-ink);
border-bottom: 2px dashed var(--gold-deco);
padding: 0 var(--s1);
font-weight: 600;
font-style: normal;
border-radius: 3px;
}
.banda {
background: var(--rosa-tint);
color: var(--rosa-ink);
font-weight: 600;
font-size: var(--fs-body-s);
text-align: center;
padding: var(--s3) var(--s5);
border-bottom: 1px solid var(--hairline);
}
.portada {
position: relative;
padding-top: var(--s20);
padding-bottom: var(--s14);
overflow: hidden;
}
.luna {
position: absolute;
top: -6rem; right: -5rem;
width: 20rem; height: 20rem;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
var(--gold-deco) 0%, transparent 62%);
opacity: var(--luna-opacidad);
pointer-events: none;
}
.eyebrow {
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: .09em;
color: var(--gold-ink);
font-weight: 600;
margin: 0 0 var(--s3);
}
.display {
font-size: var(--fs-display-xl);
font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
letter-spacing: -.02em;
margin-bottom: var(--s4);
}
.gancho {
font-size: var(--fs-body-l);
color: var(--ink-2);
margin: 0 0 var(--s8);
max-width: 30ch;
}
.cuando {
display: grid; gap: var(--s5);
margin: 0 0 var(--s6);
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
box-shadow: var(--shadow-1);
}
.cuando dt {
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink-3);
margin-bottom: var(--s1);
}
.cuando dd {
margin: 0;
font-size: var(--fs-h3);
font-weight: 500;
}
.cuando .hora {
display: block;
font-size: var(--fs-body-s);
color: var(--ink-2);
font-weight: 400;
}
.regresiva {
margin: 0 0 var(--s6);
color: var(--ink-2);
font-size: var(--fs-body-s);
}
.regresiva strong {
font-family: var(--font-display);
font-size: var(--fs-h1);
color: var(--gold-ink);
vertical-align: -.05em;
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap-primary);
padding: 0 var(--s8);
border: 0; border-radius: var(--r-btn);
font-family: var(--font-text);
font-size: var(--fs-body-l);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: transform var(--t-press);
}
.btn:active { transform: scale(.985); }
.btn-primario { background: var(--gold-600); color: var(--sobre-oro); box-shadow: var(--shadow-1); }
.btn-ancho { width: 100%; }
.cupo { text-align: center; padding-top: var(--s10); padding-bottom: var(--s10); }
.cupo-num {
font-family: var(--font-display);
font-size: var(--fs-display-l);
margin: 0;
color: var(--ink-2);
}
.cupo-num strong { color: var(--verde-ink); font-size: var(--fs-display-xl); }
.cupo-txt { margin: var(--s1) 0 0; color: var(--ink-2); }
.cupo-nota { margin: var(--s2) 0 0; font-size: var(--fs-body-s); color: var(--ink-3); }
.cupo-lleno .cupo-num { color: var(--rosa-ink); font-weight: 600; }
.numerada { list-style: none; counter-reset: r; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.numerada li {
counter-increment: r;
display: grid; grid-template-columns: 2rem 1fr; gap: var(--s4);
align-items: start;
}
.numerada .n {
width: 2rem; height: 2rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ambar-tint);
color: var(--gold-ink);
font-weight: 600;
font-size: var(--fs-body-s);
font-variant-numeric: tabular-nums;
}
.numerada .n::before { content: counter(r); }
.agenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.agenda li {
display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s4);
padding: var(--s4) 0;
border-bottom: 1px solid var(--hairline);
}
.agenda li:last-child { border-bottom: 0; }
.agenda time { color: var(--gold-ink); font-weight: 600; font-size: var(--fs-body-s); font-variant-numeric: tabular-nums; }
.agenda-t { margin: 0; font-weight: 500; }
.agenda-q { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--fs-body-s); }
.giro {
font-size: var(--fs-h3);
color: var(--ink-2);
margin: var(--s8) 0 var(--s4);
font-family: var(--font-text);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
font-size: var(--fs-label);
}
.tarjetas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: var(--s5);
box-shadow: var(--shadow-1);
display: grid;
gap: var(--s4);
align-content: start;
}
.tarjeta-foto {
inline-size: 100%;
block-size: auto;
aspect-ratio: 4 / 3;              
max-block-size: 260px;
object-fit: contain;
border-radius: calc(var(--r-card) - 2px);
background: var(--surface-sink);
display: block;
}
@media (min-width: 48rem) { .tarjeta-foto { max-block-size: 300px; } }
.tarjeta:has(.tarjeta-sin) {
grid-template-columns: auto 1fr;
align-items: center;
}
.tarjeta:has(.tarjeta-sin) .tarjeta-foto {
inline-size: 64px;
block-size: 64px;
border-radius: 50%;
}
@media (min-width: 48rem) {
.tarjeta:has(.tarjeta-sin) .tarjeta-foto { inline-size: 72px; block-size: 72px; }
}
.tarjeta-sin {
display: grid;
place-items: center;
block-size: 96px;
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: 1;
color: var(--gold-deco);
background: var(--surface-sink);
border: 1px dashed var(--hairline);
}
.tarjeta-cuerpo { min-inline-size: 0; }
.tarjeta-t { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.tarjeta-q { margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--fs-body-s); }
.tarjeta-giros { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; }
.tarjeta-giro {
padding: var(--s1) var(--s3);
border-radius: 999px;
background: var(--ambar-tint);
border: 1px solid var(--control-borde);
color: var(--gold-ink);
font-size: var(--fs-label);
}
.tarjeta-c { margin: var(--s3) 0 0; color: var(--ink-3); font-size: var(--fs-label); }
.tarjeta-redes { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; }
.red {
display: inline-flex; align-items: center; gap: var(--s2);
min-height: var(--tap-min); padding: 0 var(--s3);
border-radius: 999px; border: 1px solid var(--control-borde);
color: var(--ink-2); text-decoration: none; font-size: var(--fs-label);
}
.red:hover, .red:focus-visible { color: var(--gold-ink); border-color: var(--control-elegido); }
.red-icono { flex: 0 0 auto; }
.red-cual { color: var(--ink-3); }
@media (max-width: 26rem) { .red-cual { position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.patro-rejilla { gap: var(--s3); }
@media (min-width: 40rem) { .patro-rejilla { grid-template-columns: repeat(3, 1fr); } }
.patro-rejilla .tarjeta { padding: var(--s4); }
.patro-logo { object-fit: contain; padding: var(--s4); background: var(--paper-2); }
.patro-mensaje { margin: var(--s3) 0 0; color: var(--ink-2); font-size: var(--fs-body-s);
font-style: italic; line-height: 1.6; }
.espacio { display: grid; gap: var(--s3); margin-top: var(--s8); }
.espacio-muro_patrocinio { grid-template-columns: 1fr 1fr; }
@media (min-width: 40rem) { .espacio-muro_patrocinio { grid-template-columns: repeat(3, 1fr); } }
.anuncio {
display: flex;
flex-direction: column;
background: var(--gris-tint);
border: 1px dashed var(--stroke);
border-radius: var(--r-chip);
padding: var(--s5);
text-decoration: none;
color: inherit;
}
.anuncio-titulo { margin: 0; font-weight: 600; font-size: var(--fs-body-s); }
.anuncio-texto { margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--fs-label); }
.anuncio-sello {
margin-top: auto;
padding-top: var(--s4);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-3);
}
.espacio-pie_credito .anuncio { background: transparent; border: 0; padding: 0; }
.espacio-pie_credito .anuncio-sello { display: none; }
.espacio-pie_credito .anuncio-texto { display: none; }
.preguntas details {
border-bottom: 1px solid var(--hairline);
}
.preguntas summary {
cursor: pointer;
padding: var(--s4) 0;
min-height: var(--tap-min);
font-weight: 500;
list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
content: "+";
font-family: var(--font-display);
font-size: var(--fs-h2);
color: var(--gold-ink);
line-height: 1;
}
.preguntas details[open] summary::after { content: "−"; }
.preguntas details > div { padding: 0 0 var(--s5); color: var(--ink-2); }
.preguntas details > div p { margin: 0; }
.aviso {
padding-bottom: var(--s5);
max-width: 40rem;
}
.s > h2.aviso-h {
font-family: var(--font-text);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink-3);
margin-bottom: var(--s3);
}
.aviso-cuerpo {
background: var(--surface-sink);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: var(--s5);
font-size: var(--fs-body-s);
color: var(--ink-2);
}
.aviso-cuerpo p { margin: 0 0 var(--s3); }
.aviso-cuerpo p:last-child { margin-bottom: 0; }
.aviso-cuerpo strong { color: var(--ink); }
.aviso-liga a { font-weight: 600; }
.registro { padding-top: var(--s5); }
.desafio {
display: flex; align-items: center; gap: var(--s3);
margin: var(--s5) 0;
font-size: var(--fs-label);
color: var(--ink-3);
}
.desafio-punto {
width: 10px; height: 10px; border-radius: 50%;
background: var(--gold-deco);
animation: latir 1.4s ease-in-out infinite;
}
.desafio[data-listo] .desafio-punto { background: var(--verde-ink); animation: none; }
@keyframes latir { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.pie {
background: var(--paper-2);
border-top: 1px solid var(--hairline);
padding: var(--s10) var(--s5) var(--s14);
margin-top: var(--s14);
font-size: var(--fs-body-s);
}
.pie > * { max-width: 40rem; margin-inline: auto; }
.pie-contacto { margin-bottom: var(--s5); }
.pie-dom { margin: 0 0 var(--s2); color: var(--ink-2); }
.pie-contacto p { margin: 0; }
.pie-legal { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.pie-legal a { min-height: var(--tap-min); display: inline-flex; align-items: center; font-weight: 500; }
.pie-nota { margin: 0; color: var(--ink-3); font-size: var(--fs-label); }
.pie-contacto a,
.pie-linea a,
.pie-sitio a,
.aviso-liga a,
.nav-marca {
min-height: var(--tap-min);
display: inline-flex;
align-items: center;
}
@media (min-width: 48rem) {
.display { font-size: 3.75rem; }
.cuando { grid-template-columns: 1fr 1fr; }
.s { padding-inline: var(--s8); }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
.costo-lista { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; gap: var(--s3); }
.costo-lista li {
display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s4);
align-items: center;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: var(--s4) var(--s5);
box-shadow: var(--shadow-1);
}
.costo-cifra {
font-family: var(--font-display);
font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 90;
font-size: var(--fs-display-l);
font-weight: 600;
color: var(--gold-ink);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.costo-que { color: var(--ink-2); font-size: var(--fs-body-s); line-height: 1.45; }
.costo-fecha {
margin: 0 0 var(--s4);
padding: var(--s4) var(--s5);
border-left: 3px solid var(--rosa-ink);
background: var(--rosa-tint);
color: var(--rosa-ink);
border-radius: 0 var(--r-chip) var(--r-chip) 0;
font-size: var(--fs-body-s);
}
.costo-fecha strong { display: block; font-size: var(--fs-body-l); margin-bottom: var(--s1); }
.costo-como { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--fs-body-s); }
.redes { padding-top: var(--s10); padding-bottom: var(--s10); }
.s > h2.redes-h {
font-family: var(--font-text);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-3);
margin-bottom: var(--s4);
}
.redes-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
@media (min-width: 30rem) { .redes-lista { grid-template-columns: 1fr 1fr; } }
.redes-lista a {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
min-height: var(--tap-secondary);
padding: var(--s3) var(--s5);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: var(--surface);
text-decoration: none;
}
.redes-nombre { font-weight: 600; color: var(--ink); }
.redes-usuario { color: var(--gold-ink); font-size: var(--fs-body-s); }
.portada { background: none; }
.portada::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 28px;
background-repeat: repeat-x;
background-size: 64px 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28' viewBox='0 0 64 28'%3E%3Cpath d='M0 0h64v14l-8 8-8-8-8 8-8-8-8 8-8-8-8 8-8-8z' fill='%23F2C9D3'/%3E%3Ccircle cx='16' cy='8' r='2.5' fill='%23FDF8F0'/%3E%3Ccircle cx='32' cy='6' r='2' fill='%23FDF8F0'/%3E%3Ccircle cx='48' cy='8' r='2.5' fill='%23FDF8F0'/%3E%3C/svg%3E");
pointer-events: none;
}
.envoltorio-hero {
background-color: var(--paper);
background-image:
radial-gradient(58% 44% at 12% -4%, color-mix(in oklab, var(--rosa) 26%, transparent) 0%, transparent 70%),
radial-gradient(42% 38% at 94% 17%, color-mix(in oklab, var(--verde) 24%, transparent) 0%, transparent 72%),
radial-gradient(70% 40% at 47% 104%, color-mix(in oklab, var(--gold-deco) 20%, transparent) 0%, transparent 68%);
background-blend-mode: var(--wash);
}
.luces-tira {
filter: var(--brillo);
height: 24px;
background-repeat: repeat-x;
background-size: 24px 24px, 160px 24px;
background-image:
radial-gradient(circle 3px at 12px 15px, var(--gold-deco), transparent 62%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cpath d='M0 6 Q40 18 80 6 T160 6' fill='none' stroke='%23C9922E' stroke-width='1.25' opacity='.65'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
.luces-tira { animation: var(--parpadeo) 2600ms ease-in-out infinite; }
}
@keyframes luces-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none; z-index: 0;
opacity: var(--grano);
background-size: 128px 128px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
}
main { position: relative; z-index: 1; }
.banda-pendientes {
background: var(--ambar-tint);
color: var(--gold-ink);
border-bottom: 2px solid var(--gold-deco);
}
.banda-pendientes a {
color: var(--gold-ink);
text-underline-offset: 3px;
white-space: nowrap;
}
.prov {
display: inline;
}
.prov-dato {
background: var(--ambar-tint);
border-bottom: 2px dashed var(--gold-deco);
border-radius: 3px;
padding: 0 var(--s1);
}
.prov-nota {
display: block;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--gold-ink);
margin-top: var(--s1);
}
.pendientes {
background: var(--paper-2);
border-top: 1px solid var(--hairline);
}
.pend-entrada {
color: var(--ink-2);
max-width: 36rem;
margin-bottom: var(--s6);
}
.pend-grupo + .pend-grupo { margin-top: var(--s8); }
.pend-quien {
display: flex;
align-items: baseline;
gap: var(--s2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-3);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--hairline);
}
.pend-cuenta {
font-variant-numeric: tabular-nums;
color: var(--gold-ink);
background: var(--ambar-tint);
border-radius: 999px;
padding: 0 var(--s2);
}
.pend-lista { list-style: none; margin: 0; padding: 0; }
.pend {
padding: var(--s4) 0;
border-bottom: 1px solid var(--hairline);
}
.pend-que {
font-weight: 600;
color: var(--ink);
margin: 0 0 var(--s1);
}
.pend-porque {
font-size: var(--fs-body-s);
color: var(--ink-2);
margin: 0 0 var(--s2);
max-width: 46rem;
}
.pend-valor {
font-size: var(--fs-body-s);
color: var(--ink-3);
margin: 0 0 var(--s2);
}
.pend-valor span {
background: var(--ambar-tint);
border-bottom: 2px dashed var(--gold-deco);
border-radius: 3px;
padding: 0 var(--s1);
color: var(--gold-ink);
}
.pend-nivel {
display: inline-block;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0;
color: var(--ink-3);
}
.pend-bloquea .pend-nivel {
color: var(--gold-ink);
background: var(--ambar-tint);
border-radius: 3px;
padding: 0 var(--s2);
}
.barra-cta {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 40;
padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
background: var(--paper);
border-top: 1px solid var(--hairline);
transform: translateY(0);
transition: transform var(--t-sheet-in) var(--e-sheet-in);
}
.barra-cta-dentro {
max-width: 34rem;
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--s4);
}
.barra-cta-dato {
flex: 1 1 auto;
margin: 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
line-height: 1.3;
}
.barra-cta-dato strong {
font-family: var(--font-display), serif;
font-size: var(--fs-h3);
color: var(--gold-ink);
font-variant-numeric: tabular-nums;
}
.barra-cta .btn-primario {
flex: 0 0 auto;
min-height: var(--tap-primary);
padding-inline: var(--s5);
margin: 0;
white-space: nowrap;
}
@supports selector(body:has(*)) {
body:has(#registro:target) .barra-cta { transform: translateY(110%); }
}
.con-barra-lista .barra-cta {
transform: translateY(110%);
transition: transform var(--t-sheet-in) var(--e-sheet-in);
}
.con-barra-lista.hero-fuera .barra-cta { transform: translateY(0); }
@media (max-width: 59.99rem) {
}
@media (min-width: 60rem) {
.barra-cta { display: none; }
}
@media (max-width: 59.99rem) {
body { padding-bottom: 5.5rem; }
}
.hero-cierra {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s5);
margin: var(--s4) 0 0;
}
.btn-sutil {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
font-weight: 600;
color: var(--gold-ink);
text-decoration: none;
border-bottom: 1px solid var(--gold-deco);
}
.btn-sutil:hover { color: var(--ink); border-bottom-color: var(--ink); }
.btn-sutil:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:root { --nav-alto: 3.75rem; }
.nav {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
box-sizing: border-box;
min-height: var(--nav-alto);
padding: 0 var(--s4);
background: var(--paper);
border-bottom: 1px solid var(--hairline);
}
.nav-marca {
order: 1;
font-family: var(--font-display), serif;
font-size: clamp(1rem, 4.8vw, var(--fs-h3));
font-variation-settings: "SOFT" 0, "WONK" 1;
color: var(--ink);
text-decoration: none;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-inline-size: 58vw;
}
.nav-marca:hover { color: var(--gold-ink); }
.nav-boton {
order: 3;
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: var(--tap-min);
padding: 0 var(--s4);
border: 1px solid var(--stroke);
border-radius: var(--r-btn);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.nav-boton:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nav-cierra { display: none; }
#menu:target ~ .nav-abre { display: none; }
#menu:target ~ .nav-cierra {
display: inline-flex;
background: var(--ambar-tint);
border-color: var(--gold-deco);
color: var(--gold-ink);
}
.nav-rayas {
position: relative;
inline-size: 18px;
block-size: 2px;
background: currentColor;
}
.nav-rayas::before,
.nav-rayas::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: 2px;
background: currentColor;
}
.nav-rayas::before { top: -6px; }
.nav-rayas::after  { top: 6px; }
.nav-cierra .nav-rayas { background: transparent; }
.nav-cierra .nav-rayas::before { top: 0; transform: rotate(45deg); }
.nav-cierra .nav-rayas::after  { top: 0; transform: rotate(-45deg); }
.nav-ancla {
position: fixed;
top: 0; left: 0;
inline-size: 1px; block-size: 1px;
pointer-events: none;
}
.nav-fondo { display: none; }
#menu:target ~ .nav-fondo {
display: block;
position: fixed;
inset: 0;
z-index: -1;
background: color-mix(in oklab, var(--ink) 28%, transparent);
}
.nav-lista {
order: 2;
display: none;
position: absolute;
inset-inline: var(--s4);
top: calc(100% + var(--s2));
flex-direction: column;
padding: var(--s3);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
box-shadow: var(--shadow-2);
}
.nav-lista:target {
display: flex;
position: fixed;
top: calc(var(--nav-alto) + var(--s2));
inset-inline: var(--s4);
}
.nav-lista a {
display: flex;
align-items: center;
min-height: var(--tap-min);
padding: 0 var(--s4);
border-radius: var(--r-field);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body);
color: var(--ink);
text-decoration: none;
}
.nav-lista a + a { border-top: 1px solid var(--hairline); }
.nav-lista a:hover { background: var(--paper-2); }
.nav-lista a:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.nav-lista .nav-cta {
margin-top: var(--s2);
justify-content: center;
border-top: 0;
background: var(--gold-600);
color: var(--ink);
font-weight: 600;
}
@media (min-width: 48rem) {
.nav { padding-inline: var(--s8); }
.nav-marca { max-inline-size: none; font-size: var(--fs-h3); }
.nav-boton, .nav-fondo,
#menu:target ~ .nav-cierra,
#menu:target ~ .nav-fondo { display: none; }
.nav-lista,
.nav-lista:target {
display: flex;
position: static;
flex-direction: row;
align-items: center;
gap: var(--s2);
padding: 0;
background: none;
border: 0;
box-shadow: none;
}
.nav-lista a { padding-inline: var(--s3); font-size: var(--fs-body-s); }
.nav-lista a + a { border-top: 0; }
.nav-lista .nav-cta { margin-top: 0; padding-inline: var(--s5); }
}
section[id] { scroll-margin-top: calc(var(--nav-alto) + var(--s3)); }
.ev-intro h1 { font-size: var(--fs-display-l); margin-bottom: var(--s3); }
.ev-rejilla { display: grid; gap: var(--s4); }
@media (min-width: 46rem) { .ev-rejilla { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } }
.ev-card {
display: flex; flex-direction: column;
border: 1px solid var(--hairline); border-radius: var(--r-card);
background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden;
}
.ev-card-liga { display: block; padding: var(--s5); color: inherit; text-decoration: none; }
.ev-card-liga:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ev-nombre { font-family: var(--font-display), serif; font-size: var(--fs-h2);
margin: var(--s3) 0 var(--s2); color: var(--ink); }
.ev-cuando { margin: 0 0 var(--s1); font-size: var(--fs-body); color: var(--ink); }
.ev-horas { display: block; font-size: var(--fs-body-s); color: var(--ink-2); }
.ev-donde { margin: 0; font-size: var(--fs-body-s); color: var(--ink-2); }
.ev-chip { display: inline-block; padding: .25em .8em; border-radius: 999px;
font-family: var(--font-text), system-ui; font-size: var(--fs-micro);
font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ev-chip-listo    { background: var(--verde-tint); color: var(--verde-ink); }
.ev-chip-riesgo   { background: var(--rosa-tint);  color: var(--rosa-ink); }
.ev-chip-pendiente{ background: var(--ambar-tint); color: var(--gold-ink); }
.ev-chip-inactivo { background: var(--gris-tint);  color: var(--ink-2); }
.ev-cupo { margin: var(--s4) 0 0; }
.ev-barra { display: block; block-size: 6px; border-radius: 999px;
background: var(--surface-sink); overflow: hidden; }
.ev-barra-llena { display: block; block-size: 100%; background: var(--gold-600); }
.ev-cupo-txt { display: block; margin-top: var(--s2); font-size: var(--fs-body-s); color: var(--ink-2); }
.ev-cupo-txt strong { color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.ev-cupo-grande .ev-barra { block-size: 10px; }
.ev-cta { display: flex; align-items: center; justify-content: center;
min-height: var(--tap-min); padding: 0 var(--s5);
border-top: 1px solid var(--hairline); background: var(--paper-2);
font-family: var(--font-text), system-ui; font-size: var(--fs-body-s);
font-weight: 600; color: var(--ink-2); text-decoration: none; }
.ev-cta-fuerte { background: var(--gold-600); color: var(--ink); border-top-color: var(--gold-700); }
.ev-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ev-antes > summary { display: flex; align-items: baseline; gap: var(--s3);
cursor: pointer; list-style: none; }
.ev-antes > summary::-webkit-details-marker { display: none; }
.ev-antes > summary::marker { content: ""; }
.ev-antes > summary h2 { display: inline; }
.ev-antes-n { font-family: var(--font-text), system-ui; font-size: var(--fs-body-s);
color: var(--ink-3); }
.ev-antes[open] > summary { margin-bottom: var(--s5); }
.ev-volver { max-width: 40rem; margin: 0 auto; padding: var(--s5) var(--s5) 0; }
.ev-publicables { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.ev-publicables li { display: flex; justify-content: space-between; gap: var(--s4);
padding: var(--s3) 0; border-bottom: 1px solid var(--hairline);
font-size: var(--fs-body-s); }
.ev-publicables span { color: var(--ink-2); }
.cal-cab { display: flex; align-items: center; justify-content: space-between;
gap: var(--s4); margin-bottom: var(--s5); }
.cal-mes { font-family: var(--font-display), serif; font-size: var(--fs-h2);
text-transform: capitalize; margin: 0; }
.cal-mes span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cal-ir { display: inline-flex; align-items: center; justify-content: center;
inline-size: var(--tap-min); block-size: var(--tap-min);
border: 1px solid var(--hairline); border-radius: var(--r-btn);
background: var(--surface); color: var(--ink); text-decoration: none;
font-size: var(--fs-h2); line-height: 1; }
.cal-ir:hover { border-color: var(--stroke); }
.cal-ir:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cal-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-tabla th { padding: 0 0 var(--s2); font-family: var(--font-text), system-ui;
font-size: var(--fs-micro); font-weight: 600; color: var(--ink-3);
text-transform: uppercase; letter-spacing: .06em; }
.cal-tabla th abbr { text-decoration: none; }
.cal-dia { position: relative; padding: 0; text-align: center; vertical-align: top;
border: 1px solid var(--hairline); }
.cal-n { display: grid; place-items: center; block-size: 2.75rem;
font-family: var(--font-text), system-ui; font-size: var(--fs-body-s);
color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-fuera .cal-n { color: var(--ink-3); opacity: .5; }
.cal-hoy { background: var(--paper-2); }
.cal-hoy .cal-n { font-weight: 700; color: var(--gold-ink); }
.cal-con { background: var(--ambar-tint); }
.cal-det > summary { cursor: pointer; list-style: none; position: relative; }
.cal-det > summary::-webkit-details-marker { display: none; }
.cal-det > summary::marker { content: ""; }
.cal-det > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.cal-punto { position: absolute; inset-block-end: 4px; inset-inline: 0; margin: 0 auto;
inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--gold-ink); }
.cal-pop { position: absolute; z-index: 20; inset-inline-start: 50%; transform: translateX(-50%);
min-inline-size: 13rem; max-inline-size: 17rem; padding: var(--s3);
background: var(--surface); border: 1px solid var(--stroke);
border-radius: var(--r-card); box-shadow: var(--shadow-2); text-align: start; }
.cal-pop a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-field);
color: var(--ink); text-decoration: none; font-size: var(--fs-body-s); }
.cal-pop a:hover { background: var(--paper-2); }
.cal-pop a span { display: block; color: var(--ink-2); font-size: var(--fs-micro); }
.cal-vacio { margin-top: var(--s5); }
.pon-rejilla { display: grid; gap: var(--s5); }
@media (min-width: 46rem) { .pon-rejilla { grid-template-columns: 1fr 1fr; } }
.pon { display: flex; gap: var(--s4); align-items: flex-start; }
.pon-foto { inline-size: 72px; block-size: 72px; border-radius: 50%;
object-fit: cover; flex: 0 0 auto; }
.pon-sin { display: grid; place-items: center; background: var(--ambar-tint);
color: var(--gold-ink); font-family: var(--font-display), serif;
font-size: var(--fs-h2); }
.pon-nombre { font-family: var(--font-display), serif; font-size: var(--fs-h3);
margin: 0 0 var(--s1); }
.pon-cargo { margin: 0 0 var(--s2); font-size: var(--fs-body-s); color: var(--gold-ink);
font-weight: 600; }
.pon-bio { margin: 0 0 var(--s2); font-size: var(--fs-body-s); color: var(--ink-2); line-height: 1.6; }
.pon-ligas { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.pon-ligas a { font-size: var(--fs-body-s); }
.visualmente-oculto { position: absolute; inline-size: 1px; block-size: 1px;
margin: -1px; clip-path: inset(50%); overflow: hidden; }
.pie-sitio {
margin-top: var(--s8);
padding: var(--s10) var(--s5) calc(var(--s10) + env(safe-area-inset-bottom));
border-top: 1px solid var(--hairline);
background: var(--paper-2);
}
.pie-dentro { max-width: 40rem; margin-inline: auto; }
.pie-marca {
font-family: var(--font-display), serif;
font-size: var(--fs-h3);
color: var(--ink);
margin: 0 0 var(--s3);
}
.pie-linea {
margin: 0 0 var(--s2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
line-height: 1.6;
}
.pie-legal {
display: flex; flex-wrap: wrap; gap: var(--s2);
margin: var(--s5) 0 var(--s5);
}
.pie-legal a {
display: inline-flex; align-items: center;
min-height: var(--tap-min);
padding: 0 var(--s4);
border: 1px solid var(--hairline); border-radius: var(--r-btn);
background: var(--surface);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s); font-weight: 600;
color: var(--ink); text-decoration: none;
}
.pie-legal a:hover { border-color: var(--stroke); }
.pie-legal a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pie-nota {
margin: 0; padding-top: var(--s5);
border-top: 1px solid var(--hairline);
font-family: var(--font-text), system-ui;
font-size: var(--fs-micro); color: var(--ink-3); line-height: 1.6;
}
@media (max-width: 59.99rem) { .pie-sitio { padding-bottom: 7rem; } }
.s {
--ancho: 40rem;
--aire: var(--s8);
max-width: none;
padding-block: var(--aire);
padding-inline: max(var(--s5), calc((100% - var(--ancho)) / 2));
}
.s + .s { padding-block-start: 0; }
#aviso { padding-block-end: 0; }
.banda-apoyo, .banda-fuerte { padding-block-start: var(--aire); }
.banda-apoyo + .s, .banda-fuerte + .s { padding-block-start: var(--aire); }
.banda-apoyo   { background: var(--paper-2); }
.banda-tarjeta { background: var(--surface); border-block: 1px solid var(--hairline); }
#indicaciones,
#preguntas {
--ancho: 36rem;
--aire: var(--s8);
background: var(--surface-sink);
border-block: 1px solid var(--hairline);
}
#patrocinadores { background: var(--ambar-tint); }
#cupo {
--aire: var(--s8);
background: var(--banda-fuerte);
color: var(--banda-fuerte-tinta);
border-block: 1px solid var(--gold-deco);
text-align: center;
}
#cupo .cupo-num { font-size: var(--fs-display-xl); color: var(--banda-fuerte-tinta); }
#cupo .cupo-num strong { font-size: var(--fs-script); line-height: .9; color: var(--gold-600); }
#cupo .cupo-txt,
#cupo .cupo-nota { color: var(--banda-fuerte-tenue); }
#cupo .cupo-nota strong { color: var(--banda-fuerte-tinta); }
#costo,
#expositoras { --aire: var(--s8); }   
#registro {
background: var(--surface);
border-top: 2px solid var(--gold-deco);
padding-block: var(--s8) var(--s8);   
}
.s > h2 {
font-size: var(--fs-h1);
margin-bottom: var(--s4);
}
#registro > h2,
#costo > h2 {
font-size: var(--fs-display-l);
margin-bottom: var(--s5);
}
#indicaciones > h2,
#preguntas > h2 {
font-size: var(--fs-h2);
margin-bottom: var(--s3);
}
.s > h2::before {
content: "";
display: block;
inline-size: 2.5rem;
block-size: 2px;
margin-bottom: var(--s4);
background: var(--gold-deco);
}
#registro > h2::before,
#costo > h2::before { inline-size: 4rem; block-size: 3px; }
#indicaciones > h2::before,
#preguntas > h2::before { inline-size: 1.5rem; margin-bottom: var(--s2); }
#costo, #aviso, #redes { --ancho: 34rem; }
#expositoras, #patrocinadores { --ancho: 62rem; }
#expositoras > .entrada,
#patrocinadores > .entrada { max-width: 34rem; }
#redes { --aire: var(--s8); }
#aviso { --aire: var(--s8); }
@media (min-width: 48rem) {
.portada { padding-top: var(--s20); padding-bottom: var(--s20); }
.s { --aire: var(--s16); }
.pie-sitio { margin-top: var(--s16); }
#indicaciones, #preguntas { --aire: var(--s12); }
#costo, #expositoras, #cupo { --aire: var(--s20); }
#registro { padding-block: var(--s20) var(--s16); }
}
.cartel-fecha {
display: flex;
align-items: center;
gap: var(--s5);
margin: 0 0 var(--s8);
padding: var(--s5) 0;
border-block: 1px solid var(--hairline);
}
.cf-dia {
margin: 0;
font-family: var(--font-display), serif;
font-size: clamp(4.5rem, 18vw, 7rem);
line-height: .78;
letter-spacing: -.04em;
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
color: var(--gold-ink);
font-variant-numeric: lining-nums;
flex: 0 0 auto;
}
.cf-txt { min-width: 0; }
.cf-mes {
margin: 0 0 var(--s1);
font-family: var(--font-display), serif;
font-size: var(--fs-h1);
line-height: 1;
color: var(--ink);
text-transform: lowercase;
}
.cf-mes span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cf-cuando {
margin: 0 0 var(--s2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gold-ink);
}
.cf-donde {
margin: 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body);
color: var(--ink-2);
line-height: 1.4;
}
.btn-hero { min-height: var(--tap-primary); padding-inline: var(--s10); }
@media (min-width: 48rem) {
.cartel-fecha { gap: var(--s8); }
.cf-dia { font-size: 8rem; }
.cf-mes { font-size: var(--fs-display-l); }
}
#indicaciones .numerada {
gap: 0;
}
#indicaciones .numerada li {
grid-template-columns: 1.75rem 1fr;
gap: var(--s3);
padding: var(--s2) 0;
border: 0;
border-radius: 0;
align-items: start;
}
#indicaciones .numerada li + li { border-top: 1px solid var(--hairline); }
#indicaciones .numerada .n {
inline-size: auto; block-size: auto;
background: none;
font-family: var(--font-display), serif;
font-size: var(--fs-h3);
line-height: 1;
padding-top: .55rem;
color: var(--gold-deco);
font-variant-numeric: lining-nums;
}
#indicaciones .numerada li > span:last-child {
font-size: var(--fs-body);
color: var(--ink-2);
line-height: 1.6;
padding-top: .2em;
}
#indicaciones .regla { padding-top: .1em; }
#indicaciones .regla > summary {
position: relative;
display: block;
list-style: none;
padding-right: var(--s8);
min-height: var(--tap-min);
display: flex;
align-items: center;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body);
font-weight: 600;
color: var(--ink);
cursor: pointer;
}
#indicaciones .regla > summary::-webkit-details-marker { display: none; }
#indicaciones .regla > summary::marker { content: ""; }
#indicaciones .regla > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
#indicaciones .regla > summary::after {
content: "+";
position: absolute;
right: 0;
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1;
color: var(--gold-ink);
}
#indicaciones .regla[open] > summary::after { content: "−"; }
#indicaciones .regla > p {
margin: var(--s2) 0 0;
font-size: var(--fs-body-s);
line-height: 1.6;
color: var(--ink-2);
}
@media (min-width: 46rem) {
#indicaciones .numerada { grid-template-columns: 1fr 1fr; }
}
#preguntas .preguntas-caja {
border: 1px solid var(--hairline);
border-radius: var(--r-card);
background: var(--surface);
overflow: hidden;
}
#preguntas details { border-bottom: 1px solid var(--hairline); border-radius: 0; }
#preguntas details:last-child { border-bottom: 0; }
#preguntas summary {
padding: var(--s5);
gap: var(--s5);
font-size: var(--fs-body-l);
font-weight: 500;
transition: background var(--t-press);
}
#preguntas summary:hover { background: var(--paper-2); }
#preguntas details[open] summary { color: var(--gold-ink); }
#preguntas details > div { padding: 0 var(--s5) var(--s5); }
#preguntas details > div p { max-width: 34rem; }
#expositoras .giros,
.giros-rejilla {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: var(--s3);
margin: var(--s5) 0 0;
padding: 0;
list-style: none;
}
.giro-chip {
display: flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: var(--s3) var(--s4);
border: 1px solid var(--control-borde);
border-radius: var(--r-btn);
background: var(--surface);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
font-weight: 600;
color: var(--ink);
text-align: center;
}
.pie-nota-seccion {
margin: var(--s5) 0 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-3);
line-height: 1.6;
}
#patrocinadores.invita {
background: var(--ambar-tint);
border-block: 1px solid var(--gold-deco);
}
#patrocinadores.invita h2 { color: var(--gold-ink); }
#patrocinadores.invita h2::before { background: var(--gold-ink); }
#patrocinadores.invita .entrada { color: var(--ink); }
.cupo-regla {
max-width: 30rem;
margin-inline: auto;
margin-top: var(--s4);
font-size: var(--fs-body-s);
color: var(--ink-2);
line-height: 1.6;
}
.cupo-regla strong { color: var(--gold-ink); }
.eyebrow-script {
margin: 0 0 var(--s1);
font-family: var(--font-script), "Snell Roundhand", "Apple Chancery", cursive;
font-size: clamp(2.25rem, 9vw, 3.25rem);
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
color: var(--gold-ink);
}
.eyebrow-lugar {
margin: 0 0 var(--s5);
color: var(--ink-3);
font-size: var(--fs-eyebrow);
}
.rama {
position: absolute;
z-index: 0;
pointer-events: none;
color: var(--verde-ink);
opacity: .5;
}
.rama-izquierda { inset-block-start: 0; inset-inline-start: 0; }
.rama-derecha   { inset-block-end: 0;   inset-inline-end: 0; }
.rama-hoja, .rama-suculenta { stroke: currentColor; fill: none; }
.rama-suculenta { fill: var(--verde); fill-opacity: .18; }
.rama-flor { stroke: var(--rosa-ink); fill: var(--rosa); fill-opacity: .22; }
.rama-flor-chica { fill-opacity: .16; }
.rama-cactus { stroke: var(--verde-ink); fill: var(--verde); fill-opacity: .14; }
@media (max-width: 34rem) {
.rama-izquierda { display: none; }
.rama-derecha { opacity: .38; }
}
.montanas {
display: block;
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 0;
color: var(--lila-ink);
pointer-events: none;
}
.envoltorio-hero { position: relative; }
.portada { position: relative; }
.portada > *:not(.luna):not(.rama):not(.montanas) { position: relative; z-index: 1; }
.s[hidden], .s-vacia { display: none !important; }
.patro-invita-pie { display: inline-block; margin-top: var(--s5); }
.s.anuncios { background: var(--paper-2); padding-block: var(--s10) var(--s12); }
.anu-marco  {
max-inline-size: 62rem; margin-inline: auto; padding-inline: var(--s5);
container-type: inline-size; container-name: banda;
}
.anu-encabezado {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s4); margin-block-end: var(--s5);
}
.anu-rotulo {
font-family: var(--font-display), serif; font-weight: 500;
font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: var(--ink); margin: 0;
letter-spacing: .01em;
}
.anu-mandos { display: flex; gap: var(--s2); flex: 0 0 auto; }
.anu-boton {
inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center;
border: 1px solid var(--surface-sink); border-radius: 999px;
background: var(--surface); color: var(--ink-2); cursor: pointer;
transition: border-color .15s, color .15s;
}
.anu-boton:hover { border-color: var(--gold-deco); color: var(--ink); }
.anu-boton:focus-visible { outline: 2px solid var(--gold-deco); outline-offset: 2px; }
.anu-icono-pausa rect, .anu-icono-juega path { fill: currentColor; }
.anu-ventana { overflow: hidden; }
.anu-pista {
display: flex; margin: 0; padding: 0; list-style: none;
transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.anu-dia { flex: 0 0 100%; min-inline-size: 0; display: flex; }
.anu-dia > .anu-tarjeta { flex: 1 1 auto; }
.anu-tarjeta {
background: var(--surface); border: 1px solid var(--surface-sink);
border-radius: 14px; padding: var(--s6) var(--s6) var(--s5);
border-inline-start: 4px solid var(--barra, var(--gold-deco));
min-block-size: 11rem; display: flex; flex-direction: column; gap: var(--s2);
}
.anu-dicho { display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 auto; min-inline-size: 0; }
@container banda (min-width: 34rem) {
.anu-tarjeta.con-imagen {
flex-direction: row; align-items: stretch; gap: var(--s6);
}
.anu-tarjeta.con-imagen .anu-imagen { flex: 0 0 34%; max-inline-size: 20rem; }
}
.anu-imagen {
aspect-ratio: 16 / 9; border-radius: 10px; background: var(--tinte);
object-fit: contain; align-self: center; inline-size: 100%; block-size: auto;
}
.anu-oro   { --barra: var(--gold-deco); --tinta: var(--gold-ink);  --tinte: var(--ambar-tint); }
.anu-rosa  { --barra: var(--rosa-ink);  --tinta: var(--rosa-ink);  --tinte: var(--rosa-tint); }
.anu-verde { --barra: var(--verde-ink); --tinta: var(--verde-ink); --tinte: var(--verde-tint); }
.anu-lila  { --barra: var(--lila-ink);  --tinta: var(--lila-ink);  --tinte: var(--lila); }
.anu-chip {
margin: 0; align-self: flex-start; font-size: .7rem; letter-spacing: .08em;
text-transform: uppercase; font-weight: 600; color: var(--tinta);
background: var(--tinte); padding: .25rem .6rem; border-radius: 999px;
}
.anu-nuevo {
background: var(--ink); color: var(--paper); border-radius: 999px;
padding: .1rem .4rem; margin-inline-start: .3rem; letter-spacing: .06em;
}
.anu-titulo {
font-family: var(--font-display), serif; font-weight: 500; margin: 0;
font-size: clamp(1.15rem, 3vw, 1.5rem); color: var(--ink); text-wrap: balance;
}
.anu-texto { margin: 0; color: var(--ink-2); max-inline-size: 46ch; line-height: 1.55; }
.anu-pie {
margin: auto 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
align-items: baseline; font-size: .85rem; color: var(--ink-3);
}
.anu-liga { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.anu-liga:focus-visible { outline: 2px solid var(--gold-deco); outline-offset: 2px; }
.anu-puntos { display: flex; gap: var(--s2); justify-content: center; margin-block-start: var(--s5); }
.anu-punto {
inline-size: .5rem; block-size: .5rem; border-radius: 999px; padding: 0;
border: 0; background: var(--surface-sink); cursor: pointer; transition: all .2s;
}
.anu-punto.es-actual { inline-size: 1.5rem; background: var(--gold-deco); }
.anu-punto:focus-visible { outline: 2px solid var(--gold-deco); outline-offset: 3px; }
@container banda (max-width: 34rem) {
.anu-encabezado { flex-direction: column; align-items: stretch; }
.anu-mandos { justify-content: flex-end; }
.anu-tarjeta { padding: var(--s5); min-block-size: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
.anu-pista { transition: none; }
}
.anu-de { color: var(--ink-3); }
.alta {
display: flex;
flex-direction: column;
gap: var(--s8);
max-width: 100%;
}
.bloque {
border: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s5);
}
.bloque-t {
display: flex;
align-items: center;
gap: var(--s3);
padding: 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
}
.bloque-n {
display: inline-grid;
place-items: center;
inline-size: 1.75em;
block-size: 1.75em;
border-radius: 50%;
background: var(--ambar-tint);
color: var(--gold-ink);
font-variant-numeric: tabular-nums;
font-size: .92em;
}
.campo { display: flex; flex-direction: column; gap: var(--s2); }
.etq {
font-family: var(--font-text), system-ui;
font-size: var(--fs-body);
font-weight: 600;
color: var(--ink);
}
.etq em {
font-style: normal;
font-weight: 400;
font-size: var(--fs-body-s);
color: var(--ink-3);
}
.ayuda {
margin: 0;
font-size: var(--fs-body-s);
color: var(--ink-2);
line-height: 1.5;
}
.ctl {
font-family: var(--font-text), system-ui;
font-size: max(16px, var(--fs-body));
color: var(--ink);
background: var(--input-bg);
border: 1px solid var(--control-borde);
border-radius: var(--r-btn);
padding: 0 var(--s4);
min-height: 48px;
inline-size: 100%;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ctl::placeholder { color: var(--ink-3); }
.ctl:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 1px;
border-color: var(--gold-deco);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; display: inline-flex; }
.chip input {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
margin: 0;
clip-path: inset(50%);
}
.chip span {
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: 44px;
padding: var(--s2) var(--s4);
border: 1px solid var(--control-borde);
border-radius: 999px;
background: var(--paper-2);
color: var(--ink-2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
line-height: 1.2;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip i { font-style: normal; }
.chip input:checked + span {
background: var(--ambar-tint);
border-color: var(--control-elegido);
box-shadow: inset 0 0 0 1px var(--control-elegido);
color: var(--gold-ink);
font-weight: 600;
}
.chip input:focus-visible + span {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.casilla {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s3);
align-items: start;
padding: var(--s3);
border-radius: var(--r-card);
cursor: pointer;
min-height: 44px;
}
.casilla:hover { background: var(--paper-2); }
.casilla input {
inline-size: 22px;
block-size: 22px;
margin: 2px 0 0;
accent-color: var(--gold-600);
flex: none;
}
.casilla input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.casilla span {
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
line-height: 1.5;
}
.casilla strong { display: block; color: var(--ink); font-weight: 600; }
.casilla em {
display: block;
margin-top: 2px;
font-style: normal;
font-size: var(--fs-micro);
color: var(--ink-3);
line-height: 1.45;
}
.bloque-compromisos .casilla-obliga {
border: 1px solid var(--control-borde);
background: var(--paper-2);
}
.bloque-permisos .casilla { border: 1px dashed var(--control-borde); }
.error {
margin: 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
font-weight: 600;
color: var(--danger);
line-height: 1.45;
}
.error::before { content: '▲ '; font-size: .8em; }
.campo.con-error .ctl {
border-color: var(--danger);
background: var(--danger-bg);
}
.trampa {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.desafio {
display: flex;
align-items: center;
gap: var(--s3);
margin: 0;
padding: var(--s3) var(--s4);
border-radius: var(--r-card);
background: var(--paper-2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
line-height: 1.45;
}
.desafio-punto {
inline-size: 10px;
block-size: 10px;
border-radius: 50%;
background: var(--ink-3);
flex: none;
}
.desafio[data-estado="trabajando"] .desafio-punto {
background: var(--gold-600);
animation: latido 1.4s ease-in-out infinite;
}
.desafio[data-estado="listo"] .desafio-punto { background: var(--gold-600); }
.desafio[data-estado="fallo"] { background: var(--danger-bg); color: var(--danger); }
.desafio[data-estado="fallo"] .desafio-punto { background: var(--danger); }
@keyframes latido {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .45; transform: scale(.75); }
}
.guardado {
margin: 0 0 var(--s4);
font-family: var(--font-text), system-ui;
font-size: var(--fs-micro);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-3);
}
.guardado::before { content: '· '; }
.resultado {
margin: var(--s6) 0 0;
padding: var(--s6);
border-radius: var(--r-card);
background: var(--ambar-tint);
text-align: center;
}
.exito-sello {
font-family: var(--font-script), cursive;
font-size: var(--fs-display-l);
line-height: 1;
margin: 0 0 var(--s2);
color: var(--gold-deco);
}
.resultado h3 {
font-family: var(--font-display), serif;
font-size: var(--fs-h2);
color: var(--ink);
margin: 0 0 var(--s2);
}
.resultado p {
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
margin: 0 0 var(--s3);
line-height: 1.55;
}
.exito-folio {
font-family: var(--font-text), system-ui;
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: .12em;
color: var(--gold-ink);
}
.exito-nota { color: var(--gold-ink) !important; }
.aviso-error {
color: var(--danger) !important;
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.desafio[data-estado="trabajando"] .desafio-punto { animation: none; opacity: .7; }
.ctl, .chip span { transition: none; }
}
.glifo {
flex: none;
opacity: .9;
stroke-width: 1.75;
transform: translateY(-.5px);
}
.chip input:checked + span .glifo { opacity: 1; stroke-width: 2; }
.picado-tira {
opacity: var(--picado-opacidad);
display: block;
block-size: 34px;
margin: 0;
color: var(--gold-deco);
overflow: hidden;
}
.picado-tira .picado {
display: block;
inline-size: 100%;
block-size: 34px;
}
.subir {
display: flex;
flex-direction: column;
gap: var(--s3);
margin-top: var(--s5);
padding: var(--s5);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
background: var(--paper-2);
}
.subir-aviso {
margin: 0 0 var(--s2);
padding: var(--s4);
border-radius: var(--r-btn);
background: var(--ambar-tint);
color: var(--gold-ink);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
line-height: 1.55;
}
.subir-etq {
font-family: var(--font-text), system-ui;
font-size: var(--fs-body);
font-weight: 600;
color: var(--ink);
margin-top: var(--s2);
}
.subir-etq em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: var(--fs-body-s); }
select.ctl { appearance: none; background-image: none; }
.subir-elegir { text-align: center; }
.subir-elegido {
margin: 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
}
.subir-elegido::before { content: '· '; }
.subir-nota {
margin: 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-micro);
color: var(--ink-3);
line-height: 1.5;
}
.subir-listo { text-align: center; align-items: center; }
.subir-listo h3 {
font-family: var(--font-display), serif;
font-size: var(--fs-h3);
color: var(--ink);
margin: 0 0 var(--s2);
}
.papel-ficha {
margin-top: var(--s4);
padding: var(--s4);
background: var(--ambar-tint);
border-left: 3px solid var(--gold-deco);
border-radius: 0 var(--r-field) var(--r-field) 0;
}
.pf-resumen { margin: 0; font-size: var(--fs-body); color: var(--ink); }
.pf-datos {
margin: var(--s3) 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s1);
}
.pf-datos li {
position: relative;
padding-left: var(--s4);
font-size: var(--fs-body-s);
color: var(--ink-2);
}
.pf-datos li::before {
content: "";
position: absolute;
left: 0; top: .55em;
inline-size: 6px; block-size: 6px;
border: 1px solid var(--control-elegido);
border-radius: 50%;
}
.papel-banda {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s2) var(--s3);
margin: 0 0 var(--s5);
padding: var(--s2) var(--s4);
background: var(--paper-2);
border-left: 3px solid var(--gold-deco);
border-radius: 0 var(--r-field) var(--r-field) 0;
font-size: var(--fs-body-s);
color: var(--ink);
}
.pb-que strong { color: var(--gold-ink); }
.pb-dato { color: var(--ink-2); }
.alta.con-pasos .paso { display: none; }
.alta.con-pasos .paso.activo { display: block; }
.alta.con-pasos .paso > .bloque { border: 0; padding-top: 0; }
.pasos-guia {
margin: 0 0 var(--s5);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--hairline);
font-family: var(--font-text), system-ui;
font-size: var(--fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
}
.alta:not(.con-pasos) .pasos-guia { display: none; }
.pasos-nav {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin-top: var(--s6);
padding-top: var(--s5);
border-top: 1px solid var(--hairline);
}
.pasos-nav .btn { min-height: var(--tap-min); }
.pasos-nav .btn:last-of-type { margin-left: auto; }
.pasos-nav .btn:first-of-type:last-of-type { margin-left: 0; inline-size: 100%; justify-content: center; }
.archivo-oculto {
position: absolute;
inline-size: 1px; block-size: 1px;
opacity: 0; margin: 0;
clip-path: inset(50%);
}
.btn-archivo {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 var(--s5);
border: 1px dashed var(--control-borde);
border-radius: var(--r-btn);
background: var(--paper-2);
color: var(--ink-2);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
font-weight: 600;
cursor: pointer;
}
.archivo-oculto:focus-visible + .archivo-elegido,
.archivo-oculto:focus-visible ~ .btn-archivo { outline: 3px solid var(--focus); outline-offset: 2px; }
.archivo-elegido {
margin: var(--s2) 0 0;
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
color: var(--ink-2);
}
.archivo-elegido::before { content: '· '; }
.ctl-largo { min-height: 6rem; padding: var(--s3) var(--s4); line-height: 1.55; resize: vertical; }
.casillas { display: flex; flex-direction: column; gap: var(--s2); }
.sin-script {
margin: 0 0 var(--s5);
padding: var(--s4) var(--s5);
border: 1px solid var(--control-elegido);
border-left: 4px solid var(--gold-ink);
border-radius: var(--r-card);
background: var(--ambar-tint);
color: var(--ink);
font-family: var(--font-text), system-ui;
font-size: var(--fs-body-s);
line-height: 1.6;
}
.sin-script a {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: var(--s3);
font-weight: 700;
color: var(--gold-ink);
}
.alta {
position: relative;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
box-shadow: var(--shadow-1);
padding: var(--s8) var(--s5) var(--s6);
margin-block-start: var(--s6);
}
@media (min-width: 34rem) {
.alta { padding: var(--s10) var(--s8) var(--s8); }
}
.alta .bloque + .bloque {
margin-block-start: var(--s8);
padding-block-start: var(--s8);
border-block-start: 1px solid var(--hairline);
}
.bloque-t {
font-size: var(--fs-body-s);
letter-spacing: .08em;
color: var(--ink-2);
margin-block-end: var(--s2);
}
.bloque-n {
inline-size: auto;
block-size: auto;
background: none;
border-radius: 0;
font-family: var(--font-display), serif;
font-size: var(--fs-h2);
line-height: 1;
color: var(--gold-deco);
font-variant-numeric: lining-nums;
}
.campo { gap: var(--s3); }
.ctl {
background: var(--paper);
border: 1px solid var(--control-borde);
border-block-end-width: 2px;
border-block-end-color: var(--stroke);
border-radius: var(--r-field);
min-height: 52px;
}
.ctl:hover { border-block-end-color: var(--gold-700); }
.ctl:focus-visible {
border-block-end-color: var(--gold-600);
background: var(--surface);
}
textarea.ctl, .ctl-largo { padding-block: var(--s3); }
.etq {
font-size: var(--fs-body-l);
font-weight: 600;
line-height: 1.35;
color: var(--ink);
}
.ayuda {
font-size: var(--fs-body-s);
color: var(--ink-3);
margin-block-start: calc(var(--s1) * -1);
}
.chip {
border-radius: 999px;
padding-inline: var(--s5);
border-width: 1.5px;
font-weight: 500;
transition: background var(--t-press), border-color var(--t-press);
}
.chip:has(:checked) {
background: var(--ambar-tint);
border-color: var(--gold-600);
color: var(--gold-ink);
font-weight: 600;
}
.alta .btn-enviar,
.alta button[type="submit"] {
min-height: var(--tap-primary);
font-size: var(--fs-body-l);
margin-block-start: var(--s6);
}
.alta::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inline-size: 5.5rem;
block-size: 5.5rem;
border-start-end-radius: var(--r-card);
pointer-events: none;
background:
radial-gradient(circle at 100% 0, color-mix(in oklab, var(--rosa) 42%, transparent) 0 38%, transparent 62%),
radial-gradient(circle at 74% 14%, color-mix(in oklab, var(--verde) 34%, transparent) 0 22%, transparent 48%);
opacity: .5;
}
.aviso-camino {
margin: 0;
padding: var(--s5);
border-radius: var(--r-card);
background: var(--ambar-tint);
border: 1px solid var(--control-elegido);
color: var(--ink);
font-size: var(--fs-body);
line-height: 1.65;
}
.ctl-lista {
font-variant-numeric: tabular-nums;
line-height: 1.9;
white-space: pre;
overflow-x: auto;
}
.clave-forma { display: grid; gap: var(--s2); margin: 0 0 var(--s6); }
.o-bien {
display: flex; align-items: center; gap: var(--s4);
margin: var(--s6) 0; font-size: var(--fs-body-s); color: var(--ink-2);
}
.o-bien::before, .o-bien::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--hairline);
}
.perfil-aviso {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
margin: 0 0 var(--s5); padding: var(--s4);
border-radius: var(--r-card); background: var(--ambar-tint);
border: 1px solid var(--control-elegido);
font-size: var(--fs-body-s); color: var(--ink); line-height: 1.5;
}
.perfil-olvidar { min-height: 40px; padding: 0 var(--s4); font-size: var(--fs-body-s); }
.campo-adm { margin: 0 0 var(--s5); }
.editor { display: flex; flex-direction: column; gap: var(--s8); }
.bo-acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.bo-entrada { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.6;
margin: 0 0 var(--s6); max-inline-size: 62ch; }
.bo-h2 { font-family: var(--font-display), serif; font-size: var(--fs-h3);
color: var(--ink); margin: var(--s8) 0 var(--s4); }
.ed-aviso { padding: var(--s4) var(--s5); border-radius: var(--r-card);
margin: 0 0 var(--s6); font-size: var(--fs-body-s); line-height: 1.6;
background: var(--ambar-tint); border-left: 3px solid var(--gold-deco);
color: var(--ink); }
.ed-aviso-mal { background: var(--paper-2); border-left-color: var(--danger); color: var(--ink); }
.ed-aviso-bien { background: var(--ambar-tint); border-left-color: var(--gold-deco); }
.ed-aviso-t { font-weight: 600; margin: 0 0 var(--s2); }
.ed-aviso-lista { margin: 0; padding-left: var(--s5); }
.ed-aviso-lista a { color: var(--ink); }
.campo-adm label { display: block; font-family: var(--font-text), system-ui; font-weight: 600;
color: var(--ink); margin-bottom: var(--s2); }
.campo-adm .ayuda { font-size: var(--fs-body-s); color: var(--ink-2); margin: 0 0 var(--s2); }
.campo-adm .ctl { width: 100%; box-sizing: border-box; min-height: 48px;
font-size: max(16px, var(--fs-body)); padding: 0 var(--s4);
border: 1px solid var(--stroke); border-radius: var(--r-field);
background: var(--input-bg); color: var(--ink);
font-family: var(--font-text), system-ui; }
.campo-adm textarea.ctl { min-height: 6rem; padding: var(--s3) var(--s4); line-height: 1.55; }
.campo-adm .ctl:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.campo-adm.mal .ctl { border-color: var(--danger); border-width: 2px; }
.err { margin: var(--s2) 0 0; color: var(--danger); font-size: var(--fs-body-s); font-weight: 600; }
.ed-seccion { border: 0; padding: 0; margin: 0; }
.ed-seccion-t { font-family: var(--font-display), serif; font-size: var(--fs-h3);
color: var(--ink); padding: 0; margin: 0 0 var(--s2); }
.ed-seccion-ayuda { font-size: var(--fs-body-s); color: var(--ink-2);
margin: 0 0 var(--s5); max-width: 40rem; line-height: 1.6; }
.ed-seccion + .ed-seccion { padding-top: var(--s8); border-top: 1px solid var(--hairline); }
.ed-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
padding-top: var(--s6); border-top: 2px solid var(--stroke); }
.ed-ultimo { font-size: var(--fs-body-s); color: var(--ink-3); margin: 0; }
.ctl-num { max-width: 12rem; }
.bloque-adm { border: 1px solid var(--hairline); border-radius: var(--r-card);
padding: var(--s5); margin: 0 0 var(--s5); display: grid; gap: var(--s3); }
.bloque-adm legend { font-weight: 600; padding: 0 .4em; }
.campos-papel[hidden] { display: none; }
.btn-suave { background: transparent; color: var(--ink-2);
border: 1px solid var(--control-borde); box-shadow: none; }
.btn-suave:hover, .btn-suave:focus-visible { color: var(--gold-ink);
border-color: var(--control-elegido); }
.falta-archivos { margin-block-end: var(--s4); }
.ya { font-style: normal; font-size: var(--fs-label); color: var(--ink-3);
margin-inline-start: var(--s2); }
.lug-opcional { color: var(--ink-3); }
.lug-aviso { padding: var(--s4) var(--s5); border-radius: var(--r-card);
background: var(--ambar-tint); border-left: 3px solid var(--gold-deco);
color: var(--ink); font-size: var(--fs-body-s); line-height: 1.6;
margin: 0 0 var(--s5); }
.lug-aviso-mal { background: var(--paper-2); border-left-color: var(--danger); }
.lug-redes { display: flex; flex-direction: column; gap: var(--s4); margin-block-end: var(--s8); }
.ev-detalle { display: grid; gap: var(--s4); margin: 0 0 var(--s8); }
.dia-cola { margin: 0 0 var(--s4); padding: var(--s4) var(--s5);
border-radius: var(--r-card); background: var(--ambar-tint);
border: 1px solid var(--control-elegido); color: var(--gold-ink);
font-size: var(--fs-body-s); font-weight: 600; }
.dia-cola-sin { background: var(--paper-2); border-color: var(--danger); color: var(--danger); }
.dia-copia { margin: var(--s4) 0 0; font-size: var(--fs-body-s);
color: var(--ink-2); line-height: 1.6; }
.dia-copia-borrar { background: none; border: 0; padding: 0;
font: inherit; color: var(--ink); font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
cursor: pointer; }
.dia-copia-borrar:hover { color: var(--gold-ink); }
.dia-copia-borrar:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px;
border-radius: 3px; }
.dia-copia-borrar[disabled] { cursor: progress; opacity: .6; }
.pasos-falta {
flex: 1 0 100%;
margin: var(--s3) 0 0;
padding: var(--s3) var(--s4);
border-radius: var(--r-card);
background: var(--paper-2);
border-left: 3px solid var(--danger);
color: var(--danger);
font-size: var(--fs-body-s);
line-height: 1.5;
font-weight: 600;
}
[hidden] { display: none !important; }
.doc { max-width: 42rem; margin: 0 auto; padding: 8vh 1.25rem 6rem; }
.doc-eyebrow { font-family: var(--font-text), system-ui; font-size: var(--fs-eyebrow);
text-transform: uppercase; letter-spacing: .09em; color: var(--gold-ink);
font-weight: 600; margin: 0 0 var(--s2); }
.doc h1 { font-family: var(--font-display), serif; font-size: var(--fs-h1);
color: var(--ink); margin: 0 0 var(--s3); text-wrap: balance; }
.doc .version { font-family: var(--font-text), system-ui; font-size: var(--fs-body-s);
color: var(--ink-3); margin: 0 0 var(--s10); }
.doc h2 { font-family: var(--font-display), serif; font-size: var(--fs-h3);
color: var(--ink); margin: var(--s10) 0 var(--s3); }
.doc h3 { font-family: var(--font-text), system-ui; font-size: var(--fs-body);
font-weight: 600; color: var(--ink); margin: var(--s6) 0 var(--s2); }
.doc p, .doc li { font-family: var(--font-text), system-ui; font-size: var(--fs-body);
color: var(--ink-2); line-height: 1.65; }
.doc p { margin: 0 0 var(--s4); }
.doc ul { margin: 0 0 var(--s5); padding-left: var(--s5); display: flex;
flex-direction: column; gap: var(--s2); }
.doc strong { color: var(--ink); }
.doc a { color: var(--gold-ink); }
.secundarias { padding: var(--s5); border: 1px dashed var(--hairline);
border-radius: var(--r-card); background: var(--paper-2);
margin: 0 0 var(--s6); }
.doc .volver { display: inline-block; margin-top: var(--s10); min-height: 44px;
padding: .7rem 1.4rem; border-radius: var(--r-btn);
border: 1px solid var(--hairline); background: var(--ambar-tint);
color: var(--gold-ink); text-decoration: none; font-weight: 600;
font-family: var(--font-text), system-ui; }
.doc .volver:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.secundarias .secundarias-h { margin-top: 0; }
.doc-salidas { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.doc-salidas-arriba { margin-block-end: var(--s8); }
.doc-salidas-abajo  { margin-block-start: var(--s10); }
.doc .volver-forma { background: var(--ambar-tint); border-color: var(--control-elegido); }
.doc .volver-inicio { background: transparent; color: var(--ink-2); }