/* ============================================================ FAROO LEGAL — Sistema visual del sitio (v2 · sep 2026) Manual de marca v2.0: Azul faro, Ámbar señal, Niebla, Rescoldo, Grafito. Tipografía única: Gabarito. Titulares en Regular. Todas las clases llevan prefijo f- para convivir con style.css (que siguen usando Recursos y el acuerdo marco). ============================================================ */ /* ============================================================ Gabarito servida desde el propio dominio ------------------------------------------------------------ Antes esto lo resolvía una hoja de fonts.googleapis.com en el , y esa hoja bloquea el pintado: hay que resolver un dominio ajeno, negociar TLS y descargar el CSS antes de mostrar nada. Sirviéndola desde aquí, el navegador ya tiene la conexión abierta. Gabarito es una fuente variable: los pesos 400, 500 y 700 salen del mismo archivo, y por eso los seis bloques apuntan solo a dos ficheros, uno por subconjunto. Un font-weight: 400 700 daría lo mismo en menos líneas, pero se reproduce tal cual la estructura que servía Google para que el navegador reciba exactamente las mismas instrucciones que antes. La licencia de Gabarito es OFL, que permite alojarla. ============================================================ */ /* latin-ext */ @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; } /* latin */ @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; } /* latin-ext */ @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; } /* latin */ @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; } /* latin-ext */ @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; } /* latin */ @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; } :root { --f-azul: #002A3A; --f-azul-2: #0B3A4D; --f-azul-3: #12485E; --f-ambar: #FFA31A; --f-ambar-hover: #FFB547; /* #965900 en vez de #B26A00: el original daba 3.72:1 contra el fondo Niebla, por debajo del 4.5:1 que exige WCAG AA para texto. Mismo matiz, un poco más oscuro; no es "ámbar como texto sobre blanco" (eso sigue prohibido por el manual de marca), es la variante ya pensada para texto, ajustada para que de verdad se lea. Usado en más de 20 sitios (eyebrows, números de paso, trazos de iconos, flechas), así que un solo cambio aquí corrige todos. */ --f-ambar-txt: #965900; --f-niebla: #EDF1F2; --f-niebla-2: #F6F8F9; --f-rescoldo: #FFF4E3; --f-grafito: #5A6570; --f-tinta: #2E3A44; --f-borde: #DDE5E8; --f-borde-2: #E9EEF0; --f-blanco: #FFFFFF; --f-sombra: 0 1px 2px rgba(0,42,58,.05), 0 10px 30px rgba(0,42,58,.07); --f-sombra-2: 0 2px 6px rgba(0,42,58,.08), 0 24px 60px rgba(0,42,58,.14); --f-fuente: 'Gabarito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --f-r: 6px; --f-r-lg: 14px; --f-ancho: 1200px; } /* ---------- Base (solo páginas con body.f) ---------- */ .f *, .f *::before, .f *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body.f { margin: 0; font-family: var(--f-fuente); font-size: 17px; line-height: 1.6; color: var(--f-grafito); background: var(--f-blanco); -webkit-font-smoothing: antialiased; } /* :where() deja la base sin especificidad, para que cada componente pueda fijar sus propios márgenes y tamaños sin que la base los anule. */ :where(.f) img, :where(.f) svg { max-width: 100%; display: block; } :where(.f) :is(h1, h2, h3, h4) { font-weight: 400; color: var(--f-azul); margin: 0; text-wrap: balance; } :where(.f) p { margin: 0 0 1em; } :where(.f) p:last-child { margin-bottom: 0; } :where(.f) :is(ul, ol) { margin: 0; padding: 0; } :where(.f) a { color: var(--f-azul); text-decoration: none; } :where(.f) strong { color: var(--f-azul); font-weight: 500; } .f-wrap { width: 100%; max-width: var(--f-ancho); margin: 0 auto; padding: 0 2rem; } .f-wrap--narrow { max-width: 880px; } .f-sec { padding: 6.5rem 0; } .f-sec--tight { padding: 4.5rem 0; } .f-sec--mist { background: var(--f-niebla); } .f-sec--soft { background: var(--f-niebla-2); } .f-sec--warm { background: var(--f-rescoldo); } .f-sec--navy { background: var(--f-azul); color: rgba(255,255,255,.78); } .f-sec--navy h1, .f-sec--navy h2, .f-sec--navy h3, .f-sec--navy h4, .f-sec--navy strong { color: var(--f-blanco); } .f-eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--f-ambar-txt); margin-bottom: 1.25rem; } .f-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--f-ambar); } .f-hero .f-eyebrow { margin-bottom: 1.5rem; } .f-sec--navy .f-eyebrow { color: var(--f-ambar); } .f-h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -.03em; line-height: 1.14; } .f-h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); letter-spacing: -.02em; line-height: 1.25; } .f-head { max-width: 760px; margin-bottom: 3rem; } .f-head p { font-size: 1.125rem; line-height: 1.6; margin-top: 1.25rem; } .f-head--center { margin-left: auto; margin-right: auto; text-align: center; } .f-head--center .f-eyebrow { justify-content: center; } /* ---------- Botones ---------- */ .f-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--f-fuente); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; padding: 1.1rem 1.75rem; border-radius: var(--f-r); border: 1.5px solid transparent; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; text-align: center; } .f-btn:hover { transform: translateY(-1px); } .f-btn .f-arr { transition: transform .18s ease; } .f-btn:hover .f-arr { transform: translateX(3px); } .f-btn--amb { background: var(--f-ambar); color: var(--f-azul); box-shadow: 0 6px 18px rgba(255,163,26,.28); } .f-btn--amb:hover { background: var(--f-ambar-hover); color: var(--f-azul); } .f-btn--line { background: transparent; border-color: var(--f-borde); color: var(--f-azul); } .f-btn--line:hover { border-color: var(--f-azul); } .f-btn--sm { padding: .85rem 1.2rem; font-size: .72rem; } .f-btn-note { display: block; font-size: .875rem; color: var(--f-grafito); margin-top: .85rem; } .f-sec--navy .f-btn-note { color: rgba(255,255,255,.62); } .f-more { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--f-azul); border-bottom: 2px solid rgba(255,163,26,.55); padding-bottom: 2px; transition: border-color .18s ease, gap .18s ease; } .f-more:hover { border-bottom-color: var(--f-ambar); gap: .7rem; } /* ---------- Cabecera ---------- */ .f-top { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95); 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; font-family: var(--f-fuente); } .f-top.is-scrolled { border-bottom-color: var(--f-borde-2); box-shadow: 0 6px 24px rgba(0,42,58,.05); } .f-top__in { max-width: 1340px; margin: 0 auto; padding: 0 2rem; height: 78px; display: flex; align-items: center; gap: 2rem; } .f-logo { flex-shrink: 0; display: flex; align-items: center; } .f-logo img { height: 28px; width: auto; } .f-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; } .f-nav a { position: relative; font-size: .875rem; color: var(--f-azul); padding: .4rem 0; white-space: nowrap; } .f-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--f-ambar); transition: right .2s ease; } .f-nav a:hover::after, .f-nav a[aria-current="page"]::after { right: 0; } .f-nav a[aria-current="page"] { font-weight: 500; } .f-top__act { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; } .f-lang { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--f-grafito); } .f-lang b { color: var(--f-azul); } .f-lang span { opacity: .5; } .f-burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--f-azul); } .f-burger svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; fill: none; } /* ---------- Héroe ---------- */ .f-hero { position: relative; padding: 5.5rem 0 4.5rem; overflow: hidden; } .f-hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; background: radial-gradient(circle at 1px 1px, rgba(0,42,58,.09) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(180deg, var(--f-niebla-2), var(--f-niebla)); border-bottom-left-radius: 48px; z-index: -1; } .f-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4rem; align-items: center; } .f-h1 { font-size: clamp(2.1rem, 3.6vw, 3.15rem); letter-spacing: -.03em; line-height: 1.12; max-width: 21em; margin-bottom: 1.75rem; } .f-lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; color: var(--f-grafito); font-weight: 400; max-width: 38rem; margin-bottom: 2.5rem; } /* Héroe de una sola columna: sin panel lateral, fondo suave de marca */ .f-hero--simple::before { display: none; } .f-hero--simple { background: radial-gradient(circle at 1px 1px, rgba(0,42,58,.07) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(180deg, #fff 0%, var(--f-niebla-2) 100%); border-bottom: 1px solid var(--f-borde-2); } .f-hero--simple .f-h1 { max-width: 52rem; } .f-hero--simple .f-lead { max-width: 44rem; } /* Tarjeta visual del héroe */ .f-hcard { background: var(--f-azul); color: rgba(255,255,255,.8); border-radius: var(--f-r-lg); padding: 2rem; box-shadow: var(--f-sombra-2); position: relative; } .f-hcard__tag { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-ambar); margin-bottom: 1.25rem; } .f-hcard__row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.1); } .f-hcard__row:first-of-type { border-top: 0; padding-top: 0; } .f-hcard__l { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,163,26,.14); color: var(--f-ambar); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; } .f-hcard__row strong { display: block; color: #fff; font-size: 1.05rem; } .f-hcard__row span { font-size: .875rem; } .f-hcard__foot { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem; color: #fff; } /* Clientes y países */ /* La franja de clientes/países va siempre sobre blanco: el ::before tapa el panel gris del héroe a todo lo ancho. */ .f-trust { position: relative; margin-top: 4.5rem; padding-top: 2.25rem; } .f-trust::before { content: ""; position: absolute; top: 0; bottom: -6rem; left: -100vw; right: -100vw; background: #fff; border-top: 1px solid var(--f-borde-2); z-index: -1; } .f-trust__label { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-grafito); margin-bottom: 1.1rem; } .f-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 3rem; list-style: none; } .f-logos li { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: #8C98A2; transition: color .2s ease; } .f-logos li:hover { color: var(--f-azul); } .f-flags { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; } .f-flags li { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--f-tinta); } .f-flags img { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,42,58,.12); } /* ---------- Checklist interactiva ---------- */ .f-check { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; } .f-check__side { position: sticky; top: 110px; } .f-check__meter { margin-top: 2rem; background: var(--f-blanco); border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 1.5rem; } .f-check__count { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-grafito); } .f-check__bar { height: 6px; border-radius: 99px; background: var(--f-niebla); margin: .85rem 0 1rem; overflow: hidden; } .f-check__bar i { display: block; height: 100%; width: 0; background: var(--f-ambar); border-radius: 99px; transition: width .3s ease; } .f-check__msg { font-size: 1.05rem; color: var(--f-grafito); font-weight: 500; transition: color .25s ease; } .f-check__msg.is-on { color: var(--f-azul); } .f-check__msg.is-on::before { content: "→ "; color: var(--f-ambar-txt); } /* Listado estático con chulos (no seleccionable) */ .f-check__list { list-style: none; background: var(--f-blanco); border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); box-shadow: var(--f-sombra); padding: .5rem 2rem; } .f-check__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 0; border-top: 1px solid var(--f-borde-2); color: var(--f-tinta); line-height: 1.55; } .f-check__item:first-child { border-top: 0; } .f-check__box { flex-shrink: 0; width: 24px; height: 24px; margin-top: .05rem; border-radius: 50%; background: var(--f-ambar); position: relative; } .f-check__box::after { content: ""; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid var(--f-azul); border-width: 0 2px 2px 0; transform: rotate(45deg); } .f-check__side .f-check__msg { margin-top: 1.5rem; color: var(--f-azul); font-size: 1.1rem; } /* ---------- Dolor / planteamiento ---------- */ .f-pain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; } .f-pain p { font-size: 1.125rem; } .f-figure { background: var(--f-blanco); border-radius: var(--f-r-lg); padding: 2.25rem; box-shadow: var(--f-sombra); border-left: 4px solid var(--f-ambar); } .f-figure__n { font-size: clamp(3.5rem, 7vw, 5.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--f-azul); } .f-figure p { font-size: 1.05rem; margin-top: 1rem; color: var(--f-tinta); } /* ---------- Método (tarjetas de pasos) ---------- */ .f-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: paso; } .f-steps--4 { grid-template-columns: repeat(4, 1fr); } .f-step { position: relative; background: var(--f-blanco); border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 2rem 1.75rem 1.75rem; transition: box-shadow .2s ease, transform .2s ease; } .f-step:hover { box-shadow: var(--f-sombra-2); transform: translateY(-3px); } .f-step__k { width: 52px; height: 52px; border-radius: 12px; background: var(--f-azul); color: var(--f-ambar); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.4rem; } .f-step__n { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-ambar-txt); display: block; margin-bottom: .4rem; } .f-step h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .75rem; } .f-step p { font-size: .96rem; line-height: 1.6; } .f-steps + .f-foot-link { margin-top: 2rem; } .f-motto { font-size: 1.05rem; font-weight: 500; color: var(--f-azul); margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } .f-motto span { display: inline-flex; align-items: center; gap: .55rem; } .f-motto span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-ambar); } /* ---------- Tabla comparativa ---------- */ .f-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--f-r-lg); box-shadow: var(--f-sombra); background: #fff; margin-bottom: 3.5rem; } .f-comp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 720px; } .f-comp th, .f-comp td { padding: 1rem 1.25rem; text-align: center; border-bottom: 1px solid var(--f-borde-2); } .f-comp thead th { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--f-azul); background: var(--f-niebla-2); vertical-align: bottom; padding-top: 1.25rem; } .f-comp tbody th { text-align: left; font-weight: 400; color: var(--f-tinta); width: 34%; } .f-comp .is-us { background: var(--f-azul); color: #fff; } .f-comp thead .is-us { color: var(--f-ambar); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 10px 10px 0 0; } .f-comp tbody tr:last-child th, .f-comp tbody tr:last-child td { border-bottom: 0; } .f-comp tbody .is-us { border-bottom-color: rgba(255,255,255,.08); } .f-yes, .f-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .f-yes { background: rgba(0,42,58,.08); } .f-yes::before { content: ""; width: 6px; height: 11px; border: solid var(--f-azul); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); } .is-us .f-yes { background: var(--f-ambar); } .is-us .f-yes::before { border-color: var(--f-azul); } .f-no::before { content: ""; width: 10px; height: 2px; background: #C2CCD1; border-radius: 2px; } .f-comp--text td { text-align: left; vertical-align: top; } .f-comp--text .is-us { color: rgba(255,255,255,.88); } /* ---------- Estadísticas ---------- */ .f-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--f-r-lg); overflow: hidden; } .f-stats--4 { grid-template-columns: repeat(4, 1fr); } .f-stat { background: var(--f-azul-2); padding: 2rem 1.75rem; } .f-stat b { display: block; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff; } .f-stat span { display: block; margin-top: .6rem; font-size: .95rem; color: rgba(255,255,255,.7); } .f-stats--light { background: var(--f-borde-2); box-shadow: var(--f-sombra); } .f-stats--light .f-stat { background: #fff; } .f-stats--light .f-stat b { color: var(--f-azul); } .f-stats--light .f-stat span { color: var(--f-grafito); } .f-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } .f-red p { font-size: 1.075rem; } .f-how { margin-top: 2.5rem; padding: 1.5rem 1.75rem; border-radius: var(--f-r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .f-chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin-top: 2.5rem; } .f-chips li { font-size: .85rem; padding: .5rem .95rem; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); } .f-chips--light li { border-color: var(--f-borde); color: var(--f-azul); background: #fff; } /* ---------- Garantía ---------- */ .f-guar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .f-guar__c { background: #fff; border-radius: var(--f-r-lg); padding: 2rem 1.6rem; border: 1px solid var(--f-borde); box-shadow: var(--f-sombra); } .f-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--f-rescoldo); display: grid; place-items: center; margin-bottom: 1.25rem; } .f-ico svg { width: 22px; height: 22px; stroke: var(--f-ambar-txt); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } .f-guar__c h3 { font-size: 1.15rem; margin-bottom: .6rem; } .f-guar__c p { font-size: .95rem; } /* ---------- Oferta (presupuesto / diagnóstico) ---------- */ .f-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; background: #fff; border-radius: 20px; box-shadow: var(--f-sombra-2); overflow: hidden; } .f-offer__l { padding: 3.25rem 3rem; } .f-offer__l p { font-size: 1.075rem; } .f-offer__r { background: var(--f-azul); padding: 3.25rem 3rem; color: rgba(255,255,255,.78); } .f-offer__r h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.5rem; font-weight: 500; } .f-deliv { list-style: none; counter-reset: d; display: grid; gap: 1.35rem; margin-bottom: 2rem; } .f-deliv li { counter-increment: d; position: relative; padding-left: 3.1rem; font-size: .98rem; line-height: 1.55; } .f-deliv li::before { content: counter(d, decimal-leading-zero); position: absolute; left: 0; top: -.1rem; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,163,26,.14); color: var(--f-ambar); font-size: .78rem; font-weight: 700; display: grid; place-items: center; } .f-deliv strong { color: #fff; display: block; margin-bottom: .15rem; } .f-offer__fine { font-size: .92rem; padding: 1rem 1.2rem; border-radius: 10px; background: rgba(255,255,255,.06); margin-bottom: 2rem; } /* ---------- Preguntas frecuentes ---------- */ .f-faq { max-width: 860px; margin: 0 auto; } .f-faq details { background: #fff; border: 1px solid var(--f-borde); border-radius: 12px; margin-bottom: .75rem; transition: box-shadow .2s ease, border-color .2s ease; } .f-faq details[open] { box-shadow: var(--f-sombra); border-color: #CBD6DB; } .f-faq summary { list-style: none; cursor: pointer; padding: 1.35rem 4rem 1.35rem 1.6rem; position: relative; font-size: 1.075rem; font-weight: 500; color: var(--f-azul); letter-spacing: -.01em; } .f-faq summary::-webkit-details-marker { display: none; } .f-faq summary::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--f-niebla) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%23002A3A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; transition: transform .2s ease, background-color .2s ease; } .f-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--f-ambar); } .f-faq summary:focus-visible { outline: 2px solid var(--f-ambar-txt); outline-offset: -2px; border-radius: 12px; } .f-faq__a { padding: 0 1.6rem 1.5rem; color: var(--f-tinta); } .f-faq__a ul { margin: .75rem 0 0 1.15rem; } .f-faq__a li { margin-bottom: .5rem; } .f-faq__a li::marker { color: var(--f-ambar); } .f-faq__intro { text-align: center; max-width: 620px; margin: -1.5rem auto 2.5rem; } /* ---------- Quiénes somos ---------- */ .f-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; } .f-about p { font-size: 1.1rem; } .f-quote { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.35; letter-spacing: -.02em; color: var(--f-azul); padding-left: 1.75rem; border-left: 3px solid var(--f-ambar); margin: 0; } /* ---------- Audiencias ---------- */ .f-aud { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .f-aud--3 { grid-template-columns: repeat(3, 1fr); } .f-aud__c { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 2.25rem 2rem; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; color: var(--f-grafito); } .f-aud__c:hover { box-shadow: var(--f-sombra-2); transform: translateY(-3px); border-color: transparent; } /* Va por h2, no h3: en index/startups/empresas-en-crecimiento venía después de un h2, así que h2 -> h2 no salta ningún nivel. En unete-a-la-red.html el h1 pasaba directo a h3 sin h2 de por medio, y eso sí lo marcaba Lighthouse como "heading-order". Cambia la etiqueta a la vez en las cuatro páginas o se descuadra el tamaño de la tarjeta. */ .f-aud__c h2 { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: .75rem; } .f-aud__c p { flex-grow: 1; margin-bottom: 1.5rem; } .f-aud__go { font-weight: 500; color: var(--f-azul); display: inline-flex; gap: .45rem; align-items: center; } .f-aud__go::after { content: "→"; color: var(--f-ambar-txt); transition: transform .18s ease; } .f-aud__c:hover .f-aud__go::after { transform: translateX(4px); } /* ---------- Cierre ---------- */ .f-final { text-align: center; } .f-final .f-h2 { max-width: 760px; margin: 0 auto 1.25rem; font-size: clamp(2rem, 4vw, 3.1rem); } .f-final p { max-width: 640px; margin: 0 auto 2.25rem; font-size: 1.15rem; } /* ---------- Pie ---------- */ .f-foot { background: #001F2B; color: rgba(255,255,255,.62); padding: 4.5rem 0 2.25rem; font-family: var(--f-fuente); font-size: .95rem; } .f-foot a { color: rgba(255,255,255,.75); text-decoration: none; } .f-foot a:hover { color: var(--f-ambar); } .f-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); } .f-foot__brand img { height: 26px; width: auto; margin-bottom: 1.25rem; } .f-foot__brand p { max-width: 30ch; margin: 0 0 .75rem; } /* Va por etiqueta h2, no h4: el pie es su propio landmark