/*
Theme Name: CIG-AD (Sway Child)
Template: sway
Theme URI: https://cig.edu.gt
Author: Colegio Internacional de Guatemala
Description: Sitio de CIG-AD, la modalidad de educación a distancia del Colegio Internacional de Guatemala. Sistema de diseño propio sobre el tema Sway.
Version: 1.34.1
Tags: education, school, distance-learning
*/

/* =========================================================================
   CIG-AD — SISTEMA DE DISEÑO
   Paleta institucional CIG + azul digital del gráfico CIG-AD.
   ========================================================================= */

:root {
  /* Marca */
  --cig-navy:      #1E2F58;
  --cig-navy-900:  #16244a;
  --cig-navy-700:  #2a4076;
  --cig-blue:      #0878FF;
  --cig-blue-700:  #0060DC;
  --cig-blue-300:  #6FB0FF;
  --cig-blue-050:  #EAF3FF;
  --cig-gold:      #E3B333;
  --cig-gold-050:  #FDF6E6;
  --cig-orange:    #EE7615;
  --cig-green:     #6CB22D;
  --cig-green-050: #F0F8E8;
  --cig-red:       #CE141D;

  /* Neutrales */
  --cig-ink:       #14203A;
  --cig-body:      #48546E;
  --cig-muted:     #6B7793;
  --cig-line:      #E3EAF6;
  --cig-line-soft: #EEF3FB;
  --cig-surface:   #F5F8FE;
  --cig-white:     #FFFFFF;

  /* Formas */
  --cig-r-sm: 12px;
  --cig-r:    18px;
  --cig-r-lg: 26px;
  --cig-r-xl: 34px;
  --cig-r-pill: 999px;

  /* Sombras: capas suaves, nunca una sola sombra dura */
  --cig-sh-1: 0 1px 2px rgba(20,32,58,.06), 0 2px 8px rgba(20,32,58,.05);
  --cig-sh-2: 0 2px 6px rgba(20,32,58,.05), 0 12px 28px -8px rgba(20,32,58,.14);
  --cig-sh-3: 0 4px 10px rgba(20,32,58,.06), 0 28px 56px -16px rgba(20,32,58,.22);
  --cig-sh-blue: 0 10px 24px -8px rgba(8,120,255,.45);

  /* Ritmo vertical */
  --cig-section: clamp(56px, 8vw, 116px);
  --cig-gap:     clamp(18px, 2.4vw, 30px);

  /* Tipografía */
  --cig-font:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cig-display: 'Quicksand', var(--cig-font);
}

/* -------------------------------------------------------------------------
   1. BASE
   ------------------------------------------------------------------------- */

body.cigad,
body.cigad p,
body.cigad li,
body.cigad td,
body.cigad label,
body.cigad input,
body.cigad textarea,
body.cigad select,
body.cigad button {
  font-family: var(--cig-font);
}

body.cigad {
  color: var(--cig-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--cig-white);
}

body.cigad h1, body.cigad h2, body.cigad h3,
body.cigad h4, body.cigad h5, body.cigad h6 {
  font-family: var(--cig-font);
  color: var(--cig-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.16;
}

body.cigad h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; }
body.cigad h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; }
body.cigad h3 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); }
body.cigad h4 { font-size: clamp(1.1rem, 1.6vw, 1.32rem); }

body.cigad a { color: var(--cig-blue-700); }
body.cigad a:hover,
body.cigad a:focus { color: var(--cig-navy); }

body.cigad ::selection { background: var(--cig-blue); color: #fff; }

/* Foco visible y consistente en todo el sitio */
body.cigad a:focus-visible,
body.cigad button:focus-visible,
body.cigad input:focus-visible,
body.cigad textarea:focus-visible,
body.cigad select:focus-visible,
body.cigad summary:focus-visible {
  outline: 3px solid var(--cig-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   2. ENCABEZADO / NAVEGACIÓN
   ------------------------------------------------------------------------- */

/* La barra de menú es BLANCA arriba y pasa al azul #14418A al bajar
   (`navbar-shrink`, que Sway añade a los 50 px de desplazamiento). Lo pidió el
   colegio el 6 de octubre de 2026, junto con la portada en blanco. El cintillo
   superior (correo, horario) sigue siempre en azul. */
body.cigad .navbar.navbar-default {
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 0;
  box-shadow: 0 1px 0 rgba(20,65,138,.08);
  transition: box-shadow .25s ease, background .25s ease;
}

/* Al fijarse, Sway añade `navbar-shrink` y repinta la barra de blanco.
   Hay que cubrir esa clase —no solo las genéricas— o asoma una franja clara. */
body.cigad .navbar.navbar-default.navbar-shrink,
body.cigad .navbar.navbar-default.scroll-to-fixed-fixed,
body.cigad .navbar.navbar-default.is-sticky {
  /* Sway genera el blanco desde sus propios estilos dinámicos; sin !important
     vuelve a ganar y asoma una franja clara bajo la barra de menú. */
  background: rgba(18,59,126,.96) !important;
  border: 0;
  box-shadow: 0 10px 30px -14px rgba(5,12,30,.75);
}

/* La barra de menú hereda el azul de la navegación; el color sólido lo
   define Opciones del tema, aquí solo la dejamos translúcida para que el
   desenfoque de fondo se note. */
body.cigad .menubar {
  padding-top: 6px;
  padding-bottom: 6px;
  background: transparent;
}

/* Logotipo.
   Sway imprime la imagen configurada en Opciones del tema; aquí solo
   controlamos su tamaño para que respire en la barra. */
body.cigad #logo a.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* Logotipo oficial horizontal (proporción 4:1), más grande que el anterior
   a pedido del colegio. */
body.cigad #logo a.logo img {
  height: 72px;
  width: auto;
  max-width: 300px;
  display: block;
}
/* Sway imprime dos logotipos: `.fixed-logo` (principal, a color, para la barra
   blanca) y `.nav-logo` (secundario, en negativo, para la barra azul). */
body.cigad #logo a.logo .fixed-logo { display: block; }
body.cigad #logo a.logo .nav-logo { display: none; }
body.cigad .navbar-shrink #logo a.logo .nav-logo { display: block; }
body.cigad .navbar-shrink #logo a.logo .fixed-logo { display: none; }

@media (max-width: 767px) {
  body.cigad #logo a.logo img { height: 50px; max-width: 210px; }
}

/* Enlaces del menú.
   El espaciado va ajustado a propósito: con el logotipo y el botón de
   conversión, seis entradas tienen que caber en una sola línea. */
body.cigad #main-menu .navbar-nav > li > a {
  font-weight: 600;
  font-size: 14.6px;
  letter-spacing: -.012em;
  color: #D5E0F5;
  position: relative;
  padding-left: 13px;
  padding-right: 13px;
  white-space: nowrap;
  transition: color .22s ease;
}
body.cigad #main-menu .navbar-nav > li > a:hover,
body.cigad #main-menu .navbar-nav > li > a:focus { color: #fff; }

@media (min-width: 992px) and (max-width: 1250px) {
  body.cigad #main-menu .navbar-nav > li > a { font-size: 13.8px; padding-left: 9px; padding-right: 9px; }
  body.cigad #logo a.logo img { height: 60px; max-width: 245px; }
}

body.cigad #main-menu .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--cig-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

body.cigad #main-menu .navbar-nav > li:hover > a::after,
body.cigad #main-menu .navbar-nav > li.current-menu-item > a::after,
body.cigad #main-menu .navbar-nav > li.current-menu-parent > a::after {
  transform: scaleX(1);
}

/* El azul de marca del tema no se lee sobre la cabecera clara: la página
   activa va en blanco y la marca el subrayado dorado. */
body.cigad #main-menu .navbar-nav > li.current-menu-item > a,
body.cigad #main-menu .navbar-nav > li.active > a,
body.cigad .navbar.navbar-default #main-menu .navbar-nav > li.current-menu-item > a { color: #fff !important; }

/* Barra blanca (antes de bajar): texto en el azul de la cabecera y subrayado
   en azul digital, que sí contrasta con el blanco. Sway pinta los enlaces con
   !important desde Opciones del tema —y en móvil con el color de la barra
   fija—, así que hace falta !important y más especificidad. */
body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li > a,
body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li.current-menu-item > a,
body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li.active > a { color: #14418A !important; }
body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li > a:hover,
body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li > a:focus { color: var(--cig-blue-700) !important; }
body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li > a::after { background: var(--cig-blue); }
body.cigad .navbar.navbar-default:not(.navbar-shrink) .navbar-toggle .icon-bar,
body.cigad .navbar.navbar-default:not(.navbar-shrink) .navbar-toggle .icon-bar::before,
body.cigad .navbar.navbar-default:not(.navbar-shrink) .navbar-toggle .icon-bar::after { background-color: #14418A !important; }
body.cigad .navbar.navbar-default:not(.navbar-shrink) .navbar-toggle:hover,
body.cigad .navbar.navbar-default:not(.navbar-shrink) .navbar-toggle:focus { background: rgba(20,65,138,.06); }

/* Barra superior: datos de contacto centrados y en un cuerpo mayor. */
body.cigad .topbar {
  background: #11397A;
  color: #D7E1F5;
  font-size: 15px;
  border: 0;
}
body.cigad .topbar .container {
  display: flex;
  justify-content: center;
}
body.cigad .topbar .topbar-left-content {
  float: none;
  width: 100%;
  text-align: center;
}
body.cigad .topbar .topbar-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 34px;
}
body.cigad .topbar .topbar-contact > span,
body.cigad .topbar .topbar-contact > span > a { margin: 0; line-height: 44px; }
body.cigad .topbar .topbar-contact,
body.cigad .topbar .topbar-contact a,
body.cigad .topbar .topbar-contact span { font-size: 15px; }
body.cigad .topbar .topbar-contact i { font-size: 15px; margin-right: 8px; }
/* Sway dibuja separadores verticales entre bloques; centrados, sobran. */
body.cigad .topbar,
body.cigad .topbar .topbar-left-content,
body.cigad .topbar .topbar-phone,
body.cigad .topbar .topbar-email,
body.cigad .topbar .topbar-opening-hours { border: 0 !important; }
/* Sin redes sociales cargadas, la columna derecha solo descentraría el bloque. */
body.cigad .topbar .topbar-right-content { display: none; }
body.cigad .topbar a { color: #D7E1F5; }
body.cigad .topbar a:hover { color: var(--cig-gold); }
body.cigad .topbar i { color: var(--cig-gold); }

/* Menú móvil: el botón de hamburguesa y los enlaces desplegados */
body.cigad .navbar-toggle .icon-bar { background-color: #fff; }
body.cigad .navbar-toggle:focus,
body.cigad .navbar-toggle:hover { background: rgba(255,255,255,.08); }

@media (max-width: 991px) {
  body.cigad #main-menu .navbar-nav > li { border-top: 1px solid rgba(255,255,255,.08); }
  body.cigad #main-menu .navbar-nav > li:first-child { border-top: 0; }
  body.cigad #main-menu .navbar-nav > li > a::after { display: none; }
  body.cigad .navbar.navbar-default:not(.navbar-shrink) #main-menu .navbar-nav > li { border-top-color: var(--cig-line); }
}

/* Los submenús siguen en azul oscuro también sobre la barra blanca: Sway los
   tiñe con el fondo de la barra (!important), que ahora es blanco. */
body.cigad .navbar .dropdown-menu {
  background: #16244A !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px -18px rgba(5,12,30,.8);
}
body.cigad .navbar .dropdown-menu > li > a { color: #D5E0F5; }
body.cigad .navbar .dropdown-menu > li > a:hover,
body.cigad .navbar .dropdown-menu > li > a:focus {
  color: #fff;
  background: rgba(255,255,255,.07);
}

/* Botón de cabecera */
body.cigad .navbar a.modal-menu-item,
body.cigad .navbar .header-button .tt_button {
  display: inline-flex;
  align-items: center;
  background: var(--cig-blue);
  border: 2px solid var(--cig-blue);
  color: #fff !important;
  border-radius: var(--cig-r-pill);
  font-family: var(--cig-font);
  font-weight: 600;
  font-size: 14.6px;
  line-height: 1.2;
  padding: 13px 24px;
  white-space: nowrap;
  box-shadow: var(--cig-sh-blue);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
body.cigad .navbar a.modal-menu-item:hover,
body.cigad .navbar .header-button .tt_button:hover {
  background: var(--cig-navy);
  border-color: var(--cig-navy);
  color: #fff !important;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   3. BOTONES
   ------------------------------------------------------------------------- */

.cigad-btn {
  --btn-bg: var(--cig-blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--cig-r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font-family: var(--cig-font);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .2s ease, color .2s ease;
  will-change: transform;
}

.cigad-btn:hover { transform: translateY(-2px); }
.cigad-btn:active { transform: translateY(0); }

.cigad-btn--primary { box-shadow: var(--cig-sh-blue); }
.cigad-btn--primary:hover { --btn-bg: var(--cig-blue-700); box-shadow: 0 14px 30px -8px rgba(8,120,255,.55); }

.cigad-btn--navy { --btn-bg: var(--cig-navy); box-shadow: 0 10px 24px -10px rgba(30,47,88,.6); }
.cigad-btn--navy:hover { --btn-bg: var(--cig-navy-900); }

.cigad-btn--gold { --btn-bg: var(--cig-gold); --btn-fg: #3A2B05; box-shadow: 0 10px 24px -10px rgba(227,179,51,.7); }
.cigad-btn--gold:hover { --btn-bg: #d4a426; }

.cigad-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cig-navy);
  border-color: var(--cig-line);
  background: #fff;
  box-shadow: var(--cig-sh-1);
}
.cigad-btn--ghost:hover { border-color: var(--cig-blue); color: var(--cig-blue-700) !important; }

.cigad-btn--onDark {
  --btn-bg: rgba(255,255,255,.12);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cigad-btn--onDark:hover { --btn-bg: #fff; --btn-fg: var(--cig-navy); border-color: #fff; }

.cigad-btn--wa { --btn-bg: #25D366; --btn-fg: #05331a; box-shadow: 0 10px 24px -10px rgba(37,211,102,.7); }
.cigad-btn--wa:hover { --btn-bg: #1FBE5B; }

.cigad-btn--lg { padding: 18px 38px; font-size: 16.5px; }

/* Botones nativos del tema, alineados a la marca */
body.cigad .tt_button.tt_primary_button {
  border-radius: var(--cig-r-pill);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. PRIMITIVAS DE SECCIÓN
   ------------------------------------------------------------------------- */

.cigad-sec {
  position: relative;
  padding: var(--cig-section) 0;
}
.cigad-sec--tight { padding: clamp(40px, 5vw, 72px) 0; }

.cigad-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
.cigad-wrap--narrow { max-width: 880px; }

body.cigad .cigad-h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--cig-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.cigad-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.66;
  color: var(--cig-body);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.cigad-head--center { text-align: center; }
.cigad-head--center .cigad-lead { margin-inline: auto; }
.cigad-head { margin-bottom: clamp(32px, 4vw, 56px); }

/* Texto con degradado de marca */
.cigad-grad {
  /* Termina en naranja (secundario de marca) en vez de dorado: sobre blanco el
     dorado se queda muy por debajo del contraste mínimo. */
  background: linear-gradient(100deg, var(--cig-navy) 0%, var(--cig-blue) 58%, var(--cig-blue-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fondos de sección */
.cigad-sec--soft { background: var(--cig-surface); }
.cigad-sec--navy {
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(8,120,255,.42), transparent 62%),
    radial-gradient(760px 420px at 96% 108%, rgba(227,179,51,.24), transparent 60%),
    linear-gradient(160deg, var(--cig-navy) 0%, var(--cig-navy-900) 100%);
  color: #D8E2F6;
}
body.cigad .cigad-sec--navy .cigad-h2,
body.cigad .cigad-sec--navy h2,
body.cigad .cigad-sec--navy h3,
body.cigad .cigad-sec--navy h4 { color: #fff; }
body.cigad .cigad-sec--navy .cigad-lead { color: #BFCDE8; }

/* Sección con fotografía de fondo.
   La imagen ya viene desenfocada y atenuada desde el origen, así funciona como
   textura y no compite con el texto. El degradado encima garantiza el
   contraste; la URL llega en la variable --cigad-bg desde el marcado. */
.cigad-sec--photo {
  overflow: hidden;            /* recorta la capa que se desplaza */
  /* Respaldo sólido: si la imagen no carga, la sección sigue siendo legible. */
  background: linear-gradient(160deg, var(--cig-navy) 0%, var(--cig-navy-900) 100%);
}

/* La fotografía vive en su propia capa para poder moverla con el scroll.
   Sobresale por arriba y por abajo, y ese margen es el recorrido disponible. */
.cigad-sec--photo > .cigad-sec__bg {
  position: absolute;
  inset: -22% 0;
  z-index: 0;
  /* El velo es más denso arriba y abajo —donde van el titular y el cierre— y
     se abre en la franja central para que la fotografía se vea y el paralaje
     se note. Las tarjetas de vidrio aportan su propio fondo ahí. */
  background-image:
    radial-gradient(900px 480px at 12% 8%, rgba(8,120,255,.28), transparent 62%),
    linear-gradient(180deg,
      rgba(14,25,54,.88) 0%,
      rgba(18,31,66,.84) 24%,
      rgba(22,36,74,.58) 52%,
      rgba(16,28,58,.84) 100%),
    var(--cigad-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cigad-sec--photo > .cigad-sec__bg { inset: 0; transform: none; will-change: auto; }
}

/* Tarjetas de vidrio sobre la fotografía */
.cigad-sec--photo .cigad-card--feature {
  background:
    linear-gradient(140deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 36%, rgba(255,255,255,0) 62%),
    rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 20px 44px -20px rgba(5,12,30,.62);
}

/* Sin borde nuevo al pasar el cursor: solo el vidrio se aclara. */
.cigad-sec--photo .cigad-card--feature:hover {
  border-color: rgba(255,255,255,.20);
  background:
    linear-gradient(140deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 36%, rgba(255,255,255,0) 62%),
    rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 26px 54px -22px rgba(5,12,30,.70);
}
.cigad-sec--photo .cigad-card--feature::after { display: none; }

.cigad-sec--photo .cigad-card--feature .cigad-card__ico {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--cig-gold);
}

/* Sobre vidrio el texto necesita un punto más de luz. */
body.cigad .cigad-sec--photo .cigad-card--feature p { color: #D2DEF3; }
.cigad-sec--photo .cigad-card--feature .cigad-checks li { color: #D2DEF3; }

/* Sin desenfoque de fondo el vidrio sería ilegible: se opaca. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cigad-sec--photo .cigad-card--feature,
  .cigad-sec--photo .cigad-card--feature:hover {
    background: rgba(24,39,76,.88);
  }
}

/* Patrón sutil de puntos */
.cigad-dots::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(30,47,88,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%);
  mask-image: linear-gradient(180deg, #000, transparent 65%);
  pointer-events: none;
}
.cigad-sec > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------------------- */

.cigad-hero {
  position: relative;
  overflow: clip;
  padding: clamp(120px, 15vw, 210px) 0 clamp(84px, 10vw, 140px);
  color: var(--cig-body);
  /* Fondo blanco, a pedido del colegio (6 de octubre de 2026), con un brillo
     azul y otro dorado muy tenues para que no quede plano. */
  background:
    radial-gradient(1150px 680px at 76% -14%, rgba(8,120,255,.10), transparent 62%),
    radial-gradient(760px 520px at 2% 14%, rgba(227,179,51,.10), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
}

/* Retícula de puntos azules: da textura al blanco sin robar protagonismo. */
.cigad-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20,65,138,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.cigad-hero > * { position: relative; z-index: 1; }

/* Orbes suaves en movimiento lento */
.cigad-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .22;
  pointer-events: none;
  animation: cigad-float 16s ease-in-out infinite;
}
.cigad-hero__orb--a { width: 380px; height: 380px; top: 4%;  right: 2%;  background: rgba(8,120,255,.55); }
.cigad-hero__orb--b { width: 300px; height: 300px; bottom: 0%; left: 0%;  background: rgba(227,179,51,.30); animation-delay: -6s; }
.cigad-hero__orb--c { width: 240px; height: 240px; top: 48%; left: 42%;  background: rgba(8,120,255,.22); animation-delay: -11s; }

@keyframes cigad-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-26px,0) scale(1.06); }
}

.cigad-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

body.cigad .cigad-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.7rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.038em;
  color: #14418A;
  margin: 0 0 22px;
  text-wrap: balance;
}

/* El título del hero va en un solo color, el azul de la cabecera.
   `.cigad-grad` sigue en el marcado para no tocar el contenido de la página,
   pero aquí se anula el degradado: hay que devolver el recorte a `border-box`,
   porque con `background-clip: text` y sin fondo el texto se vuelve invisible. */
.cigad-hero .cigad-grad {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #14418A;
}

.cigad-hero__sub {
  font-size: clamp(1.06rem, 1.75vw, 1.3rem);
  line-height: 1.6;
  color: var(--cig-body);
  max-width: 54ch;
  margin: 0 0 30px;
  text-wrap: pretty;
}

.cigad-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.cigad-hero__cta:last-child { margin-bottom: 0; }


/* Composición visual del hero */
.cigad-hero__art { position: relative; }

.cigad-hero__art::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8,120,255,.16), transparent 72%);
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
}
/* El contenedor solo inclina y dimensiona: no recorta.
   Recortar una caja rotada con `overflow:hidden` deja el borde dentado, y el
   fondo claro que había debajo asomaba como una orla blanca sobre el azul.
   Redondeando la propia imagen, el borde lo suaviza el compositor. */
.cigad-hero__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1; /* la foto de portada es cuadrada: se ve completa */
  transform: rotate(-1.4deg);
  background: transparent;
}
.cigad-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: clamp(28px, 5vw, 48px);
  box-shadow: var(--cig-sh-3);
  backface-visibility: hidden;
}

/* Tarjeta flotante de "clase en vivo" */
.cigad-hero__card {
  position: absolute;
  /* Por encima de la fotografía, que lleva z-index 1 para montarse sobre el
     halo desenfocado del fondo. */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 14px;
  border-radius: var(--cig-r);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--cig-sh-2);
  animation: cigad-float 9s ease-in-out infinite;
}
.cigad-hero__card--live  { top: 7%; left: -18px; }
.cigad-hero__card--teach { bottom: 9%; right: -16px; animation-delay: -4.5s; }

.cigad-hero__card b { display: block; font-size: 14.5px; color: var(--cig-ink); font-weight: 700; line-height: 1.25; }
.cigad-hero__card small { font-size: 12.5px; color: var(--cig-muted); }

.cigad-hero__ico {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--cig-blue-050);
  color: var(--cig-blue-700);
}
.cigad-hero__ico--green { background: var(--cig-green-050); color: #4C8B16; }

.cigad-livedot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cig-red);
  box-shadow: 0 0 0 0 rgba(206,20,29,.55);
  animation: cigad-pulse 2s infinite;
  flex: none;
}
@keyframes cigad-pulse {
  70%  { box-shadow: 0 0 0 11px rgba(206,20,29,0); }
  100% { box-shadow: 0 0 0 0 rgba(206,20,29,0); }
}

@media (max-width: 900px) {
  .cigad-hero__grid { grid-template-columns: 1fr; }
  .cigad-hero__art { max-width: 480px; margin-inline: auto; }
  .cigad-hero__card--live  { left: 4px; }
  .cigad-hero__card--teach { right: 4px; }
}

/* En teléfono el hero se lee centrado: el texto queda en el eje de la pantalla
   y los botones dejan de colgar a la izquierda. */
@media (max-width: 620px) {
  .cigad-hero__copy { text-align: center; }
  .cigad-hero__sub { margin-inline: auto; }
  .cigad-hero__cta { justify-content: center; }
}

/* -------------------------------------------------------------------------
   6. CINTA DE VALORES (marquee)
   ------------------------------------------------------------------------- */

.cigad-marquee {
  overflow: hidden;
  padding: 16px 0;
  /* Mismo azul que el cintillo superior de correo y horario. */
  background: #11397A;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.cigad-marquee__track {
  display: flex;
  width: max-content;
  gap: 46px;
  animation: cigad-scroll 34s linear infinite;
}
.cigad-marquee:hover .cigad-marquee__track { animation-play-state: paused; }
.cigad-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #CFDBF2;
  font-family: var(--cig-display);
  font-weight: 600;
  font-size: 15.5px;
  white-space: nowrap;
}
.cigad-marquee__item i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cig-gold);
  flex: none;
}
@keyframes cigad-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------------
   7. TARJETAS Y BENTO
   ------------------------------------------------------------------------- */

.cigad-grid { display: grid; gap: var(--cig-gap); }
.cigad-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cigad-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cigad-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 980px) {
  .cigad-grid--3, .cigad-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .cigad-grid--2, .cigad-grid--3, .cigad-grid--4 { grid-template-columns: 1fr; }
}

.cigad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--cig-r-lg);
  background: #fff;
  border: 1px solid var(--cig-line);
  box-shadow: var(--cig-sh-1);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}
.cigad-card::after {
  content: '';
  position: absolute;
  inset: auto -40% -60% auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,120,255,.10), transparent 68%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.cigad-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cig-sh-2);
  border-color: #D4E3FA;
}
.cigad-card:hover::after { opacity: 1; }

.cigad-card__ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--cig-blue-050);
  color: var(--cig-blue-700);
  margin-bottom: 18px;
  flex: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cigad-card:hover .cigad-card__ico { transform: scale(1.08) rotate(-4deg); }

.cigad-card__ico--gold  { background: var(--cig-gold-050); color: #8A6A10; }
.cigad-card__ico--green { background: var(--cig-green-050); color: #4C8B16; }
.cigad-card__ico--orange{ background: #FDF0E4; color: #C25C06; }
.cigad-card__ico--navy  { background: #ECF0F9; color: var(--cig-navy); }

body.cigad .cigad-card h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--cig-ink);
  margin: 0 0 9px;
  letter-spacing: -.02em;
}
.cigad-card p { margin: 0; font-size: 15.4px; line-height: 1.62; color: var(--cig-body); }

/* Mosaico: piezas con el mismo tratamiento y contenido centrado en horizontal.
   Se usa en «experiencia» (portada) y «tecnología» (Metodología AD).
   Ya no se fuerza el cuadrado: con el contenido alineado arriba dejaba un
   hueco grande al pie. La cuadrícula iguala la altura de cada fila. */
.cigad-card--tile {
  border-radius: 0;
  background: var(--cig-blue-050);
  border-color: #D5E6FC;
  align-items: center;
  /* Contenido alineado arriba, no centrado en vertical: centrado, cada tarjeta
     colocaba icono y título a una altura distinta según lo largo de su texto
     y la fila se veía desalineada. */
  justify-content: flex-start;
  text-align: center;
  padding: clamp(30px, 3.2vw, 44px) clamp(22px, 2.6vw, 34px);
}
/* El borde no cambia al pasar el cursor: la regla base de `.cigad-card` lo
   aclaraba y se dibujaba un contorno encima. Solo se mantiene la elevación. */
.cigad-card--tile:hover { border-color: #D5E6FC; }
.cigad-card--tile::after { display: none; }

/* Un único color de icono en las seis: azul de marca sobre chip sólido. */
.cigad-card--tile .cigad-card__ico {
  background: var(--cig-blue);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(8,120,255,.55);
}

.cigad-grid--2 .cigad-card--tile {
  padding-block: clamp(34px, 4vw, 52px);
}

body.cigad .cigad-card--tile h3 { text-align: center; }
.cigad-card--tile p { text-align: center; }


/* Variante destacada */
.cigad-card--feature {
  background: linear-gradient(160deg, var(--cig-navy) 0%, #16244a 100%);
  border-color: transparent;
  color: #C9D6EE;
}
body.cigad .cigad-card--feature h3 { color: #fff; }
body.cigad .cigad-card--feature p { color: #B6C6E4; }
.cigad-card--feature .cigad-card__ico { background: rgba(255,255,255,.12); color: var(--cig-gold); }

/* -------------------------------------------------------------------------
   8. PASOS / LÍNEA DE TIEMPO
   ------------------------------------------------------------------------- */

.cigad-steps { display: grid; gap: 0; counter-reset: paso; }

.cigad-step {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 22px;
  padding-bottom: 34px;
}
.cigad-step:last-child { padding-bottom: 0; }

.cigad-step__num {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cig-line);
  color: var(--cig-navy);
  font-family: var(--cig-display);
  font-weight: 700;
  font-size: 19px;
  z-index: 1;
  transition: all .3s ease;
}
.cigad-step:hover .cigad-step__num {
  background: var(--cig-blue);
  border-color: var(--cig-blue);
  color: #fff;
  box-shadow: var(--cig-sh-blue);
}
/* Línea conectora */
.cigad-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 28px; top: 56px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cig-line), var(--cig-line-soft));
}

body.cigad .cigad-step h3 { font-size: 1.14rem; margin: 12px 0 7px; color: var(--cig-ink); }
.cigad-step p  { margin: 0; font-size: 15.4px; color: var(--cig-body); }

/* Versión horizontal */
.cigad-steps--row {
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--cig-gap);
}
.cigad-steps--row .cigad-step {
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: 0;
  text-align: left;
}
.cigad-steps--row .cigad-step::before {
  left: 66px; right: -18px; top: 27px; bottom: auto;
  width: auto; height: 2px;
  background: repeating-linear-gradient(90deg, var(--cig-line) 0 7px, transparent 7px 14px);
}
@media (max-width: 980px) {
  .cigad-steps--row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cigad-steps--row .cigad-step::before { display: none; }
}
@media (max-width: 620px) {
  .cigad-steps--row { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   9. ESTADÍSTICAS
   ------------------------------------------------------------------------- */

.cigad-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2px;
  border-radius: var(--cig-r-lg);
  overflow: hidden;
  background: var(--cig-line);
  border: 1px solid var(--cig-line);
}
.cigad-stat {
  background: #fff;
  padding: clamp(24px, 3vw, 36px) 20px;
  text-align: center;
}
.cigad-stat__n {
  display: block;
  font-family: var(--cig-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cig-navy);
  margin-bottom: 8px;
}
.cigad-stat__l { font-size: 14.2px; color: var(--cig-muted); line-height: 1.45; }

.cigad-sec--navy .cigad-stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.cigad-sec--navy .cigad-stat { background: transparent; }
body.cigad .cigad-sec--navy .cigad-stat__n { color: #fff; }
body.cigad .cigad-sec--navy .cigad-stat__l { color: #B6C6E4; }

@media (max-width: 760px) { .cigad-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* -------------------------------------------------------------------------
   10. SPLIT (texto + imagen)
   ------------------------------------------------------------------------- */

.cigad-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.cigad-split--reverse .cigad-split__media { order: -1; }

@media (max-width: 900px) {
  .cigad-split { grid-template-columns: 1fr; }
  .cigad-split--reverse .cigad-split__media { order: 0; }
}

.cigad-split__media { position: relative; }
.cigad-frame {
  position: relative;
  border-radius: clamp(24px, 4vw, 40px);
  overflow: hidden;
  box-shadow: var(--cig-sh-3);
  aspect-ratio: 5 / 4;
  background: var(--cig-blue-050);
}
.cigad-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cigad-frame--tall { aspect-ratio: 4 / 5; }

/* Marco decorativo detrás de la imagen */
.cigad-split__media::before {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-radius: clamp(24px, 4vw, 40px);
  border: 2px solid var(--cig-blue-300);
  opacity: .45;
  z-index: -1;
}

/* Lista con palomitas */
/* Sangría con marcador absoluto: con `display:grid` el texto suelto junto a un
   <b> genera dos elementos anónimos distintos y la línea se parte palabra a
   palabra. */
.cigad-checks { list-style: none; margin: 24px 0 0; padding: 0; display: block; }
.cigad-checks li {
  position: relative;
  display: block;
  padding-left: 36px;
  margin-bottom: 13px;
  font-size: 15.6px;
  color: var(--cig-body);
  line-height: 1.55;
}
.cigad-checks li:last-child { margin-bottom: 0; }
.cigad-checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cig-green-050) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C8B16' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cigad-checks li b { color: var(--cig-ink); font-weight: 650; }

.cigad-sec--navy .cigad-checks li { color: #C4D2EC; }
.cigad-sec--navy .cigad-checks li b { color: #fff; }

/* -------------------------------------------------------------------------
   10a. ÍNDICE DE PERFILES
   Lista editorial numerada, sin cajas: la jerarquía la marcan el número, la
   línea divisoria y el acento que aparece al pasar el cursor.
   ------------------------------------------------------------------------- */

.cigad-audience {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}

/* En el marcado la introducción va primero para que en móvil —y para un
   lector de pantalla— se lea antes que la lista. En escritorio la colocamos
   a la derecha con `order`, sin tocar el orden del documento. */
.cigad-audience__list  { order: 1; }
.cigad-audience__intro { order: 2; position: sticky; top: 124px; }

@media (max-width: 960px) {
  .cigad-audience { grid-template-columns: 1fr; }
  .cigad-audience__intro { order: 1; position: static; }
  .cigad-audience__list  { order: 2; }
}

.cigad-audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cigad-audience__list li {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  padding: clamp(22px, 2.4vw, 28px) 0 clamp(22px, 2.4vw, 28px) 22px;
  border-top: 1px solid var(--cig-line);
  transition: padding-left .32s cubic-bezier(.4,0,.2,1);
}
.cigad-audience__list li:first-child { border-top: 0; padding-top: 0; }
.cigad-audience__list li:last-child { border-bottom: 1px solid var(--cig-line); }

/* Acento vertical que crece al pasar el cursor */
.cigad-audience__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: clamp(22px, 2.4vw, 28px);
  bottom: clamp(22px, 2.4vw, 28px);
  width: 3px;
  border-radius: 3px;
  background: var(--cig-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cigad-audience__list li:first-child::before { top: 0; }
.cigad-audience__list li:hover::before { transform: scaleY(1); }
.cigad-audience__list li:hover { padding-left: 30px; }

.cigad-audience__n {
  font-family: var(--cig-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cig-blue);
  opacity: .34;
  transition: opacity .3s ease;
}
.cigad-audience__list li:hover .cigad-audience__n { opacity: 1; }

body.cigad .cigad-audience__body h3 {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.3;
  color: var(--cig-ink);
  margin: 0 0 7px;
  transition: color .25s ease;
}
.cigad-audience__list li:hover .cigad-audience__body h3 { color: var(--cig-blue-700); }

.cigad-audience__body p {
  margin: 0;
  font-size: 15.4px;
  line-height: 1.6;
  color: var(--cig-body);
  max-width: 52ch;
}

@media (max-width: 560px) {
  .cigad-audience__list li { grid-template-columns: 54px minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   10b. BLOQUE COMPARATIVO  (sin uso actualmente)
   Dos mitades unidas en una sola pieza: la objeción a la izquierda y la
   respuesta a la derecha, con un puente circular sobre la costura.
   Lo usa build/sections/_variante-que-es-comparativo.html, que está parqueada.
   Para activarla, renombrarla a inicio-03-que-es.html y reejecutar el
   instalador. Si se descarta, se puede borrar este bloque entero.
   ------------------------------------------------------------------------- */

.cigad-versus {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  filter: drop-shadow(0 28px 48px rgba(20,32,58,.18));
}

.cigad-versus__side {
  padding: clamp(28px, 3.4vw, 48px);
  min-width: 0;
}

.cigad-versus__side--doubt {
  background: var(--cig-surface);
  border: 1px solid var(--cig-line);
  border-right: 0;
  border-radius: var(--cig-r-xl) 0 0 var(--cig-r-xl);
}

.cigad-versus__side--answer {
  position: relative;
  border-radius: 0 var(--cig-r-xl) var(--cig-r-xl) 0;
  background:
    radial-gradient(620px 340px at 92% -12%, rgba(8,120,255,.45), transparent 62%),
    radial-gradient(400px 240px at 6% 108%, rgba(227,179,51,.16), transparent 66%),
    linear-gradient(150deg, var(--cig-navy) 0%, var(--cig-navy-900) 100%);
  color: #C2D0EA;
}

body.cigad .cigad-versus__side h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--cig-ink);
}
body.cigad .cigad-versus__side--answer h3 { color: #fff; }

.cigad-versus__intro {
  margin: 0 0 24px;
  font-size: 14.6px;
  line-height: 1.55;
  color: var(--cig-muted);
  max-width: 40ch;
}
.cigad-versus__side--answer .cigad-versus__intro { color: #9FB2D6; }

.cigad-versus__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cigad-versus__list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 17px;
  font-size: 15.4px;
  line-height: 1.54;
}
.cigad-versus__list li:last-child { margin-bottom: 0; }

.cigad-versus__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 23px; height: 23px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Objeción: guion neutro, sin dramatizar. */
.cigad-versus__side--doubt .cigad-versus__list li::before {
  background-color: #E4EAF5;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238793AE' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
  background-size: 13px;
}
.cigad-versus__side--doubt .cigad-versus__list li { color: var(--cig-muted); }

/* Respuesta: palomita dorada sobre el azul marino. */
.cigad-versus__side--answer .cigad-versus__list li::before {
  background-color: rgba(227,179,51,.18);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3B333' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px;
}

/* Puente sobre la costura.
   Vive dentro de la mitad oscura para poder anclarse a su borde, que es la
   costura tanto en escritorio (borde izquierdo) como en móvil (borde superior). */
.cigad-versus__bridge {
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--cig-blue);
  box-shadow: 0 2px 6px rgba(20,32,58,.10), 0 14px 30px -10px rgba(20,32,58,.35);
}

@media (max-width: 860px) {
  .cigad-versus { grid-template-columns: 1fr; }
  .cigad-versus__side--doubt {
    border-right: 1px solid var(--cig-line);
    border-bottom: 0;
    border-radius: var(--cig-r-xl) var(--cig-r-xl) 0 0;
  }
  .cigad-versus__side--answer { border-radius: 0 0 var(--cig-r-xl) var(--cig-r-xl); }
  .cigad-versus__bridge {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 50px; height: 50px;
  }
}

/* -------------------------------------------------------------------------
   11. ACORDEÓN (preguntas frecuentes)
   ------------------------------------------------------------------------- */

.cigad-faq { display: grid; gap: 12px; }

.cigad-faq details {
  border: 1px solid var(--cig-line);
  border-radius: var(--cig-r);
  background: #fff;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cigad-faq details[open] {
  border-color: #CFE2FC;
  box-shadow: var(--cig-sh-1);
}

.cigad-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: 16.2px;
  color: var(--cig-ink);
  line-height: 1.42;
  transition: color .2s ease;
}
.cigad-faq summary::-webkit-details-marker { display: none; }
.cigad-faq summary:hover { color: var(--cig-blue-700); }

.cigad-faq summary::after {
  content: '';
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cig-blue-050) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230060DC' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .2s;
}
.cigad-faq details[open] summary::after { transform: rotate(180deg); }

.cigad-faq__body {
  padding: 0 22px 22px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--cig-body);
  max-width: 76ch;
}
.cigad-faq__body p { margin: 0 0 10px; }
.cigad-faq__body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   13. CTA FINAL
   ------------------------------------------------------------------------- */

.cigad-cta {
  position: relative;
  overflow: hidden;
  border-radius: clamp(26px, 4vw, 44px);
  padding: clamp(40px, 6vw, 76px) clamp(26px, 5vw, 70px);
  background:
    radial-gradient(760px 400px at 88% 0%, rgba(8,120,255,.55), transparent 62%),
    /* El acento cálido va arriba a la izquierda y muy suave: abajo ensuciaba
       la zona de los botones. */
    radial-gradient(420px 260px at 4% 2%, rgba(227,179,51,.13), transparent 66%),
    linear-gradient(140deg, var(--cig-navy) 0%, #16244a 100%);
  color: #CCDAF2;
  text-align: center;
  box-shadow: var(--cig-sh-3);
}
body.cigad .cigad-cta h2 { color: #fff; margin: 0 0 14px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.03em; }
body.cigad .cigad-cta p { color: #BDCDE9; font-size: clamp(1rem, 1.5vw, 1.12rem); max-width: 58ch; margin: 0 auto 30px; }
.cigad-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* -------------------------------------------------------------------------
   14. MASCOTA CIGI
   ------------------------------------------------------------------------- */

.cigad-mascot {
  width: clamp(110px, 16vw, 190px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 26px rgba(20,32,58,.22));
  animation: cigad-float 7s ease-in-out infinite;
}

.cigad-mascot-row {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
}
.cigad-bubble {
  position: relative;
  flex: 1 1 260px;
  padding: 20px 24px;
  border-radius: var(--cig-r-lg);
  background: #fff;
  border: 1px solid var(--cig-line);
  box-shadow: var(--cig-sh-1);
  font-size: 15.6px;
  color: var(--cig-body);
}
.cigad-bubble::before {
  content: '';
  position: absolute;
  left: -9px; top: 46px;
  width: 16px; height: 16px;
  background: #fff;
  border-left: 1px solid var(--cig-line);
  border-bottom: 1px solid var(--cig-line);
  transform: rotate(45deg);
}
@media (max-width: 620px) { .cigad-bubble::before { display: none; } }

/* -------------------------------------------------------------------------
   15. GALERÍA
   ------------------------------------------------------------------------- */

.cigad-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: 150px;
  gap: 14px;
}
.cigad-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--cig-r);
  background: var(--cig-line-soft);
}
.cigad-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.cigad-gallery figure:hover img { transform: scale(1.06); }
.cigad-gallery .tall { grid-row: span 2; }
.cigad-gallery .wide { grid-column: span 2; }
/* Las fotos anchas quedan en una franja muy baja: centradas cortan las cabezas.
   `pos-top` sube el encuadre para fotos con rostros arriba (aula del CIG y la
   de robótica, que centrada dejaba a los niños sin cabeza).
   La graduación lleva `tall wide` (2×2): con las 4 columnas de escritorio, así
   las filas 2 y 3 quedan completas, sin el hueco que dejaba como `tall`. */
.cigad-gallery .pos-top img { object-position: 50% 8%; }

@media (max-width: 860px) {
  /* `dense`: con dos columnas, una foto `tall` seguida de una `wide` dejaba vacía
     la columna derecha (galería de Inicio); las fotos chicas rellenan ese hueco. */
  .cigad-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 130px; grid-auto-flow: dense; }
}

/* -------------------------------------------------------------------------
   16. FORMULARIOS (Contact Form 7)
   ------------------------------------------------------------------------- */

body.cigad .wpcf7 { max-width: 100%; }

body.cigad .cigad-form {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--cig-r-lg);
  background: #fff;
  border: 1px solid var(--cig-line);
  box-shadow: var(--cig-sh-2);
}

body.cigad .cigad-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
body.cigad .cigad-form__grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) {
  body.cigad .cigad-form__grid { grid-template-columns: 1fr; }
  body.cigad .cigad-form__grid .full { grid-column: 1; }
}

body.cigad .cigad-field { display: block; min-width: 0; text-align: left; }
body.cigad .cigad-form input,
body.cigad .cigad-form select,
body.cigad .cigad-form textarea { box-sizing: border-box; }
body.cigad .cigad-field > span.label {
  display: block;
  text-align: left;
  /* Sway sangra los <span> dentro de <label> para alojar iconos propios. */
  padding: 0;
  margin-top: 0;
  font-size: 13.4px;
  font-weight: 650;
  color: var(--cig-ink);
  margin-bottom: 7px;
  letter-spacing: -.005em;
  white-space: normal;
  overflow-wrap: break-word;
  text-transform: none;
}
body.cigad .cigad-field .wpcf7-form-control-wrap { display: block; }

/* «¿Cómo prefieres que te contactemos?»: dos opciones como tarjetas, con el
   mismo borde y fondo que los campos de texto; la elegida se marca en azul. */
body.cigad .cigad-choice .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
body.cigad .cigad-choice .wpcf7-list-item { margin: 0; display: block; }
body.cigad .cigad-choice .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  border: 1.5px solid var(--cig-line);
  border-radius: var(--cig-r-sm);
  background: #FBFCFF;
  font-size: 15.3px;
  font-weight: 500;
  color: var(--cig-ink);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body.cigad .cigad-choice .wpcf7-list-item label:hover { border-color: var(--cig-blue-300); }
body.cigad .cigad-choice input[type="radio"] {
  width: 17px; height: 17px; margin: 0; flex: none;
  accent-color: var(--cig-blue);
}
body.cigad .cigad-choice .wpcf7-list-item label:has(input:checked) {
  border-color: var(--cig-blue);
  background: var(--cig-blue-050);
  box-shadow: 0 0 0 4px rgba(8,120,255,.13);
}
body.cigad .cigad-choice .wpcf7-list-item label:has(input:focus-visible) {
  outline: 3px solid var(--cig-blue);
  outline-offset: 2px;
}
body.cigad .cigad-choice .wpcf7-list-item-label { padding: 0; }

/* Cloudflare Turnstile (verificación anti-bots), centrado sobre el botón. */
body.cigad .cigad-turnstile { display: flex; justify-content: center; min-height: 65px; }
/* Sin claves de Turnstile el campo sale vacío: que no deje el hueco del widget. */
body.cigad .cigad-turnstile:empty { display: none; }
body.cigad .cigad-turnstile .wpcf7-form-control-wrap,
body.cigad .cigad-turnstile .cf-turnstile { width: 100%; max-width: 480px; }

/* Botón de enviar con tres estados en la MISMA celda de la rejilla, para que
   el ancho no salte: normal → «Enviando…» (clase `submitting` que pone Contact
   Form 7) → «Enviado» (clase `is-enviado`, la pone el JS de la sección 5 de
   functions.php). */
body.cigad .cigad-submit { margin-top: 4px; text-align: center; }
body.cigad .wpcf7 .cigad-enviar {
  display: inline-grid;
  place-items: center;
  /* Sway estira los botones de los formularios a todo el ancho. */
  width: auto;
  min-width: 220px;
  padding: 15px 34px;
  border: none;
  border-radius: var(--cig-r-pill);
  background: var(--cig-blue);
  color: #fff;
  font-family: var(--cig-font);
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: var(--cig-sh-blue);
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
body.cigad .wpcf7 .cigad-enviar:hover { transform: translateY(-2px); background: var(--cig-blue-700); }
body.cigad .cigad-enviar__estado {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity .2s ease, transform .2s ease;
}
body.cigad .cigad-enviar__estado--enviando,
body.cigad .cigad-enviar__estado--enviado { opacity: 0; transform: translateY(6px); }

/* Enviando */
body.cigad .wpcf7-form.submitting .cigad-enviar { pointer-events: none; background: var(--cig-blue-700); transform: none; }
body.cigad .wpcf7-form.submitting .cigad-enviar__estado--normal { opacity: 0; transform: translateY(-6px); }
body.cigad .wpcf7-form.submitting .cigad-enviar__estado--enviando { opacity: 1; transform: none; }
body.cigad .cigad-enviar__spinner {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: cigad-girar .7s linear infinite;
}
@keyframes cigad-girar { to { transform: rotate(360deg); } }

/* Enviado: verde, con la palomita dibujándose */
body.cigad .wpcf7 .cigad-enviar.is-enviado {
  pointer-events: none;
  background: #2E9D4A;
  box-shadow: 0 10px 24px -10px rgba(46,157,74,.7);
  transform: none;
}
body.cigad .cigad-enviar.is-enviado .cigad-enviar__estado--normal { opacity: 0; transform: translateY(-6px); }
body.cigad .cigad-enviar.is-enviado .cigad-enviar__estado--enviado { opacity: 1; transform: none; }
body.cigad .cigad-enviar__check {
  position: relative;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
body.cigad .cigad-enviar__check::after {
  content: '';
  position: absolute;
  left: 7px; top: 3.5px;
  width: 5px; height: 10px;
  border: solid #2E9D4A;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
}
body.cigad .cigad-enviar.is-enviado .cigad-enviar__check::after { animation: cigad-palomita .35s .1s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes cigad-palomita { to { transform: rotate(45deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  body.cigad .cigad-enviar__spinner { animation-duration: 1.6s; }
  body.cigad .cigad-enviar.is-enviado .cigad-enviar__check::after { animation: none; transform: rotate(45deg); }
}

/* Con el envío correcto, el botón ya lo dice: el recuadro de éxito de Contact
   Form 7 se oculta a la vista pero sigue para lectores de pantalla (aria-live).
   Los mensajes de error se siguen viendo. */
body.cigad .wpcf7-form.sent .wpcf7-response-output {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* El botón propio no usa el spinner de Contact Form 7. */
body.cigad .cigad-submit .wpcf7-spinner { display: none; }

body.cigad .wpcf7 input[type="text"],
body.cigad .wpcf7 input[type="email"],
body.cigad .wpcf7 input[type="tel"],
body.cigad .wpcf7 input[type="date"],
body.cigad .wpcf7 select,
body.cigad .wpcf7 textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--cig-line);
  border-radius: var(--cig-r-sm);
  background: #FBFCFF;
  font-family: var(--cig-font);
  font-size: 15.3px;
  color: var(--cig-ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: none;
}
body.cigad .wpcf7 textarea { min-height: 128px; resize: vertical; }

body.cigad .wpcf7 select {
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.45;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7793' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px;
  cursor: pointer;
}

body.cigad .wpcf7 input:focus,
body.cigad .wpcf7 select:focus,
body.cigad .wpcf7 textarea:focus {
  border-color: var(--cig-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8,120,255,.13);
  outline: none;
}

body.cigad .wpcf7 input::placeholder,
body.cigad .wpcf7 textarea::placeholder { color: #9AA6C0; }

body.cigad .wpcf7 input[type="submit"] {
  width: auto;
  padding: 15px 34px;
  border: none;
  border-radius: var(--cig-r-pill);
  background: var(--cig-blue);
  color: #fff;
  font-weight: 650;
  font-size: 15.5px;
  cursor: pointer;
  box-shadow: var(--cig-sh-blue);
  transition: transform .2s ease, background .2s ease;
}
body.cigad .wpcf7 input[type="submit"]:hover { transform: translateY(-2px); background: var(--cig-blue-700); }

body.cigad .wpcf7 .wpcf7-not-valid-tip { color: var(--cig-red); font-size: 13px; margin-top: 5px; }
body.cigad .wpcf7 .wpcf7-response-output {
  border-radius: var(--cig-r-sm);
  border-width: 1.5px;
  padding: 13px 16px;
  font-size: 14.6px;
  margin: 18px 0 0;
}

/* Lista de datos de contacto */
.cigad-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cigad-contact-list li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.cigad-contact-list .ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--cig-blue-050);
  color: var(--cig-blue-700);
}
.cigad-contact-list b { display: block; color: var(--cig-ink); font-size: 14px; font-weight: 650; margin-bottom: 2px; }
.cigad-contact-list span { font-size: 15.2px; color: var(--cig-body); }
.cigad-contact-list a { color: var(--cig-body); }
.cigad-contact-list a:hover { color: var(--cig-blue-700); }

/* -------------------------------------------------------------------------
   17. PIE DE PÁGINA
   ------------------------------------------------------------------------- */

body.cigad #footer,
body.cigad .footer {
  background: var(--cig-navy-900);
  color: #A9BADA;
}
body.cigad #footer h1, body.cigad #footer h2, body.cigad #footer h3,
body.cigad #footer h4, body.cigad #footer h5, body.cigad #footer .widget-title {
  color: #fff;
}
body.cigad #footer a { color: #A9BADA; }
body.cigad #footer a:hover { color: var(--cig-gold); }
body.cigad .footer-bar,
body.cigad .lower-footer { background: #101c3c; color: #8497BC; }

/* -------------------------------------------------------------------------
   18. BARRA FIJA MÓVIL
   ------------------------------------------------------------------------- */

.cigad-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--cig-line);
  box-shadow: 0 -6px 24px -12px rgba(20,32,58,.35);
}
.cigad-stickybar__item {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  border-radius: var(--cig-r-pill);
  font-weight: 650;
  font-size: 14.6px;
  text-decoration: none !important;
  transition: transform .2s ease;
}
.cigad-stickybar__item:active { transform: scale(.97); }
.cigad-stickybar__item--cta { background: var(--cig-blue); color: #fff !important; }

@media (max-width: 820px) {
  .cigad-stickybar { display: flex; }
  body.cigad { padding-bottom: 76px; }
}

/* -------------------------------------------------------------------------
   19. MOVIMIENTO / REVELADO
   ------------------------------------------------------------------------- */

/* El contenido es visible por defecto. La animación de entrada solo se activa
   cuando JavaScript está disponible (la clase `cigad-js` la pone el tema en
   <html>), para que nada quede oculto si el script falla o está bloqueado. */
.cigad-js .cigad-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}
.cigad-js .cigad-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.cigad *,
  body.cigad *::before,
  body.cigad *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cigad-js .cigad-reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   20. UTILIDADES
   ------------------------------------------------------------------------- */

.cigad-center { text-align: center; }
.cigad-mt-0 { margin-top: 0; }
.cigad-mt-2 { margin-top: 18px; }
.cigad-mt-4 { margin-top: 34px; }
.cigad-mt-6 { margin-top: 52px; }
.cigad-note {
  font-size: 13.8px;
  color: var(--cig-muted);
  line-height: 1.55;
}
.cigad-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--cig-r-pill);
  background: var(--cig-surface);
  border: 1px solid var(--cig-line);
  font-size: 13.6px;
  font-weight: 600;
  color: var(--cig-navy);
}
.cigad-pill--live { background: #FFF1F2; border-color: #FFD9DC; color: #A30F17; }

.cigad-tags { display: flex; flex-wrap: wrap; gap: 9px; }

/* -------------------------------------------------------------------------
   DECLARACIONES (misión, visión)
   Textos institucionales largos que no son tarjetas: cada uno ocupa su propio
   bloque a todo el ancho. En tarjetas quedaban estrechos y con el texto
   apelmazado; aquí el rótulo va a un lado y el párrafo respira.
   ------------------------------------------------------------------------- */

.cigad-statement {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: start;
  padding-bottom: clamp(30px, 3.6vw, 50px);
}
/* La línea va SOLO entre declaraciones. Con `:first-of-type` no bastaba: ese
   selector cuenta entre hermanos del mismo elemento, y el primer <div> de la
   sección es el bloque de texto e imagen, así que la primera declaración se
   quedaba con borde y salía doble raya bajo el <hr> de la sección. */
.cigad-statement + .cigad-statement {
  border-top: 1px solid var(--cig-line);
  padding-top: clamp(30px, 3.6vw, 50px);
}
.cigad-statement:last-child { padding-bottom: 0; }

body.cigad .cigad-statement__label {
  position: relative;
  margin: 0;
  padding-top: 18px;
  font-family: var(--cig-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cig-navy);
}
/* Filete corto en lugar del ícono de la tarjeta: marca el bloque sin encerrarlo. */
.cigad-statement__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 4px;
  border-radius: var(--cig-r-pill);
  background: var(--cig-gold);
}
.cigad-statement--vision .cigad-statement__label::before { background: var(--cig-blue); }

.cigad-statement__text {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(1.04rem, 1.5vw, 1.19rem);
  line-height: 1.75;
  color: var(--cig-body);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .cigad-statement { grid-template-columns: 1fr; gap: 12px; }
  body.cigad .cigad-statement__label { padding-top: 16px; }
}

hr.cigad-rule {
  border: 0;
  height: 1px;
  background: var(--cig-line);
  margin: clamp(30px, 4vw, 52px) 0;
}

/* Sway inyecta márgenes en filas del builder; los neutralizamos donde
   usamos secciones propias a ancho completo. */
body.cigad .vc_row.cigad-row-reset { margin-left: 0; margin-right: 0; }
body.cigad .cigad-row-reset > .vc_column_container > .vc_column-inner { padding: 0; }
body.cigad .wpb_text_column:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   21. PÁGINAS INTERNAS
   ------------------------------------------------------------------------- */

body.cigad .cigad-fullbleed { padding: 0 !important; }

.cigad-pagehead {
  position: relative;
  overflow: clip;
  padding: clamp(112px, 13vw, 180px) 0 clamp(44px, 6vw, 76px);
  background:
    radial-gradient(900px 480px at 82% -18%, rgba(8,120,255,.16), transparent 62%),
    radial-gradient(700px 420px at 2% 8%, rgba(227,179,51,.15), transparent 60%),
    linear-gradient(180deg, #FBFCFF 0%, #F3F7FF 100%);
  border-bottom: 1px solid var(--cig-line-soft);
}
.cigad-pagehead__inner { max-width: 760px; }
body.cigad .cigad-pagehead h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.033em;
  line-height: 1.06;
  color: var(--cig-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.cigad-pagehead p {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.62;
  color: var(--cig-body);
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}
.cigad-pagehead__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }

/* Migas de pan sencillas */
.cigad-crumbs {
  font-size: 13.6px;
  color: var(--cig-muted);
  margin-bottom: 22px;
}
.cigad-crumbs a { color: var(--cig-muted); text-decoration: none; }
.cigad-crumbs a:hover { color: var(--cig-blue-700); }
.cigad-crumbs span { opacity: .55; margin: 0 7px; }

/* Bloque de contenido tipo artículo */
.cigad-prose { max-width: 72ch; }
body.cigad .cigad-prose h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin: 44px 0 14px; letter-spacing: -.025em; }
body.cigad .cigad-prose h3 { font-size: 1.2rem; margin: 30px 0 10px; }
.cigad-prose h2:first-child, .cigad-prose h3:first-child { margin-top: 0; }
.cigad-prose p { margin: 0 0 16px; font-size: 16.2px; line-height: 1.72; }
.cigad-prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.cigad-prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.66;
}
.cigad-prose ul li::before {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cig-blue);
}

/* Aviso / nota destacada */
.cigad-callout {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--cig-r);
  background: var(--cig-gold-050);
  border: 1px solid #F2E2B8;
  color: #6B520B;
  font-size: 15.3px;
  line-height: 1.6;
}
.cigad-callout .ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: #fff;
  color: var(--cig-gold);
}
.cigad-callout b { color: #4A3806; }
.cigad-callout--blue { background: var(--cig-blue-050); border-color: #CFE2FC; color: #0B4590; }
.cigad-callout--blue .ico { color: var(--cig-blue); }
.cigad-callout--blue b { color: #073573; }

/* Dos columnas de contenido */
.cigad-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 900px) { .cigad-cols { grid-template-columns: 1fr; } }

.cigad-aside {
  position: sticky;
  top: 110px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--cig-r-lg);
  background: var(--cig-surface);
  border: 1px solid var(--cig-line);
}
body.cigad .cigad-aside h3 { font-size: 1.1rem; margin: 0 0 12px; }
.cigad-aside .cigad-note { margin-top: 16px; }
.cigad-aside p { font-size: 15px; margin: 0 0 18px; }
@media (max-width: 900px) { .cigad-aside { position: static; } }