/* ==========================================================================
   Capa de pulido visual (2026-10-25), probada en la copia SOS-WEB-V3
   --------------------------------------------------------------------------
   Se carga después de v2.css y no cambia estructura ni direcciones: solo
   detalles. Los únicos textos tocados son dos enlaces del pie (i18n). Criterios tomados de las guías de Impeccable (Paul Bakaus)
   y de los skills de diseño de Emil Kowalski, revisados el 2026-10-25:
   - movimiento corto (≤ 200 ms) con curva ease-out fuerte, nunca ease-in;
   - respuesta al presionar los botones;
   - superficies del navegador con la paleta (selección, foco, cursor);
   - sin texto con degradado ni franjas gruesas de color a un costado;
   - títulos balanceados y párrafos sin palabras huérfanas.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 120ms;
  --dur-ui: 180ms;
  --v3-tint: #f3f7fc;
  --v3-tint-line: #d6e3f5;
  --v3-shadow-lift: 0 1px 2px rgba(11, 42, 82, 0.06), 0 8px 24px -12px rgba(11, 42, 82, 0.22);
}

/* --- Superficies del navegador ------------------------------------------ */
::selection { background: #cfe1fa; color: #0b2a52; }
html { scrollbar-color: #b9c6d6 transparent; }
input, textarea, select { caret-color: var(--v2-blue); accent-color: var(--v2-blue); }
:focus-visible { outline: 3px solid #1767e8; outline-offset: 3px; border-radius: 4px; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* --- Tipografía --------------------------------------------------------- */
h1, h2, h3, .v2-hero h1 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.article-body p, .service-content p { max-width: 70ch; }

/* Texto con degradado → color sólido: el énfasis viene del peso y el tamaño. */
html .section-title h2,
html .about-stats .stat .stat-num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--v2-navy);
}
html .stat .stat-num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #ffffff;
}
/* En las páginas de fondo oscuro el título va en el color de texto del tema. */
html .tema-oscuro main .section-title h2 { color: var(--color-text); }

/* --- Botones: transición corta y respuesta al presionar -------------------- */
.v2-btn, .btn, .v2-wa-float {
  transition:
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.v2-btn:active, .btn:active, .v2-wa-float:active { transform: scale(0.97); }
.v2-btn-red:hover, .v2-btn-wa:hover { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45); }

/* --- Menú desplegable: aparece desde arriba, sin saltos ------------------ */
@media (min-width: 1181px) {
  .v2-mega:not([hidden]) > .v2-w {
    transform-origin: top center;
    animation: v3-drop var(--dur-ui) var(--ease-out);
  }
}
@keyframes v3-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.v2-mtop > li > button::after { transition: transform var(--dur-ui) var(--ease-out); }

/* --- Tarjetas de servicio: elevación sutil al pasar el mouse -------------- */
.v2-svc {
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.v2-svc:hover { box-shadow: var(--v3-shadow-lift); }

/* --- Recuadros: sin franja gruesa al costado; fondo tenue y borde fino ----
   Usan las variables del tema de cada página: las de empresas tienen fondo
   oscuro (.tema-oscuro main) y ahí el recuadro debe seguir siendo oscuro. */
html .audience-note,
html .audience-failure,
html .article-service-links,
html .article-box,
html .testimonial-card,
html .form-prefill-note,
html .simulator-result {
  border: 1px solid var(--color-border-light, var(--v3-tint-line));
  border-radius: 8px;
}
html .article-service-links,
html .article-box,
html .form-prefill-note,
html .simulator-result { background: var(--v3-tint); border-color: var(--v3-tint-line); }
html .tema-oscuro main .audience-note,
html .tema-oscuro main .audience-failure { border-color: var(--color-border-light); }
html .v2-ans {
  border: 1px solid var(--v3-tint-line);
  border-radius: 8px;
  background: var(--v3-tint);
  color: var(--v2-ink);
}

/* --- Íconos dibujados (partials/icons.php) en lugar de emojis -------------
   Mismo trazo y tamaño en todo el sitio; el color sale del texto. El círculo
   con degradado pasa a un recuadro tenue con el ícono en azul de la marca. */
.sos-icon { display: block; width: 28px; height: 28px; flex: none; }
html .service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #e8f0fb;
  color: var(--v2-blue);
}
html .resource-card__icon { color: var(--v2-blue); background: #e8f0fb; }
html .tema-oscuro main .service-card__icon {
  background: rgba(156, 196, 247, 0.1);
  color: #9cc4f7;
}
li > a > .sos-icon:first-child {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 4px;
  color: var(--v2-blue);
}

/* --- Páginas de empresas (.tema-oscuro): azul marino de la marca ----------
   Antes usaban violeta-índigo con texto lila y parecían de otro sitio. Se
   mantiene el fondo oscuro, pero con el navy de SOS (#0b2a52). Contrastes:
   #eef3fa y #b8c8dd sobre #0c2546 / #091e3b superan 4,5:1 (WCAG AA). */
html .tema-oscuro main {
  --color-text: #eef3fa;
  --color-text-muted: #b8c8dd;
  --color-bg: #0c2546;
  --color-bg-alt: #091e3b;
  --color-border: #24497f;
  --color-border-light: #1a3a66;
  --color-link: #9cc4f7;
  --color-link-hover: #cfe1fa;
  --color-cyan-dark: #9cc4f7;
  background: #071a33;
}
html .tema-oscuro main .service-banner {
  background: linear-gradient(135deg, #071a33 0%, #0b2a52 60%, #0e3a6e 100%);
  border-bottom-color: #1a3a66;
}
html .tema-oscuro main .final-cta {
  background: linear-gradient(135deg, #091e3b 0%, #0b2a52 100%);
}
html .tema-oscuro main .faq-item summary::after { color: #9cc4f7; }

/* --- Franja de cifras de la portada ---------------------------------------
   Antes: cuatro columnas iguales con número grande, etiqueta chica y líneas
   divisorias (la plantilla "métricas" más repetida). Ahora: una banda azul
   marino que continúa el bloque principal, con cada cifra y su texto en la
   misma línea, como una frase. Mismos textos, sin agregar afirmaciones. */
html .v2-stats { background: var(--v2-navy); border-bottom: none; }
html .v2-stats .v2-w {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 44px;
  padding-block: 20px;
}
html .v2-stats div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  border-left: none;
}
html .v2-stats b { color: #ffffff; font-size: 1.45rem; letter-spacing: -0.01em; }
html .v2-stats span { color: #b8c8dd; font-size: 0.95rem; }
@media (max-width: 600px) {
  html .v2-stats .v2-w { justify-content: flex-start; gap: 8px 24px; }
}

/* --- Barra superior en celular: el "+58" ya no se corta --------------------
   Emergencias, teléfono y tres idiomas no entraban en 375 px y el teléfono
   quedaba cortado por la izquierda. En pantallas angostas los idiomas
   muestran solo la bandera; el texto (ES/EN/PT) queda para lectores de
   pantalla, y cada enlace conserva su título. */
@media (max-width: 440px) {
  html .v2-util .lang-switcher__item span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html .v2-util .lang-switcher__item svg { width: 20px; height: 14px; }
  html .v2-util-r { gap: 8px; }
}

/* --- Jerarquía de títulos en páginas de servicio y de empresas ------------
   Medido en Data centers: título de sección 24 px contra 21 px de las
   tarjetas (casi iguales), texto de tarjetas en 13 px y título de página
   en 32 px. Ahora cada nivel se distingue a simple vista. */
html main .service-banner h1,
html main .blog-banner h1 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
html main section > .container > h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
html .audience-failure p { font-size: 0.95rem; line-height: 1.55; }

/* --- Tarjetas: explicación ≠ navegación ------------------------------------
   Antes todas eran iguales: ícono arriba, título y texto centrados, y todas
   "saltaban" 10 px al pasar el mouse aunque no fueran enlaces.
   - Tarjetas que explican (.grid-services): ícono a la izquierda y texto
     alineado a la izquierda, en dos columnas; se leen como una lista.
   - Tarjetas que llevan a otra página (.service-card-link): siguen centradas
     y son las únicas que se elevan, apenas, al pasar el mouse. */
html .grid-services {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
html .grid-services .service-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  text-align: left;
  padding: 24px 26px;
}
html .grid-services .service-card__icon { margin: 0; grid-row: span 2; }
html .grid-services .service-card h3 { margin: 4px 0 6px; font-size: 1.15rem; }
html .grid-services .service-card p { margin: 0; }
@media (max-width: 760px) {
  html .grid-services { grid-template-columns: minmax(0, 1fr); }
}
html .card:not(a):hover { transform: none; box-shadow: var(--shadow-md); }
html a.card { transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
html a.card:hover { transform: translateY(-3px); }
html .audience-callout__icon .sos-icon { width: 26px; height: 26px; color: var(--v2-amber); }

/* --- Pie de página: más aire y nada tapado ---------------------------------
   El botón flotante de WhatsApp tapaba el RIF al final de la página; la fila
   legal ahora deja espacio debajo. Columnas con más separación y renglones
   más cómodos de leer. */
html .v2-footer { font-size: 0.93rem; line-height: 1.5; }
html .v2-footer .v2-cols { gap: 32px; padding-block: 56px 36px; }
html .v2-footer h3 { font-size: 0.98rem; letter-spacing: 0.01em; margin-bottom: 14px; }
html .v2-footer ul { gap: 9px; }
html .v2-footer li strong { color: #ffffff; font-weight: 700; font-size: 0.86rem; }
html .v2-footer .v2-legal .v2-w { padding-block: 16px 84px; color: #9fb2cc; }

/* --- Estados de botones y formularios ----------------------------------- */
html .btn.is-loading::after { inset: 0; margin: auto; }
html .btn:disabled,
html .btn[disabled],
html .v2-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
html .form-error { font-size: 0.86rem; font-weight: 600; }
html .form-control[aria-invalid="true"] { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14); }
html .form-success { border-radius: 8px; }

/* --- Página de contacto ---------------------------------------------------
   Íconos dibujados en la columna "Contacto directo" y el botón de envío con
   el mismo rojo sólido del resto del sitio (antes: degradado y letra chica). */
html .contact-info-list .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8f0fb;
  color: var(--v2-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
html .contact-info-list .icon .sos-icon { width: 20px; height: 20px; }
/* Pasos de la postulación: número sencillo en lugar del emoji 1️⃣ 2️⃣ 3️⃣. */
html .contact-info-list .icon--num { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
html #contact-submit,
html #job-submit {
  background: var(--v2-red);
  font-size: 1.02rem;
  font-weight: 700;
  padding-block: 14px;
  border-radius: 4px;
}
html #contact-submit:hover,
html #job-submit:hover { background: var(--v2-red-dark); }
/* Etiquetas de 13 px y botón de WhatsApp de 13 px: se leían como letra chica. */
html .form-label { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
html .contact-info-card .btn { font-size: 1rem; padding-block: 13px; }

/* --- Formularios: foco claro en los campos ------------------------------- */
.form-control {
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.form-control:focus-visible,
.form-control:focus {
  outline: none;
  border-color: var(--v2-blue);
  box-shadow: 0 0 0 3px rgba(23, 103, 232, 0.22);
}

/* --- Preguntas frecuentes: el signo gira en lugar de saltar --------------- */
.v2-faq summary::after { transition: transform var(--dur-ui) var(--ease-out); }

/* --- Movimiento reducido: todo instantáneo -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .v2-btn:active, .btn:active, .v2-wa-float:active { transform: none; }
}

/* --- Logo en el pie (versión blanca, 2026-10-25) --------------------------- */
html .v2-legal-marca { display: inline-flex; align-items: center; gap: 14px; }
html .v2-legal-marca img { height: 40px; width: auto; display: block; }