/* =====================================================================
   Home Mitrol C — page styles
   Implementación standalone del prototipo Claude Design (Prueba Home).
   Las variables (colores, tipografía, motion) viven en colors_and_type.css
   ===================================================================== */

html, body { margin: 0; padding: 0; background: #070B18; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Keyframes (idénticas al prototipo) ---------- */
@keyframes mitrolMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mitrolPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatY2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes orbDrift { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes floatChip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes floatChipB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes barPulse { 0%,100% { transform: scaleY(0.42); } 50% { transform: scaleY(1); } }
@keyframes ringPulse { 0% { transform: scale(0.55); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes deck {
  0%   { transform: translate(0px,0px) scale(1);      opacity: 1;    z-index: 4; }
  18%  { transform: translate(0px,0px) scale(1);      opacity: 1;    z-index: 4; }
  25%  { transform: translate(24px,18px) scale(0.94); opacity: 0.9;  z-index: 3; }
  43%  { transform: translate(24px,18px) scale(0.94); opacity: 0.9;  z-index: 3; }
  50%  { transform: translate(48px,36px) scale(0.88); opacity: 0.76; z-index: 2; }
  68%  { transform: translate(48px,36px) scale(0.88); opacity: 0.76; z-index: 2; }
  75%  { transform: translate(72px,54px) scale(0.83); opacity: 0.6;  z-index: 1; }
  93%  { transform: translate(72px,54px) scale(0.83); opacity: 0.6;  z-index: 1; }
  100% { transform: translate(0px,0px) scale(1);      opacity: 1;    z-index: 4; }
}
@keyframes msgIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbitHero { from { transform: translate(-50%,-50%) rotate(0deg) translateY(-150px) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg) translateY(-150px) rotate(-360deg); } }
@keyframes waveBar { 0%,100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
@keyframes liveDot { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes wordIn { from { opacity: 0.35; transform: translateY(0.45em); } to { opacity: 1; transform: translateY(0); } }

#scrollbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg,#2C66FF,#6E9BFF,#2C66FF);
  box-shadow: 0 0 14px rgba(60,110,246,0.7); z-index: 100; will-change: transform;
}
::placeholder { color: #5B6786; }
select option { background: #0C1429; color: #fff; }

/* botón "Ver [plataforma]" del panel (solo el estado habilitado reacciona al hover) */
.plat-cta { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.plat-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -8px rgba(8,74,243,0.9); }

@media (prefers-reduced-motion: reduce) {
  #scrollbar { display: none; }
  .mAnim { animation: none !important; }
}

/* ===== Mobile hamburger / menu ===== */
[data-m="hamb"] { display: none; }
[data-m="plat-inline"] { display: none; }
@media (min-width: 941px) { [data-m="mobmenu"] { display: none !important; } }

/* ===== Tablet & below ===== */
@media (max-width: 940px) {
  [data-m="navbar"]  { height: 64px !important; padding: 0 20px !important; }
  [data-m="navlinks"], [data-m="navcta"] { display: none !important; }
  [data-m="hamb"]    { display: inline-flex !important; }

  [data-m="herosec"] { min-height: 0 !important; }
  [data-m="hero"]    { grid-template-columns: 1fr !important; gap: 36px !important; padding: 44px 24px 52px !important; }
  [data-m="wrap"]    { white-space: normal !important; }

  [data-m="grid3"]   { grid-template-columns: 1fr 1fr !important; }
  [data-m="grid2"]   { grid-template-columns: 1fr !important; gap: 34px !important; }
  [data-m="footgrid"]{ grid-template-columns: repeat(3,1fr) !important; gap: 32px !important; padding-left: 24px !important; padding-right: 24px !important; }

  [data-m="eco"]     { flex-wrap: wrap !important; gap: 14px !important; }
  [data-m="ecocard"] { flex: 1 1 240px !important; }
  [data-m="ecodot"]  { display: none !important; }

  [data-m="platgrid"]    { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-m="plat-detail"] { max-width: 100% !important; }
  [data-m="plat-visual"] { display: none !important; }
  [data-m="plat-panel"]  { display: none !important; }
  [data-m="plat-inline"] { display: flex !important; }

  [data-m="sectionpad"]  { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ===== Phone ===== */
@media (max-width: 600px) {
  [data-m="grid3"]   { grid-template-columns: 1fr !important; }
  [data-m="footgrid"]{ grid-template-columns: 1fr 1fr !important; }
  [data-m="ecocard"] { flex: 1 1 100% !important; }
  [data-m="formrow"] { grid-template-columns: 1fr !important; }
  [data-m="hero"]    { padding: 36px 20px 44px !important; }
  [data-m="eyebrow"] { max-width: 100% !important; font-size: 11px !important; align-items: flex-start !important; }
  [data-m="eyebrow"] > span:first-child { flex-shrink: 0 !important; margin-top: 4px !important; }
  [data-m="eyebrow"] > span:last-child { min-width: 0 !important; }
  [data-m="herotitle"]{ font-size: 30px !important; }
  [data-m="heromock"]{ height: 360px !important; }
  [data-m="secblock"]{ padding-top: 68px !important; padding-bottom: 68px !important; }
}