/* =====================================================================
   Muro Vecinal · base de marca (landing, web y panel)
   Colores, tipografía y logo. Todo lo demás se apoya en estas variables.
   ===================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Inter-Bold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-Bold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-ExtraBold.woff") format("woff"); }

:root {
  --mv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mv-font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Marca */
  --mv-brand: #0E6B63;
  --mv-brand-strong: #0A4C47;
  --mv-brand-soft: #DDEFEC;
  --mv-accent: #F2A33A;
  --mv-accent-soft: #FDEBD0;
  --mv-accent-ink: #8A5208;

  /* Superficies y texto */
  --mv-bg: #F6F3EC;
  --mv-surface: #FFFFFF;
  --mv-surface-2: #FBFAF6;
  --mv-ink: #13312E;
  --mv-muted: #4F6461;
  --mv-line: rgba(19, 49, 46, .10);
  --mv-shadow: 0 18px 50px rgba(19, 49, 46, .14);

  /* Estados */
  --mv-success: #18794E;
  --mv-success-soft: #DCF3E3;
  --mv-danger: #C2382B;
  --mv-danger-soft: #FBE3E0;
  --mv-warning: #B76A00;
  --mv-warning-soft: #FDEBD0;

  /* Logo: colores de los ladrillos y del texto (se adaptan al fondo) */
  --mv-iso-brick: var(--mv-brand);
  --mv-iso-accent: var(--mv-accent);
  --mv-word-1: var(--mv-ink);
  --mv-word-2: var(--mv-brand);
}

/* Tema oscuro: por preferencia del sistema, salvo que se elija claro a mano */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mv-brand: #3FB5A6;
    --mv-brand-strong: #2E8F83;
    --mv-brand-soft: #173431;
    --mv-accent-soft: #3A2A12;
    --mv-accent-ink: #F6C47A;
    --mv-bg: #0D1716;
    --mv-surface: #13211F;
    --mv-surface-2: #172826;
    --mv-ink: #EEF6F4;
    --mv-muted: #A7BDB9;
    --mv-line: rgba(238, 246, 244, .10);
    --mv-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --mv-success: #4CC38A;
    --mv-success-soft: #13301F;
    --mv-danger: #F07A6E;
    --mv-danger-soft: #3A1915;
    --mv-warning: #F6B554;
    --mv-warning-soft: #3A2A12;
  }
}
:root[data-theme="dark"] {
  --mv-brand: #3FB5A6;
  --mv-brand-strong: #2E8F83;
  --mv-brand-soft: #173431;
  --mv-accent-soft: #3A2A12;
  --mv-accent-ink: #F6C47A;
  --mv-bg: #0D1716;
  --mv-surface: #13211F;
  --mv-surface-2: #172826;
  --mv-ink: #EEF6F4;
  --mv-muted: #A7BDB9;
  --mv-line: rgba(238, 246, 244, .10);
  --mv-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --mv-success: #4CC38A;
  --mv-success-soft: #13301F;
  --mv-danger: #F07A6E;
  --mv-danger-soft: #3A1915;
  --mv-warning: #F6B554;
  --mv-warning-soft: #3A2A12;
}

/* Logo en línea */
.mv-iso { display: block; overflow: visible; }
.mv-iso .b { fill: var(--mv-iso-brick); }
.mv-iso .accent { fill: var(--mv-iso-accent); }
.mv-word { display: block; height: auto; }
.mv-word .w1 { fill: var(--mv-word-1); }
.mv-word .w2 { fill: var(--mv-word-2); }
/* Sobre fondo verde o fotos: versión blanca */
.mv-on-brand { --mv-iso-brick: #FFFFFF; --mv-word-1: #FFFFFF; --mv-word-2: #CBEAE5; }

/* Ladrillos colocándose uno a uno (logo de la página y "cargando") */
@media (prefers-reduced-motion: no-preference) {
  .mv-iso.is-animated .b {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: mv-lay .5s cubic-bezier(.2, .9, .3, 1.25) forwards;
    animation-delay: calc(var(--i) * 110ms + 150ms);
  }
  .mv-iso.is-animated .accent {
    animation-name: mv-pop;
    animation-duration: .6s;
    animation-delay: calc(var(--i) * 110ms + 300ms);
  }
  /* En "cargando" los ladrillos se colocan, se quedan un momento y vuelven a empezar */
  .mv-iso.is-looping .b {
    transform-box: fill-box;
    transform-origin: center;
    animation: mv-lay-loop 2.4s cubic-bezier(.2, .9, .3, 1.2) infinite;
    animation-delay: calc(var(--i) * 120ms);
  }
}
@keyframes mv-lay { from { opacity: 0; transform: translateY(-14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mv-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes mv-lay-loop {
  0% { opacity: 0; transform: translateY(-12px) scale(.9); }
  18%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(4px) scale(.96); }
}