/* ============ Ajustes cliente 2026 (Sebastián Bayona Studio) ============ */
:root{--gold:#9a7b49;--pin-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/></svg>");--wa-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2a9.9 9.9 0 0 0-8.5 14.94L2 22l5.2-1.5A9.9 9.9 0 1 0 12.04 2Zm5.8 14.1c-.25.7-1.44 1.33-2 1.4-.51.07-1.15.1-1.86-.12a16.9 16.9 0 0 1-1.68-.63c-2.96-1.28-4.9-4.26-5.04-4.46-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.58-.37.78-.37h.56c.18 0 .42-.7.66.5.25.6.84 2.06.91 2.2.08.16.13.34.03.54-.1.2-.15.32-.3.5l-.44.5c-.15.15-.3.32-.13.62.17.3.76 1.25 1.63 2.02 1.12 1 2.06 1.3 2.36 1.45.3.15.47.13.64-.8.18-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.7.8 2 .95.28.15.47.22.54.35.07.12.07.72-.18 1.42Z'/></svg>")}

/* ============ [1] Navbar — barra minimalista a todo el ancho ============
   Sin enlace "Inicio" (la marca lleva a la home). Se compacta al bajar (.is-stuck).
   Siempre oscura: el texto es blanco y hay páginas que arrancan en fondo claro. */
.navbar{position:fixed!important}
/* barra flotante tipo píldora, despegada del borde; al bajar se estrecha */
.navbar[data-astro-cid-l7arcky5]{
  /* centrado con left/right + margin auto, NO con transform: un ancestro
     transformado convierte el position:fixed del menú móvil en relativo a la
     barra y el panel a pantalla completa se rompe. */
  top:clamp(12px,1.6vw,20px);left:var(--page-pad);right:var(--page-pad);transform:none;
  width:auto;max-width:var(--content-max);margin-inline:auto;
  justify-content:space-between;align-items:center;gap:clamp(20px,3vw,48px);
  padding:clamp(9px,1.05vw,13px) clamp(16px,1.7vw,26px);
  border:1px solid rgba(255,255,255,.11);border-radius:999px;
  background:rgba(14,14,14,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 20px 48px -28px rgba(0,0,0,.95);
  transition:top .4s cubic-bezier(.2,.7,.2,1),max-width .45s cubic-bezier(.2,.7,.2,1),
    padding .4s cubic-bezier(.2,.7,.2,1),background .4s ease,border-color .4s ease,box-shadow .4s ease}
.navbar[data-astro-cid-l7arcky5].is-stuck{
  top:10px;max-width:1060px;
  padding:clamp(7px,.85vw,10px) clamp(14px,1.5vw,22px);
  background:rgba(11,11,11,.92);border-color:rgba(154,123,73,.34);
  box-shadow:0 22px 52px -26px rgba(0,0,0,.98)}

/* — marca: grande y con sombra para que se lea sobre cualquier fondo — */
.navbar__brand[data-astro-cid-l7arcky5]{position:relative;z-index:2;gap:12px;flex:0 0 auto}
.navbar__brand[data-astro-cid-l7arcky5] img[data-astro-cid-l7arcky5]{
  display:block;width:auto;height:clamp(48px,4.6vw,66px);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.55));
  transition:height .4s cubic-bezier(.2,.7,.2,1),filter .35s ease,opacity .3s ease}
.navbar[data-astro-cid-l7arcky5].is-stuck .navbar__brand[data-astro-cid-l7arcky5] img[data-astro-cid-l7arcky5]{height:clamp(42px,3.9vw,56px)}
/* brillo dorado (neón) al pasar el ratón, enfocar o tocar en móvil/tablet */
.navbar__brand:hover img,
.navbar__brand:focus-visible img,
.navbar__brand:active img{
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(154,123,73,.95)) drop-shadow(0 0 14px rgba(154,123,73,.7)) drop-shadow(0 0 28px rgba(154,123,73,.45))}

/* — enlaces: versalitas espaciadas + subrayado dorado que crece — */
.navbar__links[data-astro-cid-l7arcky5]{gap:clamp(18px,2.3vw,36px);z-index:1}
.navbar__links[data-astro-cid-l7arcky5] a[data-astro-cid-l7arcky5]{
  position:relative;padding:7px 0;font-size:12.5px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.76);
  transition:color .3s ease}
.navbar__links[data-astro-cid-l7arcky5] a[data-astro-cid-l7arcky5]:hover{color:#fff;opacity:1}
.navbar__links[data-astro-cid-l7arcky5] a[data-astro-cid-l7arcky5]:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.navbar__links[data-astro-cid-l7arcky5] a[data-astro-cid-l7arcky5]:hover:after,
.navbar__links a.is-active:after{transform:scaleX(1)}
.navbar__links a.is-active{color:var(--gold)!important;opacity:1}

/* (el botón "Escríbenos" del navbar se retiró a petición del cliente) */

/* — botón de menú: sin caja blanca — */
.navbar__toggle[data-astro-cid-l7arcky5]{position:relative;z-index:2;background:transparent;border-radius:0;width:30px;height:30px;padding:0}
.navbar__toggle[data-astro-cid-l7arcky5] span[data-astro-cid-l7arcky5]{background:#fff;height:2px}

/* — menú móvil a pantalla completa — */
@media (width<=980px){
  .navbar__toggle[data-astro-cid-l7arcky5]{display:flex}
  /* En móvil: logo centrado en la barra y la hamburguesa a la derecha.
     La marca es hermana del menú (no ancestro), así que centrarla con transform
     NO afecta al position:fixed del panel a pantalla completa. */
  .navbar[data-astro-cid-l7arcky5]{justify-content:flex-end}
  .navbar__brand[data-astro-cid-l7arcky5]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
  .navbar__links[data-astro-cid-l7arcky5]{
    position:fixed;inset:0;height:100dvh;width:auto;
    border:0;border-radius:0;padding:0 var(--page-pad);
    background:#0b0b0b;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
    top:0;transform:none;opacity:0;visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease}
  .navbar[data-astro-cid-l7arcky5].is-open .navbar__links[data-astro-cid-l7arcky5]{opacity:1;visibility:visible;transform:none}
  .navbar__links[data-astro-cid-l7arcky5] a[data-astro-cid-l7arcky5]{
    font-size:clamp(27px,7.5vw,42px);letter-spacing:.005em;text-transform:none;
    color:#fff;padding:13px 0}
  .navbar__links[data-astro-cid-l7arcky5] a[data-astro-cid-l7arcky5]:after{display:none}
  .navbar__links a.is-active{color:var(--gold)!important}
}
/* con el menú abierto no se scrollea el fondo */
html:has(.navbar.is-open){overflow:hidden}

/* Con navbar fija, los anclajes del menú no quedan tapados */
#about,#filosofia,#proceso,#projects,#ambientes,#video,#faq,#cta{scroll-margin-top:110px}

/* [5] Marca del hero más discreta (antes "Bayona" gigante) */
.hero__word{font-size:clamp(28px,4.4vw,54px)!important;letter-spacing:-.02em!important;line-height:1.05!important;margin-bottom:0!important;opacity:.95;white-space:nowrap}
.hero__word small{display:inline;font-size:1em;letter-spacing:inherit;text-transform:none;opacity:1;margin:0;font-weight:inherit;color:var(--gold)}
@media (width<=768px){.hero__word{white-space:normal}}
/* La frase ya no se sale de plano */
.hero__content{align-items:flex-end}
.hero__text{max-width:360px}
@media (width<=768px){.hero__word{font-size:clamp(26px,7vw,40px)!important;text-align:left!important;align-self:flex-start!important}.hero__text{max-width:100%}}

/* ============ [6] Estudio · Quiénes somos ============
   Mismo lenguaje que Filosofía y Método: antetítulo con filete dorado, título
   editorial y los datos como columnas con filete (antes se descolocaban). */
.about{position:relative;background:var(--color-white);padding-block:clamp(66px,8.5vw,128px)}
.about__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5.5vw,88px);align-items:center}
.about__media{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 38px 74px -44px rgba(14,14,14,.55)}
.about__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
.about__media.is-in img{transform:scale(1)}
.about__eyebrow{display:inline-flex;align-items:center;gap:12px;width:max-content;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-size:11.5px;margin-bottom:20px}
.about__eyebrow:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.about__title{margin-bottom:24px;font-size:clamp(29px,3.9vw,50px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.about__lead{color:var(--color-body);font-size:clamp(16px,1.35vw,17.5px);line-height:1.65;margin-bottom:18px;max-width:54ch}
.about__lead:last-of-type{margin-bottom:0}
/* datos: columnas con filete dorado y número grande */
.about__stats{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(34px,4vw,48px);
  border-top:1px solid rgba(14,14,14,.14)}
.about__stat{position:relative;flex:1 1 150px;padding:clamp(20px,2.2vw,26px) clamp(14px,1.6vw,22px) 0 0}
.about__stat:after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--gold);
  transition:width .55s cubic-bezier(.2,.7,.2,1)}
.about__stats:hover .about__stat:after,.about__stat:hover:after{width:calc(100% - 14px)}
.about__stat b{display:block;font-family:var(--font-header);font-weight:400;
  font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;color:var(--color-dark);margin-bottom:10px}
.about__stat span{display:block;color:var(--color-body);font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;line-height:1.5}
@media (width<=980px){.about__inner{grid-template-columns:1fr;gap:36px}.about__media{aspect-ratio:16/10}}
@media (width<=560px){.about__stat{flex:1 1 100%;padding-right:0}}
@media (prefers-reduced-motion:reduce){.about__media img{transform:none!important;transition:none!important}.about__stat:after{transition:none}}

/* ============ [8] Estudio · Nuestra filosofía ============
   Antes: rejilla de 3 columnas con 5 principios → sobraba una celda gris vacía.
   Ahora: cinco columnas tipo pilar con flex-wrap (sin rejilla implícita, así que
   nunca puede quedar un hueco fantasma) y cabecera a dos columnas. */
.philo{position:relative;background:var(--color-soft-brown);padding-block:clamp(66px,8.5vw,128px)}
.philo:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(154,123,73,.4),transparent)}

/* — cabecera: título a la izquierda, introducción a la derecha — */
.philo__head{max-width:none;margin-bottom:clamp(44px,5.5vw,78px);
  display:grid;grid-template-columns:1.12fr .88fr;column-gap:clamp(34px,5vw,88px);align-items:end}
.philo__eyebrow{grid-column:1/-1;width:max-content;display:inline-flex;align-items:center;gap:12px;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-size:11.5px;margin-bottom:20px}
.philo__eyebrow:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.philo__head h2{margin:0;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.02em;color:var(--color-dark);text-wrap:balance}
.philo__aside{padding-bottom:6px}
.philo__lead{margin:0;color:var(--color-body);font-size:clamp(15.5px,1.3vw,17px);line-height:1.62;max-width:46ch}

/* — los cinco pilares — */
.philo__grid{display:flex;flex-wrap:wrap;gap:clamp(22px,2.6vw,38px);
  background:none;border:0;border-radius:0;overflow:visible}
.philo__item{position:relative;flex:1 1 205px;background:none;
  padding:clamp(20px,2vw,26px) 0 0;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* filete de cabecera de cada pilar + relleno dorado al pasar el ratón */
.philo__item:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,14,14,.17)}
.philo__item:after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.philo__item:hover:after{width:100%}
.philo__item:hover{transform:translateY(-5px)}
/* número fantasma que se rellena de dorado */
.philo__n{display:block;font-family:var(--font-header);font-weight:600;
  font-size:clamp(26px,2.6vw,34px);line-height:1;margin-bottom:clamp(16px,1.8vw,22px);
  color:rgba(154,123,73,.55);font-variant-numeric:tabular-nums;
  transition:color .45s ease}
@supports (-webkit-text-stroke:1px #000){
  .philo__n{color:transparent;-webkit-text-stroke:1px rgba(154,123,73,.6);
    transition:color .45s ease,-webkit-text-stroke-color .45s ease}
  .philo__item:hover .philo__n{-webkit-text-stroke-color:transparent}
}
.philo__item:hover .philo__n{color:var(--gold)}
.philo__item h3{font-family:var(--font-header);font-weight:500;font-size:clamp(17px,1.45vw,19px);
  letter-spacing:-.01em;line-height:1.25;margin-bottom:10px;color:var(--color-dark);text-wrap:balance}
.philo__item p{color:var(--color-body);font-size:14.5px;line-height:1.58}

@media (width<=1100px){
  .philo__head{grid-template-columns:1fr;row-gap:18px;align-items:start}
  .philo__aside{padding-bottom:0}
  .philo__item{flex:1 1 240px}
}
@media (width<=560px){.philo__item{flex:1 1 100%}.philo__item:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .philo__item,.philo__item:after,.philo__n{transition:none!important}
  .philo__item:hover{transform:none!important}
}

/* [12] Proyectos: descripción + click para ampliar */
.project{cursor:pointer}
.project__desc{color:var(--color-body);font-size:15px;line-height:22px;margin-top:-4px}
.project__zoom{margin-top:6px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);display:inline-flex;align-items:center;gap:6px}
.project__image{position:relative}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:9998;background:#0e0e0ef2;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.is-open{opacity:1;visibility:visible}
.lb__fig{max-width:1100px;width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
.lb__img{max-height:78vh;width:auto;max-width:100%;object-fit:contain;border-radius:8px}
.lb__cap{color:var(--color-white);text-align:center;max-width:640px}
.lb__cap b{font-family:var(--font-header);font-weight:400;font-size:22px;display:block;margin-bottom:6px}
.lb__cap span{color:var(--color-tertiary);font-size:15px;line-height:22px}
.lb__close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff59;background:transparent;color:#fff;font-size:22px;line-height:1}
.lb__close:hover{background:#ffffff1a}

/* [13] Ambientes (fotos por zonas de la casa) */
.rooms{background:var(--color-white);padding-block:clamp(64px,8vw,120px)}
.rooms__head{max-width:720px;margin-bottom:clamp(32px,4vw,56px)}
.rooms__eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-size:14px;margin-bottom:18px}
.rooms__lead{color:var(--color-body);font-size:18px;line-height:28px;margin-top:20px}
.rooms__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.room{position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;min-height:220px}
.room img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.room:hover img{transform:scale(1.05)}
.room__label{position:absolute;left:16px;bottom:14px;color:#fff;font-family:var(--font-header);font-size:20px;letter-spacing:-.01em;text-shadow:0 2px 12px #0009;z-index:2}
.room:after{content:"";position:absolute;inset:0;background:linear-gradient(#0e0e0e00 45%,#0e0e0eb3);z-index:1}
.room--lg{grid-column:span 6;grid-row:span 2}
.room--md{grid-column:span 6}
.room--sm{grid-column:span 4}
@media (width<=900px){.room--lg,.room--md{grid-column:span 6}.room--sm{grid-column:span 6}.room{min-height:180px}}
@media (width<=560px){.rooms__grid{grid-template-columns:1fr}.room--lg,.room--md,.room--sm{grid-column:span 1}}

/* [15] Footer: más pequeño, marca en una sola línea (como en el hero) y "Studio" en dorado */
/* El parallax del footer desplazaba el contenido un 25% y dejaba una franja
   vacía dentro del overflow:hidden mientras se hacía scroll. Neutralizado
   también por CSS por si alguna página se regenera con el script antiguo. */
.pfooter{transform:none!important}
.pfooter-wrap__dark{display:none!important}
.pfooter[data-astro-cid-5wsyi5bm]{min-height:auto!important;gap:clamp(2.4em,5vw,4em)!important;padding-block:clamp(44px,6vw,80px)!important}
.pfooter__logo-row[data-astro-cid-5wsyi5bm]{gap:.5em!important}
.pfooter__wordmark{font-size:clamp(28px,5.4vw,76px)!important;display:flex!important;flex-wrap:nowrap;align-items:baseline;gap:.26em;line-height:1;white-space:nowrap}
.pfooter__word{display:inline!important}
.pfooter__studio{display:inline!important;margin-top:0!important;color:var(--gold)!important;font-size:1em;letter-spacing:-.04em;text-transform:none;opacity:1;font-weight:500}
/* Móvil: la marca sigue en UNA línea (todo junto) pero mucho más pequeña, y el footer más compacto */
@media (width<=560px){.pfooter__wordmark{font-size:clamp(21px,6.2vw,32px)!important}.pfooter__a[data-astro-cid-5wsyi5bm]{font-size:1.4em!important}.pfooter[data-astro-cid-5wsyi5bm]{gap:2.6em!important;padding:1.6em 1.2em!important}}

/* [7] Frase automática (sustituye al scroll manual) */
/* ============ Manifiesto (frases rotativas del home) ============
   Antes: 60vh de alto con un vacío enorme y las frases cruzándose al fundir.
   Ahora: bloque ajustado, relevo limpio (una sale antes de que entre la otra)
   e indicadores que marcan cuál de las tres se está leyendo. */
.autoline{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#0e0e0e,#1a1512 52%,#0e0e0e);
  min-height:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(76px,10vw,142px) var(--page-pad)}
/* halo dorado detrás de la frase */
.autoline:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 68% at 50% 46%,rgba(154,123,73,.22),transparent 70%)}
/* filete superior */
.autoline:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(154,123,73,.45),transparent)}

.autoline__wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3.4vw,42px);width:100%}
.autoline__kicker{margin:0;display:inline-flex;align-items:center;gap:14px;
  text-transform:uppercase;letter-spacing:.28em;font-size:11.5px;color:var(--gold)}
.autoline__kicker:before,.autoline__kicker:after{content:"";width:30px;height:1px;background:var(--gold);opacity:.65}

.autoline__inner{position:relative;max-width:56rem;width:100%;text-align:center;min-height:2.4em;display:grid;place-items:center}
.autoline__el{grid-area:1/1;margin:0;color:var(--color-white);
  font-family:var(--font-header);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(28px,4.5vw,62px);line-height:1.14;text-wrap:balance;
  /* estado de salida: se va rápido y con desenfoque, sin pisar a la siguiente */
  opacity:0;transform:translateY(14px) scale(.99);filter:blur(5px);
  transition:opacity .42s ease,transform .42s ease,filter .42s ease}
/* estado de entrada: con retardo, para que la anterior ya se haya ido */
.autoline__el.is-on{opacity:1;transform:none;filter:none;
  transition:opacity .75s ease .38s,transform .85s cubic-bezier(.2,.7,.2,1) .38s,filter .7s ease .38s}

/* indicadores: se rellenan de dorado mientras dura cada frase */
.autoline__dots{display:flex;align-items:center;gap:12px}
.autoline__dot{position:relative;width:38px;height:2px;padding:0;border:0;border-radius:2px;
  background:rgba(255,255,255,.2);overflow:hidden;cursor:pointer;
  transition:background .3s ease}
.autoline__dot:hover{background:rgba(255,255,255,.38)}
.autoline__dot:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.autoline__dot:after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.autoline__dot.is-on:after{animation:autolineFill 4.2s linear forwards}
@keyframes autolineFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (width<=768px){
  .autoline__el{font-size:clamp(25px,6.6vw,38px)}
  .autoline__inner{min-height:3.4em}
  .autoline__dot{width:30px}
}
@media (prefers-reduced-motion:reduce){
  /* sin rotación no tiene sentido enseñar los indicadores */
  .autoline__dots{display:none}
  .autoline__el{transition:none}
  .autoline__el.is-on{transition:none}
}

/* ==== Multipágina ==== */
.nav-spacer{height:116px}@media (width<=980px){.nav-spacer{height:94px}}
.navbar__links a.is-active{color:var(--gold);opacity:1}

/* Hero con vídeo de fondo (Conoce Sebastián Bayona Studio) */
.hero__video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0e0e0e}
/* Respaldo: solo si el vídeo no llega a reproducirse (autoplay bloqueado, red caída).
   El póster normal es el primer fotograma del propio vídeo —negro— para que no se vea
   ninguna foto antes de que arranque. */
.hero__video.is-fallback{background:#0e0e0e url(/assets/bayel/hero-fallback.jpg) center/cover no-repeat}
.hero__video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero__video video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0e0e0e40 0%,#0e0e0e26 38%,#0e0e0e8c 100%)}
.hero__content{z-index:2}

/* ============ Vídeos · galería ============
   La página tenía un solo vídeo suelto bajo el título "Conoce Sebastián Bayona".
   Ahora es una galería: cabecera + rejilla de fichas que crece con más vídeos.
   Ojo: el marcado ya no lleva los data-astro-cid, así que los estilos de
   .video__frame/.video__thumb/.video__play se redefinen aquí. */
.vgal{position:relative;background:var(--color-dark);color:var(--color-white);padding-block:clamp(60px,7.5vw,110px)}
.vgal:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(154,123,73,.45),transparent)}
.vgal__head{max-width:760px;margin-bottom:clamp(34px,4.4vw,60px)}
.vgal__eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;
  letter-spacing:.24em;color:var(--gold);font-size:11.5px;margin-bottom:20px}
.vgal__eyebrow:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.vgal .video__title{color:#fff;margin:0 0 16px;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.02em;max-width:none}
.vgal__lead{color:var(--color-tertiary);font-size:clamp(15.5px,1.3vw,17px);line-height:1.62;max-width:52ch;margin:0}

/* rejilla flexible: con 1 vídeo ocupa el ancho, con más se reparten sin huecos */
.vgal__grid{display:flex;flex-wrap:wrap;gap:clamp(22px,2.6vw,36px)}
.vgal__item{flex:1 1 380px;display:flex;flex-direction:column;gap:16px;min-width:0}
.vgal__item .video__frame{position:relative;display:block;width:100%;padding:0;border:0;
  aspect-ratio:16/9;background:#000;border-radius:calc(var(--radius) + 6px);overflow:hidden;cursor:pointer;
  box-shadow:0 34px 70px -44px #000;transition:box-shadow .45s ease}
.vgal__item .video__frame:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:box-shadow .45s ease}
.vgal__item .video__frame:hover:after{box-shadow:inset 0 0 0 1px rgba(154,123,73,.55)}
.vgal__item .video__thumb{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.vgal__item .video__frame:hover .video__thumb{transform:scale(1.045);opacity:.88}
.vgal__item .video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(48px,4.2vw,62px);height:clamp(48px,4.2vw,62px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#0e0e0e;background:rgba(255,255,255,.94);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 14px 34px -14px #000;
  transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease,color .35s ease}
.vgal__item .video__play svg{width:clamp(19px,1.7vw,24px);height:clamp(19px,1.7vw,24px);margin-left:2px}
.vgal__item .video__frame:hover .video__play{background:var(--gold);color:#fff;transform:translate(-50%,-50%) scale(1.08)}
.vgal__item .video__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.vgal__meta h3{font-family:var(--font-header);font-weight:500;font-size:clamp(18px,1.6vw,21px);
  letter-spacing:-.01em;color:#fff;margin:0 0 6px}
.vgal__meta p{color:var(--color-tertiary);font-size:15px;line-height:1.55;margin:0;max-width:56ch}
@media (width<=560px){.vgal__item{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){
  .vgal__item .video__thumb,.vgal__item .video__play,.vgal__item .video__frame{transition:none!important}
  .vgal__item .video__frame:hover .video__thumb{transform:none}
}

/* Vídeo propio self-hosted en el facade de la página Vídeos */
.video__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
/* ============ Botón de audio del vídeo del hero ============
   Discreto: solo icono. La etiqueta aparece al pasar el ratón, para que no
   quede un pegote en medio del hero. Abajo chocaba con el botón de WhatsApp. */
.hero__audio{
  position:absolute;z-index:4;
  top:auto;bottom:clamp(18px,2.4vw,30px);right:auto;left:var(--page-pad);
  display:inline-flex;align-items:center;gap:0;
  width:auto;height:auto;padding:0;
  border-radius:999px;border:1px solid rgba(255,255,255,.24);
  background:rgba(14,14,14,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:rgba(255,255,255,.85);cursor:pointer;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1;
  transition:background .3s ease,border-color .3s ease,color .3s ease,gap .35s ease}
.hero__audio:hover{background:rgba(14,14,14,.6);border-color:rgba(255,255,255,.45);color:#fff}
.hero__audio:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hero__audio.is-on{border-color:rgba(154,123,73,.75);color:#fff}

.hero__audio-ico{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto}
.hero__audio svg{width:15px;height:15px;pointer-events:none;grid-area:1/1}
.hero__audio .icon-on{display:none}
.hero__audio.is-on .icon-on{display:block;color:var(--gold)}
.hero__audio.is-on .icon-muted{display:none}

/* ecualizador solo con sonido activo */
.hero__audio-eq{display:flex;align-items:flex-end;gap:2px;height:11px;width:0;overflow:hidden;opacity:0;
  transition:width .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease,margin .35s ease}
.hero__audio.is-on .hero__audio-eq{width:13px;opacity:1;margin-right:10px}
.hero__audio-eq i{width:2px;border-radius:1px;background:var(--gold);height:3px}
.hero__audio.is-on .hero__audio-eq i{animation:heroEq .9s ease-in-out infinite}
.hero__audio.is-on .hero__audio-eq i:nth-child(2){animation-duration:.7s;animation-delay:.12s}
.hero__audio.is-on .hero__audio-eq i:nth-child(3){animation-duration:1.1s;animation-delay:.26s}
@keyframes heroEq{0%,100%{height:3px}50%{height:11px}}

/* la etiqueta solo se despliega al pasar el ratón (o con sonido activo) */
.hero__audio-txt{display:block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease,margin .4s ease}
.hero__audio-txt:after{content:"Activar sonido"}
.hero__audio.is-on .hero__audio-txt:after{content:"Silenciar"}
@media (hover:hover){
  .hero__audio:hover .hero__audio-txt{max-width:160px;opacity:1;margin-right:16px}
}
.hero__audio.is-on .hero__audio-txt{max-width:160px;opacity:1;margin-right:16px}

@media (width<=768px){.hero__audio{left:var(--page-pad);bottom:auto;top:96px}}
@media (prefers-reduced-motion:reduce){.hero__audio-eq i{animation:none!important;height:7px}}

/* ============ Cambios cliente · julio 2026 (PDF) ============ */

/* Reveal al hacer scroll (keypoints animados) */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}

/* [WA] Sticky "Te atendemos por WhatsApp" */
/* Botón flotante de WhatsApp: en la paleta del estudio, no en verde chillón */
.wa-sticky{position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:9990;
  display:inline-flex;align-items:center;gap:11px;padding:13px 22px 13px 17px;border-radius:999px;
  background:rgba(14,14,14,.92);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(154,123,73,.7);
  font-family:var(--font-body);font-size:11.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;box-shadow:0 16px 40px -18px rgba(0,0,0,.85);
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .3s ease}
.wa-sticky:hover{transform:translateY(-2px);background:var(--gold);border-color:var(--gold);color:#0e0e0e}
.wa-sticky svg{color:var(--gold);transition:color .35s ease}
.wa-sticky:hover svg{color:#0e0e0e}
.wa-sticky svg{width:19px;height:19px;flex:0 0 auto}
.wa-sticky span{white-space:nowrap}
@media (width<=560px){.wa-sticky span{display:none}.wa-sticky{padding:14px}}

/* [5] Proyectos · Nuestro Método — cabecera editorial + raíl de progreso */
/* ojo: nada de overflow:hidden aquí — rompería el position:sticky de la foto */
.metodo{position:relative;isolation:isolate;background:var(--color-dark);color:var(--color-white);padding-block:clamp(72px,9vw,132px);padding-inline:var(--page-pad)}
/* halo ambiental dorado */
.metodo:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(115% 75% at 88% -12%,rgba(154,123,73,.22),transparent 58%),radial-gradient(95% 65% at -12% 112%,rgba(154,123,73,.11),transparent 62%)}
.metodo__inner{display:block}

/* — cabecera — */
.metodo__head{max-width:840px;margin-bottom:clamp(42px,5.5vw,78px)}
.metodo__eyebrow{display:inline-flex;align-items:center;gap:13px;text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-size:12px;margin-bottom:20px}
.metodo__eyebrow:before{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.metodo__bigtitle{font-family:var(--font-header);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(30px,5vw,58px);line-height:1.04;margin-bottom:16px;color:#fff}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .metodo__bigtitle{background:linear-gradient(96deg,#fff 18%,#efe1c9 62%,var(--gold) 104%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.metodo__sub{color:var(--color-tertiary);font-size:clamp(15px,1.4vw,17px);line-height:1.6;max-width:48ch}

/* — rejilla: foto sticky + pasos — */
.metodo__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(36px,5.5vw,84px);align-items:start}

/* — foto — */
.metodo__media{position:sticky;top:104px;border-radius:calc(var(--radius) + 8px);overflow:hidden;aspect-ratio:4/5;box-shadow:0 42px 90px -44px #000,0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 1px rgba(154,123,73,.16)}
.metodo__media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,14,0) 32%,rgba(14,14,14,.55) 66%,rgba(14,14,14,.94))}
.metodo__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.09);transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
.metodo__media.is-in img{transform:scale(1)}

/* — contador de paso sobre la foto — */
.metodo__media-cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,32px)}
.metodo__track{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.metodo__track-n{font-family:var(--font-header);font-weight:500;font-size:clamp(34px,4vw,52px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.metodo__track-tot{font-size:clamp(13px,1.1vw,15px);color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.metodo__track-sep{width:20px;height:1px;background:rgba(255,255,255,.32);margin:0 4px;transform:translateY(-6px)}
.metodo__track-label{font-size:clamp(15px,1.5vw,19px);letter-spacing:.01em;color:#fff}
.metodo__bar{height:2px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.metodo__bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(154,123,73,.45),var(--gold));transition:width .55s cubic-bezier(.2,.7,.2,1)}
@keyframes mtdSwap{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.metodo__track.is-swap{animation:mtdSwap .45s cubic-bezier(.2,.7,.2,1)}

/* — pasos — */
.metodo__list{list-style:none;margin:0;padding:0;position:relative}
/* raíl de fondo */
.metodo__list:before{content:"";position:absolute;left:clamp(13px,1.3vw,17px);top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.10)}
.metodo__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:start;padding:clamp(20px,2.2vw,27px) clamp(16px,1.6vw,22px) clamp(20px,2.2vw,27px) clamp(36px,3.6vw,50px);border-radius:calc(var(--radius) + 4px);transition:background .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
/* raíl dorado que se dibuja al entrar en pantalla */
.metodo__step:before{content:"";position:absolute;left:clamp(13px,1.3vw,17px);top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(154,123,73,.75),rgba(154,123,73,.35));transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.metodo__step.is-in:before{transform:scaleY(1)}
/* barrido de luz al pasar el ratón */
.metodo__step:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transform:translateX(-55%);background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);transition:transform .9s ease,opacity .4s ease}
.metodo__step:hover:after{opacity:1;transform:translateX(55%)}
.metodo__step:hover{background:linear-gradient(90deg,rgba(154,123,73,.11),rgba(255,255,255,.02) 58%,transparent);transform:translateX(6px)}
.metodo__step.is-active{background:linear-gradient(90deg,rgba(154,123,73,.075),rgba(255,255,255,.012) 60%,transparent)}
/* nodo del raíl */
.metodo__dot{position:absolute;left:clamp(13px,1.3vw,17px);top:calc(clamp(20px,2.2vw,27px) + 11px);width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--color-dark);box-shadow:0 0 0 1px rgba(255,255,255,.26);transition:background .5s ease,box-shadow .5s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.metodo__step.is-in .metodo__dot{background:var(--gold);box-shadow:0 0 0 1px rgba(154,123,73,.55),0 0 0 6px rgba(154,123,73,.11)}
.metodo__step.is-active .metodo__dot{box-shadow:0 0 0 1px var(--gold),0 0 0 8px rgba(154,123,73,.17),0 0 22px rgba(154,123,73,.5)}
/* número fantasma → dorado sólido cuando es el paso activo */
.metodo__n{font-family:var(--font-header);font-weight:600;font-size:clamp(26px,2.9vw,38px);line-height:.92;min-width:1.85em;color:rgba(154,123,73,.6);font-variant-numeric:tabular-nums;transition:color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
@supports (-webkit-text-stroke:1px #000){
  .metodo__n{color:transparent;-webkit-text-stroke:1px rgba(154,123,73,.55);transition:color .45s ease,-webkit-text-stroke-color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  .metodo__step:hover .metodo__n,.metodo__step.is-active .metodo__n{-webkit-text-stroke-color:transparent}
}
.metodo__step:hover .metodo__n,.metodo__step.is-active .metodo__n{color:var(--gold);transform:translateY(-1px)}
.metodo__body h3{font-family:var(--font-header);font-weight:500;font-size:clamp(19px,1.85vw,24px);letter-spacing:-.01em;margin-bottom:8px;transition:color .4s ease}
.metodo__body p{color:#a9a9a9;font-size:15.5px;line-height:1.62;max-width:48ch;transition:color .4s ease}
.metodo__step.is-active .metodo__body p,.metodo__step:hover .metodo__body p{color:var(--color-tertiary)}

@media (width<=980px){
  .metodo__grid{grid-template-columns:1fr;gap:34px}
  .metodo__media{position:relative;top:0;aspect-ratio:16/10;max-height:56vh}
  .metodo__media-cap{display:none}
  .metodo__media:after{background:linear-gradient(180deg,rgba(14,14,14,0) 45%,rgba(14,14,14,.35))}
  .metodo__step{padding-left:clamp(30px,7vw,40px)}
  .metodo__step:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .metodo__media img,.metodo__step,.metodo__step:before,.metodo__step:after,.metodo__dot,.metodo__n{transition:none!important;transform:none!important}
  .metodo__step:before{transform:scaleY(1)!important}
  .metodo__track.is-swap{animation:none}
}

/* [4] Proyectos · Nuestra Filosofía (imagen + puntos) */
.pfilo{position:relative;background:var(--color-soft-brown);padding-block:clamp(64px,8vw,122px)}
/* Rediseño 2026: los 5 principios eran una rejilla de 2 columnas y dejaban
   una celda gris vacía. Ahora van en lista de filetes con numeración por
   contador CSS (el <li> tiene que seguir empezando por <h3> — lo exige el
   regex de content_registry.py). */
.pfilo:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(154,123,73,.4),transparent)}
.pfilo__inner{display:grid;grid-template-columns:.84fr 1.16fr;gap:clamp(34px,5.5vw,84px);align-items:center}

/* — foto — */
.pfilo__media{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;aspect-ratio:3/4;box-shadow:0 38px 74px -42px rgba(14,14,14,.6)}
.pfilo__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
.pfilo__media.is-in img{transform:scale(1)}
.pfilo__media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,14,.5),transparent 32%)}
.pfilo__media-tag{position:absolute;z-index:2;left:clamp(16px,1.7vw,24px);top:clamp(16px,1.7vw,24px);display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 10px #0009}
.pfilo__media-tag:before{content:"";width:20px;height:1px;background:var(--gold)}

/* — cabecera — */
.pfilo__kicker{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;color:var(--gold);margin-bottom:18px}
.pfilo__kicker:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.pfilo__eyebrow{font-family:var(--font-header);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(27px,3.9vw,46px);line-height:1.05;color:var(--color-dark);margin-bottom:18px}
.pfilo__eyebrow span{color:var(--gold)}
.pfilo__lead{color:var(--color-body);font-size:clamp(16px,1.35vw,17.5px);line-height:1.62;max-width:52ch;margin-bottom:clamp(26px,3.2vw,42px)}

/* — principios — */
.pfilo__list{list-style:none;margin:0 0 clamp(28px,3.4vw,44px);padding:0;display:block;counter-reset:pf;background:none;border:0;border-top:1px solid rgba(14,14,14,.13);border-radius:0;overflow:visible}
.pfilo__item{counter-increment:pf;position:relative;background:none;
  padding:clamp(16px,1.9vw,22px) clamp(12px,1.1vw,18px) clamp(16px,1.9vw,22px) clamp(48px,4.8vw,66px);
  border-bottom:1px solid rgba(14,14,14,.13);
  transition:background .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.pfilo__item:hover{background:rgba(154,123,73,.065);transform:translateX(4px)}
/* marca dorada que crece al pasar el ratón */
.pfilo__item:after{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--gold);transform:scaleY(0);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pfilo__item:hover:after{transform:scaleY(1)}
.pfilo__item h3{font-family:var(--font-header);font-weight:500;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;margin-bottom:7px;color:var(--color-dark);position:static;padding-left:0}
/* el número sale del contador, no del HTML */
.pfilo__item h3:before{content:counter(pf,decimal-leading-zero);position:absolute;left:clamp(12px,1.1vw,18px);top:clamp(16px,1.9vw,22px);
  width:auto;height:auto;background:none;
  font-family:var(--font-header);font-weight:600;font-size:clamp(14px,1.2vw,16px);line-height:1.55;
  color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pfilo__item:hover h3:before{transform:translateX(3px)}
.pfilo__item p{color:var(--color-body);font-size:15px;line-height:1.6;max-width:56ch}

/* — cita — */
.pfilo__quote{position:relative;margin:0;border:0;border-radius:calc(var(--radius) + 4px);
  padding:clamp(24px,2.8vw,32px) clamp(22px,2.4vw,32px) clamp(24px,2.8vw,32px) clamp(52px,5.2vw,70px);
  background:linear-gradient(115deg,rgba(154,123,73,.17),rgba(154,123,73,.035));
  box-shadow:inset 0 0 0 1px rgba(154,123,73,.2);
  font-family:var(--font-header);font-style:italic;font-size:clamp(18px,1.9vw,23px);line-height:1.42;color:var(--color-dark)}
.pfilo__quote:before{content:"\201C";position:absolute;left:clamp(16px,1.6vw,22px);top:clamp(2px,.6vw,8px);
  font-family:var(--font-header);font-style:normal;font-size:clamp(54px,5.8vw,82px);line-height:1;color:rgba(154,123,73,.4);pointer-events:none}

@media (width<=980px){.pfilo__inner{grid-template-columns:1fr;gap:34px}.pfilo__media{aspect-ratio:16/11}}
@media (width<=560px){.pfilo__item:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  /* solo se quitan las transiciones: el :after debe seguir en scaleY(0) hasta el hover */
  .pfilo__media img,.pfilo__item,.pfilo__item:after,.pfilo__item h3:before{transition:none!important}
  .pfilo__media img,.pfilo__item:hover,.pfilo__item:hover h3:before{transform:none!important}
}

/* [6] Proyectos · fichas editoriales (estilo ALELLA) */
.pcases{display:flex;flex-direction:column;gap:clamp(40px,6vw,88px);margin-top:clamp(40px,5vw,72px)}
.pcase{display:grid;grid-template-columns:1.05fr 1fr;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(14,14,14,.06)}
.pcase__hero{position:relative;min-height:420px;cursor:pointer}
.pcase__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcase__hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0e0e0e33 0%,#0e0e0e00 30%,#0e0e0e00 55%,#0e0e0ecc 100%)}
.pcase__hero-cap{position:absolute;left:clamp(20px,2.6vw,36px);top:clamp(24px,3vw,40px);z-index:2;color:#fff}
.pcase__hero-kicker{text-transform:uppercase;letter-spacing:.2em;font-size:12px;opacity:.85;margin-bottom:10px}
.pcase__hero-name{font-family:var(--font-header);font-weight:300;letter-spacing:.06em;font-size:clamp(34px,4.4vw,64px);line-height:1}
.pcase__hero-tag{position:absolute;left:clamp(20px,2.6vw,36px);right:clamp(20px,2.6vw,36px);bottom:clamp(20px,2.6vw,32px);z-index:2;color:#fff;font-family:var(--font-header);font-style:italic;font-size:clamp(14px,1.4vw,17px);line-height:1.4;opacity:.92}
.pcase__panel{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.pcase__eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-size:12px;margin-bottom:12px}
.pcase__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;color:var(--color-dark)}
.pcase__meta span{position:relative;padding-right:16px;font-size:15px;color:var(--color-body)}
.pcase__meta span:not(:last-child):after{content:"";position:absolute;right:0;top:.1em;height:1.1em;width:1px;background:var(--color-border)}
.pcase__meta-big{font-family:var(--font-header)!important;font-size:clamp(22px,2.4vw,30px)!important;color:var(--color-dark)!important;font-weight:400}
.pcase__meta em{font-style:normal;color:var(--color-body)}
.pcase__block p{color:var(--color-body);font-size:15px;line-height:24px;margin-bottom:10px}
.pcase__block p:last-child{margin-bottom:0}
.pcase__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcase__thumb{border:0;padding:0;background:none;border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:3/4}
.pcase__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcase__thumb:hover img{transform:scale(1.06)}
.pcase__id{border-top:1px solid var(--color-border);padding-top:16px;text-align:right;margin-top:auto}
.pcase__id p{font-size:13px;color:var(--color-body);line-height:1.5}
.pcase__id-name{font-family:var(--font-header);font-size:16px;color:var(--color-dark);letter-spacing:.04em}
.pcase:nth-child(even){grid-template-columns:1fr 1.05fr}
.pcase:nth-child(even) .pcase__hero{order:2}
@media (width<=860px){.pcase,.pcase:nth-child(even){grid-template-columns:1fr}.pcase__hero{min-height:340px;order:0!important}.pcase:nth-child(even) .pcase__hero{order:0}.pcase__id{text-align:left}}

/* [3] Contacto · formulario + mapa */
.contact{background:var(--color-white);padding-top:0!important}
/* ============ Contacto — rediseño 2026 ============
   Antes: datos sueltos sin jerarquía, botón de WhatsApp verde neón que rompía
   la paleta, y un formulario de cajas redondeadas genérico. Ahora: datos como
   filas con filete, campos con subrayado (sin cajas) y acento dorado al foco. */
.contact{position:relative}
.contact__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5.5vw,88px);align-items:start;
  padding-top:clamp(54px,6.5vw,104px);padding-bottom:clamp(50px,6vw,96px)}

/* — columna izquierda — */
.contact__eyebrow{display:inline-flex;align-items:center;gap:12px;width:max-content;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-size:11.5px;margin-bottom:20px}
.contact__eyebrow:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.contact__title{margin-bottom:18px;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.02em}
.contact__lead{color:var(--color-body);font-size:clamp(15.5px,1.3vw,17px);line-height:1.62;max-width:46ch;margin-bottom:clamp(30px,3.6vw,44px)}

/* datos: filas con filete y etiqueta dorada */
.contact__facts{list-style:none;margin:0 0 clamp(26px,3vw,36px);padding:0;display:block;border-top:1px solid rgba(14,14,14,.13)}
.contact__facts li{position:relative;display:grid;grid-template-columns:clamp(96px,11vw,132px) 1fr;
  align-items:baseline;gap:16px;padding:clamp(15px,1.7vw,19px) 0;border-bottom:1px solid rgba(14,14,14,.13)}
.contact__facts li:after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.contact__facts li:hover:after{width:100%}
.contact__facts span{text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--gold);opacity:1}
.contact__facts a{color:var(--color-dark);font-size:clamp(16px,1.4vw,18.5px);line-height:1.4;
  text-decoration:none;border:0;width:auto;transition:color .3s ease}
.contact__facts a:hover{color:var(--gold)}

/* WhatsApp: en la línea de la marca, no verde chillón (el flotante ya es verde) */
.contact__wa{background:transparent!important;color:var(--color-dark)!important;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(14,14,14,.35)!important;border-radius:999px!important;
  padding:13px 26px!important;font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.contact__wa:before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--wa-ico) center/contain no-repeat;mask:var(--wa-ico) center/contain no-repeat}
.contact__wa:hover{background:var(--color-dark)!important;border-color:var(--color-dark)!important;color:#fff!important}

/* — formulario: campos subrayados, sin cajas — */
.contact__form{background:none;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;gap:clamp(18px,2.1vw,26px)}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.1vw,26px)}
.contact__field{display:flex;flex-direction:column;gap:8px}
.contact__field span{text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;color:var(--color-body);font-weight:400}
.contact__field input,.contact__field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--color-dark);
  background:transparent;border:0;border-bottom:1px solid rgba(14,14,14,.22);border-radius:0;
  padding:9px 2px;width:100%;transition:border-color .3s ease,background .3s ease}
.contact__field input::placeholder,.contact__field textarea::placeholder{color:rgba(14,14,14,.3)}
.contact__field input:focus,.contact__field textarea:focus{outline:none;border-bottom-color:var(--gold);background:rgba(154,123,73,.05)}
.contact__field textarea{resize:vertical;min-height:132px}
.contact__form .btn{margin-top:6px;align-self:flex-start;border-radius:999px;padding:15px 34px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.contact__note{font-size:14px;margin:0;min-height:1.2em}
.contact__note.is-ok{color:#2f7a3e}
.contact__note.is-err{color:#b23b3b}

/* — formulario en tarjeta, para que no flote suelto — */
.contact__form{background:var(--color-soft-brown);border:1px solid rgba(14,14,14,.10);
  border-radius:calc(var(--radius) + 8px);padding:clamp(26px,3.2vw,44px);
  box-shadow:0 30px 66px -50px rgba(14,14,14,.55)}
.contact__form-head{margin-bottom:clamp(20px,2.4vw,30px)}
.contact__form-head p{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--gold)}

/* — mapa — */
.contact__map{border-top:1px solid rgba(14,14,14,.13);padding-top:clamp(42px,5vw,70px);padding-bottom:clamp(44px,5.5vw,84px)}
.contact__map-head{margin-bottom:clamp(20px,2.6vw,32px);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.contact__map-head h2{font-size:clamp(25px,3.1vw,38px);line-height:1.08;letter-spacing:-.02em;margin:0}
.contact__map-head .contact__eyebrow{grid-column:1/-1;margin-bottom:14px}
.contact__map-link{align-self:end;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-dark);
  padding-bottom:5px;border-bottom:1px solid rgba(14,14,14,.28);transition:color .3s ease,border-color .3s ease}
.contact__map-link:hover{color:var(--gold);border-color:var(--gold)}
.contact__map-frame{position:relative;max-width:var(--content-max);margin-inline:auto;
  border-radius:calc(var(--radius) + 6px);overflow:hidden;
  border:1px solid rgba(14,14,14,.12);box-shadow:0 30px 62px -48px rgba(14,14,14,.5)}
.contact__map-frame iframe{display:block;width:100%;height:clamp(300px,36vw,420px);border:0}

@media (width<=980px){.contact__inner{grid-template-columns:1fr;gap:40px}}
@media (width<=520px){.contact__row{grid-template-columns:1fr}.contact__facts li{grid-template-columns:1fr;gap:4px}}
@media (prefers-reduced-motion:reduce){.contact__facts li:after{transition:none}}

/* [2] Blog · listado y artículo */
.blog{background:var(--color-white);padding-block:clamp(56px,7vw,110px)}
.blog__head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.blog__eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-size:13px;margin-bottom:16px}
.blog__lead{color:var(--color-body);font-size:18px;line-height:28px;margin-top:20px}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.post{background:var(--color-white)}
.post__link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.post__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;margin-bottom:18px}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.post__link:hover .post__media img{transform:scale(1.05)}
.post__meta{text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--gold);margin-bottom:10px}
.post__meta time{color:var(--color-body)}
.post__title{font-family:var(--font-header);font-weight:500;font-size:clamp(19px,1.8vw,22px);letter-spacing:-.01em;line-height:1.2;color:var(--color-dark);margin-bottom:10px}
.post__excerpt{color:var(--color-body);font-size:15px;line-height:23px;margin-bottom:14px;flex:1}
.post__more{font-size:14px;color:var(--color-dark);border-bottom:1px solid var(--gold);width:max-content;padding-bottom:2px}
@media (width<=860px){.blog__grid{grid-template-columns:1fr 1fr}}
@media (width<=560px){.blog__grid{grid-template-columns:1fr}}

.article{background:var(--color-white);padding-block:clamp(48px,6vw,96px);padding-inline:var(--page-pad)}
.article__inner{max-width:820px;margin-inline:auto}
.article__meta{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold);margin-bottom:18px}
.article__meta a{color:var(--gold);text-decoration:none}
.article__meta span,.article__meta time{color:var(--color-body)}
.article__title{margin-bottom:20px}
.article__lead{font-size:20px;line-height:31px;color:var(--color-body);margin-bottom:clamp(28px,4vw,44px)}
.article__hero{margin:0 0 clamp(28px,4vw,44px);border-radius:var(--radius);overflow:hidden}
.article__hero img{width:100%;height:auto;display:block;object-fit:contain}
.article__title{font-weight:700}
.article__body h1,.article__body h2{font-family:var(--font-header);font-weight:700;letter-spacing:-.01em;color:var(--color-dark)}
.article__body h2{font-size:clamp(22px,2.4vw,28px);margin:clamp(28px,3.4vw,40px) 0 14px}
.article__body h1{font-size:clamp(26px,2.8vw,34px);margin:clamp(28px,3.4vw,40px) 0 16px}
.article__body h3{font-family:var(--font-header);font-weight:700;font-size:clamp(18px,1.9vw,22px);letter-spacing:-.01em;color:var(--color-dark);margin:clamp(22px,2.6vw,32px) 0 12px}
.article__body p{color:var(--color-body);font-size:17px;line-height:28px;margin-bottom:18px}
.article__body blockquote{margin:clamp(24px,3vw,34px) 0;border-left:2px solid var(--gold);padding-left:22px;font-family:var(--font-header);font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:var(--color-dark)}
.article__cta{margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--color-border);text-align:center}
.article__cta p{color:var(--color-body);font-size:17px;margin:14px 0 22px}

/* anclas nuevas sin quedar bajo la navbar fija */
#metodo,#contacto,#blog,#filosofia{scroll-margin-top:110px}

/* ============ RGPD · formulario, cookies, legal (jul 2026) ============ */
/* Honeypot anti-spam (oculto) */
.contact__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Consentimiento del formulario */
.contact__consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--color-body);line-height:1.45}
.contact__consent input{margin-top:3px;flex:0 0 auto}
.contact__consent a{color:var(--gold)}

/* Enlaces legales del footer */
.pfooter__legalinks{margin-top:.5em!important;opacity:.6;font-size:.82em!important;font-weight:500}
.pfooter__legalinks a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.pfooter__legalinks a:hover{border-color:currentColor}

/* Banner de cookies */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9995;background:#0e0e0e;color:#fff;padding:16px clamp(16px,4vw,40px);display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center;box-shadow:0 -10px 34px rgba(0,0,0,.3)}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:14px;line-height:1.5;color:#d8d4cd;max-width:620px}
.cookie-banner a{color:var(--gold)}
.cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn{cursor:pointer;border:0;border-radius:6px;padding:10px 20px;font:inherit;font-size:14px;font-weight:600}
.cookie-btn--accept{background:var(--gold);color:#fff}
.cookie-btn--reject{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
@media (width<=560px){.cookie-banner{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.wa-sticky{bottom:96px}}

/* Mapa detrás de consentimiento */
.contact__map-consent{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;text-align:center;
  height:clamp(300px,36vw,420px);padding:28px;color:var(--color-body);
  background:linear-gradient(150deg,#f4efe6,var(--color-soft-brown) 55%,#f7f3ec)}
.contact__map-consent:before{content:"";width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(154,123,73,.55);background:var(--gold);
  -webkit-mask:var(--pin-ico) center/17px no-repeat;mask:var(--pin-ico) center/17px no-repeat}
.contact__map-consent p{margin:0;max-width:44ch;font-size:14.5px;line-height:1.6}
.contact__map-consent .cookie-btn--accept{border:0}

/* Páginas legales */
.legal{background:var(--color-white);padding-block:clamp(48px,6vw,96px);padding-inline:var(--page-pad)}
.legal__inner{max-width:820px;margin-inline:auto}
.legal h1{font-family:var(--font-header);font-weight:400;letter-spacing:var(--tracking-heading);font-size:clamp(32px,4.5vw,52px);line-height:1.05;margin-bottom:10px}
.legal__updated{color:var(--color-body);font-size:14px;margin-bottom:32px}
.legal h2{font-family:var(--font-header);font-weight:500;font-size:clamp(20px,2.4vw,26px);margin:34px 0 12px;color:var(--color-dark)}
.legal p,.legal li{color:var(--color-body);font-size:16px;line-height:26px;margin-bottom:12px}
.legal ul{padding-left:20px;margin-bottom:12px}
.legal a{color:var(--gold)}
.legal__note{background:var(--color-soft-brown);border-left:2px solid var(--gold);padding:14px 18px;border-radius:6px;font-size:14px;margin:8px 0 20px}

/* ============================================================================
   [MODO CLARO] Toda la web en claro
   El cliente pidió que no se alternen secciones negras y blancas. Aquí se
   pasan a claro las secciones que venían en oscuro (.metodo, .autoline, .vgal,
   .process, .cta) ajustando textos, filetes y acentos. Se mantienen oscuros
   solo el hero (es un vídeo) y la barra de navegación, que flota por encima.
   Todo está en este bloque para poder revertirlo de una pieza.
   ========================================================================== */

/* --- Proyectos · Nuestro Método --- */
.metodo{background:var(--color-soft-brown);color:var(--color-dark)}
.metodo:before{background:radial-gradient(115% 75% at 88% -12%,rgba(154,123,73,.13),transparent 58%),radial-gradient(95% 65% at -12% 112%,rgba(154,123,73,.07),transparent 62%)}
.metodo:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(154,123,73,.4),transparent)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  /* background-image, NO el atajo background: el atajo reinicia background-clip
     y el degradado se pintaba como una barra en vez de recortarse al texto */
  .metodo__bigtitle{background-image:linear-gradient(96deg,var(--color-dark) 22%,#6d5836 68%,var(--gold) 104%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.metodo__sub{color:var(--color-body)}
.metodo__list:before{background:rgba(14,14,14,.13)}
.metodo__step:hover{background:linear-gradient(90deg,rgba(154,123,73,.11),rgba(154,123,73,.02) 58%,transparent)}
.metodo__step.is-active{background:linear-gradient(90deg,rgba(154,123,73,.08),rgba(154,123,73,.01) 60%,transparent)}
.metodo__step:after{background:linear-gradient(105deg,transparent 42%,rgba(14,14,14,.04) 50%,transparent 58%)}
.metodo__dot{background:var(--color-soft-brown);box-shadow:0 0 0 1px rgba(14,14,14,.26)}
.metodo__body h3{color:var(--color-dark)}
.metodo__body p{color:var(--color-body)}
.metodo__step.is-active .metodo__body p,.metodo__step:hover .metodo__body p{color:var(--color-dark)}

/* --- Home · Manifiesto --- */
.autoline{background:linear-gradient(180deg,var(--color-soft-brown),#f4efe6 52%,var(--color-soft-brown))}
.autoline:before{background:radial-gradient(58% 68% at 50% 46%,rgba(154,123,73,.16),transparent 70%)}
.autoline__el{color:var(--color-dark)}
.autoline__dot{background:rgba(14,14,14,.16)}
.autoline__dot:hover{background:rgba(14,14,14,.3)}

/* --- Vídeos · galería --- */
.vgal{background:var(--color-soft-brown);color:var(--color-dark)}
.vgal .video__title{color:var(--color-dark)}
.vgal__lead{color:var(--color-body)}
.vgal__meta h3{color:var(--color-dark)}
.vgal__meta p{color:var(--color-body)}
.vgal__item .video__frame:after{box-shadow:inset 0 0 0 1px rgba(14,14,14,.10)}
.vgal__item .video__frame{box-shadow:0 30px 62px -44px rgba(14,14,14,.6)}

/* --- Estudio · Método (proceso) --- */
/* el cuerpo son fotos a sangre con texto blanco encima: solo cambia el fondo
   de la sección y la cabecera, que va sobre ese fondo */
.process[data-astro-cid-grsovck6]{background:var(--color-white);color:var(--color-dark)}
.process__eyebrow[data-astro-cid-grsovck6]{color:var(--gold);text-transform:uppercase;letter-spacing:.24em;font-size:11.5px}
.process__title[data-astro-cid-grsovck6]{color:var(--color-dark)}

/* --- Tarjetas CTA (home y contacto) --- */
/* las tarjetas son fotos con texto blanco: solo se aclara el fondo */
.cta[data-astro-cid-4zgmmfpt]{background:var(--color-soft-brown)}

/* --- Vídeo antiguo (por si queda en alguna página) --- */
.video[data-astro-cid-yngxbivw]{background:var(--color-soft-brown);color:var(--color-dark)}
.video__title[data-astro-cid-yngxbivw]{color:var(--color-dark)}

/* --- Galería de vídeos · cabecera y rejilla --- */
/* cabecera a dos columnas, como en Filosofía: título a la izquierda,
   introducción a la derecha, y un filete que abre la rejilla */
.vgal__head{max-width:none;position:relative;
  display:grid;grid-template-columns:1.1fr .9fr;column-gap:clamp(34px,5vw,88px);align-items:end;
  margin-bottom:clamp(34px,4.4vw,58px);padding-bottom:clamp(28px,3.4vw,42px);
  border-bottom:1px solid rgba(14,14,14,.13)}
.vgal__eyebrow{grid-column:1/-1;width:max-content}
.vgal .video__title{margin:0}
.vgal__aside{padding-bottom:5px}
.vgal__lead{margin:0}
/* filete dorado que arranca bajo el título */
.vgal__head:after{content:"";position:absolute;left:0;bottom:-1px;width:clamp(70px,9vw,120px);height:1px;background:var(--gold)}

/* duración sobre la miniatura */
.vgal__dur{position:absolute;z-index:3;right:14px;bottom:14px;
  padding:5px 10px;border-radius:6px;background:rgba(14,14,14,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1}

/* el primero a todo el ancho; el resto en tres columnas de ancho fijo.
   flex-grow:0 a propósito: si crecen, la última fila (2 fichas) se estira y
   queda con las miniaturas más grandes que la fila de arriba. */
.vgal__grid{--vgap:clamp(22px,2.6vw,36px);gap:var(--vgap)}
.vgal__item{flex:0 1 calc((100% - 2 * var(--vgap)) / 3)}
@media (width<=1100px){
  .vgal__head{grid-template-columns:1fr;row-gap:16px;align-items:start}
  .vgal__aside{padding-bottom:0}
  .vgal__item{flex:0 1 calc((100% - var(--vgap)) / 2)}
}
@media (width<=680px){.vgal__item{flex:0 0 100%}}


/* --- Contacto · FAQ --- */
.faq[data-astro-cid-hemr5th4]{background:var(--color-soft-brown);padding-block:clamp(56px,6.5vw,96px)}
/* título a la izquierda y preguntas a la derecha, alineado con el resto de
   la página (antes era una columna estrecha centrada y no cuadraba) */
.faq[data-astro-cid-hemr5th4]{justify-content:flex-start;padding-inline:var(--page-pad)}
.faq__container[data-astro-cid-hemr5th4]{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,5vw,80px);align-items:start}
.faq__title[data-astro-cid-hemr5th4]{font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-.02em;max-width:16ch;position:sticky;top:130px}
@media (width<=980px){
  .faq__container[data-astro-cid-hemr5th4]{grid-template-columns:1fr;gap:28px}
  .faq__title[data-astro-cid-hemr5th4]{position:static;max-width:22ch}
}
.acc__item[data-astro-cid-hemr5th4]{border-color:rgba(14,14,14,.14);background:var(--color-white);border-radius:calc(var(--radius) + 4px)}
.acc__item[data-astro-cid-hemr5th4]:hover{border-color:rgba(154,123,73,.5)}
.acc__h3[data-astro-cid-hemr5th4]{font-size:1.1em}
.acc__icon[data-astro-cid-hemr5th4]{border-color:rgba(154,123,73,.55)}
.acc__icon-bar[data-astro-cid-hemr5th4]{background-color:var(--gold)}

/* ============ Proyectos · intro ============
   Rejilla explícita: antetítulo a todo el ancho, título a la izquierda y texto
   a la derecha compartiendo línea, y el botón en su propia fila bajo el título.
   Antes iban alineados por abajo y el titular quedaba a la altura del botón,
   con el párrafo suelto muy por encima.
   El selector lleva [data-astro-cid-ftq3vvlr] porque la hoja base de Astro lo
   usa y si no gana ella (max-width:845px y flex-direction:column). */
.projects__intro[data-astro-cid-ftq3vvlr]{position:relative;display:grid;
  grid-template-columns:1.04fr .96fr;column-gap:clamp(34px,5vw,88px);
  align-items:start;max-width:none;gap:0;
  padding-bottom:clamp(30px,3.6vw,46px);border-bottom:1px solid rgba(14,14,14,.13)}
.projects__intro[data-astro-cid-ftq3vvlr]:after{content:"";position:absolute;left:0;bottom:-1px;
  width:clamp(70px,9vw,120px);height:1px;background:var(--gold)}

.projects__kicker{grid-column:1/-1;grid-row:1;justify-self:start;
  display:inline-flex;align-items:center;gap:12px;margin:0 0 clamp(18px,2.2vw,26px);
  text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;color:var(--gold)}
.projects__kicker:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}

.projects__intro[data-astro-cid-ftq3vvlr] h2{grid-column:1;grid-row:2;margin:0;
  font-size:clamp(30px,4.2vw,54px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
/* el texto arranca a la altura de la primera línea del título, no del bloque */
.projects__intro-desc[data-astro-cid-ftq3vvlr]{grid-column:2;grid-row:2;
  display:block;max-width:none;padding-top:clamp(5px,.7vw,12px)}
.projects__intro-desc[data-astro-cid-ftq3vvlr] p{color:var(--color-body);
  font-size:clamp(15.5px,1.3vw,17px);line-height:1.62;max-width:46ch;margin:0}

/* botón en pastilla (las clases btn--dark/md no se tocan: el regex del panel
   las necesita para poder editar su texto) */
.projects__intro[data-astro-cid-ftq3vvlr] > .btn{grid-column:1;grid-row:3;justify-self:start;
  margin-top:clamp(24px,3vw,38px);border-radius:999px;padding:14px 30px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:background .35s ease,color .35s ease,transform .3s ease}
.projects__intro[data-astro-cid-ftq3vvlr] > .btn:hover{background:var(--gold);color:#0e0e0e;opacity:1;transform:translateY(-2px)}
.projects__inner[data-astro-cid-ftq3vvlr]{gap:clamp(34px,4.4vw,60px)}

@media (width<=980px){
  .projects__intro[data-astro-cid-ftq3vvlr]{grid-template-columns:1fr}
  .projects__intro[data-astro-cid-ftq3vvlr] h2,
  .projects__intro-desc[data-astro-cid-ftq3vvlr],
  .projects__intro[data-astro-cid-ftq3vvlr] > .btn{grid-column:1}
  .projects__intro-desc[data-astro-cid-ftq3vvlr]{grid-row:3;padding-top:clamp(16px,2.4vw,22px)}
  .projects__intro[data-astro-cid-ftq3vvlr] > .btn{grid-row:4;margin-top:clamp(20px,2.6vw,28px)}
}

/* ============ Footer · barras separadoras ============
   El footer arrancaba pegado al contenido y sus dos bloques (enlaces y marca)
   se tocaban sin ninguna separación. Mismos filetes que el resto de la web:
   línea fina con degradado dorado. */
.pfooter-wrap[data-astro-cid-5wsyi5bm]{position:relative}
/* barra superior: separa el footer de la página */
.pfooter-wrap[data-astro-cid-5wsyi5bm]:before{content:"";position:absolute;z-index:3;
  left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(154,123,73,.85) 18%,rgba(154,123,73,.85) 82%,transparent)}
/* barra interior: separa los enlaces del bloque de marca, con arranque dorado */
.pfooter__logo-row[data-astro-cid-5wsyi5bm]{position:relative;
  border-top:1px solid rgba(14,14,14,.14);padding-top:clamp(26px,3vw,44px)}
.pfooter__logo-row[data-astro-cid-5wsyi5bm]:before{content:"";position:absolute;
  left:0;top:-1px;width:clamp(70px,9vw,130px);height:1px;background:var(--gold)}
/* la línea legal se despega un poco del logotipo */
.pfooter__legal[data-astro-cid-5wsyi5bm]{margin-top:clamp(6px,1vw,12px)!important}

/* ============ CTA home · una sola tarjeta ============
   Se retiró la tarjeta "¿Hablamos de tu proyecto?" (duplicaba el CTA de
   contacto de la navbar); la de "Reenamórate de tu casa" pasa a ocupar
   todo el ancho, en grande. */
.cta__grid[data-astro-cid-4zgmmfpt]{grid-template-columns:1fr!important}
.cta__card[data-astro-cid-4zgmmfpt]{min-height:clamp(360px,58vh,600px)!important}
.cta__heading[data-astro-cid-4zgmmfpt]{font-size:clamp(48px,8vw,110px)!important}

/* ============ Footer · sello Trustlocal ============ */
.pfooter__trust{margin-top:.9em}
.pfooter__trust-link{display:inline-flex;align-items:center;gap:.4em;
  color:inherit;opacity:.65;text-decoration:none;transition:opacity .25s ease}
.pfooter__trust-link:hover{opacity:1}
.pfooter__trust-icon{width:15px;height:15px;display:block}
.pfooter__trust-text{font-size:.82em;font-weight:500;letter-spacing:-.01em}

/* ============ Footer · medallita Trustlocal (widget) arriba a la derecha del bloque de marca ============ */
.pfooter__logo-row[data-astro-cid-5wsyi5bm]{position:relative}
.pfooter__badge{position:absolute;top:clamp(26px,3vw,44px);right:clamp(14px,3.5vw,64px);z-index:2;max-width:min(340px,46%)}
.pfooter__badge .pfooter__eyebrow[data-astro-cid-5wsyi5bm]{margin:0}
.pfooter__badge .trustlocal-widget{max-width:100%;margin-top:clamp(10px,1.4vw,18px)}
@media (width<=768px){.pfooter__badge{position:static;max-width:340px;margin-top:1.6em}}

/* ============ Footer compacto · reduce solo la fila de columnas (Páginas/Redes/Contacto). El bloque grande "Sebastián Bayona Studio" NO se toca ============ */
.pfooter__links-row[data-astro-cid-5wsyi5bm]{gap:2em}
.pfooter__col[data-astro-cid-5wsyi5bm]{gap:1em}
.pfooter__links[data-astro-cid-5wsyi5bm]{gap:.02em}
.pfooter__links-row .pfooter__eyebrow[data-astro-cid-5wsyi5bm]{font-size:1em}
.pfooter__links-row .pfooter__a[data-astro-cid-5wsyi5bm]{font-size:1.55em}

/* ============ Reseñas de Google · carrusel de tarjetas 3D flotantes ============
   Sección antes del footer (solo home). Estética de la web: fondo claro, dorado,
   Geist y radios suaves. Tarjetas tipo "app banners" de iPhone: ligeramente en 3D,
   flotando con sombra; scroll horizontal libre. */
.greviews{background:var(--color-soft-brown);overflow:hidden;
  padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.greviews__inner{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.greviews__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.greviews__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--gold);
  font-weight:600;letter-spacing:.16em;font-size:clamp(11px,.9vw,13px);text-transform:uppercase}
.greviews__glogo,.greviews__glogo svg{width:17px;height:17px;display:block}
.greviews__title{margin:0}
.greviews__rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.greviews__avg{font-family:var(--font-header);font-size:clamp(30px,3.4vw,44px);font-weight:600;
  color:var(--color-dark);line-height:1}
.greviews__count{color:rgba(14,14,14,.55);font-size:14px}
.greview__stars{color:var(--gold);letter-spacing:2px;font-size:18px;white-space:nowrap}
.greview__stars--off{color:rgba(14,14,14,.16)}
.greviews__btn{margin-top:4px}

.greviews__track{display:flex;gap:clamp(16px,1.6vw,24px);overflow-x:auto;overflow-y:visible;
  padding:28px 6px 36px;scroll-snap-type:x proximity;perspective:1600px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.greviews__track::-webkit-scrollbar{display:none}
.greview{scroll-snap-align:center;flex:0 0 clamp(280px,78vw,358px);min-height:208px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--color-dark);
  background:linear-gradient(165deg,#ffffff,#fbf6ef);border:1px solid rgba(14,14,14,.07);
  border-radius:18px;padding:22px 22px 20px;
  box-shadow:0 2px 4px rgba(14,14,14,.04),0 20px 36px -22px rgba(14,14,14,.42);
  transform:rotateY(6deg);transform-origin:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.greview:nth-child(even){transform:rotateY(-6deg)}
.greviews__track:hover .greview{transform:rotateY(0)}
.greview:hover{transform:translateY(-10px) rotateY(0) scale(1.02)!important;
  box-shadow:0 8px 12px rgba(14,14,14,.05),0 44px 64px -30px rgba(154,123,73,.55)}
.greview__top{display:flex;align-items:center;gap:12px}
.greview__avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--gold);color:#fff;font-weight:600;font-size:18px;font-family:var(--font-header)}
.greview__id{display:flex;flex-direction:column;min-width:0}
.greview__name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.greview__date{color:rgba(14,14,14,.5);font-size:12.5px}
.greview__g{margin-left:auto}.greview__g svg{width:20px;height:20px;display:block}
.greview__text{margin:0;color:rgba(14,14,14,.82);font-size:14.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.greview__cta{margin-top:auto;color:var(--gold);font-weight:600;font-size:13px;
  opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.greview:hover .greview__cta{opacity:1;transform:none}
.greviews__all{text-align:center;margin:0}
.greviews__all a{color:rgba(14,14,14,.6);text-decoration:none;font-size:14px;border-bottom:1px solid transparent}
.greviews__all a:hover{color:var(--gold);border-color:var(--gold)}
@media (width<=560px){.greview{flex-basis:82vw;transform:none}.greview:nth-child(even){transform:none}}
@media (prefers-reduced-motion:reduce){.greview,.greview:nth-child(even),.greview:hover{transform:none!important}}

/* ============ Lightbox · galería de Ambientes (flechas + contador) ============ */
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(20,20,20,.5);color:#fff;font-size:30px;line-height:0;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.lb__nav:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-50%) scale(1.06)}
.lb__prev{left:clamp(12px,3vw,40px)}
.lb__next{right:clamp(12px,3vw,40px)}
.lb__count{display:block;margin-top:6px;color:rgba(255,255,255,.6);font-size:13px;letter-spacing:.04em}
@media (width<=560px){.lb__nav{width:44px;height:44px;font-size:26px}
  .lb__prev{left:8px}.lb__next{right:8px}}

/* ============ Reseñas · carrusel arrastrable + auto-scroll ============ */
.greviews{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.greviews__track{scroll-snap-type:none;cursor:grab;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.greviews__track.is-drag{cursor:grabbing}
.greviews__track.is-drag .greview{transform:rotateY(0)!important}
.greview{-webkit-user-drag:none;user-drag:none}

/* ============ Cita (Proyectos) · misma estética que el resto, en diagonal ============ */
.squote{background:var(--color-soft-brown);overflow:hidden;padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(24px,3.4vw,44px)}
.squote__inner{max-width:900px;margin-inline:auto;text-align:center}
.squote__q{font-family:var(--font-header);font-weight:500;letter-spacing:-.02em;color:var(--color-dark);font-size:clamp(21px,3.1vw,38px);line-height:1.24;margin:0}
.squote__cite{display:block;margin-top:clamp(10px,1.6vw,20px);color:var(--gold);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(12px,1vw,14px);font-family:var(--font-header)}
.squote__cite::before{content:"— "}

/* ============ Lightbox · tira de miniaturas (galería) ============ */
.lb__thumbs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:none;gap:8px;
  padding:12px clamp(12px,3vw,44px);overflow-x:auto;scrollbar-width:thin;
  background:linear-gradient(to top,rgba(14,14,14,.62),transparent);-webkit-overflow-scrolling:touch}
.lb.has-thumbs .lb__thumbs{display:flex}
.lb.has-thumbs{padding-bottom:104px}
.lb.has-thumbs .lb__img{max-height:62vh}
.lb__thumb{flex:0 0 auto;width:74px;height:50px;border-radius:6px;overflow:hidden;padding:0;
  border:2px solid transparent;background:none;cursor:pointer;opacity:.5;
  transition:opacity .2s ease,border-color .2s ease}
.lb__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb__thumb:hover{opacity:.85}
.lb__thumb.is-active{opacity:1;border-color:var(--gold)}
@media (width<=560px){.lb__thumb{width:58px;height:40px}.lb.has-thumbs{padding-bottom:82px}.lb.has-thumbs .lb__img{max-height:54vh}}

img.greview__avatar{object-fit:cover;background:var(--gold)}

/* ============ Filosofía (home) · encuadrar la cara de Sebastián en móvil ============ */
@media (width<=980px){
  .pfilo__media{aspect-ratio:4/5!important}
  .pfilo__media img{object-position:50% 14%}
}

/* ============ Proceso (Estudio) · quitar el título negro duplicado (queda solo la etiqueta) ============ */
.process__step-title[data-astro-cid-grsovck6]{display:none}

/* ============ Footer · crédito "Avantia MediaTech" ============ */
.pfooter__made{margin-top:clamp(10px,1.4vw,16px);opacity:.5;font-size:.78em;font-weight:500;letter-spacing:.01em}
.pfooter__made a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.pfooter__made a:hover{border-color:currentColor}

/* ============ Blog · cuerpo del artículo (soporta HTML pegado) + pie de imagen ============ */
.article__hero figcaption{margin-top:10px;font-size:14px;color:rgba(14,14,14,.55);text-align:center;font-style:italic}
.article__body ul,.article__body ol{margin:0 0 1.1em 1.25em;padding:0}
.article__body li{margin:.35em 0;line-height:1.7}
.article__body a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.article__body img{max-width:100%;height:auto;border-radius:8px;margin:1.2em 0}
.article__body figure{margin:1.4em 0}
.article__body figure figcaption{font-size:14px;color:rgba(14,14,14,.55);margin-top:8px;text-align:center}
.article__body table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px}
.article__body th,.article__body td{border:1px solid rgba(14,14,14,.14);padding:8px 12px;text-align:left}
.article__body hr{border:0;border-top:1px solid rgba(14,14,14,.14);margin:1.6em 0}

/* ============ Selector de idioma (ES/EN) en la navbar ============ */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:10px;padding:3px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);flex-shrink:0}
.lang-switch a{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.62);text-decoration:none;line-height:1;transition:background .2s ease,color .2s ease}
.lang-switch a.is-current{background:var(--gold);color:#0e0e0e}
.lang-switch a:not(.is-current):hover{color:#fff}
@media (width<=980px){.navbar__links{gap:18px}.lang-switch{margin:10px 0 0}}