/* ===== SprintWeb — capa premium (overlay aditivo) =====
   Se carga DESPUÉS de styles.css. Solo eleva el vestido: acento serif (paso 04),
   más aire, header que se oculta, enlaces que se alargan, y pulido de portfolio/FAQ.
   No cambia la narrativa ni la estructura. Ver sprintweb/DISENO-PREMIUM.md. */

:root{
  --ff-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --ease-premium: cubic-bezier(.22,.61,.36,1);
}

/* ===== Guard: nada de scroll horizontal (clip no rompe sticky ni Lenis) ===== */
html, body{ overflow-x: clip; max-width: 100%; }
/* seguros contra desbordes de la capa premium en mobile */
.hero, .footer--clay{ overflow-x: clip; }
#sw-ambient{ max-width: 100%; }
a.fc-talk{ max-width: 100%; overflow-wrap: break-word; }

/* ---- Acento serif itálico (paso 04): un gesto editorial en los remates lime ---- */
.hero__title em,
.section__title .accent{
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
}
/* el hero mantiene su color lime en el remate */
.hero__title em{ color: var(--lime); }

/* ---- Header: transición de ocultarse al scroll + estado "pegado" ---- */
.site-header{
  transition: transform .45s var(--ease-premium), background .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.site-header.is-hidden{ transform: translateY(-100%); }
.site-header.is-stuck{
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}

/* Móvil: el drawer .nav__menu es position:fixed y vive DENTRO del header.
   will-change:transform, backdrop-filter y el transform de is-hidden crean cada
   uno un containing block → el fixed del drawer se ancla al header (~64px) en vez
   del viewport, y el menú sale chico/transparente encima del hero. En móvil no
   necesitamos hide-on-scroll ni blur del header (sticky sólido es lo estándar),
   así que los neutralizamos y el drawer vuelve a cubrir el viewport. */
@media (max-width: 760px){
  .site-header{ will-change: auto; }
  .site-header.is-hidden{ transform: none; }
  .site-header.is-stuck{ backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- Enlaces que se alargan en hover (Clay) — nav + footer ---- */
.nav__menu a:not(.btn){ position: relative; }
.nav__menu a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background: var(--lime); transition: width .35s var(--ease-premium);
}
.nav__menu a:not(.btn):hover::after,
.nav__menu a.is-current:not(.btn)::after{ width:100%; }

.footer__col a:not(.btn){ position: relative; }
.footer__col a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1.5px; width:0;
  background: var(--lime); transition: width .35s var(--ease-premium);
}
.footer__col a:not(.btn):hover{ color:#fff; }
.footer__col a:not(.btn):hover::after{ width:100%; }

/* ---- Más aire y ritmo entre secciones (piso premium) ---- */
@media (min-width: 720px){
  .section{ padding-block: clamp(5rem, 8vw, 8rem); }
  .hero{ padding-block: clamp(4.5rem, 8vw, 8rem) clamp(3.5rem, 6vw, 6rem); }
}

/* ---- Pulido del portfolio: hover con más intención (galería tipo Cuberto/Clay) ---- */
.pcard{ transition: transform .5s var(--ease-premium); }
.pcard:hover{ transform: translateY(-6px); }
.pcard__shot img{ transition: transform .6s var(--ease-premium); }
.pcard__shot:hover img{ transform: scale(1.04); }

/* ---- FAQ más grande, clara y atractiva (Clay) ---- */
.faq__q{ font-size: clamp(1.05rem, 2.2vw, 1.3rem); letter-spacing: -.01em; }
.faq__item{ transition: background .3s ease; }
.faq__item[open]{ background: rgba(200,255,51,.03); }

/* ---- Botón magnético: transición suave del reset (lo anima GSAP) ---- */
.hero__cta .btn--lime, .site-header .btn--lime, .cta-final__btn{ will-change: transform; }

/* ---- Tilt 3D del mockup del hero (demo FORMA · sigue el cursor) ---- */
.hero__visual{ perspective: 1200px; }
.hero__visual .browser{
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
  will-change: transform;
}
.hero__visual .browser::after{  /* halo lima que da volumen bajo el mockup */
  content:""; position:absolute; inset:auto -12% -18% -12%; height:55%;
  background: radial-gradient(closest-side, rgba(200,255,51,.22), transparent 72%);
  filter: blur(28px); transform: translateZ(-60px); z-index:-1; pointer-events:none;
}

/* ---- Elevación en capas (demo FORMA) — planes y portfolio ---- */
.plan{
  box-shadow: 0 2px 4px rgba(0,0,0,.34), 0 8px 16px rgba(0,0,0,.32), 0 24px 48px rgba(0,0,0,.30);
  transition: transform .38s var(--ease-premium), box-shadow .38s var(--ease-premium);
}
.plan:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(0,0,0,.42), 0 10px 18px rgba(0,0,0,.36), 0 0 0 1px rgba(200,255,51,.10);
}
.plan--pop{ box-shadow: 0 24px 60px rgba(0,0,0,.46), 0 8px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(200,255,51,.22); }
.plan--pop:hover{ box-shadow: 0 36px 74px rgba(0,0,0,.56), 0 12px 26px rgba(0,0,0,.46), 0 0 0 1px rgba(200,255,51,.38); }
.pcard{ box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.3); }
.pcard:hover{ box-shadow: 0 24px 48px rgba(0,0,0,.42), 0 10px 20px rgba(0,0,0,.36); }

/* ===== Micro-interacciones: TODO lo clickeable responde ===== */
.btn{ transition: transform .25s var(--ease-premium), background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease; }
.btn:active{ transform: translateY(0) scale(.96); }
.tf__opt{ transition: transform .2s var(--ease-premium), border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.tf__opt:hover{ transform: translateY(-2px); border-color: rgba(200,255,51,.5); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.tf__opt:active{ transform: scale(.98); }
.pcard__shot{ transition: transform .3s var(--ease-premium); cursor: pointer; }
.pcard__shot:active{ transform: scale(.985); }
.svc{ transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium); }
.svc:hover{ transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.34); }
.svc__cta{ transition: color .25s ease; }
.svc__cta:hover{ color: var(--lime); }
.matias__btn{ transition: transform .25s var(--ease-premium), box-shadow .25s ease; }
.matias__btn:hover{ transform: translateY(-2px); }
.matias__btn:active, .matias__send:active, .nav__toggle:active, .fmodal__close:active{ transform: scale(.92); }
.matias__send{ transition: transform .12s ease, background .2s ease; }
.trust__item{ transition: color .25s ease; }
.pv-btn{ transition: transform .2s var(--ease-premium), border-color .2s ease, color .2s ease; }
.pv-btn:hover{ transform: translateY(-2px); }
.pv-btn:active{ transform: scale(.96); }
/* Foco visible coherente (accesibilidad) en todo lo interactivo */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .tf__opt:focus-visible{
  outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px;
}

/* ===== FAQ: animación de apertura y cierre (Chrome ::details-content) ===== */
.faq__item{ interpolate-size: allow-keywords; transition: background .3s ease; }
.faq__item::details-content{
  block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size .42s var(--ease-premium), opacity .42s var(--ease-premium),
              content-visibility .42s allow-discrete;
}
.faq__item[open]::details-content{ block-size: auto; opacity: 1; }
.faq__q{ transition: color .25s ease; }
.faq__q:hover{ color: var(--lime); }
/* Ícono +/− animado (override predecible) */
.faq__q .ico{ position: relative; flex: none; width: 24px; height: 24px; background: none !important; }
.faq__q .ico::before, .faq__q .ico::after{
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-premium), opacity .35s ease;
}
.faq__q .ico::before{ transform: translate(-50%,-50%); }
.faq__q .ico::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__q .ico{ color: var(--lime); }
.faq__item[open] .faq__q .ico::after{ transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }

/* ===== Hero: luz ambiental (canvas) detrás — treatment 3D tipo demo FORMA ===== */
.hero{ position: relative; overflow: hidden; }
#sw-ambient{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; pointer-events: none; }
.hero .container, .hero__inner{ position: relative; z-index: 2; }

/* ===== Footer estilo Clay (estructura exacta) ===== */
.footer--clay{ padding: clamp(3.5rem,7vw,7rem) 0 clamp(1.5rem,3vw,2.5rem); }
.footer--clay .container{ display: flex; flex-direction: column; gap: clamp(3rem,6vw,6rem); }
/* Fila 1: CTA (izq) + nav en 2 columnas (der) */
.fc-top{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.fc-cta .eyebrow{ display: block; margin-bottom: .7rem; }
a.fc-talk{ display: inline-block; font-family: var(--ff-title); font-weight: 800; letter-spacing: -.03em;
  line-height: .95; font-size: clamp(2.4rem,5.5vw,4.6rem); color: #fff; margin: 0 0 1.6rem;
  transition: color .3s ease; }
a.fc-talk::after{ display: none; }  /* sin subrayado: lleva flecha */
a.fc-talk .fc-arrow{ display: inline-block; transition: transform .32s var(--ease-premium); }
a.fc-talk:hover{ color: var(--lime); }
a.fc-talk:hover .fc-arrow{ transform: translateX(12px); }
.fc-lines{ display: flex; flex-direction: column; gap: .25rem; margin-bottom: 2.2rem; }
.fc-lines a{ display: inline-block; position: relative; width: fit-content; color: #cfd2d6;
  font-size: clamp(1.02rem,1.5vw,1.2rem); line-height: 1.8; }
.fc-lines a::after{ content:""; position:absolute; left:0; bottom:2px; height:1.5px; width:0; background:var(--lime); transition:width .35s var(--ease-premium); }
.fc-lines a:hover{ color:#fff; } .fc-lines a:hover::after{ width:100%; }
.fc-brand{ max-width: 340px; }
.fc-brand .brand{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.fc-brand p{ color: var(--tenue); font-size: .95rem; line-height: 1.6; }
.fc-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; justify-content: end; }
.fc-nav ul{ list-style: none; margin: 0; padding: 0; }
.fc-nav a{ position: relative; display: inline-block; color: #e9eaec; font-family: var(--ff-title);
  font-size: clamp(1.05rem,1.5vw,1.25rem); line-height: 2; }
.fc-nav a::after{ content:""; position:absolute; left:0; bottom:6px; height:1.5px; width:0; background:var(--lime); transition:width .35s var(--ease-premium); }
.fc-nav a:hover{ color:#fff; } .fc-nav a:hover::after{ width:100%; }
/* Fila 2: ubicaciones en 3 columnas (alineadas a la derecha, como Clay) */
/* Bloque de marca (SPRINTWEB + descripción). Las direcciones se quitaron del footer. */
.fc-mid{ display: block; }
.fc-loc h4{ font-family: var(--ff-title); font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 .5rem; }
.fc-loc p{ color: var(--tenue); font-size: .95rem; line-height: 1.5; }
/* Fila 3: barra final — social (izq) + copyright/legal (der) */
.fc-bottom{ display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 2rem; }
.fc-social{ display: flex; gap: 14px; }
.fc-social a{ color: var(--tenue); transition: color .25s ease, transform .25s var(--ease-premium); }
.fc-social a svg{ width: 20px; height: 20px; }
.fc-social a:hover{ color: var(--lime); transform: translateY(-2px); }
.fc-meta{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--tenue);
  font-size: .9rem; font-family: var(--mono, var(--ff-title)); }
.fc-meta a{ position: relative; color: var(--tenue); }
.fc-meta a:hover{ color: #fff; }

/* ===== Garantía: título en tinta oscura (el fondo de la sección ES lima; el
   lima como texto lo vuelve ilegible y viola el estándar «lima nunca como texto»).
   Escudo arriba del título en mobile (regla más abajo). ===== */
.garantia__inner h2{ color: #16180F; }

/* ===== Mobile: highlights cards centrados + garantía apilada y centrada ===== */
@media (max-width: 760px){
  .card{ text-align: center; }
  .card__icon{ margin-left: auto; margin-right: auto; }
  .card .btn{ margin-inline: auto; }
  /* garantía: escudo sobre el título, todo centrado */
  .garantia__inner > div{ flex-direction: column !important; align-items: center !important; text-align: center; gap: 1rem !important; }
}
@media (max-width: 860px){
  /* Footer mobile: reflow → CTA · enlaces centrados · redes · logo (fin) */
  .footer--clay{ padding-top: clamp(3rem,8vw,4.5rem); }
  .footer--clay .container{ display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 2.4rem; }
  .fc-top, .fc-mid, .fc-bottom{ display: contents; }        /* aplana para reordenar */
  .fc-cta{ order: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
  .fc-cta .fc-lines{ align-items: center; margin: .8rem 0 0; }
  a.fc-talk{ margin-bottom: .6rem; }
  .fc-nav{ order: 2; grid-template-columns: 1fr; gap: 4px; justify-items: center; }
  .fc-locs{ order: 3; grid-template-columns: 1fr; gap: 22px; justify-items: center; width: 100%; }
  .fc-loc{ text-align: center; }
  .fc-meta{ order: 4; flex-direction: column; align-items: center; gap: 8px; }
  .fc-social{ order: 5; justify-content: center; }
  .fc-brand{ order: 6; max-width: none; display: flex; flex-direction: column; align-items: center; }
  .fc-brand p{ display: none; }                              /* al final: solo el logo */
}
@media (max-width: 480px){
  a.fc-talk{ font-size: clamp(2rem,10vw,2.6rem); }
  .fc-meta{ font-size: .82rem; }
}

/* ---- Respeta reduce-motion: nada se mueve, todo queda visible y usable ---- */
@media (prefers-reduced-motion: reduce){
  .site-header{ transition: background .3s ease; }
  .site-header.is-hidden{ transform: none; }
  .pcard, .pcard__shot img, .plan, .hero__visual .browser,
  .btn, .tf__opt, .svc, .footer__talk-h{ transition: none; }
  #sw-ambient{ display: none; }
  .faq__item::details-content{ transition: none; }
}

/* ===================== Wizard conversacional de cotizacion ===================== */
/* Reemplaza el Typeform de fieldsets. Vive dentro de .fmodal (reusa su shell + apertura). */
#form-modal .fmodal__panel{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.wiz{ display:flex; flex-direction:column; min-height:0; flex:1; position:relative; }
.wiz__aura{ position:absolute; top:-30%; left:-15%; right:-15%; height:60%; z-index:0; pointer-events:none; filter:blur(46px); opacity:.55; overflow:hidden; }
.wiz__aura i{ position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, var(--lime), transparent 62%); opacity:.16; animation:wizDrift 15s var(--ease-premium) infinite alternate; }
.wiz__aura i:nth-child(2){ left:52%; top:18%; background:radial-gradient(circle,#33d1ff,transparent 62%); opacity:.12; animation-duration:19s; }
@keyframes wizDrift{ from{transform:translate(-6%,-4%) scale(1)} to{transform:translate(12%,10%) scale(1.18)} }

.wiz__head{ position:relative; z-index:2; display:flex; align-items:center; gap:14px; padding:20px 3.4rem 10px 22px; }
.wiz__logo{ display:flex; align-items:center; gap:.5rem; }
.wiz__logo img{ width:30px; height:30px; border-radius:8px; display:block; }
.wiz__word{ font-family:var(--ff-title); font-weight:800; font-size:1.16rem; letter-spacing:-.5px; color:#fff; line-height:1; }
.wiz__word span{ font-weight:400; color:#e9eaec; }
.wiz__bar{ flex:1; height:3px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.wiz__bar span{ display:block; height:100%; width:0; background:var(--lime); border-radius:99px; transition:width .55s var(--ease-premium); }

.wiz__body{ position:relative; z-index:2; padding:8px 22px 24px; overflow-y:auto; }
.wiz__stage.wiz__stage--leaving > *{ animation:wizLeave .2s var(--ease-premium) forwards; }
@keyframes wizLeave{ to{ opacity:0; transform:translateY(-10px); filter:blur(4px); } }

.wiz__ask{ display:flex; align-items:center; gap:9px; margin:6px 0 4px; }
.wiz__spark{ width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(200,255,51,.12); }
.wiz__eyebrow{ font-family:var(--ff-title); font-size:12px; color:var(--lime); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.wiz__q{ font-family:var(--ff-title); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:#fff; font-size:clamp(1.5rem,4.6vw,2.05rem); margin:2px 0 6px; }
.wiz__sub{ color:var(--tenue); font-size:14.5px; line-height:1.55; max-width:50ch; margin-bottom:18px; }
.wiz__sub b{ color:#fff; font-weight:800; }
/* La contrapartida en el paso donde aparece el precio. Se llama "letra chica" pero no se
   ve como tal: mismo tamaño que el resto del párrafo, solo separada por un filete. */
.wiz__fine{ display:block; padding-top:12px; border-top:1px solid rgba(255,255,255,.14);
  color:#c8cad0; }

.rv{ opacity:0; transform:translateY(11px); filter:blur(6px); animation:wizRv .5s var(--ease-premium) forwards; }
@keyframes wizRv{ to{ opacity:1; transform:none; filter:blur(0); } }

.wiz__field{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--linea); color:#fff; font-family:var(--ff-body); font-size:16px; padding:15px 16px; border-radius:12px; margin-bottom:10px; transition:border-color .2s var(--ease-premium), background .2s var(--ease-premium), box-shadow .2s var(--ease-premium); }
.wiz__field::placeholder{ color:rgba(255,255,255,.4); }
.wiz__field:focus{ outline:none; border-color:var(--lime); background:rgba(200,255,51,.05); box-shadow:0 0 0 3px rgba(200,255,51,.12); }
.wiz__field--err{ border-color:#ff8a8a; box-shadow:0 0 0 3px rgba(255,138,138,.14); }
textarea.wiz__field{ resize:none; min-height:110px; line-height:1.5; }

.wiz__opts{ display:flex; flex-direction:column; gap:10px; }
.wiz__opt{ width:100%; text-align:left; background:rgba(255,255,255,.03); border:1px solid var(--linea); color:#fff; padding:16px 18px; border-radius:var(--radius); cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:transform .16s var(--ease-premium), border-color .2s ease, background .2s ease; }
.wiz__opt b{ font-family:var(--ff-title); font-weight:600; font-size:16px; }
.wiz__opt em{ font-style:normal; color:var(--tenue); font-size:13.5px; }
.wiz__opt:hover{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); transform:translateY(-1px); }
.wiz__opt:active{ transform:scale(.985); }

.wiz__links{ display:flex; flex-direction:column; gap:9px; margin-bottom:6px; }
.wiz__linkrow{ display:flex; gap:8px; align-items:center; opacity:0; transform:translateY(-6px) scale(.99); animation:wizRv .34s var(--ease-premium) forwards; }
.wiz__linkrow .wiz__field{ margin:0; flex:1; }
.wiz__rm{ flex:0 0 auto; width:46px; height:48px; border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); color:var(--tenue); font-size:20px; cursor:pointer; line-height:1; transition:transform .16s var(--ease-premium), color .2s, border-color .2s; }
.wiz__rm:hover{ color:#ff8a8a; border-color:rgba(255,138,138,.4); }
.wiz__rm:active{ transform:scale(.9); }
.wiz__addlink{ display:inline-flex; align-items:center; gap:8px; background:none; border:1px dashed rgba(255,255,255,.14); color:var(--lime); font-family:var(--ff-title); font-weight:600; font-size:14px; padding:11px 16px; border-radius:11px; cursor:pointer; transition:transform .16s var(--ease-premium), background .2s, border-color .2s; }
.wiz__addlink svg{ width:16px; height:16px; }
.wiz__addlink:hover{ background:rgba(200,255,51,.06); border-color:var(--lime); }
.wiz__addlink:active{ transform:scale(.97); }
.wiz__hint{ color:var(--tenue); font-size:13px; margin:2px 0 12px; line-height:1.5; }

.wiz__next{ margin-top:18px; width:100%; background:var(--lime); color:#0a0a0a; font-family:var(--ff-title); font-weight:700; font-size:16px; padding:16px; border:0; border-radius:13px; cursor:pointer; box-shadow:0 10px 26px rgba(200,255,51,.24); transition:transform .16s var(--ease-premium), filter .2s, box-shadow .25s; }
.wiz__next:hover{ filter:brightness(1.05); box-shadow:0 14px 34px rgba(200,255,51,.34); }
.wiz__next:active{ transform:scale(.98); }
.wiz__back{ background:none; border:0; color:var(--tenue); font-family:var(--ff-body); font-size:13.5px; cursor:pointer; padding:10px 2px 2px; display:block; margin:2px auto 0; }
.wiz__back:hover{ color:#fff; }
.wiz__legal{ color:rgba(255,255,255,.4); font-size:12px; margin-top:12px; line-height:1.5; }
.wiz__legal a{ color:var(--tenue); text-decoration:underline; }

.wiz__done{ text-align:center; padding:22px 0 8px; }
.wiz__badge{ width:64px; height:64px; border-radius:50%; margin:0 auto 20px; background:linear-gradient(140deg,var(--lime),#9fd400); display:grid; place-items:center; box-shadow:0 0 0 8px rgba(200,255,51,.12); animation:wizRv .5s var(--ease-premium) both; }
.wiz__badge svg{ width:30px; height:30px; stroke:#0a0a0a; }
.wiz__doneCta{ margin-top:22px; }

@media (prefers-reduced-motion:reduce){
  .rv,.wiz__linkrow,.wiz__stage > *,.wiz__aura i{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}
/* =================== /Wizard =================== */

/* ===================== Loader de entrada (firma SprintWeb) ===================== */
.swload{ position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:#0a0a0a; transition:opacity .55s var(--ease-premium), visibility .55s; }
.swload__logo{ display:flex; align-items:center; gap:.7rem; opacity:0; transform:translateY(9px) scale(.96); animation:swlIn .6s var(--ease-premium) .05s forwards; }
.swload__logo img{ width:clamp(46px,8vw,60px); height:auto; border-radius:13px; }
.swload__word{ font-family:var(--ff-title); font-weight:800; letter-spacing:-.5px; color:#fff; font-size:clamp(1.5rem,5vw,2.1rem); line-height:1; }
.swload__word span{ font-weight:400; color:#e9eaec; }
.swload__line{ height:2px; width:min(190px,42vw); background:var(--lime); border-radius:2px; transform:scaleX(0); transform-origin:left center; box-shadow:0 0 12px rgba(200,255,51,.5); animation:swlLine .7s var(--ease-premium) .28s forwards; }
@keyframes swlIn{ to{ opacity:1; transform:none; } }
@keyframes swlLine{ to{ transform:scaleX(1); } }
.swload.is-done{ opacity:0; visibility:hidden; }
html:not(.has-loader) .swload{ display:none; }

/* Hero: reveal de entrada cuando sube la cortina */
html.has-loader .hero__copy > *, html.has-loader .hero__visual{ opacity:0; transform:translateY(14px); }
body.hero-ready .hero__copy > *{ animation:heroRise .7s var(--ease-premium) forwards; }
body.hero-ready .hero__visual{ animation:heroRise .8s var(--ease-premium) .15s forwards; }
body.hero-ready .hero__copy > *:nth-child(1){ animation-delay:.02s; }
body.hero-ready .hero__copy > *:nth-child(2){ animation-delay:.10s; }
body.hero-ready .hero__copy > *:nth-child(3){ animation-delay:.18s; }
body.hero-ready .hero__copy > *:nth-child(4){ animation-delay:.26s; }
body.hero-ready .hero__copy > *:nth-child(5){ animation-delay:.34s; }
@keyframes heroRise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .swload{ display:none; }
  html.has-loader .hero__copy > *, html.has-loader .hero__visual{ opacity:1 !important; transform:none !important; }
}
/* =================== /Loader =================== */

/* ===== Hero móvil: texto compacto arriba + maqueta GRANDE a sangre abajo =====
   (ref. que le gustó a Patrick: dark + CTA lime + screenshot grande angulado).
   La maqueta es genérica "tunegocio.cl" — NO trabajos reales. */
@media (max-width:600px){
  .hero{ overflow:hidden; padding-bottom:0; }
  .hero__inner{ display:flex; flex-direction:column; gap:1.3rem; }
  .hero__copy{ order:0; }
  .hero__title{ font-size:clamp(2rem,8.4vw,2.8rem); }
  .hero__lead{ font-size:1rem; line-height:1.5; margin-bottom:.2rem; }
  .hero__note{ display:none; }                 /* quita ruido; el dato vive en precios */
  /* Visual SIEMPRE visible en móvil (sin depender de la reveal por JS) y PLANO (sin tilt 3D). */
  .hero__visual{ order:1; max-width:none; width:auto; margin:.5rem -22px -1px;
    opacity:1 !important; transform:none !important; perspective:none; }
  .hero__visual .browser{ transform:none !important; transform-style:flat;
    border-radius:16px 16px 0 0;
    box-shadow:0 -10px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(200,255,51,.16); }
  .hero__visual .browser::after{ display:none; }   /* apaga el halo 3D (translateZ) en móvil */
  .browser__img{ display:block; width:100%; }
  .hero__badge{ transform:scale(.85); }
}

/* ═══════════════════════════════════════════════════════════════
   Widget de Matías — upgrade a LIQUID GLASS (mismo lenguaje del visor de propuesta).
   Solo estética; el motor (main.js) y sus IDs/clases quedan intactos.
   ═══════════════════════════════════════════════════════════════ */
/* FAB: pill lima con halo de glow (firma del componente de referencia) */
.matias__btn{ position:relative; box-shadow:0 12px 30px rgba(200,255,51,.28); }
.matias__btn::before{ content:""; position:absolute; inset:-6px; border-radius:50px; z-index:-1;
  background:var(--lime); opacity:.22; filter:blur(16px); transition:opacity .3s var(--ease-premium); }
.matias__btn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(200,255,51,.4); }
.matias__btn:hover::before{ opacity:.4; }
/* Panel: vidrio esmerilado con realce interior */
.matias__panel{ background:linear-gradient(180deg,rgba(20,20,24,.82),rgba(12,12,14,.9));
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.1); border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(200,255,51,.05), inset 0 1px rgba(255,255,255,.08); }
.matias__head{ background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08); }
/* Avatar grande con anillo + punto "en línea" verde (como el componente de referencia) */
.matias__ava--lg{ position:relative; background:var(--lime); color:#0a0a0a;
  box-shadow:0 6px 20px rgba(200,255,51,.3); }
.matias__ava--lg::after{ content:""; position:absolute; bottom:-1px; right:-1px; width:12px; height:12px;
  border-radius:50%; background:#34d399; border:2.5px solid #0d0d10; }
.matias__status i{ background:#34d399; box-shadow:0 0 8px #34d399; }
.matias__body{ background:radial-gradient(120% 60% at 100% 0%,rgba(200,255,51,.06),transparent 60%); }
/* Burbujas: vidrio (Matías) y lima (cliente) — igual que el visor */
.matias__bubble{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:15px 15px 15px 5px; animation:matbubIn .35s var(--ease-premium); }
.matias__bubble--me{ border-radius:15px 15px 5px 15px; box-shadow:0 6px 18px rgba(200,255,51,.18); }
@keyframes matbubIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
/* Input con foco lima suave + botón enviar con glow */
.matias__input:focus{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(200,255,51,.14); }
.matias__send{ box-shadow:0 4px 16px rgba(200,255,51,.2);
  transition:transform .22s var(--ease-premium), box-shadow .25s ease; }
.matias__send:hover{ transform:translateY(-1px) scale(1.06); box-shadow:0 10px 26px rgba(200,255,51,.34); }
@media(prefers-reduced-motion:reduce){ .matias__bubble{ animation:none } }