/* =====================================================
   CDN CODEADOS — By Claude
   v3.0 · codeados.com · futuro cdn.codeados.com
   ===================================================== */


/* =====================================================
   1. TOKENS
   ===================================================== */

/* Colores corporativos, tipografía y semánticos → se definen en el :root
   del proyecto (head del HTML), no en el CDN. El CDN solo define tokens
   estructurales que no dependen de la marca. */

:root {
  /* Radios */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        20px;
  --radius-xl:        30px;
  --radius-full:      9999px;

  /* Sombras multicapa */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.07);

  /* Glow por color */
  --glow-primary:   0 0 20px rgba(238,240,243,0.35),  0 0 40px rgba(238,240,243,0.12); 
  --glow-secondary: 0 0 20px rgba(238,240,243,0.45),  0 0 40px rgba(238,240,243,0.20);
  --glow-terciary:  0 0 20px rgba(238,240,243,0.40),    0 0 40px rgba(238,240,243,0.15);
  --glow-success:   0 0 20px rgba(238,240,243,0.40),   0 0 40px rgba(238,240,243,0.15);
  --glow-error:     0 0 20px rgba(238,240,243,0.40),   0 0 40px rgba(238,240,243,0.15);
  --glow-white:     0 0 20px rgba(238,240,243,0.30), 0 0 40px rgba(238,240,243,0.10);

  /* Glass */
  --glass-bg:     rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.25);
  --glass-blur:   12px;
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);

  /* Transiciones */
  --t-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --t-base: 250ms cubic-bezier(0.4,0,0.2,1);
  --t-slow: 400ms cubic-bezier(0.4,0,0.2,1);

  /* Gradientes */
  --gradient-primary:   linear-gradient(135deg, var(--corporativo1) 0%, var(--corporativo1alt) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--corporativo2) 0%, var(--corporativo2alt) 100%);
  --gradient-terciary: linear-gradient(135deg, var(--corporativo3) 0%, var(--corporativo3alt) 100%);
  --gradient-dark:      linear-gradient(135deg, var(--negro) 0%, var(--negroalt) 100%); 

}


/* =====================================================
   2. RESET
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: var(--font-size); }

body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.6;
  color: var(--negroalt);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  font-weight: var(--font-weight);
}

body.noscroll { overflow: hidden }

img { max-width: 100%; height: auto; }
p   { margin-top: 0; margin-bottom: 1rem; }
a   { color: var(--corporativo1); text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--corporativo1alt); }
ul, ol  { margin: 0; padding: 0; }
section { position: relative; }
strong { font-weight: 600;  }

/* =====================================================
   3. TIPOGRAFÍA
   ===================================================== */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-title);
  font-weight: var(--font-weight-title);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.75rem; 
}
h1, .h1 { font-size: clamp(2.8rem,   5vw,   3.5rem); }
h2, .h2 { font-size: clamp(2.0rem, 3.5vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.6rem, 2.5vw, 1.75rem); }
h4, .h4 { font-size: 1.50rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1.12rem; }

/* Tamaños */
.fsize10{font-size:10px} .fsize11{font-size:11px} .fsize12{font-size:12px} .fsize13{font-size:13px}
.fsize14{font-size:14px} .fsize15{font-size:15px} .fsize16{font-size:16px} .fsize18{font-size:18px}
.fsize20{font-size:20px} .fsize22{font-size:22px} .fsize24{font-size:24px} .fsize26{font-size:26px}
.fsize28{font-size:28px} .fsize30{font-size:30px} .fsize32{font-size:32px} .fsize36{font-size:36px}
.fsize40{font-size:40px} .fsize44{font-size:44px} .fsize48{font-size:48px} .fsize50{font-size:50px}
.fsize60{font-size:60px}

/* Peso */
.bold       { font-weight: 700; }
.semibold   { font-weight: 600; }
.medium     { font-weight: 500; }
.textnormal { font-weight: 400; }
.light      { font-weight: 300; }

/* Alineación */
.textleft   { text-align: left; }
.textcenter { text-align: center; }
.textright  { text-align: right; }
.uppercase  { text-transform: uppercase; }

/* Colores texto */
.colorprimary   { color: var(--corporativo1); }
.colorsecondary { color: var(--corporativo2); }
.colorterciary  { color: var(--corporativo3); }
.colorwhite     { color: var(--blanco) !important; }
.colorblack     { color: var(--negro); }
.colorgray      { color: var(--grisalt); }
.colorerror     { color: var(--color-error); }
.colorsuccess   { color: var(--color-success); }
.colorwarning   { color: var(--color-warning); }

/* v3: texto degradado */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* =====================================================
   4. LAYOUT — Grid · Contenedores · Espaciado
   Lógica idéntica a v2 (gutter via padding interno)
   ===================================================== */

/* --- Contenedores --- */
.container        { position: relative; margin: 0 auto; width: 96%; max-width: 1440px; }
.container.min    { width: 80%; max-width: 980px; }
.container.max    { max-width: 100%; width: 90%; }
.container.full   { max-width: 100%; width: 100%; }
/* v3 extras */
.container.narrow { width: 80%; max-width: 760px; }
.container.flex   { display: flex; align-items: center; }
/* Clearfix */
.container::after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* --- Grid 16 columnas (gutter = padding:10px en cada col) --- */
.col { position: relative; margin-bottom: 20px; float: left; box-sizing: border-box; padding: 10px; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.col.one      { width: 6.25%; }
.col.two      { width: 12.5%; }
.col.three    { width: 18.75%; }
.col.four     { width: 25%; }
.col.five     { width: 31.25%; }
.col.six      { width: 37.5%; }
.col.seven    { width: 43.75%; }
.col.eight    { width: 50%; }
.col.nine     { width: 56.25%; }
.col.ten      { width: 62.5%; }
.col.eleven   { width: 68.75%; }
.col.twelve   { width: 75%; }
.col.thirteen { width: 81.25%; }
.col.fourteen { width: 87.5%; }
.col.fifteen  { width: 93.75%; }
.col.fiveteen { width: 93.75%; } /* alias v2 */
.col.sixteen  { width: 100%; }
.col.third    { width: 33.333334%; }
.col.twothird { width: 66.666667%; }
.col.onesix   { width: 16.666667%; }
.col.onefive  { width: 20%; }
 

/* =====================================================
   4b. GRID RESPONSIVE — Breakpoints de columnas
   Va junto a la rejilla, no en el bloque general
   ===================================================== */

@media screen and (max-width: 1600px) {
  .container { max-width: 1200px; }
}

@media screen and (max-width: 1200px) {
  .full1200 { width: 100% !important; }

}

@media screen and (max-width: 1030px) {
  .col.tabletfull  { width: 100% !important; }
  .col.tablethalf  { width: 50% !important; }
  .col.tabletthird { width: 33.333% !important; }
  .tabletmb20       { margin-bottom: 20px !important; }
  .tablettextcenter { text-align: center !important; }

  .container.min, .container.max {  width: 96%; max-width: 960px; }
}

@media screen and (max-width: 760px) {
  .col.t768full, .col.s768full { width: 100% !important; }
  .col.s768half { width: 50% !important; }
}

@media screen and (max-width: 480px) {
  .col, .col.tablethalf { width: 100%!important; }
  .col.s480half { width: 50% !important; }
}


/* =====================================================
   4c. FLEX GRID — Sistema paralelo al col de 16
   .row.max-N  +  .col-auto
   ===================================================== */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.col-auto {
  box-sizing: border-box;
  min-width: 0;
  flex-shrink: 0;
}

/* Columnas por fila — math: (100% - gap*(N-1)) / N */
.row.max-2 > .col-auto { width: calc(50%     - 10px); }
.row.max-3 > .col-auto { width: calc(33.333% - 14px); }
.row.max-4 > .col-auto { width: calc(25%     - 15px); }
.row.max-5 > .col-auto { width: calc(20%     - 16px); }
.row.max-6 > .col-auto { width: calc(16.666% - 17px); }

@media screen and (max-width: 1030px) {
  .row.max-3 > .col-auto,
  .row.max-4 > .col-auto,
  .row.max-5 > .col-auto,
  .row.max-6 > .col-auto { width: calc(50% - 10px); }
}

@media screen and (max-width: 480px) {
  .row.max-3 > .col-auto,
  .row.max-4 > .col-auto,
  .row.max-5 > .col-auto,
  .row.max-6 > .col-auto { width: 100%; }
}

/* =====================================================
   5. FONDOS & OVERLAYS
   ===================================================== */

/* Sólidos */
.bg_primary   { background-color: var(--corporativo1); }
.bg_secondary { background-color: var(--corporativo2); }
.bg_terciary  { background-color: var(--corporativo3); }
.bg_white     { background-color: var(--blanco); }
.bg_offwhite  { background-color: var(--blancoalt); }
.bg_lgray     { background-color: var(--grisclaroalt); }
.bg_gray      { background-color: var(--grisclaro); }
.bg_corp_gray { background-color: #f0f4f8; }
.bg_black     { background-color: var(--negro); }
.bg_dark      { background-color: var(--negroalt); }
.bg_green     { background-color: var(--color-success); }
.bg_red       { background-color: var(--color-error); }
.bg_blue      { background-color: var(--corporativo1); }
.bg_cream     { background-color: #fdf8ee; }

/* Gradientes v3 */
.bg_gradient_primary   { background: var(--gradient-primary); }
.bg_gradient_secondary { background: var(--gradient-secondary); }
.bg_gradient_dark      { background: var(--gradient-dark); }
.bg_mesh               { background: var(--gradient-mesh), var(--blanco); }

/* Imagen de fondo */
.bg_image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg_image.shadow {
      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12);
}

/* ---
   OVERLAY SYSTEM v3
   Combina libremente: .overlay + .over_COLOR + .opacityXX

   Mecanismo: custom properties separadas para RGB y alpha.
   - over_COLOR  → define --overlay-r/g/b y un alpha por defecto del color
   - opacityXX   → sobreescribe solo --overlay-alpha

   REGLA DE CASCADA: over_COLOR se declara ANTES que opacityXX.
   Igual especificidad → la declaración posterior gana.
   Resultado: opacityXX siempre gana si se combina con over_COLOR. ✓
--- */

.overlay { position: relative; }
.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--negro);
  z-index: 0;
}
.overlay > * { position: relative; z-index: 1; }

.opacity01::before { opacity: 0.10; }
.opacity02::before { opacity: 0.20; }
.opacity03::before { opacity: 0.30; }
.opacity04::before { opacity: 0.40; }
.opacity05::before { opacity: 0.50; }
.opacity06::before { opacity: 0.60; }
.opacity07::before { opacity: 0.70; }
.opacity08::before { opacity: 0.80; }
.opacity09::before { opacity: 0.90; }

.over_white::before                  { background: var(--blanco); }  
.over_corp1::before                  { background: var(--corporativo1); }  
.over_corp2::before                  { background: var(--corporativo2); }  
.over_corp3::before                  { background: var(--corporativo3); } 

/* =====================================================
   6. BOTONES
   ===================================================== */

.btn {
  display: inline-block;
  padding: 11px 26px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radius-md);
  vertical-align: middle;
  position: relative;
  transition:
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-fast);
} 
.btn.textleft { text-align:left;  }
.btn:hover  { transform: translateY(-2px); text-decoration: none; color:var(--blanco); opacity: 0.9;  }
.btn.static:hover  { transform: translateY(0px); opacity: 0.9; }
.btn.transparent { background:RGBA(255,255,255,0); color: var(--negro); }
.btn.transparent:hover { background:var(--grisclaro);  color: var(--negroalt);  }
.btn:active { transform: translateY(0); }

/* Tamaños */
.btn.small  { padding: 7px 16px;  font-size: 13px; }
.btn.medium { padding: 11px 26px; font-size: 15px; }
.btn.large  { padding: 15px 34px; font-size: 16px; }
.btn.big    { padding: 19px 46px; font-size: 19px; }

/* Sólidos v3 — gradiente sutil + sombra de color */
.btn.primary   { background: var(--gradient-primary);   color: var(--blanco); box-shadow: var(--glow-primary); }
.btn.secondary { background: var(--gradient-secondary); color: var(--blanco); box-shadow: var(--glow-secondary); }
.btn.terciary  { background: var(--gradient-terciary);      color: var(--blanco); box-shadow: var(--glow-terciary); }
.btn.white     { background: var(--blanco); color: var(--negroalt); box-shadow: var(--shadow-sm); }
.btn.gray      { background: var(--gris); color: var(--grisalt); }
.btn.lgray  , .btn.lightgray    { background: var(--grisclaro); color: var(--negro); }
.btn.black     { background: var(--negro); color: var(--blanco); box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.btn.error     { background: var(--color-error);   color: var(--blanco); }
.btn.success   { background: var(--color-success); color: var(--blanco); }
.btn.warning   { background: var(--color-warning); color: var(--blanco); }

/* Hover */
.btn.primary:hover   { color: var(--blanco); }
.btn.secondary:hover { color: var(--blanco); }
.btn.terciary:hover  { color: var(--blanco); }
.btn.white:hover     { color: var(--negroalt); }
.btn.black:hover     { color: var(--blanco); }

/* Hover: glow */
.btn.primary.hover-glow:hover   { box-shadow: var(--glow-primary);    }
.btn.secondary.hover-glow:hover { box-shadow: var(--glow-secondary);  }
.btn.terciary.hover-glow:hover  { box-shadow: var(--glow-terciary);   }
.btn.white.hover-glow:hover     { box-shadow: var(--shadow-md);   }
.btn.black.hover-glow:hover     { box-shadow: 0 8px 24px rgba(0,0,0,0.30); }

/* Outline */
.btn.border { background: transparent !important; box-shadow: none !important; }
.btn.primary.border    { border-color: var(--corporativo1);    color: var(--corporativo1); }
.btn.secondary.border  { border-color: var(--corporativo2alt); color: var(--corporativo2alt); }
.btn.terciary.border   { border-color: var(--corporativo3);    color: var(--corporativo3); }
.btn.white.border      { border-color: rgba(255,255,255,0.70); color: var(--blanco); }
.btn.black.border      { border-color: var(--negro);           color: var(--negro); }
.btn.gray.border       { border-color: var(--grisalt);         color: var(--grisalt); }
.btn.lightgray.border       { border-color: var(--grisaclarolt);         color: var(--grisaclarolt); }

.btn.primary.border:hover   { background: var(--corporativo1) !important; color: #fff !important; }
.btn.secondary.border:hover { background: var(--corporativo2) !important; color: var(--negro) !important; }
.btn.terciary.border:hover  { background: var(--corporativo3) !important; color: #fff !important; }
.btn.white.border:hover     { background: var(--blanco) !important;       color: var(--negroalt) !important; }
.btn.black.border:hover     { background: var(--negro) !important;        color: #fff !important; } 
/* Glass v3 */
.btn.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
  color: var(--blanco);
  box-shadow: var(--glass-shadow);
}
.btn.glass:hover {
  background: rgba(255,255,255,0.20);
  box-shadow: var(--glass-shadow), var(--glow-white);
  color: var(--blanco);
}

/* Formas */
.btn.round  { border-radius: var(--radius-xl); }
.btn.circle { border-radius: var(--radius-full); width: 44px; height: 44px; padding: 0; line-height: 40px; }

/* Ancho */
.btn.wfull { width: 100%; display: block; }
.btn.full  { width: 100%; display: block; }

/* Extras */
.btn.disabled { opacity: 0.45; pointer-events: none; }
.btn.nomargin { margin: 0; }
.btn.center   { margin: 0 auto; display: block; }
.btn.right    { margin-left: auto; display: block; }


.link { border-bottom: 2px solid var(--grisclaroalt);     line-height: 40px;  font-weight: 550;  display: inline-block;  position: relative;}
.link:after {     content: "";
    height: 2px;
    display: block;
    background: var(--corporativo2);
    position: absolute;

    bottom: -2px;
    left: 0;
    width: 00px; transition:
    width var(--t-base);  }
.link:hover:after {  width: 100%; }

/* =====================================================
   7. LABELS & BADGES  ·  v3
   Variantes: solid · border · glass · glow
   ===================================================== */

.label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  letter-spacing: 0.03em;
  vertical-align: middle;
  white-space: nowrap;
  transition: box-shadow var(--t-base), transform var(--t-fast);
  background: var(--negro);         color: var(--blanco); 
}

/* Sólidos */
.label.state_     { background: var(--negro);         color: var(--blanco); }
.label.primary   { background: var(--corporativo1);  color: var(--blanco); }
.label.secondary { background: var(--corporativo2);  color: var(--blanco); }
.label.terciary  { background: var(--corporativo3);  color: var(--blanco); }
.label.white     { background: var(--blanco);        color: var(--negroalt); }
.label.gray      { background: var(--grisclaro);     color: var(--grisalt); }
.label.black     { background: var(--negro);         color: var(--blanco); }
.label.success   { background: var(--color-success); color: var(--blanco); }
.label.error     { background: var(--color-error);   color: var(--blanco); }
.label.warning   { background: var(--color-warning); color: var(--blanco); }

/* Border — reborde orgánico */
.label.border { background: transparent !important; }
.label.primary.border   { border-color: var(--corporativo1);    color: var(--corporativo1); }
.label.secondary.border { border-color: var(--corporativo2alt); color: var(--corporativo2alt); }
.label.terciary.border  { border-color: var(--corporativo3);    color: var(--corporativo3); }
.label.white.border     { border-color: rgba(255,255,255,0.65); color: var(--blanco); }
.label.gray.border      { border-color: var(--grisalt);         color: var(--grisalt); }
.label.black.border     { border-color: var(--negro);           color: var(--negro); }
.label.success.border   { border-color: var(--color-success);   color: var(--color-success); }
.label.error.border     { border-color: var(--color-error);     color: var(--color-error); }
.label.warning.border   { border-color: var(--color-warning);   color: var(--color-warning); }

/* Glass — efecto cristal */
.label.glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.label.primary.glass   { background: rgba(29,131,199,0.15);  border-color: rgba(29,131,199,0.40);  color: var(--corporativo1); }
.label.secondary.glass { background: rgba(242,203,87,0.15);  border-color: rgba(242,203,87,0.40);  color: var(--corporativo2alt); }
.label.terciary.glass  { background: rgba(4,62,100,0.15);    border-color: rgba(4,62,100,0.40);    color: var(--corporativo3alt); }
.label.white.glass     { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); color: var(--blanco); }
.label.success.glass   { background: rgba(34,197,94,0.13);   border-color: rgba(34,197,94,0.40);   color: var(--color-success); }
.label.error.glass     { background: rgba(239,68,68,0.13);   border-color: rgba(239,68,68,0.40);   color: var(--color-error); }
.label.warning.glass   { background: rgba(245,158,11,0.13);  border-color: rgba(245,158,11,0.40);  color: var(--color-warning); }

/* Glow */
.label.glow.primary   { box-shadow: 0 0 10px rgba(29,131,199,0.50),  0 0 20px rgba(29,131,199,0.20); }
.label.glow.secondary { box-shadow: 0 0 10px rgba(242,203,87,0.55),  0 0 20px rgba(242,203,87,0.25); }
.label.glow.terciary  { box-shadow: 0 0 10px rgba(4,62,100,0.50),    0 0 20px rgba(4,62,100,0.20); }
.label.glow.success   { box-shadow: 0 0 10px rgba(34,197,94,0.50),   0 0 20px rgba(34,197,94,0.20); }
.label.glow.error     { box-shadow: 0 0 10px rgba(239,68,68,0.50),   0 0 20px rgba(239,68,68,0.20); }
.label.glow.warning   { box-shadow: 0 0 10px rgba(245,158,11,0.50),  0 0 20px rgba(245,158,11,0.20); }
.label.glow.white     { box-shadow: 0 0 10px rgba(255,255,255,0.40), 0 0 20px rgba(255,255,255,0.15); }

/* Tamaños */
.label.small  { padding: 3px 8px;  font-size: 11px; }
.label.large  { padding: 6px 14px; font-size: 13px; }
.label.xl     { padding: 8px 18px; font-size: 14px; }

/* Formas alternativas */
.label.square  { border-radius: var(--radius-sm); }
.label.rounded { border-radius: var(--radius-md); }

/* Dot indicador de estado */
.label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.label.glow .dot { animation: dot-pulse 2s ease-in-out infinite; }

@keyframes dot-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.35); }
}
 

.label_status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Punto de estado */
.label_status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Colores: fondo al 15% del color, texto al 100% */
.label_status.primary   { background: color-mix(in srgb, var(--corporativo1)   15%, transparent); color: var(--corporativo1);   }
.label_status.secondary { background: color-mix(in srgb, var(--corporativo2)   15%, transparent); color: var(--corporativo2);   }
.label_status.terciary  { background: color-mix(in srgb, var(--corporativo3)   15%, transparent); color: var(--corporativo3);   }
.label_status.success   { background: color-mix(in srgb, var(--color-success)  15%, transparent); color: var(--color-success);  }
.label_status.error     { background: color-mix(in srgb, var(--color-error)    15%, transparent); color: var(--color-error);    }
.label_status.warning   { background: color-mix(in srgb, var(--color-warning)  15%, transparent); color: var(--color-warning);  }
.label_status.gray      { background: color-mix(in srgb, var(--gris)           25%, transparent); color: var(--grisalt);        }
.label_status.white     { background: color-mix(in srgb, var(--blanco)         20%, transparent); color: var(--blanco);         }



/* =====================================================
   8. CARDS
   ===================================================== */

.card {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}


.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-plain {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  padding: 30px; 
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;  
  border: 1px solid var(--grisclaro) !important;
  position: relative;
}

/* Dark */
.card-dark {
  background: var(--negroalt);
  color: var(--blanco);
  border-color: rgba(255,255,255,0.07);
}

/* Glass v3 */
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  color: var(--blanco);
  padding: 30px;
}
.card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.card-glass:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-4px);
}

/* Glow */
.card-glow           { box-shadow: var(--shadow-md), var(--glow-primary); }
.card-glow:hover     { box-shadow: var(--shadow-xl), var(--glow-primary); }
.card-glow.secondary { box-shadow: var(--shadow-md), var(--glow-secondary); }

/* Estado: borde lateral */
.card.border         { border-left: 4px solid var(--corporativo1); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.card.border.state_1 { border-left-color: var(--corporativo1); }
.card.border.state_2 { border-left-color: var(--corporativo2); }
.card.border.state_3 { border-left-color: var(--corporativo3); }
.card.border.success { border-left-color: var(--color-success); }
.card.border.error   { border-left-color: var(--color-error); }
.card.border.warning { border-left-color: var(--color-warning); }

/* Extras */
.card.np, .card-glass.np, .card-plain.np    { padding: 0; }
/*
.card.p10, .card-glass.p10 , .card-plain.p10    { padding: 10px; }
.card.p15, .card-glass.p15 , .card-plain.p15    { padding: 15px; }
.card.p20, .card-glass.p20 , .card-plain.p20    { padding: 20px; }*/
.card.nohover:hover { transform: none; box-shadow: var(--shadow-md); }
.card-glass.nohover:hover { transform: none; 
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 60%); }


/* Imagen cabecera a sangre */
.card-img-top {
  height: 200px;
  overflow: hidden;
  font-size: 0;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.card-img-top img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card-img-top img { transform: scale(1.04); }


/* =====================================================
   9. FORMULARIOS
   ===================================================== */

.form-group { margin-bottom: 20px; }

label.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--negroalt); margin-bottom: 6px; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--negroalt);
  background: var(--blanco);
  border: 1.5px solid var(--grisclaro);
  border-radius: var(--radius-md);
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--corporativo1);
  box-shadow: 0 0 0 3px rgba(29,131,199,0.15);
}
input::placeholder, textarea::placeholder { color: #777777;  }
textarea { resize: vertical; min-height: 120px; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396A7A5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-hint  { font-size: 13px; color: var(--grisalt); margin-top: 5px; }
.form-error { font-size: 13px; color: var(--color-error); margin-top: 5px; }
.input_full { margin-bottom: 8px; position:relative; }
.input_full label {     margin-bottom: 8px;     line-height: 20px;     display: block; }

/* =====================================================
   10. NAVEGACIÓN
   ===================================================== */

header { position: relative; z-index: 100; padding: 8px 0;     box-sizing: border-box; }
header, header > *, #logo { transition: all 0.3s ease; }
header.fixed { position: fixed; width: 100%; left: 0; top: 0; }
header.hidescroll.scroll { top: -100px; }

#logo { line-height: 0; display: block; max-width: 100%; width: 180px; }

.trigger_menu { position: absolute; top: 10px; right: 10px; z-index: 99999; display: none; border-radius: 60px; background: var(--negro); color: var(--blanco); width: 46px; height: 46px; line-height: 46px; text-align: center; }
.trigger_menu.light { background: var(--blanco); color: var(--negro); border: 1px solid var(--grisclaro) !important; }

#navigation {   }
nav#navigation ul { list-style: none; margin: 0; padding: 0; }
nav#navigation ul li { display: inline-block; }
nav#navigation ul li a {
  font-weight: 500;
  padding: 4px 8px; 
  display: block;
  color: var(--negroalt);
  transition: color var(--t-base);
}
nav#navigation.white ul li a{ color: var(--blanco); }
nav#navigation ul li a:not(.btn):hover { color: var(--corporativo1); }

/* Submenú */
nav#navigation ul li ul {
  display: none;
  position: absolute;
  background: var(--blanco);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 8px 0;
  min-width: 200px;
}
nav#navigation ul li:hover > ul { display: block; }
nav#navigation ul li ul li   { display: block; }
nav#navigation ul li ul li a { padding: 10px 20px; }
 

/* Footer nav */
#navigationfooter { padding: 6px 0; box-sizing: border-box; }
#navigationfooter ul { text-align: left; margin: 0; list-style: none; }
#navigationfooter ul li { text-align: left; margin-bottom: 10px; display: inline-block; }
#navigationfooter ul li a {
  background: var(--negro);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 8px 12px;
  font-size: 16px;
  margin-right: 10px; 
  color: var(--blanco);
  display: block;
  box-sizing: border-box;
  transition: background var(--t-base);
}
#navigationfooter ul li a:hover { background: var(--negroalt); }
@media screen and (max-width:1030px) {
  nav#navigation { background: var(--corporativo2);         padding: 80px 20px; margin: 0!important; position: fixed; 
    top: 0; right: 0; width: 400px; max-width: 100%; height: 100vh; overflow-y: auto; z-index: 9999; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
  nav#navigation.light { background: var(--blanco); }
    nav#navigation.full {  width: 100%; }

  /* Estado abierto: entra desde la derecha */
  nav#navigation.opened { transform: translateX(0); }
 
  nav#navigation ul      { text-align: left; }
  nav#navigation ul li   { display: block; }
  nav#navigation ul li a { font-size: 22px; color: var(--blanco); }
  nav#navigation.light ul li a {  color: var(--negro); }

  #navigationfooter ul li { display: block; width: 100%; text-align: center; }

  /* Backdrop semitransparente detrás del nav */
  .nav-backdrop.opened  {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998; /* justo debajo del nav */
    animation: fadeIn 0.35s ease;
  }
}
@keyframes navBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* =====================================================
   11. UTILIDADES
   ===================================================== */

/* Display */
.block, .dblock         { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.flex-col     { flex-direction: column; }
.gap5{gap:5px} .gap10{gap:10px} .gap15{gap:15px}
.gap20{gap:20px} .gap30{gap:30px} .gap40{gap:40px}

/* Misc */
.relative     { position: relative; }
.absolute     { position: absolute; }
.pointer      { cursor: pointer; }
.wfull        { width: 100%; }
.w100         { width: 100%; }
.margin0auto  { margin: 0 auto; }
.border-box   { box-sizing: border-box; }
.nomargin     { margin: 0 !important; }
.overflow-hidden { overflow: hidden; }
.overflowvisible { overflow: visible; }

/* Bordes */
.border-radius-5   { border-radius: 5px; }
.border-radius-10  { border-radius: 10px; }
.border-radius-15  { border-radius: 15px; }
.border-radius-20  { border-radius: 20px; }
.border-radius-25  { border-radius: 25px; }
.border-radius-30  { border-radius: 30px; }
.border-radius-50  { border-radius: 50%; }
.border-radius-full { border-radius: 9999px; }

/* Padding interno de columnas */
.col.npl  { padding-left: 0;  padding-right: 20px; }
.col.npr  { padding-left: 20px; padding-right: 0; }
.col.nplr { padding-left: 0;  padding-right: 0; }
.col.nptb { padding-top: 0;   padding-bottom: 0; }

/* --- Quitar padding / margen --- */
.np  { padding: 0 !important; }   .npt { padding-top: 0 !important; }    .npb { padding-bottom: 0 !important; }
.npl { padding-left: 0 !important; } .npr { padding-right: 0 !important; }
.nm  { margin: 0 !important; }    .nmt { margin-top: 0 !important; }     .nmb { margin-bottom: 0 !important; }
.nml { margin-left: 0 !important; }  .nmr { margin-right: 0 !important; }

/* --- Padding todos lados --- */
.p3{padding:3px} .p4{padding:4px} .p5{padding:5px} .p10{padding:10px} .p15{padding:15px}
.p20{padding:20px} .p30{padding:30px} .p50{padding:50px}

/* Padding top */
.pt0{padding-top:0}    .pt5{padding-top:5px}   .pt10{padding-top:10px}  .pt15{padding-top:15px}
.pt20{padding-top:20px} .pt25{padding-top:25px} .pt30{padding-top:30px}  .pt35{padding-top:35px}
.pt40{padding-top:40px} .pt50{padding-top:50px} .pt60{padding-top:60px}  .pt70{padding-top:70px}
.pt80{padding-top:80px} .pt90{padding-top:90px} .pt100{padding-top:100px} .pt120{padding-top:120px}
.pt140{padding-top:140px} .pt160{padding-top:160px} .pt200{padding-top:200px}
/* vh */
.pt4vh{padding-top:4vh} .pt5vh{padding-top:5vh} .pt8vh{padding-top:8vh} .pt10vh{padding-top:10vh}
.pt12vh{padding-top:12vh} .pt16vh{padding-top:16vh} .pt25vh{padding-top:25vh} .pt45vh{padding-top:45vh}

/* Padding bottom */
.pb0{padding-bottom:0}    .pb5{padding-bottom:5px}   .pb10{padding-bottom:10px} .pb15{padding-bottom:15px}
.pb20{padding-bottom:20px} .pb25{padding-bottom:25px} .pb30{padding-bottom:30px} .pb35{padding-bottom:35px}
.pb40{padding-bottom:40px} .pb50{padding-bottom:50px} .pb60{padding-bottom:60px} .pb70{padding-bottom:70px}
.pb80{padding-bottom:80px} .pb90{padding-bottom:90px} .pb100{padding-bottom:100px} .pb120{padding-bottom:120px}
.pb140{padding-bottom:140px} .pb160{padding-bottom:160px}
/* vh */
.pb4vh{padding-bottom:4vh} .pb8vh{padding-bottom:8vh} .pb10vh{padding-bottom:10vh}
.pb12vh{padding-bottom:12vh} .pb16vh{padding-bottom:16vh} .pb25vh{padding-bottom:25vh}

/* Padding left/right */
.pl10{padding-left:10px} .pl20{padding-left:20px}
.pr10{padding-right:10px} .pr20{padding-right:20px}

/* Margin top */
.mt0{margin-top:0 !important}    .mt3{margin-top:3px !important}   .mt5{margin-top:5px !important}  
.mt8{margin-top:8px !important}  .mt10{margin-top:10px !important}   .mt12{margin-top:12px !important}
.mt15{margin-top:15px !important}  .mt20{margin-top:20px !important}
.mt25{margin-top:25px !important} .mt30{margin-top:30px !important}  .mt35{margin-top:35px !important}
.mt40{margin-top:40px !important} .mt50{margin-top:50px !important}  .mt60{margin-top:60px !important}
.mt80{margin-top:80px !important}

/* Margin bottom */
.mb0{margin-bottom:0 !important}  .mb3{margin-bottom:3px !important}  .mb5{margin-bottom:5px !important}   
.mb8{margin-bottom:8px !important}  .mb10{margin-bottom:10px !important}   .mb12{margin-bottom:12px !important}
.mb15{margin-bottom:15px !important} .mb20{margin-bottom:20px !important}  .mb25{margin-bottom:25px !important}
.mb30{margin-bottom:30px !important} .mb35{margin-bottom:35px !important}  .mb40{margin-bottom:40px !important}
.mb60{margin-bottom:60px !important}

/* Margin left/right */
.ml10{margin-left:10px !important} .ml15{margin-left:15px !important} .ml20{margin-left:20px !important}
.mr3{margin-right:3px !important}  .mr5{margin-right:5px !important}  .mr10{margin-right:10px !important}
.mr20{margin-right:20px !important}

/* Min-height */
.minheight50vh  { min-height: 50vh;  box-sizing: border-box; }
.minheight75vh  { min-height: 75vh;  box-sizing: border-box; }
.minheight100vh { min-height: 100vh; box-sizing: border-box; }

/* Listas */
ul.no-dots { list-style: none; margin: 0; padding: 0; }
ul.list-border li { border-bottom: 1px solid var(--grisclaro); padding: 12px 0; }
ul.list-border li:last-child { border-bottom: none; }

/* Separador visual v3 */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--grisclaro), transparent);
  border: none;
  margin: 40px 0;
}
.divider.dark {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
}

/* Aspect ratios */
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-4-3  { aspect-ratio: 4/3; }
.aspect-1-1  { aspect-ratio: 1; }

/* Visibilidad */
.pchide      { display: none; }
.tablethide   { }
.smartphonehide { }

/* =====================================================
   12. ANIMACIONES
   ===================================================== */

@keyframes fadeIn     { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-28px);} to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-28px);} to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(0.93); }      to { opacity: 1; transform: scale(1); } }
@keyframes float      { 0%,100% { transform: translateY(0); }    50% { transform: translateY(-8px); } }
@keyframes pulse      { 0%,100% { opacity: 1; }                  50% { opacity: 0.6; } }
@keyframes spin       { from { transform: rotate(0deg); }         to { transform: rotate(360deg); } }
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(29,131,199,0.30); }
  50%      { box-shadow: 0 0 25px rgba(29,131,199,0.60); }
}

.animate-fade-in   { animation: fadeIn     0.6s ease both; }
.animate-fade-up   { animation: fadeInUp   0.6s ease both; }
.animate-fade-down { animation: fadeInDown 0.6s ease both; }
.animate-fade-left { animation: fadeInLeft 0.6s ease both; }
.animate-scale-in  { animation: scaleIn    0.5s ease both; }
.animate-float     { animation: float      3s   ease-in-out infinite; }
.animate-pulse     { animation: pulse      2s   ease-in-out infinite; }
.animate-spin      { animation: spin       1s   linear     infinite; }
.animate-glow      { animation: glow-pulse 2.5s ease-in-out infinite; }

.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; }


/* =====================================================
   13. RESPONSIVE — General
   (breakpoints de grid → sección 4b)
   ===================================================== */

/* Clases especiales de hero */  
@media screen and (max-width: 1030px) {
  a.trigger_menu  { display: block; }
  .tablethide      { display: none !important; }
  #logo           { max-width: 200px; }  
}

@media screen and (max-width: 760px) { 
}

@media screen and (max-width: 480px) {
  .smartphonehide   { display: none !important; } 
  .btn.wfull-mobile { width: 100%; display: block; }
}


/* TAREAS PENDIENTES PARA MEJORAR */

.img_height {    }
.img_height img { object-fit: cover; height: 100%; width: 100%;  }

/*TABLAS*/
table { border-collapse: collapse!important; width: 100% }
table td, table th { border: 1px solid #ddd; padding: 4px }
table.table-responsive tr:nth-child(even) { background-color: var(--grisclaro) }
table.table-responsive tr:hover { background-color: var(--gris); }
table th { padding-top: 12px; padding-bottom: 12px; text-align: left }
.table-striped { border-collapse: collapse; width: 100% }
.table-striped th, .table-striped  td { padding: 0.25rem;  border: 1px solid var(--gris);  
  max-width: 340px }

  .table-responsive td {  vertical-align: middle; }
.dataTables_length select {  width: 90px;  margin: 0 20px; }
div.dataTables_filter {   text-align: right; margin-bottom: 14px; }
.dataTables_length, .dataTables_filter { width: 50%; display:inline-block; }
.dataTables_wrapper .dataTables_filter input {  max-width: 180px; margin-left: 20px;}
.dataTables_wrapper .dataTables_filter  label {    font-size: 15px;  font-weight: bold; }
div.dataTables_info {    margin-top: 14px; }
.dataTable td {  vertical-align: middle; }
.dataTables_paginate a{ border: 1px solid #cccccc;
    background: #e9e9e9;
    padding: 2px 10px;
    margin-right: 5px;
    border-radius: 10px;
    color: #000;
    min-width: 40px;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    cursor: pointer;  }

    .dataTables_paginate a:hover { background: #444; color: var(--blanco)  }


/* MODALES Y ALERTAS */
.modal_overlayer, .modal_overlayer * { -webkit-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear }
.modal_overlayer { position: fixed; top: -100vh; left: 0; z-index: 10000; width: 100%; min-height: 100vh; height: 100vh; max-height: 100vh; visibility: hidden; opacity: 0;  overflow-y: scroll; background-repeat: no-repeat; background-size: cover; background-position: center }
.modal_overlayer:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; opacity: 1 }
.modal_overlayer.image:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--corporativo1); opacity: 0.75 }
.modal_overlayer:before { background: rgba(0, 0, 0, 0.7) }
.modal_overlayer.open { visibility: visible; opacity: 1;   top: 0;  }
.modal_overlayer.open:before {  top: 0;  }
.modal_cont { margin: 80px auto; position: relative; width: 90%; box-sizing: border-box }
.close_modal { padding: 0; text-align: center; width: 55px; height: 55px; line-height: 55px; font-size: 40px; box-sizing: border-box; position: absolute; right: 10px; top: 10px; border-radius: 50% }
.close_modal.white { color: white }
.close_modal:hover, .close_modal:focus { background: var(--corporativo1) }

div#notificacion_flotante { position: fixed; bottom: 00px; z-index: 9999; left: 0; width: 100%;

padding: 20px; }

/* === Alerta legacy (icono grande, fondo sólido) === */
.alerta { background: #444; color: #fff; position: relative; padding: 20px; text-align: center; font-size: 20px; box-sizing: border-box; width: 100%; font-weight: 400 }
.alerta-ok  { background: var(--color-success, #009713) }
.alerta-error { background: var(--color-error, #970000) }
.alerta i { position: absolute; left: 30px; font-size: 90px; width: 115px; bottom: 5px; background: #444; border-radius: 50%; height: 115px; line-height: 115px }
.alerta-ok i  { background: var(--color-success, #009713) }
.alerta-error i { background: var(--color-error, #970000) }

/* === Alert (nuevo estilo: borde izquierdo + fondo suave) === */
.alert {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--negro, #212121);
  background: var(--grisclaroalt, #ecf0ef);
  color: var(--negroalt, #212121);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}
.alert i { display:inline-block;  }
.alert.success, .alert-success, .alert-ok {
  border-color: var(--color-success, #22c55e);
  background: #f0fdf4;
  color: var(--color-success, #22c55e);
}
.alert.error, .alert-error {
  border-color: var(--color-error, #ef4444);
  background: #fef2f2;
  color: var(--color-error, #ef4444);
}
.alert.primary, .alert-primary {
  border-color: var(--corporativo1, #5dce72);
  background: #f4fef6;
  color: var(--corporativo1, #0e1c2f);
}
.alert.secondary, .alert-secondary {
  border-color: var(--corporativo2, #0e1c2f);
  background: #f0f3f7;
  color: var(--corporativo2, #0e1c2f);
}


/*Clases de parpadeo con colores coportativos */
@keyframes parpadeo {
    0% { color: var(--blanco);  }
    50% { color: #FFFFFF56;  }
    100% {  color: #ffffff; }
}
.parpadeo { animation: parpadeo 1s infinite; }
@keyframes parpadeo1 {
    0% { color: var(--blanco);  }
    50% { color: var(--corporativo1);  }
    100% {  color: var(--blanco); }
}
.parpadeo1 { animation: parpadeo1 1s infinite; }
@keyframes parpadeo2 {
    0% { color: var(--blanco);  }
    50% { color: var(--corporativo2);  }
    100% {  color: var(--blanco); }
}
.parpadeo2 { animation: parpadeo2 1s infinite; }
@keyframes parpadeo3 {
    0% { color: var(--blanco);  }
    50% { color: var(--corporativo3);  }
    100% {  color: var(--blanco); }
}
.parpadeo3 { animation: parpadeo3 1s infinite; }