/* Víctor Ávila · MÓDULOS DINÁMICOS (01/10). Mismo lenguaje del diseño (Outfit/Manrope, monocromo, líneas finas, sin cajas).
   Se activan con una clase en la SECCIÓN (campo «Clases CSS» del contenedor en Elementor); modules.js añade el movimiento.
   Sin JS o con movimiento reducido todo queda visible y legible. Solo transform/opacity → sin CLS. */

/* ---------- 1 · mod-sticky: título fijo + fases que se encienden ---------- */
.mod-sticky .grid-side{align-items:start}
@media (min-width:1101px){
  .mod-sticky .grid-side>.stack{position:sticky;top:clamp(110px,16vh,150px)}
  .mod-sticky .steps{position:relative;padding-left:28px}
  .mod-sticky .steps::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
  .mod-sticky .steps::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--fg);transform-origin:top;transform:scaleY(var(--p,0))}
  /* se atenúan los HIJOS: el revelado escalonado deja opacity:1 en línea sobre cada .step */
  .js-mods .mod-sticky .step .n,.js-mods .mod-sticky .step>.e-con{opacity:.4;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
  .js-mods .mod-sticky .step.is-on .n,.js-mods .mod-sticky .step.is-on>.e-con{opacity:1}
  .mod-sticky .sticky-count{display:flex;align-items:baseline;gap:10px;margin-top:28px;font-family:var(--va-display);font-weight:200;letter-spacing:-.03em;color:var(--fg)}
  .mod-sticky .sticky-count b{font-weight:200;font-size:clamp(64px,6vw,96px);line-height:1;font-variant-numeric:tabular-nums}
  .mod-sticky .sticky-count span{font-size:14px;letter-spacing:.2em;color:var(--fg4)}
}
.mod-sticky .sticky-count{display:none}
@media (min-width:1101px){.mod-sticky .sticky-count{display:flex}}

/* ---------- 2 · mod-rows: servicios en filas a todo el ancho ---------- */
.mod-rows .list{grid-template-columns:1fr;gap:0}
.mod-rows .list .item{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.15fr) 40px;align-items:baseline;gap:24px;padding:30px 0;border-top:1px solid var(--line);position:relative;isolation:isolate}
.mod-rows .list .item:last-child{border-bottom:1px solid var(--line)}
/* colocación por clase (no por orden): hay listas sin número y con descripción en el contenedor del widget */
.mod-rows .list .item .n{grid-column:1;grid-row:1}
.mod-rows .list .item .t{grid-column:2;grid-row:1}
.mod-rows .list .item .d,.mod-rows .list .item>.elementor-widget-text-editor>.elementor-widget-container{grid-column:3;grid-row:1}
.mod-rows .list .item:not(:has(.n)) .t{grid-column:1 / 3}
.mod-rows .list .item .t{font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.015em;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mod-rows .list .item .d{margin:0;font-size:15px;line-height:1.6;color:var(--fg3)}
.mod-rows .list .item::before{content:"";position:absolute;inset:0 calc(-1 * var(--gutter));z-index:-1;background:var(--fg);opacity:.045;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.mod-rows .list .item::after{content:"→";grid-column:4;justify-self:end;font-family:var(--va-display);font-size:22px;color:var(--fg3);transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
@media (hover:hover){
  .mod-rows .list .item:hover::before{transform:scaleX(1)}
  .mod-rows .list .item:hover .t{transform:translateX(10px)}
  .mod-rows .list .item:hover::after{transform:translateX(6px);color:var(--fg)}
}
@media (max-width:820px){
  .mod-rows .list .item{grid-template-columns:44px minmax(0,1fr);gap:6px 16px;padding:22px 0}
  .mod-rows .list .item .d,.mod-rows .list .item>.elementor-widget-text-editor>.elementor-widget-container{grid-column:2;grid-row:2}
  .mod-rows .list .item:not(:has(.n)) .t,.mod-rows .list .item:not(:has(.n)) .d,.mod-rows .list .item:not(:has(.n))>.elementor-widget-text-editor>.elementor-widget-container{grid-column:1 / 3}
  .mod-rows .list .item::after{display:none}
}
/* 05/10 · varias descripciones en una fila (párrafo + lista, párrafo + enlace): se apilan en su columna en vez de pisarse */
.mod-rows .list .item{row-gap:0}
.mod-rows .list .item .n,.mod-rows .list .item .t{grid-row:1 / span 6}
.mod-rows .list .item .d,.mod-rows .list .item>.elementor-widget-text-editor>.elementor-widget-container{grid-row:auto}
.mod-rows .list .item>.elementor-widget-text-editor~.elementor-widget-text-editor>.elementor-widget-container{margin-top:10px}
.mod-rows .list .item::after{grid-row:1}
@media (max-width:820px){
  .mod-rows .list .item{row-gap:6px}
  .mod-rows .list .item .t{grid-row:1}
  .mod-rows .list .item>.elementor-widget-text-editor~.elementor-widget-text-editor>.elementor-widget-container{margin-top:0}
}

/* ---------- 3 · mod-tabs: estrategia en pestañas (escritorio); acordeón en móvil ---------- */
@media (min-width:1101px){
  .mod-tabs .acc.is-tabs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);column-gap:clamp(48px,6vw,96px);align-items:start;border-top:0}
  .mod-tabs .acc.is-tabs .acc-item{display:contents}
  .mod-tabs .acc.is-tabs .acc-btn{grid-column:1;min-height:0;padding:22px 0;border-top:1px solid var(--line);color:var(--fg3);transition:color .35s,padding-left .5s cubic-bezier(.16,1,.3,1);text-align:left}
  .mod-tabs .acc.is-tabs .acc-btn svg{display:none}
  .mod-tabs .acc.is-tabs .acc-btn::after{content:"";width:28px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);flex:none}
  .mod-tabs .acc.is-tabs .acc-item.on>.acc-btn{color:var(--fg);padding-left:14px}
  .mod-tabs .acc.is-tabs .acc-item.on>.acc-btn::after{transform:scaleX(1)}
  .mod-tabs .acc.is-tabs .acc-btn{align-self:start}
  /* paneles en posición absoluta dentro de su área (columna 2): no reparten su alto entre las filas de los títulos */
  .mod-tabs .acc.is-tabs{position:relative}
  .mod-tabs .acc.is-tabs .acc-panel{position:absolute;inset:0 0 auto 0;grid-column:2;height:auto!important;overflow:visible;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1),visibility 0s .45s;padding-top:22px}
  .mod-tabs .acc.is-tabs .acc-item.on>.acc-panel{opacity:1;visibility:visible;transform:none;transition:opacity .5s .08s,transform .7s .08s cubic-bezier(.16,1,.3,1),visibility 0s}
  .mod-tabs .acc.is-tabs .acc-panel p,.mod-tabs .acc.is-tabs .acc-panel li{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--fg2)}
  .mod-tabs .acc.is-tabs .tab-n{display:block;font-family:var(--va-display);font-weight:200;font-size:clamp(72px,7vw,112px);line-height:1;letter-spacing:-.04em;color:var(--fg4);margin-bottom:24px}
}

/* ---------- 4 · mod-hscroll: carrusel horizontal anclado al scroll ---------- */
.mod-hscroll{overflow:hidden}
.mod-hscroll .list{display:flex;gap:0;width:max-content}
.mod-hscroll .list .item{flex:0 0 clamp(280px,26vw,380px);padding:28px 40px 28px 0;margin-right:40px;border-top:1px solid var(--line)}
.mod-hscroll .list .item .t{font-size:clamp(22px,2vw,28px);line-height:1.2}
.mod-hscroll .hs-bar{position:relative;height:1px;margin-top:48px;background:var(--line)}
.mod-hscroll .hs-bar i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:1100px){
  .mod-hscroll .hs-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .mod-hscroll .hs-viewport::-webkit-scrollbar{display:none}
  .mod-hscroll .list .item{flex-basis:78vw;scroll-snap-align:start}
  .mod-hscroll .hs-bar{display:none}
}

/* ---------- 5 · mod-statement: frase protagonista que se rellena con el scroll ---------- */
.mod-statement .grid-side{grid-template-columns:1fr;gap:clamp(28px,3vw,44px)}
.mod-statement .grid-side>.stack{max-width:760px}
.mod-statement .mw720{max-width:900px}
.mod-statement .grid-side .lead,.mod-statement .lead.fill{font-family:var(--va-display);font-weight:300;font-size:clamp(19px,1.65vw,25px)!important;line-height:1.45!important;letter-spacing:-.02em;color:var(--fg)}
.mod-statement .more-body{max-width:760px}
.js-mods .fill .fw{color:var(--fg4);transition:color .25s}
.js-mods .fill .fw.on{color:var(--fg)}

/* ---------- 6 · globales ---------- */
/* parallax dentro de las fotos a sangre: margen para que el desplazamiento no deje bordes */
.js-mods .bleed-media img{height:116%!important;top:-8%;position:relative}
/* botones magnéticos (solo ratón) */
@media (hover:hover){.js-mods .btn-solid,.js-mods .btn-ghost{will-change:transform}}

@media (prefers-reduced-motion:reduce){
  .js-mods .mod-sticky .step .n,.js-mods .mod-sticky .step>.e-con{opacity:1}
  .js-mods .fill .fw{color:inherit}
  .js-mods .bleed-media img{height:100%!important;top:0}
}
/* en filas, la flecha la pone la fila (no el título) */
.mod-rows .list .item .t svg{display:none}

/* ---------- 7 · mod-quote: cita protagonista que se rellena con el scroll (sin caja, sin borde) ---------- */
.mod-quote .quote,.mod-quote .quote p{font-family:var(--va-display);font-weight:300;font-size:clamp(22px,2.2vw,32px)!important;line-height:1.35!important;letter-spacing:-.015em;border:0!important;padding:0!important}

/* ---------- 8 · mod-split: texto a la izquierda, claves numeradas a ancho completo debajo ---------- */
.mod-split .split-list{margin-top:clamp(40px,4vw,64px)}
/* filas sin descripción: el título ocupa también su columna */
.mod-rows .list .item:not(:has(.d)) .t{grid-column:2 / 4}
@media (max-width:820px){.mod-rows .list .item:not(:has(.d)) .t{grid-column:2}.mod-rows .list .item:not(:has(.n)):not(:has(.d)) .t{grid-column:1 / 3}}