/* =============================================================
   LA CAMERA — Portfolio de Daniel
   Hoja de estilos unica (index.html + contacto.html)
   -------------------------------------------------------------
   1.  Variables y reinicio
   2.  Utilidades y tipografia
   3.  Cabecera y menu movil
   4.  Portada (video H / V)
   5.  Bloque "Sobre"
   6.  Galeria de artistas
   7.  Banda de contacto (cierre del index)
   8.  Pagina de contacto
   9.  Pie de pagina
   10. Visor (lightbox)
   11. Responsive
   -------------------------------------------------------------
   Paleta:
     70%  #101820  negro        -> fondos
     15%  #FE5000  naranja      -> titulos y destacados
     10%  #1D252D  gris oscuro  -> bloques secundarios
      5%  #F5F5F2  blanco       -> textos y contraste
   ============================================================= */


/* -------------------------------------------------------------
   1. VARIABLES Y REINICIO
   ------------------------------------------------------------- */

:root{
  --negro:   #101820;
  --gris:    #1D252D;
  --naranja: #FE5000;
  --blanco:  #F5F5F2;

  /* Derivados, siempre a partir de los cuatro colores base */
  --texto-suave:   rgba(245, 245, 242, .68);
  --texto-tenue:   rgba(245, 245, 242, .45);
  --linea:         rgba(245, 245, 242, .12);
  --linea-fuerte:  rgba(245, 245, 242, .28);
  --naranja-suave: rgba(254, 80, 0, .16);
  --velo:          rgba(16, 24, 32, .92);

  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ancho:     1240px;
  --ancho-max: 1600px;
  --lateral:   clamp(1.15rem, 5vw, 4.5rem);
  --sep:       clamp(4.5rem, 10vw, 9.5rem);

  --cabecera-h: 76px;
  --transicion: .45s cubic-bezier(.22,.61,.36,1);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--cabecera-h);
}

/* overflow-x en html y body: evita el desbordamiento horizontal
   que provocan los titulares muy grandes en pantallas estrechas */
html,
body{ overflow-x: hidden; max-width: 100%; }

body{
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.sin-scroll{ overflow: hidden; }

img,
video,
picture{ display: block; max-width: 100%; }

img{ height: auto; }

a{ color: inherit; text-decoration: none; }

button,
input,
select,
textarea{ font: inherit; color: inherit; max-width: 100%; }

button{ background: none; border: 0; cursor: pointer; }

:focus-visible{
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
}

::selection{ background: var(--naranja); color: var(--blanco); }

.salto-contenido{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--naranja);
  color: var(--blanco);
}
.salto-contenido:focus{ left: 1rem; top: 1rem; }


/* -------------------------------------------------------------
   2. UTILIDADES Y TIPOGRAFIA
   ------------------------------------------------------------- */

.contenedor{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--lateral);
}
.contenedor--ancho{ max-width: var(--ancho-max); }

.seccion{
  padding-block: var(--sep);
  border-top: 1px solid var(--linea);
}

.seccion--gris{
  background: var(--gris);
  border-top: 0;
}

/* Rotulo numerado:  ( 01 ) SOBRE  */
.rotulo{
  margin: 0 0 1.5rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--naranja);
}
.rotulo span{ opacity: .7; margin-right: .55rem; }

.rotulo--menor{
  margin-bottom: .85rem;
  font-size: .68rem;
  font-weight: 400;
  color: var(--texto-tenue);
}

.rotulo--claro{ color: var(--texto-tenue); }

.titulo-seccion{
  margin: 0 0 1.4rem;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 200;
  line-height: 1.22;
  letter-spacing: -.015em;
  max-width: 22ch;
  color: var(--blanco);
}

/* Titular grande de seccion */
.titulo-display{
  margin: 0 0 1.8rem;
  font-size: clamp(2.4rem, 7.5vw, 5.6rem);
  font-weight: 200;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--naranja);
  max-width: 100%;
  overflow-wrap: break-word;
}
.titulo-display--blanco{ color: var(--blanco); }

.parrafo{
  margin: 0 0 1.4rem;
  color: var(--texto-suave);
  max-width: 62ch;
}
.parrafo--ancho{ max-width: 52ch; margin-bottom: 2.5rem; }

.bloque{ margin-block: 2.5rem; }

.enlace-cta{
  display: inline-block;
  margin-top: .5rem;
  padding-bottom: .35rem;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--naranja);
  border-bottom: 1px solid var(--naranja-suave);
  transition: border-color var(--transicion);
}
.enlace-cta::after{
  content: " \2192";
  display: inline-block;
  transition: transform var(--transicion);
}
.enlace-cta:hover{ border-bottom-color: var(--naranja); }
.enlace-cta:hover::after{ transform: translateX(4px); }

.enlace-sencillo{ border-bottom: 1px solid var(--linea-fuerte); }
.enlace-sencillo:hover{ border-bottom-color: var(--naranja); color: var(--naranja); }

/* Boton rectangular ancho, como el "Nous ecrire" de la guia */
.boton{
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 2.6rem;
  background: var(--blanco);
  color: var(--negro);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background-color var(--transicion), color var(--transicion);
}
.boton::after{
  content: "\2192";
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform var(--transicion);
}
.boton:hover{ background: var(--naranja); color: var(--blanco); }
.boton:hover::after{ transform: translateX(5px); }

.boton--naranja{ background: var(--naranja); color: var(--blanco); }
.boton--naranja:hover{ background: var(--blanco); color: var(--negro); }

.boton-fantasma{
  padding: .85rem 2.4rem;
  border: 1px solid var(--linea-fuerte);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color var(--transicion), border-color var(--transicion);
}
.boton-fantasma:hover{ color: var(--naranja); border-color: var(--naranja); }

.revelar{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.revelar.visible{ opacity: 1; transform: none; }


/* -------------------------------------------------------------
   3. CABECERA Y MENU MOVIL
   ------------------------------------------------------------- */

.cabecera{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicion), transform var(--transicion),
              border-color var(--transicion);
}
.cabecera.compacta{
  background: var(--velo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}
.cabecera.oculta{ transform: translateY(-100%); }

/* En paginas interiores la cabecera es solida desde el principio */
.cabecera--solida{
  background: var(--velo);
  border-bottom-color: var(--linea);
}

.cabecera__interior{
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--lateral);
  height: var(--cabecera-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca{ display: flex; align-items: center; gap: .75rem; min-width: 0; }
.marca__logo{ width: auto; height: 26px; flex: none; }
.marca__texto{
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav{ display: flex; gap: 2.2rem; }
.nav__enlace{
  position: relative;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--texto-suave);
  padding-block: .4rem;
  transition: color var(--transicion);
}
.nav__enlace::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.nav__enlace:hover,
.nav__enlace.activo{ color: var(--naranja); }
.nav__enlace:hover::after,
.nav__enlace.activo::after{ transform: scaleX(1); }

.hamburguesa{
  display: none;
  width: 34px;
  height: 34px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  flex: none;
}
.hamburguesa span{
  display: block;
  width: 100%;
  height: 1px;
  background: var(--blanco);
  transition: background-color var(--transicion);
}
.hamburguesa:hover span{ background: var(--naranja); }

.menu-movil{
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--negro);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--lateral);
  opacity: 0;
  transition: opacity .35s ease;
}
.menu-movil.abierto{ opacity: 1; }
.menu-movil[hidden]{ display: none; }

.menu-movil__cerrar{
  position: absolute;
  top: .9rem;
  right: var(--lateral);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--naranja);
}

.menu-movil__nav{ display: flex; flex-direction: column; gap: .9rem; }
.menu-movil__nav a{
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  font-weight: 200;
  letter-spacing: -.02em;
  color: var(--blanco);
  transition: color var(--transicion);
}
.menu-movil__nav a:hover{ color: var(--naranja); }

.menu-movil__pie{
  position: absolute;
  left: var(--lateral);
  right: var(--lateral);
  bottom: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .85rem;
  color: var(--texto-tenue);
}


/* -------------------------------------------------------------
   4. PORTADA (video H / V)
   -------------------------------------------------------------
   Dos archivos independientes. main.js decide cual cargar y le
   pone al <video> la clase --h o --v para ajustar el encuadre.
   El fondo lleva el fotograma de respaldo: se ve mientras carga
   y es lo que queda si el JavaScript esta desactivado.
   ------------------------------------------------------------- */

.portada{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--negro);
}

.portada__media{
  position: absolute;
  inset: 0;
  background-color: var(--negro);
  background-image: url("perfil-pagina/fondohpo.png");
  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;
}

.portada__video{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* llena la portada sin deformarse */
  object-position: 50% 45%;
  filter: grayscale(1) contrast(1.05);
  transition: opacity .35s ease;
}
.portada__video.cambiando{ opacity: 0; }

.portada__video--h{ object-position: 50% 42%; }   /* 16:9 horizontal */
.portada__video--v{ object-position: 50% 50%; }   /* 9:16 vertical   */

.portada__velo{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(16,24,32,.97) 0%,
      rgba(16,24,32,.45) 45%,
      rgba(16,24,32,.6) 100%),
    linear-gradient(to right,
      rgba(16,24,32,.78) 0%,
      rgba(16,24,32,0) 60%);
}

.portada__contenido{
  position: relative;
  width: 100%;
  padding-bottom: clamp(5rem, 13vh, 9rem);
}

.portada__titulo{
  margin: 0 0 1.3rem;
  font-size: clamp(1.9rem, 5.2vw, 4.2rem);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -.035em;
}
.portada__titulo strong{ color: var(--naranja); font-weight: 200; }

.portada__entradilla{
  margin: 0;
  max-width: 44ch;
  color: var(--texto-suave);
  font-size: clamp(.92rem, 1.3vw, 1.05rem);
}

.portada__scroll{
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.portada__flecha{ color: var(--naranja); animation: rebote 2.4s ease-in-out infinite; }

@keyframes rebote{
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%      { transform: translateY(7px); opacity: 1; }
}


/* -------------------------------------------------------------
   5. BLOQUE "SOBRE"
   ------------------------------------------------------------- */

.sobre{ border-top: 0; }

.sobre__rejilla{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.2rem, 6vw, 5.5rem);
  align-items: start;
}

.sobre__figura{
  margin: 0;
  position: sticky;
  top: calc(var(--cabecera-h) + 2rem);
}
.sobre__figura img{ width: 100%; }

/* Lista de artistas: texto plano, sin enlaces */
.lista-artistas{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .7rem;
}
.lista-artistas li{
  color: var(--texto-suave);
  font-size: .92rem;
  line-height: 1.4;
  padding: .35rem .8rem;
  background: var(--gris);
  border: 1px solid var(--linea);
}

.premios{ margin: 0; padding: 0; list-style: none; }
.premios li{
  display: flex;
  gap: 1.5rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--linea);
}
.premios li:last-child{ border-bottom: 1px solid var(--linea); }
.premios__anio{
  flex: 0 0 3.4rem;
  color: var(--naranja);
  font-size: .85rem;
  padding-top: .15rem;
}
.premios__cuerpo{ display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.premios__cuerpo strong{ font-weight: 400; }
.premios__meta{ color: var(--texto-tenue); font-size: .85rem; line-height: 1.5; }

.cifras{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-block: 2.75rem 2.25rem;
  padding: 1.9rem 1.6rem;
  background: var(--gris);
}
.cifras__numero{
  display: block;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.cifras__etiqueta{
  display: block;
  margin-top: .55rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--texto-tenue);
}


/* -------------------------------------------------------------
   6. GALERIA DE ARTISTAS
   ------------------------------------------------------------- */

.seccion--artistas{ padding-bottom: calc(var(--sep) * .8); }

.galeria{
  columns: 4;
  column-gap: 14px;
  margin-top: 2.25rem;
}

.galeria__item{
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 0;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--gris);
  cursor: zoom-in;
}

.galeria__item picture{ display: block; width: 100%; }

.galeria__item img{
  width: 100%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s ease,
              transform .9s cubic-bezier(.22,.61,.36,1),
              filter .6s ease;
}
.galeria__item img.cargada{ opacity: 1; transform: scale(1); }

.galeria__item:hover img,
.galeria__item:focus-visible img{
  transform: scale(1.07);
  filter: brightness(.45);
}

.galeria__pie{
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  text-align: left;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--naranja);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transicion), transform var(--transicion);
  pointer-events: none;
}
.galeria__item:hover .galeria__pie,
.galeria__item:focus-visible .galeria__pie{ opacity: 1; transform: none; }

.galeria__item.oculto{ display: none; }

.galeria__acciones{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}


/* -------------------------------------------------------------
   7. BANDA DE CONTACTO (cierre del index)
   -------------------------------------------------------------
   Es el bloque de cierre que usa la pagina guia antes del pie:
   fotografia de fondo, rotulo, titular, texto, boton y columna
   de redes a la derecha. No es una seccion de contenido nueva.
   ------------------------------------------------------------- */

.banda-contacto{
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--linea);
}

.banda-contacto__fondo{ position: absolute; inset: 0; }
.banda-contacto__fondo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) brightness(.42);
}
.banda-contacto__fondo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(16,24,32,.9) 0%,
    rgba(16,24,32,.55) 55%,
    rgba(16,24,32,.85) 100%);
}

.banda-contacto__interior{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.banda-contacto__redes{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
}
.banda-contacto__redes a{
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 300;
  color: var(--blanco);
  transition: color var(--transicion);
}
.banda-contacto__redes a:hover{ color: var(--naranja); }


/* -------------------------------------------------------------
   8. PAGINA DE CONTACTO
   ------------------------------------------------------------- */

.pagina{ padding-top: var(--cabecera-h); }

/* Encabezado con fotografia de fondo, igual planteamiento que
   la banda de cierre del index */
.contacto-portada{
  position: relative;
  overflow: hidden;
}
.contacto-portada__fondo{ position: absolute; inset: 0; }
.contacto-portada__fondo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) brightness(.4);
}
.contacto-portada__fondo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(16,24,32,.92) 0%,
    rgba(16,24,32,.55) 60%,
    rgba(16,24,32,.85) 100%);
}

.contacto-portada__interior{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 10vw, 7.5rem);
}

.contacto__rejilla{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.2rem, 6vw, 5rem);
  align-items: start;
  padding-block: var(--sep);
}

.formulario{
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  align-items: flex-start;
  background: var(--gris);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

/* Nombre y correo en dos columnas cuando hay sitio */
.campos-par{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  width: 100%;
}

.campo{ display: flex; flex-direction: column; gap: .5rem; width: 100%; min-width: 0; }

.campo label{
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.campo label span{ color: var(--texto-tenue); text-transform: none; letter-spacing: 0; }

.campo input,
.campo select,
.campo textarea{
  width: 100%;
  padding: .65rem 0;
  font-size: 1rem;      /* 16px: evita el zoom automatico en iOS */
  color: var(--blanco);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea-fuerte);
  border-radius: 0;
  transition: border-color var(--transicion);
}
.campo select{ appearance: none; cursor: pointer; }
.campo select option{ background: var(--gris); color: var(--blanco); }
.campo textarea{ resize: vertical; min-height: 8rem; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ outline: 0; border-bottom-color: var(--naranja); }
.campo.con-error input,
.campo.con-error textarea{ border-bottom-color: var(--naranja); }

.campo__error{ font-size: .78rem; color: var(--naranja); min-height: 1rem; }

/* Trampa anti-spam: invisible para las personas, visible para los bots */
.trampa{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__aviso{
  margin: 0;
  font-size: .88rem;
  color: var(--texto-suave);
  min-height: 1.4rem;
}
.formulario__aviso.ok{ color: var(--naranja); }

.contacto__datos .bloque:first-child{ margin-top: 0; }
.contacto__datos p{ margin: 0; color: var(--texto-suave); }

.redes{ display: flex; flex-direction: column; gap: .4rem; }
.redes a{ color: var(--texto-suave); transition: color var(--transicion); }
.redes a:hover{ color: var(--naranja); }


/* -------------------------------------------------------------
   9. PIE DE PAGINA
   ------------------------------------------------------------- */

.pie{ border-top: 1px solid var(--linea); }

/* Imagen de cierre: horizontal en escritorio, vertical en movil.
   El cambio lo hace <picture> en el HTML. */
.pie__imagen{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.pie__imagen img{
  width: 100%;
  height: clamp(220px, 38vw, 460px);
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(1) brightness(.62);
}
.pie__imagen::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16,24,32,.35), var(--negro));
}

.pie__interior{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.25rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.pie__marca img{ height: 32px; width: auto; margin-bottom: 1rem; }
.pie__marca p{ margin: 0; color: var(--texto-tenue); max-width: 30ch; font-size: .88rem; }

.pie__columna{
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-start;
  font-size: .88rem;
  min-width: 0;
}
.pie__columna a{
  color: var(--texto-suave);
  transition: color var(--transicion);
  overflow-wrap: anywhere;   /* el correo largo no desborda */
}
.pie__columna a:hover{ color: var(--naranja); }

.pie__legal{
  padding-block: 1.5rem;
  border-top: 1px solid var(--linea);
}
.pie__legal p{ margin: 0; color: var(--texto-tenue); font-size: .76rem; max-width: 90ch; }


/* -------------------------------------------------------------
   10. VISOR (LIGHTBOX)
   ------------------------------------------------------------- */

.visor{
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(16,24,32,.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0;
  transition: opacity .3s ease;
}
.visor.abierto{ opacity: 1; }
.visor[hidden]{ display: none; }

.visor__figura{
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.visor__figura picture{ display: contents; }

.visor__figura img{
  max-width: 100%;
  max-height: 78svh;
  width: auto;
  object-fit: contain;
}
.visor__figura figcaption{
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  font-size: .82rem;
  color: var(--texto-suave);
}
.visor__contador{ color: var(--naranja); font-variant-numeric: tabular-nums; }

.visor__cerrar{
  position: absolute;
  top: .8rem;
  right: clamp(1rem, 4vw, 2.5rem);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--texto-suave);
}
.visor__cerrar:hover{ color: var(--naranja); }

.visor__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--texto-suave);
}
.visor__nav:hover{ color: var(--naranja); }
.visor__nav--anterior{ left: clamp(.25rem, 2vw, 2rem); }
.visor__nav--siguiente{ right: clamp(.25rem, 2vw, 2rem); }


/* -------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------- */

/* --- Portatiles --- */
@media (max-width: 1200px){
  .galeria{ columns: 3; }
}

/* --- Tabletas horizontales --- */
@media (max-width: 1000px){
  .pie__interior{ grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .pie__marca{ grid-column: 1 / -1; }

  .banda-contacto__interior,
  .contacto-portada__interior{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .banda-contacto__redes{ flex-direction: row; gap: 1.75rem; flex-wrap: wrap; }
}

/* --- Tabletas en vertical: fotograma de respaldo vertical --- */
@media (orientation: portrait) and (max-width: 1180px){
  .portada__media{ background-image: url("perfil-pagina/fondovpo.png"); }
}

/* --- Movil grande: aparece el menu --- */
@media (max-width: 900px){
  .nav{ display: none; }
  .hamburguesa{ display: flex; }

  .sobre__rejilla,
  .contacto__rejilla{ grid-template-columns: 1fr; }

  .sobre__figura{ position: static; max-width: 440px; }
}

/* --- Movil --- */
@media (max-width: 700px){
  :root{ --cabecera-h: 62px; }

  .portada__media{ background-image: url("perfil-pagina/fondovpo.png"); }
  .portada{ min-height: 92svh; }
  .portada__scroll{ display: none; }
  .portada__contenido{ padding-bottom: 3.5rem; }

  .galeria{ columns: 2; column-gap: 10px; }
  .galeria__item{ margin-bottom: 10px; }
  .galeria__pie{ font-size: .7rem; padding: .7rem; }

  .cifras{ grid-template-columns: 1fr; gap: 1.6rem; }

  .premios li{ flex-direction: column; gap: .3rem; }
  .premios__anio{ flex: none; }

  .campos-par{ grid-template-columns: 1fr; }
  .boton{ width: 100%; justify-content: space-between; }

  .pie__imagen img{ height: clamp(300px, 75vw, 420px); }
  .pie__interior{ grid-template-columns: 1fr; gap: 2rem; }

  .visor__nav{ top: auto; bottom: .5rem; transform: none; }
  .visor__figura picture{ display: contents; }

.visor__figura img{ max-height: 68svh; }
}

/* --- Movil pequeno --- */
@media (max-width: 420px){
  .marca__texto{ font-size: .7rem; letter-spacing: .18em; }
  .lista-artistas li{ font-size: .85rem; padding: .3rem .65rem; }
  .banda-contacto__redes{ flex-direction: column; gap: .5rem; }
}

/* --- Pantallas muy anchas --- */
@media (min-width: 1700px){
  .galeria{ columns: 5; }
}

/* --- Movil en horizontal --- */
@media (max-height: 500px) and (orientation: landscape){
  .portada{ min-height: 460px; }
  .portada__contenido{ padding-bottom: 2.5rem; }
  .portada__media{ background-image: url("perfil-pagina/fondohpo.png"); }
}

/* --- Preferencia de movimiento reducido --- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar{ opacity: 1; transform: none; }
  .galeria__item picture{ display: block; width: 100%; }

.galeria__item img{ opacity: 1; transform: none; }
}