/* ============================================================================
   styles.css — tema de marca Evolmine
   ----------------------------------------------------------------------------
   El motor publica sus defaults dentro de @layer sw, así que este bloque sin
   capa siempre gana, sin importar el orden de carga.
   ========================================================================== */

:root,
.sw-root {
  --sw-bg: #F2F1EE;
  --sw-ink: #242426;          /* el carbón del logotipo, un punto más oscuro para contraste */
  --sw-ink-soft: #5F5F65;
  /* Tomado del SVG oficial (#EB0E20), no muestreado del JPEG: el vector es la
     fuente autorizada del color. */
  --sw-accent: #EB0E20;
  /* Verde WhatsApp. Es la marca #25D366 llevada un punto más oscuro: con blanco
     encima, #25D366 da 2.4:1 de contraste y no alcanza ni para texto grande.
     Este mantiene la lectura "WhatsApp" y llega a ~3.6:1. */
  --wa: #1DA851;
  --wa-dark: #178B43;
  --sw-font-display: "Archivo", system-ui, sans-serif;
  --sw-font-body: "Inter", system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: auto; }   /* el motor maneja el scroll suave */

body {
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Bloque de copy ---------------------------------------------------------
   TODO escala con `min(vw, vh)`, no solo con vw. El bloque va centrado vertical
   sobre video a pantalla completa: en una ventana ancha y baja, dimensionar solo
   por ancho hace que el texto crezca justo cuando hay menos alto, y se corta
   arriba y abajo. Tomar el menor de los dos ejes lo mantiene siempre dentro. */

.sw-copy {
  width: min(44vw, 540px);
  max-height: calc(100dvh - 9rem);
}

.sw-copy__num { font-size: clamp(.68rem, min(.8vw, 1.5vh), .78rem); }

.sw-copy__eyebrow {
  margin-top: clamp(8px, 1.6vh, 18px);
  font-weight: 700;
  font-size: clamp(.72rem, min(.9vw, 1.7vh), .86rem);
  letter-spacing: .16em;
}

/* Títulos más grandes y con más presencia, pero acotados por el alto. */
.sw-copy__title {
  margin-top: clamp(6px, 1.2vh, 14px);
  font-weight: 800;
  font-size: clamp(2rem, min(5.4vw, 9vh), 4.6rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 1px 24px color-mix(in srgb, var(--sw-bg) 75%, transparent);
}

/* Cuerpo más oscuro y algo mayor: sobre foto de desierto a pleno sol, el gris
   suave del motor se perdía. */
.sw-copy__body {
  margin-top: clamp(10px, 1.8vh, 20px);
  font-size: clamp(.98rem, min(1.3vw, 2.4vh), 1.22rem);
  line-height: 1.5;
  color: var(--sw-ink);
  max-width: 44ch;
  text-shadow: 0 1px 16px color-mix(in srgb, var(--sw-bg) 85%, transparent);
}

.sw-copy__tags { margin-top: clamp(12px, 2.2vh, 26px); gap: 7px; }

/* Las etiquetas llevan datos que no deben partirse: el teléfono se estaba
   rompiendo en dos líneas a mitad del número. */
.sw-copy__tags li {
  white-space: nowrap;
  font-size: clamp(.72rem, min(.85vw, 1.6vh), .82rem);
  padding: 6px 13px;
  background: rgba(255, 255, 255, .86);
  color: color-mix(in srgb, var(--sw-accent) 82%, #000);
}

.sw-copy__cta { margin-top: clamp(14px, 2.4vh, 28px); }

/* ---- Título de héroe --------------------------------------------------------
   Una sola palabra ocupando el ancho, con el resto del copy como tarjeta abajo a
   la izquierda. El tamaño se toma como `min(vw, vh)`: por ancho es lo que hace
   que la palabra llene la pantalla, pero sin el tope por alto se comería el
   viewport en ventanas bajas y taparía la tarjeta. */
.sw-hero {
  position: absolute;
  left: 0; right: 0;
  /* Bajado respecto de la navegación: queda en la banda libre entre la barra
     superior y la tarjeta de texto, sin tocar ninguna de las dos. */
  top: clamp(132px, 24vh, 270px);
  padding: 0 clamp(16px, 3vw, 48px);
  /* El riel de secciones vive pegado al borde derecho y su etiqueta activa
     siempre está visible: sin reservar esta banda, el titular la pisa. */
  padding-right: clamp(16px, 12vw, 180px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--sw-copy-dy, 0vh));
  will-change: opacity, transform;
}

.sw-hero__title {
  margin: 0;
  font-family: var(--sw-font-display);
  font-weight: 800;
  /* Versalitas altas como la referencia. Las mayúsculas son más anchas que la
     caja de minúsculas, así que el tamaño baja para seguir cabiendo a lo ancho.
     El acento se mantiene: en español la tilde no se pierde al capitalizar. */
  text-transform: uppercase;
  /* "EVOLMINE" tiene una letra menos que la palabra anterior, así que el tamaño
     sube para seguir llenando el ancho. El tope por alto baja a 25vh porque el
     titular ahora vive más abajo y tiene menos banda libre. */
  font-size: min(13vw, 25vh);
  line-height: .86;
  letter-spacing: -.035em;
  text-align: center;
  color: var(--sw-ink);
  /* Halo claro en vez de un scrim sólido: la foto sigue viéndose entre las
     letras, pero el texto se sostiene sobre las zonas más contrastadas. */
  text-shadow:
    0 2px 34px color-mix(in srgb, var(--sw-bg) 92%, transparent),
    0 0 90px color-mix(in srgb, var(--sw-bg) 78%, transparent);
}

/* En la sección de héroe la columna baja al pie, como la tarjeta de la
   referencia, para no chocar con el titular. */
.sw-copy.is-hero {
  top: auto;
  bottom: clamp(36px, 7vh, 88px);
  transform: translateY(var(--sw-copy-dy, 0vh));
  max-height: none;
}
/* La bajada del héroe va un punto por encima del resto: es la única que compite
   con un titular de este tamaño y a cuerpo normal se veía raquítica. */
.sw-copy.is-hero { width: min(52vw, 620px); }
.sw-copy.is-hero .sw-copy__eyebrow { font-size: clamp(.78rem, min(1vw, 1.9vh), .95rem); }
.sw-copy.is-hero .sw-copy__body {
  font-size: clamp(1.2rem, min(1.85vw, 3.3vh), 1.6rem);
  line-height: 1.4;
  max-width: 30ch;
}

/* ---- Scrim ------------------------------------------------------------------
   El del motor está calibrado para escenas ilustradas. Estas son fotos de
   desierto a pleno sol, claras y con mucho detalle, así que el texto oscuro se
   perdía. Se sostiene la opacidad más a la derecha, pasando el ancho real de la
   columna, y recién ahí cae. */
.sw-copylayer::before {
  width: min(68vw, 940px);
  background: linear-gradient(90deg,
    var(--sw-bg) 0%,
    color-mix(in srgb, var(--sw-bg) 97%, transparent) 42%,
    color-mix(in srgb, var(--sw-bg) 80%, transparent) 62%,
    color-mix(in srgb, var(--sw-bg) 30%, transparent) 82%,
    transparent 100%);
}

/* ---- CTA de WhatsApp --------------------------------------------------------
   El único botón primario del sitio es el de WhatsApp, así que va en verde
   WhatsApp en lugar del rojo de marca: el color es parte del reconocimiento. */
.sw-btn--primary,
.sw-topcta {
  background: var(--wa);
  color: #fff;
}
.sw-btn--primary:hover,
.sw-topcta:hover { background: var(--wa-dark); }

.sw-btn--ghost { background: rgba(255, 255, 255, .78); }

/* ---- Lockup horizontal de marca -------------------------------------------
   El isotipo usa la altura disponible; el descriptor se despliega a lo ancho,
   que es lo que sobra en una cabecera. */
.sw-brand { gap: 12px; align-items: center; }

.sw-brand__icon { height: clamp(34px, 3.6vw, 46px); width: auto; display: block; flex: none; }

.sw-brand__text {
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; line-height: 1;
}

.sw-brand__name {
  font-family: var(--sw-font-display);
  font-weight: 700;
  font-size: clamp(.95rem, 1.35vw, 1.18rem);
  letter-spacing: -.018em;
  color: var(--sw-ink);
  white-space: nowrap;
}

/* El filete rojo del logotipo original, como borde en vez de regla gráfica: así
   acompaña al texto si cambia de tamaño. */
.sw-brand__tag {
  font-family: var(--sw-font-display);
  font-weight: 600;
  font-size: clamp(.6rem, .78vw, .72rem);
  letter-spacing: .3em;
  text-indent: .3em;            /* compensa el espaciado del último carácter */
  color: var(--sw-ink-soft);
  border-top: 2px solid var(--sw-accent);
  padding-top: 4px;
  white-space: nowrap;
}

.sw-nav__item { white-space: nowrap; }

/* Con siete secciones la navegación es más ancha: el descriptor se retira antes
   para que marca + nav + CTA sigan entrando en una línea. */
@media (max-width: 1280px) {
  .sw-brand__text { display: none; }
  .sw-brand__icon { height: 38px; }
}

/* ---- Foco de teclado sobre video a sangre completa ---- */
.sw-nav__item:focus-visible,
.sw-route__dot:focus-visible,
.sw-btn:focus-visible,
.sw-topcta:focus-visible,
.sw-brand:focus-visible {
  outline: 2.5px solid var(--sw-accent);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ---- Móvil ---- */
@media (max-width: 860px) {
  /* El copy anclado abajo ya ocupa el hueco del indicador, y "deslice para
     desplazarse" no es una afordancia que un teléfono necesite explicada. */
  .sw-hint { display: none; }

  .sw-copy { width: auto; max-height: calc(100dvh - 12rem); }
  /* En vertical el titular respira menos: se sube y se acota para dejarle sitio
     a la tarjeta, que en móvil ya vive abajo. */
  /* En móvil el riel esconde sus etiquetas, así que no hace falta reservar banda
     a la derecha y el titular recupera el ancho completo. */
  .sw-hero { top: clamp(110px, 17vh, 170px); padding-right: clamp(16px, 3vw, 48px); }
  /* Margen real: con letter-spacing negativo el bounding box miente y la tilde
     de la Ó se sale del borde aunque la medición diga que cabe. */
  .sw-hero__title { font-size: min(14.6vw, 18vh); letter-spacing: -.025em; }
  .sw-copy.is-hero { bottom: calc(clamp(56px, 12dvh, 110px) + env(safe-area-inset-bottom)); }
  .sw-copy__title { font-size: clamp(1.8rem, min(7.4vw, 5.2vh), 2.7rem); }
  .sw-copy__body { max-width: none; font-size: clamp(.95rem, min(3.6vw, 2vh), 1.08rem); }

  .sw-copylayer::before {
    width: 100%;
    height: 74%;
    background: linear-gradient(0deg,
      var(--sw-bg) 12%,
      color-mix(in srgb, var(--sw-bg) 90%, transparent) 44%,
      color-mix(in srgb, var(--sw-bg) 46%, transparent) 70%,
      transparent 100%);
  }
}

/* Vista sin JavaScript. Es lo que ven los rastreadores que no ejecutan scripts
   y cualquiera con JS desactivado, así que se compone como una página legible
   de verdad, no como un mensaje de error. app.js la oculta al montar. */
.sw-seo {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 10vh auto;
  padding: 0 clamp(18px, 5vw, 60px) 12vh;
  font-family: var(--sw-font-body);
  line-height: 1.6;
}
.sw-seo h1,
.sw-seo h2 {
  font-family: var(--sw-font-display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.sw-seo h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .6em; }
.sw-seo h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 2em; }
.sw-seo ul { padding-left: 1.2em; }
.sw-seo li { margin-bottom: .5em; }
.sw-seo address { font-style: normal; }
.sw-seo a { color: var(--sw-accent); }
.sw-seo[hidden] { display: none; }