/*
Theme Name:   Bricks Child
Theme URI:    https://limpiezasdelsur.es
Description:  Tema hijo de Bricks para Limpiezas del Sur. Contiene la CAPA BASE del sistema
              de diseno: tokens, tipografia del documento, contenedor y foco. Las clases de
              componente NO viven aqui (ver README.md).
Author:       Limpiezas del Sur
Author URI:   https://limpiezasdelsur.es
Template:     bricks
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bricks-child
*/

/* ==========================================================================
   0. FUENTES — AUTOALOJADAS.  El navegador NO habla con Google.
   --------------------------------------------------------------------------
   Antes esto era un wp_enqueue_style() a fonts.googleapis.com. Se ha quitado.

   POR QUE (no es cosmetico):
   Pedir la hoja a fonts.googleapis.com y los .woff2 a fonts.gstatic.com manda
   la IP del visitante a Google en CADA visita, sin consentimiento previo. Hay
   sentencia europea concreta sobre exactamente este supuesto, y ademas nuestra
   propia politica de privacidad (wiki/web-legales.md) declara que NO hay
   transferencias de datos a terceros. Con Google Fonts remoto esa declaracion
   seria falsa el dia que la web se publique. Autoalojar la hace cierta.

   De paso se gana velocidad: desaparecen la conexion DNS+TLS a dos dominios
   ajenos y el salto encadenado CSS -> woff2 de la ruta critica. Las dos caras
   del primer pintado van con <link rel=preload> desde functions.php.

   LICENCIAS: las tres familias son SIL Open Font License 1.1, que permite
   expresamente redistribuirlas dentro de este tema. Ver README.md.

   QUE HAY EN fonts/ (12 ficheros, 255 KB en disco):
     - Archivo y Source Sans 3 se sirven como FUENTE VARIABLE: un unico fichero
       por subconjunto cubre todos los pesos. Declarar un peso de mas en ellas
       cuesta 0 bytes.
     - La cursiva de Source Sans 3 y las tres de IBM Plex Mono son ESTATICAS:
       ahi cada peso si es un fichero aparte.
     - Solo subconjuntos latin y latin-ext. El unicode-range esta copiado tal
       cual del CSS de Google, no inventado: es lo que hace que en una pagina
       en espanol el navegador se baje SOLO los ficheros -latin (107 KB) y ni
       toque los -latin-ext (148 KB), que quedan de reserva por si aparece un
       apellido extranjero en un testimonio.

   Rutas relativas a esta hoja => wp-content/themes/bricks-child/fonts/.
   Si mueves este fichero, mueve la carpeta con el.

   *** GOTCHA DE BRICKS, no lo toques ***
   Bricks ENTRECOMILLA el valor de font-family cuando se pone en sus ajustes:
   var(--font-titulares) se emite como font-family:"var(--font-titulares)", una
   familia que no existe, y el navegador se cae a su serif por defecto. Por eso
   las familias se declaran AQUI, en CSS, y en Bricks se deja solo tamano, peso,
   color y espaciado. Nunca una familia en el panel de Bricks.
   ========================================================================== */

/* --- Archivo (titulares). Variable: 1 fichero por subconjunto para 500/600/700.
       El rango se limita al del sistema de diseno; el fichero fisicamente llega
       de 100 a 900, asi que un peso fuera de rango cae al mas cercano valido. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
     U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
     U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
     U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
     U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/source-sans-3-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
     U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
     U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/source-sans-3-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
     U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
     U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Source Sans 3 (texto corrido). Variable: 1 fichero por subconjunto
       para 400/600/700. */
@font-face{
  font-family:'Source Sans 3';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-sans-3-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
     U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
     U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-sans-3-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
     U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
     U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
     U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
     U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
     U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
     U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Source Sans 3 cursiva. ESTATICA de 400: es el unico corte cursivo que
       usa el sistema. Sin ella el navegador falsearia una oblicua inclinando
       la redonda, que es justo lo que no queremos en <em>. */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
     U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
     U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
     U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
     U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
     U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
     U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
     U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
     U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   1. TOKENS — copiados literalmente de diseno/sistema/tokens/
      colors.css · typography.css · spacing.css · surfaces.css · brand-pattern.css
      Ni un valor inventado, renombrado ni redondeado. Si un token se define en
      terminos de otro, se conserva asi.
   ========================================================================== */
/* --------------------------------------------------------------------------
   RED DE SEGURIDAD, NO FUENTE DE VERDAD.  Leer antes de tocar.

   Estos mismos 113 tokens se cargan tambien como VARIABLES GLOBALES de Bricks
   (interfaz/web/bricks/02-variables.json). Si se declarasen dos veces sin mas,
   una de las dos ganaria por orden de carga y la otra quedaria muerta: cambiar
   un color desde el builder no cambiaria nada, que es justo lo contrario de lo
   que se pidio.

   Por eso el bloque va dentro de una CAPA EN CASCADA. Regla de CSS: cualquier
   declaracion SIN capa gana siempre a una declaracion EN capa, pase lo que pase
   con el orden de los ficheros. Bricks emite sus variables sin capa, asi que
   MANDA BRICKS y esto solo actua si las variables de Bricks no han cargado.

   Consecuencia practica: la fuente de verdad es el builder. Un color se cambia
   en Bricks > Variables, no aqui. Aqui solo se toca cuando cambie el sistema de
   diseno de diseno/sistema/tokens/, y entonces se cambia en los dos sitios.

   Comprobacion en consola, con la web ya montada:
     getComputedStyle(document.documentElement).getPropertyValue('--azul-pizarra')
   Cambia el valor en Bricks, regenera el CSS y vuelve a mirar: debe cambiar.
   -------------------------------------------------------------------------- */
@layer lds-fallback{
:root{
  /* --- colors.css · Base: color principal ------------------------------- */
  /* Azul Pizarra. Azul apagado, casi tinta; nada de cian de sector. */
  --azul-pizarra-900:#0C222E;
  --azul-pizarra-800:#102D3C;
  --azul-pizarra:#16394D;      /* CMYK 88 60 40 45 */
  --azul-pizarra-600:#1F4E68;
  --azul-pizarra-400:#4C7691;
  --azul-pizarra-200:#B7C8D3;
  --azul-pizarra-100:#DCE5EB;
  --azul-pizarra-050:#EEF3F6;

  /* --- colors.css · Base: color secundario ------------------------------ */
  /* Ambar Obrador. Eje azul/naranja: distinguible con daltonismo rojo-verde. */
  --ambar-900:#5E3B06;
  --ambar-700:#8F5A0C;         /* variante legible para texto sobre blanco */
  --ambar:#E08A1E;             /* CMYK 0 50 95 5 */
  --ambar-300:#F2C480;
  --ambar-100:#FBEBD3;

  /* --- colors.css · Base: neutros ---------------------------------------- */
  /* Hueso: fondo de papel calido, no blanco clinico. */
  --hueso:#F5F3EF;             /* CMYK 3 3 5 0 */
  --hueso-oscuro:#E7E3DC;
  /* Grafito: negro de texto y fondo oscuro. Nunca #000. */
  --grafito:#23282B;           /* CMYK 75 60 55 70 */
  --grafito-700:#3C4348;
  /* Oscurecidos en la auditoria de contraste del 02-09-2026 (ver
     wiki/sistema-diseno.md): los valores viejos suspendian WCAG AA.
     --gris-cal era #6E7378 y daba 4,32:1 sobre hueso; ahora da 5,23:1.
     --gris-cal-300 era #A9AEB2 y suspendia el 3:1 de WCAG 1.4.11.
     ⚠️ El CMYK de --gris-cal esta pendiente de recalcular: el 55 42 38 12
     que habia aqui era el del color viejo, asi que se retira en vez de
     dejarlo mintiendo. */
  --gris-cal:#61666B;
  --gris-cal-300:#888D91;
  /* El gris claro de antes, conservado SOLO para uso decorativo: filetes,
     iconos sin etiqueta, separadores. NUNCA con texto encima. */
  --gris-cal-400:#6E7378;
  --blanco:#FFFFFF;

  /* --- colors.css · Semanticos: texto ------------------------------------ */
  --text-strong:var(--grafito);
  --text-body:var(--grafito-700);
  --text-muted:var(--gris-cal);
  --text-on-dark:var(--hueso);
  --text-on-dark-muted:var(--azul-pizarra-200);
  --text-accent:var(--ambar-700);
  --text-brand:var(--azul-pizarra);
  --text-inverse:var(--blanco);
  --text-link:var(--azul-pizarra-600);
  --text-link-hover:var(--azul-pizarra-900);

  /* --- colors.css · Semanticos: superficies ------------------------------ */
  --surface-page:var(--blanco);
  --surface-paper:var(--hueso);
  --surface-card:var(--blanco);
  --surface-card-quiet:var(--hueso);
  --surface-brand:var(--azul-pizarra);
  --surface-brand-deep:var(--azul-pizarra-900);
  --surface-brand-tint:var(--azul-pizarra-050);
  --surface-accent:var(--ambar);
  --surface-accent-tint:var(--ambar-100);

  /* --- colors.css · Semanticos: bordes ---------------------------------- */
  --border:#D8D4CC;
  --border-strong:var(--azul-pizarra-200);
  --border-brand:var(--azul-pizarra);
  --border-on-dark:rgba(245,243,239,.22);
  --focus-ring:var(--ambar);

  /* --- colors.css · Estado ----------------------------------------------- */
  --ok:#1F6B45;
  --ok-tint:#E3F0E9;
  --aviso:var(--ambar-700);
  --aviso-tint:var(--ambar-100);
  --error:#9B2C1F;
  --error-tint:#F6E4E1;

  /* --- typography.css · Familias ---------------------------------------- */
  --font-titulares:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-texto:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --font-cifras:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  /* --- typography.css · Pesos -------------------------------------------- */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* --- typography.css · Escala tipografica (web, px). Ratio ~1.28 -------- */
  --size-display:56px;   /* portada / heroe */
  --size-h1:38px;
  --size-h2:28px;
  --size-h3:21px;
  --size-h4:17px;
  --size-body-lg:19px;
  --size-body:17px;
  --size-body-sm:15px;
  --size-caption:13px;
  --size-micro:12px;     /* minimo absoluto en web */

  /* --- typography.css · Interlineado ------------------------------------- */
  --leading-tight:1.05;
  --leading-heading:1.15;
  --leading-snug:1.35;
  --leading-body:1.55;
  --leading-loose:1.7;

  /* --- typography.css · Interletraje ------------------------------------- */
  --track-display:-.02em;
  --track-heading:-.01em;
  --track-body:0;
  --track-eyebrow:.12em;  /* rotulos en versalitas */

  /* --- typography.css · Roles compuestos --------------------------------- */
  /* OJO: --type-display usa var(--weight-700,700). El token --weight-700 NO
     existe en el sistema (el bueno seria --weight-bold), asi que resuelve por
     el valor de reserva 700 y visualmente es correcto. Se copia TAL CUAL para
     no divergir del sistema; queda anotado como errata en el README. */
  --type-eyebrow:var(--weight-semibold) var(--size-micro)/1.2 var(--font-titulares);
  --type-display:var(--weight-bold) var(--size-display)/var(--leading-tight) var(--font-titulares);
  --type-h1:700 var(--size-h1)/var(--leading-heading) var(--font-titulares);
  --type-h2:600 var(--size-h2)/var(--leading-heading) var(--font-titulares);
  --type-h3:600 var(--size-h3)/var(--leading-snug) var(--font-titulares);
  --type-body:400 var(--size-body)/var(--leading-body) var(--font-texto);
  --type-body-sm:400 var(--size-body-sm)/var(--leading-body) var(--font-texto);
  --type-caption:400 var(--size-caption)/var(--leading-snug) var(--font-texto);
  --type-precio:600 var(--size-h1)/1 var(--font-cifras);

  /* --- typography.css · Impresion (pt) ----------------------------------- */
  /* Minimos verificados en Archivo / Source Sans 3. Se conservan aunque la web
     no los use: el mismo :root alimenta las hojas de los impresos. */
  --print-body:10pt;
  --print-body-min:9pt;
  --print-caption-min:7.5pt;
  --print-leading-body:1.4;

  /* --- spacing.css · Escala base 4 --------------------------------------- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* --- spacing.css · Layout ---------------------------------------------- */
  --gutter:var(--space-5);
  --section-y:var(--space-9);
  --section-y-compact:var(--space-8);
  --measure:64ch;          /* medida maxima de linea de texto corrido */
  --measure-narrow:46ch;
  --container:1160px;
  --container-narrow:760px;

  /* --- spacing.css · Reticula de la franja: la unidad del gesto de marca -- */
  --franja-unit:6px;
  --franja-angle:60deg;

  /* --- surfaces.css · Radios --------------------------------------------- */
  /* Sobrios. Nada superior a 4px salvo pildoras de etiqueta. */
  --radius-0:0;
  --radius-1:2px;
  --radius-2:4px;
  --radius-pill:999px;

  /* --- surfaces.css · Filetes -------------------------------------------- */
  --border-width:1px;
  --border-width-strong:2px;
  --rule-hair:1px;         /* filete de separacion */

  /* --- surfaces.css · Sombras -------------------------------------------- */
  /* Un solo sistema, discreto. La marca separa con filetes, no con sombras. */
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(22,57,77,.08);
  --shadow-2:0 2px 6px rgba(22,57,77,.10);
  --shadow-raised:0 8px 24px rgba(12,34,46,.14);   /* solo modales */
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.5);

  /* --- surfaces.css · Animacion ------------------------------------------ */
  --duration-fast:120ms;
  --duration:180ms;
  --duration-slow:260ms;
  --duration-reveal:420ms;
  --ease:cubic-bezier(.2,.6,.3,1);   /* salida limpia, sin rebote */

  /* --- brand-pattern.css · EL GESTO DE MARCA: "la franja" ---------------- */
  /* Filetes paralelos a 60o, ancho 3px, paso 18px. En la variante ambar solo
     UNO de cada tres filetes es ambar: sobrio, nunca cinta de obra.
     Banda de borde, sello de esquina o relleno de hueco. Vale a una tinta. */
  --franja: repeating-linear-gradient(
    var(--franja-angle),
    var(--azul-pizarra) 0 3px,
    transparent 3px calc(var(--franja-unit)*3)
  );
  --franja-ambar: repeating-linear-gradient(
    var(--franja-angle),
    var(--ambar) 0 3px,
    transparent 3px 18px,
    rgba(245,243,239,.30) 18px 21px,
    transparent 21px 36px,
    rgba(245,243,239,.30) 36px 39px,
    transparent 39px 54px
  );
  --franja-clara: repeating-linear-gradient(
    var(--franja-angle),
    var(--azul-pizarra-100) 0 3px,
    transparent 3px calc(var(--franja-unit)*3)
  );
  --franja-sobre-oscuro: repeating-linear-gradient(
    var(--franja-angle),
    rgba(245,243,239,.30) 0 3px,
    transparent 3px calc(var(--franja-unit)*3)
  );
  /* --- iconos (03-09-2026) ---------------------------------------------- */
  /* Glifo `phone` de Lucide, que es el que pide IconButton del sistema. Va como
     máscara y no como <img> para que herede `currentColor` en los tres fondos
     (claro, oscuro y héroe azul). Fichero equivalente:
     diseno/sistema/assets/icono-telefono.svg */
  --icono-telefono: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E");
}
}  /* fin de @layer lds-fallback */


/* ==========================================================================
   2. EL ARREGLO DEL ROOT FONT-SIZE  🔴 NO BORRAR
   --------------------------------------------------------------------------
   Bricks fija por convencion html{font-size:62.5%} (1rem = 10px) para que
   escribir rem sea comodo. Este sistema de diseno esta calculado a 16px: la
   escala esta en px y la medida de linea en ch, pero cualquier rem que entre
   por Bricks, por un plugin o por un componente futuro saldria al 62,5 % de su
   tamano. Es la causa raiz del "el texto se ve muy pequeno" recurrente en
   Bricks, y el ajuste "Root font size = 100%" del Style Manager NO siempre
   llega al frontend: hay que forzarlo en el CSS del hijo.

   Especificidad: html:root vale (0,1,1) frente al html (0,0,1) que emite
   Bricks, asi que gana SIN necesidad de !important, que es lo que queremos
   para que un dia se pueda anular puntualmente.
   Diagnostico rapido en consola:
     getComputedStyle(document.documentElement).fontSize  // debe dar "16px"
   ========================================================================== */
html:root{font-size:100%}


/* ==========================================================================
   3. TIPOGRAFIA BASE DEL DOCUMENTO
   ========================================================================== */

/* Cuerpo. Source Sans 3 400/17px/1.55 sobre blanco, texto grafito 700.
   text-wrap:pretty evita lineas viudas en titulares y parrafos cortos. */
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

/* Titulares. Un solo salto por nivel: 56 -> 38 -> 28 -> 21.
   Archivo, interletraje negativo, color grafito. */
h1,h2,h3,h4{
  margin:0;
  color:var(--text-strong);
  font-family:var(--font-titulares);
  letter-spacing:var(--track-heading);
}
h1{font:var(--type-h1);letter-spacing:var(--track-heading)}
h2{font:var(--type-h2);letter-spacing:var(--track-heading)}
h3{font:var(--type-h3);letter-spacing:var(--track-heading)}
/* El sistema NO define --type-h4: solo el tamano (--size-h4). Se compone aqui
   con tokens existentes (semibold + h4 + snug), sin inventar ningun valor.
   Anotado como carencia en el README. */
h4{font:var(--weight-semibold) var(--size-h4)/var(--leading-snug) var(--font-titulares)}

/* Display: el 56px del heroe. Uno solo por pagina. Se pide con clase porque en
   Bricks el h1 del heroe y el h1 semantico no siempre son el mismo elemento. */
.lds-display{font:var(--type-display);letter-spacing:var(--track-display);color:var(--text-strong)}

/* Parrafos y enlaces. */
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--text-link-hover)}
strong,b{font-weight:var(--weight-semibold);color:var(--text-strong)}

/* Rotulo en versalitas de 12px. Es el UNICO sitio donde el sistema permite
   mayusculas seguidas. */
.lds-eyebrow{
  font:var(--type-eyebrow);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* 🔴 REGLA DEL SISTEMA: TODA CIFRA VA EN MONOESPACIADA.
   Precios, metros cuadrados, horarios, telefonos, plazos, porcentajes. No es
   cosmetica: hace que "318 EUR" se lea como un dato verificable y no como un
   reclamo comercial, y tabular-nums alinea las columnas de la calculadora.
   No se puede automatizar (no hay selector CSS de "esto es un numero"): se
   envuelve la cifra en <span class="lds-cifra">. */
.lds-cifra{font-family:var(--font-cifras);font-variant-numeric:tabular-nums}

/* Medida de linea. El texto corrido NUNCA va a todo el ancho: maximo 64
   caracteres, 46 en columna estrecha. */
.lds-medida{max-width:var(--measure)}
.lds-medida--estrecha{max-width:var(--measure-narrow)}


/* ==========================================================================
   4. CONTENEDOR
   ========================================================================== */

/* Contenedor de marca: 1160px con gutter de 24px a cada lado. */
.lds-contenedor{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* Columna estrecha de lectura: 760px. */
.lds-contenedor--estrecho{max-width:var(--container-narrow)}

/* Los arboles generados para Bricks traen contenedores con anchura FIJA en px
   que no escalan y desbordan en movil. Este techo global lo impide sin tocar
   ni un arbol. Verificar siempre a 375px: scrollWidth no debe superar el
   viewport. */
.brxe-container{max-width:100%}


/* ==========================================================================
   5. FOCO ACCESIBLE
   --------------------------------------------------------------------------
   Anillo ambar sobre borde: es el unico uso del ambar como senal de sistema.
   Se usa :focus-visible para que el anillo no salte con el raton, solo con
   teclado. Regla copiada del sistema (tokens/base.css).
   NOTA: el sistema describe en su readme un halo de 3px rgba(224,138,30,.28)
   para el foco, pero NO existe token para ese valor; no se inventa aqui.
   Queda anotado como carencia en el README.
   ========================================================================== */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Los 2px del outline y los 1px/2px del subrayado de enlace estan escritos a
   pelo porque asi los escribe el propio sistema en tokens/base.css: no existe
   token para ellos. Se copian literales antes que inventar uno. Anotado en el
   README.

   El objetivo tactil minimo de 44px que exige el sistema tampoco tiene token, y
   ademas es propiedad de los controles (boton, campo, dia de la semana): va en
   la hoja de COMPONENTES, no aqui. Anotado tambien en el README. */


/* ==========================================================================
   6. RESET MINIMO
   --------------------------------------------------------------------------
   Solo lo que hace falta. Va al final porque no compite con nada de lo
   anterior (no hay selectores repetidos), asi que el orden es indiferente.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}

/* Respeto a quien pide menos movimiento. El sistema ya anima poco (120-260ms,
   solo fundidos y cambios de color), pero esto es gratis y es accesibilidad. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}