/* =============================================================================
   LOCO BLOW · SITIO
   Barra, cartel, marco de vídeo, preguntas, pie, botón flotante de WhatsApp,
   franja de edad y revelado.
   ========================================================================== */

/* --- LA MARCA --------------------------------------------------------------- */
/* «Loco Blow.» es un dibujo, no texto: los trazados del PDF original del
   estudio (assets/img/marca.svg). El cartel entero, con «SINCE · TATTOO /
   LÁSER / PIERCING · 2015 · [A CORUÑA]», es otro (assets/img/cartel.svg).
   Se definen una vez como <symbol> al principio del <body> y se usan donde
   haga falta. Heredan el color del texto.                                    */
.marca, .marca-cartel { display: block; width: auto; color: inherit; }
.marca use, .marca-cartel use { fill: currentColor; }

/* --- BARRA ------------------------------------------------------------------ */
/* Capa translúcida con el contenido pasando por debajo, no una tira opaca
   que se come una franja fija de pantalla.                                   */

.nav__centinela { position: absolute; top: 0; height: 1px; width: 1px; }

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* La barra se reserva por su marca, que tiene alto fijo: así no crece de
     golpe cuando llega el contenido. Una sola medida, dos usos.             */
  min-height: calc(var(--nav-marca) + var(--s3) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  transition: border-color var(--t-ui) ease;
  border-bottom: var(--hair) solid transparent;
}
/* El desenfoque va en una capa hija, no en la barra: `backdrop-filter`
   convierte al elemento en bloque contenedor de sus hijos `position: fixed`,
   y el cajón del menú dejaría de estar fijo a la pantalla.                   */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--suelo) 78%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  transition: background-color var(--t-ui) ease;
  pointer-events: none;
}
/* El filete aparece solo cuando hay contenido pasando por debajo. */
.nav[data-flotando] { border-bottom-color: var(--filete); }
.nav[data-flotando]::before { background: color-mix(in srgb, var(--suelo) 90%, transparent); }

@media (prefers-reduced-transparency: reduce) {
  .nav::before, .nav[data-flotando]::before {
    background: var(--suelo); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

.nav__marca {
  display: flex;
  align-items: center;
  height: var(--nav-marca);
  min-width: var(--touch);
  text-decoration: none;
}
.nav__marca .marca { height: var(--nav-marca); }

.nav__lista { display: flex; align-items: center; gap: var(--s1); margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--s3);
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  font-stretch: 125%;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
}
/* La página en la que estás se marca con corchetes: es un estado, y no
   depende del color. Los corchetes se reservan siempre (transparentes) para
   que la fila no baile.                                                      */
.nav__link::before, .nav__link::after {
  font-weight: var(--w-fino);
  font-stretch: 100%;
  color: transparent;
  transition: color var(--t-fast) ease;
}
.nav__link::before { content: "["; content: "[" / ""; margin-right: 0.15em; }
.nav__link::after  { content: "]"; content: "]" / ""; margin-left: 0.15em; }
.nav__link[aria-current="page"]::before,
.nav__link[aria-current="page"]::after { color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::before, .nav__link:hover::after { color: var(--tinta-3); }
}

.nav__cita { margin-left: var(--s3); }

/* En escritorio el menú es una sola fila: enlaces y, al final, el botón.
   «Inicio» sobra: lo es el logotipo.                                         */
@media (min-width: 60rem) {
  .nav__menu { display: flex; align-items: center; }
  .nav__solo-cajon { display: none; }
}

.nav__abrir {
  display: none;
  /* Por encima del cajón: sin esto el cajón tapa el botón con el que se
     cierra, y la única forma de salir es elegir una opción del menú.        */
  position: relative;
  z-index: 2;
  align-items: center;
  gap: var(--s2);
  min-height: var(--touch);
  min-width: var(--touch);
  padding-inline: var(--s4);
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  font-stretch: 125%;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--tinta);
  border: var(--hair) solid var(--filete-fn);
}
.nav__abrir-barras { display: grid; gap: 4px; width: 16px; }
.nav__abrir-barras i {
  display: block; height: 1.5px; background: currentColor;
  transition: transform var(--t-ui) var(--ease-out);
}
[data-menu] .nav__abrir-barras i:first-child { transform: translateY(2.75px) rotate(45deg); }
[data-menu] .nav__abrir-barras i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

@media (max-width: 59.999rem) {
  .nav__abrir { display: inline-flex; }

  /* Velo: cierra al tocar fuera del cajón. */
  .nav__velo {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: color-mix(in srgb, var(--tinta) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-panel) var(--ease-drawer), visibility 0s linear var(--t-panel);
  }
  [data-menu] .nav__velo {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-panel) var(--ease-drawer), visibility 0s;
  }
  [data-menu] { overflow: hidden; }

  .nav__menu {
    position: fixed;
    z-index: 1;
    inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    display: flex;
    flex-direction: column;
    padding: calc(var(--touch) + var(--s7)) var(--gutter) var(--s6);
    background: var(--suelo);
    border-left: var(--hair) solid var(--filete-fn);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-panel) var(--ease-drawer), visibility 0s linear var(--t-panel);
    overflow-y: auto;
  }
  [data-menu] .nav__menu {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-panel) var(--ease-drawer), visibility 0s;
  }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  /* En el cajón las secciones van grandes, como una lista de cartel. */
  .nav__link {
    padding: var(--s3) 0;
    font-size: var(--fs-d3);
    font-weight: var(--w-display);
    font-stretch: 100%;
    letter-spacing: var(--tr-d3);
    text-transform: none;
    border-bottom: var(--hair) solid var(--filete);
  }
  .nav__cita { margin: var(--s6) 0 0; }
  /* En el cajón es el único botón a la vista: va macizo. En la barra de
     escritorio va de filete, porque el macizo es el de la portada.        */
  .nav__cita .btn { width: 100%; min-height: 3.5rem; --btn-bg: var(--tinta); --btn-fg: var(--claro); --btn-bd: var(--tinta); }
}
@media (max-width: 59.999rem) and (prefers-reduced-motion: reduce) {
  .nav__menu { transition: opacity var(--t-ui) ease, visibility 0s linear var(--t-ui); transform: none; opacity: 0; }
  [data-menu] .nav__menu { opacity: 1; transition: opacity var(--t-ui) ease, visibility 0s; }
}

/* --- CABECERA DE SECCIÓN ------------------------------------------------------ */
/* El corchete dice qué es la sección; el titular dice algo. En escritorio el
   titular va a la izquierda y la entradilla baja a la derecha, a ras del pie
   del titular: la asimetría del cartel, no dos columnas iguales.            */

.cab { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.cab .lead { margin-top: var(--s1); }
@media (min-width: 60rem) {
  .cab {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s8);
    align-items: end;
    margin-bottom: var(--s8);
  }
  .cab > .etiqueta { grid-column: 1 / -1; }
  .cab .lead { margin-top: 0; }
}

/* --- MARCO DE VÍDEO ------------------------------------------------------------ */
/* Los reels del estudio, en bucle y sin sonido. Llegan con su póster y la
   proporción reservada; el vídeo solo se pide al acercarse a pantalla. Todo
   vídeo que se mueve más de cinco segundos lleva su botón de pausa (WCAG
   2.2.2), y con «reducir movimiento» no arranca solo.                        */

.video {
  position: relative;
  aspect-ratio: var(--ratio, 9 / 16);
  background: var(--suelo-hondo);
  overflow: hidden;
  container-type: inline-size;
}
.video video, .video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__pie {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
}
.video__rotulo {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s3);
  min-height: var(--touch);
  background: var(--tinta);
  color: var(--claro);
}
/* En un marco estrecho (dos columnas en el móvil) el rótulo no cabe junto al
   botón: queda el botón, y el nombre del vídeo lo sigue diciendo su etiqueta.
   Va detrás de la regla del rótulo: con la misma especificidad, gana la última. */
@container (max-width: 15rem) {
  .video__rotulo { display: none; }
}
/* Pausa: dos barras. Play: un triángulo recortado. Dibujados, no glifos. */
.video__boton {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  background: var(--tinta);
  color: var(--claro);
  border-left: var(--hair) solid var(--noche-filete);
  cursor: pointer;
}
.video__boton i {
  width: 12px; height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.video__boton[aria-pressed="false"] i {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: 1px 0;
}
.video__boton:focus-visible { outline-color: var(--tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .video__boton:hover { background: var(--tinta-viva); }
}

/* --- PREGUNTAS FRECUENTES -------------------------------------------------------- */
/* <details>/<summary> nativo: funciona sin JavaScript, el teclado y el lector
   de pantalla lo entienden solos, y `name` deja una sola abierta. Con
   JavaScript, paginas.js anima la apertura y el cierre: un <details> cerrado
   no pinta su contenido, así que con CSS solo no hay desde dónde animar.     */

.faq { border-top: var(--hair) solid var(--filete-fn); }
.faq__item { border-bottom: var(--hair) solid var(--filete); }
.faq__item summary { list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }

.faq__pregunta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2) var(--s4);
  min-height: var(--touch);
  padding-block: var(--s5);
  cursor: pointer;
}
.faq__num   { grid-column: 1; grid-row: 1; color: var(--tinta-3); }
.faq__marca { grid-column: 2; grid-row: 1; }
.faq__texto { grid-column: 1 / -1; grid-row: 2; }

.faq__texto {
  font-size: var(--fs-d4);
  font-weight: var(--w-titulo);
  line-height: 1.25;
  letter-spacing: var(--tr-d4);
}
.faq__pregunta:focus-visible { outline-offset: -2px; }

@media (min-width: 48rem) {
  .faq__pregunta { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--s4); }
  .faq__texto { grid-column: 2; grid-row: 1; }
  .faq__marca { grid-column: 3; grid-row: 1; }
}

/* Un más que se vuelve menos: dos filetes, uno gira. */
.faq__marca {
  position: relative;
  display: block;
  width: 16px; height: 16px;
}
.faq__marca::before, .faq__marca::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: rotate var(--t-ui) var(--ease-out);
}
.faq__marca::after { rotate: 90deg; }
.faq__item[open]:not([data-cerrando]) .faq__marca::after { rotate: 0deg; }

/* Lo que se anima es el alto de esta caja; lo de dentro no se aplasta. */
.faq__interior { overflow: hidden; }

.faq__cuerpo { padding-bottom: var(--s6); }
/* La respuesta arranca donde arranca la pregunta, no donde el número. */
@media (min-width: 48rem) {
  .faq__cuerpo { padding-left: calc(4rem + var(--s4)); }
}
.faq__cuerpo p { max-width: 58ch; color: var(--tinta-2); }

@media (prefers-reduced-motion: reduce) {
  .faq__marca::after { transition: none; }
}

/* --- PIE ----------------------------------------------------------------------- */
/* El cartel en negativo: la palabra grande en gris sobre negro, y los datos
   que hacen falta para llegar y para escribir.                               */

.pie { padding-block: var(--s9) var(--s6); }
.pie__marca .marca { width: min(100%, 30rem); height: auto; }
.pie__cuerpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
  margin-top: var(--s8);
}
@media (min-width: 60rem) {
  .pie__cuerpo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.pie__bloque .etiqueta { margin-bottom: var(--s3); }
.pie__dir { font-style: normal; line-height: 1.9; }
/* Enlaces del pie con caja propia: a 15 px de alto no se aciertan con el
   pulgar. Se pasa de los 24 px que pide WCAG 2.5.8 sin margen negativo.     */
.pie__dir a, .pie__legales a { display: inline-block; padding-block: 5px; }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: var(--hair) solid var(--noche-filete);
}
.pie__legales { display: flex; flex-wrap: wrap; gap: var(--s4); }
/* El botón flotante cae justo encima de esta esquina. */
[data-wasap-activo] .pie__base { padding-bottom: calc(var(--touch) + var(--s5)); }

/* --- BOTÓN FLOTANTE DE WHATSAPP -------------------------------------------------- */
/* Va por debajo del visor y de la franja de edad: nada debe taparlos. Sin
   sombra: se separa del fondo con un filete claro de un píxel, que sobre el
   gris casi no se ve y sobre una foto oscura sí.                             */

.wasap {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  z-index: var(--z-wasap);
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 3.25rem;
  padding: 0 var(--s5);
  background: var(--tinta);
  color: var(--claro);
  border: var(--hair) solid var(--suelo);
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  font-stretch: 125%;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease,
              transform var(--t-press) var(--ease-out),
              opacity var(--t-ui) ease, visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .wasap:hover { background: var(--tinta-viva); }
}
.wasap:active { transform: scale(0.97); }
.wasap:focus-visible { outline-color: var(--tinta); outline-offset: 3px; }

/* Sobre el pie negro se invierte: si no, sería negro sobre negro. */
[data-pie-visible] .wasap { background: var(--suelo); color: var(--tinta); border-color: var(--suelo); }
[data-pie-visible] .wasap:focus-visible { outline-color: var(--claro); }

/* Se aparta en tres casos. Mientras se pregunta la edad (esa respuesta va
   primero y la franja ocupa justo ese sitio), mientras se ve un botón de
   cita de la página (dos bloques negros pidiendo lo mismo se restan fuerza)
   y mientras hay una foto abierta en la muestra del inicio: lleva su propio
   «Quiero algo así» y, en el móvil, el flotante le taparía los botones.   */
[data-edad] .wasap,
[data-galeria-abierta] .wasap,
:root:not([data-cta-fuera]) .wasap { opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-ui) ease, transform var(--t-ui) ease, visibility 0s linear var(--t-ui); }
/* Y en escritorio, siempre: la barra fija ya lleva el botón de WhatsApp. */
@media (min-width: 60rem) {
  .wasap { display: none; }
  [data-wasap-activo] .pie__base { padding-bottom: 0; }
}

/* En pantallas estrechas el rótulo estorba: queda la marca, y el nombre
   accesible lo sigue diciendo entero.                                       */
@media (max-width: 29.999rem) {
  .wasap { padding: 0; width: 3.25rem; justify-content: center; }
  .wasap__texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* --- FRANJA DE EDAD ----------------------------------------------------------------- */

.edad {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-edad);
  padding: var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
  background: var(--tinta);
  color: var(--suelo);
  transform: translateY(100%);
  transition: transform var(--t-panel) var(--ease-drawer);
}
.edad[data-visible] { transform: translateY(0); }

.edad__caja {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: var(--s2);
}
.edad__texto { max-width: 62ch; color: var(--noche-2); }
.edad__botones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }

@media (min-width: 60rem) {
  .edad__caja {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s7);
  }
  .edad__botones { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .edad { transform: none; opacity: 0; transition: opacity var(--t-ui) ease; }
  .edad[data-visible] { opacity: 1; }
}

/* --- REVELADO ----------------------------------------------------------------------- */
/* El único movimiento con autor de la web: cada foto se abre desde el centro
   hacia los lados, como un corchete que se separa para dejar ver la obra.
   El contenido está visible por defecto; esto solo se activa con JavaScript
   y si el usuario no ha pedido menos movimiento.                             */

[data-revelar="espera"] {
  clip-path: inset(0 50% 0 50%);
  opacity: 0.001;
}
[data-revelar="hecho"] {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path var(--t-reveal) var(--ease-out),
              opacity 220ms var(--ease-out);
}