/* ═══════════════════════════════════════════
   CINDY KRONFLE — DESIGN SYSTEM
   ═══════════════════════════════════════════ */
:root {
  --ivory: #F6F2ED;
  --ivory-warm: #F0EBE4;
  --espresso: #2B2623;
  --espresso-light: #4A4340;
  --stone: #D8D2CA;
  --stone-light: #E8E3DC;
  --taupe: #B9ADA0;
  --taupe-dark: #9A8E80;
  /* Tono para textos pequeños: mismo carácter cálido, contraste AA (4.4:1) */
  --taupe-text: #7A6E62;
  --cream: #FAF8F5;
  --linen: #EEEBE6;
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body {
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ═══ LOADING ═══ */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: opacity 0.8s var(--ease-luxury), visibility 0.8s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--espresso);
  opacity: 0; animation: loaderFade 1.5s var(--ease-luxury) forwards;
}
.loader-line {
  width: 60px; height: 1px; background: var(--taupe); margin-top: 1.5rem;
  transform: scaleX(0); animation: loaderLine 1.2s var(--ease-out-expo) 0.3s forwards;
}
@keyframes loaderFade { to { opacity: 1; } }
@keyframes loaderLine { to { transform: scaleX(1); } }

/* ═══ NAVIGATION ═══ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.75rem clamp(1.5rem, 5vw, 4rem);
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.5s, backdrop-filter 0.5s, padding 0.4s;
}
.nav.scrolled {
  background: rgba(246, 242, 237, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 1.1rem clamp(1.5rem, 5vw, 4rem);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
}
.nav-logo span {
  display: block; font-size: 0.55em; letter-spacing: 0.35em;
  font-weight: 300; color: var(--taupe-text); margin-top: 0.15em;
}
.nav-links { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); list-style: none; }
.nav-links a {
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--espresso-light);
  position: relative; transition: color 0.3s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--taupe);
  transition: width 0.4s var(--ease-out-expo);
}
.nav-links a:hover { color: var(--espresso); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; z-index: 1001; }
.nav-toggle span {
  display: block; width: 100%; height: 1px; background: var(--espresso);
  transition: transform 0.4s var(--ease-out-expo), opacity 0.3s;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ═══ HERO ═══ */
.hero {
  position: relative; height: 100vh; min-height: 700px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 40%;
  transform: scale(1.06);
  animation: heroZoom 12s var(--ease-luxury) forwards;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(43,38,35,0.18) 0%,
    rgba(43,38,35,0.06) 28%,
    rgba(43,38,35,0.28) 62%,
    rgba(43,38,35,0.74) 100%
  );
}
.hero-content {
  position: relative; z-index: 2;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 6rem);
  max-width: 800px; color: var(--cream);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300;
  line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(30px);
  animation: fadeUp 1s var(--ease-out-expo) 1.7s forwards;
}
.hero h1 em { font-style: italic; }
.hero-sub {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem); font-weight: 300;
  line-height: 1.8; color: var(--stone); max-width: 520px; margin-bottom: 2.5rem;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out-expo) 2s forwards;
}
.hero-ctas {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out-expo) 2.2s forwards;
}
.btn-primary {
  padding: 0.9rem 2.5rem; font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.4); color: white;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
  transition: all 0.4s var(--ease-luxury);
}
.btn-primary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); }
.btn-secondary {
  padding: 0.9rem 2.5rem; font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: white;
  transition: color 0.3s; display: flex; align-items: center; gap: 0.6rem;
}
.btn-secondary::after { content: '→'; transition: transform 0.3s var(--ease-out-expo); }
.btn-secondary:hover::after { transform: translateX(4px); }
.hero-scroll {
  position: absolute; bottom: 2rem; right: clamp(1.5rem, 5vw, 4rem);
  z-index: 2; writing-mode: vertical-lr;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); display: flex; align-items: center; gap: 0.8rem;
  opacity: 0; animation: fadeUp 0.6s var(--ease-out-expo) 2.5s forwards;
}
.hero-scroll::after {
  content: ''; width: 1px; height: 40px; background: var(--taupe);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes heroZoom { to { transform: scale(1); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ═══ UTILITIES ═══ */
.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 6rem); }
.section-label {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--taupe-text); margin-bottom: 1rem;
}
.section-number {
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 300; color: var(--taupe-text); margin-right: 0.6rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 300;
  line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1.5rem;
}
.section-title em { font-style: italic; }
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══ ABOUT ═══ */
.about { background: var(--cream); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem); max-width: 1400px;
  margin: 0 auto; align-items: center;
}
.about-image {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
}
.about-image img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 20%;
  transition: transform 0.8s var(--ease-luxury);
}
.about-image:hover img { transform: scale(1.03); }
.about-caption {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(43,38,35,0.3); backdrop-filter: blur(6px);
  padding: 0.4rem 0.8rem;
}
.about-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300;
  line-height: 1.25; margin-bottom: 2rem;
}
.about-content h2 em { font-style: italic; }
.about-text {
  font-size: 0.9rem; color: var(--espresso-light);
  line-height: 1.9; margin-bottom: 1.5rem;
}
.about-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
  margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--stone-light);
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 300; line-height: 1;
}
.stat-label {
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--taupe-text); margin-top: 0.5rem;
}

/* ═══ PAUSA — FILOSOFÍA ═══
   Interludio oscuro: baja las luces entre "Sobre mí" (crema) y
   "Proyectos" (marfil). Crea contraste real y convierte la entrada
   al portafolio en una revelación, no en una continuación. */
.philosophy {
  position: relative;
  background: var(--espresso);
  color: var(--cream);
  padding: clamp(7rem, 17vh, 12rem) clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
/* Halo de luz muy sutil: da profundidad sin decorar */
.philosophy::before {
  content: ''; position: absolute; inset: -20% 10% auto 10%;
  height: 120%; z-index: -1;
  background: radial-gradient(ellipse at 50% 40%,
              rgba(185,173,160,0.10) 0%,
              rgba(185,173,160,0.04) 38%,
              transparent 70%);
  pointer-events: none;
}
.philosophy-inner {
  max-width: 1000px; margin: 0 auto; text-align: center;
}
.philosophy-quote {
  font-family: var(--font-display);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.85rem, 4.6vw, 3.45rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--cream);
}
.philosophy-quote em { font-style: italic; color: #EFE7DC; }
/* Cada línea entra por separado: lectura pausada, cinematográfica */
.ph-line {
  display: block;
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.15s var(--ease-out-expo),
              transform 1.15s var(--ease-out-expo);
}
.philosophy.visible .ph-line { opacity: 1; transform: translateY(0); }
.philosophy.visible .ph-line:nth-child(2) { transition-delay: 0.16s; }

.philosophy-rule {
  display: block; width: 46px; height: 1px;
  background: var(--taupe); opacity: 0.55;
  margin: clamp(2.2rem, 4vw, 3rem) auto clamp(1.1rem, 2vw, 1.5rem);
  transform: scaleX(0); transform-origin: center;
  transition: transform 1.1s var(--ease-out-expo) 0.42s;
}
.philosophy.visible .philosophy-rule { transform: scaleX(1); }

.philosophy-cite {
  display: block; font-family: var(--font-body); font-style: normal;
  font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--taupe);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.9s var(--ease-out-expo) 0.56s,
              transform 0.9s var(--ease-out-expo) 0.56s;
}
.philosophy.visible .philosophy-cite { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .philosophy { padding-left: 1.25rem; padding-right: 1.25rem; }
  .philosophy-quote { font-size: clamp(1.6rem, 7.4vw, 2.1rem); line-height: 1.32; }
  .ph-line { display: inline; }  /* deja que el texto fluya natural en pantalla angosta */
}

/* ═══ FEATURED PROJECT ═══ */
.featured { background: var(--ivory); }
.featured-header {
  max-width: 1400px; margin: 0 auto 3rem;
}
.featured-hero {
  position: relative; width: 100%; max-width: 1400px; margin: 0 auto;
  aspect-ratio: 16/9; overflow: hidden;
  /* Marcador borroso incrustado: se ve algo desde el primer instante
     en lugar de un hueco vacío mientras baja la foto. */
  background-size: cover; background-position: center;
  background-color: var(--stone-light);
}
.featured-hero picture { display: block; width: 100%; height: 100%; }
.featured-hero img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-luxury);
}
.featured-hero:hover img { transform: scale(1.02); }
.featured-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 50%, rgba(43,38,35,0.4));
  display: flex; align-items: flex-end; padding: clamp(1.5rem, 3vw, 3rem);
}
.featured-hero-info h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; color: white;
  margin-bottom: 0.3rem;
}
.featured-hero-info span {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone);
}

.featured-detail {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  padding-top: 1.5rem;
}
.featured-detail-text {
  padding: clamp(2rem, 3vw, 3rem);
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
}
.featured-detail-text h4 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 400;
  font-style: italic; margin-bottom: 1rem;
}
.featured-detail-text p {
  font-size: 0.88rem; color: var(--espresso-light); line-height: 1.85;
  margin-bottom: 1.5rem;
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-tag {
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 1rem; border: 1px solid var(--stone); color: var(--taupe-dark);
}

.featured-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: 1400px; margin: 1.5rem auto 0;
}
.gallery-item {
  overflow: hidden; position: relative; cursor: pointer;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5;
  transition: transform 0.6s var(--ease-luxury);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(transparent, rgba(43,38,35,0.5));
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  opacity: 0; transition: opacity 0.4s;
}
.gallery-item:hover .gallery-caption { opacity: 1; }

/* ═══ SERVICES ═══ */
.services { background: var(--ivory); }
/* 8 servicios: columnas explícitas (4 / 2 / 1) para que siempre
   formen filas completas y no queden celdas vacías al final. */
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; max-width: 1400px; margin: 3rem auto 0;
  border: 1px solid var(--stone-light);
}
.service-item {
  padding: clamp(2rem, 3vw, 3rem);
  border-right: 1px solid var(--stone-light);
  border-bottom: 1px solid var(--stone-light);
  transition: background 0.4s;
}
/* Sin bordes dobles contra el marco exterior */
.services-grid > .service-item:nth-child(4n) { border-right: none; }
.services-grid > .service-item:nth-child(n+5) { border-bottom: none; }
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid > .service-item { border-right: 1px solid var(--stone-light); border-bottom: 1px solid var(--stone-light); }
  .services-grid > .service-item:nth-child(2n) { border-right: none; }
  .services-grid > .service-item:nth-child(n+7) { border-bottom: none; }
}
@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid > .service-item { border-right: none; border-bottom: 1px solid var(--stone-light); }
  .services-grid > .service-item:last-child { border-bottom: none; }
}
.service-item:hover { background: var(--cream); }
.service-icon {
  width: 28px; height: 1px; background: var(--taupe); margin-bottom: 1.5rem;
  transition: width 0.4s var(--ease-out-expo);
}
.service-item:hover .service-icon { width: 45px; }
.service-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 400; margin-bottom: 0.9rem;
  line-height: 1.25; text-wrap: balance;
}
/* Antes --taupe-dark: 2.87:1, por debajo del mínimo AA.
   #6B6054 conserva el matiz cálido y llega a 5.5:1. */
.service-item p {
  font-size: 0.82rem; color: #6B6054; line-height: 1.75; text-wrap: pretty;
}

/* ═══ TESTIMONIALS ═══ */
.testimonials { background: var(--cream); }
.testimonials-slider {
  max-width: 800px; margin: 0 auto; text-align: center;
  position: relative; min-height: 250px;
}
.testimonial-slide {
  opacity: 0; position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease-luxury);
}
.testimonial-slide.active { opacity: 1; position: relative; }
.testimonial-slide blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 300;
  font-style: italic; line-height: 1.5; margin-bottom: 2rem;
}
.testimonial-slide cite {
  font-family: var(--font-body); font-style: normal; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe);
}
.testimonial-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--stone);
  transition: background 0.3s, transform 0.3s; cursor: pointer;
}
.dot.active { background: var(--taupe-dark); transform: scale(1.3); }

/* ═══ INSTAGRAM ═══ */
.insta { background: var(--ivory); text-align: center; }
/* Grilla editorial de 6: aire entre piezas y foco al pasar el cursor.
   Sin interfaz de Instagram — solo la fotografía. */
.insta-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  max-width: 1180px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
.insta-item {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--stone-light); cursor: pointer;
}
.insta-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out-expo), filter 0.7s var(--ease-luxury);
}
/* Velo tenue que se disipa al pasar el cursor: invita sin gritar */
.insta-item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(43,38,35,0.10);
  transition: opacity 0.7s var(--ease-luxury);
}
.insta-item:hover::after { opacity: 0; }
.insta-item:hover img { transform: scale(1.045); }

.insta-handle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--taupe-text);
  padding-bottom: 0.4rem; border-bottom: 1px solid transparent;
  transition: color 0.4s, border-color 0.4s;
}
.insta-handle:hover { color: var(--espresso); border-bottom-color: var(--taupe); }

/* ═══ CONTACT ═══ */
.contact { background: var(--espresso); color: var(--cream); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem); max-width: 1400px;
  margin: 0 auto; align-items: start;
}
.contact-left h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 300;
  line-height: 1.2; margin-bottom: 1.5rem;
}
.contact-left h2 em { font-style: italic; }
/* Párrafo descriptivo opcional. Acotado con :not() para que nunca
   sobrescriba el margen de la etiqueta de sección. */
.contact-left p:not(.section-label) {
  font-size: 0.88rem; color: var(--taupe); line-height: 1.8; margin-bottom: 2.5rem;
}
/* Margen propio: el aire bajo el título no depende de que exista
   un párrafo antes de los datos de contacto. */
.contact-details {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.contact-details a {
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--taupe); transition: color 0.3s;
}
.contact-details a:hover { color: var(--cream); }
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-group label {
  display: block; font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--taupe); margin-bottom: 0.5rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.9rem 0; font-family: var(--font-body);
  font-size: 0.88rem; font-weight: 300; color: var(--cream);
  background: transparent; border: none;
  border-bottom: 1px solid var(--espresso-light); outline: none;
  transition: border-color 0.3s; -webkit-appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--taupe); }
.form-group select { cursor: pointer; }
.form-group select option { background: var(--espresso); color: var(--cream); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.btn-submit {
  align-self: flex-start; padding: 1rem 3rem;
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cream);
  border: 1px solid var(--taupe-dark); background: transparent;
  transition: all 0.4s var(--ease-luxury); margin-top: 0.5rem;
}
.btn-submit:hover { background: var(--taupe-dark); color: var(--espresso); }

/* ═══ FOOTER ═══ */
.footer {
  background: var(--espresso);
  border-top: 1px solid rgba(185,173,160,0.15);
  padding: 2.5rem clamp(1.5rem, 6vw, 6rem);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-left {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--taupe);
}
.footer-right { font-size: 0.65rem; color: var(--taupe-dark); letter-spacing: 0.1em; }

/* ═══ LIGHTBOX ═══ */
.lightbox {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(43,38,35,0.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.4s var(--ease-luxury);
  cursor: pointer;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.lightbox-close {
  position: absolute; top: 2rem; right: 2rem;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-image { max-width: 500px; }
  .contact-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-detail { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--ivory); flex-direction: column;
    align-items: center; justify-content: center; gap: 2rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 0.9rem; }
  .nav-toggle { display: flex; }
  .featured-gallery { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════
   REFINAMIENTOS GLOBALES
   ═══════════════════════════════════════════ */

/* Botón sólido para fondos claros (el .btn-primary es para el hero oscuro) */
.btn-dark {
  display: inline-block;
  padding: 1rem 2.75rem;
  font-family: var(--font-body);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); background: var(--espresso);
  border: 1px solid var(--espresso);
  transition: background 0.45s var(--ease-luxury),
              color 0.45s var(--ease-luxury);
}
.btn-dark:hover { background: transparent; color: var(--espresso); }

/* Foco visible y consistente */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--espresso); outline-offset: 3px;
}
.hero a:focus-visible, .footer a:focus-visible { outline-color: var(--cream); }

/* ── Proyectos: entrada como revelación ── */
#work.featured {
  padding-top: clamp(4rem, 8vh, 6.5rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
}
#work .featured-header { margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
.featured-header .section-label { position: relative; padding-top: 1.5rem; margin-bottom: 0.85rem; }
.featured-header .section-label::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 46px; height: 1px; background: var(--taupe);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out-expo) 0.1s;
}
.featured-header.visible .section-label::before { transform: scaleX(1); }
.featured-hero {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--ease-out-expo);
}
.featured-hero.visible { clip-path: inset(0 0 0 0); }
.featured-hero img { transform: scale(1.09); transition: transform 1.9s var(--ease-out-expo); }
.featured-hero.visible img { transform: scale(1); }
.featured-hero.visible:hover img { transform: scale(1.03); }
.featured-detail { margin-top: clamp(2.5rem, 5vw, 4rem); }
.featured-gallery { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

@media (prefers-reduced-motion: reduce) {
  .featured-hero { clip-path: none !important; }
  .featured-hero img { transform: none !important; }
}

@media (max-width: 900px) {
  .nav-links.open a { display: block; padding: 0.85rem 0; font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DIARIO — sistema editorial
   Medidas: el texto vive en una columna de lectura estrecha (~64
   caracteres). Las figuras salen de esa columna a distintos anchos
   según su función. Eso rompe el ritmo de "plantilla de blog".
   ═══════════════════════════════════════════════════════════════ */
.journal {
  --col: 39rem;        /* columna de lectura */
  --col-wide: 54rem;   /* figura contenida */
  --col-full: 72rem;   /* figura amplia */
  background: var(--ivory);
}

/* Barra de progreso de lectura */
.read-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--taupe-dark); z-index: 2000;
  transition: width 0.1s linear;
}

/* ── Apertura tipográfica ── */
.jr-open {
  max-width: var(--col-wide); margin: 0 auto;
  padding: clamp(8.5rem, 17vh, 12rem) clamp(1.5rem, 5vw, 2.5rem) 0;
  text-align: center;
}
.jr-kicker {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--taupe-text);
}
.jr-kicker span[aria-hidden] { width: 22px; height: 1px; background: var(--taupe); display: block; }

.jr-title {
  font-family: var(--font-display);
  font-weight: 300;
  /* Más contenido que antes: la elegancia viene de la proporción */
  font-size: clamp(2.05rem, 3.9vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--espresso);
  max-width: 20ch; margin: 0 auto;
  text-wrap: balance;
}
.jr-title em { font-style: italic; }

.jr-deck {
  max-width: 34rem; margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.75; font-weight: 300;
  color: var(--espresso-light);
  text-wrap: pretty;
}
.jr-byline {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone);
  display: inline-block;
  font-size: 0.62rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--taupe-text);
}

/* ── Figuras: tres anchos con propósito ── */
.jr-fig { margin: clamp(3.5rem, 7vw, 5.5rem) auto; }
.jr-fig img { width: 100%; height: auto; }
.jr-fig--read { max-width: var(--col); }
.jr-fig--wide { max-width: var(--col-wide); }
.jr-fig--full { max-width: var(--col-full); }
.jr-fig figcaption {
  margin-top: 1rem; padding-left: 0;
  font-size: 0.75rem; line-height: 1.65; font-weight: 300;
  color: var(--taupe-text); max-width: 30rem;
}
.jr-fig--wide figcaption, .jr-fig--full figcaption { margin-left: 0; }

/* Par de imágenes verticales */
.jr-duo {
  max-width: var(--col-wide); margin: clamp(3.5rem, 7vw, 5.5rem) auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 2vw, 1.4rem);
}
.jr-duo figcaption { margin-top: 0.9rem; font-size: 0.72rem; color: var(--taupe-text); line-height: 1.6; }

/* ── Cuerpo ── */
.jr-body { max-width: var(--col); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 2.5rem); }
.jr-body > p {
  font-size: 1.06rem; line-height: 1.92; font-weight: 300;
  color: var(--espresso-light); margin-bottom: 1.5rem;
  text-wrap: pretty;
}
.jr-body > p:last-child { margin-bottom: 0; }
/* Entrada del artículo, ligeramente mayor */
.jr-body > p.jr-lead { font-size: 1.16rem; line-height: 1.85; color: var(--espresso); }

/* ── Secciones numeradas ── */
.jr-sec {
  max-width: var(--col); margin: clamp(3.5rem, 7vw, 5rem) auto clamp(1.5rem, 3vw, 2rem);
  padding: 0 clamp(1.5rem, 5vw, 2.5rem);
}
.jr-sec-num {
  display: block; margin-bottom: 0.9rem;
  font-family: var(--font-body); font-size: 0.62rem;
  letter-spacing: 0.3em; color: var(--taupe-text);
  font-variant-numeric: tabular-nums;
}
.jr-sec h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.28; letter-spacing: -0.005em; color: var(--espresso);
  max-width: 24ch; text-wrap: balance;
}

/* ── Cita destacada ── */
.jr-quote {
  max-width: var(--col-wide); margin: clamp(4rem, 8vw, 6rem) auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.jr-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  line-height: 1.4; letter-spacing: -0.008em; color: var(--espresso);
  max-width: 22ch; margin: 0 auto; text-wrap: balance;
}
.jr-quote::before, .jr-quote::after {
  content: ''; display: block; width: 34px; height: 1px;
  background: var(--taupe); margin: 0 auto;
}
.jr-quote::before { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.jr-quote::after  { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ── Lista editorial ── */
.jr-list { max-width: var(--col); margin: 0 auto 1.75rem; padding: 0 clamp(1.5rem, 5vw, 2.5rem); list-style: none; }
.jr-list li {
  position: relative; padding-left: 1.5rem; margin-bottom: 1rem;
  font-size: 1.06rem; line-height: 1.85; font-weight: 300; color: var(--espresso-light);
}
.jr-list li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 8px; height: 1px; background: var(--taupe);
}
.jr-list strong { font-weight: 500; color: var(--espresso); }

/* ── Cierre ── */
.jr-end {
  max-width: var(--col); margin: clamp(4rem, 8vw, 6rem) auto 0;
  padding: 0 clamp(1.5rem, 5vw, 2.5rem);
}
.jr-note {
  padding-top: 1.75rem; border-top: 1px solid var(--stone);
  font-size: 0.9rem; line-height: 1.75; color: var(--espresso-light);
}
.jr-note a { border-bottom: 1px solid var(--stone); padding-bottom: 2px; transition: border-color .4s, color .4s; }
.jr-note a:hover { color: var(--taupe-dark); border-color: var(--taupe-dark); }

.jr-cta {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--cream); border: 1px solid var(--stone-light);
  text-align: center;
}
.jr-cta h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--espresso); margin-bottom: 1.1rem;
}
.jr-cta p { font-size: 0.95rem; color: var(--espresso-light); margin-bottom: 1.75rem; }

.jr-back {
  display: inline-block; margin-top: clamp(3rem, 6vw, 4rem);
  font-size: 0.65rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--taupe-text); padding-bottom: 0.4rem;
  border-bottom: 1px solid transparent; transition: color .4s, border-color .4s;
}
.jr-back:hover { color: var(--espresso); border-bottom-color: var(--taupe); }

/* ── Revelado suave al entrar en pantalla ── */
.jr-rise { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); }
.jr-rise.visible { opacity: 1; transform: translateY(0); }
.jr-fig img, .jr-duo img { transition: transform 1.4s var(--ease-out-expo); }

@media (max-width: 640px) {
  .jr-duo { grid-template-columns: 1fr; }
  .jr-body > p { font-size: 1.01rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-rise { opacity: 1 !important; transform: none !important; }
  .read-bar { display: none; }
}

/* ═══ DIARIO — portada del índice ═══ */
.idx-open {
  max-width: 72rem; margin: 0 auto;
  padding: clamp(8.5rem, 17vh, 12rem) clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5rem);
}
.idx-open .jr-kicker { justify-content: flex-start; }
.idx-open h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.1; letter-spacing: -0.015em; color: var(--espresso);
  max-width: 15ch; text-wrap: balance;
}
.idx-open h1 em { font-style: italic; }
.idx-open p {
  margin-top: clamp(1.6rem, 3vw, 2.1rem); max-width: 32rem;
  font-size: 1rem; line-height: 1.8; font-weight: 300; color: var(--espresso-light);
}
.idx-rule { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); }
.idx-rule span { display: block; height: 1px; background: var(--stone); }

/* Artículo principal */
.idx-lead {
  max-width: 72rem; margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.idx-lead-media { overflow: hidden; aspect-ratio: 3/2; background: var(--stone-light); }
.idx-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out-expo); }
.idx-lead:hover .idx-lead-media img { transform: scale(1.035); }
.idx-lead h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--espresso);
  margin: 0.9rem 0 0.9rem; max-width: 16ch; text-wrap: balance;
  transition: color 0.4s;
}
.idx-lead:hover h2 { color: var(--taupe-dark); }
.idx-lead p { font-size: 0.97rem; line-height: 1.8; font-weight: 300; color: var(--espresso-light); max-width: 30rem; }

/* Resto: lista editorial, no tarjetas */
.idx-list { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(6rem, 12vw, 9rem); }
.idx-item {
  display: grid; grid-template-columns: 8rem 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-top: 1px solid var(--stone-light);
}
.idx-item:last-child { border-bottom: 1px solid var(--stone-light); }
.idx-thumb { overflow: hidden; aspect-ratio: 4/3; background: var(--stone-light); }
.idx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.idx-item:hover .idx-thumb img { transform: scale(1.06); }
.idx-item h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3;
  color: var(--espresso); margin-top: 0.5rem; max-width: 26ch;
  transition: color 0.4s;
}
.idx-item:hover h3 { color: var(--taupe-dark); }
.idx-arrow {
  font-size: 1.1rem; color: var(--taupe);
  transition: transform 0.5s var(--ease-out-expo), color 0.4s;
}
.idx-item:hover .idx-arrow { transform: translateX(6px); color: var(--espresso); }

@media (max-width: 800px) {
  .idx-lead { grid-template-columns: 1fr; }
  .idx-item { grid-template-columns: 6rem 1fr; }
  .idx-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPIRACIÓN Y ASIMETRÍA
   El espacio vertical entre secciones ya era generoso (hasta 144px);
   lo que faltaba era aire ENTRE imágenes y romper los 50/50 perfectos.
   ═══════════════════════════════════════════════════════════════ */

/* ── Galería de proyectos: asimétrica y desfasada ──
   Una pieza más ancha que la otra, y la segunda cae desplazada:
   el vacío deja de ser un margen y pasa a ser parte de la composición. */
.featured-gallery {
  grid-template-columns: 1.25fr 0.95fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
/* Solo desfase positivo en la segunda columna: evita solapamientos */
.featured-gallery .gallery-item:nth-child(2),
.featured-gallery .gallery-item:nth-child(4) { margin-top: clamp(2rem, 5vw, 4.5rem); }

/* La fila de detalle también deja de ser mitad y mitad */
.featured-detail {
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* ── Instagram: de hoja de contactos a muro curado ──
   Antes 10–18px de separación. Ahora respira y la fila baja
   entra desfasada para quebrar la retícula perfecta. */
.insta-grid {
  gap: clamp(1.4rem, 2.8vw, 2.25rem);
  max-width: 1120px;
}
/* La columna del medio baja: quiebra la retícula perfecta sin romperla */
.insta-item:nth-child(2),
.insta-item:nth-child(5) { margin-top: clamp(1rem, 2.5vw, 2.5rem); }

/* ── Par de imágenes del artículo ── */
.jr-duo {
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.jr-duo figure:nth-child(2) { margin-top: clamp(1.75rem, 4vw, 3.5rem); }

/* ── Figuras del artículo: las contenidas se desplazan del eje ──
   Un vacío concentrado a un lado lee como lujo; un margen parejo, no. */
/* Desplazamiento sutil respecto al eje: el vacío se concentra a un lado.
   Se mantiene el centrado (margin auto) para no salirse de la columna. */
@media (min-width: 1000px) {
  .jr-fig--read { transform: translateX(-3.5rem); }
  .jr-fig--wide { transform: translateX(2.5rem); }
}

@media (max-width: 800px) {
  .featured-gallery { grid-template-columns: 1fr; }
  .featured-gallery .gallery-item { margin-top: 0 !important; }
  .insta-item { margin-top: 0 !important; }
  .jr-duo figure:nth-child(2) { margin-top: 0; }
  .jr-fig--read, .jr-fig--wide { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ARTÍCULO — alineación estricta de la columna de lectura
   ═══════════════════════════════════════════════════════════════ */

/* 1. El párrafo que introduce una lista perdía su margen inferior
      (por :last-child) y la lista no tenía margen superior: 0px entre
      ambos. Se lo devolvemos a la lista. */
.jr-list { margin-top: 1.6rem; }

/* 2. El texto de la lista estaba sangrado 1.5rem respecto al cuerpo.
      Ahora alinea exactamente con los párrafos y el guion cuelga en
      el margen — sangría francesa, como en tipografía editorial. */
.jr-list li { padding-left: 0; }
.jr-list li::before { left: -1.15rem; top: 0.9em; width: 7px; }
/* El <ul> conserva el MISMO padding que el cuerpo: así el texto de cada
   ítem arranca exactamente en la misma x que los párrafos, y el guion
   queda colgado hacia afuera. */

/* 3. La figura del ancho de lectura tenía la misma medida que el texto
      pero sin padding, así que sobresalía por ambos lados. Ahora sus
      bordes coinciden exactamente con la columna de texto. */
.jr-fig--read { padding: 0 clamp(1.5rem, 5vw, 2.5rem); }

/* 4. Se retiran los desplazamientos laterales dentro del artículo:
      en una columna de lectura la disciplina vale más que el gesto.
      La asimetría ya la dan los tres anchos distintos de figura. */
@media (min-width: 1000px) {
  .jr-fig--read, .jr-fig--wide { transform: none; }
}

/* En pantallas muy angostas el guion se acorta para no rozar el borde,
   pero el texto sigue alineado con los párrafos. */
@media (max-width: 420px) {
  .jr-list li::before { left: -0.85rem; width: 6px; }
}