/* ============================================================ 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; --f-ambar-txt: #B26A00; --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; } .f-aud__c h3 { 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; } .f-foot h4 { color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.1rem; } .f-foot ul { list-style: none; margin: 0; padding: 0; } .f-foot li { margin-bottom: .65rem; } .f-foot__bot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; font-size: .85rem; color: rgba(255,255,255,.5); } /* ============================================================ Cómo trabajamos ============================================================ */ .f-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .f-role { border-radius: var(--f-r-lg); padding: 2.25rem 2rem; background: #fff; border: 1px solid var(--f-borde); } .f-role--us { background: var(--f-azul); border-color: var(--f-azul); color: rgba(255,255,255,.8); } .f-role--us h3 { color: #fff; } .f-role__who { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-ambar-txt); margin-bottom: 1rem; display: block; } .f-role--us .f-role__who { color: var(--f-ambar); } .f-role h3 { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: .85rem; } .f-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .f-method { background: #fff; border-radius: 18px; padding: 2.5rem; box-shadow: var(--f-sombra); display: flex; flex-direction: column; } .f-method__name { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .35rem; } .f-method__name h3 { font-size: 1.8rem; letter-spacing: -.02em; } .f-method__for { font-weight: 500; color: var(--f-ambar-txt); margin-bottom: 1.75rem; } .f-method ul { list-style: none; display: grid; gap: 1.1rem; margin-bottom: 2rem; flex-grow: 1; } .f-method li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; } .f-method li b { width: 40px; height: 40px; border-radius: 10px; background: var(--f-azul); color: var(--f-ambar); display: grid; place-items: center; font-size: 1.1rem; } .f-method li p { font-size: .96rem; } .f-timeline { position: relative; display: grid; gap: 0; } .f-phase { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; padding: 3rem 0; border-top: 1px solid var(--f-borde-2); } .f-phase:first-child { border-top: 0; padding-top: 0; } .f-phase__side { position: relative; } .f-phase__num { font-size: 4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--f-azul); } .f-phase__num span { color: var(--f-ambar); } .f-phase__tag { display: block; margin-top: .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-grafito); line-height: 1.5; } .f-phase h3 { font-size: 1.75rem; letter-spacing: -.02em; margin-bottom: 1rem; } .f-phase p { font-size: 1.05rem; } .f-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; } .f-duo__c { border-radius: 12px; padding: 1.4rem 1.5rem; background: var(--f-niebla-2); border: 1px solid var(--f-borde-2); } .f-duo__c b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--f-azul); margin-bottom: .5rem; } .f-duo__c p { font-size: .96rem; } .f-out { display: flex; gap: .85rem; align-items: flex-start; margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 10px; background: var(--f-rescoldo); color: var(--f-tinta); } .f-out b { flex-shrink: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--f-ambar-txt); padding-top: .2rem; } .f-bullets { list-style: none; display: grid; gap: .75rem; margin: 1rem 0; } .f-bullets li { position: relative; padding-left: 1.6rem; } .f-bullets li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 2px; background: var(--f-ambar); } .f-sec--navy .f-bullets li { color: rgba(255,255,255,.8); } .f-ctas2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 900px; margin: 0 auto; } .f-ctas2 > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--f-r-lg); padding: 2rem; text-align: center; } .f-ctas2 h3 { font-size: 1.15rem; margin-bottom: 1.25rem; font-weight: 500; } /* ============================================================ Especialidades ============================================================ */ .f-subnav { position: sticky; top: 78px; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--f-borde-2); } .f-subnav ul { list-style: none; display: flex; gap: .5rem; overflow-x: auto; padding: .85rem 0; } .f-subnav a { white-space: nowrap; font-size: .875rem; padding: .55rem 1rem; border-radius: 99px; border: 1px solid var(--f-borde); color: var(--f-azul); transition: background .18s ease, border-color .18s ease; } .f-subnav a:hover, .f-subnav a.is-on { background: var(--f-azul); border-color: var(--f-azul); color: #fff; } .f-find { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .f-find a { display: block; background: #fff; border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 2rem; color: var(--f-grafito); transition: box-shadow .2s ease, transform .2s ease; } .f-find a:hover { box-shadow: var(--f-sombra-2); transform: translateY(-3px); } .f-find h3 { font-size: 1.3rem; margin-bottom: .65rem; } .f-need { margin-top: 3rem; } .f-need h3.f-need__t { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-grafito); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 1rem; } .f-need h3.f-need__t::after { content: ""; flex: 1; height: 1px; background: var(--f-borde); } .f-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .f-cards--2 { grid-template-columns: repeat(2, 1fr); } .f-cards--4 { grid-template-columns: repeat(4, 1fr); } .f-card { background: #fff; border: 1px solid var(--f-borde); border-radius: 12px; padding: 1.6rem 1.5rem; } .f-card h4 { font-size: 1.1rem; font-weight: 500; margin-bottom: .5rem; letter-spacing: -.01em; } .f-card p { font-size: .95rem; } .f-card ul { list-style: none; margin-top: 1rem; display: grid; gap: .45rem; } .f-card ul li { font-size: .9rem; padding-left: 1.1rem; position: relative; } .f-card ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--f-ambar); } .f-group { margin-top: 3.5rem; } .f-group__t { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-ambar-txt); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--f-azul); } .f-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; } .f-area { background: #fff; border: 1px solid var(--f-borde); border-radius: 12px; overflow: hidden; } .f-area[open] { box-shadow: var(--f-sombra); grid-column: 1 / -1; } .f-area summary { list-style: none; cursor: pointer; padding: 1.5rem 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: center; } .f-area summary::-webkit-details-marker { display: none; } .f-area summary h3 { font-size: 1.2rem; letter-spacing: -.015em; grid-column: 1; } .f-area summary p { font-size: .92rem; grid-column: 1; margin: 0; } .f-area__n { grid-column: 2; grid-row: 1 / span 2; font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--f-azul); background: var(--f-niebla); padding: .5rem .8rem; border-radius: 99px; white-space: nowrap; transition: background .2s ease; } .f-area[open] .f-area__n { background: var(--f-ambar); } .f-area__body { padding: .25rem 1.6rem 1.75rem; border-top: 1px solid var(--f-borde-2); columns: 2; column-gap: 2.5rem; } .f-area__body b { display: block; break-after: avoid; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--f-ambar-txt); margin: 1.25rem 0 .6rem; } .f-area__body ul { list-style: none; break-inside: avoid-column; } .f-area__body li { font-size: .92rem; padding: .3rem 0 .3rem 1.1rem; position: relative; color: var(--f-tinta); break-inside: avoid; } .f-area__body li::before { content: ""; position: absolute; left: 0; top: .85em; width: 5px; height: 5px; border-radius: 50%; background: var(--f-ambar); } .f-ind { width: 100%; border-collapse: collapse; background: #fff; } .f-ind th, .f-ind td { text-align: left; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--f-borde-2); vertical-align: top; } .f-ind thead th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--f-grafito); background: var(--f-niebla-2); } .f-ind tbody th { color: var(--f-azul); font-weight: 500; width: 30%; } .f-ind tbody tr:hover { background: #FBFCFC; } /* ============================================================ Documentos legales ============================================================ */ .f-legal-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; color: var(--f-grafito); margin-top: 1.5rem; } .f-legal-meta b { color: var(--f-azul); font-weight: 500; } .f-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 4rem; align-items: start; } .f-toc { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; } .f-toc h2 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-grafito); margin-bottom: 1rem; } .f-toc ol { list-style: none; display: grid; gap: .15rem; counter-reset: toc; } .f-toc li { counter-increment: toc; } .f-toc a { display: grid; grid-template-columns: 1.9rem 1fr; font-size: .9rem; line-height: 1.4; color: var(--f-tinta); padding: .4rem .6rem; border-radius: 6px; } .f-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--f-ambar-txt); font-weight: 700; font-size: .78rem; padding-top: .1rem; } .f-toc a:hover { background: var(--f-niebla); color: var(--f-azul); } .f-doc { max-width: 760px; color: var(--f-tinta); } .f-doc > p, .f-doc li { font-size: 1.02rem; line-height: 1.7; } .f-doc h2 { font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.25; margin: 3.5rem 0 1.1rem; padding-top: 2rem; border-top: 1px solid var(--f-borde-2); scroll-margin-top: 100px; } .f-doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .f-doc h2 .f-doc__n { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-ambar-txt); margin-bottom: .5rem; } .f-doc h3 { font-size: 1.15rem; font-weight: 500; margin: 2rem 0 .75rem; } .f-doc ul, .f-doc ol { margin: .25rem 0 1.25rem; display: grid; gap: .5rem; } .f-doc ul { list-style: none; } .f-doc ul li { position: relative; padding-left: 1.4rem; } .f-doc ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--f-ambar); } .f-doc ol { padding-left: 1.4rem; } .f-doc ol li::marker { color: var(--f-ambar-txt); font-weight: 700; } .f-doc a { text-decoration: underline; text-decoration-color: rgba(255,163,26,.7); text-underline-offset: 3px; } .f-doc-note { background: var(--f-rescoldo); border-left: 4px solid var(--f-ambar); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; } .f-doc-note p { margin: 0; } .f-fact { display: grid; grid-template-columns: 140px 1fr; gap: .6rem 1.5rem; background: var(--f-niebla-2); border: 1px solid var(--f-borde-2); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1rem 0 1.5rem; } .f-fact dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--f-grafito); padding-top: .15rem; } .f-fact dd { margin: 0; } .f-doc-rel { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--f-borde-2); font-size: .95rem; color: var(--f-grafito); } @media (max-width: 1024px) { .f-legal { grid-template-columns: 1fr; gap: 2rem; } .f-toc { position: static; max-height: none; background: var(--f-niebla-2); border-radius: 12px; padding: 1.25rem; } } @media (max-width: 760px) { .f-fact { grid-template-columns: 1fr; gap: .2rem; } .f-fact dd { margin-bottom: .6rem; } } /* ============================================================ Contacto / formulario ============================================================ */ .f-hero--contact { padding: 4.5rem 0 3.5rem; } .f-hero--contact .f-lead { margin-bottom: 0; } .f-contact { background: var(--f-niebla-2); } .f-contact__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .f-formcard { background: #fff; border: 1px solid var(--f-borde); border-radius: 18px; box-shadow: var(--f-sombra); padding: 2.5rem; } .f-form { display: grid; gap: 1.5rem; } .f-field { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; min-width: 0; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .f-label { font-size: .9rem; font-weight: 500; color: var(--f-azul); padding: 0; margin-bottom: .1rem; } .f-opt-tag { font-weight: 400; color: var(--f-grafito); font-size: .8rem; margin-left: .35rem; } .f-help { font-size: .85rem; color: var(--f-grafito); margin-top: -.15rem; } .f-input { width: 100%; font: inherit; font-size: 1rem; color: var(--f-tinta); background: #fff; border: 1px solid #CBD6DB; border-radius: 8px; padding: .8rem .95rem; transition: border-color .18s ease, box-shadow .18s ease; } textarea.f-input { resize: vertical; min-height: 130px; line-height: 1.55; } .f-input::placeholder { color: #9AA6AE; } .f-input:focus { outline: none; border-color: var(--f-azul); box-shadow: 0 0 0 3px rgba(0,42,58,.10); } .f-input.is-error, .f-input:user-invalid { border-color: #C0392B; } .f-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .f-opt { position: relative; cursor: pointer; display: block; } .f-opt input { position: absolute; opacity: 0; pointer-events: none; } .f-opt__box { display: flex; flex-direction: column; gap: .35rem; height: 100%; border: 1.5px solid var(--f-borde); border-radius: 12px; padding: 1rem 1.1rem; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } .f-opt__box strong { font-size: .95rem; line-height: 1.35; } .f-opt__box small { font-size: .8rem; color: var(--f-grafito); } .f-opt:hover .f-opt__box { border-color: #B9C7CD; } .f-opt input:checked + .f-opt__box { border-color: var(--f-azul); background: var(--f-niebla-2); box-shadow: inset 0 0 0 1px var(--f-azul); } .f-opt input:focus-visible + .f-opt__box { outline: 2px solid var(--f-ambar-txt); outline-offset: 2px; } .f-chipset { display: flex; flex-wrap: wrap; gap: .6rem; } .f-chipset label { position: relative; cursor: pointer; } .f-chipset input { position: absolute; opacity: 0; pointer-events: none; } .f-chipset span { display: inline-block; font-size: .9rem; color: var(--f-azul); border: 1.5px solid var(--f-borde); border-radius: 99px; padding: .55rem 1rem; transition: background .18s ease, border-color .18s ease, color .18s ease; } .f-chipset label:hover span { border-color: #B9C7CD; } .f-chipset input:checked + span { background: var(--f-azul); border-color: var(--f-azul); color: #fff; } .f-chipset input:focus-visible + span { outline: 2px solid var(--f-ambar-txt); outline-offset: 2px; } .f-consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; color: var(--f-tinta); cursor: pointer; } .f-consent input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--f-azul); flex-shrink: 0; } .f-consent a { text-decoration: underline; text-underline-offset: 2px; } .f-btn--block { width: 100%; padding: 1.2rem 1.75rem; } .f-privacy { font-size: .82rem; color: var(--f-grafito); text-align: center; margin: 0; } .f-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .f-msg { display: none; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 10px; background: var(--f-rescoldo); color: var(--f-tinta); border-left: 4px solid var(--f-ambar); } .f-msg.visible { display: block; } .f-contact__side { display: grid; gap: 1.25rem; position: sticky; top: 100px; } .f-sidecard { background: #fff; border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 1.75rem; } .f-sidecard .f-numlist { gap: .75rem; } .f-sidecard .f-numlist li { border: 0; padding: 0; background: none; } .f-sidecard--warm { background: var(--f-rescoldo); border-color: #F6E2C2; color: var(--f-tinta); font-size: .95rem; } .f-sidecard--navy { background: var(--f-azul); border-color: var(--f-azul); color: rgba(255,255,255,.8); } .f-sidecard--navy .f-eyebrow { color: var(--f-ambar); margin-bottom: 1rem; } .f-direct { list-style: none; display: grid; gap: .5rem; } .f-direct a { color: #fff; } .f-direct a:hover { color: var(--f-ambar); } .f-contact__alt { font-size: .95rem; color: var(--f-grafito); padding: 0 .25rem; } @media (max-width: 1024px) { .f-contact__grid { grid-template-columns: 1fr; } .f-contact__side { position: static; } } @media (max-width: 760px) { .f-formcard { padding: 1.5rem; } .f-row, .f-opts { grid-template-columns: 1fr; } } .f-inds { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .f-inds li { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--f-borde); border-radius: 10px; padding: 1.1rem 1.25rem; color: var(--f-azul); font-weight: 500; } .f-inds li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--f-ambar); } @media (max-width: 1024px) { .f-inds { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .f-inds { grid-template-columns: 1fr; } } .f-countries { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; list-style: none; } .f-countries li { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--f-borde); border-radius: 10px; padding: .85rem 1rem; color: var(--f-azul); font-size: .95rem; } .f-countries img { width: 26px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,42,58,.12); } .f-fine { font-size: .9rem; color: var(--f-grafito); margin-top: 1.25rem; font-style: italic; } /* ============================================================ Red de especialistas ============================================================ */ .f-flow td:first-child { width: 22%; } .f-gets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .f-gets__c { background: #fff; border: 1px solid var(--f-borde); border-radius: 12px; padding: 1.75rem 1.5rem; } .f-gets__c h4 { font-size: 1.08rem; font-weight: 500; margin-bottom: .6rem; } .f-gets__c p { font-size: .94rem; } .f-gets--dark .f-gets__c { background: var(--f-azul-2); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.75); } .f-gets--dark .f-gets__c h4 { color: #fff; } .f-sublabel { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-azul); margin: 2.5rem 0 1rem; } .f-callout-note { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: 12px; background: var(--f-rescoldo); color: var(--f-tinta); } /* Cajas claras dentro de secciones azules: el texto fuerte vuelve a azul */ .f-sec--navy .f-callout-note strong, .f-sec--navy .f-doc-note strong, .f-sec--navy .f-sidecard--warm strong { color: var(--f-azul); } .f-earn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; } .f-earn li { background: #fff; border-radius: 12px; padding: 1.6rem 1.6rem 1.6rem 1.6rem; border: 1px solid var(--f-borde); } .f-earn strong { display: block; font-size: 1.08rem; margin-bottom: .45rem; } .f-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: end; } .f-rung { border-radius: var(--f-r-lg); padding: 2rem 1.75rem; background: var(--f-azul-2); color: rgba(255,255,255,.75); } .f-rung:nth-child(1) { min-height: 200px; } .f-rung:nth-child(2) { min-height: 240px; background: var(--f-azul-3); } .f-rung:nth-child(3) { min-height: 280px; background: var(--f-ambar); color: var(--f-azul); } .f-rung h3 { color: #fff; font-size: 1.35rem; margin-bottom: .75rem; } .f-rung:nth-child(3) h3 { color: var(--f-azul); } .f-rung__lvl { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .7; display: block; margin-bottom: 1rem; } .f-numlist { list-style: none; counter-reset: n; display: grid; gap: 1rem; } .f-numlist li { counter-increment: n; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.25rem; background: #fff; border: 1px solid var(--f-borde); border-radius: 12px; padding: 1.5rem 1.6rem; } .f-numlist li::before { content: counter(n); width: 56px; height: 56px; border-radius: 14px; background: var(--f-azul); color: var(--f-ambar); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; } .f-numlist li p { margin: 0; } .f-numlist--plain li { grid-template-columns: 44px minmax(0, 1fr); padding: 1.2rem 1.4rem; } .f-numlist--plain li::before { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 11px; } .f-apply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; background: var(--f-azul); border-radius: 20px; padding: 3rem; color: rgba(255,255,255,.78); box-shadow: var(--f-sombra-2); } .f-apply h2 { color: #fff; } .f-vs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--f-r-lg); overflow: hidden; box-shadow: var(--f-sombra); } .f-vs__col { padding: 0; } .f-vs__col h3 { padding: 1.35rem 1.75rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .f-vs__col ul { list-style: none; } .f-vs__col li { padding: 1.15rem 1.75rem; border-top: 1px solid var(--f-borde-2); min-height: 76px; display: flex; align-items: center; } .f-vs__col--a { background: #fff; } .f-vs__col--a h3 { background: var(--f-niebla); color: var(--f-grafito); } .f-vs__col--a li { color: var(--f-grafito); } .f-vs__col--b { background: var(--f-azul); } .f-vs__col--b h3 { background: var(--f-azul-2); color: var(--f-ambar); } .f-vs__col--b li { color: #fff; border-top-color: rgba(255,255,255,.08); } /* ---------- Aparición suave ---------- */ .f-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.6,.3,1), transform .7s cubic-bezier(.2,.6,.3,1); } .f-reveal.is-in { opacity: 1; transform: none; } /* ---------- Utilidades ---------- */ .f-center { text-align: center; } .f-mt2 { margin-top: 2rem; } .f-mt3 { margin-top: 3rem; } .f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .f-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--f-ambar); color: var(--f-azul); padding: .9rem 1.4rem; font-weight: 700; } .f-skip:focus { left: 0; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1280px) { .f-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; padding: .5rem 2rem 1.5rem; border-bottom: 1px solid var(--f-borde); box-shadow: var(--f-sombra); margin: 0; } .f-nav.abierto { display: flex; } .f-nav a { padding: 1rem 0; border-bottom: 1px solid var(--f-borde-2); font-size: 1rem; } .f-nav a::after { display: none; } .f-top__act { margin-left: auto; } .f-burger { display: block; } } @media (max-width: 1024px) { .f-sec { padding: 5rem 0; } .f-hero__grid, .f-check, .f-pain, .f-red, .f-about, .f-offer { grid-template-columns: 1fr; gap: 2.5rem; } .f-hero::before { width: 100%; height: 45%; top: auto; bottom: 0; border-radius: 0; } .f-check__side { position: static; } .f-guar, .f-gets, .f-steps--4, .f-cards--4 { grid-template-columns: repeat(2, 1fr); } .f-foot__grid { grid-template-columns: 1fr 1fr; } .f-phase { grid-template-columns: 1fr; gap: 1rem; } .f-countries { grid-template-columns: repeat(3, 1fr); } .f-stats--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { body.f { font-size: 16px; } .f-wrap, .f-top__in { padding: 0 1.25rem; } .f-sec { padding: 4rem 0; } .f-hero { padding: 3.5rem 0 3.5rem; } .f-steps, .f-roles, .f-methods, .f-aud, .f-aud--3, .f-find, .f-cards, .f-cards--2, .f-areas, .f-earn, .f-ladder, .f-duo, .f-ctas2, .f-guar, .f-gets, .f-cards--4, .f-steps--4, .f-vs { grid-template-columns: 1fr; } .f-stats { grid-template-columns: 1fr; } .f-stats--4 { grid-template-columns: 1fr 1fr; } .f-countries { grid-template-columns: repeat(2, 1fr); } .f-offer__l, .f-offer__r, .f-apply { padding: 2rem 1.5rem; } .f-apply { grid-template-columns: 1fr; } .f-area__body { columns: 1; } .f-foot__grid { grid-template-columns: 1fr; } .f-top__act .f-btn { display: none; } .f-rung { min-height: 0 !important; } .f-logos { gap: .75rem 1.75rem; } .f-logos li { font-size: 1.1rem; } .f-check__list { padding: .25rem 1.25rem; } .f-trust { margin-top: 3rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .f-reveal { opacity: 1; transform: none; transition: none; } .f * { transition: none !important; } }