/* ============================================================
   DARTEL SOLUTIONS — Color & Type Foundations
   Tienda + Instaladores de seguridad y conectividad · Málaga
   ============================================================ */

/* ---- Webfonts (self-hosted brand files in fonts/) ---- */
@font-face {
  font-family: 'Sora';
  src: url('../brand/fonts/Sora-Variable.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../brand/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../brand/fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND COLOR (exact hex — do not invent) ---------- */
  --green:        #18A957; /* principal — acciones, acentos, marca */
  --green-deep:   #0C7C42; /* hondo — hover, bandas oscuras */
  --green-soft:   #7CE2A0; /* claro — detalles, fondos de acento suaves */
  --brand-grad:   linear-gradient(135deg, #18A957 0%, #0C7C42 100%);

  /* ---------- NEUTRALS ---------- */
  --ink:    #0F1714; /* texto principal */
  --paper:  #F4F5F2; /* fondo base */
  --paper-2:#FBFBF9; /* tarjetas y superficies */
  --line:   #E2E4DE; /* bordes y separadores */
  --white:  #FFFFFF;

  /* ---------- DERIVED INK TINTS (text hierarchy) ---------- */
  --ink-1:  #0F1714;                       /* fg primary */
  --ink-2:  #3C463F;                       /* fg secondary / body-muted */
  --ink-3:  #6B756D;                       /* fg tertiary / captions */
  --on-green: #FFFFFF;                      /* text on green bands */
  --on-green-soft: #0C5C32;                 /* text on green-soft chips */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:           var(--paper);
  --surface:      var(--paper-2);
  --surface-card: var(--white);
  --border:       var(--line);
  --border-strong:#D2D6CD;
  --band-dark:    var(--green-deep); /* large dark bands */

  /* ---------- FONT FAMILIES ---------- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (mobile-first; clamp to desktop) ---------- */
  --fs-hero:    clamp(2.5rem, 6vw + 0.5rem, 4.5rem);   /* 40 → 72 */
  --fs-h1:      clamp(2rem, 4vw + 0.5rem, 3rem);        /* 32 → 48 */
  --fs-h2:      clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); /* 24 → 36 */
  --fs-h3:      clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); /* 20 → 24 */
  --fs-lead:    clamp(1.125rem, 1vw + 0.5rem, 1.375rem);/* 18 → 22 */
  --fs-body:    1rem;       /* 16 */
  --fs-small:   0.875rem;   /* 14 */
  --fs-caption: 0.75rem;    /* 12 */
  --fs-mono:    0.8125rem;  /* 13 — specs / product codes */

  /* ---------- WEIGHTS ---------- */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-black: 800;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  /* ---------- TRACKING ---------- */
  --tr-hero:  -0.03em; /* negative on large display */
  --tr-head:  -0.01em;
  --tr-label:  0.08em; /* uppercase eyebrows */

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- RADII (medium rounded) ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- SHADOWS (soft) ---------- */
  --sh-xs: 0 1px 2px rgba(15,23,20,0.05);
  --sh-sm: 0 2px 6px rgba(15,23,20,0.06);
  --sh-md: 0 6px 18px rgba(15,23,20,0.08);
  --sh-lg: 0 16px 40px rgba(15,23,20,0.10);
  --sh-green: 0 10px 24px rgba(24,169,87,0.28); /* lifted green CTA */

  /* ---------- FOCUS ---------- */
  --focus-ring: 0 0 0 3px rgba(24,169,87,0.45);

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --container-narrow: 820px;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */

.h-hero {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: var(--fs-hero); line-height: var(--lh-tight);
  letter-spacing: var(--tr-hero); color: var(--ink-1); text-wrap: balance;
}
.h1 {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-h1); line-height: var(--lh-snug);
  letter-spacing: var(--tr-head); color: var(--ink-1); text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: var(--tr-head); color: var(--ink-1); text-wrap: balance;
}
.h3 {
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-1);
}
.lead {
  font-family: var(--font-body); font-weight: var(--w-reg);
  font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2);
}
.body {
  font-family: var(--font-body); font-weight: var(--w-reg);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2);
}
.small { font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-3); }
.eyebrow {
  font-family: var(--font-body); font-weight: var(--w-semi);
  font-size: var(--fs-caption); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--green-deep);
}
.mono, .spec {
  font-family: var(--font-mono); font-weight: var(--w-med);
  font-size: var(--fs-mono); letter-spacing: 0; color: var(--ink-2);
}
.price {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-h3); color: var(--ink-1);
}

/* ============================================================
   VENTANA CLICABLE (acordeón) — componente COMPARTIDO (todas las páginas)
   .svc-acc > .svc-win (.svc-win-btn: .wic icono/número + .wt título + .chev)
   > .svc-win-panel (colapsa con grid-rows). JS toggle en site.js.
   ============================================================ */
.svc-acc{display:flex;flex-direction:column;gap:14px}
.svc-win{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.svc-win:hover{border-color:var(--border-strong)}
.svc-win.open{border-color:var(--green);box-shadow:var(--sh-md)}
.svc-win-btn{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-body)}
.svc-win-btn .wic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(24,169,87,.1);color:var(--green-deep);flex:none;font-family:var(--font-display);font-weight:700;font-size:16px;transition:background .2s ease,color .2s ease}
.svc-win-btn .wic .ic{width:20px;height:20px}
.svc-win.open .svc-win-btn .wic{background:var(--green);color:#fff}
.svc-win-btn .wt{flex:1;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-1);line-height:1.3}
.svc-win-btn .chev{width:20px;height:20px;color:var(--ink-3);flex:none;transition:transform .28s ease,color .2s ease}
.svc-win.open .svc-win-btn .chev{transform:rotate(180deg);color:var(--green-deep)}
.svc-win-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.svc-win.open .svc-win-panel{grid-template-rows:1fr}
.svc-win-panel>.svc-win-inner{overflow:hidden;min-height:0}
.svc-win-panel p{margin:0;padding:0 20px 18px 72px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.svc-win-panel ul{margin:0;padding:0 20px 18px 72px;list-style:none;display:flex;flex-direction:column;gap:8px}
.svc-win-panel li{position:relative;padding-left:18px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.svc-win-panel li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--green)}
@media (max-width:880px){
  .svc-win-panel p,.svc-win-panel ul{padding-left:18px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){
  .svc-win,.svc-win-btn .wic,.svc-win-btn .chev,.svc-win-panel{transition:none}
}
/* acordeón estrecho centrado (zona de servicio, etc.) */
.zona-acc{max-width:820px;margin-inline:auto}

/* ---- Miniatura editorial de post (sin foto): tarjetas de blog en aprende y teaser del home ---- */
.post-thumb{aspect-ratio:16/9;border-bottom:1px solid var(--line);background:radial-gradient(120% 100% at 50% 0,#16231C 0%,#0C100E 72%);display:grid;place-items:center;position:relative;overflow:hidden}
.post-thumb::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(124,226,160,.2) 1px,transparent 1.4px);background-size:18px 18px;-webkit-mask-image:radial-gradient(circle at 50% 44%,#000,transparent 74%);mask-image:radial-gradient(circle at 50% 44%,#000,transparent 74%)}
.post-thumb .post-ic{position:relative;width:56px;height:56px;color:#fff;filter:drop-shadow(0 0 16px rgba(24,169,87,.6))}
.post-thumb .post-ic svg{width:100%;height:100%}

/* ---- Redes sociales en el footer ---- */
.ftr-social{display:flex;gap:6px;margin-top:16px}
.ftr .ftr-social a{width:44px;height:44px;min-height:0;padding:0;display:grid;place-items:center;border-radius:10px;color:rgba(255,255,255,.55);transition:color .2s ease,background .2s ease,transform .2s ease}
.ftr .ftr-social a:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px)}
.ftr-social svg{width:20px;height:20px}

/* ---- "Gestionar cookies" en el pie ---- */
.ftr-cookies{background:none;border:0;padding:10px 6px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-small);color:rgba(255,255,255,.55);transition:color .2s ease}
.ftr-cookies:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   BANNER DE COOKIES (consent.js) — Consent Mode v2
   ============================================================ */
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;justify-content:center;padding:14px;padding-bottom:max(14px,env(safe-area-inset-bottom));pointer-events:none;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease}
.ck-banner.show{opacity:1;transform:none;pointer-events:auto}
.ck-card{width:100%;max-width:560px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:18px 18px 16px}
.ck-title{font-family:var(--font-display);font-weight:var(--w-bold);font-size:16px;color:var(--ink-1);margin:0 0 4px}
.ck-text{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.ck-text a{display:inline-block;padding:8px 2px;margin:-4px 0;color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.ck-btn{font-family:var(--font-body);font-weight:var(--w-semi);font-size:14px;line-height:1;border-radius:var(--r-pill);padding:13px 18px;min-height:44px;cursor:pointer;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease}
.ck-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ck-primary{background:var(--green-deep);color:#fff}
.ck-primary:hover{background:#0a6a38}
.ck-ghost{background:var(--white);color:var(--ink-1);border-color:var(--border-strong)}
.ck-ghost:hover{background:var(--paper)}
.ck-link{background:none;color:var(--ink-3);padding:11px 10px;margin-left:auto}
.ck-link:hover{color:var(--ink-1)}
.ck-panel{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:12px}
.ck-panel[hidden]{display:none}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ck-row .ck-rt b{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-1)}
.ck-row .ck-rt small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.ck-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--green);flex:none;cursor:pointer}
.ck-fixed{color:var(--green);font-size:14px;flex:none}
.ck-save{align-self:flex-start;margin-top:2px}
@media (min-width:560px){
  .ck-banner{justify-content:flex-start;padding:18px;padding-left:max(18px,env(safe-area-inset-left))}
}
@media (prefers-reduced-motion:reduce){
  .ck-banner{transition:none}
}