/* DaSing. Estilos de la web, sacados del Figma «Final: dos versiones» (2026-10-14).
   Solo blanco y negro. Todo en Sora (Víctor, 2026-10-14: «nada de Unbounded»).
   Rejilla de 12 columnas: margen 64, medianil 24, contenido de 1312 a 1440 px. */

/* La fuente Sora, servida desde la propia web y no desde Google Fonts (2026-10-22): así ninguna visita pasa por Google y
   la web no depende de nadie. Es variable: un archivo cubre del 300 al 600. Licencia SIL Open Font License. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fuentes/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fuentes/sora-latin.woff2) format('woff2');
  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 {
  --margen: 64px;
  --medianil: 24px;
  --seccion: 128px;
  --hueco: 64px;            /* del título al contenido */
  --ancho: 1312px;
  --sora: 'Sora', system-ui, sans-serif;
}
@media (max-width: 1023px) { :root { --margen: 40px; --seccion: 96px; --hueco: 48px; } }
@media (max-width: 767px)  { :root { --margen: 20px; --medianil: 16px; --seccion: 72px; --hueco: 32px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--sora); font-weight: 400; background: #fff; color: #000; min-height: 100vh; min-height: 100svh;
       display: flex; flex-direction: column; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 400; }
:focus-visible { outline: 2px solid var(--tinta, #000); outline-offset: 4px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Secciones enteras: o blancas o negras */
.blanca { --fondo: #fff; --tinta: #000; background: #fff; color: #000; }
.negra  { --fondo: #000; --tinta: #fff; background: #000; color: #fff; }
.seccion { padding: var(--seccion) var(--margen); }
.caja { max-width: var(--ancho); margin: 0 auto; }
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); }

/* Botones: o es un botón o es texto */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 16px 24px;
         border: 2px solid var(--tinta); background: transparent; color: var(--tinta);
         font: 600 14px/18px var(--sora); text-transform: uppercase; text-align: center;
         transition: background-color .2s ease, color .2s ease; }
.boton.lleno { background: var(--tinta); color: var(--fondo); }
@media (hover: hover) {
  .boton:hover { background: var(--tinta); color: var(--fondo); }
  .boton.lleno:hover { background: transparent; color: var(--tinta); }
}
.boton.menu { min-height: 42px; padding: 10px 22px; }
.boton.grande { min-height: 66px; padding: 22px 30px; }
@media (max-width: 767px) { .boton { padding: 16px 20px; } }

.etiqueta { font-size: 18px; line-height: 1.4; }
.etiqueta.pequena { font-size: 14px; }
.antetitulo { font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------------ Menú */
.menu { padding: 24px var(--margen); position: relative; z-index: 20; }
.menu .caja { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 62px; } /* altura entera: sin rendija con la sección de abajo */
.logo { display: block; width: 96px; color: var(--tinta); }
.logo svg { display: block; width: 100%; height: auto; }
.menu nav { display: flex; align-items: center; gap: 48px; }
.menu nav a.texto { font-size: 14px; line-height: 18px; padding: 12px 0; }
.menu nav a.texto[aria-current="page"] { font-weight: 600; }
.abrir-menu { display: none; }
/* Con solo dos enlaces, en el centro exacto de la página: el logo a la izquierda y Contacto a la derecha (Víctor, 2026-10-17) */
@media (min-width: 768px) {
  .menu .caja { display: grid; grid-template-columns: 1fr auto auto auto 1fr; column-gap: 48px; } /* Inicio, Artistas y DaSing */
  .menu nav { display: contents; }
  .menu .logo { justify-self: start; }
  .menu nav .boton { justify-self: end; }
}
@media (max-width: 767px) {
  .menu { padding: 16px var(--margen); }
  .logo { width: 72px; }
  .menu .caja { min-height: 47px; }
  .menu nav { display: none; }
  .abrir-menu { display: inline-flex; }
  /* Menú del móvil como panel (Víctor, 2026-10-19, idea de la navegación de America.gov en morphin.dev): el botón «Menú» crece
     desde su sitio hasta ser el panel, la página de detrás se desenfoca y los enlaces aparecen uno tras otro. El panel es del color
     contrario a la barra (web.js pone data-panel), con esquinas rectas como los botones. La animación la hace web.js */
  html.menu-abierto { --panel-fondo: #000; --panel-tinta: #fff; }
  html.menu-abierto[data-panel="blanco"] { --panel-fondo: #fff; --panel-tinta: #000; }
  .menu-abierto .menu nav { display: flex; position: fixed; top: 8px; left: 8px; right: 8px; z-index: 30;
    background: var(--panel-fondo); color: var(--panel-tinta); --tinta: var(--panel-tinta); --fondo: var(--panel-fondo);
    flex-direction: column; align-items: flex-start; gap: 20px; padding: 104px 12px 32px; padding-inline: calc(var(--margen) - 8px); }
  .menu-abierto .menu nav a.texto { font-size: 40px; line-height: 1.15; font-weight: 300; padding: 0; }
  .menu-abierto .menu nav a.texto[aria-current="page"] { font-weight: 400; }
  .menu-abierto .menu nav .boton { margin-top: 20px; }
  .menu-abierto .abrir-menu { z-index: 31; --tinta: var(--panel-tinta); --fondo: var(--panel-fondo); }  /* web.js lo fija en su sitio */
  .menu-abierto .menu .logo { z-index: 31; color: var(--panel-tinta); }
  html.menu-abierto.menu-cerrando .menu .logo { color: inherit; }  /* al cerrar, el logo vuelve al color de la barra: sin el panel debajo no se veía */
  html.menu-abierto header.menu { background: transparent !important; transform: none !important; }  /* la barra, no el botón «Contacto», que también lleva .menu */
  /* Con la barra transparente, arriba del todo asoma el fondo de la página: que sea del color de la barra, no una franja blanca
     desenfocada encima de una portada negra (2026-10-22). El panel es del color contrario a la barra */
  html.menu-abierto[data-panel="blanco"] body { background: #000; }
  .menu-abierto { overflow: hidden; }
  /* Detrás del panel, la página desenfocada (sin velo de color). Tocar fuera del panel lo cierra */
  body::after { content: ''; position: fixed; inset: 0; z-index: 19; pointer-events: none; opacity: 0;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .45s var(--suave); }
  html.menu-abierto body::after { opacity: 1; pointer-events: auto; }
  html.menu-cerrando body::after { opacity: 0; transition-duration: .3s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { body::after { transition: none; } }

/* ------------------------------------------------------------------ Entrada (Home) */
.entrada { padding-top: 64px; }
.entrada .arriba { text-align: center; }
.entrada h1 { font-weight: 400; text-transform: uppercase; letter-spacing: -.01em;
              font-size: clamp(30px, 5.56vw, 80px); line-height: 1.1; }
/* Dos líneas en el ordenador, «Conectamos talento / con escenarios y audiencias.», y en el móvil cada una se parte en dos
   (2026-10-26; antes, «Veinte años al otro lado / del escenario.») */
.entrada h1 span { display: block; text-wrap: balance; }
.entrada .lema { font-size: 14px; line-height: 22px; margin-top: 24px; }
.escenario { margin-top: 64px; }
.escenario svg { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .entrada { padding-top: 32px; }
  .entrada h1 { font-size: clamp(26px, 8.4vw, 44px); }
  .escenario { margin-top: 48px; }
}

/* ------------------------------------------------------------------ Artistas en la Home */
.tarjetas { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--medianil); margin-top: var(--hueco); }
.tarjeta .foto { overflow: hidden; aspect-ratio: 310 / 388; }
.tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tarjeta:hover img { transform: scale(1.03); }
.tarjeta .pie-foto { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; margin-top: 16px; }
.tarjeta .nombre { font-size: 16px; line-height: 1.3; }
.tarjeta .estilo { font-size: 14px; line-height: 1.3; }
.al-final { margin-top: var(--hueco); display: flex; width: max-content; margin-left: auto; } /* «Ver todos los artistas», a la derecha (Víctor, 2026-10-14) */
@media (max-width: 767px) {
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .tarjeta .pie-foto { justify-content: center; text-align: center; }  /* nombre y estilo centrados bajo la foto (Víctor, 2026-10-27) */
}

/* ------------------------------------------------------------------ Servicios en el móvil (G): sobre su foto de fondo */
.servicios-g { position: relative; overflow: hidden; padding-top: 112px; min-height: min(960px, 66.67vw); }
.servicios-g .fondo { position: absolute; inset: 0; }
.servicios-g .fondo img { width: 100%; height: 100%; object-fit: cover; }
.servicios-g .fondo::after { content: ''; position: absolute; inset: 0; background: #000; opacity: .62; }
.servicios-g .caja { position: relative; }
.servicios-g .filas { margin-top: 24px; display: grid; gap: 48px; }
.servicios-g .fila { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: var(--medianil); }
.servicios-g h3 { font-weight: 400; font-size: clamp(44px, 6.67vw, 96px); line-height: 1; text-transform: uppercase; }
.servicios-g .lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.servicios-g .lado p { font-size: 16px; line-height: 1.55; }
@media (max-width: 1023px) {
  .servicios-g { padding-top: var(--seccion); min-height: 0; }
  .servicios-g .filas { gap: 48px; margin-top: 32px; }
  .servicios-g .fila { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .servicios-g .lado { text-align: left; align-items: flex-start; }
}
@media (max-width: 767px) { .servicios-g h3 { font-size: 11vw; } }

/* ------------------------------------------------------------------ Servicios en el ordenador (R): palabras y la foto al lado */
.servicios-r .bloques { margin-top: var(--hueco); align-items: start; }
.servicios-r .lista { grid-column: 1 / span 8; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
.servicios-r h3 { font-weight: 300; font-size: clamp(52px, 7.22vw, 104px); line-height: 1; }
.servicios-r .lista p { font-size: 16px; line-height: 1.5; max-width: 421px; margin: 8px 0 16px; }
.servicios-r .foto { grid-column: 9 / span 4; aspect-ratio: 421 / 818; }
.servicios-r .foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .servicios-r .lista { grid-column: 1 / -1; gap: 48px; }
  .servicios-r h3 { font-size: 12vw; }
  .servicios-r .foto { grid-column: 1 / -1; aspect-ratio: 4 / 5; margin-top: 48px; }
}

/* ------------------------------------------------------------------ Bienestar emocional */
.bienestar { padding-top: 160px; padding-bottom: 160px; }
.bienestar .antetitulo-normal { font-weight: 600; font-size: 16px; line-height: 1.3; }
.bienestar h2 { font-weight: 300; font-size: clamp(40px, 6.67vw, 96px); line-height: 1.05; margin-top: 48px; }
.bienestar h2 span { display: block; }
.foto-ancha { margin-top: 48px; aspect-ratio: 1312 / 560; overflow: hidden; }
.foto-ancha img { width: 100%; height: 100%; object-fit: cover; }
.bienestar .abajo { margin-top: 48px; align-items: end; }
/* El botón, en una línea en el ordenador: «Cómo cuidamos a nuestros artistas» no cabía en tres columnas (2026-10-26). En el
   móvil no cabe en una y pasa a dos */
.bienestar .abajo p { grid-column: 1 / span 7; font-size: 20px; line-height: 1.6; }
.bienestar .abajo .boton { grid-column: 9 / span 4; justify-self: end; }
@media (min-width: 768px) { .bienestar .abajo .boton { white-space: nowrap; } }
@media (max-width: 767px) {
  .bienestar { padding-top: var(--seccion); padding-bottom: var(--seccion); }
  .bienestar h2 { margin-top: 24px; }
  .bienestar h2 span { display: inline; }
  .foto-ancha { aspect-ratio: 4 / 3; margin-top: 32px; }
  .bienestar .abajo { margin-top: 32px; }
  .bienestar .abajo p { grid-column: 1 / -1; font-size: 17px; }
  .bienestar .abajo .boton { grid-column: 1 / -1; justify-self: start; margin-top: 32px; }
}

/* ------------------------------------------------------------------ Cierre: ¿Hablamos? */
.cierre { text-align: center; }
.cierre .grande { font-weight: 300; font-size: clamp(44px, 6.6vw, 95px); line-height: 1; }
.cierre .caja > p { font-size: 18px; line-height: 1.5; margin-top: 24px; }
.cierre .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.datos { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 12px; margin-top: 40px; font-size: 16px; line-height: 1.4; }
.cierre .datos { justify-content: center; }
.datos > a, .datos > span { padding: 4px 0; }
@media (max-width: 767px) {
  .cierre .acciones { margin-top: 32px; }
  .datos { flex-direction: column; align-items: center; margin-top: 32px; }
}

/* ------------------------------------------------------------------ Pie */
.pie { padding: 30px var(--margen); }
.pie .caja { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-size: 14px; line-height: 18px; }
.pie .logo { width: 56px; }
.pie .enlaces { display: flex; justify-content: flex-end; gap: 32px; }
.pie .enlaces a { padding: 8px 0; }
/* El mismo pie en el móvil que en el ordenador (logo, «© 2026 DaSing», Aviso legal y Privacidad), pero colocado a su medida
   (Víctor, 2026-10-22: «los footers los mismos, pero cada uno optimizado a su espacio y dispositivo»; «ponlos alineados y el logo
   debajo solo»; «que quede todo bien centrado, los espacios iguales»): arriba, los tres textos en una línea, centrados y con la
   misma separación; debajo, el logo solo, centrado */
@media (max-width: 767px) {
  .pie { padding: 20px var(--margen) 24px; }
  .pie .caja { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; row-gap: 16px; }
  .pie .enlaces { display: contents; }
  .pie .caja > span, .pie .enlaces a { white-space: nowrap; }
  .pie .enlaces a { padding: 6px 0; }
  .pie .logo { order: 1; flex-basis: 100%; display: flex; justify-content: center; width: auto; }
  .pie .logo svg { width: 44px; }
}

/* ------------------------------------------------------------------ Artistas en el móvil (T): la lista, uno debajo del otro con el texto al lado */
.cabecera-t { padding-bottom: 64px; }
.cabecera-t h1 { font-weight: 600; font-size: clamp(56px, 8.33vw, 120px); line-height: 1; }
.cabecera-t p { font-size: 20px; line-height: 1.4; margin-top: 16px; }
.catalogo-t { padding-top: 64px; }
.catalogo-t ul { list-style: none; }
.catalogo-t li { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; column-gap: 32px; padding: 16px 0; }
.catalogo-t .foto { aspect-ratio: 1; overflow: hidden; }
.catalogo-t .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.catalogo-t li:hover .foto img { transform: scale(1.03); }
.catalogo-t h2 { font-weight: 600; font-size: clamp(30px, 3.89vw, 56px); line-height: 1.15; }
.catalogo-t p { font-size: 16px; line-height: 1.5; }
@media (max-width: 767px) {
  .catalogo-t li { grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; row-gap: 16px; }
  .catalogo-t li .boton { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------------------------------ Artistas en el ordenador (M): de dos en dos */
.cabecera-m { padding-bottom: 64px; text-align: center; }
.cabecera-m h1 { font-weight: 300; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.1; margin-top: 24px; }
.cabecera-m h1 span { display: block; }
.catalogo-m { padding-top: 64px; }
.catalogo-m ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--medianil); row-gap: 96px; }
.catalogo-m li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.catalogo-m .foto { width: min(460px, 100%); aspect-ratio: 460 / 580; overflow: hidden; }
.catalogo-m .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.catalogo-m li:hover .foto img { transform: scale(1.03); }
.catalogo-m h2 { font-weight: 300; font-size: clamp(30px, 2.78vw, 40px); line-height: 1.25; margin-top: 8px; }
.catalogo-m p { font-size: 14px; line-height: 1.5; margin-top: 16px; }
.catalogo-m .boton { margin-top: 40px; }
@media (max-width: 767px) {
  .cabecera-m h1 span { display: inline; }
  .catalogo-m ul { grid-template-columns: 1fr; row-gap: 64px; }
  .catalogo-m .boton { margin-top: 24px; }
}

/* ------------------------------------------------------------------ Ficha: el disco y sus canciones */
.escucha { text-align: center; }
.disco { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden;
         animation: girar 6s linear infinite; animation-play-state: paused; }
.disco img { width: 100%; height: 100%; object-fit: cover; }
.disco::after { content: ''; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
                border-radius: 50%; background: var(--fondo); }
.sonando .disco { animation-play-state: running; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disco { animation: none; } }
.escucha h1 { font-weight: 300; font-size: clamp(48px, 6.67vw, 96px); line-height: 1.2; margin-top: 64px; }
.escucha .linea { font-size: 20px; line-height: 1.4; margin-top: 24px; }
.canciones { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; column-gap: 48px; row-gap: 16px; margin-top: 48px; }
.cancion { display: inline-flex; align-items: center; gap: 16px; font-size: 20px; line-height: 1.3; text-align: left; padding: 0; }
.cancion .circulo { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--tinta); display: grid; place-items: center;
                    transition: background-color .2s ease, color .2s ease; }
.cancion .circulo svg { width: 14px; height: 14px; fill: currentColor; }
.cancion .pausa { display: none; }
.cancion[aria-current="true"] .circulo { background: var(--tinta); color: var(--fondo); }
.sonando .cancion[aria-current="true"] .triangulo { display: none; }
.sonando .cancion[aria-current="true"] .pausa { display: block; }
@media (hover: hover) { .cancion:hover .circulo { background: var(--tinta); color: var(--fondo); } }
.acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 48px; }
.proveedor { position: absolute; left: -10000px; top: 0; width: 320px; height: 152px; overflow: hidden; }
.proveedor.visible { position: static; width: min(560px, 100%); height: auto; margin: 32px auto 0; }
.proveedor iframe { border: 0; width: 100%; }
.aviso-proveedor { font-size: 14px; line-height: 1.5; margin-top: 16px; }
@media (max-width: 767px) {
  .escucha h1 { margin-top: 40px; }
  .escucha .linea { font-size: 18px; }
  .cancion { font-size: 18px; }
  .acciones { flex-direction: column; align-items: stretch; }
}
/* Canciones con los botones siempre alineados (2026-10-27): hasta 1023 px, en columna y el bloque centrado;
   de 1024 a 1199, en una fila más justa para que no se parta (We Are Mono necesita 979 px con la fila normal) */
@media (max-width: 1023px) {
  .canciones { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .canciones { column-gap: 32px; }
  .cancion { font-size: 18px; }
}

/* ------------------------------------------------------------------ Ficha: galería, historia, cierre, otros */
.galeria { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--medianil); }
.galeria img { width: 100%; height: auto; aspect-ratio: var(--proporcion, 309 / 388); object-fit: cover; }
.galeria img.ancha { grid-column: span 2; aspect-ratio: 644 / 388; }
@media (max-width: 767px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galeria[style*="--n: 2"] { grid-template-columns: 1fr; }
  .galeria.en-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }  /* tres verticales, las tres en una fila (2026-10-29) */

.historia { text-align: center; }
.historia blockquote p, .historia .frase { font-weight: 300; font-size: clamp(32px, 3.89vw, 56px); line-height: 1.2; max-width: 866px; margin: 0 auto; }
.historia .de { font-size: 14px; line-height: 1.4; margin-top: 24px; }
.historia .resumen, .historia .bio p { font-size: 18px; line-height: 1.5; max-width: 644px; margin: 48px auto 0; }
.historia .bio p { margin-top: 24px; text-align: left; }
.historia .bio[hidden] { display: none; }
/* Al abrir «Leer más», la biografía se distingue del resumen (Víctor, 2026-10-17: «que se destaque, porque se une con el texto pequeño»):
   más aire antes, letra más grande y la primera frase como entrada, en Light. Entra con un fundido suave. */
.historia .bio { max-width: 700px; margin: 72px auto 0; text-align: left; }
.historia .bio p { font-size: 20px; line-height: 1.6; max-width: none; margin: 24px 0 0; }
.historia .bio p:first-child { font-weight: 300; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.5; margin-top: 0; }
.historia .bio.abriendo { animation: subir .8s var(--suave) both; }
@media (max-width: 767px) {
  .historia .bio { margin-top: 48px; }
  .historia .bio p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .historia .bio.abriendo { animation: none; } }
.historia .boton { margin-top: 32px; }
/* Instagram de cada artista, en la parte negra de su ficha (2026-11-04): la cuenta tal cual se escribe, sin mayúsculas */
.ig-artista { display: flex; justify-content: center; margin-top: var(--hueco); }
.ig-artista .boton { text-transform: none; letter-spacing: 0; }
.historia .ig-artista .boton { margin-top: 0; }
.ig-artista .icono { width: 18px; height: 18px; flex: none; }

/* Cierre de la ficha: la pregunta y la frase a la izquierda; el botón al margen derecho, centrado en alto con el texto, como en el
   cierre de Artistas (Víctor, 2026-10-19: el botón suelto arriba, en medio de la página, «no sigue ninguna norma de UI ni UX»;
   «el botón a la derecha»). Sin «Te responde Laura Singla.» */
.cierre-dos .izquierda { grid-column: 1 / span 5; }
.cierre-dos .derecha { grid-column: 8 / -1; grid-row: 1; justify-self: end; align-self: center;
  display: flex; }
.cierre-dos h2 { font-weight: 400; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.2; }
.cierre-dos .izquierda p { font-size: 18px; line-height: 1.5; margin-top: 32px; }
@media (max-width: 767px) {
  .cierre-dos .izquierda, .cierre-dos .derecha { grid-column: 1 / -1; }
  .cierre-dos .derecha { grid-row: auto; justify-self: start; margin-top: 32px; }
}


.otros ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--medianil); margin-top: var(--hueco); }
.otros .foto { overflow: hidden; aspect-ratio: 421 / 526; }
.otros img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.otros a:hover img { transform: scale(1.03); }
.otros .nombre { display: block; font-size: 16px; line-height: 1.3; margin-top: 16px; }
/* En el ordenador, tres huecos: los demás artistas se apilan en ellos (el 4.º con el 1.º…) y web.js los va pasando con un
   fundido (Víctor, 2026-10-23: «me gusta el efecto de fundido, es más sutil para ordenador»; se probaron también una cortina y
   un deslizamiento). Sin JavaScript (sin la clase «gira»), solo los tres primeros. En el móvil, todos en la fila */
@media (min-width: 768px) {
  .otros li { grid-row: 1; }
  .otros li:nth-child(3n+1) { grid-column: 1; }
  .otros li:nth-child(3n+2) { grid-column: 2; }
  .otros li:nth-child(3n) { grid-column: 3; }
  .otros:not(.gira) li:nth-child(n+4) { display: none; }
  .otros li > a { transition: opacity 1s ease; }
  .otros.gira li:not(.actual) > a { opacity: 0; pointer-events: none; }
}
@media (max-width: 767px) {
  .otros ul { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory;
              margin-left: calc(var(--margen) * -1); margin-right: calc(var(--margen) * -1); padding: 0 var(--margen); scrollbar-width: none; }
  .otros ul::-webkit-scrollbar { display: none; }
  .otros li { scroll-snap-align: start; scroll-margin-left: var(--margen); }
}

/* ------------------------------------------------------------------ Qué es DaSing */
.tres { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--medianil); }
.tres .foto { aspect-ratio: 421 / 526; overflow: hidden; }
.tres .foto img { width: 100%; height: 100%; object-fit: cover; }
.tres h2 { font-weight: 400; font-size: clamp(32px, 2.78vw, 40px); line-height: 1.25; margin-top: 16px; }
.tres p { font-size: 18px; line-height: 1.5; margin: 16px 0 24px; }
.tres li { scroll-margin-top: 24px; }
@media (max-width: 1023px) { .tres { grid-template-columns: 1fr; row-gap: 64px; } .tres .foto { aspect-ratio: 4 / 3; } }

.lineup { text-align: center; }
.lineup .antetitulo-normal { font-weight: 600; font-size: 14px; line-height: 1.4; margin-top: 48px; }
.sitios { font-size: clamp(24px, 3.06vw, 44px); line-height: 1.25; margin-top: 48px; text-wrap: balance; }  /* líneas parejas con nombres largos (2026-10-26) */
.sitio { white-space: nowrap; }
.sitio .aparte { white-space: normal; }  /* lo que va entre paréntesis puede bajar de línea (2026-10-26) */
.sitio .sep { margin: 0 .3em 0 .45em; }
.lineup .texto { font-size: 18px; line-height: 1.6; max-width: 867px; margin: 48px auto 0; }
.lineup .firma { font-size: 14px; line-height: 1.4; margin-top: 40px; }
.lineup .texto.mas { margin-top: 16px; }
/* En el móvil, el texto de Laura centrado como el título, la lista y la firma (Víctor, 2026-10-27: «se ve pegado a la izquierda») */
/* Y los sitios más pequeños, centrados y con sus barras, para que no sea un bloque (Víctor, 2026-10-27: «demasiado mazacote») */
@media (max-width: 767px) { .sitios { font-size: 18px; line-height: 1.5; } .lineup .texto { font-size: 17px; text-wrap: pretty; } .sitio .sep { margin: 0 .35em; } }

/* ------------------------------------------------------------------ Páginas legales */
/* Con el texto entero (publicación, 2026-10-27): alineado al margen de la rejilla como el resto de páginas, a una medida de lectura */
.legal .caja > * { max-width: 760px; }
.legal .grande-legal { font-weight: 300; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.1; margin-bottom: 16px; }
.legal h2 { font-weight: 400; font-size: 24px; line-height: 1.3; margin-top: 48px; }
.legal p, .legal li { font-size: 18px; line-height: 1.6; }
.legal p { margin-top: 16px; }
.legal ul { margin-top: 16px; padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal .fecha { margin-top: 48px; font-size: 16px; }
.legal .boton { margin-top: 24px; }
@media (max-width: 767px) { .legal h2 { font-size: 22px; margin-top: 40px; } .legal p, .legal li { font-size: 17px; } }

/* ------------------------------------------------------------------ Una versión por dispositivo
   Reunión con Laura (2026-10-22). En el ordenador, los servicios de la Home con la foto al lado y Artistas de dos en dos;
   en el móvil, los servicios sobre su foto de fondo y Artistas en lista, uno debajo del otro con el texto al lado
   (Víctor, 2026-10-23: «en formato móvil dijimos que iría la lista»). DaSing empieza como Artistas en cada uno. */
@media (max-width: 767px) { .solo-ordenador { display: none !important; } }
@media (min-width: 768px) { .solo-movil { display: none !important; } }

/* ------------------------------------------------------------------ Ninguna sección más alta que la pantalla
   Víctor, 2026-10-14: las secciones encajan en la pantalla, sin cortarse, y se adaptan a la
   pantalla donde se ven. Pero no todas ocupan la pantalla entera: cada una mide lo que pide su
   contenido y, al bajar, se ven varias a la vez. Solo la primera pantalla (menú y entrada, o menú
   y disco en la ficha) llena la pantalla. Los tamaños grandes dependen del ancho y del alto (svh).
   Las fotos se recortan para caber (object-fit: cover), nunca se deforman. */
:root { --menu: 110px; --aire: clamp(40px, 8svh, 96px); }
@media (min-width: 1024px) { :root { --hueco: min(64px, 6svh); } }
@media (max-width: 767px) { :root { --menu: 79px; --aire: 56px; } }
.seccion { padding-top: var(--aire); padding-bottom: var(--aire); }

.servicios-g { min-height: 0; }
.tras-menu { min-height: calc(100vh - var(--menu)); min-height: calc(100svh - var(--menu)); display: flex; flex-direction: column; }
.tras-menu > .caja { flex: 1; display: flex; flex-direction: column; width: 100%; }
main.sola { display: flex; flex-direction: column; }
main.sola > .seccion { flex: 1; display: flex; flex-direction: column; justify-content: center; }
main.sola > .seccion > .caja { width: 100%; }
.bienestar { padding-top: var(--aire); padding-bottom: var(--aire); }

/* Entrada: el titular arriba y el arco ocupa lo que queda de la primera pantalla, apoyado abajo */
.entrada { padding-top: min(64px, 6svh); padding-bottom: min(64px, 5svh); }
.entrada h1 { font-size: min(5.56vw, 8svh, 80px); }
.escenario { flex: 1 1 0; position: relative; min-height: 140px; margin-top: min(48px, 5svh); }
.escenario svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Ficha: el disco ocupa lo que queda de la primera pantalla */
.disco-caja { flex: 1 1 0; min-height: 220px; container-type: size; display: grid; place-items: center; }
.disco-caja .disco { width: min(560px, 100cqw, 100cqh); margin: 0; }
/* Vídeo de YouTube (Rock the Night): debajo del disco, oculto hasta darle al play. Entonces el disco gira, acelera y la
   ventana del vídeo se abre desde su círculo hasta el 16:9 (Víctor, 2026-10-16: «todo superfluido»). */
.disco-caja .disco, .disco-caja .video { grid-area: 1 / 1; }
.disco-caja .disco { z-index: 1; }
.disco-caja .video { width: min(996px, 100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; visibility: hidden; }
.disco-caja .video iframe { display: block; width: 100%; height: 100%; border: 0; }
.disco-caja .video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; }
.abriendo .disco-caja .video, .con-video .disco-caja .video { visibility: visible; }
.con-video .disco-caja .disco { display: none; }

/* Fotos que no aportan su altura: la pone su hueco */
.servicios-r .foto, .foto-ancha { position: relative; }
.servicios-r .foto img, .foto-ancha img { position: absolute; inset: 0; }

@media (min-width: 768px) {
  .servicios-g h3 { font-size: min(6.67vw, 10svh, 96px); }
  .servicios-g .filas { gap: min(48px, 4svh); }

  .servicios-r .bloques { align-items: stretch; margin-top: var(--hueco); }
  .servicios-r { padding-top: clamp(40px, 7.5svh, 128px); padding-bottom: clamp(40px, 7.5svh, 128px); }
  .servicios-r .lista { gap: min(72px, 3svh); }
  .servicios-r h3 { font-size: min(7.22vw, 7svh, 104px); }
  .servicios-r .lista p { margin: 8px 0 12px; }
  .servicios-r .foto { aspect-ratio: auto; min-height: 0; }

  .bienestar h2 { font-size: min(6.67vw, 8.5svh, 96px); margin-top: min(48px, 4svh); }
  .bienestar .foto-ancha { margin-top: min(48px, 4svh); }
  .bienestar .abajo { margin-top: min(48px, 4svh); }
  .bienestar .foto-ancha img { object-position: 50% 30%; } /* los gatitos, con la cabeza entera, cuando la franja es estrecha (2026-10-26) */
  .lineup .antetitulo-normal, .sitios, .lineup .texto { margin-top: min(48px, 4svh); }
  .sitios { font-size: min(3.06vw, 4.6svh, 44px); }
  .lineup .firma { margin-top: min(40px, 3svh); }
  .lineup .texto.mas { margin-top: min(16px, 1.5svh); }

  .escucha { padding-top: clamp(32px, 6svh, 128px); padding-bottom: clamp(32px, 6svh, 128px); }
  .escucha .disco-caja { min-height: 200px; }
  .escucha h1 { font-size: min(6.67vw, 9svh, 96px); margin-top: min(64px, 4svh); }
  .escucha .linea { margin-top: min(24px, 2svh); }
  .canciones, .acciones { margin-top: min(48px, 4svh); }

  .otros .foto { aspect-ratio: auto; height: clamp(240px, calc(100svh - 2 * var(--aire) - 250px), 526px); }
  .catalogo-m .foto { width: min(460px, 100%, calc((100svh - 300px) * 460 / 580)); }
}
@media (min-width: 1024px) {
  .tres .foto { aspect-ratio: auto; height: clamp(220px, calc(100svh - 2 * var(--aire) - 230px), 526px); }
  .tarjetas, .bloque-tarjetas { max-width: calc((100svh - 2 * var(--aire) - 260px) * 310 / 388 * 4 + 3 * var(--medianil)); }
}
@media (max-width: 767px) {
  .entrada { padding-top: 32px; padding-bottom: var(--aire); }
  .entrada h1 { font-size: clamp(26px, 8.4vw, 44px); }
  /* El arco, a su proporción y abajo; el titular, centrado en el espacio de encima */
  .entrada .arriba { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .escenario { flex: none; aspect-ratio: 1312 / 492; min-height: 0; margin-top: 48px; }
  /* Altura fija, no mínima: con «container-type: size» y solo altura mínima el disco se calculaba en 0 y no se veía en móvil (arreglado el 2026-10-16) */
  .disco-caja { flex: none; height: min(calc(100vw - 2 * var(--margen)), 55svh); min-height: 0; }
}


/* Bienestar y dónde ha trabajado Laura se ven siempre enteras: nunca más altas que la pantalla.
   Si no caben, la foto se encoge (hasta 120 px) y el texto se queda como está. */
.bienestar, .lineup { display: flex; flex-direction: column; max-height: 100vh; max-height: 100svh; }
@media (max-width: 767px) { .lineup { max-height: none; } } /* en móvil, scroll natural: que no se corte el texto de Laura (2026-10-16) */
.bienestar > .caja, .lineup > .caja { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.bienestar > .caja > *, .lineup > .caja > * { flex-shrink: 0; }
.bienestar .foto-ancha, .lineup .foto-ancha { flex: 0 1 auto; aspect-ratio: auto; height: 560px; min-height: 120px; }
/* «Dónde he trabajado» en el ordenador: la foto, al tamaño que tenía antes de los textos nuevos de Laura (240 px a 1440 × 900),
   aunque la sección pase de una pantalla (Víctor, 2026-10-26: «aquí no pasa nada si ocupa más, tiene que verse bien… como
   estaba la imagen de antes»). Con los textos largos se quedaba en una franja de 120 px */
@media (min-width: 768px) {
  .lineup { max-height: none; }
  .lineup .foto-ancha { flex: none; height: clamp(240px, calc(100svh - 660px), 560px); }
}
@media (max-width: 767px) {
  .bienestar .foto-ancha, .lineup .foto-ancha { height: 75vw; }
  .lineup .antetitulo-normal, .sitios, .lineup .texto { margin-top: 24px; }
  .sitios { margin-top: 20px; }
  .sitios + .texto { margin-top: 40px; }  /* más aire entre la lista y el texto de Laura */
  .lineup .firma { margin-top: 24px; }
  .lineup .texto.mas { margin-top: 16px; }
}

/* Títulos de página con el aire justo */
.cabecera-t, .cabecera-m { padding-top: min(64px, 6svh); padding-bottom: min(40px, 4svh); }
.cabecera-m h1 { margin-top: 0; }
.catalogo-t, .catalogo-m { padding-top: min(40px, 4svh); }
@media (max-width: 767px) { .cabecera-t, .cabecera-m { padding-top: 32px; padding-bottom: 24px; } .catalogo-t, .catalogo-m { padding-top: 16px; } }
/* Una sola cabecera para el móvil y el ordenador (2026-10-27): un solo h1 por página. En el móvil se viste como la de la
   lista (.cabecera-t) y en el ordenador como la de dos en dos (.cabecera-m), con las mismas medidas que tenían */
@media (max-width: 767px) {
  .cabecera { padding-top: 32px; padding-bottom: 24px; }
  .cabecera h1 { font-weight: 600; font-size: clamp(56px, 8.33vw, 120px); line-height: 1; }
  .cabecera p { font-size: 20px; line-height: 1.4; margin-top: 16px; }
}
@media (min-width: 768px) {
  .cabecera { padding-top: min(64px, 6svh); padding-bottom: min(40px, 4svh); text-align: center; }
  .cabecera h1 { font-weight: 300; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.1; }
  .cabecera h1 span { display: block; }
}

/* ------------------------------------------------------------------ Portada de la Home
   La 1, el arco del «DA» (Figma «Entrada C»): la que se queda tras la reunión con Laura (2026-10-22); la 2 (Tracklist) y la 3 (Escenario), fuera.
   Titulares en Sora Regular, no SemiBold (Víctor, 2026-10-14: «que quede más regular, no tan bold»). */

/* ------------------------------------------------------------------ Artistas sin botones
   Víctor, 2026-10-14: fuera «Ver a…». Toda la tarjeta lleva a la ficha. Debajo del nombre, con más aire, el género
   y lo más importante del artista. Al pasar el ratón (2026-10-16): la foto se oscurece un poco, se acerca y sale
   «Ver artista» en medio, como botón secundario en blanco. Ya no se pone en color: no todos tienen foto en color. */
.catalogo-t li, .catalogo-m li { display: block; padding: 0; }
.catalogo-t .fila { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; column-gap: 32px; padding: 16px 0; }
.catalogo-t .foto { display: block; }
.catalogo-t .textos { display: block; }
.catalogo-t .estilo { font-size: 16px; line-height: 1.5; margin-top: 12px; }
.catalogo-t .destacado { font-size: 16px; line-height: 1.5; margin-top: 8px; max-width: 520px; }
.catalogo-m .celda { display: flex; flex-direction: column; align-items: center; text-align: center; }
.catalogo-m .foto { display: block; }
.catalogo-m h2 { margin-top: 24px; }
.catalogo-m .estilo { font-size: 14px; line-height: 1.5; margin-top: 12px; }
.catalogo-m .destacado { font-size: 16px; line-height: 1.5; margin-top: 8px; max-width: 380px; }
.catalogo-t .fila:hover .foto img, .catalogo-m .celda:hover .foto img { transform: scale(1.03); }
.catalogo-t .fila .foto, .catalogo-m .celda .foto { position: relative; }
.catalogo-t .fila .foto::after, .catalogo-m .celda .foto::after { content: ''; position: absolute; inset: 0; background: #000;
  opacity: 0; transition: opacity .5s var(--suave); pointer-events: none; }
.ver { --tinta: #fff; position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, calc(-50% + 12px));
  display: inline-flex; align-items: center; min-height: 54px; padding: 16px 24px; border: 2px solid #fff; color: #fff;
  font: 600 14px/18px var(--sora); text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity .4s var(--suave), transform .5s var(--suave); pointer-events: none; }
.catalogo-t .ver { min-height: 46px; padding: 12px 18px; }
@media (hover: hover) {
  .catalogo-t .fila:hover .foto::after, .catalogo-m .celda:hover .foto::after,
  .catalogo-t .fila:focus-visible .foto::after, .catalogo-m .celda:focus-visible .foto::after { opacity: .35; }
  .catalogo-t .fila:hover .ver, .catalogo-m .celda:hover .ver,
  .catalogo-t .fila:focus-visible .ver, .catalogo-m .celda:focus-visible .ver { opacity: 1; transform: translate(-50%, -50%); }
}
@media (hover: none) { .ver { display: none; } }
@media (prefers-reduced-motion: reduce) { .ver, .catalogo-t .fila .foto::after, .catalogo-m .celda .foto::after { transition: none; } }
/* La lista del móvil, cuadrada (Víctor, 2026-10-23): nombre y estilo, centrados en alto con la foto, y el nombre a un tamaño
   que cabe en una línea; el próximo artista, con el mismo tamaño que los nombres */
@media (max-width: 767px) {
  .catalogo-t .fila { grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .catalogo-t h2 { font-size: 22px; line-height: 1.2; }
  .catalogo-t .estilo { font-size: 15px; line-height: 1.4; margin-top: 6px; }
}

/* ------------------------------------------------------------------ «Próximamente» y cierre de Artistas
   Víctor, 2026-10-16: «¿Te gustaría ser el próximo artista?» siempre, centrada encima de una foto desenfocada. Nunca suelta:
   en la rejilla ocupa el hueco (número impar) o la fila entera (número par); en la lista, una fila más.
   El cierre de Artistas, una sola acción: Laura también produce el evento. */
.foto.vacio { position: relative; }
.foto.vacio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalogo-m .foto.vacio::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } /* que la pregunta se lea en el centro claro */
.catalogo-m .foto.vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; text-align: center; }
.foto.vacio .proximamente { position: relative; z-index: 1; font-weight: 300; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.3; max-width: 340px; }  /* más pequeña (Víctor, 2026-10-22: «demasiado grande») */
.catalogo-m .proximo.ancha { grid-column: 1 / -1; }
.catalogo-m .proximo.ancha .foto { width: min(1128px, 100%); aspect-ratio: 1128 / 420; }
.catalogo-m .proximo.ancha .proximamente { max-width: none; }
@media (max-width: 767px) {
  /* En el móvil, un banner horizontal, no una tarjeta alta (Víctor, 2026-10-22) */
  .catalogo-m .proximo .foto, .catalogo-m .proximo.ancha .foto { width: 100%; aspect-ratio: 16 / 10; min-height: 0; }
  .catalogo-m .proximo .foto.vacio { padding: 24px 28px; }
}
/* La única acción: Laura también produce el evento, con una línea que explica qué es */

/* El zoom, suave (Víctor, 2026-10-14: «que sea un cambio cómodo visual»). Va al final para que ninguna regla anterior lo pise. */
.tarjeta img, .catalogo-t .foto img, .catalogo-m .foto img, .otros img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.catalogo-t .fila:hover .foto img, .catalogo-m .celda:hover .foto img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta img, .catalogo-t .foto img, .catalogo-m .foto img, .otros img { transition: none; }
}

/* ------------------------------------------------------------------ Movimiento con sentido
   Víctor, 2026-10-14: «animaciones que sean necesarias y que ayuden a que la página fluya».
   Un solo gesto para todo (subir y aparecer), corto y con final suave. Nada se mueve con
   «reducir movimiento» ni sin JavaScript: la clase «animar» la pone la cabecera solo si se puede. */
:root { --suave: cubic-bezier(.2, .7, .2, 1); --cortina: cubic-bezier(.65, 0, .35, 1); }
@keyframes subir { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes descubrir { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes posar { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* 1. Al abrir la página, la portada se monta: el titular línea a línea y después la imagen */
.animar .entrada h1 span, .animar .entrada .lema,
.animar .escucha h1, .animar .escucha .linea, .animar .canciones, .animar .acciones { animation: subir .9s var(--suave) both; }
.animar .entrada h1 span:nth-child(2) { animation-delay: .12s; }
.animar .entrada .lema { animation-delay: .4s; }
.animar .escenario svg { animation: descubrir 1.3s var(--cortina) .3s both; }
.animar .escucha .disco-caja { animation: posar 1.1s var(--suave) both; }
.animar .escucha h1 { animation-delay: .2s; }
.animar .escucha .linea { animation-delay: .3s; }
.animar .canciones { animation-delay: .4s; }
.animar .acciones { animation-delay: .5s; }

/* 2. Al bajar, suben y aparecen uno detrás de otro (el retraso lo pone web.js). Solo lo que cuenta: títulos, filas de servicios,
   tarjetas, fotos y cierres; los rótulos, los párrafos sueltos y los botones ya están ahí (Víctor, 2026-10-19: efectos más sobrios).
   Unos 0,7 s y poco recorrido: se nota sin hacer esperar al que baja rápido */
.sitio { display: inline-block; }
.animar :is(.etiqueta, .cabecera-t h1, .cabecera-m h1, .cabecera h1, .servicios-g .fila, .servicios-r .lista > div, .bienestar h2, .tres > li,
  .cierre-dos .izquierda, .cierre-dos .derecha, .historia blockquote, .galeria img) {
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .75s var(--suave); }
.animar [data-entra] > * { opacity: 0; transform: translateY(40px); transition: opacity .65s ease, transform .85s var(--suave); }
.animar :is(.etiqueta, .cabecera-t h1, .cabecera-m h1, .cabecera h1, .servicios-g .fila, .servicios-r .lista > div, .bienestar h2, .tres > li,
  .cierre-dos .izquierda, .cierre-dos .derecha, .historia blockquote, .galeria img,
  [data-entra] > *).dentro { opacity: 1; transform: none; }

/* 3. Las fotos grandes se descubren de abajo arriba, con un ligero acercamiento.
   El recorte va en la foto, no en su hueco: así el navegador ve el hueco en pantalla y lo activa. */
.animar .servicios-r .foto img { clip-path: inset(100% 0 0 0); transform: scale(1.05);
  transition: clip-path .7s var(--cortina), transform 1s var(--suave); }  /* empieza en cuanto asoma (web.js) y dura 0,7 s */
.animar .servicios-r .foto.dentro img { clip-path: inset(0 0 0 0); transform: none; }
/* Las fotos anchas (la de la mano, el line-up) se descubren al compás del scroll: cuanto más bajas, más se ve (Víctor, 2026-10-22).
   El recorte y el acercamiento los pone web.js en cada fotograma; sin transición, para que vaya pegado al dedo o a la rueda */
.animar .foto-ancha img { clip-path: inset(100% 0 0 0); transform: scale(1.05); transition: none; will-change: clip-path, transform; }

/* 4. El menú acompaña: se esconde al bajar y vuelve al subir */
.menu { position: sticky; top: 0; transition: transform .45s var(--suave); }
.menu.escondido { transform: translateY(-100%); }

/* 5. Entre páginas, un fundido corto en vez de un salto */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .menu { transition: none; }
}


/* DaSing empieza como Artistas: misma cabecera y las fotos a la misma altura que las del catálogo
   (Víctor, 2026-10-17: «que al haber dos páginas no se note ese salto»). En móvil se queda como está. */
@media (min-width: 768px) { .tras-cabecera { padding-top: min(40px, 4svh); } }

/* «Escríbenos» debajo de la pregunta del próximo artista, dentro de la tarjeta (Víctor, 2026-10-17). La foto, quieta: sin zoom al pasar el ratón */
.catalogo-t .proximo .foto img, .catalogo-m .proximo .foto img, .catalogo-t li.proximo:hover .foto img, .catalogo-m li.proximo:hover .foto img { transform: none; transition: none; }
.foto.vacio .boton { position: relative; z-index: 1; margin-top: 20px; min-height: 42px; padding: 10px 22px; }  /* el botón compacto, como «Menú» */
.catalogo-t .proximo .textos .boton { margin-top: 16px; }

/* Scroll suave con Lenis (2026-10-17): sus reglas básicas, y fuera el «smooth» del navegador mientras manda Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Prueba de pie (Laura, 2026-10-17): «Are you in?», con el «IN» hecho con las letras del logo. Pie 2 en el selector de prueba.
   El «IN» mide lo mismo que las mayúsculas de Sora y se apoya en la misma línea. */
html:not([data-f="2"]) .solo-f2 { display: none; }
.are-you-in { display: flex; justify-content: center; align-items: baseline; gap: .22em; flex-wrap: nowrap; white-space: nowrap;
  font-weight: 400; font-size: clamp(32px, 9.7vw, 140px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
  padding: var(--aire) 0 calc(var(--aire) * .75); }
.are-you-in .in { height: .73em; width: auto; flex: none; } /* la altura de las mayúsculas de Sora, medida */
.are-you-in span:last-child { margin-left: -.14em; }
@media (max-width: 767px) { .are-you-in { padding: 64px 0 40px; } }

/* La tarjeta del artista reacciona al ratón solo encima de ella (Víctor, 2026-10-17: «estoy lejos de la card y detecta alrededor;
   le quita credibilidad»). El enlace se ciñe a la foto y su texto, no a toda la fila ni a toda la columna. */
.catalogo-m .celda { width: min(460px, 100%); margin-inline: auto; }
/* La tarjeta del próximo artista a lo ancho no se ciñe a 460 px (se quedaba estrecha y la pregunta se salía, 2026-10-17),
   y en ninguna forma el texto puede salirse de la foto: si no cabe, la tarjeta crece */
.catalogo-m .proximo.ancha .celda { width: auto; }
.catalogo-m .foto.vacio { min-height: min-content; padding-top: 32px; padding-bottom: 32px; }
/* El botón del cierre de Artistas, en una línea aunque el titular sea largo (2026-10-17) */
@media (min-width: 768px) {
  .catalogo-t .fila { width: fit-content; max-width: 100%; grid-template-columns: 240px auto; }
}

/* «Ver todos los artistas», en medio, bajo las tarjetas (Víctor, 2026-10-17); también en «También en DaSing» */
.bloque-tarjetas .al-final, .otros .al-final { margin-left: auto; margin-right: auto; }
/* Tarjetas en escalera: con el scroll, cada una sube un poco después que la anterior (lo mueve web.js) */
.animar [data-escalera] > li { will-change: transform, opacity; }

/* Barra fija del mismo color que la sección de debajo (Víctor, 2026-10-17: el contraste daba «mucho cambio de luz»):
   sobre blanco, blanca con letras negras; sobre negro, negra con letras blancas. El cambio es al momento, justo cuando el borde
   de la sección pasa por la barra, así se lee como si la barra fuera parte de la sección y no parpadea. */
html .menu.sobre-blanco { --fondo: #fff; --tinta: #000; background: #fff; color: #000; }
html .menu.sobre-negro { --fondo: #000; --tinta: #fff; background: #000; color: #fff; }
/* El cambio de color de la barra, con un fundido largo y no de golpe (Víctor, 2026-10-17: «más suave, no tan brusco»):
   el fondo, las letras, el logo y el botón «Contacto» cambian a la vez, en algo menos de un segundo */
html .menu { transition: transform .45s var(--suave), background-color .9s var(--suave), color .9s var(--suave); }
html .menu a, html .menu .logo, html .menu .boton { transition: background-color .9s var(--suave), color .9s var(--suave), border-color .9s var(--suave); }
@media (prefers-reduced-motion: reduce) { html .menu, html .menu a, html .menu .logo, html .menu .boton { transition: none; } }

/* ------------------------------------------------------------------ «Qué incluye» (Víctor, 2026-10-17)
   En la Home, cada servicio abre su detalle sin cambiar de página. Versión 1: la foto de fondo pasa a la del servicio y el
   detalle se abre bajo su frase. Versión 2: la foto de al lado pasa a la del servicio y el detalle sale encima, sobre un velo. */
.incluye { --tinta: #fff; --fondo: #000; color: #fff; }
.incluye ul { list-style: none; }
.incluye li { font-size: 16px; line-height: 1.5; }
.incluye li + li { margin-top: 6px; }
.titulo-incluye { font-weight: 300; font-size: 24px; line-height: 1.2; }
.boton[data-incluye] { transition: background-color .5s var(--suave), color .5s var(--suave); }
.boton[data-incluye][aria-expanded="true"] { background: var(--tinta); color: var(--fondo); }
/* Versión 1: el detalle se despliega bajo la frase (la fila crece poco a poco) y la foto de fondo se funde con la del servicio */
.servicios-g .fondo img { position: absolute; inset: 0; }
.servicios-g .fondo .fondo-servicio { opacity: 0; transition: opacity 1.2s var(--suave); }
.servicios-g[data-activo="booking"] .fondo-booking, .servicios-g[data-activo="management"] .fondo-management,
.servicios-g[data-activo="produccion"] .fondo-produccion { opacity: 1; }
.servicios-g .incluye .titulo-incluye { font-size: 22px; }
.servicios-g .incluye .dentro { display: flex; flex-direction: column; gap: 12px; }
.servicios-g .incluye .boton { margin-top: 8px; }
/* En escritorio, el detalle sale siempre en el mismo hueco, centrado entre los nombres y los botones, sobre la foto y con un velo.
   Nada se desplaza bajo el cursor al pasar de un servicio a otro: los nombres grandes solo se reducen (transform, sin mover las filas)
   para dejarle sitio, y los de los otros servicios se atenúan (2026-10-17) */
@media (min-width: 1024px) {
  .servicios-g .filas { position: relative; }
  .servicios-g .fila h3 { transform-origin: left center; transition: transform .8s var(--suave), opacity .6s var(--suave); }
  .servicios-g[data-activo] .fila h3 { transform: scale(.62); opacity: .2; }
  .servicios-g[data-activo="booking"] .fila-booking h3, .servicios-g[data-activo="management"] .fila-management h3,
  .servicios-g[data-activo="produccion"] .fila-produccion h3 { opacity: 1; }
  .servicios-g .incluye { position: absolute; top: 50%; right: calc(340px + var(--medianil)); z-index: 2; width: 380px;
    padding: 28px 32px; text-align: left; background: rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 12px));
    transition: opacity .5s var(--suave), transform .6s var(--suave), visibility 0s linear .6s; }
  .servicios-g .incluye.abierto { opacity: 1; visibility: visible; transform: translateY(-50%);
    transition: opacity .7s var(--suave), transform .8s var(--suave), visibility 0s; }
  .servicios-g .incluye .dentro { align-items: flex-start; }
}
/* En tableta y móvil (se toca, no se pasa el ratón), el detalle se despliega poco a poco bajo la frase.
   Toda la atención en lo que se abre (Víctor, 2026-10-22: «que no se manche el texto con los textos de alrededor»):
   el detalle va sobre negro liso, no sobre la foto; los otros servicios se atenúan; y el texto aparece cuando el hueco ya se ha abierto */
@media (max-width: 1023px) {
  .servicios-g .incluye { display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows .7s var(--suave), opacity .3s var(--suave); }
  .servicios-g .incluye.abierto { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .7s var(--suave), opacity .5s var(--suave) .45s; }
  .servicios-g .incluye .dentro { min-height: 0; overflow: hidden; align-items: flex-start; }
  .servicios-g .incluye ul { margin: 0; }
  .servicios-g .incluye > .dentro > * { position: relative; }
  .servicios-g .incluye > .dentro { background: #000; padding: 0 20px; margin-top: 20px; }
  .servicios-g .incluye.abierto > .dentro { padding: 20px; }
  .servicios-g .incluye .titulo-incluye { margin-top: 0; }
  /* Se atenúa el contenido de las filas, no la fila: la fila ya la mueve el efecto de entrada */
  .servicios-g .fila > *, .servicios-r .lista > div > * { transition: opacity .5s var(--suave); }
  .servicios-g[data-activo] .fila > *, .servicios-r[data-activo] .lista > div > * { opacity: .2; }
  .servicios-g[data-activo="booking"] .fila-booking > *, .servicios-g[data-activo="management"] .fila-management > *,
  .servicios-g[data-activo="produccion"] .fila-produccion > *,
  .servicios-r[data-activo="booking"] .lista > div:has([data-incluye="booking"]) > *,
  .servicios-r[data-activo="management"] .lista > div:has([data-incluye="management"]) > *,
  .servicios-r[data-activo="produccion"] .lista > div:has([data-incluye="produccion"]) > * { opacity: 1; }
}
/* Versión 2: la foto de al lado se funde con la del servicio y el detalle aparece encima, sobre un velo */
.servicios-r .foto { position: relative; }
.servicios-r .foto .foto-servicio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--suave); }
.servicios-r[data-activo="booking"] .foto-booking, .servicios-r[data-activo="management"] .foto-management,
.servicios-r[data-activo="produccion"] .foto-produccion { opacity: 1; }
.servicios-r .incluye { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px; background: rgba(0, 0, 0, .72); opacity: 0; visibility: hidden;
  transition: opacity .6s var(--suave), visibility 0s linear .6s; }
.servicios-r .incluye.abierto { opacity: 1; visibility: visible; transition: opacity .8s var(--suave), visibility 0s; }
.servicios-r .incluye .dentro { display: flex; flex-direction: column; gap: 12px; transform: translateY(16px); transition: transform .8s var(--suave); }
.servicios-r .incluye.abierto .dentro { transform: none; }
.servicios-r .incluye .boton { align-self: flex-start; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .servicios-g .incluye, .servicios-g .fila h3, .servicios-r .incluye, .servicios-r .incluye .dentro, .boton[data-incluye],
  .servicios-g .fondo .fondo-servicio, .servicios-r .foto .foto-servicio { transition: none; }
}

/* ------------------------------------------------------------------ Bienestar en DaSing (2026-10-17)
   El mismo bienestar que en Inicio, con otra composición: la foto en vertical a la izquierda, a toda la altura; a la derecha,
   el titular arriba y el texto abajo. Víctor la eligió entre tres pruebas. */
.bienestar-d { padding-top: var(--aire); padding-bottom: var(--aire); }
.bienestar-d .rejilla { grid-template-rows: auto 1fr auto; }
.bienestar-d .foto { grid-column: 1 / span 5; grid-row: 1 / 4; height: min(640px, calc(100svh - 2 * var(--aire))); overflow: hidden; }
.bienestar-d .foto img { width: 100%; height: 100%; object-fit: cover; }  /* los gatitos, centrados (2026-10-26) */
.bienestar-d .rotulo, .bienestar-d h2, .bienestar-d .texto { grid-column: 7 / -1; }
.bienestar-d .rotulo { font-weight: 600; font-size: 16px; line-height: 1.3; }
.bienestar-d h2 { grid-row: 2; font-weight: 300; font-size: clamp(40px, 4.44vw, 64px); line-height: 1.08; margin-top: 24px; }
.bienestar-d h2 span { display: block; }
.bienestar-d .texto { grid-row: 3; align-self: end; max-width: 560px; }
.bienestar-d .texto p { font-size: 18px; line-height: 1.6; }
.bienestar-d .texto .boton { margin-top: 32px; }
@media (max-width: 767px) {
  .bienestar-d .rejilla { display: flex; flex-direction: column; }
  .bienestar-d .foto { order: 3; height: auto; margin-top: 24px; }
  .bienestar-d .foto img { aspect-ratio: 16 / 9; height: auto; }
  .bienestar-d .rotulo { order: 1; }
  .bienestar-d h2 { order: 2; font-size: 34px; margin-top: 16px; }
  .bienestar-d h2 span { display: block; text-wrap: balance; }  /* cada frase en su línea (2026-10-27: cortaba «Por» al final) */
  .bienestar-d .texto { order: 4; margin-top: 24px; }
  .bienestar-d .texto p { font-size: 17px; }
  .bienestar-d .texto .boton { margin-top: 24px; }
}

/* ------------------------------------------------------------------ Teléfono, correo e Instagram: las letras dan la vuelta al pasar el ratón (2026-10-17) */
.datos .letras { display: inline-flex; }
.datos .l { display: inline-block; height: 1.4em; overflow: hidden; vertical-align: top; }
.datos .l > span { display: block; height: 1.4em; transition: transform .45s var(--suave); transition-delay: calc(var(--i) * 18ms); }
.datos a:hover .l > span, .datos a:focus-visible .l > span { transform: translateY(-100%); }

/* El lema «Monta. Crea. Produce.» bajo el titular de la portada, algo más grande que la línea que había (2026-10-17) */
.entrada .lema { font-size: 20px; line-height: 1.4; letter-spacing: .02em; }
@media (max-width: 767px) { .entrada .lema { font-size: 17px; } }
/* «¿Eres artista?» encima de «Cuéntanos tu música» en el bienestar de DaSing */
.bienestar-d .a-quien { font-weight: 600; font-size: 16px; line-height: 1.3; margin-top: 32px; }
.bienestar-d .a-quien + .boton { margin-top: 12px; }

/* El pie se estira hacia arriba al seguir bajando al final de la página, con las esquinas redondeándose (2026-10-17).
   Lo mueve web.js con --tiron; es una capa del color del pie, así que nada se recoloca debajo */
.pie { position: relative; --tiron: 0px; }
.pie::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--tiron); background: inherit;
  border-radius: min(calc(var(--tiron) * .6), 72px) min(calc(var(--tiron) * .6), 72px) 0 0; pointer-events: none; }

.entrada .lema p { font-size: inherit; line-height: inherit; }

/* Pie 2, «Are you in?»: es o «¿Hablamos?» o «Are you in?» (Víctor, 2026-10-19). Con el pie 2 no sale el «¿Hablamos?»: el pie hace de
   cierre con la pregunta, «Escríbenos» y teléfono, correo e Instagram. Donde estaba el «¿Hablamos?», el pie toma su color
   (f2-negra, f2-blanca) para que blanco y negro sigan alternando; en la barra de abajo no se repite Instagram */
html[data-f="2"] .solo-f1, html[data-f="2"] .pie .enlaces .red { display: none !important; }
html[data-f="2"] .pie.f2-negra { --fondo: #000; --tinta: #fff; background: #000; color: #fff; }
html[data-f="2"] .pie.f2-blanca { --fondo: #fff; --tinta: #000; background: #fff; color: #000; }
html[data-f="2"] .pie .are-you-in { padding-bottom: 16px; }
.contacto-pie { text-align: center; padding-bottom: calc(var(--aire) * .75); }
.contacto-pie .acciones { display: flex; justify-content: center; }
.contacto-pie .datos { justify-content: center; }
/* En Contacto, el pie 2 es la página entera: la pregunta en el centro y la barra abajo */
html[data-f="2"] .contacto-sola + .pie { flex: 1; display: flex; flex-direction: column; }
html[data-f="2"] .contacto-sola + .pie > .are-you-in { margin-top: auto; }
html[data-f="2"] .contacto-sola + .pie > .caja { margin-top: auto; width: 100%; }
@media (max-width: 767px) { html[data-f="2"] .pie .are-you-in { padding-bottom: 12px; } .contacto-pie { padding-bottom: 40px; } }
/* En el móvil, «Escríbenos» del pie a su tamaño y centrado, no a todo el ancho: estirado parecía que cortaba el pie
   (Víctor, 2026-10-22). Solo aquí: las acciones de la ficha siguen una debajo de otra y a lo ancho */
@media (max-width: 767px) { .contacto-pie .acciones { flex-direction: row; align-items: center; } }
/* Teléfono, correo e Instagram: en el ordenador, escritos; en el pie del móvil, tres iconos en fila (Víctor, 2026-10-22).
   Cada uno con una zona de toque de 46 px; el nombre va en aria-label */
.datos .icono { display: none; }
@media (max-width: 767px) {
  .contacto-pie .datos { flex-direction: row; justify-content: center; column-gap: 24px; margin-top: 24px; }
  .contacto-pie .datos > a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; }
  .contacto-pie .datos .icono { display: block; }
  .contacto-pie .datos .dato { display: none; }
}

/* Portada 1 en el móvil: el titular y el arco del «DA», juntos y centrados en la pantalla, con una separación corta y fija.
   Antes el titular ocupaba todo el sitio libre y quedaba mucho negro entre los textos y el «DA» (Víctor, 2026-10-22) */
@media (max-width: 767px) {
  .entrada > .caja { justify-content: center; }
  .entrada .arriba { flex: 0 0 auto; }
  .entrada h1 { font-size: clamp(30px, 9.3vw, 44px); }  /* 9,3: «con escenarios» cabe en una línea desde 330 px (2026-10-26) */
  .entrada .escenario { margin-top: 40px; }
}

/* Portátiles de pantalla baja (1366 × 657, 1536 × 730, 1280 × 720; revisión antes de publicar, 2026-10-27): «Qué hacemos»
   y el bienestar de DaSing se pasaban de la pantalla entre 12 y 50 px. Menos aire arriba y abajo, y las frases de los
   servicios con más ancho para que ocupen una línea menos. En 1440 × 900 no cambia nada. */
@media (min-width: 768px) and (max-height: 760px) {
  .servicios-r { padding-top: 32px; padding-bottom: 32px; }
  .servicios-r .bloques { margin-top: 24px; }
  .servicios-r .lista p { max-width: 560px; }
  .bienestar-d { padding-top: 32px; padding-bottom: 32px; }
}