/* ============================================================
   landing.css — Landing pública principal (marketing del SaaS)
   Look & feel: cálido / cercano. Sólo aplica dentro de
   body.landing-warm, así que no afecta al resto del sitio
   (dashboard, landings de profesores con data-theme, /buscar).
   ============================================================ */

body.landing-warm {
  --warm-paper: #fbf3e6;
  --warm-paper-soft: #fff9f0;
  --warm-card: #fffdf9;
  --warm-ink: #3a2a1e;
  --warm-ink-soft: #6b5644;
  --warm-terracotta: #db6a49;
  --warm-terracotta-dark: #c14f30;
  --warm-honey: #e8a23a;
  --warm-honey-dark: #c9821e;
  --warm-sage: #7c9473;
  --warm-sage-dark: #5f7856;
  --warm-line: #ead9c2;
  --warm-shadow: 220, 130, 80;

  background: var(--warm-paper);
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  color: var(--warm-ink);
}

body.landing-warm h1,
body.landing-warm h2,
body.landing-warm h3,
body.landing-warm .warm-display {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  color: var(--warm-ink);
  letter-spacing: -0.01em;
}

body.landing-warm em {
  font-style: italic;
  color: var(--warm-terracotta-dark);
}

/* Textura de grano sutil sobre todo el fondo cálido */
body.landing-warm::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

body.landing-warm main,
body.landing-warm .navbar,
body.landing-warm footer {
  position: relative;
  z-index: 1;
}

/* ── Navbar ─────────────────────────────────────────────────── */
body.landing-warm .navbar {
  background: var(--warm-paper-soft) !important;
  border-bottom: 1px solid var(--warm-line);
  box-shadow: none !important;
}
body.landing-warm .navbar .navbar-brand,
body.landing-warm .navbar .nav-link {
  color: var(--warm-ink) !important;
  font-family: "Fraunces", serif;
  font-weight: 600;
}
body.landing-warm .navbar .navbar-brand i {
  color: var(--warm-terracotta);
}
body.landing-warm .navbar .nav-link {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  opacity: 0.85;
}
body.landing-warm .navbar .nav-link:hover {
  opacity: 1;
  color: var(--warm-terracotta-dark) !important;
}
body.landing-warm .navbar .btn-light {
  background: var(--warm-terracotta) !important;
  border-color: var(--warm-terracotta) !important;
  color: #fff !important;
}
body.landing-warm .navbar .btn-light:hover {
  background: var(--warm-terracotta-dark) !important;
  border-color: var(--warm-terracotta-dark) !important;
}
body.landing-warm .navbar-toggler {
  border-color: var(--warm-line) !important;
}
body.landing-warm .navbar-toggler-icon {
  filter: invert(0.2) sepia(1) saturate(2) hue-rotate(-10deg);
}

/* ── Botones cálidos genéricos ──────────────────────────────── */
body.landing-warm .btn-warm-primary,
body.landing-warm .btn-warm-primary:visited {
  background: var(--warm-terracotta);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  box-shadow: 0 10px 24px -8px rgba(var(--warm-shadow), 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
body.landing-warm .btn-warm-primary:hover {
  background: var(--warm-terracotta-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(var(--warm-shadow), 0.65);
}
body.landing-warm .btn-warm-outline {
  background: transparent;
  border: 2px solid var(--warm-ink);
  color: var(--warm-ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.8rem 1.9rem;
  transition: all 0.18s ease;
}
body.landing-warm .btn-warm-outline:hover {
  background: var(--warm-ink);
  border-color: var(--warm-ink);
  color: var(--warm-paper);
  transform: translateY(-2px);
}

/* ── Hero ───────────────────────────────────────────────────── */
.warm-hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
}
.warm-hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: 0;
  opacity: 0.55;
}
.warm-hero .blob-1 {
  width: 460px;
  height: 460px;
  top: -180px;
  right: -140px;
  background: radial-gradient(circle at 35% 35%, #f0b978, var(--warm-terracotta) 75%);
  animation: warm-float 9s ease-in-out infinite;
}
.warm-hero .blob-2 {
  width: 300px;
  height: 300px;
  bottom: -140px;
  left: -100px;
  background: radial-gradient(circle at 40% 40%, #a9c19c, var(--warm-sage) 75%);
  animation: warm-float 11s ease-in-out infinite reverse;
}
@keyframes warm-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14px, 18px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .warm-hero .blob { animation: none; }
}

.warm-hero .container {
  position: relative;
  z-index: 1;
}

.warm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-terracotta-dark);
  background: #fbe4d3;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.4rem;
}

.warm-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 1.3rem;
}

.warm-underline {
  position: relative;
  white-space: nowrap;
}
.warm-underline svg {
  position: absolute;
  left: 0;
  bottom: -0.32em;
  width: 100%;
  height: 0.5em;
  overflow: visible;
}

.warm-hero .lede {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--warm-ink-soft);
  max-width: 34rem;
  margin-bottom: 2.2rem;
}

.warm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Ilustración tipo "collage" de tarjetas apiladas */
.warm-collage {
  position: relative;
  height: 380px;
}
.warm-sticker {
  position: absolute;
  background: var(--warm-card);
  border-radius: 22px;
  box-shadow: 0 18px 40px -14px rgba(58, 42, 30, 0.25);
  border: 1px solid var(--warm-line);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.warm-sticker.main {
  width: 230px;
  height: 230px;
  top: 40px;
  left: 90px;
  transform: rotate(-4deg);
  background: linear-gradient(160deg, #fff6ea, #fce6cf);
}
.warm-sticker.main i {
  font-size: 4.2rem;
  color: var(--warm-terracotta);
}
.warm-sticker.badge {
  width: 150px;
  padding: 1rem;
  top: 0;
  right: 10px;
  transform: rotate(6deg);
  animation: warm-bob 5s ease-in-out infinite;
}
.warm-sticker.badge i {
  color: var(--warm-honey-dark);
  font-size: 1.4rem;
}
.warm-sticker.chip {
  width: 170px;
  padding: 0.9rem 1.1rem;
  bottom: 10px;
  right: 30px;
  transform: rotate(-3deg);
  flex-direction: row;
  gap: 0.65rem;
  animation: warm-bob 6s ease-in-out infinite 0.4s;
}
.warm-sticker.chip i {
  color: var(--warm-sage-dark);
  font-size: 1.35rem;
}
@keyframes warm-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-9px) rotate(var(--r, 0deg)); }
}
.warm-sticker.badge { --r: 6deg; }
.warm-sticker.chip { --r: -3deg; }
.warm-dashcircle {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2px dashed var(--warm-honey);
  border-radius: 50%;
  top: 30px;
  left: 60px;
  opacity: 0.6;
  animation: warm-spin 40s linear infinite;
}
@keyframes warm-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .warm-sticker.badge, .warm-sticker.chip, .warm-dashcircle { animation: none; }
}
@media (max-width: 991.98px) {
  .warm-collage { display: none; }
}

/* Reveal al cargar */
.warm-reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: warm-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes warm-reveal {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .warm-reveal { opacity: 1; transform: none; animation: none; }
}

/* ── Secciones ──────────────────────────────────────────────── */
.warm-section {
  position: relative;
  padding: 5rem 0;
}
.warm-section.alt {
  background: var(--warm-paper-soft);
  border-top: 1px solid var(--warm-line);
  border-bottom: 1px solid var(--warm-line);
}
.warm-kicker {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-sage-dark);
  text-align: center;
  display: block;
  margin-bottom: 0.6rem;
}
.warm-section h2 {
  text-align: center;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.warm-section .sub {
  text-align: center;
  color: var(--warm-ink-soft);
  max-width: 34rem;
  margin: 0 auto 3rem;
}

/* ── Cards de beneficios ────────────────────────────────────── */
.warm-benefit {
  background: var(--warm-card);
  border: 1px solid var(--warm-line);
  border-radius: 20px;
  padding: 2rem 1.6rem;
  height: 100%;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.warm-benefit:nth-child(odd) { transform: rotate(-1deg); }
.warm-benefit:nth-child(even) { transform: rotate(1deg); }
.warm-benefit:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 20px 34px -18px rgba(58, 42, 30, 0.35);
  border-color: var(--warm-terracotta);
}
.warm-benefit-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(150deg, var(--warm-terracotta), var(--warm-honey));
}
.warm-benefit:nth-child(3n+2) .warm-benefit-icon {
  background: linear-gradient(150deg, var(--warm-sage), var(--warm-sage-dark));
}
.warm-benefit:nth-child(3n+3) .warm-benefit-icon {
  background: linear-gradient(150deg, var(--warm-honey), var(--warm-honey-dark));
}
.warm-benefit h5 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.warm-benefit p {
  color: var(--warm-ink-soft);
  font-size: 0.93rem;
  margin: 0;
}

/* ── Precio: tarjeta tipo "ticket" ──────────────────────────── */
.warm-ticket {
  position: relative;
  background: var(--warm-card);
  border: 1px solid var(--warm-line);
  border-radius: 26px;
  padding: 3rem 2.2rem 2.6rem;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(58, 42, 30, 0.4);
}
.warm-ticket::before,
.warm-ticket::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  background: var(--warm-paper);
  border: 1px solid var(--warm-line);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.warm-ticket::before { left: -17px; }
.warm-ticket::after { right: -17px; }
.warm-ticket .price {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  color: var(--warm-terracotta-dark);
  line-height: 1;
}
.warm-ticket .price sup {
  font-size: 0.4em;
  top: -1.2em;
}
.warm-divider-dashed {
  border-top: 2px dashed var(--warm-line);
  margin: 1.6rem 0;
}
.warm-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: inline-grid;
  gap: 0.55rem;
  text-align: left;
}
.warm-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--warm-ink-soft);
  font-size: 0.95rem;
}
.warm-feature-list i {
  color: var(--warm-sage-dark);
}

/* ── Buscador ───────────────────────────────────────────────── */
.warm-search-bar {
  background: var(--warm-card);
  border: 1px solid var(--warm-line);
  border-radius: 999px;
  padding: 0.5rem;
  box-shadow: 0 14px 30px -20px rgba(58, 42, 30, 0.4);
}
.warm-search-bar .form-control,
.warm-search-bar .form-select {
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--warm-ink);
}
.warm-search-bar .form-control:focus,
.warm-search-bar .form-select:focus {
  box-shadow: none;
  background: #fdf1e2;
}
.warm-search-bar .btn {
  border-radius: 999px;
}

body.landing-warm .landing-warm-cards .card {
  border: 1px solid var(--warm-line) !important;
  border-radius: 18px !important;
  background: var(--warm-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.landing-warm .landing-warm-cards .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 32px -18px rgba(58, 42, 30, 0.35) !important;
}
body.landing-warm .landing-warm-cards .bg-primary {
  background: var(--warm-terracotta) !important;
}
body.landing-warm .landing-warm-cards .text-primary,
body.landing-warm .landing-warm-cards a:hover h5 {
  color: var(--warm-terracotta-dark) !important;
}
body.landing-warm .landing-warm-cards .bg-primary-subtle {
  background: #fbe4d3 !important;
}
body.landing-warm .landing-warm-cards .text-success {
  color: var(--warm-sage-dark) !important;
}
body.landing-warm .landing-warm-cards .text-warning {
  color: var(--warm-honey-dark) !important;
}
body.landing-warm .landing-warm-cards .btn-outline-primary {
  border-color: var(--warm-terracotta);
  color: var(--warm-terracotta-dark);
}
body.landing-warm .landing-warm-cards .btn-outline-primary:hover {
  background: var(--warm-terracotta);
  border-color: var(--warm-terracotta);
  color: #fff;
}

/* ── Footer (tono cálido, sólo en esta página) ────────────────── */
body.landing-warm footer.bg-dark {
  background: #2c2015 !important;
}
body.landing-warm footer a.link-light:hover {
  color: var(--warm-honey) !important;
}
body.landing-warm .aef-lb,
body.landing-warm .aef-rb {
  color: var(--warm-honey) !important;
}

@media (max-width: 767.98px) {
  .warm-hero { padding: 3.5rem 0 3rem; text-align: center; }
  .warm-hero .lede { margin-left: auto; margin-right: auto; }
  .warm-hero-actions { justify-content: center; }
}