/* Tema oscuro del portfolio de Pablo Gens.
   Todo el aspecto vive aquí y en templates/: se puede cambiar sin tocar Python. */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans.fa41c43a3d8e.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-400.e1ed461ac183.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-500.c4598219c4b8.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #121111;
  --bg-2: #1a1818;
  --fg: #ebeaea;
  --muted: #a7a0a0;
  --line: #403b3b;
  --accent: #ff442b;
  --hero-bg: #ddd7dc;   /* fondo de la foto de portada (la silueta va recortada sobre él) */
  --radio: 18px;
  --cabecera-alto: 96px;   /* alto de la barra de la web, a cualquier ancho (la tienda pone el suyo en tienda.css) */
  --ajuste-alto: 1.7rem;   /* altura de los controles de la cabecera: el botón de idioma y el círculo de modo día/noche (diámetro) */
  --margen: clamp(1rem, 4vw, 3rem);
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent); }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #121111; }
.sr, .saltar:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar:focus { position: fixed; top: .5rem; left: .5rem; z-index: 200; background: var(--accent); color: #121111; padding: .5rem 1rem; border-radius: 99px; }

/* ---------- Barra de la tienda (su marca la usa también el panel); la de la web es .barra, más abajo ---------- */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--cabecera-alto); padding: 0 var(--margen); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .95rem; color: #fff; transition: color .3s; }
.cabecera a { text-decoration: none; color: inherit; transition: color .2s; }
.cabecera__nav a:hover, .cabecera__nav a:focus-visible { color: var(--accent); }
.cabecera__marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; white-space: nowrap; }
.cabecera__marca { font-size: 1.05rem; }
/* Marca con rótulo (tienda: «Tienda», panel: «Panel»): el rótulo va en rojo justo debajo de «Pablo Gens»; las dos líneas se centran con el eje horizontal del logo. El rótulo es más corto que el nombre, así que no cambia el ancho de la marca. */
.cabecera__marca span { line-height: 1.15; }
.cabecera__marca small { display: block; font: inherit; font-weight: 600; line-height: inherit; color: var(--accent); }
.cabecera__marca .emblema { height: 42px; width: auto; }
@media (min-width: 900px) {
  .cabecera__marca { font-size: 1.35rem; gap: .85rem; }
  .cabecera__marca .emblema { height: 64px; }
}
.cabecera__nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.cabecera__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .35em; }
@media (min-width: 761px) {
  .cabecera { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .cabecera__marca, .cabecera__nav > a, .cabecera__nav > .idiomas, .cabecera__nav > .cabecera__ajustes { justify-self: center; }
  .cabecera__nav { display: contents; }
}
/* Selector de idioma: sin JavaScript se ven todos en fila; con JavaScript solo el actual y, al pulsarlo, se despliega el resto hacia abajo */
.idiomas { position: relative; display: flex; align-items: center; gap: .25rem; font: 500 .8rem var(--mono); }
.idiomas__lista { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.idiomas__lista a { padding: .15rem .45rem; border-radius: 99px; border: 1px solid transparent; }
.idiomas__lista a[aria-current="true"] { border-color: currentColor; }
.idiomas__lista b { font-weight: 500; } .idiomas__lista span { display: none; }
.idiomas__actual { display: none; }
.js .idiomas__actual { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--ajuste-alto); gap: .4rem; padding: 0 .6rem 0 .7rem; border: 1px solid currentColor; border-radius: 99px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: color .2s; }
.js .idiomas__actual:hover, .js .idiomas__actual:focus-visible, .js .idiomas.abierto .idiomas__actual { color: var(--accent); outline: none; }
.idiomas__actual svg { width: 10px; height: 10px; transition: transform .3s cubic-bezier(.2, .7, .1, 1); }
.idiomas.abierto .idiomas__actual svg { transform: rotate(180deg); }
.js .idiomas__lista { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 60; flex-direction: column; gap: 0; min-width: 11rem; padding: .4rem; background: var(--bg-2); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .1, 1), visibility 0s linear .3s; }
.js .idiomas.abierto .idiomas__lista { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .1, 1), visibility 0s; }
.js .idiomas__activo { display: none; }
.js .idiomas__lista a { display: flex; align-items: baseline; gap: .7rem; padding: .55rem .7rem; border: 0; border-radius: 9px; }
.js .idiomas__lista a:hover, .js .idiomas__lista a:focus-visible { background: rgba(255, 255, 255, .07); color: var(--accent); outline: none; }
.js .idiomas__lista span { display: inline; font-family: var(--sans); font-size: .95rem; color: inherit; }
/* Botón del menú (dos rayitas que pasan a ser una X), en la barra de la web y en la de la tienda; solo por debajo de 761 px */
:is(.cabecera__boton, .barra__boton) { display: none; background: none; border: 0; padding: .75rem; position: relative; width: 48px; height: 48px; }
:is(.cabecera__boton, .barra__boton) i { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .3s; }
:is(.cabecera__boton, .barra__boton) i:nth-of-type(1) { top: 19px; } :is(.cabecera__boton, .barra__boton) i:nth-of-type(2) { top: 27px; }
.menu-abierto :is(.cabecera__boton, .barra__boton) i:nth-of-type(1) { transform: translateY(4px) rotate(45deg); }
.menu-abierto :is(.cabecera__boton, .barra__boton) i:nth-of-type(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 760px) {
  :is(.cabecera__boton, .barra__boton) { display: block; }
  /* Sin JavaScript (arranque.js no ha puesto .js): el enlace #menu sustituye al botón y :target abre el menú. */
  .js :is(.cabecera__boton--sinjs, .barra__boton--sinjs), html:not(.js) :is(.cabecera__boton, .barra__boton)[data-menu-boton] { display: none; }
  html:not(.js) #menu:target { transform: none; visibility: visible; }
  /* El menú baja desde arriba del todo; en pantallas bajas o con mucho zoom se desplaza dentro de sí mismo (la tienda lo pone bajo su barra, en tienda.css). */
  :is(.cabecera__nav, .barra__nav) { position: fixed; inset: 0 0 auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: calc(var(--cabecera-alto) + 2rem) var(--margen) 2.5rem;
    max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-bottom: 1px solid var(--line); font-size: 1.6rem; transform: translateY(-110%); visibility: hidden; transition: transform .35s, visibility .35s; }
  /* visibility sin espera al abrir: si no, el menú sigue «oculto» un instante y no puede recibir el foco. */
  .menu-abierto :is(.cabecera__nav, .barra__nav) { transform: none; visibility: visible; transition: transform .35s, visibility 0s; }
  .menu-abierto .cabecera { color: var(--fg); }
  .js .idiomas { flex-direction: column; align-items: flex-start; }
  .js .idiomas__lista { position: static; box-shadow: none; background: transparent; border: 0; padding: 0; min-width: 0; max-height: 0; overflow: hidden; transform: none; transition: max-height .35s ease, opacity .25s ease, visibility 0s linear .35s; }
  .js .idiomas.abierto .idiomas__lista { max-height: 20rem; transition: max-height .35s ease, opacity .25s ease, visibility 0s; }
  .js .idiomas__lista a { font-size: 1.1rem; }
}

/* ---------- Barra de la web ---------- */
/* Siempre transparente y en negativo sobre lo que tenga detrás (blanco con mix-blend-mode: difference, como el titular del hero).
   Cinco piezas que no cambian de tamaño con el ancho (la marca, Proyectos, Bio, Contacto y el grupo idioma + día/noche), repartidas
   a la misma distancia entre los bordes del contenido (donde empiezan y acaban los textos y el carrusel). Por debajo de 761 px
   los enlaces y el grupo pasan al menú de las dos rayitas. En la portada aparece con un fundido tras la entrada del hero. */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--cabecera-alto); padding: 0 max(var(--margen), calc((100% - 1200px) / 2 + var(--margen)));
  display: flex; align-items: center; justify-content: space-between; font-size: .95rem; color: #fff; mix-blend-mode: difference; }
.barra a { color: inherit; text-decoration: none; }
.barra__marca { display: inline-flex; align-items: center; gap: .85rem; font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.barra__marca .emblema { flex: none; height: 64px; width: auto; }
.barra__nav > a[aria-current="page"], .barra__rojo.actual { text-decoration: underline; text-underline-offset: .35em; }
/* Enlace en rojo al pasar el ratón o con el teclado, como los del pie, sin tocar nada más de la barra. En negativo el rojo saldría
   de otro color según el fondo, así que principal.js pinta encima una copia roja fuera de la barra (.barra__rojo) y, mientras,
   el enlace se vuelve transparente. */
.barra__nav > a.en-rojo { color: transparent; }
.barra__rojo { position: fixed; z-index: 51; pointer-events: none; white-space: nowrap; color: var(--accent); }
/* En el idioma y el día/noche, un velo claro al pasar el ratón */
.barra :is(.idiomas__actual, .tema-boton):is(:hover, :focus-visible) { color: inherit; background: rgba(255, 255, 255, .2); }
/* Con un desplegable abierto (idiomas o el menú) el negativo se pausa, porque su fondo también se mezclaría con lo de detrás.
   Mientras, la barra toma el color del texto; en la portada, sobre la foto clara, oscuro (principal.js pone .barra--oscuro al pasarla). */
.menu-abierto .barra, .barra:has(.idiomas.abierto) { mix-blend-mode: normal; color: var(--fg); }
.es-inicio:not(.menu-abierto) .barra:not(.barra--oscuro):has(.idiomas.abierto) { color: #121111; }
@media (min-width: 761px) { .barra__nav { display: contents; } }
@media (max-width: 760px) { .barra__marca { position: relative; z-index: 1; } }   /* por encima del menú, que baja desde arriba del todo */

/* ---------- Tipografía y utilidades ---------- */
.etiqueta { font: 500 clamp(1.35rem, 2.4vw, 2.25rem)/1.15 var(--mono); color: var(--accent); letter-spacing: -.01em; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); max-width: 28ch; }
.titular { font-size: clamp(2.6rem, 9vw, 6.5rem); line-height: .98; letter-spacing: -.03em; font-weight: 600; }
.texto { max-width: 68ch; color: var(--fg); }
.texto > * + * { margin-top: 1.1em; }
.texto h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; margin-top: 2.2em; line-height: 1.15; }
.texto h3 { font-size: 1.2rem; margin-top: 1.8em; }
.texto ul { list-style: disc; padding-left: 1.25em; } .texto ol { list-style: decimal; padding-left: 1.25em; }
.texto li + li { margin-top: .35em; }
.texto--largo { font-size: 1.125rem; }
.texto .pendiente { color: var(--accent); font-family: var(--mono); font-size: .9em; }
.centro { text-align: center; margin-top: 3rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem; border-radius: 99px; background: var(--fg); color: #121111; border: 0; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.boton:hover { background: var(--accent); color: #121111; }
.boton--claro { background: transparent; color: var(--fg); border: 1px solid var(--line); margin-top: 2rem; }
.boton--claro:hover { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ---------- Portada ---------- */
/* El fondo imita el de la foto (más oscuro arriba y algo abajo), así la silueta recortada no deja ver el borde a ningún ancho. */
.hero { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; background: var(--hero-bg) linear-gradient(#d4ced2, #dcd6da 25%, #ded8df 50%, #dfd7de 75%, #d9d3da); color: #121111; isolation: isolate; z-index: 0; }
.hero__caja { position: absolute; top: clamp(2.5rem, 3vw, 3rem); bottom: 0; left: 50%; aspect-ratio: 1080 / 2232; transform: translateX(-50%) translateY(calc(var(--hero-progreso, 0) * -1rem)); z-index: 2; }   /* arriba, al menos a 40 px: la cabeza no toca la barra */
.hero__foto, .hero__pixeles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__foto { object-fit: cover; }
.hero__pixeles { pointer-events: none; }
.hero__titular { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(5.5rem, 21vw, 14.25rem); line-height: 1; letter-spacing: -.035em; font-weight: 600; white-space: nowrap; color: #fff; mix-blend-mode: exclusion; pointer-events: none; overflow: hidden; z-index: 3; }
.hero__zoom { display: block; }   /* la entrada encoge esto y no el titular, que recorta en los bordes de la pantalla */
.marquesina { position: relative; display: inline-flex; animation: marquesina 38s linear infinite; will-change: transform; }
.marquesina > span { padding-right: .2em; }
/* Otra ristra por delante de la primera P, fuera de la pantalla por la izquierda: con el nombre aún pequeño en la entrada, llena ese lado. */
.marquesina__antes { position: absolute; top: 0; right: 100%; }
@keyframes marquesina { to { transform: translateX(-50%); } }
/* Textos de abajo del hero: blancos en negativo sobre lo que tengan detrás (como el titular), así se leen sobre el fondo claro y sobre la
   ropa oscura a cualquier ancho. Cada uno lleva en sí mismo el negativo, su capa (z-index) y su entrada: en Instagram, el enlace y no la
   lista, para que su estado al pasar el ratón sea suyo: rojo, como todos los enlaces (el rojo, en negativo, saldría azul claro). */
.hero__redes, .hero__roles { position: absolute; bottom: clamp(1.25rem, 4vw, 2.5rem); font-weight: 600; }
.hero__roles, .hero__redes a, .hero__credito { z-index: 3; color: #fff; mix-blend-mode: exclusion; }
.hero__redes { left: var(--margen); font: 500 .9rem var(--mono); }
.hero__redes a { position: relative; display: block; text-decoration: none; }   /* en bloque: la entrada lo mueve con transform */
.hero__redes a:is(:hover, :focus-visible) { color: var(--accent); mix-blend-mode: normal; }
.hero__instagram-icon { display: none; }
.hero__roles { right: var(--margen); bottom: calc(clamp(1.25rem, 4vw, 2.5rem) + 1.6rem); display: grid; text-align: right; font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; }
.hero__credito { font: 500 .9rem var(--mono); letter-spacing: normal; text-decoration: none; }
.hero__credito:is(:hover, :focus-visible) { color: var(--accent); mix-blend-mode: normal; }
.hero__credito--roles { position: absolute; right: var(--margen); bottom: clamp(1.25rem, 4vw, 2.5rem); }
/* Sin z-index ni fondo propios: así la imagen fija de «Servicios» (z-index -1) queda detrás de todo y solo se ve
   a través de esa sección; el resto de secciones tienen fondo opaco y la tapan. */
.sobre { position: relative; z-index: 1; box-shadow: 0 -30px 60px rgba(0, 0, 0, .35); }
.seccion { padding: clamp(4rem, 10vw, 8rem) max(var(--margen), calc((100% - 1200px) / 2 + var(--margen))); border-top: 1px solid var(--line); background: var(--bg); }
.sobre > .seccion:first-child { border-top: 0; }
.seccion--compacta { padding-block: clamp(3rem, 6vw, 5rem); }
.seccion--clara { --bg: #292626; --bg-2: #322e2e; --fg: #ebeaea; --muted: #b0a8a8; --line: #514a4a; }

/* Texto de presentación que se va encendiendo palabra a palabra */
.intro__texto { font-size: clamp(1.7rem, 4.6vw, 3.6rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; max-width: 24em; }
.intro__texto em { font-style: normal; color: var(--accent); }
/* Resaltado en color en los textos con formato (botón «Resaltar» de los editores y [[…]]): el mismo estilo que el de la presentación */
mark { background: none; color: var(--accent); }
.js .intro__texto .p { opacity: .16; transition: opacity .25s; }
.js .intro__texto .p.on { opacity: 1; }

/* Entrada de la portada (como la de la referencia): arranca en negro, la foto se aclara con un zoom que se aleja,
   después el nombre crece hasta su sitio y al final aparecen la barra y los textos. Solo con JavaScript y sin «reducir movimiento». */
@media (prefers-reduced-motion: no-preference) {
  /* negro firme los primeros ~0,2 s y luego se va aclarando durante el resto */
  .js .hero::after { content: ""; position: absolute; inset: 0; z-index: 10; background: #000; pointer-events: none; animation: intro-negro 2s cubic-bezier(.4, 0, .3, 1) both; }
  /* el zoom de la foto arranca despacio y va cogiendo velocidad */
  .js .hero__caja { transform-origin: 50% 24%; animation: intro-caja 2.3s cubic-bezier(.55, .05, .25, 1) .2s both; }
  /* el nombre crece con calma */
  .js .hero__zoom { animation: intro-nombre 1.7s cubic-bezier(.3, .1, .2, 1) 1.7s both; }
  /* La marquesina espera a que termine la entrada para empezar desde la P. */
  .js .marquesina { animation-delay: 3.4s; }
  .js .hero__redes a, .js .hero__roles { animation: intro-aparece .9s ease-out 2.9s both; }
  .js .es-inicio .barra { animation: intro-opacidad .9s ease-out 2.8s both; }
}
@keyframes intro-negro { 0%, 10% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-caja { from { transform: translateX(-50%) translateY(calc(var(--hero-progreso, 0) * -1rem)) scale(1.75); } to { transform: translateX(-50%) translateY(calc(var(--hero-progreso, 0) * -1rem)) scale(1); } }
@keyframes intro-nombre { 0% { opacity: 0; transform: scale(.55); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes intro-aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-opacidad { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Servicios ---------- */
/* Imagen de fondo FIJA (técnica de «Repertorio en vivo» de Cuatrogatos): la imagen no se mueve, sube y baja el contenedor.
   Es una capa position:fixed real, no background-attachment:fixed, que falla en iOS. */
.fondo-fijo { position: fixed; inset: 0; z-index: -1; }
.fondo-fijo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.seccion--fondo { position: relative; isolation: isolate; background: none; clip-path: inset(0); }
.seccion--fondo::after { content: ""; position: absolute; inset: 0; background: rgba(18, 17, 17, .62); z-index: -1; }
.servicios { border-top: 1px solid var(--line); }
.servicio { display: grid; grid-template-columns: 4rem 1fr; gap: .25rem 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }   /* sin moverse al pasar el ratón */
.servicio__num { font: 500 .85rem var(--mono); color: var(--muted); padding-top: .6rem; }
.servicio__nombre { font-size: clamp(1.8rem, 5vw, 3.5rem); letter-spacing: -.03em; line-height: 1.05; font-weight: 600; }
.servicio__resumen { grid-column: 2; color: var(--muted); max-width: 52ch; margin-top: .5rem; }

.servicio__resumen p { margin: 0 0 .6em; }
.tarjeta__texto p { margin: 0 0 .5em; }
.testimonio blockquote p { margin: 0 0 .5em; }
.servicio__contenido h2, .servicio__contenido h3, .proy__texto h2, .proy__texto h3 { margin: 1em 0 .4em; line-height: 1.15; }
.servicio__contenido { grid-column: 2; max-width: 60ch; margin-top: 1.5rem; }
.servicio__contenido p { margin: 0 0 1em; }
.servicio__contenido ul { list-style: none; margin: 0 0 1em; padding: 0; border-top: 1px solid var(--line); }
.servicio__contenido li { padding: .7rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.servicio__contenido a { color: var(--accent); }
.al-c { text-align: center; } .al-d { text-align: right; } .al-j { text-align: justify; }
.servicio__contenido ol, .proy__texto ol, .texto ol { padding-left: 1.4rem; }
.servicio__contenido u, .proy__texto u, .texto u { text-underline-offset: .15em; }

/* Escritorio con JS: número grande, solo contorno, fijo a la izquierda; el contenido se desplaza a la derecha y,
   cuando el título del siguiente servicio llega a la altura del número, este gira y cambia. */
.srv__col { display: none; }
@media (min-width: 900px) {
  .js .srv { display: grid; grid-template-columns: 5fr 7fr; gap: 0 2rem; }
  .js .srv__col { display: block; }
  .js .srv__num { position: sticky; top: 9vh; perspective: 900px; line-height: 1; }
  .js .srv__cara { display: inline-block; font: 400 min(22vw, 40vh)/1 var(--mono); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 3.5px rgba(246, 244, 240, .95); paint-order: stroke fill; transform-origin: 50% 50%; backface-visibility: hidden; }
  .js .servicios { min-width: 0; border-top: 0; }
  .js .servicio { grid-template-columns: 1fr; min-height: 78vh; align-content: start; padding: 9vh 0 6vh; border-bottom: 0; }
  .js .servicio__num { display: none; }
  .js .servicio__nombre { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
  .js .servicio__resumen { grid-column: 1; font-size: 1.1rem; margin-top: 1rem; }
  .js .servicio__contenido { grid-column: 1; }
}

/* ---------- Proyectos destacados: tarjetas que se apilan al hacer scroll ---------- */
/* Estrecho (móvil): foto alta con año, título y etiquetas debajo; la descripción se oculta. */
.proy { display: block; }
.proy__tarjeta { position: sticky; top: calc(var(--cabecera-alto) + .5rem); height: calc(100svh - var(--cabecera-alto) - 1.25rem); max-height: 52rem; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .6rem; padding: .6rem; margin-bottom: 9svh; background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--radio) + 4px); color: inherit; text-decoration: none; transform-origin: 50% 0; will-change: transform; }
.proy__tarjeta:last-child { margin-bottom: 0; }
.proy__foto { border-radius: var(--radio); overflow: hidden; background: var(--bg-2); min-height: 0; }
.proy__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proy__info { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; background: var(--bg-2); border-radius: var(--radio); min-width: 0; }
.proy__anio { margin: 0; font: 500 .8rem var(--mono); }
.proy__titulo { margin: 0; font-size: clamp(1.35rem, 5.5vw, 1.9rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
.proy__titulo a { text-decoration: none; }
.proy__titulo a:hover { color: var(--accent); }
.proy__texto { display: none; color: var(--muted); font-size: .98rem; overflow: hidden; }
.proy__texto p { margin: 0 0 .8em; }
.proy__texto ul { margin: 0 0 .8em; padding-left: 1.1rem; }
.proy__etiquetas { list-style: none; margin: .35rem 0 0; padding: 0; color: var(--muted); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.proy__etiquetas li { padding: .25rem 0; }

/* Proyecto destacado: la foto queda detrás al empezar a leer el caso y se desvanece con el scroll. */
.proyecto-detalle { position: relative; --proyecto-progreso: 0; }
.proyecto-detalle__hero { position: sticky; top: 0; height: 100svh; min-height: 32rem; overflow: hidden; background: var(--bg); z-index: 0; }
.proyecto-detalle__hero { cursor: none; }
/* «Respetar el ancho»: la foto ocupa todo el ancho a su altura natural; solo se recorta lo justo del zoom del scroll. */
.proyecto-detalle__hero.proyecto-detalle__hero--ancho { height: auto; min-height: 0; }
.proyecto-detalle__hero--ancho img { display: block; height: auto; }
.proyecto-detalle__hero img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: calc(1 - var(--proyecto-progreso)); transform: scale(calc(1.12 - var(--proyecto-progreso) * .12)); transition: opacity .08s linear; }   /* arranca con zoom (1,12) y baja a 1: nunca deja ver los bordes; a la vez se blanquea hasta quedar solo el fondo de la página */
.proyecto-detalle__overview { position: relative; z-index: 1; min-height: 78svh; /* sin fondo: sube superpuesto a la foto, que se blanquea por debajo */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 9rem); align-content: center; padding: clamp(5rem, 12vw, 10rem) max(var(--margen), calc((100% - 1200px) / 2 + var(--margen))); }
.proyecto-detalle__overview h1 { margin: 0; font-size: clamp(3.2rem, 8vw, 8.5rem); line-height: .9; letter-spacing: -.06em; font-weight: 600; overflow-wrap: anywhere; }
.proyecto-detalle__texto { max-width: 30rem; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.28; }
.proyecto-detalle__texto .etiqueta { font-size: .9rem; margin-bottom: 1.5rem; }
.proyecto-detalle__texto p { margin: 0 0 1em; }
.proyecto-detalle__galeria { position: relative; z-index: 1; background: var(--bg); display: flex; flex-direction: column; gap: clamp(.375rem, 1.25vw, 1rem); }   /* hueco del color de la página entre una foto y la siguiente */
.proyecto-detalle__foto { --foto-progreso: .5; margin: 0; height: clamp(24rem, 64vw, 66rem); overflow: hidden; background: #0c0b0b; }
.proyecto-detalle__foto img { width: 100%; max-width: none; height: 100%; object-fit: cover; transform: scale(1.24) translateY(calc((var(--foto-progreso) - .5) * 16%)); will-change: transform; }
/* Ajuste de cada foto inferior (se elige en el panel). «recortar» es lo anterior: llena el marco con zoom.
   «ancho»: todo el ancho, sin zoom; el marco mide el 90 % de la altura de la foto (lo pone el JS en --marco-proporcion) y la foto se mueve ese 10 %.
   «entera»: foto completa a su altura natural, sin movimiento. Sin JS, «ancho» también se ve entera. */
.proyecto-detalle__foto.proyecto-detalle__foto--ancho, .proyecto-detalle__foto.proyecto-detalle__foto--entera { height: auto; }
.proyecto-detalle__foto--ancho img, .proyecto-detalle__foto--entera img { display: block; width: 100%; height: auto; transform: none; will-change: auto; }
.proyecto-detalle__foto--ancho[data-marco] { aspect-ratio: var(--marco-proporcion); }
.proyecto-detalle__foto--ancho[data-marco] img { transform: translateY(calc((var(--foto-progreso) - 1) * 10%)); will-change: transform; }

/* ---------- Índice de proyectos ---------- */
.proyectos-indice { padding-top: var(--cabecera-alto); }
.proyectos-scroll__fijo { padding: clamp(2rem, 5vw, 5rem) var(--margen); }
.proyectos-scroll__cabecera { margin-bottom: clamp(1.5rem, 3vw, 3rem); padding-left: max(0px, calc((100vw - 1200px) / 2)); }
.proyectos-scroll__cabecera .etiqueta { margin-bottom: .8rem; }
.proyectos-scroll__ventana { overflow-x: auto; scrollbar-width: thin; }
.proyectos-scroll__pista { display: flex; width: max-content; gap: clamp(1rem, 3vw, 3rem); padding-bottom: .75rem; }
.proyectos-scroll__tarjeta { flex: 0 0 min(82vw, 62rem); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr); overflow: hidden; min-height: clamp(23rem, 62vw, 48rem); border: 1px solid var(--line); border-radius: var(--radio); color: var(--fg); text-decoration: none; background: var(--bg-2); }
.proyectos-scroll__tarjeta img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.proyectos-scroll__tarjeta:hover img, .proyectos-scroll__tarjeta:focus-visible img { transform: scale(1.04); }
.proyectos-scroll__info { display: grid; align-content: start; gap: .75rem; padding: clamp(1.25rem, 2.5vw, 2.5rem); }
.proyectos-scroll__info small { font: .8rem var(--mono); }
.proyectos-scroll__info strong { font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.proyectos-scroll__descripcion { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.proyectos-scroll__descripcion p { margin: 0 0 .75em; }
.proyectos-scroll__descripcion p:last-child { margin-bottom: 0; }
.proyectos-scroll__etiquetas { display: none; }
.proyectos-indice__otros { min-height: 70svh; }
@media (min-width: 811px) {
  .proyectos-scroll__fijo { position: sticky; top: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100svh; overflow: hidden; }
  .proyectos-scroll__ventana { overflow: hidden; }
  .proyectos-scroll__pista { height: 100%; padding-bottom: 0; will-change: transform; }
  /* 75vw: en ventanas medianas el texto (mín. 17rem) dejaba la foto muy estrecha; la siguiente tarjeta sigue asomando. */
  .proyectos-scroll__tarjeta { flex-basis: min(75vw, 70rem); min-height: 0; height: 100%; }
}
@media (max-width: 810px) {
  .proyectos-scroll__fijo { padding: 2rem var(--margen) 0; }
  .proyectos-scroll__ventana { overflow: visible; }
  .proyectos-scroll__pista { display: block; width: auto; padding: 0; }
  .proyectos-scroll__tarjeta { position: sticky; top: calc(var(--cabecera-alto) + .5rem); height: calc(100svh - var(--cabecera-alto) - 1.25rem); max-height: 52rem; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: .6rem; padding: .6rem; margin-bottom: 9svh; border-radius: calc(var(--radio) + 4px); background: var(--bg); }
  .proyectos-scroll__tarjeta:last-child { margin-bottom: 0; }
  .proyectos-scroll__tarjeta img { min-height: 0; border-radius: var(--radio); }
  .proyectos-scroll__info { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border-radius: var(--radio); background: var(--bg-2); }
  .proyectos-scroll__info strong { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
  .proyectos-scroll__descripcion { display: none; }
  .proyectos-scroll__etiquetas { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: .35rem 0 0; padding: 0; color: var(--muted); font-size: .8rem; }
  .proyectos-scroll__etiquetas li { padding: .25rem 0; }
}
@media (min-width: 900px) {
  .proy__tarjeta { top: 12vh; height: min(74vh, 44rem); max-height: none; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-template-rows: none; gap: 1rem; padding: .75rem; margin-bottom: 12vh; }
  .proy__tarjeta:last-child { margin-bottom: 0; }
  .proy__info { height: 100%; overflow: hidden; gap: .75rem; padding: 1.25rem; }
  .proy__anio { font-size: .9rem; }
  .proy__titulo { font-size: clamp(1.8rem, 3.2vw, 3rem); }
  .proy__texto { display: block; }
  .proy__etiquetas { display: block; margin: auto 0 0; font-size: .85rem; }
  .proy__etiquetas li { padding: .45rem 0; border-top: 1px solid var(--line); }
}

/* ---------- ¿Hablamos? (llamada a la acción) ---------- */
.seccion--hablemos { padding-block: clamp(3.5rem, 9vw, 7rem); }
.hablemos { position: relative; display: grid; background: var(--bg-2); gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: calc(var(--radio) + 8px); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--fg); --mx: 50%; --my: 50%; transition: border-color .4s, transform .5s cubic-bezier(.2, .7, .1, 1); }
.seccion--clara .hablemos { --bg-2: #1a1818; --fg: #ebeaea; --muted: #a7a0a0; --line: #403b3b; --accent: #ff442b; color-scheme: dark; }
/* foco de luz que sigue al ratón */
.hablemos::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 68, 43, .28), transparent 62%); opacity: 0; transition: opacity .4s; }
.hablemos:hover, .hablemos:focus-visible { border-color: var(--accent); transform: translateY(-4px); outline: none; }
.hablemos:hover::before, .hablemos:focus-visible::before { opacity: 1; }
.hablemos__etiqueta { font: 500 clamp(1rem, 1.8vw, 1.4rem) var(--mono); color: var(--accent); }
.hablemos__texto { position: relative; display: block; width: fit-content; font-size: clamp(3.2rem, 14vw, 11.5rem); font-weight: 600; line-height: .95; letter-spacing: -.055em; }
/* copia en color que se revela de izquierda a derecha */
.hablemos__texto::after { content: attr(data-texto); position: absolute; inset: 0; color: var(--accent); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.hablemos:hover .hablemos__texto::after, .hablemos:focus-visible .hablemos__texto::after { clip-path: inset(0 0 0 0); }
.hablemos__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.hablemos__sub { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.3rem); transition: color .3s, transform .4s cubic-bezier(.2, .7, .1, 1); }
.hablemos:hover .hablemos__sub, .hablemos:focus-visible .hablemos__sub { color: var(--fg); transform: translateX(6px); }
.hablemos__flecha { display: grid; place-items: center; width: clamp(3.2rem, 6vw, 5rem); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; overflow: hidden; transition: background .35s, color .35s, border-color .35s, transform .5s cubic-bezier(.2, .7, .1, 1); }
.hablemos__flecha svg { width: 46%; height: 46%; transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.hablemos:hover .hablemos__flecha, .hablemos:focus-visible .hablemos__flecha { background: var(--accent); border-color: var(--accent); color: #121111; transform: scale(1.12) rotate(45deg); }
.hablemos:active .hablemos__texto { transform: scale(.99); }

/* ---------- Trabajos ---------- */
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.tarjeta { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--radio); overflow: hidden; background: var(--bg-2); }
.tarjeta[hidden] { display: none; }
.tarjeta__medio { position: relative; aspect-ratio: 16 / 9; background: #0c0b0b; }
.tarjeta__boton, .tarjeta__medio > img, .tarjeta__vacio { position: absolute; inset: 0; width: 100%; height: 100%; }
.tarjeta__boton { padding: 0; border: 0; background: none; overflow: hidden; }
.tarjeta__boton img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s; filter: grayscale(.6); }
.tarjeta__boton:hover img, .tarjeta__boton:focus-visible img { transform: scale(1.04); filter: none; }
.tarjeta__vacio { background: repeating-linear-gradient(135deg, #151313 0 10px, #181616 10px 20px); }
.tarjeta__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tarjeta__play::before { content: ""; width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid #ffffff55; backdrop-filter: blur(5px); }
.tarjeta__play::after { content: ""; position: absolute; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.tarjeta__datos { padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.tarjeta__anio { font: 500 .85rem var(--mono); color: var(--muted); }
.tarjeta__titulo { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; font-weight: 600; }
.tarjeta__texto { color: var(--muted); font-size: .95rem; }
.tarjeta__etiqueta { margin-top: auto; padding-top: .6rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
/* Portada: siempre 4 trabajos que completan la cuadrícula (1 columna, 2 o 4 según el ancho). */
.rejilla--cuatro { grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rejilla--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rejilla--lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 2rem; }
.filtro { background: none; border: 1px solid var(--line); border-radius: 99px; padding: .35rem 1rem; font: 500 .9rem var(--mono); transition: all .2s; }
.filtro:hover { border-color: var(--accent); }
.filtro[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #121111; }

/* ---------- Productoras ---------- */
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos__pista { display: flex; align-items: center; gap: clamp(3rem, 7vw, 6rem); width: max-content; animation: marquesina 22s linear infinite; padding-right: clamp(3rem, 7vw, 6rem); }
.logos__pista li { flex: none; opacity: .62; transition: opacity .3s; }
.logos__pista li:hover { opacity: 1; }
.logos__pista img { height: 45px; width: auto; max-width: none; }

/* ---------- Testimonios ---------- */
/* Carrusel de testimonios: se desplaza solo, se arrastra con el dedo o el ratón y tiene flechas */
.carrusel { position: relative; }
/* Hueco entre tarjetas, para que al deslizar no vayan pegadas (principal.js lo suma al avanzar de una a otra). */
.carrusel__pista { display: flex; column-gap: clamp(1rem, 2.5vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; outline-offset: 4px; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carrusel__pista.arrastrando a { pointer-events: none; }
.carrusel__slide { flex: 0 0 100%; scroll-snap-align: start; }
.carrusel__mandos { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.carrusel__boton { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.2, .7, .1, 1); }
.carrusel__boton svg { width: 22px; height: 22px; }
.carrusel__boton:hover, .carrusel__boton:focus-visible { background: var(--accent); border-color: var(--accent); color: #121111; outline: none; transform: scale(1.06); }
/* Cada testimonio es una tarjeta casi blanca con borde y esquinas redondeadas («// Testimonios» va encima y las flechas debajo, fuera).
   Es clara en los dos modos, así que dentro usa los colores del modo día. Todas miden lo que la más alta. */
.testimonio { --bg: #fbfaf8; --bg-2: #ffffff; --fg: #1d1b1b; --muted: #6a6363; --line: #d9d4d4; --accent: #d6341c;
  --testimonio-relleno: clamp(1.5rem, 4vw, 3.5rem);
  position: relative; padding: var(--testimonio-relleno); background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: calc(var(--radio) + 8px); }
.testimonio__num { font: 500 .85rem var(--mono); color: var(--accent); padding-top: .8rem; }
.testimonio blockquote { font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; max-width: 28em; }
.testimonio em { font-style: normal; color: var(--accent); }
.testimonio__web { text-decoration-color: var(--accent); text-underline-offset: .25em; }
.testimonio__web:hover { color: var(--accent); }
.testimonio figcaption { grid-column: 2; font: 500 .9rem var(--mono); margin-top: 1.25rem; }
.testimonio small { display: block; color: var(--muted); font-size: .8rem; }
/* Imagen del testimonio (cara o logo): un círculo a la derecha del texto, dentro de la tarjeta, así que se desplaza con ella.
   La tarjeta le cede ese trozo por la derecha; el texto se maqueta igual que sin imagen. El círculo empieza a la altura
   de la cita (bajo la línea del número) y no al centro, porque todas las tarjetas miden lo que la más alta. */
.testimonio--con-imagen { --testimonio-imagen: clamp(4rem, 9vw, 7.5rem); padding-right: calc(var(--testimonio-relleno) + var(--testimonio-imagen) + clamp(1rem, 4vw, 3.5rem)); min-height: calc(2 * var(--testimonio-relleno) + 1.65rem + var(--testimonio-imagen)); }
.testimonio__imagen { position: absolute; top: calc(var(--testimonio-relleno) + 1.65rem); top: calc(var(--testimonio-relleno) + 1lh); right: var(--testimonio-relleno); width: var(--testimonio-imagen); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--bg-2); }
/* Con web: el círculo es un enlace (se abre en otra pestaña) y crece un poco al pasar el ratón */
a.testimonio__imagen { overflow: hidden; transition: transform .3s cubic-bezier(.2, .7, .1, 1); }
a.testimonio__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.testimonio__imagen:hover { transform: scale(1.05); }

/* ---------- Llamada a contacto y pie ---------- */
.pie { position: relative; padding: 3rem var(--margen) 2.5rem; border-top: 1px solid var(--line); background: var(--bg); }
.pie__fila { display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); grid-template-areas: "lema copia enlaces"; align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); }
.pie__lema { grid-area: lema; color: var(--muted); white-space: nowrap; }
.pie__enlaces { grid-area: enlaces; justify-self: end; display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; gap: .75rem clamp(1rem, 3vw, 2.25rem); font: 400 .95rem/1.55 var(--sans); }   /* misma fuente, tamaño y separación que la barra superior */
.pie__copia { grid-area: copia; justify-self: center; color: var(--muted); white-space: nowrap; font: 400 .8rem var(--mono); }
.pie__enlaces a { text-decoration: none; color: inherit; transition: color .2s; }
.pie__enlaces a:hover, .pie__enlaces a:focus-visible { color: var(--accent); }   /* igual que la barra superior */
/* Página actual: subrayado blanco, igual que en la barra superior (los demás enlaces no llevan subrayado) */
.pie__enlaces a[aria-current="page"] { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .35em; }
@media (max-width: 1060px) {
  .pie__fila { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "lema enlaces" "copia copia"; row-gap: 1.5rem; }
  .pie__copia { justify-self: center; }
}
@media (max-width: 820px) {
  .pie__fila { grid-template-columns: 1fr; grid-template-areas: "lema" "enlaces" "copia"; row-gap: 1.25rem; }
  .pie__lema { justify-self: center; font-size: clamp(.68rem, 3vw, .95rem); }
  .pie__enlaces { justify-self: center; }
}
.subir { position: fixed; right: var(--margen); bottom: 1.25rem; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: var(--fg); color: #121111; border: 0; font-size: 1.3rem; }
.subir:hover { background: var(--accent); }

/* ---------- Páginas interiores ---------- */
.interior { max-width: 1200px; margin: 0 auto; padding: calc(var(--cabecera-alto) + clamp(2.5rem, 7vw, 6rem)) var(--margen) clamp(4rem, 9vw, 7rem); }
.interior__cabecera { margin-bottom: clamp(2rem, 5vw, 4rem); }
.interior__cabecera .texto { margin-top: 1.5rem; color: var(--muted); }
.sobre-mi { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.sobre-mi__foto { position: sticky; top: calc(var(--cabecera-alto) + 1rem); border-radius: var(--radio); overflow: hidden; transition: filter .5s; }
.sobre-mi__foto:hover { filter: grayscale(1) contrast(1.05); }
.sobre-mi--sin-foto { grid-template-columns: minmax(0, 52rem); }
.sobre-mi__foto img { width: 100%; height: auto; }
@media (max-width: 860px) { .sobre-mi { grid-template-columns: 1fr; } .sobre-mi__foto { position: static; } }
.texto--legal h2 { padding-top: 1rem; border-top: 1px solid var(--line); }
.texto--legal { max-width: 80ch; font-size: 1rem; }

/* Formulario */
.formulario { display: grid; gap: 1.25rem; max-width: 640px; margin-inline: auto; }
.formulario label { display: grid; gap: .4rem; font: 500 .9rem var(--mono); color: var(--muted); }
/* Campos con solo una línea fina debajo (sin caja ni borde); el texto del campo va dentro como marcador */
.formulario .fila { position: relative; display: block; }
/* Marcador de los campos obligatorios: lleva el asterisco en rojo; desaparece en cuanto se escribe */
.formulario .marcador { position: absolute; left: 0; top: 1rem; font: 400 1.1rem/1.5 var(--sans); color: var(--muted); pointer-events: none; }
.formulario .fila input:not(:placeholder-shown) ~ .marcador, .formulario .fila textarea:not(:placeholder-shown) ~ .marcador { display: none; }
.formulario .fila input, .formulario .fila textarea { display: block; width: 100%; padding: 1rem 0 .8rem; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font: 400 1.1rem/1.5 var(--sans); transition: border-color .25s; appearance: none; -webkit-appearance: none; }
.formulario .fila textarea { min-height: calc(4 * 1.5 * 1.1rem + 1.8rem); resize: vertical; }   /* al menos 4 líneas; se puede agrandar arrastrando la esquina */
.formulario .fila ::placeholder { color: var(--muted); opacity: 1; }
.formulario .fila input:-webkit-autofill, .formulario .fila textarea:-webkit-autofill { -webkit-text-fill-color: var(--fg); box-shadow: 0 0 0 1000px var(--bg) inset; caret-color: var(--fg); }
.formulario__nota { margin: 0; color: var(--muted); font-size: .95rem; }
.aviso-sin-contacto { padding: 1rem 1.25rem; border: 1px solid var(--accent); border-radius: 12px; background: rgba(255, 68, 43, .1); }
.aviso-sin-contacto p { margin: .4rem 0 0; color: var(--fg); }
.js .aviso-sin-contacto, .js [data-confirmar-sin-contacto] { display: none; }
.modal-contacto { width: min(92vw, 30rem); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal-contacto::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); }
.modal-contacto__caja { padding: 1.6rem; }
.modal-contacto__titulo { margin: 0 0 .7rem; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.modal-contacto__caja p { margin: 0 0 1.4rem; color: var(--muted); line-height: 1.5; }
.modal-contacto__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.modal-contacto__botones .boton { margin: 0; }
.contador { display: block; margin-top: .4rem; text-align: right; font: 500 .8rem var(--mono); color: var(--muted); }
.contador--cerca { color: #e3b341; }
.contador--limite { color: var(--accent); font-weight: 700; }
.req { color: var(--accent); font-weight: 700; }
.error-campo { display: block; margin-top: .35rem; color: var(--accent); font: 500 .85rem/1.35 var(--sans); }
.casilla .error-campo { margin-top: .3rem; }
.formulario .fila input[aria-invalid="true"], .formulario .fila textarea[aria-invalid="true"] { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.formulario input[type="checkbox"][aria-invalid="true"]:not(:checked) { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.formulario .fila input:focus, .formulario .fila textarea:focus { border-bottom-color: var(--fg); outline: none; }
.formulario .fila input[aria-invalid="true"]:focus, .formulario .fila textarea[aria-invalid="true"]:focus { border-bottom-color: var(--accent); }
/* casilla centrada en vertical con su texto (en móvil, con el bloque de dos líneas) */
.formulario .casilla { grid-template-columns: auto 1fr; align-items: center; gap: .75rem; font: 400 .95rem var(--sans); color: var(--fg); }
.formulario .casilla input { width: 20px; height: 20px; margin: 0; accent-color: var(--fg); }
.casilla--error:not(:has(input:checked)) span { color: var(--accent); }
.trampa { position: absolute; left: -9999px; }
.mensaje { padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid var(--line); max-width: 640px; }
.mensaje--ok { border-color: #3d8a5a; } .mensaje--error { border-color: var(--accent); }
/* ---------- Avisos que se van solos (static/js/avisos.js): web, tienda, panel y revisión ----------
   Un elemento con data-aviso, al tocarle irse, se desvanece despacio y, ya invisible, se recoge (alto, márgenes y relleno a 0)
   para que lo de debajo suba sin salto. Las duraciones son las de avisos.js (FUNDIDO y RECOGIDA). */
[data-aviso] { transition: opacity 1.4s ease, transform 1.4s ease, max-height .9s ease 1.2s, margin .9s ease 1.2s, padding .9s ease 1.2s, border-width .9s ease 1.2s, gap .9s ease 1.2s; }
[data-aviso].aviso--sale { opacity: 0; transform: translateY(-.5rem); overflow: hidden; margin-block: 0; padding-block: 0; border-width: 0; gap: 0; }
@media (prefers-reduced-motion: reduce) { [data-aviso] { transition: none; } }
.datos-contacto { margin: 3rem 0 0;   /* alineados a la izquierda, a la altura del título */ display: grid; gap: 1.25rem; }
.datos-contacto > div { display: grid; gap: .15rem; }
.datos-contacto dt { color: var(--muted); font: 500 .85rem var(--mono); }
.datos-contacto dd { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }

/* ---------- Visor (vídeo e imagen ampliada) ---------- */
.visor { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); max-height: 92vh; color: var(--fg); }
.visor::backdrop { background: rgba(8, 7, 7, .88); backdrop-filter: blur(6px); }
.visor__cerrar { position: absolute; top: -2.75rem; right: 0; background: none; border: 0; font: 500 .9rem var(--mono); }
.visor__marco { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.visor__marco iframe, .visor__marco img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.visor__nota { margin-top: .75rem; font-size: .85rem; color: var(--muted); }

/* ---------- Cookies, cursor y transición ---------- */
.aviso-cookies { position: fixed; left: var(--margen); right: var(--margen); bottom: 1rem; z-index: 90; max-width: 640px; display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radio); font-size: .9rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies .boton { min-height: 40px; flex: none; }
/* Transición entre páginas (solo la web): una pantalla sólida con el logo y el nombre aparece en 0,23 s mientras el logo se acerca
   (del 90 al 100 %), cambia la página y se va en 0,32 s mientras se aleja; con una rampa de velocidad (lento → rápido → lento). */
.transicion { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: #000; color: #f6f4f0; opacity: 0; visibility: hidden; pointer-events: none; --rampa: cubic-bezier(.4, 0, .2, 1); transition: opacity .32s var(--rampa), visibility 0s linear .32s; }
.transicion__marca { display: grid; justify-items: center; gap: 1.2rem; transform: scale(.9); transition: transform .32s var(--rampa); }
.transicion__emblema .emblema { display: block; height: clamp(8rem, min(34vw, 48vh), 25rem); width: auto; }
.transicion__nombre { display: block; padding: .2rem 1rem .6rem; font-size: clamp(1.5rem, 4.5vw, 3.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.transicion.entra { opacity: 1; visibility: visible; transition: opacity .23s var(--rampa); }
.transicion.entra .transicion__marca { transform: scale(1); transition: transform .23s var(--rampa); }
/* En la página nueva ya está puesta antes del primer pintado (arranque.js pone .trans-llega), igual que acabó en la anterior;
   principal.js quita la clase y se va con la transición de la regla general. */
.trans-llega .transicion { opacity: 1; visibility: visible; transition: none; }
.trans-llega .transicion__marca { transform: scale(1); transition: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 120; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--accent); color: #121111; display: none; place-items: center; font: 600 .85rem var(--mono); pointer-events: none; transform: translate3d(-100px, -100px, 0) scale(0); transition: scale .25s; }
.cursor.activo { scale: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: grid; } .cursor:not(.activo) { scale: 0; } }

/* ---------- Revelado al hacer scroll (solo con JavaScript) ---------- */
.js [data-revelar] { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-revelar].visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquesina, .logos__pista { animation: none; }
  a.testimonio__imagen, a.testimonio__imagen:hover { transition: none; transform: none; }
  .hero { position: relative; max-height: 56rem; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .js .intro__texto .p { opacity: 1; }
  .fondo-fijo { display: none; }
  .seccion--fondo { position: relative; isolation: isolate; background: none; }
  .transicion, .cursor { display: none; }
  .hablemos, .hablemos *, .hablemos::before, .hablemos__texto::after { transition: none !important; }
  .hablemos:hover { transform: none; }
}
@media (max-width: 760px) {
  /* En móvil la figura ocupa casi todo el ancho y taparía el nombre: ahí el titular va por delante, mezclado con la foto. */
  .hero__titular { font-size: 28vw; }
  /* Proyecto con «respetar el ancho»: la foto empieza (y se queda fija) justo debajo de la barra. */
  .proyecto-detalle__hero.proyecto-detalle__hero--ancho { margin-top: var(--cabecera-alto); top: var(--cabecera-alto); }
  /* En móvil la foto empieza debajo de la barra, para que el logo no tape la cabeza. */
  .hero__caja { top: calc(var(--cabecera-alto) + .5rem); }
  .proyecto-detalle__overview { min-height: auto; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 5rem; }
  .proyecto-detalle__foto { height: clamp(19rem, 100vw, 34rem); }
  .proyecto-detalle__foto.proyecto-detalle__foto--ancho, .proyecto-detalle__foto.proyecto-detalle__foto--entera { height: auto; }
  .proyectos-scroll__tarjeta { flex-basis: 86vw; min-height: 26rem; }
  .servicio { grid-template-columns: 2.5rem 1fr; }
  .testimonio { grid-template-columns: 1fr; } .testimonio figcaption { grid-column: 1; }
  .aviso-cookies { flex-direction: column; align-items: flex-start; }
}

/* En móvil vertical el icono evita que el enlace invada el primer servicio. */
@media (max-width: 760px) and (orientation: portrait) {
  .hero__instagram-text { display: none; }
  .hero__instagram-icon { display: block; width: 1.25rem; height: 1.25rem; }
}

/* ---------- Modo día / noche (portfolio y tienda) ----------
   El modo noche es el de arriba. El modo día redefine las variables de color y corrige los colores fijos que no se adaptan solos. */
html[data-tema="dia"] { --bg: #f7f6f4; --bg-2: #ffffff; --fg: #1d1b1b; --muted: #6a6363; --line: #d9d4d4; --accent: #d6341c; color-scheme: light; }
html[data-tema="dia"] ::selection { color: #fff; }
html[data-tema="dia"] .cabecera { color: var(--fg); }
html[data-tema="dia"] .boton:not(.boton--claro):not(.boton--peligro):not(.boton--secundario) { color: var(--bg); }   /* el secundario (panel) no tiene relleno: conserva su color */
html[data-tema="dia"] .boton:not(.boton--claro):not(.boton--peligro):not(.boton--secundario):hover { color: #fff; }
html[data-tema="dia"] .filtro[aria-pressed="true"], html[data-tema="dia"] .carrusel__boton:hover, html[data-tema="dia"] .carrusel__boton:focus-visible, html[data-tema="dia"] .cursor { color: #fff; }
html[data-tema="dia"] .subir { color: var(--bg); }
html[data-tema="dia"] .js .idiomas__lista a:hover, html[data-tema="dia"] .js .idiomas__lista a:focus-visible { background: rgba(0, 0, 0, .06); }
html[data-tema="dia"] .js .idiomas__lista { box-shadow: 0 18px 40px rgba(0, 0, 0, .15); }
html[data-tema="dia"] .sobre { box-shadow: 0 -30px 60px rgba(0, 0, 0, .12); }
/* secciones «claras» (en noche, un gris más claro que el fondo): en día, un gris algo más oscuro que el fondo */
html[data-tema="dia"] .seccion--clara { --bg: #ecebe8; --bg-2: #e3e1de; --fg: #1d1b1b; --muted: #6a6363; --line: #cfc9c9; }
/* el texto del botón sale de --bg: dentro de una sección clara, el mismo que en el resto de la página */
html[data-tema="dia"] .seccion--clara .boton:not(.boton--claro):not(.boton--peligro) { color: #f7f6f4; }
html[data-tema="dia"] .seccion--clara .boton:not(.boton--claro):not(.boton--peligro):hover { color: #fff; }
/* Servicios: foto fija con velo oscuro; se queda oscura en los dos modos, con los colores de la noche */
html[data-tema="dia"] .seccion--fondo { --bg: #121111; --bg-2: #1a1818; --fg: #ebeaea; --muted: #a7a0a0; --line: #403b3b; --accent: #ff442b; color: var(--fg); color-scheme: dark; }
/* huecos de imágenes y vídeos */
html[data-tema="dia"] .proyecto-detalle__foto, html[data-tema="dia"] .tarjeta__medio { background: var(--bg-2); }   /* el hero no: su fondo es --bg para que la foto se blanquee */
html[data-tema="dia"] .tarjeta__vacio { background: repeating-linear-gradient(135deg, #ecebe8 0 10px, #e4e2df 10px 20px); }
/* los logos de las productoras son blancos: en día, negros */
html[data-tema="dia"] .logos img { filter: brightness(0); }
html[data-tema="dia"] .contador--cerca { color: #8a6400; }
/* telón de la transición entre páginas y de la entrada de la portada: claro en día */
html[data-tema="dia"] .transicion { background: var(--bg); color: var(--fg); }
html[data-tema="dia"] .js .hero::after { background: var(--bg); }

/* Botón de modo día/noche de la cabecera (el texto del botón depende del modo; sin JavaScript no se muestra) */
:is(.cabecera__ajustes, .barra__ajustes) { display: flex; align-items: center; gap: .75rem; }
.tema-solo-dia { display: none; }
.tema-boton > .tema-solo-dia { display: none; }
html[data-tema="dia"] .tema-solo-dia { display: inline; }
html[data-tema="dia"] .tema-boton > .tema-solo-dia { display: inline-flex; }
html[data-tema="dia"] .tema-solo-noche, html[data-tema="dia"] .tema-boton > .tema-solo-noche { display: none; }
.tema-boton { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--ajuste-alto); height: var(--ajuste-alto); padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: color .2s; }
.tema-boton > span { display: inline-flex; align-items: center; gap: .6rem; }
.tema-boton svg { width: 14px; height: 14px; }
.tema-boton:hover, .tema-boton:focus-visible { color: var(--accent); outline: none; }
.tema-texto { display: none; }
html:not(.js) .tema-boton, html:not(.js) .tema-item { display: none; }
@media (max-width: 760px) {   /* en el menú móvil, con su texto */
  :is(.cabecera__ajustes, .barra__ajustes) { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .tema-boton { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; font-size: 1.1rem; }
  .tema-boton svg { width: 20px; height: 20px; }
  .tema-texto { display: inline; }
}