/* ============================================================
   GOLD UP — hoja de estilos principal
   Paleta: verde profundo + oro. Tipografía: Fraunces / Inter Tight / IBM Plex Mono
   ============================================================ */

:root {
  --verde-noche: #04211D;
  --verde-profundo: #06302A;
  --verde-capa: #0A3D35;
  --verde-borde: #17554A;
  --salvia: #8FB3A7;
  --oro: #E3B23C;
  --oro-claro: #F4D488;
  --hueso: #F6F2E8;
  --hueso-sombra: #E7E0D0;
  --tinta: #10221E;
  --rojo: #C4553F;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --ancho: 1140px;
  --radio: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--verde-profundo);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

.cejilla {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 18px;
  display: block;
}

.seccion-clara .cejilla { color: #9A7415; }

.entrada {
  font-size: 1.12rem;
  color: var(--salvia);
  max-width: 56ch;
}

.seccion-clara .entrada { color: #4A5C56; }

/* ---------- Barra de navegación ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 48, 42, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(23, 85, 74, 0.6);
}

.barra-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--hueso);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.marca svg { flex: none; }

.enlaces-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.enlaces-nav a {
  font-size: 0.93rem;
  color: var(--salvia);
  text-decoration: none;
  transition: color 0.18s;
}

.enlaces-nav a:hover { color: var(--oro-claro); }

.selector-idioma {
  display: flex;
  border: 1px solid var(--verde-borde);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.selector-idioma button {
  background: none;
  border: 0;
  color: var(--salvia);
  padding: 6px 13px;
  cursor: pointer;
  font: inherit;
  transition: background 0.18s, color 0.18s;
}

.selector-idioma button.activo {
  background: var(--oro);
  color: var(--verde-noche);
}

/* ---------- Botones ---------- */

.fila-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.tienda {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--hueso);
  color: var(--tinta);
  text-decoration: none;
  padding: 12px 22px 12px 18px;
  border-radius: 10px;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 0 var(--hueso-sombra);
}

.tienda:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }

.tienda span {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7A75;
  font-family: var(--mono);
}

.tienda strong { font-size: 1.02rem; font-weight: 600; }

.boton-oro {
  display: inline-block;
  background: var(--oro);
  color: var(--verde-noche);
  font-weight: 600;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 10px;
  transition: background 0.18s, transform 0.18s;
}

.boton-oro:hover { background: var(--oro-claro); transform: translateY(-2px); }

/* ---------- Hero ---------- */

.hero { padding: 76px 0 90px; position: relative; overflow: hidden; }

.hero::before {
  content: "";
  position: absolute;
  top: -220px; right: -180px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(227,178,60,0.13) 0%, transparent 68%);
  pointer-events: none;
}

.hero-rejilla {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 58px;
  align-items: center;
  position: relative;
}

.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--oro); }

.nota-confianza {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-size: 0.85rem;
  color: var(--salvia);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* ---------- Calendario (elemento firma) ---------- */

.panel-calendario {
  background: var(--verde-capa);
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: 22px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.34);
}

.cabecera-calendario {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--verde-borde);
}

.cabecera-calendario h3 { font-size: 1.05rem; }

.cabecera-calendario .mes {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--salvia);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dias-semana, .rejilla-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.dias-semana {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--salvia);
  text-align: center;
  letter-spacing: 0.06em;
}

.dia {
  aspect-ratio: 1;
  border-radius: 7px;
  background: rgba(255,255,255,0.035);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--salvia);
  font-family: var(--mono);
  opacity: 0;
  transform: scale(0.82);
  animation: aparecer-dia 0.34s ease forwards;
  position: relative;
}

@keyframes aparecer-dia { to { opacity: 1; transform: scale(1); } }

.dia.vacio { background: none; animation: none; opacity: 1; }
.dia.ingreso { background: rgba(227,178,60,0.19); color: var(--oro-claro); }
.dia.gasto { background: rgba(143,179,167,0.13); }
.dia.riesgo { background: rgba(196,85,63,0.24); color: #F2B4A4; }

.dia .punto {
  width: 4px; height: 4px;
  border-radius: 50%;
  margin-top: 3px;
  background: currentColor;
}

.dia.minimo::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--oro);
  border-radius: 9px;
  animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido { 50% { opacity: 0.35; } }

.pie-calendario {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--verde-borde);
}

.dato-calendario { font-family: var(--mono); }

.dato-calendario .etiqueta {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--salvia);
  margin-bottom: 4px;
}

.dato-calendario .valor { font-size: 1.15rem; color: var(--hueso); }
.dato-calendario .valor.alerta { color: #F2B4A4; }
.dato-calendario .valor.bien { color: var(--oro-claro); }

/* ---------- Franja de confianza ---------- */

.franja {
  border-top: 1px solid var(--verde-borde);
  border-bottom: 1px solid var(--verde-borde);
  background: var(--verde-noche);
  padding: 22px 0;
}

.franja-interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salvia);
}

.franja-interior span { display: flex; align-items: center; gap: 9px; }
.franja-interior svg { color: var(--oro); flex: none; }

/* ---------- Secciones ---------- */

.seccion { padding: 92px 0; }

.seccion-clara {
  background: var(--hueso);
  color: var(--tinta);
}

.seccion-clara h2, .seccion-clara h3 { color: var(--tinta); }

.cabecera-seccion { max-width: 62ch; margin-bottom: 54px; }
.cabecera-seccion h2 { margin-bottom: 18px; }

/* ---------- Funciones ---------- */

.rejilla-funciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 2px;
  background: var(--hueso-sombra);
  border: 1px solid var(--hueso-sombra);
  border-radius: var(--radio);
  overflow: hidden;
}

.funcion {
  background: var(--hueso);
  padding: 32px 28px;
}

.funcion .icono {
  color: #9A7415;
  margin-bottom: 18px;
}

.funcion h3 { margin-bottom: 9px; }

.funcion p {
  margin: 0;
  font-size: 0.97rem;
  color: #4A5C56;
}

/* ---------- Gold Advisor ---------- */

.rejilla-asesor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}

.chat {
  background: var(--verde-capa);
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.3);
}

.burbuja {
  padding: 14px 17px;
  border-radius: 14px;
  margin-bottom: 12px;
  font-size: 0.96rem;
  max-width: 88%;
  opacity: 0;
  animation: subir 0.5s ease forwards;
}

@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.burbuja.usuario {
  background: var(--oro);
  color: var(--verde-noche);
  margin-left: auto;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}

.burbuja.asesor {
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--verde-borde);
  border-bottom-left-radius: 4px;
  max-width: 94%;
}

.burbuja.asesor strong { color: var(--oro-claro); font-weight: 600; }

.aviso-chat {
  font-size: 0.74rem;
  color: var(--salvia);
  font-family: var(--mono);
  line-height: 1.5;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--verde-borde);
}

.lista-marcada { list-style: none; padding: 0; margin: 26px 0 0; }

.lista-marcada li {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--verde-borde);
  font-size: 0.99rem;
}

.lista-marcada svg { color: var(--oro); flex: none; margin-top: 3px; }

/* ---------- Precios ---------- */

.rejilla-precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px;
}

.plan {
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: 32px 28px;
  background: var(--verde-capa);
  display: flex;
  flex-direction: column;
}

.plan.destacado {
  border-color: var(--oro);
  box-shadow: 0 0 0 1px var(--oro);
  position: relative;
}

.plan .insignia {
  position: absolute;
  top: -11px; left: 28px;
  background: var(--oro);
  color: var(--verde-noche);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.plan h3 { margin-bottom: 6px; }

.precio {
  font-family: var(--mono);
  font-size: 2.1rem;
  color: var(--oro-claro);
  margin: 14px 0 4px;
}

.precio small { font-size: 0.82rem; color: var(--salvia); }

.plan ul { list-style: none; padding: 0; margin: 22px 0 0; flex: 1; }

.plan li {
  font-size: 0.94rem;
  color: var(--salvia);
  padding: 8px 0 8px 24px;
  position: relative;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 11px; height: 2px;
  background: var(--oro);
}

.nota-precios {
  font-size: 0.8rem;
  color: var(--salvia);
  font-family: var(--mono);
  line-height: 1.6;
  margin-top: 28px;
  max-width: 76ch;
}

/* ---------- Libro ---------- */

.rejilla-libro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 54px;
  align-items: center;
}

.tarjeta-libro {
  background: linear-gradient(150deg, var(--verde-capa), var(--verde-noche));
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: 44px 34px;
  text-align: center;
}

.tarjeta-libro .titulo-libro {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--oro-claro);
  margin-bottom: 12px;
}

.tarjeta-libro .autor {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--salvia);
}

/* ---------- CTA final ---------- */

.cta {
  background: var(--verde-noche);
  text-align: center;
  padding: 96px 0;
  border-top: 1px solid var(--verde-borde);
}

.cta h2 { margin-bottom: 18px; }
.cta .entrada { margin: 0 auto; }
.cta .fila-botones { justify-content: center; }

/* ---------- Pie ---------- */

.pie {
  background: var(--verde-noche);
  border-top: 1px solid var(--verde-borde);
  padding: 54px 0 34px;
  font-size: 0.92rem;
  color: var(--salvia);
}

.pie-rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.pie h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hueso);
  margin: 0 0 16px;
  font-weight: 500;
}

.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 10px; }
.pie a { text-decoration: none; transition: color 0.18s; }
.pie a:hover { color: var(--oro-claro); }

.pie-base {
  border-top: 1px solid var(--verde-borde);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

/* ---------- Páginas legales ---------- */

.legal { padding: 66px 0 90px; }
.legal .envoltura { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 12px; }
.legal h2 { font-size: 1.45rem; margin: 46px 0 14px; }
.legal h3 { font-size: 1.06rem; margin: 28px 0 10px; color: var(--oro-claro); }
.legal p, .legal li { color: #C9D8D2; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--oro-claro); }

.fecha-vigencia {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salvia);
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--verde-borde);
}

.caja-aviso {
  background: var(--verde-capa);
  border: 1px solid var(--verde-borde);
  border-left: 3px solid var(--oro);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 32px 0;
}

.caja-aviso p:last-child { margin-bottom: 0; }

.pasos { list-style: none; padding: 0; counter-reset: paso; }

.pasos li {
  counter-increment: paso;
  padding-left: 46px;
  position: relative;
  margin-bottom: 20px;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  border: 1px solid var(--oro);
  border-radius: 50%;
  color: var(--oro);
  font-family: var(--mono);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Accesibilidad ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .dia, .burbuja { opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-rejilla, .rejilla-asesor, .rejilla-libro {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .enlaces-nav a.oculta-movil { display: none; }
  .seccion { padding: 68px 0; }
  .hero { padding: 52px 0 68px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 32px; }
  .barra-interior { height: 60px; }
  .marca { font-size: 1.05rem; }
  .enlaces-nav { gap: 16px; }
  .fila-botones { flex-direction: column; }
  .tienda { justify-content: center; }
  .pie-calendario { flex-direction: column; gap: 12px; }
  .panel-calendario { padding: 17px; }
}