/*
Theme Name: VINSON
Theme URI: https://vinson.com.mx
Author: VirtuaLab
Author URI: https://virtualab.mx
Description: Landing institucional de una página para VINSON. Construida con el kit Página Web Express de VirtuaLab.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vinson-web
*/

/* ==========================================================================
   TEMA BASE DEL KIT EXPRESS

   Cuatro correcciones vienen horneadas de fábrica. Cada una es un bug que ya
   costó tiempo en un proyecto real; están marcadas con [FIX] y no se quitan:

   [FIX 1] img { height: auto }   — el logo y las fotos salían estirados.
   [FIX 2] .hero-wrap/.hero-inner — el titular del hero salía centrado.
   [FIX 3] .form-estado           — borde completo, nunca border-left.
   [FIX 4] .reveal + failsafe     — la sección se quedaba en blanco.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fuentes self-hosteadas

   Si self-hosteas (recomendado: una familia variable son ~30 KB y elimina dos
   round-trips bloqueantes a Google), descomenta este bloque, pon los .woff2 en
   /fonts/, y borra vns_resource_hints + vns_async_fonts de functions.php.
   -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: "Lora";
  src: url("fonts/titulares-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/texto-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
*/


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color. #8F4E27 es la variante del acento que SÍ pasa AA
     sobre fondo claro: el acento de marca casi nunca lo hace. Verifícalos con
     herramientas/contraste.mjs ANTES de construir, no después. */
  --primario:        #1D4E5A;
  --primario-oscuro: #12333C;
  --acento:          #C4703E;
  --acento-texto:    #8F4E27;
  --fondo:           #FFFFFF;
  --fondo-alt:       #F7F3EC;
  --texto:           #22282B;
  --gris:            #5A6469;
  --linea:           rgba(0, 0, 0, .10);
  --linea-clara:     rgba(255, 255, 255, .16);

  /* Tipografía */
  --f-titulares: "Lora", Georgia, 'Times New Roman', serif;
  --f-texto:     "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometría */
  --radio:       14px;
  --radio-card:  20px;
  --radio-pill:  999px;
  --sombra:      0 10px 30px rgba(0, 0, 0, .08);
  --sombra-alta: 0 18px 48px rgba(0, 0, 0, .12);

  /* Espaciado */
  --e1: .5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2.5rem;
  --e5: 4rem;
  --e6: 6rem;

  --ancho:    1180px;
  --ancho-txt: 68ch;
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* [FIX 1] Sin esto, cualquier <img> con width por CSS y height por atributo HTML
   sale deformada. Le pasó al logo del footer y a la foto de About en Dilshire. */
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-titulares);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--e2);
  color: var(--primario);
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 var(--e2); }
p:last-child { margin-bottom: 0; }

a { color: var(--acento-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--primario); color: #fff;
  padding: var(--e2) var(--e3); z-index: 200;
  border-radius: 0 0 var(--radio) 0;
}
.salta-al-contenido:focus { left: 0; }


/* --------------------------------------------------------------------------
   Secciones y encabezados
   -------------------------------------------------------------------------- */
.seccion { padding: var(--e6) 0; }
.seccion--oscura { background: var(--primario); color: rgba(255,255,255,.92); }
.seccion--oscura h2,
.seccion--oscura h3 { color: #fff; }
.seccion--alt { background: var(--fondo-alt); }

.cabecera { max-width: var(--ancho-txt); margin-bottom: var(--e4); }
.cabecera--centro { margin-inline: auto; text-align: center; }

.cabecera .lede {
  font-size: 1.15rem;
  color: var(--gris);
  margin-top: var(--e2);
}
.seccion--oscura .cabecera .lede { color: rgba(255,255,255,.78); }

/* Filete dorado bajo el h2. Sustituye a los eyebrows: el registro de marca los
   marca como andamiaje, y el h2 con su regla basta para abrir una sección. */
.filete {
  width: 56px; height: 2px;
  background: var(--acento);
  border: 0; margin: 0 0 var(--e3);
}
.cabecera--centro .filete { margin-inline: auto; }


/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .78rem 1.6rem;
  border-radius: var(--radio-pill);
  font-family: var(--f-texto);
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primario { background: var(--primario); color: #fff; }
.btn--primario:hover { background: var(--primario-oscuro); color: #fff; }

.btn--fantasma { background: transparent; color: var(--primario); border-color: var(--linea); }
.btn--fantasma:hover { border-color: var(--primario); }

.seccion--oscura .btn--fantasma { color: #fff; border-color: var(--linea-clara); }
.seccion--oscura .btn--fantasma:hover { border-color: #fff; }

/* Fondo = acento-texto, no acento crudo. El acento de marca y un primario oscuro
   suelen quedar cerca en luminancia (dos tonos oscuros), así que texto encima de
   cualquiera de los dos puede reprobar AA. acento-texto ya viene verificado contra
   blanco en contraste.mjs, y el ratio es simétrico: si pasa como texto sobre claro,
   pasa igual como fondo con texto blanco encima. */
.btn--acento { background: var(--acento-texto); color: #fff; }
.btn--acento:hover { background: var(--primario); color: #fff; }


/* --------------------------------------------------------------------------
   BLOQUE 1 · Hero menú
   -------------------------------------------------------------------------- */
.sitio-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding: .85rem 0;
}

.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img, .marca svg { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--e3); }
.nav a {
  color: var(--primario);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--acento); }

/* El botón del nav necesita ganarle en especificidad a .nav a, o el texto sale
   invisible. Pasó exactamente eso en Dilshire v3. */
.nav a.btn--primario,
.nav a.btn--primario:hover { color: #fff; border-bottom-color: transparent; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .5rem .65rem; cursor: pointer;
  color: var(--primario);
}
.nav-toggle svg { width: 22px; height: 22px; }


/* --------------------------------------------------------------------------
   BLOQUE 2 · Hero banner

   [FIX 2] .hero-wrap lleva el ancho y el centrado; .hero-inner solo la rejilla.
   Cuando una sola clase hacía ambas cosas, heredaba el max-width de .wrap y el
   titular se auto-centraba en el viewport.
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--e6) 0 var(--e5);
  background: linear-gradient(180deg, var(--fondo-alt) 0%, var(--fondo) 100%);
}

.hero-wrap { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--e5);
  align-items: center;
}

.hero-texto { text-align: left; max-width: 34rem; }

.hero h1 { margin-bottom: var(--e3); }

/* El remate en itálica dorada del titular. Un solo diferenciador, no dos. */
.hero h1 em {
  font-style: italic;
  color: var(--acento-texto);
}

.hero .lede {
  font-size: 1.2rem;
  color: var(--gris);
  margin-bottom: var(--e4);
  max-width: 46ch;
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.hero-figura { position: relative; }
.hero-figura img {
  width: 100%;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-alta);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Cita superpuesta sobre la foto del hero. */
.hero-cita {
  position: absolute; left: -1.5rem; bottom: 2rem;
  max-width: 17rem;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e3);
  font-family: var(--f-titulares);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--primario);
  margin: 0;
}


/* --------------------------------------------------------------------------
   BLOQUE 3 · Misión, Visión y Valores
   -------------------------------------------------------------------------- */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e4);
  margin-bottom: var(--e5);
}

.mvv-bloque {
  border-top: 2px solid var(--acento);
  padding-top: var(--e3);
}
.mvv-bloque h3 { margin-bottom: var(--e1); }
.mvv-bloque p { color: rgba(255,255,255,.82); }

.valores {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e3);
  border-top: 1px solid var(--linea-clara);
  padding-top: var(--e4);
}
.valores li { margin: 0; }

.valores .valor-nombre {
  display: block;
  font-family: var(--f-titulares);
  font-size: 1.12rem;
  color: #fff;
  margin-bottom: .3rem;
}
/* El valor sin su frase operativa no dice nada. La frase es obligatoria. */
.valores .valor-que-significa {
  display: block;
  font-size: .97rem;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}


/* --------------------------------------------------------------------------
   BLOQUE 4 · Servicios

   Las tarjetas son del MISMO tamaño y estructura a propósito. Romper la simetría
   da jerarquía a un servicio sobre otro, y eso es una decisión de negocio del
   cliente, no nuestra.
   -------------------------------------------------------------------------- */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e3);
}

.servicio {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  padding: var(--e4) var(--e3) var(--e3);
  box-shadow: var(--sombra);
}

.servicio-icono {
  width: 34px; height: 34px;
  color: var(--acento-texto);
  margin-bottom: var(--e2);
}
.servicio-icono svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }

.servicio h3 { margin-bottom: var(--e1); }
.servicio p { color: var(--gris); font-size: .99rem; flex-grow: 1; }

/* Pie con las actividades económicas de la CSF que cubre la tarjeta. Es el patrón
   de Dilshire (9 servicios -> 4 tarjetas sin perder ninguno) y la prueba auditable
   de la regla "servicios ⊆ actividades declaradas". */
.servicio-cubre {
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid var(--linea);
  font-size: .84rem;
  color: var(--gris);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   BLOQUE 5 · Contacto
   -------------------------------------------------------------------------- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--e5);
  align-items: start;
}

.contacto-tarjeta {
  background: #fff;
  border-radius: var(--radio-card);
  padding: var(--e4);
  box-shadow: var(--sombra-alta);
  color: var(--texto);
}
.contacto-tarjeta h3 { color: var(--primario); }

.campo { margin-bottom: var(--e3); }
.campo label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--primario);
  margin-bottom: .35rem;
}
.campo .opcional { font-weight: 400; color: var(--gris); }

.campo input,
.campo textarea {
  width: 100%;
  font-family: var(--f-texto);
  font-size: 1rem;
  color: var(--texto);
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .7rem .85rem;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { background: #fff; }

.consentimiento {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .9rem; color: var(--gris);
  margin-bottom: var(--e3);
}
.consentimiento input { margin-top: .25rem; flex-shrink: 0; }

.form-nota { font-size: .87rem; color: var(--gris); margin-top: var(--e2); }

/* [FIX 3] Borde COMPLETO. Un border-left de 3px es un antipatrón que el detector
   determinista de impeccable caza; ya lo cazó una vez en Dilshire. */
.form-estado {
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--fondo-alt);
  padding: var(--e2) var(--e3);
  margin: 0 0 var(--e3);
  font-size: .95rem;
  color: var(--primario);
}
.form-estado[hidden] { display: none; }

/* El honeypot. Fuera de pantalla, no display:none: algunos bots ignoran los
   campos ocultos por display. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.datos-directos { list-style: none; margin: 0; padding: 0; }
.datos-directos li {
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linea-clara);
}
.datos-directos li:last-child { border-bottom: 0; }
/* rgba blanco fijo, no var(--acento): a .8rem esto es texto pequeño (no "grande"
   bajo WCAG), y el acento de marca contra un primario oscuro puede quedar en el
   mismo rango de luminancia que el propio primario. El blanco translúcido sí es
   perceptible como etiqueta secundaria y pasa AA sin depender del tono del cliente. */
.datos-directos .dato-label {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .62);
  margin-bottom: .2rem;
}
.datos-directos a { color: #fff; }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sitio-footer {
  background: var(--primario-oscuro);
  color: rgba(255,255,255,.75);
  padding: var(--e5) 0 var(--e3);
  font-size: .93rem;
}

.footer-inner {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  justify-content: space-between; align-items: flex-start;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea-clara);
}

.footer-marca img, .footer-marca svg { height: 40px; width: auto; margin-bottom: var(--e2); }

.footer-nav { display: flex; flex-wrap: wrap; gap: var(--e3); }
.footer-nav a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
  justify-content: space-between;
  padding-top: var(--e3);
  font-size: .85rem;
  color: rgba(255,255,255,.6);
}
.footer-legal a { color: rgba(255,255,255,.72); }

.wa-flotante {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: var(--sombra-alta);
}
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }


/* --------------------------------------------------------------------------
   Páginas legales
   -------------------------------------------------------------------------- */
.pagina-legal { padding: var(--e5) 0 var(--e6); }
.legal-tarjeta {
  background: #fff;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra);
  padding: var(--e5) clamp(1.5rem, 4vw, 3.5rem);
  max-width: 52rem;
  margin-inline: auto;
}
.legal-tarjeta h2 { margin-top: var(--e4); font-size: 1.4rem; }
.legal-tarjeta h2:first-of-type { margin-top: 0; }
.legal-tarjeta ul { padding-left: 1.2rem; }
.legal-tarjeta li { margin-bottom: .4rem; }
.legal-fecha { color: var(--gris); font-size: .9rem; }


/* --------------------------------------------------------------------------
   [FIX 4] Reveal por scroll, con failsafe

   El patrón .reveal{opacity:0} deja la sección EN BLANCO si el IntersectionObserver
   no dispara. Pasó literalmente en el primer render headless de Dilshire.

   Dos defensas: la clase solo se activa si hay JS (html.js), y main.js pone un
   temporizador de 1.8 s que revela todo pase lo que pase.
   -------------------------------------------------------------------------- */
.surge { opacity: 1; transform: none; }

html.js .surge {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
html.js .surge.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .surge { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-inner { gap: var(--e4); }
  .contacto-grid { gap: var(--e4); }
}

@media (max-width: 900px) {
  :root { --e6: 4rem; --e5: 3rem; }

  .hero-inner,
  .contacto-grid,
  .mvv-grid { grid-template-columns: 1fr; }

  .hero-figura { order: -1; max-width: 26rem; }
  .hero-cita { left: auto; right: 1rem; bottom: -1.5rem; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--linea);
    padding: var(--e2) 1.25rem var(--e3);
    box-shadow: var(--sombra);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--linea); }
  .nav a.btn { margin-top: var(--e2); justify-content: center; }
  .sitio-header { position: relative; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .servicios-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: var(--e3); }
  .contacto-tarjeta { padding: var(--e3); }
}

@media (max-width: 560px) {
  .hero-cita { position: static; margin-top: var(--e2); max-width: none; }
  .hero-acciones .btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   Impresión
   -------------------------------------------------------------------------- */
@media print {
  .sitio-header, .nav-toggle, .wa-flotante, .hero-figura, form { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .seccion--oscura { background: #fff; color: #000; }
  .seccion--oscura h2, .seccion--oscura h3 { color: #000; }
}