/* ============================================================
   PM SOUND — hoja de estilo del sitio público
   Paleta y gestos tipográficos tomados del documento impreso
   que ya reciben los clientes, para que el sitio y la
   cotización se lean como una sola marca.
   ============================================================ */

:root {
  /* Colores: los mismos del documento, adaptados a fondo oscuro */
  --fondo:       #15130F;   /* casi negro, cálido */
  --superficie:  #1F1D1A;   /* el mismo del documento */
  --texto:       #EDEBE3;   /* crema del documento */
  --texto-tenue: #A9A49A;   /* aclarado desde #8A8579 para que contraste */
  --oro:         #C9A227;   /* el acento, el mismo del documento */
  --oro-apagado: #8A7526;
  --linea:       #332F29;   /* filetes */

  /* Tipografía */
  --display: 'Cormorant Garamond', Georgia, serif;
  --texto-fuente: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --margen: clamp(1.25rem, 5vw, 7rem);
  --ancho:  78rem;
  --alto-barra: 3.5rem;   /* alto de la barra fija de contacto en teléfono */
}


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* ningún desborde lateral en móvil */
  /* Espacio para la barra fija de contacto, que si no tapa el contenido. */
  padding-bottom: var(--alto-barra, 0px);
}

/* Las cifras técnicas (Hz, dB, aforo, numeración) alineadas en columna */
.cifra, .pilar-numero { font-variant-numeric: tabular-nums; }

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

a { color: inherit; }

/* El gesto de marca del documento impreso: versalitas en oro, muy espaciadas */
.rotulo {
  font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
}

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

/* ---------------- Encabezado ---------------- */

.cabecera {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  padding-block: clamp(1.1rem, 2.5vw, 1.9rem);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cabecera img { height: clamp(26px, 3.4vw, 38px); width: auto; }

.nav { display: none; gap: clamp(1.4rem, 2.4vw, 2.6rem); }

@media (min-width: 60rem) { .nav { display: flex; } }

.nav a {
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color .25s ease;
}

.nav a:hover, .nav a:focus-visible { color: var(--texto); }

/* ---------------- Portada ---------------- */

.portada {
  position: relative;
  min-height: 82svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(6rem, 14vh, 11rem) clamp(2.75rem, 8vh, 6rem);
  isolation: isolate;
  overflow: hidden;
}

/*
  Atmósfera sin foto. Cuando Porfirio entregue las fotos de montaje,
  se define --foto-portada y la imagen entra detrás de este mismo velo,
  sin tocar nada más.
*/
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--fondo);
  background-image:
    radial-gradient(46ch 40ch at 78% 8%, rgba(201,162,39,.13), transparent 62%),
    linear-gradient(168deg, rgba(201,162,39,.05) 0%, transparent 38%),
    linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 42%),
    var(--foto-portada, none);
  background-size: cover;
  background-position: center;
}

/* Grano fino: quita el aspecto de degradado plano de plantilla */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

.portada-texto { max-width: 46rem; }

.portada h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.9rem, 1.6rem + 6vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: clamp(1.1rem, 2.4vw, 1.9rem) 0 0;
  text-wrap: balance;
}


.portada h1 em {
  font-style: italic;
  color: var(--oro);
}

.entrada {
  text-wrap: pretty;
  margin: clamp(1.3rem, 2.6vw, 2rem) 0 0;
  max-width: 44ch;
  color: var(--texto-tenue);
  font-size: clamp(1rem, 0.95rem + 0.38vw, 1.2rem);
  line-height: 1.6;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1.9rem, 4vw, 3rem);
}

/* Botón principal: filete de oro, nunca un bloque dorado */
.boton {
  --b: var(--oro);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .95em 1.9em;
  border: 1px solid var(--b);
  color: var(--texto);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

.boton:hover, .boton:focus-visible { background: var(--oro); color: #15130F; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color .25s ease;
}

.enlace-flecha:hover, .enlace-flecha:focus-visible { color: var(--texto); }
.enlace-flecha span { transition: transform .25s ease; }
.enlace-flecha:hover span { transform: translateX(.3em); }

/* ---------------- Pilares ---------------- */

@media (min-width: 48rem) { .portada { min-height: 100svh; } }

.pilares { padding-block: clamp(4rem, 12vw, 10rem); }

.seccion-titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: .55rem 0 0;
  max-width: 24ch;
  text-wrap: balance;
}


.seccion-entrada {
  text-wrap: pretty;
  margin: 1.1rem 0 0;
  max-width: 52ch;
  color: var(--texto-tenue);
}

.lista-pilares {
  margin: clamp(3rem, 7vw, 5.5rem) 0 0;
  border-top: 1px solid var(--linea);
}

.pilar {
  display: grid;
  gap: .6rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4.5vw, 3.4rem);
  border-bottom: 1px solid var(--linea);
  align-items: start;
}

@media (min-width: 48rem) {
  .pilar { grid-template-columns: 4.5rem minmax(0, 18.5rem) minmax(0, 1fr); }
}

.pilar-numero {
  font-family: var(--texto-fuente);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.9;
  color: var(--oro);
  margin: 0;
}

.pilar-numero::after {
  content: " /";
  color: var(--oro-apagado);
}

.pilar h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.005em;
}

.pilar p { text-wrap: pretty; margin: 0; color: var(--texto-tenue); max-width: 54ch; }

/* ---------------- Aparición al desplazar ---------------- */

/*
  La PORTADA entra con una animación de CSS pura, escalonada. No depende del
  JavaScript: si el guion no carga, o tarda, o la pestaña abrió en segundo
  plano, el titular se ve igual. Quien llega escaneando el QR nunca puede
  encontrarse una pantalla en blanco.
*/
.entra {
  animation: entrar .95s cubic-bezier(.22,.61,.36,1) both;
}

.entra:nth-child(1) { animation-delay: .05s; }
.entra:nth-child(2) { animation-delay: .15s; }
.entra:nth-child(3) { animation-delay: .27s; }
.entra:nth-child(4) { animation-delay: .39s; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(1.4rem); }
  to   { opacity: 1; transform: none; }
}

/*
  De la portada hacia abajo sí se revela al desplazar, y eso sí lo maneja el
  guion — pero solo oculta el contenido cuando hay JavaScript Y un observador
  que pueda volver a mostrarlo.
*/
.js-observa .revelar {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}

.js-observa .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; }
  .js-observa .revelar { opacity: 1; transform: none; transition: none; }
  .enlace-flecha span { transition: none; }
  html { scroll-behavior: auto; }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

/* ---------------- Para qué eventos ---------------- */

.eventos { padding-block: clamp(4rem, 11vw, 9rem); border-top: 1px solid var(--linea); }

.rejilla-eventos {
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.5rem);
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
}

@media (min-width: 52rem) { .rejilla-eventos { grid-template-columns: repeat(3, 1fr); } }

/*
  Cada bloque lleva un filete superior en oro en vez de una caja. Cuando
  lleguen las fotos de montaje, entran como fondo de .evento sin tocar el
  resto de la hoja.
*/
.evento { padding-top: 1.4rem; border-top: 2px solid var(--oro); }

.evento h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.15;
  margin: 0 0 .7rem;
}

.evento p { margin: 0; color: var(--texto-tenue); text-wrap: pretty; }

/* ---------------- Cómo trabajamos ---------------- */

.proceso { padding-block: clamp(4rem, 11vw, 9rem); border-top: 1px solid var(--linea); }

.pasos {
  list-style: none;
  margin: clamp(2.6rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4.5vw, 3rem);
  counter-reset: paso;
}

@media (min-width: 52rem) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.paso { padding-top: 1.2rem; border-top: 1px solid var(--linea); }

.paso-numero {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--oro);
  margin: 0 0 .5rem;
}

.paso h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  margin: 0 0 .5rem;
  line-height: 1.2;
}

.paso p { margin: 0; color: var(--texto-tenue); font-size: .9375rem; text-wrap: pretty; }

/* ---------------- Equipo y respaldo ---------------- */

.respaldo { padding-block: clamp(4rem, 11vw, 9rem); border-top: 1px solid var(--linea); }

.rejilla-respaldo { display: grid; gap: clamp(2.6rem, 6vw, 5rem); }

@media (min-width: 44rem) { .rejilla-respaldo { grid-template-columns: 1.15fr 1fr; } }

.ficha { margin: 1.6rem 0 0; }

.ficha > div {
  display: grid;
  gap: .15rem 1.5rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 30rem) { .ficha > div { grid-template-columns: 10.5rem minmax(0, 1fr); } }

.ficha dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.ficha dd { margin: 0; }

.nota { margin: 1.1rem 0 0; font-size: .875rem; color: var(--texto-tenue); }

/* ---------------- Fotografía ---------------- */

/*
  Banda a todo lo ancho. Las fotos son de eventos reales y el entorno se ve
  tal cual es; lo que hace el velo de los bordes es que la imagen se funda
  con el fondo oscuro en vez de quedar como un recorte pegado encima.
*/
.banda {
  margin: 0;
  position: relative;
  border-block: 1px solid var(--linea);
}

.banda img {
  width: 100%;
  height: clamp(15rem, 38vw, 30rem);
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.88) contrast(1.04) brightness(.94);
}

.banda::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--fondo), transparent 14%, transparent 86%, var(--fondo)),
    linear-gradient(to bottom, rgba(21,19,15,.45), transparent 28%, transparent 62%, rgba(21,19,15,.75));
}

.banda figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: clamp(1rem, 3vw, 2rem) var(--margen);
  margin-inline: auto;
  max-width: var(--ancho);
  font-size: clamp(.8125rem, .78rem + .2vw, .9375rem);
  color: var(--texto);
  text-wrap: pretty;
}

/* La foto del equipo, dentro de su columna. */
.foto-equipo { margin: 1.6rem 0 0; }

.foto-equipo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--linea);
  filter: saturate(.9) contrast(1.03);
}

/* ---------------- Contacto ---------------- */

.contacto { padding-block: clamp(4rem, 11vw, 9rem); border-top: 1px solid var(--linea); }

.acciones-contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1.9rem, 4vw, 2.6rem);
}

.lista-contacto {
  list-style: none;
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 42rem;
}

.lista-contacto li {
  display: grid;
  gap: .15rem 1.5rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 30rem) { .lista-contacto li { grid-template-columns: 7rem minmax(0, 1fr); } }

.lista-contacto .etiqueta {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.lista-contacto a { color: var(--texto); text-decoration-color: var(--oro-apagado); text-underline-offset: .25em; }
.lista-contacto a:hover { color: var(--oro); }

/* ---------------- Pie ---------------- */

.pie {
  padding-block: clamp(2.6rem, 6vw, 4rem);
  border-top: 1px solid var(--linea);
}

.pie img { height: 30px; width: auto; opacity: .85; }
.pie p { margin: 1rem 0 0; font-size: .8125rem; color: var(--texto-tenue); letter-spacing: .02em; }

/* ---------------- Barra fija de contacto (solo teléfono) ---------------- */

.barra-movil {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(14,12,10,.96);
  border-top: 1px solid var(--linea);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}

.barra-movil a {
  padding: 1.05rem .5rem;
  text-align: center;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto);
}

.barra-movil a + a { border-inline-start: 1px solid var(--linea); }

@media (min-width: 48rem) {
  .barra-movil { display: none; }
  :root { --alto-barra: 0px; }
}