@font-face { font-family: "Playfair Display"; src: url("../assets/fonts/playfair-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap } @font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap } :root { --navy: #0B1F3A; --navy-light: #14294D; --gold: #C9A227; --gold-light: #E4C766; --cream: #F7F5F0; --ink: #1A1A1A } *, *::before, *::after { box-sizing: border-box } h1, h2, h3, p, ul, li { margin: 0; padding: 0 } body { margin: 0; font-family: "Inter", sans-serif; background: var(--cream); color: var(--ink); overflow-x: hidden } h1, h2, h3 { font-family: "Playfair Display", serif; font-weight: 700 } h2 { display: inline-block; border-bottom: 2px solid var(--gold) } a { font-family: "Inter", sans-serif } header a, footer a, #hero a { background: var(--gold); color: var(--navy); font-family: "Inter", sans-serif; font-weight: 600; padding: 12px 24px; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 48px; transition: background-color 0.15s ease } header a:hover, footer a:hover, #hero a:hover { background: var(--gold-light) } header a:focus-visible, footer a:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px } #hero a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px } #nosotros a:hover, #nosotros a:focus-visible { color: var(--gold); text-decoration: underline } #nosotros a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px } header { position: sticky; top: 0; background: var(--navy); color: var(--cream); z-index: 100; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px } .logo-lockup { display: flex; align-items: center; gap: 10px } .logo-emblem { width: 40px; height: 40px; flex-shrink: 0 } .logo-placeholder { font-family: "Playfair Display", serif; color: var(--gold); font-size: 1.25rem } .logo-text { display: flex; flex-direction: column } .logo-tagline { font-family: "Inter"; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); opacity: 0.85 } header .cta-group, footer .cta-group { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center } header a { padding: 10px 20px } header .cta-group { display: none } @media (min-width: 720px) { header .cta-group { display: flex } } @media (max-width: 719px) { header { padding: 10px 16px } } main { max-width: 480px; margin: 0 auto; padding: 0 16px } section { padding: 48px 0 } #servicios, #cobertura { background: var(--navy-light); color: var(--cream); width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 48px 16px } #servicios .section-inner, #cobertura .section-inner { max-width: 960px; margin: 0 auto } #hero { text-align: center; padding: 88px 0 96px; position: relative; overflow: hidden } .hero-watermark { position: absolute; bottom: -120px; right: -160px; width: 620px; height: 620px; opacity: 0.22; z-index: 0; pointer-events: none } .hero-content { position: relative; z-index: 1 } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px } #hero h1 { margin-bottom: 24px } #hero p { margin-bottom: 40px } #sobre-nosotros { background: #EFEBDF; margin: 0 -16px; padding: 56px 16px; position: relative } #sobre-nosotros::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to bottom, var(--gold) 0 2px, transparent 2px 4px, var(--gold) 4px 6px) } #sobre-nosotros .content-wrap { max-width: 640px } #sobre-nosotros h2 { margin-bottom: 20px } #sobre-nosotros p { margin-bottom: 16px; line-height: 1.6 } #sobre-nosotros p:last-child { margin-bottom: 0 } #sobre-nosotros p:first-of-type::first-letter { font-family: "Playfair Display"; font-size: 3.4rem; font-weight: 700; color: var(--gold); float: left; line-height: 0.8; padding-right: 10px; padding-top: 4px } #servicios h2 { margin-bottom: 32px } #servicios ul { display: flex; flex-direction: column; list-style: none } #servicios li { display: flex; align-items: baseline; gap: 20px; padding: 20px 4px; border: none; border-bottom: 1px solid rgba(201, 162, 39, 0.25) } #servicios li:last-child { border-bottom: none } .article-num { font-family: "IBM Plex Mono", monospace; font-size: 1.1rem; color: var(--gold); min-width: 28px; flex-shrink: 0 } .service-text { display: flex; flex-direction: column; gap: 2px } .service-title { font-weight: 600 } .service-desc { font-size: 0.82rem; opacity: 0.75; font-weight: 400 } #nosotros h2 { margin-bottom: 32px } #nosotros article { margin-bottom: 24px; background: var(--cream); border: 1px solid rgba(11, 31, 58, 0.1); border-top: 3px solid var(--gold); border-radius: 6px; padding: 20px; box-shadow: 0 2px 8px rgba(11, 31, 58, 0.06) } #nosotros article:last-child { margin-bottom: 0 } .avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: "Playfair Display"; font-weight: 700; font-size: 1.1rem; margin-bottom: 12px; border: 2px solid var(--navy); outline: 2px solid var(--gold); outline-offset: 3px } #nosotros article h3 { margin-bottom: 4px } #nosotros article p { margin-bottom: 12px } #cobertura h2 { margin-bottom: 16px } .coverage-line { display: flex; flex-wrap: wrap; gap: 0 } .coverage-stop { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 8px 16px 8px 0; border-bottom: 1px solid rgba(201, 162, 39, 0.4); margin-right: 16px; margin-bottom: 8px } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0 } footer { position: sticky; bottom: 0; background: var(--navy); color: var(--cream); padding: 12px 16px; text-align: center; z-index: 100; transform: translateY(100%); transition: transform 0.25s ease } footer.is-visible { transform: translateY(0) } footer a { padding: 10px 20px } footer p { font-size: 0.85rem; margin-bottom: 8px; opacity: 0.85 } @media (min-width: 720px) { main { max-width: 960px } .logo-emblem { width: 48px; height: 48px } header { flex-direction: row; justify-content: space-between; padding: 16px 32px } #nosotros { display: flex; flex-wrap: wrap; gap: 32px } #nosotros h2 { flex-basis: 100%; margin-bottom: 24px } #nosotros article { flex: 1 } footer { display: flex; flex-direction: row; justify-content: space-between } } @media (prefers-reduced-motion: reduce) { * { transition: none !important } }