/* Nylanda's Finally Clean · componentes compartidos por todas las opciones.
   Cada página puede ajustar los colores con estas variables. */
:root{
  --nyl-blue:#006cb7;--nyl-yellow:#fec810;--nyl-navy:#0b2545;
  --nyl-fab-bg:var(--nyl-yellow);--nyl-fab-ink:var(--nyl-navy);
  --nyl-lang-bg:rgba(11,37,69,.08);--nyl-lang-ink:inherit;--nyl-lang-on:#fff;--nyl-lang-on-ink:var(--nyl-navy);
}

/* Mientras se detecta el idioma (solo si el navegador está en español) */
.nyl-wait body{opacity:0;animation:nyl-show 0s 1.6s forwards}
@keyframes nyl-show{to{opacity:1}}
body{transition:opacity .25s}
main{overflow-x:clip}

/* Enlace para saltar al contenido */
.nyl-skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.nyl-skip:focus{top:12px}
:focus-visible{outline:3px solid var(--nyl-yellow);outline-offset:3px}

/* Marca: logo + nombre (tipografía condensada como en la tarjeta) */
.nyl-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.nyl-brand svg{display:block;flex:none}
.nyl-word{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;line-height:.92;letter-spacing:.1px}
.nyl-word span{display:block}

/* Selector de idioma */
.nyl-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--nyl-lang-bg);color:var(--nyl-lang-ink);font:700 12.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.6px}
.nyl-lang button{font:inherit;color:inherit;letter-spacing:inherit;border:0;background:transparent;padding:7px 10px;border-radius:999px;cursor:pointer;opacity:.72;transition:background .2s,color .2s,opacity .2s}
.nyl-lang button:hover{opacity:1}
.nyl-lang button[aria-pressed="true"]{background:var(--nyl-lang-on);color:var(--nyl-lang-on-ink);opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* Redes sociales */
.nyl-social{display:inline-flex;gap:8px;align-items:center}
.nyl-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:inherit;border:1.5px solid currentColor;opacity:.85;transition:transform .2s,opacity .2s,background .2s,color .2s}
.nyl-social a:hover{opacity:1;transform:translateY(-2px)}
.nyl-social svg{width:18px;height:18px}
.nyl-social a[hidden]{display:none}

/* Botón flotante de llamada */
.nyl-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--nyl-fab-ink)}
.nyl-fab-btn{position:relative;width:62px;height:62px;border-radius:50%;background:var(--nyl-fab-bg);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .2s}
.nyl-fab-btn::before,.nyl-fab-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--nyl-fab-bg);animation:nyl-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.nyl-fab-btn::after{animation-delay:1.3s}
.nyl-fab-btn svg{width:27px;height:27px;animation:nyl-wiggle 5s ease-in-out 2s infinite}
.nyl-fab:hover .nyl-fab-btn{transform:scale(1.07)}
.nyl-fab-label{background:#fff;color:#0b2545;font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;padding:11px 15px;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.18);white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .3s,transform .3s;pointer-events:none}
.nyl-fab-label small{display:block;font-weight:600;color:#56657a;font-size:12px;margin-top:2px}
.nyl-fab:hover .nyl-fab-label,.nyl-fab--hint .nyl-fab-label,.nyl-fab:focus-visible .nyl-fab-label{opacity:1;transform:none}
@keyframes nyl-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
@keyframes nyl-wiggle{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(0)}}
@media (max-width:640px){.nyl-fab{right:14px;bottom:14px}.nyl-fab-btn{width:56px;height:56px}.nyl-fab-label{display:none}}

/* Aparición al hacer scroll (solo con JS; sin JS todo se ve) */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-reveal="left"]{transform:translateX(-34px)}
.js [data-reveal="right"]{transform:translateX(34px)}
.js [data-reveal="zoom"]{transform:scale(.94)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Logo animado: la casa y la onda se dibujan, la escoba barre, los brillos titilan */
.nyl-anim svg{overflow:visible}
.nyl-anim .nyl-line{stroke-dasharray:1;stroke-dashoffset:1;animation:nyl-draw 2.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.nyl-anim .nyl-broom{transform-box:view-box;transform-origin:554px 141px;opacity:0;animation:nyl-fade .6s 1.3s forwards,nyl-sweep 3.2s ease-in-out 2.1s infinite}
.nyl-anim .nyl-swish path{opacity:0;animation:nyl-swish 3.2s ease-in-out 2.1s infinite}
.nyl-anim .nyl-swish path:nth-child(2){animation-delay:2.25s}
.nyl-anim .nyl-swish path:nth-child(3){animation-delay:2.4s}
.nyl-anim .nyl-dots circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:nyl-twinkle 2.4s ease-in-out 2s infinite}
.nyl-anim .nyl-dots circle:nth-child(2){animation-delay:2.6s}
.nyl-anim .nyl-dots circle:nth-child(3){animation-delay:3.1s}
@keyframes nyl-draw{to{stroke-dashoffset:0}}
@keyframes nyl-fade{to{opacity:1}}
@keyframes nyl-sweep{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}}
@keyframes nyl-swish{0%,30%{opacity:0;transform:translateX(6px)}50%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateX(-4px)}}
@keyframes nyl-twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.5)}}

/* Formulario enviado */
.nyl-ok{display:grid;justify-items:center;align-content:center;text-align:center;gap:8px;padding:30px 10px;min-height:inherit;animation:nyl-pop .5s cubic-bezier(.2,.8,.3,1.2)}
.nyl-ok svg{color:#16a34a}
.nyl-ok b{font-size:22px}
.nyl-ok a{font-weight:800;color:inherit}
.nyl-ok small{opacity:.6;font-size:12px}
@keyframes nyl-pop{from{opacity:0;transform:scale(.92)}}

/* Barra de progreso de lectura */
.nyl-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--nyl-yellow);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .nyl-anim .nyl-line{stroke-dashoffset:0}
  .nyl-anim .nyl-broom,.nyl-anim .nyl-swish path,.nyl-anim .nyl-dots circle{opacity:1}
}

/* ---------- Celulares y tablets (iPhone, iPad, Android) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,input,select,textarea,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,108,183,.15)}
img{-webkit-user-drag:none}
.nyl-fab{bottom:calc(20px + env(safe-area-inset-bottom,0px));right:calc(20px + env(safe-area-inset-right,0px))}
@media (max-width:640px){.nyl-fab{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px))}}
@media (pointer:coarse),(max-width:640px){
  .nyl-lang button{min-height:38px;min-width:42px;padding:9px 12px}
  .nyl-social a{width:44px;height:44px}
  .nyl-social svg{width:19px;height:19px}
}
/* que el encabezado fijo no tape el título al saltar a una sección */
[id]{scroll-margin-top:90px}