/* ═══════════════════════════════════════════════════════════ CLAUDE DESIGN · tokens.css Base de todos los sitios de clientes MATIICORE. Elige la dirección con ═══════════════════════════════════════════════════════════ */ /* ── Reset ── */ *{box-sizing:border-box;margin:0;padding:0} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} body{-webkit-font-smoothing:antialiased;font-family:var(--font-body);background:var(--bg);color:var(--text)} #wrap{overflow-x:clip;background:var(--bg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} ::selection{background:var(--accent);color:var(--on-accent)} /* ── DIRECCIÓN 1 · "acero" (Jack-style: oscuro, degradado metálico) ── */ body[data-theme="acero"]{ --bg:#0C0C0C; --surface:#161616; --text:#D7E2EA; --muted:rgba(215,226,234,.55); --accent:#B600A8; --on-accent:#fff; --grad-heading:linear-gradient(180deg,#646973 0%,#BBCCD7 100%); --grad-cta:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%); --font-display:'Kanit',sans-serif; --font-body:'Kanit',sans-serif; --radius-card:clamp(28px,4.5vw,60px); --radius-img:clamp(20px,3.5vw,48px); } /* ── DIRECCIÓN 2 · "cine" (negro profundo, rojo, grano, editorial) ── */ body[data-theme="cine"]{ --bg:#050505; --surface:#0b0b0c; --text:#ece8e1; --muted:#8f8d92; --accent:#e5484d; --on-accent:#fff; --grad-heading:linear-gradient(180deg,#5c5953 0%,#ece8e1 100%); --grad-cta:linear-gradient(123deg,#1c0304 4%,#e5484d 42%,#8c1013 74%,#be4c00 100%); --font-display:'Archivo',sans-serif; --font-body:'Archivo',sans-serif; --radius-card:8px; --radius-img:6px; } /* ── DIRECCIÓN 3 · "suizo" (claro, grilla estricta, tipografía enorme) ── */ body[data-theme="suizo"]{ --bg:#f4f2ee; --surface:#ffffff; --text:#111113; --muted:#6b6b70; --accent:#1740e0; --on-accent:#fff; --grad-heading:linear-gradient(180deg,#111113 0%,#4a4a52 100%); --grad-cta:linear-gradient(123deg,#0b1e78 0%,#1740e0 60%,#3f6cff 100%); --font-display:'Archivo',sans-serif; --font-body:'Inter',sans-serif; --radius-card:16px; --radius-img:10px; } /* ── DIRECCIÓN 4 · "calido" (marcas humanas: salud, terapia, artesanía) ── */ body[data-theme="calido"]{ --bg:#faf6f1; --surface:#ffffff; --text:#2a2018; --muted:#8a7d6e; --accent:#c05c2e; --on-accent:#fff; --grad-heading:linear-gradient(180deg,#6e5136 0%,#2a2018 100%); --grad-cta:linear-gradient(123deg,#7a3312 0%,#c05c2e 55%,#e08a3c 100%); --font-display:'Fraunces',serif; --font-body:'Inter',sans-serif; --radius-card:24px; --radius-img:16px; } /* ── Tipografía fluida ── */ .h-giant{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.01em;font-size:clamp(3rem,12vw,160px)} .h-hero {font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.02em;white-space:nowrap;text-align:center;width:100%;font-size:clamp(2.4rem,17vw,17.5rem)} .h-sec {font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:1.02;font-size:clamp(1.8rem,5vw,4rem)} .grad-text{background:var(--grad-heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .lead{font-weight:300;line-height:1.65;font-size:clamp(.95rem,1.8vw,1.25rem);color:var(--muted)} /* ── Layout ── */ .container{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)} .section{padding:clamp(70px,10vw,130px) 0} .rounded-top{border-radius:var(--radius-card) var(--radius-card) 0 0} /* ── Botones ── */ .btn-cta{ display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap; background:var(--grad-cta);color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25), 4px 4px 12px rgba(255,255,255,.18) inset; outline:2px solid rgba(255,255,255,.9);outline-offset:-3px; font-weight:500;text-transform:uppercase;letter-spacing:.12em; padding:14px 40px;font-size:clamp(.72rem,1.2vw,1rem); transition:transform .25s ease; } .btn-cta:hover{transform:scale(1.04)} .btn-cta:focus-visible{outline:3px solid var(--text);outline-offset:3px} .btn-ghost{ display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap; border:2px solid var(--text);color:var(--text); font-weight:500;text-transform:uppercase;letter-spacing:.18em; padding:12px 32px;font-size:clamp(.72rem,1.1vw,.95rem); transition:background .25s; } .btn-ghost:hover{background:rgba(128,128,128,.12)} /* ── Nav estándar ── */ nav.cd-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:24px clamp(20px,4vw,40px) 0} nav.cd-nav a{font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.68rem,1.6vw,1.3rem);transition:opacity .2s;white-space:nowrap} nav.cd-nav a:hover{opacity:.7} /* ── Accesibilidad ── */ @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} }