/* ============================================================ FAROO LEGAL — Sistema visual Basado en el Manual de Marca v2.0 (agosto 2026) Proporción de color: Blanco 60 · Niebla 20 · Azul faro 15 · Ámbar 5 Tipografía: Gabarito (familia única) ============================================================ */ /* ---------- 0. Tipografía ---------- Gabarito se sirve desde este mismo dominio, no desde Google Fonts. Antes el cargaba una hoja de estilo de fonts.googleapis.com, y esa petición bloqueaba el pintado: el navegador tenía que abrir conexión con un servidor ajeno (DNS, TLS, descarga) antes de mostrar nada. Gabarito es una fuente variable, así que los tres pesos salen del mismo archivo: son dos ficheros en total, uno por subconjunto de caracteres. Los bloques de abajo reproducen exactamente los que servía Google —un bloque por peso, los tres apuntando al mismo archivo— y solo cambia la URL. Declararlo con un rango (400 700) daría el mismo resultado, pero copiar la estructura original garantiza que el navegador reciba las mismas instrucciones que antes. El unicode-range hace que latin-ext solo se descargue si la página necesita alguno de sus caracteres; en español no ocurre casi nunca. */ @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gabarito-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: 'Gabarito'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/gabarito-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: 'Gabarito'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/gabarito-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: 'Gabarito'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gabarito-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: 'Gabarito'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/gabarito-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: 'Gabarito'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/gabarito-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 ---------- */ :root { /* Paleta */ --azul-faro: #002A3A; --ambar-senal: #FFA31A; --ambar-texto: #B26A00; --niebla: #EDF1F2; --rescoldo: #FFF4E3; --grafito: #5A6570; --blanco: #FFFFFF; /* Derivados (solo para bordes y estados, nunca como color de marca) */ --borde: #DDE5E8; --borde-suave: #E9EEF0; --azul-80: #17404F; --azul-60: #4A6875; --sombra: 0 1px 2px rgba(0, 42, 58, .04), 0 8px 24px rgba(0, 42, 58, .06); --sombra-alta: 0 2px 4px rgba(0, 42, 58, .06), 0 16px 40px rgba(0, 42, 58, .10); /* Tipografía */ --fuente: 'Gabarito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Ritmo */ --ancho-max: 1140px; --ancho-texto: 68ch; /* máx. 75 caracteres según el manual */ --radio: 4px; --radio-card: 6px; /* Espaciado */ --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fuente); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--grafito); background: var(--blanco); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; } figure { margin: 0; } /* ---------- 3. Tipografía ---------- */ /* Regla dura 01: los titulares van en Regular. El tamaño da el peso. */ h1, h2, h3, h4 { font-weight: 400; color: var(--azul-faro); margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); /* 40–64 px */ letter-spacing: -.03em; line-height: 1.08; } h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); letter-spacing: -.03em; line-height: 1.14; } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.25; } h4 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; } p { margin: 0 0 1em; max-width: var(--ancho-texto); } p:last-child { margin-bottom: 0; } .subtitulo { font-size: clamp(1.125rem, 1.7vw, 1.5rem); /* 18–24 px */ font-weight: 500; letter-spacing: -.02em; line-height: 1.28; color: var(--azul-faro); max-width: 34ch; } .entrada { font-size: 1.125rem; line-height: 1.62; color: var(--grafito); max-width: 62ch; } .etiqueta { display: inline-block; font-size: .75rem; /* 12–13 px */ font-weight: 700; text-transform: uppercase; letter-spacing: .16em; /* +16% */ color: var(--ambar-texto); margin-bottom: var(--s3); } .etiqueta--gris { color: var(--grafito); } .etiqueta--claro { color: var(--ambar-senal); } /* solo sobre azul faro */ .cifra { font-weight: 700; font-size: clamp(2.75rem, 5vw, 4rem); letter-spacing: -.02em; line-height: 1; color: var(--azul-faro); display: block; } /* Palabra destacada sobre fondo claro: subrayado ámbar bajo texto azul. Nunca ámbar señal como texto sobre blanco (contraste insuficiente). */ .destacado { color: var(--azul-faro); font-weight: 500; box-shadow: inset 0 -.32em 0 rgba(255, 163, 26, .38); } .tenue { color: var(--grafito); opacity: .82; } /* Acento ámbar en titular. Excepción pedida por la marca: el manual reserva el Ámbar señal para fondos oscuros, así que sobre blanco solo debe usarse en tamaños de titular grandes y nunca en cuerpo de texto. */ .acento-ambar { color: var(--ambar-senal); } /* ---------- 4. Enlaces ---------- */ a { color: var(--azul-faro); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--ambar-texto); } .enlace-texto { color: var(--azul-faro); font-weight: 500; border-bottom: 2px solid rgba(255, 163, 26, .5); padding-bottom: 1px; transition: border-color .18s ease, color .18s ease; } .enlace-texto:hover { border-bottom-color: var(--ambar-senal); color: var(--azul-faro); } /* ---------- 5. Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--fuente); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; padding: 1.05em 1.9em; border-radius: var(--radio); border: 1.5px solid transparent; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; line-height: 1; text-align: center; } .btn:hover { transform: translateY(-1px); } .btn .flecha { transition: transform .18s ease; } .btn:hover .flecha { transform: translateX(3px); } /* Botón principal: fondo Ámbar señal, texto Azul faro (regla del manual) */ .btn--principal { background: var(--ambar-senal); color: var(--azul-faro); } .btn--principal:hover { background: #FFB33F; color: var(--azul-faro); } .btn--linea { background: transparent; color: var(--azul-faro); border-color: var(--borde); } .btn--linea:hover { border-color: var(--azul-faro); color: var(--azul-faro); } /* Sobre fondo Azul faro */ .btn--claro { background: var(--blanco); color: var(--azul-faro); } .btn--claro:hover { background: var(--niebla); color: var(--azul-faro); } .btn--linea-clara { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, .3); } .btn--linea-clara:hover { border-color: var(--blanco); color: var(--blanco); } .btn--ancho { width: 100%; justify-content: center; } /* ---------- 6. Estructura ---------- */ .contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--s4); } .contenedor--angosto { max-width: 800px; } .seccion { padding: var(--s7) 0; } .seccion--corta { padding: var(--s6) 0; } .seccion--niebla { background: var(--niebla); } .seccion--rescoldo { background: var(--rescoldo); } /* Banda oscura: estructura, no ambiente. Se usa poco. */ .seccion--azul { background: var(--azul-faro); color: rgba(255, 255, 255, .82); } .seccion--azul h1, .seccion--azul h2, .seccion--azul h3, .seccion--azul h4 { color: var(--blanco); } .seccion--azul .subtitulo { color: var(--blanco); } .seccion--azul .cifra { color: var(--blanco); } .seccion--azul a { color: var(--blanco); } .cabecera-seccion { margin-bottom: var(--s5); max-width: 46ch; } .cabecera-seccion p { color: var(--grafito); } .divisor { height: 1px; background: var(--borde-suave); border: 0; margin: 0; } /* ---------- 7. Rejillas ---------- */ .rejilla { display: grid; gap: var(--s3); } .rejilla--2 { grid-template-columns: repeat(2, 1fr); } .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } .rejilla--holgada { gap: var(--s4); } .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); align-items: start; } .split--centrado { align-items: center; } /* ---------- 8. Tarjetas ---------- */ .tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: var(--s4); height: 100%; display: flex; flex-direction: column; } .tarjeta h3, .tarjeta h4 { margin-bottom: .6rem; } .tarjeta p { font-size: .9375rem; color: var(--grafito); max-width: none; } .tarjeta--niebla { background: var(--niebla); border-color: transparent; } .tarjeta--rescoldo { background: var(--rescoldo); border-color: transparent; } .tarjeta--plana { border-color: transparent; padding: 0; background: transparent; } .tarjeta--enlace { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .tarjeta--enlace:hover { border-color: var(--borde); box-shadow: var(--sombra-alta); transform: translateY(-2px); } /* Tarjeta con acento ámbar en el borde superior */ .tarjeta--acento { border-top: 3px solid var(--ambar-senal); } /* Numeración de pasos */ .paso-num { font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: var(--ambar-texto); display: block; margin-bottom: var(--s2); } .seccion--azul .paso-num { color: var(--ambar-senal); } /* Iconos de línea */ .icono { width: 26px; height: 26px; stroke: var(--azul-faro); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s3); flex-shrink: 0; } .icono--ambar { stroke: var(--ambar-texto); } .seccion--azul .icono { stroke: var(--ambar-senal); } /* ---------- 9. Nota / cita ---------- */ .nota { background: var(--rescoldo); border-left: 3px solid var(--ambar-senal); padding: var(--s4); border-radius: 0 var(--radio) var(--radio) 0; } .nota p { max-width: none; } .nota strong { color: var(--azul-faro); font-weight: 500; } .cita { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.42; letter-spacing: -.02em; color: var(--azul-faro); font-weight: 400; border-left: 2px solid var(--ambar-senal); padding-left: var(--s3); margin: var(--s4) 0; max-width: 52ch; } .cita--tenue { color: var(--grafito); border-left-color: var(--borde); font-size: 1rem; } .frase-filosofia { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.14; letter-spacing: -.03em; font-weight: 400; color: var(--blanco); max-width: 20ch; } .frase-filosofia em { font-style: normal; color: var(--ambar-senal); } /* ---------- 10. Listas ---------- */ .lista-check { list-style: none; } .lista-check li { position: relative; padding-left: 1.75rem; margin-bottom: .8rem; font-size: .9375rem; max-width: 60ch; } .lista-check li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border-radius: 1px; background: var(--ambar-senal); } .lista-check li:last-child { margin-bottom: 0; } .lista-simple { list-style: none; } .lista-simple li { padding: .6rem 0; border-bottom: 1px solid var(--borde-suave); font-size: .9375rem; } .lista-simple li:last-child { border-bottom: 0; } .lista-num { list-style: none; counter-reset: paso; } .lista-num li { counter-increment: paso; position: relative; padding-left: 3rem; margin-bottom: var(--s3); max-width: 62ch; } .lista-num li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--ambar-texto); } .lista-num li strong { color: var(--azul-faro); font-weight: 500; } /* Listas compactas dentro de tarjetas (cobertura) */ .lista-materia { list-style: none; } .lista-materia li { font-size: .875rem; line-height: 1.5; padding: .3rem 0; color: var(--grafito); } /* ---------- 11. Tabla comparativa ---------- */ .tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 680px; } .tabla th, .tabla td { text-align: left; padding: 1.15rem 1.25rem; vertical-align: top; border-bottom: 1px solid var(--borde-suave); } .tabla thead th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--grafito); border-bottom: 1px solid var(--borde); padding-bottom: .9rem; } .tabla thead th:last-child { color: var(--ambar-texto); } .tabla tbody th { font-weight: 500; color: var(--azul-faro); width: 22%; } .tabla td:last-child { color: var(--azul-faro); background: var(--rescoldo); } .tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; } /* ---------- 12. Acordeón (FAQ) ---------- */ .faq { border-top: 1px solid var(--borde-suave); } .faq details { border-bottom: 1px solid var(--borde-suave); } .faq summary { list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0; position: relative; font-size: 1.0625rem; font-weight: 500; color: var(--azul-faro); letter-spacing: -.015em; transition: color .18s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--ambar-texto); } .faq summary::after, .faq summary::before { content: ""; position: absolute; right: .4rem; top: 50%; background: var(--ambar-senal); transition: transform .22s ease, opacity .22s ease; } .faq summary::after { width: 14px; height: 2px; transform: translateY(-50%); } .faq summary::before { width: 2px; height: 14px; right: 1rem; transform: translateY(-50%); } .faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; } .faq .respuesta { padding: 0 4rem 1.75rem 0; } .faq .respuesta p { font-size: .9375rem; } /* ---------- 13. Cabecera ---------- */ .cabecera { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .93); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .cabecera.esta-fija { border-bottom-color: var(--borde-suave); } .cabecera__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 76px; } /* Marca — área de resguardo = altura de la doble "o" */ .marca { display: flex; align-items: center; flex-shrink: 0; padding: 8px 0; } .marca img, .marca svg { height: 30px; width: auto; display: block; } .nav { display: flex; align-items: center; gap: var(--s4); } .nav a { font-size: .9375rem; font-weight: 400; color: var(--azul-faro); position: relative; padding: .35rem 0; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--ambar-senal); transition: width .2s ease; } .nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; } .nav a[aria-current="page"] { font-weight: 500; } .cabecera__acciones { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; } .cabecera .btn { padding: .85em 1.4em; font-size: .75rem; } .menu-boton { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--azul-faro); } .menu-boton svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; } /* ---------- 14. Hero ---------- */ .hero { padding: var(--s7) 0 var(--s6); } .hero h1 { max-width: 16ch; margin-bottom: var(--s3); } .hero .subtitulo { max-width: 30ch; margin-bottom: var(--s3); } .hero .entrada { margin-bottom: var(--s4); } .hero-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--borde-suave); } .hero-cifras .rotulo { font-size: .875rem; color: var(--grafito); margin-top: .5rem; max-width: 20ch; } /* Países — reemplaza a las cifras en el hero */ .paises { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--borde-suave); } .paises__rotulo { font-size: .875rem; color: var(--grafito); max-width: 46ch; margin-bottom: var(--s3); } .paises__lista { display: flex; flex-wrap: wrap; gap: .65rem 1.35rem; list-style: none; align-items: center; } .paises__lista li { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--grafito); white-space: nowrap; } .bandera { width: 24px; height: 16px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 42, 58, .12); object-fit: cover; } /* Logos de clientes en las tarjetas de caso. Sin pastilla ni recuadro: los cuatro archivos tienen fondo transparente, así que se apoyan directamente sobre la banda. La altura fija es lo que los iguala; el ancho lo decide cada logo. */ .caso__marca { display: flex; align-items: center; justify-content: flex-start; height: 30px; margin-bottom: var(--s3); flex-shrink: 0; } .caso__marca img { height: 100%; width: auto; max-width: 120px; object-fit: contain; object-position: left center; } /* Amerivet lleva bajofirma; a la misma altura queda ilegible, así que crece. */ .caso__marca img[alt="Amerivet"] { height: 132%; } .caso__encabezado { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--borde-suave); } .caso__encabezado .caso__marca { margin-bottom: 0; } .caso__encabezado h3 { margin-bottom: 0; font-size: 1.125rem; } .seccion--niebla .caso__encabezado { border-bottom-color: rgba(0, 42, 58, .1); } @media (max-width: 720px) { .caso__encabezado { flex-direction: column; align-items: flex-start; gap: var(--s2); } } /* Hero de subpágina */ .hero-pagina { padding: var(--s6) 0 var(--s5); background: var(--niebla); } .hero-pagina h1 { max-width: 20ch; margin-bottom: var(--s3); } .hero-pagina .entrada { max-width: 58ch; } .migas { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grafito); margin-bottom: var(--s3); } .migas a { color: var(--grafito); } .migas a:hover { color: var(--ambar-texto); } .migas span { opacity: .5; margin: 0 .4em; } /* ---------- 15. Recorridos (dos públicos) ---------- */ .recorrido { display: flex; flex-direction: column; padding: var(--s5) var(--s4) var(--s4); border: 1px solid var(--borde); border-radius: var(--radio-card); background: var(--blanco); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; height: 100%; } .recorrido:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); } .recorrido h3 { margin-bottom: .75rem; max-width: 22ch; } .recorrido p { font-size: .9375rem; flex-grow: 1; margin-bottom: var(--s4); } .recorrido .enlace-texto { font-size: .9375rem; align-self: flex-start; } /* ---------- 16. Casos ---------- */ .caso { padding: var(--s4) 0; border-top: 1px solid var(--borde-suave); } .caso h3 { margin-bottom: var(--s3); max-width: 28ch; } .caso dl { margin: 0; } .caso dt { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--ambar-texto); margin-bottom: .3rem; } .caso dd { margin: 0 0 var(--s3); font-size: .9375rem; color: var(--grafito); } .caso dd:last-child { margin-bottom: 0; } .caso dd.resultado { color: var(--azul-faro); } /* ---------- 17. Formulario ---------- */ .formulario { display: grid; gap: var(--s3); } .campo { display: flex; flex-direction: column; gap: .5rem; } .campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .campo > label, .etiqueta-campo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--azul-faro); } .campo .ayuda { font-size: .8125rem; color: var(--grafito); font-weight: 400; text-transform: none; letter-spacing: 0; } .formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario select, .formulario textarea { font-family: var(--fuente); font-size: .9375rem; color: var(--azul-faro); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: .85rem 1rem; width: 100%; transition: border-color .18s ease, box-shadow .18s ease; } .formulario textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .formulario select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6570' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.5rem; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--ambar-senal); box-shadow: 0 0 0 3px rgba(255, 163, 26, .18); } .formulario input:user-invalid, .formulario textarea:user-invalid, .formulario .con-error { border-color: #C4552E; } /* Aviso de error bajo un campo, devuelto por api/contacto.php */ .campo-error { font-size: .8125rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #A03F1E; margin: 0; } .radios { display: flex; gap: var(--s3); flex-wrap: wrap; } .radios label { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--grafito); cursor: pointer; } .radios input[type="radio"] { accent-color: var(--ambar-senal); width: 16px; height: 16px; } .consentimiento { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--grafito); line-height: 1.5; cursor: pointer; } .consentimiento input[type="checkbox"] { accent-color: var(--ambar-senal); width: 17px; height: 17px; margin-top: .12rem; flex-shrink: 0; } .nota-privacidad { font-size: .8125rem; color: var(--grafito); } .nota-recaptcha { font-size: .75rem; color: var(--grafito); margin: 0; } .nota-recaptcha a { color: var(--grafito); } /* El distintivo flotante de reCAPTCHA se oculta; la atribución que exige Google va como texto bajo el botón de envío (.nota-recaptcha). */ .grecaptcha-badge { visibility: hidden; } /* Miel de araña para robots — no visible */ .trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .mensaje-form { display: none; padding: var(--s3); border-radius: var(--radio); background: var(--rescoldo); border-left: 3px solid var(--ambar-senal); font-size: .9375rem; color: var(--azul-faro); } .mensaje-form.visible { display: block; } /* Enviado: fondo Niebla y filo Azul faro. Nada de verde: no está en el manual. */ .mensaje-form--ok { background: var(--niebla); border-left-color: var(--azul-faro); } /* Falló: terracota, el mismo tono de los campos inválidos. */ .mensaje-form--error { background: #FBEDE8; border-left-color: #C4552E; } /* ---------- 17 bis. Documentos legales ---------- */ .documento { max-width: 74ch; } .documento > p, .documento > ul, .documento > ol { max-width: none; } .documento h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.2; margin: var(--s6) 0 var(--s2); padding-top: var(--s2); border-top: 1px solid var(--borde-suave); } .documento h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .documento h2 .num { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; color: var(--ambar-texto); margin-bottom: .5rem; } .documento h3 { font-size: 1.0625rem; font-weight: 500; margin: var(--s4) 0 .6rem; } .documento p { margin-bottom: .9em; } .documento ul, .documento ol { margin: 0 0 1.2em 1.15rem; } .documento li { margin-bottom: .5rem; padding-left: .3rem; } .documento li::marker { color: var(--ambar-senal); } .documento strong { color: var(--azul-faro); font-weight: 500; } .documento .definiciones { list-style: none; margin-left: 0; } .documento .definiciones li { padding-left: 0; } .vigencia { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--azul-faro); background: var(--rescoldo); border-left: 3px solid var(--ambar-senal); padding: .7rem 1rem; margin-top: var(--s3); } /* Índice del documento */ .indice { background: var(--niebla); border-radius: var(--radio-card); padding: var(--s4); margin-bottom: var(--s6); } .indice h2 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--grafito); margin: 0 0 var(--s3); border: 0; padding: 0; } .indice ol { list-style: none; margin: 0; columns: 2; column-gap: var(--s4); counter-reset: seccion; } .indice li { counter-increment: seccion; break-inside: avoid; margin-bottom: .5rem; padding-left: 2.1rem; position: relative; font-size: .875rem; } .indice li::before { content: counter(seccion, decimal-leading-zero); position: absolute; left: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; color: var(--ambar-texto); top: .2em; } .indice a { color: var(--azul-faro); } .indice a:hover { color: var(--ambar-texto); text-decoration: underline; } /* Ficha de datos del responsable */ .ficha { border: 1px solid var(--borde); border-radius: var(--radio-card); padding: var(--s4); margin: var(--s3) 0 var(--s4); } .ficha dl { margin: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: .7rem var(--s3); } .ficha dt { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--grafito); padding-top: .15em; } .ficha dd { margin: 0; font-size: .9375rem; color: var(--azul-faro); } @media (max-width: 720px) { .indice ol { columns: 1; } .ficha dl { grid-template-columns: 1fr; gap: .2rem 0; } .ficha dd { margin-bottom: .8rem; } } /* ---------- 18. CTA final ---------- */ .cta-final { background: var(--azul-faro); color: rgba(255, 255, 255, .82); } .cta-final h2 { color: var(--blanco); max-width: 18ch; margin-bottom: var(--s3); } .cta-final p { color: rgba(255, 255, 255, .78); max-width: 52ch; } .cta-final .acciones { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); } /* ---------- 19. Pie ---------- */ .pie { background: var(--azul-faro); color: rgba(255, 255, 255, .68); padding: var(--s6) 0 var(--s4); } .pie__superior { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .12); } .pie .marca svg, .pie .marca img { height: 28px; } .pie__descripcion { font-size: .9375rem; color: rgba(255, 255, 255, .7); margin-top: var(--s3); max-width: 34ch; } .pie h4 { color: var(--blanco); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; margin-bottom: var(--s3); } .pie ul { list-style: none; } .pie li { margin-bottom: .7rem; font-size: .9375rem; } .pie a { color: rgba(255, 255, 255, .72); } .pie a:hover { color: var(--ambar-senal); } .pie__inferior { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding-top: var(--s4); font-size: .8125rem; color: rgba(255, 255, 255, .55); flex-wrap: wrap; } .pie__legales { display: flex; gap: var(--s3); flex-wrap: wrap; } /* ---------- 20. Utilidades ---------- */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .saltar-al-contenido { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ambar-senal); color: var(--azul-faro); padding: .9rem 1.4rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; } .saltar-al-contenido:focus { left: 0; } .mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); } .centrado { text-align: center; margin-left: auto; margin-right: auto; } .centrado p, .centrado .subtitulo, .centrado .entrada { margin-left: auto; margin-right: auto; } /* Aparición suave al hacer scroll */ .revelar { opacity: 0; transform: translateY(16px); } .revelar.visible { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.6,.3,1), transform .6s cubic-bezier(.2,.6,.3,1); } /* ---------- 21. Responsive ---------- */ @media (max-width: 960px) { :root { --s7: 4.5rem; --s6: 3rem; } .split { grid-template-columns: 1fr; gap: var(--s4); } .rejilla--4 { grid-template-columns: repeat(2, 1fr); } .pie__superior { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--blanco); border-bottom: 1px solid var(--borde); padding: var(--s2) var(--s4) var(--s4); box-shadow: var(--sombra); max-height: calc(100vh - 76px); overflow-y: auto; } .nav.abierto { display: flex; } .nav a { padding: .9rem 0; border-bottom: 1px solid var(--borde-suave); } .nav a::after { display: none; } .menu-boton { display: block; } .cabecera__acciones .btn { display: none; } } @media (max-width: 720px) { :root { --s7: 3.5rem; --s6: 2.5rem; --s5: 2rem; } .contenedor { padding: 0 1.25rem; } .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; } .hero-cifras { grid-template-columns: 1fr; gap: var(--s3); } .hero-cifras > div { display: flex; align-items: baseline; gap: var(--s2); } .hero-cifras .cifra { font-size: 2.25rem; } .hero-cifras .rotulo { margin-top: 0; max-width: none; } .campo--doble { grid-template-columns: 1fr; } .pie__superior { grid-template-columns: 1fr; gap: var(--s4); } .pie__inferior { flex-direction: column; align-items: flex-start; } .faq summary { padding-right: 2.5rem; font-size: 1rem; } .faq .respuesta { padding-right: 0; } .cta-final .acciones .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .revelar { opacity: 1; transform: none; } } /* ---------- 22. Impresión ---------- */ @media print { .cabecera, .cta-final, .pie, .menu-boton { display: none; } body { color: #000; } .seccion { padding: 1.5rem 0; } }