/* ==========================================================================
   Carpintek · resto de la landing (universal: no cambia con el modo Residencial/Business)
   Sobre blanco sutil, con el lenguaje de marca de la home: Bodoni Moda + Jost, filetes finos, bronce y champán, rayado de vidrio acanalado.
   Cada sección tiene su propia composición:
     .mk  Tipos de proyecto  → índice tipográfico con foto que se revela      .kn  Conocimiento   → tres artículos + muestrario de maderas
     .co  Empresa            → ficha como cajetín de plano + recorrido        .pro Profesional    → panel oscuro con pestañas + «para quién»
     .est Presupuestador     → MAQUETA (decorativa)                           .cn  Contacto       → titular a gran escala + tres vías
     .ftr Pie                → plano de sitio y marca de agua acanalada
   Los textos pendientes se ven como «tokens» (.tk) y se editan en tools/landing.py.
   ========================================================================== */

@property --ra{syntax:"<percentage>";inherits:true;initial-value:18%}
@property --rb{syntax:"<percentage>";inherits:true;initial-value:46%}

/* Tokens fijos de toda la landing (la home de arriba sí viaja con el modo) */
.lx,.ftr{
  --pf-bg:#fefdfb;--pf-fg:#17120d;--pf-soft:rgba(23,18,13,.72);--pf-line:rgba(23,18,13,.14);--pf-accent:#6f5429;--pf-flute:rgba(23,18,13,.04);
  --w0:#fefdfb;--w1:#f9f6f0;--bronze:#6f5429;--champ:#efdcb4;--ink:#17120d;
  color:var(--pf-fg);
}
.lx{position:relative;background:var(--w0)}
.lx__in{width:calc(100% - 2 * var(--gutter));max-width:140rem;margin-inline:auto}
.lx>section{position:relative;padding:clamp(4.5rem,10vh,8.5rem) 0}

/* La landing blanca empieza con un corte limpio contra la sección anterior: sin «puerta» ni degradado de negro a blanco */

/* El sobretítulo de «Proyectos» trae un grid-area con nombre que descoloca las cabeceras de aquí: se anula */
.lx .pf__eyebrow,.ftr .pf__eyebrow{grid-area:auto;align-self:auto}
.lx-title{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1rem + 3.6vw,4rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);-webkit-text-stroke:.2px currentColor}

/* Tokens: datos pendientes (marcador) o por confirmar (valor precargado) */
.tk{padding:0 .14em;border-bottom:1px dashed var(--bronze);background:linear-gradient(transparent 55%,rgba(239,220,180,.7) 55%);font-style:normal;cursor:help}
.tk--prov{background:linear-gradient(transparent 72%,rgba(239,220,180,.55) 72%)}

/* Aparición al hacer scroll (solo con JavaScript: landing.js pone «pending» y luego «in»; sin él, todo se ve) */
[data-rv="pending"]{opacity:0;transform:translateY(1.5rem)}
[data-rv="in"]{transition:opacity 1.1s var(--ease) calc(var(--i,0) * 90ms),transform 1.3s var(--ease) calc(var(--i,0) * 90ms)}
/* Elementos con coreografía propia: no se desplazan como bloque */
.mk__item[data-rv],.co__sheet[data-rv],.co__flowwrap[data-rv],.cn__title[data-rv],.ftr__mark[data-rv]{transform:none}
.co__sheet[data-rv],.co__flowwrap[data-rv],.cn__title[data-rv],.ftr__mark[data-rv]{opacity:1}

/* ==========================================================================
   1 · TIPOS DE PROYECTO — índice tipográfico
   ========================================================================== */
.mk__head{display:grid;gap:1.2rem;margin-bottom:clamp(2.2rem,5vh,4rem)}
.mk__title{font-size:clamp(1.7rem,1rem + 2.3vw,2.9rem);max-width:28ch}
.mk__intro{margin:0;max-width:36rem;font:400 clamp(.95rem,.9rem + .25vw,1.08rem)/1.58 var(--sans);color:var(--pf-soft);text-wrap:pretty}
@media (min-width:900px){
  .mk__head{grid-template-columns:minmax(0,1fr) minmax(0,28rem);column-gap:clamp(2rem,6vw,6rem);align-items:end}
  .mk__head .pf__eyebrow{grid-column:1 / -1}
}

/* Base = móvil y tableta: tarjetas apiladas con la foto arriba */
.mk__list{display:grid;gap:clamp(2.5rem,6vh,4rem)}
.mk__item{border-top:1px solid var(--pf-line);padding-top:1.6rem}
.mk__link{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;color:inherit;text-decoration:none}
.mk__link:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.mk__fig{position:relative;grid-column:1 / -1;display:block;aspect-ratio:3 / 2;overflow:hidden;margin-bottom:1.3rem;background:var(--c,#8b8378)}
.mk__pic{display:block;width:100%;height:100%}
.mk__pic img{display:block;width:100%;height:100%;object-fit:cover}
.mk__cap{position:absolute;left:0;bottom:0;padding:.55rem .9rem;background:rgba(12,9,6,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fcfbf8;font:500 .75rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.mk__num{padding-top:.85em;font:500 .75rem/1 var(--sans);letter-spacing:.3em;color:var(--bronze)}
.mk__body{display:grid;gap:.55rem;align-content:start}
.mk__name{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,1.2rem + 5vw,4.2rem);line-height:1;letter-spacing:-.025em;font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);-webkit-text-stroke:.2px currentColor}
.mk__tag{display:block;font:400 clamp(1rem,.95rem + .3vw,1.2rem)/1.4 var(--sans)}
.mk__prod{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .5rem;margin-top:.2rem}
.mk__prod .mk__ref-k{margin-right:.35rem}
.mk__chip{padding:.45rem .8rem;border:1px solid rgba(23,18,13,.32);border-radius:999px;font:500 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.mk__chip.is-main{background:var(--ink);border-color:var(--ink);color:#fff}
.mk__what,.mk__ref{display:block;max-width:44rem;font:400 .9rem/1.55 var(--sans);color:var(--pf-soft)}
.mk__ref-k{margin-right:.6rem;font:500 .75rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.mk__go{display:none}
@media (min-width:700px) and (not ((min-width:1000px) and (hover:hover) and (pointer:fine))){
  .mk__list{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3rem)}
}
/* En los diseños apilados el nombre se ajusta al ancho de su tarjeta: «Rehabilitación» no cabe a tamaño gigante en una columna estrecha */
@supports (width:1cqw){
  @media not ((min-width:1000px) and (hover:hover) and (pointer:fine)){
    .mk__item{container-type:inline-size}
    .mk__name{font-size:clamp(1.9rem,10.4cqw,4.2rem)}
  }
}

/* Escritorio con puntero: índice gigante a la izquierda y marco con foto a la derecha (cambia al apuntar o al enfocar) */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){
  .mk__list{--stage-w:clamp(17rem,28vw,31rem);position:relative;display:block;padding-right:calc(var(--stage-w) + clamp(2.5rem,6vw,7rem))}
  .mk__item{padding:0}
  .mk__item:last-child{border-bottom:1px solid var(--pf-line)}
  .mk__link{grid-template-columns:clamp(2.6rem,4vw,4.4rem) minmax(0,1fr) 3.25rem;column-gap:1.5rem;padding:clamp(1.5rem,3.2vh,2.5rem) 0}
  .mk__link:focus-visible{outline-offset:-3px}
  .mk__name{font-size:clamp(3rem,.75rem + 5.2vw,6.6rem);transition:opacity .7s var(--ease),transform .9s var(--ease)}
  .mk__go{display:grid;place-items:center;align-self:center;width:3rem;height:3rem;border:1px solid var(--pf-line);border-radius:50%;transition:background-color .5s,color .5s,border-color .5s,transform .7s var(--ease)}

  /* El marco: cada foto vive en su fila y se coloca en el mismo hueco; la activa se ve y se revela con un barrido */
  .mk__fig{position:absolute;right:0;top:50%;z-index:1;width:var(--stage-w);aspect-ratio:4 / 5;margin:0;overflow:visible;background:none;opacity:0;transform:translateY(calc(-50% + var(--dy,0px)));pointer-events:none;transition:opacity 0s linear 1.1s}
  .mk__fig::before{content:"";position:absolute;inset:1.1rem -1.1rem -1.1rem 1.1rem;z-index:-1;border:1px solid rgba(125,95,49,.5)}
  .mk__pic{position:absolute;inset:0;overflow:hidden;background:var(--c,#8b8378)}
  .mk__cap{left:auto;right:0;bottom:-2.6rem;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--pf-soft);letter-spacing:.2em}
  .mk__item.is-active .mk__fig,.mk__item:hover .mk__fig,.mk__item:focus-within .mk__fig{opacity:1;z-index:2;transition:none}
  .mk__item:hover .mk__fig,.mk__item:focus-within .mk__fig{z-index:3}
  .mk__item.is-active .mk__pic,.mk__item:hover .mk__pic,.mk__item:focus-within .mk__pic{animation:mk-wipe 1.1s var(--ease-io) both}
  .mk__item.is-active .mk__pic img,.mk__item:hover .mk__pic img,.mk__item:focus-within .mk__pic img{animation:mk-zoom 2s var(--ease) both}

  /* Con JavaScript, las filas no activas se atenúan */
  .mk__list.is-live .mk__item:not(.is-active):not(:hover):not(:focus-within) .mk__name{opacity:.62}
  .mk__body{transition:transform .9s var(--ease)}
  .mk__item.is-active .mk__body,.mk__item:hover .mk__body,.mk__item:focus-within .mk__body{transform:translateX(.6rem)}
  .mk__item.is-active .mk__num,.mk__item:hover .mk__num{color:var(--ink)}
  .mk__item.is-active .mk__go,.mk__item:hover .mk__go,.mk__item:focus-within .mk__go{background:var(--ink);border-color:var(--ink);color:#fff;transform:rotate(45deg)}
}
@keyframes mk-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mk-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}

/* ==========================================================================
   2 · EMPRESA — ficha como cajetín de plano
   ========================================================================== */
.co{background:var(--w1)}
.co__top{display:grid;gap:clamp(3rem,6vw,6rem)}
@media (min-width:1000px){.co__top{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:start}}
.co__intro{display:grid;gap:1.3rem;align-content:start;justify-items:start}
.co__intro .lx-title{max-width:15ch;font-size:clamp(2.2rem,1rem + 3.7vw,4rem)}
.co__lead{margin:0;max-width:34rem;font:400 clamp(1rem,.95rem + .3vw,1.18rem)/1.6 var(--sans)}
.co__lead--2{font-size:.95rem;color:var(--pf-soft)}
.co__ctas{display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;margin-top:.6rem}

.co__sheet{position:relative;background:#fffffe;border:1px solid rgba(23,18,13,.55);box-shadow:0 40px 70px -50px rgba(23,18,13,.4)}
/* Marcas de corte en las cuatro esquinas, como en un plano */
.co__sheet::before{content:"";position:absolute;inset:-12px;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0 / 16px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0 / 16px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100% / 16px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100% / 16px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100% / 1px 16px no-repeat}
.co__sheet-h{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.9rem 1.4rem;border-bottom:1px solid rgba(23,18,13,.55);background:repeating-linear-gradient(90deg,rgba(23,18,13,.05) 0 1px,transparent 1px 7px);font:500 .75rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase}
.co__sheet-h span:last-child{color:var(--bronze)}
.co__dl{margin:0}
.co__row{position:relative;display:grid;gap:.35rem 1.2rem;padding:.95rem 1.4rem}
.co__row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--pf-line);transform-origin:0 50%}
.co__row:first-child::before{display:none}
.co__row dt{padding-top:.3em;font:500 .75rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.co__row dd{margin:0;font:400 .95rem/1.55 var(--sans)}
@media (min-width:560px){.co__row{grid-template-columns:minmax(7.5rem,.34fr) 1fr}}
.co__stamp{display:none}
@media (min-width:760px){
  .co__stamp{display:block;position:absolute;right:-1.5rem;bottom:-2.4rem;width:7.6rem;height:7.6rem;padding:.2rem;border-radius:50%;background:rgba(254,253,251,.92);color:var(--bronze);transform:rotate(-12deg)}
}

.co__flowwrap{margin-top:clamp(4rem,9vh,7rem)}
.co__flowh{display:flex;align-items:center;gap:1rem;margin:0 0 2rem;font:500 .75rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.co__flowh::before{content:"";width:2.1rem;height:1px;background:currentColor}
.co__flow{position:relative;display:grid;gap:2.4rem;padding-left:2.4rem}
.co__flow::before{content:"";position:absolute;left:.4rem;top:.5rem;bottom:.5rem;width:1px;background:linear-gradient(180deg,var(--bronze),rgba(125,95,49,.2));transform-origin:50% 0}
.co__step{position:relative}
.co__step::before{content:"";position:absolute;left:-2.4rem;top:.6rem;width:.8rem;height:.8rem;border:1px solid var(--bronze);border-radius:50%;background:var(--w1)}
.co__n{display:block;font:500 clamp(2.6rem,1.6rem + 3vw,4.2rem)/1 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);color:rgba(125,95,49,.38)}
.co__sh{margin:.5rem 0 .6rem;font:500 clamp(1.3rem,1rem + .9vw,1.8rem)/1.15 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);letter-spacing:-.005em}
.co__st{margin:0;max-width:30rem;font:400 .92rem/1.6 var(--sans);color:var(--pf-soft)}
@media (min-width:800px){
  .co__flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);padding:2.6rem 0 0}
  .co__flow::before{left:0;right:0;top:.5rem;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,var(--bronze),rgba(125,95,49,.2));transform-origin:0 50%}
  .co__step::before{left:0;top:-2.6rem}
}
/* Coreografía: las líneas de la ficha y el recorrido se dibujan; el texto sube detrás */
.co__sheet[data-rv="pending"]{box-shadow:none}
.co__sheet[data-rv="pending"] .co__row::before{transform:scaleX(0)}
.co__sheet[data-rv="pending"] :is(.co__row dt,.co__row dd,.co__sheet-h){opacity:0;transform:translateY(.6rem)}
.co__sheet[data-rv="in"] .co__row::before{transition:transform 1.3s var(--ease-io) calc(var(--k,0) * 90ms + .2s)}
.co__sheet[data-rv="in"] :is(.co__row dt,.co__row dd){transition:opacity .9s var(--ease) calc(var(--k,0) * 90ms + .35s),transform 1s var(--ease) calc(var(--k,0) * 90ms + .35s)}
.co__flowwrap[data-rv="pending"] .co__flow::before{transform:scaleY(0)}
.co__flowwrap[data-rv="pending"] .co__step{opacity:0;transform:translateY(1.2rem)}
.co__flowwrap[data-rv="in"] .co__flow::before{transition:transform 1.8s var(--ease-io) .1s}
.co__flowwrap[data-rv="in"] .co__step{transition:opacity 1s var(--ease) calc(var(--k,0) * 220ms + .5s),transform 1.2s var(--ease) calc(var(--k,0) * 220ms + .5s)}
@media (min-width:800px){.co__flowwrap[data-rv="pending"] .co__flow::before{transform:scaleX(0)}}

/* ==========================================================================
   3 · CONOCIMIENTO — tres artículos y muestrario de maderas
   ========================================================================== */
.kn__head{display:grid;justify-items:center;gap:1.1rem;max-width:44rem;margin:0 auto clamp(3rem,7vh,5.5rem);text-align:center}
.kn__head .pf__eyebrow{justify-content:center}
.kn__intro{margin:0;max-width:34rem;font:400 clamp(.95rem,.9rem + .25vw,1.08rem)/1.58 var(--sans);color:var(--pf-soft);text-wrap:pretty}
.kn__essays{display:grid;border-top:1px solid var(--pf-line)}
.kn__item{display:flex}
.kn__essay{flex:1 1 auto}
.kn__essay{position:relative;display:grid;align-content:start;gap:.9rem;padding:2rem clamp(.2rem,2vw,2.2rem) 2.2rem;overflow:hidden;border-bottom:1px solid var(--pf-line);color:inherit;text-decoration:none;transition:background-color .7s var(--ease)}
.kn__essay:hover,.kn__essay:focus-visible{background:rgba(239,220,180,.16)}
.kn__essay:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* Numeral romano gigante: marca de agua que se mueve al apuntar */
.kn__roman{position:absolute;right:clamp(1rem,2vw,2rem);top:1.4rem;font:500 clamp(4.2rem,7vw,6.6rem)/1 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);letter-spacing:-.02em;color:rgba(125,95,49,.2);pointer-events:none;transition:transform 1.2s var(--ease),color .7s}
.kn__essay:hover .kn__roman{transform:translateY(.4rem);color:rgba(125,95,49,.45)}
.kn__kicker,.kn__etitle,.kn__lead,.kn__meta{position:relative}
.kn__kicker{font:500 .75rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.kn__etitle{max-width:19ch;margin-top:1.2rem;font:500 clamp(1.3rem,1rem + .95vw,1.85rem)/1.2 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);text-wrap:balance}
.kn__lead{max-width:32ch;font:400 .92rem/1.55 var(--sans);color:var(--pf-soft)}
.kn__meta{display:flex;align-items:center;gap:1rem;margin-top:.6rem;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pf-soft)}
.kn__go{display:grid;place-items:center;width:2.3rem;height:2.3rem;border:1px solid var(--pf-line);border-radius:50%;transition:background-color .5s,color .5s,border-color .5s,transform .7s var(--ease)}
.kn__essay:hover .kn__go,.kn__essay:focus-visible .kn__go{background:var(--ink);border-color:var(--ink);color:#fff;transform:translate(2px,-2px)}
@media (min-width:900px){
  .kn__essays{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kn__item+.kn__item .kn__essay{border-left:1px solid var(--pf-line)}
}

.kn__woodsh{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2rem;margin:clamp(4rem,9vh,7rem) 0 2.2rem}
.kn__h3{margin:0;font:500 clamp(1.7rem,1rem + 1.7vw,2.5rem)/1.1 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);letter-spacing:-.015em}
.kn__woodsp{margin:0;font:400 .95rem/1.5 var(--sans);color:var(--pf-soft)}
.kn__woods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem clamp(.8rem,1.6vw,1.6rem);align-items:end}
@media (min-width:900px){.kn__woods{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kn__wlink{display:block;color:inherit;text-decoration:none}
.kn__wlink:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* Muestras de madera: tono + veta con degradados; alturas desiguales, como en un expositor */
.kn__swatch{display:block;height:calc(var(--h) * .17rem);min-height:9rem;box-shadow:inset 0 0 0 1px rgba(23,18,13,.07);transition:transform .9s var(--ease),box-shadow .9s var(--ease);
  background:
    linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 32%,rgba(0,0,0,.16)),
    radial-gradient(ellipse 70% 55% at 32% 42%,rgba(60,32,10,.10),transparent 70%),
    repeating-linear-gradient(88deg,rgba(40,22,8,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(91.4deg,rgba(255,255,255,.09) 0 2px,transparent 2px 11px),
    var(--wc)}
.kn__wlink:hover .kn__swatch,.kn__wlink:focus-visible .kn__swatch{transform:translateY(-.8rem);box-shadow:inset 0 0 0 1px rgba(23,18,13,.07),0 28px 30px -22px rgba(23,18,13,.55)}
.kn__wname{display:block;margin-top:.95rem;font:500 clamp(1.3rem,1rem + .8vw,1.7rem)/1.1 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz)}
.kn__wgo{display:block;margin-top:.4rem;font:500 .75rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.kn__wgo span{display:inline-block;transition:transform .6s var(--ease)}
.kn__wlink:hover .kn__wgo span{transform:translateX(.35rem)}
.kn__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;margin-top:clamp(3.5rem,8vh,5.5rem);padding-top:1.8rem;border-top:1px solid var(--pf-line)}
.kn__topics{max-width:46rem;margin:0;font:400 .95rem/1.6 var(--sans);color:var(--pf-soft)}

/* ==========================================================================
   4 · CARPINTEK PROFESIONAL — panel oscuro con pestañas
   ========================================================================== */
.pro__grid{display:grid;gap:clamp(2.5rem,5vw,6rem);align-items:start}
@media (min-width:1000px){.pro__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.pro__intro{display:grid;gap:1.1rem;align-content:start}
.pro__sub{margin:0;max-width:30rem;font:400 clamp(1.05rem,.95rem + .4vw,1.3rem)/1.45 var(--sans)}
.pro__who-h{margin:2rem 0 .2rem;font:500 .75rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.pro__who{border-top:1px solid var(--pf-line)}
.pro__who-i{display:grid;gap:.2rem 1.2rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--pf-line)}
@media (min-width:560px){.pro__who-i{grid-template-columns:10.5rem 1fr}}
.pro__who-k{font:500 clamp(1.15rem,1rem + .4vw,1.4rem)/1.2 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz)}
.pro__who-v{font:400 .9rem/1.5 var(--sans);color:var(--pf-soft)}

.pro__panel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.2rem,2.6vw,2.4rem);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fcfbf8;
  background:radial-gradient(120% 90% at 100% 0%,rgba(239,220,180,.15),transparent 55%),linear-gradient(165deg,#251d15 0%,#17120d 55%,#120e0a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 60px 90px -55px rgba(23,18,13,.7)}
.pro__panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 8px);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.pro__panel :focus-visible{outline-color:#fcfbf8}
.pro__tabs{position:relative;isolation:isolate;display:flex;max-width:100%;padding:3px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.05);overflow-x:auto;scrollbar-width:none}
.pro__tabs::-webkit-scrollbar{display:none}
.pro__tabs[hidden]{display:none}
.pro__tabs{width:fit-content}
.pro__ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:999px;background:#fbf9f5;box-shadow:0 8px 18px -8px rgba(0,0,0,.55);transition:transform .9s var(--ease),width .9s var(--ease)}
.pro__tab{position:relative;z-index:1;flex:none;min-height:2.75rem;padding:0 1.25rem;border:0;border-radius:999px;background:none;color:#fcfbf8;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color .6s var(--ease)}
.pro__tab[aria-selected="true"]{color:var(--ink)}
/* Etiquetas de las pestañas: completas si caben; abreviadas (Ventanas · Mamparas · Contract) cuando el panel mide menos de 47 rem, medido sobre el propio panel y no sobre la ventana */
.pro__panel{container-type:inline-size}
.pro__tl{display:inline}.pro__ts{display:none}
@container (max-width:47rem){.pro__tl{display:none}.pro__ts{display:inline}}
@media (max-width:559.98px){.pro__tab{padding:0 .7rem;letter-spacing:.1em}.pro__tabs{width:100%}.pro__tab{flex:1 1 auto}}
@media (max-width:399.98px){.pro__tab{padding:0 .5rem;letter-spacing:.08em}}
/* Móviles muy estrechos (≤ 359 px): las pestañas se parten en dos filas y la píldora activa va en la propia pestaña */
@media (max-width:359.98px){.pro__tabs{flex-wrap:wrap;border-radius:22px}.pro__ind{display:none}.pro__tab{flex:1 1 40%}.pro__tab[aria-selected="true"]{background:#fbf9f5}}
.pro__view{margin-top:1.8rem}
.pro__view[hidden]{display:none}
.pro__vh{margin:0 0 .8rem;font:500 clamp(1.7rem,1.1rem + 1.5vw,2.4rem)/1.1 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);letter-spacing:-.01em}
.pro__docs{border-top:1px solid rgba(255,255,255,.18)}
.pro__doc{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem .2rem;border-bottom:1px solid rgba(255,255,255,.14);transition:background-color .5s var(--ease),padding-left .6s var(--ease)}
.pro__doc:hover{padding-left:.8rem;background:rgba(255,255,255,.05)}
.pro__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:var(--champ)}
.pro__dn{display:block;font:500 1rem/1.3 var(--sans)}
.pro__dd{display:block;margin-top:.2rem;font:400 .875rem/1.45 var(--sans);color:rgba(252,251,248,.8)}
.pro__lock{display:grid;place-items:center;color:rgba(252,251,248,.72)}
.pro__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem 2rem;margin-top:1.9rem}
.pro__note{margin:0;font:400 .875rem/1.5 var(--sans);color:rgba(252,251,248,.82)}
.pro__btns{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.8rem}
.pro__btn{display:inline-flex;align-items:center;gap:.9rem;min-height:2.9rem;padding:0 .65rem 0 1.4rem;border-radius:999px;background:var(--champ);color:var(--ink);font:500 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background-color .5s,transform .6s var(--ease)}
.pro__btn:hover{background:#f6e8c8}
.pro__btn-a{display:grid;place-items:center;width:1.95rem;height:1.95rem;border-radius:50%;background:var(--ink);color:var(--champ);transition:transform .6s var(--ease)}
.pro__btn:hover .pro__btn-a{transform:translate(2px,-2px)}
.pro__link{display:inline-flex;align-items:center;min-height:2.75rem;color:#fcfbf8;font:500 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .7rem) / 100% 1px no-repeat;opacity:.9}
.pro__link:hover{opacity:1}

/* ==========================================================================
   5 · PRESUPUESTADOR — MAQUETA decorativa (no funciona; la herramienta aún no existe)
   ========================================================================== */
.est{background:var(--w1);overflow:hidden}
.est::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(23,18,13,.05) 1px,transparent 1px) 0 0 / 100% 3.2rem,linear-gradient(90deg,rgba(23,18,13,.05) 1px,transparent 1px) 0 0 / 3.2rem 100%;
  -webkit-mask-image:radial-gradient(72% 72% at 72% 50%,#000,transparent);mask-image:radial-gradient(72% 72% at 72% 50%,#000,transparent)}
.est__grid{position:relative;display:grid;gap:clamp(3rem,5vw,5rem);align-items:center}
.est__grid>*,.est__cols>*{min-width:0}
@media (min-width:1000px){.est__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.est__intro{display:grid;gap:1.25rem;justify-items:start}
.est__lead{margin:0;max-width:30rem;font:400 clamp(.95rem,.9rem + .25vw,1.1rem)/1.6 var(--sans);color:var(--pf-soft)}
.est__soon{display:inline-flex;align-items:center;gap:.7rem;margin:0;font:500 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.est__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--bronze)}
.est__card{position:relative;padding:clamp(1.2rem,2.4vw,2.2rem);border:1px solid rgba(23,18,13,.14);border-radius:8px;background:#fffffe;box-shadow:0 50px 90px -50px rgba(23,18,13,.38);user-select:none;pointer-events:none}
.est__badge{position:absolute;right:1.2rem;top:-.85rem;padding:.45rem .95rem;border-radius:999px;background:var(--champ);color:var(--ink);font:500 .75rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.est__steps{display:flex;flex-wrap:wrap;gap:0 1.6rem;margin-bottom:1.4rem;border-bottom:1px solid var(--pf-line);font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(23,18,13,.68)}
.est__steps span{padding-bottom:.85rem;margin-bottom:-1px;border-bottom:1px solid transparent}
.est__steps .is-on{color:var(--ink);border-bottom-color:var(--bronze)}
/* Móvil: los cuatro pasos caben en una línea; en pantallas muy estrechas se parten en dos filas sin solaparse */
@media (max-width:559.98px){.est__steps{gap:0 .8rem;font-size:.75rem;letter-spacing:.12em}}
.est__cols{display:grid;gap:1.8rem 2.4rem}
@media (min-width:760px){.est__cols{grid-template-columns:1.15fr .85fr}}
.est__q{margin:1.3rem 0 .75rem;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.est__q:first-child{margin-top:0}
.est__q b{margin-right:.6rem;color:var(--bronze);font-weight:500}
.est__chips,.est__checks{display:flex;flex-wrap:wrap;gap:.5rem}
.est__chip,.est__ck{padding:.62rem 1rem;border:1px solid rgba(23,18,13,.24);border-radius:999px;font:500 .75rem/1 var(--sans);letter-spacing:.1em}
.est__chip:first-child,.est__ck.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.est__slider{display:grid;grid-template-columns:5.2rem minmax(0,1fr);align-items:center;gap:1rem;margin-top:.9rem}
.est__sl-k{font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pf-soft)}
.est__track{position:relative;display:block;height:2px;background:rgba(23,18,13,.16)}
.est__track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--kx,40%);background:linear-gradient(90deg,var(--champ),var(--bronze))}
.est__knob{position:absolute;left:var(--kx,40%);top:50%;width:1.05rem;height:1.05rem;margin:-.525rem 0 0 -.525rem;border:1.5px solid var(--bronze);border-radius:50%;background:#fff;box-shadow:0 4px 10px -4px rgba(23,18,13,.5)}
.est__track{--kx:42%}.est__track--b{--kx:64%}
.est__result{align-self:start;padding:1.5rem;border:1px solid var(--pf-line);border-radius:6px;background:linear-gradient(180deg,#fbf8f1,#f6f1e6)}
.est__rk{margin:0;font:500 .75rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.est__nums{display:flex;align-items:center;gap:.6rem;margin:1rem 0 1.8rem;font:500 clamp(1.8rem,1.2rem + 1.6vw,2.6rem)/1 var(--serif)}
.est__sk{display:inline-block;width:var(--w);height:.82em;vertical-align:-.1em;border-radius:3px;background:linear-gradient(90deg,#ebe5d8 0%,#f8f4eb 50%,#ebe5d8 100%) 0 0 / 200% 100%}
.est__incl .est__sk{height:.9em}
.est__dash{color:rgba(23,18,13,.4)}
.est__range{position:relative;height:2px;margin:1.5rem 0 .9rem;background:rgba(23,18,13,.16)}
.est__fill{position:absolute;top:-1px;height:4px;left:var(--ra);right:calc(100% - var(--rb));border-radius:2px;background:linear-gradient(90deg,var(--champ),var(--bronze))}
.est__h{position:absolute;top:50%;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border:1.5px solid var(--bronze);border-radius:50%;background:#fff;box-shadow:0 4px 10px -4px rgba(23,18,13,.5)}
.est__h--a{left:var(--ra)}.est__h--b{left:var(--rb)}
.est__rl{display:flex;justify-content:space-between;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--pf-soft)}
.est__incl{margin:1.5rem 0 1.3rem;font:400 .875rem/1.5 var(--sans);color:var(--pf-soft)}
.est__fake{display:inline-flex;align-items:center;min-height:2.6rem;padding:0 1.4rem;border-radius:999px;background:var(--ink);color:#fff;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
/* Demostración en bucle (solo con movimiento permitido y mientras la tarjeta está a la vista) */
@media (prefers-reduced-motion:no-preference){
  .est__card.is-live{animation:est-r 12s ease-in-out infinite}
  .est__card.is-live .est__chip{animation:est-chip 12s steps(1,end) infinite;animation-delay:calc(var(--d) * 3s)}
  .est__card.is-live .est__sk{animation:est-sh 2.4s linear infinite}
  .est__card.is-live .est__track{animation:est-k 12s ease-in-out infinite}
  .est__card.is-live .est__track--b{animation-delay:-4s}
  .est__card.is-live .est__dot{animation:est-pulse 2.4s ease-out infinite}
}
@keyframes est-r{0%,20%{--ra:18%;--rb:46%}25%,45%{--ra:32%;--rb:70%}50%,70%{--ra:12%;--rb:34%}75%,95%{--ra:40%;--rb:82%}100%{--ra:18%;--rb:46%}}
@keyframes est-chip{0%,24.9%{border-color:var(--ink);background:var(--ink);color:#fff}25%,100%{border-color:rgba(23,18,13,.24);background:transparent;color:var(--ink)}}
@keyframes est-sh{to{background-position:-200% 0}}
@keyframes est-k{0%,100%{--kx:42%}33%{--kx:68%}66%{--kx:30%}}
@keyframes est-pulse{0%{box-shadow:0 0 0 0 rgba(125,95,49,.5)}100%{box-shadow:0 0 0 .8rem rgba(125,95,49,0)}}

/* ==========================================================================
   6 · CONTACTO — titular a gran escala y tres vías
   ========================================================================== */
.cn__title{margin:0 0 clamp(2.5rem,6vh,4.5rem);font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,1rem + 10.4vw,11.5rem);line-height:.94;letter-spacing:-.035em;font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);-webkit-text-stroke:.3px currentColor}
.cn__l{display:block;overflow:hidden;padding:.06em 0 .1em}
.cn__l>span{display:block}
.cn__title i{font-style:normal;color:var(--bronze)}
.cn__grid{display:grid;gap:2.6rem clamp(2rem,5vw,6rem)}
@media (min-width:1000px){.cn__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.8fr);align-items:start}}
.cn__lead{margin:0;max-width:26rem;font:400 clamp(1rem,.95rem + .3vw,1.15rem)/1.6 var(--sans)}
.cn__ways{border-top:1px solid rgba(23,18,13,.55)}
.cn__way{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;padding:1.35rem 0;overflow:hidden;border-bottom:1px solid var(--pf-line);color:inherit;text-decoration:none}
.cn__way::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.cn__way:hover::after,.cn__way:focus-visible::after{transform:scaleX(1)}
.cn__way:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cn__k{grid-column:1 / -1;font:500 .75rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.cn__v{overflow-wrap:anywhere;font:500 clamp(1.3rem,1rem + 1.3vw,2.2rem)/1.15 var(--serif);font-optical-sizing:none;font-variation-settings:"opsz" var(--serif-opsz);-webkit-text-stroke:.3px currentColor;transition:transform .8s var(--ease)}
.cn__way:hover .cn__v{transform:translateX(.6rem)}
.cn__go{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--pf-line);border-radius:50%;transition:background-color .5s,color .5s,border-color .5s,transform .7s var(--ease)}
.cn__way:hover .cn__go,.cn__way:focus-visible .cn__go{background:var(--ink);border-color:var(--ink);color:#fff;transform:translate(2px,-2px)}
.cn__addr{display:grid;gap:.5rem;justify-items:start;font-style:normal}
.cn__addr .cn__k{margin-top:.8rem}.cn__addr .cn__k:first-child{margin-top:0}
.cn__at{margin:0;font:400 .98rem/1.6 var(--sans)}
.cn__addr .pf__all{margin-top:.8rem}
/* Coreografía: cada línea del titular sube desde una máscara */
.cn__title[data-rv="pending"] .cn__l>span{transform:translateY(108%)}
.cn__title[data-rv="in"] .cn__l>span{transition:transform 1.5s var(--ease) calc(var(--ln,0) * 160ms)}
.cn__l:nth-child(2){--ln:1}

/* ==========================================================================
   7 · PIE — plano de sitio y marca de agua acanalada
   ========================================================================== */
.ftr{position:relative;overflow:hidden;padding:clamp(4rem,9vh,7rem) 0 0;border-top:1px solid var(--pf-line);background:var(--w1)}
.ftr__top{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media (min-width:1000px){.ftr__top{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}}
.ftr__brand{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ink);font:500 clamp(.95rem,.86rem + .35vw,1.15rem)/1 var(--sans);letter-spacing:.52em;text-transform:uppercase;text-decoration:none}
.ftr__tag{max-width:25rem;margin:1rem 0 1.4rem;font:400 1rem/1.5 var(--sans);color:var(--pf-soft)}
.ftr__addr{display:grid;gap:.25rem;font:400 .92rem/1.6 var(--sans);font-style:normal;color:var(--pf-soft)}
.ftr__addr a{width:fit-content;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s}
.ftr__addr a:hover,.ftr__addr a:focus-visible{border-color:var(--ink)}
.ftr__soc{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin-top:1.2rem}
.ftr__soc a,.ftr__legal a,.ftr__lang a,.ftr__up{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ink);text-decoration:none}
.ftr__soc a{font:500 .75rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .7rem) / 0 1px no-repeat;transition:background-size .6s var(--ease)}
.ftr__soc a:hover,.ftr__soc a:focus-visible{background-size:100% 1px}
.ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.5rem}
@media (min-width:700px){.ftr__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ftr__h{margin:0 0 .9rem;font:500 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.ftr__col a{display:inline-flex;align-items:center;min-height:2.5rem;color:var(--ink);font:400 .95rem/1.3 var(--sans);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .5rem) / 0 1px no-repeat;transition:background-size .6s var(--ease)}
.ftr__col a:hover,.ftr__col a:focus-visible{background-size:100% 1px}
.ftr__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2rem;margin-top:clamp(3rem,7vh,5rem);padding:.8rem 0;border-top:1px solid var(--pf-line);font:400 .8125rem/1.5 var(--sans);color:var(--pf-soft)}
.ftr__copy{margin:0}
/* Colofón (protocolo de C6N): «Notas de desarrollo · Desarrollado por c6n». Una línea discreta bajo la barra legal, con la misma tipografía que los enlaces legales */
.ftr__colo{display:flex;flex-wrap:wrap;align-items:center;gap:0 .7rem;margin:0;padding:0 0 1.2rem;font:400 .8125rem/1.5 var(--sans);color:var(--pf-soft)}
.ftr__colo a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--pf-soft);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .8rem) / 0 1px no-repeat;transition:background-size .6s var(--ease),color .4s}
.ftr__colo a:hover,.ftr__colo a:focus-visible{color:var(--ink);background-size:100% 1px}
.ftr__dot{opacity:.6}
.ftr__legal,.ftr__lang{display:flex;flex-wrap:wrap;gap:0 1.4rem}
.ftr__legal a{font-size:.8125rem}
.ftr__lang a{min-width:2.4rem;justify-content:center;font:500 .75rem/1 var(--sans);letter-spacing:.18em}
.ftr__lang a[aria-current]{box-shadow:0 1px 0 var(--ink)}
.ftr__up{gap:.8rem;font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.ftr__up-a{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid var(--pf-line);border-radius:50%;transform:rotate(-45deg);transition:background-color .5s,color .5s,transform .6s var(--ease)}
.ftr__up:hover .ftr__up-a{background:var(--ink);color:#fff;transform:rotate(-45deg) translateX(3px)}
/* Marca de agua: el nombre a todo el ancho, visto a través de vidrio acanalado y recortado por el pie de la página */
.ftr__mark{margin:clamp(1.5rem,4vh,3rem) 0 0;text-align:center;white-space:nowrap;text-transform:uppercase;user-select:none;
  font:500 clamp(2.4rem,14.6vw,26rem)/.78 var(--sans);letter-spacing:.12em;text-indent:.12em;transform:translateY(17%);
  background:repeating-linear-gradient(90deg,rgba(23,18,13,.18) 0 2px,rgba(23,18,13,.035) 2px 5px);-webkit-background-clip:text;background-clip:text;color:transparent}
.ftr__mark[data-rv="pending"]{transform:translateY(60%)}
.ftr__mark[data-rv="in"]{transition:transform 1.8s var(--ease)}
.ftr :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Movimiento reducido: sin aparición ni animaciones */
@media (prefers-reduced-motion:reduce){
  .lx *,.lx *::before,.lx *::after,.ftr *,.ftr *::before,.ftr *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}