/* =================================================================
ANDINA.CSS – VERSIÓN UNIFICADA
Fusiona estilos del sistema de diseño base con los estilos
del especial Elecciones 2026.
Última actualización: 2026
================================================================= */

/* ----------------------------------------------------------------
1. GOOGLE FONTS
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ----------------------------------------------------------------
2. UTILITY FONT CLASSES
---------------------------------------------------------------- */
.serif,
.roboto-serif {
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100, "GRAD" 0;
}
.san-serif,
.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.ibm-condensed-thin {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 100;
}
.ibm-condensed-light {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 300;
}
.ibm-condensed-regular {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 400;
}
.ibm-condensed-medium {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 500;
}
.ibm-condensed-semibold {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 600;
}
.ibm-condensed-bold {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 700;
}

/* ----------------------------------------------------------------
3. CSS CUSTOM PROPERTIES (root unificado)
---------------------------------------------------------------- */
:root {
  /* Familias tipográficas */
  --font-serif: "Roboto Serif";
  --font-san-serif: "Roboto";
  --font-condensed: "IBM Plex Sans Condensed", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Tamaños de fuente fluidos */
  --font-size-4xlarge: clamp(1.0rem, 1.7rem + 1vw, 1.60rem + 0.2vw);
  --font-size-3xlarge: clamp(2.5rem, 1.6rem + 1vw, 1.50rem + 0.2vw);
  --font-size-2xlarge: clamp(1.0rem, 1.5rem + 1vw, 1.40rem + 0.2vw);
  --font-size-xlarge: clamp(1.0rem, 1.4rem + 1vw, 1.30rem + 0.2vw);
  --font-size-large: clamp(1.3rem, 1.3rem + 1vw, 1.20rem + 0.2vw);
  --font-size-medium: clamp(1.2rem, 1.3rem + 1vw, 1.00rem + 0.2vw);
  --font-size-small: clamp(1.1rem, 1.3rem + 1vw, 0.90rem + 0.2vw);
  --font-size-xsmall: clamp(1.1rem, 1.3rem + 1vw, 0.80rem + 0.2vw);
  --font-size-2xsmall: clamp(1.1rem, 0.9rem + 1vw, 0.70rem + 0.2vw);
  --font-size-3xsmall: clamp(1.0rem, 0.9rem + 1vw, 0.60rem + 0.2vw);
  --font-size-4xsmall: clamp(0.8rem, 0.7rem + 1vw, 0.50rem + 0.2vw);

  /* Line-heights fluidos */
  --lineheight-4xlarge: clamp(1rem, 2.0rem + 1vw, 2.2rem + 0.2vw);
  --lineheight-3xlarge: clamp(3rem, 2rem + 1vw, 3rem + 3vw);
  --lineheight-2xlarge: clamp(1rem, 1.8rem + 1vw, 2.0rem + 0.2vw);
  --lineheight-xlarge: clamp(1rem, 1.7rem + 1vw, 1.9rem + 0.2vw);
  --lineheight-large: clamp(1rem, 1.6rem + 1vw, 1.8rem + 0.2vw);
  --lineheight-medium: clamp(1rem, 1.4rem + 1vw, 1.7rem + 0.2vw);
  --lineheight-small: clamp(1rem, 1.6rem + 1vw, 1.6rem + 0.2vw);
  --lineheight-xsmall: clamp(1rem, 1.3rem + 1vw, 1.5rem + 0.2vw);
  --lineheight-2xsmall: clamp(1rem, 1.2rem + 1vw, 1.4rem + 0.2vw);
  --lineheight-3xsmall: clamp(1.4rem, 1.6rem + 1vw, 1.1rem + 0.2vw);
  --lineheight-4xsmall: clamp(.8rem, .7rem + .7vw, 0.4rem + 0.2vw);

  /* Márgenes y padding fluidos */
  --margenes-4xlarge: calc(2.5% + 55px);
  --margenes-3xlarge: calc(2.5% + 50px);
  --margenes-2xlarge: calc(2.5% + 45px);
  --margenes-xlarge: calc(1.8% + 40px);
  --margenes-large: calc(1.6% + 35px);
  --margenes-medium: calc(1.5% + 30px);
  --margenes-small: calc(0.8% + 25px);
  --margenes-xsmall: calc(0.5% + 20px);
  --margenes-2xsmall: calc(0.1% + 15px);
  --margenes-3xsmall: calc(0.1% + 10px);
  --margenes-4xsmall: calc(0.1% + 5px);

  /* Gap fijo para grillas */
  --margenes-gap-4xlarge: 55px;
  --margenes-gap-3xlarge: 50px;
  --margenes-gap-2xlarge: 45px;
  --margenes-gap-xlarge: 40px;
  --margenes-gap-large: 35px;
  --margenes-gap-medium: 30px;
  --margenes-gap-small: 25px;
  --margenes-gap-xsmall: 20px;
  --margenes-gap-2xsmall: 15px;
  --margenes-gap-3xsmall: 10px;
  --margenes-gap-4xsmall: 5px;

  /* Border-radius */
  --border-radius-4xlarge: calc(1.1% + 22px);
  --border-radius-3xlarge: calc(1.0% + 20px);
  --border-radius-2xlarge: calc(0.9% + 18px);
  --border-radius-xlarge: calc(0.8% + 16px);
  --border-radius-large: calc(0.7% + 14px);
  --border-radius-medium: calc(0.6% + 12px);
  --border-radius-small: calc(0.5% + 10px);
  --border-radius-xsmall: calc(0.4% + 8px);
  --border-radius-2xsmall: calc(0.3% + 6px);
  --border-radius-3xsmall: calc(0.2% + 4px);
  --border-radius-4xsmall: calc(0.1% + 2px);

  /* Paleta completa de colores */
  --col-magenta: #ff4077;
  --col-fucsia: #da2e58;
  --col-rojo: #d32f2f;
  --col-marron: #6b3b2a;
  --col-pardo: #8b5e3c;
  --col-greige: #aa9280;
  --col-crema: #f3ede6;
  --col-pino: #1c381a;
  --col-salvia: #6f7467;
  --col-naranja: #ff812e;
  --col-anaranjado: #ffb422;
  --col-mostaza: #ffdb00;
  --col-limon: #91f369;
  --col-manzana: #74b52e;
  --col-verde: #00a651;
  --col-esmeralda: #029274;
  --col-turquesa: #31d4c5;
  --col-celeste: #54bcf6;
  --col-cielo: #087cbf;
  --col-azul: #064878;
  --col-indigo: #3f3f7f;
  --col-purpura: #a142b3;
  --col-violeta: #7445be;
  --col-noche: #1a2630;
  --col-azulado: #2f475e;
  --col-metal: #4a6585;
  --col-acero: #788ca3;
  --col-aluminio: #a5b2c2;
  --col-plateado: #d1d8e0;
  --col-humo: #e7ebee;
  --col-blanco: #ffffff;
  --col-gris05: #f7f7f7;
  --col-gris10: #e7e7e7;
  --col-gris20: #cfd0d0;
  --col-gris30: #b7b8b9;
  --col-gris40: #9fa1a2;
  --col-gris50: #87898b;
  --col-gris60: #6f7274;
  --col-gris70: #575a5d;
  --col-gris80: #3e4246;
  --col-gris90: #262b2f;
  --col-negro: #000000;
  --col-fuente: #212529;
  --col-oscuro: #262b2f;
  --col-grisoscuro: #404449;
  --col-grismedio: #5c6368;
  --col-grisclaro: #b6babf;
  --col-gristenue: #ebebed;

  /* Alias semánticos para el simulador/especial elecciones */
  --red: var(--col-rojo);
  --blue: #0046b4;
  --blue-dark: #003494;
  --blue-light: #e8f0ff;
  --green: var(--col-verde);
  --green-light: #dcfce7;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --gray-100: var(--col-gris10);
  --gray-200: var(--col-gris20);
  --gray-300: var(--col-gris30);
  --gray-400: var(--col-gris40);
  --gray-500: var(--col-gris50);
  --gray-700: var(--col-gris70);
  --gray-800: var(--col-gris80);
  --gray-900: var(--col-gris90);

  /* Transparencias */
  --trans-10: #00000010;
  --trans-20: #00000020;
  --trans-30: #00000030;
  --trans-40: #00000040;
  --trans-50: #00000050;
  --trans-60: #00000060;
  --trans-70: #00000070;
  --trans-80: #00000080;
  --trans-90: #00000090;

  /* Filtros SVG – colores temáticos */
  --svg-magenta: invert(30%) sepia(100%) saturate(1000%) hue-rotate(300deg) brightness(100%) contrast(100%);
  --svg-fucsia: invert(25%) sepia(100%) saturate(1000%) hue-rotate(310deg) brightness(100%) contrast(100%);
  --svg-rojo: invert(13%) sepia(100%) saturate(1000%) hue-rotate(320deg) brightness(150%) contrast(110%);
  --svg-marron: invert(13%) sepia(100%) saturate(1000%) hue-rotate(376deg) brightness(150%) contrast(110%);
  --svg-pardo: invert(20%) sepia(100%) saturate(1000%) hue-rotate(373deg) brightness(122%) contrast(71%);
  --svg-greige: invert(37%) sepia(100%) saturate(1000%) hue-rotate(343deg) brightness(196%) contrast(31%);
  --svg-crema: invert(110%) sepia(100%) saturate(847%) hue-rotate(298deg) brightness(110%) contrast(85%);
  --svg-pino: invert(22%) sepia(100%) saturate(1000%) hue-rotate(427deg) brightness(48%) contrast(86%);
  --svg-salvia: invert(16%) sepia(100%) saturate(1000%) hue-rotate(393deg) brightness(122%) contrast(29%);
  --svg-naranja: invert(16%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(300%) contrast(100%);
  --svg-anaranjado: invert(22%) sepia(100%) saturate(500%) hue-rotate(350deg) brightness(300%) contrast(100%);
  --svg-mostaza: invert(23%) sepia(100%) saturate(500%) hue-rotate(370deg) brightness(300%) contrast(100%);
  --svg-limon: invert(22%) sepia(142%) saturate(315%) hue-rotate(406deg) brightness(329%) contrast(86%);
  --svg-manzana: invert(16%) sepia(102%) saturate(634%) hue-rotate(401deg) brightness(284%) contrast(110%);
  --svg-verde: invert(14%) sepia(94%) saturate(207%) hue-rotate(428deg) brightness(308%) contrast(154%);
  --svg-esmeralda: invert(12%) sepia(100%) saturate(205%) hue-rotate(474deg) brightness(315%) contrast(160%);
  --svg-turquesa: invert(17%) sepia(96%) saturate(204%) hue-rotate(484deg) brightness(301%) contrast(160%);
  --svg-celeste: invert(16%) sepia(100%) saturate(200%) hue-rotate(520deg) brightness(310%) contrast(160%);
  --svg-cielo: invert(12%) sepia(100%) saturate(201%) hue-rotate(514deg) brightness(312%) contrast(177%);
  --svg-azul: invert(8%) sepia(100%) saturate(463%) hue-rotate(524deg) brightness(251%) contrast(99%);
  --svg-indigo: invert(15%) sepia(54%) saturate(274%) hue-rotate(555deg) brightness(222%) contrast(182%);
  --svg-purpura: invert(16%) sepia(70%) saturate(307%) hue-rotate(244deg) brightness(232%) contrast(166%);
  --svg-violeta: invert(17%) sepia(78%) saturate(275%) hue-rotate(217deg) brightness(212%) contrast(180%);
  --svg-noche: invert(8%) sepia(437%) saturate(35%) hue-rotate(522deg) brightness(347%) contrast(223%);
  --svg-azulado: invert(8%) sepia(458%) saturate(90%) hue-rotate(527deg) brightness(373%) contrast(168%);
  --svg-metal: invert(8%) sepia(536%) saturate(113%) hue-rotate(532deg) brightness(423%) contrast(130%);
  --svg-acero: invert(10%) sepia(556%) saturate(89%) hue-rotate(535deg) brightness(447%) contrast(105%);
  --svg-aluminio: invert(11%) sepia(515%) saturate(55%) hue-rotate(535deg) brightness(555%) contrast(78%);
  --svg-blanco: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(300%) contrast(300%);
  --svg-gris05: invert(96%) saturate(0%);
  --svg-gris10: invert(91%) saturate(0%);
  --svg-gris20: invert(81%) saturate(0%);
  --svg-gris30: invert(72%) saturate(0%);
  --svg-gris40: invert(63%) saturate(0%);
  --svg-gris50: invert(54%) saturate(0%);
  --svg-gris60: invert(42%) saturate(0%);
  --svg-gris70: invert(35%) saturate(0%);
  --svg-gris80: invert(26%) saturate(0%);
  --svg-gris90: invert(17%) saturate(0%);
  --svg-plateado: invert(11%) sepia(510%) saturate(24%) hue-rotate(535deg) brightness(609%) contrast(103%);
  --svg-humo: invert(11%) sepia(510%) saturate(11%) hue-rotate(535deg) brightness(635%) contrast(118%);
  --svg-fuente: invert(5%) sepia(100%) saturate(100%) hue-rotate(81deg) brightness(100%) contrast(79%);
  --svg-oscuro: invert(7%) sepia(495%) saturate(29%) hue-rotate(538deg) brightness(335%) contrast(153%);
  --svg-grisoscuro: invert(7%) sepia(154%) saturate(159%) hue-rotate(182deg) brightness(128%) contrast(61%);
  --svg-grismedio: invert(14%) sepia(72%) saturate(154%) hue-rotate(159deg) brightness(116%) contrast(37%);
  --svg-grisclaro: invert(46%) sepia(76%) saturate(108%) hue-rotate(161deg) brightness(201%) contrast(20%);
  --svg-gristenue: invert(52%) sepia(92%) saturate(99%) hue-rotate(146deg) brightness(203%) contrast(88%);
}

/* ----------------------------------------------------------------
4. RESET / BASE
---------------------------------------------------------------- */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  color: var(--col-fuente);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-san-serif);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

main {
  margin: var(--margenes-4xsmall) 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

svg {
  width: 100%;
}
hr {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--col-grisclaro) !important;
  border: none;
}

a {
  color: var(--col-fuente) !important;
  text-decoration: none;
}
a:hover {
  color: var(--col-cielo);
  text-decoration: none;
}
a:link {
  color: var(--col-cielo);
}
a:active {
  color: var(--col-cielo);
}
.link-text{
  color: #0c4f8a !important;
  text-decoration: underline;
}
/* ----------------------------------------------------------------
5. TIPOGRAFÍA
---------------------------------------------------------------- */
h1 {
  font-size: var(--font-size-4xlarge);
  line-height: var(--lineheight-xlarge);
  margin-bottom: var(--margenes-4xsmall);
  font-weight: 400;
  display: block;
}
h2 {
  font-size: var(--font-size-3xlarge);
  line-height: var(--lineheight-3xlarge);
  font-weight: 400;
  display: block;
  font-family: var(--font-serif);
}
h3 {
  font-size: var(--font-size-3xlarge);
  line-height: var(--lineheight-3xlarge);
  margin-bottom: var(--margenes-4xsmall);
  font-weight: 700;
  font-family: var(--font-serif);
  display: block;
}
h4 {
  font-size: var(--font-size-3xlarge);
  line-height: var(--lineheight-medium);
  margin-bottom: var(--margenes-4xsmall);
  font-weight: 600;
  display: block;
}
h5 {
  font-size: var(--font-size-large);
  line-height: var(--lineheight-small);
  margin-bottom: var(--margenes-4xsmall);
  font-weight: 400;
  display: block;
}
h6 {
  font-size: var(--font-size-medium);
  line-height: var(--lineheight-2xsmall);
  margin-bottom: var(--margenes-4xsmall);
  font-weight: 400;
  display: block;
}

/* h1 especial hero (parallax) */
h1.titulo {
  font-size: 6vh;
  font-weight: 700;
  line-height: normal;
  color: var(--col-blanco) !important;
  text-shadow: 0 1px 0 #848484, 0 2px 0 #8e8e8e, 0 3px 0 #8b8b8b, 0 4px 0 #979797, 0 5px 0 #616161, 0 6px 1px rgb(0 0 0 / 26%), 0 0 5px rgb(0 0 0 / 35%), 0 1px 3px rgb(0 0 0 / 57%), 0 3px 5px rgb(0 0 0 / 59%), 0 5px 10px rgb(0 0 0 / 56%), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

strong {
  font-size: var(--font-size-2xlarge);
  line-height: var(--lineheight-xsmall);
  margin-bottom: var(--margenes-2xsmall);
  font-weight: 600;
  display: block;
}
p {
  font-size: var(--font-size-large);
  line-height: var(--lineheight-large);
  margin-bottom: var(--margenes-small);
  font-weight: 400;
  display: block;
}
small {
  font-size: var(--font-size-xsmall);
  line-height: var(--lineheight-3xsmall);
  font-weight: 400;
  display: block;
}
em {
  font-size: var(--font-size-3xsmall);
  line-height: var(--lineheight-3xsmall);
  margin-bottom: var(--margenes-3xsmall);
  font-weight: 400;
  font-style: normal;
  display: block;
}
del {
  font-size: var(--font-size-4xsmall);
  line-height: var(--lineheight-4xsmall);
  margin-bottom: var(--margenes-4xsmall);
  font-weight: 400;
  font-style: normal;
  display: block;
  text-decoration: none;
}
span {
  font-size: var(--font-size-4xsmall);
  line-height: var(--lineheight-3xsmall);
  display: block;
}
i {
  font-family: var(--font-serif);
}
sub {
  line-height: 140%;
  display: block;
}
mark {
  background: #ffc60054;
  padding: 0 var(--margenes-4xsmall);
  border-radius: var(--margenes-4xsmall);
  display: inline-block;
}

/* ----------------------------------------------------------------
6. BOTONES
---------------------------------------------------------------- */
button {
  background: var(--col-gristenue);
  color: var(--col-blanco);
  padding: var(--margenes-3xsmall) var(--margenes-2xsmall);
  border-block-color: var(--col-rojo);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  text-transform: uppercase;
  font-size: var(--font-size-3xsmall);
}

/* ----------------------------------------------------------------
7. FIGURE / IMÁGENES
---------------------------------------------------------------- */
figure {
  position: relative;
}
figure figcaption {
  font-size: var(--font-size-4xsmall);
  line-height: var(--lineheight-4xsmall);
  padding: var(--margenes-4xsmall) var(--margenes-3xsmall);
  width: 100%;
  z-index: 1;
  background: var(--trans-40);
  color: var(--col-blanco);
  position: absolute;
  bottom: 0;
}

figure img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--col-grisclaro);
}
figure img[alt]::after {
  content: attr(alt);
  filter: var(--svg-blanco);
  background-image: url("https://portal.andina.pe/edpespeciales/img/andina.svg");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-small);
  font-family: "Helvetica";
  font-weight: 300;
  line-height: 120px;
  text-align: center;
}

/* Foto con ratio */
figure.foto {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--margenes-3xsmall);
  background: var(--col-grisclaro);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
figure.foto::before {
  content: "";
  display: block;
  padding-top: 100%;
  width: 100%;
  -webkit-filter: blur(6px) brightness(0.7);
  filter: blur(6px) brightness(0.7);
  background-image: var(--background);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
figure.foto img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--col-grisclaro);
}
figure.foto figcaption.credito-foto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
figure.foto figcaption.credito-foto::before {
  content: url("https://infodesign.es/img/regular-foto.svg");
  width: 23px;
  display: inline-block;
  margin-right: var(--margenes-4xsmall);
  filter: var(--svg-blanco);
}
figure.foto i {
  color: #fffffff5;
  background: var(--trans-20);
  padding: 0 var(--margenes-4xsmall);
  border-radius: var(--margenes-4xsmall);
  z-index: 1;
  position: absolute;
}

/* Variantes de ratio de foto */
figure.foto.foto200::before {
  padding-top: 200%;
}
figure.foto.foto190::before {
  padding-top: 190%;
}
figure.foto.foto180::before {
  padding-top: 180%;
}
figure.foto.foto170::before {
  padding-top: 170%;
}
figure.foto.foto160::before {
  padding-top: 160%;
}
figure.foto.foto150::before {
  padding-top: 150%;
}
figure.foto.foto140::before {
  padding-top: 140%;
}
figure.foto.foto130::before {
  padding-top: 130%;
}
figure.foto.foto120::before {
  padding-top: 120%;
}
figure.foto.foto110::before {
  padding-top: 110%;
}
figure.foto.foto100::before {
  padding-top: 100%;
}
figure.foto.foto90::before {
  padding-top: 90%;
}
figure.foto.foto80::before {
  padding-top: 80%;
}
figure.foto.foto70::before {
  padding-top: 70%;
}
figure.foto.foto60::before {
  padding-top: 60%;
}
figure.foto.foto50::before {
  padding-top: 50%;
}
figure.foto.foto40::before {
  padding-top: 40%;
}
figure.foto.foto30::before {
  padding-top: 30%;
}
figure.foto.foto20::before {
  padding-top: 20%;
}
figure.foto.foto10::before {
  padding-top: 10%;
}

/* Aspect-ratio helpers */
.f1x1 {
  aspect-ratio: 1/1;
}
.f2x1 {
  aspect-ratio: 2/1;
}
.f1x2 {
  aspect-ratio: 1/2;
}
.f3x1 {
  aspect-ratio: 3/1;
}
.f1x3 {
  aspect-ratio: 1/3;
}
.f4x1 {
  aspect-ratio: 4/1;
}
.f1x4 {
  aspect-ratio: 1/4;
}
.f3x2 {
  aspect-ratio: 3/2;
}
.f2x3 {
  aspect-ratio: 2/3;
}
.f3x4 {
  aspect-ratio: 3/4;
}
.f4x3 {
  aspect-ratio: 4/3;
}
.f4x5 {
  aspect-ratio: 4/5;
}
.f7x4 {
  aspect-ratio: 7/4;
}
.f5x4 {
  aspect-ratio: 5/4;
}
.f6x4 {
  aspect-ratio: 6/4;
}
.f6x3 {
  aspect-ratio: 6/3;
}
.f4x6 {
  aspect-ratio: 4/6;
}
.f9x16 {
  aspect-ratio: 9/16;
}
.f16x9 {
  aspect-ratio: 16/9;
}

/* Powerclip */
figure.powerclip img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--col-blanco);
}

/* ----------------------------------------------------------------
8. VIDEO
---------------------------------------------------------------- */
.video-container {
  position: relative;
  padding-bottom: 56.25% !important;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-facebook {
  position: relative;
  padding-bottom: 53% !important;
  height: 0;
  overflow: hidden;
}
.video-facebook iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-poster {
  position: relative;
  width: 100%;
  height: 0;
  background-color: var(--col-grisoscuro);
  border-radius: var(--margenes-3xsmall);
  overflow: hidden;
  border: 1px solid var(--col-grisclaro);
  padding-top: 56%;
}
.video-poster iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.video-poster button {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
}
.video-poster button::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  background: var(--col-rojo);
  border-radius: var(--margenes-xsmall);
  -webkit-transition: border-color 300ms;
  transition: border-color 300ms;
}
.video-poster button::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -25px 0 0 -13px;
  border-left: 40px solid var(--col-blanco);
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  -webkit-transition: border-color 300ms;
  transition: border-color 300ms;
}
.video-poster button:hover::before,
.video-poster button:focus::before {
  background: #c6282887;
}
.video-poster button:hover::after,
.video-poster button:focus::after {
  border-left-color: #ffffff87;
}
.video-active button {
  opacity: 0;
  height: 0;
}

/* ----------------------------------------------------------------
9. BLOCKQUOTE
---------------------------------------------------------------- */
blockquote {
  position: relative;
  margin: var(--margenes-large) var(--margenes-xsmall);
  padding: var(--margenes-xsmall);
  font-family: var(--font-serif), Georgia, "Times New Roman", Times, serif;
  line-height: var(--lineheight-xlarge);
  font-size: var(--font-size-xlarge);
  color: var(--col-azulado);
  font-style: italic;
  font-weight: 200;
  border: none;
}
blockquote::before,
blockquote::after {
  content: " ";
  position: absolute;
  top: 0;
  width: 0.75em;
  height: 100%;
  border: 1px solid var(--col-azulado);
}
blockquote::before {
  left: -0.75em;
  border-right: 0;
}
blockquote::after {
  right: -0.75em;
  border-left: 0;
}

/* ----------------------------------------------------------------
10. SEARCH
---------------------------------------------------------------- */
.search {
  border-radius: var(--margenes-4xsmall);
  overflow: hidden;
  border: 1px solid var(--col-fuente);
}
.search form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.search form button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0;
  background: var(--col-blanco);
  border: none;
}
.search form button:hover {
  background: var(--col-gris10);
}
.search form button svg {
  width: 20px;
  height: 20px;
  filter: var(--svg-oscuro);
}
.search form input {
  margin: 0;
  padding: var(--margenes-3xsmall);
  border: 0;
  outline: none;
  font-size: var(--font-size-3xsmall);
  width: 100%;
}

/* ----------------------------------------------------------------
11. CONTENEDORES
---------------------------------------------------------------- */
.container {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
.container-full {
  max-width: 100% !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-2xlarge {
  max-width: 1920px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-xlarge {
  max-width: 1600px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-large {
  max-width: 1440px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-medium {
  max-width: 1366px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-small {
  max-width: 1200px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-xsmall {
  max-width: 1024px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-2xsmall {
  max-width: 800px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}
.container-3xsmall {
  max-width: 603px !important;
  width: 100% !important;
  margin: auto;
  display: block;
  padding: 0 var(--margenes-3xsmall);
}

/* ----------------------------------------------------------------
12. GRILLAS / COLUMNAS
---------------------------------------------------------------- */
.columnas {
  display: -ms-grid;
  display: grid;
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-6 {
  grid-template-columns: repeat(6, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-12 {
  grid-template-columns: repeat(12, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-13 {
  grid-template-columns: repeat(13, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-14 {
  grid-template-columns: repeat(14, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-15 {
  grid-template-columns: repeat(15, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-16 {
  grid-template-columns: repeat(16, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-17 {
  grid-template-columns: repeat(17, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-18 {
  grid-template-columns: repeat(18, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-19 {
  grid-template-columns: repeat(19, 1fr);
  row-gap: var(--margenes-gap-xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.col-20 {
  grid-template-columns: repeat(20, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-21 {
  grid-template-columns: repeat(21, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-22 {
  grid-template-columns: repeat(22, 1fr);
  row-gap: var(--margenes-gap-2xsmall);
  column-gap: var(--margenes-gap-2xsmall);
}
.col-23 {
  grid-template-columns: repeat(23, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-24 {
  grid-template-columns: repeat(24, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-25 {
  grid-template-columns: repeat(25, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-26 {
  grid-template-columns: repeat(26, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-27 {
  grid-template-columns: repeat(27, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-28 {
  grid-template-columns: repeat(28, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-29 {
  grid-template-columns: repeat(29, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-30 {
  grid-template-columns: repeat(30, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-31 {
  grid-template-columns: repeat(31, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-32 {
  grid-template-columns: repeat(32, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-33 {
  grid-template-columns: repeat(33, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-34 {
  grid-template-columns: repeat(34, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}
.col-35 {
  grid-template-columns: repeat(35, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-4xsmall);
}

.una-columna {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.dos-columna {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.tres-columna {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.cuatro-columna {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.cinco-columna {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: var(--margenes-gap-4xsmall);
  column-gap: var(--margenes-gap-xsmall);
}
.grid-span2 {
  grid-column: span 2;
}

/* ----------------------------------------------------------------
13. DEGRADADOS
---------------------------------------------------------------- */
.degradeblack {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background: -webkit-linear-gradient(bottom, rgba(3, 0, 0, 0.71) 10%, rgba(3, 0, 0, 0.18) 40%, rgba(3, 0, 0, 0) 70%, rgba(8, 0, 0, 0) 100%);
  background: linear-gradient(0deg, rgba(3, 0, 0, 0.71) 10%, rgba(3, 0, 0, 0.18) 40%, rgba(3, 0, 0, 0) 70%, rgba(8, 0, 0, 0) 100%);
}
.degrade-botwh {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 84%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 84%);
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 300px;
  bottom: 0;
}
.degrade-topwh {
  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 84%);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 84%);
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 300px;
  top: 0;
}

/* ----------------------------------------------------------------
14. COMPONENTES – NAVEGACIÓN
---------------------------------------------------------------- */
nav ul {
  line-height: inherit;
}
nav .brand-logo {
  position: initial;
}

.scrollnav {
  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.scrollnav.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  opacity: 1;
  top: 0;
}

.navbar-fixed {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  left: 0;
  height: 55px !important;
  line-height: 55px !important;
  z-index: 2;
  display: block;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* ----------------------------------------------------------------
15. COMPONENTES – CARDS
---------------------------------------------------------------- */
.card {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.card .card-content {
  padding: 0 var(--margenes-2xsmall);
}
.card .card-content .card-title {
  font-family: var(--font-serif), serif;
  line-height: var(--lineheight-large);
  margin-bottom: var(--margenes-4xsmall);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.card .card-reveal .card-title {
  font-family: var(--font-serif), serif;
  font-weight: 600;
  line-height: var(--lineheight-2xsmall);
  margin-bottom: var(--margenes-4xsmall);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.card .card-reveal ul li {
  margin-bottom: var(--margenes-4xsmall);
  font-size: var(--font-size-4xsmall);
  line-height: var(--lineheight-4xsmall);
}
.card.sticky-action .card-action {
  z-index: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: center;
}

/* Badge logo partido */
.logop {
  position: absolute;
  z-index: 1;
  width: 90px;
  right: var(--margenes-2xsmall);
  bottom: var(--margenes-2xsmall);
  border: 2px solid var(--col-grisclaro);
}

/* ----------------------------------------------------------------
16. COMPONENTES – COLLECTION ITEMS
---------------------------------------------------------------- */
.collection {
  border: none;
}
.collection a.collection-item {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: var(--margenes-4xsmall);
  background: var(--col-gristenue);
  border: 3px solid var(--col-blanco);
  border-radius: var(--margenes-4xsmall);
  color: var(--col-fuente);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

/* ----------------------------------------------------------------
17. COMPONENTES – PARALLAX / PORTADA
---------------------------------------------------------------- */
.parallax-container {
  height: 1000px;
}
.parallax-container .parallax img {
  width: 1200px;
}
.cajaonpe {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, -5%);
  transform: translate(-50%, -5%);
  z-index: 1;
}

/* ----------------------------------------------------------------
18. COMPONENTES – COUNTDOWN
---------------------------------------------------------------- */
.contador {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 5px solid rgba(141, 141, 141, 0.56);
  border-radius: var(--margenes-4xsmall);
  padding: var(--margenes-4xsmall);
  background: rgba(255, 255, 255, 0.64);
}
.contador>div {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-right: 2px dashed var(--col-negro);
  padding: var(--margenes-xsmall) var(--margenes-3xsmall);
}
.contador>div:last-child {
  border-right: none;
}
.contador>div .num {
  font-family: var(--font-serif), Arial, sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: var(--col-negro);
  text-align: center;
  margin: var(--margenes-xsmall) 0;
  padding: var(--margenes-4xsmall) 0;
}
.contador>div .letter {
  font-family: var(--font-san-serif), Arial, sans-serif;
  font-size: var(--font-size-large);
  font-weight: 500;
  color: var(--col-negro);
  letter-spacing: 1.71px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: var(--margenes-4xsmall) 0;
}

/* ----------------------------------------------------------------
19. COMPONENTES – PLAN DE GOBIERNO (MODAL)
---------------------------------------------------------------- */
.planesdegobierno {
  background: var(--col-blanco);
  margin: auto;
  text-align: left;
}
.planesdegobierno h5 {
  text-align: center;
  font-weight: 600;
}
.planesdegobierno>span {
  display: block;
  border-top: 1px solid var(--col-grisclaro);
  border-bottom: 1px solid var(--col-grisclaro);
  text-align: center;
  margin: var(--margenes-2xsmall) 0 var(--margenes-medium);
  padding: var(--margenes-4xsmall) 0;
}
.planesdegobierno h6 {
  font-weight: 600;
}
.planesdegobierno ul {
  display: inline-block;
  margin: 0 0 var(--margenes-2xsmall) var(--margenes-2xsmall);
}
.planesdegobierno ul li {
  list-style-type: disc;
}

/* ----------------------------------------------------------------
20. COMPONENTES – BACKCARTILLA / SIMULADOR HERO
---------------------------------------------------------------- */
.backcartilla {
  background-image: url(https://portal.andina.pe/edpespeciales/elecciones2026/ilustracion/cartilla.png);
  background-attachment: initial;
  background-repeat: no-repeat;
  background-position: top;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

/* ----------------------------------------------------------------
21. COMPONENTES – LAYOUT HELPERS
---------------------------------------------------------------- */
.vh100 {
  height: 200vh;
  position: relative;
}
.vh100 .ventana {
  position: -webkit-sticky;
  position: sticky;
  top: 64px;
  margin-top: 100px;
  height: calc(100vh - 64px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
   /* justify-content: center; */
}
.vh100 .container-2xsmall,
.vh100 .container-large {
  width: 100%;
}

.flexwrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: var(--margenes-gap-xsmall);
}
.contenedor {
  height: 96vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.espacio {
  height: var(--margenes-medium);
  display: block;
}

/* ----------------------------------------------------------------
22. COMPONENTES – CARTILLA / TABLA ELECTORAL
---------------------------------------------------------------- */
.cartilla {
  font-size: var(--font-size-4xsmall);
  font-weight: 500;
  font-family: var(--font-condensed);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin: auto;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
  position: relative;
}
.cartilla-columna {
  width: 600px;
  background: var(--col-blanco);
  padding: var(--margenes-2xsmall) 0;
}

table, td, th {
  border-collapse: collapse;
}
td, th {
  padding: 0;
}

td.texto {
  width: 100%;
  max-width: 150px;
  min-width: 150px;
  display: inline-block;
}
td.texto p {
  padding: 0 0 0 var(--margenes-3xsmall);
  font-size: 12px;
  line-height: 13px;
  letter-spacing: -0.6px;
  margin: var(--margenes-4xsmall) 0;
  display: inline-block;
}
td img {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid var(--col-negro);
}
.logo, .foto, .numero {
  position: relative;
  width: 50px;
  height: 50px;
  padding-left: var(--margenes-4xsmall);
}
.canvas-overlay {
  position: absolute;
  left: 0;
  width: 50px;
  height: 50px;
  cursor: crosshair;
  border: 2px solid transparent;
  margin-left: var(--margenes-4xsmall);
  -ms-touch-action: none;
  touch-action: none;
  display: inline-block;
}
.numero canvas {
  border: 2px solid var(--col-negro);
  background: var(--col-blanco);
  -ms-touch-action: none;
  touch-action: none;
  display: block;
}
.cuadrado {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid var(--col-negro);
}
.cuadrado-transparente {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid transparent !important;
  background: transparent !important;
}

/* Colores de fila tabla electoral */
tr.fila-celeste {
  background: #cfeafb;
  border: var(--margenes-4xsmall) solid var(--col-blanco);
}
tr.fila-rosada {
  background: #ffcee1;
  border: var(--margenes-4xsmall) solid var(--col-blanco);
}
tr.fila-bage {
  background: #dec2b4;
  border: var(--margenes-4xsmall) solid var(--col-blanco);
}
tr.fila-verde {
  background: #bce1d0;
  border: var(--margenes-4xsmall) solid var(--col-blanco);
}
tr.fila-amarillo {
  background: #f6f3cc;
  border: var(--margenes-4xsmall) solid var(--col-blanco);
}
tr.fila-gris {
  background: var(--col-gris30);
  border: var(--margenes-4xsmall) solid var(--col-blanco);
  height: 110px;
}
tr.fila-gris th {
  background: var(--col-gris30);
  line-height: var(--lineheight-4xsmall);
  font-weight: 500;
  letter-spacing: -0.3px;
  text-align: center;
}
tr.fila-gris th em,
tr.fila-gris th i {
  background: var(--col-blanco);
  display: inline-block;
  width: 13px;
  height: 13px;
  line-height: var(--lineheight-4xsmall);
  font-size: var(--font-size-large);
  border: 1px solid var(--col-negro);
  margin: 0 1px;
  font-style: normal;
}

/* ----------------------------------------------------------------
23. FOOTER
---------------------------------------------------------------- */
footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
footer .row ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
footer small {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------
24. SIMULADOR – BASE
---------------------------------------------------------------- */
#sim,
#sim *,
#sim *::before,
#sim *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}
#sim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  overflow: auto;
  display: none;
  background: var(--col-gris20);
  font-family: var(--font-condensed);
  font-size: var(--font-size-4xsmall);
  color: var(--gray-900);
}  
#sim.sim-open {
  display: block;
}

/* Simulador – header */
#sim-hdr {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--red);
  color: var(--col-blanco);
  padding: var(--margenes-2xsmall) var(--margenes-3xsmall);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-shadow: 0 2px 14px var(--trans-30);
  box-shadow: 0 2px 14px var(--trans-30);
}
.sim-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--margenes-4xsmall);
}
.sim-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-4xsmall);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: var(--font-size-4xlarge);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.sim-title h2 {
  font-size: var(--font-size-2xlarge);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: var(--lineheight-2xsmall);
  text-transform: uppercase;
}

#btn-reset {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--margenes-4xsmall);
  padding: var(--margenes-4xsmall) var(--margenes-3xsmall);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--border-radius-4xsmall);
  color: var(--col-blanco);
  font-family: var(--font-condensed);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: background 0.18s;
  transition: background 0.18s;
  font-size: 1.3rem;
}
#btn-reset:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Simulador – progress */
#prog-wrap {
  background: var(--trans-10);
}
#prog-bar {
  width: 0%;
  background: -webkit-linear-gradient(left, #22c55e, var(--green));
  background: linear-gradient(90deg, #22c55e, var(--green));
  -webkit-transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Simulador – step nav */
#step-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  background: var(--gray-900);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#step-nav::-webkit-scrollbar {
  display: none;
}
.snb {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: var(--margenes-4xsmall) var(--margenes-3xsmall) !important;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--margenes-4xsmall);
  -webkit-transition: color 0.2s, border-color 0.2s;
  transition: color 0.2s, border-color 0.2s;
}
.snb.active {
  color: var(--col-blanco);
  border-bottom-color: var(--red);
}
.snb.done {
  border-bottom-color: var(--red);
}
.snb-check {
  display: none;
  font-size: var(--font-size-4xsmall);
}
.snb.done .snb-check {
  display: inline;
}

/* Simulador – cartilla layout */
.sim-cw {
  padding: var(--margenes-4xsmall);
  max-width: 1800px;
  margin: var(--margenes-2xsmall) auto !important;
  background: var(--col-blanco);
  overflow-y: scroll;
}
.sim-cw-header {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: var(--margenes-4xsmall);
  max-width: 1800px;
  margin: auto !important;
}
.sim-cartilla {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0 10px;
}
.sim-cc {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  background: var(--col-blanco);
  border-radius: var(--border-radius-4xsmall);
  -webkit-box-shadow: 0 1px 3px var(--trans-10);
  box-shadow: 0 1px 3px var(--trans-10);
}
.sim-chdr {
  text-align: center;
  margin: var(--margenes-4xsmall) 0 !important;
}
.sim-chdr h5 {
  font-weight: 500;
  text-transform: uppercase;
  line-height: var(--lineheight-2xsmall);
  letter-spacing: 0.2px;
  color: var(--gray-800);
  height: 60px;
}

/* Simulador – tablas */
#sim table {
  border-collapse: collapse;
  width: 100%;
}
#sim td, #sim th {
  padding: 0;
}
#sim tr.fila-gris {
  background: var(--col-gris30);
  border-bottom: 8px solid var(--col-blanco);
}
#sim tr.fila-celeste {
  background: #cfeafb;
  border-bottom: 6px solid var(--col-blanco);
}
#sim tr.fila-rosada {
  background: #ffcee1;
  border-bottom: 6px solid var(--col-blanco);
}
#sim tr.fila-bage {
  background: #dec2b4;
  border-bottom: 6px solid var(--col-blanco);
}
#sim tr.fila-verde {
  background: #bce1d0;
  border-bottom: 6px solid var(--col-blanco);
}
#sim tr.fila-amarillo {
  background: #f6f3cc;
  border-bottom: 6px solid var(--col-blanco);
}
#sim tr.fila-gris th {
  padding: var(--margenes-4xsmall);
  font-size: var(--font-size-4xsmall);
  font-weight: 500;
  text-align: center;
  line-height: 16px!important;
  letter-spacing: -0.1px;
  color: var(--col-gris90);
}
#sim tr.fila-gris th em,
#sim tr.fila-gris th i {
  background: var(--col-blanco);
  display: inline-block;
  width: 13px;
  height: 13px;
  line-height: var(--lineheight-4xsmall);
  font-size: 12px!important;
  border: 1px solid var(--col-gris70);
  margin: 0 1px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
#sim td.texto {
  width: 100%;
}
#sim td.texto p {
  padding: 0 0 0 var(--margenes-4xsmall);
  line-height: var(--lineheight-3xsmall);
  letter-spacing: -0.3px;
  margin: var(--margenes-4xsmall) 0;
  display: block;
  font-weight: 600;
  color: var(--gray-800);
}
#sim td.logo, #sim td.foto, #sim td.numero {
  position: relative;
  width: 54px;
  min-width: 54px;
  height: 54px;
  padding: 2px;
}
#sim td img {
  width: 50px;
  height: 50px;
  display: block;
  border: 2px solid var(--col-gris70);
}

/* Simulador – canvases */
.co {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 50px;
  height: 50px;
  cursor: crosshair;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 2;
  border: 2px solid transparent;
  border-radius: var(--border-radius-4xsmall);
  -webkit-transition: border-color 0.15s, background 0.15s;
  transition: border-color 0.15s, background 0.15s;
}
.co:hover:not(.co-locked):not(.co-done) {
  border-color: rgba(0, 70, 180, 0.45);
  background: rgba(0, 70, 180, 0.06);
}
.co.co-locked {
  cursor: not-allowed;
}
.co.co-done {
  cursor: default;
}
.nc {
  display: block;
  width: 50px;
  height: 50px;
  border: 2px solid var(--col-gris60);
  background: var(--col-gris05);
  cursor: pointer;
  -ms-touch-action: none;
  touch-action: none;
  border-radius: var(--border-radius-4xsmall);
  -webkit-transition: border-color 0.15s, -webkit-box-shadow 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nc:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.nc.nc-active {
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 2px rgba(0, 70, 180, 0.22);
  box-shadow: 0 0 0 2px rgba(0, 70, 180, 0.22);
}
.ct {
  display: block;
  width: 50px;
  height: 50px;
  border: 2px solid var(--col-gris60);
  background: var(--col-gris05);
  border-radius: var(--border-radius-4xsmall);
}
.ct-invisible {
  display: block;
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  opacity: 0;
}

/* Simulador – nav row móvil */
.nav-row {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--margenes-3xsmall) var(--margenes-2xsmall) var(--margenes-2xsmall);
  background: var(--trans-60);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  gap: var(--margenes-3xsmall);
  z-index: 300;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.bp, .bn {
  padding: var(--margenes-3xsmall) var(--margenes-medium) !important;
  border: none;
  border-radius: var(--border-radius-4xsmall);
  font-family: var(--font-condensed);
  font-size: var(--font-size-xsmall);
  font-weight: 700;
  cursor: pointer;
  min-width: 120px;
  -webkit-transition: -webkit-filter 0.15s, -webkit-transform 0.1s;
  transition: filter 0.15s, transform 0.1s;
}
.bp:active, .bn:active {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
}
.bp {
  background: var(--gray-200);
  color: var(--gray-800);
}
.bn {
  background: var(--red);
  color: var(--col-blanco);
}
.bp:hover {
  -webkit-filter: brightness(0.92);
  filter: brightness(0.92);
}
.bn:hover {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}

/* Simulador – modales */
.sim-mo {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--trans-60);
  z-index: 1000;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: var(--margenes-3xsmall);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--font-condensed);
}
.sim-mo.open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sim-mb {
  background: var(--col-blanco);
  border-radius: var(--border-radius-2xsmall);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  -webkit-box-shadow: 0 20px 60px var(--trans-30);
  box-shadow: 0 20px 60px var(--trans-30);
  -webkit-animation: simPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: simPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@-webkit-keyframes simPop {
  from {
    -webkit-transform: scale(0.82);
    transform: scale(0.82);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes simPop {
  from {
    -webkit-transform: scale(0.82);
    transform: scale(0.82);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.sim-mh {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--margenes-4xsmall);
  padding: var(--margenes-3xsmall) var(--margenes-2xsmall);
  font-size: var(--font-size-3xsmall);
  font-weight: 700;
  color: var(--col-blanco);
  letter-spacing: 0.2px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.sim-mh span{
font-size: var(--font-size-2xlarge);
  font-weight: 700;
}
.sim-mh.blue {
  background: -webkit-linear-gradient(315deg, var(--blue), #0060e0);
  background: linear-gradient(135deg, var(--blue), #0060e0);
}
.sim-mh.orange {
  background: -webkit-linear-gradient(315deg, var(--amber), #f59e0b);
  background: linear-gradient(135deg, var(--amber), #f59e0b);
}
.sim-mh.green {
  background: -webkit-linear-gradient(315deg, var(--green), #22c55e);
  background: linear-gradient(135deg, var(--green), #22c55e);
}
.sim-mh .material-icons {
  font-size: var(--font-size-4xlarge);
}
.sim-mbd {
  padding: var(--margenes-3xsmall) var(--margenes-2xsmall);
  text-align: center;
}

/* Simulador – quick pick */
.qpick-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: var(--margenes-4xsmall);
  margin: 0 0 var(--margenes-4xsmall);
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.qpick-lbl {
  width: 100%;
  text-align: center;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--margenes-4xsmall);
  font-size: var(--font-size-medium);
}
.qpick-btn {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 80px;
  max-width: 110px;
  padding: var(--margenes-4xsmall);
  border: 2px solid var(--blue);
  border-radius: var(--border-radius-4xsmall);
  background: var(--col-blanco);
  cursor: pointer;
  font-family: var(--font-condensed);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--margenes-4xsmall);
  font-size: var(--font-size-4xsmall);
  font-weight: 700;
  color: var(--blue);
  -webkit-transition: background 0.12s, -webkit-transform 0.1s;
  transition: background 0.12s, transform 0.1s;
}
.qpick-btn svg {
  width: 32px;
  height: 32px;
}
.qpick-btn:hover {
  background: var(--blue-light);
}
.qpick-btn:active {
  background: #d0e2ff;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}
.qpick-btn.selected {
  background: var(--blue);
  color: var(--col-blanco);
}
.qpick-btn.selected svg path,
.qpick-btn.selected svg line {
  stroke: var(--col-blanco);
}

/* Simulador – canvas de dibujo */
#dcw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: var(--margenes-4xsmall) 0;
  position: relative;
}
.dcw-inner {
  position: relative;
  border: 3px solid var(--col-grisoscuro);
  border-radius: var(--border-radius-4xsmall);
  overflow: hidden;
  -webkit-box-shadow: inset 0 2px 8px var(--trans-10);
  box-shadow: inset 0 2px 8px var(--trans-10);
}
#dC-bg {
  display: block;
  width: 220px;
  height: 220px;
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--col-gris05);
}
#dC {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  cursor: crosshair;
  -ms-touch-action: none;
  touch-action: none;
  display: block;
  background: transparent;
}
#draw-hint {
  text-align: center;
  color: var(--col-grismedio);
  margin: var(--margenes-4xsmall) 0 2px;
  line-height: var(--lineheight-xsmall);
  font-size: var(--font-size-medium);
  font-weight: 500;
}
#draw-warn {
  text-align: center;
  font-size: var(--font-size-medium);
  min-height: 18px;
  margin: 2px 0 0;
  font-weight: 600;
}
#draw-warn.bad {
  color: var(--red);
}
#draw-warn.ok {
  color: var(--green);
}

/* Simulador – warning badge */
.wbadge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--margenes-4xsmall);
  background: var(--amber-light);
  border: 1px solid #fcd34d;
  border-radius: var(--border-radius-4xsmall);
  padding: var(--margenes-3xsmall);
  margin: var(--margenes-4xsmall) 0;
}
.wbadge .material-icons {
  color: var(--amber);
  font-size: var(--font-size-medium);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: 1px;
}
.wbadge p {
  margin: 0;
  font-size: var(--font-size-4xsmall);
  line-height: var(--lineheight-3xsmall);
  font-weight: 500;
  color: #92400e;
}
.warn-footer {
  font-size: var(--font-size-medium);
  color: var(--col-grismedio);
  margin: var(--margenes-4xsmall) 0 0;
  line-height: var(--lineheight-xsmall);
}

/* Simulador – numpad */
#npModal .sim-mb {
  max-width: 390px;
}
.np-label {
  margin: 0 0 var(--margenes-4xsmall);
  text-align: center;
  color: var(--gray-700);
}
.np-disp {
  background: var(--blue-light);
  border: 1.5px solid #c2d4f8;
  border-radius: var(--border-radius-4xsmall);
  padding: var(--margenes-4xsmall);
  font-size: var(--font-size-2xlarge);
  font-weight: 700;
  font-family: var(--font-mono);
  text-align: center;
  letter-spacing: 10px;
  color: var(--blue);
  margin: 0 0 var(--margenes-4xsmall);
  min-height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.np-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5px 1fr 5px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--margenes-4xsmall);
  margin: 0 0 var(--margenes-4xsmall);
}
.npb {
  padding: var(--margenes-3xsmall) var(--margenes-4xsmall);
  border: 1.5px solid var(--gray-200);
  background: var(--col-blanco);
  border-radius: var(--border-radius-4xsmall);
  font-family: var(--font-condensed);
  font-size: var(--font-size-medium);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  color: var(--gray-800);
  -webkit-transition: background 0.1s, -webkit-transform 0.08s, border-color 0.1s;
  transition: background 0.1s, transform 0.08s, border-color 0.1s;
}
.npb:hover {
  background: #eef2ff;
  border-color: var(--blue);
}
.npb:active {
  background:var(--col-gristenue);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.npb.del {
  color: var(--red);
  font-size: 2rem;
}
.npb.ok-btn {
  background: var(--blue);
  color: var(--col-blanco);
  border-color: var(--blue);
}
.npb.ok-btn:hover {
  background: var(--blue-dark);
}
.np-hint {
  text-align: center;
  font-size: var(--font-size-medium)
}

/* Simulador – modal actions */
.sim-mac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--margenes-4xsmall);
  padding: var(--margenes-4xsmall) var(--margenes-2xsmall) var(--margenes-3xsmall);
}
.bm {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: var(--margenes-2xsmall);
  border: none;
  border-radius: var(--border-radius-4xsmall);
  font-family: var(--font-condensed);
  font-size: var(--font-size-4xsmall);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  -webkit-transition: -webkit-filter 0.15s, -webkit-transform 0.1s;
  transition: filter 0.15s, transform 0.1s;
}
.bm:active {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
}
.bm:hover {
  -webkit-filter: brightness(0.92);
  filter: brightness(0.92);
}
.bm.cancel {
  background: var(--gray-100);
  color: var(--gray-700);
}
.bm.c-blue {
  background: var(--blue);
  color: var(--col-blanco);
}
.bm.c-grn {
  background: var(--green);
  color: var(--col-blanco);
}
.bm.c-red {
  background: #fee2e2;
  color: #991b1b;
}
.bm.c-org {
  background: var(--amber);
  color: var(--col-blanco);
}

/* Simulador – success */
.succ-body {
  text-align: center;
  padding: var(--margenes-2xsmall) var(--margenes-2xsmall) var(--margenes-4xsmall);
}
.succ-ico {
  width: 64px;
  height: 64px;
  background:rgba(255, 0, 0, 0.12);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto var(--margenes-3xsmall);
  -webkit-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.12);
  box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.12);
}
.succ-ico .material-icons {
  font-size: 4rem;
  color: var(--col-rojo);
}
.succ-body h3 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  margin: 0 0 var(--margenes-4xsmall);
  color: var(--col-negro);
}
.succ-body p {
  font-size: var(--font-size-medium);
  margin: 0;
  line-height: var(--lineheight-3xsmall);
}
.succ-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 6px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: var(--margenes-4xsmall);
  margin: var(--margenes-3xsmall) 0 0;
  text-align: left;
}
.sc {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--border-radius-4xsmall);
  padding: var(--margenes-4xsmall);
}
.sc .sl {
  font-size: var(--font-size-4xsmall);
  text-transform: uppercase;
  font-weight: 700;
  color: #15803d;
  letter-spacing: 0.4px;
  margin: 0 0 2px;
}
.sc .sv {
  font-size: var(--font-size-4xsmall);
  font-weight: 600;
  color: var(--col-negro);
  margin: 0;
}

/* Simulador – toast */
#sim-toast {
  position: fixed;
  bottom: var(--margenes-2xsmall);
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(70px);
  transform: translateX(-50%) translateY(70px);
  background: var(--gray-900);
  color: var(--col-blanco);
  padding: var(--margenes-4xsmall) var(--margenes-2xsmall);
  border-radius: var(--border-radius-small);
  font-family: var(--font-condensed);
  font-size: var(--font-size-4xsmall);
  font-weight: 600;
  z-index: 5000;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
  -webkit-box-shadow: 0 8px 24px var(--trans-30);
  box-shadow: 0 8px 24px var(--trans-30);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#sim-toast.on {
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------------------------
25. UTILIDADES – COLORES DE FONDO
---------------------------------------------------------------- */
.magenta {
  background: var(--col-magenta);
}
.fucsia {
  background: var(--col-fucsia);
}
.rojo {
  background: var(--col-rojo);
}
.marron {
  background: var(--col-marron);
}
.pardo {
  background: var(--col-pardo);
}
.greige {
  background: var(--col-greige);
}
.crema {
  background: var(--col-crema);
}
.pino {
  background: var(--col-pino);
}
.salvia {
  background: var(--col-salvia);
}
.naranja {
  background: var(--col-naranja);
}
.mostaza {
  background: var(--col-mostaza);
}
.limon {
  background: var(--col-limon);
}
.manzana {
  background: var(--col-manzana);
}
.verde {
  background: var(--col-verde);
}
.esmeralda {
  background: var(--col-esmeralda);
}
.turquesa {
  background: var(--col-turquesa);
}
.celeste {
  background: var(--col-celeste);
}
.cielo {
  background: var(--col-cielo);
}
.azul {
  background: var(--col-azul);
}
.indigo {
  background: var(--col-indigo);
}
.purpura {
  background: var(--col-purpura);
}
.violeta {
  background: var(--col-violeta);
}
.noche {
  background: var(--col-noche);
}
.azulado {
  background: var(--col-azulado);
}
.metal {
  background: var(--col-metal);
}
.acero {
  background: var(--col-acero);
}
.aluminio {
  background: var(--col-aluminio);
}
.plateado {
  background: var(--col-plateado);
}
.humo {
  background: var(--col-humo);
}
.blanco {
  background: var(--col-blanco);
}
.gris05 {
  background: var(--col-gris05);
}
.gris10 {
  background: var(--col-gris10);
}
.gris20 {
  background: var(--col-gris20);
}
.gris30 {
  background: var(--col-gris30);
}
.gris40 {
  background: var(--col-gris40);
}
.gris50 {
  background: var(--col-gris50);
}
.gris60 {
  background: var(--col-gris60);
}
.gris70 {
  background: var(--col-gris70);
}
.gris80 {
  background: var(--col-gris80);
}
.gris90 {
  background: var(--col-gris90);
}
.negro {
  background: var(--col-negro);
}
.fuente {
  background: var(--col-fuente);
}
.oscuro {
  background: var(--col-oscuro) !important;
}
.grisoscuro {
  background: var(--col-grisoscuro);
}
.grismedio {
  background: var(--col-grismedio);
}
.grisclaro {
  background: var(--col-grisclaro);
}
.gristenue {
  background: var(--col-gristenue);
}

/* ----------------------------------------------------------------
26. UTILIDADES – COLORES DE TEXTO
---------------------------------------------------------------- */
.text-magenta {
  color: var(--col-magenta);
}
.text-fucsia {
  color: var(--col-fucsia);
}
.text-rojo {
  color: var(--col-rojo);
}
.text-marron {
  color: var(--col-marron);
}
.text-pardo {
  color: var(--col-pardo);
}
.text-greige {
  color: var(--col-greige);
}
.text-crema {
  color: var(--col-crema);
}
.text-pino {
  color: var(--col-pino);
}
.text-salvia {
  color: var(--col-salvia);
}
.text-naranja {
  color: var(--col-naranja);
}
.text-mostaza {
  color: var(--col-mostaza);
}
.text-limon {
  color: var(--col-limon);
}
.text-manzana {
  color: var(--col-manzana);
}
.text-verde {
  color: var(--col-verde);
}
.text-esmeralda {
  color: var(--col-esmeralda);
}
.text-turquesa {
  color: var(--col-turquesa);
}
.text-celeste {
  color: var(--col-celeste);
}
.text-cielo {
  color: var(--col-cielo);
}
.text-azul {
  color: var(--col-azul);
}
.text-indigo {
  color: var(--col-indigo);
}
.text-purpura {
  color: var(--col-purpura);
}
.text-violeta {
  color: var(--col-violeta);
}
.text-noche {
  color: var(--col-noche);
}
.text-azulado {
  color: var(--col-azulado);
}
.text-metal {
  color: var(--col-metal);
}
.text-acero {
  color: var(--col-acero);
}
.text-aluminio {
  color: var(--col-aluminio);
}
.text-plateado {
  color: var(--col-plateado);
}
.text-humo {
  color: var(--col-humo);
}
.text-blanco {
  color: var(--col-blanco);
}
.text-gris05 {
  color: var(--col-gris05);
}
.text-gris10 {
  color: var(--col-gris10);
}
.text-gris20 {
  color: var(--col-gris20);
}
.text-gris30 {
  color: var(--col-gris30);
}
.text-gris40 {
  color: var(--col-gris40);
}
.text-gris50 {
  color: var(--col-gris50);
}
.text-gris60 {
  color: var(--col-gris60);
}
.text-gris70 {
  color: var(--col-gris70);
}
.text-gris80 {
  color: var(--col-gris80);
}
.text-gris90 {
  color: var(--col-gris90);
}
.text-negro {
  color: var(--col-negro);
}
.text-fuente {
  color: var(--col-fuente);
}
.text-oscuro {
  color: var(--col-oscuro);
}
.text-grisoscuro {
  color: var(--col-grisoscuro);
}
.text-grismedio {
  color: var(--col-grismedio);
}
.text-grisclaro {
  color: var(--col-grisclaro);
}
.text-gristenue {
  color: var(--col-gristenue);
}

/* ----------------------------------------------------------------
27. UTILIDADES – FILTROS SVG
---------------------------------------------------------------- */
.svg-magenta {
  filter: var(--svg-magenta);
}
.svg-fucsia {
  filter: var(--svg-fucsia);
}
.svg-rojo {
  filter: var(--svg-rojo);
}
.svg-marron {
  filter: var(--svg-marron);
}
.svg-pardo {
  filter: var(--svg-pardo);
}
.svg-greige {
  filter: var(--svg-greige);
}
.svg-crema {
  filter: var(--svg-crema);
}
.svg-pino {
  filter: var(--svg-pino);
}
.svg-salvia {
  filter: var(--svg-salvia);
}
.svg-naranja {
  filter: var(--svg-naranja);
}
.svg-anaranjado {
  filter: var(--svg-anaranjado);
}
.svg-mostaza {
  filter: var(--svg-mostaza);
}
.svg-limon {
  filter: var(--svg-limon);
}
.svg-manzana {
  filter: var(--svg-manzana);
}
.svg-verde {
  filter: var(--svg-verde);
}
.svg-esmeralda {
  filter: var(--svg-esmeralda);
}
.svg-turquesa {
  filter: var(--svg-turquesa);
}
.svg-celeste {
  filter: var(--svg-celeste);
}
.svg-cielo {
  filter: var(--svg-cielo);
}
.svg-azul {
  filter: var(--svg-azul);
}
.svg-indigo {
  filter: var(--svg-indigo);
}
.svg-purpura {
  filter: var(--svg-purpura);
}
.svg-violeta {
  filter: var(--svg-violeta);
}
.svg-noche {
  filter: var(--svg-noche);
}
.svg-azulado {
  filter: var(--svg-azulado);
}
.svg-metal {
  filter: var(--svg-metal);
}
.svg-acero {
  filter: var(--svg-acero);
}
.svg-aluminio {
  filter: var(--svg-aluminio);
}
.svg-plateado {
  filter: var(--svg-plateado);
}
.svg-humo {
  filter: var(--svg-humo);
}
.svg-blanco {
  filter: var(--svg-blanco) !important;
}
.svg-gris05 {
  filter: var(--svg-gris05);
}
.svg-gris10 {
  filter: var(--svg-gris10);
}
.svg-gris20 {
  filter: var(--svg-gris20);
}
.svg-gris30 {
  filter: var(--svg-gris30);
}
.svg-gris40 {
  filter: var(--svg-gris40);
}
.svg-gris50 {
  filter: var(--svg-gris50);
}
.svg-gris60 {
  filter: var(--svg-gris60);
}
.svg-gris70 {
  filter: var(--svg-gris70);
}
.svg-gris80 {
  filter: var(--svg-gris80);
}
.svg-gris90 {
  filter: var(--svg-gris90);
}
.svg-fuente {
  filter: var(--svg-fuente);
}
.svg-oscuro {
  filter: var(--svg-oscuro);
}
.svg-grisoscuro {
  filter: var(--svg-grisoscuro);
}
.svg-grismedio {
  filter: var(--svg-grismedio);
}
.svg-grisclaro {
  filter: var(--svg-grisclaro);
}
.svg-gristenue {
  filter: var(--svg-gristenue);
}

/* ----------------------------------------------------------------
28. UTILIDADES – FONT-SIZE
---------------------------------------------------------------- */
.fz-4xlarge {
  font-size: var(--font-size-4xlarge);
}
.fz-3xlarge {
  font-size: var(--font-size-3xlarge);
}
.fz-2xlarge {
  font-size: var(--font-size-2xlarge);
}
.fz-xlarge {
  font-size: var(--font-size-xlarge);
}
.fz-large {
  font-size: var(--font-size-large);
}
.fz-medium {
  font-size: var(--font-size-medium);
}
.fz-small {
  font-size: var(--font-size-small) !important;
}
.fz-xsmall {
  font-size: var(--font-size-xsmall);
}
.fz-2xsmall {
  font-size: var(--font-size-2xsmall);
}
.fz-3xsmall {
  font-size: var(--font-size-3xsmall);
}
.fz-4xsmall {
  font-size: var(--font-size-4xsmall);
}

/* ----------------------------------------------------------------
29. UTILIDADES – FONT-WEIGHT
---------------------------------------------------------------- */
.fw-100 {
  font-weight: 100 !important;
}
.fw-200 {
  font-weight: 200 !important;
}
.fw-300 {
  font-weight: 300 !important;
}
.fw-400 {
  font-weight: 400 !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.fw-600 {
  font-weight: 600 !important;
}
.fw-700 {
  font-weight: 700 !important;
}
.fw-800 {
  font-weight: 800 !important;
}
.fw-900 {
  font-weight: 900 !important;
}

/* ----------------------------------------------------------------
30. UTILIDADES – LINE-HEIGHT
---------------------------------------------------------------- */
.lh-4xlarge {
  line-height: var(--lineheight-4xlarge);
}
.lh-3xlarge {
  line-height: var(--lineheight-3xlarge);
}
.lh-2xlarge {
  line-height: var(--lineheight-2xlarge);
}
.lh-xlarge {
  line-height: var(--lineheight-xlarge);
}
.lh-large {
  line-height: var(--lineheight-large);
}
.lh-medium {
  line-height: var(--lineheight-medium);
}
.lh-small {
  line-height: var(--lineheight-small);
}
.lh-xsmall {
  line-height: var(--lineheight-xsmall);
}
.lh-2xsmall {
  line-height: var(--lineheight-2xsmall);
}
.lh-3xsmall {
  line-height: var(--lineheight-3xsmall);
}
.lh-4xsmall {
  line-height: var(--lineheight-4xsmall);
}

/* ----------------------------------------------------------------
31. UTILIDADES – WIDTH
---------------------------------------------------------------- */
.wd-10 {
  width: 10px;
}
.wd-15 {
  width: 15px;
}
.wd-20 {
  width: 20px !important;
}
.wd-25 {
  width: 25px;
}
.wd-30 {
  width: 30px !important;
}
.wd-35 {
  width: 35px;
}
.wd-40 {
  width: 40px;
}
.wd-45 {
  width: 45px;
}
.wd-50 {
  width: 50px;
}
.wd-60 {
  width: 60px;
}
.wd-70 {
  width: 70px;
}
.wd-80 {
  width: 80px;
}
.wd-90 {
  width: 90px;
}
.wd-100 {
  width: 100px;
}
.wd-110 {
  width: 110px;
}
.wd-120 {
  width: 120px;
}
.wd-130 {
  width: 130px;
}
.wd-140 {
  width: 140px;
}
.wd-150 {
  width: 150px;
}
.wd-160 {
  width: 160px;
}
.wd-170 {
  width: 170px;
}
.wd-180 {
  width: 180px;
}
.wd-190 {
  width: 190px;
}
.wd-200 {
  width: 200px;
}
.wd-250 {
  width: 250px;
}
.wd-300 {
  width: 300px;
}
.wd-350 {
  width: 350px;
}

/* ----------------------------------------------------------------
32. UTILIDADES – HEIGHT
---------------------------------------------------------------- */
.hg-10 {
  height: 10px;
}
.hg-20 {
  height: 20px;
}
.hg-30 {
  height: 30px;
}
.hg-40 {
  height: 40px;
}
.hg-50 {
  height: 50px;
}
.hg-60 {
  height: 60px;
}
.hg-70 {
  height: 70px;
}
.hg-80 {
  height: 80px;
}
.hg-90 {
  height: 90px;
}
.hg-100 {
  height: 100px;
}
.hg-110 {
  height: 110px;
}
.hg-120 {
  height: 120px;
}
.hg-130 {
  height: 130px;
}
.hg-140 {
  height: 140px;
}
.hg-150 {
  height: 150px;
}
.hg-160 {
  height: 160px;
}
.hg-170 {
  height: 170px;
}
.hg-180 {
  height: 180px;
}
.hg-190 {
  height: 190px;
}
.hg-200 {
  height: 200px;
}
.hg-250 {
  height: 250px;
}
.hg-300 {
  height: 300px;
}
.hg-350 {
  height: 350px;
}

/* ----------------------------------------------------------------
33. UTILIDADES – ICON SIZE
---------------------------------------------------------------- */
.icon-10 {
  width: 10px;
  height: 10px !important;
}
.icon-15 {
  width: 15px;
  height: 15px !important;
}
.icon-20 {
  width: 20px;
  height: 20px !important;
}
.icon-25 {
  width: 25px;
  height: 25px !important;
}
.icon-30 {
  width: 30px;
  height: 30px !important;
}
.icon-35 {
  width: 35px;
  height: 35px !important;
}
.icon-40 {
  width: 40px;
  height: 40px !important;
}
.icon-45 {
  width: 45px;
  height: 45px !important;
}
.icon-50 {
  width: 50px;
  height: 50px !important;
}
.icon-60 {
  width: 60px;
  height: 60px !important;
}
.icon-70 {
  width: 70px;
  height: 70px !important;
}
.icon-80 {
  width: 80px;
  height: 80px;
}
.icon-90 {
  width: 90px;
  height: 90px;
}
.icon-100 {
  width: 100px;
  height: 100px;
}
.icon-120 {
  width: 120px;
  height: 120px;
}
.icon-150 {
  width: 150px;
  height: 150px;
}
.icon-200 {
  width: 200px;
  height: 200px;
}
.icon-250 {
  width: 250px;
  height: 250px;
}
.icon-300 {
  width: 300px;
  height: 300px;
}
.icon-350 {
  width: 350px;
  height: 350px;
}

/* ----------------------------------------------------------------
34. UTILIDADES – BORDER RADIUS
---------------------------------------------------------------- */
.brs-4xlarge {
  border-radius: var(--border-radius-4xlarge);
}
.brs-3xlarge {
  border-radius: var(--border-radius-3xlarge);
}
.brs-2xlarge {
  border-radius: var(--border-radius-2xlarge);
}
.brs-xlarge {
  border-radius: var(--border-radius-xlarge);
}
.brs-large {
  border-radius: var(--border-radius-large);
}
.brs-medium {
  border-radius: var(--border-radius-medium);
}
.brs-small {
  border-radius: var(--border-radius-small);
}
.brs-xsmall {
  border-radius: var(--border-radius-xsmall);
}
.brs-2xsmall {
  border-radius: var(--border-radius-2xsmall);
}
.brs-3xsmall {
  border-radius: var(--border-radius-3xsmall);
}
.brs-4xsmall {
  border-radius: var(--border-radius-4xsmall);
}

/* ----------------------------------------------------------------
35. UTILIDADES – PADDING
---------------------------------------------------------------- */
.padding-4xlarge {
  padding: var(--margenes-4xlarge);
}
.padding-3xlarge {
  padding: var(--margenes-3xlarge);
}
.padding-2xlarge {
  padding: var(--margenes-2xlarge);
}
.padding-xlarge {
  padding: var(--margenes-xlarge);
}
.padding-large {
  padding: var(--margenes-large);
}
.padding-medium {
  padding: var(--margenes-medium);
}
.padding-small {
  padding: var(--margenes-small);
}
.padding-xsmall {
  padding: var(--margenes-xsmall);
}
.padding-2xsmall {
  padding: var(--margenes-2xsmall) !important;
}
.padding-3xsmall {
  padding: var(--margenes-3xsmall) !important;
}
.padding-4xsmall {
  padding: var(--margenes-4xsmall);
}
.paddinglat-4xlarge {
  padding: 0 var(--margenes-4xlarge);
}
.paddinglat-3xlarge {
  padding: 0 var(--margenes-3xlarge);
}
.paddinglat-2xlarge {
  padding: 0 var(--margenes-2xlarge);
}
.paddinglat-xlarge {
  padding: 0 var(--margenes-xlarge);
}
.paddinglat-large {
  padding: 0 var(--margenes-large);
}
.paddinglat-medium {
  padding: 0 var(--margenes-medium);
}
.paddinglat-small {
  padding: 0 var(--margenes-small);
}
.paddinglat-xsmall {
  padding: 0 var(--margenes-xsmall);
}
.paddinglat-2xsmall {
  padding: 0 var(--margenes-2xsmall);
}
.paddinglat-3xsmall {
  padding: 0 var(--margenes-3xsmall);
}
.paddinglat-4xsmall {
  padding: 0 var(--margenes-4xsmall);
}
.paddingtopbott-xlarge {
  padding: var(--margenes-xlarge) 0;
}
.paddingtopbott-large {
  padding: var(--margenes-large) 0;
}
.paddingtopbott-medium {
  padding: var(--margenes-medium) 0;
}
.paddingtopbott-small {
  padding: var(--margenes-small) 0;
}
.paddingtopbott-xsmall {
  padding: var(--margenes-xsmall) 0;
}
.paddingtopbott-2xsmall {
  padding: var(--margenes-2xsmall) 0;
}
.paddingtopbott-3xsmall {
  padding: var(--margenes-3xsmall) 0;
}
.paddingtopbott-4xsmall {
  padding: var(--margenes-4xsmall) 0;
}
.paddingtop-xlarge {
  padding: var(--margenes-xlarge) 0 0 0;
}
.paddingtop-large {
  padding: var(--margenes-large) 0 0 0;
}
.paddingtop-medium {
  padding: var(--margenes-medium) 0 0 0;
}
.paddingtop-small {
  padding: var(--margenes-small) 0 0 0;
}
.paddingtop-xsmall {
  padding: var(--margenes-xsmall) 0 0 0;
}
.paddingtop-2xsmall {
  padding: var(--margenes-2xsmall) 0 0 0;
}
.paddingtop-3xsmall {
  padding: var(--margenes-3xsmall) 0 0 0;
}
.paddingtop-4xsmall {
  padding: var(--margenes-4xsmall) 0 0 0;
}
.paddingbottom-xlarge {
  padding: 0 0 var(--margenes-xlarge) 0;
}
.paddingbottom-large {
  padding: 0 0 var(--margenes-large) 0;
}
.paddingbottom-medium {
  padding: 0 0 var(--margenes-medium) 0;
}
.paddingbottom-small {
  padding: 0 0 var(--margenes-small) 0;
}
.paddingbottom-xsmall {
  padding: 0 0 var(--margenes-xsmall) 0;
}
.paddingbottom-2xsmall {
  padding: 0 0 var(--margenes-2xsmall) 0;
}
.paddingbottom-3xsmall {
  padding: 0 0 var(--margenes-3xsmall) 0;
}
.paddingbottom-4xsmall {
  padding: 0 0 var(--margenes-4xsmall) 0;
}

/* ----------------------------------------------------------------
36. UTILIDADES – MARGIN
---------------------------------------------------------------- */
.margin-4xlarge {
  margin: var(--margenes-4xlarge);
}
.margin-3xlarge {
  margin: var(--margenes-3xlarge);
}
.margin-2xlarge {
  margin: var(--margenes-2xlarge);
}
.margin-xlarge {
  margin: var(--margenes-xlarge);
}
.margin-large {
  margin: var(--margenes-large);
}
.margin-medium {
  margin: var(--margenes-medium);
}
.margin-small {
  margin: var(--margenes-small);
}
.margin-xsmall {
  margin: var(--margenes-xsmall);
}
.margin-2xsmall {
  margin: var(--margenes-2xsmall);
}
.margin-3xsmall {
  margin: var(--margenes-3xsmall);
}
.margin-4xsmall {
  margin: var(--margenes-4xsmall);
}
.marginlat-4xlarge {
  margin: 0 var(--margenes-4xlarge);
}
.marginlat-3xlarge {
  margin: 0 var(--margenes-3xlarge);
}
.marginlat-2xlarge {
  margin: 0 var(--margenes-2xlarge);
}
.marginlat-xlarge {
  margin: 0 var(--margenes-xlarge);
}
.marginlat-large {
  margin: 0 var(--margenes-large);
}
.marginlat-medium {
  margin: 0 var(--margenes-medium);
}
.marginlat-small {
  margin: 0 var(--margenes-small);
}
.marginlat-xsmall {
  margin: 0 var(--margenes-xsmall);
}
.marginlat-2xsmall {
  margin: 0 var(--margenes-2xsmall);
}
.marginlat-3xsmall {
  margin: 0 var(--margenes-3xsmall);
}
.marginlat-4xsmall {
  margin: 0 var(--margenes-4xsmall);
}
.margintopbott-xlarge {
  margin: var(--margenes-xlarge) 0;
}
.margintopbott-large {
  margin: var(--margenes-large) 0;
}
.margintopbott-medium {
  margin: var(--margenes-medium) 0;
}
.margintopbott-small {
  margin: var(--margenes-small) 0;
}
.margintopbott-xsmall {
  margin: var(--margenes-xsmall) 0;
}
.margintopbott-2xsmall {
  margin: var(--margenes-2xsmall) 0;
}
.margintopbott-3xsmall {
  margin: var(--margenes-3xsmall) 0;
}
.margintopbott-4xsmall {
  margin: var(--margenes-4xsmall) 0;
}
.margintopbott-auto-xlarge {
  margin: var(--margenes-xlarge) auto;
}
.margintopbott-auto-large {
  margin: var(--margenes-large) auto;
}
.margintopbott-auto-medium {
  margin: var(--margenes-medium) auto;
}
.margintopbott-auto-small {
  margin: var(--margenes-small) auto;
}
.margintopbott-auto-xsmall {
  margin: var(--margenes-xsmall) auto;
}
.margintopbott-auto-2xsmall {
  margin: var(--margenes-2xsmall) auto;
}
.margintopbott-auto-3xsmall {
  margin: var(--margenes-3xsmall) auto;
}
.margintopbott-auto-4xsmall {
  margin: var(--margenes-4xsmall) auto;
}
.margintop-xlarge {
  margin: var(--margenes-xlarge) 0 0 0;
}
.margintop-large {
  margin: var(--margenes-large) 0 0 0;
}
.margintop-medium {
  margin: var(--margenes-medium) 0 0 0;
}
.margintop-small {
  margin: var(--margenes-small) 0 0 0;
}
.margintop-xsmall {
  margin: var(--margenes-xsmall) 0 0 0;
}
.margintop-2xsmall {
  margin: var(--margenes-2xsmall) 0 0 0;
}
.margintop-3xsmall {
  margin: var(--margenes-3xsmall) 0 0 0;
}
.margintop-4xsmall {
  margin: var(--margenes-4xsmall) 0 0 0;
}
.marginbottom-4xlarge {
  margin: 0 0 var(--margenes-4xlarge) 0;
}
.marginbottom-3xlarge {
  margin: 0 0 var(--margenes-3xlarge) 0;
}
.marginbottom-2xlarge {
  margin: 0 0 var(--margenes-2xlarge) 0;
}
.marginbottom-xlarge {
  margin: 0 0 var(--margenes-xlarge) 0;
}
.marginbottom-large {
  margin: 0 0 var(--margenes-large) 0;
}
.marginbottom-medium {
  margin: 0 0 var(--margenes-medium) 0;
}
.marginbottom-small {
  margin: 0 0 var(--margenes-small) 0;
}
.marginbottom-xsmall {
  margin: 0 0 var(--margenes-xsmall) 0;
}
.marginbottom-2xsmall {
  margin: 0 0 var(--margenes-2xsmall) 0;
}
.marginbottom-3xsmall {
  margin: 0 0 var(--margenes-3xsmall) 0;
}
.marginbottom-4xsmall {
  margin: 0 0 var(--margenes-4xsmall) 0;
}
.marginleft-xlarge {
  margin: 0 0 0 var(--margenes-xlarge);
}
.marginleft-large {
  margin: 0 0 0 var(--margenes-large);
}
.marginleft-medium {
  margin: 0 0 0 var(--margenes-medium);
}
.marginleft-small {
  margin: 0 0 0 var(--margenes-small);
}
.marginleft-xsmall {
  margin: 0 0 0 var(--margenes-xsmall);
}
.marginleft-2xsmall {
  margin: 0 0 0 var(--margenes-2xsmall);
}
.marginleft-3xsmall {
  margin: 0 0 0 var(--margenes-3xsmall);
}
.marginleft-4xsmall {
  margin: 0 0 0 var(--margenes-4xsmall);
}

/* ----------------------------------------------------------------
37. UTILIDADES – RESET RÁPIDO
---------------------------------------------------------------- */
.widthfull {
  width: 100%;
}
.fullwidth {
  width: 100%;
}
.widthauto {
  width: auto;
}
.widthinherit {
  width: inherit;
}
.heightauto {
  height: auto !important;
}
.heightinherit {
  height: inherit;
}
.top {
  top: 0;
}
.bottom {
  bottom: 0;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inlineblock {
  display: inline-block;
}
.contents {
  display: contents !important;
}
.displaynone {
  display: none;
}
.displayinherit {
  display: inherit;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.fixed {
  position: fixed;
}
.inherit {
  position: inherit;
}
.zindex1 {
  z-index: 1;
}
.zindex-1 {
  z-index: -1;
}
.overflowhidden {
  overflow: hidden;
}
.no-overflowhidden {
  overflow: visible;
}
.boxsizing {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.border1 {
  border: 1px solid rgba(0, 0, 0, 0.27);
}
.no-border {
  border: none;
}
.no-borderadius {
  border-radius: 0;
}
.no-lh {
  line-height: inherit;
}
.no-padding {
  padding: 0 !important;
}
.no-paddingtop {
  padding-top: 0;
}
.no-paddingbottom {
  padding-bottom: 0;
}
.no-paddingleft {
  padding-left: 0;
}
.no-paddingright {
  padding-right: 0;
}
.no-margin {
  margin: 0 !important;
}
.no-margintop {
  margin-top: 0;
}
.no-marginbottom {
  margin-bottom: 0;
}
.no-marginleft {
  margin-left: 0;
}
.no-marginright {
  margin-right: 0;
}
.marginauto {
  margin: auto;
}
.borderwhite {
  border: 1px solid var(--col-blanco);
}
.displayflex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.none {
  display: none;
}
.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.no-borderbottom {
  border-bottom: none;
}
.grilla {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.bordertop {
  border-top: 1px solid var(--col-grisclaro);
}
.borderleft {
  border-left: 1px solid var(--col-grisclaro);
}
.borderright {
  border-right: 1px solid var(--col-grisclaro);
}
.borderbottom {
  border-bottom: 1px solid var(--col-grisclaro);
}
.center {
  text-align: center;
}
.centrado {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.center-v {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.centrado3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
}
.centradoleft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.centradohorizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(var(--lineheight-medium) * 3);
  white-space: normal;
}

/* ----------------------------------------------------------------
38. RESPONSIVE – BREAKPOINTS
---------------------------------------------------------------- */
@media only screen and (min-width: 1201px) {
  .oculto-full-desktop {
    display: none !important;
  }
  .ver-full-desktop {
    display: block !important;
  }
}
@media only screen and (min-width: 993px) {
  .oculto-desktop {
    display: none !important;
  }
  .ver-desktop {
    display: block !important;
  }
  .floating-btn {
    width: 365px;
    overflow: initial;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative;
  }
}
@media only screen and (min-width: 801px) {
  .oculto-desktop-medium {
    display: none !important;
  }
}
@media only screen and (min-width: 601px) {
  .oculto-tablet-desktop {
    display: none !important;
  }
  .ver-tablet-desktop {
    display: block !important;
  }
}
@media only screen and (min-width: 600px) and (max-width: 992px) {
  .oculto-tablet {
    display: none !important;
  }
  .ver-tablet {
    display: block !important;
  }
}
@media only screen and (max-width: 992px) {
  .oculto-tablet-movil {
    display: none !important;
  }
  .oculto-desktop {
    display: inline-block !important;
  }
  .ver-tablet-movil {
    display: block !important;
  }
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 998;
  }
  .logop {
    width: 90px;
  }
  .vh100 {
    height: auto;
    min-height: auto;
  }
  .vh100 .ventana {
    position: relative;
    top: auto;
    height: auto;
  }
  nav .brand-logo {
    -webkit-transform: initial;
    transform: initial;
  }
}
@media only screen and (max-width: 970px) {
  .carrusell-stop .flex,
  .carrusell-stop-970 .flex {
    display: inline-block;
  }
  .carrusell-stop,
  .carrusell-stop-970 {
    display: inline-block !important;
  }
  .stopp, .stopp *,
  .stopp-970, .stopp-970 * {
    -ms-touch-action: none !important;
    touch-action: none !important;
    pointer-events: none !important;
  }
  .stopp span.arrows a, .stopp ol.carruindi li,
  .stopp-970 span.arrows a, .stopp-970 ol.carruindi li {
    pointer-events: auto !important;
  }
  .cuatro-columna {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .sim-cartilla {
    display: block;
  }
  .sim-cc {
    display: none;
    margin-bottom: var(--margenes-4xsmall);
  }
  .sim-cc.acol {
    display: block;
  }
  .nav-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .sim-cw {
    padding-bottom: var(--margenes-4xlarge);
  }
}
@media only screen and (min-width: 768px) {
  #step-nav, .nav-row {
    display: none !important;
  }
  .sim-cc {
    display: block !important;
  }
  .cartilla-columna {
    width: 100%;
    position: relative;
    z-index: 1;
  }
}
@media only screen and (max-width: 600px) {
  .oculto-movil {
    display: none !important;
  }
  .ver-movil {
    display: block !important;
  }
  .col-24 {
    row-gap: unset;
    column-gap: unset;
  }
  .backcartilla {
    background-attachment: scroll;
    background-position: top;
    background-size: 150%;
    padding-top: 40%;
  }
  .parallax-container {
    height: 963px;
  }
  .parallax-container .parallax {
    height: 1200px;
  }
  .parallax-container .parallax img {
    width: 1462px;
    -webkit-transform: translate3d(-50%, -15%, 0) !important;
    transform: translate3d(-50%, -15%, 0) !important;
  }
  .contador>div .num {
    font-size: 4rem;
  }
  .card.sticky-action .card-action {
    font-size: var(--font-size-xsmall) !important;
  }
  .card .card-title {
    font-size: 18px;
    line-height: 23px !important;
  }

  .section.no-pad-bot {
    height: 60% !important;
  }
  .cajaonpe {
    bottom: 13%;
  }
  footer {
    text-align: center;
  }
  footer .row ul {
    font-size: var(--font-size-xsmall);
    line-height: var(--lineheight-3xsmall);
    margin-bottom: 20px;
  }
  footer small {
    font-size: var(--font-size-xsmall) !important;
    line-height: var(--lineheight-3xsmall);
  }
  .col.s10.m6.l4.xl3 {
    margin: auto;
  }
  .card-image {
    margin-bottom: var(--margenes-2xsmall);
  }
  .share ul {
    opacity: 0;
    display: none;
  }
}