/* =========================================================
   Florencia Arecha — hoja de estilo
   Mobile-first. Escala hacia arriba con media queries.
   ========================================================= */

/* ---------- Tipografía propia de Florencia ----------
   Cuando tengas el archivo, dejá el .woff2 en assets/fonts/
   y la página usará tu tipografía en todos los titulares.
   Mientras tanto usa "Fraunces" como respaldo elegante. */
@font-face {
  font-family: "Florencia Display";
  /* Poné tu archivo en assets/fonts/ con cualquiera de estos nombres.
     El navegador usa el primero que encuentre; los que falten se ignoran. */
  src: url("../assets/fonts/florencia-display.woff2") format("woff2"),
       url("../assets/fonts/florencia-display.woff") format("woff"),
       url("../assets/fonts/florencia-display.ttf") format("truetype"),
       url("../assets/fonts/florencia-display.otf") format("opentype");
  font-weight: 400 700;
  font-display: swap;
}
/* Fix de la "í": en florencia-display.ttf la tilde de las vocales acentuadas
   viene CORTADA (comprobado midiendo píxeles del glifo). Solo para esos
   caracteres tomamos el glifo de la fuente Accent de Flor (su misma mano, con la
   tilde completa). Al ir después, gana para ese unicode-range. Workaround temporal
   hasta re-exportar florencia-display con la í bien. */
@font-face {
  font-family: "Florencia Display";
  src: url("../assets/fonts/florencia-accent.ttf") format("truetype");
  unicode-range: U+00C0-024F; /* vocales/consonantes acentuadas latinas (á é í ó ú ñ ü …) */
  font-weight: 400 700;
  font-display: swap;
}

/* Tipografía para el CUERPO de texto (párrafos), cuando la tengas:
   assets/fonts/florencia-body.woff2 / .woff / .ttf / .otf */
@font-face {
  font-family: "Florencia Body";
  src: url("../assets/fonts/florencia-body.woff2") format("woff2"),
       url("../assets/fonts/florencia-body.woff") format("woff"),
       url("../assets/fonts/florencia-body.ttf") format("truetype"),
       url("../assets/fonts/florencia-body.otf") format("opentype");
  font-weight: 400 700;
  font-display: swap;
}

/* Tipografía "para jugar" (detalles, palabras destacadas), cuando la tengas:
   assets/fonts/florencia-accent.woff2 / .woff / .ttf / .otf */
@font-face {
  font-family: "Florencia Accent";
  src: url("../assets/fonts/florencia-accent.woff2") format("woff2"),
       url("../assets/fonts/florencia-accent.woff") format("woff"),
       url("../assets/fonts/florencia-accent.ttf") format("truetype"),
       url("../assets/fonts/florencia-accent.otf") format("opentype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Paleta: azul cianotipo profundo (la obra de Flor es azul con línea blanca).
     Chrome oscuro tipo galería para que las ilustraciones resalten. */
  color-scheme: dark;
  --bg: #0E2A47;
  --bg-soft: #16375C;
  --ink: #EAF2FB;
  --muted: #9FBAD6;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #7FC6E8;
  --accent-dark: #5AA6CC;
  --wa: #25D366;

  --font-display: "Florencia Display", "Fraunces", Georgia, serif;
  --font-body: "Florencia Body", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Florencia Accent", "Fraunces", Georgia, serif;

  --wrap: 1400px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --radius: 14px;
  --shadow: 0 12px 40px -18px rgba(33, 30, 27, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin: 0; }

/* Usá esta clase en cualquier palabra/detalle para la fuente "de jugar" */
.font-accent { font-family: var(--font-accent); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 500;
  text-decoration: none; border: 1.5px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #0B2438; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- Header / navegación ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 42, 71, 0.8);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: .85rem var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: var(--font-display); font-size: 1.35rem;
  text-decoration: none; letter-spacing: .01em;
}
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  list-style: none; margin: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: grid; gap: .25rem; padding: .5rem var(--pad) 1.25rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-menu a {
  display: block; padding: .7rem .25rem; text-decoration: none;
  font-weight: 500; border-bottom: 1px solid var(--line);
}
.nav-menu li:last-child a { border-bottom: 0; }
.nav-cta { color: var(--accent); }

/* Botón de idioma EN/ES + grupo de acciones del menú */
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.lang-toggle {
  background: none; border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .32rem .7rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; cursor: pointer; line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-direction: column;
  padding: 1.5rem var(--pad) 0.5rem;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .78rem;
  color: var(--accent); margin: 0 0 1rem; font-weight: 600;
}
.hero-title {
  font-size: clamp(3.8rem, 16vw, 10rem);
  letter-spacing: -.01em; margin-bottom: 1.4rem;
}
.hero-lead {
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  color: var(--muted); max-width: 34ch; margin: 0 0 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Pestañas (Tab Switcher) ---------- */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* Marca la pestaña activa en la navegación */
.nav-menu a.active {
  color: var(--accent);
}
.nav-cta.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ---------- Secciones ---------- */
.section {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad);
}
/* Obras e Ilustraciones digitales usan el mismo margen de página que Inicio y
   Murales (max-width var(--wrap) + var(--pad)); heredan .section sin override. */
.section-head { margin-bottom: 2rem; }
.section-title { font-size: clamp(2rem, 8vw, 3rem); }
.section-sub { color: var(--muted); margin: .6rem 0 0; max-width: 48ch; }

/* ---------- Galería (masonry con columnas) ---------- */
.gallery { columns: 2; column-gap: .6rem; }
/* Masonry por JS: columnas reales (flex). Igual que .obras-grid, evita el bug de
   CSS `columns` en iOS Safari donde las imágenes de una pestaña oculta que se
   muestra quedan "fantasma" (en blanco) hasta tocarlas. */
.gallery.js-masonry {
  display: flex; align-items: flex-start; gap: .6rem;
  columns: auto;   /* anula el multicolumn CSS base; el separado lo da `gap` (flex) */
}
.gallery.js-masonry .masonry-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.gallery.js-masonry .masonry-col > .art { width: 100%; margin: 0; }
.art {
  break-inside: avoid; margin-bottom: .6rem; cursor: pointer;
  border: 0; padding: 0; background: none; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); position: relative;
  transition: transform .25s ease;
}
.art:hover { transform: translateY(-3px); }
.art img { width: 100%; height: auto; display: block; background: var(--bg-soft); }
.art figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .9rem .8rem; color: #fff; text-align: left;
  font-family: var(--font-accent); font-size: 1.75rem; opacity: 0;
  background: linear-gradient(to top, rgba(20,16,12,.75), transparent);
  transition: opacity .25s ease;
}
.art:hover figcaption, .art:focus-visible figcaption, .art.revealed figcaption { opacity: 1; }

/* ---------- Sobre mí ---------- */
.about {
  padding-top: 0;
}
.about-grid { display: grid; gap: 1.8rem; }
.about-portrait {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--bg-soft); box-shadow: var(--shadow);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.about-portrait .slide.is-active { opacity: 1; }
.about-dots {
  position: absolute; bottom: .7rem; left: 0; right: 0; z-index: 2;
  display: flex; gap: .45rem; justify-content: center;
}
.about-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: background .2s ease, transform .2s ease;
}
.about-dot.is-active { background: #fff; transform: scale(1.25); }

/* Botones de navegación invisibles del carrusel */
.about-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  color: transparent;
  font-size: 3rem;
  font-weight: 200;
  line-height: 1;
  padding: 0 .6rem;
  transition: color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.about-nav:hover,
.about-nav:focus-visible {
  color: rgba(255,255,255,.75);
  background: linear-gradient(to right, rgba(0,0,0,.18), transparent);
}
.about-prev { left: 0; justify-content: flex-start; }
.about-next { right: 0; justify-content: flex-end; }
.about-next:hover,
.about-next:focus-visible {
  background: linear-gradient(to left, rgba(0,0,0,.18), transparent);
}
.about-text p { color: var(--muted); }
.link-arrow {
  display: inline-block; margin-top: .5rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.link-arrow::after { content: " →"; transition: margin .2s ease; }
.link-arrow:hover::after { margin-left: .3rem; }

/* ---------- Murales e Ilustraciones ---------- */
.murales-steps,
.ilustraciones-steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.mural-step {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 2rem 1.8rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.mural-step::before {
  content: attr(data-step);
  position: absolute;
  top: 0.5rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.05);
  line-height: 1;
  font-weight: 700;
}
.mural-step h3 {
  font-size: 1.7rem;
  margin-bottom: .6rem;
  color: var(--accent);
  font-family: var(--font-accent);
}
.mural-step p {
  color: var(--muted);
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}
.murales-cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* ---------- Categorías Destacadas (Inicio) ---------- */
.categories-grid {
  display: grid;
  gap: 1.8rem;
  margin-top: 2rem;
}
.category-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.category-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}
.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.category-card:hover .category-card__media img {
  transform: scale(1.05);
}
.category-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.category-card__body h3 {
  font-size: 2.8rem;
  font-family: var(--font-accent);
  letter-spacing: .02em;
  line-height: 1;
}
.category-card__body p {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}
.category-card__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- Filtros de Tienda ---------- */
.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}
.filter-btn {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: .55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 500;
  font-family: var(--font-body);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.filter-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.filter-btn.active {
  background: var(--accent);
  color: #0b2438;
  border-color: var(--accent);
}
.filter-btn:active {
  transform: scale(0.97);
}

/* ---------- Controles de Galería (Alineación y estilo) ---------- */
.gallery-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.2rem;
}
.control-separator {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 .4rem;
  align-self: center;
}
@media (max-width: 520px) {
  .control-separator {
    display: none;
  }
}
.layout-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: .55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.layout-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.layout-btn.active {
  background: var(--accent);
  color: #0b2438;
  border-color: var(--accent);
}
.layout-btn:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .layout-btn .btn-text {
    display: none;
  }
  .layout-btn svg {
    margin-right: 0 !important;
  }
  .layout-btn {
    padding: .55rem .85rem;
  }
  .filter-btn {
    padding: .55rem 1rem;
    font-size: .88rem;
  }
  .gallery-controls {
    gap: .5rem;
  }
}

/* ---------- Vista de Lista = una sola columna (fotos grandes) ----------
   Misma lógica que la cuadrícula: 1 clic revela la info sobre la foto,
   doble clic abre el lightbox. */
#obras-grid.list-view {
  columns: 1;
  column-gap: 0;
  max-width: 620px;
  margin: 0 auto;
}

/* Murales: siempre en lista (una columna) para verlos grandes, no en galería. */
#murales-grid {
  columns: 1 !important;
  column-gap: 0;
  display: block;
  max-width: 720px;
  margin: 0 auto;
}
#murales-grid .art { width: 100%; margin: 0 0 1rem; break-inside: avoid; }
#murales-grid .art img { width: 100%; height: auto; display: block; }

/* ---------- Obra en venta ---------- */
.store-grid { display: grid; gap: 1.5rem; }

/* ---- Masonry por columnas: cada foto se ve COMPLETA, respeta su proporción (sin recorte) ---- */
.obras-grid {
  columns: 2;          /* fallback si el JS de masonry no corriera */
  column-gap: 6px;
}
/* Masonry por JS: columnas reales (fiable y responsive). Se activa cuando el JS arma las columnas. */
.obras-grid.js-masonry:not(.list-view) {
  display: block;
  columns: auto;
}
/* Cada tanda de obras sueltas es una fila de columnas; las series van full-width entre medio. */
.masonry-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}
.masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.obras-grid .masonry-col > .card,
.obras-grid .masonry-col > .art {
  width: 100%;
  margin: 0;
}

.obras-grid .art,
.obras-grid .card {
  break-inside: avoid;
  width: 100%;
  margin: 0 0 6px;
}
/* El collage muestra SOLO las imágenes: la info de cada obra vive en la vista
   expandida (lightbox), no en la grilla. */
.obras-grid .card { position: relative; cursor: pointer; }
.obras-grid .card-body { display: none; }

/* La imagen respeta su proporción real (no se recorta) */
.obras-grid .art img {
  width: 100%; height: auto;
  display: block;
}
.obras-grid .card-media {
  aspect-ratio: unset;
  height: auto;
  flex: none;
}
.obras-grid .card-media img {
  width: 100%; height: auto;   /* imagen a su tamaño/proporción real, sin recorte */
  display: block;
}

/* Reveal: la info se despliega como panel DEBAJO de la foto (nunca se corta, no
   reordena el masonry). Aplica igual en cuadrícula y en lista. */
.obras-grid .card { overflow: visible; }
.obras-grid .card-media { border-radius: var(--radius); overflow: hidden; }
.obras-grid .card .card-body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 5;
  max-height: none;
  padding: .9rem 1rem 1.05rem;
  gap: .35rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.obras-grid .card.revealed .card-body {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.obras-grid .card .card-body h3 { font-size: 1.4rem; margin: 0; }
.obras-grid .card .card-body .card-meta { font-size: .85rem; }
.obras-grid .card .card-body .card-price { font-size: 1rem; margin: 0; }
.obras-grid .card .card-body .btn {
  margin-top: .5rem;
  padding: .6rem 1rem;
  font-size: .9rem;
  width: 100%;
}
.card {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card-media { aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform .25s ease; }
.card-media img:hover { transform: scale(1.04); }
.card-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: .4rem; flex: 1;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height .35s ease, padding .3s ease;
}
.card.revealed .card-body {
  max-height: 400px;
  padding: 1.1rem 1.2rem 1.3rem;
}
.card-info { display: flex; flex-direction: column; gap: .4rem; }
.card h3 { font-size: 2.15rem; font-family: var(--font-accent); }
.card-meta { color: var(--muted); font-size: .92rem; margin: 0; }
.badge {
  align-self: flex-start; font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .28rem .6rem; border-radius: 999px;
}
.badge.disponible { background: #E7F3EA; color: #2C7A46; }
.badge.vendido { background: #F1E7E4; color: #9A4A34; }
.badge.pedido { background: #EFEAF7; color: #6A4CA0; }
.badge.digital { background: #E4EEF7; color: #2E6DA4; }
.card-price { font-weight: 600; font-size: 1.05rem; margin: .2rem 0 0; }
.card .btn { margin-top: auto; }
.btn-wa { background: var(--wa); color: #08341a; }
.btn-wa:hover { background: #1fb355; }

/* ---------- Contacto ---------- */
.contact { text-align: center; }
.contact-inner { max-width: 640px; margin: 0 auto; }
/* El subtítulo tiene max-width (48ch); sin margin auto quedaba anclado a la
   izquierda y descentrado respecto del título. Lo centro dentro de .contact-inner. */
.contact .section-sub { margin-left: auto; margin-right: auto; }
.contact-links { display: grid; gap: .9rem; margin-top: 2rem; }
.contact-link {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.1rem 1.25rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: 1.05rem;
  color: #fff; transition: transform .15s ease, filter .2s ease;
}
.contact-link:hover { transform: translateY(-2px); filter: brightness(1.07); }
.contact-link svg { width: 22px; height: 22px; flex: none; }
.contact-link.wa { background: var(--wa); }
.contact-link.ig {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.contact-link.mail { background: var(--accent); color: #0B2438; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); text-align: center;
  padding: 2.5rem var(--pad) 3rem; margin-top: 2rem;
}
.footer-brand { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 .3rem; }
.footer-meta { color: var(--muted); font-size: .9rem; margin: 0; }
.footer-credit {
  color: var(--muted);
  font-size: .72rem;
  margin: .6rem 0 0;
  opacity: .55;
}
.footer-credit a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.footer-credit a:hover { opacity: 1; color: var(--accent); }

/* ---------- Botones flotantes (WhatsApp + Instagram) ---------- */
.floats {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: .7rem;
}
.float-btn {
  width: 56px; height: 56px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.float-btn:hover { transform: scale(1.08); }
.wa-float { background: var(--wa); box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .7); }
.ig-float {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 10px 30px -8px rgba(214, 36, 159, .55);
}

/* ---------- Placeholder cuando falta una imagen ---------- */
.img-missing { visibility: hidden; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(18, 14, 11, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lb-figure {
  margin: 0;
  max-width: 92vw;
  max-height: 85vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 6px;
}
.lb-figure img {
  max-width: 92vw;
  max-height: 60vh;
  border-radius: 8px;
  object-fit: contain;
}
@media (min-width: 720px) {
  .lb-figure img { max-height: 75vh; }
}
.lb-figure figcaption {
  color: #f4efe8;
  margin-top: .8rem;
  font-family: var(--font-accent);
  font-size: 1.9rem;
}
/* Visor individual: globito + título (tipografía manuscrita) + info (tipografía
   de cuerpo y color tenue), igual que en las series/colecciones. */
.lb-figure figcaption.lb-cap {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: 1rem;
}
.lb-cap .badge { align-self: center; margin-bottom: .15rem; }
.lb-cap-title { font-family: var(--font-accent); font-size: 1.9rem; line-height: 1.05; color: #f4efe8; }
.lb-cap-info { font-family: var(--font-body); color: var(--muted); font-size: .95rem; }
.lb-cta {
  margin-top: 1.2rem;
}

/* Carrusel de fotos extra dentro del lightbox (mismo estilo que "Sobre mí":
   slides con fade, botones invisibles y puntitos). */
/* El carrusel se ajusta al tamaño de la imagen activa (no una caja fija), así los
   botones laterales ocupan exactamente el alto de cada foto. */
.lb-carousel {
  position: relative;
  max-width: 92vw;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.lb-carousel .slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .4s ease;
  border-radius: 0;
}
/* La foto activa va en el flujo y define el tamaño del carrusel; las demás se
   superponen (absolutas) para el fundido. */
.lb-carousel .slide.is-active {
  position: relative;
  display: block;
  opacity: 1;
  width: auto; height: auto;
  max-width: 92vw; max-height: 60vh;
}
@media (min-width: 720px) {
  .lb-carousel .slide.is-active { max-height: 75vh; }
}
/* Carrusel dentro de una pieza de serie: del tamaño de la imagen de pieza. */
.lb-series-item .lb-carousel {
  width: auto;
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.lb-series-item .lb-carousel .slide.is-active { max-height: 380px; max-width: 100%; }

/* Estilos para series de obras agrupadas dentro del Lightbox */
.lb-series-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem 0;
  width: 100%;
}
.lb-series-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 2.2rem;
  width: 100%;
}
.lb-series-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.lb-series-item img {
  max-width: 100%;
  max-height: 380px !important;
  border-radius: var(--radius);
  object-fit: contain;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.lb-close, .lb-nav {
  position: absolute; background: rgba(255,255,255,.1); color: #fff;
  border: 0; cursor: pointer; border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
  z-index: 6; /* por encima de las flechas del carrusel (.about-nav z-index:3) */
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* Grilla interna de sub-obras en tarjetas de serie */
/* Serie a ancho completo, integrada al collage: sin caja/tinte propio, y con las
   MISMAS columnas que el masonry (2/3/4 según el ancho) → cada miniatura queda
   del tamaño de una obra suelta y se ve consistente también en mobile. */
.obras-grid .card--serie {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.card-media.has-sub-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2, igual que el masonry */
  gap: 6px;
  padding: 8px;
  /* Recuadro azul suave: agrupa visualmente las piezas de una misma serie. */
  background: rgba(127, 198, 232, 0.07);
  border: 1px solid rgba(127, 198, 232, 0.16);
  border-radius: var(--radius);
  overflow: visible;
  height: auto;
}
@media (min-width: 720px) {
  .card-media.has-sub-items { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .card-media.has-sub-items { grid-template-columns: repeat(4, 1fr); }
}
.card-media.has-sub-items img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);   /* mismo redondeo que las obras del collage */
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.card-media.has-sub-items img:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

/* ---------- Formulario de Contacto ---------- */
.contact-form {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto 0;
  text-align: left;
  box-shadow: var(--shadow);
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 480px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.contact-form label {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: .45rem;
  color: var(--ink);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}
.form-footer {
  text-align: center;
  margin-top: 1.5rem;
}
.form-footer .btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
  width: 100%;
  font-family: var(--font-body);
}
.form-footer .btn-wa:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}
.form-footer .btn-wa:active {
  transform: translateY(-1px) scale(0.99);
}
.form-footer .btn-wa svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.form-note {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .8rem;
  display: block;
  line-height: 1.4;
}

/* =========================================================
   TABLET / DESKTOP
   ========================================================= */
@media (min-width: 720px) {
  .nav-toggle { display: none; }
  .nav-menu {
    position: static; display: flex; gap: 1.8rem; align-items: center;
    background: none; border: 0; padding: 0;
    transform: none; opacity: 1; pointer-events: auto;
  }
  .nav-menu a { border: 0; padding: .3rem 0; }
  .nav-cta {
    border: 1.5px solid var(--accent); border-radius: 999px;
    padding: .5rem 1.1rem !important; color: var(--accent);
  }
  .nav-cta:hover { background: var(--accent); color: #fff; }

  .gallery { columns: 3; }
  .about-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 3rem; }
  .murales-steps,
  .ilustraciones-steps { grid-template-columns: repeat(3, 1fr); }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .store-grid { grid-template-columns: repeat(2, 1fr); }
  .obras-grid { columns: 3; }
  /* auto-fit: los botones (Instagram/Email) se reparten en columnas iguales y
     quedan centrados sea cual sea la cantidad (evita columnas vacías descentradas). */
  .contact-links { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (min-width: 1024px) {
  .gallery { columns: 4; }
  .store-grid { grid-template-columns: repeat(3, 1fr); }
  .obras-grid { columns: 4; }
}

@media (min-width: 1440px) {
  .gallery { columns: 5; }
  .store-grid { grid-template-columns: repeat(4, 1fr); }
  .obras-grid { columns: 5; }
}

/* ---------- Fondo mural animado ----------
   Capa fija detrás de todo: deriva sola y se corre con el scroll (parallax).
   Si existe assets/img/mural.jpg, main.js lo usa; si no, queda este degradé. */
.mural-bg { position: fixed; inset: -32% 0; z-index: -2; overflow: hidden; will-change: transform; }
.mural-bg__layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-image:
    radial-gradient(42% 50% at 18% 28%, rgba(80, 165, 220, .42), transparent 70%),
    radial-gradient(46% 55% at 82% 22%, rgba(35, 95, 155, .45), transparent 72%),
    radial-gradient(55% 60% at 62% 88%, rgba(95, 185, 225, .32), transparent 72%),
    linear-gradient(160deg, #0b2138, #123a63 55%, #0b2138);
  animation: muralDrift 22s ease-in-out infinite alternate;
}
.mural-bg__scrim { position: absolute; inset: 0; background: rgba(14, 42, 71, .58); }
@keyframes muralDrift {
  from { transform: scale(1.1) translate3d(-5%, -3.5%, 0); }
  to   { transform: scale(1.24) translate3d(5%, 4.5%, 0); }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  /* El fondo mural se mueve siempre (decisión del sitio), aunque se pida menos movimiento. */
}