/* ===========================================================================
   Fun Editorial — Sistema de diseño
   Tokens mapeables 1:1 a index.css + tailwind.config (HSL/HEX) en el repo real.
   =========================================================================== */

:root {
  /* Paleta base ------------------------------------------------------------ */
  --coral:    #FF7A6B;   /* primario  */
  --coral-deep:#F0604F;
  --mostaza:  #F5B342;   /* secundario */
  --menta:    #8DD9B5;   /* terciario */
  --cielo:    #7CC4E8;   /* acento link */
  --crema:    #FFF8F0;   /* fondo */
  --crema-2:  #FCEFE2;   /* fondo alterno */
  --carbon:   #2D2A32;   /* texto */
  --carbon-soft:#5B5660;
  --beige:    #E8DFD3;   /* muted / bordes */
  --beige-2:  #F2E9DD;

  /* Acento configurable (Tweaks) — por defecto coral --------------------- */
  --accent:        var(--coral);
  --accent-deep:   var(--coral-deep);
  --accent-tint:   #FFE7E2;
  --accent-shadow: 255, 122, 107;  /* rgb del acento para sombras de color */

  /* Tipografía ------------------------------------------------------------ */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radios ---------------------------------------------------------------- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Sombras de color (no grises planos) ----------------------------------- */
  --shadow-soft:  0 10px 40px -18px rgba(var(--accent-shadow), 0.35);
  --shadow-card:  0 14px 44px -20px rgba(45, 42, 50, 0.22);
  --shadow-hover: 0 26px 60px -22px rgba(var(--accent-shadow), 0.45);
  --shadow-lift:  0 30px 80px -30px rgba(45, 42, 50, 0.30);

  /* Animación global (escala 0..1 vía Tweaks) ----------------------------- */
  --anim: 1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--crema);
  color: var(--carbon);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--accent-tint); color: var(--carbon); }

/* Foco accesible coral ----------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Tipografía variable Fraunces (opsz) ------------------------------------- */
.display { font-family: var(--font-display); font-optical-sizing: auto; }

/* Contenedor --------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 880px; }

/* Botones ------------------------------------------------------------------ */
.btn {
  --b-bg: var(--accent);
  --b-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 1.02rem;
  padding: 15px 26px;
  border-radius: 999px;
  border: none; cursor: pointer;
  background: var(--b-bg); color: var(--b-fg);
  box-shadow: var(--shadow-soft);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s;
  text-align: center;
}
.btn:hover { transform: translateY(calc(-2px * var(--anim))); box-shadow: var(--shadow-hover); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; }

.btn-ghost {
  --b-bg: transparent; --b-fg: var(--carbon);
  border: 2px solid var(--carbon);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--carbon); --b-fg: var(--crema); box-shadow: none; }

.btn-soft {
  --b-bg: #fff; --b-fg: var(--carbon);
  border: 1.5px solid var(--beige);
  box-shadow: var(--shadow-card);
}
.btn-soft:hover { border-color: var(--accent); color: var(--accent-deep); }

.btn-lg { font-size: 1.12rem; padding: 18px 32px; }

/* Badges / pills ----------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--beige);
  color: var(--carbon-soft);
  white-space: nowrap;
}
.pill-age { background: var(--accent-tint); border-color: transparent; color: var(--accent-deep); }

/* Etiqueta mono (placeholders / detalles editoriales) --------------------- */
.mono {
  font-family: "SF Mono", ui-monospace, "Roboto Mono", monospace;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--carbon-soft);
}

/* Estrellas ---------------------------------------------------------------- */
.stars { display: inline-flex; align-items: center; gap: 3px; color: var(--mostaza); }
.stars svg { width: 16px; height: 16px; }

/* Reveal on scroll --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(calc(26px * var(--anim)));
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Hovers de card ----------------------------------------------------------- */
.card-hover { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.card-hover:hover { transform: translateY(calc(-6px * var(--anim))) scale(calc(1 + .03 * var(--anim))); }

/* Animaciones decorativas -------------------------------------------------- */
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(calc(-12px * var(--anim))) } }
@keyframes spin-slow { to { transform: rotate(360deg) } }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(3deg)} 75%{transform:rotate(-3deg)} }

.float-a { animation: floaty 6s ease-in-out infinite; }
.float-b { animation: floaty 7.5s ease-in-out infinite .6s; }
.float-c { animation: floaty 5.4s ease-in-out infinite .3s; }

/* Scrollbar fino para carruseles ------------------------------------------ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Respeto a reduce-motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card-hover:hover { transform: none !important; }
}