/* ==========================================================================
   tokens.css - Kitsotaro
   Fuente unica de color, tipografia, espaciado, radios, sombras, movimiento y capas.
   Cerrado el 1-oct-2026 a partir de la vista previa aprobada.

   REGLAS
   1. Ningun otro archivo escribe colores, tamanos ni sombras con valores fijos.
      Todo sale de estas variables. Si falta un valor, se agrega aqui.
   2. Dos temas: claro (:root) y oscuro ([data-theme="dark"]). El <head> de
      cada pagina fija data-theme antes de pintar (eleccion guardada o la del
      sistema) y el interruptor del header lo cambia (theme.js).
   3. Los puntos de quiebre no pueden ser variables CSS. Se escriben literales
      en las media queries:  520px (celular chico), 860px (tablet), 1120px (ancho maximo).
   4. Contraste: texto blanco sobre --p y --a cumple AA (13.4:1 y 8.7:1 en claro).
      --ink-3 solo para datos secundarios; el texto esencial usa --ink o --ink-2.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Marca (fijos, no cambian con el tema) ---------- */
  --navy:   #0F2A6B;   /* azul marino: color de marca, boton principal, titulos fuertes */
  --cobalt: #1A3FB5;   /* cobalto profundo: segundo azul, acentos y enlaces */
  --sky:    #3FA9F5;   /* celeste frio: solo degradados y detalles, nunca fondo de texto */
  --aqua:   #19D3F3;   /* aqua electrico: chispa pequena, nunca superficie grande */

  /* ---------- Tipografia ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 16px;
  --fs-lg: 17px;
  --fs-xl: 18px;
  --fs-h3: 18px;
  --fs-h2: clamp(25px, 3.2vw, 36px);
  --fs-h1: clamp(34px, 5.2vw, 58px);

  --lh-tight: 1.04;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --tracking-h1: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.01em;

  /* ---------- Espaciado (base de 4 px) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-21: 84px;
  --section-gap: 84px;        /* en celular (<860px) pasa a 64px */

  /* ---------- Layout ---------- */
  --wrap: 1120px;
  --gutter: 20px;
  --tap: 44px;                /* alto minimo de cualquier boton o control tactil */
  --tap-sm: 24px;             /* excepcion: barra compacta de Nivel en celular (minimo de WCAG) */
  --measure: 56ch;          /* ancho maximo de lectura en textos largos (legales) */

  /* ---------- Radios ---------- */
  --r-xs: 10px;
  --r-sm: 14px;               /* botones, campos */
  --r-md: 18px;
  --r-lg: 24px;               /* tarjetas */
  --r-xl: 30px;               /* bloque de contacto */
  --r-2xl: 36px;              /* laminas grandes (.sheet) */
  --r-pill: 999px;

  /* ---------- Movimiento ---------- */
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;
  --dur-flip: 0.9s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.2, 0.4, 1);   /* indicador deslizante de pestanas */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --spin-ring: 5s;            /* vuelta del anillo de los iconos */
  --spin-stat: 12s;           /* vuelta del degradado del 5 del hero */

  /* ---------- Capas (z-index) ---------- */
  --z-bg: -1;
  --z-base: 0;
  --z-raised: 2;
  --z-chip: 3;
  --z-nav: 40;
  --z-sticky: 50;
  --z-modal: 100;

  /* ---------- Superficies y texto: MODO CLARO ---------- */
  --bg:        #EEF2F8;
  --bg-wash-1: rgba(26, 63, 181, 0.08);
  --bg-wash-2: rgba(63, 169, 245, 0.10);
  --surface:   #FFFFFF;
  --surface-2: #F4F6FB;
  --glass:     rgba(255, 255, 255, 0.66);
  --sheet:     rgba(255, 255, 255, 0.50);

  --ink:   #0C1630;
  --ink-2: #44506A;
  --ink-3: #667189;

  --line:  rgba(12, 22, 48, 0.09);
  --bevel: rgba(255, 255, 255, 0.95);
  --chip:  rgba(12, 22, 48, 0.05);
  --well:  inset 0 2px 8px rgba(12, 22, 48, 0.08);

  /* ---------- Color de accion ---------- */
  --p:       #0F2A6B;         /* principal: Pedir cotizacion, pestana activa */
  --p-hover: #183C94;
  --on-p:    #FFFFFF;
  --a:       #1A3FB5;         /* acento: Ver precios, Ver video */
  --a-hover: #2450CC;
  --on-a:    #FFFFFF;
  --link:    #1A3FB5;
  --focus:   #3FA9F5;

  /* ---------- Sombras ---------- */
  --sh-1: 0 1px 2px rgba(12, 22, 48, 0.06), 0 8px 22px rgba(12, 22, 48, 0.07);
  --sh-2: 0 2px 4px rgba(12, 22, 48, 0.05), 0 22px 44px rgba(26, 63, 181, 0.16);
  --sh-p: 0 8px 18px rgba(15, 42, 107, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --sh-a: 0 8px 18px rgba(26, 63, 181, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --sh-sheet: 0 40px 90px -40px rgba(26, 63, 181, 0.30);

  /* ---------- Efectos ---------- */
  --halo:     rgba(63, 169, 245, 0.38);       /* resplandor detras de la foto del hero */
  --frame-a:  rgba(255, 255, 255, 0.82);      /* marco de vidrio de la foto: inicio */
  --frame-b:  rgba(255, 255, 255, 0.22);      /* marco de vidrio de la foto: fin */
  --metal-a:  #FFFFFF;                        /* bloque de contacto (metal) */
  --metal-b:  #D6E0F0;
  --sweep-o:  0.85;                           /* opacidad del barrido de luz */
  --bgfx-o:   1;                              /* opacidad de luces y listones del fondo */
  --ribbon:   rgba(255, 255, 255, 0.60);

  /* anillo giratorio de iconos (rotacion basica de degradado conico) */
  --ring-1: #E9EEFB;
  --ring-2: #8EA6D8;
  --ring-3: #1A3FB5;
  --ring-4: #6FD3F3;
  --ring-5: #AAB8D6;

  /* fondo de las capturas de /dev mientras cargan */
  --ph-a: #EAF0FB;
  --ph-b: #BFD0EC;

  /* reproductor de video: la interfaz del video es oscura en ambos temas */
  --video-a:    #26365C;
  --video-b:    #0E1526;
  --video-glow: rgba(63, 169, 245, 0.28);
  --ctrl-bg:    rgba(10, 14, 24, 0.62);
  --ctrl-ink:   #FFFFFF;
  --ctrl-ink-2: #E8EDF7;
  --ctrl-track: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   MODO OSCURO - activo con <html data-theme="dark">.
   Negros y grises neutros, nunca negro puro. Los azules son la misma
   familia del modo claro (marino y cobalto), un paso mas luminosos: los
   botones conservan texto blanco AA y el azul de texto es un cobalto
   claro que se lee sobre el fondo oscuro.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0C0E12;
  --bg-wash-1: rgba(46, 91, 216, 0.10);
  --bg-wash-2: rgba(63, 169, 245, 0.05);
  --surface:   #14171D;
  --surface-2: #1B1F27;
  --glass:     rgba(26, 30, 38, 0.62);
  --sheet:     rgba(255, 255, 255, 0.035);

  --ink:   #F2F5FA;
  --ink-2: #A9B1C1;
  --ink-3: #8089A0;

  --line:  rgba(255, 255, 255, 0.09);
  --bevel: rgba(255, 255, 255, 0.10);
  --chip:  rgba(255, 255, 255, 0.06);
  --well:  inset 0 2px 10px rgba(0, 0, 0, 0.45);

  --p:       #2447C2;         /* cobalto del dia un paso mas claro: blanco 7.6:1 */
  --p-hover: #2D55D4;
  --a:       #2E5BD8;         /* acento: blanco 5.8:1 */
  --a-hover: #3B68E3;
  --link:    #8DA9F5;         /* cobalto claro: 7.8:1 sobre --surface */

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.35);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.5);
  --sh-p: 0 8px 18px rgba(36, 71, 194, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --sh-a: 0 8px 18px rgba(46, 91, 216, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --sh-sheet: 0 40px 90px -40px rgba(0, 0, 0, 0.6);

  --halo:    rgba(46, 91, 216, 0.30);
  --frame-a: rgba(255, 255, 255, 0.16);
  --frame-b: rgba(255, 255, 255, 0.03);
  --metal-a: #2A2F3A;
  --metal-b: #171A21;
  --sweep-o: 0.22;
  --bgfx-o:  0.6;
  --ribbon:  rgba(255, 255, 255, 0.08);

  --ph-a: #232A3A;
  --ph-b: #161B27;
}

/* ==========================================================================
   AGREGADO FASE 1 (1-oct-2026)
   Valores que la vista previa usaba sueltos y no estaban arriba.
   ========================================================================== */
:root {
  --fw-h3: 650;

  /* capa de fondo: luces difusas */
  --light-1: rgba(26, 63, 181, 0.26);   /* marino/cobalto, arriba a la izquierda */
  --light-2: rgba(63, 169, 245, 0.26);  /* celeste, derecha */
  --light-3: rgba(25, 211, 243, 0.16);  /* aqua tenue, abajo */

  /* capa de fondo: tamano y posicion de las luces (b1-b3) y cintas (rb1-rb2) */
  --bg-b1-size: 640px;  --bg-b1-x: -220px;  --bg-b1-y: -170px;
  --bg-b2-size: 760px;  --bg-b2-x: -280px;  --bg-b2-y: 520px;
  --bg-b3-size: 660px;  --bg-b3-x: -240px;  --bg-b3-y: 1700px;
  --bg-rb-w:    680px;  --bg-rb-h: 170px;
  --bg-rb1-x:  -150px;  --bg-rb1-y: 300px;
  --bg-rb2-x:  -200px;  --bg-rb2-y: 1180px;
  --nf-glow-size: 640px;             /* circulo de luz detras del 404 */

  /* desenfoques del vidrio */
  --blur-glass: 18px;
  --blur-sheet: 22px;
  --blur-btn:   16px;
  --glass-sat:  1.4;

  /* indicador deslizante de pestanas y brillo del boton de vidrio */
  --sh-ind:     0 4px 12px rgba(15, 42, 107, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-glow: inset 0 -8px 16px rgba(255, 255, 255, 0.12);
  --ring-w:     2.5px;               /* grosor del anillo giratorio */

  /* tamanos de piezas pequenas */
  --icon-size:  20px;                /* icono estandar */
  --mark-size:  40px;                /* circulo K de la marca */
  --ring-size:  58px;                /* circulo con anillo (servicios, reproducir) */
  --btn-lg:     52px;                /* alto del boton de vidrio */
  --avatar-lg:  96px;                /* circulo del logo en link.kitsotaro.com */
  --link-col:   480px;               /* ancho de la columna de enlaces en link.kitsotaro.com */
  --nav-panel-gap: 8px;              /* separacion entre la barra y el menu movil */

  /* pastilla activa del menu: mas sombra para que flote sobre el vidrio */
  --sh-pill: 0 1px 2px rgba(12, 22, 48, 0.10), 0 6px 16px rgba(12, 22, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* desvanecido del borde en las pestanas con scroll (movil) */
  --fade-edge: 32px;

  /* pagina 404 */
  --fs-404: clamp(96px, 22vw, 240px);
  --glitch-cyan:    #19D3F3;
  --glitch-magenta: #E5329B;
  --glitch-shift:   3px;             /* desfase fijo con reduced-motion */
  --net-line: rgba(12, 22, 48, 0.035); /* red de lineas finas del fondo */
  --dur-glitch: 4s;
  --dur-drift: 24s;                  /* movimiento lento de las luces del fondo */
  --sheet-clear: rgba(255, 255, 255, 0.34); /* vidrio mas transparente (footer) */
}

:root[data-theme="dark"] {
  --light-1: rgba(46, 91, 216, 0.22);
  --light-2: rgba(63, 169, 245, 0.14);
  --light-3: rgba(25, 211, 243, 0.08);
  --sh-ind:  0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-glow: inset 0 -8px 16px rgba(255, 255, 255, 0.04);
  --sh-pill:  0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --net-line: rgba(255, 255, 255, 0.035);
  --sheet-clear: rgba(255, 255, 255, 0.025);
}

/* ==========================================================================
   AGREGADO FASE 3 (2-oct-2026)
   Portafolio: tarjetas de pieza y reproductor.
   ========================================================================== */
:root {
  --grid-min:   220px;               /* ancho minimo de tarjeta: 4 columnas en escritorio, 1 en celular */
  --stagger:    35ms;                /* retraso entre tarjetas al entrar despues de filtrar */
  --icon-sm:    16px;                /* icono pequeno dentro de texto */
  --icon-lg:    28px;                /* icono del boton grande de reproducir */
  --play-size:  72px;                /* boton grande de reproducir */
  --play-glass: rgba(255, 255, 255, 0.14);
  --cb-hover:   rgba(255, 255, 255, 0.14); /* fondo de un control al pasar el raton */
  --bar-h:      6px;                 /* grosor de la barra de progreso */
  --vol-w:      72px;                /* ancho del control de volumen */
  --scrim:      rgba(8, 12, 24, 0.78); /* velo detras del reproductor */
  --blur-scrim: 6px;
  --player-chrome: 96px;             /* alto reservado para titulo y margenes del reproductor */
  --glass-solid: rgba(255, 255, 255, 0.92); /* vidrio sin desenfoque (navegadores sin backdrop-filter) */
  --end-blur:  12px;                 /* desenfoque del video detras de la pantalla final */
  --end-zoom:  1.06;                 /* zoom ligero del video en la pantalla final */
  --end-dim:   0.7;                  /* brillo del video detras de los botones (contraste) */
  --dur-end:   0.6s;                 /* entrada de la pantalla final */
}

:root[data-theme="dark"] {
  --glass-solid: rgba(26, 30, 38, 0.94);
}

/* ==========================================================================
   AGREGADO FASE 4 (2-oct-2026)
   Home: hero con foto, video de presentacion, logos, lineas y contacto.
   ========================================================================== */
:root {
  /* hero: escenario de la foto y parallax */
  --stage-w:      400px;             /* ancho maximo de la foto con marco */
  --tilt-x:       7deg;              /* inclinacion maxima vertical con el raton */
  --tilt-y:       9deg;              /* inclinacion maxima horizontal con el raton */
  --float-x:      16px;              /* desplazamiento de chips y burbuja (contrario al marco) */
  --float-y:      10px;
  --stage-glow:   rgba(26, 63, 181, 0.30);  /* sombra azul bajo el marco */
  --frame-drop:   rgba(26, 63, 181, 0.22);  /* sombra del marco de vidrio */
  --perspective:  1100px;
  --orb-size:     76px;              /* burbuja de WhatsApp del hero */
  --icon-orb:     36px;
  --fs-stat:      clamp(56px, 6.5vw, 72px); /* numero grande de la tarjeta flotante */
  --fs-stat-sm:   44px;                     /* el mismo numero en celular chico */
  --stat-pivot:  calc(var(--sp-4) * -1) 135%; /* centro del giro del 5: borde izquierdo de la tarjeta, a la altura del texto */
  --stat-line-h:  34px;              /* alto de la linea decorativa de la tarjeta "Entrega" */
  --tool-logo:    24px;              /* logos pequenos de "Trabajo con" */
  --brand-logo:   65%;               /* alto del logo dentro del circulo de la marca (logo vertical 640x872) */
  --coin-logo:    50%;               /* alto del logo dentro del circulo del giro */
  --shape-o:      0.4;               /* formas decorativas del hero */
  --shape-1:      84px;              /* hexagono */
  --shape-2:      96px;              /* triangulo */
  --shape-clip:   200px;             /* margen de recorte de la capa de formas (contain en .home-shapes) */
  --glow-blur:    26px;              /* desenfoque de la sombra azul bajo el marco */
  --tool-o:       0.75;              /* logos de "Trabajo con" en reposo (gris) */
  --tool-filter:  grayscale(1);      /* logos de "Trabajo con" en reposo */
  --tool-filter-hover: none;         /* al pasar el cursor: color original */
  --ink-brand:    var(--navy);       /* titulos en azul marino (en oscuro pasa a --ink) */
  --dur-float:    7s;
  --idle-wait:    5s;                /* sin tocar la pagina: la foto hace un giro parcial */
  --nudge-every:  15s;               /* y lo repite cada tanto mientras siga la calma */
  --dur-nudge:    2s;                /* duracion de ese giro */
  --nudge-angle:  12deg;             /* cuanto gira, muy sutil (el giro completo es 180deg) */
  --shape-tilt:   18deg;             /* giro del flote de las formas */
  --shape-hero-scale: 1.3;           /* formas mas grandes en el hero (1.8 desde 860 px) */
  --grad-text:    linear-gradient(100deg, #0F2A6B, #1A3FB5 55%, #3FA9F5);
  /* degradado metalico del 5 del hero: tonos con contraste minimo 3.4:1 sobre la tarjeta clara */
  --stat-1: #6A84BE;
  --stat-2: #3D63C9;
  --stat-3: #0F2A6B;
  --stat-4: #2477C0;
  --stat-5: #4F6FB8;

  /* logo universal: pinguino negro sobre blanco puro (pedido del dueno, 2-oct) */
  --logo-bg:      #FFFFFF;
  --logo-ink:     #000000;
  /* en tema oscuro el circulo pasa a negro y se muestra brand-kitsotaro-blanco.svg (Fase 6) */

  /* burbuja de WhatsApp y redes del hero */
  --wa:           #25D366;           /* verde oficial de WhatsApp, solo en su icono */
  --arrow-size:   28px;              /* flecha que abre las redes */
  --dur-bob:      1.2s;              /* flote de la flecha */
  --stack-scale:  0.85;              /* tamano de las redes apiladas detras de WhatsApp */
  --stack-peek:   7px;               /* cuanto asoma cada red apilada */
  --social-size:  var(--tap);        /* burbujas de redes (mas pequenas que WhatsApp) */
  --social-gap:   8px;               /* aire entre burbujas al desplegarse */
  --wa-angle:     135deg;            /* con el logo: WhatsApp en el contorno, abajo a la izquierda */

  /* home por bloques (pantallas horizontales) y transiciones */
  --hero-offset:  132px;             /* header + margenes: el hero llena el resto de la pantalla */
  --intro-chrome: 148px;             /* header + aire: el video cabe completo al centrarse */
  --hero-lift:    48px;              /* el hero sube al salir */
  --hero-shrink:  0.08;              /* y se encoge un poco */
  --hero-fade:    0.7;               /* y se desvanece */
  --intro-from:   0.86;              /* tamano del video antes de centrarse */
  --intro-fade:   0.35;              /* opacidad del video antes de centrarse */
  --dur-block:    1.6s;              /* paso suave entre hero, video y resto */
  --shape-spin:   200deg;            /* giro de las formas al cruzar */
  --rest-gap:     128px;             /* aire entre el video y la seccion siguiente (web) */
  --reveal-y:     24px;              /* entrada del resto del home */
  --dur-reveal:   0.6s;

  /* scroll de logos */
  --logo-size:    28px;
  --dur-marquee:  40s;

  /* efecto ampliar de las tarjetas de linea */
  --enlarge-lift:   -8px;
  --enlarge-scale:  1.035;
  --enlarge-shrink: 0.985;
  --enlarge-dim:    0.58;

  /* bloque de contacto: barrido de luz y grano */
  --sweep-light: rgba(255, 255, 255, 0.95);
  --dur-sweep:   9s;
  --grain-o:     0.09;

  /* separador con mas contraste (bloque de contacto) */
  --line-strong: rgba(12, 22, 48, 0.20);
}

@media (min-width: 860px) {
  :root {
    --shape-hero-scale: 1.8;
  }
}

:root[data-theme="dark"] {
  --logo-bg:     #000000;
  --tool-filter: grayscale(1) invert(1);  /* logos negros de "Trabajo con": se invierten para verse */
  --tool-filter-hover: invert(1);
  --ink-brand:   var(--ink);
  --logo-ink:    #FFFFFF;
  --frame-drop:  rgba(0, 0, 0, 0.45);
  --line-strong: rgba(255, 255, 255, 0.20);
  --sweep-light: rgba(255, 255, 255, 0.55);
  --grad-text:   linear-gradient(100deg, #8DA9F5, #3FA9F5 60%, #19D3F3);
  --stat-1: var(--ring-1);
  --stat-2: var(--ring-2);
  --stat-3: var(--ring-3);
  --stat-4: var(--ring-4);
  --stat-5: var(--ring-5);
}

/* ==========================================================================
   AGREGADO CORRECCIONES (2-oct-2026)
   Entrada del hero y tarjeta enfocada en celular.
   ========================================================================== */
:root {
  --dur-hero-in:  0.7s;              /* aparicion de cada pieza del hero al cargar */
  --hero-in-gap:  90ms;              /* retraso entre piezas del texto */
  --hero-in-base: 150ms;             /* espera antes de la primera pieza */
  --hero-in-media: 380ms;            /* espera de la foto */
  --hero-in-pop:  560ms;             /* espera de las burbujas de vidrio */
  --hero-in-shapes: 650ms;           /* espera de las formas (ya colocadas por JS) */
  --hero-in-scale: 0.8;              /* tamano inicial de las burbujas al aparecer */
  --hero-wait-max: 1.5s;             /* si el JS no responde, el hero aparece solo */
  --hero-in-rise: 14px;              /* recorrido hacia arriba al aparecer */
}

/* ==========================================================================
   AGREGADO FASE 5 (2-oct-2026)
   /servicios: miniatura de ejemplo al lado de los precios.
   ========================================================================== */
:root {
  --svc-thumb:  clamp(104px, 30vw, 200px); /* ancho de la miniatura junto a los precios */
  --ring-sm:    40px;                /* circulo de play en miniaturas pequenas */
  --icon-md:    20px;                /* icono que acompana una linea de texto (aviso de pais) */
  --svc-nav-top: calc(env(safe-area-inset-top, 0px) + var(--sp-21)); /* barra de secciones pegada bajo el header */
  --filter-lift: calc(var(--fs-sm) * var(--lh-snug) + var(--sp-2)); /* etiqueta de filtro + su espacio: lo que suben las barras pegadas de /portafolio */
}

/* ==========================================================================
   AGREGADO FASE 6 (2-oct-2026)
   /contacto: campos del brief. /categorias: columnas de la lista.
   ========================================================================== */
:root {
  --field-bg:     #FFFFFF;           /* fondo de campos de formulario */
  --field-line:   rgba(12, 22, 48, 0.24); /* borde de campos (contraste 3:1 sobre blanco) */
  --field-note:   rgba(26, 63, 181, 0.07); /* fondo del aviso amable de un campo (sin rojo) */
  --field-ring:   0 0 0 3px rgba(63, 169, 245, 0.28); /* halo del campo enfocado */
  --cat-col:      300px;             /* ancho minimo de columna en la lista de categorias */
  --disabled-o:   0.5;               /* boton desactivado (brief sin JS) */
}

:root[data-theme="dark"] {
  --field-bg:   #14171D;
  --field-line: rgba(255, 255, 255, 0.24);
  --field-note: rgba(127, 162, 255, 0.10);
}

/* ==========================================================================
   AGREGADO 5-OCT-2026 (ajustes previos al push)
   /servicios: galeria apilada en las tarjetas (.svc-gal, efecto .fx-stack).
   ========================================================================== */
:root {
  --gal-ar-h:      16 / 10;          /* marco de la galeria si la primera imagen es horizontal */
  --gal-ar-v:      1 / 1;            /* marco si es vertical (flyers) */
  --gal-mob-h:     78%;              /* alto de la captura de celular sobre la de escritorio */
  --stack-step:    8px;              /* cuanto asoma cada tarjeta de atras */
  --stack-scale-1: 0.94;             /* tamano de la primera tarjeta de atras */
  --stack-scale-2: 0.88;             /* tamano de la segunda */
  --stack-o-1:     0.7;              /* opacidad de la primera tarjeta de atras */
  --stack-o-2:     0.4;              /* opacidad de la segunda */
}

/* ==========================================================================
   AGREGADO 5-OCT-2026 (modo oscuro)
   Interruptor de tema: capsula de vidrio, dia a la izquierda y noche a la
   derecha. El tema lo fija el <head> de cada pagina (guardado o del sistema).
   ========================================================================== */
:root {
  --theme-w:     76px;                     /* ancho de la capsula (alto: --tap) */
  --theme-knob:  36px;                     /* circulo que se desliza */
  --theme-pad:   3px;                      /* aire entre el circulo y el borde */
  --theme-tint:  rgba(63, 169, 245, 0.10); /* cielo de dia dentro de la capsula */
  --theme-disc:  #FFFFFF;                  /* circulo de dia */
  --theme-icon:  #E39B00;                  /* sol */
}

:root[data-theme="dark"] {
  --theme-tint:  rgba(15, 42, 107, 0.55);  /* noche: marino dentro de la capsula */
  --theme-disc:  #0B1226;                  /* circulo de noche */
  --theme-icon:  #F2F5FA;                  /* luna y estrellas */
}

/* ==========================================================================
   AGREGADO 5-OCT-2026 (contraste del azul en oscuro y cambio de tema)
   Azul de texto separado del azul de botones: en oscuro el texto azul usa
   un cobalto claro para leerse; en claro todo queda igual que antes.
   ========================================================================== */
:root {
  --blue-ink:   var(--cobalt);       /* texto y detalles azules (etiquetas, barras de nivel, avisos) */
  --blue-deep:  var(--navy);         /* texto azul fuerte: enlace activo del menu */
  --nf-ink:     var(--navy);         /* numero grande del 404 */
  --logo-mono:  none;                /* logos negros de la cinta de herramientas */
  --dur-theme:  0.6s;                /* circulo que cubre la pagina al cambiar de tema */
}

:root[data-theme="dark"] {
  --blue-ink:   #8DA9F5;             /* 7.8:1 sobre --surface */
  --blue-deep:  #8DA9F5;             /* mismo cobalto claro: 7.8:1 sobre --surface */
  --nf-ink:     #5B7FE6;             /* texto grande: 5.2:1 sobre --bg */
  --logo-mono:  invert(0.95);        /* el logo negro pasa a casi blanco */
}