/* ==========================
   Vértice Hub - Corporate UI
   Light, clean, high-contrast
   ========================== */

:root{
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --text: #0F172A;
  --muted: #475569;
  --line: rgba(15, 23, 42, .10);

  --brand: #1D4ED8;
  --brand-2: #2563EB;
  --brand-soft: rgba(37, 99, 235, .10);

  --radius: 18px;
  --shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, .08);

  --h1: clamp(2.05rem, 4.2vw, 3.1rem);
  --h2: clamp(1.5rem, 2.6vw, 2.2rem);
  --h3: 1.1rem;
  --p:  clamp(1rem, 1.2vw, 1.05rem);

  --container: 1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 520px at 18% 6%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(760px 460px at 85% 12%, rgba(29,78,216,.08), transparent 58%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  padding-top: 74px; /* ajusta si tu header mide más/menos */
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section{padding: 72px 0}
.section-tight{padding: 46px 0}

h1{font-size: var(--h1); line-height: 1.08; letter-spacing: -0.02em}
h2{font-size: var(--h2); line-height: 1.15; letter-spacing: -0.015em}
h3{font-size: var(--h3); line-height: 1.25}
p{font-size: var(--p)}

.small{font-size: .92rem}
.muted{color: var(--muted)}
.kicker{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Header */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(247,248,250,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
}
.brand-logo{width: 42px; height: 42px}
.brand-text{display:flex; flex-direction:column; gap: 2px}
.brand-sub{font-size:.82rem; color: var(--muted)}

.nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav-link{
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 10px;
  border-radius: 12px;
}
.nav-link:hover{background: rgba(15,23,42,.04); color: var(--text)}
.nav-link.active{background: rgba(37,99,235,.10); color: var(--text)}

.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span{
  display:block;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
  margin: 5px 0;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-weight: 700;
  min-height: 44px;
}
.btn:hover{transform: translateY(-1px)}
.btn-primary{
  border-color: transparent;
  color: white;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.btn-primary:hover{filter: brightness(1.02)}
.btn-ghost{
  background: transparent;
  box-shadow: none;
}

/* Hero */
.hero{
  padding: 82px 0 36px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 24px;
  align-items: start;
}
.hero-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.hero p{max-width: 70ch; margin-top: 10px}
.hero-actions{display:flex; gap: 12px; margin-top: 18px; flex-wrap: wrap}

.pills{display:flex; gap: 8px; flex-wrap:wrap; margin-top: 14px}
.pill{
  font-size: .86rem;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  color: var(--muted);
}

/* Layout blocks */
.grid{display:grid; gap: 16px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.card p{margin-top: 8px}
.card .tag{
  display:inline-block;
  margin-top: 12px;
  font-size: .86rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.list{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.list li{
  list-style:none;
  padding-left: 22px;
  position: relative;
  color: var(--muted);
}
.list li::before{
  content: "•";
  position:absolute;
  left: 8px;
  top: 0;
  color: var(--brand);
}

.banner{
  border: 1px solid rgba(37,99,235,.18);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(255,255,255,.85));
  border-radius: var(--radius);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Forms */
.form{display:grid; gap: 12px}
.label{font-weight: 700; font-size: .92rem}
.input, .textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--text);
}
.textarea{min-height: 140px; resize: vertical}
.hint{font-size:.9rem; color: var(--muted)}

/* Footer */
.site-footer{
  margin-top: 10px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.72);
}
.footer-grid{
  padding: 34px 0;
  display:grid;
  grid-template-columns: 1.25fr .75fr .8fr;
  gap: 18px;
}
.footer-brand{display:flex; align-items:center; gap: 10px; margin-bottom: 10px}
.footer-logo{width: 38px; height: 38px}
.footer-title{display:inline-block; margin-bottom: 10px}
.footer-links{display:grid; gap: 8px; margin-top: 10px}
.footer-links li{list-style:none}
.footer-links a{color: var(--muted)}
.footer-links a:hover{color: var(--text)}
.footer-bottom{
  padding: 14px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.footer-bottom-links{display:flex; gap: 12px}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
}

@media (max-width: 780px){
  .brand-sub{display:none}
  .nav-toggle{display:inline-block}
  .nav{
    position:absolute;
    right: 20px;
    top: 66px;
    width: min(360px, calc(100vw - 40px));
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    display:none;
  }
  .nav.open{display:flex}
  .nav-cta{width:100%}
  .btn{width: 100%}
  .hero-actions{flex-direction: column}
}

@media (max-width: 420px){
  .container{padding: 0 14px}
  .hero{padding: 72px 0 28px}
}

.form-grid{
  gap: 14px;
}

.form-span-2{
  grid-column: 1 / -1;
}
.form-full{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

/* En móvil todo queda a una columna (natural) */
@media (max-width: 980px){
  .grid-2{
    grid-template-columns: 1fr;
  }
  .form-span-2{
    grid-column: auto;
  }
}


/* ==========================
   HOME (Index) - Layout Foto
   ========================== */

/* Kicker como en la imagen (no tan “uppercase”) */
.kicker-soft{
  display:inline-block;
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 14px;
}

/* HERO con foto a la derecha */
.hero-photo{
  padding: 86px 0 28px;
}
.hero-grid-photo{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}
.hero-copy h1{
  max-width: 18ch;
}
.hero-lead{
  max-width: 64ch;
  margin-top: 14px;
}
.hero-actions-col{
  margin-top: 22px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.hero-phone{
  padding-left: 14px;
}

/* contenedor de imagen derecha (usa background-image) 
.hero-media{
  width: 100%;
  min-height: 360px;
  border-radius: 26px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .12);
  background:
    linear-gradient(90deg, rgba(247,248,250,1) 0%, rgba(247,248,250,.55) 35%, rgba(247,248,250,0) 65%),
    url("../assets/hero-dashboard.jpeg");
  background-size: cover;
  background-position: center;
}
*/

/* Sección servicios */
.section-services{
  padding: 46px 0 64px;
}
.section-title-center{
  text-align:center;
  margin-bottom: 26px;
}
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.service-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  padding: 22px;
}
.service-card h3{
  margin-top: 12px;
}
.service-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(37, 99, 235, .12);
  color: var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
}
.service-icon svg{
  width: 26px;
  height: 26px;
}
.center-actions{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}
.btn-pill{
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
}

/* Por qué elegir */
.section-why{
  padding: 64px 0;
}
.why-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: center;
}
.check-list{
  margin-top: 18px;
  display:grid;
  gap: 14px;
}
.check-list li{
  list-style: none;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.check-dot{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.14);
  color: var(--brand);
  font-weight: 900;
  flex: 0 0 24px;
  margin-top: 2px;
}

/*.why-media{
  width: 100%;
  min-height: 320px;
  border-radius: 26px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .12);
  background:
    linear-gradient(90deg, rgba(247,248,250,.25), rgba(247,248,250,.05)),
    url("../assets/why-choose.jpg");
  background-size: cover;
  background-position: center;
}
*/

/* ==========================
   Casos de éxito (fondo azul oscuro)
   ========================== */

.section-cases{
  background: linear-gradient(180deg, rgba(42, 57, 93, 0.92), rgba(15, 23, 42, .96));
  color: #fff;
  margin-top: 26px;
}

.section-cases .muted{ color: rgba(255,255,255,.72); }

.cases-title{
  margin-bottom: 30px;
}

/* Dos columnas: Testimonio (izq) + Galería (der) */
.cases-grid{
  display:grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 18px;
  align-items: stretch;
}

/* Tarjeta de testimonio */
.case-quote{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 26px 70px rgba(0,0,0,.28);
  height: 100%;
}

.case-person{
  display:flex;
  align-items:center;
  gap: 12px;
}

.avatar{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.case-text{
  margin-top: 12px;
  color: rgba(255,255,255,.85);
}

.btn-small{
  margin-top: 14px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
}

/* === Galería: 3 cuadros en 3 columnas (derecha) === */
.case-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
}

/* Cada cuadro: imagen + label */
.case-tile{
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
  transition: transform .15s ease, filter .15s ease;
  height: 100%;
}

.case-tile:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

/* Imagen: consistente y “premium” */
.section-cases .case-shot{
  height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05);
}

/* Imágenes correctas */
.section-cases .shot-1{ background-image: url("../assets/case-1.jpg"); }
.section-cases .shot-2{ background-image: url("../assets/case-2.jpg"); }
.section-cases .shot-3{ background-image: url("../assets/case-3.jpg"); }

.case-label{
  text-align: center;
  font-size: .92rem;
  color: rgba(255, 255, 255, 0.86);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255,255,255,.14);
}

/* Responsive: en pantallas pequeñas se apila */
@media (max-width: 980px){
  .cases-grid{
    grid-template-columns: 1fr;
  }
  .case-gallery{
    grid-template-columns: 1fr;
  }
  .section-cases .case-shot{
    height: 170px;
  }
}

/* Responsive Home */
@media (max-width: 980px){
  .hero-grid-photo{ grid-template-columns: 1fr; }
  .hero-media{ min-height: 280px; }
  .services-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .cases-grid{ grid-template-columns: 1fr; }
  .shot-labels{ grid-template-columns: 1fr; }
}

/* Footer dark */
.footer-dark{
  background: linear-gradient(180deg, rgba(40, 58, 99, 0.96), rgba(255, 255, 255, 0.98));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-dark .footer-links a:hover{ color: #fff; }
.footer-dark .footer-bottom{
  border-top: 1px solid rgba(255, 255, 255, 0.884);
}

/* === FIX imágenes background (robusto y con rutas correctas) === */

/* HERO */
.hero-photo .hero-media{
  position: relative;
  width: 100%;
  min-height: 360px;
  border-radius: 26px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .12);
  overflow: hidden;

  background-image: url("../assets/Pagina_Principal_Vertice.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-photo .hero-media::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(247,248,250,0) 65%
  );
  pointer-events: none;
}

/* WHY */
.section-why .why-media{
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 26px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .12);
  overflow: hidden;

  background-image: url("../assets/why-choose.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-why .why-media::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(247, 248, 250, 0), rgba(247,248,250,.05));
  pointer-events: none;
}

/* CASES */
.section-cases .case-shot{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-cases .shot-1{ background-image: url("../assets/case-1.png"); }
.section-cases .shot-2{ background-image: url("../assets/case-2.png"); }
.section-cases .shot-3{ background-image: url("../assets/case-3.png"); }

/* ==========================
   CTA Final - High Impact (Premium)
   ========================== */

.section-final-cta{
  position: relative;
  padding: 56px 0;
  overflow: hidden;

  /* puente visual entre "Casos de éxito" (oscuro) y footer */
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(37, 99, 235, .22), transparent 58%),
    radial-gradient(680px 260px at 18% 70%, rgba(29, 78, 216, .14), transparent 62%),
    linear-gradient(180deg,
      rgba(15, 23, 42, .10) 0%,
      rgba(247, 248, 250, 1) 55%,
      rgba(247, 248, 250, 1) 100%
    );
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* Ornamentación suave (líneas tipo “grid tech”) */
.section-final-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity:.28;
  background:
    linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg,  rgba(15,23,42,.06) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: radial-gradient(60% 70% at 50% 40%, #000 55%, transparent 100%);
  pointer-events:none;
}

/* Glow principal (impacto visual) */
.section-final-cta::after{
  content:"";
  position:absolute;
  width: 780px;
  height: 420px;
  left: 50%;
  top: -180px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(37,99,235,.30), transparent 60%);
  filter: blur(18px);
  opacity: .85;
  pointer-events:none;
}

.final-cta-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 26px;
  border-radius: 26px;

  /* Glass + depth + borde elegante */
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.62));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 28px 90px rgba(15,23,42,.16),
    0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(12px);
}

/* Línea superior tipo “highlight” para que se vea premium */
.final-cta-inner{
  outline: 1px solid rgba(37,99,235,.14);
  outline-offset: -10px;
}

/* Layout: título + copy + acciones (centrado elegante) */
.final-cta-inner{
  text-align: center;
}

.final-cta-inner h2{
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.final-cta-inner p{
  margin: 0 auto 18px;
  max-width: 70ch;
  color: rgba(71, 85, 105, .96);
}

/* Acciones */
.final-cta-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
}

/* Botón primario con “glow” controlado */
.section-final-cta .btn-primary{
  box-shadow:
    0 16px 40px rgba(29,78,216,.26),
    0 1px 0 rgba(255,255,255,.25) inset;
}

.section-final-cta .btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* Secundario premium (no se pierde) */
.section-final-cta .btn-ghost{
  background: rgba(15, 23, 42, .04);
  border-color: rgba(15, 23, 42, .12);
  box-shadow: none;
}

.section-final-cta .btn-ghost:hover{
  background: rgba(15, 23, 42, .06);
  transform: translateY(-2px);
}

/* Compacto en móvil */
@media (max-width: 780px){
  .section-final-cta{ padding: 46px 0; }
  .final-cta-inner{ padding: 22px 18px; border-radius: 22px; }
}

/* Hero actions premium */

.hero-actions-row{
  display:flex;
  align-items:center;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Botón WhatsApp estilo SaaS */
.btn-whatsapp{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 13px 20px;
  border-radius: 16px;
  font-weight: 300;
  box-shadow: 0 18px 45px rgba(29,78,216,.30);
}

.btn-whatsapp:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.whatsapp-icon{
  width: 18px;
  height: 18px;
}

/* Información de contacto al lado */
.hero-contact-info{
  display:flex;
  flex-direction: column;
  gap:4px;
}

.hero-phone{
  font-weight:600;
  color: var(--text);
  text-decoration:none;
  transition: color .15s ease;
}

.hero-phone:hover{
  color: var(--brand);
}

.hero-response-time{
  font-size: .85rem;
  color: var(--muted);
}

/* ==========================
   CONTACTO - Landing Premium
   ========================== */

.contact-hero{
  padding: 86px 0 64px;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(760px 460px at 85% 12%, rgba(29,78,216,.10), transparent 58%),
    linear-gradient(180deg, rgba(247,248,250,1), rgba(247,248,250,1));
}

.contact-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

.contact-left{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
  padding: 26px;
}

.contact-kicker{
  letter-spacing: .16em;
  font-size: .78rem;
  text-transform: uppercase;
  color: rgba(71,85,105,.95);
}

.contact-title{
  margin-top: 10px;
  line-height: 1.02;
}

.contact-lead{
  margin-top: 12px;
  color: rgba(71,85,105,.95);
  max-width: 70ch;
}

.contact-bullets{
  margin-top: 16px;
  display:grid;
  gap: 10px;
  padding-left: 18px;
  color: rgba(71,85,105,.95);
}
.contact-bullets li::marker{ color: rgba(29,78,216,.95); }

.contact-direct{
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(37,99,235,.18);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(255,255,255,.88));
}

.contact-direct-title{
  margin-bottom: 6px;
}

.contact-direct-cards{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

.contact-direct-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.contact-direct-card:hover{
  transform: translateY(-1px);
}

.contact-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.12);
  color: rgba(15,23,42,.88);
}
.contact-icon svg{ width: 20px; height: 20px; }

.contact-icon-wa{
  background: rgba(34,197,94,.14);
  color: rgba(20,83,45,.95);
}

.contact-direct-text{
  font-weight: 700;
  color: rgba(15,23,42,.95);
}

.contact-meta{
  margin-top: 12px;
  color: rgba(71,85,105,.95);
  font-size: .92rem;
}

/* Panel derecho: glass dark */
.contact-right{
  position: relative;
  border-radius: 26px;
  padding: 24px;
  overflow: hidden;

  background:
    radial-gradient(900px 520px at 70% 20%, rgba(37,99,235,.40), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.88));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 90px rgba(15,23,42,.22);
}

.contact-form-head{
  color: rgba(255,255,255,.95);
}

.contact-form-title{ margin-top: 10px; }
.contact-form-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.78);
}

.contact-form{
  margin-top: 16px;
  display:grid;
  gap: 12px;
}

.contact-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-right .label{
  color: rgba(255,255,255,.92);
}

.contact-right .input,
.contact-right .textarea{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.contact-right .input::placeholder,
.contact-right .textarea::placeholder{
  color: rgba(255,255,255,.60);
}

.contact-right .hint,
.contact-right .muted{
  color: rgba(255,255,255,.72);
}

.contact-submit{
  width: 100%;
  border-radius: 999px;
  padding: 12px 18px;
}

.contact-legal{
  margin-top: -6px;
}

/* Responsive */
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-form-grid{ grid-template-columns: 1fr; }
}

/* ==========================
   CONTACTO - Premium limpio
   ========================== */

.contact-hero{
  position: relative;
  overflow: hidden;
  padding: 86px 0 64px;

  background:
    radial-gradient(900px 520px at 18% 8%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(760px 460px at 85% 12%, rgba(29,78,216,.10), transparent 58%),
    linear-gradient(180deg, rgba(247,248,250,1), rgba(247,248,250,1));
}

/* ==========================
   GRID
   ========================== */

.contact-grid{
  position: relative;
  z-index: 1;

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;

  align-items: stretch;
}

.contact-left,
.contact-right{
  height: 100%;
  display:flex;
  flex-direction:column;
}

/* ==========================
   COLUMNA IZQUIERDA
   ========================== */

.contact-left{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 26px;
  padding: 26px;

  box-shadow: 0 18px 45px rgba(15,23,42,.10);
}

/* ==========================
   FORMULARIO
   ========================== */

.contact-right{
  position: relative;

  border-radius: 26px;
  padding: 24px;

  background:
    radial-gradient(900px 520px at 70% 18%, rgba(37,99,235,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));

  border: 1px solid rgba(15,23,42,.10);

  box-shadow:
    0 26px 70px rgba(15,23,42,.12),
    0 1px 0 rgba(255,255,255,.65) inset;

  backdrop-filter: blur(10px);
}

/* ==========================
   TIPOGRAFÍA
   ========================== */

.contact-form-head .contact-kicker{
  color: rgba(71,85,105,.95);
}

.contact-form-title{
  color: rgba(15,23,42,.96);
}

.contact-form-sub{
  color: rgba(71,85,105,.92);
}

/* ==========================
   INPUTS
   ========================== */

.contact-right .label{
  color: rgba(15,23,42,.92);
}

.contact-right .input,
.contact-right .textarea{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.95);
}

.contact-right .input::placeholder,
.contact-right .textarea::placeholder{
  color: rgba(71,85,105,.70);
}

.contact-right .input:focus,
.contact-right .textarea:focus{
  outline:none;

  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

/* ==========================
   HINT
   ========================== */

.contact-right .hint,
.contact-right .muted{
  color: rgba(71,85,105,.85);
}

/* ==========================
   BOTÓN
   ========================== */

.contact-submit{
  width:100%;
  border-radius:999px;

  padding:12px 18px;
  margin-top:4px;

  box-shadow:0 18px 45px rgba(29,78,216,.22);
}

/* ==========================
   FORM
   ========================== */

.contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}

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

@media (max-width:980px){

  .contact-grid{
    grid-template-columns:1fr;
  }

}

/* ==========================
   EQUIPO (equipo.html) — Premium, responsive, con imagen controlada
   ========================== */

.team-page{
  padding-top: clamp(28px, 4vw, 54px);
  padding-bottom: clamp(28px, 4vw, 54px);
}

.team-page-head{
  text-align: center;
  margin-bottom: clamp(18px, 3.2vw, 34px);
}

.team-page-title{
  margin-top: 10px;
  letter-spacing: -0.02em;
}

.team-page-sub{
  margin-top: 10px;
  max-width: 110ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Grid responsive sin “saltos bruscos” */
.team-grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 340px));
  justify-content: center;
  gap: 50px;
}

/* Tarjeta más limpia (menos sombra pesada) */
.team-card{
  max-width:460px;   /* antes 340 o 400 */
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:0 14px 36px rgba(15,23,42,.12);
  overflow:hidden;
}

.team-card:hover{
  transform: translateY(-2px);
  border-color: rgba(29,78,216,.22);
  box-shadow:
    0 18px 54px rgba(15,23,42,.14);
}

/* Foto: tamaño controlado + sombra suave + borde redondeado */
.team-photo-wrap{
  padding: 18px 18px 0;
}

.team-photo{
  width: 100%;
  height: clamp(320px, 48vw, 320px); /* ↓ antes 420px (muy grande) */
  object-fit: cover;
  object-position: top;
  border-radius: 16px;
  box-shadow:
    0 10px 26px rgba(32, 39, 54, 0.12); /* sombra suave */
  background: rgba(218, 229, 240, 0.9);
}

/* Contenido con espaciado real y tipografía más “ejecutiva” */
.team-body{
  padding:14px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.team-name{
  font-size: clamp(1.05rem, 1.1vw + 0.9rem, 1.28rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
}

.team-role{
  font-weight: 650;
  margin: 0;
}

/* Bio: mejor lectura + no se “pega” */
.team-bio{
  line-height: 1.75;
  margin: 0;
  color: rgba(51,65,85,.95);
  font-size: 0.98rem;
}

/* Tags: más finos y consistentes */
.team-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.team-tag{
  font-size: .84rem;
  color: rgba(71,85,105,.95);
  background: rgba(241,245,249,.82);
  border: 1px solid rgba(15,23,42,.10);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Breakpoints --- */
@media (max-width: 980px){
  .team-grid{ grid-template-columns: 1fr; }
  .team-photo-wrap{ padding: 16px 16px 0; }
  .team-body{ padding: 14px 16px 16px; }
}

@media (max-width: 520px){
  .team-card{ border-radius: 18px; }
  .team-photo{ border-radius: 14px; }
  .team-tag{ font-size: .82rem; padding: 6px 9px; }
}

/* ==========================
   SERVICIOS PAGE - SCOPED
   ========================== */

.vh-services-page{
  background:
    radial-gradient(920px 520px at 18% 6%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(760px 420px at 85% 12%, rgba(29,78,216,.08), transparent 58%),
    linear-gradient(180deg, #F7F8FA 0%, #F3F7FF 100%);
}

/* HERO */

.vh-services-hero{
  padding: 82px 0 34px;
}

.vh-services-hero__grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 42px;
  align-items: center;
}

.vh-services-hero__content{
  max-width: 680px;
}

.vh-services-kicker{
  display: inline-block;
  margin-bottom: 16px;
  color: var(--brand);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vh-services-title{
  margin: 0;
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  max-width: 11ch;
}

.vh-highlight{
  color: var(--brand);
  position: relative;
}

.vh-highlight::after{
  content:"";
  position:absolute;
  left:0;
  bottom:.08em;
  width:100%;
  height:.18em;
  background: linear-gradient(90deg, rgba(37,99,235,.26), rgba(59,130,246,.08));
  border-radius: 999px;
  z-index:-1;
}

.vh-services-lead{
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.85;
}

.vh-services-hero__actions{
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.vh-services-hero__visual{
  display: flex;
  justify-content: flex-end;
}

.vh-services-hero-card{
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 360px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 28px 68px rgba(15,23,42,.12);
  background: #EAF1FF;
}

.vh-services-hero-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vh-services-hero-card__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(247,248,250,.95) 0%, rgba(247,248,250,.72) 28%, rgba(247,248,250,.08) 100%);
}

.vh-services-hero-card__content{
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vh-services-hero-card__content span{
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  font-size: .82rem;
  font-weight: 700;
}

.vh-services-hero-card__content strong{
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 16ch;
}

/* INTRO */

.vh-services-intro-section{
  padding: 18px 0 10px;
}

.vh-services-intro{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.vh-services-intro__kicker{
  display: inline-block;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.vh-services-intro h2{
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.vh-services-intro p{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* GRID */

.vh-services-section{
  padding: 56px 0 64px;
}

.vh-services-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
}

.vh-service-card{
  position: relative;
  height: 240px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
  background: #fff;
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.vh-service-card--featured{
  grid-column: 1 / -1;
  height: 270px;
}

.vh-service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(15,23,42,.12);
}

.vh-service-card__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  z-index: 1;
}

.vh-service-card__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(247,248,250,.98) 0%,
    rgba(247,248,250,.95) 24%,
    rgba(247,248,250,.86) 40%,
    rgba(247,248,250,.52) 58%,
    rgba(247,248,250,.16) 76%,
    rgba(247,248,250,0) 100%
  );
}

.vh-service-card__body{
  position: relative;
  z-index: 2;
  width: 52%;
  height: 100%;
  padding: 24px 24px 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vh-service-card--featured .vh-service-card__body{
  width: 46%;
}

.vh-service-card__eyebrow{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: rgba(37,99,235,.12);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.vh-service-card h3{
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  max-width: 15ch;
}

.vh-service-card p{
  margin: 0;
  color: #23314d;
  font-size: .95rem;
  line-height: 1.65;
  max-width: 30ch;
}

/* CTA */

.vh-services-cta{
  padding: 8px 0 86px;
}

.vh-services-cta__box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 32px;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.75));
  box-shadow: 0 22px 60px rgba(15,23,42,.08);
}

.vh-services-cta__content h2{
  margin: 8px 0 10px;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.vh-services-cta__content p{
  color: var(--muted);
  max-width: 760px;
  line-height: 1.8;
}

/* RESPONSIVE */

@media (max-width: 1100px){
  .vh-services-hero__grid{
    grid-template-columns: 1fr;
  }

  .vh-services-hero__visual{
    justify-content: center;
  }

  .vh-services-title{
    max-width: 100%;
  }
}

@media (max-width: 860px){
  .vh-services-grid{
    grid-template-columns: 1fr;
  }

  .vh-service-card,
  .vh-service-card--featured{
    height: 235px;
  }

  .vh-service-card__body,
  .vh-service-card--featured .vh-service-card__body{
    width: 58%;
  }

  .vh-services-cta__box{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px){
  .vh-services-hero{
    padding: 68px 0 24px;
  }

  .vh-services-title{
    font-size: 2.35rem;
    white-space: normal;
  }

  .vh-services-hero__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .vh-service-card,
  .vh-service-card--featured{
    height: 250px;
  }

  .vh-service-card__body,
  .vh-service-card--featured .vh-service-card__body{
    width: 66%;
    padding: 20px 18px 20px 20px;
  }

  .vh-service-card p{
    font-size: .9rem;
    line-height: 1.55;
  }

  .vh-services-hero-card{
    min-height: 300px;
  }
}

/* =========================================================
   CASOS DE EXITO | DINAMICO | VERTICE HUB
========================================================= */

.vh-cases-hero{
  position: relative;
  overflow: hidden;
  padding: 98px 0 48px;
  background:
    radial-gradient(860px 420px at 10% 8%, rgba(37, 99, 235, 0.11), transparent 60%),
    radial-gradient(700px 360px at 88% 12%, rgba(2, 132, 199, 0.08), transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #f7f8fa 100%);
}

.vh-cases-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(15, 23, 42, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.016) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.vh-cases-hero__content{
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.vh-cases-kicker{
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.08);
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(29, 78, 216, 0.10);
}

.vh-cases-title{
  margin: 0 0 18px;
  color: #0f172a;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.vh-cases-lead{
  margin: 0 auto;
  max-width: 770px;
  color: #475569;
  font-size: 1.08rem;
  line-height: 1.82;
}

/* SELECTOR */
.vh-cases-selector-section{
  padding: 8px 0 26px;
  background: #f7f8fa;
}

.vh-cases-selector{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .vh-cases-selector{
    grid-template-columns: 1fr;
  }
} 

.vh-case-tab{
  appearance: none;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-radius: 24px;
  padding: 24px 22px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    color 0.28s ease;
}

.vh-case-tab::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(320px 140px at 0% 0%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(135deg, rgba(29,78,216,0.00) 0%, rgba(29,78,216,0.00) 100%);
  opacity: 0;
  transition: opacity 0.28s ease, background 0.28s ease;
  pointer-events: none;
}

.vh-case-tab:not(.is-active):hover{
  transform: translateY(-4px);
  border-color: rgba(29, 78, 216, 0.28);
  box-shadow:
    0 20px 40px rgba(29, 78, 216, 0.18),
    0 8px 24px rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(135deg, #0f2f6d 0%, #1d4ed8 52%, #2563eb 100%);
}

.vh-case-tab:hover::before{
  opacity: 1;
  background:
    radial-gradient(320px 140px at 0% 0%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
}

.vh-case-tab:hover .vh-case-tab__eyebrow{
  color: #dbeafe;
}

.vh-case-tab:hover strong{
  color: #ffffff;
}

.vh-case-tab:hover small{
  color: rgba(255,255,255,0.88);
}

.vh-case-tab.is-active{
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow:
    0 18px 40px rgba(37, 99, 235, 0.10),
    0 8px 24px rgba(15, 23, 42, 0.06);
  background:
    radial-gradient(380px 160px at 0% 0%, rgba(37,99,235,0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.vh-case-tab.is-active:hover{
  transform: translateY(-2px);

  background:
    radial-gradient(380px 160px at 0% 0%, rgba(37,99,235,0.10), transparent 55%),
    linear-gradient(180deg, #c0b9b9 0%, #446699 100%);

  border-color: rgba(37, 99, 235, 0.30);

  box-shadow:
    0 18px 40px rgba(37, 99, 235, 0.14),
    0 8px 24px rgba(15, 23, 42, 0.08);
}

.vh-case-tab__eyebrow{
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 10px;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.28s ease;
}

.vh-case-tab strong{
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 1.24rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: color 0.28s ease;
}

.vh-case-tab small{
  position: relative;
  z-index: 1;
  display: block;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.7;
  transition: color 0.28s ease;
}

/* PANEL DINAMICO */
.vh-cases-dynamic-section{
  padding: 0 0 42px;
  background: #f7f8fa;
}

.vh-case-dynamic-card{
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 30px;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(255,255,255,0.7) inset;
}

.vh-case-dynamic__visual{
  position: relative;
  overflow: hidden;
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  color: #ffffff;
  isolation: isolate;
  transition: background 0.35s ease;
}

.vh-case-dynamic-card.theme-churn .vh-case-dynamic__visual{
  background:
    linear-gradient(150deg, #081120 0%, #0f1f3b 28%, #12356f 68%, #2563eb 100%);
}

.vh-case-dynamic-card.theme-ingresos .vh-case-dynamic__visual{
  background:
    linear-gradient(150deg, #081120 0%, #0b2232 26%, #11466c 70%, #0284c7 100%);
}

.vh-case-pattern{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.8;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.15), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,0.09), transparent 25%),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px;
}

.vh-case-badge{
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.vh-case-graphic{
  position: relative;
  margin-bottom: 24px;
  min-height: 170px;
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 30px rgba(0,0,0,0.14);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.vh-case-graphic::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 28%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  pointer-events: none;
}

.vh-graphic-card{
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.vh-graphic-card--main strong{
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.vh-graphic-card--main small{
  color: rgba(255,255,255,0.76);
  font-size: 0.78rem;
  font-weight: 600;
}

.vh-graphic-label{
  color: rgba(255,255,255,0.70);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vh-graphic-chart{
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  align-items: end;
  gap: 8px;
  height: 84px;
  width: 126px;
}

.vh-bar{
  display: block;
  width: 16px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.34));
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.vh-graphic-line{
  position: absolute;
  left: 22px;
  right: 142px;
  bottom: 30px;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 64px;
}

.vh-graphic-line span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.12);
}

.vh-graphic-line span:nth-child(1){ transform: translateY(28px); }
.vh-graphic-line span:nth-child(2){ transform: translateY(16px); }
.vh-graphic-line span:nth-child(3){ transform: translateY(4px); }
.vh-graphic-line span:nth-child(4){ transform: translateY(-10px); }

.vh-graphic-line::before{
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 30px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.36), rgba(255,255,255,0.82));
  transform: skewY(-12deg);
  transform-origin: left center;
}

.vh-graphic-dots{
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 1;
  display: flex;
  gap: 8px;
}

.vh-graphic-dots span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.08);
}

.vh-case-visual-title{
  margin: 0 0 12px;
  font-size: 1.52rem;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vh-case-visual-text{
  margin: 0 0 24px;
  color: rgba(255,255,255,0.88);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 280px;
}

.vh-case-mini-stats{
  display: grid;
  gap: 12px;
}

.vh-mini-stat{
  padding: 14px 14px 13px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}

.vh-mini-stat__label{
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.70);
  font-size: 0.77rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vh-mini-stat strong{
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 700;
}

.vh-case-dynamic__content{
  padding: 36px 38px 34px;
}

.vh-case-topline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.vh-case-sector,
.vh-case-objective{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.vh-case-sector{
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.08);
}

.vh-case-objective{
  background: #f8fafc;
  color: #334155;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.vh-case-title{
  margin: 0 0 14px;
  color: #0f172a;
  font-size: clamp(1.46rem, 2.3vw, 2.02rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.vh-case-summary{
  margin: 0 0 24px;
  color: #475569;
  font-size: 1rem;
  line-height: 1.85;
}

.vh-case-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.vh-case-block{
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.025);
}

.vh-case-block::before{
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: 0.9;
}

.vh-case-block h4{
  margin: 8px 0 10px;
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 800;
}

.vh-case-block p{
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.76;
}

.vh-case-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vh-case-tags span{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #334155;
  font-size: 0.83rem;
  font-weight: 700;
}

/* CTA */
.vh-cases-cta{
  padding: 30px 0 92px;
  background: #f7f8fa;
}

.vh-cases-cta__box{
  position: relative;
  overflow: hidden;
  padding: 44px 34px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(480px 230px at 20% 20%, rgba(37,99,235,0.18), transparent 58%),
    radial-gradient(420px 240px at 85% 30%, rgba(56,189,248,0.14), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #102c5c 45%, #1d4ed8 100%);
  box-shadow: 0 26px 65px rgba(15, 23, 42, 0.14);
}

.vh-cases-cta__box::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.vh-cases-cta__kicker{
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #dbeafe;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vh-cases-cta__box h2{
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(1.82rem, 3vw, 2.62rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.vh-cases-cta__box p{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 22px;
  color: rgba(255,255,255,0.88);
  font-size: 1rem;
  line-height: 1.82;
}

.vh-cases-cta__actions{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.vh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  transition: all 0.25s ease;
}

.vh-btn--primary{
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.vh-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
}

/* RESPONSIVE */
@media (max-width: 1150px){
  .vh-case-dynamic-card{
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .vh-case-dynamic__content{
    padding: 32px 30px 30px;
  }

  .vh-case-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px){
  .vh-cases-selector{
    grid-template-columns: 1fr;
  }

  .vh-case-dynamic-card{
    grid-template-columns: 1fr;
  }

  .vh-case-dynamic__visual{
    padding: 28px 22px 24px;
  }

  .vh-case-visual-text{
    max-width: none;
  }

  .vh-case-dynamic__content{
    padding: 26px 22px 24px;
  }

  .vh-cases-cta__box{
    padding: 34px 22px;
  }
}

@media (max-width: 560px){
  .vh-cases-title{
    font-size: 2rem;
  }

  .vh-case-tab{
    padding: 20px 18px;
  }

  .vh-case-tab strong{
    font-size: 1.08rem;
  }

  .vh-case-title{
    font-size: 1.34rem;
  }

  .vh-case-summary,
  .vh-case-block p,
  .vh-case-visual-text,
  .vh-cases-cta__box p,
  .vh-case-tab small{
    font-size: 0.95rem;
    line-height: 1.72;
  }
}
.vh-case-dynamic-card.theme-forecast .vh-case-dynamic__visual{
  background:
    linear-gradient(150deg, #081120 0%, #1b1f4a 26%, #4f46e5 68%, #2563eb 100%);
}

/* ==========================
   Legal / Tratamiento de datos
   ========================== */

.legal-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 52px;
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(660px 360px at 90% 6%, rgba(14,165,233,.12), transparent 64%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.legal-orb{
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .42;
  pointer-events: none;
  animation: legalFloat 9s ease-in-out infinite;
}

.legal-orb-one{
  left: -70px;
  top: 70px;
  background: rgba(37,99,235,.20);
}

.legal-orb-two{
  right: -80px;
  bottom: -50px;
  background: rgba(14,165,233,.18);
  animation-delay: 1.6s;
}

.legal-hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
}

.legal-hero-copy{
  animation: legalFadeUp .75s ease both;
}

.legal-hero-copy h1{
  margin-top: 12px;
  max-width: 850px;
}

.legal-lead{
  margin-top: 16px;
  max-width: 780px;
  color: var(--muted);
}

.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 24px;
}

.legal-meta span{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: .88rem;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

.legal-hero-card{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
  padding: 26px;
  animation: legalFadeUp .85s ease .12s both;
}

.legal-hero-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(37,99,235,.10), transparent 40%),
    radial-gradient(280px 160px at 100% 0%, rgba(14,165,233,.13), transparent 60%);
  pointer-events:none;
}

.legal-hero-card > *{
  position: relative;
  z-index: 1;
}

.legal-shield{
  width: 74px;
  height: 74px;
  display:grid;
  place-items:center;
  border-radius: 24px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
  box-shadow: 0 18px 40px rgba(37,99,235,.28);
  animation: legalPulse 2.8s ease-in-out infinite;
}

.legal-shield span{
  color:#fff;
  font-weight: 900;
  letter-spacing: .06em;
}

.legal-hero-card h2{
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.legal-hero-card p{
  color: var(--muted);
  margin-bottom: 18px;
}

.legal-trust-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.legal-trust-grid div{
  background: rgba(248,250,252,.85);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 10px;
  text-align:center;
  transition: transform .22s ease, box-shadow .22s ease;
}

.legal-trust-grid div:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15,23,42,.09);
}

.legal-trust-grid strong{
  display:block;
  color: var(--brand);
  font-size: 1rem;
}

.legal-trust-grid span{
  display:block;
  color: var(--muted);
  font-size: .78rem;
  margin-top: 3px;
}

.legal-section{
  padding-top: 36px;
}

.legal-summary{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.legal-summary-card{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation: legalFadeUp .7s ease both;
}

.legal-summary-card:nth-child(2){
  animation-delay: .08s;
}

.legal-summary-card:nth-child(3){
  animation-delay: .16s;
}

.legal-summary-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 52px rgba(15,23,42,.10);
  border-color: rgba(37,99,235,.22);
}

.legal-summary-icon{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  color: var(--brand);
  background: rgba(37,99,235,.10);
  font-weight: 800;
}

.legal-summary-card h3{
  margin-bottom: 4px;
  font-size: 1rem;
}

.legal-summary-card p{
  color: var(--muted);
  font-size: .92rem;
}

.legal-layout{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items:start;
}

.legal-sidebar{
  position: sticky;
  top: 118px;
  display:grid;
  gap: 11px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(15,23,42,.10);
  padding: 22px;
  animation: legalFadeUp .75s ease both;
  transition: transform .25s ease, box-shadow .25s ease;
}

.legal-sidebar::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 28px;
  background:
    radial-gradient(240px 140px at 20% 0%, rgba(37,99,235,.12), transparent 64%),
    radial-gradient(220px 130px at 100% 100%, rgba(14,165,233,.10), transparent 64%);
  pointer-events:none;
}

.legal-sidebar > *{
  position: relative;
  z-index: 1;
}

.legal-sidebar strong{
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1.08rem;
}

.legal-sidebar small{
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.legal-sidebar a{
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--muted);
  font-size: 1rem;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.legal-sidebar a span{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(37,99,235,.09);
  color: var(--brand);
  font-size: .78rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.legal-sidebar a:hover{
  background: rgba(37,99,235,.09);
  color: var(--text);
  transform: translateX(6px);
  border-color: rgba(37,99,235,.16);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}

.legal-sidebar a.is-active{
  background: linear-gradient(135deg, rgba(37,99,235,.13), rgba(14,165,233,.08));
  color: var(--text);
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 16px 34px rgba(37,99,235,.10);
  transform: translateX(6px);
}

.legal-sidebar a.is-active span{
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
  color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,.24);
}

.legal-card{
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 30px;
  animation: legalFadeUp .8s ease .1s both;
}

.legal-card::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(14,165,233,.65), rgba(37,99,235,.10));
}

.legal-block{
  position: relative;
  scroll-margin-top: 110px;
  padding: 0 0 26px 0;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.legal-block:last-of-type{
  border-bottom: 0;
  margin-bottom: 0;
}

.legal-block-head{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 12px;
}

.legal-number{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 15px;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  font-weight: 900;
  font-size: .82rem;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.14);
}

.legal-block h2{
  margin: 0;
}

.legal-block p{
  color: var(--muted);
  margin-top: 10px;
}

.legal-block a{
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,.25);
}

.legal-block a:hover{
  border-bottom-color: rgba(37,99,235,.75);
}

.legal-list{
  margin-top: 14px;
  padding-left: 0;
  color: var(--muted);
  display:grid;
  gap: 9px;
  list-style: none;
}

.legal-list li{
  position: relative;
  padding-left: 28px;
}

.legal-list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .48em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(37,99,235,.10);
}

.legal-list-cards{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.legal-list-cards li{
  padding: 14px 14px 14px 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(248,250,252,.72);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.legal-list-cards li::before{
  left: 16px;
  top: 20px;
}

.legal-list-cards li:hover{
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
}

.legal-disclaimer{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-top: 28px;
  padding: 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(37,99,235,.09), rgba(14,165,233,.06));
  border: 1px solid rgba(37,99,235,.18);
  color: var(--muted);
}

.legal-disclaimer strong{
  color: var(--text);
}

.legal-disclaimer-icon{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(37,99,235,.12);
  color: var(--brand);
  font-weight: 900;
  font-style: normal;
}

@keyframes legalFadeUp{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes legalFloat{
  0%, 100%{
    transform: translate3d(0,0,0) scale(1);
  }
  50%{
    transform: translate3d(20px,-18px,0) scale(1.04);
  }
}

@keyframes legalPulse{
  0%, 100%{
    transform: scale(1);
    box-shadow: 0 18px 40px rgba(37,99,235,.28);
  }
  50%{
    transform: scale(1.04);
    box-shadow: 0 24px 52px rgba(37,99,235,.36);
  }
}

@media (max-width: 980px){
  .legal-hero-grid{
    grid-template-columns: 1fr;
  }

  .legal-hero-card{
    max-width: 520px;
  }

  .legal-summary{
    grid-template-columns: 1fr;
  }

  .legal-layout{
    grid-template-columns: 1fr;
  }

  .legal-sidebar{
    position: static;
  }

  .legal-list-cards{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .legal-hero{
    padding: 76px 0 38px;
  }

  .legal-hero-card{
    padding: 22px;
  }

  .legal-trust-grid{
    grid-template-columns: 1fr;
  }

  .legal-card{
    padding: 22px;
    border-radius: 22px;
  }

  .legal-block-head{
    align-items:flex-start;
  }

  .legal-number{
    width: 38px;
    height: 38px;
  }

  .legal-meta span{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .legal-orb,
  .legal-shield,
  .legal-hero-copy,
  .legal-hero-card,
  .legal-summary-card,
  .legal-sidebar,
  .legal-card{
    animation: none;
  }

  .legal-summary-card,
  .legal-sidebar a,
  .legal-list-cards li,
  .legal-trust-grid div{
    transition: none;
  }
}

/* ==========================
   Política de cookies
   Complemento visual
   ========================== */

.cookies-hero{
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.15), transparent 62%),
    radial-gradient(660px 360px at 90% 6%, rgba(14,165,233,.13), transparent 64%),
    radial-gradient(560px 320px at 50% 100%, rgba(245,158,11,.08), transparent 65%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.cookies-shield{
  background:
    linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
}

.cookies-list-cards li strong{
  display:block;
  color: var(--text);
  margin-bottom: 4px;
}

.cookies-note{
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245,158,11,.10), rgba(37,99,235,.06));
  border: 1px solid rgba(245,158,11,.22);
  color: var(--muted);
}

.cookies-note strong{
  color: var(--text);
}

.cookies-hero .legal-hero-card::after{
  content:"";
  position:absolute;
  right: 24px;
  top: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 9%, transparent 10%),
    radial-gradient(circle at 65% 40%, rgba(255,255,255,.95) 0 7%, transparent 8%),
    radial-gradient(circle at 46% 68%, rgba(255,255,255,.95) 0 6%, transparent 7%),
    linear-gradient(135deg, rgba(37,99,235,.22), rgba(14,165,233,.12));
  opacity: .75;
  pointer-events: none;
  animation: legalFloat 7s ease-in-out infinite;
}

/* ==========================
   Footer legal links hover
   ========================== */

.footer a[href="/tratamiento-datos.html"],
.footer a[href="/politica-cookies.html"],
footer a[href="/tratamiento-datos.html"],
footer a[href="/politica-cookies.html"]{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  transition: color .2s ease, background .2s ease, transform .1s ease;
}

.footer a[href="/tratamiento-datos.html"]:hover,
.footer a[href="/politica-cookies.html"]:hover,
footer a[href="/tratamiento-datos.html"]:hover,
footer a[href="/politica-cookies.html"]:hover{
  color: #ffffff !important;
  /*background: rgba(0, 0, 0, 0.12);*/
  transform: translateY(-1px);
}

/* ==========================
   Página pública de reseñas
   ========================== */

.review-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 52px;
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(660px 360px at 90% 6%, rgba(14,165,233,.12), transparent 64%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.review-hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items:center;
}

.review-hero-copy{
  animation: legalFadeUp .75s ease both;
}

.review-hero-copy h1{
  margin-top: 12px;
}

.review-hero-copy p{
  max-width: 760px;
  margin-top: 16px;
  color: var(--muted);
}

.review-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.review-hero-pills span{
  display:inline-flex;
  align-items:center;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  color:var(--muted);
  font-size:.88rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.review-hero-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(226,232,240,.9);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  padding:26px;
  animation:legalFadeUp .85s ease .12s both;
}

.review-badge{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:24px;
  margin-bottom:18px;
  background:linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
  color:#fff;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 18px 40px rgba(37,99,235,.28);
  animation:legalPulse 2.8s ease-in-out infinite;
}

.review-hero-card h2{
  font-size:1.25rem;
  margin-bottom:10px;
}

.review-hero-card p{
  color:var(--muted);
}

.review-section{
  padding-top:42px;
}

.review-form-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap:24px;
  align-items:start;
}

.review-form-card,
.review-side-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.review-form-card{
  padding:30px;
}

.form-head{
  margin-bottom:22px;
}

.form-head p{
  margin-top:8px;
  color:var(--muted);
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

.field{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}

.field label{
  font-weight:700;
  color:var(--text);
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 14px;
  background:#fff;
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.rating-input{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:6px;
}

.rating-input input{
  display:none;
}

.rating-input label{
  font-size:2rem;
  cursor:pointer;
  color:#cbd5e1;
  transition:color .18s ease, transform .18s ease;
}

.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label{
  color:#f59e0b;
  transform:translateY(-2px);
}

.review-legal a{
  color:var(--brand);
  font-weight:700;
}

.review-submit{
  margin-top:6px;
}

.review-message{
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  display:none;
}

.review-message.is-loading,
.review-message.is-success,
.review-message.is-error{
  display:block;
}

.review-message.is-loading{
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.16);
  color:var(--brand);
}

.review-message.is-success{
  background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.20);
  color:#047857;
}

.review-message.is-error{
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.20);
  color:#b91c1c;
}

.review-side-card{
  position:sticky;
  top:110px;
  padding:24px;
  background:
    radial-gradient(260px 160px at 20% 0%, rgba(37,99,235,.10), transparent 64%),
    rgba(255,255,255,.92);
}

.review-side-card h3{
  margin-bottom:14px;
}

.review-side-card ul{
  display:grid;
  gap:12px;
  padding-left:20px;
  color:var(--muted);
}

@media (max-width: 980px){
  .review-hero-grid,
  .review-form-layout{
    grid-template-columns:1fr;
  }

  .review-hero-card,
  .review-side-card{
    max-width:540px;
  }

  .review-side-card{
    position:static;
  }
}

@media (max-width: 640px){
  .review-hero{
    padding:76px 0 38px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .review-form-card{
    padding:22px;
    border-radius:22px;
  }
}

/* ==========================
   Reseñas en index con carrusel
   ========================== */

.reviews-section-gradient{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 12% 12%, rgba(37,99,235,.28), transparent 62%),
    radial-gradient(680px 380px at 90% 8%, rgba(124,58,237,.24), transparent 64%),
    radial-gradient(560px 320px at 50% 100%, rgba(14,165,233,.14), transparent 65%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 45%, #1d4ed8 100%);
  color: #ffffff;
}

.reviews-section-gradient::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 24%);
  pointer-events:none;
}

.reviews-section-gradient .container{
  position: relative;
  z-index: 1;
}

.reviews-section-gradient .section-head h2,
.reviews-section-gradient .section-head p,
.reviews-section-gradient .kicker-soft{
  color: #ffffff;
}

.reviews-section-gradient .section-head p{
  opacity: .84;
}

.reviews-carousel{
  position: relative;
  margin-top: 28px;
  padding: 0 54px;
}

.reviews-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  min-height: auto;
}

.review-card{
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(2,6,23,.24);
  padding: 16px 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation: reviewFadeIn .32s ease both;
}

.review-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(2,6,23,.32);
  border-color: rgba(255,255,255,.42);
}

.review-stars{
  color:#f59e0b;
  letter-spacing: .08em;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.review-card p{
  color: var(--muted);
  line-height: 1.65;
}

.review-author{
  display:grid;
  gap: 3px;
  margin-top: 8px;
}

.review-author strong{
  color: var(--text);
}

.review-author span{
  color: var(--muted);
  font-size: .9rem;
}

.reviews-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background: rgba(255,255,255,.16);
  color:#ffffff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(2,6,23,.22);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.reviews-arrow:hover{
  transform: translateY(-50%) scale(1.07);
  background: rgba(255,255,255,.24);
}

.reviews-arrow:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform: translateY(-50%) scale(1);
}

.reviews-arrow-left{
  left:0;
}

.reviews-arrow-right{
  right:0;
}

.reviews-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
}

.reviews-pagination button{
  width:10px;
  height:10px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  cursor:pointer;
  transition: width .2s ease, background .2s ease;
}

.reviews-pagination button.is-active{
  width:28px;
  background:#ffffff;
}

.review-empty{
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.38);
  border-radius: 18px;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.08);
}

@keyframes reviewFadeIn{
  from{
    opacity:0;
    transform: translateY(10px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

@media (max-width: 980px){
  .reviews-carousel{
    padding: 0 48px;
  }

  .reviews-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    min-height: auto;
  }
}

@media (max-width: 640px){
  .reviews-carousel{
    padding: 0;
  }

  .reviews-grid{
    grid-template-columns: 1fr;
  }

  .reviews-arrow{
    position: static;
    transform:none;
    margin-top:16px;
  }

  .reviews-arrow:hover{
    transform:scale(1.05);
  }

  .reviews-carousel{
    display:grid;
  }

  .reviews-arrow-left{
    justify-self:start;
  }

  .reviews-arrow-right{
    justify-self:end;
    margin-top:-44px;
  }
}
.reviews-section-gradient .section-head p{
  opacity: .84;
}

.reviews-section-gradient .review-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 70px rgba(2,6,23,.24);
}

.reviews-section-gradient .review-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(2,6,23,.32);
}

.reviews-section-gradient .review-card p{
  color: var(--muted);
}

.reviews-section-gradient .review-author strong{
  color: var(--text);
}

.reviews-section-gradient .review-author span{
  color: var(--muted);
}

.reviews-section-gradient .section-actions .btn{
  box-shadow: 0 18px 42px rgba(15,23,42,.24);
}

/* ==========================
   Servicios - enlaces detalle
   ========================== */

.vh-service-card__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: #ffffff;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.vh-service-card__link:hover{
  color: #ffffff;
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.42);
  transform: translateY(-2px);
}

/* ==========================
   Página detalle de servicios
   ========================== */

.service-detail-page{
  background: #f8fafc;
}

.service-detail-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 64px;
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(680px 380px at 90% 8%, rgba(124,58,237,.16), transparent 64%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.service-detail-orb{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:999px;
  filter: blur(18px);
  opacity:.42;
  pointer-events:none;
  animation: legalFloat 9s ease-in-out infinite;
}

.service-detail-orb-one{
  left:-70px;
  top:70px;
  background:rgba(37,99,235,.22);
}

.service-detail-orb-two{
  right:-80px;
  bottom:-50px;
  background:rgba(124,58,237,.18);
  animation-delay:1.6s;
}

.service-detail-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 410px;
  gap:42px;
  align-items:center;
}

.service-detail-hero__copy h1{
  margin-top:12px;
  max-width:860px;
}

.service-detail-hero__copy p{
  margin-top:16px;
  max-width:760px;
  color:var(--muted);
}

.service-detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.service-detail-hero__card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  min-height:360px;
  box-shadow:0 28px 80px rgba(15,23,42,.16);
}

.service-detail-hero__card img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}

.service-detail-hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.68)),
    radial-gradient(340px 220px at 80% 20%, rgba(37,99,235,.28), transparent 65%);
}

.service-detail-hero__content{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  display:grid;
  gap:6px;
  color:#fff;
}

.service-detail-hero__content span{
  font-size:.85rem;
  opacity:.82;
}

.service-detail-hero__content strong{
  font-size:1.25rem;
}

.service-detail-section{
  padding-top:42px;
}

.service-detail-summary{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.service-summary-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  padding:22px;
  transition:transform .22s ease, box-shadow .22s ease;
}

.service-summary-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 52px rgba(15,23,42,.10);
}

.service-summary-card span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(37,99,235,.10);
  color:var(--brand);
  font-weight:900;
  margin-bottom:14px;
}

.service-summary-card p,
.service-muted{
  color:var(--muted);
}

.service-two-columns{
  display:grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap:34px;
  align-items:start;
}

.service-problem-list{
  display:grid;
  gap:14px;
}

.service-problem-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow-soft);
}

.service-problem-item p{
  margin-top:6px;
  color:var(--muted);
}

.service-usecases-section{
  background:#fff;
}

.service-usecases-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:28px;
}

.service-usecase-card{
  background:rgba(248,250,252,.82);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-usecase-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 52px rgba(15,23,42,.10);
  border-color:rgba(37,99,235,.24);
}

.service-usecase-card span{
  display:inline-flex;
  margin-bottom:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--brand);
  font-size:.82rem;
  font-weight:800;
}

.service-usecase-card p{
  margin-top:8px;
  color:var(--muted);
}

.service-process-section{
  background:
    radial-gradient(760px 420px at 12% 12%, rgba(37,99,235,.10), transparent 62%),
    radial-gradient(680px 380px at 90% 8%, rgba(124,58,237,.10), transparent 64%),
    #f8fafc;
}

.service-timeline{
  display:grid;
  gap:16px;
  margin-top:28px;
}

.service-timeline-item{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow-soft);
}

.service-timeline-item span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
  color:#fff;
  font-weight:900;
}

.service-timeline-item p{
  margin-top:6px;
  color:var(--muted);
}

.service-benefits-box{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:28px;
  align-items:center;
  background:
    radial-gradient(540px 300px at 10% 10%, rgba(37,99,235,.18), transparent 62%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 48%, #1d4ed8 100%);
  color:#fff;
  border-radius:30px;
  padding:34px;
  box-shadow:0 28px 80px rgba(15,23,42,.18);
}

.service-benefits-box p{
  color:rgba(255,255,255,.82);
  margin-top:12px;
}

.service-benefits-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.service-benefits-grid div{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;
  padding:18px;
  backdrop-filter:blur(10px);
}

.service-benefits-grid strong{
  display:block;
  color:#fff;
  font-size:1.2rem;
}

.service-benefits-grid span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.78);
  font-size:.92rem;
}

.service-detail-cta{
  padding:56px 0 82px;
}

.service-detail-cta__box{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:28px;
}

.service-detail-cta__box p{
  color:var(--muted);
  margin-top:8px;
}

@media (max-width: 980px){
  .service-detail-hero__grid,
  .service-two-columns,
  .service-benefits-box{
    grid-template-columns:1fr;
  }

  .service-detail-summary,
  .service-usecases-grid{
    grid-template-columns:1fr;
  }

  .service-detail-hero__card{
    max-width:540px;
  }

  .service-detail-cta__box{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .service-detail-hero{
    padding:76px 0 42px;
  }

  .service-benefits-grid{
    grid-template-columns:1fr;
  }

  .service-benefits-box{
    padding:24px;
    border-radius:24px;
  }
}

/* ==========================
   Mejora problemas comunes
   ========================== */

.service-problems-enhanced{
  background:
    radial-gradient(680px 360px at 12% 20%, rgba(37,99,235,.09), transparent 62%),
    radial-gradient(620px 340px at 90% 10%, rgba(124,58,237,.08), transparent 64%),
    #f8fafc;
}

.service-problems-box{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 32px;
  align-items:center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 30px;
  padding: 34px;
  box-shadow: 0 24px 70px rgba(15,23,42,.08);
}

.service-problems-intro{
  position: relative;
  padding: 10px 8px;
}

.service-problems-intro h2{
  margin-top: 12px;
  max-width: 420px;
}

.service-problems-intro p{
  margin-top: 14px;
  color: var(--muted);
  max-width: 460px;
  line-height: 1.65;
}

.service-problem-list-enhanced{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.service-problem-list-enhanced .service-problem-item{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  min-height: 150px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 42px rgba(15,23,42,.07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-problem-list-enhanced .service-problem-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 58px rgba(15,23,42,.11);
  border-color: rgba(37,99,235,.22);
}

.service-problem-icon{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}

.service-problem-list-enhanced .service-problem-item strong{
  display:block;
  color: var(--text);
  margin-bottom: 6px;
}

.service-problem-list-enhanced .service-problem-item p{
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 980px){
  .service-problems-box{
    grid-template-columns: 1fr;
  }

  .service-problem-list-enhanced{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .service-problems-box{
    padding: 22px;
    border-radius: 24px;
  }

  .service-problem-list-enhanced .service-problem-item{
    min-height: auto;
  }
}

/* ==========================
   Mejora cards servicios
   ========================== */

.vh-services-grid{
  align-items: stretch;
}

.vh-service-card{
  min-height: 240px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.vh-service-card--featured{
  min-height: 260px;
}

.vh-service-card__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.vh-service-card:hover .vh-service-card__bg{
  transform: scale(1.08);
}

.vh-service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,.38) 100%),
    linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.22));
}

.vh-service-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(320px 160px at 15% 15%, rgba(37,99,235,.12), transparent 62%);
  pointer-events:none;
}

.vh-service-card__body{
  position: relative;
  z-index: 3;
  max-width: 340px;
  height: 100%;
  min-height: inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding: 26px;
}

.vh-service-card__eyebrow{
  display:inline-flex;
  align-items:center;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.1;
}

.vh-service-card h3{
  color: #0f172a;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.08;
  margin-bottom: 10px;
}

.vh-service-card p{
  color: #0f172a;
  opacity: .86;
  line-height: 1.55;
  max-width: 310px;
  margin: 0;
}

.vh-service-card__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border: 1px solid rgba(37,99,235,.22);
  color: #ffffff !important;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(37,99,235,.24);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.vh-service-card__link::after{
  content:"→";
  margin-left: 8px;
  transition: transform .2s ease;
}

.vh-service-card__link:hover{
  color: #ffffff !important;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(37,99,235,.32);
}

.vh-service-card__link:hover::after{
  transform: translateX(3px);
}

@media (max-width: 980px){
  .vh-service-card,
  .vh-service-card--featured{
    min-height: 260px;
  }

  .vh-service-card__body{
    max-width: 360px;
  }
}

@media (max-width: 640px){
  .vh-service-card,
  .vh-service-card--featured{
    min-height: 300px;
  }

  .vh-service-card::before{
    background:
      linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 58%, rgba(255,255,255,.54) 100%);
  }

  .vh-service-card__body{
    padding: 22px;
    max-width: 100%;
  }
}

/* ==========================
   Corrección final cards servicios
   ========================== */

.vh-services-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.vh-service-card--featured{
  grid-column: 1 / -1;
}

.vh-service-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 300px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15,23,42,.08);
}

.vh-service-card--featured{
  min-height: 240px;
}

.vh-service-card__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.vh-service-card:hover .vh-service-card__bg{
  transform: scale(1.07);
}

.vh-service-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.45) 100%),
    linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.16));
}

.vh-service-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(320px 160px at 15% 15%, rgba(37,99,235,.10), transparent 62%);
  pointer-events: none;
}

.vh-service-card__body{
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 24px 24px;
  max-width: 360px;
}

.vh-service-card__content{
  width: 100%;
}

.vh-service-card__eyebrow{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.1;
}

.vh-service-card h3{
  color: #0f172a;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.08;
  margin: 0 0 10px;
  max-width: 300px;
  word-break: normal;
  overflow-wrap: break-word;
}

.vh-service-card p{
  color: #0f172a;
  opacity: .86;
  line-height: 1.55;
  margin: 0;
  max-width: 300px;
}

.vh-service-card__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 4px;
  padding: 11px 17px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border: 1px solid rgba(37,99,235,.22);
  color: #ffffff !important;
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(37,99,235,.24);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.vh-service-card__link::after{
  content: "→";
  margin-left: 8px;
  transition: transform .2s ease;
}

.vh-service-card__link:hover{
  color: #ffffff !important;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(37,99,235,.32);
}

.vh-service-card__link:hover::after{
  transform: translateX(3px);
}

/* Ajuste especial para textos más largos */
.vh-service-card:nth-child(4) h3,
.vh-service-card:nth-child(5) h3{
  max-width: 270px;
}

/* Responsive */
@media (max-width: 980px){
  .vh-services-grid{
    grid-template-columns: 1fr;
  }

  .vh-service-card--featured{
    grid-column: auto;
  }

  .vh-service-card,
  .vh-service-card--featured{
    min-height: 300px;
  }

  .vh-service-card__body{
    max-width: 360px;
  }
}

@media (max-width: 640px){
  .vh-service-card,
  .vh-service-card--featured{
    min-height: 320px;
  }

  .vh-service-card::before{
    background:
      linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 58%, rgba(255,255,255,.60) 100%);
  }

  .vh-service-card__body{
    max-width: 100%;
    padding: 22px 20px 22px;
  }

  .vh-service-card h3,
  .vh-service-card p{
    max-width: 100%;
  }
}

/* ==========================
   Corrección definitiva cards servicios
   Evita títulos cortados
   ========================== */

.vh-services-section .vh-service-card{
  min-height: 310px;
}

.vh-services-section .vh-service-card--featured{
  min-height: 260px;
}

/* El cuerpo debe ocupar más espacio horizontal */
.vh-services-section .vh-service-card__body{
  width: 58%;
  max-width: 390px;
  min-width: 290px;
  height: 100%;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* Si usaste el div interno de contenido */
.vh-services-section .vh-service-card__content{
  width: 100%;
}

/* Evita que el navegador parta palabras como Automatización */
.vh-services-section .vh-service-card h3{
  width: 100%;
  max-width: none !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  font-size: clamp(1.45rem, 1.8vw, 1.75rem);
  line-height: 1.12;
  margin: 0 0 8px;
}

/* Texto más controlado */
.vh-services-section .vh-service-card p{
  width: 100%;
  max-width: 320px;
  line-height: 1.55;
  margin: 0;
}

/* El botón no debe quedar cortado abajo */
.vh-services-section .vh-service-card__link{
  margin-top: 8px;
  flex-shrink: 0;
}

/* Para la tarjeta grande se permite un poco más de ancho */
.vh-services-section .vh-service-card--featured .vh-service-card__body{
  width: 46%;
  max-width: 430px;
  min-width: 330px;
}

/* Títulos largos con tamaño un poco más controlado */
.vh-services-section .vh-service-card h3{
  letter-spacing: -0.02em;
}

/* Quita cualquier regla anterior que estuviera limitando títulos específicos */
.vh-service-card:nth-child(4) h3,
.vh-service-card:nth-child(5) h3{
  max-width: none !important;
}

/* Mejora contraste del degradado para que el texto tenga más espacio visual */
.vh-services-section .vh-service-card::before{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 44%,
      rgba(255,255,255,.66) 66%,
      rgba(255,255,255,.20) 100%
    ),
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.14));
}

/* Responsive */
@media (max-width: 1100px){
  .vh-services-section .vh-service-card__body{
    width: 64%;
    min-width: 280px;
  }

  .vh-services-section .vh-service-card--featured .vh-service-card__body{
    width: 54%;
    min-width: 300px;
  }
}

@media (max-width: 980px){
  .vh-services-section .vh-service-card,
  .vh-services-section .vh-service-card--featured{
    min-height: 300px;
  }

  .vh-services-section .vh-service-card__body,
  .vh-services-section .vh-service-card--featured .vh-service-card__body{
    width: 58%;
    max-width: 390px;
    min-width: 290px;
  }
}

@media (max-width: 640px){
  .vh-services-section .vh-service-card,
  .vh-services-section .vh-service-card--featured{
    min-height: 340px;
  }

  .vh-services-section .vh-service-card__body,
  .vh-services-section .vh-service-card--featured .vh-service-card__body{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 24px 22px;
  }

  .vh-services-section .vh-service-card h3{
    font-size: 1.55rem;
  }

  .vh-services-section .vh-service-card p{
    max-width: 100%;
  }

  .vh-services-section .vh-service-card::before{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 70%,
        rgba(255,255,255,.62) 100%
      );
  }
}

/* ==========================
   Blog Vértice Hub
   ========================== */

.blog-page,
.blog-article-page{
  background: #f8fafc;
}

.blog-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 58px;
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(680px 380px at 90% 8%, rgba(124,58,237,.16), transparent 64%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.blog-orb{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:999px;
  filter: blur(18px);
  opacity:.42;
  pointer-events:none;
  animation: legalFloat 9s ease-in-out infinite;
}

.blog-orb-one{
  left:-70px;
  top:70px;
  background:rgba(37,99,235,.22);
}

.blog-orb-two{
  right:-80px;
  bottom:-50px;
  background:rgba(124,58,237,.18);
  animation-delay:1.6s;
}

.blog-hero-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:34px;
  align-items:center;
}

.blog-hero-copy h1{
  margin-top:12px;
  max-width:880px;
}

.blog-hero-copy p{
  margin-top:16px;
  max-width:760px;
  color:var(--muted);
}

.blog-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.blog-hero-tags span{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  color:var(--muted);
  font-size:.88rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.blog-hero-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(226,232,240,.9);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  padding:26px;
}

.blog-hero-icon{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:24px;
  margin-bottom:18px;
  background:linear-gradient(135deg, rgba(37,99,235,1), rgba(14,165,233,.95));
  color:#fff;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 18px 40px rgba(37,99,235,.28);
  animation:legalPulse 2.8s ease-in-out infinite;
}

.blog-hero-card h2{
  font-size:1.25rem;
  margin-bottom:10px;
}

.blog-hero-card p{
  color:var(--muted);
}

.blog-section{
  padding-top:42px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  margin-top:30px;
}

.blog-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 58px rgba(15,23,42,.11);
  border-color:rgba(37,99,235,.22);
}

.blog-card-featured{
  grid-column:span 2;
}

.blog-card-image{
  min-height:220px;
  background-size:cover;
  background-position:center;
}

.blog-card-body{
  padding:24px;
}

.blog-category{
  display:inline-flex;
  width:fit-content;
  margin-bottom:12px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--brand);
  font-size:.82rem;
  font-weight:800;
}

.blog-card h3{
  color:var(--text);
  line-height:1.18;
  margin-bottom:10px;
}

.blog-card p{
  color:var(--muted);
  line-height:1.65;
}

.blog-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  color:var(--muted);
  font-size:.88rem;
}

.blog-link{
  display:inline-flex;
  align-items:center;
  margin-top:18px;
  color:var(--brand);
  font-weight:800;
  text-decoration:none;
}

.blog-link::after{
  content:"→";
  margin-left:8px;
  transition:transform .2s ease;
}

.blog-link:hover::after{
  transform:translateX(3px);
}

.blog-link-muted{
  color:#475569;
}

.blog-cta{
  padding:58px 0 82px;
}

.blog-cta-box{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  background:
    radial-gradient(540px 300px at 10% 10%, rgba(37,99,235,.18), transparent 62%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 48%, #1d4ed8 100%);
  color:#fff;
  border-radius:30px;
  padding:34px;
  box-shadow:0 28px 80px rgba(15,23,42,.18);
}

.blog-cta-box p{
  margin-top:10px;
  color:rgba(255,255,255,.82);
}

/* Artículo */

.blog-article-hero{
  padding:92px 0 48px;
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(680px 380px at 90% 8%, rgba(124,58,237,.14), transparent 64%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.blog-article-hero-inner{
  max-width:900px;
}

.blog-back-link{
  display:inline-flex;
  margin-bottom:20px;
  color:var(--brand);
  font-weight:800;
  text-decoration:none;
}

.blog-article-hero h1{
  margin-top:12px;
  max-width:900px;
}

.blog-article-hero p{
  margin-top:16px;
  max-width:820px;
  color:var(--muted);
}

.blog-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  color:var(--muted);
  font-size:.9rem;
}

.blog-article-meta span{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
}

.blog-article-layout{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.blog-article-sidebar{
  position:sticky;
  top:110px;
  display:grid;
  gap:10px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  padding:20px;
}

.blog-article-sidebar strong{
  color:var(--text);
  margin-bottom:4px;
}

.blog-article-sidebar a{
  color:var(--muted);
  padding:9px 10px;
  border-radius:14px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.blog-article-sidebar a:hover{
  background:rgba(37,99,235,.10);
  color:var(--text);
  transform:translateX(4px);
}

.blog-article-content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:34px;
}

.blog-article-content section{
  scroll-margin-top:110px;
  padding-bottom:30px;
  margin-bottom:30px;
  border-bottom:1px solid var(--line);
}

.blog-article-content section:last-child{
  border-bottom:0;
  margin-bottom:0;
}

.blog-article-content h2{
  margin-bottom:14px;
}

.blog-article-content h3{
  margin-bottom:8px;
}

.blog-article-content p{
  color:var(--muted);
  line-height:1.75;
  margin-top:12px;
}

.blog-article-content ul{
  color:var(--muted);
  line-height:1.7;
  margin-top:14px;
  padding-left:22px;
}

.blog-highlight-box{
  margin-top:22px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.07);
  color:var(--muted);
  line-height:1.65;
}

.blog-highlight-box strong{
  color:var(--text);
}

.blog-example-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

.blog-example-grid div,
.blog-benefits-list div{
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  background:rgba(248,250,252,.82);
}

.blog-benefits-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

.blog-benefits-list strong{
  display:block;
  color:var(--text);
  margin-bottom:6px;
}

.blog-benefits-list span{
  color:var(--muted);
  line-height:1.55;
}

.blog-article-cta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-top:24px;
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(440px 220px at 12% 8%, rgba(37,99,235,.18), transparent 62%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 48%, #1d4ed8 100%);
  color:#fff;
}

.blog-article-cta p{
  color:rgba(255,255,255,.82);
}

@media (max-width: 980px){
  .blog-hero-grid,
  .blog-article-layout{
    grid-template-columns:1fr;
  }

  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-card-featured{
    grid-column:auto;
  }

  .blog-article-sidebar{
    position:static;
  }

  .blog-cta-box,
  .blog-article-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .blog-hero,
  .blog-article-hero{
    padding:76px 0 40px;
  }

  .blog-article-content{
    padding:24px;
    border-radius:22px;
  }

  .blog-example-grid,
  .blog-benefits-list{
    grid-template-columns:1fr;
  }

  .blog-cta-box{
    padding:24px;
    border-radius:24px;
  }
}

/* ==========================
   Blog artículo ETL - animación inicial
   ========================== */

.blog-article-hero-visual{
  position: relative;
  overflow: hidden;
}

.blog-article-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 34px;
  align-items: center;
}

.etl-visual-card{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(280px 180px at 20% 0%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(260px 160px at 100% 100%, rgba(124,58,237,.18), transparent 62%),
    rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(15,23,42,.14);
  padding: 24px;
  min-height: 390px;
  animation: blogFadeUp .75s ease both;
}

.etl-visual-card::before{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  top: -70px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  filter: blur(14px);
  animation: etlFloat 8s ease-in-out infinite;
}

.etl-visual-title{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-bottom: 28px;
}

.etl-visual-title span{
  color: var(--brand);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.etl-visual-title strong{
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.25;
}

.etl-flow{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.etl-node{
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 16px 42px rgba(15,23,42,.08);
  animation: etlNodeIn .7s ease both;
}

.etl-node:nth-child(1){
  animation-delay: .08s;
}

.etl-node:nth-child(3){
  animation-delay: .24s;
}

.etl-node:nth-child(5){
  animation-delay: .40s;
}

.etl-node span{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  margin-bottom: 6px;
  box-shadow: 0 12px 26px rgba(37,99,235,.22);
}

.etl-node strong{
  color: var(--text);
}

.etl-node small{
  color: var(--muted);
}

.etl-connector{
  position: relative;
  height: 24px;
  display: grid;
  place-items: center;
}

.etl-connector::before{
  content:"";
  width: 2px;
  height: 100%;
  background: rgba(37,99,235,.20);
  border-radius: 999px;
}

.etl-connector i{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 6px rgba(37,99,235,.12);
  animation: etlDotMove 1.6s ease-in-out infinite;
}

.etl-pulse-line{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
}

.etl-pulse-line::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #2563eb, #7c3aed, transparent);
  animation: etlLineMove 2.4s ease-in-out infinite;
}

/* ==========================
   Blog tabla de contenido animada
   ========================== */

.blog-article-sidebar-enhanced{
  position: sticky;
  top: 110px;
  display: grid;
  gap: 10px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(15,23,42,.10);
  padding: 20px;
  animation: blogFadeUp .75s ease both;
}

.blog-article-sidebar-enhanced::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 26px;
  background:
    radial-gradient(240px 140px at 20% 0%, rgba(37,99,235,.12), transparent 64%),
    radial-gradient(220px 130px at 100% 100%, rgba(124,58,237,.10), transparent 64%);
  pointer-events:none;
}

.blog-article-sidebar-enhanced > *{
  position: relative;
  z-index: 1;
}

.blog-article-sidebar-enhanced small{
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 6px;
}

.blog-article-sidebar-enhanced a{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .94rem;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.blog-article-sidebar-enhanced a span{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(37,99,235,.09);
  color: var(--brand);
  font-size: .72rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.blog-article-sidebar-enhanced a:hover{
  background: rgba(37,99,235,.09);
  color: var(--text);
  transform: translateX(5px);
  border-color: rgba(37,99,235,.16);
}

.blog-article-sidebar-enhanced a.is-active{
  background: linear-gradient(135deg, rgba(37,99,235,.13), rgba(124,58,237,.08));
  color: var(--text);
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 16px 34px rgba(37,99,235,.10);
  transform: translateX(5px);
}

.blog-article-sidebar-enhanced a.is-active span{
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,.24);
}

@keyframes blogFadeUp{
  from{
    opacity: 0;
    transform: translateY(16px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes etlFloat{
  0%, 100%{
    transform: translate3d(0,0,0) scale(1);
  }
  50%{
    transform: translate3d(-18px,18px,0) scale(1.05);
  }
}

@keyframes etlNodeIn{
  from{
    opacity: 0;
    transform: translateX(18px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes etlDotMove{
  0%{
    transform: translateY(-8px);
    opacity: .3;
  }
  50%{
    transform: translateY(8px);
    opacity: 1;
  }
  100%{
    transform: translateY(-8px);
    opacity: .3;
  }
}

@keyframes etlLineMove{
  0%{
    left: -40%;
  }
  100%{
    left: 100%;
  }
}

@media (max-width: 980px){
  .blog-article-hero-grid{
    grid-template-columns: 1fr;
  }

  .etl-visual-card{
    max-width: 560px;
  }

  .blog-article-sidebar-enhanced{
    position: static;
  }
}

@media (max-width: 640px){
  .etl-visual-card{
    min-height: auto;
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce){
  .etl-visual-card,
  .etl-node,
  .etl-connector i,
  .etl-pulse-line::after,
  .blog-article-sidebar-enhanced{
    animation: none;
  }

  .blog-article-sidebar-enhanced a{
    transition: none;
  }
}

/* ==========================
   Blog reportes automatizados - animación inicial
   ========================== */

.report-visual-card{
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(280px 180px at 20% 0%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(260px 160px at 100% 100%, rgba(124,58,237,.18), transparent 62%),
    rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 28px 80px rgba(15,23,42,.14);
  animation: blogFadeUp .75s ease both;
}

.report-visual-title{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
}

.report-visual-title span{
  color: var(--brand);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.report-visual-title strong{
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.25;
}

.report-dashboard{
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: 0 22px 60px rgba(15,23,42,.20);
}

.report-dashboard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(220px 120px at 90% 80%, rgba(124,58,237,.28), transparent 62%);
  pointer-events:none;
}

.report-dashboard-top{
  position: relative;
  z-index: 1;
  display:flex;
  gap:7px;
  margin-bottom:18px;
}

.report-dashboard-top span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
}

.report-kpi-row{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:18px;
}

.report-kpi{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  animation: reportCardPulse 2.8s ease-in-out infinite;
}

.report-kpi:nth-child(2){
  animation-delay:.5s;
}

.report-kpi strong{
  display:block;
  color:#fff;
  font-size:1.35rem;
}

.report-kpi small{
  color:rgba(255,255,255,.72);
}

.report-chart{
  position: relative;
  z-index: 1;
  height:130px;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.report-chart i{
  flex:1;
  display:block;
  border-radius:999px 999px 6px 6px;
  background:linear-gradient(180deg, #60a5fa, #2563eb 55%, #7c3aed);
  box-shadow:0 0 22px rgba(96,165,250,.22);
  animation: reportBarGrow 1.3s ease both, reportBarGlow 2.2s ease-in-out infinite;
}

.report-chart i:nth-child(1){ animation-delay:.05s; }
.report-chart i:nth-child(2){ animation-delay:.15s; }
.report-chart i:nth-child(3){ animation-delay:.25s; }
.report-chart i:nth-child(4){ animation-delay:.35s; }
.report-chart i:nth-child(5){ animation-delay:.45s; }

.report-flow-labels{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
}

.report-orbit{
  position:absolute;
  z-index:3;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow:0 16px 36px rgba(37,99,235,.28);
  animation: reportOrbitFloat 6s ease-in-out infinite;
}

.report-orbit-one{
  right:26px;
  top:88px;
}

.report-orbit-two{
  right:36px;
  bottom:72px;
  animation-delay:1s;
}

.report-orbit-three{
  left:22px;
  bottom:34px;
  animation-delay:1.8s;
}

@keyframes reportBarGrow{
  from{
    height:0;
    opacity:.4;
  }
  to{
    opacity:1;
  }
}

@keyframes reportBarGlow{
  0%, 100%{
    filter:brightness(1);
  }
  50%{
    filter:brightness(1.18);
  }
}

@keyframes reportCardPulse{
  0%, 100%{
    transform:translateY(0);
    box-shadow:none;
  }
  50%{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(37,99,235,.18);
  }
}

@keyframes reportOrbitFloat{
  0%, 100%{
    transform:translate3d(0,0,0);
  }
  50%{
    transform:translate3d(-10px,10px,0);
  }
}

@media (max-width: 980px){
  .report-visual-card{
    max-width:560px;
  }
}

@media (max-width: 640px){
  .report-visual-card{
    min-height:auto;
    padding:22px;
  }

  .report-orbit{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .report-visual-card,
  .report-kpi,
  .report-chart i,
  .report-orbit{
    animation:none;
  }
}

/* ==========================
   Blog bases de datos - animación inicial
   ========================== */

.db-visual-card{
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(280px 180px at 20% 0%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(260px 160px at 100% 100%, rgba(124,58,237,.18), transparent 62%),
    rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 28px 80px rgba(15,23,42,.14);
  animation: blogFadeUp .75s ease both;
}

.db-visual-title{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
}

.db-visual-title span{
  color: var(--brand);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.db-visual-title strong{
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.25;
}

.db-engine{
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 250px;
  border-radius: 24px;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.12);
  padding: 22px;
  box-shadow: 0 22px 60px rgba(15,23,42,.20);
}

.db-engine::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(220px 120px at 90% 80%, rgba(124,58,237,.28), transparent 62%);
  pointer-events:none;
}

.db-cylinder{
  position: relative;
  z-index: 2;
  width: 150px;
  margin: 8px auto 22px;
  animation: dbFloat 5s ease-in-out infinite;
}

.db-cylinder-top{
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #60a5fa, #2563eb 55%, #7c3aed);
  box-shadow: 0 0 28px rgba(96,165,250,.28);
}

.db-cylinder-body{
  position: relative;
  height: 118px;
  margin-top: -17px;
  background:
    linear-gradient(90deg, rgba(96,165,250,.92), rgba(37,99,235,.92), rgba(124,58,237,.88));
  border-left: 1px solid rgba(255,255,255,.18);
  border-right: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}

.db-cylinder-body::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.25), transparent 35%, rgba(255,255,255,.12) 75%, transparent);
  animation: dbShine 2.8s ease-in-out infinite;
}

.db-cylinder-body span{
  position: relative;
  z-index: 1;
  display:block;
  height: 1px;
  margin: 28px 18px 0;
  background: rgba(255,255,255,.35);
}

.db-cylinder-bottom{
  height: 34px;
  margin-top: -17px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 18px 38px rgba(37,99,235,.26);
}

.db-query-lines{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 9px;
  max-width: 260px;
  margin: 0 auto 18px;
}

.db-query-lines i{
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
  position: relative;
}

.db-query-lines i::after{
  content:"";
  position:absolute;
  inset:0;
  width: 45%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #60a5fa, #7c3aed, transparent);
  animation: dbQueryMove 2s ease-in-out infinite;
}

.db-query-lines i:nth-child(2)::after{
  animation-delay:.35s;
}

.db-query-lines i:nth-child(3)::after{
  animation-delay:.7s;
}

.db-metrics{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.db-metrics div{
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  animation: reportCardPulse 2.8s ease-in-out infinite;
}

.db-metrics div:nth-child(2){
  animation-delay:.5s;
}

.db-metrics strong{
  display:block;
  color:#fff;
  font-size:1.25rem;
}

.db-metrics small{
  color:rgba(255,255,255,.72);
}

.db-chip{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  min-width:54px;
  height:46px;
  padding:0 12px;
  border-radius:18px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow:0 16px 36px rgba(37,99,235,.28);
  animation: reportOrbitFloat 6s ease-in-out infinite;
}

.db-chip-one{
  right:28px;
  top:90px;
}

.db-chip-two{
  left:22px;
  bottom:76px;
  animation-delay:1s;
}

.db-chip-three{
  right:34px;
  bottom:40px;
  animation-delay:1.8s;
}

@keyframes dbFloat{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-8px);
  }
}

@keyframes dbShine{
  0%{
    transform: translateX(-80%);
  }
  100%{
    transform: translateX(80%);
  }
}

@keyframes dbQueryMove{
  0%{
    left: -45%;
  }
  100%{
    left: 100%;
  }
}

@media (max-width: 980px){
  .db-visual-card{
    max-width:560px;
  }
}

@media (max-width: 640px){
  .db-visual-card{
    min-height:auto;
    padding:22px;
  }

  .db-chip{
    display:none;
  }

  .db-cylinder{
    width:130px;
  }
}

@media (prefers-reduced-motion: reduce){
  .db-visual-card,
  .db-cylinder,
  .db-cylinder-body::before,
  .db-query-lines i::after,
  .db-metrics div,
  .db-chip{
    animation:none;
  }
}

/* ==========================
   Blog ciberseguridad - animación inicial
   ========================== */

.security-visual-card{
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(280px 180px at 20% 0%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(260px 160px at 100% 100%, rgba(124,58,237,.18), transparent 62%),
    rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 28px 80px rgba(15,23,42,.14);
  animation: blogFadeUp .75s ease both;
}

.security-visual-title{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}

.security-visual-title span{
  color: var(--brand);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.security-visual-title strong{
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.25;
}

.security-shield-wrap{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 250px;
  border-radius: 24px;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(15,23,42,.20);
  overflow: hidden;
}

.security-shield-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(220px 120px at 90% 80%, rgba(124,58,237,.28), transparent 62%);
  pointer-events:none;
}

.security-shield{
  position: relative;
  z-index: 3;
  width: 128px;
  height: 152px;
  background: linear-gradient(135deg, #60a5fa, #2563eb 55%, #7c3aed);
  clip-path: polygon(50% 0%, 92% 18%, 84% 76%, 50% 100%, 16% 76%, 8% 18%);
  display:grid;
  place-items:center;
  box-shadow: 0 22px 52px rgba(37,99,235,.34);
  animation: securityShieldPulse 2.8s ease-in-out infinite;
}

.security-lock{
  position: relative;
  width: 54px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  display:grid;
  place-items:center;
}

.security-lock span{
  position:absolute;
  top:-24px;
  width:34px;
  height:30px;
  border:7px solid rgba(255,255,255,.94);
  border-bottom:0;
  border-radius:20px 20px 0 0;
}

.security-lock strong{
  width:9px;
  height:18px;
  border-radius:999px;
  background:#1d4ed8;
  display:block;
}

.security-ring{
  position:absolute;
  z-index:2;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.30);
  animation: securityRingPulse 3.4s ease-in-out infinite;
}

.security-ring-one{
  width:210px;
  height:210px;
}

.security-ring-two{
  width:280px;
  height:280px;
  animation-delay:.9s;
}

.security-scan-line{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, #60a5fa, #7c3aed, transparent);
  box-shadow:0 0 22px rgba(96,165,250,.55);
  animation: securityScan 2.4s ease-in-out infinite;
}

.security-control{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  min-width:70px;
  height:46px;
  padding:0 12px;
  border-radius:18px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow:0 16px 36px rgba(37,99,235,.28);
  animation: reportOrbitFloat 6s ease-in-out infinite;
}

.security-control-one{
  right:28px;
  top:94px;
}

.security-control-two{
  left:22px;
  bottom:76px;
  animation-delay:1s;
}

.security-control-three{
  right:34px;
  bottom:40px;
  animation-delay:1.8s;
}

@keyframes securityShieldPulse{
  0%, 100%{
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50%{
    transform: translateY(-6px) scale(1.03);
    filter: brightness(1.12);
  }
}

@keyframes securityRingPulse{
  0%{
    transform: scale(.88);
    opacity:.18;
  }
  50%{
    opacity:.58;
  }
  100%{
    transform: scale(1.08);
    opacity:.10;
  }
}

@keyframes securityScan{
  0%{
    top:15%;
    opacity:.15;
  }
  50%{
    top:72%;
    opacity:1;
  }
  100%{
    top:15%;
    opacity:.15;
  }
}

@media (max-width: 980px){
  .security-visual-card{
    max-width:560px;
  }
}

@media (max-width: 640px){
  .security-visual-card{
    min-height:auto;
    padding:22px;
  }

  .security-control{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .security-visual-card,
  .security-shield,
  .security-ring,
  .security-scan-line,
  .security-control{
    animation:none;
  }
}

/* ==========================
   Blog automatización - animación inicial
   ========================== */

.automation-visual-card,
.revenue-visual-card,
.ai-visual-card{
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(280px 180px at 20% 0%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(260px 160px at 100% 100%, rgba(124,58,237,.18), transparent 62%),
    rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 28px 80px rgba(15,23,42,.14);
  animation: blogFadeUp .75s ease both;
}

.automation-visual-title,
.revenue-visual-title,
.ai-visual-title{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}

.automation-visual-title span,
.revenue-visual-title span,
.ai-visual-title span{
  color: var(--brand);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.automation-visual-title strong,
.revenue-visual-title strong,
.ai-visual-title strong{
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.25;
}

/* Automatización */

.automation-workflow{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(15,23,42,.20);
}

.automation-workflow::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(220px 120px at 90% 80%, rgba(124,58,237,.28), transparent 62%);
  pointer-events:none;
}

.automation-step{
  position: relative;
  z-index: 2;
  display:grid;
  gap:4px;
  padding:15px;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  animation: automationStepIn .7s ease both;
}

.automation-step-two{
  animation-delay:.18s;
}

.automation-step-three{
  animation-delay:.36s;
}

.automation-step span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg, #60a5fa, #2563eb);
  color:#fff;
  font-size:.74rem;
  font-weight:900;
}

.automation-step strong{
  color:#fff;
}

.automation-step small{
  color:rgba(255,255,255,.72);
}

.automation-arrow{
  position: relative;
  z-index: 2;
  height:22px;
  display:grid;
  place-items:center;
}

.automation-arrow::before{
  content:"";
  width:2px;
  height:100%;
  border-radius:999px;
  background:rgba(96,165,250,.30);
}

.automation-arrow::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#60a5fa;
  box-shadow:0 0 0 6px rgba(96,165,250,.12);
  animation: automationDot 1.5s ease-in-out infinite;
}

.automation-gears{
  position:absolute;
  right:22px;
  bottom:20px;
  display:flex;
  gap:9px;
  z-index:4;
}

.automation-gears i{
  width:34px;
  height:34px;
  border-radius:999px;
  border:6px dashed rgba(37,99,235,.72);
  animation: gearRotate 4s linear infinite;
}

.automation-gears i:nth-child(2){
  width:26px;
  height:26px;
  border-width:5px;
  animation-direction:reverse;
}

.automation-gears i:nth-child(3){
  width:20px;
  height:20px;
  border-width:4px;
}

/* Protección de ingresos */

.revenue-radar{
  position: relative;
  z-index:2;
  min-height:250px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:rgba(15,23,42,.94);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:0 22px 60px rgba(15,23,42,.20);
}

.revenue-radar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(37,99,235,.20) 0 2px, transparent 3px),
    radial-gradient(220px 120px at 20% 20%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(220px 120px at 90% 80%, rgba(124,58,237,.28), transparent 62%);
  pointer-events:none;
}

.revenue-radar-circle{
  position:absolute;
  width:210px;
  height:210px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.28);
  box-shadow:
    0 0 0 42px rgba(96,165,250,.06),
    0 0 0 84px rgba(124,58,237,.05);
}

.revenue-radar-sweep{
  position:absolute;
  width:105px;
  height:105px;
  left:50%;
  top:50%;
  transform-origin:0 0;
  background:linear-gradient(45deg, rgba(96,165,250,.42), transparent 70%);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  animation: radarSweep 3s linear infinite;
}

.revenue-center{
  position:relative;
  z-index:4;
  width:86px;
  height:86px;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  color:#fff;
  box-shadow:0 22px 52px rgba(37,99,235,.30);
  animation: revenueCenterPulse 2.8s ease-in-out infinite;
}

.revenue-center strong{
  font-size:2rem;
  line-height:1;
}

.revenue-center span{
  font-size:.72rem;
  margin-top:-14px;
  opacity:.78;
}

.revenue-alert{
  position:absolute;
  z-index:5;
  min-width:78px;
  padding:9px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter:blur(10px);
  animation: reportOrbitFloat 6s ease-in-out infinite;
}

.revenue-alert strong,
.revenue-alert small{
  display:block;
}

.revenue-alert small{
  color:rgba(255,255,255,.70);
  font-size:.72rem;
}

.revenue-alert-one{
  left:24px;
  top:42px;
}

.revenue-alert-two{
  right:22px;
  top:86px;
  animation-delay:1s;
}

.revenue-alert-three{
  left:38px;
  bottom:36px;
  animation-delay:1.8s;
}

.revenue-metrics{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.revenue-metrics div{
  padding:14px;
  border-radius:18px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.12);
  animation: reportCardPulse 2.8s ease-in-out infinite;
}

.revenue-metrics div:nth-child(2){
  animation-delay:.5s;
}

.revenue-metrics strong{
  display:block;
  color:#fff;
}

.revenue-metrics small{
  color:rgba(255,255,255,.72);
}

/* IA */

.ai-brain{
  position:relative;
  z-index:2;
  min-height:260px;
  border-radius:24px;
  background:rgba(15,23,42,.94);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:0 22px 60px rgba(15,23,42,.20);
}

.ai-brain::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(37,99,235,.32), transparent 62%),
    radial-gradient(220px 120px at 90% 80%, rgba(124,58,237,.28), transparent 62%);
  pointer-events:none;
}

.ai-core{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  border-radius:32px;
  background:linear-gradient(135deg, #60a5fa, #2563eb 55%, #7c3aed);
  color:#fff;
  box-shadow:0 22px 52px rgba(37,99,235,.34);
  animation: aiCorePulse 2.8s ease-in-out infinite;
}

.ai-core strong{
  font-size:2rem;
  line-height:1;
}

.ai-core span{
  font-size:.72rem;
  margin-top:-18px;
  opacity:.82;
}

.ai-node{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  min-width:78px;
  height:42px;
  padding:0 10px;
  border-radius:16px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  animation: aiNodeFloat 5.8s ease-in-out infinite;
}

.ai-node-one{
  left:24px;
  top:38px;
}

.ai-node-two{
  right:18px;
  top:44px;
  animation-delay:.8s;
}

.ai-node-three{
  left:24px;
  bottom:38px;
  animation-delay:1.4s;
}

.ai-node-four{
  right:22px;
  bottom:40px;
  animation-delay:2s;
}

.ai-lines{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
}

.ai-lines path{
  fill:none;
  stroke:rgba(96,165,250,.45);
  stroke-width:2;
  stroke-dasharray:8 8;
  animation: aiLineFlow 2.2s linear infinite;
}

.ai-output{
  position:relative;
  z-index:2;
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.12);
}

.ai-output span{
  display:block;
  color:#fff;
  font-weight:800;
  margin-bottom:9px;
}

.ai-output div{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}

.ai-output i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #60a5fa, #2563eb, #7c3aed);
  animation: aiProgress 2.6s ease-in-out infinite;
}

/* Keyframes */

@keyframes automationStepIn{
  from{
    opacity:0;
    transform:translateX(18px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes automationDot{
  0%{
    transform:translateY(-8px);
    opacity:.35;
  }
  50%{
    transform:translateY(8px);
    opacity:1;
  }
  100%{
    transform:translateY(-8px);
    opacity:.35;
  }
}

@keyframes gearRotate{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

@keyframes radarSweep{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

@keyframes revenueCenterPulse{
  0%, 100%{
    transform:scale(1);
    filter:brightness(1);
  }
  50%{
    transform:scale(1.05);
    filter:brightness(1.12);
  }
}

@keyframes aiCorePulse{
  0%, 100%{
    transform:translate(-50%, -50%) scale(1);
    filter:brightness(1);
  }
  50%{
    transform:translate(-50%, -50%) scale(1.05);
    filter:brightness(1.14);
  }
}

@keyframes aiNodeFloat{
  0%, 100%{
    transform:translate3d(0,0,0);
  }
  50%{
    transform:translate3d(-8px,8px,0);
  }
}

@keyframes aiLineFlow{
  from{
    stroke-dashoffset:0;
  }
  to{
    stroke-dashoffset:-32;
  }
}

@keyframes aiProgress{
  0%, 100%{
    width:55%;
  }
  50%{
    width:88%;
  }
}

@media (max-width: 980px){
  .automation-visual-card,
  .revenue-visual-card,
  .ai-visual-card{
    max-width:560px;
  }
}

@media (max-width: 640px){
  .automation-visual-card,
  .revenue-visual-card,
  .ai-visual-card{
    min-height:auto;
    padding:22px;
  }

  .automation-gears{
    display:none;
  }

  .revenue-alert,
  .ai-node{
    transform:scale(.9);
  }

  .ai-node-one,
  .ai-node-three{
    left:12px;
  }

  .ai-node-two,
  .ai-node-four{
    right:12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .automation-visual-card,
  .revenue-visual-card,
  .ai-visual-card,
  .automation-step,
  .automation-arrow::after,
  .automation-gears i,
  .revenue-radar-sweep,
  .revenue-center,
  .revenue-alert,
  .revenue-metrics div,
  .ai-core,
  .ai-node,
  .ai-lines path,
  .ai-output i{
    animation:none;
  }
}

/* ==========================
   Help Desk servicio - versión dinámica uniforme
   ========================== */

.helpdesk-hero-enhanced{
  position: relative;
  overflow: hidden;
}

.helpdesk-service-visual{
  position: relative;
  overflow: hidden;
  min-height: 440px;
  padding: 24px;
  border-radius: 32px;
  background:
    radial-gradient(320px 210px at 18% 0%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(280px 190px at 100% 100%, rgba(124,58,237,.20), transparent 62%),
    rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 30px 90px rgba(15,23,42,.15);
  animation: blogFadeUp .75s ease both;
}

.helpdesk-service-visual::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:-90px;
  border-radius:999px;
  background:rgba(37,99,235,.14);
  filter:blur(16px);
  animation: etlFloat 8s ease-in-out infinite;
}

.helpdesk-service-visual::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:-90px;
  bottom:-90px;
  border-radius:999px;
  background:rgba(124,58,237,.12);
  filter:blur(16px);
  animation: etlFloat 9s ease-in-out infinite reverse;
}

.helpdesk-visual-header{
  position:relative;
  z-index:3;
  display:grid;
  gap:6px;
  margin-bottom:20px;
}

.helpdesk-visual-header span{
  color:var(--brand);
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.helpdesk-visual-header strong{
  color:var(--text);
  font-size:1.22rem;
  line-height:1.25;
}

.helpdesk-monitor{
  position:relative;
  z-index:3;
  overflow:hidden;
  padding:18px;
  border-radius:26px;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 24px 70px rgba(15,23,42,.24);
}

.helpdesk-monitor::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(260px 140px at 18% 18%, rgba(37,99,235,.34), transparent 62%),
    radial-gradient(240px 140px at 92% 82%, rgba(124,58,237,.30), transparent 62%);
  pointer-events:none;
}

.helpdesk-monitor-top{
  position:relative;
  z-index:2;
  display:flex;
  gap:7px;
  margin-bottom:18px;
}

.helpdesk-monitor-top i{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.44);
}

.helpdesk-status-row{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}

.helpdesk-status-row div{
  padding:15px;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  animation: reportCardPulse 2.8s ease-in-out infinite;
}

.helpdesk-status-row div:nth-child(2){
  animation-delay:.55s;
}

.helpdesk-status-row span{
  display:block;
  color:rgba(255,255,255,.70);
  font-size:.82rem;
  margin-bottom:4px;
}

.helpdesk-status-row strong{
  color:#fff;
  font-size:1.45rem;
}

.helpdesk-ticket-flow{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
}

.helpdesk-ticket-flow article{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  animation: helpdeskTicketIn .7s ease both;
}

.helpdesk-ticket-flow article:nth-child(2){
  animation-delay:.18s;
}

.helpdesk-ticket-flow article:nth-child(3){
  animation-delay:.36s;
}

.helpdesk-ticket-flow article span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:13px;
  background:linear-gradient(135deg, #60a5fa, #2563eb);
  color:#fff;
  font-size:.74rem;
  font-weight:900;
  box-shadow:0 12px 26px rgba(37,99,235,.24);
}

.helpdesk-ticket-flow article strong{
  display:block;
  color:#fff;
}

.helpdesk-ticket-flow article small{
  color:rgba(255,255,255,.72);
}

.helpdesk-scan-line{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, #60a5fa, #7c3aed, transparent);
  box-shadow:0 0 22px rgba(96,165,250,.55);
  animation: securityScan 2.6s ease-in-out infinite;
}

.helpdesk-agent-card{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 46px rgba(15,23,42,.10);
  animation: blogFadeUp .8s ease both;
}

.helpdesk-agent-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:22px;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow:0 16px 36px rgba(37,99,235,.28);
  animation: securityShieldPulse 2.8s ease-in-out infinite;
}

.helpdesk-agent-icon span{
  position:relative;
  width:30px;
  height:20px;
  border:5px solid #fff;
  border-bottom:0;
  border-radius:20px 20px 0 0;
}

.helpdesk-agent-icon span::after{
  content:"";
  position:absolute;
  right:-9px;
  top:13px;
  width:14px;
  height:5px;
  border-radius:999px;
  background:#fff;
}

.helpdesk-agent-card strong{
  display:block;
  color:var(--text);
}

.helpdesk-agent-card small{
  color:var(--muted);
}

.helpdesk-floating-chip{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  min-width:78px;
  height:46px;
  padding:0 12px;
  border-radius:18px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow:0 16px 36px rgba(37,99,235,.28);
  animation: reportOrbitFloat 6s ease-in-out infinite;
}

.helpdesk-floating-chip.chip-one{
  right:28px;
  top:96px;
}

.helpdesk-floating-chip.chip-two{
  left:22px;
  bottom:88px;
  animation-delay:1s;
}

.helpdesk-floating-chip.chip-three{
  right:34px;
  bottom:36px;
  animation-delay:1.8s;
}

.service-summary-card,
.service-usecase-card,
.service-problem-item,
.service-timeline > div{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-summary-card:hover,
.service-usecase-card:hover,
.service-problem-item:hover,
.service-timeline > div:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 58px rgba(15,23,42,.10);
  border-color: rgba(37,99,235,.22);
}

@keyframes helpdeskTicketIn{
  from{
    opacity:0;
    transform:translateX(18px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@media (max-width: 980px){
  .helpdesk-service-visual{
    max-width:560px;
  }
}

@media (max-width: 640px){
  .helpdesk-service-visual{
    min-height:auto;
    padding:22px;
  }

  .helpdesk-floating-chip{
    display:none;
  }

  .helpdesk-status-row{
    grid-template-columns:1fr;
  }

  .helpdesk-agent-card{
    align-items:flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
  .helpdesk-service-visual,
  .helpdesk-service-visual::before,
  .helpdesk-service-visual::after,
  .helpdesk-status-row div,
  .helpdesk-ticket-flow article,
  .helpdesk-scan-line,
  .helpdesk-agent-card,
  .helpdesk-agent-icon,
  .helpdesk-floating-chip{
    animation:none;
  }
}

/* ==========================
   Soy cliente VH - Login
   ========================== */

.client-login-page{
  background:#f8fafc;
}

.client-login-hero{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 80px);
  padding:96px 0 70px;
  background:
    radial-gradient(760px 420px at 14% 8%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(680px 380px at 90% 8%, rgba(124,58,237,.16), transparent 64%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.client-login-orb{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:999px;
  filter:blur(18px);
  opacity:.42;
  pointer-events:none;
  animation:legalFloat 9s ease-in-out infinite;
}

.client-login-orb-one{
  left:-70px;
  top:70px;
  background:rgba(37,99,235,.22);
}

.client-login-orb-two{
  right:-80px;
  bottom:-50px;
  background:rgba(124,58,237,.18);
  animation-delay:1.6s;
}

.client-login-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 430px;
  gap:38px;
  align-items:center;
}

.client-login-copy h1{
  margin-top:12px;
  font-size:clamp(2.5rem, 5vw, 4.5rem);
}

.client-login-copy p{
  max-width:760px;
  color:var(--muted);
  margin-top:16px;
}

.client-login-benefits{
  display:grid;
  gap:14px;
  margin-top:28px;
  max-width:720px;
}

.client-login-benefits div{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 46px rgba(15,23,42,.07);
}

.client-login-benefits strong{
  display:block;
  color:var(--text);
  margin-bottom:5px;
}

.client-login-benefits span{
  color:var(--muted);
}

.client-login-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(226,232,240,.95);
  border-radius:30px;
  padding:28px;
  box-shadow:0 28px 80px rgba(15,23,42,.14);
  animation:blogFadeUp .75s ease both;
}

.client-login-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.client-login-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg, #1d4ed8, #7c3aed);
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 18px 40px rgba(37,99,235,.25);
}

.client-login-card-head h2{
  margin:0;
}

.client-login-card-head p{
  color:var(--muted);
  margin:4px 0 0;
}

.client-login-form{
  display:grid;
  gap:16px;
}

.form-field{
  display:grid;
  gap:8px;
}

.form-field label{
  color:var(--text);
  font-weight:800;
}

.form-field input,
.client-message-box textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 14px;
  font:inherit;
  outline:none;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.form-field input:focus,
.client-message-box textarea:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.fake-captcha{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#f8fafc;
  cursor:pointer;
}

.fake-captcha input{
  display:none;
}

.fake-captcha span{
  width:24px;
  height:24px;
  border-radius:7px;
  border:2px solid #94a3b8;
  display:grid;
  place-items:center;
  background:#fff;
}

.fake-captcha input:checked + span{
  border-color:#2563eb;
  background:#2563eb;
}

.fake-captcha input:checked + span::after{
  content:"✓";
  color:#fff;
  font-weight:900;
}

.fake-captcha strong{
  color:var(--text);
}

.client-login-message{
  display:none;
  padding:12px 14px;
  border-radius:16px;
  font-weight:700;
}

.client-login-message.is-error{
  display:block;
  color:#991b1b;
  background:#fee2e2;
}

.client-login-message.is-success{
  display:block;
  color:#065f46;
  background:#d1fae5;
}

.client-login-submit{
  width:100%;
  justify-content:center;
}

.client-login-note{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55;
  margin:0;
}

/* ==========================
   Portal cliente
   ========================== */

.client-portal-body{
  margin:0;
  background:#f8fafc;
}

.client-portal-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
}

.client-portal-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:24px;
  background:
    radial-gradient(420px 260px at 20% 10%, rgba(37,99,235,.28), transparent 62%),
    linear-gradient(180deg, #0f172a, #1e1b4b);
  color:#fff;
}

.client-portal-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:32px;
}

.client-portal-brand div{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg, #2563eb, #7c3aed);
  font-weight:900;
}

.client-portal-brand span{
  font-weight:900;
  letter-spacing:.02em;
}

.client-portal-nav{
  display:grid;
  gap:8px;
}

.client-portal-nav a{
  color:rgba(255,255,255,.76);
  text-decoration:none;
  padding:12px 14px;
  border-radius:16px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.client-portal-nav a:hover,
.client-portal-nav a.is-active{
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(29,78,216,.10));
  color: #0f172a;
  border: 1px solid rgba(37,99,235,.22);
  box-shadow: 0 10px 24px rgba(37,99,235,.08);
}

.client-portal-content{
  padding:34px;
}

.client-portal-header{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:28px;
}

.client-portal-header h1{
  margin:8px 0 8px;
}

.client-portal-header p{
  color:var(--muted);
  max-width:760px;
}

.client-portal-kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-bottom:28px;
}

.client-portal-kpis article{
  padding:20px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.client-portal-kpis span{
  color:var(--muted);
  font-size:.9rem;
}

.client-portal-kpis strong{
  display:block;
  color:var(--text);
  font-size:2rem;
  margin:8px 0 2px;
}

.client-portal-kpis small{
  color:var(--muted);
}

.client-portal-section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow-soft);
  padding:24px;
  margin-bottom:24px;
  scroll-margin-top:24px;
}

.client-portal-section-head{
  margin-bottom:18px;
}

.client-portal-section-head p{
  color:var(--muted);
  margin-top:6px;
}

.client-project-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

.client-project-card{
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  background:#f8fafc;
}

.client-project-card-head span{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--brand);
  font-size:.82rem;
  font-weight:900;
}

.client-project-card-head strong{
  display:block;
  color:var(--text);
  font-size:1.15rem;
}

.client-project-card p{
  color:var(--muted);
  line-height:1.6;
  margin-top:10px;
}

.client-project-progress{
  margin-top:16px;
}

.client-project-progress div{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  margin-bottom:8px;
}

.client-project-progress strong{
  color:var(--text);
}

.client-project-progress i{
  display:block;
  height:9px;
  border-radius:999px;
  overflow:hidden;
  background:#e2e8f0;
}

.client-project-progress b{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #2563eb, #7c3aed);
}

.client-project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.client-project-tags span{
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.82rem;
}

.client-progress-list{
  display:grid;
  gap:14px;
}

.client-progress-list article{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:16px;
  padding:16px;
  border-radius:20px;
  background:#f8fafc;
  border:1px solid var(--line);
}

.client-progress-list article > span{
  color:var(--brand);
  font-weight:900;
}

.client-progress-list p{
  color:var(--muted);
  margin-top:6px;
}

.client-deliverables-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.client-deliverables-grid article{
  padding:18px;
  border-radius:20px;
  background:#f8fafc;
  border:1px solid var(--line);
}

.client-deliverables-grid strong,
.client-deliverables-grid span,
.client-deliverables-grid a{
  display:block;
}

.client-deliverables-grid span{
  color:var(--muted);
  margin:6px 0 12px;
}

.client-deliverables-grid a{
  color:var(--brand);
  font-weight:800;
  text-decoration:none;
}

.client-message-box{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:20px;
}

.client-message-box form{
  display:grid;
  gap:12px;
}

.client-message-box label{
  font-weight:900;
  color:var(--text);
}

.client-message-history{
  display:grid;
  gap:12px;
}

.client-message-history article{
  padding:14px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid var(--line);
}

.client-message-history article.is-vh{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.18);
}

.client-message-history p{
  color:var(--muted);
  margin-top:6px;
}

@media (max-width: 1100px){
  .client-login-grid,
  .client-portal-page{
    grid-template-columns:1fr;
  }

  .client-portal-sidebar{
    position:relative;
    height:auto;
  }

  .client-portal-kpis{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .client-login-grid,
  .client-project-grid,
  .client-deliverables-grid,
  .client-message-box{
    grid-template-columns:1fr;
  }

  .client-portal-header{
    flex-direction:column;
  }

  .client-portal-kpis{
    grid-template-columns:1fr;
  }

  .client-portal-content{
    padding:22px;
  }

  .support-chip{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .support-visual-card,
  .support-ticket,
  .support-headset,
  .support-chip{
    animation:none;
  }
}

/* ==========================
   Portal VH - Admin e interno
   ========================== */

.portal-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:22px;
}

.portal-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.portal-table th,
.portal-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.portal-table th{
  color:var(--text);
  background:#f8fafc;
  font-size:.88rem;
}

.portal-table td{
  color:var(--muted);
}

.portal-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.portal-form-full{
  grid-column:1 / -1;
}

.portal-form-actions{
  grid-column:1 / -1;
}

.form-field select,
.form-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 14px;
  font:inherit;
  outline:none;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.form-field select:focus,
.form-field textarea:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.portal-project-id{
  display:block;
  margin-top:14px;
  color:var(--muted);
  font-weight:800;
}

@media (max-width: 760px){
  .portal-form-grid{
    grid-template-columns:1fr;
  }
}

/* ==========================
   VH Portal UX Improvements
   ========================== */

.client-login-trust-bg{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:999px;
  filter:blur(8px);
  opacity:.22;
  animation: trustFloat 7s ease-in-out infinite;
}

.client-login-trust-bg-one{
  right:8%;
  top:-80px;
  background:#2563eb;
}

.client-login-trust-bg-two{
  left:5%;
  bottom:-90px;
  background:#0f172a;
  animation-delay:1.4s;
}

.client-login-trust-content{
  position:relative;
  z-index:2;
}

.client-login-trust-copy{
  max-width:720px;
  margin:0 auto 28px;
  text-align:center;
}

.client-login-trust-copy h2{
  margin:10px 0 12px;
  font-size:clamp(1.8rem, 3vw, 2.7rem);
  color:var(--text);
}

.client-login-trust-copy p{
  color:var(--muted);
  font-size:1.03rem;
  line-height:1.7;
}

.client-login-trust-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.client-login-trust-card{
  position:relative;
  padding:24px;
  border-radius:26px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}

.client-login-trust-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 65px rgba(37,99,235,.15);
}

.trust-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, #2563eb, #0f172a);
  color:#fff;
  font-weight:900;
  margin-bottom:16px;
}

.client-login-trust-card h3{
  margin:0 0 8px;
  color:var(--text);
}

.client-login-trust-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.client-login-trust-flow{
  margin:28px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.client-login-trust-flow span{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-weight:800;
  border:1px solid rgba(148,163,184,.26);
}

.client-login-trust-flow i{
  width:42px;
  height:2px;
  background:linear-gradient(90deg, #2563eb, transparent);
  animation: trustLine 1.8s ease-in-out infinite;
}

@keyframes trustFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(22px) scale(1.05); }
}

@keyframes trustLine{
  0%{ opacity:.35; transform:scaleX(.65); }
  50%{ opacity:1; transform:scaleX(1); }
  100%{ opacity:.35; transform:scaleX(.65); }
}

/* Portal corporativo */

.client-portal-content{
  background:
    radial-gradient(circle at 95% 0%, rgba(37,99,235,.08), transparent 30%),
    radial-gradient(circle at 0% 20%, rgba(15,23,42,.04), transparent 30%),
    #f8fafc;
}

.client-portal-header,
.client-portal-kpis article,
.client-portal-section{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
}

.client-portal-brand-logo{
  gap:12px;
}

.client-portal-brand-logo img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  padding:4px;
}

.portal-header-brand-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 16px 38px rgba(15,23,42,.08);
  margin-right:8px;
}

.portal-header-brand-mark img{
  width:42px;
  height:42px;
  object-fit:contain;
}

/* Reseñas admin */

.admin-reviews-list{
  display:grid;
  gap:14px;
}

.admin-review-card{
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.admin-review-card-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.admin-review-card-head strong{
  display:block;
  color:var(--text);
}

.admin-review-card-head span,
.admin-review-card small{
  color:var(--muted);
}

.admin-review-stars{
  color:#f59e0b;
  letter-spacing:2px;
  margin-bottom:10px;
}

.admin-review-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.review-status{
  height:max-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  background:#e2e8f0;
  color:#334155;
}

.review-status-pending{
  background:#fef3c7;
  color:#92400e;
}

.review-status-approved{
  background:#dcfce7;
  color:#166534;
}

.review-status-rejected{
  background:#fee2e2;
  color:#991b1b;
}

/* Secciones minimizadas */

.portal-section-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(148,163,184,.28);
  background:#f8fafc;
  color:#0f172a;
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}

.portal-section-toggle strong{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#2563eb;
  color:#fff;
}

/* Buscadores y scroll */

.portal-section-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0;
}

.portal-section-toolbar input,
.portal-section-toolbar select{
  width:100%;
  max-width:420px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:16px;
  padding:13px 14px;
  background:#fff;
  font:inherit;
  outline:none;
}

.portal-section-toolbar input:focus,
.portal-section-toolbar select:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.portal-scroll-box,
.portal-table-wrap,
.client-project-grid{
  max-height:520px;
  overflow:auto;
  padding-right:4px;
}

.portal-scroll-box::-webkit-scrollbar,
.portal-table-wrap::-webkit-scrollbar,
.client-project-grid::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.portal-scroll-box::-webkit-scrollbar-thumb,
.portal-table-wrap::-webkit-scrollbar-thumb,
.client-project-grid::-webkit-scrollbar-thumb{
  background:rgba(37,99,235,.35);
  border-radius:999px;
}

.portal-scroll-box::-webkit-scrollbar-track,
.portal-table-wrap::-webkit-scrollbar-track,
.client-project-grid::-webkit-scrollbar-track{
  background:rgba(148,163,184,.12);
  border-radius:999px;
}

@media (max-width: 860px){
  .client-login-trust-grid{
    grid-template-columns:1fr;
  }

  .admin-review-alert{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-header-brand-mark{
    display:none;
  }
}

/* ==========================
   VH Portal Refinement
   ========================== */

/* Login trust mini */

.login-trust-mini{
  margin-top:22px;
  padding:18px;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(15,23,42,.04), rgba(37,99,235,.06)),
    #fff;
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 16px 35px rgba(15,23,42,.06);
}

.login-trust-mini__text{
  text-align:center;
  margin-bottom:14px;
}

.login-trust-mini__text span{
  display:block;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:5px;
}

.login-trust-mini__text strong{
  display:block;
  font-size:.96rem;
  color:var(--text);
  line-height:1.4;
}

.login-trust-mini__items{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.login-trust-mini__items div{
  padding:12px 10px;
  border-radius:18px;
  background:rgba(248,250,252,.95);
  border:1px solid rgba(148,163,184,.18);
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}

.login-trust-mini__items div:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(37,99,235,.10);
}

.login-trust-mini__items b{
  display:block;
  color:var(--primary);
  font-size:.78rem;
  margin-bottom:4px;
}

.login-trust-mini__items span{
  display:block;
  font-size:.78rem;
  font-weight:800;
  color:var(--muted);
}

/* Portal layout color refinement */

.client-portal-content{
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.06), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.portal-admin-compact-header{
  min-height:auto;
  padding:22px 24px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.90));
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 18px 48px rgba(15,23,42,.07);
}

.portal-admin-compact-header h1{
  margin:6px 0 6px;
  font-size:clamp(1.55rem, 2.5vw, 2.15rem);
}

.portal-admin-compact-header p{
  margin:0;
  max-width:740px;
}

.portal-admin-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Botón animado reseñas */

.admin-review-pulse-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  padding:12px 16px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg, #0f172a, #2563eb);
  box-shadow:0 16px 36px rgba(37,99,235,.24);
  transition:transform .2s ease, box-shadow .2s ease;
}

.admin-review-pulse-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(37,99,235,.32);
}

.admin-review-pulse-btn span{
  min-width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:#2563eb;
  font-size:.78rem;
}

.admin-review-pulse-btn.has-pending{
  animation: reviewPulse 1.4s ease-in-out infinite;
}

.admin-review-pulse-btn.has-pending::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  border:2px solid rgba(37,99,235,.28);
  animation: reviewRing 1.4s ease-out infinite;
}

.admin-review-pulse-btn.has-error{
  background:linear-gradient(135deg, #991b1b, #ef4444);
}

@keyframes reviewPulse{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}

@keyframes reviewRing{
  0%{ transform:scale(.92); opacity:.8; }
  100%{ transform:scale(1.18); opacity:0; }
}

/* Acordeón elegante */

.portal-accordion-section{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(148,163,184,.22);
  background:#fff;
  box-shadow:0 16px 42px rgba(15,23,42,.06);
  transition:box-shadow .25s ease, transform .25s ease;
}

.portal-accordion-section:hover{
  box-shadow:0 20px 50px rgba(15,23,42,.08);
}

.portal-accordion-section .client-portal-section-head{
  cursor:pointer;
  padding-bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.portal-accordion-section.is-collapsed{
  padding-bottom:20px;
}

.portal-accordion-section.is-collapsed > :not(.client-portal-section-head){
  display:none;
}

.portal-accordion-section.is-collapsed .client-portal-section-head p{
  margin-bottom:0;
}

.portal-accordion-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(37,99,235,.16);
  background:rgba(239,246,255,.88);
  color:#1e3a8a;
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}

.portal-accordion-toggle strong{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
}

/* Panel lateral reseñas */

.reviews-side-panel{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
}

.reviews-side-panel.is-open{
  pointer-events:auto;
}

.reviews-side-panel__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.38);
  opacity:0;
  transition:opacity .25s ease;
}

.reviews-side-panel.is-open .reviews-side-panel__overlay{
  opacity:1;
}

.reviews-side-panel__content{
  position:absolute;
  top:0;
  right:0;
  width:min(560px, 94vw);
  height:100%;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:-28px 0 80px rgba(15,23,42,.24);
  transform:translateX(105%);
  transition:transform .28s ease;
  display:flex;
  flex-direction:column;
}

.reviews-side-panel.is-open .reviews-side-panel__content{
  transform:translateX(0);
}

.reviews-side-panel__head{
  padding:24px;
  border-bottom:1px solid rgba(148,163,184,.22);
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.reviews-side-panel__head h2{
  margin:6px 0;
  color:var(--text);
}

.reviews-side-panel__head p{
  margin:0;
  color:var(--muted);
}

.reviews-side-panel__close{
  width:38px;
  height:38px;
  border:0;
  border-radius:14px;
  background:#eef2ff;
  color:#1e3a8a;
  font-size:1.5rem;
  cursor:pointer;
}

.reviews-toolbar{
  padding:0 24px;
}

.reviews-side-panel__body{
  flex:1;
  overflow:auto;
  padding:0 24px 24px;
}

.admin-reviews-list{
  display:grid;
  gap:14px;
}

.admin-review-card{
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.admin-review-card-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.admin-review-card-head strong{
  display:block;
  color:var(--text);
}

.admin-review-card-head span,
.admin-review-card small{
  color:var(--muted);
}

.admin-review-stars{
  color:#f59e0b;
  letter-spacing:2px;
  margin-bottom:10px;
}

.admin-review-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.review-status{
  height:max-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  background:#e2e8f0;
  color:#334155;
}

.review-status-pending{
  background:#fef3c7;
  color:#92400e;
}

.review-status-approved{
  background:#dcfce7;
  color:#166534;
}

.review-status-rejected{
  background:#fee2e2;
  color:#991b1b;
}

@media (max-width: 760px){
  .login-trust-mini__items{
    grid-template-columns:1fr;
  }

  .portal-admin-compact-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-admin-header-actions{
    width:100%;
  }
}


/* ==========================
   Portal shell cleanup
   ========================== */

body.portal-shell{
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: linear-gradient(180deg, #f6f8fc 0%, #eef3f8 100%);
}

body.portal-shell #site-header,
body.portal-shell #site-footer,
body.portal-shell .site-header,
body.portal-shell .site-footer{
  display: none !important;
}

body.portal-shell .client-portal-page{
  min-height: 100vh;
  padding-top: 22px;
}

/* ==========================
   Login VH refinado estable
   ========================== */

.client-login-centered-page{
  min-height: calc(100vh - 74px);
}

.client-login-refined-hero{
  position: relative;
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 46px 0 78px;
  background:
    radial-gradient(circle at 86% 18%, rgba(37,99,235,.10), transparent 18%),
    radial-gradient(circle at 9% 38%, rgba(37,99,235,.07), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 58%, #eef5ff 100%);
}

.client-login-refined-bg{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -140px;
  height: 300px;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(37,99,235,.30) 1px, transparent 1.6px);
  background-size: 22px 22px;
  transform: perspective(600px) rotateX(62deg) scale(1.15);
  transform-origin: bottom center;
  pointer-events: none;
}

.client-login-refined-grid{
  position: relative;
  z-index: 2;
  align-items: center;
}

.client-login-private-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b5cff;
  font-size: .96rem;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.client-login-private-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.22);
}

.client-login-private-icon svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.client-login-benefits-icons{
  margin-top: 28px;
}

.client-login-benefits-icons div{
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  align-items: center;
  padding-right: 18px;
}

.client-login-benefits-icons div::after{
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 1.8rem;
  line-height: 1;
}

.client-login-benefits-icons div i{
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  font-style: normal;
  box-shadow: 0 12px 24px rgba(37,99,235,.22);
}

.client-login-benefits-icons div i svg{
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.client-login-benefits-icons div strong{
  align-self: end;
}

.client-login-benefits-icons div span{
  align-self: start;
}

.client-login-refined-card{
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
}

.client-login-field-icon label{
  margin-bottom: 8px;
}

.client-input-wrap{
  position: relative;
}

.client-input-wrap svg{
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: #64748b;
  pointer-events: none;
}

.client-input-wrap input{
  padding-left: 46px !important;
}

.client-login-submit-refined{
  margin-top: 10px;
}

.client-login-secure-note{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(148,163,184,.16);
}

.client-login-secure-note svg{
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  fill: #1e40af;
}

.client-login-secure-note p{
  margin: 0;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55;
}

.client-login-security-footer{
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(92%, 840px);
  color: #334155;
  text-align: center;
}

.client-login-security-footer span{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.20);
  flex: 0 0 auto;
}

.client-login-security-footer span svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.client-login-security-footer strong{
  font-size: 1.02rem;
  font-weight: 850;
}

@media (max-width: 900px){
  .client-login-refined-hero{
    min-height: auto;
    padding: 42px 0 54px;
  }

  .client-login-security-footer{
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 30px auto 0;
  }
}

/* ==========================
   Portal archivos proyecto
   ========================== */

.portal-file-layout{
  display:grid;
  grid-template-columns:minmax(280px, 390px) 1fr;
  gap:22px;
  align-items:start;
}

.portal-file-upload-card,
.portal-file-list-card{
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  border-radius:26px;
  box-shadow:0 16px 42px rgba(15,23,42,.06);
  padding:22px;
}

.portal-file-upload-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg, #2563eb, #0f172a);
  color:#fff;
  margin-bottom:14px;
  box-shadow:0 16px 34px rgba(37,99,235,.25);
}

.portal-file-upload-icon span{
  font-size:2rem;
  line-height:1;
}

.portal-file-upload-card h3,
.portal-file-list-card h3{
  margin:0 0 8px;
  color:var(--text);
}

.portal-file-upload-card p,
.portal-file-list-card p{
  color:var(--muted);
  line-height:1.6;
}

.portal-file-help{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.4;
}

.portal-file-list-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.portal-files-list{
  display:grid;
  gap:14px;
}

.portal-file-empty{
  padding:22px;
  border-radius:20px;
  background:#f8fafc;
  border:1px dashed rgba(148,163,184,.40);
  color:var(--muted);
}

.portal-file-empty p{
  margin:0;
}

.portal-file-item{
  display:grid;
  grid-template-columns:58px 1fr auto auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 10px 28px rgba(15,23,42,.04);
}

.portal-file-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(37,99,235,.10);
  color:#1e40af;
  font-size:.76rem;
  font-weight:950;
  border:1px solid rgba(37,99,235,.16);
}

.portal-file-info strong{
  display:block;
  color:var(--text);
  margin-bottom:4px;
}

.portal-file-info span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
}

.portal-file-info p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.88rem;
}

.portal-file-status{
  padding:8px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}

.file-status-recibido{
  background:#dbeafe;
  color:#1e40af;
}

.file-status-en_revision{
  background:#fef3c7;
  color:#92400e;
}

.file-status-aprobado{
  background:#dcfce7;
  color:#166534;
}

.file-status-requiere_ajuste{
  background:#fee2e2;
  color:#991b1b;
}

.file-status-descartado{
  background:#e2e8f0;
  color:#334155;
}

@media (max-width: 980px){
  .portal-file-layout{
    grid-template-columns:1fr;
  }

  .portal-file-item{
    grid-template-columns:52px 1fr;
  }

  .portal-file-status,
  .portal-file-download-btn{
    grid-column:2;
    justify-self:start;
  }
}

/* ==========================
   Portal saludo cliente
   ========================== */

.client-portal-welcome{
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.16), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8fbff);
  border:1px solid rgba(148,163,184,.22);
  border-radius:28px;
  padding:26px;
  box-shadow:0 18px 44px rgba(15,23,42,.06);
  margin-bottom:22px;
}

.client-portal-welcome span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2563eb;
  font-size:.82rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.10em;
  margin-bottom:10px;
}

.client-portal-welcome h1{
  margin:0 0 8px;
  color:var(--text);
  font-size:clamp(2rem, 4vw, 3.1rem);
  letter-spacing:-.05em;
}

.client-portal-welcome p{
  margin:0;
  color:var(--muted);
  max-width:760px;
  line-height:1.65;
}

.portal-admin-files-toolbar{
  display:grid;
  grid-template-columns:minmax(240px, 360px) 1fr;
  gap:16px;
  margin:18px 0;
}

.portal-file-item-admin{
  grid-template-columns:58px 1fr 190px auto;
}

.portal-file-status-select{
  width:100%;
  min-height:42px;
  border:1px solid rgba(148,163,184,.32);
  border-radius:999px;
  padding:0 14px;
  background:#fff;
  color:var(--text);
  font-weight:800;
  outline:none;
}

.portal-file-status-select:focus{
  border-color:rgba(37,99,235,.65);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

@media (max-width: 980px){
  .portal-admin-files-toolbar{
    grid-template-columns:1fr;
  }

  .portal-file-item-admin{
    grid-template-columns:52px 1fr;
  }

  .portal-file-status-select,
  .portal-file-download-btn{
    grid-column:2;
    justify-self:start;
    max-width:220px;
  }
}

.portal-admin-files-toolbar-3{
  display:grid;
  grid-template-columns:minmax(220px, 320px) minmax(220px, 320px) 1fr;
  gap:16px;
  margin:18px 0;
}

@media (max-width: 980px){
  .portal-admin-files-toolbar-3{
    grid-template-columns:1fr;
  }
}

/* ==========================
   Entregables y avances
   ========================== */

.portal-deliverables-list{
  display:grid;
  gap:16px;
}

.portal-deliverable-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 12px 34px rgba(15,23,42,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.portal-deliverable-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 46px rgba(15,23,42,.09);
  border-color:rgba(37,99,235,.22);
}

.portal-deliverable-card.is-new::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:26px;
  padding:2px;
  background:linear-gradient(135deg, rgba(37,99,235,.85), rgba(59,130,246,.18), rgba(15,23,42,.5));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:portalNewGlow 1.7s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes portalNewGlow{
  from{
    opacity:.35;
  }
  to{
    opacity:1;
  }
}

.portal-deliverable-card.is-featured{
  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.10), transparent 24%),
    #ffffff;
}

.portal-deliverable-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.portal-deliverable-icon{
  width:54px;
  height:54px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg, #2563eb, #0f172a);
  color:#fff;
  font-size:1.5rem;
  font-weight:900;
  box-shadow:0 14px 30px rgba(37,99,235,.22);
}

.portal-deliverable-main{
  min-width:0;
}

.portal-deliverable-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.portal-deliverable-title-row strong{
  color:var(--text);
  font-size:1.02rem;
}

.portal-deliverable-main span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.5;
}

.portal-deliverable-main p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.55;
}

.portal-new-badge,
.portal-featured-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:950;
}

.portal-new-badge{
  background:#dbeafe;
  color:#1e40af;
  animation:portalBadgePulse 1.4s ease-in-out infinite;
}

.portal-featured-badge{
  background:#fef3c7;
  color:#92400e;
}

@keyframes portalBadgePulse{
  0%, 100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.05);
  }
}

.portal-deliverable-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-left:68px;
}

.portal-check-row{
  margin:8px 0 16px;
}

@media (max-width: 760px){
  .portal-deliverable-top{
    flex-direction:column;
  }

  .portal-deliverable-actions{
    padding-left:0;
  }
}

.client-portal-section#client-deliverables .portal-file-list-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.08), transparent 24%),
    #ffffff;
}

.client-portal-section#client-deliverables .portal-deliverable-card.is-new{
  animation:clientNewDeliverableEntrance .55s ease both;
}

@keyframes clientNewDeliverableEntrance{
  from{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ==========================
   Vista previa entregables - miniatura elegante
   ========================== */

.portal-deliverable-card{
  display:grid;
  grid-template-columns: 150px 1fr;
  gap:16px;
  align-items:start;
}

.portal-deliverable-preview{
  position:relative;
  width:150px;
  height:110px;
  min-height:110px;
  max-height:110px;
  overflow:hidden;
  border-radius:18px;
  margin-bottom:0;
  background:
    linear-gradient(135deg, rgba(37,99,235,.08), rgba(15,23,42,.04)),
    #f8fafc;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.portal-deliverable-preview-img{
  width:100%;
  height:100%;
  min-height:110px;
  max-height:110px;
  object-fit:cover;
  display:block;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .35s ease, transform .35s ease;
}

.portal-deliverable-preview-img.is-loaded{
  opacity:1;
  transform:scale(1);
}

.portal-deliverable-preview-loader{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:12px;
  text-align:center;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  pointer-events:none;
}

.portal-deliverable-preview-img.is-loaded + .portal-deliverable-preview-loader{
  display:none;
}

.portal-deliverable-card .portal-deliverable-top,
.portal-deliverable-card .portal-deliverable-actions{
  grid-column:2;
}

.portal-deliverable-card:not(:has(.portal-deliverable-preview)){
  grid-template-columns:1fr;
}

.portal-deliverable-card:not(:has(.portal-deliverable-preview)) .portal-deliverable-top,
.portal-deliverable-card:not(:has(.portal-deliverable-preview)) .portal-deliverable-actions{
  grid-column:1;
}

@media (max-width: 760px){
  .portal-deliverable-card{
    grid-template-columns:1fr;
  }

  .portal-deliverable-preview{
    width:100%;
    height:160px;
    min-height:160px;
    max-height:160px;
  }

  .portal-deliverable-preview-img{
    min-height:160px;
    max-height:160px;
  }

  .portal-deliverable-card .portal-deliverable-top,
  .portal-deliverable-card .portal-deliverable-actions{
    grid-column:1;
  }
}

/* ==========================
   Equipo - Ecosistema amplio y limpio
   ========================== */

.team-ecosystem-page{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(37,99,235,.07), transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(14,165,233,.07), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.team-ecosystem-head{
  text-align:center;
  max-width:980px;
  margin:0 auto 70px;
}

.team-ecosystem-head .team-page-title{
  text-transform:uppercase;
  letter-spacing:.09em;
  line-height:1.12;
}

.team-ecosystem-head .team-page-title strong{
  display:inline-block;
  color:#2563eb;
}

.team-ecosystem{
  position:relative;
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(260px, 320px) minmax(320px, 1fr);
  grid-template-areas:
    "bryan camilo cristian"
    "jhon center david"
    ". admin .";
  gap:74px 76px;
  align-items:center;
  padding:30px 0 100px;
}

/* Fondo circular decorativo */
.team-ecosystem-orbit{
  position:absolute;
  left:50%;
  top:47%;
  width:720px;
  height:720px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

.orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(37,99,235,.13);
}

.orbit-ring-two{
  inset:90px;
  border-style:dashed;
  border-color:rgba(14,165,233,.20);
}

.orbit-dot{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 7px rgba(37,99,235,.10);
}

.dot-one{ left:50%; top:0; }
.dot-two{ left:8%; top:28%; background:#0891b2; }
.dot-three{ left:8%; bottom:28%; background:#0891b2; }
.dot-four{ right:8%; top:28%; background:#6d28d9; }
.dot-five{ right:8%; bottom:28%; background:#6d28d9; }
.dot-six{ left:50%; bottom:0; background:#1d4ed8; }

/* Centro */
.team-ecosystem-center{
  grid-area:center;
  position:relative;
  z-index:2;
  width:270px;
  min-height:270px;
  margin:0 auto;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 35% 20%, rgba(37,99,235,.13), transparent 36%),
    rgba(255,255,255,.97);
  border:1px solid rgba(37,99,235,.16);
  box-shadow:
    0 28px 80px rgba(15,23,42,.09),
    inset 0 0 0 12px rgba(37,99,235,.035);
}

.team-center-logo{
  width:80px;
  height:75px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  padding:8px;
  border-radius:28px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.team-center-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.team-ecosystem-center h2{
  margin:0;
  color:#0f172a;
  font-size:1.9rem;
  letter-spacing:-.04em;
}

.team-ecosystem-center p{
  margin:10px 0 0;
  color:#64748b;
  line-height:1.45;
  font-size:.94rem;
}

/* Nodos */
.team-node{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:108px minmax(0, 1fr);
  gap:18px;
  align-items:center;
  min-width:0;
}

.team-node-camilo{ grid-area:camilo; }
.team-node-bryan{ grid-area:bryan; }
.team-node-jhon{ grid-area:jhon; }
.team-node-cristian{ grid-area:cristian; }
.team-node-david{ grid-area:david; }
.team-node-admin{ grid-area:admin; }

.team-node-photo{
  position:relative;
  width:108px;
  height:108px;
  border-radius:50%;
  padding:5px;
  background:linear-gradient(135deg, #06b6d4, #2563eb);
  box-shadow:0 16px 38px rgba(15,23,42,.13);
}

.team-node-photo img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  image-rendering:auto;
}

.team-node-photo.is-vacant{
  background:linear-gradient(135deg, #94a3b8, #2563eb);
}

.team-node-photo.is-vacant span{
  position:absolute;
  left:50%;
  bottom:-9px;
  transform:translateX(-50%);
  padding:4px 10px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-size:.66rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.team-node-card{
  position:relative;
  min-width:0;
  padding:20px 20px 18px;
  border-radius:24px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 20px 54px rgba(15,23,42,.085);
  backdrop-filter:blur(10px);
  overflow:hidden;
}

.team-node-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(37,99,235,.07), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(14,165,233,.09), transparent 30%);
}

.team-node-card > *{
  position:relative;
  z-index:1;
}

.team-node-icon{
  position:absolute;
  right:16px;
  top:16px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg, #2563eb, #0f172a);
  box-shadow:0 12px 26px rgba(37,99,235,.22);
  font-weight:950;
  font-size:.9rem;
}

.team-node-card h3{
  margin:0 44px 6px 0;
  color:#0f172a;
  font-size:1.16rem;
  letter-spacing:-.035em;
  line-height:1.15;
}

.team-node-card strong{
  display:inline-flex;
  max-width:calc(100% - 44px);
  padding:5px 10px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:.72rem;
  line-height:1.25;
}

.team-node-area{
  margin:13px 0 0;
  font-weight:900;
  color:#0f172a;
  font-size:.86rem;
  line-height:1.35;
}

.team-node-card p:not(.team-node-area){
  display:none;
}

.team-node-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}

.team-node-tags span{
  padding:5px 9px;
  border-radius:999px;
  background:#f1f5f9;
  color:#334155;
  font-size:.67rem;
  font-weight:850;
}

/* Acentos por rol */
.team-node-bryan .team-node-photo,
.team-node-jhon .team-node-photo{
  background:linear-gradient(135deg, #0891b2, #06b6d4);
}

.team-node-bryan .team-node-card strong,
.team-node-jhon .team-node-card strong{
  background:#ccfbf1;
  color:#0f766e;
}

.team-node-bryan .team-node-icon,
.team-node-jhon .team-node-icon{
  background:linear-gradient(135deg, #0891b2, #0f766e);
}

.team-node-cristian .team-node-photo,
.team-node-david .team-node-photo{
  background:linear-gradient(135deg, #6d28d9, #2563eb);
}

.team-node-cristian .team-node-card strong,
.team-node-david .team-node-card strong{
  background:#ede9fe;
  color:#5b21b6;
}

.team-node-cristian .team-node-icon,
.team-node-david .team-node-icon{
  background:linear-gradient(135deg, #6d28d9, #2563eb);
}

/* Camilo y vacante */
.team-node-camilo,
.team-node-admin{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:left;
  max-width:410px;
  margin:0 auto;
}

.team-node-camilo .team-node-photo,
.team-node-admin .team-node-photo{
  width:122px;
  height:122px;
  margin-bottom:-24px;
  z-index:2;
}

.team-node-camilo .team-node-card,
.team-node-admin .team-node-card{
  width:100%;
  padding-top:40px;
}

/* Responsive tablet */
@media (max-width: 1180px){
  .team-ecosystem{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "camilo camilo"
      "bryan cristian"
      "jhon david"
      "admin admin"
      "center center";
    gap:42px 34px;
  }

  .team-ecosystem-center{
    width:250px;
    min-height:250px;
  }

  .team-ecosystem-orbit{
    display:none;
  }

  .team-node-camilo,
  .team-node-admin{
    max-width:620px;
  }
}

/* Responsive celular */
@media (max-width: 760px){
  .team-ecosystem-head{
    margin-bottom:42px;
  }

  .team-ecosystem-head .team-page-title{
    font-size:2rem;
    letter-spacing:.04em;
  }

  .team-ecosystem{
    grid-template-columns:1fr;
    grid-template-areas:
      "camilo"
      "bryan"
      "jhon"
      "cristian"
      "david"
      "admin"
      "center";
    gap:32px;
    padding-top:20px;
  }

  .team-node,
  .team-node-camilo,
  .team-node-admin{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .team-node-photo,
  .team-node-camilo .team-node-photo,
  .team-node-admin .team-node-photo{
    width:118px;
    height:118px;
    margin-bottom:-22px;
    z-index:2;
  }

  .team-node-card,
  .team-node-camilo .team-node-card,
  .team-node-admin .team-node-card{
    width:100%;
    padding-top:38px;
  }

  .team-ecosystem-center{
    width:230px;
    min-height:230px;
  }

.team-center-logo{
  width:96px;
  height:96px;
  padding:8px;
}

  .team-ecosystem-center h2{
    font-size:1.6rem;
  }
}

/* ==========================
   Centrar contenido tarjetas equipo
   ========================== */

.team-node{
  text-align:center;
}

.team-node-card{
  text-align:center;
}

.team-node-card h3{
  margin:0 auto 8px;
  text-align:center;
}

.team-node-card strong{
  margin:0 auto;
  justify-content:center;
  text-align:center;
  max-width:100%;
}

.team-node-area{
  text-align:center;
  margin:14px auto 0;
}

.team-node-tags{
  justify-content:center;
}

.team-node-icon{
  position:relative;
  right:auto;
  top:auto;
  margin:0 auto 12px;
}

.team-node-card h3{
  margin-right:0;
}

.team-node-card strong{
  max-width:100%;
}

/* ==========================
   Password reset refinado
   ========================== */

.password-reset-hero{
  min-height:calc(100vh - 80px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:84px 0 52px;
}

.password-reset-grid{
  align-items:center;
}

.password-reset-card{
  animation:passwordCardIn .72s cubic-bezier(.22, 1, .36, 1) both;
}

.password-reset-copy{
  animation:passwordCopyIn .76s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes passwordCardIn{
  from{
    opacity:0;
    transform:translateY(24px) scale(.97);
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes passwordCopyIn{
  from{
    opacity:0;
    transform:translateX(-24px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

.client-login-forgot-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:18px;
  text-align:center;
}

.client-login-forgot-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#2563eb;
  font-weight:900;
  font-size:.94rem;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}

.client-login-forgot-link::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 6px rgba(37,99,235,.10);
}

.client-login-forgot-link:hover{
  color:#0f172a;
  transform:translateY(-1px);
}

.client-login-forgot-link:hover::before{
  background:#0f172a;
}

.password-rules-card{
  margin-top:26px;
  padding:22px;
  border-radius:28px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 18px 48px rgba(15,23,42,.08);
  backdrop-filter:blur(12px);
  animation:passwordRulesIn .85s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes passwordRulesIn{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.password-rules-card h3{
  margin:0 0 14px;
  color:#0f172a;
  font-size:1.05rem;
}

.password-rules-card ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.password-rules-card li{
  position:relative;
  padding-left:28px;
  color:#475569;
  font-weight:750;
  line-height:1.35;
}

.password-rules-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg, #2563eb, #06b6d4);
  font-size:.75rem;
  font-weight:950;
}

.password-strength-mini{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin:4px 0 6px;
}

.password-strength-mini span{
  height:7px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(37,99,235,.32), rgba(14,165,233,.24));
}

.password-strength-mini small{
  grid-column:1 / -1;
  color:#64748b;
  font-size:.8rem;
  font-weight:750;
  margin-top:2px;
}

.password-reset-card .client-login-message{
  text-align:center;
}

.password-reset-card .client-login-secure-note{
  margin-top:18px;
}

/* Que el botón del reset conserve buena presencia */
.password-reset-card .client-login-submit{
  margin-top:8px;
}

/* Responsive */
@media (max-width: 980px){
  .password-reset-hero{
    padding:64px 0 44px;
  }

  .password-reset-copy{
    text-align:center;
  }

  .password-reset-copy .client-login-private-label{
    margin-left:auto;
    margin-right:auto;
  }

  .password-rules-card{
    text-align:left;
  }
}

@media (max-width: 640px){
  .password-reset-hero{
    min-height:auto;
    padding:44px 0 34px;
  }

  .password-reset-card{
    border-radius:28px;
  }

  .client-login-forgot-wrap{
    margin-top:16px;
  }
}