/* ===========================================================
   Cyverse Consulting — CSS Servicios (UNIFICADO)
   Móvil-first, responsive, válido para todos los servicios
   =========================================================== */

/* ------------------------
   RESET Y BOX MODEL
------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color: #0f172a;
  background: #fff;
}

/* ------------------------
   TOKENS DE DISEÑO (Variables)
------------------------- */
:root{
  --svc-max-w: 1120px;
  --svc-gutter: 16px;

  --svc-bg: #ffffff;
  --svc-bg-soft: #f8fafc;
  --svc-fg: #0f172a;
  --svc-fg-soft: #334155;
  --svc-muted: #64748b;

  --svc-primary: #2ea3ff;
  --svc-primary-ink: #0b3a57;
  --svc-accent: #10b981;

  --svc-border: #e5e7eb;

  --svc-radius: 14px;
  --svc-radius-lg: 18px;

  --svc-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --svc-shadow-md: 0 6px 16px rgba(15,23,42,.08);

  --svc-h1: clamp(28px, 5vw, 42px);
  --svc-h2: clamp(22px, 4vw, 32px);
  --svc-h3: clamp(18px, 3vw, 22px);
  --svc-lead: clamp(16px, 2.6vw, 18px);
  --svc-tight: 1.15;
}

/* ------------------------
   NAVBAR / HEADER (gradiente corporativo)
------------------------- */
body.svc-page.svc-light .svc-header{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, #0A1B3D 0%, #102E5C 50%, #1E3A8A 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px);
}
body.svc-page.svc-light .svc-header a{ color:#fff !important; text-decoration:none; }
body.svc-page.svc-light .svc-header a:hover{ opacity:.9; }

/* ------------------------
   CONTENEDOR Y SECCIONES
------------------------- */
.svc-container{
  width:100%;
  max-width: calc(var(--svc-max-w) + var(--svc-gutter)*2);
  margin-inline:auto;
  padding-inline:var(--svc-gutter);
}
.svc-section{ padding-block:36px; }
@media (min-width:768px){ .svc-section{ padding-block:56px; } }

/* ------------------------
   TIPOGRAFÍA BASE
------------------------- */
.svc-title-xxl{ font-size:var(--svc-h1); line-height:1.1; margin:0 0 8px; }
.svc-title-xl{  font-size:var(--svc-h2); line-height:1.12; margin:0 0 8px; }
.svc-title-lg{  font-size:var(--svc-h3); line-height:1.15; margin:0 0 6px; }
.svc-lead{ font-size:var(--svc-lead); color:var(--svc-fg-soft); line-height:1.5; margin:0; }
.svc-subtitle{ color:var(--svc-fg-soft); margin:4px 0 0; font-size:15px; }

/* Unificación: H1 de los hero */
.svc-hero .svc-title-xxl{
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

/* ------------------------
   BOTONES (unificados CTA con azul #0d6efd)
------------------------- */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--svc-radius-lg);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--svc-shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
  cursor: pointer;
}

.svc-btn:active {
  transform: translateY(1px);
}

/* CTA principal */
.svc-btn--primary {
  background: #0d6efd;   /* azul corporativo */
  color: #fff;           /* texto siempre blanco */
}
.svc-btn--primary:hover {
  background: #0b5ed7;   /* hover más oscuro */
  box-shadow: var(--svc-shadow-md);
}

/* Botón ghost (alternativo) */
.svc-btn--ghost {
  background: transparent;
  border-color: var(--svc-border);
  color: var(--svc-fg);
}
.svc-btn--ghost:hover {
  background: var(--svc-bg-soft);
}


/* ------------------------
   HERO (métricas sin sticky)
------------------------- */
.svc-hero{ display:grid; gap:20px; grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){
  .svc-hero{ grid-template-columns:1.05fr .95fr; gap:28px; align-items:center; }
}
.svc-hero__eyebrow{ color:var(--svc-muted); text-transform:uppercase; font-size:12px; margin-bottom:8px; }
.svc-hero__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* Variante con bloque de métricas */
.svc-hero--metrics{ grid-template-columns:1fr; }
.svc-hero__metrics .svc-card{ width:100%; }
@media (min-width:960px){
  .svc-hero--metrics{ grid-template-columns:1.05fr .95fr; gap:28px; align-items:center; }
}
.svc-metrics{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:520px){ .svc-metrics{ grid-template-columns:1fr 1fr; } }
.svc-metric{
  display:grid; gap:4px; padding:10px;
  border:1px solid var(--svc-border); border-radius:var(--svc-radius);
  background:var(--svc-bg-soft);
}
.svc-metric strong{ display:block; font-size:16px; line-height:1.15; }
.svc-metric span{ display:block; color:var(--svc-fg-soft); font-size:14px; }
.svc-hero-badges{ display:flex; flex-wrap:wrap; gap:8px; }

/* ------------------------
   GRIDS FLUIDOS (auto-fit)
------------------------- */
.svc-grid-2{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.svc-grid-3{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* opcional por si aparece: */
.svc-grid-4{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ------------------------
   CARDS (unificado)
------------------------- */
.svc-card{
  background:var(--svc-bg);
  border:1px solid var(--svc-border);
  border-radius:var(--svc-radius);
  padding:16px;
  box-shadow:var(--svc-shadow-sm);
  display:flex; flex-direction:column; min-width:0;
}
@media (min-width:960px){ .svc-card{ padding:18px; } }
.svc-card > * + *{ margin-top:8px; }
.svc-card h3{ font-size:clamp(17px,1.8vw,20px); line-height:1.2; margin:0; font-weight:800; }
.svc-card p{ margin:0; color:var(--svc-fg-soft); line-height:1.45; font-size:15px; }
.svc-card .svc-icon{ font-size:clamp(22px,2.2vw,28px); line-height:1; margin:0 0 6px 0; }
.svc-card .svc-list{ gap:8px; }
.svc-card .svc-li-ico{ color:var(--svc-accent); }
.svc-card__foot{ margin-top:auto; font-size:13.5px; color:var(--svc-muted); }
.svc-card--compact{ padding:12px; }
.svc-card--soft{ background:var(--svc-bg-soft); }
.svc-card--hover{ transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease; }
.svc-card--hover:hover{ box-shadow:var(--svc-shadow-md); border-color:rgba(46,163,255,.35); }
.svc-card--shadowless{ box-shadow:none; }

/* ------------------------
   STEPS / METODOLOGÍA
------------------------- */
.svc-steps{ display:grid; gap:10px; }
.svc-step{
  display:grid; grid-template-columns:36px 1fr; gap:12px;
  padding:12px; border:1px dashed var(--svc-border);
  border-radius:var(--svc-radius); background:var(--svc-bg-soft);
}
.svc-step-num{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background:var(--svc-primary); color:#00131f;
}

/* ------------------------
   BADGES / LISTAS
------------------------- */
.svc-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:4px 8px;
  border-radius:999px; background:#ecfeff; color:#055160; border:1px solid #bae6fd;
}
.svc-badge--ok{ background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
.svc-badge--warn{ background:#fff7ed; color:#7c2d12; border-color:#fed7aa; }
.svc-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.svc-list li{ display:grid; grid-template-columns:20px 1fr; gap:8px; }
.svc-list .svc-li-ico{ font-size:16px; color:var(--svc-accent); }

/* ------------------------
   CALLOUTS / DESTACADOS
------------------------- */
.svc-callout{
  border:1px solid var(--svc-border);
  background: linear-gradient(0deg, rgba(46,163,255,.06), rgba(46,163,255,.06)), var(--svc-bg);
  padding:16px; border-radius:var(--svc-radius-lg);
}

/* ------------------------
   ENTREGABLES
   (Cards en móvil, tabla en desktop)
------------------------- */
/* móvil por defecto: cards visibles, tabla oculta */
.svc-deliverables{ display:grid; gap:12px; }
.svc-deliverable{
  border:1px solid var(--svc-border);
  border-radius:var(--svc-radius);
  background:var(--svc-bg-soft);
  padding:12px; box-shadow:var(--svc-shadow-sm);
}
.svc-deliverable h3{ margin:0 0 6px; font-size:16px; font-weight:600; line-height:var(--svc-tight); }
.svc-deliverable p{ margin:0; font-size:14px; color:var(--svc-fg-soft); }
.svc-table-wrap{ display:none; } /* la tabla existe pero se oculta en móvil */

@media (min-width:960px){
  .svc-table-wrap{
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .svc-table{
    width:100%; border-collapse:collapse; min-width:560px;
    border:1px solid var(--svc-border); border-radius:var(--svc-radius); background:var(--svc-bg);
  }
  .svc-table th,.svc-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--svc-border); }
  .svc-table thead th{ background:var(--svc-bg-soft); font-weight:600; }

  .svc-deliverables{ display:none; } /* en desktop mostramos solo la tabla */
}

/* ------------------------
   PRICING v2 (cards legibles)
------------------------- */
.svc-pricing{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px;
}
@media (min-width:960px){
  .svc-pricing{ grid-template-columns:repeat(3,1fr); gap:20px; }
}
.svc-pricecard{
  border:1px solid var(--svc-border);
  border-radius:16px;
  background:var(--svc-bg);
  box-shadow:var(--svc-shadow-sm);
  padding:18px;
}
@media (min-width:960px){ .svc-pricecard{ padding:20px; } }
.svc-pricecard > * + *{ margin-top:12px; }

.svc-pricecard__title{ font-size:20px; font-weight:800; line-height:1.15; margin:0; }
.svc-pricecard__subtitle{ font-size:15px; color:var(--svc-fg-soft); margin:4px 0 0 0; }
.svc-pricecard__price{ font-weight:800; font-size:26px; line-height:1.15; }
.svc-pricecard__price small{ font-weight:600; color:var(--svc-muted); font-size:15px; }
.svc-pricecard .svc-list{ gap:10px; }
.svc-pricecard .svc-list li{ line-height:1.45; }
.svc-pricecard .svc-li-ico{ color:var(--svc-accent); }
.svc-pricecard__foot{
  margin-top:10px; font-size:13.5px; color:var(--svc-muted);
  background:var(--svc-bg-soft); border:1px solid var(--svc-border);
  border-radius:12px; padding:8px 10px;
}
.svc-pricecard--featured{ border-color:rgba(46,163,255,.45); box-shadow:var(--svc-shadow-md); }

/* Nota informativa al pie de precios (recuadro) */
.svc-pricing-note{
  margin-top:20px; font-size:15px; line-height:1.5; color:var(--svc-fg);
  background:var(--svc-bg-soft); border:1px solid var(--svc-border);
  border-radius:14px; padding:14px 16px; box-shadow:var(--svc-shadow-sm);
}
@media (min-width:960px){
  .svc-pricing-note{ text-align:center; max-width:900px; margin-left:auto; margin-right:auto; }
}
/* Encabezado de la sección de precios más cómodo */
.svc-section h2 + .svc-subtitle{ font-size:16px; line-height:1.6; margin-top:4px; }

 /*=========================================================
   Footer mini
   ========================================================= */
.footer-mini{
  background:#0b0f16; color:#e5e7eb; border-top:1px solid rgba(255,255,255,.06);
}
.footer-mini__grid{
  display:grid; grid-template-columns:auto 1fr 1fr; align-items:center;
  column-gap:24px; row-gap:12px; padding:16px 0;
}
.footer-mini__brand{ display:flex; align-items:center; gap:14px; }
.footer-mini__logo{ height:100px; width:auto; max-width:320px; object-fit:contain; }
.footer-mini__brand-text{ display:flex; flex-direction:column; gap:4px; }
.footer-mini__brand-text strong{ font-size:1.05rem; }
.footer-mini__tag{ color:#b6c2d6; font-size:.95rem; }
.footer-mini__connect ul{ display:flex; gap:14px; align-items:center; }
.footer-mini__connect a{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#cfe0ff; }
.footer-mini__connect a:hover{ text-decoration:underline; }
.footer-mini__connect svg{ width:18px; height:18px; color:#93c5fd; }
.footer-mini__legal{ justify-self:end; }
.footer-mini__legal ul{ display:flex; gap:14px; }
.footer-mini__copy{ margin:0; color:#9aa5b1; font-size:.95rem; }
@media (max-width:900px){
  .footer-mini__grid{ grid-template-columns:1fr; align-items:flex-start; }
  .footer-mini__legal{ justify-self:start; }
}
@media (max-width:520px){ .footer-mini__logo{ height:72px; max-width:260px; } }

.footer-mini__brand-link {
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit;
}
.footer-mini__brand-link:hover { opacity:.9; }

/* ------------------------
   UTILIDADES MÍNIMAS
------------------------- */
.svc-center{ text-align:center; }
.svc-right{ text-align:right; }
.svc-stack-8 > * + *{ margin-top:8px; }
.svc-stack-12 > * + *{ margin-top:12px; }
.svc-img{ width:100%; height:auto; display:block; border-radius:var(--svc-radius); }

/* ------------------------
   BREAKPOINTS — Ajustes globales de gutter
------------------------- */
@media (min-width:640px){ :root{ --svc-gutter: 20px; } }
@media (min-width:960px){ :root{ --svc-gutter: 24px; } }


/* (Opcional) un poco más de aire entre columnas muy anchas */
@media (min-width: 1200px) {
  .svc-grid-2 { gap: 20px; }
}

/* (Opcional) icono un poco más protagonista en cards con icono */
.svc-card .svc-icon { font-size: clamp(24px, 2.4vw, 30px); }

/* (Opcional) variante hover sutil si son ‘interactivas’ */
.svc-card--hover:hover {
  box-shadow: var(--svc-shadow-md);
  border-color: rgba(46,163,255,.35);
}

/* Metodología: mejor lectura y tactilidad */
.svc-steps { gap: 12px; }
.svc-step {
  padding: 14px 16px;
  border: 1px dashed var(--svc-border);
  border-radius: 16px;              /* pill más marcado */
  background: var(--svc-bg-soft);
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.svc-step-num {
  width: 32px; height: 32px;        /* un toque más compacto en móviles */
  font-size: 14px;
  background: var(--svc-primary);
  color: #00131f;
}
@media (min-width: 640px){
  .svc-step { padding: 16px 18px; }
  .svc-step-num { width: 36px; height: 36px; font-size: 15px; }
}
.svc-step:is(:hover, :focus-within) {
  box-shadow: var(--svc-shadow-md);
  border-color: rgba(46,163,255,.35);
  background: #f3f8ff;              /* sutil hover */
}
.svc-step h3 { margin: 0; font-weight: 800; }
.svc-step .svc-subtitle { margin-top: 4px; line-height: 1.5; }

/* ==========================================
   FEATURES — patrón genérico para beneficios/ventajas
   ========================================== */

/* Contenedor (grid fluido 1→3 cols) */
.svc-features {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card horizontal con icono + contenido */
.svc-card--feature {
  display: grid;
  grid-template-columns: 40px 1fr;   /* icono a la izquierda */
  align-items: start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
}

/* Icono */
.svc-card--feature .svc-icon {
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1;
  margin: 0;
}

/* Texto */
.svc-card--feature h3 {
  margin: 0 0 4px;
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 800;
  line-height: 1.2;
}
.svc-card--feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--svc-fg-soft);
}
/* ==========================================
   FAQ — details/summary unificado y accesible
   ========================================== */
.svc-faq {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

/* Card base del <details> */
.svc-faq details {
  border: 1px solid var(--svc-border);
  border-radius: 16px;
  background: var(--svc-bg);
  box-shadow: var(--svc-shadow-sm);
  overflow: hidden;                 
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Encabezado clickable */
.svc-faq summary {
  list-style: none;                 
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 500;                 /* <- ya no en negrita */
  font-size: 16px;
  line-height: 1.35;                /* un poco más aire */
  cursor: pointer;
  user-select: none;
}
.svc-faq summary::-webkit-details-marker { display: none; }

/* Chevron personalizado a la derecha */
.svc-faq summary::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border: 2px solid currentColor;
  border-left: 0; border-top: 0;     
  transform: rotate(-45deg);         
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}

/* Estado abierto */
.svc-faq details[open] {
  background: var(--svc-bg-soft);
  border-color: rgba(46,163,255,.35);
  box-shadow: var(--svc-shadow-md);
}
.svc-faq details[open] summary::after {
  transform: rotate(135deg);         
  opacity: 1;
}
.svc-faq details[open] summary {
  border-bottom: 1px dashed var(--svc-border);
}

/* Cuerpo de la respuesta */
.svc-faq .answer {
  padding: 12px 16px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--svc-fg-soft);
  animation: faq-reveal .18s ease;
}

/* Accesibilidad: foco visible */
.svc-faq summary:focus-visible {
  outline: 3px solid rgba(46,163,255,.4);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Hover sutil (desktop) */
@media (hover:hover) {
  .svc-faq details:hover {
    box-shadow: var(--svc-shadow-md);
    border-color: rgba(46,163,255,.35);
  }
}

/* Animación leve */
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------
   FOOTER (unificado con navbar)
------------------------- */
.svc-footer {
  background: linear-gradient(90deg, #0A1B3D 0%, #102E5C 50%, #1E3A8A 100%);
  color: #fff;
  padding: 24px 0;
  margin-top: 40px;
  font-size: 14px;
}
.svc-footer .svc-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ==========================================
   NAVBAR LOGO — tamaño unificado (móvil-first)
   ========================================== */
.svc-header__logo {
  height: 60px;    /* tamaño base en móvil */
  width: auto;
  display: block;
}

@media (min-width: 960px) {
  .svc-header__logo {
    height: 75px;  /* más grande y visible en desktop */
  }
}


/* Links */
.svc-footer__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.svc-footer__links a {
  color: #fff;
  text-decoration: none;
}
.svc-footer__links a:hover {
  text-decoration: underline;
}

/* FOOTER LOGO — tamaño unificado y por encima de reglas globales */
footer.svc-footer .svc-footer__logo {
  height: 50px !important;  /* móvil */
  width: auto !important;
  max-width: 100%;
  display: block;
}

@media (min-width: 960px) {
  footer.svc-footer .svc-footer__logo {
    height: 60px !important; /* desktop */
  }
}

/* Hero grid dentro del container */
.svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 960px){
  .svc-hero__grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: center;
  }
}

/* ==== PRICING — alinear CTA al fondo de cada card ==== */
.svc-pricecard{
  display: flex;              /* columna */
  flex-direction: column;
}

.svc-pricecard > * + *{
  margin-top: 12px;           /* mantiene el ritmo vertical */
}

/* El contenedor del botón (el que usamos en las cards) */
.svc-pricecard .svc-hero__cta{
  margin-top: auto;           /* empuja el CTA al fondo */
  display: flex;
  gap: 10px;
}

/* opcional: ancho amigable del botón sin romper en móvil */
.svc-pricecard .svc-hero__cta .svc-btn{
  max-width: 220px;
}


/* ===== Fix cross-sell (listas cortadas y CTA) ===== */
.svc-cross .svc-card-text,
.svc-cross .svc-list {
  white-space: normal;         /* no fuerces líneas raras */
  word-break: normal;
  overflow-wrap: anywhere;     /* solo rompe palabras muuuy largas */
  width: 100%;                 /* evita columnas angostas heredadas */
  display: block;              /* anula posibles display:grid en <ul> */
  margin-top: 8px;
}

.svc-cross .svc-list { 
  padding-left: 20px; 
  margin-bottom: 12px;
}

.svc-cross .svc-cta-row {
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  align-items: center;
}

/* Opcional: asegura layout de tarjeta en este bloque */
.svc-cross .svc-card { 
  display: grid; 
  grid-template-columns: 40px 1fr; 
  gap: 12px; 
}
.svc-cross .svc-icon { grid-column: 1; }
.svc-cross .svc-card-title,
.svc-cross .svc-card-text,
.svc-cross .svc-list,
.svc-cross .svc-cta-row { grid-column: 2; }

/* ===== CROSS-SELL: RESET DURO DE TEXTO Y LISTAS ===== */
.svc-cross .svc-card { 
  display: block !important;          /* fuera grids/flex heredados raros */
  width: 100% !important;
}

.svc-cross .svc-card-text,
.svc-cross .svc-list,
.svc-cross .svc-list li {
  display: block !important;
  width: 100% !important;
  max-width: none !important;

  /* Evitar “letra por línea” */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

/* Bullets normales y espaciado */
.svc-cross .svc-list { 
  padding-left: 20px !important; 
  margin: 10px 0 14px !important;
  list-style: disc !important;
}
.svc-cross .svc-list li { margin-bottom: 6px !important; }

/* CTA azules consistentes */
.svc-cross .svc-cta-row { 
  display: flex !important; 
  gap: 12px !important; 
  flex-wrap: wrap !important; 
  align-items: center !important; 
}
.svc-cross .svc-btn.svc-btn--primary { 
  background:#0d6efd !important; 
  color:#fff !important; 
}
.svc-cross .svc-btn.svc-btn--primary:hover { background:#0b5ed7 !important; }
.svc-cross .svc-btn.svc-btn--ghost { 
  background:transparent !important; 
  border:1px solid var(--svc-border, #e5e7eb) !important; 
  color:var(--svc-fg, #111827) !important; 
}


.cross2 { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px; 
  margin-top: 20px;
}
@media (min-width: 768px) {
  .cross2 { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.cross2-card {
  background: var(--svc-bg, #fff);
  border: 1px solid var(--svc-border, #e5e7eb);
  border-radius: var(--svc-radius-xl, 16px);
  padding: 16px 18px;
  box-shadow: var(--svc-shadow-xs, 0 1px 2px rgba(0,0,0,.04));
}
.cross2-head { display: flex; align-items: center; gap: 10px; }
.cross2-icon { color: var(--svc-accent, #0d6efd); display:inline-flex; }
.cross2-title { margin: 0; }
.cross2-text { margin: 6px 0 10px; }

.cross2-feats { display: grid; gap: 8px; margin: 8px 0 14px; }
.cross2-feat { display: flex; gap: 8px; align-items: flex-start; }
.cross2-feat .check {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--svc-border, #e5e7eb);
  font-size: 12px; line-height: 1;
}

.cross2-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }


/* ===== CX (aislado para evitar colisiones) ===== */
.cx-cross{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  margin-top:16px !important;
}

.cx-card{
  display:block !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  padding:16px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
  overflow:hidden !important;
}

.cx-head{ display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:6px !important; }
.cx-icon{ display:inline-flex !important; line-height:0 !important; color:#0d6efd !important; }
.cx-title{ margin:0 !important; line-height:1.2 !important; font-weight:800 !important; font-size:clamp(17px,1.8vw,20px) !important; }
.cx-text{ margin:6px 0 10px !important; color:var(--svc-fg-soft,#334155) !important; line-height:1.45 !important; }

.cx-feats{ display:grid !important; gap:8px !important; margin:8px 0 12px !important; }
.cx-feat{ display:flex !important; gap:8px !important; align-items:flex-start !important; line-height:1.45 !important; white-space:normal !important; word-break:normal !important; overflow-wrap:break-word !important; }
.cx-check{
  display:inline-flex !important; width:18px !important; height:18px !important;
  align-items:center !important; justify-content:center !important;
  border-radius:999px !important; border:1px solid #e5e7eb !important;
  font-size:12px !important; line-height:1 !important; flex:0 0 18px !important;
}

.cx-cta{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; align-items:center !important; margin-top:6px !important; }
.cx-cta .svc-btn.svc-btn--primary{
  background:#0d6efd !important; color:#fff !important; border-color:transparent !important;
}
.cx-cta .svc-btn.svc-btn--primary:hover{ background:#0b5ed7 !important; }

@media (min-width:768px){
  .cx-cross{ grid-template-columns:1fr 1fr !important; gap:20px !important; }
  .cx-card{ padding:18px !important; }
}

/* =========================================================
   LEGAL (Política / Aviso) — compat con css-servicios.css
   Todo scopeado a .legal-page para no afectar servicios
   ========================================================= */

/* Contenedor base */
.legal-page .svc-container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:16px;
}
@media (max-width:600px){
  .legal-page .svc-container{ padding-inline:14px; }
}

/* Header/nav */
.legal-page .svc-header{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(90deg,#0A1B3D 0%,#102E5C 50%,#1E3A8A 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.legal-page .svc-header .svc-container{
  display:flex; align-items:center; gap:12px; padding:8px 16px;
}
.legal-page .svc-brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.legal-page .svc-logo{ height:60px; width:auto; display:block; }
@media (max-width:480px){ .legal-page .svc-logo{ height:50px; } }

/* Tipografía */
.legal-page h1.svc-title-xl{
  margin:0 0 14px;
  font-weight:900; letter-spacing:-.01em; line-height:1.15;
  font-size: clamp(28px, 4.5vw, 38px);
  color:#0f172a;
}
.legal-page h2.svc-title-lg{
  margin:26px 0 8px;
  font-weight:800; letter-spacing:-.01em; line-height:1.22;
  font-size: clamp(20px, 3.2vw, 24px);
  color:#0f172a;
}
.legal-page p{ margin:0 0 12px; color:#0f172a; line-height:1.6; }
.legal-page a{ color:#2563EB; text-decoration:none; }
.legal-page a:hover{ text-decoration:underline; }

/* Listas */
.legal-page .svc-list{ margin:10px 0 14px; padding-left:18px; }
.legal-page .svc-list li{ list-style:disc; margin:8px 0; }

/* Main */
.legal-page main{
  max-width:900px; margin-inline:auto;
  padding-top:28px; padding-bottom:48px;
}

/* Footer legal */
.legal-page .svc-footer{
  background:#0b3a7a; color:#fff; padding:18px 0; margin-top:40px;
}
.legal-page .svc-footer .svc-container{
  display:flex; flex-wrap:wrap; gap:12px 16px;
  justify-content:space-between; align-items:center; font-size:14px;
}
.legal-page .svc-footer a{ color:#fff; text-decoration:none; }
.legal-page .svc-footer a:hover{ text-decoration:underline; }
@media (max-width:640px){
  .legal-page .svc-footer .svc-container{
    flex-direction:column; align-items:flex-start;
  }
}

/* Robustez móvil: nada se sale del ancho */
.legal-page html, .legal-page body{ overflow-x:hidden; max-width:100%; }
.legal-page main, .legal-page header, .legal-page footer{ overflow-x:clip; }
.legal-page img, .legal-page svg, .legal-page video, .legal-page canvas, .legal-page iframe{
  max-width:100%; height:auto; display:block;
}

/* ===== LEGAL: listas y texto normalizados ===== */
.legal-page main.svc-container{
  max-width: 900px;
  padding: 28px 16px 48px;
}

/* UL/LI con flujo normal (sin grid/flex heredados) */
.legal-page .svc-list{
  display: block;                 /* asegura flujo estándar */
  list-style: disc;               /* viñetas clásicas */
  padding-left: 1.25rem;          /* sangría de la viñeta */
  margin: 0 0 14px;
}

/* Cada ítem como list-item, sin columnas estrechas ni cortes por palabra */
.legal-page .svc-list li{
  display: list-item;
  margin: 0 0 8px;
  line-height: 1.7;

  /* anulan cortes agresivos de reglas globales */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;                  /* cortes bonitos si hace falta */
}

/* Párrafos también sin “romper por cualquier lado” */
.legal-page p{
  word-break: normal;
  overflow-wrap: normal;
}

/* =========================================================
   Footer mini
   ========================================================= */
.footer-mini{
  background:#0b0f16; 
  color:#e5e7eb; 
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-mini__grid{
  display:grid; 
  grid-template-columns:auto 1fr 1fr; 
  align-items:center;
  column-gap:24px; 
  row-gap:12px; 
  padding:16px 0;
}
.footer-mini__brand{ display:flex; align-items:center; gap:14px; }
.footer-mini__logo{ height:100px; width:auto; max-width:320px; object-fit:contain; }
.footer-mini__brand-text{ display:flex; flex-direction:column; gap:4px; }
.footer-mini__brand-text strong{ font-size:1.05rem; }
.footer-mini__tag{ color:#b6c2d6; font-size:.95rem; }

.footer-mini__connect ul{ display:flex; gap:14px; align-items:center; }
.footer-mini__connect a{ 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  font-weight:600; 
  color:#cfe0ff; 
}
.footer-mini__connect a:hover{ text-decoration:underline; }
.footer-mini__connect svg{ width:18px; height:18px; color:#93c5fd; }

.footer-mini__legal{ justify-self:end; }
.footer-mini__legal ul{ display:flex; gap:14px; }
.footer-mini__copy{ margin:0; color:#9aa5b1; font-size:.95rem; }

@media (max-width:900px){
  .footer-mini__grid{ grid-template-columns:1fr; align-items:flex-start; }
  .footer-mini__legal{ justify-self:start; }
}
@media (max-width:520px){ .footer-mini__logo{ height:72px; max-width:260px; } }

/* Link del logo */
.footer-mini__brand-link{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.footer-mini__brand-link:hover{ opacity:.9; }

/* Footer mini — reset listas */
.footer-mini__connect ul,
.footer-mini__legal ul { list-style:none; margin:0; padding:0; }
.footer-mini__connect li,
.footer-mini__legal li { margin:0; padding:0; }


/* Footer mini — estilo links legales */
.footer-mini__legal a {
  color: #cfe0ff;          /* tono claro sobre fondo oscuro */
  text-decoration: none;   /* sin subrayado por defecto */
  font-weight: 500;        /* un poco más marcado */
}

.footer-mini__legal a:hover {
  text-decoration: underline; /* subrayado solo al pasar el mouse */
  color: #ffffff;             /* más contraste al hover */
}

/* Header (barra visible y consistente) */
header.svc-header{
  background:#ffffff !important;
  border-bottom:1px solid #e5e7eb !important;
  min-height:72px !important;
  display:flex !important;
  align-items:center !important;
}
header.svc-header .svc-container{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
}
.svc-header__logo{
  height:60px !important;
  width:auto !important;
  display:block !important;
}
@media (min-width:960px){
  .svc-header__logo{ height:75px !important; }
}

.svc-grid-2--align-cta .svc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.svc-grid-2--align-cta .svc-card .svc-btn {
  margin-top: auto;
  align-self: flex-start;
}
/* Alinear el CTA al fondo SOLO en la fila ENS/ISO */
@media (min-width: 960px){
  .svc-grid-2--align-cta .svc-card { display:flex; }
  .svc-grid-2--align-cta .svc-card > div {
    display:flex; flex-direction:column; flex:1 1 auto;
  }
  .svc-grid-2--align-cta .svc-card .svc-hero__cta {
    margin-top:auto;
  }
}

.svc-note {
  background: #f8fafc;        /* gris clarito */
  border: 1px solid #e2e8f0;  /* borde suave */
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #334155;             /* gris oscuro */
  margin-top: 12px;
}

/* Pricing: igualar altura de la píldora y alinear CTA */
.svc-pricing .svc-pricecard{
  display: flex;
  flex-direction: column;
}

.svc-pricing .svc-pricecard__foot{
  /* apariencia (respeta la estética actual si ya la tenías) */
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 14px;

  /* clave para alinear entre cards */
  min-height:44px;                /* ajusta 40–48 si querés */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  /* empuja la píldora hacia abajo para que quede parejo */
  margin-top:auto;
}

.svc-pricing .svc-hero__cta{
  margin-top:12px;                /* separa botón de la píldora */
}

/* En móvil, dejá que fluya sin altura fija */
@media (max-width:640px){
  .svc-pricing .svc-pricecard__foot{ min-height:auto; }
}


/* ENS / ISO 27001 — no estirar en móvil */
@media (max-width: 959.98px){
  .svc-grid-2--align-cta .svc-card { 
    display: block;
  }
  .svc-grid-2--align-cta .svc-card > div {
    display: block;
  }
  .svc-grid-2--align-cta .svc-card .svc-hero__cta {
    margin-top: 12px;
  }
}

/* Footer mini — robustez móvil y logo controlado */
@media (max-width: 900px){
  .footer-mini__grid{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
    row-gap: 14px !important;
    text-align: left; /* usa center si preferís todo centrado */
  }
}
.footer-mini__logo{
  max-width: 260px;
  height: auto;
}

/* Medios fluidos — evita desbordes que rompan el layout en móvil */
.svc-section img,
.svc-section video,
.svc-section iframe {
  max-width: 100%;
  height: auto;
  display: block;
}


/* Footer mini — robustez móvil y logo controlado */
@media (max-width: 900px){
  .footer-mini__grid{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
    row-gap: 14px !important;
    text-align: left; /* usa center si preferís todo centrado */
  }
}
.footer-mini__logo{
  max-width: 260px;
  height: auto;
}

/* Medios fluidos — evita desbordes que rompan el layout en móvil */
.svc-section img,
.svc-section video,
.svc-section iframe {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   FOOTER MINI — tamaño compacto desktop + móvil estable
   (ajuste 2025-10-21)
   ========================================================= */

/* Desktop por defecto */
.footer-mini{
  padding: 14px 0 !important;
}
.footer-mini__grid{
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
}
.footer-mini__logo{
  height: 64px !important;          /* antes era ~100px */
  max-width: 220px !important;
  width: auto !important;
}
.footer-mini__brand-text strong{ font-size: 1rem !important; }
.footer-mini__tag{ font-size: .9rem !important; }

/* Links más compactos y alineados */
.footer-mini__connect ul{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.footer-mini__connect a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  white-space: nowrap;      /* evita saltos raros en desktop */
}
.footer-mini__connect svg{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  vertical-align: middle !important;
}

/* Móvil / tablet: apilado y sin overflow */
@media (max-width: 900px){
  .footer-mini__grid{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
    row-gap: 14px !important;
    text-align: left;
  }
  .footer-mini__logo{
    max-width: 200px !important;
    height: auto !important;
  }
  .footer-mini__connect a{
    white-space: normal;            /* permite 2 líneas si hace falta */
    word-break: break-word;
  }
}