/* ==========================================================================
   verticales.css — Las tres puertas (home) y las landings de vertical
   (/tecnologia, /ventas, /finanzas).

   Se carga en la home (por las puertas) y en las tres landings.

   COLOR. Cada vertical expone cuatro variables y NADA se escribe en línea:
     --v          acento (bordes, puntos, filos) — nunca texto sobre claro
     --v-ink      el tono de texto sobre crema/blanco — AA verificado
     --v-on-dark  el tono de texto sobre petróleo  — AA verificado
     --v-tint     relleno suave para chips

   Los ratios, medidos contra #fff / #F4F1E9 (claro) y #0C1B26 (oscuro):
     tec  #345d7d → 6.98:1 blanco · 6.20:1 crema   |  #8FB6D4 → 8.17:1 oscuro
     ven  #236269 → 6.95:1 blanco · 6.17:1 crema   |  #7FD0CC → 9.86:1 oscuro
     fin  #3d7a5e → 5.07:1 blanco · 4.50:1 crema   |  #9BC9AE → 9.47:1 oscuro
   Los acentos crudos (#3D6E92 · #2F8C93 · #5E9E7E) dan 3.2–4.0:1 sobre blanco:
   sirven de borde y de punto, NO de texto. Por eso existe el par ink/on-dark.
   ========================================================================== */

/* ----- Paletas por vertical ------------------------------------------------ */
.puerta--tec, .vcruce__card--tec, .page-vertical--tec {
  --v: var(--c-tec); --v-ink: var(--c-tec-ink); --v-on-dark: #8FB6D4; --v-tint: var(--c-tint-tec);
}
.puerta--ven, .vcruce__card--ven, .page-vertical--ven {
  --v: var(--c-ven); --v-ink: var(--c-ven-ink); --v-on-dark: var(--c-teal-200); --v-tint: var(--c-tint-ven);
}
.puerta--fin, .vcruce__card--fin, .page-vertical--fin {
  --v: var(--c-fin); --v-ink: var(--c-fin-ink); --v-on-dark: #9BC9AE; --v-tint: var(--c-tint-fin);
}

/* Punto de color compartido. Sobre oscuro toma --v-on-dark; sobre claro, --v. */
.vdot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--v, var(--c-teal)); display: inline-block;
}
.section--dark .vdot, .hero .vdot, .vres .vdot { background: var(--v-on-dark, var(--c-teal-200)); }


/* ==========================================================================
   1 · LAS TRES PUERTAS (home)
   ========================================================================== */
.puertas__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 48px);
}
.puertas__title {
  font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.02em;
  margin: 0; max-width: 14ch;
}
.puertas__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.puertas__aside {
  margin: 0; max-width: 38ch; font-size: var(--fs-lead-sm); line-height: 1.6;
  color: var(--c-ink-body); flex: 0 1 auto;
}

.puertas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }

.puerta {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-top: 3px solid var(--v); border-radius: var(--r-md);
  padding: clamp(24px, 2.4vw, 30px);
  box-shadow: var(--e1);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.puerta:hover { transform: translateY(-4px); box-shadow: var(--e3); border-color: var(--c-border-line); border-top-color: var(--v); }
.puerta:active { transform: translateY(-1px); }

.puerta__tag {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-ink);
}
.puerta__title {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  color: var(--c-ink);
}
.puerta__sub {
  margin: 10px 0 20px; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-ink-body);
}
.puerta__chips { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.puerta__chip { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--c-ink); }
.puerta__chip-dot { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--v); opacity: .55; }
/* «y 3 más»: es un conteo, no una solución. Sin punto y en tono secundario,
   alineado con los demás (los otros chips llevan 4px de punto + 10px de gap). */
.puerta__chip--mas { padding-left: 14px; color: var(--c-muted); font-style: italic; }

.puerta__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--c-border); padding-top: 16px;
}
.puerta__count { font-size: var(--fs-sm); color: var(--c-muted); }
.puerta__cta { font-size: var(--fs-sm); font-weight: 600; color: var(--v-ink); }
.puerta:hover .puerta__cta { text-decoration: underline; text-underline-offset: 3px; }

.puertas__nota {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: clamp(16px, 2vw, 22px) 0 0; padding: 18px 24px;
  background: rgba(20, 34, 46, .045); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--c-ink-body);
}
.puertas__nota-cta { font-weight: 600; color: var(--c-teal); text-decoration: none; }
.puertas__nota-cta:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   2 · HERO DE LANDING
   ========================================================================== */
/* block + fit-content: .hero__eyebrow es inline-flex (la píldora), así que un
   back link inline se le pone AL LADO en desktop. Tiene que ir en su renglón. */
.vhero__back {
  display: block; width: fit-content; margin-bottom: 20px; text-decoration: none;
  font-size: var(--fs-sm); color: var(--c-on-dark-mut);
  transition: color .18s ease;
}
.vhero__back:hover { color: var(--c-on-dark); }

/* La columna de texto manda sobre la tarjeta de señales: con el reparto por
   defecto (~543px) el titular de Tecnología pedía 669px y cortaba «no.» a una
   línea suelta. Con 1.1fr son ~609px y entra completo.

   OJO con el min-width: components.css colapsa .hero__inner--split a 1 columna
   dentro de @media (max-width:900px), y esa regla tiene MENOS especificidad que
   esta (0,1,0 contra 0,2,0). Sin el guard, este reparto ganaría también en el
   celular y el hero se quedaría en dos columnas. Solo aplica sobre el colapso. */
@media (min-width: 901px) {
  .hero--vert .hero__inner--split { grid-template-columns: 1.1fr .9fr; }
}

/* Titular más contenido que el de la home: acá compite con una tarjeta al lado,
   no tiene el ancho completo. Tope 3.5rem = 56px (la línea más larga del set,
   «En internet, casi no.», mide 509px a ese tamaño y cabe en los 609px). */
.hero--vert .hero__title { font-size: clamp(2rem, 1.15rem + 3.1vw, 3.5rem); }

.hero--vert .hero__eyebrow-item { color: var(--v-on-dark); }
.hero--vert .hero__title em { color: var(--v-on-dark); }

/* .hero__textcta ya está definido en components.css (global) y sirve tal cual.
   NO se redefine acá: verticales.css también se carga en la home, así que
   pisarlo cambiaría el enlace «test de 60 s» del hero de la portada. */

/* El símbolo → en vez de un número de sección (igual que en /servicios, pero
   servicios.css no se carga acá). */
.sec-head__num--sym { font-size: 16px; }

/* Tarjeta «Señales de que te pasa» */
.vpains {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--edge-light);
}
.vpains__k {
  margin: 0 0 20px; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-dark-faint);
}
.vpains__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vpains__item {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: var(--fs-lead-sm); line-height: 1.5; color: var(--c-on-dark-soft);
}
.vpains__item .vdot { margin-top: .55em; width: 6px; height: 6px; }
.vpains__foot {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--c-on-dark-faint);
}


/* ==========================================================================
   3 · SOLUCIONES
   ========================================================================== */
.vsec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 44px);
}
.vsec-head__title {
  font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.02em; margin: 0; max-width: 18ch;
}
.vsec-head__aside {
  margin: 0; max-width: 32ch; font-size: var(--fs-sm); line-height: 1.55;
  color: var(--c-muted); text-align: right; flex: 0 1 auto;
}

/* --- 3.1 · La tarjeta de apertura (oscura, ancho completo) ------------------
   Rompe la monotonía de la grilla: con 7 tarjetas iguales el ojo no tiene dónde
   aterrizar. Esta es oscura sobre la sección crema, así que se lee como el
   titular del catálogo y no como «una más». Es también la que arregla la
   aritmética: 7 = 1 apertura + 2 filas de 3, sin tarjetas huérfanas. */
.vstar {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 3.4vw, 52px);
  background: var(--g-card); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg); color: var(--c-on-dark);
  padding: clamp(30px, 3.4vw, 46px);
  box-shadow: var(--e3);
  margin-bottom: clamp(14px, 1.6vw, 18px);
}
/* El chevron de marca, en el color de la vertical. currentColor lo hereda del
   contenedor, así que basta con teñir el <svg> — el path no lleva color propio. */
.vstar__deco {
  position: absolute; right: -30px; bottom: -42px; width: 210px; height: 210px;
  color: var(--v-on-dark); opacity: .12; pointer-events: none;
}

.vstar__main { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.vstar__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.vstar__badge {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-900); background: var(--v-on-dark);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.vstar__tipo {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-on-dark-faint);
}
.vstar__ico {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px;
  border-radius: var(--r-sm); color: var(--v-on-dark);
  background: rgba(255, 255, 255, .07); box-shadow: var(--edge-light);
}
.vstar__name {
  margin: 0 0 12px; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--c-on-dark);
}
.vstar__desc { margin: 0 0 16px; font-size: var(--fs-lead-sm); line-height: 1.5; color: var(--c-on-dark-soft); }
.vstar__para {
  margin: 0 0 26px; font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; line-height: 1.5; color: var(--v-on-dark);
}
.vstar__cta { margin-top: auto; }

.vstar__side { position: relative; border-left: 1px solid rgba(255, 255, 255, .14); padding-left: clamp(24px, 2.6vw, 40px); }
.vstar__side-k {
  margin: 0 0 18px; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-dark-faint);
}


/* --- 3.2 · La grilla ------------------------------------------------------- */
.vplanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 18px); }

.vplan {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-top: 3px solid var(--v); border-radius: var(--r-sm);
  padding: clamp(22px, 2.2vw, 26px); box-shadow: var(--e1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Mismo gesto que .puerta en la home: quien viene de allá reconoce la tarjeta. */
.vplan:hover { transform: translateY(-4px); box-shadow: var(--e3); border-color: var(--c-border-line); border-top-color: var(--v); }

.vplan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.vplan__ico {
  display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: var(--r-xs); color: var(--v-ink); background: var(--v-tint);
}
.vplan__name { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; }
.vplan__tipo {
  flex: 0 0 auto; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted); white-space: nowrap;
}
.vplan__desc { margin: 0 0 18px; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-ink-body); }

/* auto arriba: la lista se pega al fondo y todas las tarjetas de la fila
   alinean su bloque «incluye» aunque el título ocupe una o dos líneas. */
.vplan__incluye { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vplan__incluye li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; }
.vplan__check { flex: 0 0 auto; margin-top: .28em; color: var(--v-ink); }
.vplan__incluye--star { gap: 13px; }
.vplan__incluye--star li { font-size: var(--fs-sm); color: var(--c-on-dark-soft); }
.vplan__incluye--star .vplan__check { color: var(--v-on-dark); }

/* «Ideal si…»: el espejo donde el visitante se reconoce. Va al pie y en serif
   itálica — es la voz del consultor, no otra viñeta del entregable. */
.vplan__para {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--c-border);
  font-family: var(--font-serif); font-style: italic;
  font-size: .95rem; line-height: 1.5; color: var(--c-muted);
}
.vplan__cta {
  margin-top: 14px; align-self: flex-start;
  font-size: var(--fs-sm); font-weight: 600; color: var(--v-ink); text-decoration: none;
}
.vplan__cta:hover { text-decoration: underline; text-underline-offset: 3px; }

.vplanes__nota {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: clamp(16px, 2vw, 22px) 0 0; padding: 20px 26px;
  background: rgba(20, 34, 46, .045); border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--c-ink-body);
}
.vplanes__nota strong { color: var(--c-ink); }
.vplanes__nota-cta { font-weight: 600; color: var(--c-teal); text-decoration: none; white-space: nowrap; }
.vplanes__nota-cta:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   3.3 · SERVICIOS SUELTOS (hoy: el bloque contable de Finanzas)
   Deliberadamente NO son tarjetas: arriba cada tarjeta es un proyecto con
   alcance y entregable, y estos son trabajo por período o por informe. Una
   columna con filo de color y lista apretada se lee como índice, que es lo que
   son — y de paso le cambia la textura a la página después de 7 tarjetas.
   ========================================================================== */
.vsvc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }

.vsvc__grupo { border-top: 2px solid var(--v); padding-top: 20px; }
.vsvc__grupo-t {
  display: flex; align-items: center; gap: 11px; margin: 0 0 18px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
}
.vsvc__grupo-ico {
  display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: var(--r-xs); color: var(--v-ink); background: var(--v-tint);
}
.vsvc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.vsvc__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--c-ink-body);
}
.vsvc__list .vdot { margin-top: .5em; width: 5px; height: 5px; }


/* ==========================================================================
   4 · EL RESULTADO (panel oscuro)
   ========================================================================== */
.vres {
  background: var(--g-band); border-radius: var(--r-lg);
  padding: clamp(34px, 5vw, 60px); color: var(--c-on-dark);
  box-shadow: var(--e2);
}
.sec-head--on-dark .sec-head__num  { color: var(--c-on-dark-faint); }
.sec-head--on-dark .sec-head__label { color: var(--c-on-dark-faint); }
.sec-head--on-dark .sec-head__line { background: rgba(255, 255, 255, .22); }

/* El `color` NO es decorativo: base.css declara `h1,h2,h3,h4 { color: var(--c-ink) }`,
   y una regla directa le gana SIEMPRE a la herencia. Sin esta línea el titular
   heredaba petróleo casi negro sobre el panel oscuro —1.08:1, invisible— y solo
   se leía el <em>, que sí trae color propio. Cualquier titular sobre superficie
   oscura tiene que declarar su color a mano. */
.vres__title {
  margin: 0 0 clamp(30px, 4vw, 44px); font-size: var(--fs-h2);
  line-height: 1.08; letter-spacing: -.025em; max-width: 20ch;
  color: var(--c-on-dark);
}
.vres__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--v-on-dark); }

.vres__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.vres__item { border-top: 2px solid var(--v-on-dark); padding-top: 18px; }
.vres__item-t { margin: 0 0 10px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
.vres__item-d { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-on-dark-mut); }


/* ==========================================================================
   5 · CRUCE A LAS OTRAS DOS
   ========================================================================== */
.vcruce__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 48px); margin-bottom: clamp(22px, 2.6vw, 30px);
}
.vcruce__title { margin: 0; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; max-width: 26ch; }
.vcruce__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.vcruce__all { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; color: var(--c-teal); text-decoration: none; }
.vcruce__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.vcruce__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 18px); }

.vcruce__card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-left: 3px solid var(--v); border-radius: var(--r-sm);
  padding: clamp(22px, 2.2vw, 28px); text-decoration: none; color: inherit;
  box-shadow: var(--e1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.vcruce__card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.vcruce__card-body { display: flex; flex-direction: column; gap: 8px; }
.vcruce__card-tag {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-ink);
}
.vcruce__card-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.vcruce__card-count { font-size: var(--fs-sm); color: var(--c-muted); }
.vcruce__card-arrow { flex: 0 0 auto; font-size: 1.4rem; color: var(--v); transition: transform .18s ease; }
.vcruce__card:hover .vcruce__card-arrow { transform: translateX(4px); }


/* ==========================================================================
   6 · RESPONSIVE
   Los mismos cortes que responsive.css (960 / 820 / 560) para que todo el
   sitio quiebre en los mismos puntos.
   ========================================================================== */
@media (max-width: 960px) {
  .puertas__grid { grid-template-columns: 1fr; }
  .vres__grid    { grid-template-columns: 1fr; gap: 26px; }
  /* Tres columnas a menos de 960px dejan las tarjetas en ~290px y el titular de
     «Formalización y orden contable» cae a tres líneas. Bajan a dos. */
  .vplanes       { grid-template-columns: repeat(2, 1fr); }
  .vsvc          { grid-template-columns: repeat(2, 1fr); }
  /* La apertura se apila: el «Qué incluye» pasa de columna lateral a bloque de
     abajo, así que su separador deja de ser vertical y se vuelve horizontal. */
  .vstar         { grid-template-columns: 1fr; gap: 28px; }
  .vstar__side   { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding-left: 0; padding-top: 26px; }
  .vstar__cta    { margin-top: 0; }
}

@media (max-width: 820px) {
  .puertas__head, .vsec-head, .vcruce__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .puertas__aside, .vsec-head__aside { max-width: 100%; text-align: left; }
  .vplanes       { grid-template-columns: 1fr; }
  .vsvc          { grid-template-columns: 1fr; gap: 30px; }
  .vcruce__grid  { grid-template-columns: 1fr; }
  .puertas__title, .vsec-head__title, .vres__title { max-width: 100%; }
  /* El hero parte apilado: la tarjeta de señales va bajo el titular, no al lado. */
  .vpains { order: 2; }
}

@media (max-width: 560px) {
  .puerta, .vplan, .vcruce__card { padding: 22px 20px; }
  .vres { padding: 30px 22px; }
  .vstar { padding: 26px 20px; }
  .vstar__deco { width: 150px; height: 150px; right: -24px; bottom: -30px; }
  .vstar__cta { width: 100%; text-align: center; }
  .vcruce__card { gap: 14px; }
  .puertas__nota, .vplanes__nota { padding: 16px 18px; }
}

/* Sin JS el reveal no dispara: el contenido tiene que verse igual. Lo mismo que
   hace animations.css con .reveal en el resto del sitio. */
@media (prefers-reduced-motion: reduce) {
  .puerta, .vplan, .vcruce__card, .vcruce__card-arrow { transition: none; }
  .puerta:hover, .vplan:hover, .vcruce__card:hover { transform: none; }
}