:root {
  --ink: #0c2139;
  --paper: #f0f3f5;
  --white: #ffffff;
  --lime: #c5e0f9;
  --mint: #d8eef6;
  --muted: #dce8ee;
  --blue: #4a90b8;
  --teal: #49b8b2;
  --deep-blue: #1a4a6b;
  --line: rgba(12, 33, 57, 0.18);
  --shadow: 0 18px 50px rgba(12, 33, 57, 0.14);
}

body { background: var(--paper); color: var(--ink); }
.eyebrow { color: var(--deep-blue); }
.button:focus-visible, .text-link:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: var(--blue); }
.site-header { background: rgba(240, 243, 245, 0.94); }
.brand img { display: block; width: 70px; height: 58px; object-fit: contain; }
.footer-brand img { width: 112px; height: 98px; filter: brightness(0) invert(1); }
.hero-visual { background: linear-gradient(145deg, var(--deep-blue), var(--ink)); }
.hero-visual.has-image { background-size: cover; background-position: center; }
.hero-visual::before { background: radial-gradient(circle, var(--lime), transparent 68%); opacity: 0.55; }
.ticker { background: var(--lime); color: var(--ink); }
.after { background: linear-gradient(145deg, var(--teal), var(--lime)); }
.compare-panel.has-image { background-size: cover; background-position: center; }
.compare-panel.has-image span { padding: 6px 10px; background: rgba(12, 33, 57, 0.78); color: var(--white); }
.process-grid b, .check-list li::before { color: var(--blue); }
.status { background: var(--lime); }
.faq-section { background: linear-gradient(180deg, var(--paper), var(--lime)); }
.faq details { border-color: rgba(12, 33, 57, 0.25); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { border: 0; background: transparent; color: var(--ink); padding: 8px 0; font-weight: 650; cursor: pointer; }
.nav-submenu { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); z-index: 35; min-width: 280px; padding: 12px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); display: none; }
.nav-submenu.open { display: grid; }
.nav-submenu a { padding: 10px 12px; text-decoration: none; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--lime); }
.nav-submenu a[aria-current="page"] { color: var(--deep-blue); font-weight: 800; }

.service-banner { padding: 0 0 clamp(75px, 10vw, 130px); background: var(--ink); color: var(--white); }
.service-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 38px; padding: clamp(34px, 6vw, 70px); background: linear-gradient(125deg, var(--deep-blue), var(--blue)); border-radius: var(--radius); overflow: hidden; position: relative; }
.service-banner-inner::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -110px; background: var(--lime); opacity: 0.22; pointer-events: none; }
.service-banner .eyebrow { color: var(--lime); }
.service-banner h2 { font-size: clamp(2rem, 4vw, 4rem); max-width: 720px; }
.interactive-words { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
.interactive-words span { padding: 7px 11px; border: 1px solid rgba(255, 255, 255, 0.5); transition: background 0.2s, color 0.2s, transform 0.2s; }
.interactive-words span:hover { background: var(--lime); color: var(--ink); transform: translateY(-3px); }
.service-banner .button { background: var(--lime); color: var(--ink); border-color: var(--lime); white-space: nowrap; z-index: 1; }

.site-footer { background: var(--ink); }
.footer-contact address { font-style: normal; margin: 14px 0; color: #cdd4d0; }
.footer-contact a { overflow-wrap: anywhere; }
.thompson-signature { margin-top: 28px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); }
.thompson-signature strong { font-size: 1rem; letter-spacing: 0.12em; }
.case-image { display: block; width: 100%; aspect-ratio: 19 / 14; object-fit: cover; border-radius: 12px; }
.whatsapp { width: auto; min-width: 58px; padding: 0 17px; gap: 9px; border-radius: 999px; background: #25d366; color: #073b1c; border: 3px solid var(--white); box-shadow: 0 14px 36px rgba(7, 59, 28, 0.28); }
.wa-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; font-size: 1.12rem; transform: rotate(-18deg); }
.wa-label { font-weight: 900; }

@media (max-width: 900px) {
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; text-align: left; }
  .nav-submenu { position: static; transform: none; min-width: 0; margin-top: 7px; box-shadow: none; }
  .service-banner-inner { align-items: flex-start; flex-direction: column; }
  .primary-nav { max-height: calc(100vh - 76px); overflow: auto; }
}

@media (max-width: 600px) {
  .brand img { width: 58px; height: 50px; }
  .whatsapp { padding: 0; width: 58px; }
  .wa-label { display: none; }
  .service-banner { padding-bottom: 75px; }
  .service-banner-inner { border-radius: 12px; }
}

/* V8: motion editorial, consentimiento y estados de interacción. */
[hidden] { display: none !important; }
.nav-open { overflow: hidden; }
.hero-visual.has-image, .compare-panel.has-image { background-repeat: no-repeat; }
.case-image[style*="contain"] { background: var(--muted); }
button:disabled, .button:disabled { cursor: wait; opacity: 0.68; }
.form-status:focus { outline: none; }
.footer-privacy-button { display: block; margin: 8px 0 0; padding: 0; border: 0; background: transparent; color: #cdd4d0; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.footer-privacy-button:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.consent-banner { position: fixed; left: 50%; bottom: 22px; z-index: 80; width: min(920px, calc(100% - 32px)); transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 24px; color: var(--white); background: rgba(12, 33, 57, .98); border: 1px solid rgba(197, 224, 249, .38); box-shadow: 0 22px 70px rgba(0, 0, 0, .34); }
.consent-banner h2 { margin: 0 0 6px; font-size: 1.25rem; }
.consent-banner p { margin: 0 0 5px; max-width: 620px; color: #dce8ee; }
.consent-banner a { color: var(--lime); }
.consent-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.consent-actions .button { margin: 0; padding: 11px 15px; }
.consent-reject { color: var(--white); background: transparent; border-color: rgba(255, 255, 255, .5); }
.motion-title { opacity: 0; transform: translateY(22px); transition: opacity .72s ease, transform .72s cubic-bezier(.2, .72, .2, 1), filter .72s ease; }
.motion-title.is-visible { opacity: 1; transform: translateY(0); }
.motion-highlight .motion-title { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; transition: clip-path .9s cubic-bezier(.2, .72, .2, 1); }
.motion-highlight .motion-title.is-visible { clip-path: inset(0 0 0 0); }
.motion-soft-pulse .motion-title.is-visible { animation: goat-title-pulse 1.25s ease-out 1; }
@keyframes goat-title-pulse { 0% { text-shadow: 0 0 0 rgba(74, 144, 184, 0); } 38% { text-shadow: 0 0 24px rgba(74, 144, 184, .42); } 100% { text-shadow: 0 0 0 rgba(74, 144, 184, 0); } }

@media (max-width: 760px) {
  .consent-banner { bottom: 74px; grid-template-columns: 1fr; gap: 16px; padding: 19px; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .button { flex: 1 1 180px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-title, .motion-highlight .motion-title { opacity: 1; transform: none; clip-path: none; animation: none !important; }
}

/* V9: escala responsive y lectura cómoda en móviles. */
:root { --goat-title-scale: 1; }
body { overflow-x: hidden; }
.hero h1 { font-size: clamp(calc(2.65rem * var(--goat-title-scale)), calc(7vw * var(--goat-title-scale)), calc(5.8rem * var(--goat-title-scale))); line-height: .94; }
.section h2, .routes h2, .cta-panel h2 { font-size: clamp(calc(1.9rem * var(--goat-title-scale)), calc(4.2vw * var(--goat-title-scale)), calc(3.85rem * var(--goat-title-scale))); }
.service-card h3, .process-grid h3 { font-size: clamp(calc(1.2rem * var(--goat-title-scale)), calc(2vw * var(--goat-title-scale)), calc(1.75rem * var(--goat-title-scale))); }
.hero-visual strong { font-size: clamp(calc(1.8rem * var(--goat-title-scale)), calc(3.4vw * var(--goat-title-scale)), calc(3.4rem * var(--goat-title-scale))); }
.custom-section { background: color-mix(in srgb, var(--paper) 78%, var(--white)); }
.custom-section + .custom-section { padding-top: 0; }
.custom-section .prose h2 { margin-top: 0; }
.admin-anchor { scroll-margin-top: 100px; }
.thompson-signature { font-style: normal; text-transform: none; letter-spacing: .1em; }
.thompson-signature strong { font-weight: 900; }
@supports not (color: color-mix(in srgb, white 50%, black)) {
  .custom-section { background: #e9eef0; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(calc(2.45rem * var(--goat-title-scale)), calc(13vw * var(--goat-title-scale)), calc(4.4rem * var(--goat-title-scale))); }
  .section h2, .routes h2, .cta-panel h2 { font-size: clamp(calc(1.85rem * var(--goat-title-scale)), calc(9vw * var(--goat-title-scale)), calc(3.05rem * var(--goat-title-scale))); }
  .hero-visual { min-height: 270px; }
}