:root {
  --mar: #0b4f6c;
  --mar-oscuro: #06303f;
  --coral: #ff6b4a;
  --sol: #ffc145;
  --arena: #fff7ec;
  --texto: #1d2a30;
  --suave: #5b6b72;
  --radio: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--texto);
  background: var(--arena);
  line-height: 1.6;
}
h1, h2, h3, .logo { font-family: "Fraunces", Georgia, serif; }
a { color: inherit; text-decoration: none; }

/* Navegacin */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(16px, 5vw, 64px);
  background: rgba(255, 247, 236, 0.85);
  backdrop-filter: blur(10px);
}
.logo { font-size: 1.5rem; font-weight: 800; color: var(--mar); }
.logo span, footer strong span { color: var(--coral); }
.nav nav { display: flex; gap: 24px; align-items: center; }
.nav nav a:not(.btn) { color: var(--suave); font-weight: 500; }
.nav nav a:not(.btn):hover { color: var(--mar); }

/* Botones */
.btn {
  display: inline-block;
  background: var(--coral); color: #fff;
  padding: 14px 26px; border: 0; border-radius: 999px;
  font: 600 1rem "Inter", sans-serif; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(255, 107, 74, 0.7);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(255, 107, 74, 0.8); }
.btn-sm { padding: 8px 18px; font-size: .9rem; }
.btn-ghost { background: transparent; color: var(--mar); box-shadow: inset 0 0 0 2px var(--mar); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--mar); background: rgba(11, 79, 108, .06); }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  padding: clamp(40px, 8vw, 96px) clamp(16px, 5vw, 64px);
  max-width: 1200px; margin: 0 auto;
}
.eyebrow {
  display: inline-block; font-weight: 600; font-size: .85rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--coral);
  background: rgba(255, 107, 74, .12); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.05; color: var(--mar-oscuro); }
h1 em { font-style: normal; color: var(--coral); }
.lead { font-size: 1.15rem; color: var(--suave); margin: 24px 0 32px; max-width: 34ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-art {
  position: relative; aspect-ratio: 1 / 1; border-radius: 32px; overflow: hidden;
  background: linear-gradient(170deg, #ffd9a0 0%, #ff9f7a 45%, var(--mar) 100%);
  box-shadow: 0 30px 60px -30px rgba(6, 48, 63, .6);
}
.sun {
  position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sol); top: 16%; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 80px 20px rgba(255, 193, 69, .6);
}
.waves { position: absolute; bottom: 0; width: 100%; height: 45%; }
.waves path:first-child { fill: rgba(11, 79, 108, .7); }
.waves path:last-child { fill: var(--mar-oscuro); }
.tile {
  position: absolute; z-index: 2; background: #fff; border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; line-height: 1.2;
  animation: flotar 6s ease-in-out infinite;
}
.tile strong { font-family: "Fraunces", serif; color: var(--mar); font-size: 1.15rem; }
.tile span { color: var(--suave); font-size: .82rem; }
.t1 { top: 8%; left: 6%; }
.t2 { top: 44%; right: 6%; animation-delay: -2s; }
.t3 { bottom: 10%; left: 10%; animation-delay: -4s; }
@keyframes flotar { 50% { transform: translateY(-10px); } }

/* Secciones */
section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--mar-oscuro);
  text-align: center; margin-bottom: 40px;
}
.features, .steps, .signup { padding: 72px clamp(16px, 5vw, 64px); }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1100px; margin: 0 auto;
}
.card {
  background: #fff; border-radius: var(--radio); padding: 32px;
  box-shadow: 0 10px 30px -18px rgba(6, 48, 63, .35);
  transition: transform .2s;
}
.card:hover { transform: translateY(-4px); }
.icon {
  font-size: 1.8rem; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--arena); border-radius: 14px; margin-bottom: 18px;
}
.card h3 { color: var(--mar); margin-bottom: 8px; font-size: 1.3rem; }
.card p, .steps p { color: var(--suave); }

.steps { background: #fff; }
.steps ol {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1000px; margin: 0 auto;
}
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps li > span {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600;
  background: var(--mar); color: #fff;
}
.steps h3 { color: var(--mar-oscuro); font-size: 1.2rem; }

/* Suscripcin */
.signup {
  text-align: center; color: #fff;
  background: radial-gradient(circle at 20% 0%, #136b8f 0%, var(--mar-oscuro) 70%);
}
.signup h2 { color: #fff; margin-bottom: 12px; }
.signup > p { color: rgba(255, 255, 255, .8); margin-bottom: 28px; }
#form-suscribir {
  display: flex; gap: 10px; max-width: 480px; margin: 0 auto;
  background: #fff; padding: 6px; border-radius: 999px;
}
#form-suscribir input {
  flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 18px;
  font: 1rem "Inter", sans-serif; background: transparent; color: var(--texto);
}
.mensaje { margin-top: 16px; min-height: 1.6em; font-weight: 500; }
.mensaje.ok { color: var(--sol); }
.mensaje.error { color: #ffb3a3; }

footer { text-align: center; padding: 32px 16px; color: var(--suave); }
footer strong { font-family: "Fraunces", serif; color: var(--mar); }
.small { font-size: .85rem; margin-top: 4px; }

/* Mvil */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; width: 100%; margin: 0 auto; }
  .cards, .steps ol { grid-template-columns: 1fr; }
  .nav nav a:not(.btn) { display: none; }
}
@media (max-width: 420px) {
  #form-suscribir { flex-direction: column; border-radius: 20px; }
  #form-suscribir input { padding: 12px; text-align: center; }
}

/* ===== privacidad.html ===== */
.legal { max-width: 760px; margin: 0 auto; padding: 48px 16px 72px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 8px; }
.legal .fecha { color: var(--suave); margin-bottom: 40px; }
.legal h2 { text-align: left; font-size: 1.4rem; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--texto); margin-bottom: 12px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--mar); text-decoration: underline; }

/* ===== error.html ===== */
.error {
  min-height: calc(100vh - 160px);
  display: grid; place-items: center; text-align: center;
  padding: 40px 16px;
}
.error-art {
  position: relative; width: 220px; height: 220px; margin: 0 auto 32px;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(170deg, #ffd9a0 0%, #ff9f7a 50%, var(--mar) 100%);
  box-shadow: 0 24px 48px -24px rgba(6, 48, 63, .6);
}
.error-art .sol {
  position: absolute; width: 90px; height: 90px; border-radius: 50%;
  background: var(--sol); left: 50%; top: 38px; transform: translateX(-50%);
  box-shadow: 0 0 50px 10px rgba(255, 193, 69, .55);
}
.error-art svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; }
.error-art path:first-child { fill: rgba(11, 79, 108, .75); }
.error-art path:last-child { fill: var(--mar-oscuro); }
.codigo {
  font-family: "Fraunces", Georgia, serif; font-weight: 800;
  font-size: clamp(4rem, 12vw, 6.5rem); line-height: 1; color: var(--coral);
}
.error h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--mar-oscuro); margin: 8px 0 12px; }
.error p { color: var(--suave); max-width: 44ch; margin: 0 auto 28px; }
.acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }