/* ─────────────────────────────────────────────────────────────────────────────
   Recetario · estilo "editorial gastronómico cálido"
   Detalles que Tailwind no cubre cómodamente: textura, animaciones, estados.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Textura de papel (grano sutil en toda la app) ─────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Pestañas (navegación y fuentes) ───────────────────────────────────────── */
.nav-tab.active,
.src-tab.active {
  background: #B85C38;       /* terracota (primary) */
  color: #fff;
  box-shadow: 0 2px 10px rgba(158, 74, 43, 0.35);
}
.nav-tab:not(.active),
.src-tab:not(.active) {
  color: #5C4031;            /* marrón cálido */
}
.src-tab { -webkit-tap-highlight-color: transparent; }

/* ── Botones: tacto premium ────────────────────────────────────────────────── */
/* touch-action: manipulation = el doble toque en botones/pestañas YA NO hace
   zoom en el móvil (el pellizco para ampliar fotos sigue funcionando). */
button, a, input, textarea, select, label { touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(0.985); }
:focus-visible {
  outline: 2px solid #C99A3E;  /* dorado */
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Spinner del botón ─────────────────────────────────────────────────────── */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Aparición suave (resultados, modales) ─────────────────────────────────── */
.fade-in { animation: fadeIn 0.35s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Secuencia de entrada del hero (portada de revista) ────────────────────── */
.rise { animation: riseIn 0.7s cubic-bezier(0.2, 0.7, 0.25, 1) both; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.16s; }
.rise-3 { animation-delay: 0.27s; }
.rise-4 { animation-delay: 0.4s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-photo { animation: heroPhoto 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
@keyframes heroPhoto {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Tarjetas: elevación al pasar el ratón ─────────────────────────────────── */
.lib-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lib-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(120, 60, 30, 0.25);
}

/* ── Bienvenida (onboarding) ───────────────────────────────────────────────── */
.ob-in { animation: obIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes obIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
#onboarding.ob-out { animation: obOut 0.35s ease forwards; }
@keyframes obOut { to { opacity: 0; transform: scale(0.98); } }

.ob-float { display: inline-block; animation: obFloat 3s ease-in-out infinite; }
@keyframes obFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.ob-opt { -webkit-tap-highlight-color: transparent; }
.ob-opt.sel { border-color: #B85C38; background: #FBF3ED; }
.ob-opt .ob-check { color: transparent; }
.ob-opt.sel .ob-check { background: #B85C38; border-color: #B85C38; color: #fff; }

/* Iconos artesanales de la bienvenida: medallón crema con trazo degradado.
   Al elegir la opción, el medallón se llena de terracota→dorado con un "pop". */
.ob-ico {
  flex: none; width: 46px; height: 46px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #FDF8F2, #F3E1D0);
  border: 1px solid #EBD3BE;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px -2px rgba(120, 60, 30, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ob-ico svg { width: 25px; height: 25px; }
.ob-opt:hover .ob-ico { transform: translateY(-1px) rotate(-3deg); }
.ob-opt.sel .ob-ico {
  background: linear-gradient(145deg, #B85C38, #C99A3E);
  border-color: #B85C38;
  box-shadow: 0 6px 14px -4px rgba(158, 74, 43, 0.5);
  animation: icoPop 0.35s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.ob-opt.sel .ob-ico svg path,
.ob-opt.sel .ob-ico svg circle,
.ob-opt.sel .ob-ico svg rect,
.ob-opt.sel .ob-ico svg line { stroke: #fff; }
@keyframes icoPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18) rotate(4deg); }
  100% { transform: scale(1); }
}

/* ── Red de seguridad: si Tailwind no llegara a aplicar, .hidden debe ocultar
      igual (si no, la intro, la bienvenida, los modales… se apilarían). ─────── */
.hidden { display: none !important; }

/* ── Utilidades ────────────────────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Buscador "mágico" (efecto wow: borde animado + brillo) ────────────────── */
@property --mg { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.magic-field {
  position: relative;
  border-radius: 1.1rem;
  background: #FBF3ED;              /* crema cálida */
  transition: background 0.25s ease;
}
.magic-field:focus-within { background: #fff; }
.magic-field::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--mg), #B85C38, #C99A3E, #E6C2AC, #B85C38, #C99A3E, #B85C38);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: mgspin 8s linear infinite;
  animation-play-state: paused;   /* en reposo NO repinta (batería); gira solo al enfocar */
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;   /* la orla NO debe tapar el input: sin esto no se puede tocar/pegar */
}
.magic-field:focus-within::before { opacity: 1; animation-play-state: running; }
@keyframes mgspin { to { --mg: 360deg; } }

.magic-btn { position: relative; overflow: hidden; }
.magic-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  /* animamos transform (compositable, no repinta layout como 'left') */
  animation: shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%, 55% { transform: skewX(-20deg) translateX(0); }
  100%    { transform: skewX(-20deg) translateX(500%); }
}

/* ── Superpoderes: revelado al hacer scroll + tarjetas ─────────────────────── */
/* Solo se oculta si hay JS (que luego lo revela); sin JS se ve estático. */
html.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; animation: revealUp 0.7s cubic-bezier(0.2, 0.7, 0.25, 1) both; animation-delay: var(--d, 0s); }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.power-card { display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.power-card > span:last-child { margin-top: auto; }  /* ancla el "Ver ejemplo →" abajo */
.power-card:hover {
  transform: translateY(-3px);
  border-color: #E6C2AC;
  box-shadow: 0 18px 38px -18px rgba(120, 60, 30, 0.30);
}
.power-card:active { transform: translateY(-1px) scale(0.99); }
.power-ico { transition: transform 0.3s ease; }
.power-card:hover .power-ico { transform: scale(1.08) rotate(-3deg); }

/* ── Fotos de la bienvenida: respiración lenta tipo documental (Ken Burns) ─── */
.ob-photo { overflow: hidden; position: relative; }
.ob-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: obKen 16s ease-in-out infinite alternate;
  transform-origin: center 60%;
}
@keyframes obKen { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ── Intro de cine (primera apertura) ──────────────────────────────────────── */
.intro-brand { animation: brandPulse 2.4s ease-in-out infinite; }
@keyframes brandPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
#introCine { animation: introIn 0.4s ease both; }
@keyframes introIn { from { opacity: 0; } to { opacity: 1; } }
#introCine.intro-out { animation: introOut 0.45s ease forwards; }
@keyframes introOut { to { opacity: 0; transform: scale(1.03); } }

/* ── Aviso "sin receta escrita": cursor de máquina de escribir ─────────────── */
.tw-caret { animation: twBlink 0.9s steps(1) infinite; }
@keyframes twBlink { 50% { opacity: 0; } }

/* ── Accesibilidad: sin animaciones si el usuario lo pide ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise-1, .rise-2, .rise-3, .rise-4,
  .hero-photo, .fade-in, .ob-in, .ob-float { animation: none !important; }
  .magic-field::before, .magic-btn::after { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal.in { animation: none !important; }
  .ob-photo img { animation: none !important; }
  .tw-caret { animation: none !important; }
  .power-card, .power-ico, .lib-card, button { transition: none !important; }
}