, no desde . Edita aquí si quieres más o menos tono rojo. ========================================================= */ main { background: radial-gradient(circle at 78% 8%, rgba(195, 13, 36, 0.06), transparent 34rem), radial-gradient(circle at 65% 34%, rgba(195, 13, 36, 0.04), transparent 42rem), radial-gradient(circle at 50% 88%, rgba(195, 13, 36, 0.025), transparent 48rem), var(--bg); } /* Deja las secciones transparentes para que el fondo de main sea continuo */ .hero, .section, .dark-band, .intro-section, .studio-section, .demo-section, .contact-section, .releases-section, .merch-section { background: transparent; } /* ========================================================= 04. LAYOUT / HELPERS Contenedores reutilizables. ========================================================= */ .container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; } .skip-link { position: absolute; top: 12px; left: 12px; z-index: 200; transform: translateY(-160%); background: var(--text); color: #000; padding: 10px 14px; } .skip-link:focus { transform: translateY(0); } /* ========================================================= 05. HEADER / NAVEGACIÓN SUPERIOR Logo superior, nombre del sello y menú. ========================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); border-bottom: 1px solid transparent; background: rgba(3, 3, 3, .35); backdrop-filter: blur(18px); transition: border-color .25s var(--ease), background .25s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(3, 3, 3, .86); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 16px; } .brand-mark { width: 50px; height: 50px; object-fit: contain; opacity: .92; filter: grayscale(1) contrast(1.08); } .brand-text { text-transform: uppercase; font-size: 11px; line-height: 1.08; letter-spacing: .24em; color: var(--soft-text); } .main-nav { display: flex; align-items: center; gap: 30px; } .main-nav a { position: relative; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; transition: color .2s var(--ease); } .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .main-nav a:hover { color: var(--text); } .main-nav a:hover::after { transform: scaleX(1); } .nav-toggle { display: none; } /* ========================================================= 06. HERO / PORTADA PRINCIPAL Altura, título principal, fondo y marca de agua. ========================================================= */ .hero { position: relative; min-height: auto; padding: calc(var(--header-h) + 26px) 0 90px; display: grid; align-items: start; border-bottom: 1px solid var(--line); overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: transparent; pointer-events: none; } /* Marca de agua: logo alternativo INT */ .hero-bg::before { content: ""; position: absolute; right: clamp(28px, 7vw, 150px); top: calc(var(--header-h) + 115px); width: min(43vw, 640px); aspect-ratio: 1 / 1.08; background-image: url("../img/logo-int-alt.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .09; filter: grayscale(1) contrast(1.05); mix-blend-mode: screen; pointer-events: none; } /* Texto gigante de fondo */ .hero-bg::after { content: "INHERENTE"; position: absolute; left: 3vw; top: calc(var(--header-h) + 22px); width: 110vw; text-align: left; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .045); font-size: clamp(4.8rem, 13vw, 12rem); font-weight: 900; letter-spacing: -.075em; line-height: .88; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .96fr) minmax(280px, .58fr); gap: clamp(64px, 8vw, 132px); align-items: end; } .eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .24em; } .eyebrow span, .section-kicker::before { content: ""; width: 36px; height: 1px; background: var(--red); } .hero h1, h2 { margin: 0; letter-spacing: -.065em; line-height: .88; font-weight: 900; } .hero h1 { max-width: 760px; font-size: clamp(3.4rem, 7vw, 7rem); line-height: .9; text-transform: uppercase; } h2 { font-size: clamp(3rem, 7vw, 6.4rem); text-transform: uppercase; } .hero-copy { max-width: 560px; margin: 24px 0 0; color: var(--soft-text); font-size: clamp(1rem, 1.25vw, 1.25rem); } .hero-actions, .inline-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } /* ========================================================= 07. BOTONES Botones principales y secundarios. ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; cursor: pointer; transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); } .btn:hover { transform: translateY(-2px); border-color: var(--red); } .btn-primary { background: var(--text); color: #030303; border-color: var(--text); } .btn-primary:hover { background: var(--red); border-color: var(--red); color: var(--text); } .btn-ghost { background: rgba(255,255,255,.02); } /* ========================================================= 08. HERO IDENTITY / BLOQUE DERECHO DEL HERO Wordmark minimalista y datos del sello. ========================================================= */ .hero-identity { position: relative; align-self: end; padding: 28px 0 26px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); max-width: 520px; width: 100%; } .hero-identity::before { content: ""; position: absolute; top: -1px; left: 0; width: 92px; height: 1px; background: #f4f1ee; } .identity-row { display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .24em; } .identity-row-top { margin-bottom: 52px; } .identity-wordmark { color: var(--text); font-size: clamp(3.35rem, 5.2vw, 5.45rem); font-weight: 900; line-height: .86; letter-spacing: -.085em; white-space: nowrap; } .identity-signal { height: 52px; margin: 34px 0 24px; display: flex; align-items: end; gap: 10px; } .identity-signal span { display: block; width: 1px; background: rgba(244, 241, 238, .24); } .identity-signal span:nth-child(1) { height: 18px; } .identity-signal span:nth-child(2) { height: 38px; background: rgba(195, 13, 36, .72); } .identity-signal span:nth-child(3) { height: 26px; } .identity-signal span:nth-child(4) { height: 52px; background: rgba(195, 13, 36, .88); } .identity-signal span:nth-child(5) { height: 31px; } .identity-signal span:nth-child(6) { height: 14px; } .identity-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; } .identity-meta span { min-height: 54px; display: flex; align-items: center; color: var(--soft-text); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; border-right: 1px solid var(--line); } .identity-meta span:nth-child(2) { justify-content: center; text-align: center; } .identity-meta span:last-child { border-right: 0; justify-content: end; } .identity-note { max-width: 360px; margin: 0; color: var(--soft-text); font-size: .98rem; } /* ========================================================= 08A. HERO PANEL ANTIGUO / OPCIONAL Mantén esto solo si tu index.html todavía usa .hero-panel. No afecta al diseño nuevo con .hero-identity. ========================================================= */ .hero-panel { border: 1px solid var(--line); background: rgba(6, 6, 6, .82); padding: 42px 48px 36px; width: 100%; max-width: 620px; min-height: 430px; justify-self: start; text-align: left; position: relative; } .hero-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--red) 24%, var(--red) 76%, transparent 100%); } .hero-logo, .hero-lockup { display: none; } .hero-panel-wordmark { width: 100%; margin-bottom: 64px; } .hero-panel-title { display: block; color: var(--text); font-size: clamp(3.2rem, 5.8vw, 5.7rem); font-weight: 900; line-height: .86; letter-spacing: -.075em; white-space: nowrap; } .hero-panel-subtitle { display: block; margin-top: 14px; color: var(--muted); font-size: 12px; letter-spacing: .48em; text-transform: uppercase; } .panel-wordmark { width: 100%; min-height: 190px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding-top: 18px; } .panel-wordmark-main { display: block; width: 100%; white-space: nowrap; color: var(--text); font-size: clamp(3.7rem, 6vw, 6.4rem); font-weight: 900; letter-spacing: -.085em; line-height: .82; } .panel-wordmark-sub { display: block; margin-top: 16px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .56em; padding-left: 4px; } .label-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; margin-bottom: 54px; } .label-meta div { padding: 18px 10px; border-right: 1px solid var(--line); } .label-meta div:last-child { border-right: 0; } .label-meta span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; } .label-meta strong { display: block; margin-top: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .hero-panel-note { max-width: 430px; margin: 0; color: var(--soft-text); align-self: flex-start; text-align: left; } /* ========================================================= 09. SECCIONES GENERALES Espaciado base, encabezados y layout común. ========================================================= */ .section { padding: 120px 0; border-bottom: 1px solid var(--line); } .split-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 60px; } .section-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 44px; } .section-head.stacked { display: block; margin-bottom: 0; } .section-head h2 { max-width: 760px; } .text-link { color: var(--soft-text); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; border-bottom: 1px solid var(--red); padding-bottom: 7px; } .intro-copy h2 { max-width: 980px; } .intro-copy p, .section-head p, .studio-copy p, .demo-grid p { max-width: 760px; color: var(--soft-text); font-size: 1.08rem; } /* ========================================================= 10. ABOUT / MANIFIESTO Lista de principios del sello. ========================================================= */ .manifesto-list { margin-top: 42px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); } .manifesto-list span { padding: 20px; color: var(--soft-text); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; border-right: 1px solid var(--line); } .manifesto-list span:last-child { border-right: 0; } /* ========================================================= ABOUT / FOTO POLERA HORIZONTAL BAJO TEXTO Imagen horizontal sin recorte. ========================================================= */ .about-shirt-inline { margin: 42px 0 0; width: 100%; max-width: 760px; overflow: hidden; } .about-shirt-inline img { width: 100%; height: auto; display: block; object-fit: contain; filter: grayscale(1) contrast(1.08) brightness(0.92); transition: filter .35s var(--ease), transform .35s var(--ease); } .about-shirt-inline:hover img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.01); } /* ========================================================= 11. RELEASES / LANZAMIENTOS Cards de catálogo y portadas. ========================================================= */ .release-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .release-card { min-height: 430px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); display: flex; flex-direction: column; gap: 20px; transition: background .25s var(--ease), transform .25s var(--ease); } .release-card:hover { background: rgba(195,13,36,.055); transform: translateY(-4px); } .cover { aspect-ratio: 1; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%), radial-gradient(circle at 82% 20%, rgba(195,13,36,.22), transparent 32%), #080808; display: grid; place-items: center; position: relative; overflow: hidden; } .cover::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(244,241,238,.17); } .cover span { position: relative; z-index: 1; font-size: clamp(2.3rem, 4vw, 4.8rem); letter-spacing: -.08em; font-weight: 900; color: rgba(244,241,238,.95); } .release-meta { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; } .release-card h3 { margin: 0; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; } .release-card p { margin: 0; color: var(--soft-text); } .release-links { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; } .release-links a { color: var(--text); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; border: 1px solid var(--line); padding: 9px 11px; } .release-links a:hover { border-color: var(--red); background: var(--red); } /* ========================================================= 12. ARTISTS / ARTISTAS Grilla de artistas y tags. ========================================================= */ .artist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .artist-card { min-height: 250px; background: #070707; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; transition: background .2s var(--ease); } .artist-card:hover { background: #0e0e0e; } .artist-card h3 { margin: 36px 0 8px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; } .artist-card p { margin: 0; color: var(--muted); } .artist-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .artist-tags span { border: 1px solid var(--line); color: var(--soft-text); padding: 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; } /* ========================================================= 12A. ARTISTS / FOTO O LOGO DEL ARTISTA Reemplaza la inicial por imagen o logo. ========================================================= */ .artist-media { width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--line); overflow: hidden; background: #030303; } .artist-media img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.9); transition: filter .35s var(--ease), transform .35s var(--ease); } .artist-card:hover .artist-media img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.025); } .artist-info { margin-top: 24px; } /* ========================================================= 13. SESSIONS / PODCAST / AUDIO VISUAL Cards para sesiones o podcasts. ========================================================= */ .sessions-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .65fr); gap: 60px; align-items: stretch; } .session-card { min-height: 360px; border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; background: #070707; } .session-number { color: var(--red); font-size: .75rem; letter-spacing: .24em; } .session-card h3 { margin: auto 0 18px; font-size: clamp(2.4rem, 5vw, 4.4rem); text-transform: uppercase; letter-spacing: -.07em; line-height: .9; } .session-card p { color: var(--soft-text); } .session-line { height: 1px; background: var(--line); margin: 26px 0; } .session-card > span:last-child { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; } /* ========================================================= 14. EVENTS / EVENTOS Listado de eventos. ========================================================= */ .event-list { border-top: 1px solid var(--line); } .event-row { display: grid; grid-template-columns: 180px 1fr 220px; gap: 34px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: center; } .event-date { color: var(--red); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; } .event-row h3 { margin: 0 0 6px; font-size: 1.5rem; text-transform: uppercase; } .event-row p { margin: 0; color: var(--soft-text); } .event-type { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; text-align: right; } /* ========================================================= 15. STUDIO / SALA / SETUP Bloque visual del estudio y lista de features. ========================================================= */ .studio-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr); gap: 70px; align-items: center; } .studio-visual { min-height: 520px; border: 1px solid var(--line); padding: 30px; background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%), radial-gradient(circle at 78% 22%, rgba(195,13,36,.14), transparent 28%), #080808; display: flex; flex-direction: column; justify-content: space-between; } .console-line { height: 1px; background: var(--red); width: 58%; } .console-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .console-grid span { aspect-ratio: 1; border: 1px solid var(--line); background: rgba(255,255,255,.02); } .studio-copy h2 { max-width: 800px; } .feature-list { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--line); } .feature-list li { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--soft-text); } .feature-list li::before { content: "—"; color: var(--red); margin-right: 12px; } /* ========================================================= 15A. STUDIO FOTO OPCIONAL Usa esto si reemplazas el bloque visual por:

========================================================= */ .studio-photo { width: 100%; max-width: 680px; margin-left: auto; overflow: hidden; background: transparent; } .studio-photo img { width: 100%; height: 620px; display: block; object-fit: cover; object-position: center; border: none; filter: grayscale(1) contrast(1.12) brightness(.9); transition: filter .35s var(--ease), transform .35s var(--ease); } .studio-photo:hover img { filter: grayscale(0) contrast(1.08) brightness(1); transform: scale(1.015); } /* ========================================================= 16. DEMOS / FORMULARIO Formulario de envío de demos. ========================================================= */ .demo-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(360px, .65fr); gap: 70px; align-items: start; } .demo-form { border: 1px solid var(--line); padding: 26px; background: #070707; } .demo-form label { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; margin-bottom: 16px; } input, textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line); background: #030303; color: var(--text); padding: 14px; outline: none; resize: vertical; } input:focus, textarea:focus { border-color: var(--red); } .form-note { margin: 16px 0 0; font-size: .9rem; color: var(--muted); } /* ========================================================= 17. CONTACTO / REDES Email y links sociales. ========================================================= */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr); gap: 70px; align-items: start; } .contact-card { border: 1px solid var(--line); padding: 28px; background: #070707; } .contact-card > a { display: inline-block; font-size: 1.45rem; border-bottom: 1px solid var(--red); padding-bottom: 8px; } .socials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin-top: 34px; border: 1px solid var(--line); } .socials a { background: #050505; padding: 18px; color: var(--soft-text); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; } .socials a:hover { background: var(--red); color: var(--text); } /* ========================================================= 18. FOOTER Pie de página. ========================================================= */ .site-footer { padding: 34px 0; color: var(--muted); } .footer-inner { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; } .footer-inner a { border-bottom: 1px solid var(--line); padding-bottom: 4px; } /* ========================================================= 19. ANIMACIONES Entrada suave de elementos con clase .reveal. ========================================================= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ========================================================= 20. RESPONSIVE TABLET Ajustes para pantallas medianas. ========================================================= */ @media (max-width: 1080px) { .hero-grid, .sessions-layout, .studio-grid, .demo-grid, .contact-grid { grid-template-columns: 1fr; } .hero-identity, .hero-panel { max-width: 100%; } .hero-panel { justify-self: stretch; } .hero-panel-title { font-size: clamp(3.4rem, 10vw, 6.2rem); } .release-grid, .artist-grid { grid-template-columns: repeat(2, 1fr); } .event-row { grid-template-columns: 140px 1fr; } .event-type { grid-column: 2; text-align: left; } .hero-bg::before { right: clamp(16px, 5vw, 60px); top: calc(var(--header-h) + 180px); width: min(62vw, 520px); opacity: .085; } .studio-photo { max-width: 100%; margin-left: 0; } .studio-photo img { height: 560px; } #artists .section-head h2, .artists-section .section-head h2 { transform: none; } } @media (max-width: 920px) { .hero-bg::after { left: 22px; top: calc(var(--header-h) + 18px); width: calc(100% - 44px); font-size: clamp(3.4rem, 12.6vw, 7rem); } .hero h1 { font-size: clamp(3.1rem, 9vw, 5.4rem); } .identity-wordmark { font-size: clamp(3.2rem, 11vw, 6.2rem); } } /* ========================================================= 21. RESPONSIVE CELULAR Menú móvil, hero, grillas y secciones en una columna. ========================================================= */ @media (max-width: 760px) { :root { --header-h: 70px; } .container { width: min(calc(100% - 28px), var(--max)); } .brand-mark { width: 42px; height: 42px; } .brand-text { font-size: 10px; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); padding: 0 11px; } .nav-toggle span { height: 1px; background: var(--text); width: 100%; transition: transform .2s var(--ease), opacity .2s var(--ease); } .nav-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); } .nav-toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); } .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: rgba(3,3,3,.97); border-bottom: 1px solid var(--line); display: grid; gap: 0; transform: translateY(-120%); transition: transform .25s var(--ease); } .main-nav.is-open { transform: translateY(0); } .main-nav a { padding: 20px; border-top: 1px solid var(--line); } .main-nav a::after { display: none; } .hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 64px; min-height: auto; } .hero-bg::before { right: 50%; top: calc(var(--header-h) + 210px); transform: translateX(50%); width: 78vw; opacity: .06; } .hero-bg::after { left: 14px; top: calc(var(--header-h) + 18px); width: calc(100% - 28px); font-size: clamp(3rem, 15vw, 5rem); letter-spacing: -.065em; line-height: .92; } .hero-grid { gap: 34px; } .hero h1 { font-size: clamp(2.6rem, 12vw, 4.1rem); } .hero-copy { font-size: 1rem; } .hero-actions { gap: 10px; } .hero-actions .btn, .inline-actions .btn { width: 100%; } .hero-identity { padding: 22px 0; max-width: 100%; } .identity-row { font-size: 9px; letter-spacing: .18em; gap: 14px; } .identity-row-top { margin-bottom: 34px; } .identity-wordmark { font-size: clamp(2.55rem, 13.5vw, 4.25rem); letter-spacing: -.08em; } .identity-signal { height: 36px; margin: 22px 0 18px; gap: 8px; } .identity-meta { grid-template-columns: 1fr; margin-bottom: 20px; } .identity-meta span { min-height: 42px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); } .identity-meta span:last-child { border-bottom: 0; } .identity-note { max-width: 100%; font-size: .95rem; } .hero-panel { padding: 30px 22px 26px; min-height: auto; } .hero-panel-wordmark { margin-bottom: 38px; } .hero-panel-title { font-size: clamp(2.5rem, 13.2vw, 4rem); letter-spacing: -.07em; } .hero-panel-subtitle { margin-top: 10px; font-size: 10px; letter-spacing: .32em; } .panel-wordmark { min-height: 130px; align-items: center; text-align: center; padding-top: 8px; } .panel-wordmark-main { font-size: clamp(2.55rem, 12vw, 3.35rem); letter-spacing: -.08em; } .panel-wordmark-sub { margin-top: 12px; font-size: 10px; letter-spacing: .34em; padding-left: 4px; } .label-meta { grid-template-columns: 1fr; margin-bottom: 34px; } .label-meta div { border-right: 0; border-bottom: 1px solid var(--line); } .label-meta div:last-child { border-bottom: 0; } .hero-panel-note { max-width: 100%; } .studio-photo img { height: auto; aspect-ratio: 4 / 5; } h2 { font-size: clamp(2.5rem, 15vw, 4.4rem); } .section { padding: 82px 0; } .split-layout { grid-template-columns: 1fr; gap: 18px; } .section-head { display: block; } .text-link { display: inline-block; margin-top: 24px; } .manifesto-list, .release-grid, .artist-grid, .socials { grid-template-columns: 1fr; } .manifesto-list span { border-right: 0; border-bottom: 1px solid var(--line); } .manifesto-list span:last-child { border-bottom: 0; } .release-card { min-height: auto; } .event-row { grid-template-columns: 1fr; gap: 12px; } .event-type { grid-column: auto; } .studio-visual { min-height: 360px; } .footer-inner { flex-direction: column; } #artists .section-head h2, .artists-section .section-head h2 { transform: none; } } /* ========================================================= 22. RESPONSIVE CELULARES MUY ANGOSTOS Ajustes para iPhones pequeños o Android angostos. ========================================================= */ @media (max-width: 390px) { .identity-wordmark { font-size: clamp(2.3rem, 12.7vw, 3.4rem); } .identity-row { display: grid; gap: 8px; } .hero-panel-title { font-size: clamp(2.25rem, 12vw, 3.2rem); letter-spacing: -.08em; } .hero-panel-subtitle { letter-spacing: .24em; } } /* ========================================================= RELEASES / DISEÑO LIMPIO SIN FONDO ROJO NI BORDES Portada limpia + texto abajo. ========================================================= */ .release-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); border: 0; background: transparent; } .release-card { min-height: auto; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; gap: 18px; transition: transform .25s var(--ease); } .release-card:hover { background: transparent; transform: translateY(-4px); } /* Contenedor de la portada */ .cover { width: 100%; aspect-ratio: 1 / 1; border: 0; background: transparent; display: block; overflow: hidden; } /* Quita el marco interno */ .cover::before { display: none; } /* Imagen real de la portada */ .cover img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(0.2) contrast(1.04) brightness(0.95); transition: filter .35s var(--ease), transform .35s var(--ease); } .release-card:hover .cover img { filter: grayscale(0) contrast(1.06) brightness(1); transform: scale(1.018); } /* Si alguna card todavía usa texto fallback dentro del cover */ .cover span { display: none; } /* Texto bajo la portada */ .release-meta { margin-top: 6px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; } .release-card h3 { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1; text-transform: uppercase; letter-spacing: -.03em; } .release-card p { margin: -10px 0 0; color: var(--soft-text); font-size: 1rem; } .release-links { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; } .release-links a { color: var(--text); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; border: 1px solid rgba(244, 241, 238, 0.16); padding: 9px 11px; background: transparent; } .release-links a:hover { border-color: var(--red); background: transparent; color: var(--red); } /* Tablet */ @media (max-width: 1080px) { .release-grid { grid-template-columns: repeat(2, 1fr); } } /* Celular */ @media (max-width: 760px) { .release-grid { grid-template-columns: 1fr; gap: 42px; } .release-card { gap: 16px; } .release-card h3 { font-size: 1.35rem; } } /* ========================================================= RELEASES / PORTADAS MÁS PEQUEÑAS Ajusta el tamaño visual de las portadas. ========================================================= */ .release-grid { gap: clamp(36px, 5vw, 72px); } .release-card { align-items: flex-start; gap: 16px; } /* Tamaño de la portada en desktop */ .cover { width: min(100%, 285px); max-width: 285px; aspect-ratio: 1 / 1; margin-bottom: 10px; } /* Imagen dentro de la portada */ .cover img { width: 100%; height: 100%; object-fit: cover; } /* Orden del texto bajo la portada */ .release-meta { width: 100%; max-width: 285px; margin-top: 4px; } .release-card h3 { margin: 0; font-size: clamp(1.15rem, 1.45vw, 1.45rem); line-height: 1; } .release-card p { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.2; } .release-links { margin-top: 12px; } /* ========================================================= AJUSTE TITULO ARTISTS Centra un poco el título "Artists & Collaborators" ========================================================= */ #artists .section-head h2, .artists-section .section-head h2 { transform: translateX(-210px); } /* ========================================================= SESSIONS / LOGO MARCA DE AGUA EN CARD DERECHA ========================================================= */ .session-card { position: relative; overflow: hidden; } /* Logo de fondo */ .session-card::before { content: ""; position: absolute; top: 78px; left: 50%; transform: translateX(-50%); width: min(78%, 360px); aspect-ratio: 1 / 1; background-image: url("../img/logo-int-alt.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 10; filter: grayscale(1) contrast(1.15); mix-blend-mode: screen; pointer-events: none; z-index: 0; } /* Deja el texto por encima del logo */ .session-card > * { position: relative; z-index: 1; } /* ========================================================= AJUSTES MÓVILES — ROSTER + PODCAST ========================================================= */ @media (max-width: 720px) { /* ========================= ROSTER — MÓVIL ========================= */ #artists { overflow: hidden; } #artists .container { width: 100%; box-sizing: border-box; } #artists .section-head { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 42px !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box; } #artists .section-kicker { margin-bottom: 24px; } #artists-title { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; font-size: clamp(2rem, 9.5vw, 2.6rem) !important; line-height: 0.88 !important; letter-spacing: -0.055em !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow: visible !important; box-sizing: border-box; } #artists-title .mobile-title-line { display: block !important; width: 100%; max-width: 100%; } /* ========================= PODCAST — LAYOUT GENERAL ========================= */ #sessions .sessions-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 2.5rem; } #sessions .section-head, #sessions .session-card { width: 100%; min-width: 0; box-sizing: border-box; } #sessions-title { max-width: 100%; font-size: clamp(2rem, 10.5vw, 3.15rem) !important; line-height: 0.96 !important; white-space: normal !important; overflow-wrap: anywhere; } #sessions iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* ========================= TARJETA INHERENTE PODCAST ========================= */ #sessions .session-card { position: relative; min-height: 0 !important; overflow: hidden; /* 335px deja el espacio necesario para que el logo quede completamente arriba del título. */ padding: 345px 28px 32px !important; background-size: min(250px, 72vw) auto !important; background-position: center 30px !important; background-repeat: no-repeat !important; } /* Oculta el número 01 en celular */ #sessions .session-number { display: none !important; } /* Mantiene el contenido sobre el fondo */ #sessions .session-card > * { position: relative; z-index: 2; } /* Título debajo del logo */ #sessions .session-card h3 { position: static !important; inset: auto !important; transform: none !important; max-width: 100%; margin: 0 0 28px !important; font-size: clamp(2.4rem, 11vw, 3.25rem) !important; line-height: 0.9 !important; letter-spacing: -0.045em; white-space: normal !important; overflow-wrap: normal; } /* Descripción */ #sessions .session-card p { position: static !important; max-width: 100% !important; margin: 0 0 54px !important; font-size: 1rem; line-height: 1.55; } /* Línea divisoria */ #sessions .session-line { position: static !important; margin: 0 0 28px !important; } /* Sets / Video / Editorial */ #sessions .session-card > span:last-child { position: static !important; display: block; } } /* ========================================================= HOME — LATEST EDITORIAL ENTRIES ========================================================= */ .editorial-home-section { background: #050505; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* Dos entradas por fila */ .editorial-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 100%; } /* Tarjeta */ .editorial-home-card { display: grid; grid-template-columns: minmax(190px, 42%) minmax(0, 58%); min-width: 0; min-height: 360px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: #070707; } /* Imagen */ .editorial-home-image { display: block; min-width: 0; min-height: 360px; overflow: hidden; background: #030303; } .editorial-home-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.08) brightness(0.9); transition: filter 0.35s var(--ease), transform 0.35s var(--ease); } /* Mismo efecto utilizado en las imágenes principales */ .editorial-home-card:hover .editorial-home-image img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.025); } /* Contenido */ .editorial-home-content { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2.4rem); border-left: 1px solid rgba(255, 255, 255, 0.15); } /* Categoría y fecha */ .editorial-home-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: auto; padding-bottom: 2rem; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .editorial-home-meta span { color: #d30b32; } .editorial-home-meta time { color: rgba(255, 255, 255, 0.52); } /* Título */ .editorial-home-card h3 { max-width: 11ch; margin: 0; font-size: clamp(2rem, 2.8vw, 3.4rem); line-height: 0.88; letter-spacing: -0.055em; text-transform: uppercase; } .editorial-home-card h3 a { color: #fff; text-decoration: none; } /* Descripción */ .editorial-home-card p { max-width: 34rem; margin: 1.5rem 0 2rem; color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; line-height: 1.6; } /* Read interview */ .editorial-home-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.15rem; border-top: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-decoration: none; text-transform: uppercase; transition: color 0.25s ease; } .editorial-home-link:hover { color: #d30b32; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 980px) { .editorial-home-grid { grid-template-columns: 1fr; } .editorial-home-card { grid-template-columns: minmax(240px, 40%) minmax(0, 60%); min-height: 340px; } .editorial-home-image { min-height: 340px; } } /* ========================================================= CELULAR ========================================================= */ @media (max-width: 650px) { .editorial-home-grid { grid-template-columns: 1fr; gap: 1.25rem; } .editorial-home-card { display: block; min-height: 0; } .editorial-home-image { width: 100%; min-height: 0; aspect-ratio: 1 / 1; } .editorial-home-content { padding: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 0; } .editorial-home-meta { margin-bottom: 1.5rem; padding-bottom: 0; } .editorial-home-card h3 { max-width: 100%; font-size: clamp(2rem, 10.5vw, 2.9rem); line-height: 0.9; } .editorial-home-card p { margin: 1.4rem 0 2rem; } } /* ========================================================= SELECTOR DE IDIOMA ========================================================= */ .language-switcher { display: flex; align-items: center; gap: 0.45rem; margin-left: 0.8rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; } .language-switcher button { position: relative; padding: 0.25rem 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.42); font: inherit; letter-spacing: inherit; cursor: pointer; transition: color 0.25s ease; } .language-switcher button:hover { color: #ffffff; } .language-switcher button.is-active { color: #ffffff; } .language-switcher button.is-active::after { content: ""; position: absolute; right: 0; bottom: -0.35rem; left: 0; height: 1px; background: #d30b32; } .language-switcher span { color: rgba(255, 255, 255, 0.25); } /* Selector dentro del menú móvil */ @media (max-width: 900px) { .language-switcher { width: 100%; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 0; font-size: 0.72rem; } } /* ========================================================= MENÚ MÓVIL + LAYOUT ESTABLE ES / EN BLOQUE ÚNICO Y DEFINITIVO ========================================================= */ @media (max-width: 900px) { :root { --mobile-header-height: 70px; } /* HEADER SIEMPRE FIJO */ .site-header { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; width: 100% !important; height: var(--mobile-header-height) !important; background: #050505 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 10000 !important; } .site-header .header-inner { position: relative; width: min(calc(100% - 28px), var(--max)); height: var(--mobile-header-height) !important; min-height: var(--mobile-header-height) !important; margin-inline: auto; padding-right: 62px; background: #050505 !important; } .site-header .brand { position: relative; z-index: 10003; max-width: calc(100% - 58px); } /* BOTÓN HAMBURGUESA / X */ .site-header .nav-toggle { position: absolute !important; top: 50% !important; right: 0 !important; left: auto !important; display: block !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; background: #050505 !important; opacity: 1 !important; visibility: visible !important; z-index: 10005 !important; } .site-header .nav-toggle > span { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 20px !important; height: 1px !important; background: #ffffff !important; transform-origin: center; transition: transform 250ms ease, opacity 250ms ease; } .site-header .nav-toggle[aria-expanded="false"] > span:first-child { transform: translate(-50%, -5px) !important; } .site-header .nav-toggle[aria-expanded="false"] > span:last-child { transform: translate(-50%, 5px) !important; } .site-header .nav-toggle[aria-expanded="true"] > span:first-child { transform: translate(-50%, 0) rotate(45deg) !important; } .site-header .nav-toggle[aria-expanded="true"] > span:last-child { transform: translate(-50%, 0) rotate(-45deg) !important; } /* MENÚ CERRADO */ .site-header .main-nav { position: fixed !important; top: var(--mobile-header-height) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: calc(100dvh - var(--mobile-header-height)) !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; background: #050505 !important; background-image: none !important; transform: translateY(-110%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform 250ms var(--ease), opacity 200ms ease, visibility 200ms ease !important; z-index: 10002 !important; } /* Funciona tanto con la clase .is-open de main.js como con aria-expanded del botón. */ .site-header .main-nav.is-open, .site-header .nav-toggle[aria-expanded="true"] + .main-nav { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ENLACES CON ALTURA FIJA */ .site-header .main-nav > a { display: flex !important; align-items: center !important; flex: 0 0 56px !important; width: 100% !important; min-height: 56px !important; margin: 0 !important; padding: 0 24px !important; border-top: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; background: #050505 !important; box-sizing: border-box !important; white-space: nowrap !important; } .site-header .main-nav > a::after { display: none !important; } /* SELECTOR ES / EN */ .site-header .language-switcher { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 66px !important; width: 100% !important; min-height: 66px !important; margin: 0 !important; padding: 14px 24px !important; gap: 6px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; background: #050505 !important; box-sizing: border-box !important; } .site-header .language-switcher button { display: grid !important; place-items: center !important; flex: 0 0 36px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } .site-header .language-switcher > span { display: grid !important; place-items: center !important; flex: 0 0 12px !important; width: 12px !important; margin: 0 !important; } } /* ========================================================= CONTENIDO MÓVIL ESTABLE EN AMBOS IDIOMAS ========================================================= */ @media (max-width: 760px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } .container { width: min(calc(100% - 28px), var(--max)) !important; min-width: 0 !important; } /* HERO */ .hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; } .hero-content, .hero-identity { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Eyebrow: misma altura en ES y EN */ .hero .eyebrow { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; align-items: start !important; width: 100% !important; min-height: 2.9em !important; gap: 12px !important; } .hero .eyebrow > span:first-child { width: 36px !important; height: 1px !important; margin-top: 0.5em; background: var(--red) !important; } .hero .eyebrow > span:last-child { width: auto !important; height: auto !important; background: transparent !important; font-size: 0.67rem !important; line-height: 1.45 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* Título: mismo espacio reservado en ambos idiomas */ #hero-title { position: static !important; width: 100% !important; max-width: 100% !important; min-height: 3.6em !important; margin: 1rem 0 1.35rem !important; font-size: clamp(2.15rem, 10vw, 3rem) !important; line-height: 0.9 !important; letter-spacing: -0.05em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; overflow: visible !important; transform: none !important; } /* Descripción: reserva la altura del idioma más largo */ .hero-copy { width: 100% !important; max-width: 100% !important; min-height: 6.2em !important; margin: 0 !important; font-size: 0.96rem !important; line-height: 1.55 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* Botones siempre ocupan exactamente el mismo espacio */ .hero-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; min-height: 106px !important; margin-top: 1.5rem !important; gap: 10px !important; } .hero-actions .btn { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* Bloque INHERENTE / TECHNO */ .hero-identity { margin-top: 0 !important; } .identity-meta { width: 100% !important; } .identity-meta span, .identity-meta span:nth-child(2), .identity-meta span:last-child { justify-content: flex-start !important; width: 100% !important; min-height: 42px !important; text-align: left !important; } /* LANZAMIENTOS */ #releases { overflow: hidden !important; } #releases .section-head { display: block !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } #releases-title { position: static !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: clamp(2.15rem, 9.5vw, 2.9rem) !important; line-height: 0.9 !important; letter-spacing: -0.05em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; overflow: visible !important; transform: none !important; } .release-grid { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; gap: 42px !important; } .release-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .cover { width: 100% !important; max-width: none !important; } .release-meta { width: 100% !important; max-width: none !important; } .release-card h3 { width: 100% !important; max-width: 100% !important; font-size: 1.25rem !important; line-height: 1.08 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; } .release-links { width: 100% !important; } } /* ========================================================= NOSOTROS — CORRECCIÓN MÓVIL ========================================================= */ @media (max-width: 760px) { .intro-section { width: 100%; max-width: 100%; overflow: hidden; } .intro-section .split-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; /* Recupera el mismo margen lateral del resto de la web */ width: min(calc(100% - 28px), var(--max)) !important; max-width: var(--max) !important; min-width: 0 !important; margin-inline: auto !important; padding: 0 !important; gap: 1.25rem !important; } .intro-section .intro-copy { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } /* Título de Nosotros */ .intro-section #about-title { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: clamp(2.05rem, 9.8vw, 3rem) !important; line-height: 0.91 !important; letter-spacing: -0.052em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; transform: none !important; overflow: visible !important; } /* Texto descriptivo */ .intro-section .intro-copy > p { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 1.5rem 0 0 !important; font-size: 0.96rem !important; line-height: 1.58 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } .intro-section .about-shirt-inline, .intro-section .manifesto-list { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* Teléfonos especialmente angostos */ @media (max-width: 390px) { .intro-section #about-title { font-size: clamp(1.95rem, 9.4vw, 2.65rem) !important; line-height: 0.93 !important; } } /* ========================================================= TÍTULOS PRINCIPALES MÓVIL — ESCALA UNIFICADA Basado en el tamaño de "Nosotros" ========================================================= */ @media (max-width: 760px) { /* Títulos principales de secciones */ #about-title, #artists-title, #editorial-title, #editorial-home-title, #studio-title, #contact-title, #demos-title { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: clamp(2.05rem, 9.8vw, 3rem) !important; line-height: 0.91 !important; letter-spacing: -0.052em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; transform: none !important; overflow: visible !important; } /* Mantiene los saltos de línea en Artists */ #artists-title .mobile-title-line { display: block !important; width: 100% !important; } /* Si alguno de estos títulos usa internos */ #studio-title span, #demos-title span, #editorial-title span { display: inline; } } /* Teléfonos más angostos */ @media (max-width: 390px) { #about-title, #artists-title, #editorial-title, #studio-title, #contact-title, #demos-title { font-size: clamp(1.95rem, 9.4vw, 2.65rem) !important; line-height: 0.93 !important; } } /* ========================================================= HERO PRINCIPAL — TÍTULO MÓVIL SIN DESBORDE ========================================================= */ @media (max-width: 760px) { #hero-title { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 1rem 0 1.35rem !important; padding: 0 !important; font-size: clamp(1.95rem, 8.6vw, 2.65rem) !important; line-height: 0.92 !important; letter-spacing: -0.042em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; text-wrap: balance; overflow: visible !important; } } /* Teléfonos muy angostos */ @media (max-width: 390px) { #hero-title { font-size: clamp(1.85rem, 8.25vw, 2.35rem) !important; line-height: 0.94 !important; letter-spacing: -0.038em !important; } }