/* =========================================================
   Nuestra Vida Tattoo: estilos generales
   Variables, fuentes, reset, utilidades, botones,
   header y footer compartidos.
   Valores tomados del Figma (00 - Styles, 0a - Components, 01 - Home).
   ========================================================= */

/* ---------- Fuentes autoalojadas (Google Fonts, subset latin) ----------
   Cormorant Garamond e Inter son variables: un archivo cubre todos los pesos. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* New Rocker: menú del header y del footer desktop, botón del header y estrellas
   (reemplaza a KC Obra Letra en el Figma, confirmado por Mauro) */
@font-face {
  font-family: "New Rocker";
  src: url("/fonts/new-rocker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  /* Paleta (Figma, 00 - Styles) */
  --color-gold: #d3af37;
  --color-blue: #0e3347;
  --color-light-blue: #295e7d;
  --color-off-white: #f5f1f0;
  --color-black: #141313;
  --color-white: #fff; /* usado en el Figma: borde del botón del header, texto del hero, tarjeta de reseña */

  /* Familias (las del Figma, de Google Fonts) */
  --font-title: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-nav: "New Rocker", Georgia, serif;

  /* Escala tipográfica (Figma, 00 - Styles). Los tamaños propios de cada
     sección (desktop y mobile) están en el css de cada página. */
  --text-h1: 4.5rem;          /* 72px */
  --leading-h1: 4.875rem;     /* 78px */
  --text-h2: 3.25rem;         /* 52px */
  --leading-h2: 3.625rem;     /* 58px */
  --text-h3: 2rem;            /* 32px */
  --leading-h3: 2.625rem;     /* 42px */
  --text-body-lg: 1.25rem;    /* 20px */
  --leading-body-lg: 1.75rem; /* 28px */
  --text-body: 1.125rem;      /* 18px */
  --leading-body: 1.5rem;     /* 24px */
  --text-button: 1rem;        /* 16px */
  --leading-button: 1.25rem;  /* 20px */

  /* Layout */
  --container-width: 1200px;  /* ancho del contenido en desktop (Figma) */
  --gutter: 20px;             /* margen lateral del header en mobile (Figma) */
  --section-gutter: 40px;     /* margen lateral de las secciones en mobile (Figma) */

  /* Movimiento */
  --duration-base: 300ms;     /* AJUSTAR: más alto, transiciones más lentas */
  --duration-reveal: 700ms;   /* AJUSTAR: duración de la aparición al scrollear */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* arranca y frena suave */
  --duration-faq: 600ms;      /* AJUSTAR: apertura de las preguntas (igualar DURATION en js/faq.js) */
  --duration-menu: 450ms;     /* AJUSTAR: despliegue del menú mobile del header */
  --duration-review: 450ms;   /* AJUSTAR: "Ver más" de las reseñas (mobile) */

  /* Header (Figma, 0a - Components) */
  --header-height: 105px;     /* mobile: 30% más bajo que el Figma (150), pedido de Mauro */
  --header-logo: 72px;        /* mobile: más chico que el Figma (90), pedido de Mauro */
  /* Header sólido al scrollear (pedido de Mauro): un poco más bajo y con el logo apenas más chico.
     Espacio arriba y abajo del logo = (alto - logo) / 2. Arriba: 16,5px. Sólido: 14px. */
  --header-height-scrolled: 92px; /* AJUSTAR: alto del header sólido */
  --header-logo-scrolled: 64px;   /* AJUSTAR: tamaño del logo con el header sólido */
  --header-scroll-threshold: 24px; /* AJUSTAR: px de scroll antes de que el header se vuelva sólido */
}

/* Breakpoint desktop: 64rem (1024px). Debajo, diseño mobile (frame de 390);
   desde ahí, diseño desktop (frame de 1440) con el contenido fluido hasta 1200px.
   Si se cambia, cambiarlo también en js/header.js (DESKTOP_QUERY) y en los css de página. */
@media (min-width: 64rem) {
  :root {
    --header-height: 96px;    /* desktop: 1440 x 96 */
    --header-logo: 90px;      /* Figma: 90 x 90 */
    /* Desktop: el header sólido no cambia de tamaño */
    --header-height-scrolled: var(--header-height);
    --header-logo-scrolled: var(--header-logo);
  }
}

/* Con movimiento reducido, todos los cambios son instantáneos */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-base: 0.01ms;
    --duration-reveal: 0.01ms;
    --duration-faq: 0.01ms;
    --duration-menu: 0.01ms;
    --duration-review: 0.01ms;
  }
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Los anclas y el "saltar al contenido" no quedan tapados por el header fijo */
  scroll-padding-top: var(--header-height);
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-black);
  background-color: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
}

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

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

a {
  color: inherit;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-title);
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

/* ---------- Accesibilidad ---------- */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Saltar al contenido": invisible hasta que recibe foco con teclado */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-blue);
  color: var(--color-off-white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Utilidades ---------- */
.container {
  width: min(var(--container-width), 100% - 2 * var(--section-gutter));
  margin-inline: auto;
}

/* Para páginas sin hero (404): el contenido arranca debajo del header fijo */
.has-header-offset {
  padding-top: var(--header-height);
}

/* Aparición al scrollear (js/animations.js). Sin JS no se oculta nada. */
.is-reveal-pending {
  opacity: 0;
  transform: translateY(24px); /* AJUSTAR: distancia del desplazamiento al aparecer */
}

.is-revealed {
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

/* =========================================================
   Botones (Figma: Label/Button, alto 44, radio 20, padding 12 20)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 700;
  line-height: var(--leading-button);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

/* Borde y texto dorados (hero) */
.btn--outline-gold {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn--outline-gold:hover {
  background-color: var(--color-gold);
  color: var(--color-blue);
}

/* Fondo dorado, texto negro (Nuestro estudio) */
.btn--gold {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
}

.btn--gold:hover {
  background-color: var(--color-off-white);
  border-color: var(--color-off-white);
}

/* Links con flecha ("VER MÁS →", "VER GALERIA →", "Instagram ↗") */
.link-arrow {
  text-decoration: none;
}

.link-arrow__icon {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-arrow:hover .link-arrow__icon {
  transform: translateX(4px);
}

/* =========================================================
   Header compartido (todas las páginas)
   - Arriba de todo: transparente, superpuesto al hero.
   - .is-scrolled (al pasar el umbral), .is-menu-open (menú mobile abierto)
     y .site-header--solid (páginas sin hero): fondo azul y botón dorado.
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--color-off-white);
}

/* Fondo sólido como capa aparte: se anima solo la opacidad */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-blue);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled::before,
.site-header.is-menu-open::before,
.site-header--solid::before {
  opacity: 1;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: var(--gutter);
  transition: height var(--duration-base) var(--ease-out);
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  width: var(--header-logo);
  height: var(--header-logo);
  transition:
    width var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
  height: var(--header-height-scrolled);
}

.site-header.is-scrolled .site-header__logo img {
  width: var(--header-logo-scrolled);
  height: var(--header-logo-scrolled);
}

/* Botón de menú (mobile). Ícono "Menu" del Figma, 40 x 40 */
.site-header__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-off-white);
}

.site-header__toggle svg {
  width: 24px;
  height: 24px;
}

.site-header__icon-close,
.site-header.is-menu-open .site-header__icon-open {
  display: none;
}

.site-header.is-menu-open .site-header__icon-close {
  display: block;
}

/* Menú mobile (no está en el Figma, armado coherente con el resto):
   mismo azul del header sólido, links con el estilo del menú del footer mobile.
   Cerrado: oculto y recortado desde abajo. Al abrir se despliega hacia abajo con un fundido
   (pedido de Mauro). visibility lo saca del foco del teclado mientras está cerrado.
   Sin JS se muestra siempre (ver más abajo). */
.site-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 0 var(--gutter) 40px;
  background: var(--color-blue);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--duration-menu) var(--ease-in-out),
    opacity var(--duration-menu) var(--ease-in-out),
    visibility 0s linear var(--duration-menu);
}

.site-header.is-menu-open .site-header__nav {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
  transition:
    clip-path var(--duration-menu) var(--ease-in-out),
    opacity var(--duration-menu) var(--ease-in-out),
    visibility 0s;
}

.site-header__links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-header__links a {
  display: block;
  font-family: var(--font-title);
  font-size: 1.5rem;   /* 24px, como el menú del footer mobile */
  font-weight: 700;
  line-height: 42px;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

.site-header__links a:hover,
.site-header__links a[aria-current="page"] {
  color: var(--color-gold);
}

/* Botón "Reservá tu cita" del header (Figma: 172 x 44) */
.site-header__cta {
  width: 172px;
  height: 44px;                  /* Figma: 172 x 44 */
  padding-block: 0;
  font-family: var(--font-nav);  /* Figma: New Rocker 16, interlineado 42 */
  font-weight: 400;
  line-height: 42px;
  border-color: var(--color-white);
  color: var(--color-off-white);
}

.site-header__cta:hover {
  background-color: var(--color-off-white);
  border-color: var(--color-off-white);
  color: var(--color-blue);
}

.site-header.is-scrolled .site-header__cta,
.site-header.is-menu-open .site-header__cta,
.site-header--solid .site-header__cta {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-blue);
}

.site-header.is-scrolled .site-header__cta:hover,
.site-header.is-menu-open .site-header__cta:hover,
.site-header--solid .site-header__cta:hover {
  background-color: var(--color-off-white);
  border-color: var(--color-off-white);
}

/* El foco del botón dorado se dibuja en claro para que se vea sobre el azul */
.site-header__cta:focus-visible {
  outline-color: var(--color-off-white);
}

.site-header__nav .site-header__cta {
  margin-top: 24px;
}

/* Sin JS el botón de menú no sirve: se oculta y el menú queda visible */
@media (scripting: none) {
  .site-header__toggle {
    display: none;
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    position: static;
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    clip-path: none;
  }

  .site-header__links {
    flex-direction: row;
    gap: 16px;
  }

  .site-header__nav .site-header__cta {
    margin-top: 0;
  }
}

@media (min-width: 64rem) {
  .site-header__inner {
    width: min(var(--container-width), 100% - 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: 0;
  }

  .site-header__toggle {
    display: none;
  }

  /* Desktop: links y botón en línea (Figma: gap 32) */
  .site-header__nav,
  .site-header.is-menu-open .site-header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    clip-path: none;
    transition: none;
  }

  .site-header__links {
    flex-direction: row;
    gap: 32px;
  }

  /* Figma: New Rocker 16, interlineado 42 */
  .site-header__links a {
    font-family: var(--font-nav);
    font-size: 1rem;
    font-weight: 400;
    line-height: 42px;
  }

  .site-header__nav .site-header__cta {
    margin-top: 0;
  }
}

/* Marcador invisible que crea js/header.js para detectar el scroll */
.header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--header-scroll-threshold);
  pointer-events: none;
  visibility: hidden;
}

/* =========================================================
   Footer compartido (Figma: footer-desktop y footer-mobile)
   ========================================================= */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-off-white);
  padding-block: 50px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 20px;
}

.site-footer__logo {
  align-self: center;
}

.site-footer__logo img {
  width: auto;
  height: 112px; /* Figma mobile: logo centrado, 112 de alto */
}

/* Mobile: dos columnas (Inicio / Tattoos, Piercings / Nosotros) */
.site-footer__links {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  justify-content: center;
  column-gap: 50px;
  row-gap: 5px;
}

/* Figma mobile: Cormorant Garamond Bold 24, interlineado 42 */
.site-footer__links a {
  font-family: var(--font-title);
  font-size: 1.5rem;  /* 24px */
  font-weight: 700;
  line-height: 42px;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] {
  color: var(--color-gold);
}

/* Datos de contacto (no están en el Figma: se suman por SEO local, docs/seo.md).
   Mismo estilo que el copyright, sin itálica. */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 20px;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
}

.site-footer__address {
  font-style: normal;
}

.site-footer__contact a {
  text-decoration: none;
}

.site-footer__contact a:hover {
  color: var(--color-gold);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: 20px;
  border-top: 1px solid var(--color-gold);
}

/* Figma: Inter Italic 14, interlineado 20 */
.site-footer__copy {
  font-size: 0.875rem; /* 14px */
  font-style: italic;
  line-height: 1.25rem;
}

.site-footer__social {
  color: var(--color-gold);
  font-size: var(--text-button);
  font-weight: 700;
  line-height: var(--leading-button);
}

/* Mobile: Instagram a la izquierda y WhatsApp pegado al margen derecho, en la misma línea */
.site-footer__socials {
  display: flex;
  justify-content: space-between;
  align-self: stretch;
  gap: 20px;
}

/* WhatsApp: un link por breakpoint (mobile en .site-footer__socials, desktop en .site-footer__contact) */
.site-footer__whatsapp--desktop {
  display: none;
}

@media (min-width: 64rem) {
  .site-footer {
    padding-block: 60px; /* Figma: 40 del footer + 20 del contenedor */
  }

  .site-footer__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-block: 32px;
  }

  .site-footer__logo {
    align-self: auto;
  }

  .site-footer__logo img {
    height: 90px; /* Figma desktop */
  }

  .site-footer__links {
    grid-template-rows: none;
    grid-auto-flow: column;
    column-gap: 32px;
  }

  /* Figma desktop: New Rocker 16, interlineado 42 */
  .site-footer__links a {
    font-family: var(--font-nav);
    font-size: 1rem;
    font-weight: 400;
    line-height: 42px;
  }

  /* Horario y dirección a la izquierda, WhatsApp a la derecha */
  .site-footer__contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .site-footer__whatsapp--desktop {
    display: inline;
  }

  .site-footer__whatsapp--mobile {
    display: none;
  }

  .site-footer__socials {
    align-self: auto;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================
   Carrusel compartido (js/carousel.js)
   Pista con scroll horizontal y snap. Funciona sin JS (se desliza a mano).
   ========================================================= */
.carousel__track {
  position: relative; /* referencia de offsetLeft para js/carousel.js */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Puntos (Figma: 3 círculos de 10 px, #C5C5C5). El activo va en azul claro. */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c5c5c5;
  transition: background-color var(--duration-base) var(--ease-out);
}

.carousel__dot[aria-current="true"] {
  background-color: var(--color-light-blue);
}

/* Flechas (Figma: 40 x 40, Inter Bold 24, azul) */
.carousel__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75rem;
  transition: color var(--duration-base) var(--ease-out);
}

/* Solo con mouse: en pantallas táctiles el hover queda pegado después de tocar */
@media (hover: hover) {
  .carousel__arrow:hover {
    color: var(--color-gold);
  }
}

/* Flechas en SVG: el Inter autoalojado (subset latin) no trae ← ni →, y con la fuente
   del sistema cada flecha salía de un tamaño distinto en el celu */
.carousel__arrow svg {
  width: 24px;  /* AJUSTAR: tamaño de las flechas */
  height: 24px;
}

/* Sin JS las flechas y los puntos no funcionan: se ocultan */
@media (scripting: none) {
  .carousel__arrow,
  .carousel__dots {
    display: none;
  }
}