/* =========================================================
   Carina Gasparin — Portfolio
   Editorial, minimalista. La obra es la protagonista.
   ========================================================= */

:root{
  --bg:        #F7F5F1;
  --bg-deep:   #C9AD7C;
  --ink:       #47443E;
  --ink-soft:  #5E5B54;
  --stone:     #8B8680;
  --line:      rgba(71,68,62,0.14);
  --line-soft: rgba(71,68,62,0.08);
  --paper:     #FBF7EE;

  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4.5rem, 12vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);

  --radius-sm: 3px;
  --radius-md: 6px;

  --focus-ring: 0 0 0 3px rgba(71,68,62,.18);

  /* sombras cálidas: dos capas (contacto marrón + halo dorado). Antes tenían
     radios de blur enormes (hasta 310px en box-shadow, 124px en drop-shadow)
     que en la sección Obras —10+ imágenes con drop-shadow de 3 capas cada
     una— hacían que el navegador tuviera que re-rasterizar áreas gigantes en
     cada scroll/hover, y eso es lo que trababa la máquina. Se bajó bastante
     el radio y se sacó una capa para que siga viéndose cálido y profundo sin
     ser tan costoso de renderizar. */
  --shadow-sm:
    0 6px 14px rgba(107,90,69,.5),
    0 14px 28px rgba(196,155,74,.3);
  --shadow-md:
    0 14px 30px rgba(107,90,69,.55),
    0 26px 52px rgba(196,155,74,.32);
  --shadow-lg:
    0 22px 46px rgba(107,90,69,.58),
    0 40px 78px rgba(196,155,74,.34);

  /* misma paleta, como drop-shadow para que las obras "floten" sin caja
     detrás. Una sola capa: cada capa extra en un filter es otro pase de
     rasterizado completo del elemento, y acá se repite en cada obra visible. */
  --art-shadow: drop-shadow(0 10px 18px rgba(107,90,69,.45));
  --art-shadow-hover: drop-shadow(0 14px 26px rgba(107,90,69,.52));
}

*{ box-sizing: border-box; }
a:focus-visible,
button:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lightbox-open{ overflow: hidden; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

/* ---------- Loading curtain ---------- */
.curtain{
  position: fixed; inset:0;
  background: var(--bg);
  z-index: 999;
  pointer-events: none;
  transition: opacity .7s var(--ease);
}
.curtain.is-hidden{ opacity: 0; }

/* ---------- Grain overlay ---------- */
.grain{
  /* sin mix-blend-mode: con eso puesto, el navegador tiene que volver a
     mezclar la textura con TODO lo que hay debajo en cada frame en que algo
     cambia — y con varios carruseles cruzando opacidad todo el tiempo, esto
     se recalculaba constantemente en toda la pantalla. La opacidad sola ya
     da el mismo efecto de grano sutil, mucho más barato de renderizar. */
  position: fixed; inset:0;
  z-index: 500;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =============== HEADER =============== */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem var(--gutter);
  transition: background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header{ color: var(--paper); }
.site-header.is-scrolled{
  background: rgba(247,245,241,.92);
  backdrop-filter: blur(6px);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-sm);
  padding: 1.1rem var(--gutter);
  color: var(--ink);
}

.brand{
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 450;
  letter-spacing: .01em;
  position: relative;
  z-index: 210;
  text-shadow: 0 2px 10px rgba(23,21,18,.3), 0 6px 20px rgba(196,155,74,.22);
}
.brand-logo{
  height: 44px;
  width: auto;
  /* el logo es un solo color (marrón) sobre transparente: se vuelve crema
     mientras el header flota sobre el hero oscuro, y recupera su color
     cuando el header pasa a fondo claro al scrollear — mismo cambio que
     ya hace el texto de al lado. */
  filter: brightness(0) invert(.95);
  transition: filter .5s var(--ease);
}
.site-header.is-scrolled .brand-logo{
  filter: none;
}

.main-nav{
  display:flex; align-items:center; gap: clamp(1.5rem, 3vw, 2.75rem);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.main-nav a{
  position: relative;
  padding-bottom: .3rem;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: currentColor;
  transition: right .4s var(--ease);
}
.main-nav a:hover::after{ right:0; }
.nav-ig{
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: rgba(20,17,14,.32);
  transition: background .3s var(--ease);
}
.nav-ig::after{ display: none; }
.nav-ig:hover{ background: rgba(20,17,14,.5); }
.site-header.is-scrolled .nav-ig{ background: rgba(71,68,62,.1); }
.site-header.is-scrolled .nav-ig:hover{ background: rgba(71,68,62,.18); }

.menu-toggle{
  display:none;
  width: 34px; height: 34px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color: inherit;
  position: relative;
  z-index: 210;
}
.menu-toggle span{
  width: 22px; height: 1px; background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
body.menu-open .menu-toggle{ color: var(--ink); }

/* =============== HERO =============== */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  color: var(--paper);
}
.hero-media{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 20% 15%, #6b5a45 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 80%, #7c8065 0%, transparent 60%),
    linear-gradient(160deg, #3d3630 0%, #23201c 55%, #171512 100%);
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
}
.hero-veil{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,13,11,.35) 0%, rgba(15,13,11,.08) 32%, rgba(15,13,11,.15) 62%, rgba(15,13,11,.78) 100%);
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 6rem);
}
/* línea fina arriba y abajo del texto, en vez de la píldora anterior */
.hero-eyebrow{
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .65em .1em;
  border-top: 1px solid rgba(252,250,246,.45);
  border-bottom: 1px solid rgba(252,250,246,.45);
  margin: 0 0 1.4rem;
}
.hero-title{
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.01em;
  margin: 0 0 1.3rem;
  text-shadow: 0 4px 24px rgba(23,21,18,.4), 0 10px 46px rgba(196,155,74,.35);
}
.hero-tagline{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  max-width: 30ch;
  opacity: .92;
  margin: 0;
  text-shadow: 0 2px 16px rgba(23,21,18,.32), 0 8px 30px rgba(196,155,74,.28);
}
.hero-seal{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.4rem 0 0;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .8;
}
.hero-seal::before{
  content:"";
  width: 14px; height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: none;
}

/* =============== STATEMENT =============== */
.statement{
  position: relative;
  padding: var(--section-pad) var(--gutter);
  max-width: 46rem;
  margin: 0 auto;
  text-align:center;
}
/* difumina el corte entre el hero oscuro y el fondo claro: arranca del mismo
   tono del fondo del hero y se disuelve en --bg, a todo el ancho de pantalla. */
.statement::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:100vw;
  height: clamp(160px, 26vw, 320px);
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    #171512 0%,
    rgba(61,54,48,.75) 16%,
    rgba(107,90,69,.45) 34%,
    rgba(196,155,74,.22) 58%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
.statement p{
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin:0;
}
.statement em{
  display:block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .62em;
  letter-spacing: .04em;
  color: var(--stone);
  margin-top: 1.4rem;
}

/* =============== SECTION HEAD (shared) =============== */
.work, .about, .contact{
  padding: 0 var(--gutter);
}
.work{ padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 78rem;
  margin-inline: auto;
}
.section-head h2,
.about h2, .contact h2{
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin:0;
  text-shadow: 0 10px 26px rgba(107,90,69,.22), 0 4px 40px rgba(196,155,74,.16);
}

.work-filters{
  display:flex; gap: .6rem;
}
.filter-btn{
  background: var(--paper);
  border:none; cursor:pointer;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(107,90,69,.16), 0 4px 14px rgba(196,155,74,.13);
  transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.filter-btn:hover{ color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.filter-btn.is-active{
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* =============== WORK GRID =============== */
/* Columnas al estilo masonry: cada obra conserva su propia proporción
   (vertical, cuadrada, panorámica) en vez de forzarse a una grilla pareja. */
.work-grid{
  max-width: 78rem;
  margin-inline: auto;
  columns: 3 18rem;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}

.work-item{
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  transition: opacity .5s var(--ease);
}
.work-item.is-filtered-out{
  display:none;
}

/* La obra "flota" sobre la página: sin caja, sin fondo, sin borde — sólo la
   imagen con su propia sombra cálida, como si el cuadro estuviera apoyado
   directamente sobre el papel. */
.artwork{
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  filter: var(--art-shadow);
  /* --art-shadow-hover es una sola capa con blur chico, así que animarla al
     pasar el mouse ya no es el problema de rendimiento que era antes (esa
     versión vieja tenía 3 capas con blur de hasta 124px). */
  transition: filter .35s var(--ease), transform .4s var(--ease);
}
.work-item:hover .artwork{
  filter: var(--art-shadow-hover);
  transform: translateY(-6px);
}
.work-item .artwork{ cursor: zoom-in; }

.artwork img,
.artwork video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform .8s var(--ease);
}
.artwork img.is-active,
.artwork video.is-active{
  opacity: 1;
}
.work-item:hover .artwork img.is-active{ transform: scale(1.02); }

figcaption{
  display:flex; flex-direction: column;
  margin-top: 1.1rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.w-title{ font-family: var(--serif); font-size: 1.02rem; color: var(--ink); margin-bottom:.2rem; }
.w-meta{
  color: var(--stone);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.w-desc{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: .7rem 0 0;
  max-width: 34rem;
}
.w-specs{
  display: block;
  margin-top: .55rem;
  font-size: .72rem;
  color: var(--stone);
}
.w-sold{
  align-self: flex-start;
  margin-top: .8rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--stone);
  color: var(--paper);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wa-work{
  align-self: flex-start;
  margin-top: .8rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--paper);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(107,90,69,.19), 0 4px 14px rgba(196,155,74,.13);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.wa-work:hover{
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.thumb{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border-radius: var(--radius-sm);
  background-color: var(--bg-deep);
  box-shadow: var(--shadow-sm);
}
.thumb img{
  width:100%; height:100%;
  object-fit: cover;
}

/* =============== MUESTRAS =============== */
.muestras{
  padding: 0 var(--gutter) var(--section-pad);
}
.muestras-grid{
  max-width: 78rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.muestras-grid--next{
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.muestra-frame{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--bg-deep);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.muestra-frame:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.muestra-frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 8s linear;
}
.muestra-frame img.is-active{
  opacity: 1;
  transform: scale(1.06);
}
.muestra-info{
  max-width: 78rem;
  margin: 1.8rem auto 0;
  text-align: center;
}
.muestra-title{
  font-family: var(--serif);
  font-weight: 450;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.muestra-meta{
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}

/* =============== PREMIOS =============== */
.premios{
  padding: 0 var(--gutter) var(--section-pad);
}
.premios-grid{
  max-width: 78rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.premio-card{
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.premio-card:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.premio-index{
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: .9rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--bg);
}
.premio-title{
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 .8rem;
}
.premio-work{
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 .3rem;
}
.premio-meta{
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}
.premio-cert{
  display: block;
  width: 100%;
  max-width: 23rem;
  height: auto;
  margin-top: 1.2rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.premio-item{
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* las tarjetas de una misma fila comparten alto (la imagen de afuera queda en
   la segunda fila del subgrid, así no estira a la tarjeta) */
@supports (grid-template-rows: subgrid){
  .premio-item{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: clamp(1.25rem, 2.5vw, 1.75rem);
    align-content: start;
  }
}
.premio-cert--out{
  max-width: 100%;
  margin-top: 0;
  box-shadow: var(--shadow-md);
}
.premio-link{
  display: inline-block;
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.premio-link:hover{
  border-color: var(--ink);
}

/* =============== ABOUT =============== */
.about{
  max-width: 78rem;
  margin-inline: auto;
  padding: 0 var(--gutter);
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* foto a la izquierda, texto a la derecha */
.about-header{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.about-media{
  /* Ancho explícito a propósito: en mobile este bloque es un grid item con
     `margin: 0 auto` (ver RESPONSIVE), y un grid item con márgenes auto deja
     de estirarse y se achica a su contenido. Su contenido son <img>/<video>
     absolutos, que miden 0 — así que colapsaba a 0x0 y no se veía nada. */
  width: 100%;
  max-width: 22rem;
}
.about-media:hover .artwork{
  filter: var(--art-shadow-hover);
  transform: translateY(-4px);
}
.about-intro{
  max-width: 42rem; /* ancho de lectura ~65ch */
  padding-top: .5rem;
}
.about-intro h2{ margin: 0 0 .7rem; }
.about-tagline{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.about-quote{
  font-family: var(--serif);
  font-weight: 450;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 1.6rem;
  text-shadow: 0 10px 26px rgba(107,90,69,.18), 0 4px 40px rgba(196,155,74,.14);
}

.about-block-title{
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 1.8rem 0 1rem;
}

.wa-about{
  display: inline-block;
  margin-top: 2rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .78rem;
  letter-spacing: .04em;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.wa-about:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.about-strip{
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---- ReadMore (reutilizable: cualquier [data-read-more]) ---- */
.read-more p{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}
.read-more > p + p{ margin-top: 1.2rem; }

.read-more-extra{
  position: relative;
  overflow: hidden;
  max-height: 5.5rem; /* peek por defecto antes de que corra el JS */
  margin-top: 1.2rem;
  transition: max-height .5s var(--ease);
}
.read-more-extra p + p,
.read-more-extra .about-block-title + p{ margin-top: 1.1rem; }
.read-more-extra p:first-child{ margin-top: 0; }

.read-more-fade{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.4rem;
  background: linear-gradient(to bottom, rgba(247,245,241,0), var(--bg));
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s var(--ease);
}
.read-more.is-expanded .read-more-fade{ opacity: 0; }

.read-more-toggle{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
  padding: 0 0 .3rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color .3s var(--ease);
}
.read-more-toggle:hover{ border-color: var(--ink); }
.read-more-arrow{
  width: 14px; height: 14px;
  flex: none;
  transition: transform .4s var(--ease);
}
.read-more.is-expanded .read-more-arrow{ transform: rotate(180deg); }

/* =============== CONTACT =============== */
.contact{
  text-align:center;
  max-width: 40rem;
  margin-inline:auto;
  padding-top: calc(var(--section-pad) * .55);
  padding-bottom: calc(var(--section-pad) * .8);
}
.contact-links{
  display:flex; justify-content:center; align-items:center; gap: 2.1rem;
  margin-top: 2.2rem;
}
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.icon-btn svg{ width: 22px; height: 22px; }
.icon-btn:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  background: #3a3327;
}

.contact-divider{
  display:flex; align-items:center; gap: 1rem;
  margin: 2.6rem 0;
  color: var(--stone);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contact-divider::before,
.contact-divider::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--line);
}

.contact-form{
  text-align: left;
  max-width: 30rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 2.75rem);
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.form-row{
  margin-bottom: 1.5rem;
}
.form-row label{
  display:block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: .5rem;
}
/* "(opcional)" al lado del label: mismo tono, sin mayúsculas ni tracking */
.form-row label .label-opt{
  text-transform: none;
  letter-spacing: .02em;
  opacity: .65;
}
.form-row input,
.form-row textarea{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: .5rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  resize: vertical;
  transition: border-color .3s var(--ease);
}
.form-row input:focus-visible,
.form-row textarea:focus-visible{
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 0 var(--ink);
}
.btn-submit{
  width:100%;
  border: none;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn-submit:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.form-note{
  margin: 1rem 0 0;
  font-size: .82rem;
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* =============== FOOTER =============== */
.site-footer{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem var(--gutter) 2.4rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--stone);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -20px 40px -24px rgba(107,90,69,.3), 0 -30px 60px -30px rgba(196,155,74,.22);
}
.footer-row{
  display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center;
  gap: .4rem 1.5rem;
  width: 100%;
}
.footer-credit{
  color: var(--stone);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer-credit:hover{
  color: var(--ink);
  border-color: var(--ink);
}

/* =============== LIGHTBOX (obras) =============== */
.lightbox{
  position: fixed; inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(23,21,18,.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease), visibility 0s linear 0s;
}
.lightbox-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--art-shadow-hover);
  transform: scale(.96);
  transition: transform .4s var(--ease);
}
.lightbox.is-open .lightbox-img{ transform: scale(1); }
.lightbox-close{
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lightbox-close:hover{
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
}
.lightbox-close svg{ width: 20px; height: 20px; }

/* navegación manual entre fotos de la misma obra — nunca automática */
.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.lightbox-nav:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-50%) scale(1.06);
}
.lightbox-nav svg{ width: 22px; height: 22px; }
.lightbox-prev{ left: clamp(.75rem, 3vw, 2rem); }
.lightbox-next{ right: clamp(.75rem, 3vw, 2rem); }
.lightbox-nav[hidden]{ display: none; }

.lightbox-count{
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--paper);
  opacity: .75;
}

@media (max-width: 620px){
  .lightbox-nav{ width: 40px; height: 40px; }
  .lightbox-nav svg{ width: 18px; height: 18px; }
}

/* =============== WHATSAPP FLOTANTE =============== */
.wa-float{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: clamp(1.1rem, 3vw, 2.2rem);
  bottom: clamp(1.1rem, 3vw, 2.2rem);
  z-index: 180;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.wa-float svg{ width: 27px; height: 27px; }
.wa-float:hover{
  background: #3a3327;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px) scale(1);
}
.wa-float.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* =============== RESPONSIVE =============== */
@media (max-width: 860px){
  .about-header{ grid-template-columns: 1fr; }
  .about-media{ max-width: 20rem; margin: 0 auto; }
  .work-grid{ columns: 2 14rem; }
  .muestras-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
  /* backdrop-filter en el header crea un containing block para descendientes
     position:fixed (como este overlay), rompiendo inset:0 al hacer scroll.
     Se desactiva el blur en mobile para que el overlay siga midiendo el viewport real. */
  .site-header.is-scrolled{ backdrop-filter: none; }

  .main-nav{
    position: fixed; inset: 0;
    background: var(--bg);
    color: var(--ink);
    flex-direction: column;
    justify-content:center; align-items:center;
    gap: 2rem;
    font-size: 1rem;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    z-index: 150;
  }
  .main-nav.is-open{ transform: translateY(0); }
  .menu-toggle{ display:flex; }
  body.menu-open .menu-toggle span:first-child{ transform: translateY(3.5px) rotate(45deg); }
  body.menu-open .menu-toggle span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

  /* --- HERO ---
     La portada es apaisada (1600x829) y la pantalla del celular es vertical,
     así que la foto entera es una franja de ancho completo y alto ancho/1.93.
     El hero se arma como esa franja más el alto del header arriba: así la
     foto se ve completa, el header no se le encima, y el texto va sobre la
     foto como en desktop (absoluto, apoyado abajo). Las tipografías escalan
     en vw para que sigan entrando a medida que la franja se achica. */
  .hero{
    height: auto;
    min-height: 0;
    padding-top: 6rem; /* alto del header fijo */
    /* la franja que queda arriba de la foto: sin esto el header (texto
       blanco, fondo transparente) cae sobre el fondo claro del sitio. */
    background: linear-gradient(160deg, #3d3630 0%, #23201c 100%);
  }
  .hero-media{
    position: relative;
    inset: auto;
    aspect-ratio: 1600 / 829;
  }
  /* contain y no cover: la variante -sm tiene una proporción 1px distinta a
     la de la caja, y con cover eso alcanzaba para recortarla. */
  .hero-img{ object-fit: contain; }
  .hero-content{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding-bottom: .8rem;
  }
  .hero-eyebrow{
    font-size: clamp(.4rem, 2.1vw, .62rem);
    letter-spacing: .16em;
    padding: .38em .1em;
    margin: 0 0 .45rem;
  }
  /* nombre y apellido en un renglón: el salto no entra en la franja */
  .hero-title br{ display: none; }
  .hero-title{
    font-size: clamp(1.4rem, 7.4vw, 2.4rem);
    margin: 0 0 .35rem;
  }
  .hero-tagline{ font-size: clamp(.62rem, 3vw, .95rem); }
  .hero-seal{
    font-size: clamp(.4rem, 2.1vw, .6rem);
    letter-spacing: .07em;
    margin: .4rem 0 0;
  }

  .work-grid{ columns: 1; }
  .muestras-grid{ grid-template-columns: 1fr; }

  /* Premios de a dos a lo ancho. Con ~160px por tarjeta hay que achicar
     padding y tipografías, si no el texto se parte en muchas líneas. */
  .premios-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
  }
  .premio-card{ padding: 1.1rem .95rem; }
  .premio-index{
    font-size: .56rem;
    letter-spacing: .07em;
    padding: .24rem .5rem;
    margin-bottom: .65rem;
  }
  .premio-title{ font-size: .95rem; margin-bottom: .5rem; }
  .premio-work{ font-size: .82rem; }
  .premio-meta{ font-size: .6rem; letter-spacing: .03em; }
  .premio-link{ margin-top: .8rem; font-size: .72rem; }
  .premio-cert{ margin-top: .9rem; }
  .premio-item{ gap: .9rem; }

  /* "Logros, reconocimientos y premios" en un solo renglón. El máximo al que
     entra, medido con la tipografía ya cargada, va de 4.96vw (pantalla de
     320px, el caso más ajustado) a 5.67vw (620px); 4.8vw entra en todas.
     El tope de 1.6rem evita que crezca de más cerca del breakpoint. */
  #premios .section-head h2{
    font-size: min(4.8vw, 1.6rem);
    white-space: nowrap;
  }

  .footer-row{ flex-direction:column; gap:.4rem; text-align:center; }

  .wa-float{ width: 52px; height: 52px; }
  .wa-float svg{ width: 24px; height: 24px; }
}