/* ==========================================================================
   Volcana Labs — Cookies, Accesibilidad y páginas legales
   ========================================================================== */

/* Enlace "saltar al contenido" (accesibilidad teclado) */
.skip-link { position:fixed; z-index:999; top:-100px; left:16px; padding:12px 20px; border-radius:0 0 12px 12px; background:var(--violet); color:#fff; font-weight:800; font-size:13px; text-decoration:none; transition:top .2s ease; }
.skip-link:focus { top:0; }

/* Foco visible consistente para navegación por teclado (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--violet-light); outline-offset:3px; border-radius:4px;
}

/* ==========================================================================
   BANNER DE COOKIES
   ========================================================================== */
.cookie-banner { position:fixed; z-index:200; left:16px; right:16px; bottom:16px; max-width:640px; margin:0 auto; padding:22px 24px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(13,11,18,.97); backdrop-filter:blur(20px); box-shadow:0 30px 90px rgba(0,0,0,.5); color:#fff; font-family:Arial,Helvetica,sans-serif; transform:translateY(140%); opacity:0; transition:transform .4s ease, opacity .4s ease; }
.cookie-banner.is-visible { transform:translateY(0); opacity:1; }
.cookie-banner[hidden] { display:none; }
.cookie-banner h2 { margin:0 0 8px; font-size:16px; letter-spacing:-.02em; }
.cookie-banner p { margin:0 0 16px; color:#c7c1cb; font-size:13px; line-height:1.55; }
.cookie-banner p a { color:var(--violet-light); text-decoration:underline; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:10px; }
.cookie-actions button { flex:1 1 auto; min-height:44px; padding:0 16px; border-radius:999px; font-size:13px; font-weight:800; cursor:pointer; border:1px solid rgba(255,255,255,.24); background:transparent; color:#fff; transition:.2s ease; }
.cookie-actions button:hover { border-color:var(--violet-light); background:rgba(112,71,235,.14); }
.cookie-actions .cookie-accept-all { border:0; background:linear-gradient(135deg,#865aff,#5d30dd); box-shadow:0 12px 30px rgba(112,71,235,.35); }
.cookie-actions .cookie-accept-all:hover { transform:translateY(-1px); }

/* Panel de configuración de cookies (modal) */
.cookie-modal-overlay { position:fixed; z-index:210; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(5,4,8,.72); backdrop-filter:blur(4px); }
.cookie-modal-overlay.is-visible { display:flex; }
.cookie-modal { width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:28px; border:1px solid rgba(255,255,255,.16); border-radius:22px; background:#121017; color:#fff; font-family:Arial,Helvetica,sans-serif; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.cookie-modal h2 { margin:0 0 6px; font-size:20px; letter-spacing:-.03em; }
.cookie-modal>p { margin:0 0 20px; color:#a9a2b0; font-size:13px; line-height:1.55; }
.cookie-category { padding:16px 0; border-top:1px solid #29252e; }
.cookie-category-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cookie-category-head strong { font-size:14px; }
.cookie-category p { margin:8px 0 0; color:#a9a2b0; font-size:12.5px; line-height:1.55; }
.cookie-switch { position:relative; flex:0 0 auto; width:44px; height:26px; }
.cookie-switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.cookie-switch span { position:absolute; inset:0; border-radius:999px; background:#3a3442; transition:.2s ease; }
.cookie-switch span::before { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s ease; }
.cookie-switch input:checked + span { background:var(--violet); }
.cookie-switch input:checked + span::before { transform:translateX(18px); }
.cookie-switch input:disabled + span { background:#4a4353; opacity:.6; cursor:not-allowed; }
.cookie-modal-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cookie-modal-actions button { flex:1 1 auto; min-height:46px; padding:0 16px; border-radius:999px; font-size:13px; font-weight:800; cursor:pointer; border:1px solid rgba(255,255,255,.24); background:transparent; color:#fff; }
.cookie-modal-actions .cookie-save { border:0; background:linear-gradient(135deg,#865aff,#5d30dd); }
.cookie-modal-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; font-size:16px; cursor:pointer; }

/* ==========================================================================
   WIDGET DE ACCESIBILIDAD
   ========================================================================== */
.a11y-toggle { position:fixed; z-index:190; right:20px; bottom:20px; width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:linear-gradient(135deg,#865aff,#5d30dd); color:#fff; box-shadow:0 16px 40px rgba(112,71,235,.4); cursor:pointer; display:grid; place-items:center; font-size:24px; }
.a11y-toggle:hover { transform:translateY(-2px); }
.a11y-panel { position:fixed; z-index:191; right:20px; bottom:86px; width:min(320px,calc(100vw - 40px)); max-height:70vh; overflow-y:auto; padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:#121017; color:#fff; font-family:Arial,Helvetica,sans-serif; box-shadow:0 30px 90px rgba(0,0,0,.5); display:none; }
.a11y-panel.is-visible { display:block; }
.a11y-panel h2 { margin:0 0 14px; font-size:15px; }
.a11y-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid #29252e; }
.a11y-row:first-of-type { border-top:0; }
.a11y-row span { font-size:12.5px; color:#dcd6e4; }
.a11y-fontsize-controls { display:flex; align-items:center; gap:6px; }
.a11y-fontsize-controls button { width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; cursor:pointer; font-weight:800; }
.a11y-fontsize-controls button:hover { background:rgba(112,71,235,.18); }
.a11y-toggle-btn { position:relative; width:44px; height:26px; border-radius:999px; border:0; background:#3a3442; cursor:pointer; }
.a11y-toggle-btn::before { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s ease; }
.a11y-toggle-btn[aria-pressed="true"] { background:var(--violet); }
.a11y-toggle-btn[aria-pressed="true"]::before { transform:translateX(18px); }
.a11y-reset { width:100%; margin-top:14px; min-height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.24); background:transparent; color:#fff; font-size:12.5px; font-weight:800; cursor:pointer; }
.a11y-reset:hover { border-color:var(--violet-light); }

/* Modos de accesibilidad aplicados al <html> */
html.a11y-fs-2 body { font-size:112.5%; }
html.a11y-fs-3 body { font-size:125%; }
html.a11y-underline a { text-decoration:underline!important; }
html.a11y-contrast body { background:#000!important; color:#fff!important; }
html.a11y-contrast .section-light { background:#000!important; color:#fff!important; }
html.a11y-contrast .service-card { background:#000!important; border-color:#fff!important; }
html.a11y-contrast .work-grid figcaption span,html.a11y-contrast .section-intro>p:last-child,html.a11y-contrast .work-intro>p { color:#e8e8e8!important; }
html.a11y-contrast a,html.a11y-contrast .button-primary,html.a11y-contrast .header-cta { background:#000!important; color:#ffe500!important; border:2px solid #ffe500!important; box-shadow:none!important; }
html.a11y-contrast img { filter:grayscale(.15) contrast(1.05); }
html.a11y-reduce-motion *,html.a11y-reduce-motion *::before,html.a11y-reduce-motion *::after { animation:none!important; transition:none!important; }

@media (prefers-contrast: more) {
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline-width:3px; }
}

/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */
.legal-main { min-height:70vh; padding:150px clamp(24px,7vw,108px) 90px; background:var(--paper); color:#151219; }
.legal-main .legal-wrap { max-width:820px; margin:0 auto; }
.legal-main .legal-eyebrow { margin:0; color:var(--violet); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.legal-main h1 { margin:14px 0 8px; font-size:clamp(34px,5vw,52px); letter-spacing:-.04em; }
.legal-main .legal-updated { margin:0 0 40px; color:var(--muted); font-size:13px; }
.legal-main h2 { margin:40px 0 12px; font-size:22px; letter-spacing:-.02em; }
.legal-main h3 { margin:24px 0 8px; font-size:16px; }
.legal-main p,.legal-main li { color:#3a3442; font-size:15.5px; line-height:1.7; }
.legal-main ul,.legal-main ol { padding-left:22px; }
.legal-main a { color:var(--violet); text-decoration:underline; }
.legal-main table { width:100%; table-layout:fixed; margin:16px 0; border-collapse:collapse; font-size:13.5px; }
.legal-main th,.legal-main td { padding:10px 12px; border:1px solid #ddd7e2; text-align:left; vertical-align:top; }
.legal-main th { width:27%; }
.legal-main td,.legal-main td a { overflow-wrap:anywhere; word-break:normal; }
.legal-main th { background:#ece8f1; }
.legal-placeholder { padding:2px 8px; border-radius:6px; background:#ffe9c7; color:#7a4a00; font-weight:800; font-size:.92em; }
.legal-back { display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-weight:800; font-size:13px; }
.legal-cookie-link { background:none; border:0; padding:0; font:inherit; color:var(--violet); text-decoration:underline; cursor:pointer; }

@media(max-width:760px){ .legal-main{width:100%;overflow-x:hidden;padding:120px 20px 60px} .legal-main th{width:39%;padding:10px} .legal-main td{padding:10px} .a11y-panel{right:12px;bottom:80px} .a11y-toggle{right:14px;bottom:14px} .cookie-banner{left:10px;right:10px;bottom:10px;padding:18px} }