/**
 * Fuera de Alcance — landing styles.
 * Scoped to .fda-root so the plugin never leaks into the active theme.
 */

.fda-root {
  /* Design tokens */
  --color-bg: #f3f2f2;
  --color-surface: #ffffff;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-accent-100: #ffe9e2;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* Break out of a narrow theme container so the photography runs full-bleed.
   Disable with [fuera_de_alcance fullwidth="no"]. */
.fda-root.fda-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* The shortcode often lands inside a constrained theme container. */
.fda-root,
.fda-root * { box-sizing: border-box; }
.fda-root img { max-width: 100%; }
.fda-root h1,
.fda-root h2,
.fda-root h3 { font-family: var(--font-heading); font-weight: 800; }
.fda-root p,
.fda-root ul,
.fda-root ol,
.fda-root figure { margin: 0; }
.fda-root ul,
.fda-root ol { list-style: none; padding: 0; }
.fda-root a { color: var(--color-accent-700); text-decoration: none; }
.fda-root a:hover { color: var(--color-accent); }
.fda-root a:focus-visible,
.fda-root button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fda-root ::selection { background: var(--color-accent); color: var(--color-bg); }

html.fda-smooth-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.fda-smooth-scroll { scroll-behavior: auto; } }

/* — photographs — */
.fda-root .fda-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1400ms cubic-bezier(.22,.61,.28,1), filter 1400ms cubic-bezier(.22,.61,.28,1);
  will-change: transform;
}
.fda-root [data-media]:hover > .fda-photo,
.fda-root [style*="aspect-ratio"]:hover > .fda-photo { transform: scale(1.035); filter: contrast(1.04) brightness(.96); }
.fda-root figure,
.fda-root [style*="aspect-ratio"] { overflow: hidden; }

/* — design-system components used by the markup — */
.fda-root .nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 2px solid var(--color-divider);
}
.fda-root .nav-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  margin-right: auto;
}
.fda-root .nav a { color: inherit; font-size: 14px; transition: color 260ms ease; }
.fda-root .nav a:hover { color: var(--color-accent); }
.fda-root .nav a.btn:hover { color: var(--color-bg); }

.fda-root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: 0;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.fda-root .btn-primary { background: var(--color-accent); color: var(--color-bg); }
.fda-root .btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.fda-root .btn-primary:active { background: var(--color-accent-700); }

.fda-root .tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 0;
}
.fda-root .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.fda-root .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.fda-root footer a { transition: color 260ms ease, opacity 260ms ease; }
.fda-root [data-row-hover]:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }

/* — reveal on scroll (JS adds .is-in) — */
/* Hidden only once JS is confirmed running — never leaves content invisible. */
.fda-root.fda-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.fda-root.fda-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fda-root .fda-photo { transition: none; }
  .fda-root [data-media]:hover > .fda-photo { transform: none; filter: none; }
  .fda-root.fda-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* — tablet — */
@media (max-width: 980px) {
  .fda-root [data-split] { grid-template-columns: 1fr !important; }
  .fda-root [data-grid4] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .fda-root #colaboradores [data-grid4] > *:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  .fda-root #colaboradores [data-grid4] > * { padding-right: clamp(14px,2vw,32px) !important; }
  .fda-root [data-photo-3] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .fda-root [data-split] > [data-media][data-media-first] { order: -1; }
}

/* — phone — */
@media (max-width: 720px) {
  .fda-root [data-grid4] > * { border-left: 0 !important; padding-left: 0 !important; }
  .fda-root [data-grid4] > *:nth-child(n+3) { border-top: 2px solid var(--color-divider); }
  .fda-root #colaboradores [data-grid4] > * { border-left: 0 !important; border-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .fda-root [data-photo-3] { grid-template-columns: 1fr !important; }
  .fda-root [data-photo-3] > * { border-right: 0 !important; border-top: 2px solid var(--color-divider); }
  .fda-root [data-countdown] { gap: 10px !important; }
  .fda-root [data-hero-meta] { display: grid !important; gap: 20px; }
  .fda-root [data-footer-row],
  .fda-root [data-cta-row] { grid-template-columns: 1fr !important; }
  .fda-root [data-stack-3] { grid-template-columns: 1fr !important; }
  .fda-root [data-vmark] { display: none !important; }
  .fda-root .nav { gap: 14px; padding: 14px 20px; flex-wrap: wrap; }
  .fda-root .nav-brand { flex: 1 0 100%; margin-right: 0; }
  .fda-root .nav a { font-size: 13px; }
  .fda-root .btn { min-height: 44px; }
  .fda-root [data-cta-row] h3 { font-size: clamp(21px, 7vw, 34px) !important; }
  .fda-root [data-cta-row] h3 span { white-space: normal !important; }
  .fda-root [data-footer-row] nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .fda-root [data-grid4] { grid-template-columns: 1fr !important; }
  .fda-root [data-grid4] > *:nth-child(n+2) { border-top: 2px solid var(--color-divider); }
  .fda-root #colaboradores [data-grid4] > *:nth-child(n+2) { border-top: 1px solid color-mix(in srgb, #f3f2f2 16%, transparent) !important; padding-top: 24px !important; }
  .fda-root [data-countdown] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 20px !important; }
  .fda-root .nav { position: relative !important; }
  .fda-root .nav a:not(.btn) { flex: 1 1 auto; text-align: center; }
  .fda-root .nav .btn { flex: 1 0 100%; }
}

/* — original animated Carretera Austral route — */
.fda-root #map-static.fda-map-ready svg > g > g {
  opacity: 0;
  transition: opacity 400ms ease;
}
.fda-root #map-static.fda-map-ready svg > g > g.is-visible { opacity: 1; }
.fda-root #map-static.fda-map-ready svg > g > path:nth-of-type(3) {
  will-change: stroke-dashoffset;
}

/* — original preloader — */
@keyframes fda-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fda-load { 0% { width: 0% } 40% { width: 54% } 75% { width: 78% } 100% { width: 92% } }
.fda-root [data-preloader] { font-family: var(--font-body); }
@media (prefers-reduced-motion: reduce) {
  .fda-root [data-preloader] p,
  .fda-root [data-preloader] > div { animation: none !important; }
}

/* — branded 404 — */
.fda-404 {
  --fda-ink: #f3f2f2;
  --fda-accent: #ec3013;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: clamp(88px, 10vw, 150px) clamp(22px, 7vw, 100px) clamp(70px, 8vw, 110px);
  box-sizing: border-box;
  isolation: isolate;
  background: #111010;
  color: var(--fda-ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.fda-404__media,
.fda-404__shade { position: absolute; inset: 0; z-index: -2; }
.fda-404__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fda-404__shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(12,11,10,.94) 0%, rgba(12,11,10,.78) 48%, rgba(12,11,10,.36) 100%);
}
.fda-404__brand {
  position: absolute;
  top: clamp(22px, 3.4vw, 46px);
  left: clamp(22px, 7vw, 100px);
  color: var(--fda-ink);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.fda-404__content { width: min(690px, 100%); }
.fda-404__eyebrow,
.fda-404__foot {
  margin: 0;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.fda-404__eyebrow { color: var(--fda-accent); }
.fda-404__number {
  margin: clamp(18px, 3vw, 36px) 0 0;
  color: var(--fda-accent);
  font-size: clamp(88px, 17vw, 240px);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.08em;
}
.fda-404 h1 {
  max-width: 13ch;
  margin: clamp(28px, 4vw, 52px) 0 18px;
  font-size: clamp(34px, 5.5vw, 78px);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.fda-404__content > p:not([class]) {
  max-width: 54ch;
  margin: 0 0 30px;
  color: rgba(243,242,242,.82);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.65;
}
.fda-404__button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: var(--fda-accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}
.fda-404__button:hover { background: #dd2b0f; color: #fff; }
.fda-404__button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.fda-404__foot {
  position: absolute;
  right: clamp(22px, 7vw, 100px);
  bottom: clamp(24px, 3.4vw, 46px);
  color: rgba(243,242,242,.65);
}
@media (max-width: 720px) {
  .fda-404 { align-content: end; }
  .fda-404__media img { object-position: 63% center; }
  .fda-404__shade { background: linear-gradient(180deg, rgba(12,11,10,.28) 0%, rgba(12,11,10,.72) 42%, rgba(12,11,10,.98) 100%); }
  .fda-404__foot { left: 22px; right: auto; }
}