/* ============================================================
   Geometrologia CMS · Estilos principales
   Look moderno 2026: radios generosos + bordes finos de contraste
   Peso: ~8KB sin comprimir, ~3KB con gzip
   ============================================================ */

/* ---------- Reset y base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1f1f1f;
  background: #f5f5f4;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca-primary); text-decoration: none; }
a:hover { opacity: 0.8; }

h1, h2, h3, h4 { font-weight: 500; color: var(--marca-dark); margin-top: 0; }

/* Material symbols: tamaño default razonable */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  font-size: 20px;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--marca-dark);
  color: #b5d4f4;
  font-size: 12px;
  padding: 7px 0;
}

/* ---------- Header ---------- */
/* ---------- Header (corregido) ---------- */
.header-main {
  background: #fff;
  border-bottom: 1px solid var(--marca-border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-main .container {
  min-height: 80px;
  gap: 24px;
}

/* Brand simplificado: solo el lockup ocupa el bloque */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-lockup {
  height: 50px;
  width: auto;
  display: block;
}

/* Placeholder mientras no hay logo cargado */
.brand-placeholder {
  height: 50px;
  padding: 0 18px;
  background: #e6f1fb;
  border: 1px solid #b5d4f4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--marca-accent);
  font-size: 11px;
  letter-spacing: 1px;
}

/* Nav items con line-height limpia */
.nav-main {
  display: flex;
  gap: 22px;
  align-items: center;
}

.nav-item {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding: 8px 0;
  line-height: 1;
  transition: color 0.15s;
}

.nav-item:hover,
.nav-item.active {
  color: var(--marca-primary);
  font-weight: 500;
}

/* CTA: rojo INGEOTOP, alineación pareja con nav */
.btn-cta {
  background: var(--marca-rojo);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--marca-rojo);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  transition: transform 0.15s, opacity 0.15s;
}

.btn-cta:hover {
  color: #fff;
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-primary-moderno {
  background: #fff;
  color: var(--marca-dark);
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--marca-accent);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: transform 0.15s;
}
.btn-primary-moderno:hover { color: var(--marca-dark); transform: translateY(-1px); }

.btn-ghost-claro {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-ghost-claro:hover { color: #fff; background: rgba(255,255,255,0.08); }

.btn-blanco {
  background: #fff;
  color: var(--marca-dark);
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid var(--marca-accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-blanco:hover { color: var(--marca-dark); }

/* ---------- Layout de secciones ---------- */
.section-wrap { padding: 24px 0; background: #fff; }
.section-alt  { padding: 44px 0; background: var(--marca-bg); border-top: 1px solid var(--marca-border); border-bottom: 1px solid var(--marca-border); }

.section-header { text-align: center; margin-bottom: 24px; }

.section-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--marca-border);
  color: var(--marca-primary);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 500;
}

.section-title {
  font-size: 24px;
  margin: 12px 0 4px;
  color: var(--marca-dark);
}

.section-sub {
  font-size: 13px;
  color: #666;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--marca-dark);
  border: 1px solid var(--marca-accent);
  border-radius: 20px;
  padding: 56px 36px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hero-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #b5d4f4;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.hero-content { max-width: 560px; }

.hero-pretitulo {
  font-size: 11px;
  letter-spacing: 2px;
  color: #85b7eb;
  font-weight: 500;
  margin-bottom: 14px;
}

.hero-titulo {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 14px;
}

.hero-descripcion {
  font-size: 15px;
  line-height: 1.65;
  color: #b5d4f4;
  margin: 0 0 22px;
}

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Stat cards ---------- */
.section-stats { padding: 20px 0; background: #fff; }

.stat-card {
  background: var(--marca-bg);
  border: 1px solid var(--marca-border);
  padding: 18px;
  border-radius: 14px;
  transition: transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); }

.stat-label {
  font-size: 10px;
  color: #666;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  font-weight: 500;
}

.stat-valor {
  font-size: 26px;
  font-weight: 500;
  color: var(--marca-dark);
  line-height: 1.1;
}

.stat-sub {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* ---------- Servicio cards ---------- */
.servicio-card {
  display: block;
  background: #fff;
  border: 1px solid var(--marca-border);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.15s, border-color 0.15s;
}

.servicio-card:hover {
  transform: translateY(-3px);
  border-color: var(--marca-primary);
  color: inherit;
}

.servicio-icono {
  width: 38px;
  height: 38px;
  background: #e6f1fb;
  border: 1px solid #b5d4f4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--marca-accent);
}

.servicio-titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--marca-dark);
  margin-bottom: 4px;
}

.servicio-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

/* ---------- Info cards (mision/vision) ---------- */
.info-card {
  background: var(--marca-bg);
  border: 1px solid var(--marca-border);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
}

.info-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.info-icon {
  width: 28px;
  height: 28px;
  background: #e6f1fb;
  border: 1px solid #b5d4f4;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marca-accent);
}
.info-icon .material-symbols-rounded { font-size: 16px; }

.info-label {
  font-size: 11px;
  color: var(--marca-primary);
  letter-spacing: 1.5px;
  font-weight: 500;
}

.info-text {
    font-size: 13px;
    line-height: 1.65;
    color: #333;
    margin: 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ---------- Blog cards ---------- */
.blog-card {
  display: block;
  background: #fff;
  border: 1px solid var(--marca-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.15s, border-color 0.15s;
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--marca-primary); color: inherit; }

.blog-img {
  height: 130px;
  background: #e6f1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--marca-border);
}
.blog-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-img-placeholder { font-size: 36px; color: var(--marca-primary); opacity: 0.5; }

.blog-body { padding: 14px 16px; }
.blog-fecha { font-size: 10px; color: var(--marca-primary); font-weight: 500; letter-spacing: 0.5px; }
.blog-titulo { font-size: 14px; font-weight: 500; color: var(--marca-dark); margin: 4px 0; }
.blog-resumen { font-size: 12px; color: #666; line-height: 1.5; }

.link-more { font-size: 13px; color: var(--marca-primary); text-decoration: none; }

/* ---------- CTA final ---------- */
.cta-final {
  background: var(--marca-dark);
  border: 1px solid var(--marca-accent);
  border-radius: 18px;
  padding: 40px 24px;
  text-align: center;
  color: #fff;
}

.cta-titulo {
  font-size: 24px;
  margin: 0 0 8px;
  color: #fff;
  font-weight: 500;
}

.cta-desc {
  font-size: 14px;
  color: #b5d4f4;
  margin: 0 0 18px;
}

/* ---------- Footer ---------- */
.footer {
  background: #fff;
  border-top: 1px solid var(--marca-border);
  padding: 28px 0 20px;
  font-size: 13px;
  color: #666;
}

.footer-title { color: var(--marca-dark); font-weight: 500; margin-bottom: 8px; }
.footer-text { line-height: 1.7; }
.footer-copy {
  border-top: 1px solid var(--marca-border);
  margin-top: 22px;
  padding-top: 14px;
  text-align: center;
  color: #999;
  font-size: 12px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
  .hero { padding: 36px 22px; }
  .hero-titulo { font-size: 24px; }
  .section-title { font-size: 20px; }
  .topbar { font-size: 11px; }
  .topbar .container { flex-direction: column; gap: 2px; text-align: center; }
}
/* ---------- Hero Carousel ---------- */
.hero-carousel .carousel-item {
  transition: transform 0.6s ease-in-out;
}

/* Indicadores con estilo de la marca */
.hero-carousel .carousel-indicators {
  bottom: 14px;
  margin: 0;
}
.hero-carousel .carousel-indicators button {
  width: 28px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border: none;
  border-radius: 2px;
  margin: 0 4px;
  transition: background 0.3s;
}
.hero-carousel .carousel-indicators button.active {
  background: #fff;
}

/* Flechas con estilo de marca */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 50px;
  opacity: 0.7;
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}


.hero-tema-servicios {
  background: linear-gradient(135deg, var(--marca-dark) 0%, var(--marca-dark) 60%, #0a3a6e 100%);
}
.hero-tema-servicios::after {
  content:''; position:absolute; top:0; right:0;
  width:40%; height:100%;
  background: linear-gradient(225deg, rgba(13,157,49,0.20) 0%, transparent 70%);
  pointer-events: none;
}
.hero-tema-servicios .hero-pretitulo { color: var(--marca-verde); }

.hero-tema-promocion {
  background: linear-gradient(135deg, var(--marca-dark) 0%, var(--marca-azul-inge) 100%);
  position: relative;
}
.hero-tema-promocion::before {
  content:''; position:absolute; top:0; left:0;
  width:6px; height:100%;
  background: var(--marca-rojo);
}
.hero-tema-promocion .hero-pretitulo { color: #FF8585; }
.hero-tema-promocion .hero-badge {
  background: rgba(225,7,19,0.15);
  border-color: rgba(225,7,19,0.5);
  color: #FF8585;
}
/* ============================================================
   Hero Carousel · Bootstrap 5 + variantes de marca
   ============================================================ */

/* ---------- Estructura del carousel ---------- */
.hero-carousel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.hero-carousel .carousel-item {
  transition: transform 0.6s ease-in-out;
}

/* El .hero dentro del carousel pierde su border-radius (lo lleva el contenedor) */
.hero-carousel .hero {
  border-radius: 0;
  border: none;
  margin: 0;
}

/* ---------- Indicadores ---------- */
.hero-carousel .carousel-indicators {
  bottom: 14px;
  margin: 0 auto;
}

.hero-carousel .carousel-indicators button {
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 2px;
  margin: 0 4px;
  opacity: 1;
  transition: background 0.3s;
}

.hero-carousel .carousel-indicators button.active {
  background: #fff;
}

/* ---------- Flechas ---------- */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 60px;
  opacity: 0.85;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.2s;
}

.hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-carousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ---------- Imagen de fondo opcional + overlay ---------- */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(4, 44, 83, 0.85) 0%, rgba(4, 44, 83, 0.65) 100%);
  pointer-events: none;
  z-index: 0;
}

.hero[style*="background-image"] .hero-content,
.hero[style*="background-image"] .hero-badge {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Variantes por color_acento
   El admin asigna un valor en el campo color_acento del slide:
   'default', 'verde', 'rojo', 'azul', 'oscuro'
   ============================================================ */

/* Variante DEFAULT: la base (azul oscuro institucional con acento verde sutil) */
.hero-acento-default {
  background: var(--marca-dark);
  border: 1px solid var(--marca-accent);
  position: relative;
  overflow: hidden;
}

.hero-acento-default::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(135deg,
    transparent 50%,
    rgba(13, 157, 49, 0.15) 50%,
    rgba(62, 100, 215, 0.20) 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-acento-default .hero-content {
  position: relative;
  z-index: 1;
}

.hero-acento-default .hero-pretitulo {
  color: var(--marca-verde);
}

/* Variante VERDE: énfasis en GEOMETROLOGIA / servicios técnicos */
.hero-acento-verde {
  background: linear-gradient(135deg, var(--marca-dark) 0%, var(--marca-dark) 60%, #0a3a6e 100%);
  border: 1px solid var(--marca-accent);
  position: relative;
  overflow: hidden;
}

.hero-acento-verde::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(225deg, rgba(13, 157, 49, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-acento-verde .hero-content {
  position: relative;
  z-index: 1;
}

.hero-acento-verde .hero-pretitulo {
  color: var(--marca-verde);
}

.hero-acento-verde .hero-badge {
  background: rgba(13, 157, 49, 0.15);
  border-color: rgba(13, 157, 49, 0.5);
  color: #6FD68C;
}

/* Variante ROJO: novedades, promociones, urgencias (acento INGEOTOP) */
.hero-acento-rojo {
  background: linear-gradient(135deg, var(--marca-dark) 0%, var(--marca-azul-inge) 100%);
  border: 1px solid var(--marca-accent);
  position: relative;
  overflow: hidden;
}

.hero-acento-rojo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--marca-rojo);
  z-index: 1;
}

.hero-acento-rojo .hero-content {
  position: relative;
  z-index: 1;
}

.hero-acento-rojo .hero-pretitulo {
  color: #FF8585;
}

.hero-acento-rojo .hero-badge {
  background: rgba(225, 7, 19, 0.15);
  border-color: rgba(225, 7, 19, 0.5);
  color: #FF8585;
}

/* Variante AZUL: enfoque informativo / azul GEO */
.hero-acento-azul {
  background: linear-gradient(135deg, var(--marca-dark) 0%, #1a3d6e 100%);
  border: 1px solid var(--marca-accent);
  position: relative;
  overflow: hidden;
}

.hero-acento-azul::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(225deg, rgba(62, 100, 215, 0.20) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-acento-azul .hero-content {
  position: relative;
  z-index: 1;
}

.hero-acento-azul .hero-pretitulo {
  color: #85B7EB;
}

/* Variante OSCURO: minimalista, casi sin acento (para mensajes muy formales) */
.hero-acento-oscuro {
  background: var(--marca-dark);
  border: 1px solid var(--marca-accent);
  position: relative;
  overflow: hidden;
}

.hero-acento-oscuro .hero-pretitulo {
  color: #b5d4f4;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .hero-carousel {
    border-radius: 14px;
  }

  .hero-acento-default::after,
  .hero-acento-verde::after,
  .hero-acento-azul::after {
    width: 100%;
    height: 30%;
    top: auto;
    bottom: 0;
    background: linear-gradient(0deg, rgba(13, 157, 49, 0.15), transparent);
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    width: 40px;
  }

  .hero-carousel .carousel-control-prev-icon,
  .hero-carousel .carousel-control-next-icon {
    width: 32px;
    height: 32px;
  }
}
/* ============================================================
   Sección Pedagogía · 2 bloques educativos del Home
   ============================================================ */

.ped-card {
  display: block;
  background: #fff;
  border: 1px solid var(--marca-border);
  border-left: 4px solid var(--marca-border);
  border-radius: 14px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s;
}

.ped-card:hover {
  transform: translateY(-3px);
  color: inherit;
  box-shadow: 0 12px 24px -8px rgba(4, 44, 83, 0.12);
}

/* Variantes de color de acento */
.ped-card.ped-acento-azul-geo  { border-left-color: var(--marca-azul-geo); }
.ped-card.ped-acento-verde     { border-left-color: var(--marca-verde); }
.ped-card.ped-acento-rojo      { border-left-color: var(--marca-rojo); }
.ped-card.ped-acento-azul-inge { border-left-color: var(--marca-azul-inge); }

.ped-icono {
  width: 56px;
  height: 56px;
  border: 1px solid var(--marca-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--marca-bg);
  color: var(--marca-primary);
}
.ped-icono .material-symbols-rounded { font-size: 28px; }

/* Iconos coloreados según acento */
.ped-acento-azul-geo .ped-icono {
  background: rgba(62, 100, 215, 0.08);
  color: var(--marca-azul-geo);
  border-color: rgba(62, 100, 215, 0.25);
}
.ped-acento-verde .ped-icono {
  background: rgba(13, 157, 49, 0.08);
  color: var(--marca-verde);
  border-color: rgba(13, 157, 49, 0.25);
}
.ped-acento-rojo .ped-icono {
  background: rgba(225, 7, 19, 0.08);
  color: var(--marca-rojo);
  border-color: rgba(225, 7, 19, 0.25);
}
.ped-acento-azul-inge .ped-icono {
  background: rgba(44, 45, 130, 0.08);
  color: var(--marca-azul-inge);
  border-color: rgba(44, 45, 130, 0.25);
}

.ped-pretitulo {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--marca-primary);
}
.ped-acento-azul-geo .ped-pretitulo { color: var(--marca-azul-geo); }
.ped-acento-verde .ped-pretitulo { color: var(--marca-verde); }
.ped-acento-rojo .ped-pretitulo { color: var(--marca-rojo); }
.ped-acento-azul-inge .ped-pretitulo { color: var(--marca-azul-inge); }

.ped-card-titulo {
  font-size: 19px;
  color: var(--marca-dark);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 10px;
}

.ped-resumen {
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  margin-bottom: 16px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.ped-link {
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s;
  color: var(--marca-primary);
}
.ped-acento-azul-geo .ped-link { color: var(--marca-azul-geo); }
.ped-acento-verde .ped-link { color: var(--marca-verde); }
.ped-acento-rojo .ped-link { color: var(--marca-rojo); }
.ped-acento-azul-inge .ped-link { color: var(--marca-azul-inge); }

.ped-card:hover .ped-link { gap: 8px; }

/* ============================================================
   Formulario de contacto
   ============================================================ */

/* Toggle Empresa / Persona — versión bonita */
.form-tipo-cliente {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.form-tipo-cliente input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-tipo-cliente label {
  flex: 1;
  text-align: center;
  background: #fff;
  border: 1px solid var(--marca-border);
  color: #555;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}

.form-tipo-cliente label:hover {
  border-color: var(--marca-primary);
  color: var(--marca-primary);
}

.form-tipo-cliente input[type="radio"]:checked + label {
  background: var(--marca-primary);
  border-color: var(--marca-primary);
  color: #fff;
}

/* Etiqueta del grupo (¿Quién nos contacta?) */
.form-label-mini {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Inputs y selects del formulario */
.form-contacto .form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--marca-dark);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.form-contacto .form-control,
.form-contacto .form-select {
  width: 100%;
  border: 1px solid var(--marca-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-contacto .form-control:focus,
.form-contacto .form-select:focus {
  border-color: var(--marca-primary);
  box-shadow: 0 0 0 3px rgba(28, 87, 157, 0.1);
  outline: none;
}

.form-contacto textarea.form-control {
  resize: vertical;
  min-height: 80px;
}
/* ============================================================
   Info-cards de contacto (variante compacta)
   No estirar verticalmente; quedan compactas a su contenido
   ============================================================ */

.contacto-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 100px;  /* respeta el header sticky */
}

.contacto-sidebar .info-card {
  height: auto;       /* override del 100% */
  margin-bottom: 0;   /* sin margin abajo, el gap del flex se encarga */
  padding: 20px;
}

@media (max-width: 991px) {
  /* En mobile/tablet no sticky, y abajo del formulario */
  .contacto-sidebar {
    position: static;
    margin-top: 24px;
  }
}
/* ============================================================
   Sección "Formá parte de la red SLCINGEOTOP"
   Bloque azul oscuro institucional con 4 beneficios verticales
   ============================================================ */

.section-red {
  background: #f5f5f4;
  padding-top: 56px;
  padding-bottom: 56px;
}

.red-block {
  background: var(--marca-dark);
  border: 1px solid var(--marca-accent);
  border-radius: 20px;
  padding: 44px 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Patrón de retícula muy sutil */
.red-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* Cruz óptica decorativa esquina superior derecha */
.red-deco {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 70px;
  height: 70px;
  opacity: 0.10;
  z-index: 0;
}

/* Asegurar que el contenido esté sobre la decoración */
.red-block .row {
  position: relative;
  z-index: 1;
}

/* ===== Columna izquierda: titular ===== */

.red-chip {
  display: inline-block;
  background: rgba(13, 157, 49, 0.15);
  border: 1px solid rgba(13, 157, 49, 0.5);
  color: #6FD68C;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin-bottom: 16px;
}

.red-marca {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  margin: 0 0 4px;
  color: #fff;
}

.red-marca-sub {
  font-size: 11px;
  color: #6FD68C;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 14px;
}

.red-titulo {
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 14px;
}

.red-desc {
  font-size: 13px;
  color: #b5d4f4;
  line-height: 1.65;
  margin: 0 0 22px;
}

.red-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.red-btn-primario {
  background: var(--marca-rojo);
  color: #fff;
  border: 1px solid var(--marca-rojo);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s, transform 0.15s;
}
.red-btn-primario:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  color: #fff;
}

.red-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.red-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ===== Columna derecha: beneficios verticales ===== */

.red-beneficios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.red-beneficio {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background 0.15s, transform 0.15s;
}
.red-beneficio:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.red-beneficio.b-verde { border-left-color: var(--marca-verde); }
.red-beneficio.b-azul  { border-left-color: var(--marca-azul-geo); }
.red-beneficio.b-rojo  { border-left-color: var(--marca-rojo); }

.red-beneficio-icono {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.red-beneficio-icono .material-symbols-rounded {
  font-size: 20px;
}

.b-verde .red-beneficio-icono {
  background: rgba(13, 157, 49, 0.18);
  color: #6FD68C;
}
.b-azul .red-beneficio-icono {
  background: rgba(62, 100, 215, 0.18);
  color: #85B7EB;
}
.b-rojo .red-beneficio-icono {
  background: rgba(225, 7, 19, 0.18);
  color: #FF8585;
}

.red-beneficio-texto h4 {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin: 0 0 3px;
  line-height: 1.3;
}
.red-beneficio-texto p {
  font-size: 12px;
  color: #b5d4f4;
  line-height: 1.55;
  margin: 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  
}

/* ===== Responsive ===== */

@media (max-width: 991px) {
  .red-block {
    padding: 32px 24px;
  }
  .red-marca {
    font-size: 28px;
  }
  .red-titulo {
    font-size: 18px;
  }
  .red-titular {
    margin-bottom: 24px;
  }
  .red-deco {
    width: 50px;
    height: 50px;
    top: 16px;
    right: 16px;
  }
}
/* ============================================================
   Modal pre-acceso a SLCINGE
   ============================================================ */

.slc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.slc-modal.is-open {
  display: flex;
  animation: slc-modal-in 0.2s ease-out;
}

@keyframes slc-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.slc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 44, 83, 0.6);
  backdrop-filter: blur(2px);
}

.slc-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
  animation: slc-dialog-in 0.25s cubic-bezier(0.25, 1.2, 0.5, 1);
}

@keyframes slc-dialog-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.slc-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.slc-modal-close:hover {
  background: var(--marca-bg);
  color: var(--marca-dark);
}

.slc-modal-icono {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(13, 157, 49, 0.10);
  border: 1px solid rgba(13, 157, 49, 0.25);
  color: var(--marca-verde);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.slc-modal-icono .material-symbols-rounded { font-size: 28px; }

.slc-modal-titulo {
  font-size: 20px;
  font-weight: 500;
  color: var(--marca-dark);
  line-height: 1.3;
  margin: 0 0 6px;
}

.slc-modal-sub {
  font-size: 13px;
  color: #666;
  margin: 0 0 22px;
  line-height: 1.5;
}

.slc-modal-flujo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.slc-paso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.slc-paso-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--marca-bg);
  border: 1px solid var(--marca-border);
  color: var(--marca-primary);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.slc-paso-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.55;
}
.slc-paso-texto strong {
  color: var(--marca-dark);
  font-weight: 600;
}
.slc-paso-texto span {
  color: #555;
}

.slc-modal-aviso {
  background: rgba(225, 7, 19, 0.05);
  border: 1px solid rgba(225, 7, 19, 0.20);
  border-left: 3px solid var(--marca-rojo);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 22px;
  font-size: 12px;
  color: #555;
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.slc-modal-aviso .material-symbols-rounded {
  color: var(--marca-rojo);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.slc-modal-aviso strong { color: var(--marca-rojo); }

.slc-modal-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.slc-btn-primario {
  flex: 1;
  background: var(--marca-rojo);
  color: #fff;
  border: 1px solid var(--marca-rojo);
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  min-width: 180px;
}
.slc-btn-primario:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  color: #fff;
}

.slc-btn-secundario {
  flex: 1;
  background: #fff;
  color: var(--marca-dark);
  border: 1px solid var(--marca-border);
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
  min-width: 140px;
}
.slc-btn-secundario:hover {
  background: var(--marca-bg);
  border-color: var(--marca-primary);
}

@media (max-width: 540px) {
  .slc-modal-dialog {
    padding: 24px 20px;
  }
  .slc-modal-titulo {
    font-size: 17px;
  }
  .slc-modal-cta-row {
    flex-direction: column;
  }
  .slc-modal-cta-row a {
    width: 100%;
  }
}
/* ============================================================
   Modal pre-acceso · Ayuda final con instrucción visual
   ============================================================ */

.slc-modal-ayuda {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--marca-border);
  font-size: 11.5px;
  color: #777;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.slc-modal-ayuda .material-symbols-rounded {
  color: var(--marca-primary);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.slc-modal-ayuda strong {
  color: var(--marca-dark);
  font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════════
   /calidad — Estilos de la página de calidad
   Agregar al final de public/css/style.css
   
   Convenciones de marca:
   --color-azul-inst:    #042C53   (azul institucional)
   --color-azul-medio:   #1C579D
   --color-azul-inge:    #2C2D82
   --color-azul-geo:     #3E64D7
   --color-rojo-inge:    #E10713
   --color-verde-geo:    #0D9D31
   --color-gris:         #939393
   ════════════════════════════════════════════════════════════════════ */

/* Variables de paleta para esta página */
.page-calidad {
    --cal-azul-inst:    #042C53;
    --cal-azul-medio:   #1C579D;
    --cal-azul-geo:     #3E64D7;
    --cal-azul-inge:    #2C2D82;
    --cal-rojo:         #E10713;
    --cal-verde:        #0D9D31;
    --cal-naranja:      #B8651A;
    --cal-gris:         #939393;
    --cal-gris-bg:      #F5F5F4;
    --cal-gris-border:  #E5E5E3;
    --cal-bg-azul:      #F0F4F9;
    --cal-bg-verde:     #F0FAF3;
    --cal-bg-rojo:      #FDF1F2;
    --cal-bg-amarillo:  #FFF5E6;
    --cal-bg-cream:     #FAFAF8;
    
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #2C2C2C;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────
   ELEMENTOS BASE
   ───────────────────────────────────────────────────── */

.cal-pretitulo {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cal-verde);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.cal-pretitulo--light  { color: #FFB347; }
.cal-pretitulo--orange { color: var(--cal-naranja); }

.cal-section {
    padding: 5rem 0;
    background: #fff;
}
.cal-section--alt {
    background: var(--cal-bg-cream);
}
.cal-section--dark {
    background: linear-gradient(135deg, var(--cal-azul-inst) 0%, var(--cal-azul-inge) 100%);
    color: #fff;
}
@media (max-width: 768px) {
    .cal-section { padding: 3rem 0; }
}

.cal-section-header {
    max-width: 760px;
    margin: 0 auto 3rem;
}
.cal-section-titulo {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--cal-azul-inst);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.cal-section-titulo--light { color: #fff; }
.cal-section-intro {
    font-size: 1.0625rem;
    color: #555;
    line-height: 1.65;
    margin: 0;
}
.cal-section-intro--light { color: rgba(255, 255, 255, 0.85); }

.cal-text-lg {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1.5rem;
}


/* ─────────────────────────────────────────────────────
   1) HERO
   ───────────────────────────────────────────────────── */

.cal-hero {
    background: linear-gradient(135deg, var(--cal-azul-inst) 0%, var(--cal-azul-inge) 100%);
    color: #fff;
    padding: 6rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.cal-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at top right, rgba(13, 157, 49, 0.15), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(225, 7, 19, 0.1), transparent 50%);
    pointer-events: none;
}
.cal-hero > .container { position: relative; z-index: 1; }

.cal-hero-titulo {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0.5rem 0 1.5rem;
    max-width: 880px;
}

.cal-hero-descripcion {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin-bottom: 2rem;
}

.cal-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.cal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}
.cal-badge .material-symbols-rounded { font-size: 1rem; }
.cal-badge--green { color: #6BD480; border-color: rgba(13, 157, 49, 0.4); }
.cal-badge--blue  { color: #93B7FF; border-color: rgba(62, 100, 215, 0.4); }
.cal-badge--gray  { color: #ccc; }


/* ─────────────────────────────────────────────────────
   2) POSICIONAMIENTO — destacado
   ───────────────────────────────────────────────────── */

.cal-destacado {
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--cal-bg-azul) 0%, #E8EFF7 100%);
    border-left: 5px solid var(--cal-azul-geo);
    border-radius: 8px;
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.cal-destacado-icon {
    color: var(--cal-azul-geo);
    font-size: 1.75rem !important;
    flex-shrink: 0;
}
.cal-destacado p {
    font-size: 1rem;
    line-height: 1.7;
    color: #2C2C2C;
    margin: 0;
    font-weight: 500;
}


/* ─────────────────────────────────────────────────────
   3) NORMAS DE REFERENCIA — 4 cards
   ───────────────────────────────────────────────────── */

.cal-normas-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem;
    height: 100%;
    border: 1px solid var(--cal-gris-border);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cal-normas-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cal-normas-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cal-gris-border);
}
.cal-normas-card-header .material-symbols-rounded {
    font-size: 2rem !important;
    padding: 0.625rem;
    border-radius: 10px;
    background: var(--cal-bg-azul);
    color: var(--cal-azul-inst);
}
.cal-normas-card-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cal-azul-inst);
    margin: 0;
}

.cal-normas-card--gestion .material-symbols-rounded { background: var(--cal-bg-azul); color: var(--cal-azul-inst); }
.cal-normas-card--tecnicas .material-symbols-rounded { background: rgba(13, 157, 49, 0.10); color: var(--cal-verde); }
.cal-normas-card--fundamentos .material-symbols-rounded { background: rgba(62, 100, 215, 0.10); color: var(--cal-azul-geo); }
.cal-normas-card--legal .material-symbols-rounded { background: rgba(225, 7, 19, 0.08); color: var(--cal-rojo); }

.cal-normas-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cal-normas-list li {
    padding: 0.625rem 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.cal-normas-list li:last-child { border-bottom: none; }
.cal-normas-list li strong {
    color: var(--cal-azul-inst);
    font-size: 0.9375rem;
    font-weight: 600;
}
.cal-normas-list li span {
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.5;
}

.cal-normas-list--compact {
    margin-top: 0.5rem;
}
.cal-normas-list--compact li {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    color: #555;
}
.cal-normas-list--compact li strong { font-size: 0.875rem; min-width: 7.5rem; }

.cal-normas-iso17123 {
    background: rgba(13, 157, 49, 0.08);
    border-left: 4px solid var(--cal-verde);
    padding: 0.875rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.cal-normas-iso17123-titulo {
    font-size: 0.9375rem;
    color: var(--cal-azul-inst);
    margin-bottom: 0.25rem;
}
.cal-normas-iso17123-titulo strong { color: var(--cal-verde); }
.cal-normas-iso17123-sub {
    font-size: 0.8125rem;
    color: #555;
    line-height: 1.5;
}


/* ─────────────────────────────────────────────────────
   4) JERARQUÍA TÉCNICA — 2 paneles
   ───────────────────────────────────────────────────── */

.cal-jerarquia-paneles {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
}
@media (max-width: 968px) {
    .cal-jerarquia-paneles {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.cal-panel {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    border: 2px solid;
    display: flex;
    flex-direction: column;
}
.cal-panel--lab {
    border-color: var(--cal-azul-geo);
    background: linear-gradient(135deg, #fff 0%, var(--cal-bg-azul) 100%);
}
.cal-panel--campo {
    border-color: var(--cal-naranja);
    background: linear-gradient(135deg, #fff 0%, var(--cal-bg-amarillo) 100%);
}

.cal-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.08);
}
.cal-panel-numero {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cal-azul-inst);
    line-height: 1;
}
.cal-panel--lab .cal-panel-numero { color: var(--cal-azul-geo); }
.cal-panel--campo .cal-panel-numero { color: var(--cal-naranja); }
.cal-panel-header h3 {
    font-size: 1.25rem;
    color: var(--cal-azul-inst);
    margin: 0;
    font-weight: 700;
}
.cal-panel-norma {
    font-size: 0.8125rem;
    color: #666;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cal-panel p {
    flex: 1;
    line-height: 1.65;
    color: #333;
    margin-bottom: 1rem;
}

.cal-panel-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cal-azul-inst);
}
.cal-panel--lab .cal-panel-footer { color: var(--cal-azul-geo); }
.cal-panel--campo .cal-panel-footer { color: var(--cal-naranja); }

.cal-panel-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cal-gris);
    gap: 0.25rem;
    text-align: center;
}
.cal-panel-arrow .material-symbols-rounded {
    font-size: 2.5rem !important;
    color: var(--cal-azul-geo);
}
.cal-panel-arrow small {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
@media (max-width: 968px) {
    .cal-panel-arrow { transform: rotate(90deg); }
}


/* ─────────────────────────────────────────────────────
   5) ALERTA SOBRE FABRICANTES
   ───────────────────────────────────────────────────── */

.cal-fabricantes-content {
    max-width: 880px;
    margin: 0 auto;
}

.cal-fab-texto p {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 1.25rem;
    text-align: justify;
}

.cal-fab-imagen {
    margin: 2.5rem 0;
    text-align: center;
}
.cal-fab-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.cal-fab-imagen figcaption {
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.5;
    margin-top: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.cal-fab-imagen figcaption span {
    display: block;
    color: var(--cal-azul-inst);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cal-fab-nota {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--cal-bg-amarillo) 0%, #FFF1D6 100%);
    border-left: 5px solid var(--cal-naranja);
    border-radius: 8px;
}
.cal-fab-nota h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--cal-naranja);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.cal-fab-nota p {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
    color: #333;
}


/* ─────────────────────────────────────────────────────
   6) ICM vs ICAL — 2 cards
   ───────────────────────────────────────────────────── */

.cal-producto-card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    border: 2px solid var(--cal-gris-border);
    position: relative;
    overflow: hidden;
}
.cal-producto-card--icm {
    border-color: var(--cal-verde);
    background: linear-gradient(135deg, #fff 0%, var(--cal-bg-verde) 100%);
}
.cal-producto-card--ical {
    border-color: var(--cal-azul-geo);
    background: linear-gradient(135deg, #fff 0%, var(--cal-bg-azul) 100%);
}

.cal-producto-tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: #fff;
    color: var(--cal-azul-inst);
    border: 2px solid currentColor;
}
.cal-producto-card--icm .cal-producto-tag { color: var(--cal-verde); }
.cal-producto-card--ical .cal-producto-tag { color: var(--cal-azul-geo); }

.cal-producto-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cal-azul-inst);
    margin: 0 0 0.5rem;
    padding-right: 4rem;
}
.cal-producto-norma {
    display: inline-block;
    font-size: 0.8125rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 1rem;
}
.cal-producto-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #444;
    margin-bottom: 1.5rem;
}

.cal-producto-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--cal-azul-inst);
}
.cal-producto-card--icm .cal-producto-cta strong { color: var(--cal-verde); }
.cal-producto-card--ical .cal-producto-cta strong { color: var(--cal-azul-geo); }


/* ─────────────────────────────────────────────────────
   7) HOJA DE RUTA — 9 ETAPAS
   ───────────────────────────────────────────────────── */

.cal-timeline {
    max-width: 920px;
    margin: 3rem auto 2rem;
    position: relative;
    padding-left: 2rem;
}
.cal-timeline::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 179, 71, 0.6), rgba(255, 255, 255, 0.2));
}

.cal-etapa {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.cal-etapa-numero {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    margin-left: -2rem;
    z-index: 2;
    backdrop-filter: blur(10px);
}

.cal-etapa-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: all 0.2s ease;
}
.cal-etapa-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Etapa "en preparación" → destacada en naranja/amarillo */
.cal-etapa.estado-preparacion .cal-etapa-numero {
    background: linear-gradient(135deg, #FFB347, #FF8C42);
    border-color: #FFB347;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 179, 71, 0.4);
}
.cal-etapa.estado-preparacion .cal-etapa-card {
    background: rgba(255, 179, 71, 0.12);
    border-color: rgba(255, 179, 71, 0.4);
}

.cal-etapa.estado-acreditada .cal-etapa-numero {
    background: linear-gradient(135deg, var(--cal-verde), #5BC774);
    border-color: var(--cal-verde);
    color: #fff;
}

.cal-etapa-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.cal-etapa-magnitud {
    font-size: 0.6875rem;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.cal-etapa-estado {
    font-size: 0.6875rem;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 179, 71, 0.2);
    color: #FFB347;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.cal-etapa.estado-preparacion .cal-etapa-estado {
    background: #FFB347;
    color: var(--cal-azul-inst);
}
.cal-etapa.estado-acreditada .cal-etapa-estado {
    background: var(--cal-verde);
    color: #fff;
}

.cal-etapa-titulo {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin: 0.25rem 0 0.4rem;
    line-height: 1.35;
}
.cal-etapa-fundamento {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.625rem;
    line-height: 1.5;
}
.cal-etapa-norma {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
}
.cal-etapa-norma .material-symbols-rounded { font-size: 0.875rem; }

.cal-ruta-alcance {
    margin-top: 3rem;
    padding: 2rem;
    text-align: center;
    background: rgba(13, 157, 49, 0.15);
    border: 2px dashed rgba(13, 157, 49, 0.4);
    border-radius: 12px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.cal-ruta-alcance h3 {
    color: #6BD480;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.cal-ruta-alcance p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}


/* ─────────────────────────────────────────────────────
   8) DOCTRINA DEL CASCARÓN
   ───────────────────────────────────────────────────── */

.cal-frase-doctrinal {
    text-align: center;
    max-width: 820px;
    margin: 2rem auto 3rem;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, var(--cal-bg-cream) 0%, #F5F2EA 100%);
    border-radius: 14px;
    border-left: 6px solid var(--cal-naranja);
    position: relative;
}
.cal-quote-icon {
    display: block;
    font-size: 4rem;
    color: var(--cal-naranja);
    line-height: 0.6;
    font-family: Georgia, serif;
    margin-bottom: 1rem;
}
.cal-frase-doctrinal p {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 600;
    font-style: italic;
    color: var(--cal-azul-inst);
    line-height: 1.4;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
}
.cal-frase-doctrinal footer {
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
}

.cal-cascaron-explicacion {
    max-width: 820px;
    margin: 0 auto 3rem;
}
.cal-cascaron-explicacion p {
    font-size: 1rem;
    line-height: 1.75;
    color: #444;
    text-align: justify;
}

.cal-sectores h3 {
    text-align: center;
    color: var(--cal-azul-inst);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
.cal-sectores-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2rem;
    color: #555;
    font-size: 0.9375rem;
}

.cal-sector-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--cal-gris-border);
    height: 100%;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cal-sector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.cal-sector-card .material-symbols-rounded {
    font-size: 2.5rem !important;
    color: var(--cal-azul-geo);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--cal-bg-azul);
    border-radius: 12px;
    display: inline-block;
}
.cal-sector-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cal-azul-inst);
    margin-bottom: 0.5rem;
}
.cal-sector-card p {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #555;
    margin: 0;
}
.cal-sector-card--proyectado .material-symbols-rounded {
    background: rgba(147, 147, 147, 0.15);
    color: #888;
}


/* ─────────────────────────────────────────────────────
   9) RED SLCINGEOTOP
   ───────────────────────────────────────────────────── */

.cal-red-puntos {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.cal-red-puntos li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: #444;
    line-height: 1.5;
}
.cal-red-puntos .material-symbols-rounded {
    color: var(--cal-verde);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}


/* ─────────────────────────────────────────────────────
   10) DESCARGAS
   ───────────────────────────────────────────────────── */

.cal-descarga-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--cal-gris-border);
    height: 100%;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.cal-descarga-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cal-descarga-icon {
    font-size: 3rem !important;
    color: var(--cal-rojo);
    margin-bottom: 1rem;
}
.cal-descarga-card--disponible .cal-descarga-icon { color: var(--cal-verde); }

.cal-descarga-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cal-azul-inst);
    margin-bottom: 0.5rem;
}
.cal-descarga-card p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #555;
    margin-bottom: 1rem;
    flex: 1;
}
.cal-descarga-meta {
    display: block;
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.cal-descarga-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.cal-descarga-btn--soon {
    background: var(--cal-gris-bg);
    color: #888;
    border-color: var(--cal-gris-border);
    cursor: not-allowed;
}
.cal-descarga-btn--soon:hover {
    background: var(--cal-gris-bg);
    color: #888;
}


/* ─────────────────────────────────────────────────────
   11) CTA FINAL
   ───────────────────────────────────────────────────── */

.cal-cta {
    padding: 4rem 0;
}
.cal-cta-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--cal-azul-inst) 0%, var(--cal-azul-inge) 100%);
    border-radius: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cal-cta-box::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 179, 71, 0.15) 0%, transparent 60%);
    pointer-events: none;
}
.cal-cta-box > * { position: relative; z-index: 1; }

.cal-cta-box h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    color: #fff;
}
.cal-cta-box p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    margin: 0 auto 2rem;
}

.cal-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    background: var(--cal-rojo);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(225, 7, 19, 0.3);
}
.cal-cta-btn:hover {
    background: #C8060F;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(225, 7, 19, 0.4);
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .cal-hero { padding: 4rem 0 3rem; }
    .cal-section-header { margin-bottom: 2rem; }
    .cal-cta-box { padding: 2rem 1.5rem; }
    .cal-frase-doctrinal { padding: 2rem 1.5rem; }
    .cal-panel { padding: 1.5rem; }
    .cal-normas-card { padding: 1.5rem; }
    .cal-fab-imagen { margin: 1.5rem -0.5rem; }
    .cal-timeline { padding-left: 1.5rem; }
    .cal-etapa-numero {
        width: 2.5rem;
        height: 2.5rem;
        margin-left: -1.5rem;
        font-size: 1rem;
    }
}
/* ════════════════════════════════════════════════════════════════════
   /calidad — PATCH DE CORRECCIÓN v2
   
   Anexar al final de public/css/style.css DESPUÉS del bloque
   anterior de /calidad. Corrige:
   
   1) Título del hero invisible (color azul sobre fondo azul)
      Algunos selectores generales del layout pintan los <h1>
      en color oscuro; aquí los forzamos a blanco dentro del hero.
   
   NOTA: el problema de los iconos Material Symbols renderizando
   como texto se corrigió cambiando la clase
   "material-symbols-outlined" -> "material-symbols-rounded"
   en los archivos 04_calidad_index.php y 05_calidad_styles.css
   (ya viene corregido en la version actualizada de esos archivos).
   ════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────
   FIX HERO — titulo y subtitulo en blanco
   ───────────────────────────────────────────────────── */

.page-calidad .cal-hero {
    color: #fff !important;
}

.page-calidad .cal-hero .cal-hero-titulo,
.page-calidad .cal-hero h1 {
    color: #ffffff !important;
}

.page-calidad .cal-hero .cal-hero-descripcion,
.page-calidad .cal-hero p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.page-calidad .cal-hero .cal-pretitulo,
.page-calidad .cal-hero .cal-pretitulo--light {
    color: #FFB347 !important;
}

/* ───── INTROS Y TEXTOS DE SECCIÓN ───── */
 
.page-calidad .cal-section-intro {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
.page-calidad .cal-text-lg {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
 
/* ───── POSICIONAMIENTO — destacado ───── */
 
.page-calidad .cal-destacado p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
 
/* ───── JERARQUÍA TÉCNICA — paneles ───── */
 
.page-calidad .cal-panel p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
 
/* ───── ALERTA SOBRE FABRICANTES ───── */
 
/* .cal-fab-texto p YA tenía justify — solo refuerzo con hyphens */
.page-calidad .cal-fab-texto p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
.page-calidad .cal-fab-nota p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
 
/* ───── ICM vs ICAL — productos ───── */
 
.page-calidad .cal-producto-card p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
 
/* ───── HOJA DE RUTA — etapas ───── */
 
.page-calidad .cal-etapa-fundamento {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
 
 
/* ───── DOCTRINA DEL CASCARÓN ───── */
 
/* .cal-cascaron-explicacion p YA tenía justify — refuerzo con hyphens */
.page-calidad .cal-cascaron-explicacion p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* ════════════════════════════════════════════════════════════════════
   /como-trabajamos — Estilos de la pagina
   Anexar al final de public/css/style.css

   Convenciones de marca:
   --color-azul-inst:    #042C53   (azul institucional)
   --color-azul-medio:   #1C579D
   --color-azul-inge:    #2C2D82
   --color-azul-geo:     #3E64D7
   --color-rojo-inge:    #E10713
   --color-verde-geo:    #0D9D31
   --color-gris:         #939393
   ════════════════════════════════════════════════════════════════════ */

.page-comotrabajamos {
    --ct-azul-inst:    #042C53;
    --ct-azul-medio:   #1C579D;
    --ct-azul-geo:     #3E64D7;
    --ct-azul-inge:    #2C2D82;
    --ct-rojo:         #E10713;
    --ct-verde:        #0D9D31;
    --ct-naranja:      #B8651A;
    --ct-amarillo:     #E8A93A;
    --ct-morado:       #6B4C9A;
    --ct-gris:         #939393;
    --ct-gris-bg:      #F5F5F4;
    --ct-gris-border:  #E5E5E3;
    --ct-bg-azul:      #F0F4F9;
    --ct-bg-verde:     #F0FAF3;
    --ct-bg-rojo:      #FDF1F2;
    --ct-bg-naranja:   #FDF5EE;
    --ct-bg-amarillo:  #FFF5E6;
    --ct-bg-morado:    #F4F0FA;
    --ct-bg-cream:     #FAFAF8;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #2C2C2C;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────
   ELEMENTOS BASE
   ───────────────────────────────────────────────────── */

.ct-pretitulo {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--ct-verde);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.ct-pretitulo--light { color: #FFB347; }

.ct-section {
    padding: 5rem 0;
    background: #fff;
}
.ct-section--alt {
    background: var(--ct-bg-cream);
}
.ct-section--dark {
    background: linear-gradient(135deg, var(--ct-azul-inst) 0%, var(--ct-azul-inge) 100%);
    color: #fff;
}
@media (max-width: 768px) {
    .ct-section { padding: 3rem 0; }
}

.ct-section-header {
    max-width: 760px;
    margin: 0 auto 3rem;
}
.ct-section-titulo {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--ct-azul-inst);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.ct-section-titulo--light { color: #fff; }
.ct-section-intro {
    font-size: 1.0625rem;
    color: #555;
    line-height: 1.65;
    margin: 0;
}
.ct-section-intro--light { color: rgba(255, 255, 255, 0.85); }

.ct-text-lg {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1.5rem;
}


/* ─────────────────────────────────────────────────────
   1) HERO
   ───────────────────────────────────────────────────── */

.ct-hero {
    background: linear-gradient(135deg, var(--ct-azul-inst) 0%, var(--ct-azul-inge) 100%);
    color: #fff;
    padding: 6rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.ct-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at top right, rgba(13, 157, 49, 0.15), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(225, 7, 19, 0.10), transparent 50%);
    pointer-events: none;
}
.ct-hero > .container { position: relative; z-index: 1; }

.ct-hero-titulo {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0.5rem 0 1.5rem;
    max-width: 880px;
    color: #fff !important;
}

.ct-hero-descripcion {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88) !important;
    max-width: 720px;
    margin-bottom: 2.5rem;
}

.ct-hero-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.ct-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ct-hero-stat strong {
    font-size: 2rem;
    font-weight: 700;
    color: #FFB347;
    line-height: 1;
}
.ct-hero-stat span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ─────────────────────────────────────────────────────
   2) INTRO — DOS DIMENSIONES
   ───────────────────────────────────────────────────── */

.ct-intro-dimensiones {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ct-dim {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--ct-gris-border);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ct-dim--tecnica {
    border-left: 4px solid var(--ct-azul-geo);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-azul) 100%);
}
.ct-dim--operativa {
    border-left: 4px solid var(--ct-verde);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-verde) 100%);
}

.ct-dim .material-symbols-rounded {
    font-size: 1.75rem !important;
    flex-shrink: 0;
}
.ct-dim--tecnica .material-symbols-rounded { color: var(--ct-azul-geo); }
.ct-dim--operativa .material-symbols-rounded { color: var(--ct-verde); }

.ct-dim h4 {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ct-azul-inst);
}
.ct-dim p {
    margin: 0;
    font-size: 0.875rem;
    color: #555;
    line-height: 1.5;
}


/* ─────────────────────────────────────────────────────
   3) RECORRIDO — 5 PARTES, 13 ETAPAS
   ───────────────────────────────────────────────────── */

.ct-parte {
    margin-bottom: 3rem;
    padding: 2rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ct-gris-border);
}
.ct-parte:last-child { margin-bottom: 0; }

.ct-parte-header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ct-gris-bg);
}

.ct-parte-numero {
    flex-shrink: 0;
    width: 90px;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ct-azul-inst), var(--ct-azul-inge));
    color: #fff;
}
.ct-parte-numero span {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
}
.ct-parte-numero strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.15rem;
}

.ct-parte-info h3 {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ct-azul-inst);
}
.ct-parte-subtitulo {
    font-size: 0.875rem;
    color: #777;
    font-style: italic;
}

/* Etapas — grid responsive */
.ct-etapas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.ct-etapa-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--ct-gris-bg);
    border: 1px solid var(--ct-gris-border);
    border-left: 4px solid var(--ct-gris);
    transition: all 0.2s ease;
    position: relative;
}
.ct-etapa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ct-etapa-card--azul { border-left-color: var(--ct-azul-geo); background: var(--ct-bg-azul); }
.ct-etapa-card--verde { border-left-color: var(--ct-verde); background: var(--ct-bg-verde); }
.ct-etapa-card--naranja { border-left-color: var(--ct-naranja); background: var(--ct-bg-naranja); }
.ct-etapa-card--rojo { border-left-color: var(--ct-rojo); background: var(--ct-bg-rojo); }

.ct-etapa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.ct-etapa-num {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ct-azul-inst);
}
.ct-etapa-card--azul .ct-etapa-num { background: rgba(62, 100, 215, 0.15); color: var(--ct-azul-geo); }
.ct-etapa-card--verde .ct-etapa-num { background: rgba(13, 157, 49, 0.15); color: var(--ct-verde); }
.ct-etapa-card--naranja .ct-etapa-num { background: rgba(184, 101, 26, 0.15); color: var(--ct-naranja); }
.ct-etapa-card--rojo .ct-etapa-num { background: rgba(225, 7, 19, 0.12); color: var(--ct-rojo); }

.ct-etapa-icon {
    font-size: 1.5rem !important;
    color: var(--ct-azul-inst);
    opacity: 0.6;
}
.ct-etapa-card--azul .ct-etapa-icon { color: var(--ct-azul-geo); }
.ct-etapa-card--verde .ct-etapa-icon { color: var(--ct-verde); }
.ct-etapa-card--naranja .ct-etapa-icon { color: var(--ct-naranja); }
.ct-etapa-card--rojo .ct-etapa-icon { color: var(--ct-rojo); }

.ct-etapa-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ct-azul-inst);
    margin: 0 0 0.4rem;
    line-height: 1.3;
}
.ct-etapa-subtitulo {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.625rem;
    font-weight: 500;
}
.ct-etapa-card p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #444;
    margin: 0;
}

.ct-etapa-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.875rem;
    padding: 0.3rem 0.625rem;
    border-radius: 999px;
    background: var(--ct-naranja);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ct-etapa-tag .material-symbols-rounded { font-size: 0.8125rem !important; }


/* ─────────────────────────────────────────────────────
   4) DIAGNÓSTICO INICIAL
   ───────────────────────────────────────────────────── */

.ct-diag-content {
    max-width: 880px;
    margin: 0 auto;
}

.ct-diag-block p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 1.25rem;
    text-align: justify;
}

.ct-diag-aplica {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--ct-bg-verde) 0%, #E5F6E9 100%);
    border-left: 5px solid var(--ct-verde);
    border-radius: 8px;
}
.ct-diag-aplica h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ct-verde);
    margin-bottom: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
}
.ct-diag-aplica .material-symbols-rounded {
    font-size: 1.5rem !important;
}
.ct-diag-aplica p {
    margin: 0;
    color: #2A4A30;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.ct-diag-norma {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--ct-bg-azul);
    border-radius: 8px;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.ct-diag-norma .material-symbols-rounded {
    color: var(--ct-azul-geo);
    font-size: 1.25rem !important;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.ct-diag-norma span:last-child {
    font-size: 0.8125rem;
    color: #444;
    line-height: 1.55;
}


/* ─────────────────────────────────────────────────────
   5) COTIZACIÓN POR ELEMENTOS
   ───────────────────────────────────────────────────── */

.ct-cotiza-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 968px) {
    .ct-cotiza-grid { grid-template-columns: 1fr; }
}

.ct-cotiza-texto p {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1.25rem;
}

.ct-clausula {
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--ct-bg-amarillo) 0%, #FFF1D6 100%);
    border-left: 5px solid var(--ct-amarillo);
    border-radius: 8px;
}
.ct-clausula h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ct-naranja);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.ct-clausula .material-symbols-rounded {
    font-size: 1.25rem !important;
}
.ct-clausula p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #333;
}

.ct-cotiza-ejemplo {
    background: #fff;
    border: 2px solid var(--ct-azul-geo);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.ct-cotiza-ejemplo h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ct-azul-inst);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.ct-cotiza-ejemplo .material-symbols-rounded {
    color: var(--ct-azul-geo);
    font-size: 1.5rem !important;
}
.ct-cotiza-ejemplo-intro {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.ct-cotiza-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ct-cotiza-items li {
    padding: 0.625rem 0;
    border-bottom: 1px dashed var(--ct-gris-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #333;
}
.ct-cotiza-items li:last-child { border-bottom: none; }
.ct-cotiza-items .material-symbols-rounded {
    color: var(--ct-azul-geo);
    font-size: 0.875rem !important;
}

.ct-cotiza-disclaimer {
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ct-gris-border);
    font-size: 0.75rem;
    color: #888;
    line-height: 1.55;
    font-style: italic;
}


/* ─────────────────────────────────────────────────────
   6) 4 ESTADOS DEL DIAGNÓSTICO
   ───────────────────────────────────────────────────── */

.ct-estados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    max-width: 1140px;
    margin: 0 auto;
}

.ct-estado-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--ct-gris-border);
    border-top: 5px solid var(--ct-gris);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ct-estado-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ct-estado-card--verde { border-top-color: var(--ct-verde); }
.ct-estado-card--amarillo { border-top-color: var(--ct-amarillo); }
.ct-estado-card--naranja { border-top-color: var(--ct-naranja); }
.ct-estado-card--rojo { border-top-color: var(--ct-rojo); }
.ct-estado-card--gris { border-top-color: var(--ct-gris); }

.ct-estado-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
.ct-estado-icon {
    font-size: 2rem !important;
}
.ct-estado-card--verde .ct-estado-icon { color: var(--ct-verde); }
.ct-estado-card--amarillo .ct-estado-icon { color: var(--ct-amarillo); }
.ct-estado-card--naranja .ct-estado-icon { color: var(--ct-naranja); }
.ct-estado-card--rojo .ct-estado-icon { color: var(--ct-rojo); }
.ct-estado-card--gris .ct-estado-icon { color: var(--ct-gris); }

.ct-estado-codigo {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    background: var(--ct-gris-bg);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #555;
}

.ct-estado-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ct-azul-inst);
    margin: 0 0 0.5rem;
}
.ct-estado-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #444;
    margin-bottom: 1rem;
}

.ct-estado-decision {
    padding-top: 0.875rem;
    border-top: 1px dashed var(--ct-gris-border);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #555;
}
.ct-estado-decision strong {
    display: block;
    color: var(--ct-azul-inst);
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ─────────────────────────────────────────────────────
   7) 3 OPCIONES ANTE HALLAZGO GRAVE
   ───────────────────────────────────────────────────── */

.ct-opciones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 968px) {
    .ct-opciones-grid { grid-template-columns: 1fr; }
}

.ct-opcion-card {
    padding: 2rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
}

.ct-opcion-card--naranja { border-top: 5px solid #FFB347; }
.ct-opcion-card--rojo { border-top: 5px solid #FF6B6B; }
.ct-opcion-card--azul { border-top: 5px solid #6FA9FF; }

.ct-opcion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.ct-opcion-letra {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}
.ct-opcion-card--naranja .ct-opcion-letra { color: #FFB347; }
.ct-opcion-card--rojo .ct-opcion-letra { color: #FF8B8B; }
.ct-opcion-card--azul .ct-opcion-letra { color: #93BDFF; }

.ct-opcion-header .material-symbols-rounded {
    font-size: 2rem !important;
    opacity: 0.6;
}
.ct-opcion-card--naranja .material-symbols-rounded { color: #FFB347; }
.ct-opcion-card--rojo .material-symbols-rounded { color: #FF8B8B; }
.ct-opcion-card--azul .material-symbols-rounded { color: #93BDFF; }

.ct-opcion-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.ct-opcion-tag {
    display: inline-block;
    margin-bottom: 0.875rem;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 179, 71, 0.15);
    color: #FFB347;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    font-weight: 600;
}

.ct-opcion-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
}

.ct-opcion-detalle {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.ct-opcion-detalle p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
}

.ct-opcion-meta {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-opcion-meta li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.ct-opcion-meta .material-symbols-rounded {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.15rem;
    opacity: 1;
}
.ct-opcion-meta strong {
    color: #fff;
}

.ct-opciones-norma {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.ct-opciones-norma .material-symbols-rounded {
    color: #FFB347;
    font-size: 1.5rem !important;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.ct-opciones-norma p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}


/* ─────────────────────────────────────────────────────
   8) 3 ESCENARIOS DE SERVICIO
   ───────────────────────────────────────────────────── */

.ct-escenarios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 1100px) {
    .ct-escenarios-grid { grid-template-columns: 1fr; }
}

.ct-escenario-card {
    padding: 2rem;
    border-radius: 14px;
    background: #fff;
    border: 2px solid var(--ct-gris-border);
    position: relative;
    display: flex;
    flex-direction: column;
}

.ct-escenario-card--verde {
    border-color: var(--ct-verde);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-verde) 100%);
}
.ct-escenario-card--azul {
    border-color: var(--ct-azul-geo);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-azul) 100%);
}
.ct-escenario-card--morado {
    border-color: var(--ct-morado);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-morado) 100%);
}

.ct-escenario-num {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #555;
    text-transform: uppercase;
}

.ct-escenario-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.875rem;
    padding-right: 8rem;
}
.ct-escenario-header .material-symbols-rounded {
    font-size: 2.5rem !important;
    flex-shrink: 0;
}
.ct-escenario-card--verde .material-symbols-rounded { color: var(--ct-verde); }
.ct-escenario-card--azul .material-symbols-rounded { color: var(--ct-azul-geo); }
.ct-escenario-card--morado .material-symbols-rounded { color: var(--ct-morado); }

.ct-escenario-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ct-azul-inst);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}
.ct-escenario-sub {
    font-size: 0.8125rem;
    color: #666;
    font-style: italic;
}

.ct-escenario-norma {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #555;
    font-weight: 500;
}
.ct-escenario-norma .material-symbols-rounded {
    font-size: 0.9375rem !important;
    color: var(--ct-azul-inst) !important;
}

.ct-escenario-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.25rem;
}

.ct-escenario-incluye,
.ct-escenario-noincluye {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}
.ct-escenario-incluye {
    border-left: 3px solid var(--ct-verde);
}
.ct-escenario-noincluye {
    border-left: 3px solid var(--ct-rojo);
}
.ct-escenario-incluye h4,
.ct-escenario-noincluye h4 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem;
}
.ct-escenario-incluye h4 { color: var(--ct-verde); }
.ct-escenario-noincluye h4 { color: var(--ct-rojo); }
.ct-escenario-incluye .material-symbols-rounded { color: var(--ct-verde) !important; font-size: 1rem !important; }
.ct-escenario-noincluye .material-symbols-rounded { color: var(--ct-rojo) !important; font-size: 1rem !important; }

.ct-escenario-incluye ul,
.ct-escenario-noincluye ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ct-escenario-incluye li,
.ct-escenario-noincluye li {
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    color: #333;
    line-height: 1.5;
}

.ct-escenario-meta {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}
.ct-escenario-meta > div {
    padding: 0.3rem 0;
    font-size: 0.8125rem;
    color: #444;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ct-escenario-meta strong {
    color: var(--ct-azul-inst);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ct-escenario-aplica {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--ct-gris-border);
}
.ct-escenario-aplica strong {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ct-azul-inst);
    margin-bottom: 0.4rem;
}
.ct-escenario-aplica p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #555;
    font-style: italic;
}

.ct-escenarios-link {
    text-align: center;
    padding: 2rem;
    background: var(--ct-bg-cream);
    border-radius: 12px;
}
.ct-escenarios-link p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: #555;
}
.ct-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1.25rem;
    background: var(--ct-azul-geo);
    color: #fff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
}
.ct-link:hover {
    background: var(--ct-azul-inst);
    transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────────
   9) INTERVENCIONES (PRE/POST)
   ───────────────────────────────────────────────────── */

.ct-interv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 968px) {
    .ct-interv-grid { grid-template-columns: 1fr; }
}

.ct-interv-card {
    padding: 2rem;
    border-radius: 14px;
    background: #fff;
    border: 2px solid var(--ct-gris-border);
    position: relative;
}
.ct-interv-card--icm {
    border-color: var(--ct-verde);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-verde) 100%);
}
.ct-interv-card--ical {
    border-color: var(--ct-azul-geo);
    background: linear-gradient(135deg, #fff 0%, var(--ct-bg-azul) 100%);
}

.ct-interv-tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.4rem 0.875rem;
    background: #fff;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.ct-interv-card--icm .ct-interv-tag { color: var(--ct-verde); }
.ct-interv-card--ical .ct-interv-tag { color: var(--ct-azul-geo); }

.ct-interv-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ct-azul-inst);
    margin: 0 0 0.875rem;
    padding-right: 4rem;
}
.ct-interv-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #333;
    margin-bottom: 1.5rem;
}

.ct-interv-flujo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px dashed var(--ct-gris-border);
}
.ct-interv-flujo span {
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ct-azul-inst);
}
.ct-interv-flujo .ct-arrow {
    background: transparent;
    color: var(--ct-gris);
    font-size: 1.25rem;
    padding: 0;
}
.ct-interv-flujo--single span {
    background: var(--ct-bg-azul);
    color: var(--ct-azul-geo);
}

.ct-interv-independencia {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--ct-bg-azul) 0%, #E8EFF7 100%);
    border-radius: 10px;
    border-left: 5px solid var(--ct-azul-geo);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ct-interv-independencia .material-symbols-rounded {
    color: var(--ct-azul-geo);
    font-size: 1.75rem !important;
    flex-shrink: 0;
}
.ct-interv-independencia p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #333;
}


/* ─────────────────────────────────────────────────────
   10) EXPEDIENTE METROLÓGICO
   ───────────────────────────────────────────────────── */

.ct-expediente-card {
    padding: 2.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ct-azul-inst) 0%, var(--ct-azul-inge) 100%);
    color: #fff;
    box-shadow: 0 12px 40px rgba(4, 44, 83, 0.2);
}
.ct-expediente-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.ct-expediente-card-header .material-symbols-rounded {
    font-size: 2.5rem !important;
    color: #FFB347;
}
.ct-expediente-card-header h3 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
}

.ct-expediente-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ct-expediente-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}
.ct-expediente-list .material-symbols-rounded {
    color: #6BD480;
    font-size: 1.25rem !important;
    flex-shrink: 0;
    margin-top: 0.15rem;
}


/* ─────────────────────────────────────────────────────
   11) CTA FINAL
   ───────────────────────────────────────────────────── */

.ct-cta {
    padding: 4rem 0;
}
.ct-cta-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--ct-azul-inst) 0%, var(--ct-azul-inge) 100%);
    border-radius: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ct-cta-box::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 179, 71, 0.15) 0%, transparent 60%);
    pointer-events: none;
}
.ct-cta-box > * { position: relative; z-index: 1; }

.ct-cta-box h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    color: #fff;
    line-height: 1.25;
}
.ct-cta-box p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 540px;
    margin: 0 auto 2rem;
}

.ct-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    background: var(--ct-rojo);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(225, 7, 19, 0.3);
}
.ct-cta-btn:hover {
    background: #C8060F;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(225, 7, 19, 0.4);
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ct-hero { padding: 4rem 0 3rem; }
    .ct-section-header { margin-bottom: 2rem; }
    .ct-hero-stats { gap: 1.5rem; }
    .ct-hero-stat strong { font-size: 1.5rem; }
    .ct-parte { padding: 1.5rem; }
    .ct-parte-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
    .ct-cta-box { padding: 2rem 1.5rem; }
    .ct-expediente-card { padding: 1.75rem; }
}
/* ════════════════════════════════════════════════════════════════════
   /como-trabajamos — PATCH adicional: scroll suave para anclas
   
   Anexar al final de public/css/style.css (DESPUÉS del bloque
   anterior de /como-trabajamos).
   
   Cuando el usuario llega desde el Home con anclas como
   #escenarios, #diagnostico o #expediente, el scroll es suave
   y deja un pequeño margen superior para que el header fijo
   no tape el inicio de la sección.
   ════════════════════════════════════════════════════════════════════ */

/* Scroll suave global cuando se navega por anclas */
html {
    scroll-behavior: smooth;
}

/* Margen superior para anclas dentro de /como-trabajamos
   (compensa la altura del header fijo del layout) */
.page-comotrabajamos section[id] {
    scroll-margin-top: 90px;
}

@media (max-width: 768px) {
    .page-comotrabajamos section[id] {
        scroll-margin-top: 70px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   HOME — Catálogo de instrumentos: card sin link
   Anexar al final de public/css/style.css
   
   Esta clase replica el estilo de .servicio-card pero sin el cursor
   pointer ni el hover transform que sugerirían que es un link.
   ════════════════════════════════════════════════════════════════════ */
 
.servicio-card--no-link {
    cursor: default;
}
 
.servicio-card--no-link:hover {
    transform: none;
}
 
/* Si tu .servicio-card actual tiene transform en hover, conservar
   el resto de los estilos pero anular el transform en la versión
   sin link */
/* ── Logo del navbar — desktop ──────────────────────────────── */
 
.brand-lockup {
    /* Mostrar el logo completo sin recorte */
    height: auto;
    max-height: 56px;        /* altura máxima razonable en navbar */
    width: auto;
    max-width: 420px;        /* ancho suficiente para ratio 8:1 */
    object-fit: contain;     /* escala manteniendo proporción */
    display: block;
}
 
/* El contenedor del logo tampoco debe restringir */
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;          /* no se comprime cuando hay poco espacio */
    max-width: 420px;
}
 
 
/* ── Tablet (pantallas medianas) ────────────────────────────── */
 
@media (max-width: 1024px) {
    .brand-lockup {
        max-height: 48px;
        max-width: 340px;
    }
    .brand {
        max-width: 340px;
    }
}
 
 
/* ── Móvil (pantallas pequeñas) ─────────────────────────────── */
 
@media (max-width: 768px) {
    .brand-lockup {
        max-height: 40px;
        max-width: 240px;
    }
    .brand {
        max-width: 240px;
    }
} 
/* ═══════════════════════════════════════════════════════════════
   /como-trabajamos — JUSTIFICACIÓN TIPOGRÁFICA
   ═══════════════════════════════════════════════════════════════
   
   QUÉ HACE
     Aplica text-align: justify + hyphens: auto a los textos
     largos de la página /como-trabajamos para coherencia con
     el resto del portal (formacion, blog, nosotros, laboratorio).
   
   QUÉ HACER
     AGREGAR este CSS al final del archivo
     public/assets/css/comotrabajamos.css
     (o el archivo CSS específico de la página)
   
   QUÉ JUSTIFICA
     Solo textos de varias líneas donde la justificación
     funciona bien. No toca títulos, subtítulos, badges,
     pretítulos ni cards de 1-2 líneas.
   ═══════════════════════════════════════════════════════════════ */


/* Intro de sección general */
.page-comotrabajamos .ct-section-intro {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Párrafos largos del cuerpo */
.page-comotrabajamos .ct-text-lg {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 4 — Diagnóstico inicial: bloque principal */
.page-comotrabajamos .ct-diag-block p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-comotrabajamos .ct-diag-aplica p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 5 — Cotización por elementos */
.page-comotrabajamos .ct-cotiza-texto p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-comotrabajamos .ct-clausula p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-comotrabajamos .ct-cotiza-ejemplo-intro {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 6 — 4 estados del diagnóstico */
.page-comotrabajamos .ct-estado-desc {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 7 — Hallazgo grave (3 opciones) */
.page-comotrabajamos .ct-opcion-desc {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-comotrabajamos .ct-opcion-detalle p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 8 — Escenarios de servicio */
.page-comotrabajamos .ct-escenario-desc {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-comotrabajamos .ct-escenario-aplica p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 9 — Intervenciones (PRE/POST) */
.page-comotrabajamos .ct-interv-card p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-comotrabajamos .ct-interv-independencia p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Sección 11 — CTA final */
.page-comotrabajamos .ct-cta-box p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* ─────────────────────────────────────────────────────
   PSEUDO-ELEMENTO :after — MUESTRA LA IMAGEN
   ─────────────────────────────────────────────────────
   Solo se activa si --hero-img está definida en el inline
   style. Si no, el ::after permanece invisible. */
 
.srv-hero[style*="--hero-img"]::after,
.srv-detail-hero[style*="--hero-img"]::after,
.cal-hero[style*="--hero-img"]::after,
.ct-hero[style*="--hero-img"]::after,
.ns-hero[style*="--hero-img"]::after,
.fmc-hero[style*="--hero-img"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Máscara: visible a la derecha, transparente a la izquierda */
    -webkit-mask-image: linear-gradient(to left,
                                         rgba(0, 0, 0, 1) 0%,
                                         rgba(0, 0, 0, 0.85) 30%,
                                         rgba(0, 0, 0, 0.4) 65%,
                                         rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left,
                                 rgba(0, 0, 0, 1) 0%,
                                 rgba(0, 0, 0, 0.85) 30%,
                                 rgba(0, 0, 0, 0.4) 65%,
                                 rgba(0, 0, 0, 0) 100%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
 
 
/* ─────────────────────────────────────────────────────
   ASEGURAR QUE EL TEXTO QUEDE ENCIMA DE LA IMAGEN
   ───────────────────────────────────────────────────── */
 
.srv-hero[style*="--hero-img"] > .container,
.srv-detail-hero[style*="--hero-img"] > .container,
.cal-hero[style*="--hero-img"] > .container,
.ct-hero[style*="--hero-img"] > .container,
.ns-hero[style*="--hero-img"] > .container,
.fmc-hero[style*="--hero-img"] > .container {
    position: relative;
    z-index: 2;
}
 
 
/* ─────────────────────────────────────────────────────
   MÓVIL — LA IMAGEN PASA A SER FONDO DISCRETO FULL-WIDTH
   ───────────────────────────────────────────────────── */
 
@media (max-width: 768px) {
    .srv-hero[style*="--hero-img"]::after,
    .srv-detail-hero[style*="--hero-img"]::after,
    .cal-hero[style*="--hero-img"]::after,
    .ct-hero[style*="--hero-img"]::after,
    .ns-hero[style*="--hero-img"]::after,
    .fmc-hero[style*="--hero-img"]::after {
        /* La imagen pasa a cubrir TODO el hero */
        width: 100%;
        /* Máscara más uniforme: sutil en toda el área */
        -webkit-mask-image: none;
        mask-image: none;
        /* Opacidad muy baja para que el texto siga legible */
        opacity: 0.22;
    }
}
/* ════════════════════════════════════════════════════════════════════
   HOME · BLOQUE DOCTRINAL "CRITERIO TÉCNICO OBJETIVO"
   Sección destacada con cream amarillo institucional
   Posición · entre stats e instrumentos catálogo
   ════════════════════════════════════════════════════════════════════ */

.hm-cto {
  background-color: #FFF5E6;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hm-cto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #B8651A 0%, #E10713 100%);
}

.hm-cto-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hm-cto-pretitulo {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8651A;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #B8651A;
}

.hm-cto-titulo {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #042C53;
  margin-bottom: 2.5rem;
  letter-spacing: -0.01em;
}

.hm-cto-cuerpo {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2C2C2C;
  margin-bottom: 2.5rem;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.hm-cto-cuerpo p {
  margin-bottom: 1.5rem;
}

.hm-cto-cuerpo .hm-cto-destacado {
  color: #042C53;
  font-weight: 700;
}

.hm-cto-cuerpo p:last-child {
  margin-bottom: 0;
}

.hm-cto-cierre {
  font-size: 1.25rem !important;
  text-align: left !important;
  font-weight: 600;
  color: #042C53;
  font-style: italic;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 4px solid #B8651A;
  margin-top: 2rem !important;
  background-color: rgba(184, 101, 26, 0.05);
  padding-right: 1.5rem;
  border-radius: 0 4px 4px 0;
}

.hm-cto-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.hm-cto-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hm-cto-cta .material-symbols-rounded {
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.hm-cto-cta:hover .material-symbols-rounded {
  transform: translateX(4px);
}

.hm-cto-cta--primary {
  background-color: #042C53;
  color: #FFFFFF;
  border: 2px solid #042C53;
}

.hm-cto-cta--primary:hover {
  background-color: #021c38;
  border-color: #021c38;
  color: #FFFFFF;
  text-decoration: none;
}

.hm-cto-cta--secondary {
  background-color: transparent;
  color: #042C53;
  border: 2px solid #042C53;
}

.hm-cto-cta--secondary:hover {
  background-color: #042C53;
  color: #FFFFFF;
  text-decoration: none;
}

/* Tablet */
@media (max-width: 991px) {
  .hm-cto {
    padding: 4rem 0;
  }

  .hm-cto-titulo {
    font-size: 1.875rem;
    margin-bottom: 2rem;
  }

  .hm-cto-cuerpo {
    font-size: 1rem;
  }

  .hm-cto-cierre {
    font-size: 1.125rem !important;
  }
}

/* Móvil */
@media (max-width: 767px) {
  .hm-cto {
    padding: 3rem 0;
  }

  .hm-cto-pretitulo {
    font-size: 0.6875rem;
    margin-bottom: 1.25rem;
  }

  .hm-cto-titulo {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 1.75rem;
  }

  .hm-cto-cuerpo {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }

  .hm-cto-cuerpo p {
    margin-bottom: 1.25rem;
  }

  .hm-cto-cierre {
    font-size: 1rem !important;
    padding: 1rem 1rem 1rem 1.25rem;
  }

  .hm-cto-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hm-cto-cta {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HOME · BLOQUE DOCTRINAL "CRITERIO TÉCNICO OBJETIVO"
   Sección destacada con cream amarillo institucional
   Posición · entre stats e instrumentos catálogo
   ════════════════════════════════════════════════════════════════════ */

.hm-cto {
  background-color: #FFF5E6;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hm-cto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #B8651A 0%, #E10713 100%);
}

.hm-cto-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hm-cto-pretitulo {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8651A;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #B8651A;
}

.hm-cto-titulo {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #042C53;
  margin-bottom: 2.5rem;
  letter-spacing: -0.01em;
}

.hm-cto-cuerpo {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2C2C2C;
  margin-bottom: 2.5rem;
}

.hm-cto-cuerpo p {
  margin-bottom: 1.5rem;
}

.hm-cto-cuerpo p:last-child {
  margin-bottom: 0;
}

.hm-cto-cierre {
  font-size: 1.25rem !important;
  font-weight: 600;
  color: #042C53;
  font-style: italic;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 4px solid #B8651A;
  margin-top: 2rem !important;
  background-color: rgba(184, 101, 26, 0.05);
  padding-right: 1.5rem;
  border-radius: 0 4px 4px 0;
}

.hm-cto-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.hm-cto-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hm-cto-cta .material-symbols-rounded {
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.hm-cto-cta:hover .material-symbols-rounded {
  transform: translateX(4px);
}

.hm-cto-cta--primary {
  background-color: #042C53;
  color: #FFFFFF;
  border: 2px solid #042C53;
}

.hm-cto-cta--primary:hover {
  background-color: #021c38;
  border-color: #021c38;
  color: #FFFFFF;
  text-decoration: none;
}

.hm-cto-cta--secondary {
  background-color: transparent;
  color: #042C53;
  border: 2px solid #042C53;
}

.hm-cto-cta--secondary:hover {
  background-color: #042C53;
  color: #FFFFFF;
  text-decoration: none;
}

/* Tablet */
@media (max-width: 991px) {
  .hm-cto {
    padding: 4rem 0;
  }

  .hm-cto-titulo {
    font-size: 1.875rem;
    margin-bottom: 2rem;
  }

  .hm-cto-cuerpo {
    font-size: 1rem;
  }

  .hm-cto-cierre {
    font-size: 1.125rem !important;
  }
}

/* Móvil */
@media (max-width: 767px) {
  .hm-cto {
    padding: 3rem 0;
  }

  .hm-cto-pretitulo {
    font-size: 0.6875rem;
    margin-bottom: 1.25rem;
  }

  .hm-cto-titulo {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 1.75rem;
  }

  .hm-cto-cuerpo {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }

  .hm-cto-cuerpo p {
    margin-bottom: 1.25rem;
  }

  .hm-cto-cierre {
    font-size: 1rem !important;
    padding: 1rem 1rem 1rem 1.25rem;
  }

  .hm-cto-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hm-cto-cta {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FIN · BLOQUE DOCTRINAL CRITERIO TÉCNICO OBJETIVO
   ════════════════════════════════════════════════════════════════════ */