/* ==========================================================================
   Tema "celeste" — prueba de nuevo look and feel.
   Se carga SOLO en presentacion.html e index.html (después de styles.css),
   así el resto del sitio queda intacto con la paleta original y es fácil
   volver atrás: alcanza con quitar el <link> a este archivo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

:root {
  --color-navy: #1c3a52;
  --color-navy-dark: #13293a;
  --color-sky: #2f8ec2;
  --color-sky-dark: #1f6288;
  --color-sky-light: #bfe1f2;
  --color-bg: #d3e9f6;
  --color-surface-alt: #e7f4fb;
  --color-border: #a9d3e8;
  --color-text: #1e2b34;
  --color-text-muted: #3f5c6e;
  --color-link: #175d82;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
}

html.high-contrast {
  --color-surface-alt: #ffffff;
  --color-sky-light: #ffffff;
  --color-sky: #00263a;
  --color-sky-dark: #00263a;
}

header.site-header {
  box-shadow: 0 1px 0 rgba(35, 65, 88, 0.04);
}


.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-sky-light) 0%, var(--color-bg) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 156, 201, 0.22) 0%, rgba(78, 156, 201, 0) 68%);
  pointer-events: none;
}
.hero .container { position: relative; }

.section.alt { background: var(--color-surface-alt); }

.card {
  box-shadow: 0 2px 10px rgba(35, 65, 88, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(35, 65, 88, 0.1);
  border-color: var(--color-sky);
}

.btn {
  background: linear-gradient(135deg, var(--color-sky-dark), var(--color-navy));
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: linear-gradient(135deg, var(--color-sky-dark), var(--color-navy)); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(22, 41, 58, 0.25); }
.btn.secondary { border: 2px solid var(--color-navy); }
.btn.secondary:hover { background: var(--color-sky-light); transform: translateY(-2px); box-shadow: none; }

.callout {
  background: var(--color-sky-light);
  border-left-color: var(--color-sky);
}
.callout.note {
  background: var(--color-surface-alt);
  border-left-color: var(--color-navy);
}

/* Tarjetas de audiencia ("Información para:") en tono azul, propias de Inicio */
.card.audience {
  background: linear-gradient(160deg, var(--color-sky-light) 0%, var(--color-surface) 55%);
  border-color: var(--color-sky);
}
.card.audience .tag { color: var(--color-sky-dark); }
.card.audience:hover { border-color: var(--color-sky-dark); }

.hero {
  text-align: left;
  padding: var(--space-4) 0 var(--space-3);
}
.hero-card {
  max-width: min(920px, 92%);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  text-align: center;
}
.hero h1 { font-size: 1.18rem; margin-bottom: 0.6rem; }
.hero .lead { font-size: 1.05rem; margin-bottom: 0; }

.audience-select {
  text-align: center;
  padding: var(--space-3) 0 var(--space-4);
}
.audience-select h2 {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: var(--space-3);
}
.audience-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: 0;
}
@media (max-width: 700px) {
  .audience-buttons { grid-template-columns: 1fr; }
}
.audience-btn {
  font-size: 1.1rem;
  padding: 1.6em 1em;
  text-align: center;
  border-radius: 40px;
}