/* ==========================================================================
   DISENIA — Estética "estudio de diseño"
   Capa de presentación únicamente. Se carga la última y no altera textos,
   estructura, enlaces, formularios ni funciones.
   Paleta: grafito · blanco · arena #D4BFA0 · cobre #B98363
   Tipografía: una sola familia sans serif (Plus Jakarta Sans), pesos 300–500
   ========================================================================== */

:root{
  --e-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --e-sand:#D4BFA0;
  --e-copper:#B98363;
  --e-accent:#C7A181;              /* arena-cobre liso (punto medio de la paleta) */
  --e-line:rgba(255,255,255,.10);
  --e-line-warm:rgba(212,191,160,.28);
  --e-text:#F2EEE7;
  --e-text-soft:#CFCAC1;
  --e-section-y:clamp(5rem,9vw,8rem);
}

/* ---------- 1 · TIPOGRAFÍA ÚNICA, SIN CURSIVAS NI SERIF ---------- */
html,body,button,input,select,textarea,summary{font-family:var(--e-font)}
.font-serif,.font-sans,em,i,cite,.italic,.promo-italic,
#promo-dialog em,#promo-dialog .promo-italic{
  font-family:var(--e-font)!important;
  font-style:normal!important;
}
body{font-weight:400;letter-spacing:0}

/* Sin degradados en letras: color liso */
h1,h2,h3,h4,h1 *,h2 *,h3 *,h4 *,
.gold-gradient-text,span.font-serif,#promo-heading,#promo-dialog .promo-italic,#promo-dialog .promo-desc-highlight{
  background-image:none!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}
h1,h2,h3,h4{color:#fff}

/* Pesos ligeros: títulos 300–400, 500 solo en botones y pequeños destacados */
h1,h2,h3,h4,.font-light{font-weight:300}
h3,h3.font-semibold,h3.font-bold,.font-semibold,.font-bold,strong,b{font-weight:400}
.font-medium{font-weight:400}
button,.header-cta,.btn-reservar,#promo-cta,.tab-active,
a[class*="rounded"].font-semibold,button.font-semibold{font-weight:500}
.text-xs.uppercase,.uppercase.font-semibold{font-weight:500}

/* Palabras destacadas: mismo tamaño, familia y trazo que el título; solo color arena-cobre */
.font-serif.italic.text-brand-gold,
span.font-serif.text-brand-gold,
#top h1 em,#top h2 em,
#promo-dialog .promo-italic{
  color:var(--e-accent)!important;
  -webkit-text-fill-color:var(--e-accent)!important;
  font-weight:inherit!important;
  font-size:inherit!important;
  letter-spacing:inherit!important;
  line-height:inherit!important;
}

/* Sin sombras ni contornos pesados */
.shadow,.shadow-lg,.shadow-xl,.shadow-2xl,
.header-cta,#main-header a,button,a[class*="rounded"]{box-shadow:none!important}
.glass-card,.glass-card:hover,.gold-border-glow:hover{box-shadow:none!important}

/* Hover discreto: sin escalados */
@media(hover:hover) and (pointer:fine){
  button:not(:disabled):hover,a.rounded-full:hover,a.rounded-lg:hover,a[class*="rounded"]:not(:has(img)):hover,
  #main-header .header-inner>nav>a:hover{transform:none!important}
}
.group:hover .group-hover\:scale-105,.group:hover .group-hover\:scale-110{--tw-scale-x:1.02;--tw-scale-y:1.02}

/* ---------- 2 · CABECERA ---------- */
#main-header{border-bottom:1px solid var(--e-line)!important}
#main-header .header-inner>nav{font-weight:400;letter-spacing:.02em}
#main-header .header-inner>nav>a{color:rgba(255,255,255,.82)}
#main-header .header-inner>nav>a:hover{color:#fff!important}
#main-header .header-cta,
#mobile-menu a[href="#cita"]{
  background:transparent!important;
  background-image:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(212,191,160,.55)!important;
  border-radius:2px!important;
  font-weight:500;
  letter-spacing:.14em;
  backdrop-filter:none!important;
  filter:none!important;
}
#main-header .header-cta:hover,
#mobile-menu a[href="#cita"]:hover{background:rgba(212,191,160,.10)!important;border-color:var(--e-sand)!important}
#mobile-menu a{font-weight:300}

/* ---------- 3 · PORTADA ---------- */
/* Capa oscura más ligera, concentrada tras el texto y transparente hacia la derecha */
#top .hero-fixed-background>div.absolute:nth-of-type(1){
  background:linear-gradient(90deg,
    rgba(10,8,6,.74) 0%,
    rgba(10,8,6,.62) 34%,
    rgba(10,8,6,.34) 54%,
    rgba(10,8,6,.08) 76%,
    rgba(10,8,6,0) 100%)!important;
}
#top .hero-fixed-background>div.absolute:nth-of-type(2){
  background:linear-gradient(to top,rgba(10,8,6,.40) 0%,rgba(10,8,6,0) 34%)!important;
}
#top .hero-fixed-background::after{background:none!important}

#top>.relative.z-10{padding-top:10rem;padding-bottom:5rem}
#top .max-w-3xl{max-width:36rem}
#top .space-y-7>:not([hidden])~:not([hidden]){margin-top:1.75rem}

#top h1{
  font-size:clamp(2.25rem,4.1vw,3.5rem)!important;   /* 36 → 56 px */
  font-weight:300!important;
  line-height:1.12!important;
  letter-spacing:-.015em!important;
  color:#fff!important;
}
#top h1 em{display:block}
#top h2{
  font-size:clamp(1.0625rem,1.6vw,1.375rem)!important;  /* 17 → 22 px */
  font-weight:300!important;
  line-height:1.5!important;
  color:rgba(255,255,255,.92)!important;
}
#top h2 em{font-weight:300!important}
#top h2~p{
  font-size:clamp(1rem,1.2vw,1.0625rem)!important;
  font-weight:300!important;
  line-height:1.75!important;
  color:rgba(255,255,255,.86)!important;
  max-width:31rem!important;
}

/* Etiqueta superior más discreta */
#top .inline-flex.rounded-full{
  background:transparent!important;
  border:1px solid rgba(212,191,160,.35)!important;
  padding:.35rem .85rem;
}
#top .inline-flex.rounded-full span.text-xs{
  font-size:.6875rem;font-weight:500;letter-spacing:.2em;color:var(--e-sand)!important;
}

/* Botones: finos, transparentes, más pequeños */
#top .btn-reservar,
#top a[href="#proyectos"]{
  padding:.8rem 1.5rem!important;
  border-radius:2px!important;
  font-size:.7rem!important;
  font-weight:500!important;
  letter-spacing:.16em!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  transition:background-color .25s ease,border-color .25s ease!important;
  min-height:44px;
}
#top .btn-reservar{border:1px solid rgba(212,191,160,.75)!important;color:#fff!important}
#top a[href="#proyectos"]{border:1px solid rgba(255,255,255,.35)!important;color:#fff!important}
#top .btn-reservar:hover{background:rgba(212,191,160,.12)!important;border-color:var(--e-sand)!important}
#top a[href="#proyectos"]:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.6)!important}
#top a[href="#proyectos"] svg{width:.9rem!important;height:.9rem!important;opacity:.85}
#top .flex.flex-col.sm\:flex-row{gap:.875rem}

/* Franja de experiencia: banda discreta */
#top .trust-bar{
  border-top:1px solid rgba(255,255,255,.18)!important;
  margin-top:3.5rem;
  padding-top:1.25rem;
  max-width:44rem;
}
#top .trust-inner{justify-content:flex-start;align-items:stretch;gap:1rem 0}
#top .trust-block{flex:0 1 auto;text-align:left;padding:0 2rem 0 0}
#top .trust-block+.trust-sep+.trust-block{padding-left:2rem}
#top .trust-num{
  font-family:var(--e-font)!important;
  font-size:.9375rem!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
  line-height:1.3!important;
  color:var(--e-accent)!important;
  -webkit-text-fill-color:var(--e-accent)!important;
  white-space:nowrap;
}
#top .trust-label{
  font-size:.75rem!important;
  font-weight:300;
  letter-spacing:.02em!important;
  color:rgba(255,255,255,.72)!important;
  margin-top:.25rem!important;
}
#top .trust-sep{background:rgba(255,255,255,.18)!important;margin:2px 0!important}

/* ---------- 4 · RITMO, ESPACIO Y SEPARADORES ---------- */
section[id].py-24{padding-top:var(--e-section-y)!important;padding-bottom:var(--e-section-y)!important}
section[id]{border-top-color:var(--e-line)!important}
.border-brand-border,.border-brand-border\/40,.border-brand-border\/50,.border-brand-border\/60{border-color:var(--e-line)!important}
footer.border-t{border-color:var(--e-line)!important}

/* Titulares de sección: 32–40 px, ligeros */
section[id] :is(h2,p)[class*="text-3xl"],
section[id] :is(h2,p)[class*="text-4xl"]{
  font-size:clamp(1.75rem,3.2vw,2.5rem)!important;
  font-weight:300!important;
  line-height:1.2!important;
  letter-spacing:-.01em;
  color:#fff!important;
}
#profesionales h2{font-size:clamp(1.75rem,3.2vw,2.5rem)!important;line-height:1.2!important}
#opiniones h2.font-serif{font-weight:300}

/* Sobretítulos pequeños */
section[id] h2.text-xs,
section[id] p.text-xs.uppercase,
#cita span.uppercase{
  font-size:.6875rem!important;
  font-weight:500!important;
  letter-spacing:.24em!important;
  color:var(--e-sand)!important;
  -webkit-text-fill-color:var(--e-sand)!important;
}
section[id] :is(h2.text-xs,p.text-xs.uppercase)+p{margin-top:1rem}
#cita span.inline-block.rounded-full{background:transparent!important;border:1px solid rgba(212,191,160,.35)!important}

/* Texto general 16–18 px */
section[id] p.text-sm,section[id] p.text-base,section[id] ul.text-sm,section[id] .text-sm.text-brand-muted,
section[id] .text-sm.leading-relaxed{
  font-size:1rem!important;
  font-weight:300;
  line-height:1.8!important;
}
section[id] p.text-xs.text-brand-muted{font-size:.9375rem!important;font-weight:300;line-height:1.75!important}
section[id] .text-brand-muted{color:var(--e-text-soft)!important}
section[id] .text-gray-300{color:var(--e-text-soft)}
section[id] :is(h2,p)[class*="text-3xl"]~p.text-sm,
section[id] :is(h2,p)[class*="text-4xl"]~p.text-sm{max-width:40rem;margin-left:auto;margin-right:auto}

/* ---------- 5 · FILOSOFÍA: tres columnas limpias con numeración ---------- */
#filosofia .grid{counter-reset:ventaja;gap:3rem 4rem;margin-top:clamp(3.5rem,6vw,5rem)}
@media(min-width:768px){#filosofia .grid{gap:3rem}}
@media(min-width:1024px){#filosofia .grid{gap:3rem 4.5rem}}
#filosofia .glass-card{
  counter-increment:ventaja;
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--e-line-warm)!important;
  border-radius:0!important;
  padding:1.75rem 0 0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#filosofia .glass-card:hover{background:transparent!important;border-top-color:rgba(212,191,160,.6)!important}
#filosofia .feature-title{display:block;margin-bottom:1rem}
#filosofia .feature-title::before{
  content:"0" counter(ventaja);
  display:block;
  font-size:.75rem;font-weight:500;letter-spacing:.22em;
  color:var(--e-copper);
  margin-bottom:1.25rem;
}
#filosofia .feature-title>div{display:none}
#filosofia .feature-title>h3{font-size:1.25rem!important;font-weight:400!important;line-height:1.35!important;margin:0}

/* ---------- 6 · MARCAS: pestañas y dos columnas equilibradas ---------- */
#marcas .inline-flex.p-1{background:transparent!important;border:1px solid var(--e-line)!important;border-radius:2px!important}
#marcas [id^="tab-"]{
  border-radius:2px!important;
  background:transparent!important;
  background-image:none!important;
  border:1px solid transparent!important;
  color:rgba(255,255,255,.72)!important;
  font-size:.7rem!important;
  letter-spacing:.16em!important;
  font-weight:500!important;
  box-shadow:none!important;
}
#marcas [id^="tab-"].tab-active{
  background:rgba(212,191,160,.10)!important;
  border-color:rgba(212,191,160,.55)!important;
  color:#fff!important;
}
#marcas [id^="tab-"]:hover{background:rgba(255,255,255,.05)!important}
#marcas [id^="tab-"].tab-active:hover{background:rgba(212,191,160,.14)!important}
#marcas [id^="content-"]{gap:clamp(2.5rem,5vw,5rem)!important;align-items:center}
#marcas [id^="content-"]>.lg\:col-span-6{min-width:0}
#marcas [id^="content-"]>.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
#marcas [id^="content-"] h3{font-size:clamp(1.5rem,2.4vw,2rem)!important;font-weight:300!important;line-height:1.25!important}
#marcas [id^="content-"] h3 .brand-name-white{font-weight:400}
#marcas .inline-block.rounded-md{
  background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;
  font-size:.6875rem!important;font-weight:500!important;letter-spacing:.22em;text-transform:uppercase;color:var(--e-sand)!important;
}
#marcas ul li{align-items:flex-start;gap:.875rem}
#marcas ul li svg{width:1rem!important;height:1rem!important;margin-top:.45rem;opacity:.85}
#marcas ul.space-y-3>:not([hidden])~:not([hidden]){margin-top:1rem}
#marcas [id^="content-"] .rounded-2xl{border-radius:2px!important;border-color:var(--e-line)!important}
#marcas [id^="content-"] img.h-\[400px\]{height:clamp(280px,38vw,480px)}
#marcas [id^="content-"] .absolute.bottom-6 p{font-size:1rem;font-weight:300}
#marcas .brand-documents a{
  background:transparent!important;background-image:none!important;
  border:1px solid rgba(212,191,160,.45)!important;border-radius:2px!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-size:.7rem!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;
  backdrop-filter:none!important;
}
#marcas .brand-documents a:hover{background:rgba(212,191,160,.10)!important;border-color:var(--e-sand)!important}
#marcas a.uppercase{font-weight:500;letter-spacing:.14em}

/* ---------- 7 · GALERÍA, PROCESO, OPINIONES, SHOWROOM, FAQ ---------- */
.gallery-item.glass-card,.project-card{border-radius:2px!important;background:transparent!important;border-color:var(--e-line)!important}
.gallery-item .p-6{padding:1.25rem 0 .25rem!important}
.gallery-item h3{font-size:1.0625rem!important;font-weight:400!important}
.gallery-item .rounded-full{border-radius:2px!important;background:rgba(10,8,6,.55)!important;font-weight:500;letter-spacing:.14em}
.gallery-item .border-t{border-color:var(--e-line)!important}
.gallery-item.is-centered{border-color:rgba(212,191,160,.45)!important;box-shadow:none!important}
.gallery-item .relative.overflow-hidden{border-radius:2px}
.gallery-arrow{border-radius:2px!important;background:transparent!important;border-color:rgba(255,255,255,.3)!important}
.gallery-arrow:hover{border-color:var(--e-sand)!important;background:rgba(212,191,160,.08)!important}
.gallery-progress{background:rgba(255,255,255,.10)}
.gallery-progress span{background:var(--e-sand)!important}

#proceso .grid{gap:3rem 2.5rem;margin-top:clamp(3rem,5vw,4.5rem)}
#proceso .glass-card{
  background:transparent!important;border:0!important;border-top:1px solid var(--e-line-warm)!important;
  border-radius:0!important;padding:1.75rem 0 0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#proceso .feature-title{display:block;margin-bottom:.75rem}
#proceso .feature-title>div{display:none}
#proceso .feature-title>h3{font-size:1.125rem!important;font-weight:400!important;line-height:1.4!important}
#proceso .process-number{font-size:.8125rem!important;font-weight:500!important;letter-spacing:.2em;color:var(--e-copper)!important;-webkit-text-fill-color:var(--e-copper)!important;display:block;margin-bottom:1rem}
#proceso .glass-card p{font-size:.9375rem!important;font-weight:300;line-height:1.75!important;color:var(--e-text-soft)!important}

#opiniones .rev-card{border-radius:2px!important;background:transparent!important;border-color:var(--e-line)!important}
#opiniones .rev-card.active{border-color:rgba(212,191,160,.55)!important;box-shadow:none!important}
#opiniones .rev-name{font-weight:400!important}
#opiniones .rev-stars{color:var(--e-sand)!important}

#showroom .glass-card,#preguntas-frecuentes .glass-card{border-radius:2px!important;background:transparent!important;border-color:var(--e-line)!important;backdrop-filter:none!important}
#showroom h3{font-size:1.125rem!important;font-weight:400!important}
#preguntas-frecuentes summary{font-weight:400!important;font-size:1.0625rem}
#preguntas-frecuentes .faq-item{border-radius:2px!important}
#preguntas-frecuentes .faq-item p,#preguntas-frecuentes .faq-item div{font-weight:300}

/* ---------- 8 · FORMULARIOS Y PIE (solo presentación) ---------- */
#cita .glass-card,#profesionales .glass-card{border-radius:2px!important;background:rgba(255,255,255,.02)!important;border-color:var(--e-line)!important}
#cita label,#profesionales label{font-weight:400}
#cita input,#cita select,#cita textarea,#profesionales input,#profesionales select,#profesionales textarea{border-radius:2px!important;font-weight:300}
#cita button[type="submit"],#profesionales button[type="submit"]{border-radius:2px!important;letter-spacing:.14em;font-weight:500}
.professional-disclosure-toggle{border-radius:2px!important;background:transparent!important;border-color:rgba(212,191,160,.45)!important;box-shadow:none!important;font-weight:400}
footer{font-weight:300}

/* ---------- 9 · VENTANA PROMOCIONAL (solo tipografía y color) ---------- */
#promo-dialog .promo-desc-highlight{font-weight:400;color:var(--e-accent)!important}
#promo-dialog strong{font-weight:400}

/* ---------- 10 · TABLET Y MÓVIL ---------- */
@media(max-width:1023px){
  #top .hero-fixed-background>div.absolute:nth-of-type(1){
    background:linear-gradient(90deg,rgba(10,8,6,.70) 0%,rgba(10,8,6,.52) 55%,rgba(10,8,6,.20) 100%)!important;
  }
  #filosofia .grid{gap:2.75rem}
}
@media(max-width:767px){
  #top .hero-fixed-background>div.absolute:nth-of-type(1){background:rgba(10,8,6,.50)!important}
  #top .hero-fixed-background>div.absolute:nth-of-type(2){
    background:linear-gradient(to top,rgba(10,8,6,.55) 0%,rgba(10,8,6,0) 45%)!important;
  }
  #top>.relative.z-10{padding-top:8rem;padding-bottom:3.5rem}
  #top h1{font-size:clamp(2rem,9vw,2.5rem)!important}
  #top .max-w-3xl{max-width:100%}
  #top .flex.flex-col.sm\:flex-row>a{width:100%;justify-content:center}
  #top .trust-bar{margin-top:2.5rem}
  #top .trust-inner{flex-direction:column;gap:1rem}
  #top .trust-block,#top .trust-block+.trust-sep+.trust-block{padding:0!important;flex:1 1 100%}
  #top .trust-sep{display:none!important}
  section[id] :is(h2,p)[class*="text-3xl"],section[id] :is(h2,p)[class*="text-4xl"]{font-size:clamp(1.625rem,7vw,2rem)!important}
  #marcas .inline-flex.p-1{align-self:stretch}
  #marcas .inline-flex.p-1>button{flex:1;min-height:44px}
}
@media(max-width:639px){
  section[id].py-24{padding-top:4.5rem!important;padding-bottom:4.5rem!important}
  .gallery-item h3{font-size:1rem!important}
}

/* ---------- Filosofía: título que despliega su texto ---------- */
#filosofia .pilar-toggle{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;width:100%;
  align-items:flex-start;justify-content:space-between;gap:1rem;
  min-height:44px;font:inherit;font-size:1.25rem;font-weight:400;line-height:1.35;color:#fff;
}
#filosofia .pilar-toggle::after{
  content:"+";flex:none;font-size:1.5rem;font-weight:300;line-height:1.1;color:var(--e-copper);
  transition:transform .25s ease;
}
#filosofia .pilar-toggle[aria-expanded="true"]::after{content:"\2212"}
#filosofia .pilar-toggle:hover{color:var(--e-sand,#D4BFA0)}
#filosofia .pilar-toggle:focus-visible{outline:2px solid var(--e-copper);outline-offset:4px}
#filosofia .pilar-texto{margin-top:.25rem}
#filosofia .pilar-texto[hidden]{display:none}