/* =========================================================
   Agile Bedrock — hoja de estilo del sitio (web_v3)
   Rama de web_v2 (editorial / manifiesto) + apoyo visual fotorrealista.
   Paleta del sistema visual: azules dominantes + acento ámbar único.
   El apoyo visual fotorrealista (hero, banner, retrato, cierre) está al final.
   ========================================================= */

:root {
  --bg:            #f9fbfd;
  --bg-alt:        #eef4fa;
  --surface:       #ffffff;
  --border:        #e2e8f0;

  --navy:          #1f4e79;   /* títulos */
  --navy-deep:     #163a5a;   /* fondos oscuros */
  --blue:          #2e5f8a;
  --blue-mid:      #5b9bd5;
  --blue-soft:     #d6e6f4;

  --text:          #2a3b4d;
  --text-soft:     #5a6573;
  --text-faint:    #8a929c;

  --amber:         #e8932b;
  --amber-text:    #c9761a;
  --amber-soft:    #fbe3c4;

  --maxw:          1140px;
  --radius:        16px;
  --shadow:        0 14px 40px rgba(22, 58, 90, 0.12);
  --shadow-soft:   0 6px 20px rgba(31, 78, 121, 0.08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

/* ----------------------- Base ----------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: inherit; font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.narrow { max-width: 720px; }
.center { text-align: center; }

/* Eyebrow / kicker compartido */
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--amber-text);
  margin: 0 0 14px;
}
.kicker--light { color: var(--amber); }

/* ----------------------- Cabecera ----------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 58, 90, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.brand-logo {
  height: 36px;
  width: auto;
  background: #fff;
  border-radius: 7px;
  padding: 5px 9px;
}

.site-nav { display: flex; align-items: center; gap: 26px; }

.site-nav a {
  color: #cdddec;
  font-size: 0.92rem;
  font-weight: 600;
}
.site-nav a:hover { color: #fff; text-decoration: none; }
.site-nav .nav-cta { color: var(--amber); }

/* ----------------------- Botones ----------------------- */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 8px 22px rgba(232, 147, 43, 0.36);
}
.btn-primary:hover { background: var(--amber-text); color: #fff; }

.btn-ghost {
  background: transparent;
  color: #eaf2fa;
  border-color: rgba(234, 242, 250, 0.45);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

.btn-lg { padding: 18px 40px; font-size: 1.1rem; }

/* ----------------------- Hero ----------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(1000px 520px at 78% -8%, #25588a 0%, rgba(37,88,138,0) 62%),
    linear-gradient(180deg, var(--navy-deep) 0%, #11304c 100%);
  color: #eaf2fa;
  padding: 96px 0 130px;
  overflow: hidden;
}

.hero-inner { position: relative; z-index: 2; max-width: 820px; }

.hero .eyebrow,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--amber);
  margin: 0 0 20px;
}

.hero h1 {
  font-size: clamp(2.9rem, 6.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 26px;
  font-weight: 800;
}

.hero .lede {
  font-size: 1.28rem;
  line-height: 1.6;
  color: #cfe0f0;
  margin: 0 0 28px;
  max-width: 640px;
}
.hero .lede em { color: #fff; font-style: italic; }

.claim {
  font-size: 1.05rem;
  color: #aecbe6;
  margin: 0 0 36px;
  letter-spacing: 0.01em;
}
.claim .op { color: var(--amber); font-weight: 700; padding: 0 4px; }
.claim strong { color: #fff; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Estrato de roca decorativo bajo el hero (CSS puro, no figura de la guía) */
.hero-strata {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(249,251,253,0) 0%, var(--bg) 96%);
}
.hero-strata::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: var(--bg);
  -webkit-mask: linear-gradient(180deg, transparent, #000);
          mask: linear-gradient(180deg, transparent, #000);
}

/* ----------------------- Secciones ----------------------- */
.section { padding: 84px 0; }

.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  color: var(--navy);
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  font-weight: 800;
}
.section-title--light { color: #fff; }

.section-intro {
  color: var(--text-soft);
  font-size: 1.12rem;
  margin: 0 0 8px;
}
.section-intro--light { color: #cfe0f0; }

/* ----------------------- La espiral ----------------------- */
.spiral {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: none;
}

.spiral-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
}

/* flecha entre pasos */
.spiral-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--blue-mid);
  z-index: 3;
}

.spiral-step--accent {
  border-color: var(--amber);
  border-top: 4px solid var(--amber);
  box-shadow: 0 14px 36px rgba(232, 147, 43, 0.18);
}

.spiral-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 16px;
}
.spiral-step--accent .spiral-tag { color: var(--amber-text); background: var(--amber-soft); }

.spiral-step h3 { margin: 0 0 12px; color: var(--navy); font-size: 1.3rem; }
.spiral-step p { margin: 0; color: var(--text-soft); font-size: 0.98rem; }

/* ----------------------- Convicciones (sección oscura) ----------------------- */
.section-dark {
  background:
    radial-gradient(900px 460px at 12% 0%, #225a8a 0%, rgba(34,88,138,0) 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, #12314d 100%);
  color: #eaf2fa;
}

.convictions {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.conv {
  position: relative;
  padding: 28px 28px 28px 30px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.conv-num {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 10px;
}
.conv h3 { margin: 0 0 10px; color: #fff; font-size: 1.3rem; }
.conv p { margin: 0; color: #c4d6e8; font-size: 1rem; }

/* ----------------------- Carácter / rasgos ----------------------- */
.traits {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.trait {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.trait:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.trait h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.12rem;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--amber-soft);
}
.trait p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* Pull-quote (el violinista y el arco) */
.pullquote {
  margin: 64px 0 0;
  padding: 0 0 0 32px;
  border-left: 4px solid var(--amber);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  color: var(--navy);
  font-style: italic;
}
.pullquote figcaption {
  margin-top: 18px;
  font-size: 0.98rem;
  color: var(--amber-text);
  font-weight: 600;
}

/* ----------------------- Descarga (CTA, sección oscura) ----------------------- */
.download {
  background:
    radial-gradient(800px 420px at 50% 120%, #25588a 0%, rgba(37,88,138,0) 60%),
    linear-gradient(180deg, #12314d 0%, var(--navy-deep) 100%);
  color: #eaf2fa;
}
.download .btn-lg { margin-top: 14px; }
.license-note {
  margin: 22px 0 0;
  font-size: 0.88rem;
  color: #9fc0dd;
}

/* ----------------------- Enlaces secundarios ----------------------- */
.link-cards {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.link-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  color: var(--text);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.link-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--blue-mid);
}
.link-card h3 { margin: 0 0 10px; color: var(--navy); font-size: 1.22rem; }
.link-card p { margin: 0 0 16px; color: var(--text-soft); font-size: 0.98rem; }
.link-card .link-arrow { font-weight: 700; color: var(--blue); font-size: 0.95rem; }

/* ----------------------- Cierre: raíces ----------------------- */
.roots {
  background: var(--bg-alt);
  padding: 96px 0;
}
.roots-lead {
  font-size: 1.1rem;
  color: var(--text-faint);
  margin: 0 0 8px;
}
.roots-main {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.35;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 20px;
}
.roots-sub {
  font-size: 1.08rem;
  color: var(--text-soft);
  margin: 0;
}
.roots-sub em { color: var(--amber-text); font-style: italic; }

/* ----------------------- Pie ----------------------- */
.site-footer {
  background: var(--navy-deep);
  color: #cdddec;
  padding: 48px 0;
  font-size: 0.92rem;
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-logo {
  height: 52px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
}
.footer-text { flex: 1; min-width: 280px; }
.footer-text p { margin: 0 0 10px; }
.footer-text strong { color: #fff; }
.site-footer a { color: #9fc4e6; }
.footer-legal { color: #8fa9c2; font-size: 0.86rem; }

/* ----------------------- Responsivo ----------------------- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .hero { padding: 72px 0 110px; }
  .spiral { grid-template-columns: 1fr; gap: 36px; }
  .spiral-step:not(:last-child)::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -28px;
    transform: translateX(50%);
  }
  .convictions { grid-template-columns: 1fr; gap: 20px; }
  .traits { grid-template-columns: repeat(2, 1fr); }
  .link-cards { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

@media (max-width: 560px) {
  .site-nav { gap: 14px; }
  .site-nav a:not(.nav-cta) { display: none; }
  .traits { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .pullquote { padding-left: 22px; }
}

/* =========================================================
   web_v3 — apoyo visual fotorrealista
   Imágenes a sangre (hero, cierre), banner (espiral) y retrato (violinista).
   ========================================================= */

/* ---- Hero a sangre: la roca base detrás del texto ---- */
.hero--media { position: relative; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
}
/* Velo: oscurece la izquierda (donde va el texto) y los bordes,
   dejando ver la roca del centro-derecha. Texto claro legible. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(17, 48, 76, 0.92) 0%,
      rgba(17, 48, 76, 0.66) 40%,
      rgba(17, 48, 76, 0.18) 78%,
      rgba(17, 48, 76, 0.30) 100%),
    linear-gradient(180deg,
      rgba(17, 48, 76, 0.55) 0%,
      rgba(17, 48, 76, 0.00) 26%,
      rgba(17, 48, 76, 0.00) 64%,
      rgba(17, 48, 76, 0.60) 100%);
}
.hero .hero-inner { position: relative; z-index: 2; }
.hero .hero-strata { z-index: 3; }

/* ---- Banner de la espiral (nautilo) ---- */
.banner-fig {
  margin: 8px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy-deep);
}
.banner-fig img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Retrato emparejado con la cita del violinista ---- */
.quote-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
}
.portrait-fig {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
}
.portrait-fig img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.quote-grid .pullquote { margin: 0; }

/* ---- Cierre a sangre: el iceberg ---- */
.roots--media { position: relative; overflow: hidden; }
.roots-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* Imagen oscura → velo azul translúcido que sostiene texto claro,
   más denso en la franja central donde se asienta el texto. */
.roots-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 50%,
      rgba(10, 31, 51, 0.72) 0%,
      rgba(10, 31, 51, 0.52) 55%,
      rgba(10, 31, 51, 0.34) 100%);
}
.roots--media .container { position: relative; z-index: 2; }

/* El cierre va sobre imagen oscura: texto en claro */
.roots--media .roots-lead { color: #aecbe6; }
.roots--media .roots-main { color: #ffffff; }
.roots--media .roots-sub  { color: #cfe0f0; }
.roots--media .roots-sub em { color: var(--amber); }

@media (max-width: 900px) {
  .quote-grid { grid-template-columns: 1fr; gap: 28px; }
  .portrait-fig img { min-height: 280px; }
}

/* =========================================================
   Selector de idioma (cabecera) — versión bilingüe es/en
   ========================================================= */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-switch a { color: #9fc4e6; }
.lang-switch a:hover { color: #fff; text-decoration: none; }
.lang-switch a.active { color: #fff; border-bottom: 2px solid var(--amber); }
.lang-switch .sep { color: rgba(255, 255, 255, 0.35); }

@media (max-width: 560px) {
  /* El selector sigue visible aunque el resto del menú se oculte */
  .site-nav .lang-switch a { display: inline-block; }
  .lang-switch { margin-left: 4px; padding-left: 12px; }
}

/* =========================================================
   Página legal (terminos.html)
   ========================================================= */
.legal h1.section-title { margin-bottom: 6px; }
.legal-updated {
  color: var(--text-faint);
  font-size: 0.9rem;
  margin: 0 0 36px;
}
.legal h2 {
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 34px 0 10px;
}
.legal p {
  color: var(--text-soft);
  font-size: 1.05rem;
  margin: 0 0 14px;
}
.legal strong { color: var(--text); }
.legal em { font-style: italic; }