/* Vibeth · amigable.css — capa visual "suave y amigable" (se carga DESPUÉS de styles.css).
   Mantiene todos los nombres de variables y la estructura; cambia tipografía, formas, sombras y movimiento.
   Familia de formas (una sola regla): botones, chips y pestañas = píldora; tarjetas y bandas = 28 px; campos = 16 px.
   Fuentes: Outfit (títulos) y Nunito (texto), autoalojadas, SIL OFL. Movimiento: tokens de transitions.dev. */

@font-face{font-family:"Outfit";src:url("fonts/outfit-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito-var.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --font-display:"Outfit","Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --font-sans:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --font-mono:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  /* una escala de formas */
  --r-xs:12px;--r-sm:16px;--r-md:22px;--r-lg:28px;
  /* sombras suaves, tintadas al azul-tinta (nada de negro puro) */
  --shadow-soft:0 1px 2px rgba(27,35,48,.05),0 14px 34px -14px rgba(52,66,155,.28);
  --shadow-pop:0 2px 4px rgba(27,35,48,.06),0 22px 44px -16px rgba(52,66,155,.38);
  --shadow-print:var(--shadow-soft);--shadow-print-sm:var(--shadow-soft);
  --lift:cubic-bezier(.34,1.36,.64,1);       /* resorte corto (transitions.dev: ease-bounce) */
  --glide:cubic-bezier(.22,1,.36,1);          /* salida suave (ease-smooth-out) */
  --bd-soft:#6B7686;                          /* contorno de controles: 4.5:1 sobre papel */
}
body{font-family:var(--font-sans);font-size:1.0625rem;line-height:1.6;letter-spacing:0}
h1,h2,h3,h4,b,strong,th{font-family:var(--font-display);font-stretch:100%}
b,strong{font-family:var(--font-sans);font-weight:800}

/* ---------- etiquetas: de "cartel técnico" a chips amables ---------- */
.sec-label{display:inline-flex;align-self:flex-start;border-top:0;padding:6px 16px 6px 12px;gap:10px;width:max-content;max-width:100%;
  background:var(--p-celeste,#AEF0FF);color:var(--ink);border-radius:var(--r-pill);font:800 .9375rem/1.2 var(--font-sans);letter-spacing:0;text-transform:none;align-items:center}
.sec-label b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:var(--r-pill);background:var(--white);color:var(--teal-deep);font:800 .875rem/1 var(--font-display)}
.on-dark .sec-label{background:rgba(255,255,255,.14);color:var(--white)}
.on-dark .sec-label b{background:var(--turquesa,#1CDDDA);color:var(--ink)}
.on-peach .sec-label,.on-yellow .sec-label{background:var(--white)}
.on-sky .sec-label{background:var(--white)}
.tag{font:800 .9375rem/1 var(--font-sans);letter-spacing:0;text-transform:none;padding:6px 14px;min-height:32px}
.tag::before{background:var(--teal-deep)}
.tag-outline{font:800 .875rem/1 var(--font-sans);letter-spacing:0;text-transform:none;border-radius:var(--r-pill);padding:4px 12px;border-color:var(--bd-soft)}
.specs dt,.mat-q,.t-label,.spec dt,.fig-cap,.fig-t,.scrub-l,.scrub-o,.scrub-hint,.masthead,.ticket-h,.ticket dt,.mats-legend,.cajetin dt,.caj-grid dt,.fmt-code small{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.ticket-h{font-weight:800}

/* ---------- títulos: redondos, cálidos, con aire ---------- */
.h2{font-weight:700;font-size:clamp(2rem,8.4vw,2.6rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.why-statement{font-size:clamp(2.1rem,8.6vw,2.9rem)}
.hero-title{font-weight:800;font-size:calc(var(--fs-h1) * .74);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.hero-title .row,.hero-title .l{white-space:normal}
.brand-word{font-weight:800;font-size:1.65rem;letter-spacing:-.03em}
.why-item h3,.step h3,.tile h3,.mat-code,.cta-h,.foot-mark,.q-head h1,.fmt-code{font-weight:800;line-height:1.02;letter-spacing:-.03em}
.why-item h3{font-size:1.4rem}
.tile h3{font-size:1.65rem;line-height:1.04}
.t-big h3{font-size:2.1rem}
.mat-code{font-size:clamp(3rem,14vw,3.75rem);line-height:.95}
.hl{border-radius:.22em}
.why-statement em{background:linear-gradient(180deg,transparent 58%,var(--rosa) 58% 92%,transparent 92%);border-radius:.15em}

/* ---------- botones: táctiles, con resorte ---------- */
.btn{--btn-bd:transparent;border:0;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.005em;
  box-shadow:0 4px 0 rgba(10,95,99,.30),0 14px 26px -12px rgba(28,221,218,.75);
  transition:transform .28s var(--lift),box-shadow .28s var(--glide),background-color .2s var(--glide);will-change:transform}
.btn:not([disabled]):not([aria-disabled="true"]):hover{transform:translateY(-3px) scale(1.015);box-shadow:0 7px 0 rgba(10,95,99,.30),0 20px 30px -12px rgba(28,221,218,.8)}
.btn:not([disabled]):not([aria-disabled="true"]):active{transform:translateY(2px) scale(.99);box-shadow:0 1px 0 rgba(10,95,99,.30),0 6px 12px -8px rgba(28,221,218,.7)}
.btn-ico{transition:transform .35s var(--lift)}
.btn:hover .btn-ico{transform:rotate(-8deg) scale(1.08)}
.btn-ghost{--btn-bg:var(--white);border:1.5px solid var(--bd-soft);box-shadow:0 3px 0 rgba(27,35,48,.10),0 10px 20px -14px rgba(52,66,155,.35)}
.btn-ghost:not([disabled]):not([aria-disabled="true"]):hover{--btn-bg:var(--turq-suave,#D3F8F7);box-shadow:0 6px 0 rgba(27,35,48,.10),0 16px 24px -14px rgba(52,66,155,.4)}
.link-cta .circ{transition:transform .35s var(--lift)}
.link-cta:hover .circ{transform:translateX(4px) rotate(-6deg)}

/* ---------- encabezado ---------- */
.site-header{border-bottom:0;box-shadow:0 1px 0 var(--line),0 12px 30px -24px rgba(52,66,155,.5)}
.nav-link{border-radius:var(--r-pill);padding-inline:14px;font-weight:700;transition:background-color .2s var(--glide),transform .25s var(--lift)}
.nav-link:hover{background:var(--turq-suave,#D3F8F7);transform:translateY(-1px)}
.nav-link::after{display:none}
.nav-link[aria-current]{background:var(--p-celeste,#AEF0FF)}

/* ---------- héroe: manchas pastel y una ilustración que "respira" ---------- */
.hero{position:relative;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
.hero::before{width:min(62vw,520px);aspect-ratio:1;right:-12vw;top:-8%;background:radial-gradient(circle at 35% 35%,var(--p-celeste,#AEF0FF),transparent 68%)}
.hero::after{width:min(46vw,380px);aspect-ratio:1;left:-10vw;bottom:2%;background:radial-gradient(circle at 60% 40%,var(--p-rosa-suave,#FFB8D2),transparent 70%);opacity:.7}
.kicker .tag{box-shadow:0 6px 14px -8px rgba(255,100,180,.8)}
.fig-tile{border:0;border-radius:36px;box-shadow:var(--shadow-pop)}
@media (min-width:900px){
  .fig-tile{transform:rotate(1.2deg);transition:transform .6s var(--lift),box-shadow .4s var(--glide)}
  .hero-fig:hover .fig-tile{transform:rotate(0) translateY(-4px);box-shadow:0 2px 4px rgba(27,35,48,.06),0 30px 56px -18px rgba(52,66,155,.45)}
}
.specs{border-top:0;display:flex;flex-wrap:wrap;gap:8px}
.specs div{flex:1 1 150px;display:grid;gap:2px;padding:12px 16px;border:0;border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-soft);text-align:left}
.specs dd{text-align:left;font-weight:800}
.specs dt{font-size:.875rem;color:var(--text-soft);font-weight:700}
.flow{gap:6px 0}
.preview-note{display:inline-block;padding:8px 14px;border-radius:var(--r-md);background:var(--p-durazno-suave,#FFEAD2)}
.scrub input[type=range]::-webkit-slider-thumb{transition:transform .25s var(--lift)}
.scrub input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}

/* ---------- secciones y bandas redondeadas ---------- */
.on-sky,.on-peach,.cta-band{border-radius:40px;margin-inline:8px}
@media (min-width:900px){.on-sky,.on-peach,.cta-band{border-radius:56px;margin-inline:20px}}
.sec-head .intro{font-size:1.125rem}

/* por qué Vibeth: números como burbujas */
.why-list{gap:14px}
.why-item{border-top:0;padding:20px;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-soft);transition:transform .35s var(--lift),box-shadow .3s var(--glide)}
.why-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.why-item .n{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:var(--p-celeste,#AEF0FF);color:var(--ink);font:800 1rem/1 var(--font-display)}
.why-item:nth-child(2) .n{background:var(--p-menta,#B0F0A5)}
.why-item:nth-child(3) .n{background:var(--p-durazno,#FFD09E)}
.why-item:nth-child(4) .n{background:var(--p-rosa-suave,#FFB8D2)}

/* usos: tarjetas que se elevan */
.tile{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-soft);transition:transform .45s var(--lift),box-shadow .35s var(--glide)}
.tile:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-pop)}
.tile:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.t-art{transition:transform .5s var(--lift)}
.tile:hover .t-art{transform:scale(1.06) rotate(-2deg)}

/* materiales */
.mat{border:0;border-radius:var(--r-lg);transition:transform .4s var(--lift),box-shadow .3s var(--glide)}
.mat:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.mat-tabs{border-radius:var(--r-pill)}
.mat-tabs button{border-radius:var(--r-pill);transition:background-color .2s var(--glide),transform .3s var(--lift)}
.mat-tabs button:active{transform:scale(.97)}
.mats-note{border-radius:var(--r-md)}

/* formatos y consejos */
.fmt{border-radius:var(--r-md);transition:background-color .25s var(--glide),transform .3s var(--lift)}
.fmt-code{font-weight:800;letter-spacing:-.03em}
.tips{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.tips li::before{border-radius:50%}

/* proceso */
.step{border-radius:var(--r-lg)}
.step-n{border-radius:50%;box-shadow:0 8px 16px -8px rgba(27,35,48,.35);transition:transform .4s var(--lift)}
.step:hover .step-n{transform:scale(1.1) rotate(-6deg)}
.ticket{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-pop);font-family:var(--font-sans)}
.ticket--demo{transition:transform .6s var(--lift)}
.ticket--demo:hover{transform:rotate(-1deg) translateY(-4px)}
.ticket-h{border-bottom:2px dashed rgba(27,35,48,.2)}

/* preguntas */
.faq details{border:0;border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-soft);margin-bottom:10px;transition:box-shadow .3s var(--glide),transform .3s var(--lift)}
.faq details:hover{transform:translateY(-2px)}
.faq details[open]{box-shadow:var(--shadow-pop)}
.faq summary{font-family:var(--font-display);font-weight:700;border-radius:var(--r-md)}
.pm{border-radius:50%;background:var(--turquesa,#1CDDDA);border:0;transition:transform .35s var(--lift)}
.faq details[open] .pm{transform:rotate(180deg)}

/* banda final */
.cta-h{font-weight:800;font-size:clamp(2.4rem,9vw,3.4rem);line-height:1.02;letter-spacing:-.035em}
.cta-h span{display:block}

/* pie */
.footer{border-radius:48px 48px 0 0;margin-top:-24px;position:relative}
.foot-mark{font-weight:800;letter-spacing:-.05em}
.foot-nav a{border-radius:var(--r-pill);transition:color .2s var(--glide),transform .25s var(--lift)}
.foot-nav a:hover{transform:translateX(3px)}

/* ---------- cotizar y cuentas (heredan los mismos componentes) ---------- */
.input{border:1.5px solid var(--bd-soft);border-radius:var(--r-sm);background:var(--white);transition:box-shadow .25s var(--glide),border-color .2s var(--glide)}
.input:focus-visible{box-shadow:0 0 0 4px var(--turq-suave,#D3F8F7)}
.q-panel,.panel,.card{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.drop{border-radius:var(--r-lg);border:2px dashed var(--bd-soft);background:var(--ice,#EEF9FC);transition:background-color .25s var(--glide),transform .35s var(--lift)}
.drop:hover,.drop.is-over{background:var(--turq-suave,#D3F8F7);transform:scale(1.01)}
.drop-ico{border-radius:50%}
.choice{border-radius:var(--r-md);border:1.5px solid var(--bd-soft);transition:transform .3s var(--lift),box-shadow .25s var(--glide),background-color .2s var(--glide)}
.choice:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.choice:has(input:checked){box-shadow:0 0 0 3px var(--turquesa,#1CDDDA)}
.q-tabs{border-radius:var(--r-pill)}
.q-tabs [role=tab]{border-radius:var(--r-pill)}
.stepper .st-n{border-radius:50%}
.file{border-radius:var(--r-md)}
.notice-strip{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------- movimiento: solo si el usuario lo permite ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn-ico,.tile,.mat,.why-item,.fmt,.step-n,.ticket--demo,.fig-tile,.nav-link,.faq details,.pm,.drop,.choice{transition:none!important;transform:none!important}
}
@media (hover:none){.tile:hover,.mat:hover,.why-item:hover,.faq details:hover{transform:none}}

/* ajuste: el titular no debe invadir la ilustración en escritorio */
@media (min-width:900px){.hero-title{font-size:calc(var(--fs-h1) * .62);line-height:1.04}}
@media (min-width:900px){.hero-fig{margin-top:12px}.hero-title{margin-bottom:6px}}

/* retoques tras revisar capturas */
.foot-mark{font-size:min(27cqi,24rem);letter-spacing:-.05em;line-height:.8}
.fmt-list{row-gap:6px}
.fmt{border-radius:0;transform:none}
.fmt-code{font-size:clamp(2.6rem,9vw,4rem)}
.step-n{box-shadow:none;border-radius:0;font-weight:800;-webkit-text-stroke:2px var(--ink)}
.step:hover .step-n{transform:scale(1.06) rotate(-3deg)}
.faq{border-top:0}
.faq details{border-bottom:0}
.faq summary{padding:12px 20px}
.faq .ans{padding:0 20px 22px}
.pm .icon{transition:transform .3s var(--lift)}
.faq details[open] .pm{transform:rotate(45deg);background:var(--p-rosa-suave,#FFB8D2)}
.mt-q,.mat-tabs .mt-q{text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-weight:800}

/* =====================================================================
   Versión 2: tipografía Geist, líneas finas y fotografía
   ===================================================================== */
@font-face{font-family:"Geist";src:url("fonts/geist-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --font-display:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist","Segoe UI",system-ui,sans-serif;
  --bw-ui:1px;--bw-strong:1px;
  --line:rgba(27,35,48,.09);--line-strong:rgba(27,35,48,.12);
  --bd-soft:#7A8596;                         /* contorno de controles: 3.9:1 sobre blanco */
}
body{font-size:1.0625rem;line-height:1.6;letter-spacing:-.005em;font-weight:400}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600}
.h2{font-weight:600;letter-spacing:-.035em;line-height:1.06}
.hero-title{font-weight:600;letter-spacing:-.045em;font-size:calc(var(--fs-h1) * .7);line-height:1.02}
@media (min-width:900px){.hero-title{font-size:calc(var(--fs-h1) * .66);line-height:1.04}}
.why-item h3,.step h3,.tile h3,.cta-h,.q-head h1,.fmt-code,.mat-code,.brand-word,.foot-mark,.btn,.faq summary,.nav-link{font-weight:600;letter-spacing:-.03em}
.brand-word{font-weight:700}
.mat-code,.fmt-code{font-weight:600;letter-spacing:-.045em}
.foot-mark{font-weight:700;letter-spacing:-.06em}
.btn{font-weight:600;letter-spacing:-.01em}
.sec-label,.tag,.sec-label b{font-weight:600;letter-spacing:0}
.specs dd,.tile p,.why-item p{letter-spacing:-.005em}
b,strong{font-family:var(--font-sans);font-weight:650}

/* ---- líneas: finas, tenues, solo donde ayudan ---- */
.site-header{box-shadow:0 1px 0 var(--line)}
.masthead{border-bottom:1px solid var(--line)}
.fmt{border-top:1px solid var(--line)}
.fmt-list{border-top:1px solid var(--line)}
.step{border-top:1px solid var(--line)}
.step-n{-webkit-text-stroke:1px var(--ink);font-weight:600}
.mats-legend span,.mat-specs dt,.spec{border-color:var(--line)}
.mat-specs > div,.spec,.mats-legend span{border-top-color:var(--line)}
.ticket-h{border-bottom:1px dashed rgba(27,35,48,.22)}
.scrub input[type=range]::-webkit-slider-runnable-track,.scrub input[type=range]::-moz-range-track{border-bottom-width:1px}
.scrub input[type=range]::-webkit-slider-thumb,.scrub input[type=range]::-moz-range-thumb{border-width:1.5px}
.drop{border-width:1.5px}
.estimate,.caj-grid,.nojs-note{border-width:1px;border-color:var(--line-strong)}
.caj-grid > div{border-top-color:var(--line)}
.st-n{border-width:1px}
.tag-outline,.btn-ghost,.choice,.input,.pw-toggle,.drop-btn{border-width:1px}
.btn-ghost{border-color:rgba(27,35,48,.28)}
.input,.choice,.pw-toggle,.drop-btn{border-color:var(--bd-soft)}
.mat-tabs{border-width:1px;border-color:var(--line-strong)}
.footer .foot-bot{border-top-color:rgba(255,255,255,.12)}
.faq-grid{gap:20px}
.why-item{box-shadow:0 1px 2px rgba(27,35,48,.04),0 12px 30px -16px rgba(52,66,155,.22)}
.q-panel,.panel,.card,.tips{box-shadow:0 1px 2px rgba(27,35,48,.04),0 18px 40px -22px rgba(52,66,155,.32)}
.btn{box-shadow:0 2px 0 rgba(10,95,99,.22),0 12px 22px -12px rgba(28,221,218,.7)}
.btn:not([disabled]):not([aria-disabled="true"]):hover{box-shadow:0 4px 0 rgba(10,95,99,.22),0 18px 26px -12px rgba(28,221,218,.75)}
.btn-ghost{box-shadow:0 8px 18px -14px rgba(52,66,155,.35)}

/* ---- fotografía ---- */
.hero-photo{margin-top:28px}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:36px;box-shadow:0 2px 4px rgba(27,35,48,.05),0 34px 60px -26px rgba(27,35,48,.45);background:var(--p-celeste,#AEF0FF)}
@media (min-width:900px){
  .hero-photo{margin-top:0}
  .hero-photo img{transform:rotate(1.2deg);transition:transform .6s var(--lift),box-shadow .4s var(--glide)}
  .hero-photo:hover img{transform:rotate(0) translateY(-4px)}
}
/* capa por capa */
.sec-capas{padding-top:0}
.capas-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);align-items:center}
.capas-fig{margin:0}
.capas-fig .fig-tile{transform:none}
.capas-copy .intro{max-width:46ch}
.capas-photo{display:block;width:100%;height:auto;margin-top:22px;border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
@media (min-width:900px){.capas-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
/* tarjetas de usos con foto */
.tile--ph{padding:12px 12px 22px;gap:0}
.tile--ph .t-label{padding:6px 10px 0}
.tile--ph .t-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r-lg) - 8px);margin-top:10px;background:rgba(255,255,255,.5);transition:transform .6s var(--lift)}
.tile--ph:hover .t-photo{transform:scale(1.015)}
.tile--ph h3,.tile--ph p{margin-inline:10px}
.tile--ph h3{padding-top:16px}
.tile--ph p{margin-top:6px}
.tile.t-d::after{display:none}
@media (min-width:760px){
  .t-wide.tile--ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;align-items:start}
  .t-wide.tile--ph .t-label{grid-column:1;grid-row:1}
  .t-wide.tile--ph .t-photo{grid-column:2;grid-row:1/span 3;margin-top:0;height:100%;aspect-ratio:auto;min-height:220px}
  .t-wide.tile--ph h3{grid-column:1;grid-row:2;align-self:end}
  .t-wide.tile--ph p{grid-column:1;grid-row:3}
}
/* materiales */
.mat-photo{margin:0 0 30px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.mat-photo img{display:block;width:100%;height:auto;aspect-ratio:3.4/1;object-fit:cover}
@media (max-width:640px){.mat-photo img{aspect-ratio:16/9}}
/* créditos */
.credit-list{list-style:none;margin:26px 0;padding:0;display:grid;gap:14px;max-width:70ch}
.credit-list li{padding:14px 18px;border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-soft);font-size:.9375rem;line-height:1.5;color:var(--text-soft)}
.credit-list strong{color:var(--ink)}
.credit-list a,.foot-credit{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:759.98px){
  .t-wide.tile--ph{display:flex;flex-direction:column}
  .t-wide.tile--ph h3,.t-wide.tile--ph p{max-width:none;grid-area:auto}
  .tile--ph .t-photo{height:auto;min-height:0}
}
.tile--ph h3{max-width:none}

/* =====================================================================
   Versión 3: más aire, títulos ligeros y pasteles MUY claros
   ===================================================================== */
:root{
  /* pasteles claros (misma paleta de referencia, mezclada con blanco) */
  --p-turquesa:#B4EEEB; --p-verde-azulado:#98E3E0;
  --p-azul-cielo:#E8F4FA; --p-celeste:#E4F8FC; --p-menta:#E8F8E5; --p-durazno:#FFEFDF;
  --p-rosa-suave:#FFE9F1; --p-rosa-chicle:#FFD9EC; --p-periwinkle:#ECEFFF; --p-rosa-palido:#FFF2F0;
  --p-salmon:#FFDAD9; --p-gris-azulado:#E9EEF1;
  --paper:#FFFDFC; --paper-2:#FFF7F4; --ice:#F4FAFD; --turq-soft:#E4F8F7;
  --amarillo-soft:#FFF4E8; --turquesa:#B4EEEB;
  --text-soft:#4A5568;
  --line:rgba(27,35,48,.07); --line-strong:rgba(27,35,48,.10);
  --bd-soft:#8C97A8;
  --shadow-soft:0 1px 1px rgba(27,35,48,.03),0 10px 28px -18px rgba(70,90,160,.20);
  --shadow-pop:0 1px 2px rgba(27,35,48,.04),0 18px 40px -26px rgba(70,90,160,.28);
}
body{font-weight:400;color:var(--text)}

/* títulos: ligeros, grandes, sin peso de cartel */
h1,h2,h3,h4{font-weight:400}
.h2{font-weight:400;font-size:clamp(2.1rem,7.4vw,2.9rem);letter-spacing:-.045em;line-height:1.06}
.hero-title{font-weight:300;letter-spacing:-.055em}
@media (min-width:900px){.hero-title{font-size:calc(var(--fs-h1) * .72);line-height:1.02}}
.hero-title .hl{font-weight:500}
.why-statement{font-weight:300}
.why-item h3,.step h3,.tile h3,.cta-h,.q-head h1,.faq summary,.mat-name{font-weight:500;letter-spacing:-.03em}
.cta-h{font-weight:300;letter-spacing:-.05em}
.mat-code,.fmt-code{font-weight:400;letter-spacing:-.055em}
.step-n{font-weight:300;-webkit-text-stroke:1px var(--ink)}
.brand-word{font-weight:600;letter-spacing:-.04em}
.nav-link,.sec-label,.tag,.btn{font-weight:500}
.nav-link{letter-spacing:-.01em}
b,strong{font-weight:600}
.specs dd,.ticket dd{font-weight:500}

/* botones: planos y suaves */
.btn{border:1px solid rgba(27,35,48,.10);box-shadow:none;font-weight:500;letter-spacing:-.01em}
.btn:not([disabled]):not([aria-disabled="true"]):hover{box-shadow:0 10px 22px -14px rgba(60,170,170,.7);transform:translateY(-2px)}
.btn:not([disabled]):not([aria-disabled="true"]):active{box-shadow:none;transform:translateY(1px)}
.btn-ghost{background:var(--white);border:1px solid rgba(27,35,48,.14);box-shadow:none}
.btn-ghost:not([disabled]):not([aria-disabled="true"]):hover{background:var(--turq-soft);box-shadow:none}
.btn-ico{background:var(--white);color:var(--ink)}
.nav-link:hover,.nav-link[aria-current]{background:var(--p-celeste)}

/* superficies: casi blancas, bordes de un pelo, sin sombras duras */
.site-header{background:rgba(255,253,252,.86);box-shadow:0 1px 0 var(--line)}
.why-item,.faq details,.specs div,.mat,.tips,.q-panel,.panel,.card,.credit-list li{box-shadow:none;border:1px solid rgba(27,35,48,.06)}
.tile{box-shadow:none;border:0}
.tile:hover,.mat:hover,.why-item:hover{box-shadow:var(--shadow-pop)}
.hero-photo img,.mat-photo,.capas-photo{box-shadow:0 24px 50px -30px rgba(70,90,160,.35)}
.tile--ph .t-photo{box-shadow:none}
.tag{background:var(--p-rosa-chicle)}
.hero::before{background:radial-gradient(circle at 35% 35%,var(--p-celeste),transparent 70%)}
.hero::after{background:radial-gradient(circle at 60% 40%,var(--p-rosa-suave),transparent 72%);opacity:1}
.on-sky,.on-peach,.cta-band{border-radius:40px}
.on-sky{background:var(--p-azul-cielo)}
.on-peach{background:var(--p-durazno)}
.cta-band.on-rosa{background:var(--p-rosa-suave)}
.fig-tile{background:linear-gradient(160deg,var(--p-rosa-suave),var(--p-celeste));box-shadow:none}
.fig-svg{filter:saturate(.55) brightness(1.06)}
.preview-note,.est-legend{background:var(--p-durazno)}
.sec-label{background:var(--p-celeste)}
.sec-label b{background:var(--white)}
.why-item .n{background:var(--p-celeste)}
.why-item:nth-child(2) .n{background:var(--p-menta)}
.why-item:nth-child(3) .n{background:var(--p-durazno)}
.why-item:nth-child(4) .n{background:var(--p-rosa-suave)}
.pm{background:var(--p-celeste);color:var(--ink)}
.faq details[open] .pm{background:var(--p-rosa-suave)}
.drop{background:var(--ice);border-color:#B7C3D0}
.input,.choice,.pw-toggle,.drop-btn{border-color:#B7C3D0}

/* pie claro (antes tinta oscura) */
.footer,.footer.on-dark{background:var(--p-azul-cielo);color:var(--ink);--focus:var(--ink)}
.footer .foot-claim,.footer .foot-nav a,.footer .foot-nav h2,.footer .foot-bot,.footer .foot-bot p,.footer .foot-credit{color:var(--ink)}
.footer .foot-nav h2{color:var(--text-soft)}
.footer .foot-mark{color:rgba(255,255,255,.85)}
.footer .foot-bot{border-top:1px solid rgba(27,35,48,.08)}
.footer .dot3{color:var(--p-rosa-chicle)}
.footer .foot-nav a:hover{color:var(--teal-deep)}
.credit-list li{background:var(--white)}

/* =====================================================================
   Versión 4: tipografía creativa y amigable (Bricolage Grotesque + Figtree)
   ===================================================================== */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-var.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{
  --font-display:"Bricolage Grotesque","Figtree","Segoe UI",system-ui,sans-serif;
  --font-sans:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Figtree","Segoe UI",system-ui,sans-serif;
}
body{font-size:1.0625rem;line-height:1.6;letter-spacing:0;font-weight:400}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600}
.h2{font-weight:600;letter-spacing:-.035em;line-height:1.04;font-size:clamp(2.1rem,7.4vw,2.9rem)}
.hero-title{font-weight:600;letter-spacing:-.045em;font-size:calc(var(--fs-h1) * .72);line-height:1}
@media (min-width:900px){.hero-title{font-size:calc(var(--fs-h1) * .7);line-height:1.01}}
.hero-title .hl{font-weight:700}
.why-statement{font-weight:500}
.why-item h3,.step h3,.tile h3,.faq summary,.q-head h1,.mat-name{font-weight:600;letter-spacing:-.025em}
.cta-h{font-weight:600;letter-spacing:-.045em}
.mat-code,.fmt-code{font-weight:600;letter-spacing:-.05em}
.step-n{font-weight:600;-webkit-text-stroke:1px var(--ink)}
.brand-word{font-weight:700;letter-spacing:-.04em;font-family:var(--font-display)}
.nav-link,.sec-label,.tag,.btn{font-family:var(--font-sans);font-weight:600;letter-spacing:0}
.btn{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
b,strong{font-family:var(--font-sans);font-weight:700}
.specs dd,.ticket dd{font-weight:600}
.foot-mark{font-family:var(--font-display);font-weight:700;letter-spacing:-.06em}

/* ===== v5 · estructura: collage en el héroe, cabecera píldora, foto en la banda final ===== */
.masthead{display:none!important}
.hero{padding:20px 0 40px}
.hero-collage{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto;gap:12px;margin-top:28px}
.hc{margin:0;overflow:hidden;border-radius:28px;background:var(--p-gris-azulado);border:1px solid rgba(27,35,48,.08);box-shadow:0 18px 40px -26px rgba(52,66,155,.35)}
.hc img{display:block;width:100%;height:100%;object-fit:cover}
.hc-main{grid-column:1/-1;aspect-ratio:4/3.4;border-radius:36px}
.hc-main img{object-position:50% 40%}
.hc-a{grid-column:1/4;aspect-ratio:4/3}
.hc-b{grid-column:4/-1;aspect-ratio:4/3}
.hc-chips{position:absolute;left:14px;top:14px;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.hc-chips li{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(27,35,48,.1);font:600 .8125rem/1.2 var(--font-sans);letter-spacing:.02em;color:var(--ink)}
.hc-chips li:nth-child(1){background:var(--p-turquesa)}
.hc-chips li:nth-child(2){background:var(--p-rosa-chicle)}
.hc-chips li:nth-child(3){background:var(--p-durazno)}
.hc-chips li:nth-child(4){background:var(--p-periwinkle)}
@media (min-width:900px){
  .hero{padding:40px 0 72px}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(32px,4vw,64px);align-items:center;--fs-h1:clamp(3.4rem,6.4vw,6rem)}
  .hero-grid .kicker{grid-column:1;grid-row:1}
  .hero-grid .hero-title{grid-column:1;grid-row:2;margin-top:14px}
  .hero-grid .hero-copy{grid-column:1;grid-row:3;margin-top:24px}
  .hero-grid .hero-fig{grid-column:2;grid-row:1/span 3;margin-top:0;align-self:center}
  .hero-title .l{display:block}
  .hero-collage{gap:14px;grid-template-columns:repeat(12,minmax(0,1fr))}
  .hc-main{grid-column:1/-1;aspect-ratio:5/4.4}
  .hc-a{grid-column:1/7;aspect-ratio:1/.8}
  .hc-b{grid-column:7/-1;aspect-ratio:1/.8}
}
/* cabecera píldora flotante */
@media (min-width:900px){
  .site-header{top:12px;background:transparent!important;border:0!important;padding-inline:var(--pad,24px)}
  .site-header::before{inset:0 clamp(8px,2vw,32px);border-radius:999px;border:1px solid rgba(27,35,48,.1);background:rgba(255,255,255,.82);box-shadow:0 10px 30px -18px rgba(52,66,155,.35)}
  .site-header .hdr{padding-inline:clamp(20px,3vw,44px)}
}
/* Por qué Vibeth: dos columnas */
@media (min-width:900px){
  .why-grid .why-statement{grid-column:1/8}
  .why-grid .why-sub{grid-column:1/7;margin-top:24px}
  .why-grid .why-list{grid-column:8/-1;grid-row:2/span 2;grid-template-columns:1fr;margin-top:0;align-self:start}
  .why-grid .why-item{grid-template-columns:2.75rem minmax(0,1fr);gap:4px 14px;padding:18px 0 20px}
  .why-grid .why-item .n{grid-row:span 2;margin:3px 0 0}
  .why-grid .why-item h3{font-size:1.75rem}
  .why-grid .sec-label{margin-bottom:24px}
}
/* Materiales 2x2 con etiquetas visibles */
@media (min-width:900px){
  .mats{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px;row-gap:20px}
  .mats-legend{display:none!important}
  .mat{display:flex!important;grid-row:auto!important;margin:0!important;border-radius:28px}
  .mat-head,.mat-specs{display:block!important;grid-row:auto!important}
  .spec{grid-template-columns:minmax(0,1fr) auto!important}
  .spec dt{position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important}
  .spec dd{justify-content:flex-end!important}
}
/* Banda final con foto */
.cta-photo{margin:0;overflow:hidden;border-radius:32px;border:1px solid rgba(27,35,48,.08);aspect-ratio:4/3}
.cta-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .cta-grid{align-items:center!important}
  .cta-photo{grid-column:8/-1;grid-row:1/span 2;aspect-ratio:4/5}
  .cta-h{grid-column:1/8!important;grid-row:1}
  .cta-side{grid-column:1/7!important;grid-row:2}
}
@media (min-width:900px){
  .hero-grid{grid-template-rows:auto auto auto;align-content:center}
  .hero-grid .hero-title{align-self:start}
  .why-grid{grid-template-rows:auto auto 1fr}
  .why-grid .why-statement{align-self:start}
  .why-grid .why-sub{align-self:start}
}
@media (min-width:900px){
  .hero-grid{grid-template-rows:1fr auto auto auto 1fr}
  .hero-grid .kicker{grid-row:2}
  .hero-grid .hero-title{grid-row:3}
  .hero-grid .hero-copy{grid-row:4}
  .hero-grid .hero-fig{grid-row:1/span 5}
}
@media (min-width:900px){.cta-grid{grid-template-rows:auto auto;align-content:center;row-gap:20px}.cta-h{align-self:end}.cta-side{align-self:start}}
.contact-list{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;font-size:1rem}
.contact-list span{display:inline-block;min-width:5.5rem;font:600 .8125rem/1.4 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft)}
.contact-list a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(27,35,48,.3);text-underline-offset:4px;overflow-wrap:anywhere}
.contact-list a:hover{text-decoration-color:var(--ink)}

/* ===== v6 · rediseño de composición: héroe centrado, bandas a todo el ancho, cinta, carrusel, tarjetas de color ===== */
.footer .foot-mark,.foot-mark{display:none!important}
/* bandas de color a sangre, sin bloques redondeados flotantes */
.on-sky,.on-peach,.cta-band{border-radius:0!important;margin-inline:0!important}
.sec{padding-block:clamp(56px,8vw,112px)}
/* encabezados de sección centrados */
.sec-head{display:grid;justify-items:center;text-align:center;max-width:46rem;margin-inline:auto;margin-bottom:clamp(32px,5vw,56px)}
.sec-head .h2{max-width:20ch;margin-inline:auto}
.sec-head .intro{max-width:52ch;margin-inline:auto}
/* HÉROE centrado + tira de fotos */
.hero-grid{display:block!important;text-align:center}
.hero-grid .kicker{justify-content:center;display:inline-flex}
.hero-grid .hero-title{max-width:14ch;margin:18px auto 0;font-size:clamp(3.2rem,9.4vw,7.4rem);line-height:.98}
.hero-grid .hero-title .l,.hero-grid .hero-title .row{display:inline}
.hero-grid .hero-copy{max-width:44rem;margin:22px auto 0}
.hero-grid .lead{margin-inline:auto}
.hero-grid .cta-row{justify-content:center}
.hero-grid .specs{justify-content:center;margin-inline:auto;text-align:left}
.hero-grid .help.preview-note{margin-inline:auto;display:inline-block}
.hero-grid .flow-m{display:none}
.hero-collage{margin-top:clamp(36px,6vw,64px);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto;align-items:stretch;text-align:left}
.hero-collage .hc-main{grid-column:3/11;grid-row:1/span 2;aspect-ratio:auto;min-height:clamp(260px,40vw,520px)}
.hero-collage .hc-a{grid-column:1/3;grid-row:1;aspect-ratio:auto}
.hero-collage .hc-b{grid-column:11/-1;grid-row:2;aspect-ratio:auto}
.hero-collage .hc-chips{left:50%;transform:translateX(-50%);top:16px;justify-content:center;width:max-content;max-width:90%}
@media (max-width:899px){
  .hero-collage .hc-main{grid-column:1/-1;grid-row:1;min-height:0;aspect-ratio:4/3.2}
  .hero-collage .hc-a{grid-column:1/7;grid-row:2;aspect-ratio:4/3}
  .hero-collage .hc-b{grid-column:7/-1;grid-row:2;aspect-ratio:4/3}
}
@media (min-width:900px){.hero-collage .hc-a,.hero-collage .hc-b{border-radius:999px 999px 28px 28px}.hero-collage .hc-b{border-radius:28px 28px 999px 999px}.hero{padding:56px 0 24px}}
/* cinta con movimiento suave */
.ribbon{overflow:hidden;background:var(--p-rosa-chicle);border-block:1px solid rgba(27,35,48,.1);padding:14px 0;margin-top:clamp(28px,4vw,48px)}
.ribbon-track{display:flex;width:max-content;animation:ribbon 38s linear infinite}
.ribbon span{padding:0 clamp(18px,3vw,36px);font:600 clamp(1.1rem,2vw,1.5rem)/1 var(--font-display);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.ribbon span::after{content:"✦";margin-left:clamp(18px,3vw,36px);color:rgba(27,35,48,.35);font-size:.7em;vertical-align:.1em}
@keyframes ribbon{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none}}
/* PROCESO: tarjetas de color con número en burbuja */
.steps{gap:16px!important}
.step{border:0!important;border-radius:28px;padding:26px 22px 28px!important;background:var(--white);position:relative}
.step::before,.steps::before{display:none!important}
.step:nth-child(1){background:var(--p-turquesa)}
.step:nth-child(2){background:var(--p-rosa-chicle)}
.step:nth-child(3){background:var(--p-periwinkle)}
.step:nth-child(4){background:var(--p-menta)}
.step-n{display:inline-grid!important;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--white);color:var(--ink)!important;-webkit-text-stroke:0!important;font-size:1.25rem!important;line-height:1!important;margin:0 0 14px!important;grid-row:auto!important}
.step h3{font-size:1.5rem!important}
@media (min-width:900px){.step{grid-template-columns:1fr!important;grid-row:auto!important;grid-template-rows:none!important}.step:nth-child(even){transform:translateY(24px)}}
/* USOS: carrusel horizontal */
.bento{display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;margin-inline:calc(var(--pad,16px)*-1);padding-inline:var(--pad,16px);scrollbar-width:thin}
.bento>li{flex:0 0 min(84vw,360px);scroll-snap-align:start;grid-area:auto!important;margin:0!important}
.bento>li .tile{height:100%}
@media (min-width:900px){.bento>li{flex-basis:clamp(300px,28vw,400px)}}
/* MATERIALES: cada uno de un color */
.mats .mat:nth-child(2){background:var(--p-turquesa)}
.mats .mat:nth-child(3){background:var(--p-rosa-chicle)}
.mats .mat:nth-child(4){background:var(--p-durazno)}
.mats .mat:nth-child(5){background:var(--p-periwinkle)}
.mats .mat{border:0}
.mat-code{font-size:clamp(3.2rem,6vw,5rem)!important}
/* FAQ y banda final centrados en sentido */
.cta-band{padding-block:clamp(56px,8vw,112px)}
.sec-head{grid-template-columns:minmax(0,1fr)!important}
.sec-head>*{grid-column:1!important}
.hero-collage .hc-main{min-height:clamp(240px,31vw,440px)}
@media (min-width:900px){.hero-collage .hc-a,.hero-collage .hc-b{grid-row:1/span 2;align-self:end;height:70%}}
.bento .tile{display:flex!important;flex-direction:column;gap:10px}
.bento .tile .t-photo{position:static!important;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-radius:20px;order:2;max-width:none!important}
.bento .tile h3{order:3}.bento .tile p{order:4}.bento .tile .t-label{order:1}
.hero-collage .hc-main{min-height:clamp(240px,27vw,380px)}
.steps{grid-template-columns:minmax(0,1fr)}
.step{grid-template-columns:minmax(0,1fr)!important;min-width:0}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}