/* KLIKKA · Dirección 3 "Comercial premium" · base compartida de las tres propuestas.
   Colores oficiales: amarillo #FFBE2C, rojo #B92428, negro tinta #11161C, crema #FEF7E5.
   Neutros auxiliares (propuestos): carbón #1C232B / #2C3641 / #A9B0B8.
   Tipografía: Bricolage Grotesque (títulos) + Manrope (texto). Mobile-first. */
:root{--y:#FFBE2C;--r:#B92428;--k:#11161C;--c:#FEF7E5;--p1:#1C232B;--p2:#2C3641;--p3:#A9B0B8;--w:#fff;
--fd:'Bricolage Grotesque','Arial Black',sans-serif;--fb:'Manrope',system-ui,sans-serif;--hs:4px 4px 0 var(--k);--b:2px solid var(--k)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:500 16px/1.55 var(--fb);color:var(--k);background:var(--c);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.w{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--fd);font-weight:800;line-height:1.02;letter-spacing:-.02em}
h1{font-size:clamp(38px,9vw,76px)}
h2{font-size:clamp(30px,6vw,52px)}
h3{font-size:22px}
.eyebrow{font:800 12px var(--fb);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.eyebrow::before{content:"";width:14px;height:14px;background:var(--y);border:2px solid var(--k);transform:rotate(45deg)}
.lead{font-size:18px;max-width:560px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 16px var(--fd);padding:14px 24px;border:var(--b);border-radius:999px;background:var(--y);color:var(--k);box-shadow:3px 3px 0 var(--k);cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--k)}
.btn.r{background:var(--r);color:var(--c)}.btn.k{background:var(--k);color:var(--c);box-shadow:3px 3px 0 var(--y);border-color:var(--k)}
.btn.g{background:var(--c)}.btn svg{width:20px;height:20px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.sticker{display:inline-block;background:var(--y);color:var(--k);font:800 13px var(--fd);padding:6px 14px;border:var(--b);border-radius:999px;box-shadow:2px 2px 0 var(--k);transform:rotate(-4deg)}
.photo{border:var(--b);border-radius:18px;overflow:hidden;box-shadow:var(--hs);background:var(--p1);position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;left:10px;bottom:10px;background:var(--c);border:var(--b);border-radius:999px;padding:4px 12px;font:800 12px var(--fb)}
.card{background:var(--w);border:var(--b);border-radius:18px;box-shadow:var(--hs);padding:22px;display:flex;flex-direction:column;gap:10px}
.card p{font-size:15px}
.ico{width:48px;height:48px;border:var(--b);border-radius:12px;background:var(--y);display:flex;align-items:center;justify-content:center;font:800 20px var(--fd)}
.sec{padding:64px 0}
.head{margin-bottom:32px;display:flex;flex-direction:column;gap:12px}
.faq details{border:var(--b);border-radius:14px;background:var(--w);box-shadow:3px 3px 0 var(--k);margin-bottom:14px}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font:800 17px var(--fd);display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:24px;line-height:1}.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px}
.note{font:600 12px var(--fb);opacity:.65}
footer{background:var(--k);color:var(--c);padding:40px 0}
footer .w{display:flex;flex-direction:column;gap:18px}
footer a{text-decoration:underline;text-underline-offset:3px}
.todo{background:var(--y);color:var(--k);font:700 12px var(--fb);padding:6px 20px;text-align:center;border-bottom:var(--b)}
@media(min-width:800px){.w{padding:0 32px}.sec{padding:96px 0}footer .w{flex-direction:row;justify-content:space-between;align-items:center}}