/* ============================================================
   VERO LARRABURU — ESTUDIO DE INTERIORISMO
   Hoja de estilos compartida por las 6 páginas del sitio.
   ============================================================ */

:root{
  /* Paleta de marca — hex exactos provistos por el cliente */
  --crema:      #DFDAD6;
  --carbon:     #2B2B2B;
  --carbon-deep:#1A1918;
  --cuero:      #7B6349;
  --cacao:      #665440;
  --taupe:      #AA9A8B;
  --cuero-claro:#B0906D;   /* cuero aclarado, para fondos oscuros */
  --greige:     #BAAD9D;

  /* Enfoque general: CLARO. El negro/carbón se reserva para
     footer, botones y el sello — no como fondo de sección. */
  --bg:         var(--crema);
  --ink:        var(--carbon-deep);
  --ink-soft:   var(--cacao);
  --line:       rgba(43,43,43,0.14);

  --font-display: "Fraunces", "Times New Roman", serif; /* stand-in de Safira March (paga) */
  --font-label:   "Montserrat", sans-serif;
  --font-body:    "Public Sans", sans-serif;

  --container: 1220px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 3px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ list-style:none; }

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

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.eyebrow{
  font-family:var(--font-label);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--cuero);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.italic{ font-style:italic; font-weight:400; }

section{ position:relative; }
main{ padding-top:6.4rem; } /* compensa header fijo (logo grande) */

/* ============================================================
   SELLO — logo real (PNG con transparencia)
   ============================================================ */
.seal{ display:block; width:auto; height:auto; object-fit:contain; }

/* ============================================================
   BOTONES — rectangulares, línea fina (no píldora)
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  padding:0.95em 2em;
  font-family:var(--font-label);
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn-solid{
  background:var(--carbon-deep);
  color:var(--crema);
}
.btn-solid:hover{ background:var(--cacao); transform:translateY(-2px); }
.btn-outline{
  border-color:var(--carbon-deep);
  color:var(--carbon-deep);
}
.btn-outline:hover{ background:var(--carbon-deep); color:var(--crema); }
.btn-text{
  padding:0; border:none;
  font-family:var(--font-label);
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--cuero);
  gap:0.5em;
}
.btn-text svg, .btn-outline svg, .btn-solid svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease); }
.btn-text:hover svg{ transform:translateX(4px); }
.btn svg{ width:14px; height:14px; }

/* ============================================================
   HEADER / NAV — claro, línea fina inferior
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:160;
  background:rgba(223,218,214,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:1.1rem 0;
  transition:padding .35s var(--ease), box-shadow .35s var(--ease);
}
header.scrolled{ padding:0.7rem 0; box-shadow:0 6px 20px -14px rgba(43,43,43,0.25); }

.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand-mark{ display:flex; align-items:center; }
.brand-mark .brand-logo{ height:62px; width:auto; display:block; }
@media (max-width:560px){ .brand-mark .brand-logo{ height:48px; } }

nav.main-nav ul{ display:flex; gap:2.1rem; }
nav.main-nav a{
  font-family:var(--font-label);
  font-size:0.72rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:0.3rem;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
nav.main-nav a:hover{ color:var(--ink); }
nav.main-nav a.active{ color:var(--ink); border-color:var(--cuero); }

.nav-cta{ display:flex; align-items:center; gap:1rem; }

.burger{ display:none; width:26px; height:18px; position:relative; z-index:200; }
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; background:var(--crema); z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; padding:6rem 1.5rem 3rem; overflow-y:auto;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:2rem; color:var(--ink); }
.mobile-menu a.active{ color:var(--cuero); font-style:italic; }
.mobile-menu a.btn{
  font-family:var(--font-label); font-size:0.76rem; color:var(--crema); margin-top:1rem; white-space:nowrap;
}

@media (max-width: 880px){
  nav.main-nav{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
}

/* ============================================================
   SELLO STRIP — la única franja oscura recurrente ("sello")
   ============================================================ */
.sello-strip{
  background:var(--carbon-deep);
  color:var(--crema);
  padding:3.4rem 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center;
}
.sello-strip .seal{ width:104px; height:104px; color:var(--cuero); }
.sello-strip p{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.3rem, 2vw + 0.6rem, 1.9rem);
  color:var(--crema);
}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{ padding:6.5rem 0; }
.section-tight{ padding:4.5rem 0; }
.section-border-t{ border-top:1px solid var(--line); }

.section-head{ max-width:640px; margin-bottom:3.6rem; }
.section-head h2{ font-size:clamp(2rem, 3vw + 1rem, 3rem); margin-top:1rem; }
.section-head p{ margin-top:1.3rem; font-size:1.03rem; color:var(--ink-soft); max-width:52ch; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   HERO (Inicio)
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100svh - 6.4rem);
}
.hero-content{ display:flex; flex-direction:column; justify-content:center; padding:3rem var(--pad); }
.hero-content h1{ font-size:clamp(2.3rem, 4.2vw + 1rem, 4rem); margin-top:1.4rem; max-width:none; }
.hero-content .lede{ margin-top:1.5rem; font-size:1.08rem; color:var(--ink-soft); max-width:46ch; line-height:1.75; }
.hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1.8rem; margin-top:2.4rem; }
.hero-foot{ margin-top:4rem; display:flex; gap:2.6rem; flex-wrap:wrap; }
.hero-foot span{ display:block; }
.hero-foot b{ display:block; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--ink); margin-bottom:0.2rem; }
.hero-foot small{ font-family:var(--font-label); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }

.hero-photo{ position:relative; overflow:hidden; background:var(--taupe); min-height:340px; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(to top, rgba(26,25,24,0.62), rgba(26,25,24,0) 100%);
  pointer-events:none;
}
.photo-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.6rem 2rem; display:flex; align-items:center; gap:0.7rem;
}
.photo-caption .seal{ width:26px; height:26px; color:var(--crema); flex:none; opacity:0.85; }
.photo-caption .mini-vl{
  font-family:var(--font-display); font-style:italic; font-size:1.1rem;
  color:var(--crema); border:1px solid rgba(223,218,214,0.5); border-radius:50%;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  flex:none; opacity:0.9;
}
.photo-caption p{ font-family:var(--font-display); font-style:italic; font-size:0.98rem; color:var(--crema); }

/* Foto contenida con marco fino ("mat") + leyenda — detalle editorial */
.framed-photo{ background:#fff; padding:12px; box-shadow:0 24px 50px -28px rgba(26,25,24,0.4); }
.framed-photo .fp-inner{ position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; }
.framed-photo img{ width:100%; height:100%; object-fit:cover; }
.framed-photo figcaption{
  margin-top:1rem; padding:0 0.2rem;
  font-family:var(--font-display); font-style:italic; font-size:0.92rem; color:var(--ink-soft);
}

/* ============================================================
   FEATURE SPLIT — foto a sangre + texto, como el hero,
   con degradé de la foto hacia el fondo de página ("camuflado")
   ============================================================ */
.feature-split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:980px){ .feature-split{ grid-template-columns:1fr; } }

.feature-photo{ position:relative; overflow:hidden; aspect-ratio:4/5; max-height:640px; background:var(--taupe); }
.feature-photo.tall{ aspect-ratio:1000/1777; max-height:none; }
.feature-photo.ratio-34{ aspect-ratio:3/4; }
.feature-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.feature-photo::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(26,25,24,0.55) 0%, rgba(26,25,24,0) 38%),
    linear-gradient(to bottom, rgba(26,25,24,0.85) 0%, rgba(26,25,24,0) 16%);
  pointer-events:none;
}
.feature-photo::after{
  content:""; position:absolute; top:0; bottom:0; right:-1px; width:38%;
  background:linear-gradient(to right, rgba(223,218,214,0) 0%, var(--bg) 92%);
  pointer-events:none;
}
.feature-photo.fade-left::after{
  right:auto; left:-1px;
  background:linear-gradient(to left, rgba(223,218,214,0) 0%, var(--bg) 92%);
}
.feature-photo .photo-caption{ z-index:2; }
@media (max-width:980px){
  .feature-photo{ min-height:0; aspect-ratio:4/5; }
  .feature-photo::after{ display:none; }
}

.feature-content{ display:flex; flex-direction:column; justify-content:center; padding:3.5rem var(--pad); }
@media (max-width:980px){ .feature-content{ padding-top:3rem; } }

@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; aspect-ratio:4/3; min-height:0; }
  .hero-content{ padding-top:2.4rem; padding-bottom:3rem; }
}

/* ============================================================
   PAGE HERO (páginas internas: banda liviana con título)
   ============================================================ */
.page-hero{ padding:5.5rem 0 3.5rem; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(2.1rem, 3.4vw + 1rem, 3.3rem); margin-top:1rem; max-width:none; }
.page-hero p{ margin-top:1.3rem; font-size:1.05rem; color:var(--ink-soft); max-width:56ch; }

/* Variante con foto casi completa a un lado — texto en el otro, difuminado en el borde */
.page-hero-photo{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border-bottom:none; }
.page-hero-photo > *{ min-width:0; }
@media (max-width:980px){ .page-hero-photo{ grid-template-columns:1fr; } }
.page-hero-photo .ph-text{ display:flex; flex-direction:column; justify-content:center; padding:7rem var(--pad) 4rem; }
.page-hero-photo .ph-text.ph-text-top{ justify-content:flex-start; padding-top:9rem; }
.page-hero-photo .ph-text h1{ font-size:clamp(2rem, 3vw + 1rem, 2.9rem); margin-top:1rem; max-width:none; }
.page-hero-photo .ph-text p{ margin-top:1.3rem; font-size:1.05rem; color:var(--ink-soft); max-width:52ch; }
.page-hero-photo .ph-image{ position:relative; overflow:hidden; min-height:460px; background:var(--taupe); }
.page-hero-photo .ph-image img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.page-hero-photo .ph-image::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(26,25,24,0.02) 45%, rgba(26,25,24,0.14) 100%),
    linear-gradient(to left, rgba(223,218,214,0) 72%, var(--bg) 100%);
  pointer-events:none;
}
@media (max-width:980px){
  .page-hero-photo .ph-image{ order:-1; aspect-ratio:4/5; min-height:0; }
  .page-hero-photo .ph-image::after{ background:linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(26,25,24,0.02) 45%, rgba(26,25,24,0.14) 100%); }
  .page-hero-photo .ph-text{ padding-top:3rem; }
}

/* Variedad de marca para las páginas internas */
.page-logo{ display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }
.page-logo .seal{ width:58px; height:58px; color:var(--carbon-deep); flex:none; }
.page-logo .word{ font-family:var(--font-display); font-size:1.9rem; color:var(--ink); line-height:1; }
.page-logo .word b{ font-weight:500; }

.page-badge{ width:80px; height:80px; color:var(--cuero); margin-bottom:1.6rem; display:block; }

/* ============================================================
   ABOUT / NUESTRO ESTUDIO (Inicio)
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4.5rem; align-items:start; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:2.2rem; } }
.lede-lg{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem, 1.6vw + 1rem, 1.9rem);
  line-height:1.4; color:var(--ink);
}
.lede-lg .italic{ color:var(--cuero); }
.about-body p{ font-size:1rem; color:var(--ink-soft); line-height:1.85; }
.about-body p + p{ margin-top:1.1rem; }
.about-signature{ margin-top:2rem; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--cuero); }

/* ============================================================
   ASESORÍAS — cards
   ============================================================ */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:980px){ .services-grid{ grid-template-columns:1fr; } }

.service-card{ background:var(--bg); padding:2.8rem 2.2rem; display:flex; flex-direction:column; transition:background .3s; }
.service-card:hover{ background:#fff; }
.service-card .num{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--cuero); }
.service-card h3{ font-size:1.5rem; margin-top:1rem; }
.service-card .dur{ font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.5rem; }
.service-card p.desc{ margin-top:1.1rem; color:var(--ink-soft); font-size:0.94rem; line-height:1.7; }
.service-card .feats{ margin-top:1.5rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.service-card .feats li{ font-size:0.87rem; color:var(--ink-soft); padding-left:1.3rem; position:relative; }
.service-card .feats li::before{ content:""; position:absolute; left:0; top:0.55em; width:5px; height:5px; border-radius:50%; background:var(--cuero); }
.service-card .price-row{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.service-card .price{ font-family:var(--font-display); font-size:1.2rem; }
.service-card .price small{ display:block; font-family:var(--font-label); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.3rem; font-style:normal; }
.service-card.feature{ background:var(--cuero); }
.service-card.feature *{ color:var(--crema) !important; }
.service-card.feature .feats li::before{ background:var(--crema); }
.service-card.feature .price-row{ border-color:rgba(223,218,214,0.3); }
.service-card.feature .btn-outline{ border-color:var(--crema); }
.service-card.feature .btn-outline:hover{ background:var(--crema); color:var(--cuero) !important; }

/* ============================================================
   ASESORÍA ROW — texto + foto completa lado a lado (diseño propio)
   ============================================================ */
.asesorias-rows{ border-top:1px solid var(--line); }
.asesoria-row{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border-bottom:1px solid var(--line); }
.asesoria-row > *{ min-width:0; }
@media (max-width:980px){ .asesoria-row{ grid-template-columns:1fr; } }

.asesoria-text{ display:flex; flex-direction:column; justify-content:center; padding:4rem var(--pad); scroll-margin-top:6rem; }
.asesoria-text.asesoria-text-top{ justify-content:flex-start; }

/* Sub-ítems completos debajo de un bloque de texto — etiqueta + título + descripción + link */
.text-subitems{ display:flex; flex-direction:column; gap:1.8rem; margin-top:2.2rem; }
.subitem{
  display:block; border:1px solid var(--line); background:var(--bg); padding:1.7rem 1.9rem; border-radius:var(--radius);
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.subitem:hover, .subitem:active{ background:#fff; transform:translateY(-4px); box-shadow:0 22px 42px -26px rgba(26,25,24,0.3); }
.subitem .tag{ font-family:var(--font-label); font-size:0.62rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--cuero); }
.subitem h3{ font-family:var(--font-display); font-size:1.25rem; font-weight:400; margin-top:0.5rem; color:var(--ink); }
.subitem p{ margin-top:0.6rem; font-size:0.88rem; color:var(--ink-soft); line-height:1.65; }
.subitem .subitem-cta{
  display:inline-flex; align-items:center; gap:0.5em; margin-top:0.9rem;
  font-family:var(--font-label); font-size:0.76rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--cuero);
}
.subitem .subitem-cta svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease); }
.subitem:hover .subitem-cta svg{ transform:translateX(4px); }
.asesoria-num{ font-family:var(--font-display); font-weight:300; font-size:5.5rem; line-height:1; color:rgba(43,43,43,0.13); }
.asesoria-text .eyebrow{ margin-top:0.6rem; }
.asesoria-text h2{ margin-top:0.9rem; font-size:clamp(1.7rem, 2.2vw + 0.9rem, 2.3rem); max-width:none; }
.asesoria-text .lede{ margin-top:1.2rem; font-style:italic; color:var(--ink-soft); font-size:1.02rem; line-height:1.8; max-width:42ch; }

.asesoria-list{ margin-top:2.1rem; max-width:46ch; }
.asesoria-list li{
  padding:0.9rem 0; border-bottom:1px solid var(--line);
  font-size:0.92rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:1rem;
}
.asesoria-list li:first-child{ border-top:1px solid var(--line); }
.asesoria-list li::before{ content:""; width:22px; height:1px; background:var(--cuero); flex:none; }

.asesoria-foot{ margin-top:2.2rem; display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
.asesoria-btns{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.asesoria-precio .asesoria-valor{ display:inline-flex; }
.asesoria-nota{
  display:block; margin-top:0.5rem; max-width:44ch;
  font-size:0.85rem; line-height:1.6; color:var(--ink-soft);
}
.asesoria-nota + .asesoria-nota{ margin-top:0.25rem; }

.asesoria-valor{
  display:inline-flex; align-items:baseline; gap:0.12em;
  font-family:var(--font-display); font-style:italic; font-size:1.55rem; color:var(--ink);
  line-height:1;
}
/* El signo va más chico y elevado: acompaña sin competir con la cifra */
.asesoria-valor .cur{
  font-size:0.62em; font-style:normal; color:var(--cuero);
  transform:translateY(-0.42em); letter-spacing:0.02em;
}
.asesoria-valor .cur em{ font-style:normal; }
.asesoria-valor .num{ font-variant-numeric:tabular-nums; }
.asesoria-valor.consultar{ font-size:1.25rem; color:var(--ink-soft); }

.asesoria-photo{ position:relative; overflow:hidden; min-height:480px; background:var(--taupe); }
.asesoria-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.asesoria-photo::after{
  /* sombreado que integra la foto con el fondo — realza calidad y funde el borde interior */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(26,25,24,0.02) 45%, rgba(26,25,24,0.15) 100%),
    linear-gradient(to left, rgba(223,218,214,0) 68%, var(--bg) 100%);
  pointer-events:none;
}
.asesoria-photo:first-child::after{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(26,25,24,0.02) 45%, rgba(26,25,24,0.15) 100%),
    linear-gradient(to right, rgba(223,218,214,0) 68%, var(--bg) 100%);
}
@media (max-width:980px){
  /* En una sola columna el texto va siempre primero y la foto debajo,
     sin importar el orden que tengan en el HTML. */
  .asesoria-text{ order:1; padding-bottom:2.4rem; }
  .asesoria-photo{ order:2; width:100%; min-height:0; aspect-ratio:4/5; margin-bottom:3.5rem; }
  .asesoria-photo::after, .asesoria-photo:first-child::after{
    background:linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(26,25,24,0.02) 45%, rgba(26,25,24,0.15) 100%);
  }
}
@media (max-width:560px){
  .asesoria-photo{ aspect-ratio:1/1; }
}

/* ============================================================
   ¿NO SABÉS CUÁL ELEGIR? — banda de ayuda a decisión (diseño propio)
   ============================================================ */
.choose-band{ background:var(--cuero); }
.choose-inner{ max-width:820px; margin:0 auto; text-align:center; padding:4.5rem var(--pad); }
.choose-band .eyebrow{ color:rgba(223,218,214,0.75); }
.choose-band h2{ color:var(--crema); margin-top:0.9rem; font-size:clamp(1.7rem,2.4vw + 1rem,2.3rem); }
.choose-options{ margin-top:2rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.choose-pill{
  padding:0.55em 1.4em; border:1px solid rgba(223,218,214,0.45); border-radius:100px;
  font-family:var(--font-label); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--crema); transition:background .25s, color .25s;
}
.choose-pill:hover{ background:var(--crema); color:var(--cuero); }
.choose-band p.detail{ margin-top:1.8rem; font-size:0.98rem; line-height:1.85; color:rgba(223,218,214,0.92); }
.choose-band .choose-cta{ margin-top:2.4rem; align-items:center; }
.choose-band .choose-cta .btn-solid{ background:var(--crema); color:var(--carbon-deep); }
.choose-band .choose-cta .btn-solid:hover{ background:#fff; }
.choose-more{ margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid rgba(223,218,214,0.25); font-size:0.88rem; line-height:1.7; color:rgba(223,218,214,0.82); }
.choose-more a{ color:var(--crema); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px){ .choose-inner{ padding:3.5rem var(--pad); } }

/* Preview de servicios (Inicio) */
.services-preview{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem; }
@media (max-width:1040px){ .services-preview{ grid-template-columns:1fr 1fr; gap:2.4rem; } }
@media (max-width:640px){ .services-preview{ grid-template-columns:1fr; gap:2.6rem; } }
.preview-cta{ margin-top:3.4rem; padding-top:2.6rem; border-top:1px solid var(--line);
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
@media (max-width:520px){ .preview-cta .btn{ width:100%; justify-content:center; } }
.preview-card .num{ font-family:var(--font-display); font-style:italic; font-size:1.8rem; color:var(--taupe); }
.preview-card h3{ font-size:1.4rem; margin-top:0.8rem; }
.preview-card p{ margin-top:0.8rem; color:var(--ink-soft); font-size:0.92rem; line-height:1.65; }
.preview-card .btn-text{ margin-top:1.2rem; }

/* Cómo funciona */
.steps{ margin-top:5rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:2rem; }
@media (max-width:880px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step .n{ font-family:var(--font-display); font-style:italic; font-size:2rem; color:var(--cuero); }
.step h4{ font-family:var(--font-label); font-size:0.8rem; font-weight:600; letter-spacing:0.04em; margin-top:0.7rem; }
.step p{ margin-top:0.5rem; font-size:0.88rem; color:var(--ink-soft); line-height:1.6; }

/* Mini steps — lista vertical numerada (proceso de Proyecto Integral) */
.mini-steps{ display:flex; flex-direction:column; gap:1.7rem; }
.mini-steps li{ display:flex; gap:1.1rem; align-items:flex-start; }
.mini-steps .mn{
  flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--cuero);
  color:var(--cuero); font-family:var(--font-display); font-style:italic; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
}
.mini-steps h4{ font-family:var(--font-label); font-size:0.82rem; font-weight:600; letter-spacing:0.02em; color:var(--ink); }
.mini-steps p{ margin-top:0.4rem; font-size:0.88rem; color:var(--ink-soft); line-height:1.65; }

/* ============================================================
   TEXTIL
   ============================================================ */
.textil-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:720px){ .textil-grid{ grid-template-columns:1fr; } }
.textil-card{ background:var(--bg); padding:2.8rem; display:flex; flex-direction:column; gap:1rem; transition:background .3s; }
.textil-card:hover{ background:#fff; }
.textil-card .tag{ font-family:var(--font-label); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cuero); }
.textil-card h3{ font-size:1.45rem; }
.textil-card p{ color:var(--ink-soft); font-size:0.93rem; line-height:1.7; }

/* Pares de textil — texto agrupado arriba, botones alineados juntos abajo */
.textil-pairs{ border:1px solid var(--line); }
.textil-pair{ border-bottom:1px solid var(--line); padding:2.8rem 2.8rem 2.4rem; }
.textil-pair:last-child{ border-bottom:none; }
.pair-texts{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2.6rem; }
.pair-col .tag{ font-family:var(--font-label); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cuero); }
.pair-col h3{ font-size:1.45rem; margin-top:0.6rem; }
.pair-col p{ color:var(--ink-soft); font-size:0.93rem; line-height:1.7; margin-top:0.8rem; }
.pair-actions{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2.6rem; margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line); }
.pair-actions .btn{ width:fit-content; }
@media (max-width:720px){
  .textil-pair{ padding:2.4rem 1.6rem; }
  .pair-texts{ grid-template-columns:1fr; gap:1.8rem; }
  .pair-actions{ grid-template-columns:1fr; gap:1rem; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.filters{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:3rem; }
.filter-btn{ padding:0.6em 1.3em; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-label); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); transition:all .25s; }
.filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.filter-btn.active{ background:var(--carbon-deep); color:var(--crema); border-color:var(--carbon-deep); }

.port-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
@media (max-width:980px){ .port-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .port-grid{ grid-template-columns:1fr; } }
.port-card{
  position:relative; display:block; width:100%; text-align:left;
  background:none; border:none; padding:0; cursor:pointer;
}
.port-card.hidden{ display:none; }

.port-photo{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius); background:var(--taupe);
}
.port-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease), filter .4s var(--ease);
}
.port-card:hover .port-photo img{ transform:scale(1.045); }
.port-photo::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(26,25,24,0.5), rgba(26,25,24,0) 55%);
  transition:opacity .4s var(--ease);
}
.port-card:hover .port-photo::after,
.port-card:focus-visible .port-photo::after{ opacity:1; }

/* Etiqueta de estado sobre la portada (por ejemplo "En proceso") */
.port-estado{
  position:absolute; top:0.9rem; left:0.9rem; z-index:2;
  padding:0.42em 0.95em; border-radius:100px;
  background:rgba(26,25,24,0.72); backdrop-filter:blur(6px);
  color:var(--crema);
  font-family:var(--font-label); font-size:0.55rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
}

.port-open{
  position:absolute; left:1.2rem; bottom:1.2rem; z-index:2;
  padding:0.5em 1.1em; border-radius:100px;
  background:rgba(255,255,255,0.94); color:var(--carbon-deep);
  font-family:var(--font-label); font-size:0.6rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.port-card:hover .port-open,
.port-card:focus-visible .port-open{ opacity:1; transform:translateY(0); }

.port-info{ padding:1rem 0.1rem 0; }
.port-info .tag{ font-family:var(--font-label); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--cuero); }
.port-info h3{ font-size:1.15rem; margin-top:0.4rem; }
.port-info p{ font-size:0.85rem; color:var(--ink-soft); margin-top:0.25rem; }

/* ============================================================
   GALERÍA DE PROYECTO
   Panel centrado con flex (nada de posiciones absolutas cruzadas)
   ============================================================ */
body.modal-open{ position:fixed; width:100%; overflow:hidden; }

.proj-modal{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(26,25,24,0.6); backdrop-filter:blur(3px);
}
.proj-modal.open{ display:flex; align-items:center; justify-content:center; }
@media (min-width:1060px){ .proj-modal.open{ padding:2rem; } }

.pm-panel{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:1060px; height:100%; max-height:100%;
  background:var(--bg); overflow:hidden;
  animation:pmIn .38s var(--ease);
}
@media (min-width:1060px){ .pm-panel{ border-radius:var(--radius); box-shadow:0 24px 70px rgba(26,25,24,0.4); } }
@keyframes pmIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

.pm-close{
  position:absolute; top:0.9rem; right:0.9rem; z-index:6;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.94); color:var(--carbon-deep);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 14px rgba(26,25,24,0.18);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.pm-close:hover{ background:#fff; transform:scale(1.07); }
.pm-close svg{ width:18px; height:18px; }

.pm-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.1rem 0 3.5rem; }

/* --- Cuadro de descripción ---
   Flota en el ángulo superior izquierdo de la pantalla, por encima
   del panel de fotos. Se esconde al bajar y vuelve al subir. --- */
.pm-card{
  position:absolute; top:0; left:0; z-index:210;
  width:min(720px, 100%);
  max-height:min(78%, 640px); overflow-y:auto;
  padding:2.4rem 2.6rem 2rem;
  background:rgba(223,218,214,0.97);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 46px -18px rgba(26,25,24,0.5);
  transition:transform .4s var(--ease), opacity .28s var(--ease);
  scrollbar-width:thin;
}
.pm-card:empty{ display:none; }
.pm-card.oculto{ transform:translateY(-100%); opacity:0; pointer-events:none; }

.pm-card .eyebrow{ font-size:0.6rem; letter-spacing:0.19em; }
.pm-card h2{ font-size:clamp(1.6rem, 1.6vw + 0.95rem, 2.05rem); margin-top:0.5rem; line-height:1.12; }
.pm-texto{ margin-top:1.05rem; font-size:0.9rem; line-height:1.75; color:var(--ink-soft); }
.pm-texto b{ color:var(--ink); font-weight:500; }
.pm-cierre{ display:block; margin-top:0.2rem; font-family:var(--font-display); font-style:italic;
  font-size:1rem; line-height:1.55; color:var(--ink); }
.pm-tags{ margin-top:1.25rem; display:flex; gap:0.42rem; flex-wrap:wrap; align-items:center; }
.pm-tag{
  padding:0.36em 0.9em; border:1px solid rgba(43,43,43,0.16); border-radius:100px;
  font-family:var(--font-label); font-size:0.55rem; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-soft);
}
.pm-hint{
  margin-top:1rem; font-size:0.74rem; color:var(--taupe);
  display:flex; align-items:center; gap:0.42em;
}
.pm-hint svg{ width:12px; height:12px; flex:none; }

@media (max-width:640px){
  .pm-card{ padding:1.9rem 1.5rem 1.4rem; max-height:74%; }
  .pm-card h2{ font-size:1.4rem; }
  .pm-texto{ font-size:0.85rem; }
}

/* --- Grilla de fotos --- */
.pm-shots{ display:grid; grid-template-columns:1fr; gap:0.6rem; padding:0 var(--pad); }
@media (min-width:720px){ .pm-shots{ grid-template-columns:1fr 1fr; } }
.pm-shot{
  margin:0; position:relative; overflow:hidden; cursor:zoom-in;
  border-radius:var(--radius); background:var(--taupe);
}
.pm-shot img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.pm-shot:hover img{ transform:scale(1.045); }
/* La primera ocupa el ancho completo y hace de apertura */
@media (min-width:720px){
  .pm-shot:first-child{ grid-column:1 / -1; }
  .pm-shot:first-child img{ aspect-ratio:16/10; }
}
.pm-shot::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:rgba(26,25,24,0.14); transition:opacity .3s var(--ease);
}
.pm-shot:hover::after{ opacity:1; }

.pm-foot{
  margin:3rem var(--pad) 0; padding-top:2.2rem;
  border-top:1px solid var(--line); text-align:center;
}
.pm-foot p{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--ink); }
.pm-foot-btns{ margin-top:1.3rem; display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
@media (max-width:520px){ .pm-foot-btns .btn{ width:100%; justify-content:center; } }

/* ============================================================
   VISOR DE FOTO — se abre al tocar una imagen de la galería
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; background:rgba(18,17,16,0.965); }
.lightbox.open{ display:flex; align-items:center; justify-content:center; }
.lb-figure{ margin:0; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; }
.lb-figure img{
  max-width:94vw; max-height:86vh; width:auto; height:auto;
  object-fit:contain; display:block; user-select:none;
}
@media (min-width:900px){ .lb-figure img{ max-width:80vw; } }

.lb-btn{
  position:absolute; z-index:2; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.13); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease);
}
.lb-btn:hover{ background:rgba(255,255,255,0.26); }
.lb-btn svg{ width:20px; height:20px; }
.lb-close{ top:1rem; right:1rem; }
.lb-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1rem; top:50%; transform:translateY(-50%); }
@media (max-width:560px){
  .lb-prev{ left:0.6rem; } .lb-next{ right:0.6rem; }
  .lb-btn{ width:40px; height:40px; }
}
.lb-count{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.14em;
  color:rgba(255,255,255,0.72);
}

/* ============================================================
   RECURSOS + FAQ
   ============================================================ */
.guides-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; }
@media (max-width:720px){ .guides-grid{ grid-template-columns:1fr; } }
.guide-card{ background:#fff; padding:2.6rem; border:1px solid var(--line); }
.guide-card .g-num{ font-family:var(--font-label); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }
.guide-card h3{ font-size:1.55rem; margin-top:0.9rem; }
.guide-card p{ margin-top:0.8rem; color:var(--ink-soft); font-size:0.92rem; line-height:1.7; }
.guide-card .btn{ margin-top:1.6rem; }

.faq{ max-width:760px; margin-top:5rem; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 0; text-align:left; font-family:var(--font-display); font-size:1.12rem; }
.faq-q .plus{ flex:none; width:20px; height:20px; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--cuero); }
.faq-q .plus::before{ left:0; top:50%; width:100%; height:1px; transform:translateY(-50%); }
.faq-q .plus::after{ top:0; left:50%; height:100%; width:1px; transform:translateX(-50%); }
.faq-item.open .faq-q .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding-bottom:1.5rem; color:var(--ink-soft); font-size:0.94rem; line-height:1.75; max-width:60ch; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:start; }
@media (max-width:880px){ .contact-wrap{ grid-template-columns:1fr; gap:2.6rem; } }
.contact-wrap h2{ font-size:clamp(2.1rem, 3.6vw + 1rem, 3.2rem); }
.contact-wrap .lede{ margin-top:1.3rem; color:var(--ink-soft); font-size:1.03rem; max-width:44ch; line-height:1.75; }
.contact-actions{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-info .item{ border-top:1px solid var(--line); padding-top:1.1rem; }
.contact-info .item span{ display:block; font-family:var(--font-label); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.4rem; }
.contact-info .item a, .contact-info .item p{ font-family:var(--font-display); font-style:italic; font-size:1.18rem; color:var(--ink); }
.contact-info .item a:hover{ color:var(--cuero); }
.contact-map-note{ margin-top:2.4rem; padding:1.6rem; border:1px solid var(--line); font-size:0.85rem; color:var(--ink-soft); line-height:1.7; }

/* ============================================================
   FOOTER — banda oscura (único uso amplio del carbón)
   ============================================================ */
footer.site-footer{ background:var(--carbon-deep); color:var(--crema); padding:2.6rem 0; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-brand{ display:flex; align-items:center; }
/* Marca del pie: solo el nombre, entero en marrón.
   Sobre fondo oscuro usamos un cuero aclarado para que se lea bien. */
.footer-brand span{ font-family:var(--font-display); font-size:1.35rem; color:var(--cuero-claro); }
.footer-brand span i{ font-style:italic; color:inherit; }
.footer-brand span b{ font-weight:500; color:inherit; }
.footer-tagline{ font-family:var(--font-display); font-style:italic; font-size:0.98rem; color:var(--taupe); text-align:center; }
.footer-loc{ font-family:var(--font-label); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--taupe); }
.footer-sub{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid rgba(223,218,214,0.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; }
.footer-sub p, .footer-sub a{ font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.05em; color:var(--taupe); }
.footer-sub nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
@media (max-width:720px){ .footer-row{ flex-direction:column; text-align:center; } }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:120;
  display:flex; align-items:center; gap:0.7rem;
  background:var(--carbon-deep); color:var(--crema);
  padding:0.9rem 1.3rem; border-radius:100px;
  box-shadow:0 14px 32px -12px rgba(26,25,24,0.45);
  transition:transform .3s var(--ease), background .3s, opacity .3s var(--ease);
  animation:float-in .8s var(--ease) 1s both;
}
.wa-float:hover{ background:var(--cuero); transform:translateY(-3px); }
.wa-float svg{ width:20px; height:20px; flex:none; }
.wa-float .label{ font-family:var(--font-label); font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
@keyframes float-in{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
@media (max-width:560px){ .wa-float .label{ display:none; } .wa-float{ padding:0.85rem; } }

/* ============================================================
   TEXTILE GALLERY — franja de cierre con fotos + frase (Textil)
   ============================================================ */
.textile-gallery{ position:relative; }
.tg-photos{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; }
.tg-photo{ position:relative; overflow:hidden; aspect-ratio:900/1600; background:var(--carbon-deep); }
.tg-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tg-photo::before{
  /* difuminado superior — funde la foto con el fondo de la página, sin línea recta */
  content:""; position:absolute; top:0; left:0; right:0; height:38%; z-index:1;
  background:linear-gradient(to bottom, var(--bg) 0%, rgba(223,218,214,0) 100%);
  pointer-events:none;
}
.tg-photo::after{
  /* oscurecido inferior — para que el texto que va encima se lea bien */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(26,25,24,0) 42%, rgba(26,25,24,0.78) 100%);
  pointer-events:none;
}
.tg-quote{
  position:absolute; left:0; right:0; bottom:16%; z-index:2;
  padding:2.4rem var(--pad); text-align:center;
}
.tg-quote::before{
  content:""; position:absolute; inset:-2.2rem -1rem; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,25,24,0) 0%, rgba(26,25,24,0.46) 22%, rgba(26,25,24,0.46) 78%, rgba(26,25,24,0) 100%);
}
.tg-quote .seal{ width:40px; height:40px; color:var(--taupe); margin:0 auto 1rem; display:block; }
.tg-quote p{
  font-family:var(--font-display); font-style:italic; color:var(--crema);
  font-size:clamp(1.05rem, 1.4vw + 0.5rem, 1.4rem); max-width:56ch; margin:0 auto; line-height:1.55;
}
@media (max-width:720px){
  .tg-photos{ grid-template-columns:1fr; }
  .tg-photo:first-child::before{ height:22%; }
  .tg-photo:not(:first-child)::before{ display:none; }
  .tg-quote{ position:static; padding:2.2rem var(--pad); background:var(--carbon-deep); }
  .tg-quote::before{ display:none; }
  .tg-photo:last-child::after{ background:linear-gradient(180deg, rgba(26,25,24,0) 30%, rgba(26,25,24,0.85) 100%); }
}

/* Títulos de dos líneas — cada línea se mantiene entera, sin cortarse sola */
h1 .line, h2 .line{ display:inline-block; white-space:nowrap; }
@media (max-width:560px){ h1 .line, h2 .line{ white-space:normal; } }

/* ============================================================
   FORMULARIO DE RESERVA (reservar.html)
   ============================================================ */
.form-page{ padding:3.5rem 0 6rem; }
.form-shell{ display:grid; grid-template-columns:300px 1fr; gap:4rem; align-items:start; }
@media (max-width:980px){ .form-shell{ grid-template-columns:1fr; gap:2.5rem; } }

/* Columna lateral fija con el resumen del servicio */
.form-aside{ position:sticky; top:120px; }
@media (max-width:980px){ .form-aside{ position:static; } }
.form-aside .seal{ width:64px; height:64px; color:var(--cuero); margin-bottom:1.3rem; }
.form-aside h2{ font-size:1.65rem; line-height:1.15; margin-top:0.9rem; }
.form-aside .aside-note{ margin-top:1.2rem; font-size:0.9rem; line-height:1.7; color:var(--ink-soft); }
.aside-list{ margin-top:2rem; border-top:1px solid var(--line); }
.aside-list li{
  padding:0.85rem 0; border-bottom:1px solid var(--line);
  font-size:0.85rem; color:var(--ink-soft); line-height:1.5;
  display:flex; gap:0.7rem; align-items:flex-start;
}
.aside-list li b{ display:block; color:var(--ink); font-weight:500; font-size:0.9rem; }
.aside-list .dot{ flex:none; width:5px; height:5px; border-radius:50%; background:var(--cuero); margin-top:0.55rem; }
.aside-wa{
  margin-top:1.6rem; padding:1.3rem 1.4rem; background:rgba(123,99,73,0.07);
  border:1px solid rgba(123,99,73,0.16); border-radius:var(--radius);
}
.aside-wa p{ font-size:0.85rem; line-height:1.65; color:var(--ink-soft); }
.aside-wa a{ display:inline-flex; align-items:center; gap:0.45em; margin-top:0.8rem;
  font-family:var(--font-label); font-size:0.7rem; font-weight:600; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--cuero); }
.aside-wa a svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.aside-wa a:hover svg{ transform:translateX(4px); }

/* Cuerpo del formulario */
.form-body{ max-width:720px; }
.fieldset{ padding-top:2.6rem; margin-top:2.6rem; border-top:1px solid var(--line); }
.fieldset:first-child{ padding-top:0; margin-top:0; border-top:none; }
.fieldset > .eyebrow{ display:block; margin-bottom:1.6rem; }

.field{ margin-bottom:1.7rem; }
.field:last-child{ margin-bottom:0; }
.field > label, .field > .field-label{
  display:block; margin-bottom:0.6rem;
  font-family:var(--font-label); font-size:0.72rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink);
}
.field .req{ color:var(--cuero); }
.field .hint{ display:block; margin-top:-0.25rem; margin-bottom:0.7rem;
  font-size:0.82rem; color:var(--ink-soft); font-weight:300; letter-spacing:0; text-transform:none;
  font-family:var(--font-body); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%; padding:0.9rem 1rem;
  font-family:var(--font-body); font-size:0.95rem; font-weight:300; color:var(--ink);
  background:rgba(255,255,255,0.6);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ min-height:110px; resize:vertical; line-height:1.6; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B6349' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:15px; padding-right:2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cuero); background:#fff;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--taupe); }
.field.invalid input, .field.invalid select, .field.invalid textarea,
.field.invalid .opt-grid{ border-color:#a8524a; }
.field .err{ display:none; margin-top:0.5rem; font-size:0.8rem; color:#a8524a; }
.field.invalid .err{ display:block; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; gap:0; } }

/* Opciones tipo tarjeta (radios) */
.opt-grid{ display:grid; gap:0.7rem; }
.opt-grid.two{ grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .opt-grid.two{ grid-template-columns:1fr; } }
.opt{
  position:relative; display:flex; gap:0.9rem; align-items:flex-start;
  padding:1rem 1.15rem; cursor:pointer;
  background:rgba(255,255,255,0.6); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.opt:hover{ background:#fff; border-color:var(--taupe); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt .mark{
  flex:none; width:16px; height:16px; margin-top:0.25rem; border-radius:50%;
  border:1px solid var(--taupe); transition:border-color .2s, box-shadow .2s;
}
.opt input:checked ~ .mark{ border-color:var(--cuero); box-shadow:inset 0 0 0 4px var(--cuero); }
.opt input:focus-visible ~ .mark{ outline:2px solid var(--cuero); outline-offset:2px; }
.opt .opt-txt{ font-size:0.93rem; line-height:1.45; color:var(--ink); }
.opt .opt-txt small{ display:block; margin-top:0.2rem; font-size:0.8rem; color:var(--ink-soft); }
.opt:has(input:checked){ background:#fff; border-color:var(--cuero); }

/* Carga de archivos: recuadros con input nativo encima.
   El input cubre todo el recuadro, así el selector se abre
   sin depender de JavaScript. */
.upload-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0.7rem; margin-top:0.9rem;
}
@media (max-width:600px){ .upload-grid{ grid-template-columns:repeat(2, 1fr); } }

.slot{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden; cursor:pointer;
  border:1px dashed var(--taupe); border-radius:var(--radius);
  background:rgba(255,255,255,0.45);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.slot:hover{ border-color:var(--cuero); background:#fff; }
.slot.drag{ border-color:var(--cuero); background:#fff; }

.slot input[type="file"]{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; opacity:0; cursor:pointer;
}
.slot input[type="file"]:focus-visible{ outline:2px solid var(--cuero); outline-offset:-2px; }

.slot .slot-inner{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.55rem; padding:0.6rem; text-align:center;
}
.slot .slot-inner svg{ width:22px; height:22px; color:var(--cuero); }
.slot .slot-txt{
  font-family:var(--font-label); font-size:0.58rem; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-soft);
}

.slot .prev{
  position:absolute; inset:0; z-index:1; display:none;
  width:100%; height:100%; object-fit:cover;
}
.slot .fname{
  position:absolute; left:0; right:0; bottom:0; z-index:3; display:none;
  padding:0.35rem 0.5rem; background:rgba(255,255,255,0.92);
  font-size:0.62rem; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.slot .clear{
  position:absolute; top:6px; right:6px; z-index:4; display:none;
  width:22px; height:22px; border-radius:50%;
  background:rgba(26,25,24,0.72); color:#fff;
  align-items:center; justify-content:center; font-size:0.85rem; line-height:1;
  transition:background .2s;
}
.slot .clear:hover{ background:var(--carbon-deep); }

.slot.filled{ border-style:solid; border-color:var(--line); background:#fff; }
.slot.filled .slot-inner{ display:none; }
.slot.filled .prev{ display:block; }
.slot.filled .fname{ display:block; }
.slot.filled .clear{ display:flex; }
.slot.filled.is-doc .prev{ display:none; }
.slot.filled.is-doc .slot-inner{ display:flex; }

/* Pie del formulario */
.form-foot{ margin-top:3rem; padding-top:2.2rem; border-top:1px solid var(--line); }
.form-foot .btn{ width:100%; justify-content:center; padding:1.15em 2em; }
.form-foot .foot-note{ margin-top:1.1rem; font-size:0.82rem; line-height:1.7; color:var(--ink-soft); text-align:center; }
.form-alert{
  display:none; margin-bottom:1.4rem; padding:0.95rem 1.1rem; border-radius:var(--radius);
  font-size:0.86rem; line-height:1.6;
  background:rgba(168,82,74,0.08); border:1px solid rgba(168,82,74,0.3); color:#8c433c;
}
.form-alert.show{ display:block; }
.form-progress{ display:none; margin-top:1rem; font-size:0.82rem; color:var(--ink-soft); text-align:center; }
.form-progress.show{ display:block; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

/* Pantalla de gracias */
.thanks{ min-height:62vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:8rem 0 6rem; }
.thanks .seal{ width:88px; height:88px; color:var(--cuero); margin:0 auto 1.8rem; }
.thanks h1{ font-size:clamp(2rem, 3.2vw + 1rem, 3rem); }
.thanks p{ margin-top:1.3rem; font-size:1.02rem; line-height:1.8; color:var(--ink-soft); max-width:50ch; margin-left:auto; margin-right:auto; }
.thanks .thanks-actions{ margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONFIRMACIÓN DE RESERVA (confirmacion.html)
   Página suelta, sin navegación, para el paso posterior al turno.
   ============================================================ */
.conf-header{
  padding:2.2rem 0 0; text-align:center;
}
.conf-header .brand-logo{ height:66px; width:auto; margin:0 auto; display:block; }
@media (max-width:560px){ .conf-header .brand-logo{ height:52px; } }

.conf-page{ padding:3rem 0 5rem; }
.conf-wrap{ max-width:640px; margin:0 auto; }

.conf-intro{ text-align:center; padding-bottom:3rem; border-bottom:1px solid var(--line); }
.conf-intro .seal{ width:74px; height:74px; color:var(--cuero); margin:0 auto 1.5rem; display:block; }
.conf-intro h1{ font-size:clamp(2rem, 3.2vw + 1rem, 2.9rem); margin-top:0.9rem; }
.conf-intro p{ margin-top:1.2rem; font-size:1rem; line-height:1.8; color:var(--ink-soft); }

.conf-steps{ margin-top:3rem; display:flex; flex-direction:column; gap:2.2rem; }
.conf-step{ display:flex; gap:1.4rem; align-items:flex-start; }
.conf-step .cn{
  flex:none; font-family:var(--font-display); font-style:italic;
  font-size:1.45rem; color:var(--cuero); line-height:1; padding-top:0.15rem; min-width:2ch;
}
.conf-step h3{ font-family:var(--font-label); font-size:0.8rem; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; }
.conf-step p{ margin-top:0.55rem; font-size:0.92rem; line-height:1.75; color:var(--ink-soft); }
.conf-step p b{ color:var(--ink); font-weight:500; }

/* Tarjeta con los datos bancarios */
.pay-card{
  margin-top:3.2rem; padding:2.2rem 2rem;
  background:rgba(255,255,255,0.62);
  border:1px solid var(--line); border-radius:var(--radius);
}
@media (max-width:560px){ .pay-card{ padding:1.8rem 1.3rem; } }
.pay-card > .eyebrow{ display:block; }
.pay-card h2{ font-size:1.5rem; margin-top:0.7rem; }
.pay-note{ margin-top:0.9rem; font-size:0.88rem; line-height:1.7; color:var(--ink-soft); }

.pay-rows{ margin-top:1.8rem; border-top:1px solid var(--line); }
.pay-row{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:0.95rem 0; border-bottom:1px solid var(--line);
}
.pay-row .pk{
  flex:none; font-family:var(--font-label); font-size:0.66rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
}
.pay-row .pv{
  font-size:0.98rem; color:var(--ink); text-align:right; word-break:break-all; line-height:1.4;
}
.pay-row .pv.mono{ font-variant-numeric:tabular-nums; letter-spacing:0.01em; }
.copy-btn{
  flex:none; display:inline-flex; align-items:center; gap:0.4em; margin-left:0.6rem;
  padding:0.42em 0.85em; border:1px solid var(--line); border-radius:100px;
  font-family:var(--font-label); font-size:0.6rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--cuero);
  background:#fff; transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.copy-btn:hover{ border-color:var(--cuero); }
.copy-btn.done{ background:var(--cuero); border-color:var(--cuero); color:var(--crema); }
.copy-btn svg{ width:11px; height:11px; }
.pay-row .pv-wrap{ display:flex; align-items:center; justify-content:flex-end; flex:1; min-width:0; }

.pay-precios{ margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.precio-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.55rem 0;
}
.precio-row .pn{ font-size:0.88rem; color:var(--ink-soft); }
.pv-money{
  display:inline-flex; align-items:baseline; gap:0.12em; line-height:1;
  font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--ink);
}
.pv-money .cur{ font-size:0.6em; font-style:normal; color:var(--cuero); transform:translateY(-0.42em); }
.pv-money .num{ font-variant-numeric:tabular-nums; }
.pay-aclara{
  margin-top:1.1rem; padding:0.9rem 1rem; border-radius:var(--radius);
  background:rgba(123,99,73,0.07); border:1px solid rgba(123,99,73,0.16);
  font-size:0.82rem; line-height:1.7; color:var(--ink-soft);
}
.pay-aclara b{ color:var(--ink); font-weight:500; }

.pay-cta{ margin-top:1.8rem; }
.pay-cta .btn{ width:100%; justify-content:center; }
.pay-cta .alt{ display:block; margin-top:1rem; text-align:center; font-size:0.86rem; color:var(--ink-soft); line-height:1.7; }
.pay-cta .alt a{ color:var(--cuero); text-decoration:underline; text-underline-offset:3px; }

.conf-warn{
  margin-top:2.2rem; padding:1.3rem 1.4rem;
  background:rgba(123,99,73,0.07); border:1px solid rgba(123,99,73,0.16); border-radius:var(--radius);
}
.conf-warn span{ font-family:var(--font-label); font-size:0.66rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--cuero); }
.conf-warn p{ margin-top:0.6rem; font-size:0.87rem; line-height:1.75; color:var(--ink-soft); }
.conf-warn p b{ color:var(--ink); font-weight:500; }

.conf-back{ margin-top:3rem; text-align:center; }
.conf-back a{ font-family:var(--font-label); font-size:0.7rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--cuero); }
.conf-foot{
  padding:1.8rem 0; border-top:1px solid var(--line); text-align:center;
  font-family:var(--font-label); font-size:0.64rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--taupe);
}

/* Proyectos destacados en el inicio */
.home-proyectos{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:900px){ .home-proyectos{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .home-proyectos{ grid-template-columns:1fr; } }
.hp-card{ display:block; position:relative; overflow:hidden; border-radius:var(--radius); background:var(--taupe); }
.hp-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.hp-card:hover img{ transform:scale(1.05); }
.hp-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,25,24,0.72), rgba(26,25,24,0) 58%); }
.hp-meta{ position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:2; color:var(--crema);
  font-family:var(--font-label); font-size:0.6rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
.hp-meta b{ display:block; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:1.15rem; letter-spacing:0; text-transform:none; margin-bottom:0.15rem; }

/* ============================================================
   RENGLONES EXACTOS
   Cada renglón es un bloque que no se parte. El tamaño de letra
   se calcula sobre el ancho real del contenedor (unidades cqw),
   así el renglón más largo siempre entra completo.
   ============================================================ */
.page-hero .container{ container-type:inline-size; }
.asesoria-text{ container-type:inline-size; }

.exact-lines{ max-width:none; }
.exact-lines .ln{ display:block; white-space:nowrap; }

/* 91 caracteres es el renglón más largo del hero */
.exact-hero{ font-size:min(1.05rem, 1.95cqw); }
/* 73 caracteres es el más largo de la Asesoría Integral */
.exact-lede{ font-size:min(1.02rem, 2.35cqw); }

/* Esa descripción tiene renglones largos: le damos más columna,
   así el texto conserva su tamaño de siempre */
@media (min-width:981px){
  #asesoria-integral{ grid-template-columns:1.3fr 0.7fr; }
}

/* En celulares no hay ancho físico para renglones de 90 caracteres:
   ahí el texto fluye solo y se lee bien */
@media (max-width:700px){
  .exact-lines .ln{ display:inline; white-space:normal; }
  .exact-lines .ln::after{ content:" "; }
  .exact-hero{ font-size:1rem; }
  .exact-lede{ font-size:0.98rem; }
}