/* =========================================================================== Estilos base de la Fábrica. Un solo archivo: cambiar «ese azul más oscuro» es cambiar una línea (patrones/mantenimiento.md). 1. Colores: el PATRÓN DE TRES TONOS (patrones/color.md). El de marca, tal cual, SOLO para decorar; el oscurecido para todo el texto de color. Mide cada uno contra su fondo y apunta el contraste al lado. 2. Escala tipográfica y de espacios (patrones/diseno.md): 7 tamaños, no 30. 3. Tres puntos de ruptura para todas las webs: 560 · 900. =========================================================================== */ :root { /* Transkeiles (branding.json → colores_nota; docs/03-estrategia.md) */ --marca: #BC8730; /* dorado del logo, medido: 3,16 sobre blanco → solo decoración; 5,11 sobre --tinta → texto sobre oscuro */ --marca-texto: #8C5F17; /* nuestro: texto y enlaces, 5,58 sobre blanco */ --marca-honda: #7A5214; /* nuestro: foco y detalles, 6,90 sobre blanco */ --amarillo: #F2B632; /* la franja de su web: SOLO fondo, con --tinta encima (8,85) */ --fondo: #FFFFFF; --fondo-alt: #F5F3EE; --tinta: #1F2124; /* el negro de sus camiones: 16,1 sobre blanco */ --tinta-suave: #4A4D55; /* 8,3 sobre blanco */ --claro-sobre-oscuro: #D9DBDF; /* 12,4 sobre --tinta */ --borde: #DCD8CF; --p0: .875rem; --p1: 1.125rem; --p2: 1.25rem; --p3: 1.6rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.2rem; --h1: clamp(var(--p4), 6vw, var(--p6)); --h2: clamp(var(--p3), 4vw, var(--p5)); --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem; --barra: 64px; /* el alto de la barra fija, en UN sitio */ --radio: 10px; --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* cero peticiones de fuera */ } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); } /* el freno de las anclas */ body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); } img, svg, video { max-width: 100%; height: auto; } figure { margin: 1.7em 0; } /* el margin:1em 40px de fábrica descuadra las fotos */ [hidden] { display: none !important; } /* cualquier display tuyo le gana a hidden */ a { color: var(--marca-texto); } /* --marca-texto da 4,51 sobre BLANCO y 4,16 sobre el gris de las secciones alternas (medido con contraste.py en Casa Emilia): un tono cumple sobre los fondos con los que se calibro, no sobre todos. Ahi los enlaces van en el hondo. */ .seccion--alt a:not(.boton), .hero a:not(.boton) { color: var(--marca-honda); } :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--marca-honda); outline-offset: 2px; } :where(p, li, td) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; } /* se pulsan con el dedo */ .hero :focus-visible, .oscuro :focus-visible, .pie :focus-visible, .barra-movil :focus-visible { outline-color: var(--amarillo); } /* el hondo no se ve sobre negro */ .barra-movil :focus-visible { outline-color: var(--tinta); } h1, h2, h3 { line-height: 1.2; text-wrap: balance; } h1 { font-size: var(--h1); margin: 0 0 var(--e2); } h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); } h3 { font-size: var(--p2); margin: var(--e3) 0 var(--e1); } .contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; } .estrecho { max-width: 44rem; } .seccion { padding: var(--e4) 0; } .seccion--alt { background: var(--fondo-alt); } /* Con la barra delante: .boton (display:inline-flex) va despues y ganaba, y el boton de escritorio aparecia en la cabecera del movil (visto en la revision visual de Casa Emilia). En el movil llama la barra de abajo. */ .barra .solo-escritorio { display: none; } /* --- barra fija --- */ .salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); } .salto:focus { left: 1rem; } .barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--borde); } .barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); } .barra__marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-right: auto; color: var(--tinta); font-weight: 700; text-decoration: none; } .barra__logo { height: 30px; width: auto; } .solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nav-escritorio { display: none; gap: .25rem; } .nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .55rem; white-space: nowrap; color: var(--tinta); text-decoration: none; border-radius: 6px; } .nav-escritorio a[aria-current="page"] { color: var(--marca-honda); font-weight: 700; } .nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; list-style: none; } .nav-movil summary::-webkit-details-marker { display: none; } .nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); display: grid; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: var(--e1) 1rem var(--e2); } .nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); } /* --- botones --- */ .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.2rem; border-radius: var(--radio); background: var(--amarillo); color: var(--tinta); font-weight: 700; text-decoration: none; border: 2px solid var(--amarillo); } button.boton { font: inherit; font-weight: 700; cursor: pointer; } /* el