/* brand-maliv.css — Identidad visual de MALIV.
   Única fuente de verdad de color, tipografía y formas para las páginas
   públicas. Cambiar la identidad es editar este archivo.

   Se sirve por /api/pwa-shell/css/brand-maliv.css: esa ruta es catch-all
   ('css' está en _SPA_SAFE_DIRS de voice_server.serve_pwa_shell) y viaja por
   el proxy /api/ que existe en los tres vhosts. No necesita ruta Flask propia.

   OJO: las fuentes NO se importan desde acá. Encadenar aquí una importación
   de hoja de fuentes arrastraría CSS -> hoja de fuentes -> woff2 y retrasaría
   el LCP. Cada HTML pide las fuentes con <link> para que el preload scanner
   las descubra de inmediato. */

:root{
  /* Rojo muestreado del logo real (data/tenant-assets/1/logo.png): el píxel
     opaco dominante es rgb(217,3,16). El rojo institucional anterior, más
     oscuro y desaturado, no era el de marca real. */
  --mv-red:#D90310;
  --mv-red-hot:#FF1F2E;
  --mv-red-deep:#8E0209;
  --mv-red-veil:rgba(217,3,16,.10);
  --mv-red-edge:rgba(217,3,16,.32);

  --mv-ink:#050505;
  --mv-ink-2:#0D0D0D;
  --mv-ink-3:#151515;
  --mv-line:rgba(255,255,255,.09);

  --mv-white:#FFFFFF;
  --mv-grey:#9B9B9B;
  --mv-grey-dim:#565656;

  --mv-display:'Saira',system-ui,sans-serif;
  --mv-body:'Inter',system-ui,sans-serif;

  /* Trama de panal del manual de marca, como token para que las páginas la
     consuman sin repetir el data-URI ni pelear con su propio apilamiento.
     El mosaico es un hexágono de punta arriba de radio 32 (ancho 55.43, alto
     64) más el tramo vertical que lo une con la fila de abajo. */
  --mv-hex-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55.43' height='96' viewBox='0 0 55.43 96'%3E%3Cpath d='M27.71 0 L55.43 16 L55.43 48 L27.71 64 L0 48 L0 16 Z M27.71 64 L27.71 96' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
  --mv-hex-size:83px 144px;

  /* Inclinación del slash del logotipo. skewX negativo inclina como "/". */
  --mv-slant:-18deg;
  --mv-chamfer:14px;
  --mv-cut:polygon(
    0 0,
    calc(100% - var(--mv-chamfer)) 0,
    100% var(--mv-chamfer),
    100% 100%,
    var(--mv-chamfer) 100%,
    0 calc(100% - var(--mv-chamfer))
  );
}

/* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────── */

/* El logotipo: itálica pesada y condensada, en mayúsculas. */
.mv-display{
  font-family:var(--mv-display);
  font-style:italic;
  font-stretch:78%;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:.92;
}

/* El descriptor "SERVICIO AUTOMOTRIZ": misma familia, liviana y muy espaciada. */
.mv-eyebrow{
  font-family:var(--mv-display);
  font-style:italic;
  font-stretch:88%;
  font-weight:300;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.32em;
  color:var(--mv-grey);
}

/* Titular a dos tonos: la palabra clave en rojo, como "ALGO GRANDE SE VIENE". */
.mv-hl em{font-style:italic;color:var(--mv-red)}

/* ── FORMAS ─────────────────────────────────────────────────────────────── */

/* El paralelogramo rojo del logotipo, reusado como viñeta y separador. */
.mv-slash{
  display:inline-block;
  width:.42em;height:1em;
  background:var(--mv-red);
  transform:skewX(var(--mv-slant));
  flex:none;
}

/* Tarjeta con esquinas achaflanadas. El borde se dibuja con un pseudo-elemento
   embutido 1px: un clip-path recorta el border-* en las esquinas cortadas y
   dejaría el canto abierto. */
.mv-card{
  position:relative;
  background:var(--mv-line);
  clip-path:var(--mv-cut);
}
.mv-card::after{
  content:'';
  position:absolute;inset:1px;
  background:var(--mv-ink-3);
  clip-path:var(--mv-cut);
  z-index:0;
}
.mv-card>*{position:relative;z-index:1}

/* Botón con corte diagonal abajo a la derecha. */
.mv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mv-display);
  font-style:italic;font-stretch:82%;font-weight:700;
  font-size:15px;text-transform:uppercase;letter-spacing:.06em;
  padding:15px 28px;border:none;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  transition:background .2s,transform .15s,box-shadow .2s;
}
.mv-btn--primary{background:var(--mv-red);color:#fff}
.mv-btn--primary:hover{
  background:var(--mv-red-hot);
  transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(217,3,16,.34);
}
.mv-btn--ghost{
  background:transparent;color:var(--mv-white);
  box-shadow:inset 0 0 0 1px var(--mv-line);
}
.mv-btn--ghost:hover{
  box-shadow:inset 0 0 0 1px var(--mv-red-edge);
  transform:translateY(-2px);
}

/* Trama de panal, para bloques sin apilamiento propio. El SVG va inline en el
   token --mv-hex-img: no cuesta una petición y no depende de que un archivo
   externo siga existiendo. Las páginas cuyo hero ya tiene su propio z-index
   consumen el token directamente en vez de usar esta clase. */
.mv-hex{position:relative;isolation:isolate}
.mv-hex::before{
  content:'';
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.04;
  background-image:var(--mv-hex-img);
  background-size:var(--mv-hex-size);
}

/* Regla de luz que encabeza bloques. */
.mv-rule{
  height:2px;width:88px;border:0;margin:0 0 18px;
  background:linear-gradient(90deg,var(--mv-red) 0%,var(--mv-red-deep) 38%,transparent 100%);
}

/* El barrido curvo que va bajo el logotipo, como subrayado de títulos. */
.mv-swoosh{position:relative}
.mv-swoosh::after{
  content:'';
  position:absolute;left:0;bottom:-.26em;
  width:min(240px,60%);height:8px;
  background:var(--mv-red);
  clip-path:ellipse(50% 50% at 50% 50%);
}

@media (prefers-reduced-motion:reduce){
  .mv-btn{transition:none}
  .mv-btn--primary:hover,.mv-btn--ghost:hover{transform:none}
}