/*
Theme Name: Génesis Ramírez Interiorismo (v3 referencia)
Theme URI: https://www.genesisramirez.com
Author: Recreación personalizada
Description: Tercer tema en paralelo. Recreación del sitio completo de genesisramirez.com a partir de la carpeta de referencia, con fuentes Cardo + Overpass sobre la paleta cream de la referencia + textura de papel. Incluye la pasada de estilo y movimiento (Editorial Luxury): reveals con stagger/blur, tarjetas con zoom, header que se condensa, menú móvil overlay, tipografía recalibrada, grano y remates. Sitio completo estático (Ciclo 1); motor editable en el Ciclo 2.
Version: 5.55
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: genesis-ramirez-v3
*/

/* 1. TOKENS */
:root{
  --color-bg: #E8E6E3;        /* Concreto (base clara de marca) */
  --color-bg-alt: #D8D0C0;    /* Beige (fondo alterno / arena) */
  --color-text: #301E19;      /* Cacao (texto/oscuro principal) */
  --color-accent: #301E19;    /* Cacao (bordes, títulos, remates estructurales) */
  --color-hover: #7191AA;     /* Azul acero (acento de marca: enlaces, hover, botones) */
  --color-dark: #301E19;      /* Cacao (bandas oscuras y footer) */
  --color-cream: #F4EFE9;     /* Crema (texto/logo en negativo sobre oscuro) */
  --font-serif: 'Cardo', 'Georgia', serif;
  --font-sans: 'Overpass', 'Arial Narrow', Arial, sans-serif;
  --max-width: 1400px;
  --section-pad: clamp(80px, 10vw, 144px);
  --radius: 6px;
}

/* Esquinas redondeadas sutiles en imágenes de contenido (no en el hero a pantalla completa) */
.section-img,
.card-media,
.closing-cta-media img,
.project-figure img,
.gallery-grid img,
.press-duo img,
.press-trio img{ border-radius: var(--radius); }

/* 2. RESET */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background-color: var(--color-bg);
  background-image: url('assets/img/paper-texture.png');
  background-repeat: repeat;
  background-blend-mode: multiply;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fundido suave al cargar cada página: suaviza la navegación multipágina.
   Solo si no se reduce el movimiento (así reduced-motion ve la página al instante). */
@media (prefers-reduced-motion: no-preference){
  body{ animation: page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes page-in{ from{ opacity: 0; } to{ opacity: 1; } }

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; transition: color .3s ease; }
a:hover{ color: var(--color-hover); }

/* Grano de película muy sutil, fijo, para profundidad de papel (no captura clics) */
body::after{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Foco accesible con estilo (anillo en el acento de marca) */
:focus-visible{ outline: 2px solid var(--color-hover); outline-offset: 3px; border-radius: 2px; }

/* 3. LAYOUT */
.container{ max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(24px, 5vw, 48px); }
.section{ padding-block: var(--section-pad); }
.section--alt{ background-color: var(--color-bg-alt); }
.section--dark{ background-color: var(--color-dark); color: var(--color-cream); }
.section--dark .eyebrow, .section--dark .section-title{ color: var(--color-cream); }
.section-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (max-width: 900px){ .section-grid{ grid-template-columns: 1fr; } }

/* 4. TIPOGRAFÍA */
.eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 18px;
}
/* Firma editorial: línea corta antes del eyebrow (hereda color por sección) */
.eyebrow::before{
  content: '';
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.habitar .eyebrow{ justify-content: center; }
.section-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
.section-title--display{ font-size: clamp(34px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.02em; }
/* Testimonios: título algo más contenido que el resto de "display" (petición del cliente) */
.section--testimonials .section-title{ font-size: clamp(30px, 3.8vw, 52px); }
.section-title--cta{ font-size: clamp(32px, 4.8vw, 66px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
.lead{ font-family: var(--font-serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.78; max-width: 52ch; margin: 24px 0 0; opacity: 0.9; text-wrap: pretty; }
.text-list{ list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 20px; max-width: 46ch; }
.text-list li{ font-family: var(--font-serif); font-size: 21px; line-height: 1.4; padding-bottom: 18px; border-bottom: 1px solid rgba(48,30,25,0.15); }
.text-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.section--dark .text-list li{ border-color: rgba(244,239,233,0.2); }
/* Lista con iconos decorativos (icono encima del texto) */
.text-list--icons{ gap: clamp(32px, 4vw, 52px); }
.text-list--icons li{ display: grid; justify-items: start; gap: 16px; padding-bottom: 0; border-bottom: none; }
.text-list-icon{ width: 40px; height: 40px; color: var(--color-text); flex-shrink: 0; }
.text-list--icons span{ font-family: var(--font-serif); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }
/* Firma de marca: los iconos se "dibujan" a trazo cuando la lista aparece */
.text-list-icon circle,
.text-list-icon path,
.text-list-icon ellipse{
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-visible .text-list-icon circle,
.reveal.is-visible .text-list-icon path,
.reveal.is-visible .text-list-icon ellipse{ stroke-dashoffset: 0; }
.text-list--icons li:nth-child(2) .text-list-icon *{ transition-delay: 0.15s; }
.text-list--icons li:nth-child(3) .text-list-icon *{ transition-delay: 0.30s; }
@media (prefers-reduced-motion: reduce){
  .text-list-icon circle, .text-list-icon path, .text-list-icon ellipse{ stroke-dashoffset: 0; transition: none; }
}

/* Sección "Espacios que transforman": título + (párrafo/imagen | lista con iconos) */
.espacios-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.espacios-main{ display: grid; gap: 34px; justify-items: start; }
.espacios-main .lead{ margin: 0; }
.espacios-main .section-img{ width: 100%; height: clamp(420px, 42vw, 580px); object-fit: cover; object-position: center; }
@media (max-width: 900px){ .espacios-main .section-img{ height: clamp(300px, 60vw, 460px); } }
.espacios-main .btn{ margin-top: 0; }
.espacios-aside{ margin-top: 0; padding-top: clamp(24px, 8vw, 120px); }
@media (max-width: 900px){ .espacios-aside{ padding-top: 0; } }
@media (max-width: 900px){ .espacios-grid{ grid-template-columns: 1fr; } }

/* Sección "Sobre mí" — retrato grande a sangre con el texto superpuesto a la izquierda */
.about-teaser{ position: relative; min-height: clamp(560px, 88vh, 920px); display: flex; align-items: center; overflow: hidden; }
.about-teaser-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; z-index: 0; }
.about-teaser::before{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(244,239,233,0.72) 0%, rgba(244,239,233,0.25) 32%, rgba(244,239,233,0) 54%); }
.about-teaser-content{ position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(24px, 5vw, 48px); }
.about-teaser-content > *{ max-width: 34ch; }
.about-teaser-content > .btn{ max-width: none; }
@media (max-width: 820px){
  .about-teaser{ display: block; min-height: 0; }
  .about-teaser-bg{ position: static; width: 100%; height: clamp(380px, 92vw, 560px); object-position: center 18%; border-radius: var(--radius); }
  .about-teaser::before{ display: none; }
  .about-teaser-content{ padding-block: clamp(32px, 7vw, 56px); }
  .about-teaser-content > *{ max-width: none; }
}

/* 5. BOTÓN */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  padding: 16px 32px;
  margin-top: 40px;
  transition: background-color .45s cubic-bezier(.22, 1, .36, 1), color .45s cubic-bezier(.22, 1, .36, 1), transform .18s ease;
}
.btn::after{ content: '\2192'; font-size: 1.15em; line-height: 1; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.btn:hover{ background-color: var(--color-hover); border-color: var(--color-hover); color: var(--color-cream); }
.btn:active{ transform: translateY(1px) scale(.99); }
@media (prefers-reduced-motion: reduce){ .btn::after{ transition: none; } }
.btn--on-dark{ border-color: rgba(244,239,233,0.6); color: var(--color-cream); }
.btn--on-dark:hover{ background-color: var(--color-hover); border-color: var(--color-hover); color: var(--color-cream); }
/* Móvil: los botones con texto largo (p.ej. el CTA de Proyectos) pueden partir
   de línea y no exceder el ancho de pantalla. */
@media (max-width: 600px){
  .btn{ white-space: normal; max-width: 100%; padding: 14px 22px; letter-spacing: 0.14em; text-align: center; justify-content: center; }
}

/* 6. HEADER */
/* Sentinel invisible al inicio de la página: cuando sale del viewport (el
   usuario ha bajado ~80px), scroll-reveal.js añade .is-scrolled al header y
   la cabecera se condensa. Evita un listener de scroll. */
.scroll-sentinel{ position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }
.site-header{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 24px; padding: 16px clamp(24px, 5vw, 48px);
  background: rgba(244,239,233,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(48,30,25,0.08);
  transition: padding .4s cubic-bezier(.22, 1, .36, 1), background-color .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled{
  padding-top: 9px; padding-bottom: 9px;
  background: rgba(244,239,233,0.98);
  box-shadow: 0 8px 28px -20px rgba(48, 30, 25, 0.45);
}
@media (prefers-reduced-motion: reduce){ .site-header{ transition: none; } }
.nav-menu{
  display: flex; flex-wrap: wrap; gap: 10px 22px; flex: 1 1 220px; min-width: 0;
  list-style: none; padding: 0; margin: 0;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-menu--right{ justify-content: flex-end; }
/* PRUEBA: logo a la IZQUIERDA + toda la navegación a la derecha + botón CTA, en una fila centrada en altura */
.site-header--solo{ justify-content: flex-start; align-items: center; }
.site-header--solo .primary-nav{ margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.6vw, 24px); }
.site-header--solo .nav-menu{ flex: 0 0 auto; gap: 8px 16px; }
/* Botón del menú: compacto, con el MISMO hover que el resto (transparente -> se rellena de acento) */
.btn--nav{ margin-top: 0; padding: 11px 22px; letter-spacing: 0.16em; }

/* Selector de idioma */
.lang-switch{ display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.lang-switch li{ display: flex; align-items: center; }
.lang-switch li + li::before{ content: '/'; opacity: 0.35; margin-right: 8px; }
.lang-switch a{ opacity: 0.6; transition: opacity .3s ease, color .3s ease; }
.lang-switch a:hover{ opacity: 1; color: var(--color-hover); }
.lang-switch .is-current{ opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.lang-switch--mobile{ justify-content: center; margin-top: clamp(28px, 6vw, 44px); font-size: 13px; }
@media (max-width: 720px){ .site-header--solo .lang-switch--header{ display: none; } }
/* Móvil: logo a la izquierda + hamburguesa a la derecha; la nav se oculta y usa el overlay */
@media (max-width: 720px){
  .site-header--solo .primary-nav{ display: none; }
  .site-header--solo .nav-toggle{ margin-left: auto; }
}
.nav-menu a{ white-space: nowrap; position: relative; }
.nav-menu a::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce){ .nav-menu a::after{ transition: none; } }
.site-logo{
  font-family: var(--font-serif); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: 0.32em;
  text-transform: uppercase; white-space: nowrap; flex: 0 0 auto;
  transform-origin: center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.site-header.is-scrolled .site-logo{ transform: scale(0.78); }
@media (prefers-reduced-motion: reduce){ .site-logo{ transition: none; } }
/* Botón hamburguesa (solo móvil) */
.nav-toggle{ display: none; position: relative; width: 30px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer; flex: 0 0 auto; color: var(--color-accent); }
.nav-toggle-bar{ position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.nav-toggle-bar:nth-child(1){ top: 3px; }
.nav-toggle-bar:nth-child(2){ bottom: 3px; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2){ bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* Overlay de navegación móvil (aparece a pantalla completa, enlaces en cascada) */
.mobile-nav{
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 239, 233, 0.97);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), visibility .5s;
}
.mobile-nav.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 2vw, 14px); text-align: center; }
.mobile-nav a{
  font-family: var(--font-serif); font-size: clamp(30px, 9vw, 54px); color: var(--color-accent);
  display: inline-block; opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.mobile-nav.is-open a{ opacity: 1; transform: none; }
/* Selector de idioma dentro del overlay móvil: sube la especificidad para ganar
   a .mobile-nav ul (grid) y .mobile-nav a (tipografía gigante del menú), y hace
   que el idioma activo (<span>, no <a>) participe de la animación de entrada. */
.mobile-nav .lang-switch{ display: flex; }
.mobile-nav .lang-switch a{ font-size: 13px; }
.mobile-nav .lang-switch .is-current{ opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.mobile-nav.is-open .lang-switch .is-current{ opacity: 1; transform: none; }
.mobile-nav li:nth-child(1) a{ transition-delay: .10s; }
.mobile-nav li:nth-child(2) a{ transition-delay: .16s; }
.mobile-nav li:nth-child(3) a{ transition-delay: .22s; }
.mobile-nav li:nth-child(4) a{ transition-delay: .28s; }
.mobile-nav li:nth-child(5) a{ transition-delay: .34s; }
.mobile-nav li:nth-child(6) a{ transition-delay: .40s; }
@media (min-width: 721px){ .mobile-nav{ display: none; } }
@media (prefers-reduced-motion: reduce){ .mobile-nav, .mobile-nav a, .nav-toggle-bar{ transition: none; } }

@media (max-width: 720px){
  .site-header{ justify-content: space-between; }
  .nav-menu, .nav-menu--right{ display: none; }
  .nav-toggle{ display: block; }
}

/* 7. HERO (scroll-reveal, reutilizado del tema fiel) */
.hero{ position: relative; height: 300vh; color: var(--color-text); text-align: center; }
.hero-sticky{ position: sticky; top: 0; height: 100vh; overflow: hidden; background-size: cover; background-position: center; }
.hero-media{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: hero-kenburns 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-kenburns{ from{ transform: scale(1); } to{ transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .hero-media{ animation: none; } }
.hero-sticky::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(244,239,233,0.72), rgba(244,239,233,0.45) 45%, rgba(244,239,233,0.9)); z-index: 1; }
.hero-line{ position: absolute; left: 0; right: 0; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 2; }
.hero-line--1{ top: 0; } .hero-line--2{ top: 100vh; } .hero-line--3{ top: 200vh; }
.hero-eyebrow{ font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; margin: 0 0 30px; }
.hero-title{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(46px, 7vw, 104px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.hero-title--accent{ color: var(--color-hover); }
.hero-actions{ display: flex; justify-content: center; gap: 18px; margin-top: 44px; flex-wrap: wrap; }
.hero-actions .btn{ margin-top: 0; }
/* Pista de scroll: hilo con un punto que baja, invita a descender por el hero */
.hero-scrollcue{ position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 1px; height: 48px; background: rgba(48, 30, 25, 0.22); overflow: hidden; z-index: 3; }
.hero-scrollcue::after{ content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--color-accent); animation: scrollcue 2.4s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes scrollcue{ 0%{ transform: translateY(-100%); } 100%{ transform: translateY(320%); } }
@media (prefers-reduced-motion: reduce){ .hero-scrollcue::after{ animation: none; } }
@media (max-width: 640px){
  .hero{ height: 210vh; } .hero-sticky{ height: 70vh; } .hero-line{ height: 70vh; }
  .hero-line--2{ top: 70vh; } .hero-line--3{ top: 140vh; }
}
@media (prefers-reduced-motion: reduce){
  .hero{ height: auto; } .hero-sticky{ position: relative; height: 100vh; }
  .hero-line{ position: relative; height: auto; top: auto; padding-block: 20px; }
  .hero-media{ display: none; }
}

/* 8. SERVICIOS (portada: rejilla de 4 tarjetas) */
.services-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 60px; }
.service-card{ display: grid; gap: 18px; align-content: start; }
.service-card img{ width: 100%; height: 420px; object-fit: cover; }
.service-card h3{ font-family: var(--font-serif); font-weight: 400; font-size: 24px; margin: 0; }
.service-card p{ margin: 0; font-size: 15px; line-height: 1.75; opacity: 0.8; }
@media (max-width: 900px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; } }

/* 9. PROYECTOS (portada teaser: 3 tarjetas) */
.projects-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 20px; }
.project-card{ display: grid; gap: 16px; align-content: start; }
.project-card img{ width: 100%; height: 520px; object-fit: cover; }
.project-card .project-name{ font-family: var(--font-serif); font-size: 28px; letter-spacing: 0.04em; }
.project-card .project-tag{ font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; }
/* Ubicación en la tarjeta de portada. En caja normal y con el espaciado más
   cerrado que .project-tag a propósito: si fuera otra línea en versalitas
   competiría con el claim y las dos se leerían como etiquetas. Así se lee
   como lo que es, un lugar. Hereda el color, así que funciona sobre la banda
   oscura de la portada sin declarar nada. */
.project-card .project-place{ font-size: 12px; letter-spacing: 0.06em; opacity: 0.55; }
@media (max-width: 900px){ .projects-grid{ grid-template-columns: 1fr; } }

/* 10. TESTIMONIOS */
.testimonial-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 60px; }
.testimonial{ margin: 0; background: var(--color-bg); display: grid; align-content: start; }
.testimonial img{ width: 100%; height: 280px; object-fit: cover; }
.testimonial .testimonial-body{ padding: 34px; display: grid; gap: 20px; }
.testimonial .project-label{ font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin: 0; }
.testimonial blockquote{ margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.6; }
.testimonial figcaption{ font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
/* Coletilla "translated from Spanish": discreta a propósito, no debe competir
   en peso visual con el nombre de la clienta que la precede en el mismo figcaption. */
.testimonial-note{ font-size: 10px; letter-spacing: 0.1em; opacity: 0.5; }
/* Comilla editorial gigante, muy tenue, detrás de la cita */
.testimonial-body{ position: relative; }
.testimonial-body::before{ content: '\201C'; position: absolute; top: 4px; right: 22px; font-family: var(--font-serif); font-size: 90px; line-height: 1; color: var(--color-accent); opacity: 0.12; pointer-events: none; }
@media (max-width: 900px){ .testimonial-grid{ grid-template-columns: 1fr; } }

/* 10b. TARJETAS — marco con zoom lento de la foto, elevación y sombra tintada.
   .card-media recorta el zoom; el movimiento es lento (marca serena). */
.card-media{ display: block; overflow: hidden; }
.card-media img{ transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.service-card{ transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.service-card .card-media{ transition: box-shadow .5s ease; }
.project-card .project-tag{ transition: color .4s ease, opacity .4s ease; }
.project-card:hover .project-tag{ opacity: 1; color: var(--color-cream); }
@media (prefers-reduced-motion: reduce){
  .card-media img, .service-card, .service-card .card-media, .project-card .project-tag{ transition: none; }
}
/* Movimiento de hover solo con puntero real (evita el hover "pegado" al tocar
   en móvil) y solo si no se reduce el movimiento. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .btn:hover::after{ transform: translateX(4px); }
  .blog-card:hover .blog-more::after{ transform: translateX(4px); }
  .nav-menu a:hover::after{ transform: scaleX(1); }
  .footer-col a:hover::after{ transform: scaleX(1); }
  .service-card:hover .card-media img,
  .project-card:hover .card-media img,
  .testimonial:hover .card-media img,
  .card-media:hover img{ transform: scale(1.05); }
  .service-card:hover{ transform: translateY(-4px); }
  .service-card:hover .card-media{ box-shadow: 0 18px 40px -20px rgba(48, 30, 25, 0.35); }
}

/* 11. UNA FORMA DE HABITAR (banda con imagen de fondo) */
.habitar{ padding-block: clamp(90px, 12vw, 150px); text-align: center; background-color: var(--color-dark); color: var(--color-cream); }
.habitar > .container{ max-width: 1000px; }
.habitar .section-title--cta{ margin-top: 14px; }
.habitar-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 52px; text-align: left; }
.habitar-cols p{ margin: 0; line-height: 1.8; opacity: 0.85; }
@media (max-width: 700px){ .habitar-cols{ grid-template-columns: 1fr; } }

/* Utilidad: oculta visualmente pero accesible para SEO/lectores de pantalla */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* 12. ENFOQUE (bloques con subtítulo serif) */
.enfoque-list{ display: grid; gap: 28px; max-width: 50ch; margin-top: 34px; }
.enfoque-list p{ margin: 0; line-height: 1.8; }
.enfoque-term{ font-family: var(--font-serif); font-size: 20px; }

/* 13. PROYECTOS (página: imágenes grandes) */
.project-figure img{ width: 100%; height: 640px; object-fit: cover; }
@media (max-width: 900px){ .project-figure img{ height: 420px; } }

/* 14. GALERÍA */
.gallery-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.gallery-grid img{ width: 100%; height: 340px; object-fit: cover; }
/* 18. BLOG */
.blog-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{ display: flex; flex-direction: column; }
.blog-card .card-media{ display: block; }
.blog-card .card-media img{ width: 100%; height: clamp(240px, 26vw, 340px); object-fit: cover; }
.blog-card-body{ padding-top: 22px; }
.blog-card-body h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; }
.blog-excerpt{ font-family: var(--font-serif); font-size: 17px; line-height: 1.7; opacity: 0.9; }
.blog-excerpt p{ margin: 0; }
.blog-more{ display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.blog-more::after{ content: '\2192'; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
/* Entrada individual */
.post-single{ max-width: 780px; }
.post-meta{ font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin: 14px 0 0; }
.post-featured{ margin: clamp(28px, 4vw, 48px) 0; }
.post-featured img{ width: 100%; height: clamp(320px, 42vw, 520px); object-fit: cover; }
.post-content{ font-family: var(--font-serif); }
.post-content p{ font-size: clamp(17px, 1.3vw, 19px); line-height: 1.85; margin: 0 0 22px; }
.post-content h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; margin: 42px 0 14px; letter-spacing: -0.01em; }
.post-content h3{ font-family: var(--font-serif); font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); margin: 28px 0 10px; }
.post-content ul{ margin: 0 0 22px; padding-left: 1.2em; }
.post-content li{ font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; margin-bottom: 8px; }
.post-content a{ color: var(--color-hover); text-decoration: underline; text-underline-offset: 3px; }
.post-content strong{ font-weight: 700; }
.post-single .btn{ margin-top: 8px; }
/* Nota final de transparencia sobre uso de IA */
.post-ai-note{ margin: clamp(30px, 4vw, 44px) 0 0; padding-top: 18px; border-top: 1px solid rgba(48,30,25,0.15); font-family: var(--font-sans); font-size: 13px; font-style: italic; line-height: 1.6; opacity: 0.6; }
/* Bloque "Sigue leyendo" (artículos relacionados) */
.post-related{ margin: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 44px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid rgba(48,30,25,0.15); }
.post-related .eyebrow{ margin-bottom: 24px; }
.related-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
@media (max-width: 600px){ .related-grid{ grid-template-columns: 1fr; } }
.related-card{ display: flex; flex-direction: column; }
.related-card .card-media img{ width: 100%; height: clamp(160px, 20vw, 210px); object-fit: cover; }
.related-title{ font-family: var(--font-serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.01em; margin-top: 14px; }

/* Proyectos: imagen principal (derecha del texto) alta + dos imágenes inferiores */
.card-media--tall img{ width: 100%; height: clamp(420px, 44vw, 620px); object-fit: cover; }
.project-gallery{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: clamp(28px, 3.5vw, 48px); }
.project-gallery img{ width: 100%; height: clamp(280px, 26vw, 380px); object-fit: cover; }
@media (max-width: 700px){ .project-gallery{ grid-template-columns: 1fr; } }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* 15. PRENSA */
.press-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.press-duo figure{ margin: 0; display: grid; gap: 22px; }
.press-duo img{ width: 100%; height: 560px; object-fit: cover; }
/* Retratos verticales: encuadre hacia la parte superior para no cortar las caras */
.press-duo img.press-img--top{ object-position: center top; }
.press-duo figcaption{ font-family: var(--font-serif); font-size: 24px; }
.press-trio{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.press-trio img{ width: 100%; height: 320px; object-fit: cover; }
@media (max-width: 900px){ .press-duo, .press-trio{ grid-template-columns: 1fr; } }

/* 16. HERO INTERIOR (Sobre mí / Servicios / Prensa) */
.page-hero{ position: relative; min-height: 68vh; display: grid; align-items: center; justify-items: center; overflow: hidden; text-align: center; }
.page-hero-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; z-index: 0; }
.page-hero::after{ content: ''; position: absolute; inset: 0; background: rgba(244,239,233,0.55); z-index: 1; }
.page-hero > .container{ position: relative; z-index: 2; max-width: 900px; padding-block: clamp(90px, 12vw, 120px); }
.page-hero h1{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(42px, 5.4vw, 78px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 26px; }
.page-hero p{ font-size: clamp(19px, 1.5vw, 22px); line-height: 1.8; margin: 0 auto; max-width: 30ch; opacity: 0.9; text-wrap: balance; }
/* Variante "al natural": imagen sin atenuar ni capa de color (p. ej. hero de Sobre mí) */
.page-hero--natural .page-hero-bg{ opacity: 1; }
.page-hero--natural::after{ display: none; }
/* Halo sutil detrás del texto para legibilidad sobre la imagen natural (solo afecta al texto) */
.page-hero--natural h1, .page-hero--natural p{ text-shadow: 0 1px 26px rgba(244,239,233,0.92), 0 0 10px rgba(244,239,233,0.8); }
/* Alineación del hero por página (experimento a petición de la clienta) */
.page-hero--left{ justify-items: start; text-align: left; }
.page-hero--right{ justify-items: end; text-align: right; }
/* El contenedor deja de centrarse (margin auto) para pegarse al lateral y
   ocupar el espacio en blanco de la foto; se estrecha para dejar ver la imagen. */
.page-hero--left > .container{ margin-inline: clamp(24px, 9vw, 180px) 0; max-width: 600px; }
.page-hero--right > .container{ margin-inline: 0 clamp(24px, 9vw, 180px); max-width: 600px; }
.page-hero--left p{ margin-inline: 0 auto; }
.page-hero--right p{ margin-inline: auto 0; }
@media (max-width: 600px){
  /* En móvil el texto se ancla abajo para no tapar la cara de la clienta en la foto */
  .page-hero--left, .page-hero--right{ align-items: end; justify-items: center; text-align: center; }
  .page-hero--left > .container, .page-hero--right > .container{ margin-inline: 0; max-width: 100%; padding-bottom: clamp(30px, 8vw, 52px); }
  .page-hero--left p, .page-hero--right p{ margin-inline: auto; }
}

/* 17. IMÁGENES DE SECCIÓN */
.section-img{ width: 100%; height: clamp(420px, 45vw, 680px); object-fit: cover; }
/* Para imágenes recortadas en forma orgánica (PNG con transparencia): mostrar la silueta completa flotando, sin recorte rectangular */
.section-img--contain{ object-fit: contain; }

/* 18. CONTACTO */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact-info a{ border-bottom: 1px solid var(--color-accent); }
.contact-info .contact-eyebrow{ font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; display: block; margin-bottom: 8px; }
.contact-form{ display: grid; gap: 28px; background: var(--color-bg-alt); padding: clamp(32px, 5vw, 56px); }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form-field{ display: grid; gap: 10px; }
.form-field label{ font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.form-field input, .form-field textarea{
  border: none; border-bottom: 1px solid rgba(48,30,25,0.35); background: transparent;
  padding: 12px 0; font-family: var(--font-sans); font-size: 16px; color: var(--color-text); outline: none;
}
.form-field textarea{ resize: vertical; }
/* Consentimiento RGPD del formulario */
.form-consent label{ display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; cursor: pointer; }
.form-consent input[type="checkbox"]{ margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-hover); }
.form-consent a, .form-legal a{ text-decoration: underline; text-underline-offset: 2px; }
.form-legal{ font-family: var(--font-sans); font-size: 12px; line-height: 1.6; opacity: 0.62; margin: 0; }

/* Banner de consentimiento de cookies */
.gr-cookie{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--color-bg-alt); border-top: 1px solid rgba(48,30,25,0.15); box-shadow: 0 -10px 30px -22px rgba(48,30,25,0.6); }
.gr-cookie[hidden]{ display: none; }
.gr-cookie-inner{ max-width: var(--max-width); margin-inline: auto; padding: clamp(16px,2.5vw,22px) clamp(20px,5vw,48px); }
.gr-cookie-main{ display: flex; gap: clamp(14px,3vw,32px); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gr-cookie-main[hidden]{ display: none; }
.gr-cookie-text{ margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55; max-width: 64ch; }
.gr-cookie-text a{ text-decoration: underline; text-underline-offset: 2px; }
.gr-cookie-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.gr-cookie-btn{ font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 22px; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-cream); cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.gr-cookie-btn:hover{ background: var(--color-hover); border-color: var(--color-hover); }
.gr-cookie-btn--ghost{ background: transparent; color: var(--color-text); }
.gr-cookie-btn--ghost:hover{ background: transparent; color: var(--color-hover); border-color: var(--color-hover); }
.gr-cookie-config{ margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(48,30,25,0.15); display: grid; gap: 16px; }
.gr-cookie-config[hidden]{ display: none; }
.gr-cookie-cat{ display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; }
.gr-cookie-cat span{ max-width: 72ch; }
.gr-cookie-cat input{ margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--color-hover); }
@media (max-width: 700px){ .gr-cookie-actions{ width: 100%; } .gr-cookie-btn{ flex: 1 1 auto; text-align: center; } }
@media (max-width: 700px){ .contact-grid, .form-row{ grid-template-columns: 1fr; } }

/* 19. CTA DE CIERRE */
.closing-cta{ padding-block: clamp(90px, 12vw, 140px); }
.closing-cta-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.closing-cta-media img{ width: 100%; height: clamp(360px, 42vw, 540px); object-fit: cover; }
.closing-cta-text{ text-align: left; }
.closing-cta h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; margin: 0 0 22px; }
.closing-cta p{ margin: 0; font-size: 17px; line-height: 1.9; opacity: 0.82; max-width: 46ch; }
/* Imagen a la derecha en escritorio (el DOM la lleva primera para que en móvil salga arriba) */
@media (min-width: 901px){ .closing-cta-media{ order: 2; } }
@media (max-width: 900px){
  .closing-cta-grid{ grid-template-columns: 1fr; }
  .closing-cta-text{ text-align: center; }
  .closing-cta p{ margin-inline: auto; }
}

/* 20. FOOTER */
.site-footer-dark{ background: var(--color-dark); color: var(--color-cream); padding: 80px clamp(24px, 5vw, 48px) 44px; }
.footer-grid{ max-width: var(--max-width); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer-col{ display: grid; gap: 14px; align-content: start; }
.footer-brand{ font-family: var(--font-serif); font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase; }
.footer-col .footer-desc{ margin: 0; line-height: 1.8; opacity: 0.7; max-width: 34ch; font-size: 14px; }
.footer-heading{ font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; }
.footer-col a{ font-size: 13px; letter-spacing: 0.08em; position: relative; }
/* Hover legible sobre fondo oscuro: subrayado que se dibuja + se mantiene en cream */
.site-footer-dark a:hover{ color: var(--color-cream); }
.footer-col a::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce){ .footer-col a::after{ transition: none; } }
.footer-copy{ max-width: var(--max-width); margin: 60px auto 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; }
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }

/* 21. SCROLL REVEAL
   Sistema de aparición al hacer scroll. Easing lento y sereno (acorde a la
   marca: neurodiseño / feng shui). El retardo --reveal-delay lo fija
   scroll-reveal.js según la posición del elemento entre sus hermanos .reveal,
   creando cascadas (stagger) en rejillas y grupos. */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible{ opacity: 1; transform: none; filter: blur(0); }

/* Imágenes: reveal tipo "cortina" (barrido de arriba abajo), muy interiorismo */
img.reveal{
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
img.reveal.is-visible{ clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  .reveal, img.reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Ubicación de un proyecto, bajo su título en la página de Proyectos.
   Usa el registro tipográfico de los eyebrow (Overpass en versalitas) para
   que se lea como un dato de ficha y no como parte del texto de venta.
   Solo aparece si el campo tiene valor: ver inc/cpt/proyecto.php. */
.project-location {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-hover);
  margin: .5rem 0 0;
}