/* ==========================================================================
   CARMEN SÁNCHEZ RUDA — Pintora y restauradora — Ayamonte
   Hoja de estilos principal

   Sistema visual "Artectura": el nombre que la propia artista da a su
   cruce entre pintura, arquitectura y vida. Se traduce aquí en una paleta
   de cal andaluza + verde botella (su color-obsesión declarada) + oro
   envejecido (el pan de oro de sus restauraciones), y en una ficha de obra
   inspirada en las cartelas murales de museo.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. TOKENS DE DISEÑO                                                     */
/* ---------------------------------------------------------------------- */
:root {
  /* Color */
  --bg: #F3EEE1;              /* cal andaluza — fondo general */
  --bg-alt: #EAE1C9;          /* banda de piedra, algo más oscura */
  --surface: #FCFAF4;         /* superficie de tarjeta, casi blanco */
  --ink: #201F1A;             /* negro cálido — texto principal */
  --ink-soft: #55584B;        /* texto secundario */
  --ink-faint: #8B8D7C;       /* texto terciario / metadatos */
  --verde: #3E5941;           /* verde botella — acento primario */
  --verde-deep: #223225;      /* verde profundo — hover / fondos oscuros */
  --verde-pale: #E3E8DC;      /* verde muy pálido — fondos suaves */
  --oro: #A57F35;             /* oro envejecido — pan de oro / restauración */
  --oro-pale: #EEE1BE;        /* oro pálido — fondos de etiqueta */
  --oxido: #8B402A;           /* óxido — acento terciario, uso escaso */
  --line: rgba(32, 31, 26, 0.14);
  --line-strong: rgba(32, 31, 26, 0.30);
  --shadow-soft: 0 20px 45px -28px rgba(32, 31, 26, 0.45);
  --shadow-lift: 0 30px 60px -20px rgba(32, 31, 26, 0.35);

  /* Tipografía — Arial Narrow en todo el sitio, a petición del cliente.
     No es una fuente web (no existe en Google Fonts): es una fuente del
     sistema que trae Windows/Office. Se declara con una cadena de reserva
     para que, en equipos donde no esté instalada (Mac, Linux, la mayoría
     de móviles), se vea Arial normal en vez de la tipografía por defecto
     del navegador. */
  --font-display: 'Arial Narrow', Arial, Helvetica, sans-serif;
  --font-body: 'Arial Narrow', Arial, Helvetica, sans-serif;
  --font-mono: 'Arial Narrow', Arial, Helvetica, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 3px;
  --radius: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* ---------------------------------------------------------------------- */
/* 2. RESET Y BASE                                                        */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Textura de lienzo muy sutil sobre el fondo general */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(32,31,26,0.025) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(62,89,65,0.03) 0, transparent 50%);
}

img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

::selection { background: var(--verde); color: var(--surface); }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  background: var(--verde-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Eyebrow / etiqueta pequeña estilo cartela de museo */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--oro);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* 3. TIPOGRAFÍA / ESCALA                                                  */
/* ---------------------------------------------------------------------- */
.h-display {
  font-size: clamp(2rem, 5vw, 4.3rem);
}

.h-xl {
  font-size: clamp(1.75rem, 3.6vw, 2.7rem);
}

.h-lg {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.h-md {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 400;
}

.italic-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

p + p { margin-top: 1em; }

/* Divisor "pincelada": trazo dibujado a mano, firma visual del proyecto */
.brushstroke {
  display: block;
  width: clamp(160px, 22vw, 260px);
  height: 26px;
  margin-block: 0.6em 1.4em;
  color: var(--oro);
}
.brushstroke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.is-visible .brushstroke path { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------------- */
/* 4. CABECERA / NAVEGACIÓN                                                */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 238, 225, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(243, 238, 225, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 30px -24px rgba(32,31,26,0.5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  max-width: 1320px; /* algo más ancho que --container: la cabecera necesita el sitio */
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}
.brand span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 500;
  /* En el rango de escritorio "medio" no hay sitio para el eslogan sin
     que el menú se parta en dos líneas: se oculta aquí y reaparece tanto
     en móvil (el menú pasa a panel lateral y deja hueco) como en pantallas
     anchas (ver media query al final de este bloque). */
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.main-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* red de seguridad ante zoom extremo; no debería activarse en uso normal */
  gap: 1.15rem;
  font-size: 0.8rem;
}
.main-nav__list a {
  position: relative;
  padding-block: 0.3rem;
  color: var(--ink-soft);
  transition: color 0.25s var(--ease);
}
.main-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--oro);
  transition: right 0.3s var(--ease);
}
.main-nav__list a:hover,
.main-nav__list a[aria-current="page"] { color: var(--ink); }
.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after { right: 0; }

@media (max-width: 1140px) {
  .nav-toggle { display: flex; }
  .brand span { display: inline; } /* el menú deja de competir por espacio: cabe de nuevo */
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    height: 100vh;
    background: var(--surface);
    box-shadow: -30px 0 60px -30px rgba(0,0,0,0.4);
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    font-size: 1.05rem;
  }
  .nav-scrim {
    position: fixed; inset: 0;
    background: rgba(20,22,17,0.4);
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--ease);
    z-index: 90;
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* A partir de aquí el contenedor de la cabecera ya está a su ancho máximo
   (1320px) con margen de sobra, así que se recupera el eslogan y se
   respira un poco más entre enlaces. */
@media (min-width: 1450px) {
  .brand span { display: inline; }
  .main-nav__list {
    gap: 1.3rem;
    font-size: 0.82rem;
  }
}

/* ---------------------------------------------------------------------- */
/* 5. BOTONES / ENLACES DE ACCIÓN                                          */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--verde);
  color: var(--surface);
}
.btn--primary:hover { background: var(--verde-deep); transform: translateY(-2px); }
.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--verde); color: var(--verde); transform: translateY(-2px); }
.btn--light {
  background: var(--surface);
  color: var(--verde-deep);
}
.btn--light:hover { transform: translateY(-2px); }
.btn svg { width: 15px; height: 15px; }

.text-link {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease);
}
.text-link:hover { background-size: 100% 1px; }

/* ---------------------------------------------------------------------- */
/* 6. SECCIONES / LAYOUT GENERAL                                           */
/* ---------------------------------------------------------------------- */
main { position: relative; z-index: 1; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--verde-deep);
  color: #EFE9D8;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

.page-hero {
  padding-block: clamp(6.5rem, 14vw, 9.5rem) clamp(3rem, 6vw, 4.5rem);
}
.page-hero .eyebrow { margin-bottom: 1.1rem; }
.page-hero p.lede { max-width: 620px; margin-top: 1.1rem; }

/* ---------------------------------------------------------------------- */
/* 7. REVELADO AL HACER SCROLL                                             */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > *, .brushstroke path {
    transition-duration: 0.01ms !important;
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------------------------------------------------------------------- */
/* 8. FICHA DE OBRA — componente firma (cartela de museo)                  */
/* ---------------------------------------------------------------------- */
.artwork {
  cursor: pointer;
}
.artwork__frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
}
.artwork__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.artwork:hover .artwork__frame img { transform: scale(1.045); }

.artwork__frame::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(32,31,26,0.08);
  pointer-events: none;
}

.artwork__zoom {
  position: absolute;
  right: 0.9rem; bottom: 0.9rem;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(252,250,244,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.artwork:hover .artwork__zoom { opacity: 1; transform: translateY(0); }
.artwork__zoom svg { width: 15px; height: 15px; color: var(--verde-deep); }

/* Obra vendida: cintillo siempre visible (también en móvil, sin hover) +
   sello que se marca más al pasar el ratón por encima */
.artwork__ribbon {
  position: absolute;
  top: 1rem; left: -0.45rem;
  z-index: 2;
  background: var(--oxido);
  color: #FBF3EE;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem 0.35rem 1.05rem;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 8px 16px -8px rgba(20,15,10,0.55);
}
.artwork__sold-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 20, 16, 0);
  opacity: 0;
  transition: opacity 0.4s var(--ease), background 0.4s var(--ease);
}
.artwork--sold:hover .artwork__sold-overlay {
  opacity: 1;
  background: rgba(24, 20, 16, 0.55);
}
.artwork__sold-stamp {
  border: 3px solid #FBF3EE;
  color: #FBF3EE;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  transform: rotate(-8deg) scale(0.82);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.artwork--sold:hover .artwork__sold-stamp {
  opacity: 1;
  transform: rotate(-8deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .artwork__sold-overlay, .artwork__sold-stamp { transition-duration: 0.01ms; }
}

/* Placeholder de imagen no disponible aún (ver script de descarga) */
.artwork__frame.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, var(--verde-pale) 0%, var(--bg-alt) 60%);
}
.artwork__frame.is-placeholder .ph-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 1.5rem;
}
.artwork__frame.is-placeholder svg { width: 30px; height: 30px; opacity: 0.55; }
.artwork__frame.is-placeholder .ph-mark small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.artwork__label {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  margin-top: 0.85rem;
}
.artwork__title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.artwork__meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.artwork__meta::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--oro);
  flex-shrink: 0;
}

.artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
}

/* ---------------------------------------------------------------------- */
/* 9. FILTROS (Restauraciones por localidad)                               */
/* ---------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: all 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--verde); color: var(--verde); }
.filter-btn.is-active {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--surface);
}
.artwork.is-hidden { display: none; }

/* ---------------------------------------------------------------------- */
/* 10. LIGHTBOX                                                            */
/* ---------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: rgba(18, 20, 15, 0.92);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__figure {
  max-width: 1100px;
  width: 100%;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: translateY(0) scale(1); }
.lightbox__img-wrap {
  max-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lightbox__img-wrap img { max-height: 76vh; width: auto; margin-inline: auto; object-fit: contain; }
.lightbox figcaption {
  color: #EFE9D8;
  margin-top: 1.1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.lightbox figcaption .italic-serif { color: #fff; font-size: 1.15rem; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: fixed;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #EFE9D8;
  transition: background 0.25s var(--ease), border-color .25s;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5);
}
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .lightbox__prev, .lightbox__next { display: none; }
}

/* ---------------------------------------------------------------------- */
/* 11. HERO (portada)                                                      */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(6rem, 13vw, 8.5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title {
  position: relative;
}
.hero__title .eyebrow { margin-bottom: 1.3rem; }
.hero__signature {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 1.6rem;
  display: flex;
  gap: 1.7rem;
  flex-wrap: wrap;
}
.hero__signature strong { color: var(--ink); font-weight: 600; }

.hero__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual-tag {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  z-index: 3;
  background: rgba(252,250,244,0.94);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 0.5em;
}
.hero__visual-tag::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--oro); }

/* Carrusel de fotos del hero (3 fotos, se turnan con un fundido) */
.hero-carousel { position: absolute; inset: 0; }
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero-carousel__slide.is-active { opacity: 1; z-index: 1; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel__dots {
  position: absolute;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.hero-carousel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  padding: 0;
  background: rgba(252,250,244,0.45);
  border: 1px solid rgba(252,250,244,0.85);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero-carousel__dot:hover { background: rgba(252,250,244,0.75); }
.hero-carousel__dot.is-active { background: var(--oro); border-color: var(--oro); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide { transition-duration: 0.01ms; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; aspect-ratio: 4/3; }
}

/* Franja de miniaturas deslizante bajo el hero */
.strip {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: strip-scroll 42s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track img {
  height: clamp(120px, 16vw, 190px);
  width: clamp(150px, 20vw, 240px);
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; overflow-x: auto; }
}

/* ---------------------------------------------------------------------- */
/* 12. CITA / PULL-QUOTE ("Artectura")                                     */
/* ---------------------------------------------------------------------- */
.pull-quote {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.35;
  color: #fff;
}
.pull-quote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro-pale);
}

/* ---------------------------------------------------------------------- */
/* 13. TARJETAS DE ENLACE (índice de secciones en portada)                 */
/* ---------------------------------------------------------------------- */
.link-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.link-card {
  position: relative;
  padding: 2.2rem 1.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color .4s;
}
.link-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
}
.link-card__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--oro);
  letter-spacing: 0.1em;
}
.link-card h3 { margin-top: 0.9rem; font-size: 1.35rem; }
.link-card p { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.92rem; }
.link-card .text-link { margin-top: 1.3rem; display: inline-block; font-size: 0.85rem; }

@media (max-width: 860px) {
  .link-cards { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* 14. TRAYECTORIA / CV                                                    */
/* ---------------------------------------------------------------------- */
.cv-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  position: sticky;
  top: 5.2rem;
  z-index: 20;
}
.cv-nav a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease);
}
.cv-nav a:hover { color: var(--verde); }

.cv-block { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); scroll-margin-top: 9rem; }
.cv-block:first-of-type { border-top: none; }
.cv-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.cv-block__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.cv-list { display: flex; flex-direction: column; }
.cv-item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1.25rem;
  padding-block: 0.95rem;
  border-top: 1px solid var(--line);
}
.cv-item:first-child { border-top: none; }
.cv-item__year {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--oro);
  padding-top: 0.15rem;
}
.cv-item__body b, .cv-item__body strong { font-weight: 600; color: var(--ink); }
.cv-item__title { font-size: 1.02rem; }
.cv-item__place { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.15rem; }

.cv-simple-list {
  columns: 2;
  column-gap: 2.5rem;
}
.cv-simple-list li {
  break-inside: avoid;
  padding-block: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.cv-simple-list li:first-child,
.cv-simple-list li:nth-child(2) { border-top: none; }

@media (max-width: 720px) {
  .cv-item { grid-template-columns: 60px 1fr; }
  .cv-simple-list { columns: 1; }
  .cv-nav { position: static; }
}

.cv-callout {
  background: var(--verde-pale);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  font-size: 0.95rem;
  color: var(--verde-deep);
  margin-bottom: 2.5rem;
}

/* ---------------------------------------------------------------------- */
/* 15. PRENSA                                                              */
/* ---------------------------------------------------------------------- */
.press-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.press-feature:first-of-type { border-top: none; padding-top: 0; }
.press-feature__img { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.press-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.press-feature__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.press-feature h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 0.85rem; }
.press-feature p { color: var(--ink-soft); }
.press-feature .text-link { margin-top: 1.1rem; display: inline-block; font-size: 0.85rem; color: var(--verde); }

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.press-grid figure { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; position: relative; }
.press-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.press-grid a:hover img { transform: scale(1.06); }
.press-grid figcaption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(15,17,12,0.78), transparent);
  color: #fff;
  font-size: 0.68rem;
  padding: 1.6rem 0.8rem 0.6rem;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.press-links {
  display: flex;
  flex-direction: column;
}
.press-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.press-links a:first-child { border-top: none; }
.press-links a:hover { color: var(--verde); padding-left: 0.4rem; }
.press-links a svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }

/* ---------------------------------------------------------------------- */
/* 16. VÍDEOS                                                              */
/* ---------------------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.video-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video-card__frame {
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
}
.video-card__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity .4s; }
.video-card__frame:hover img { opacity: 0.62; }
.video-card__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-card__play span {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(252,250,244,0.94);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.video-card__frame:hover .video-card__play span { transform: scale(1.1); }
.video-card__play svg { width: 18px; height: 18px; color: var(--verde-deep); margin-left: 2px; }
.video-card__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card__label {
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #EFE9D8;
  background: var(--verde-deep);
}

/* ---------------------------------------------------------------------- */
/* 17. FORMULARIO DE CONTACTO                                              */
/* ---------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.contact-info dl {
  display: flex; flex-direction: column; gap: 1.6rem;
}
.contact-info dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.contact-info dd {
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.contact-info dd a:hover { color: var(--verde); }

.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.field input, .field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-pale);
  outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field.has-error input, .field.has-error textarea { border-color: var(--oxido); }
.field__error {
  display: none;
  font-size: 0.78rem;
  color: var(--oxido);
  margin-top: 0.4rem;
}
.field.has-error .field__error { display: block; }

.form-status {
  margin-top: 1.2rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: var(--verde-pale); color: var(--verde-deep); }
.form-status.is-error { background: #F3DAD2; color: var(--oxido); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* 18. AVISO DE PLACEHOLDER (nota discreta para el propietario del sitio)  */
/* ---------------------------------------------------------------------- */
.build-note {
  display: flex;
  gap: 0.9rem;
  padding: 1.2rem 1.4rem;
  background: var(--oro-pale);
  border-radius: var(--radius);
  font-size: 0.87rem;
  color: #5B4419;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.build-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15rem; }
.build-note code {
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.5);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------- */
/* 19. PIE DE PÁGINA                                                       */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--verde-deep);
  color: #D9D3BE;
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
.footer-brand + p { margin-top: 1rem; color: #B7AF94; font-size: 0.92rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8F9880;
}
.back-to-top {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.back-to-top:hover { border-color: #fff; transform: translateY(-2px); }
.back-to-top svg { width: 13px; height: 13px; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ---------------------------------------------------------------------- */
/* 20. UTILIDADES                                                          */
/* ---------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.gap-sm { gap: 0.75rem; }
.gap-md { gap: 1.5rem; }

@media (max-width: 720px) {
  .h-display { font-size: clamp(2rem, 9vw, 2.8rem); }
}