/* ==========================================================================
   Marieta Art — hoja de estilos base
   Paleta y tono definidos en BRIEF-DIRECCION-CREATIVA.md (secciones 8 y 11).
   Estructura y microinteracciones portadas desde la maqueta de Claude Design.
   ========================================================================== */

:root {
  /* Paleta Formentera */
  --color-blanco: #fdfcf9;
  --color-verde-sabina: #5b6b52;
  --color-turquesa: #4fa9a3;
  --color-azul-cielo: #a9cbd8;
  --color-arena: #e8ddc7;
  --color-siena: #b3693f;
  --color-marron: #6f5a45;
  --color-ocre: #c99a4a;
  --color-amarillo-suave: #e9d18b;
  --color-naranja-atardecer: #d98a55;
  --color-rosa-salinas: #e3b7ae;

  --color-texto: #2f2b26;
  --color-texto-suave: #5c574f;
  --color-fondo: var(--color-blanco);

  /* Tipografía: serif editorial para títulos, sans limpia para cuerpo */
  --font-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --font-cuerpo: "Work Sans", "Segoe UI", Arial, sans-serif;

  --espaciado-seccion: clamp(4rem, 12vw, 10rem);
  --ancho-contenido: 1200px;

  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --transicion-suave: 600ms var(--ease-suave);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-cuerpo);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--color-texto);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 400; }

p {
  margin: 0 0 1rem;
  color: var(--color-texto-suave);
  max-width: 60ch;
}

a {
  color: inherit;
  transition: color 240ms var(--ease-suave);
}

a:hover {
  color: var(--color-turquesa);
}

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

.contenido {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.ojo {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* ------------------------- Navegación ------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem clamp(1.25rem, 4vw, 3.5rem);
  background: transparent;
  transition: background var(--transicion-suave), padding var(--transicion-suave), box-shadow var(--transicion-suave);
}

.nav.nav--solida {
  background: rgba(253, 252, 249, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(47,43,38,0.07);
}

.nav__logo {
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nav__acciones {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.nav__obras {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,43,38,0.3);
  padding-bottom: 3px;
}

.nav__obras:hover {
  border-bottom-color: var(--color-turquesa);
}

.nav__toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0;
  font-family: var(--font-cuerpo);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto);
}

.nav__toggle-icono {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.nav__toggle-icono span {
  display: block;
  height: 1px;
  background: var(--color-texto);
}

/* Panel de navegación completa (overlay) */

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-blanco);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-suave), visibility 0s linear 500ms;
}

.nav-panel.abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--ease-suave), visibility 0s linear 0s;
}

.nav-panel__contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 7.5rem clamp(1.5rem, 8vw, 7.5rem) 5rem;
}

.nav-panel__ojo {
  margin: 0 0 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.nav-panel__enlaces {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-panel__enlaces a {
  font-family: var(--font-titulo);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-texto);
  padding: 6px 0;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 550ms var(--ease-suave), transform 550ms var(--ease-suave),
              color 240ms ease, padding-left 300ms var(--ease-suave);
}

.nav-panel__enlaces a:hover {
  color: var(--color-turquesa);
  padding-left: 14px;
}

.nav-panel.abierto .nav-panel__enlaces a {
  opacity: 1;
  transform: translateY(0);
}

.nav-panel__enlaces a:nth-child(1) { transition-delay: 0.12s; }
.nav-panel__enlaces a:nth-child(2) { transition-delay: 0.17s; }
.nav-panel__enlaces a:nth-child(3) { transition-delay: 0.22s; }
.nav-panel__enlaces a:nth-child(4) { transition-delay: 0.27s; }
.nav-panel__enlaces a:nth-child(5) { transition-delay: 0.32s; }
.nav-panel__enlaces a:nth-child(6) { transition-delay: 0.37s; }
.nav-panel__enlaces a:nth-child(7) { transition-delay: 0.42s; }

.nav-panel__contacto {
  margin: 3rem 0 0;
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}

.nav-panel__contacto a {
  color: var(--color-texto-suave);
  border-bottom: 1px solid rgba(92,87,79,0.3);
}

.nav-panel__cerrar {
  position: absolute;
  top: 1.35rem;
  right: clamp(1.25rem, 4vw, 3.5rem);
  background: none;
  border: none;
  color: var(--color-texto);
  font-size: 1.9rem;
  cursor: pointer;
  line-height: 1;
}

/* ------------------------- Secciones ------------------------- */

.seccion {
  padding: var(--espaciado-seccion) 0;
}

.seccion--acento {
  background: rgba(232, 221, 199, 0.35);
}

.seccion--sin-top {
  padding-top: 0;
}

.seccion__intro {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.seccion__intro--izquierda {
  max-width: 760px;
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
  text-align: left;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-suave), transform 900ms var(--ease-suave);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------- Hero / Inicio ------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}

.hero__lienzo {
  position: absolute;
  inset: -8% 0 0 0;
  height: 116%;
  background: var(--color-arena);
  overflow: hidden;
}

.hero__lienzo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(47,43,38,0.42) 0%, rgba(47,43,38,0.08) 38%, rgba(47,43,38,0) 60%);
  pointer-events: none;
}

.hero__contenido {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3.5rem);
  right: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(2.5rem, 7vh, 4.5rem);
  color: var(--color-blanco);
  animation: hero-entrada 1300ms var(--ease-suave) 150ms backwards;
}

@keyframes hero-entrada {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__ojo {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-blanco);
  opacity: 1;
  text-shadow: 0 1px 14px rgba(47,43,38,0.4);
}

.hero h1 {
  margin: 0;
  color: var(--color-blanco);
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.04;
  max-width: 12em;
}

.hero__pie {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.hero__pie p {
  margin: 0;
  color: var(--color-blanco);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 300;
  max-width: 34em;
  opacity: 0.92;
}

.hero__enlace {
  color: var(--color-blanco);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(253,252,249,0.6);
  padding-bottom: 4px;
  white-space: nowrap;
}

.hero__enlace:hover {
  color: var(--color-amarillo-suave);
  border-bottom-color: var(--color-amarillo-suave);
}

/* ------------------------- Quién soy ------------------------- */

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.dos-columnas--arriba {
  align-items: start;
}

/* ------------------------- Quién soy: cinta controlada por scroll -------------------------
   Estado base (sin JS o con prefers-reduced-motion): columna normal,
   igual que el resto del sitio, con el retrato como primer elemento. El
   JS añade `.quien-soy--cinta` cuando el movimiento está permitido, y ahí
   es donde se fija la sección y TODO el contenido — incluido el retrato,
   que ya no queda fijo aparte — se desplaza en horizontal según el
   scroll vertical de la página. */

.quien-soy {
  padding: var(--espaciado-seccion) 0;
}

.quien-soy__pin {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.quien-soy__texto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.quien-soy__retrato {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 480px;
  background: var(--color-azul-cielo);
  overflow: hidden;
}

.quien-soy__retrato > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quien-soy__intro h2 {
  margin-bottom: 0;
}

.quien-soy__parrafo {
  margin: 0;
  max-width: 60ch;
}

/* Figuras intercaladas entre los párrafos: en la disposición vertical de
   respaldo se apilan con el texto; en la cinta son las "paradas" visuales
   del recorrido horizontal. */
.quien-soy__foto {
  margin: 0;
  max-width: 380px;
}

.quien-soy__foto img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 40px rgba(47, 43, 38, 0.18);
}

.quien-soy__foto figcaption {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* Versión con cinta horizontal fijada (activada por JS cuando se permite movimiento) */

.quien-soy.quien-soy--cinta {
  height: 400vh;
  padding: 0;
}

.quien-soy--cinta .quien-soy__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.quien-soy--cinta .quien-soy__texto {
  width: max-content;
  height: 100%;
  flex-direction: row;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
  /* Margen antes del retrato y después del cierre de obras: así ni la
     primera ni la última "parada" empiezan/terminan pegadas al borde de
     la pantalla, sino con fondo en blanco alrededor, más centradas. */
  padding-left: 10vw;
  padding-right: 18vw;
  will-change: transform;
}

/* El retrato es ahora la primera "parada" de la cinta: se desliza hacia
   la izquierda junto con el resto del contenido, dejando el ancho
   completo libre para el texto en cuanto pasa — en vez de quedar fijo
   aparte y robarle sitio. Más pequeño que antes y con el margen de
   `padding-left` de arriba, para que se vea centrado con fondo blanco
   alrededor en vez de a sangre contra el borde. */
.quien-soy--cinta .quien-soy__retrato {
  flex: 0 0 min(58vw, 420px);
  height: 82svh;
  max-width: none;
  aspect-ratio: auto;
}

.quien-soy--cinta .quien-soy__intro,
.quien-soy--cinta .quien-soy__parrafo {
  flex: 0 0 min(78vw, 460px);
  max-width: none;
}

.quien-soy--cinta .quien-soy__parrafo {
  font-family: var(--font-titulo);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--color-texto);
}

/* En la cinta, las figuras se dimensionan por altura (caben siempre en la
   franja fijada) y alternan su posición vertical para dar ritmo de sala
   de exposición al recorrido. */
.quien-soy--cinta .quien-soy__foto {
  flex: 0 0 auto;
  max-width: none;
  align-self: center;
}

.quien-soy--cinta .quien-soy__foto img {
  width: auto;
  max-height: 32svh;
}

.quien-soy--cinta .quien-soy__foto:nth-of-type(even) {
  transform: translateY(6svh);
}

/* Pequeña muestra de obra al final de la cinta: cierra la presentación de la
   artista con 3-4 piezas antes de soltar el scroll hacia el resto de la página. */
.quien-soy__obras {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.quien-soy--cinta .quien-soy__obras {
  flex: 0 0 min(84vw, 480px);
  align-self: center;
}

/* El cierre lleva ahora una sola pieza enlazada (las demás van intercaladas
   a lo largo de la cinta), así que se limita su tamaño fuera del grid. */
.quien-soy__obras > .quien-soy__obra-mini {
  max-width: 380px;
  aspect-ratio: auto;
}

.quien-soy__obras > .quien-soy__obra-mini img {
  height: auto;
}

.quien-soy__obras-etiqueta {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.quien-soy__obras-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.quien-soy__obra-mini {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-arena);
  border: 1px solid rgba(47,43,38,0.08);
}

.quien-soy__obra-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-suave);
}

.quien-soy__obra-mini:hover img {
  transform: scale(1.06);
}

.quien-soy__obras-enlace {
  align-self: flex-start;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,43,38,0.3);
  padding-bottom: 3px;
}

.quien-soy__obras-enlace:hover {
  border-bottom-color: var(--color-turquesa);
}

/* ------------------------- Formentera: lista poética ------------------------- */

.lista-poetica {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lista-poetica li {
  font-family: var(--font-titulo);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.4;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(47,43,38,0.14);
  color: var(--color-texto);
}

.lista-poetica li:last-child {
  border-bottom: 1px solid rgba(47,43,38,0.14);
}

.formentera__detalle {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  width: 100%;
  justify-self: end;
  background: var(--color-arena);
  overflow: hidden;
}

.formentera__detalle > img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
}

/* ------------------------- Teaser (enlaces a Obras / Encargos) ------------------------- */

.teaser__imagen-grande {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--color-arena);
  text-decoration: none;
}

.teaser__imagen-grande > div,
.teaser__imagen-grande > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: inherit;
  transition: transform 1.2s var(--ease-suave);
}

.teaser__imagen-grande:hover > div,
.teaser__imagen-grande:hover > img {
  transform: scale(1.015);
}

.teaser__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.teaser__pie h2 {
  margin: 0;
}

.teaser__pie a {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,43,38,0.3);
  padding-bottom: 4px;
  white-space: nowrap;
}

.teaser__pie a:hover {
  border-bottom-color: var(--color-turquesa);
}

/* Fondo fijo (background-attachment: fixed): la foto no se mueve con el
   scroll, así que al atravesar la sección la franja verde va "escaneando"
   distintas zonas de la imagen, y queda centrada justo cuando la sección
   está centrada en la pantalla. En móvil (Safari especialmente) el fondo
   fijo es poco fiable, así que ahí se usa un fondo normal de toda la vida. */
.teaser--encargos {
  position: relative;
  color: var(--color-blanco);
  background-color: var(--color-verde-sabina);
  background-image:
    linear-gradient(rgba(91, 107, 82, 0.82), rgba(91, 107, 82, 0.82)),
    url("../imagenes/formentera_01.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

@media (max-width: 800px), (pointer: coarse) {
  .teaser--encargos {
    background-attachment: scroll, scroll;
  }
}

.teaser--encargos .ojo {
  color: rgba(253,252,249,0.7);
}

.teaser--encargos h2 {
  color: var(--color-blanco);
  max-width: 16em;
}

.teaser--encargos .hero__enlace {
  display: inline-block;
}

/* ------------------------- Cabecera de página secundaria (Obras / Encargos) ------------------------- */

.pagina-header {
  padding: clamp(8.5rem, 20vh, 13rem) 0 clamp(6rem, 14vh, 10rem);
}

.pagina-header--compacta {
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

.pagina-header p {
  margin: 0;
  max-width: 36em;
}

/* ------------------------- Obras (página propia: galería + tienda) ------------------------- */

/* Filtro por categorías: fila de etiquetas discretas sobre el grid, con el
   mismo lenguaje que los pasos Label del sistema (versalitas espaciadas).
   La activa se marca con el subrayado turquesa. */
.obras-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
}

.obras-filtros__boton {
  padding: 0.35rem 0;
  border: none;
  background: none;
  font-family: var(--font-cuerpo);
  font-size: 0.75rem; /* paso Label del sistema */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 240ms var(--ease-suave), border-color 240ms var(--ease-suave);
}

.obras-filtros__boton:hover,
.obras-filtros__boton:focus-visible {
  color: var(--color-texto);
}

.obras-filtros__boton.activo {
  color: var(--color-texto);
  border-bottom-color: var(--color-turquesa);
}

.obras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(2.5rem, 6vh, 4rem) clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

/* El marco parte de una proporción 4:5 solo como reserva de espacio para las
   obras sin foto todavía; en cuanto hay una imagen real (:has(img)) el marco
   adopta su proporción natural para mostrarla entera, sin recortar. */
.obra-card__imagen {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-arena);
  border: 1px solid rgba(47,43,38,0.08);
}

.obra-card__imagen:has(img) {
  aspect-ratio: auto;
}

/* Solo el marcador de "sin foto todavía" (clase dedicada, no un simple
   `> div`): un selector genérico aquí competía en especificidad con
   `.obra-card__foto` de más abajo y le pisaba background-size/position. */
.obra-card__imagen > .obra-card__vacia {
  width: 100%;
  height: 100%;
  background: inherit;
}

.obra-card__imagen > img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1s var(--ease-suave);
}

.obra-card:hover .obra-card__imagen > div,
.obra-card:hover .obra-card__imagen > img {
  transform: scale(1.025);
}

.obra-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.1rem;
}

.obra-card__info h3 {
  margin: 0;
}

.obra-card__detalle {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.obra-card__precio {
  margin-top: 0.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.obra-card__precio--estado {
  font-weight: 400;
  font-style: italic;
  color: var(--color-texto-suave);
}

/* ------------------------- Carrusel de fotos por obra -------------------------
   Una obra puede llevar varias fotos (ángulos, detalles). La tarjeta se
   convierte en un pequeño carrusel: flechas que aparecen al pasar el cursor
   y puntos que marcan la foto activa, como una publicación de Instagram. */

.obra-card__imagen--foto {
  position: relative;
  cursor: zoom-in;
}

/* Con varias fotos, la tarjeta fija el formato 4:5 y la foto lo ocupa
   entero como fondo CSS, no como <img>: al cambiar de foto se sustituye la
   url() del fondo. Un <img> ahí (apilando varias con fundido cruzado por
   opacidad, o incluso uno solo en flujo normal) se quedaba sin pintar en
   algunos Chrome pese a tener la imagen ya decodificada; un fondo usa otra
   ruta de pintado y no lo sufre. */
.obra-card__imagen.obra-card__imagen--varias {
  aspect-ratio: 4 / 5;
}

.obra-card__foto {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(253, 252, 249, 0.9);
  color: var(--color-texto);
  box-shadow: 0 2px 12px rgba(47, 43, 38, 0.22);
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms var(--ease-suave), background 240ms var(--ease-suave),
    color 240ms var(--ease-suave);
}

.carrusel-flecha svg {
  width: 9px;
  height: 14px;
  display: block;
}

.carrusel-flecha--ant { left: 0.75rem; }
.carrusel-flecha--sig { right: 0.75rem; }
.carrusel-flecha--sig svg { transform: rotate(180deg); }

.obra-card__imagen:hover .carrusel-flecha,
.obra-card__imagen:focus-visible .carrusel-flecha,
.obra-card__imagen:focus-within .carrusel-flecha {
  opacity: 1;
}

.carrusel-flecha:hover,
.carrusel-flecha:focus-visible {
  opacity: 1;
  background: var(--color-blanco);
  color: var(--color-turquesa);
}

/* En pantallas táctiles no hay hover: las flechas se muestran siempre. */
@media (hover: none) {
  .carrusel-flecha { opacity: 1; }
}

.carrusel-puntos {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.32rem;
}

.carrusel-puntos span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(253, 252, 249, 0.55);
  box-shadow: 0 1px 4px rgba(47, 43, 38, 0.35);
  transition: width 300ms var(--ease-suave), background 300ms var(--ease-suave);
}

.carrusel-puntos span.activa {
  width: 1.05rem;
  background: var(--color-blanco);
}

/* ------------------------- Visor de obra (lightbox) -------------------------
   Fondo oscurecido con la obra y, junto a ella, su ficha (título, técnica,
   tamaño, precio o estado, descripción) y el aviso de contacto para quien
   quiera comprar la pieza. El conjunto se desplaza un poco a la izquierda
   del centro de la pantalla para dejarle aire a esa columna de contacto. */

body.sin-scroll {
  overflow: hidden;
}

.obra-visor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3.75rem, 9vh, 5.5rem) clamp(4rem, 11vw, 9rem) clamp(2rem, 6vh, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  overflow-y: auto;
  background: rgba(38, 34, 29, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-suave), visibility 0s 420ms;
}

.obra-visor.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms var(--ease-suave);
}

/* Si la ficha es larga y no cabe, el visor hace scroll: los márgenes auto
   centran el conjunto cuando sobra sitio y lo anclan arriba cuando no. */
.obra-visor__panel {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: auto;
  margin-bottom: auto;
}

/* La figura puede recibir más ancho del que ocupa la foto (flex-grow reparte
   el sobrante de la fila); el lienzo interior se ciñe al tamaño real de la
   imagen para que el aura, las flechas y los puntos queden pegados a ella
   y no floten sueltos en ese espacio extra. */
.obra-visor__marco {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.obra-visor__lienzo {
  position: relative;
  display: inline-block;
}

.obra-visor__lado {
  flex: 0 0 clamp(280px, 30vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.obra-visor__cerrar {
  position: fixed;
  top: 1.1rem;
  right: 1.3rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(253, 252, 249, 0.28);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-blanco);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition: background 240ms var(--ease-suave), transform 400ms var(--ease-suave);
}

.obra-visor__cerrar:hover,
.obra-visor__cerrar:focus-visible {
  background: rgba(253, 252, 249, 0.14);
  transform: rotate(90deg);
}

/* Aura: halo difuso detrás de la foto con el color dominante que calcula
   js/main.js (colorDominante). --color-aura llega por JS tras analizar la
   imagen; el turquesa de la paleta cubre el instante antes de que se
   resuelva ese cálculo. */
.obra-visor__aura {
  position: absolute;
  inset: -18%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-aura, var(--color-turquesa)) 0%, transparent 70%);
  filter: blur(54px);
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .obra-visor__aura {
    animation: visor-aura-respira 6s var(--ease-suave) infinite alternate;
  }
}

@keyframes visor-aura-respira {
  from { opacity: 0.4; transform: scale(0.96); }
  to { opacity: 0.62; transform: scale(1.04); }
}

/* La foto vive dentro de un marco de tamaño fijo (mismo encuadre para
   cualquier obra, sea cual sea la resolución o proporción de su foto) que
   además la recorta (overflow hidden): al ampliarse con la lupa nunca se
   sale de su propio encuadre. object-fit: contain ajusta cada imagen dentro
   sin recortarla ni deformarla — con margen a los lados o arriba/abajo
   según su proporción. La sombra pasa al marco para que no se escale con
   la imagen. */
.obra-visor__zoom {
  position: relative;
  z-index: 1;
  /* Ancho en vw, no en % del contenedor: el marco/lienzo se dimensionan
     por contenido (centrado con flex), así que un % aquí crearía una
     referencia circular que el navegador resuelve cayendo de vuelta al
     tamaño intrínseco de cada foto — justo lo que rompía la consistencia
     entre obras. clamp() en vw es independiente de esa cadena. */
  width: clamp(260px, 34vw, 820px);
  aspect-ratio: 1 / 1;
  max-height: 74vh;
  line-height: 0;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
}

.obra-visor__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Lupa: solo cuando JS confirma un puntero fino (clase --activo). La escala
   sigue al cursor vía transform-origin, que JS actualiza en mousemove.
   will-change promueve la foto a su propia capa de composición desde que
   el visor está activo (no solo en :hover), para que el primer movimiento
   del cursor no cargue con el coste de esa promoción y el seguimiento no
   se note a saltos. */
.obra-visor__zoom--activo {
  cursor: zoom-in;
}

.obra-visor__zoom--activo .obra-visor__foto {
  transition: transform 240ms var(--ease-suave);
  will-change: transform;
}

.obra-visor__zoom--activo:hover .obra-visor__foto {
  transform: scale(2.2);
}

/* Con menos movimiento la lupa sigue funcionando (es una función, no un
   adorno), pero sin la transición de entrada/salida. */
@media (prefers-reduced-motion: reduce) {
  .obra-visor__zoom--activo .obra-visor__foto {
    transition: none;
  }
}

@keyframes visor-foto-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

.obra-visor__foto--entra {
  animation: visor-foto-entra 450ms var(--ease-suave);
}

/* Dentro del visor las flechas están siempre visibles, en versión clara
   sobre el fondo oscuro, flanqueando la obra. */
.obra-visor .carrusel-flecha {
  opacity: 1;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(253, 252, 249, 0.28);
  background: rgba(253, 252, 249, 0.1);
  color: var(--color-blanco);
  box-shadow: none;
}

.obra-visor .carrusel-flecha:hover,
.obra-visor .carrusel-flecha:focus-visible {
  background: rgba(253, 252, 249, 0.26);
  color: var(--color-blanco);
}

.obra-visor .carrusel-flecha--ant { left: -3.5rem; }
.obra-visor .carrusel-flecha--sig { right: -3.5rem; }

.obra-visor__info {
  color: rgba(253, 252, 249, 0.82);
}

.obra-visor__titulo {
  margin: 0 0 0.45rem;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem); /* paso Headline del sistema */
  font-style: italic;
  color: var(--color-blanco);
}

.obra-visor__detalle {
  margin: 0;
  font-size: 0.75rem; /* paso Label del sistema */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 252, 249, 0.55);
}

.obra-visor__precio {
  margin: 0.7rem 0 0;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-arena);
}

.obra-visor__precio--estado {
  font-weight: 400;
  font-style: italic;
}

.obra-visor__descripcion {
  margin: 1.1rem 0 0;
  line-height: 1.75;
  color: rgba(253, 252, 249, 0.75);
}

/* Contacto de venta: solo información para escribir por esta obra, sin
   formulario — separado de la ficha por un filete sutil. */
.obra-visor__contacto-compra {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(253, 252, 249, 0.18);
}

.obra-visor__contacto-texto {
  margin: 0 0 0.9rem;
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 1.05rem; /* paso Body del sistema */
  color: var(--color-blanco);
}

.obra-visor__contacto-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.4rem;
}

.obra-visor__contacto-instagram {
  font-size: 0.75rem; /* paso Label del sistema, como .obra-visor__detalle */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 252, 249, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 252, 249, 0.35);
  padding-bottom: 3px;
  transition: color 240ms var(--ease-suave), border-color 240ms var(--ease-suave);
}

.obra-visor__contacto-instagram:hover,
.obra-visor__contacto-instagram:focus-visible {
  color: var(--color-amarillo-suave);
  border-bottom-color: var(--color-amarillo-suave);
}

/* En pantallas estrechas el panel vuelve a apilarse en una columna (foto,
   ficha, contacto) y se pierde el desplazamiento a la izquierda — sin la
   columna lateral al lado no tiene sentido mantenerlo. */
@media (max-width: 760px) {
  .obra-visor {
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
  }

  .obra-visor__panel {
    flex-direction: column;
    align-items: center;
  }

  .obra-visor__lado {
    flex: 0 0 auto;
    width: 100%;
    max-width: 640px;
    text-align: center;
  }

  .obra-visor__contacto-enlaces {
    justify-content: center;
  }

  .obra-visor .carrusel-flecha--ant { left: 0.6rem; }
  .obra-visor .carrusel-flecha--sig { right: 0.6rem; }

  .obra-visor__zoom {
    width: min(88vw, 640px);
    max-height: 52vh;
  }
}

.obras__cierre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.obras__cierre h2 {
  margin: 0;
  max-width: 20em;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.enlace-subrayado {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,43,38,0.3);
  padding-bottom: 4px;
  white-space: nowrap;
}

.enlace-subrayado:hover {
  border-bottom-color: var(--color-turquesa);
}

/* ------------------------- Encargos: proceso en pasos ------------------------- */

.pasos {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pasos li {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(47,43,38,0.14);
}

.pasos li:last-child {
  border-bottom: 1px solid rgba(47,43,38,0.14);
}

.pasos__numero {
  font-family: var(--font-titulo);
  font-size: 0.95rem;
  color: var(--color-siena);
}

.pasos p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-texto);
}

/* ------------------------- Formularios (Encargos / Contacto) ------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
}

.formulario--destacado {
  background: rgba(232, 221, 199, 0.35);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.campo-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 2.1rem;
}

.campo label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.campo input,
.campo select,
.campo textarea {
  appearance: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(47,43,38,0.25);
  background: transparent;
  padding: 0.6rem 0;
  font-family: var(--font-cuerpo);
  font-size: 1.05rem;
  color: var(--color-texto);
  outline: none;
  transition: border-color 240ms ease;
}

.campo select {
  cursor: pointer;
}

.campo textarea {
  line-height: 1.6;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-bottom-color: var(--color-turquesa);
}

.campo.campo--error input,
.campo.campo--error select,
.campo.campo--error textarea {
  border-bottom-color: var(--color-siena);
}

.formulario__aviso {
  margin: -0.9rem 0 0;
  font-size: 0.9rem;
}

.formulario__aviso--error {
  color: var(--color-siena);
}

.formulario__aviso--ok {
  color: var(--color-verde-sabina);
}

.boton {
  align-self: flex-start;
  font-family: var(--font-cuerpo);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  background: var(--color-verde-sabina);
  color: var(--color-blanco);
  border: 1px solid var(--color-verde-sabina);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 240ms ease, border-color 240ms ease;
}

.boton:hover {
  background: #4c5a44;
  border-color: #4c5a44;
  color: var(--color-blanco);
}

/* ------------------------- Puntos de venta ------------------------- */

.puntos-venta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.puntos-venta li {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.75rem 2rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(47,43,38,0.14);
}

.puntos-venta li:last-child {
  border-bottom: 1px solid rgba(47,43,38,0.14);
}

.puntos-venta h3 {
  margin: 0;
  font-weight: 400;
}

.puntos-venta span {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}

/* ------------------------- Footer ------------------------- */

.pie {
  padding: 2.5rem 0;
  border-top: 1px solid rgba(47,43,38,0.08);
}

.pie__interior {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.pie p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.pie__enlaces {
  display: flex;
  gap: 1.75rem;
}

.pie__enlaces a {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  text-decoration: none;
}

/* ------------------------- Consentimiento y honeypot ------------------------- */

/* El campo trampa para bots se saca de la vista y del orden de tabulación;
   las personas nunca lo ven ni lo rellenan. */
.campo--miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.consentimiento input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-turquesa);
  flex-shrink: 0;
}

.consentimiento a {
  color: inherit;
  text-decoration: underline;
}

.campo--error .consentimiento {
  color: var(--color-siena);
}

/* ------------------------- Página legal / 404 ------------------------- */

.pagina-legal h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin-top: 2.5rem;
}

.pagina-legal p,
.pagina-legal ul {
  max-width: 68ch;
  color: var(--color-texto-suave);
}

/* ------------------------- Accesibilidad: menos movimiento -------------------------
   Los fundidos de opacidad se conservan (un crossfade tranquilo no provoca
   mareo); lo que se elimina es el desplazamiento: parallax, deslizamientos
   y zooms de imagen. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transform: none;
    transition: opacity 500ms ease;
  }

  .hero__contenido {
    animation: hero-entrada-fundido 900ms ease backwards;
  }

  .hero__lienzo,
  .hero__lienzo > img,
  [data-parallax],
  .obra-card__imagen > div,
  .obra-card__imagen > img,
  .teaser__imagen-grande > div,
  .teaser__imagen-grande > img,
  .quien-soy__obra-mini img {
    transform: none !important;
  }

  /* El visor conserva sus fundidos, pero sin giros ni cambios de tamaño. */
  .obra-visor__cerrar:hover,
  .obra-visor__cerrar:focus-visible {
    transform: none;
  }

  .carrusel-puntos span {
    transition: background 300ms ease;
  }
}

@keyframes hero-entrada-fundido {
  from { opacity: 0; }
  to { opacity: 1; }
}