/* ============================================================
   PATRIZIA ESTRATEGA DIGITAL  ·  style.css  v2.0
   Sitio multipágina: Inicio · Servicios · Portafolio · Recursos · Contacto
   Paleta: Negro #0B0B0B · Café #7A5A42 · Mauve #B89A8D · Crema #F5F0EB
   ============================================================ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  --c-black:   #0B0B0B;
  --c-surface: #141414;
  --c-surface2:#1C1C1C;
  --c-brown:   #7A5A42;
  --c-brown-l: #9B7A62;
  --c-mauve:   #B89A8D;
  --c-steel:   #607C8A;
  --c-cream:   #F5F0EB;
  --c-cream-d: #EDE4DA;
  --c-white:   #FFFFFF;
  --c-border:  rgba(245,240,235,0.06);
  --c-border-h:rgba(122,90,66,0.45);

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  --fs-xs:   clamp(.7rem,1vw,.8rem);
  --fs-sm:   clamp(.875rem,1.4vw,1rem);
  --fs-base: clamp(1rem,1.5vw,1.125rem);
  --fs-md:   clamp(1.1rem,2vw,1.25rem);
  --fs-lg:   clamp(1.25rem,2.5vw,1.5rem);
  --fs-xl:   clamp(1.5rem,3vw,2rem);
  --fs-2xl:  clamp(2rem,4vw,2.75rem);
  --fs-3xl:  clamp(2.5rem,5vw,3.5rem);
  --fs-hero: clamp(2.8rem,6vw,5rem);

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;--sp-12:3rem;
  --sp-16:4rem;  --sp-20:5rem;  --sp-24:6rem;  --sp-32:8rem;

  --container: 1280px;
  --pad: clamp(1.5rem,5vw,4rem);
  --sec: clamp(4rem,8vw,7rem);
  --nav-h: 72px;
  --bar-h: 36px;

  --t-fast:.18s ease;
  --t-base:.3s ease;
  --t-slow:.5s cubic-bezier(.16,1,.3,1);

  --r-sm:4px; --r:8px; --r-lg:14px;
  --shadow-md:0 8px 32px rgba(0,0,0,.2);
  --shadow-xl:0 20px 64px rgba(0,0,0,.28);
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.75;color:var(--c-cream);background:var(--c-black);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.15;letter-spacing:-.02em}
p+p{margin-top:var(--sp-4)}

/* ── 3. LAYOUT ────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}

/* ── 4. TIPOGRAFÍA UTILITARIA ─────────────────────────────── */
.section-label{
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-mauve);
  margin-bottom:var(--sp-6);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.section-label .marker{color:var(--c-brown)}

.section-title{font-family:var(--font-serif);font-size:var(--fs-3xl);font-weight:700;color:var(--c-cream);margin-bottom:var(--sp-6)}
.section-title--dark{color:var(--c-black)}
.section-title em{font-style:italic;color:var(--c-mauve)}

.section-body{font-size:var(--fs-base);color:rgba(245,240,235,.7);line-height:1.85;max-width:62ch}
.section-body--dark{color:rgba(11,11,11,.7)}

.text-brown{color:var(--c-brown)}
.text-mauve{color:var(--c-mauve)}
.text-center{text-align:center}
.text-center .section-body{margin-inline:auto}

/* ── 5. BOTONES ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-8);
  border-radius:var(--r);border:1.5px solid transparent;
  font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all var(--t-base);white-space:nowrap
}
.btn--primary{background:var(--c-brown);color:var(--c-cream);border-color:var(--c-brown)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--c-brown-l);border-color:var(--c-brown-l);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--c-cream);border-color:rgba(245,240,235,.3)}
.btn--ghost:hover{background:rgba(245,240,235,.06);border-color:var(--c-cream);transform:translateY(-2px)}
.btn--outline-cream{background:transparent;color:var(--c-cream);border-color:var(--c-mauve)}
.btn--outline-cream:hover{background:var(--c-brown);border-color:var(--c-brown);color:var(--c-cream);transform:translateY(-2px)}
.btn--outline-dark{background:transparent;color:var(--c-black);border-color:var(--c-brown)}
.btn--outline-dark:hover{background:var(--c-brown);color:var(--c-cream);transform:translateY(-2px)}
.btn--lg{padding:var(--sp-6) var(--sp-12);font-size:var(--fs-sm)}
.btn:focus-visible{outline:3px solid var(--c-brown);outline-offset:3px}

/* ── 6. BARRA EMAIL SUPERIOR ──────────────────────────────── */
.email-bar{
  position:fixed;top:0;left:0;width:100%;
  height:var(--bar-h);
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  z-index:1001;
  display:flex;align-items:center;
}
.email-bar .container{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-xs);color:rgba(245,240,235,.55);
  flex-wrap:nowrap;overflow:hidden;
}
.email-bar__label{white-space:nowrap}
.email-bar__link{
  color:var(--c-mauve);font-weight:500;
  transition:color var(--t-fast);
  white-space:nowrap;
}
.email-bar__link:hover{color:var(--c-cream)}
.email-bar__sep{opacity:.3;margin-inline:var(--sp-1);flex-shrink:0}
.email-bar__loc{display:none}

/* Email bar móvil: ambos datos en una sola línea */
@media(max-width:640px){
  .email-bar .container{
    font-size:.62rem;
    gap:4px;
    justify-content:center;
  }
  .email-bar__label{display:none}          /* oculta "Consultas:" en móvil */
  .email-bar__sep{margin-inline:3px}
}

/* ── 7. HEADER / NAVEGACIÓN ───────────────────────────────── */
.header{
  position:fixed;
  top:var(--bar-h);
  left:0;width:100%;
  height:var(--nav-h);
  z-index:1000;
  transition:background var(--t-base),box-shadow var(--t-base);
}
.header--scrolled{
  background:rgba(11,11,11,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--c-border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}

/* Logo */
.nav__logo{display:flex;align-items:center;flex-shrink:0}
.nav__logo-img{
  height:44px;width:auto;max-width:180px;
  filter:brightness(1.8) saturate(.5);
  transition:filter var(--t-fast),transform var(--t-fast);
}
.nav__logo:hover .nav__logo-img{filter:brightness(2.2) saturate(.4);transform:scale(1.02)}

/* Links */
.nav__menu{display:flex;align-items:center;gap:var(--sp-8)}
.nav__link{
  font-size:var(--fs-sm);font-weight:500;
  color:rgba(245,240,235,.75);
  letter-spacing:.02em;
  transition:color var(--t-fast);
  position:relative;padding-bottom:2px;
}
.nav__link::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1px;background:var(--c-brown);
  transition:width var(--t-base);
}
.nav__link:hover,.nav__link.active{color:var(--c-cream)}
.nav__link:hover::after,.nav__link.active::after{width:100%}

/* Dropdown container */
.nav__item--dropdown{position:relative}
.nav__item--dropdown .nav__link{
  display:flex;align-items:center;gap:6px;cursor:pointer
}
.nav__chevron{
  width:14px;height:14px;flex-shrink:0;
  transition:transform var(--t-base);
  opacity:.6;
}
.nav__item--dropdown:hover .nav__chevron,
.nav__item--dropdown.open .nav__chevron{transform:rotate(180deg)}

/* Dropdown panel */
.nav__dropdown{
  position:absolute;top:calc(100% + 12px);left:-16px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-top:2px solid var(--c-brown);
  border-radius:0 0 var(--r) var(--r);
  min-width:220px;padding:var(--sp-2) 0;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:all var(--t-base);
  box-shadow:var(--shadow-md);
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.open .nav__dropdown{
  opacity:1;visibility:visible;transform:translateY(0)
}
.nav__dropdown-link{
  display:block;padding:var(--sp-3) var(--sp-6);
  font-size:var(--fs-sm);color:rgba(245,240,235,.7);
  transition:all var(--t-fast);border-left:2px solid transparent;
}
.nav__dropdown-link:hover,.nav__dropdown-link.active{
  color:var(--c-cream);background:rgba(122,90,66,.08);
  border-left-color:var(--c-brown)
}

/* CTA botón nav */
.nav__cta{
  padding:var(--sp-3) var(--sp-6);
  background:var(--c-brown);color:var(--c-cream);
  border-radius:var(--r);
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  transition:background var(--t-fast),transform var(--t-fast);
  white-space:nowrap;
}
.nav__cta:hover{background:var(--c-brown-l);transform:translateY(-1px)}

/* Hamburger */
.nav__toggle{
  display:none;flex-direction:column;justify-content:center;
  align-items:flex-end;gap:5px;width:32px;height:32px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.nav__bar{display:block;height:1.5px;background:var(--c-cream);transition:all var(--t-base)}
.nav__bar:nth-child(1){width:100%}
.nav__bar:nth-child(2){width:70%}
.nav__bar:nth-child(3){width:50%}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(1){width:100%;transform:translateY(6.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(3){width:100%;transform:translateY(-6.5px) rotate(-45deg)}

/* ── 8. HERO PRINCIPAL (index.html) ───────────────────────── */
.hero-main{
  position:relative;min-height:100vh;
  background:var(--c-black);overflow:hidden;
  padding-top:calc(var(--bar-h) + var(--nav-h));
  display:flex;align-items:stretch;
}
.hero-main__inner{
  display:grid;grid-template-columns:55% 45%;
  width:100%;min-height:calc(100vh - var(--bar-h) - var(--nav-h));
}
.hero-main__content{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-20) var(--pad) var(--sp-20) var(--pad);
  max-width:720px;margin-left:auto;
}
.hero-main__eyebrow{
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-mauve);margin-bottom:var(--sp-6);
  display:flex;align-items:center;gap:var(--sp-3);
}
.hero-main__eyebrow::before{content:'/ ';color:var(--c-brown);font-size:1.1em}
.hero-main__title{
  font-family:var(--font-serif);font-size:var(--fs-hero);
  font-weight:700;color:var(--c-cream);margin-bottom:var(--sp-8);line-height:1.1
}
.hero-main__title em{display:block;font-style:italic;color:var(--c-mauve);font-weight:400}
.hero-main__sub{
  font-size:var(--fs-lg);font-weight:300;
  color:rgba(245,240,235,.7);margin-bottom:var(--sp-6);
  max-width:52ch;line-height:1.65
}
.hero-main__body{
  font-size:var(--fs-base);color:rgba(245,240,235,.55);
  margin-bottom:var(--sp-10);max-width:50ch;line-height:1.8
}
.hero-main__ctas{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-12)}
.hero-main__tagline{
  display:flex;flex-direction:column;gap:2px;
  padding-top:var(--sp-8);border-top:1px solid rgba(245,240,235,.08)
}
.hero-main__tagline span{
  font-family:var(--font-serif);font-size:var(--fs-sm);
  font-style:italic;color:rgba(245,240,235,.35)
}

/* Foto hero */
.hero-main__visual{position:relative;overflow:hidden}
.hero-main__visual::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,var(--c-black) 0%,rgba(11,11,11,.35) 25%,transparent 60%)
}
.hero-main__visual::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--c-black) 0%,transparent 22%)
}
.hero-main__photo{width:100%;height:100%;object-fit:cover;object-position:center top}

/* ── 9. HERO INTERIOR (páginas secundarias) ───────────────── */
.hero-page{
  position:relative;min-height:clamp(300px,45vh,480px);
  background:var(--c-black);overflow:hidden;
  padding-top:calc(var(--bar-h) + var(--nav-h));
  display:flex;align-items:center;
}
/* Fondo de foto opcional para hero interior */
.hero-page--photo{background:var(--c-surface)}
.hero-page__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 30%;
  opacity:.45;
}
.hero-page__overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(11,11,11,.82) 0%,rgba(20,15,10,.65) 100%);
}
.hero-page__content{
  position:relative;z-index:2;
  padding-block:var(--sp-20) var(--sp-16);
}
.hero-page__eyebrow{
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-mauve);margin-bottom:var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-2)
}
.hero-page__title{
  font-family:var(--font-serif);font-size:var(--fs-3xl);
  font-weight:700;color:var(--c-cream);margin-bottom:var(--sp-6);max-width:18ch
}
.hero-page__sub{
  font-size:var(--fs-md);font-weight:300;
  color:rgba(245,240,235,.65);max-width:52ch;line-height:1.65
}

/* ── 10. SECCIONES GENÉRICAS ──────────────────────────────── */
.section-dark{background:var(--c-black);padding-block:var(--sec)}
.section-surface{background:var(--c-surface);padding-block:var(--sec)}
.section-light{background:var(--c-cream);padding-block:var(--sec)}
.section-light .section-title{color:var(--c-black)}
.section-light .section-body{color:rgba(11,11,11,.65)}
.section-light .section-label{color:rgba(11,11,11,.5)}
.section-light .section-label .marker{color:var(--c-brown)}

/* section-light → todas las tarjetas y componentes heredan colores claros */
.section-light .feat-card{background:var(--c-cream-d);border-color:rgba(122,90,66,.15)}
.section-light .feat-card__title{color:var(--c-black)}
.section-light .feat-card__body{color:rgba(11,11,11,.65)}
.section-light .feat-card__label{color:var(--c-brown)}
.section-light .feat-card__icon{color:var(--c-brown)}
.section-light .feat-card__arrow{color:var(--c-brown)}
.section-light .feat-card:hover{background:var(--c-white);border-color:rgba(122,90,66,.5);box-shadow:var(--shadow-md)}
.section-light .feat-card:hover .feat-card__icon{color:var(--c-brown-l)}

.section-light .rec-card{background:var(--c-cream-d);border-color:rgba(122,90,66,.15)}
.section-light .rec-card__title{color:var(--c-black)}
.section-light .rec-card__body{color:rgba(11,11,11,.65)}
.section-light .rec-card:hover{background:var(--c-white);border-color:rgba(122,90,66,.4);box-shadow:var(--shadow-md)}

.section-light .split .section-title{color:var(--c-black)}
.section-body--dark{color:rgba(11,11,11,.7)}
.section-light .section-body{color:rgba(11,11,11,.65)}
.section-light .split .section-body{color:rgba(11,11,11,.65)}

.section-light .form-group label{color:rgba(11,11,11,.6)}
.section-light .form-group input,.section-light .form-group textarea{
  background:var(--c-white);border-color:rgba(122,90,66,.2);color:var(--c-black)
}
.section-light .form-group input::placeholder,.section-light .form-group textarea::placeholder{color:rgba(11,11,11,.35)}
.section-light .contact-info .section-title,.section-light .contact-info h2{color:var(--c-black)}
.section-light .contact-email-big{color:var(--c-black)}
.section-light .contact-email-big:hover{color:var(--c-brown)}
.section-light .contact-meta-item{color:rgba(11,11,11,.65)}
.section-light .contact-meta-item svg{color:var(--c-brown)}
.section-light .contact-pillar{border-color:rgba(122,90,66,.25);color:var(--c-brown)}
.section-light .form-note{color:rgba(11,11,11,.45)}
.section-light .stat-num{color:var(--c-black)}
.section-light .stat-label{color:var(--c-brown)}
.section-light .stat-desc{color:rgba(11,11,11,.6)}
.section-light .stats-grid{border-top-color:rgba(11,11,11,.1)}

/* Quién Soy en fondo claro */
.section-light .qs-body h3{color:var(--c-black)}
.section-light .qs-body p{color:rgba(11,11,11,.72)}
.section-light .qs-body .qs-quote{background:rgba(122,90,66,.08);color:var(--c-brown)}
.section-light .qs-body .qs-sign{color:rgba(11,11,11,.4)}
.section-light .qs-tag{background:rgba(122,90,66,.1);border-color:rgba(122,90,66,.25);color:var(--c-brown)}
.section-light .qs-deco{border-color:var(--c-brown)}

/* CTA banner variante clara — especificidad doble (.cta-banner.cta-banner--light) para ganar al base */
.cta-banner.cta-banner--light{background:var(--c-cream-d) !important}
.cta-banner.cta-banner--light::before{display:none}
.cta-banner.cta-banner--light .cta-banner__title{color:var(--c-black)}
.cta-banner.cta-banner--light .cta-banner__body{color:rgba(11,11,11,.65)}
.cta-banner.cta-banner--light .cta-banner__closing p{color:rgba(11,11,11,.45)}
.cta-banner.cta-banner--light .btn--primary{background:var(--c-brown);color:var(--c-cream)}

/* Separador decorativo */
.section-rule{
  width:48px;height:1px;background:var(--c-brown);
  margin-bottom:var(--sp-8)
}

/* ── 11. FEATURE CARDS ("cajitas") ────────────────────────── */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
}
.feat-grid--2{grid-template-columns:repeat(2,1fr)}
.feat-grid--4{grid-template-columns:repeat(4,1fr)}

.feat-card{
  padding:var(--sp-10) var(--sp-8);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  background:var(--c-surface);
  transition:border-color var(--t-base),transform var(--t-base),background var(--t-base);
  cursor:default;
  display:flex;flex-direction:column;
}
.feat-card:hover{
  border-color:var(--c-border-h);
  background:rgba(122,90,66,.05);
  transform:translateY(-4px);
}
.feat-card--link{cursor:pointer}

.feat-card__label{
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-brown);margin-bottom:var(--sp-6)
}
.feat-card__icon{
  width:44px;height:44px;margin-bottom:var(--sp-6);
  color:var(--c-mauve);
  transition:color var(--t-base);
}
.feat-card:hover .feat-card__icon{color:var(--c-brown-l)}
.feat-card__icon svg{width:100%;height:100%}

.feat-card__title{
  font-family:var(--font-serif);font-size:var(--fs-lg);
  font-weight:600;color:var(--c-cream);margin-bottom:var(--sp-4);line-height:1.3
}
.feat-card__body{
  font-size:var(--fs-sm);color:rgba(245,240,235,.6);
  line-height:1.8;flex:1;margin:0
}
.feat-card__arrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-6);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-brown);
  transition:gap var(--t-fast),color var(--t-fast);
}
.feat-card:hover .feat-card__arrow{gap:var(--sp-4);color:var(--c-brown-l)}

/* Variante light */
.feat-card--light{background:var(--c-cream-d);border-color:rgba(122,90,66,.12)}
.feat-card--light .feat-card__title{color:var(--c-black)}
.feat-card--light .feat-card__body{color:rgba(11,11,11,.65)}
.feat-card--light:hover{background:var(--c-cream);border-color:rgba(122,90,66,.4)}

/* ── 12. SECCIÓN MÉTRICAS / STATS ─────────────────────────── */
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);border-top:1px solid var(--c-border);
  padding-top:var(--sp-16);margin-top:var(--sp-16);
}
.stat-item{text-align:center}
.stat-num{
  font-family:var(--font-serif);font-size:clamp(2.8rem,6vw,4.5rem);
  font-weight:700;color:var(--c-cream);display:block;line-height:1
}
.stat-label{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-mauve);
  margin-top:var(--sp-3);display:block
}
.stat-desc{
  font-size:var(--fs-sm);color:rgba(245,240,235,.5);
  margin-top:var(--sp-3);line-height:1.7
}

/* ── 13. SPLIT SECTION (texto + imagen) ───────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20);align-items:center}
.split--reverse .split__visual{order:-1}
.split__photo-frame{
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:3/4;box-shadow:var(--shadow-xl);position:relative;
}
.split__photo{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform var(--t-slow)}
.split__photo-frame:hover .split__photo{transform:scale(1.02)}
.split__photo-deco{
  position:absolute;bottom:-16px;right:-16px;
  width:70%;height:70%;border:1.5px solid var(--c-brown);
  border-radius:var(--r-lg);z-index:-1;opacity:.3;
}

/* ── 14. SECCIÓN QUIÉN SOY ────────────────────────────────── */
.qs-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--sp-20);align-items:start}
.qs-photo-frame{
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--shadow-xl);
  position:relative;flex-shrink:0;
}
.qs-photo{width:100%;height:100%;object-fit:cover;object-position:center top}
.qs-deco{
  position:absolute;bottom:-14px;left:-14px;
  width:70%;height:70%;border:1.5px solid var(--c-brown);
  border-radius:var(--r-lg);z-index:-1;opacity:.3;
}
.qs-body h3{
  font-family:var(--font-serif);font-size:var(--fs-lg);
  color:var(--c-cream);margin:var(--sp-8) 0 var(--sp-4);font-weight:600
}
.qs-body p{font-size:var(--fs-sm);color:rgba(245,240,235,.7);line-height:1.85;margin:0}
.qs-body p+p{margin-top:var(--sp-3)}
.qs-services{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-6)
}
.qs-tag{
  padding:var(--sp-2) var(--sp-4);
  background:rgba(122,90,66,.12);
  border:1px solid rgba(122,90,66,.25);
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);color:var(--c-mauve);
  font-weight:500;letter-spacing:.03em
}
.qs-quote{
  margin-top:var(--sp-10);
  padding:var(--sp-6) var(--sp-8);
  border-left:3px solid var(--c-brown);
  background:rgba(122,90,66,.06);
  border-radius:0 var(--r) var(--r) 0;
  font-family:var(--font-serif);font-style:italic;
  font-size:var(--fs-md);color:var(--c-mauve);line-height:1.5
}
.qs-sign{
  margin-top:var(--sp-6);
  font-family:var(--font-serif);font-size:var(--fs-sm);
  font-style:italic;color:rgba(245,240,235,.45)
}

/* ── 15. PORTAFOLIO GRID ──────────────────────────────────── */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.port-card{
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;position:relative;
  border:1px solid var(--c-border);
  background:var(--c-surface);
  transition:transform var(--t-base),box-shadow var(--t-base);
  cursor:pointer;
}
.port-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.port-card__bg{
  width:100%;height:100%;
  /* IMAGEN: Reemplazar background-color con background-image de caso de estudio */
  background:var(--c-surface2);
  transition:transform var(--t-slow);
}
.port-card:hover .port-card__bg{transform:scale(1.04)}
.port-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,11,.9) 0%,transparent 55%);
}
.port-card__info{
  position:absolute;bottom:0;left:0;right:0;
  padding:var(--sp-6);
}
.port-card__cat{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-mauve);margin-bottom:var(--sp-2)
}
.port-card__title{
  font-family:var(--font-serif);font-size:var(--fs-md);
  font-weight:600;color:var(--c-cream);line-height:1.3
}

/* Tarjeta "próximamente" */
.port-card--soon .port-card__bg{
  background:linear-gradient(135deg,#141414 0%,#1e1610 100%);
  display:flex;align-items:center;justify-content:center;
}
.port-card--soon .port-card__overlay{
  background:radial-gradient(ellipse at center,rgba(122,90,66,.06) 0%,transparent 70%)
}

/* ── 16. RECURSOS GRID ────────────────────────────────────── */
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.rec-card{
  padding:var(--sp-8) var(--sp-8) var(--sp-10);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);background:var(--c-surface);
  display:flex;flex-direction:column;
  transition:border-color var(--t-base),transform var(--t-base);
}
.rec-card:hover{border-color:var(--c-border-h);transform:translateY(-4px)}
.rec-card__cat{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-brown);margin-bottom:var(--sp-4)
}
.rec-card__title{
  font-family:var(--font-serif);font-size:var(--fs-lg);
  color:var(--c-cream);margin-bottom:var(--sp-4);font-weight:600;line-height:1.3
}
.rec-card__body{
  font-size:var(--fs-sm);color:rgba(245,240,235,.6);
  line-height:1.8;flex:1;margin:0
}
.rec-card__link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--sp-6);font-size:var(--fs-xs);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-brown);transition:all var(--t-fast)
}
.rec-card__link:hover{color:var(--c-brown-l);gap:10px}

/* ── 17. FORMULARIO DE CONTACTO ───────────────────────────── */
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--sp-20);align-items:start}
.contact-info{position:sticky;top:calc(var(--bar-h) + var(--nav-h) + var(--sp-8))}
.contact-email-big{
  display:block;
  font-family:var(--font-serif);font-size:clamp(1rem,2.2vw,1.6rem);
  color:var(--c-cream);margin:var(--sp-6) 0;
  word-break:break-word;
  transition:color var(--t-fast);
}
.contact-email-big:hover{color:var(--c-mauve)}
.contact-meta{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-8)}
.contact-meta-item{display:flex;gap:var(--sp-4);align-items:flex-start;font-size:var(--fs-sm);color:rgba(245,240,235,.6)}
.contact-meta-item svg{width:18px;height:18px;flex-shrink:0;color:var(--c-brown);margin-top:2px}
.contact-pillars{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-10)
}
.contact-pillar{
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-border);border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-mauve);
}

/* Form */
.contact-form{display:flex;flex-direction:column;gap:var(--sp-6)}
.form-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-group label{
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,240,235,.55)
}
.form-group input,
.form-group textarea{
  padding:var(--sp-4) var(--sp-6);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  color:var(--c-cream);font-family:var(--font-sans);font-size:var(--fs-sm);
  transition:border-color var(--t-fast);outline:none;resize:none;
}
.form-group input:focus,
.form-group textarea:focus{border-color:var(--c-brown)}
.form-group input::placeholder,
.form-group textarea::placeholder{color:rgba(245,240,235,.3)}
.form-group textarea{min-height:140px}
.form-note{font-size:var(--fs-xs);color:rgba(245,240,235,.35);margin-top:var(--sp-2)}
.form-submit{align-self:flex-start}

/* ── 18. CTA BANNER ───────────────────────────────────────── */
.cta-banner{
  padding-block:var(--sec);text-align:center;
  background:linear-gradient(135deg,#141414 0%,#231910 100%);
  position:relative;overflow:hidden;
}
.cta-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(122,90,66,.1) 0%,transparent 70%);
  pointer-events:none;
}
.cta-banner__content{position:relative;z-index:1;max-width:680px;margin-inline:auto}
.cta-banner__title{
  font-family:var(--font-serif);font-size:var(--fs-3xl);
  color:var(--c-cream);margin-bottom:var(--sp-6)
}
.cta-banner__body{
  font-size:var(--fs-md);color:rgba(245,240,235,.6);
  margin-bottom:var(--sp-10);line-height:1.8;max-width:56ch;margin-inline:auto
}
.cta-banner__closing{
  margin-top:var(--sp-10);padding-top:var(--sp-8);
  border-top:1px solid rgba(245,240,235,.08);
}
.cta-banner__closing p{
  font-family:var(--font-serif);font-size:var(--fs-lg);
  font-style:italic;color:rgba(245,240,235,.4);margin:0
}

/* ── 19. FOOTER ───────────────────────────────────────────── */
.footer{
  background:var(--c-black);padding-block:var(--sp-20) var(--sp-12);
  border-top:1px solid var(--c-border);
}
.footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1.4fr;
  gap:var(--sp-16);margin-bottom:var(--sp-16);
  padding-bottom:var(--sp-16);border-bottom:1px solid var(--c-border);
}
.footer__logo-img{height:40px;width:auto;max-width:160px;filter:brightness(1.8) saturate(.5);margin-bottom:var(--sp-4)}
.footer__tagline{
  font-family:var(--font-serif);font-size:var(--fs-sm);
  font-style:italic;color:var(--c-mauve);margin-bottom:var(--sp-4)
}
.footer__body{font-size:var(--fs-sm);color:rgba(245,240,235,.4);line-height:1.8;max-width:44ch;margin:0}
.footer__email-link{
  display:block;
  font-size:var(--fs-base);font-weight:600;
  color:var(--c-mauve);margin:var(--sp-6) 0;
  transition:color var(--t-fast);word-break:break-word;
}
.footer__email-link:hover{color:var(--c-cream)}
.footer__col-title{
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-mauve);margin-bottom:var(--sp-6)
}
.footer__nav-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__nav-link{
  font-size:var(--fs-sm);color:rgba(245,240,235,.5);
  transition:color var(--t-fast);
}
.footer__nav-link:hover{color:var(--c-cream)}
.footer__social{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__social-link{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-sm);color:rgba(245,240,235,.5);
  transition:color var(--t-fast);
}
.footer__social-link svg{width:18px;height:18px;flex-shrink:0}
.footer__social-link:hover{color:var(--c-mauve)}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-4)
}
.footer__copy{font-size:var(--fs-xs);color:rgba(245,240,235,.25);margin:0}
.footer__domain{font-size:var(--fs-xs);color:rgba(245,240,235,.25);transition:color var(--t-fast)}
.footer__domain:hover{color:var(--c-mauve)}

/* ── 20. BACK TO TOP ──────────────────────────────────────── */
.back-to-top{
  position:fixed;bottom:var(--sp-8);right:var(--sp-8);z-index:500;
  width:44px;height:44px;border-radius:50%;
  background:var(--c-brown);color:var(--c-cream);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);
  transition:opacity var(--t-base),transform var(--t-base),background var(--t-fast);
  pointer-events:none;
}
.back-to-top--visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--c-brown-l)}

/* ── 21. REVEAL ANIMATIONS ────────────────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);
}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}
[data-reveal-delay="4"]{transition-delay:.4s}
[data-reveal-delay="5"]{transition-delay:.5s}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ── 22. ACCESIBILIDAD ────────────────────────────────────── */
:focus-visible{outline:3px solid var(--c-brown);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
}

/* ── 23. RESPONSIVE TABLET (max 1024px) ───────────────────── */
@media(max-width:1024px){
  .hero-main__inner{grid-template-columns:60% 40%}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid--4{grid-template-columns:repeat(2,1fr)}
  .port-grid{grid-template-columns:repeat(2,1fr)}
  .rec-grid{grid-template-columns:repeat(2,1fr)}
  .qs-grid{grid-template-columns:1fr 1.1fr;gap:var(--sp-12)}
  .split{gap:var(--sp-12)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .contact-wrap{gap:var(--sp-12)}
}

/* ── 24. RESPONSIVE MÓVIL (max 768px) ────────────────────── */
@media(max-width:768px){
  :root{--nav-h:64px;--bar-h:32px;--sec:clamp(3rem,8vw,4.5rem)}

  /* Nav móvil */
  .nav__toggle{display:flex}
  .nav__menu{
    position:fixed;top:calc(var(--bar-h) + var(--nav-h));left:0;
    width:100%;height:calc(100vh - var(--bar-h) - var(--nav-h));
    background:rgba(11,11,11,.98);backdrop-filter:blur(12px);
    flex-direction:column;align-items:center;justify-content:center;
    gap:var(--sp-6);transform:translateX(100%);transition:transform var(--t-slow);
    overflow-y:auto;
  }
  .nav__menu.is-open{transform:translateX(0)}
  .nav__link{font-size:var(--fs-xl);color:var(--c-cream)}
  .nav__item--dropdown{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
  .nav__dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:none;padding:0;min-width:0;
    display:flex;flex-direction:column;gap:var(--sp-2);box-shadow:none;
  }
  .nav__chevron{display:none}
  .nav__dropdown-link{font-size:var(--fs-lg);text-align:center;border:none}
  .nav__cta{font-size:var(--fs-base)}

  /* Hero principal móvil */
  .hero-main__inner{display:flex;flex-direction:column;min-height:100vh}
  .hero-main__visual{order:-1;height:55vmax;flex-shrink:0;position:relative}
  .hero-main__visual::before{background:linear-gradient(to bottom,transparent 60%,var(--c-black) 100%)}
  .hero-main__visual::after{display:none}
  .hero-main__content{padding:var(--sp-8) var(--pad) var(--sp-16);max-width:none;margin:0}
  .hero-main__title{font-size:clamp(2.2rem,8vw,3rem)}
  .hero-main__ctas{flex-direction:column;align-items:flex-start}
  .hero-main__ctas .btn{width:100%;justify-content:center}

  /* Layouts */
  .feat-grid,.feat-grid--2,.feat-grid--4,.port-grid,.rec-grid{grid-template-columns:1fr}
  .split,.qs-grid,.contact-wrap{grid-template-columns:1fr}
  .split--reverse .split__visual{order:0}
  .qs-photo-frame{aspect-ratio:3/4;max-width:480px}
  .stats-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .footer__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  .footer__bottom{flex-direction:column;text-align:center;gap:var(--sp-2)}
  .contact-info{position:static}

  /* Hero interior móvil */
  .hero-page{min-height:280px}

  /* CTA banner */
  .cta-banner__title{font-size:var(--fs-2xl)}
}

@media(max-width:480px){
  .hero-main__title{font-size:clamp(1.9rem,7vw,2.5rem)}
  .section-title{font-size:var(--fs-2xl)}
  .btn--lg{padding:var(--sp-4) var(--sp-8);font-size:var(--fs-sm)}
}

/* ── 25. VIDEO CARDS (Quién Soy) ──────────────────────────── */
.qs-video-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  margin-top:var(--sp-6)
}
.qs-video-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-4);
  background:rgba(122,90,66,.08);
  border:1px solid rgba(122,90,66,.2);
  border-radius:var(--r-lg);
  text-align:center;
  transition:all var(--t-base);color:inherit
}
.qs-video-card:hover{
  background:rgba(122,90,66,.16);border-color:var(--c-brown);
  transform:translateY(-3px);box-shadow:var(--shadow-md)
}
.qs-video-thumb{
  width:52px;height:52px;border-radius:50%;
  background:var(--c-brown);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background var(--t-fast)
}
.qs-video-card:hover .qs-video-thumb{background:var(--c-brown-l)}
.qs-video-thumb svg{width:22px;height:22px;color:var(--c-cream)}
.qs-video-title{
  font-family:var(--font-serif);font-size:var(--fs-sm);
  font-weight:600;color:var(--c-black);line-height:1.3
}
.qs-video-sub{
  font-size:var(--fs-xs);color:rgba(11,11,11,.5);letter-spacing:.04em
}

/* ── 26. SISTEMA DE MARKETING DIGITAL ────────────────────── */
.smd-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)
}
.smd-card{
  padding:var(--sp-8) var(--sp-6);
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  background:var(--c-surface);
  display:flex;flex-direction:column;gap:var(--sp-2);
  transition:border-color var(--t-base),transform var(--t-base)
}
.smd-card:hover{border-color:var(--c-border-h);transform:translateY(-4px)}
.smd-card__num{
  font-family:var(--font-serif);font-size:3rem;
  font-weight:700;color:rgba(245,240,235,.25);line-height:1;margin-bottom:var(--sp-2)
}
.smd-card__title{
  font-family:var(--font-serif);font-size:var(--fs-lg);
  font-weight:600;color:var(--c-cream);line-height:1.2;margin:0
}
.smd-card__list{
  list-style:none;display:flex;flex-direction:column;gap:4px;flex:1
}
.smd-card__list li{
  font-size:var(--fs-xs);color:rgba(245,240,235,.6);
  padding-left:1rem;position:relative;line-height:1.6
}
.smd-card__list li::before{
  content:'→';position:absolute;left:0;color:var(--c-brown);font-size:.7rem
}
.smd-card__btn{
  margin-top:var(--sp-4);align-self:flex-start;
  font-size:var(--fs-xs);padding:var(--sp-3) var(--sp-5)
}
.smd-card--master{
  grid-column:1/-1;
  background:linear-gradient(135deg,#1C1208 0%,#2D1E10 100%);
  border-color:rgba(122,90,66,.35);
  flex-direction:row;align-items:center;gap:var(--sp-12)
}
.smd-card--master:hover{border-color:rgba(122,90,66,.6);transform:translateY(-3px)}
.smd-master__text{flex:1}
.smd-master__text .smd-card__title{font-size:var(--fs-xl);margin-bottom:var(--sp-3)}
.smd-master__text p{font-size:var(--fs-sm);color:rgba(245,240,235,.65);line-height:1.75;margin:0}
.smd-master__right{flex-shrink:0;width:360px;display:flex;flex-direction:column;gap:var(--sp-5)}
.smd-master__cta{text-align:center}
.smd-master__cta .btn{width:100%;box-sizing:border-box;white-space:normal;text-align:center;display:block}
.smd-master__img{border-radius:var(--r-md);overflow:hidden}
.smd-master__img img{width:100%;height:auto;display:block;border-radius:var(--r-md)}

/* ── 27. BLOG TOPICS GRID (Recursos mejorado) ─────────────── */
.blog-topics-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  margin-top:var(--sp-10)
}
.blog-topic-card{
  padding:var(--sp-6);border:1px solid var(--c-border);
  border-radius:var(--r-lg);background:var(--c-surface);
  display:flex;flex-direction:column;gap:var(--sp-3);
  transition:all var(--t-base)
}
.blog-topic-card:hover{border-color:var(--c-border-h);transform:translateY(-3px)}
.blog-topic-card__icon{width:36px;height:36px;color:var(--c-mauve)}
.blog-topic-card__icon svg{width:100%;height:100%}
.blog-topic-card__title{
  font-family:var(--font-serif);font-size:var(--fs-md);
  font-weight:600;color:var(--c-cream);line-height:1.3;margin:0
}
.blog-topic-card__body{
  font-size:var(--fs-xs);color:rgba(245,240,235,.55);line-height:1.7;margin:0;flex:1
}
.blog-topic-card__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-brown);margin-top:var(--sp-2);transition:gap var(--t-fast),color var(--t-fast)
}
.blog-topic-card__link:hover{color:var(--c-brown-l);gap:10px}

/* Marketing Inmobiliario hero accent */
.hero-page--inmo .hero-page__content .hero-page__eyebrow{color:var(--c-cream);opacity:.9}

@media(max-width:1024px){
  .smd-grid{grid-template-columns:repeat(2,1fr)}
  .smd-card--master{grid-column:1/-1;flex-direction:column;gap:var(--sp-8)}
  .smd-master__right{width:100%}
  .smd-master__cta{text-align:left}
  .blog-topics-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .smd-grid{grid-template-columns:1fr}
  .qs-video-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto}
  .blog-topics-grid{grid-template-columns:1fr}
}