html { scroll-behavior: smooth; scroll-padding-top: 88px; background: #17090e; }
  body { margin: 0; background: #17090e; color: #FBF8F3; font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  a { color: #FB7185; }
  a:hover { color: #fda4af; }
  ::selection { background: #BE185D; color: #FBF8F3; }
  @keyframes riseIn { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes pulseGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }

/* estados :hover extraidos del prototipo */
.hv-1:hover { color: #FB7185 !important; }
.hv-2:hover { color: #FB7185 !important; }
.hv-3:hover { color: #FB7185 !important; }
.hv-4:hover { color: #FB7185 !important; }
.hv-5:hover { color: #FB7185 !important; }
.hv-6:hover { color: #FB7185 !important; }
.hv-7:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(190, 24, 93, 0.45) !important; }
.hv-8:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 32px rgba(190, 24, 93, 0.5) !important; }
.hv-9:hover { border-color: #FB7185 !important; transform: translateY(-3px) !important; }
.hv-10:hover { text-decoration: underline !important; }
.hv-11:hover { text-decoration: underline !important; }
.hv-12:hover { text-decoration: underline !important; }
.hv-13:hover { text-decoration: underline !important; }
.hv-14:hover { text-decoration: underline !important; }
.hv-15:hover { text-decoration: underline !important; }
.hv-16:hover { text-decoration: underline !important; }
.hv-17:hover { text-decoration: underline !important; }
.hv-18:hover { text-decoration: underline !important; }
.hv-19:hover { border-color: #BE185D !important; transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(26, 15, 12, 0.12) !important; }
.hv-20:hover { border-color: #6D28D9 !important; transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(26, 15, 12, 0.12) !important; }
.hv-21:hover { border-color: #a78bfa !important; transform: translateY(-4px) !important; }
.hv-22:hover { border-color: #f472b6 !important; transform: translateY(-4px) !important; }
.hv-23:hover { border-color: #FB7185 !important; transform: translateY(-4px) !important; }
.hv-24:hover { transform: translateY(-6px) !important; border-color: #a78bfa !important; box-shadow: 0 20px 48px rgba(109, 40, 217, 0.25) !important; }
.hv-25:hover { transform: translateY(-6px) !important; border-color: #f472b6 !important; box-shadow: 0 20px 48px rgba(190, 24, 93, 0.25) !important; }
.hv-26:hover { transform: translateY(-6px) !important; border-color: #FB7185 !important; box-shadow: 0 20px 48px rgba(251, 113, 133, 0.25) !important; }
.hv-27:hover { transform: translateY(-6px) !important; box-shadow: 0 24px 48px rgba(190, 24, 93, 0.35) !important; }
a:hover .hv-28 { transform: scale(1.03) !important; }
.hv-29:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(26, 15, 12, 0.12) !important; }
a:hover .hv-30 { transform: scale(1.04) !important; }
.hv-31:hover { transform: translateY(-4px) !important; }
a:hover .hv-32 { transform: scale(1.05) !important; }
.hv-33:hover { transform: translateY(-4px) !important; }
a:hover .hv-34 { transform: scale(1.05) !important; }
.hv-35:hover { transform: translateY(-4px) !important; }
a:hover .hv-36 { transform: scale(1.05) !important; }
.hv-37:hover { transform: translateY(-4px) !important; }
a:hover .hv-38 { transform: scale(1.05) !important; }
.hv-39:hover { transform: translateY(-4px) !important; }
a:hover .hv-40 { transform: scale(1.05) !important; }
.hv-41:hover { transform: translateY(-4px) !important; }
a:hover .hv-42 { transform: scale(1.05) !important; }
.hv-43:hover { color: #BE185D !important; }
.hv-44:hover { color: #BE185D !important; }
.hv-45:hover { color: #BE185D !important; }
.hv-46:hover { border-color: #6D28D9 !important; transform: translateX(6px) !important; }
.hv-47:hover { border-color: #BE185D !important; transform: translateX(6px) !important; }
.hv-48:hover { border-color: #FB7185 !important; transform: translateX(6px) !important; }
.hv-49:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(190, 24, 93, 0.5) !important; }
.hv-50:hover { color: #FB7185 !important; }
.hv-51:hover { color: #FB7185 !important; }
.hv-52:hover { color: #FB7185 !important; }
.hv-53:hover { color: #FB7185 !important; }
.hv-54:hover { color: #FB7185 !important; }
.hv-55:hover { color: #FB7185 !important; }
.hv-56:hover { color: #FB7185 !important; }

/* fila de TikTok anadida junto a Instagram en «Lo que publico» */
.hv-tt:hover { border-color: #e2426e !important; transform: translateX(6px) !important; }

/* iconos de redes del pie */
.soc { color: #a89a94; transition: color 200ms, transform 200ms; display: inline-flex; }
.soc:hover { color: #FB7185; transform: translateY(-2px); }

/* El prototipo venia sin tratamiento movil del nav: los 6 enlaces de seccion
   mas el CTA no caben por debajo de ~900px y se partian en tres filas
   desbordando por la derecha. En pantallas estrechas se queda el nombre y
   «Hablemos»; la pagina es un scroll unico, asi que no se pierde navegacion. */
@media (max-width: 900px) {
  #nav nav a:not(:last-child) { display: none; }
}
@media (max-width: 400px) {
  #nav > div { padding: 14px 16px; }
  #nav > div > a { font-size: 16px; }
}