/* =========================================================
   Drovitech — estilos base
   Paleta APROXIMADA desde capturas del sitio real; ajustar
   --purple / --pink / --purple-deep a los hex exactos de marca
   cuando estén disponibles.
   ========================================================= */

:root {
  --purple: #3C096B;
  --purple-dark: #2C0750;
  --purple-deep: #1D0436;
  --purple-deeper: #12021F;
  /* Morado específico de botones (distinto del morado de marca de arriba) */
  --purple-btn: #5B24DB;
  --purple-btn-dark: #4A1DB0;
  --pink: #EC4899;
  --ink: #241242;
  --muted: #6b7280;
  --bg-light: #F7F5FC;
  --white: #ffffff;
  --black: #0B0B12;
  --border-soft: rgba(108, 43, 217, 0.18);
  --shadow-soft: 0 20px 50px -25px rgba(36, 18, 66, 0.35);
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Recorta en cada <section> (no en html/body: cualquier ancestro del
   header con overflow != visible le rompe el position:sticky) el
   scroll horizontal fantasma que meten las animaciones de entrada con
   translateX (".reveal.fh-from-left/right", el "converge" de planes,
   las filas de "Tipos de proyecto", etc.): mientras un elemento así
   todavía no se reveló (está transformado fuera de pantalla, esperando
   a entrar en el viewport), esa posición transformada sigue sumando al
   ancho scrolleable de TODA la página, sin importar en qué sección
   esté ni si ya se scrolleó hasta ahí — en mobile real se sentía como
   poder arrastrar la página entera hacia un costado y dejar una franja
   en blanco. Un <section> no es ancestro del header, así que no tiene
   este problema. */
section { overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); margin: 0; line-height: 1.2; color: var(--ink); }
p { margin: 0; color: var(--muted); line-height: 1.7; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--purple-btn); color: #fff; box-shadow: 0 14px 30px -12px rgba(91,36,219,.55); }
.btn-primary:hover { background: var(--purple-btn-dark); }
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 14px 30px -12px rgba(236,72,153,.55); }
.btn-pink:hover { filter: brightness(1.05); }
.btn-outline { border-color: var(--purple-btn); color: var(--purple-btn); background: transparent; }
.btn-outline:hover { background: var(--purple-btn); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.btn-outline-light:hover { background: #fff; color: var(--purple-deep); }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ---------- Topbar ---------- */
.topbar { background: var(--black); color: rgba(255,255,255,.75); font-size: 12.5px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.topbar-tagline { opacity: .85; }
.topbar-social { display: flex; align-items: center; gap: 14px; }
.topbar-social a { color: rgba(255,255,255,.75); font-size: 12px; transition: color .15s; }
.topbar-social a:hover { color: var(--pink); }

/* ---------- Selector de idioma (header principal) ---------- */
/* Banderas en vez de texto "ES/EN": el estado activo/inactivo ya no
   se puede marcar con color de texto, así que se usa opacidad +
   un anillo de color alrededor de la bandera activa. */
.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang-switch a {
  display: flex; padding: 2px; border-radius: 5px; opacity: .5;
  transition: opacity .18s ease, background .18s ease, box-shadow .18s ease;
}
.lang-switch a:hover { opacity: .8; background: rgba(36,18,66,.06); }
.lang-switch a.active { opacity: 1; box-shadow: 0 0 0 2px var(--purple-btn); }
.lang-flag { display: block; border-radius: 2px; }

.site-header.is-transparent .lang-switch a:hover { background: rgba(255,255,255,.16); }
.site-header.is-transparent .lang-switch a.active { box-shadow: 0 0 0 2px #fff; }
.site-header.is-transparent.scrolled .lang-switch a:hover { background: rgba(36,18,66,.06); }
.site-header.is-transparent.scrolled .lang-switch a.active { box-shadow: 0 0 0 2px var(--purple-btn); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(36,18,66,.06);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }

/* Dos imágenes reales en vez del truco filter:brightness(0) de antes:
   logo-oscuro.png (a color, para header sólido) queda en flujo normal
   y define el tamaño del link; logo.png (blanco, para el header
   transparente sobre el hero) se superpone en position:absolute y
   cambian de opacidad entre sí según el estado del header. */
.logo { position: relative; display: flex; align-items: center; }
.logo-img { height: 40px; width: auto; display: block; transition: opacity .25s ease; }
/* logo.png (blanca) está diagramada más "ancha" que logo-oscuro.png dentro
   de su propio lienzo (proporción real de letras distinta entre los dos
   archivos), así que a igual height se ve más grande/estirada que la
   oscura. 35px iguala el ANCHO renderizado de ambas sin deformar ninguna
   (solo reescala, no estira un eje más que el otro). */
.logo-img-light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; height: 35px; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-weight: 600; font-size: 14.5px; color: #000; padding: 6px 2px; position: relative; transition: color .25s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px;
  background: var(--purple-btn); opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { opacity: 1; transform: translateY(0); }
.nav-links a.active { color: #000; }
.nav-close { display: none; }

.burger { display: none; background: none; border: none; color: var(--ink); padding: 6px; }

/* ---------- Mega-menú de Servicios ---------- */
.nav-item { position: relative; display: flex; align-items: center; align-self: stretch; }
.mega-trigger { display: inline-flex; align-items: center; gap: 6px; }
.mega-trigger svg { transition: transform .25s ease; }
.nav-item:hover .mega-trigger svg, .nav-item:focus-within .mega-trigger svg { transform: rotate(180deg); }

.mega-menu {
  /* Sin margin-top: cualquier hueco entre el trigger y el menú es una
     "zona muerta" — el cursor sale de .nav-item:hover al cruzarla y el
     menú se cierra antes de llegar. El acento de arriba (border-top)
     ya separa visualmente el menú del header sin necesidad de un gap. */
  position: absolute; top: 100%; left: 50%; margin-top: 0;
  transform: translateX(-50%) scaleY(.92) translateY(-6px); transform-origin: top;
  width: 520px; max-width: min(520px, 90vw);
  background: #fff; border-radius: 18px; border-top: 3px solid var(--purple-btn);
  box-shadow: 0 28px 50px -20px rgba(36,18,66,.35);
  padding: 22px 22px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s, transform .28s cubic-bezier(.2,.8,.3,1.1);
  z-index: 200;
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) scaleY(1) translateY(0);
}
.mega-menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.mega-item {
  /* padding/color en !important: .mega-item vive dentro de .nav-links,
     así que sin esto la regla genérica ".nav-links a" (más específica
     por el selector de tag "a") pisa este padding con el suyo, propio
     de los links de una sola línea del menú principal. */
  display: flex; align-items: center; gap: 10px; padding: 9px 8px !important; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ink) !important; transition: background .18s ease, color .18s ease;
}
.mega-item::after { display: none; }
.mega-item-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(91,36,219,.1); color: var(--purple-btn);
}
.mega-item:hover, .mega-item.active { background: var(--bg-light); color: var(--purple-btn) !important; }
.mega-menu-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding: 16px 4px 20px; border-top: 1px solid rgba(36,18,66,.08);
}
.mega-menu-footer-text h6 { font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.mega-menu-footer-text p { font-size: 12px; color: var(--muted); margin: 0; }
/* El botón de WhatsApp reutiliza .btn.btn-primary.btn-sm, pero al vivir
   dentro de .nav-links también hereda su color/padding/subrayado (ver
   nota de .mega-item arriba) — se anulan explícitamente para que se
   vea igual que cualquier otro botón primario del sitio. */
.mega-menu-footer .btn {
  flex-shrink: 0; padding: 10px 20px !important; font-size: 13.5px; color: #fff !important;
}
.mega-menu-footer .btn::after { display: none; }

/* Header transparente sobre hero oscuro (home / páginas con banner) */
.site-header.is-transparent {
  position: absolute; top: 34px; left: 0; right: 0; width: 100%;
  background: transparent; border-bottom-color: transparent;
}
.site-header.is-transparent .logo-img-dark { opacity: 0; }
.site-header.is-transparent .logo-img-light { opacity: 1; }
.site-header.is-transparent .nav-links a { color: #fff; }
.site-header.is-transparent .nav-links a.active { color: #E9D5FF; }
.site-header.is-transparent .burger { color: #fff; }
.site-header.is-transparent.scrolled {
  position: sticky; top: 0; background: #fff; box-shadow: var(--shadow-soft);
  border-bottom-color: rgba(36,18,66,.06);
}
.site-header.is-transparent.scrolled .logo-img-dark { opacity: 1; }
.site-header.is-transparent.scrolled .logo-img-light { opacity: 0; }
.site-header.is-transparent.scrolled .nav-links a { color: #000; }
.site-header.is-transparent.scrolled .nav-links a.active { color: #000; }
.site-header.is-transparent.scrolled .burger { color: var(--ink); }

/* ---------- Secciones genéricas ---------- */
.section { padding: 90px 0; }
.section-light { background: var(--bg-light); }
.section-head { max-width: 640px; margin: 0 auto 50px; text-align: center; }
.eyebrow {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 10px;
}
.section-head h2 { font-size: 34px; color: var(--purple); margin-bottom: 14px; }
.section-head p { font-size: 16px; }

/* ---------- Hero (home) ---------- */
.hero-full {
  position: relative; overflow: hidden; color: #fff;
  min-height: 100vh; display: flex; align-items: center;
  padding: 130px 0 190px;
  background-image:
    linear-gradient(135deg, rgba(60,9,107,.86), rgba(29,4,54,.9)),
    url('../img/Inicio-header.jpg');
  background-size: cover;
  background-position: center;
}
.hero-full .wrap {
  position: relative; z-index: 2; max-width: 760px;
  margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff;
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(236,72,153,.25); }
.hero-full h1 { font-size: 46px; color: #fff; line-height: 1.18; text-align: center; }
.hero-full h1 .accent { color: #E9D5FF; }
.hero-full .sub { font-size: 17px; color: rgba(255,255,255,.78); max-width: 560px; text-align: center; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Franja de stats flotante ---------- */
.stats-band-wrap { position: relative; z-index: 3; margin-top: -70px; }
.stats-band {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-soft);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 30px 20px; gap: 10px;
}
.stat-block { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 10px; }
.stat-block + .stat-block { border-left: 1px solid rgba(36,18,66,.08); }
.stat-icon { color: var(--purple); }
.stat-block.is-pink .stat-icon { color: var(--pink); }
.stat-val { font-family: var(--font-head); font-size: 32px; font-weight: 800; color: var(--purple); }
.stat-block.is-pink .stat-val { color: var(--pink); }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- Confianza (foto + checklist) ---------- */
.confianza-text { display: flex; flex-direction: column; justify-content: center; }
.confianza-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
/* Tamaño medio (no estira para igualar la altura del texto) y marco
   con forma propia: una esquina bien redondeada (en vez del rectángulo
   parejo de antes) + un panel rosa desfasado detrás, asomando abajo a
   la derecha — efecto "tarjetas apiladas" en vez del borde plano. */
.confianza-photo { position: relative; max-width: 420px; margin: 0 auto; }
.confianza-photo::before {
  content: ''; position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px;
  background: linear-gradient(135deg, var(--pink), var(--purple-btn));
  border-radius: 40px 120px 40px 40px; z-index: 0;
}
.confianza-photo img {
  position: relative; z-index: 1; display: block; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: 40px 120px 40px 40px; box-shadow: var(--shadow-soft);
}
.confianza-list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 26px; }
.confianza-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 12px; border: 1px solid var(--border-soft);
  font-weight: 700; font-size: 14px; color: var(--ink);
}
.confianza-item .icon-circle {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--purple); color: #fff; flex-shrink: 0;
}
.confianza-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--purple); color: #fff; padding: 16px 22px; border-radius: 14px;
  font-weight: 800; font-size: 15px; box-shadow: 0 14px 30px -14px rgba(108,43,217,.55);
}

/* ---------- Grid de servicios ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1.5px solid var(--border-soft); border-radius: 18px;
  padding: 30px 26px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .22s ease, border-color .3s ease;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 46px -20px rgba(36,18,66,.28);
  border-color: rgba(91,36,219,.35);
}
.service-card .icon-box {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(108,43,217,.1); color: var(--purple);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.service-card:hover .icon-box { transform: scale(1.12) rotate(-6deg); }
.service-card h3 { font-size: 18px; color: var(--ink); }
.service-card p { font-size: 14px; }
.service-card .cta-pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 4px; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--purple-btn); color: #fff; transition: background .2s, transform .2s;
}
.service-card .cta-pill:hover { background: var(--purple-btn-dark); transform: translateX(3px); }
.service-card .cta-pill svg { transition: transform .25s ease; }
.service-card .cta-pill:hover svg { transform: translateX(3px); }
.service-card.is-featured { background: var(--purple); border-color: var(--purple); }
.service-card.is-featured .icon-box { background: rgba(255,255,255,.16); color: #fff; }
.service-card.is-featured h3, .service-card.is-featured p { color: #fff; }
.service-card.is-featured p { color: rgba(255,255,255,.85); }
.service-card.is-featured .cta-pill { background: #fff; color: var(--purple-btn); }
.service-card.is-featured .cta-pill:hover { background: var(--bg-light); }
@keyframes featuredGlow {
  0%, 100% { box-shadow: 0 14px 30px -14px rgba(60,9,107,.4); }
  50% { box-shadow: 0 20px 42px -10px rgba(91,36,219,.6); }
}
.service-card.is-featured { animation: featuredGlow 3.2s ease-in-out infinite; }
.service-card.is-featured:hover { animation-play-state: paused; }
/* Brillo que recorre la tarjeta destacada de vez en cuando: una franja
   clara diagonal que cruza rápido y luego queda fuera de vista (18% de
   los 3.6s del ciclo) hasta la siguiente pasada. */
.service-card.is-featured::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: featuredShimmer 3.6s ease-in-out infinite;
}
.service-card.is-featured:hover::after { animation-play-state: paused; }
@keyframes featuredShimmer {
  0% { left: -60%; }
  18% { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card.is-featured { animation: none; }
  .service-card.is-featured::after { animation: none; display: none; }
}

/* ---------- Hosting y Dominio: planes con foto + número contorneado ----------
   Foto grande con el número "01/02/03" en trazo hueco superpuesto abajo,
   título de color debajo con una rayita corta y el texto descriptivo. */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.plan-media { position: relative; border-radius: 14px; overflow: hidden; height: 320px; }
.plan-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.plan-card:hover .plan-media img { transform: scale(1.05); }
.plan-num {
  position: absolute; left: 18px; bottom: 6px; font-family: var(--font-head); font-weight: 800;
  font-size: 64px; line-height: 1; color: rgba(255,255,255,.12);
  -webkit-text-stroke: 1.5px rgba(255,255,255,.85); text-stroke: 1.5px rgba(255,255,255,.85);
}
.plan-title { margin: 22px 0 0; font-size: 20px; font-weight: 800; color: var(--purple); }
.plan-divider { display: block; width: 34px; height: 3px; margin: 14px 0; background: var(--purple); border-radius: 2px; }
.plan-text { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .plan-grid { grid-template-columns: 1fr; }
}

/* Entrada de [data-plan-reveal] (Hosting y Dominio, "Nuestros planes"):
   las 3 fotos entran en vertical de a una (no las 3 juntas), y recién
   cuando termina la última aparecen los títulos/textos de las 3 tarjetas
   a la vez — animación deliberadamente lenta para que se note la
   secuencia. Disparado una sola vez al entrar en pantalla, ver main.js. */
.plan-grid[data-plan-reveal] .plan-media {
  opacity: 0; transform: translateY(70px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.plan-grid[data-plan-reveal].is-visible .plan-media { opacity: 1; transform: translateY(0); }
.plan-grid[data-plan-reveal].is-visible .plan-card:nth-child(1) .plan-media { transition-delay: 0s; }
.plan-grid[data-plan-reveal].is-visible .plan-card:nth-child(2) .plan-media { transition-delay: .5s; }
.plan-grid[data-plan-reveal].is-visible .plan-card:nth-child(3) .plan-media { transition-delay: 1s; }

.plan-grid[data-plan-reveal] .plan-title,
.plan-grid[data-plan-reveal] .plan-divider,
.plan-grid[data-plan-reveal] .plan-text {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease; transition-delay: 2s;
}
.plan-grid[data-plan-reveal].is-visible .plan-title,
.plan-grid[data-plan-reveal].is-visible .plan-divider,
.plan-grid[data-plan-reveal].is-visible .plan-text {
  opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .plan-grid[data-plan-reveal] .plan-media,
  .plan-grid[data-plan-reveal] .plan-title,
  .plan-grid[data-plan-reveal] .plan-divider,
  .plan-grid[data-plan-reveal] .plan-text { transition: none; opacity: 1; transform: none; }
}

/* Gestión de Redes: variante del .plan-grid de arriba donde las
   tarjetas convergen lentamente hacia el centro — columna izquierda
   entra desde la izquierda, columna derecha desde la derecha, columna
   central solo sube con fade. Selector aparte ([data-converge-grid])
   para no afectar el .plan-grid normal de hosting-y-dominio.php. */
/* flex en vez de grid: así la última fila incompleta (2 tarjetas) se
   centra sola en vez de quedar pegada a la izquierda con un hueco. */
.plan-grid[data-converge-grid] { display: flex; flex-wrap: wrap; justify-content: center; }
.plan-grid[data-converge-grid] .plan-card { flex: 0 1 calc(33.333% - 21.333px); }
.plan-grid[data-converge-grid] .plan-media { height: 400px; }
.plan-grid[data-converge-grid] .plan-card {
  opacity: 0; transition: transform 1.9s cubic-bezier(.16,1,.3,1), opacity 1.9s ease-out;
}
.plan-grid[data-converge-grid] .plan-card:nth-child(3n+1) { transform: translateX(-130px); }
.plan-grid[data-converge-grid] .plan-card:nth-child(3n+2) { transform: translateY(50px); }
.plan-grid[data-converge-grid] .plan-card:nth-child(3n) { transform: translateX(130px); }
.plan-grid[data-converge-grid].is-visible .plan-card { opacity: 1; transform: translate(0, 0); }
.plan-grid[data-converge-grid].is-visible .plan-card:nth-child(2) { transition-delay: .25s; }
.plan-grid[data-converge-grid].is-visible .plan-card:nth-child(4) { transition-delay: .15s; }
.plan-grid[data-converge-grid].is-visible .plan-card:nth-child(5) { transition-delay: .4s; }
@media (max-width: 900px) {
  .plan-grid[data-converge-grid] .plan-card { flex: 0 1 calc(50% - 16px); }
  .plan-grid[data-converge-grid] .plan-media { height: 340px; }
  .plan-grid[data-converge-grid] .plan-card:nth-child(3n+1),
  .plan-grid[data-converge-grid] .plan-card:nth-child(3n+2),
  .plan-grid[data-converge-grid] .plan-card:nth-child(3n) { transform: translateY(50px); }
}
@media (max-width: 760px) {
  .plan-grid[data-converge-grid] .plan-card { flex: 0 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-grid[data-converge-grid] .plan-card { transition: none; opacity: 1; transform: none; }
}

/* ---------- Hosting y Dominio: "Todo lo que tu web necesita" ----------
   Pestañas arriba (título subrayado al estar activo); al hacer click
   cambia el panel de abajo (texto + foto), ver main.js. */
.feature-tabs-nav {
  display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border-soft);
  margin-bottom: 44px; overflow-x: auto; overflow-y: hidden;
}
.feature-tab {
  position: relative; -webkit-appearance: none; appearance: none;
  background: none; border: none; padding: 14px 2px; margin-bottom: -1px;
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: color .2s ease;
}
.feature-tab:hover { color: var(--ink); }
/* Span real en vez de ::after: los pseudo-elementos sobre <button>
   son poco confiables en algunos navegadores (Safari en particular
   puede no pintarlos), así que la barrita activa es un elemento real.
   Anima opacity en vez de transform:scaleX() — con scaleX el último
   botón (pegado al borde derecho, dentro de un contenedor con
   overflow-x:auto) a veces no llegaba a pintarse. */
.feature-tab-indicator {
  display: block; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--purple); opacity: 0; transition: opacity .25s ease;
}
.feature-tab.is-active { color: var(--ink); }
.feature-tab.is-active .feature-tab-indicator { opacity: 1; }

.feature-tab-panel { display: none; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.feature-tab-panel.is-active { display: grid; animation: featureFadeIn .45s ease; }
@keyframes featureFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.feature-tab-content h3 { font-size: 32px; margin-bottom: 18px; color: var(--ink); }
.feature-tab-content p { font-size: 17px; color: var(--muted); line-height: 1.75; }
.feature-tab-media { border-radius: 16px; overflow: hidden; }
.feature-tab-media img { width: 100%; height: 400px; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .feature-tab-panel.is-active { animation: none; }
}
@media (max-width: 760px) {
  /* En mobile los 4 títulos no entran en una sola fila: en vez de
     forzarlos a una franja con scroll horizontal (donde el último
     queda cortado justo en el borde de la pantalla, sin ninguna pista
     de que hay más contenido), se pasan a 2 columnas que arman 2
     filas — todo el texto queda siempre visible de entrada. */
  .feature-tabs-nav {
    flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; column-gap: 20px;
    overflow-x: visible;
  }
  .feature-tab { flex: 0 0 calc(50% - 10px); white-space: normal; font-size: 14.5px; text-align: left; }
  .feature-tab-panel { grid-template-columns: 1fr; }
  .feature-tab-media img { height: 220px; }
}

/* ---------- Páginas Web: carrusel de beneficios (texto + foto que
   se desliza entre las 4 secciones con flechas/puntos, ver main.js) ---------- */
.benefit-carousel-track { position: relative; overflow: hidden; }
.benefit-slide { display: none; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.benefit-slide.is-active { display: grid; }
.benefit-slide.is-active.dir-next { animation: benefitSlideFromRight .65s cubic-bezier(.22,1,.36,1) both; }
.benefit-slide.is-active.dir-prev { animation: benefitSlideFromLeft .65s cubic-bezier(.22,1,.36,1) both; }
.benefit-slide-content h3 { font-size: 32px; margin-bottom: 18px; color: var(--ink); }
.benefit-slide-content p { font-size: 17px; color: var(--muted); line-height: 1.75; margin-bottom: 28px; }
.benefit-slide.is-active .benefit-slide-content > * {
  animation: benefitContentIn .6s cubic-bezier(.22,1,.36,1) backwards;
}
.benefit-slide.is-active .benefit-slide-content h3 { animation-delay: .1s; }
.benefit-slide.is-active .benefit-slide-content p { animation-delay: .22s; }
.benefit-slide.is-active .benefit-slide-content .btn { animation-delay: .35s; }
.benefit-slide-media { border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* object-fit: contain (no "cover") a propósito: son ilustraciones
   completas (el robot Drovi + mockup de web), no fotos de fondo — con
   "cover" se recortaban los bordes al forzar height:400px fijo. */
.benefit-slide-media img { width: 100%; height: 400px; object-fit: contain; display: block; }
.benefit-slide.is-active .benefit-slide-media {
  animation: benefitMediaIn .75s cubic-bezier(.22,1,.36,1) .15s backwards;
}
@keyframes benefitSlideFromRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes benefitSlideFromLeft { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes benefitContentIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes benefitMediaIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.benefit-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; }
.carousel-arrow {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border-soft); background: #fff; color: var(--purple);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.carousel-arrow:hover { background: var(--purple-btn); border-color: var(--purple-btn); color: #fff; }
.carousel-dots { display: flex; gap: 10px; }
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(108,43,217,.2);
  cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease;
}
.carousel-dot.is-active { background: var(--purple-btn); transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) {
  .benefit-slide.is-active,
  .benefit-slide.is-active .benefit-slide-content > *,
  .benefit-slide.is-active .benefit-slide-media { animation: none; opacity: 1; transform: none; }
}

/* ---------- Páginas Web: "Tipos de proyecto" en filas alternadas.
   La foto entra arrastrándose desde el lado exterior de la fila (el
   lado contrario al texto) y, recién cuando termina, aparece el
   texto — el delay de .project-type-content coincide con la duración
   de la transición de .project-type-media. Disparado una sola vez
   por fila al entrar en pantalla, ver main.js. */
.project-type-list { display: flex; flex-direction: column; gap: 70px; }
/* grid-column explícito (no order) para que la columna más ancha (la de
   la imagen) se mueva de lado junto con is-reversed en vez de quedar
   atada a la posición de origen en el DOM. */
.project-type-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; }
.project-type-media { grid-column: 1; grid-row: 1; }
.project-type-content { grid-column: 2; grid-row: 1; }
.project-type-row.is-reversed { grid-template-columns: 1fr 1.15fr; }
.project-type-row.is-reversed .project-type-media { grid-column: 2; }
.project-type-row.is-reversed .project-type-content { grid-column: 1; }

.project-type-media {
  box-shadow: var(--shadow-soft);
  /* Punto medio entre las 4 relaciones de aspecto (1.53 a 1.88): una
     caja más alta que la más ancha (diseño-ux-ui) para que landing-page
     (la más "alta" del grupo) muestre también su parte superior, a
     costa de recortar un poco más los lados de las fotos más anchas. */
  aspect-ratio: 1.6; overflow: hidden;
  opacity: 0; transform: translateX(-130%);
  transition: transform 1.6s cubic-bezier(.45,0,.15,1), opacity .7s ease-out;
}
.project-type-row.is-reversed .project-type-media { transform: translateX(130%); }
.project-type-row.is-visible .project-type-media { opacity: 1; transform: translateX(0); }
.project-type-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.project-type-content {
  opacity: 0; transform: translateY(20px);
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
.project-type-row.is-visible .project-type-content { opacity: 1; transform: translateY(0); transition-delay: 1.6s; }
.project-type-content h3 { font-size: 26px; margin-bottom: 12px; color: var(--ink); }
.project-type-content p { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 18px; }
.project-type-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.project-type-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); }
.project-type-features li svg { flex-shrink: 0; margin-top: 2px; color: var(--purple-btn); }

@media (max-width: 760px) {
  .project-type-row { grid-template-columns: 1fr; }
  .project-type-row.is-reversed .project-type-content,
  .project-type-row.is-reversed .project-type-media { order: initial; }
  .project-type-media, .project-type-row.is-reversed .project-type-media { transform: translateY(70px); }
  /* Sin esto, en las filas "is-reversed" la regla de arriba (misma
     especificidad que ".is-visible .project-type-media" pero declarada
     después) ganaba incluso ya visible: la foto quedaba trabada 70px
     más abajo, comiéndose el gap y pisando el título de abajo. */
  .project-type-row.is-visible .project-type-media { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .project-type-media, .project-type-content { transition: none; opacity: 1; transform: none; }
}

/* ---------- Páginas Web: "Nuestro proceso" como línea de tiempo.
   Cada paso entra en cascada (fade + escala), ver main.js para el
   disparo de .is-visible. */
.process-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 6px; }
.process-timeline-step {
  position: relative; text-align: center; padding: 0 8px;
  opacity: 0; transform: translateY(34px) scale(.9);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.process-timeline.is-visible .process-timeline-step { opacity: 1; transform: translateY(0) scale(1); }
.process-timeline.is-visible .process-timeline-step:nth-child(1) { transition-delay: .05s; }
.process-timeline.is-visible .process-timeline-step:nth-child(2) { transition-delay: .3s; }
.process-timeline.is-visible .process-timeline-step:nth-child(3) { transition-delay: .55s; }
.process-timeline.is-visible .process-timeline-step:nth-child(4) { transition-delay: .8s; }

.process-timeline-icon {
  position: relative; width: 68px; height: 68px; margin: 0 auto 20px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--purple-btn), var(--pink)); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(91,36,219,.55);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.process-timeline-step:hover .process-timeline-icon { transform: scale(1.12) rotate(-8deg); }
.process-timeline-icon::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--purple-btn); opacity: 0;
}
.process-timeline.is-visible .process-timeline-step:nth-child(1) .process-timeline-icon::after { animation: timelinePulse 2.4s ease-out .7s infinite; }
.process-timeline.is-visible .process-timeline-step:nth-child(2) .process-timeline-icon::after { animation: timelinePulse 2.4s ease-out .95s infinite; }
.process-timeline.is-visible .process-timeline-step:nth-child(3) .process-timeline-icon::after { animation: timelinePulse 2.4s ease-out 1.2s infinite; }
.process-timeline.is-visible .process-timeline-step:nth-child(4) .process-timeline-icon::after { animation: timelinePulse 2.4s ease-out 1.45s infinite; }
@keyframes timelinePulse {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

.process-timeline-num {
  position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--purple-btn); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
  border: 2px solid var(--purple-btn);
}
.process-timeline-step h4 { font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.process-timeline-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 760px) {
  .process-timeline { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-timeline-step, .process-timeline-icon { transition: none; }
  .process-timeline-step { opacity: 1; transform: none; }
  .process-timeline-icon::after { animation: none; }
}

@media (max-width: 760px) {
  .benefit-slide { grid-template-columns: 1fr; }
  .benefit-slide-media img { height: 220px; }
}

/* ---------- Servicios: tarjetas de imagen con contenido en hover ----------
   De a dos por fila; cada tarjeta es una foto — al pasar el mouse, la foto
   se achica y a su lado se despliega el título/texto/botón. Componente
   propio (no reutiliza .service-card/.services-grid) porque esa clase
   también la usan los planes de hosting-y-dominio.php, que no llevan foto. */
.services-grid-img { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card-img {
  display: flex; align-items: stretch; height: 320px;
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft);
  border: 1.5px solid var(--border-soft);
}
.service-card-img .sci-image {
  flex: 0 0 100%; position: relative; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  transition: flex-basis .45s cubic-bezier(.2,.8,.2,1);
}
.service-card-img .sci-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(29,4,54,.1), rgba(29,4,54,.45));
  transition: background .45s ease;
}
.service-card-img:hover .sci-image::after {
  background: linear-gradient(90deg, rgba(29,4,54,.55), rgba(29,4,54,.15));
}
.service-card-img .sci-title {
  position: relative; z-index: 2; color: #fff; text-align: center;
  font-size: 26px; font-weight: 800; line-height: 1.2; padding: 0 24px;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  transition: opacity .3s ease;
}
.service-card-img:hover .sci-title { opacity: 0; }
.service-card-img .sci-content {
  flex: 0 0 0%; overflow: hidden; opacity: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0; background: linear-gradient(160deg, var(--purple), var(--purple-dark));
  transition: flex-basis .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease, padding .45s ease;
}
.service-card-img:hover .sci-image { flex-basis: 42%; }
.service-card-img:hover .sci-content { flex-basis: 58%; opacity: 1; padding: 22px 24px; }
.service-card-img .sci-content .icon-box {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
}
.service-card-img .sci-content h3 { color: #fff; font-size: 16px; }
.service-card-img .sci-content p { color: rgba(255,255,255,.85); font-size: 13px; }
.service-card-img .sci-content .cta-pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: #fff; color: var(--purple-btn); transition: background .2s;
}
.service-card-img .sci-content .cta-pill:hover { background: var(--bg-light); }
@media (max-width: 760px) {
  .services-grid-img { grid-template-columns: 1fr; }
  .service-card-img { flex-direction: column; height: auto; }
  .service-card-img .sci-image { flex-basis: auto; height: 200px; }
  .service-card-img .sci-title { font-size: 21px; }
  .service-card-img .sci-content {
    flex-basis: auto; opacity: 1; padding: 20px 22px; overflow: visible;
  }
}
/* =========================================================
   Correos Corporativos — Resultados que generan impacto
   ========================================================= */

.section-impacto-correos {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(91,36,219,.08), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(236,72,153,.07), transparent 28%),
    var(--bg-light);
}

/* ---------- Orbes decorativos ---------- */

.impacto-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .65;
}

.impacto-orb-1 {
  width: 280px;
  height: 280px;
  top: -140px;
  left: -100px;
  background: radial-gradient(
    circle,
    rgba(91,36,219,.14) 0%,
    rgba(91,36,219,.04) 45%,
    transparent 70%
  );
  animation: impactoOrbFloat 7s ease-in-out infinite;
}

.impacto-orb-2 {
  width: 360px;
  height: 360px;
  right: -160px;
  bottom: -180px;
  background: radial-gradient(
    circle,
    rgba(236,72,153,.12) 0%,
    rgba(236,72,153,.035) 45%,
    transparent 70%
  );
  animation: impactoOrbFloat 9s ease-in-out infinite reverse;
}

@keyframes impactoOrbFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -20px, 0);
  }
}


/* ---------- Encabezado ---------- */

.impacto-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.impacto-head .eyebrow {
  margin-bottom: 10px;
}

.impacto-head h2 {
  font-size: 36px;
  color: var(--purple);
  margin-bottom: 14px;
}

.impacto-head p {
  max-width: 650px;
  margin: 0 auto;
  font-size: 16px;
}


/* ---------- Grid ---------- */

.impacto-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  align-items: stretch;
}


/* ---------- Tarjetas ---------- */

.impacto-card {
  position: relative;
  overflow: hidden;

  min-height: 390px;
  padding: 34px 30px;

  display: flex;
  flex-direction: column;

  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(91,36,219,.28);

  box-shadow:
    0 20px 45px -28px rgba(36,18,66,.38);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    border-color .35s ease;
}


/* Entrada individual */

.impacto-card.reveal {
  transform: translateY(50px) scale(.96);
  opacity: 0;
}

.impacto-card.reveal.in-view {
  transform: translateY(0) scale(1);
  opacity: 1;
}


/* Retrasos */

.impacto-card:nth-child(1).in-view {
  transition-delay: .05s;
}

.impacto-card:nth-child(2).in-view {
  transition-delay: .20s;
}

.impacto-card:nth-child(3).in-view {
  transition-delay: .35s;
}


/* Hover */

.impacto-card:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(91,36,219,.5);

  box-shadow:
    0 30px 55px -25px rgba(36,18,66,.38);
}


/* ---------- Brillo interno ---------- */

.impacto-card::before {
  content: '';

  position: absolute;
  top: -100%;
  left: -45%;

  width: 45%;
  height: 300%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );

  transform: rotate(18deg);
  pointer-events: none;

  opacity: 0;
}

.impacto-card:hover::before {
  opacity: 1;
  animation: impactoShimmer .9s ease forwards;
}

@keyframes impactoShimmer {
  from {
    left: -45%;
  }

  to {
    left: 130%;
  }
}


/* ---------- Decoración superior ---------- */

.impacto-card-glow {
  position: absolute;
  width: 120px;
  height: 120px;

  top: -65px;
  right: -55px;

  border-radius: 50%;

  background: rgba(91,36,219,.08);

  transition:
    transform .5s ease,
    background .5s ease;
}

.impacto-card:hover .impacto-card-glow {
  transform: scale(1.5);
  background: rgba(236,72,153,.10);
}


/* ---------- Icono ---------- */

.impacto-icon {
  position: relative;
  z-index: 2;

  width: 64px;
  height: 64px;

  margin-bottom: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  color: #fff;

  background: linear-gradient(
    135deg,
    var(--purple-btn),
    var(--pink)
  );

  box-shadow:
    0 14px 30px -12px rgba(91,36,219,.55);

  transition:
    transform .45s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease;
}

.impacto-icon i {
  font-size: 26px;
}

.impacto-card:hover .impacto-icon {
  transform: rotate(-7deg) scale(1.12);

  box-shadow:
    0 18px 35px -10px rgba(91,36,219,.65);
}


/* ---------- Título ---------- */

.impacto-card h3 {
  position: relative;
  z-index: 2;

  margin-bottom: 24px;

  font-size: 21px;
  color: var(--purple);
}


/* ---------- Lista ---------- */

.impacto-list {
  position: relative;
  z-index: 2;

  list-style: none;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.impacto-list li {
  position: relative;

  padding-left: 22px;

  font-size: 14px;
  line-height: 1.6;

  color: var(--muted);
}


/* Check / punto */

.impacto-list li::before {
  content: '';

  position: absolute;
  left: 0;
  top: 8px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--pink);

  box-shadow:
    0 0 0 4px rgba(236,72,153,.10);
}


/* ---------- Línea inferior ---------- */

.impacto-line {
  width: 0;
  height: 3px;

  margin-top: auto;
  padding-top: 0;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--purple-btn),
    var(--pink)
  );

  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

.impacto-card:hover .impacto-line {
  width: 70px;
}


/* =========================================================
   TARJETA CENTRAL DESTACADA
   ========================================================= */

.impacto-card.is-featured {
  color: #fff;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(236,72,153,.30),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--purple-btn),
      var(--purple),
      var(--purple-dark)
    );

  border-color: transparent;

  transform: translateY(-8px);

  box-shadow:
    0 30px 60px -25px rgba(91,36,219,.65);
}


/* Al entrar en viewport */

.impacto-card.is-featured.reveal.in-view {
  transform: translateY(-8px) scale(1);
}


/* Hover tarjeta central */

.impacto-card.is-featured:hover {
  transform: translateY(-18px) scale(1.02);

  box-shadow:
    0 38px 70px -25px rgba(91,36,219,.75);
}


/* Icono central */

.impacto-card.is-featured .impacto-icon {
  background: rgba(255,255,255,.15);

  border: 1px solid rgba(255,255,255,.25);

  box-shadow:
    0 14px 30px -12px rgba(0,0,0,.25);
}

.impacto-card.is-featured:hover .impacto-icon {
  background: rgba(255,255,255,.22);
}


/* Texto central */

.impacto-card.is-featured h3 {
  color: #fff;
}

.impacto-card.is-featured .impacto-list li {
  color: rgba(255,255,255,.88);
}

.impacto-card.is-featured .impacto-list li::before {
  background: #fff;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.12);
}

.impacto-card.is-featured .impacto-line {
  background: #fff;
}


/* Brillo permanente muy suave */

.impacto-card.is-featured::after {
  content: '';

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,.08) 45%,
      transparent 65%
    );

  transform: translateX(-100%);

  pointer-events: none;

  animation: impactoFeaturedShine 4.5s ease-in-out infinite;
}

@keyframes impactoFeaturedShine {

  0%, 45% {
    transform: translateX(-100%);
  }

  70%, 100% {
    transform: translateX(100%);
  }
}


/* ---------- Frase inferior ---------- */

.impacto-bottom {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 38px;

  font-size: 13.5px;
  font-weight: 700;

  color: var(--purple);
}

.impacto-bottom-dot {
  width: 8px;
  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--pink);

  box-shadow:
    0 0 0 5px rgba(236,72,153,.10);

  animation: impactoDotPulse 2s ease-in-out infinite;
}

@keyframes impactoDotPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.35);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .impacto-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impacto-card.is-featured {
    transform: none;
  }

  .impacto-card.is-featured.reveal.in-view {
    transform: translateY(0) scale(1);
  }

  .impacto-card.is-featured:hover {
    transform: translateY(-10px) scale(1.015);
  }

}


@media (max-width: 760px) {

  .section-impacto-correos {
    padding: 75px 0;
  }

  .impacto-head {
    margin-bottom: 38px;
  }

  .impacto-head h2 {
    font-size: 29px;
  }

  .impacto-head p {
    font-size: 14px;
  }

  .impacto-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .impacto-card {
    min-height: auto;
    padding: 28px 24px;
  }

  .impacto-card.is-featured {
    transform: none;
  }

  .impacto-card.is-featured.reveal.in-view {
    transform: translateY(0);
  }

  .impacto-card:hover,
  .impacto-card.is-featured:hover {
    transform: translateY(-5px);
  }

  .impacto-bottom {
    text-align: center;
    line-height: 1.5;
  }

  .impacto-orb-1 {
    width: 180px;
    height: 180px;
  }

  .impacto-orb-2 {
    width: 220px;
    height: 220px;
  }
}


/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {

  .impacto-orb,
  .impacto-card,
  .impacto-card::before,
  .impacto-card.is-featured::after,
  .impacto-bottom-dot {
    animation: none;
    transition: none;
  }

  .impacto-card.reveal,
  .impacto-card.reveal.in-view {
    opacity: 1;
    transform: none;
  }

}
/* ---------- Franja oscura (equipo / CTA) ---------- */
.dark-band {
  position: relative; padding: 100px 0; color: #fff; text-align: center; overflow: hidden;
  background-image:
    linear-gradient(160deg, rgba(60,9,107,.82), rgba(44,7,80,.78)),
    url('../img/reunion-analisis.jpg');
  background-size: cover; background-position: center;
}
.dark-band .wrap { max-width: 620px; position: relative; z-index: 2; }
.dark-band h2 { color: #fff; font-size: 32px; margin-bottom: 16px; }
.dark-band p { color: rgba(255,255,255,.78); }

.final-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background-image:
    linear-gradient(135deg, rgba(60,9,107,.6), rgba(29,4,54,.7)),
    url('../img/fondo-purpura-estudio.jpg');
  background-size: cover; background-position: center;
  /* Tarjeta flotante: redondeada en las 4 esquinas y con sombra propia,
     en vez de llegar edge-to-edge hasta el borde inferior de la sección. */
  border-radius: 24px; box-shadow: var(--shadow-soft); padding: 50px 46px; color: #fff;
}
.final-cta h2 { color: #fff; font-size: 26px; margin-bottom: 8px; }
.final-cta p { color: rgba(255,255,255,.85); max-width: 420px; }

/* Variante a pantalla completa del CTA final: la foto cubre toda la
   franja (sin tarjeta redondeada "flotando" sobre fondo claro) y el
   contenido queda centrado en el medio. */
.final-cta-hero {
  padding: 100px 0; text-align: center; background-size: cover; background-position: center;
}
.final-cta-hero .wrap { max-width: 620px; }
.final-cta-hero h2 { color: #fff; font-size: 32px; margin-bottom: 12px; }
.final-cta-hero p { color: rgba(255,255,255,.85); margin: 0 auto 28px; }

/* Entrada convergente: cada línea llega desde un lado distinto y todas
   terminan juntas en el centro. */
.final-cta-hero .reveal { transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.final-cta-hero .fh-from-top { transform: translateY(-46px); }
.final-cta-hero .fh-from-left { transform: translateX(-90px); }
.final-cta-hero .fh-from-right { transform: translateX(90px); }
.final-cta-hero .fh-from-bottom { transform: translateY(60px); }
.final-cta-hero .reveal.in-view { transform: translate(0, 0); }
/* El botón necesita su transición corta de vuelta para el hover, una
   vez que ya entró en pantalla (la regla de :hover pesa más que la del
   reveal por el pseudo-selector, así que gana después del in-view). */
.final-cta-hero .btn.reveal:hover {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

/* ---------- Hero de páginas interiores (banner) ---------- */
.page-hero {
  position: relative; padding: 210px 0 90px; text-align: center; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-deeper));
}
/* Servicios: hero a pantalla completa con foto propia (mismo patrón que
   las páginas de detalle de cada servicio, más abajo). */
.hero-full-servicios {
  background-image: linear-gradient(135deg, rgba(60,9,107,.85), rgba(29,4,54,.9)), url('../img/servicios/hero-1.jpg');
  background-size: cover; background-position: center;
}
.hero-full-nosotros {
  background-image: linear-gradient(135deg, rgba(60,9,107,.85), rgba(29,4,54,.9)), url('../img/nosotros/nosotros.jpg');
  background-size: cover; background-position: center;
}
.page-hero .wrap { position: relative; z-index: 2; }

/* Hero a pantalla completa de cada página de detalle de servicio —
   mismo criterio que .hero-full del home (foto propia + overlay morado
   de marca), una clase por página porque cada una usa una foto distinta. */
.hero-full-desarrollo-software {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/servicios/desarrollo-software.jpg');
  background-size: cover; background-position: center;
}
.hero-full-paginas-web {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/servicios/paginas-web (2).jpg');
  background-size: cover; background-position: center;
}
.hero-full-creacion-marca {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/servicios/creacion-marca (2).jpg');
  background-size: cover; background-position: center;
}
.hero-full-gestion-redes {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/servicios/gestion-redes (2).jpg');
  background-size: cover; background-position: center;
}
.hero-full-hosting {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/servicios/hosting web.jpg');
  background-size: cover; background-position: center;
}
.hero-full-correos {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/servicios/correo-corporativo.jpg');
  background-size: cover; background-position: center;
}
/* Estos heroes no tienen franja de stats debajo (a diferencia del home),
   así que no necesitan tanto padding-bottom. */
.hero-full-servicios, .hero-full-nosotros, .hero-full-desarrollo-software, .hero-full-paginas-web, .hero-full-creacion-marca,
.hero-full-gestion-redes, .hero-full-hosting, .hero-full-correos {
  padding: 160px 0 110px;
}
.hero-full-servicios .breadcrumb, .hero-full-desarrollo-software .breadcrumb, .hero-full-paginas-web .breadcrumb,
.hero-full-creacion-marca .breadcrumb, .hero-full-gestion-redes .breadcrumb,
.hero-full-hosting .breadcrumb, .hero-full-correos .breadcrumb {
  color: rgba(255,255,255,.65); font-size: 13px; margin-bottom: 22px;
}
.hero-full-servicios .breadcrumb a, .hero-full-desarrollo-software .breadcrumb a, .hero-full-paginas-web .breadcrumb a,
.hero-full-creacion-marca .breadcrumb a, .hero-full-gestion-redes .breadcrumb a,
.hero-full-hosting .breadcrumb a, .hero-full-correos .breadcrumb a {
  color: rgba(255,255,255,.9); font-weight: 700;
}
.page-hero h1 { color: #fff; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; }
.page-hero .breadcrumb { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.65); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.85); font-weight: 700; }

/* Contacto: hero con foto propia (mismo criterio que .hero-full-*) y
   título grande, en vez del label chico genérico de .page-hero. */
.page-hero.page-hero-contacto {
  background-image: linear-gradient(135deg, rgba(60,9,107,.82), rgba(29,4,54,.88)), url('../img/contacto/contactanos.jpg');
  background-size: cover; background-position: center;
}
.page-hero.page-hero-contacto h1 {
  font-size: 40px; text-transform: none; letter-spacing: normal; line-height: 1.2;
}
.page-hero.page-hero-contacto .sub { color: rgba(255,255,255,.85); max-width: 560px; margin-left: auto; margin-right: auto; }

/* Sección del formulario: la mascota de contacto queda a la derecha,
   de tamaño moderado y atenuada (opacity), no como fondo de toda la
   franja — el fondo de la sección sigue blanco. */
.section-contacto-form { position: relative; overflow: hidden; }
.section-contacto-form-bot {
  position: absolute; top: 50%; right: -30px; transform: translateY(-50%);
  width: 560px; height: auto; z-index: 0; pointer-events: none;
}
.section-contacto-form > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .section-contacto-form-bot { display: none; }
}

.map-embed { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--border-soft); }
.map-embed iframe { display: block; width: 100%; }

/* ---------- Contenido genérico interior ---------- */
/* Franja Misión/Visión: mascota Drovi a la izquierda (a opacidad plena,
   con una animación de flotado suave) y contenido a la derecha. */
.mv-grid { display: grid; grid-template-columns: 480px 1fr; gap: 56px; align-items: center; }
.mv-media { display: flex; justify-content: center; }
.mv-media img { max-width: 100%; height: auto; animation: mvFloat 4.5s ease-in-out infinite; }
@keyframes mvFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  .mv-media img, .problem-media img, .process-bg { animation: none; }
}
.mv-content .section-head { text-align: left; max-width: none; margin: 0 0 28px; }
.mv-content .eyebrow { justify-content: flex-start; }
.mv-content .info-card + .info-card { margin-top: 20px; }

.info-card {
  position: relative; overflow: hidden; background: var(--bg-light); border-radius: 18px; padding: 28px 30px;
  border: 1px solid var(--border-soft); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--purple); }
/* El contenido real va en su propio z-index encima de la decoración de
   fondo (abajo) — sin esto, la decoración (position:absolute) pintaría
   por encima del texto en vez de detrás. */
.info-card-content { position: relative; z-index: 1; }
.info-card .icon-box {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(108,43,217,.1); color: var(--purple); transition: background .3s ease, color .3s ease;
}
.info-card:hover .icon-box { background: var(--purple); color: #fff; }

/* Decoración animada a tamaño de tarjeta (no del ícono chico): un
   cohete grande y tenue que atraviesa TODO el cuadro de abajo hacia
   arriba en diagonal en loop, y el ícono del ojo, grande, que se
   expande desde el centro de la tarjeta hacia afuera ("zoom" al
   revés) — overflow:hidden en .info-card las recorta en los bordes
   de la tarjeta. */
.info-card-deco { position: absolute; z-index: 0; pointer-events: none; color: var(--purple); }

/* De esquina a esquina (abajo-izq a arriba-der) y con una pausa larga
   entre pasadas: el vuelo en sí ocupa solo el primer ~28% del ciclo
   (rápido y dinámico), el resto del tiempo queda invisible en la
   posición final hasta que arranca la próxima vuelta. */
/* --rocket-dx/dy: distancia real de esquina a esquina de LA TARJETA
   (cardWidth-40, 40-cardHeight — 100px de solape hacia adentro en cada
   esquina, 60px sobresaliendo hacia afuera), no un valor fijo — la
   tarjeta mide distinto en mobile (más angosta y más alta) que en
   desktop, así que sin esto el cohete se salía de la tarjeta o se
   quedaba corto según el ancho de pantalla. */
.info-card-deco-rocket {
  left: -60px; bottom: -60px; opacity: 0;
  --rocket-dx: 812px; --rocket-dy: -269px;
  animation: rocketPassCard 14s ease-in-out infinite;
}
@media (max-width: 760px) {
  .info-card-deco-rocket { --rocket-dx: 302px; --rocket-dy: -378px; }
}
@keyframes rocketPassCard {
  0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  8%   { opacity: .14; }
  45%  { transform: translate(var(--rocket-dx), var(--rocket-dy)) rotate(18deg); opacity: .14; }
  50%  { transform: translate(var(--rocket-dx), var(--rocket-dy)) rotate(18deg); opacity: 0; }
  100% { transform: translate(var(--rocket-dx), var(--rocket-dy)) rotate(18deg); opacity: 0; }
}

/* Igual que el cohete: el zoom en sí ocupa una porción del ciclo y el
   resto queda invisible en pausa antes de la próxima vuelta. */
.info-card-deco-vision {
  left: 50%; top: 50%; opacity: 0;
  /* Mismos 14s que rocketPassCard (no 9s como antes) para que ambos
     ciclos reinicien juntos y las dos animaciones se vean a la vez en
     cada vuelta, en vez de irse desfasando con el tiempo. */
  animation: visionZoomCard 14s ease-out infinite;
}
.info-card-deco-vision svg { display: block; }
@keyframes visionZoomCard {
  0%   { transform: translate(-50%, -50%) scale(.35); opacity: .3; }
  40%  { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .info-card-deco-rocket, .info-card-deco-vision { animation: none; opacity: 0; }
}
.info-card h3 { color: var(--purple); font-size: 20px; margin-bottom: 10px; }
.info-card-list { list-style: none; margin: 0; padding: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.info-card-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--muted); }
.info-card-list li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--purple);
}
@media (max-width: 900px) {
  .mv-grid { grid-template-columns: 1fr; text-align: center; }
  .mv-media img { max-width: 320px; }
  .mv-content .section-head, .mv-content .eyebrow { text-align: center; justify-content: center; }
}
.pilar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pilar-card {
  position: relative; text-align: center; padding: 34px 24px 28px; border-radius: 16px; border: 1px solid var(--border-soft);
  background: #fff; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.pilar-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); border-color: rgba(91,36,219,.35); }
/* Variante con foto (Nosotros: Misión/Visión-adyacente "Tres razones"):
   la imagen necesita ir a borde a borde, sin el padding de la tarjeta. */
.pilar-card-photo { padding: 0; }
.pilar-media { overflow: hidden; background: #fff; }
.pilar-media img {
  display: block; width: 100%; height: 190px; object-fit: contain; padding: 18px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.pilar-card:hover .pilar-media img { transform: scale(1.08); }
.pilar-card-body { padding: 6px 24px 28px; }
.pilar-card h4 { position: relative; z-index: 1; font-size: 16px; margin-bottom: 8px; color: var(--ink); }
.pilar-card p { position: relative; z-index: 1; font-size: 13.5px; }

/* Tarjetas simples de ícono (casos de uso, beneficios de servicio, etc.):
   número decorativo de fondo + ícono en caja con degradado, con un
   pequeño "salto" giratorio al pasar el mouse. */
.pilar-card:not(.pilar-card-photo) .icon-box {
  position: relative; z-index: 1; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 12px 24px -12px rgba(91,36,219,.55);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.pilar-card:not(.pilar-card-photo):hover .icon-box { transform: scale(1.1) rotate(-8deg); box-shadow: 0 16px 30px -10px rgba(91,36,219,.65); }
.pilar-card-num {
  position: absolute; top: 8px; right: 18px; z-index: 0;
  font-size: 56px; font-weight: 800; line-height: 1; font-family: var(--font-head);
  color: rgba(108,43,217,.07); pointer-events: none; transition: color .35s ease;
}
.pilar-card:hover .pilar-card-num { color: rgba(108,43,217,.14); }
.pilar-card-list {
  list-style: none; margin: 0; padding: 0;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.pilar-card-list li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.pilar-card-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--purple);
}

/* Variante de .pilar-grid/.pilar-card de a 2 por fila en vez de 3 (ver
   Garantías en Hosting y Dominio, Ventajas en Correos Corporativos):
   con un número par de tarjetas quedan filas parejas, ninguna suelta
   a la mitad. Layout horizontal (ícono a la izquierda) en vez de
   centrado, con una barra de acento arriba que aparece al hover. */
.pilar-grid-2col { grid-template-columns: repeat(2, 1fr); }
.pilar-card-wide {
  /* align-items:center (no flex-start): el grid estira las tarjetas de
     una misma fila a la altura de la más alta (según cuánto ocupe su
     texto) — con flex-start el contenido quedaba pegado arriba en las
     tarjetas más bajas, desalineando los íconos entre sí. */
  display: flex; align-items: center; gap: 20px; text-align: left; padding: 30px 28px;
}
.pilar-card-wide::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  opacity: 0; transition: opacity .3s ease;
}
.pilar-card-wide:hover::before { opacity: 1; }
/* .pilar-card.pilar-card-wide (no solo .pilar-card-wide): necesita
   igualar la especificidad de ".pilar-card:not(.pilar-card-photo)
   .icon-box" de arriba (3 clases) para poder ganarle — si no, el
   margin:0 auto 18px de esa regla seguía aplicándose y el margen
   automático empujaba el ícono según el espacio libre sobrante, que
   variaba según cuánto ocupara el texto de cada tarjeta. */
.pilar-card.pilar-card-wide .icon-box { margin: 0; flex-shrink: 0; }
.pilar-card-wide-body { position: relative; z-index: 1; }
.pilar-card-wide-body p { margin-top: 4px; line-height: 1.6; }
/* Entrada tipo "pop" con rebote (mismo criterio que .process-step),
   en vez del fade genérico de .reveal — más notoria para una grilla
   de varias tarjetas. */
.pilar-card-wide.reveal {
  transform: translateY(30px) scale(.9);
  transition: opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1);
}
.pilar-card-wide.reveal.in-view { transform: translateY(0) scale(1); }
.pilar-card-wide.reveal.in-view:hover { transform: translateY(-8px) scale(1); }
@media (max-width: 640px) {
  .pilar-card-wide { flex-direction: column; align-items: flex-start; }
}

/* Tarjetas de software (Desarrollo de Software): foto a toda la tarjeta,
   sin caja blanca. En reposo solo se ve el título sobre la foto; al
   hacer hover aparece el texto y la lista, y la foto se oscurece más. */
.software-card {
  position: relative; height: 340px; border-radius: 18px; overflow: hidden;
  border: 1.5px solid var(--border-soft); box-shadow: var(--shadow-soft);
}
.software-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.software-card:hover .software-card-img { transform: scale(1.06); }
.software-card-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,3,40,0) 40%, rgba(20,3,40,.88) 100%);
  transition: background .45s ease;
}
.software-card:hover .software-card-shade {
  background: linear-gradient(180deg, rgba(20,3,40,.05) 0%, rgba(20,3,40,.6) 35%, rgba(20,3,40,.96) 100%);
}
.software-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 24px 22px; }
.software-card-body h4 { font-size: 20px; color: #fff; margin: 0; }
.software-card-body p {
  font-size: 14.5px; color: rgba(255,255,255,.9); margin: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}
.software-card-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  display: flex; flex-direction: column; gap: 6px;
  transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}
.software-card-list li { position: relative; padding-left: 16px; font-size: 13px; color: rgba(255,255,255,.85); }
.software-card-list li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: #fff;
}
.software-card:hover .software-card-body p { max-height: 100px; opacity: 1; margin-top: 10px; }
.software-card:hover .software-card-list { max-height: 160px; opacity: 1; margin-top: 10px; }
@media (max-width: 760px) {
  .software-card-shade {
    background: linear-gradient(180deg, rgba(20,3,40,.05) 0%, rgba(20,3,40,.6) 35%, rgba(20,3,40,.96) 100%);
  }
  .software-card-body p, .software-card-list { max-height: none; opacity: 1; margin-top: 10px; }
}

/* ---------- Creación de Marca: "Nuestros pilares" ----------
   Las 3 fotos arrancan apiladas (cada una montada detrás de la
   anterior) y van saliendo de atrás, lentamente y una por una, SIN
   texto. Recién cuando la tercera termina de acomodarse aparece, todo
   junto, el degradado + título + descripción de las tres.
   Disparado por IntersectionObserver vía .is-visible (ver main.js).
   El selector de tarjeta va delimitado bajo .pilares para no chocar
   con el .pilar-card genérico (ícono + texto) de otras páginas. */
.pilares { text-align: center; }
.pilares__eyebrow, .pilares__title {
  opacity: 0; transform: translateY(30px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.pilares.is-visible .pilares__eyebrow { opacity: 1; transform: translateY(0); }
.pilares.is-visible .pilares__title { opacity: 1; transform: translateY(0); transition-delay: .08s; }

.pilares__grid { position: relative; margin-top: 56px; min-height: 540px; }

.pilares .pilar-card {
  position: absolute; top: 0; left: 0; width: calc((100% - 44px) / 3); height: 100%;
  text-align: left; padding: 0; margin: 0; border-radius: 0; border: none; background: none; box-shadow: none;
  transition: left 1.4s cubic-bezier(.22,1,.36,1);
}
.pilares .pilar-card:hover { transform: none; box-shadow: none; border-color: transparent; }
/* Las 3 arrancan con el mismo "left:0" (100% superpuestas, tapadas
   detrás de la primera por z-index) y se animan por "left" —no por
   transform: un % en translateX se resuelve contra el ancho PROPIO de
   la tarjeta, no contra el del grid, así que no cancelaba bien el
   offset final en pantallas de otro ancho. "left" sí resuelve siempre
   contra el contenedor, en reposo y en la posición final. */
.pilares .pilar-card:nth-child(1) { z-index: 3; }
.pilares .pilar-card:nth-child(2) { z-index: 2; }
.pilares .pilar-card:nth-child(3) { z-index: 1; }

.pilares.is-visible .pilar-card:nth-child(1) { left: 0; transition-delay: 0s; }
.pilares.is-visible .pilar-card:nth-child(2) { left: calc((100% - 44px) / 3 + 22px); transition-delay: .5s; }
.pilares.is-visible .pilar-card:nth-child(3) { left: calc(2 * ((100% - 44px) / 3 + 22px)); transition-delay: 1s; }

.pilar-card__media {
  position: relative; height: 420px; display: flex; align-items: flex-end; overflow: hidden;
  background-size: cover; background-position: center; background-color: #eee;
}
.pilar-card__media::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: inherit; background-size: cover; background-position: center;
  transform: scale(1.08);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.pilares.is-visible .pilar-card:nth-child(1) .pilar-card__media::before { transition-delay: 0s; }
.pilares.is-visible .pilar-card:nth-child(2) .pilar-card__media::before { transition-delay: .5s; }
.pilares.is-visible .pilar-card:nth-child(3) .pilar-card__media::before { transition-delay: 1s; }
.pilares.is-visible .pilar-card__media::before { transform: scale(1); }
.pilar-card:hover .pilar-card__media::before { transform: scale(1.03); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }

/* Degradado + título + descripción: ocultos durante todo el desplazamiento
   de las fotos, aparecen juntos recién cuando la 3ra tarjeta ya llegó
   (delay 2.5s = 1s del último delay + 1.4s de su propia duración + un respiro). */
.pilar-card__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,3,40,0) 50%, rgba(20,3,40,.8) 100%);
  opacity: 0; transition: opacity .6s ease-out; transition-delay: 2.5s;
}
.pilares.is-visible .pilar-card__shade { opacity: 1; }

.pilares .pilar-card__title {
  position: relative; z-index: 2; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.25;
  margin: 0; padding: 0 22px 20px;
  opacity: 0; transform: translateY(15px);
  transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: 2.6s;
}
.pilares.is-visible .pilar-card__title { opacity: 1; transform: translateY(0); }
.pilar-card:hover .pilar-card__title { transform: translateY(-3px); transition: transform .5s cubic-bezier(.22,1,.36,1); }

.pilares .pilar-card__text {
  margin: 0; padding: 18px 2px 0; color: var(--muted); font-size: 15.5px;
  opacity: 0; transform: translateY(15px);
  transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: 2.75s;
}
.pilares.is-visible .pilar-card__text { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .pilares__eyebrow, .pilares__title, .pilares .pilar-card, .pilar-card__media::before,
  .pilar-card__shade, .pilares .pilar-card__title, .pilares .pilar-card__text { transition: none !important; }
}
@media (max-width: 900px) {
  .pilares__grid { position: static; min-height: 0; display: flex; flex-direction: column; gap: 22px; }
  .pilares .pilar-card { position: static; width: 100%; height: auto; transform: none !important; }
  .pilar-card__shade, .pilares .pilar-card__title, .pilares .pilar-card__text { transition-delay: .1s !important; opacity: 1; transform: translateY(0); }
}

/* ---------- Servicios: detalle por ancla ---------- */
.servicio-detail {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 22px;
  padding: 26px; border-radius: 16px; border: 1px solid var(--border-soft); scroll-margin-top: 100px;
}
.servicio-detail + .servicio-detail { margin-top: 18px; }
.servicio-detail .icon-box {
  width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(108,43,217,.1); color: var(--purple);
}
.servicio-detail h3 { font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.servicio-detail p { font-size: 14px; }

/* ---------- Productos (placeholder) ---------- */
.placeholder-box {
  text-align: center; max-width: 640px; margin: 0 auto; padding: 60px 30px;
  border: 2px dashed var(--border-soft); border-radius: 20px;
}
.placeholder-box .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); margin-bottom: 14px; }

/* ---------- Formulario de contacto ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.contact-info-card {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff;
  border-radius: 20px; padding: 38px; display: flex; flex-direction: column; gap: 22px;
}
.contact-info-card h3 { color: #fff; font-size: 20px; }
.contact-info-row { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; }
.contact-info-row .icon-circle {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); flex-shrink: 0;
}
.form-card { background: var(--bg-light); border-radius: 20px; padding: 38px; border: 1px solid var(--border-soft); }
.form-honeypot { position: absolute; left: -9999px; opacity: 0; }
.form-alert { padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.form-alert.is-error { background: #FEE2E2; color: #991B1B; }
.form-alert.is-success { background: #DCFCE7; color: #166534; }
.form-alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Panel "falta un paso" que reemplaza al form entero al enviar (ver
   main.js): grande y centrado a propósito — que sea imposible no
   verlo, sin importar en qué punto del formulario largo estaba
   parado el usuario cuando tocó Enviar. */
.wa-success-panel { text-align: center; padding: 10px 6px 6px; }
.wa-success-icon {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: 0 14px 30px -12px rgba(37,211,102,.55);
}
.wa-success-panel h3 { font-size: 23px; color: var(--ink); margin-bottom: 10px; }
.wa-success-panel p { font-size: 15px; line-height: 1.7; max-width: 380px; margin: 0 auto 26px; }
.wa-success-btn { background: #25D366; color: #fff; }
.wa-success-btn:hover { filter: brightness(1.05); }

/* Formulario numerado (campos apilados, sin caja — solo una línea al
   pie de cada uno) en vez de inputs con borde/fondo propios. */
.form-numbered { display: flex; flex-direction: column; }
.form-field {
  position: relative; padding: 22px 16px 16px; margin: 0 -16px; border-radius: 12px;
  border-bottom: 1px solid var(--border-soft); transition: border-color .2s ease, background-color .2s ease;
}
.form-field:first-child { padding-top: 16px; }
.form-field-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.field-num { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.form-field label { font-size: 16px; font-weight: 700; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  display: block; width: 100%; border: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink); padding: 10px 0; margin: -10px 0;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; }
.form-field { cursor: text; }
.form-field label, .form-field a, .form-field button { cursor: pointer; }
/* Foco bien notorio: el subrayado fino solo no alcanza para que un
   usuario no técnico vea de un vistazo dónde tiene que escribir —
   fondo resaltado + borde grueso de color + el número también se
   pinta, en vez del borde de 1px casi imperceptible de antes. */
.form-field:focus-within {
  background: rgba(91,36,219,.07); border-bottom: 2px solid var(--purple-btn);
  padding-bottom: 15px;
}
.form-field:focus-within .field-num { color: var(--purple-btn); }
.form-field textarea { resize: vertical; min-height: 64px; }
.form-field select { cursor: pointer; }

/* Select personalizado ("Servicio de interés"): el <select> nativo
   sigue siendo la fuente de la verdad (envío del form, no-JS), pero
   una vez mejorado por JS queda oculto visualmente y en su lugar se
   muestra este botón + listado propio — la lista desplegada de un
   <select> nativo la pinta el sistema operativo y no se puede
   maquillar por CSS (de ahí el pedido de "mejor diseño"). */
.custom-select { position: relative; }
.custom-select.is-enhanced [data-custom-select-native] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.custom-select-trigger {
  display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: none; padding: 0; font-family: inherit; font-size: 15px; color: var(--ink);
  cursor: pointer; text-align: left;
}
.custom-select.is-enhanced .custom-select-trigger { display: flex; }
.custom-select-trigger span.is-placeholder { color: var(--muted); }
.custom-select-trigger svg { flex-shrink: 0; color: var(--muted); transition: transform .22s ease, color .2s ease; }
.custom-select.is-open .custom-select-trigger svg { transform: rotate(180deg); color: var(--purple-btn); }

.custom-select-list {
  position: absolute; left: -16px; right: -16px; top: calc(100% + 14px); z-index: 30;
  background: #fff; border-radius: 14px; border-top: 3px solid var(--purple-btn);
  box-shadow: var(--shadow-soft); list-style: none; margin: 0; padding: 8px;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s, transform .2s ease;
}
.custom-select.is-open .custom-select-list { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-option {
  padding: 10px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.custom-select-option:hover, .custom-select-option.is-active { background: var(--bg-light); }
.custom-select-option.is-selected { background: rgba(91,36,219,.1); color: var(--purple-btn); }
.custom-select-option.is-placeholder { color: var(--muted); font-weight: 500; }

.field-error {
  display: block; min-height: 0; font-size: 12.5px; font-weight: 600; color: var(--pink);
  margin-top: 8px; opacity: 0; transform: translateY(-3px); transition: opacity .18s ease, transform .18s ease;
}
.form-field.is-invalid { border-color: var(--pink); }
.form-field.is-invalid .field-error:not(:empty) { opacity: 1; transform: translateY(0); }

.btn-arrow-submit {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 22px; font-weight: 800; color: var(--ink);
}
.btn-arrow-submit-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--pink); color: #fff;
  transition: transform .25s ease;
}
.btn-arrow-submit:hover .btn-arrow-submit-icon { transform: translate(2px, -2px); }
@media (max-width: 760px) {
  .btn-arrow-submit { font-size: 19px; }
}

.site-footer { background: var(--black); color: rgba(255,255,255,.7); padding: 104px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 72px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo { display: inline-block; }
.footer-logo img { height: 38px; width: auto; display: block; }
.footer-grid p { font-size: 15px; color: rgba(255,255,255,.6); margin-top: 12px; }
.footer-desc { max-width: 260px; }
.footer-grid h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.footer-grid a { display: block; font-size: 15px; color: rgba(255,255,255,.65); margin-bottom: 12px; transition: color .15s; }
.footer-grid a:hover { color: #fff; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); margin: 0;
}
.social-row a:hover { background: var(--purple); color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding: 36px 0; font-size: 13.5px; color: rgba(255,255,255,.45); }

/* ---------- Reveal / scroll animations ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in-view { transition-delay: .08s; }
.reveal-delay-2.in-view { transition-delay: .16s; }
.reveal-delay-3.in-view { transition-delay: .24s; }
.reveal-delay-4.in-view { transition-delay: .32s; }
.reveal-delay-5.in-view { transition-delay: .4s; }
.reveal-delay-6.in-view { transition-delay: .48s; }

/* Sección "confianza" del home: la foto sube desde abajo y el texto
   entra desde la derecha hacia el centro, ligados al progreso real del
   scroll frame a frame (ver updateConfianza en main.js) — no un reveal
   que dispara una sola vez al entrar en pantalla. */
.confianza-photo, .confianza-text { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .confianza-photo, .confianza-text { transform: none !important; opacity: 1 !important; }
}

/* ---------- Widget de chat flotante ---------- */
.chat-widget-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 200; }
.chat-widget {
  display: flex; align-items: center; gap: 10px; background: transparent; border: none; padding: 0;
}
.chat-widget-bubble {
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; padding: 10px 16px;
  border-radius: 999px; box-shadow: var(--shadow-soft);
}
.chat-widget-avatar {
  position: relative; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
}
.chat-widget-avatar-sm { width: 34px; height: 34px; }
.chat-widget-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; }
.chat-widget-panel {
  position: absolute; bottom: 74px; right: 0; width: 300px; background: #fff; border-radius: 18px;
  box-shadow: var(--shadow-soft); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.chat-widget-wrap.is-open .chat-widget-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.chat-widget-panel-header { display: flex; align-items: center; gap: 10px; background: var(--purple); color: #fff; padding: 14px 16px; }
.chat-widget-panel-header-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.chat-widget-panel-header-text strong { font-size: 12.5px; }
.chat-widget-panel-header-text span { font-size: 11px; opacity: .8; }
.chat-widget-close { background: none; border: none; color: #fff; opacity: .8; }
.chat-widget-panel-body { padding: 16px; }
.chat-widget-msg { font-size: 13.5px; color: var(--ink); background: var(--bg-light); padding: 12px 14px; border-radius: 12px; }
.chat-widget-panel-input { display: flex; gap: 8px; padding: 0 16px 16px; }
.chat-widget-panel-input input {
  flex: 1; padding: 11px 14px; border-radius: 999px; border: 1.5px solid var(--border-soft); font-size: 13.5px;
  transition: border-color .2s ease;
}
.chat-widget-panel-input input.is-invalid { border-color: #E11D48; }
.chat-widget-panel-input input.is-invalid::placeholder { color: #E11D48; }
.chat-widget-panel-input button {
  width: 40px; height: 40px; border-radius: 50%; background: var(--purple-btn); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Páginas de detalle de servicio ---------- */
/* "Nuestro proceso" (Creación de Marca): los pasos quedan tal cual
   estaban (centrados, ancho completo); la mascota flota de fondo,
   detrás de las tarjetas, del lado derecho. */
.process-section { position: relative; overflow: hidden; }
.process-section > .wrap { position: relative; z-index: 1; }
.process-bg {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 520px; height: auto; z-index: 0; pointer-events: none;
  animation: mvFloat 4.5s ease-in-out infinite;
}
@media (max-width: 1100px) {
  .process-bg { display: none; }
}

.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-step {
  position: relative; padding: 28px 20px 22px; border-radius: 16px; border: 1px solid var(--border-soft);
  text-align: center; background: #fff;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.process-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); border-color: rgba(91,36,219,.35); }
/* Entrada tipo "pop": en vez del fade genérico de .reveal, estas
   tarjetas escalan con un rebote suave al entrar en pantalla. */
.process-step.reveal {
  transform: translateY(30px) scale(.88);
  transition: opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1);
}
.process-step.reveal.in-view { transform: translateY(0) scale(1); }
.process-step.reveal.in-view:hover { transform: translateY(-8px) scale(1); }
/* Línea conectora entre pasos: se "dibuja" hacia el siguiente paso en
   cuanto el propio paso entra en pantalla, siguiendo el mismo delay
   escalonado que ya traen las reveal-delay-N. */
.process-step:not(:last-child)::after {
  content: ''; position: absolute; top: 50px; left: 100%; width: 20px; height: 2px;
  background: linear-gradient(90deg, var(--purple-btn), rgba(91,36,219,.15));
  transform-origin: left center; transform: scaleX(0);
  transition: transform .5s ease-out; transition-delay: .2s;
}
.process-step.in-view::after { transform: scaleX(1); }
.process-step .step-num {
  position: relative; width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--purple-btn); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s ease;
}
.process-step:hover .step-num { transform: rotate(360deg) scale(1.15); background: linear-gradient(135deg, var(--purple-btn), var(--pink)); }
.process-step .step-num::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(91,36,219,.35);
  animation: stepPulse 2.4s ease-out infinite;
}
.process-step:nth-child(1) .step-num::before { animation-delay: 0s; }
.process-step:nth-child(2) .step-num::before { animation-delay: .3s; }
.process-step:nth-child(3) .step-num::before { animation-delay: .6s; }
.process-step:nth-child(4) .step-num::before { animation-delay: .9s; }
@keyframes stepPulse {
  0% { transform: scale(.8); opacity: .8; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}
.process-step h4 { font-size: 15.5px; color: var(--ink); margin-bottom: 16px; }
.step-divider { display: block; width: 40px; height: 2px; margin: 0 auto 16px; background: var(--pink); border-radius: 2px; }
.process-step p { font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .process-step .step-num::before { animation: none; }
  .process-step:hover .step-num { transform: none; }
}
@media (max-width: 900px) {
  .process-step::after { display: none; }
}

.metrics-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric-block { text-align: center; padding: 26px 16px; border-radius: 16px; background: var(--bg-light); }
.metric-val { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--purple-btn); }
.metric-label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }

/* ---------- Gestión de Redes: franja de contadores con foto de fondo
   (assets/img/redes/fondo-contador.png) en vez de tarjetas planas;
   los números animan con la misma lógica de [data-count-to] que ya
   usa el home (ver main.js), sin necesidad de JS nuevo. */
.counter-band { padding: 70px 0; }
.counter-band-title {
  text-align: center; max-width: 480px; margin: 0 auto 40px; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.counter-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.counter-icon {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff;
}
.counter-val { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: #fff; }
.counter-label { font-size: 14px; color: rgba(255,255,255,.88); font-weight: 600; }
@media (max-width: 760px) {
  .counter-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
/* Correos Corporativos: fondo-contador.png es gris claro (no oscuro,
   a diferencia de la versión con overlay morado de Gestión de Redes),
   así que el texto blanco por defecto no se notaba — esta variante lo
   pasa a tonos oscuros/morados para que contraste bien. */
.counter-band-dark-text .counter-icon { background: rgba(91,36,219,.12); border-color: rgba(91,36,219,.3); color: var(--purple-btn); }
.counter-band-dark-text .counter-val { color: var(--purple-btn); }
.counter-band-dark-text .counter-label { color: var(--ink); }

/* ---------- Gestión de Redes: texto + foto con paralaje ligado al
   scroll (no un simple reveal de una sola vez) — ver main.js, que
   calcula el progreso real de la sección en el viewport y mueve
   ambos elementos con transform/opacity en cada frame. */
.scroll-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.scroll-split-text { text-align: left; }
.scroll-split-text .eyebrow { justify-content: flex-start; }
.scroll-split-text h2 { font-size: 34px; color: var(--purple); margin: 0 0 16px; }
.scroll-split-text p { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 28px; }
.scroll-split-media img { width: 100%; height: auto; display: block; }
.scroll-split-text, .scroll-split-media { will-change: transform, opacity; }
.process-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.process-list li {
  display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink);
  opacity: 0; transform: translateX(-24px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.process-list[data-reveal-list].is-visible li { opacity: 1; transform: translateX(0); }
.process-list[data-reveal-list].is-visible li:nth-child(1) { transition-delay: .05s; }
.process-list[data-reveal-list].is-visible li:nth-child(2) { transition-delay: .2s; }
.process-list[data-reveal-list].is-visible li:nth-child(3) { transition-delay: .35s; }
.process-list[data-reveal-list].is-visible li:nth-child(4) { transition-delay: .5s; }
.process-list[data-reveal-list].is-visible li:nth-child(5) { transition-delay: .65s; }
.process-list-icon { display: flex; flex-shrink: 0; color: var(--pink); }
@media (max-width: 760px) {
  .scroll-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-split-text, .scroll-split-media { transform: none !important; opacity: 1 !important; }
  .process-list li { transition: none; opacity: 1; transform: none; }
}

/* Carrusel que desliza de a un testimonio (ver main.js): track en
   flex, el ancho de cada tarjeta se calcula en JS según cuántas entran
   a la vez (3 en desktop, menos en pantallas chicas) y se mueve con
   transform + transition — nunca "salta" de a un grupo entero. */
/* Padding vertical + margin negativo del mismo tamaño: el overflow:hidden
   (necesario para que el carrusel deslice de a una tarjeta en horizontal)
   recortaba la tarjeta en hover, ya que esta sube -8px y le crece la
   sombra sin dejarle espacio arriba/abajo. El padding le da ese margen
   de maniobra y el margin negativo compensa para no correr el resto
   de la sección hacia abajo. */
.testimonial-carousel-track { overflow: hidden; padding: 20px 0 24px; margin: -20px 0 -24px; }
.testimonial-track-inner { display: flex; gap: 22px; transition: transform .5s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .testimonial-track-inner { transition: none; }
}
.testimonial-card {
  flex-shrink: 0;
  padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-soft); background: #fff;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.testimonial-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); }

.testimonial-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
}
.testimonial-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.testimonial-card:hover .testimonial-avatar { transform: rotate(-12deg) scale(1.1); }
.testimonial-name { color: #fff; font-weight: 700; font-size: 14px; }

.testimonial-card .testimonial-quote {
  position: relative; padding: 24px 22px; margin: 0;
  font-size: 14px; font-style: italic; color: var(--ink); line-height: 1.6;
}
.testimonial-card .testimonial-quote::before {
  content: '“'; position: absolute; z-index: -1; top: -8px; left: 10px;
  font-family: var(--font-head); font-style: normal; font-size: 70px; line-height: 1;
  color: rgba(108,43,217,.08);
}

/* "¿Te suena familiar?": mascota a la izquierda, contenido a la derecha
   (mismo criterio que .mv-grid en Nosotros). */
.problem-grid { display: grid; grid-template-columns: 480px 1fr; gap: 56px; align-items: center; }
.problem-media { display: flex; justify-content: center; }
.problem-media img { max-width: 100%; height: auto; animation: mvFloat 4.5s ease-in-out infinite; }
.problem-content .eyebrow { justify-content: flex-start; }
@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; text-align: center; }
  .problem-media img { max-width: 280px; }
  .problem-content .section-head, .problem-content .eyebrow { text-align: center; justify-content: center; }
}

.problem-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.problem-item {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 17px 22px;
  border-radius: 12px; border: 1px solid var(--border-soft); font-size: 14.5px; color: var(--ink); font-weight: 600;
  background: #fff; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.problem-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--pink), var(--purple));
  transform: scaleY(0); transform-origin: top; transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.problem-item:hover {
  transform: translateX(8px); box-shadow: var(--shadow-soft); border-color: rgba(236,72,153,.35);
}
.problem-item:hover::before { transform: scaleY(1); }
.problem-item .icon-circle {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pink); color: #fff; flex-shrink: 0; margin-top: 1px;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.problem-item:hover .icon-circle { transform: rotate(180deg) scale(1.12); background: var(--purple); }

.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.faq-question .chev { transition: transform .25s ease; color: var(--purple-btn); flex-shrink: 0; }
.faq-item.open .faq-question .chev { transform: rotate(180deg); }
/* Altura real: main.js (anime.js) anima height:0 -> scrollHeight px.
   max-height + transición CSS es el respaldo si anime.js no cargó. */
.faq-answer { height: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 300px; opacity: 1; }
.faq-answer p { padding: 0 22px 20px; font-size: 13.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .confianza-grid, .contact-grid { grid-template-columns: 1fr; }
  .confianza-photo { max-width: 320px; }
  .services-grid, .pilar-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-full h1 { font-size: 36px; }
  .process-steps, .metrics-band { grid-template-columns: repeat(2, 1fr); }
  .mega-menu { width: 400px; }
}

/* .nav-links-clip envuelve a .nav-links: en desktop es "invisible"
   para el layout (display:contents), pero en mobile se convierte en
   un contenedor fijo del tamaño exacto del viewport que RECORTA el
   panel — sin esto, el panel (position:fixed;right:0 + transform
   para ocultarlo) sobresalía del ancho real de la pantalla y agrandaba
   el scroll horizontal del documento entero. Esa franja fantasma de
   scroll hacía que "right:0" del panel terminara calculándose contra
   un viewport más ancho que el visible, así que al abrirlo quedaba
   corrido hacia la derecha y el botón de cerrar caía fuera de
   pantalla. No se resuelve con overflow-x:hidden en html (lo rompe:
   cualquier ancestro con overflow != visible desactiva position:sticky
   en sus descendientes, y el header depende de sticky) — por eso el
   recorte se hace acá, en un contenedor que no es ancestro de nada más. */
.nav-links-clip { display: contents; }
@media (max-width: 760px) {
  .topbar-tagline { display: none; }
  .nav-links-clip {
    display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 120;
  }
  .nav-links {
    /* display:none real mientras está cerrado (no solo trasladado
       fuera de pantalla con transform): un position:fixed/absolute
       "escapa" del recorte overflow:hidden de un ancestro para efectos
       de cuánto se puede scrollear la PÁGINA en horizontal, aunque
       visualmente quede oculto — display:none es la única forma de
       garantizar que de verdad no aporte nada mientras no está
       abierto. JS agrega/saca .is-shown antes/después de animar (ver
       main.js) para que la transición de transform siga funcionando. */
    display: none;
    position: absolute; top: 0; right: 0; width: min(320px, 84vw); pointer-events: auto;
    /* 100vh no coincide con el alto real visible en Chrome/Safari
       mobile (varía según la barra de direcciones esté mostrada u
       oculta) — dejaba un hueco en blanco abajo del panel o lo
       recortaba. 100dvh (alto dinámico real) lo corrige; el 100vh de
       arriba queda como respaldo para navegadores que no soportan
       dvh (se ignora la línea, no la regla completa). */
    height: 100vh; height: 100dvh;
    background: #fff; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 90px 28px 28px; box-shadow: -14px 0 40px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto;
  }
  .nav-links.is-shown { display: flex; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { color: #000 !important; width: 100%; padding: 12px 0; border-bottom: 1px solid rgba(36,18,66,.06); }
  /* Mega-menú de Servicios dentro del panel deslizante: pasa de dropdown
     flotante a bloque estático (siempre visible, sin hover), en fila
     única de columna. */
  .nav-item { width: 100%; flex-direction: column; align-items: stretch; align-self: auto; }
  .mega-trigger { width: 100%; justify-content: center; border-bottom: 1px solid rgba(36,18,66,.06); }
  .mega-menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    width: 100%; max-width: none; background: transparent; border: none; box-shadow: none;
    padding: 6px 0 0; margin-top: 0;
  }
  .mega-menu-cols { grid-template-columns: 1fr; gap: 0; }
  .mega-item { color: #000 !important; border-bottom: 1px solid rgba(36,18,66,.06); border-radius: 0; padding: 10px 4px; }
  .mega-item:hover, .mega-item.active { background: transparent; color: var(--purple-btn) !important; }
  .mega-menu-footer { display: none; }
  .nav-close { display: flex; position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--ink); }
  .burger { display: flex; }
  .nav-cta { display: none; }
  .services-grid, .pilar-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; }
  .stat-block + .stat-block { border-left: none; border-top: 1px solid rgba(36,18,66,.08); padding-top: 14px; }
  .final-cta { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .servicio-detail { grid-template-columns: 1fr; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .chat-widget-bubble { display: none; }
}

body.nav-open { overflow: hidden; }