/* Estilos compartidos de evetev.com — index.html y nosotros.html.
   Se extrajeron del <style> embebido al aparecer la segunda página:
   mantener dos copias del mismo CSS era el error más caro a futuro.
   Marca: packages/brand/assets/evetev_brand_styles.md (v1.0). */
:root {
  /* Respaldo de los tokens oficiales — valores exactos, no aproximar (§2) */
  --eve-azul-noche: #0a2540;
  --eve-azul-noche-profundo: #081d33;
  --eve-hielo: #eaf2fb;
  --eve-tinte: #f4f9fd;
  --eve-linea: #edf3fa;
  --eve-pizarra: #64748b;
  --eve-muted: #94a3b8;
  --eve-coral: #ee3d22;
  --eve-coral-hover: #cf3016;
  --eve-electrico: #1e6feb;
  --eve-mezclado: #144a96;
  --eve-cian: #22d3ee;
  --eve-teal: #3baec2;
  --eve-violeta: #8b5cf6;
  --eve-violeta-texto: #6d28d9;
  --eve-violeta-tinte: #ede9fe;
  --eve-exito: #16a34a;
  --eve-alerta: #d97706;
  --eve-error: #b91c1c;
  --eve-grad-corporativo: linear-gradient(90deg, #0a2540 0%, #1e6feb 55%, #22d3ee 100%);
  --eve-grad-ia: linear-gradient(90deg, #8b5cf6 0%, #6366f1 50%, #22d3ee 100%);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  font-family: "Inter", sans-serif;
  color: var(--eve-azul-noche);
  background: #fdfeff;
  line-height: 1.65;
}
h1,
h2,
.brand {
  font-family: "Baloo 2", sans-serif;
  font-weight: 600;
}
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4.5vw, 32px);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: "Inter", sans-serif;
  cursor: pointer;
  border: none;
  background: none;
}
:focus-visible {
  outline: 2px solid var(--eve-electrico);
  outline-offset: 2px;
  border-radius: 4px;
}
.link {
  color: var(--eve-electrico);
  font-weight: 500;
  font-size: 0.85rem;
}
.link:hover {
  text-decoration: underline;
}

/* NAV (§6) */
nav {
  position: sticky;
  top: 0;
  background: rgba(253, 254, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--eve-linea);
  z-index: 50;
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo img {
  width: 32px;
  height: 23px;
  display: block;
}
.brand {
  font-size: 1.15rem;
}
.menu {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--eve-pizarra);
}
.menu > a:hover {
  color: var(--eve-azul-noche);
}
.nav-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
}
.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px;
}
.burger span {
  width: 20px;
  height: 2px;
  background: var(--eve-azul-noche);
  border-radius: 2px;
  transition: 0.2s;
}
.drop {
  position: relative;
}
.drop > button {
  font-size: 0.85rem;
  color: var(--eve-pizarra);
  display: flex;
  align-items: center;
  gap: 4px;
}
.drop > button:hover {
  color: var(--eve-azul-noche);
}
.drop-panel {
  position: absolute;
  top: 30px;
  left: -10px;
  background: #fff;
  border: 1px solid var(--eve-linea);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(10, 37, 64, 0.06);
  padding: 6px;
  min-width: 215px;
  display: none;
}
.drop.open .drop-panel {
  display: block;
}
.drop-panel a {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 0.82rem;
}
.drop-panel a:hover {
  background: var(--eve-tinte);
}
.drop-panel img {
  width: 19px;
  height: 19px;
  flex: none;
}

/* BOTONES (§6) — jerarquía: coral (1 por vista) → mezclado → ghost → enlace */
.btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 11px 24px;
  transition: 0.15s;
  display: inline-block;
  text-align: center;
}
.btn-cta {
  background: var(--eve-coral);
  color: #fff;
}
.btn-cta:hover {
  background: var(--eve-coral-hover);
}
.btn-sec {
  background: var(--eve-mezclado);
  color: #fff;
}
.btn-sec:hover {
  background: #0e3568;
}
.btn-ghost {
  border: 1px solid #d7e3f0;
  color: var(--eve-azul-noche);
  font-weight: 500;
}
.btn-ghost:hover {
  border-color: var(--eve-pizarra);
}

/* HERO — degradado solo en pieza expresiva (C6) */
/* Banda del hero: contiene el lienzo de partículas a sangre completa. El
   lienzo es absoluto dentro de ella, así que se desplaza con la página en
   lugar de quedarse pegado a la ventana, y no invade el resto de secciones. */
/* La banda ocupa la primera pantalla completa. Se descuentan los 60px del nav
   sticky para que hero + nav den exactamente un alto de ventana y no quede una
   franja huérfana asomando. svh (no vh) porque en móvil vh cuenta la barra del
   navegador y el bloque se pasa de largo. */
.hero-banda {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px);
}
#eve-particulas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#eve-particulas canvas {
  display: block;
}
.hero-banda > .hero {
  position: relative;
  z-index: 1;
}
.hero {
  padding: clamp(40px, 7vh, 72px) 0;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: 18px;
}
.hero p {
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  color: var(--eve-pizarra);
  margin: 0 auto 30px;
  max-width: 48ch;
}
.hero-cta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.hero-marca img {
  width: 56px;
  height: 39px;
}

/* Entrada del hero: desenfoque y ascenso, SOLO sobre el texto. El isotipo, los
   botones y la señal de scroll quedan fijos a propósito: son los puntos de
   referencia estables mientras el texto se compone, y así la animación no
   retrasa el elemento con el que la persona va a interactuar.
   El desenfoque, además, disimula el salto de la tipografía al cargar. */
@media (prefers-reduced-motion: no-preference) {
  .hero-banda .hero h1,
  .hero-banda .hero p {
    animation: heroEntra 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero-banda .hero h1 {
    animation-delay: 80ms;
  }
  .hero-banda .hero p {
    animation-delay: 210ms;
  }
}
@keyframes heroEntra {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* Señal de que hay más abajo: sin ella, una primera pantalla completa parece
   el final de la página. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--eve-muted);
}
.hero-scroll svg {
  width: 17px;
  height: 17px;
  animation: bajar 1.8s ease-in-out infinite;
}
@keyframes bajar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll svg {
    animation: none;
  }
}

/* PRODUCTOS — variante minimalista hairline (§6 tarjetas) */
.hr {
  border: none;
  border-top: 1px solid var(--eve-linea);
}
/* Punto de línea de negocio (§12). Vive suelto y no anidado: antes colgaba de
   .serv, una clase que dejó de existir en el HTML, y los puntos no se pintaban. */
.punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 9px;
  flex: none;
}

/* Ícono de producto en el color de su línea.
   La regla T1 prohíbe redibujar o aproximar la marca, así que NO se copia el
   trazo: se usa la unidad oficial del CDN como máscara y el color se pinta
   por debajo. El activo sigue siendo el del CDN; solo cambia el tinte. */
.p-ico {
  width: 34px;
  height: 34px;
  display: block;
  background-color: var(--p);
  -webkit-mask: var(--u) center/contain no-repeat;
  mask: var(--u) center/contain no-repeat;
}
.p-ico.sm {
  width: 19px;
  height: 19px;
  flex: none;
}
/* Sin retícula de líneas: separa el aire, no los bordes. Es lo que pide el
   manual —"la jerarquía se logra con espacio", nunca con adornos— y evita que
   esta sección contradiga la amplitud del hero que tiene justo encima. */
/* Tres productos desde ago-2026: la rejilla se adapta en vez de fijar dos
   columnas, así el tercero no queda solo en una fila. El gap baja un poco
   porque con tres columnas el aire de antes dejaba las tarjetas muy estrechas. */
.prod {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(30px, 4.5vw, 56px);
}
.prod > article {
  padding: 0;
}
.prod h3 {
  font-size: 1.12rem;
  font-weight: 600;
  margin: 16px 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* El rótulo hereda el color de la línea, pero admite un tono aparte para
   texto: el violeta base sobre blanco no llega al contraste AA (regla C7),
   así que Eve Intelligence pasa su --p-texto. Los demás no declaran nada y
   siguen usando --p, que en azul sí contrasta. */
.prod .sub {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--p-texto, var(--p));
}
.prod p {
  font-size: 0.85rem;
  color: var(--eve-pizarra);
  margin-bottom: 14px;
  max-width: 44ch;
}
.prod ul {
  list-style: none;
  margin: 0 0 16px;
}
.prod li {
  font-size: 0.8rem;
  color: var(--eve-pizarra);
  padding: 4px 0;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.prod li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p);
  flex: none;
  margin-top: 8px;
}
/* Dos salidas por card: la landing del producto primero, y debajo la acción
   que ya estaba y sigue siendo útil (integración o piloto). El destacado toma
   el color de la línea (--p), no el coral, que está reservado (C2). */
.prod .enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}
.link.destacado {
  color: var(--p);
  font-weight: 600;
}

/* Estado del producto: ícono + texto, nunca solo color (C5) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--eve-linea);
  background: var(--eve-tinte);
  color: var(--eve-pizarra);
  white-space: nowrap;
}
.chip svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.chip.build {
  background: #eaf2fb;
  border-color: #cfe0f5;
  color: var(--eve-mezclado);
}

/* OJO con el espaciado vertical de las secciones: `.wrap` es un selector de
   clase y `section` uno de etiqueta, así que `.wrap{padding:0 …}` gana por
   especificidad y anula el `padding:64px 0` de `section`. Toda sección que
   además sea .wrap se queda con padding vertical 0 — de ahí los padding-top
   sueltos que hay por el HTML. Aquí se declara explícito en vez de confiar en
   una regla que nunca llega a aplicarse. */
/* Los dos paddings se suman, así que cada uno va a la mitad del hueco
   buscado: 64+64 dan 128 px, algo más que los 112 que separan el video de
   "Productos" y en la misma escala. Con 104 cada uno se iban a 208, el doble
   que el resto de la página. */
#servicios {
  padding-bottom: clamp(40px, 5vw, 64px);
}
#desarrolladores {
  padding-top: clamp(40px, 5vw, 64px);
}

/* TABS (§6) */
.tabs {
  display: inline-flex;
  background: var(--eve-tinte);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  flex-wrap: wrap;
}
.tab {
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--eve-pizarra);
}
.tab.act {
  background: #fff;
  color: var(--eve-azul-noche);
  box-shadow: 0 1px 4px rgba(10, 37, 64, 0.08);
}
.tab-body {
  display: none;
  padding-top: 26px;
  max-width: 640px;
}
.tab-body.act {
  display: block;
}
.tab-body p {
  font-size: 0.88rem;
  color: var(--eve-pizarra);
}
.tab-body code {
  background: var(--eve-tinte);
  border: 1px solid var(--eve-linea);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--eve-azul-noche);
}

/* PRECIOS — cifras protagonistas en Baloo 2 700 (§3) */
.precios {
  background: var(--eve-tinte);
  border-top: 1px solid var(--eve-linea);
  border-bottom: 1px solid var(--eve-linea);
  padding: 64px 0;
}
.pre-grid {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pre-l {
  flex: 1.2;
  min-width: 290px;
}
.pre-l h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  margin-bottom: 8px;
}
.pre-l > p {
  font-size: 0.88rem;
  color: var(--eve-pizarra);
  margin-bottom: 26px;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--eve-mezclado);
}
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--eve-pizarra);
  cursor: pointer;
}
.sw {
  position: relative;
  width: 42px;
  height: 23px;
  background: #d7e3f0;
  border-radius: 999px;
  transition: 0.2s;
  flex: none;
}
.sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
#anual:checked + .sw {
  background: var(--eve-mezclado);
}
#anual:checked + .sw::after {
  left: 22px;
}
#anual {
  position: absolute;
  opacity: 0;
}
.pre-card {
  flex: 1;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--eve-linea);
  border-radius: 14px;
  padding: 28px;
}
.pre-card .v {
  font-family: "Baloo 2", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
}
.pre-card small {
  color: var(--eve-muted);
  font-size: 0.75rem;
}
.pre-card ul {
  list-style: none;
  margin: 18px 0 22px;
}
.pre-card li {
  font-size: 0.82rem;
  color: var(--eve-pizarra);
  padding: 5px 0;
  display: flex;
  gap: 9px;
  align-items: center;
}
.pre-card li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--eve-electrico);
  flex: none;
}
.pre-card .btn {
  width: 100%;
}
.detalle-costos {
  margin-top: 14px;
  border-top: 1px solid var(--eve-linea);
  padding-top: 10px;
}
.detalle-costos div {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--eve-pizarra);
  padding: 3px 0;
}

/* TARJETAS con ilustración (§6) */
.icards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.icard {
  border: 1px solid var(--eve-linea);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
}
.icard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 37, 64, 0.09);
}
.icard .cover {
  display: block;
  width: 100%;
  height: auto;
}
.icard .cuerpo {
  padding: 18px 22px 22px;
}
.icard h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.icard p {
  font-size: 0.82rem;
  color: var(--eve-pizarra);
  margin-bottom: 12px;
}

/* BANDA portada (§6): object-fit cover + velo + contenido en blanco */
/* Sin overflow:hidden a propósito: convertiría la sección en contenedor de
   scroll y entonces view() mediría contra ella —que nunca se desplaza— en vez
   de contra la página, dejando la animación congelada. El recorte del video lo
   hace .banda-media, que sí puede recortarse sin romper la línea de tiempo. */
.banda {
  position: relative;
  min-height: clamp(300px, 46vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}
/* El video vive en su propia capa para poder crecer sin arrastrar al texto:
   si escalara la sección entera, el titular crecería con ella y se vería mal. */
.banda-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
  background: linear-gradient(120deg, #0a2540, #1e6feb);
}
.banda-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banda-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, 0.42);
}

/* Crecimiento ligado al scroll, sin JS. Donde no haya soporte (hoy Firefox),
   el video simplemente se ve a tamaño completo desde el principio: se pierde
   la animación, nunca el contenido. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .banda-media {
      animation: banda-crece linear both;
      animation-timeline: view();
      /* El recorrido se estira hasta cover 58% a propósito: con un tramo más
         corto el video llegaba a tamaño completo cuando la banda apenas
         asomaba, y el crecimiento pasaba fuera de la vista. */
      animation-range: entry 0% cover 58%;
    }
    @keyframes banda-crece {
      from {
        transform: scale(0.76);
        border-radius: 32px;
      }
      to {
        transform: scale(1);
        border-radius: 0;
      }
    }
    /* El texto entra algo después para no competir con el crecimiento. */
    .banda .contenido {
      animation: banda-texto linear both;
      animation-timeline: view();
      animation-range: entry 28% cover 66%;
    }
    @keyframes banda-texto {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}
.banda .contenido {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 48px clamp(24px, 6vw, 60px);
  max-width: 760px;
  margin: 0 auto;
}
.banda h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin-bottom: 10px;
  color: #fff;
}
.banda p {
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  color: #d6e6f7;
  margin-bottom: 0;
}

/* FORM contacto (§6) */
.contacto {
  max-width: 580px;
}
.contacto h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  margin-bottom: 8px;
}
.contacto > p {
  font-size: 0.88rem;
  color: var(--eve-pizarra);
  margin-bottom: 26px;
}
.campo {
  margin-bottom: 18px;
}
.campo > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.campo input[type="text"],
.campo input[type="email"],
.campo select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #dce7f2;
  border-radius: 9px;
  font-size: 0.88rem;
  font-family: "Inter", sans-serif;
  background: #fff;
  color: var(--eve-azul-noche);
}
.campo input:focus,
.campo select:focus {
  outline: 2px solid var(--eve-electrico);
  border-color: transparent;
}
/* Error: SIEMPRE ícono + texto, nunca solo color (C5) */
.err {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--eve-error);
}
.err svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.err.show {
  display: flex;
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chk {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--eve-pizarra);
  padding: 13px 16px;
  border: 1px solid #dce7f2;
  border-radius: 9px;
  cursor: pointer;
  transition: 0.15s;
  line-height: 1.3;
}
.chk:hover {
  border-color: var(--eve-pizarra);
}
.chk input {
  accent-color: var(--eve-electrico);
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
}
.chk input:checked ~ span {
  color: var(--eve-azul-noche);
  font-weight: 500;
}

/* FAQ (§6) */
details {
  border-bottom: 1px solid var(--eve-linea);
}
summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 2px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  gap: 14px;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  font-family: "Baloo 2", sans-serif;
  font-size: 1.25rem;
  color: var(--eve-electrico);
  flex: none;
}
details[open] summary::after {
  content: "–";
}
details p {
  padding: 0 2px 18px;
  color: var(--eve-pizarra);
  font-size: 0.85rem;
  max-width: 640px;
}

/* MODAL (§6) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 37, 64, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.overlay.open {
  display: flex;
}
.modal {
  background: #fff;
  border-radius: 16px;
  padding: 34px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.modal img {
  width: 52px;
  height: 37px;
  margin-bottom: 14px;
}
.modal h3 {
  font-family: "Baloo 2", sans-serif;
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.modal p {
  font-size: 0.85rem;
  color: var(--eve-pizarra);
  margin-bottom: 22px;
}

section {
  padding: 64px 0;
}
.sec-h {
  margin-bottom: 34px;
}
.sec-h h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  margin-bottom: 6px;
}
.sec-h p {
  font-size: 0.88rem;
  color: var(--eve-pizarra);
}

/* TOAST (§6) — ícono + texto (C5) */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--eve-azul-noche);
  color: #fff;
  font-size: 0.85rem;
  padding: 12px 24px;
  border-radius: 999px;
  transition: 0.3s;
  opacity: 0;
  z-index: 110;
  max-width: 90vw;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Mascota Eve (§4) */

/* FOOTER (§6) */
footer {
  background: var(--eve-azul-noche);
  color: #b9cce0;
  margin-top: 64px;
}
/* Si el footer va pegado a una banda tintada, ese margen deja una franja
   blanca entre dos fondos de color y se lee como un hueco. Solo se anula en
   ese caso: cuando lo precede una sección blanca, el aire sí hace falta. */
.precios + footer {
  margin-top: 0;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding: 56px 0 40px;
}
.foot-marca img {
  width: 40px;
  height: 28px;
}
.foot-marca .brand {
  color: #fff;
  font-size: 1.15rem;
  display: block;
  margin: 10px 0 8px;
}
.foot-marca p {
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 250px;
  color: #8fa8c4;
}
.foot-col h4 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.foot-col a {
  display: block;
  font-size: 0.83rem;
  color: #b9cce0;
  padding: 5px 0;
}
.foot-col a:hover {
  color: var(--eve-cian);
}
.suscribe {
  padding: 0 0 36px;
}
.suscribe p {
  font-size: 0.83rem;
  color: #8fa8c4;
  margin-bottom: 10px;
}
.sus-row {
  display: flex;
  gap: 10px;
  max-width: 420px;
}
.sus-row input {
  flex: 1;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid #2c4a6b;
  background: #0f2d4a;
  color: #fff;
  font-size: 0.85rem;
  font-family: "Inter", sans-serif;
}
.sus-row input::placeholder {
  color: #6c87a6;
}
.sus-row input:focus {
  outline: 2px solid var(--eve-cian);
  border-color: transparent;
}
.foot-base {
  border-top: 1px solid #1a3a5c;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #6c87a6;
  flex-wrap: wrap;
  gap: 12px;
}
.redes {
  display: flex;
  gap: 14px;
}
.redes a {
  display: flex;
  width: 34px;
  height: 34px;
  border: 1px solid #2c4a6b;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
}
.redes a:hover {
  border-color: var(--eve-cian);
}
.redes svg {
  width: 16px;
  height: 16px;
  fill: #b9cce0;
}
.redes a:hover svg {
  fill: var(--eve-cian);
}

/* ============ RESPONSIVE (§7) ============ */
/* Tablet */
@media (max-width: 1024px) {
  .serv {
    grid-template-columns: 1fr 1fr;
  }
  .serv > div:nth-child(3n) {
    border-right: 1px solid var(--eve-linea);
  }
  .serv > div:nth-child(2n) {
    border-right: none;
  }
  .foot-top {
    grid-template-columns: 1fr 1fr;
  }
}
/* Móvil */
@media (max-width: 760px) {
  .wrap {
    padding: 0 26px;
  }
  .hero {
    padding-top: 60px;
  }
  section {
    padding: 52px 0;
  }
  .burger {
    display: flex;
  }
  .nav-acciones .btn-cta {
    padding: 9px 18px;
    font-size: 0.8rem;
  }
  .menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--eve-linea);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 10px 24px rgba(10, 37, 64, 0.07);
  }
  .menu.open {
    display: flex;
  }
  .menu > a,
  .menu > button {
    padding: 13px 24px;
    text-align: left;
  }
  .drop {
    width: 100%;
  }
  .drop > button {
    padding: 13px 24px;
    width: 100%;
    justify-content: space-between;
  }
  .drop-panel {
    position: static;
    border: none;
    box-shadow: none;
    background: var(--eve-tinte);
    border-radius: 0;
    padding: 4px 12px;
  }
  .checks {
    grid-template-columns: 1fr;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .pre-grid {
    gap: 28px;
  }
  .tabs {
    width: 100%;
    justify-content: center;
  }
  .foot-top {
    grid-template-columns: 1fr;
  }
  .foot-base {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Escritorio amplio */
@media (min-width: 1440px) {
  .wrap {
    max-width: 1160px;
  }
}
/* Ultra-wide: el contenido no se estira, respira */
@media (min-width: 1900px) {
  html {
    font-size: 17.5px;
  }
  .wrap {
    max-width: 1280px;
  }
  .hero {
    max-width: 700px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ============ NOSOTROS / EQUIPO / TRABAJA (nosotros.html) ============ */
.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
}
.valor {
  border: 1px solid var(--eve-linea);
  border-radius: 14px;
  padding: 20px 22px;
  background: #fff;
}
.valor h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.valor p {
  font-size: 0.82rem;
  color: var(--eve-pizarra);
}

/* Hoja de ruta: el hito cumplido se marca con punto lleno + la palabra
   "Hecho", nunca solo con color (C5). */
.ruta {
  list-style: none;
  border-left: 2px solid var(--eve-linea);
  margin: 0 0 0 6px;
}
.ruta li {
  position: relative;
  padding: 0 0 24px 26px;
}
.ruta li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--eve-electrico);
}
.ruta li.hecho::before {
  background: var(--eve-electrico);
}
.ruta b {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 3px;
}
.ruta p {
  font-size: 0.82rem;
  color: var(--eve-pizarra);
  margin: 0;
  max-width: 62ch;
}

.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 20px;
}
.persona {
  border: 1px solid var(--eve-linea);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
}
.persona .ini {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: var(--p);
  margin-bottom: 13px;
}
.persona h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1px;
}
.persona .rol {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--p);
  display: block;
  margin-bottom: 9px;
}
.persona p {
  font-size: 0.82rem;
  color: var(--eve-pizarra);
  margin-bottom: 12px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--eve-tinte);
  border: 1px solid var(--eve-linea);
  color: var(--eve-pizarra);
}

.campo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #dce7f2;
  border-radius: 9px;
  font-size: 0.88rem;
  font-family: "Inter", sans-serif;
  background: #fff;
  color: var(--eve-azul-noche);
  min-height: 130px;
  resize: vertical;
}
.campo textarea:focus {
  outline: 2px solid var(--eve-electrico);
  border-color: transparent;
}
.ayuda {
  font-size: 0.76rem;
  color: var(--eve-muted);
  margin-top: 6px;
}

@media (max-width: 760px) {
  .valores,
  .equipo {
    grid-template-columns: 1fr;
  }
}

/* Los dos productos a una columna antes de llegar al móvil: son tarjetas con
   lista de viñetas, y a dos columnas por debajo de ~860px las líneas quedan de
   tres o cuatro palabras y la sección se vuelve larguísima. */
@media (max-width: 860px) {
  .prod {
    grid-template-columns: 1fr;
    gap: clamp(38px, 7vw, 52px);
  }
}

/* Trampa antibots: fuera de pantalla, sin display:none (algunos bots lo
   detectan) y fuera del árbol de accesibilidad vía aria-hidden en el HTML. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Botón ocupado mientras se envía el formulario */
.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* ============ Cambios sugeridos por el equipo ============ */

/* "Quiénes somos": el texto convive con la mascota a la derecha en vez de
   dejar medio ancho vacío. La mascota es decorativa (aria-hidden) y desaparece
   en pantallas estrechas para no robar espacio al texto. */
.nosotros-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.nosotros-grid .texto {
  max-width: 60ch;
}
/* El sprite es un .jpeg con fondo gris claro: una máscara que lo difumine
   también recortaría al personaje. En su lugar se presenta como un tile
   redondeado con fondo tinte, que lee como pieza intencional y no como recorte
   pegado sobre la página. */
.mascota-flux {
  width: 100%;
  max-width: 340px;
  display: block;
  margin-inline: auto;
  border-radius: 20px;
  background: var(--eve-tinte);
}
.mini-mascota {
  border-radius: 14px;
  background: var(--eve-tinte);
}
@media (max-width: 820px) {
  .nosotros-grid {
    grid-template-columns: 1fr;
  }
  .nosotros-grid .mascota-flux {
    display: none;
  }
}

/* "En qué creemos": 5 tarjetas en 3 + 2 centradas, no 4 + 1 huérfana. Flexbox
   con base fija y centrado: la fila incompleta queda centrada sola, y todas
   las tarjetas conservan el mismo ancho. Baja a 2 y luego a 1 por sí solo. */
.creencias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.creencias .valor {
  flex: 0 1 300px;
}
@media (max-width: 660px) {
  .creencias .valor {
    flex-basis: 100%;
  }
}

/* Contacto: el formulario comparte fila con una tarjeta de "por qué elegir
   Evetev", que antes era espacio vacío a la derecha. */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.82fr;
  gap: clamp(30px, 4.5vw, 60px);
  align-items: start;
}
.contacto-grid .contacto {
  max-width: none;
}
/* Sin fondo ni caja: el bloque respira sobre el blanco de la página. Sin caja
   ya no hay que igualar alturas (por eso el grid vuelve a align-items:start). */
.por-que {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* Video de la mascota (Eve saludando). Va en files/ como los demás recursos
   del sitio. object-fit:cover porque la fuente es cuadrada; fondo tinte por si
   el primer fotograma tarda. autoplay+muted+loop+playsinline = se reproduce
   solo, sin sonido, sin ir a pantalla completa en iOS. */
/* Cap de tamaño para que no se dispare en pantallas anchas (antes al 100% del
   ancho crecía tanto que empujaba el bloque más abajo que el formulario). */
.por-que .por-que-video {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  background: #edf3fa;
  display: block;
  margin: 0 auto 20px;
}
.por-que h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.por-que ul {
  list-style: none;
  margin: 0;
}
.por-que li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--eve-pizarra);
  padding: 7px 0;
}
.por-que li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--eve-electrico);
}
.por-que li b {
  color: var(--eve-azul-noche);
  font-weight: 600;
}
@media (max-width: 820px) {
  .contacto-grid {
    grid-template-columns: 1fr;
  }
  .por-que {
    position: static;
  }
}