/* Pantalla de entrada de «Conoce CLAQUERA»: una frase antes de ver la web */
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-pending,html.intro-pending body{background:#111}html.intro-pending .wrap{visibility:hidden}
.intro{--i-bg:#111;--i-ink:#f3f0ea;--i-red:#d92f16;--i-dim:rgba(243,240,234,.6);position:fixed;inset:0;z-index:1000;background:var(--i-bg);color:var(--i-ink);font-family:Arial,Helvetica,sans-serif;display:grid;grid-template-rows:1fr auto;overflow:hidden;transition:transform 1s cubic-bezier(.75,0,.2,1)}
.intro.open{transform:translateY(-102%)}
.intro:focus{outline:none}
.intro-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;filter:grayscale(1) contrast(1.05);opacity:.16}
.intro-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(17,17,17,.2),#111 80%)}
.intro-inner{position:relative;align-self:center;width:min(100% - 40px,760px);margin:0 auto;padding:calc(70px + env(safe-area-inset-top,0px)) 0 20px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.intro-label{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--i-red);color:var(--i-red);padding:8px 12px 7px;font-weight:900;font-size:12px;letter-spacing:.24em}
.intro-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--i-red);animation:iblink 1.4s steps(2) infinite}
@keyframes iblink{50%{opacity:.2}}
.intro-text{margin:0;max-width:16ch;font-weight:900;font-size:clamp(28px,min(7.4vw,7.2vh),62px);line-height:.98;letter-spacing:-.045em;text-transform:uppercase;text-wrap:pretty}
.intro-text .red{color:var(--i-red)}
.intro-text .w{display:inline-block;opacity:0;transform:translateY(14px);animation:iw .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--k)*70ms + 250ms)}
@keyframes iw{to{opacity:1;transform:none}}
.intro-small{margin:0;max-width:44ch;color:var(--i-dim);font-size:17px;line-height:1.45;opacity:0;animation:iw .6s ease forwards;animation-delay:var(--d,1.6s)}
.intro-tag{margin:6px 0 0;font-weight:900;font-size:14px;letter-spacing:.3em;color:var(--i-ink);opacity:0;animation:iw .6s ease forwards;animation-delay:var(--d2,2s)}
.intro-tag b{color:var(--i-red);font-weight:900}
.intro-foot{position:relative;width:min(100% - 40px,760px);margin:0 auto;padding:0 0 calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-start;gap:12px;opacity:0;animation:iw .6s ease forwards;animation-delay:var(--d3,2.3s)}
.intro-btn{min-height:56px;padding:0 30px;border:2px solid var(--i-red);background:var(--i-red);color:#fff;font:900 15px Arial,Helvetica,sans-serif;letter-spacing:.16em;cursor:pointer;transition:background .2s,color .2s}
.intro-btn:hover{background:transparent;color:var(--i-red)}
.intro-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.intro-hint{font-size:12px;color:var(--i-dim);letter-spacing:.06em}
@media(max-width:760px){.intro-btn{width:100%}.intro-small{font-size:16px}.intro-tag{font-size:12px;letter-spacing:.2em}.intro-text{max-width:none}}
@media(max-height:700px){.intro-inner{gap:16px;padding-top:calc(60px + env(safe-area-inset-top,0px))}.intro-small{font-size:15px}}
@media(prefers-reduced-motion:reduce){.intro{transition:opacity .4s}.intro.open{transform:none;opacity:0}.intro-text .w,.intro-small,.intro-tag,.intro-foot{animation:none;opacity:1;transform:none}.intro-label::before{animation:none}}