/* estilos.css · Faro Digital · marca E «Carta de día» (2026-10-07) sobre la base de sitio (reglas C2 a C6). Cuatro bloques: tokens, base, componentes, utilidades. Los NOMBRES de los tokens son los de la base; los VALORES son de la marca (regla C3). Tres tokens propios de E se suman a los de la base: --color-fondo-2 (papel-2, la sombra plana), --fuente-lecturas (Chivo Mono) y --celda (la cuadrícula de la carta). Contrastes (WCAG 2.x) en traspaso/decisiones.md; lo que cada color hace, en CLAUDE.md «Identidad». */ /* ===== 1. Tokens ===== */ :root{ color-scheme:light; /* color: papel, papel-2, tinta, grafito, boya, línea */ --color-fondo:#F3EEE3; --color-fondo-2:#E9E2D1; --color-texto:#1C1B18; --color-texto-suave:#5B5750; --color-acento:#B3390A; --color-linea:#C9C0AC; --color-foco:#B3390A; /* tipografía: Chivo en titulares (800), logotipo y texto (400 y 600); Chivo Mono en lecturas, cifras, menú, botones y pie */ --fuente-texto:"Chivo","Helvetica Neue",Arial,sans-serif; --fuente-titulos:"Chivo","Helvetica Neue",Arial,sans-serif; --fuente-lecturas:"Chivo Mono","SF Mono",Menlo,Consolas,monospace; --t-menor:.8125rem; --t-cuerpo:1rem; --t-1:1.0625rem; --t-2:1.25rem; --t-3:1.5rem; --t-4:1.75rem; --t-5:clamp(2rem,1.2rem + 3.6vw,3.5rem); --t-6:clamp(2.75rem,1.5rem + 7vw,6rem); --t-lectura:.75rem; --lh-titular:1; --lh-cuerpo:1.55; /* espacio: la celda de la carta mide 4 rem; el contenedor de 72 rem son 18 celdas y a 1280 px cae sobre líneas de la cuadrícula */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --celda:4rem; --canal:clamp(1rem,4vw,2.5rem); --paso:clamp(3rem,8vw,6rem); --ancho-lectura:36rem; --ancho-max:72rem; /* forma: esquinas casi rectas y sombra plana, sin desenfoque */ --r1:2px; --r2:2px; --sombra:.5rem .5rem 0 var(--color-fondo-2); /* movimiento */ --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --ease:cubic-bezier(.2,0,.2,1); } /* Fuentes (regla C4): woff2 latin en fonts/, con swap; origen, bytes y ejes en fonts/LEEME.md. Dos familias desde la marca A. */ @font-face{font-family:"Chivo";src:url("/fonts/chivo-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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:"Chivo Mono";src:url("/fonts/chivo-mono-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;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} /* ===== 2. Base ===== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} /* La cuadrícula es la estructura de la carta, no una textura: líneas de 1 px cada celda, en línea al 70 %, centradas arriba. Sin color-mix() (navegadores anteriores a 2023) se pierde la cuadrícula, no el contenido. */ body{margin:0;min-height:100vh;background-color:var(--color-fondo);background-image:linear-gradient(to right,color-mix(in srgb,var(--color-linea) 70%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--color-linea) 70%,transparent) 1px,transparent 1px);background-size:var(--celda) var(--celda);background-position:center top;color:var(--color-texto);font:var(--t-cuerpo)/var(--lh-cuerpo) var(--fuente-texto);text-wrap:pretty} /* Titulares: Chivo 800 con interletrado −0,02 em (−0,03 en el h1), el mismo corte del logotipo. Una palabra por titular se enciende en boya con . */ h1,h2,h3{font-family:var(--fuente-titulos);font-weight:800;letter-spacing:-.02em;line-height:var(--lh-titular);text-wrap:balance;margin:0 0 var(--e4)} h1{font-size:var(--t-6);line-height:.96;letter-spacing:-.03em} h2{font-size:var(--t-5);line-height:.98} h3{font-size:var(--t-4)} h1 em,h2 em{font-style:normal;color:var(--color-acento)} p{margin:0 0 var(--e4);max-width:var(--ancho-lectura)} strong{font-weight:600} a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px} img,svg,video{max-width:100%;height:auto;display:block} button,input,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--color-foco);outline-offset:3px;border-radius:var(--r1)} main:focus{outline:none} @media (hover:hover) and (pointer:fine){a:hover{color:var(--color-acento)}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* ===== 3. Componentes ===== */ .saltar{position:absolute;left:var(--canal);top:-100px;padding:var(--e2) var(--e4);background:var(--color-texto);color:var(--color-fondo);font-family:var(--fuente-lecturas);font-size:.875rem;text-decoration:none;z-index:40} .saltar:focus{top:var(--e2)} /* Bandas de ancho completo con el contenido alineado al contenedor de 72 rem: el relleno lateral es el canal o lo que sobra hasta el contenedor, lo que sea mayor; a 1280 px son 64 px, una celda, y el contenido cae sobre la cuadrícula. */ .cabecera,.portada,.seccion,.pie{padding-inline:max(var(--canal),calc(50% - var(--ancho-max) / 2))} .cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e4);min-height:var(--celda);padding-block:var(--e3);border-bottom:1px solid var(--color-texto);background:var(--color-fondo)} .logotipo{display:inline-flex;align-items:center;font-family:var(--fuente-titulos);font-weight:800;font-size:var(--t-3);letter-spacing:-.02em;line-height:1;text-decoration:none;color:var(--color-texto)} .logotipo svg{height:1.875rem;width:auto} .menu ul{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.75rem,2.5vw,1.75rem);list-style:none;margin:0;padding:0} .menu a{font-family:var(--fuente-lecturas);font-weight:500;font-size:var(--t-menor);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--color-texto);padding:var(--e1) 0;border-bottom:1px solid transparent;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} .menu a[aria-current]{color:var(--color-acento)} @media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--color-acento);border-bottom-color:var(--color-acento)}} .menu .boton{padding:var(--e2) var(--e4);font-size:var(--t-lectura);min-height:0;color:var(--color-fondo);border-bottom-color:var(--color-acento)} @media (hover:hover) and (pointer:fine){.menu .boton:hover{color:var(--color-fondo);border-bottom-color:var(--color-texto)}} .portada,.seccion{padding-block:var(--paso);border-bottom:1px solid var(--color-texto)} /* Lecturas de instrumento (.etiqueta de la base y .lectura de E son lo mismo): Chivo Mono 500, mayúsculas espaciadas, cifras tabulares, grafito; lo que importa va en y se enciende en boya. El vocabulario de carta (Carta, Lectura, Nivel, Tarifa, Guardia, Mensaje) vive solo aquí, nunca en titulares ni párrafos. */ .etiqueta,.lectura{font-family:var(--fuente-lecturas);font-weight:500;font-size:var(--t-lectura);letter-spacing:.1em;text-transform:uppercase;color:var(--color-texto-suave);font-variant-numeric:tabular-nums;max-width:none} .etiqueta b,.lectura b{color:var(--color-acento);font-weight:500} .cifra{font-family:var(--fuente-lecturas);font-weight:500;font-variant-numeric:tabular-nums} .titulo-seccion{display:grid;gap:var(--e4);margin-bottom:clamp(1.5rem,4vw,3rem)} .titulo-seccion .lectura,.titulo-seccion .etiqueta{display:flex;align-items:center;gap:var(--e4)} .titulo-seccion .lectura::after,.titulo-seccion .etiqueta::after{content:"";flex:1;height:1px;background:var(--color-texto);opacity:.4} .bajada{font-size:clamp(1.0625rem,1.6vw,1.25rem)} /* La regla de carta: precios fijos y sin permanencia, con una regla de 2 px en boya al margen. */ .regla{margin-top:clamp(2rem,5vw,3rem);max-width:44rem;border-left:2px solid var(--color-acento);padding-left:var(--e5)} .boton{display:inline-flex;align-items:center;gap:var(--e2);min-height:44px;padding:var(--e3) var(--e5);border:1px solid var(--color-acento);border-radius:var(--r2);background:var(--color-acento);color:var(--color-fondo);text-decoration:none;font-family:var(--fuente-lecturas);font-weight:500;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)} .boton-secundario{background:transparent;color:var(--color-texto);border-color:var(--color-texto)} .boton svg{width:1.25rem;height:1.25rem} @media (hover:hover) and (pointer:fine){.boton:hover,.boton-secundario:hover{background:var(--color-texto);border-color:var(--color-texto);color:var(--color-fondo)}} /* El cuadro de datos de la carta (.tarjeta de la base y .cuadro de E son lo mismo): fondo papel que tapa la cuadrícula, borde de 1 px en tinta, sombra plana en papel-2; cabecera en lectura con regla inferior; filas dt/dd separadas por línea, dd en Chivo Mono tabular a la derecha; bajo 24 em las filas se apilan para que ninguna cifra desborde. */ .tarjetas{display:grid;gap:var(--e5);list-style:none;margin:0;padding:0} .tarjetas + .columnas{margin-top:var(--e7)} .cuadro,.tarjeta{background:var(--color-fondo);border:1px solid var(--color-texto);border-radius:0;box-shadow:var(--sombra);padding:var(--e5);min-width:0} .cuadro > .lectura,.cuadro > .etiqueta,.tarjeta > .lectura,.tarjeta > .etiqueta{display:flex;justify-content:space-between;gap:var(--e4);border-bottom:1px solid var(--color-texto);padding-bottom:var(--e3);margin-bottom:var(--e1)} .cuadro dl,.tarjeta dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:0 var(--e4)} .cuadro dt,.cuadro dd,.tarjeta dt,.tarjeta dd{margin:0;padding:.875rem 0;border-bottom:1px solid var(--color-linea)} .cuadro dt,.tarjeta dt{color:var(--color-texto-suave)} .cuadro dd,.tarjeta dd{font-family:var(--fuente-lecturas);font-weight:500;font-variant-numeric:tabular-nums;text-align:right} .cuadro dd b,.tarjeta dd b{color:var(--color-acento);font-weight:500} .cuadro .nota,.tarjeta .nota{margin:var(--e4) 0 0;font-size:.9375rem;color:var(--color-texto-suave)} .tarjeta h3{margin-bottom:var(--e2)} .tarjeta p:last-child{margin-bottom:0} @media (max-width:24em){ .cuadro,.tarjeta{padding:var(--e4)} .cuadro dl,.tarjeta dl{grid-template-columns:1fr} .cuadro dt,.tarjeta dt{padding-bottom:var(--e1);border-bottom:0} .cuadro dd,.tarjeta dd{text-align:left;padding-top:0} } details{border-top:1px solid var(--color-linea);padding:var(--e3) 0} summary{cursor:pointer;font-weight:600;padding:var(--e2) 0} details p{margin-top:var(--e2)} .formulario{display:grid;gap:var(--e4);max-width:var(--ancho-lectura)} .formulario p{margin:0;display:grid;gap:var(--e1)} .formulario input,.formulario textarea{padding:var(--e3);border:1px solid var(--color-texto);border-radius:var(--r1);background:var(--color-fondo);width:100%} .formulario-aviso:empty{display:none} .oculto{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .legal h2{margin-top:var(--e6)} .legal .nota{font-size:var(--t-menor);color:var(--color-texto-suave)} .tabla,.tabla-cookies{overflow-x:auto} .tabla table,.tabla-cookies table{border-collapse:collapse;width:100%;font-size:var(--t-menor)} .tabla th,.tabla td,.tabla-cookies th,.tabla-cookies td{text-align:left;padding:var(--e2);border-bottom:1px solid var(--color-linea);vertical-align:top} .tabla caption{text-align:left;margin-bottom:var(--e3)} .tabla tbody th{font-weight:600;color:var(--color-texto)} .tabla th,.tabla-cookies th{font-family:var(--fuente-lecturas);font-weight:500;font-size:var(--t-lectura);letter-spacing:.1em;text-transform:uppercase;color:var(--color-texto-suave);border-bottom-color:var(--color-texto)} .pie{padding-block:var(--e7) var(--e6);border-top:1px solid var(--color-texto);background:var(--color-fondo)} .pie-enlaces{display:flex;flex-wrap:wrap;gap:var(--e5);list-style:none;margin:0 0 var(--e4);padding:0} .pie-enlaces a,.pie-enlaces .enlace{font-family:var(--fuente-lecturas);font-weight:500;font-size:var(--t-menor);letter-spacing:.08em;text-transform:uppercase;text-decoration:none} .pie-legal{font-family:var(--fuente-lecturas);font-weight:500;font-size:var(--t-menor);letter-spacing:.08em;text-transform:uppercase;color:var(--color-texto-suave)} .enlace{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.18em;cursor:pointer;touch-action:manipulation} @media (hover:hover) and (pointer:fine){.enlace:hover{color:var(--color-acento)}} /* Aviso de cookies (regla 5; lo crea consentimiento.js): un cuadro de datos más. */ .aviso-cookies[hidden]{display:none} .aviso-cookies{position:fixed;left:var(--e4);right:var(--e4);bottom:var(--e4);z-index:30;max-width:640px;margin:0 auto;padding:var(--e4) var(--e5);background:var(--color-fondo);color:var(--color-texto);border:1px solid var(--color-texto);border-radius:var(--r2);box-shadow:var(--sombra);font-size:var(--t-menor);opacity:0;transform:translateY(8px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} .aviso-cookies.visible{opacity:1;transform:none} .aviso-cookies p{margin:0 0 var(--e3);max-width:56ch} .aviso-cookies-acciones{display:flex;flex-wrap:wrap;gap:var(--e3)} .aviso-cookies .boton{flex:1 1 auto;justify-content:center;text-align:center} @media (prefers-reduced-motion:reduce){.aviso-cookies{transform:none}} @media print{.aviso-cookies,.saltar{display:none} body{background-image:none} .cuadro,.tarjeta{box-shadow:none}} /* Piezas del home (2026-10-07). Solo disposición: los colores, las fuentes y los cuadros son los de arriba. */ /* Portada en dos columnas desde 60 em: texto a la izquierda, el cuadro de lectura de la Luz a la derecha. */ .portada{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start} .portada > *{min-width:0} .portada .lectura{margin-bottom:var(--e5)} .portada .bajada{margin-top:var(--e5)} @media (min-width:60em){.portada{grid-template-columns:1.35fr 1fr}} /* Las tres cosas que ganas: cifra en boya, título en 600 y la explicación en grafito, separadas por línea. */ .ganas{list-style:none;margin:var(--e6) 0 0;padding:0;border-top:1px solid var(--color-texto)} .ganas li{display:grid;grid-template-columns:3.25rem 1fr;gap:var(--e3);padding:var(--e4) 0;border-bottom:1px solid var(--color-linea);align-items:baseline} .ganas .cifra{color:var(--color-acento);font-size:var(--t-menor);letter-spacing:.1em} .ganas strong{display:block;font-size:var(--t-1)} .ganas p{color:var(--color-texto-suave);margin:var(--e1) 0 0} .plazo{margin-top:var(--e5);font-weight:600} .acciones{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e4);margin-top:var(--e6)} /* Dos columnas para precio y contacto desde 60 em. */ .columnas{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start} .columnas > *{min-width:0} @media (min-width:60em){.columnas{grid-template-columns:1fr 1fr}} /* Cuadros de dos en fila (los anuncios): desde 640 px, y no pasan a tres. */ @media (min-width:960px){.tarjetas-2{grid-template-columns:repeat(2,1fr)}} /* Cuadros con texto: título en h3 (Chivo 800, cuerpo 1,5 rem), listas numeradas con separación entre puntos. */ .cuadro h3{font-size:var(--t-3);margin:var(--e2) 0 var(--e3)} .cuadro > .lectura:first-child + h3{margin-top:var(--e4)} .cuadro .lista{margin:0;padding-left:1.25rem;display:grid;gap:var(--e3)} .cuadro .lista li::marker{font-family:var(--fuente-lecturas);color:var(--color-acento)} .cuadro p:last-child{margin-bottom:0} /* Cuadro de prosa: dt y dd en una columna, el dt en 600 y el dd en texto corriente (la comparación con la agencia). */ /* La tarifa: un cuadro con dos pisos (la Luz y la guardia), el precio en Chivo Mono grande y las tres cuotas en filas. */ .tarifa{padding:0} .tarifa > div{padding:var(--e5)} .tarifa > div + div{border-top:1px solid var(--color-texto)} .tarifa > div > .lectura{display:flex;justify-content:space-between;gap:var(--e4)} .grande{font-family:var(--fuente-lecturas);font-weight:500;font-variant-numeric:tabular-nums;font-size:clamp(2.25rem,6vw,3.5rem);letter-spacing:-.02em;line-height:1;margin:var(--e2) 0 var(--e1);max-width:none;overflow-wrap:anywhere} .grande small{font-family:var(--fuente-texto);font-size:var(--t-cuerpo);font-weight:400;letter-spacing:0;color:var(--color-texto-suave);margin-left:var(--e2)} .tarifa .guardia .grande{font-size:clamp(1.75rem,4vw,2.25rem)} .cuotas{margin:var(--e4) 0 0;display:grid} .cuotas div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--e1) var(--e4);padding:.625rem 0;border-top:1px solid var(--color-linea)} .cuotas dt{color:var(--color-texto-suave)} .cuotas dd{margin:0;font-family:var(--fuente-lecturas);font-weight:500;font-variant-numeric:tabular-nums} @media (max-width:24em){.tarifa > div{padding:var(--e4)}} .precio{display:grid;gap:var(--e5);max-width:44rem} .precio > p{font-size:var(--t-1)} .precio .acciones{margin-top:0} /* Pasos (qué haces tú) y el mensaje de WhatsApp. */ .pasos{margin:var(--e5) 0 0;padding-left:1.25rem;display:grid;gap:var(--e3);max-width:var(--ancho-lectura)} .pasos li::marker{font-family:var(--fuente-lecturas);color:var(--color-acento)} .mensaje blockquote{margin:var(--e4) 0 0;font-size:var(--t-2);font-weight:600;line-height:1.35} .mensaje blockquote p{max-width:none} .mensaje .nota{margin-top:var(--e4)} .formulario label{font-family:var(--fuente-lecturas);font-weight:500;font-size:var(--t-lectura);letter-spacing:.1em;text-transform:uppercase;color:var(--color-texto-suave)} .formulario .nota{font-size:var(--t-menor);color:var(--color-texto-suave);max-width:none} /* Preguntas: ancho de lectura, línea de cierre bajo la última. */ .preguntas{max-width:44rem} .preguntas details:last-of-type{border-bottom:1px solid var(--color-linea)} /* Pie en dos columnas desde 48 em: logotipo y nota a la izquierda, enlaces a la derecha. */ .pie{display:grid;gap:var(--e5)} .pie .logotipo{margin-bottom:var(--e3)} .pie .nota{font-size:var(--t-menor);color:var(--color-texto-suave);margin:0} @media (min-width:48em){.pie{grid-template-columns:1fr auto;align-items:end} .pie-enlaces{margin:0 0 var(--e2)}} /* ===== 4. Utilidades y puntos de quiebre (mobile-first: 640, 960, 1024) ===== */ /* display:revert y no display:initial: «initial» para display es «inline», así que en un div rompe el bloque entero. «revert» devuelve el valor por omisión del navegador para ese elemento. (17-09-2026) OJO con el reverso (18-09-2026): «revert» devuelve el valor del NAVEGADOR, no el de tu componente. En un