/* ============================================================
   TU PLANTILLA v2 — chrome.css · lienzo, nav, preloader, sticky,
   burbuja, footer
   ============================================================ */

/* ---------- EL LIENZO (capa fija de piezas de página) ----------
   Vive SOBRE los fondos de sección y BAJO el contenido:
   .lienzo z:1 · .section>.container z:2 (lo fija esta hoja) */
.lienzo{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.section>.container,.subsec>.container{position:relative;z-index:2}
.pz{position:absolute;will-change:transform;opacity:.8}
.lienzo.is-static .pz{opacity:.35}

/* Ventana retro fantasma (esperando ser llenada) */
.pz--win{width:150px;height:100px;border:2px solid rgba(36,64,255,.34);border-radius:12px;background:rgba(36,64,255,.05)}
.pz--win::before{content:"";position:absolute;top:0;left:0;right:0;height:20px;border-bottom:2px solid rgba(36,64,255,.34);background:rgba(36,64,255,.14);border-radius:10px 10px 0 0}
.pz--win.pz--sm{width:100px;height:70px}
.pz--win.pz--sm::before{height:14px}

/* Bloques esqueleto (página en construcción) */
.pz--skel{width:120px;display:flex;flex-direction:column;gap:8px}
.pz--skel i{display:block;height:9px;border-radius:5px;background:rgba(120,124,150,.3)}
.pz--skel i:nth-child(1){width:70%;height:13px;background:rgba(36,64,255,.3)}
.pz--skel i:nth-child(2){width:100%}
.pz--skel i:nth-child(3){width:85%}

/* Píldora / botón suelto */
.pz--pill{width:110px;height:36px;border-radius:999px;border:2px solid rgba(36,64,255,.4);background:rgba(36,64,255,.1)}
.pz--pill.pz--llena{background:rgba(36,64,255,.55);border-color:transparent}

/* Círculo + */
.pz--plus{width:34px;height:34px;border-radius:50%;background:rgba(36,64,255,.5);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem;font-family:var(--f-display)}
.pz--plus::before{content:"+"}

/* Cursor viajero */
.pz--cursor{width:22px;height:22px}
.pz--cursor svg{width:100%;height:100%;filter:drop-shadow(2px 3px 0 rgba(9,9,14,.3))}

/* Anillo fino (acento sutil, ex-dona) */
.pz--ring{width:120px;height:120px;border-radius:50%;border:2px dashed rgba(36,64,255,.26)}

/* Piezas de deriva (fantasmas casi invisibles que cruzan lento, las crea
   lienzo.js) — SOLO desktop: bajo 1080px no existen ni se ven */
.pz--deriva{display:none;opacity:.13}
@media(min-width:1080px){.pz--deriva{display:block}}

@media(max-width:767.9px){
  .pz--win,.pz--ring{display:none}       /* menos piezas en móvil */
  .pz--skel{width:90px}
}

/* ---------- Preloader (negro, firma dibujándose) ---------- */
.preloader{position:fixed;inset:0;z-index:999;background:#060608;display:grid;place-items:center;transition:opacity .5s,visibility .5s}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
html:not(.js) .preloader{display:none}   /* sin JS nadie lo apagaba: home 100% negro */
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.preloader-logo-img{
  width:min(180px,42vw);height:auto;
  clip-path:inset(-8% 102% -8% -2%);opacity:.35;
  filter:drop-shadow(0 8px 24px rgba(36,64,255,.4));
  transition:clip-path .5s cubic-bezier(.6,.05,.25,1),opacity .3s;
}
.preloader.is-drawn .preloader-logo-img{clip-path:inset(-8% -2% -8% -2%);opacity:1}
.preloader-word{font-family:var(--f-display);font-weight:800;font-stretch:125%;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,230,.6);opacity:0;transform:translateY(8px);transition:.5s .15s}
.preloader.is-worded .preloader-word{opacity:1;transform:none}

/* ---------- Nav (crema esmerilada, contorno negro) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;background:rgba(244,239,230,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1.5px solid rgba(9,9,14,.12);transition:box-shadow .35s}
.nav--tight{box-shadow:0 6px 24px rgba(9,9,14,.07)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:.9rem;height:var(--nav-h);max-width:1320px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.nav-logo{display:flex;align-items:center;gap:.55rem;flex:0 0 auto;min-width:0}
.nav-logo svg,.nav-logo img{height:34px;width:auto}
.nav-logo-name{font-family:var(--f-display);font-weight:800;font-stretch:125%;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#09090e;white-space:nowrap}
.nav-menu{display:none;align-items:center;gap:1.5rem}
.nav-menu a{font-family:var(--f-display);font-weight:700;font-size:.86rem;color:rgba(26,26,34,.7);transition:color .25s;white-space:nowrap}
.nav-menu a:hover{color:var(--azul)}
.nav-cta{flex:0 0 auto;min-height:44px} /* alto táctil mínimo */
.nav-burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px solid rgba(9,9,14,.2);flex:0 0 auto}
.nav-burger span{position:relative;width:18px;height:2px;background:#1a1a22;border-radius:2px;transition:.3s}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#1a1a22;border-radius:2px;transition:.3s}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-burger.is-open span{background:transparent}
.nav-burger.is-open span::before{top:0;transform:rotate(45deg);background:var(--azul)}
.nav-burger.is-open span::after{top:0;transform:rotate(-45deg);background:var(--azul)}
@media(min-width:1080px){.nav-menu{display:flex}.nav-burger{display:none}}
@media(max-width:430px){
  .nav-logo-name{display:none}
  .nav-inner{gap:.6rem}
  .nav-cta{padding:.55rem .9rem;font-size:.8rem}
}
@media(max-width:1079.9px){
  .nav-menu{position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(244,239,230,.97);backdrop-filter:blur(20px);border-bottom:1.5px solid rgba(9,9,14,.12);flex-direction:column;align-items:flex-start;gap:0;padding:1rem clamp(1rem,4vw,2rem) 1.6rem;transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;transition:.35s cubic-bezier(.2,.8,.3,1),visibility 0s linear .35s}
  .nav-menu.is-open{display:flex;transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
  .nav-menu a{padding:.85rem 0;font-size:1.05rem;width:100%;border-bottom:1px solid rgba(9,9,14,.08)}
  .nav-menu a:last-child{border-bottom:0}
}

/* ---------- Sticky CTA móvil ---------- */
.sticky-cta{position:fixed;left:.8rem;right:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom,0px));z-index:140;display:flex;gap:.6rem;transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.sticky-cta.is-visible{transform:none}
.sticky-cta .btn{flex:1;justify-content:center;box-shadow:0 12px 34px rgba(9,9,14,.4)}
@media(min-width:1080px){.sticky-cta{display:none}}

/* ---------- Burbuja WhatsApp ---------- */
.wsp-bubble{position:fixed;right:1rem;bottom:4.6rem;z-index:145;transition:opacity .3s,transform .3s}
@media(min-width:1080px){.wsp-bubble{bottom:1.4rem}}
/* Cuando la barra sticky (también un CTA de WhatsApp) está arriba en móvil,
   el FAB redundante se aparta para no amontonar la esquina. */
@media(max-width:1079.9px){body.sticky-on .wsp-bubble{opacity:0;pointer-events:none;transform:translateY(12px)}}
.wsp-fab{width:56px;height:56px;border-radius:50%;background:#25d366;border:2px solid #09090e;display:grid;place-items:center;box-shadow:var(--sombra-dura);transition:transform .3s cubic-bezier(.2,.9,.3,1.5)}
.wsp-fab:hover{transform:scale(1.07)}
.wsp-fab svg{width:28px;height:28px;fill:#fff}
.wsp-panel{position:absolute;bottom:calc(100% + .8rem);right:0;width:min(320px,calc(100vw - 2rem));background:#fff;border:2px solid #09090e;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);color:#1a1a22}
.wsp-head{background:linear-gradient(135deg,#128c4b,#25d366);padding:.9rem 1.1rem;color:#fff}
.wsp-head strong{font-family:var(--f-display);font-size:.95rem;display:block}
.wsp-head span{font-size:.78rem;opacity:.9}
.wsp-body{padding:1rem}
.wsp-msg{background:#f4efe6;border:1px solid rgba(9,9,14,.12);border-radius:12px 12px 12px 4px;padding:.7rem .9rem;font-size:.86rem;color:rgba(26,26,34,.8);margin-bottom:.8rem}
.wsp-input{width:100%;background:#fff;border:1.5px solid rgba(9,9,14,.2);border-radius:12px;padding:.75rem .9rem;color:#1a1a22;font:inherit;font-size:.9rem;resize:none;min-height:64px}
.wsp-input:focus{outline:none;border-color:#25d366}
.wsp-send{margin-top:.7rem;width:100%;background:#25d366;color:#fff;font-family:var(--f-display);font-weight:700;padding:.75rem;border-radius:var(--rad-pill);transition:.25s}
.wsp-send:hover{filter:brightness(1.08)}

/* ---------- Footer (negro) ---------- */
.footer{position:relative;z-index:2;border-top:2px solid var(--azul);background:#060608;color:#f4efe6;padding:3.2rem 0 6.5rem}
@media(min-width:1080px){.footer{padding-bottom:2.8rem}}
.footer-grid{display:grid;gap:2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}   /* 4 bloques → 2x2, sin huérfano */
/* 4ª columna (Guías y precios): recién a partir de 1080px, donde hay ancho real
   para los títulos largos de las guías sin que queden en 3 líneas apretadas.
   Entre 768 y 1079 la columna baja como 4ª celda de la grilla de 3. */
@media(min-width:1080px){.footer-grid{grid-template-columns:1.2fr .9fr 1.15fr 1fr}}
.footer .nav-logo-name{color:#f4efe6}
.footer-guino{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:#4d6bff;margin-top:.8rem}
.footer h4,.footer .footer-h{font-family:var(--f-display);font-weight:800;font-stretch:120%;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,239,230,.66);margin-bottom:.9rem}
.footer-links a,.footer-links button{display:flex;align-items:center;min-height:44px;padding:.2rem 0;color:rgba(244,239,230,.75);font-size:.92rem;transition:.25s;background:none;border:0;cursor:pointer;text-align:left}
.footer-links a:hover,.footer-links button:hover{color:#4d6bff}
.footer-base a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .25s}
.footer-base a:hover,.footer-base a:focus-visible{color:#4d6bff}
.footer-base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(244,239,230,.14);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.78rem;color:rgba(244,239,230,.5)}

/* El foco de teclado no puede quedar bajo la barra fija (WCAG 2.4.11).
   Medido: pasaba en 10 de las 11 páginas. */
:focus-visible{ scroll-margin-top:calc(var(--nav-h,65px) + 16px); scroll-margin-bottom:96px }