/* ========================================================================== GLAM FLOW STUDIO — Base / Global ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* El atributo [hidden] debe ganar a cualquier display de clase. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* overflow-x: hidden crea un contenedor de scroll en y rompe position: sticky en los descendientes (el giro de la bailarina). "clip" recorta el desborde horizontal sin ese efecto secundario. */ overflow-x: clip; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--brand-rosa); color: var(--brand-negro); } /* ---- Tipografía ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); margin: 0; letter-spacing: -0.01em; } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); } p { margin: 0 0 1em; } strong { color: var(--color-text); font-weight: 700; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-rosa); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--brand-rosa); opacity: 0.7; } .text-gold { color: var(--brand-dorado); } .text-rosa { color: var(--brand-rosa); } .text-lila { color: var(--brand-lila); } .text-muted { color: var(--color-text-muted); } /* Acento de color sólido (sin degradado) para frases destacadas dentro de párrafos: un tono distinto al texto base, con contraste verificado sobre el fondo donde se usa. */ .accent-text { color: var(--color-accent-ink); font-weight: 600; } /* ---- Layout helpers ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .container-narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-section); position: relative; } .section-head { max-width: 640px; margin-bottom: var(--space-12); } .section-head p { color: var(--color-text-muted); font-size: var(--text-lg); } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.95rem 1.9rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.03em; text-transform: uppercase; transition: transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-normal) var(--ease-out-expo), background var(--dur-normal), color var(--dur-normal); will-change: transform; } .btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; } .btn-primary { background: var(--brand-rosa); color: var(--brand-negro); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-rosa); } .btn-gold { background: var(--grad-gold); color: var(--brand-negro); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(212,175,55,0.35); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover { border-color: var(--brand-rosa); color: var(--brand-rosa); transform: translateY(-2px); } /* ---- Header / Nav ---- */ .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: var(--z-header); display: flex; align-items: center; transition: background var(--dur-normal), backdrop-filter var(--dur-normal), border-color var(--dur-normal); border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(17, 12, 14, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--color-border-soft); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; } /* El logo nunca se comprime: si falta espacio, cede el nav (o aparece el menú móvil), no el isotipo. Sin esto, flexbox lo angosta y el PNG (465×400, más ancho que alto) se ve aplastado/deforme. */ .brand-logo { flex: none; } .brand-logo img { height: clamp(64px, 7.5vw, 92px); /* isotipo, protagonista en el header */ width: auto; max-width: none; /* anula el max-width:100% global que lo deformaba */ /* El trazo del isotipo concentra su masa visual en la mitad superior (el swirl inferior es una línea delgada), así que aunque su caja está centrada, se percibe pegado arriba. Nudge óptico leve — sin exagerar, para que el swirl no toque la línea divisoria del header. */ transform: translateY(2px); } .site-header nav { flex: 1; min-width: 0; } /* Gap y tamaño de letra del menú de escritorio calibrados para que el nav completo (6 links + cuenta + CTA) quepa dentro del ancho disponible entre el isotipo y el botón, incluso con "Reseñas" y el badge de evento activo visibles a la vez (peor caso medido: ~1239px de contenido). Sin este ajuste, el nav se desborda del contenedor en CUALQUIER pantalla ≥1200px (el contenedor tiene max-width fijo, así que más ancho de pantalla no ayuda) y el botón termina mucho más pegado al borde derecho que el logo al izquierdo — ver lección en patrones/web.md. */ .nav-links { display: flex; align-items: center; /* Piso de separación entre ítems del nav de escritorio. Actúa solo como mínimo: con justify-content:space-between (>=1201px) los enlaces se reparten el ancho sobrante, así que bajar este piso no aprieta el caso normal (pocos ítems) y sí evita el desborde del peor caso (7 ítems: Arriendo + badge de evento + Reseñas visibles a la vez). Ver patrones/web. */ gap: clamp(0.5rem, 0.72vw, 1rem); } @media (min-width: 1201px) { /* La nav ocupa todo el espacio libre entre el isotipo y el botón de Agendar; los enlaces se reparten en ese ancho en vez de apelotonarse contra el borde derecho. */ .nav-links { width: 100%; justify-content: space-between; } .nav-links a { white-space: nowrap; } } /* Todos los enlaces del nav comparten caja: inline-flex + line-height fijo. El motivo es el link "Especiales", que lleva dentro el badge de evento: como inline heredaba el line-height 1.65 del body, su caja crecia a 33px frente a los 26px del resto y el texto quedaba ~2.5px mas arriba que sus vecinos (y el subrayado, mas abajo). Con line-height 1.2 la caja mide lo mismo con badge o sin el, porque el badge (16px) cabe dentro de la linea. No tocar el line-height sin volver a medir con el badge visible. */ .nav-links a { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text-muted); position: relative; padding-block: 4px; transition: color var(--dur-fast); } /* El line-height corto va solo en los enlaces de texto: el CTA "Agendar clases" conserva el suyo para no cambiar de alto y descuadrar el header. */ .nav-links a:not(.btn) { line-height: 1.2; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--brand-rosa); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-normal) var(--ease-out-expo); } .nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--color-text); } .nav-links a:hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); } .nav-cta { margin-left: var(--space-2); } /* Distintivo de evento activo junto al link "Especiales" — solo aparece cuando js/events.js detecta ≥1 evento publicado. Anima únicamente transform/opacity (compositor-friendly); el media query global de prefers-reduced-motion de arriba ya neutraliza el pulso. */ .nav-link-badge { gap: 6px; } .nav-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: rgba(212, 175, 55, 0.14); border: 1px solid rgba(212, 175, 55, 0.4); color: var(--brand-dorado); font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } .nav-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-dorado); animation: navBadgePulse 1.8s ease-in-out infinite; } @keyframes navBadgePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.55; } } /* Acciones del nav (icono de cuenta + CTA Agendar) agrupadas y pegadas, como un solo bloque al extremo derecho del menú. */ .nav-actions { display: inline-flex; align-items: center; gap: var(--space-2); } .nav-actions .nav-cta { margin-left: 0; } /* CTA un poco más compacto en el menú de escritorio (mismo motivo que el ajuste de .nav-links de más arriba: espacio disponible limitado). */ @media (min-width: 1201px) { .nav-cta { padding: 0.78rem 1.4rem; } } /* Botón de cuenta (icono de persona) a la izquierda del CTA Agendar */ .nav-links a.nav-account { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); padding: 0; transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo); } .nav-links a.nav-account svg { width: 21px; height: 21px; } .nav-links a.nav-account::after { display: none; } .nav-links a.nav-account:hover, .nav-links a.nav-account:focus-visible { border-color: var(--brand-rosa); color: var(--brand-rosa); transform: translateY(-2px); } /* En desktop el icono habla solo; el texto acompaña en el menú móvil. */ .nav-account-label { display: none; } /* El CTA del nav es un botón: no hereda el estilo de enlace del nav. */ .nav-links a.btn { color: var(--brand-negro); } .nav-links a.btn:hover { color: var(--brand-negro); } .nav-links a.btn::after { display: none; } /* Mobile nav toggle */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; } .nav-toggle span { width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-normal), opacity var(--dur-fast); } @media (max-width: 1200px) { .nav-toggle { display: flex; } .nav-links { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) clamp(1.25rem, 5vw, 3rem) var(--space-8); background: rgba(17, 12, 14, 0.97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--color-border-soft); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-normal); } .nav-links a { font-size: var(--text-lg); } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-cta { margin: var(--space-2) 0 0; } /* Menos aire entre logo/nav/toggle: el nav ya no aporta contenido visible en esta anchura (vive en el desplegable, incluido el CTA), así que ese espacio de sobra se recupera para un encuadre más ajustado del header. */ .site-header .container { gap: var(--space-4); } /* En móvil las acciones se apilan como el resto del menú. */ .nav-actions { flex-direction: column; align-items: flex-start; gap: var(--space-2); } /* En el menú móvil, el botón de cuenta se vuelve un enlace normal con texto. */ .nav-links a.nav-account { width: auto; height: auto; border: none; border-radius: 0; gap: 10px; justify-content: flex-start; padding-block: 4px; } .nav-links a.nav-account:hover { transform: none; } .nav-account-label { display: inline; } } /* ---- Reveal on scroll (aparece Y desaparece; movimiento marcado) ---- */ .reveal { opacity: 0; transform: translateY(56px) scale(0.94); transition: opacity 680ms var(--ease-out-expo), transform 680ms var(--ease-out-expo); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal.delay-1 { transition-delay: 90ms; } .reveal.delay-2 { transition-delay: 180ms; } .reveal.delay-3 { transition-delay: 270ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* Utilidad para lectores de pantalla */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; background: var(--brand-rosa); color: var(--brand-negro); padding: 10px 16px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-weight: 600; z-index: var(--z-modal); transition: top var(--dur-fast); } /* ---- Mostrar/ocultar contraseña (js/password-toggle.js) ---- */ .field-pw { position: relative; } .field-pw input { padding-right: 2.75rem; } .pw-toggle { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-faint); cursor: pointer; transition: color var(--dur-fast); } .pw-toggle svg { width: 20px; height: 20px; } .pw-toggle:hover { color: var(--color-text-muted); } .pw-toggle:focus-visible { outline: 2px solid var(--brand-rosa); outline-offset: 2px; } /* ---- Chips de atajo (vigencia de series, filtros de rango de fechas) ---- */ .chip-list { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .chip { border: 1px solid var(--color-border-soft); background: var(--color-bg); color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); min-height: 36px; } .chip:hover { border-color: var(--brand-rosa); color: var(--brand-rosa); } .chip:focus-visible { outline: 2px solid var(--brand-rosa); outline-offset: 2px; } .chip.is-active { background: var(--brand-rosa); border-color: var(--brand-rosa); color: var(--brand-negro); } .field-hint--warn { color: var(--brand-dorado); } .field-hint { display: block; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 4px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } } .glamrango-custom { margin-top: var(--space-3); } .skip-link:focus { top: 12px; }