:root {
    --color-text: #242424;
    --color-accent: #366BA3;
    --color-accent-bg: rgba(54, 107, 163, 0.10);
    --color-tab-active: #AD252A;
    --color-accordion-bg: #F8F8F8;
    --color-divider: #C4C4C4;
    --color-white: #FFF;
    --padding: 16px;
    --max-width: 1100px;
    --border-radius: 8px;
    --shadow: 2px 2px 8px rgba(0, 0, 0, 0.10);
    --line-gap: 5pt;
        --ok:#22c55e;      /* verde */
    --bad:#ef4444;     /* rojo */
    --ink:#0f172a;     /* texto */
    --bg:#f8fafc;      /* fondo */
    --card:#ffffff;    /* tarjeta */
    --muted:#64748b;   /* texto secundario */
    --ring: #e2e8f0;   /* bordes suaves */
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    /* text-align: justify; */
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    background: #FFF;
}

/* .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding);
    background: #FFF;
} */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--padding);
  background: #FFF;
  transition: margin-left 0.3s;
}

.main-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 18px;
}

.second-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 32px;
}

.third-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.fourth-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.circulo-img-block2 {
    margin: 24px 0 12px 0;
    text-align: center;
}

.circulo-img-block2 img {
    max-width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}


.circulo-img-block {
    /* margin-top: auto; */
    text-align: center;
}

.circulo-img-block img {
    max-width: 70%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    border-radius: 0;
}

.main-text p {
    font-size: 16px;
    margin-bottom: var(--line-gap);
    line-height: 1.5;
}


.contenedor-video {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    background-color: #f0f0f0;
    /* Opcional: color de fondo */
}

/* Tabs */
.tabs-box {
    background: var(--color-white);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: 0;
    margin-bottom: 32px;
    margin-top: 0;
    overflow: hidden;
}

.tabs-box2 {
    background: var(--color-white);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: 0;
    margin-bottom: 32px;
    margin-top: 0;
    overflow: hidden;
}

.tabs-header {
    display: flex;
    /* align-items: flex-end; */
    padding: 0 var(--padding);
    background: transparent;
    border-bottom: 1px solid #F0F0F0;
    min-height: 30px;
    gap: 0;
}

.tab-btn {
    background: none;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
    padding: 18px 0 12px 0;
    margin: 0 16px 0 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
    position: relative;
    min-width: 120px;
}

.tab-btn:last-child {
    margin-right: 0;
}

.tab-btn.active {
    color: var(--color-tab-active);
    font-weight: 700;
    border-bottom: 2px solid var(--color-tab-active);
    /* border-radius: 0 0 6px 6px; */
}

.tab-btn2 {
    background: none;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
    padding: 18px 0 12px 0;
    margin: 0 16px 0 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
    position: relative;
    min-width: 120px;
}

.tab-btn2:last-child {
    margin-right: 0;
}

.tab-btn2.active {
    color: var(--color-tab-active);
    font-weight: 700;
    border-bottom: 2px solid var(--color-tab-active);
    /* border-radius: 0 0 6px 6px; */
}

.tab-btn3 {
    background: none;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
    padding: 18px 0 12px 0;
    margin: 0 16px 0 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
    position: relative;
    min-width: 120px;
}

.tab-btn3:last-child {
    margin-right: 0;
}

.tab-btn3.active {
    color: var(--color-tab-active);
    font-weight: 700;
    border-bottom: 2px solid var(--color-tab-active);
    /* border-radius: 0 0 6px 6px; */
}

.tab-divider {
    width: 2px;
    height: 13px;
    background: var(--color-divider);
    margin: 0 12px 0 0;
    align-self: center;
    /* border-radius: 1px; */
}

.tabs-content {
    padding: var(--padding);
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.5;
    margin-top: 0;
    display: none;
}

.tabs-content.active {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.tabs-left {
    display: flex;
    flex-direction: column;
    gap: 16px; /* controla el espacio entre hijos */
}
.tabs-left p, ol, ul {
    margin: 0; /* anulamos márgenes */
}

.tabs-content .tabs-left,
.tabs-content .tabs-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.tabs-content .tabs-right {
    justify-content: stretch;
    gap: 14px;
}

.tabs-content2 {
    padding: var(--padding);
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.5;
    margin-top: 0;
    display: none;
}

.tabs-content2.active {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tabs-content2 .tabs-left,
.tabs-content2 .tabs-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.tabs-content2 .tabs-right {
    justify-content: stretch;
    gap: 14px;
}

.tabs-content3 {
    padding: var(--padding);
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.5;
    margin-top: 0;
    display: none;
}

.tabs-content3.active {
    display: flex;
    /* gap: 32px; */
    flex-wrap: wrap;
}

.tabs-content3 .tabs-left,
.tabs-content3 .tabs-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.tabs-content3 .tabs-right {
    justify-content: stretch;
    gap: 14px;
}


.blue-badge {
    background: #366BA3;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    border-radius: 6px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    min-width: 180px;
    min-height: 0;
    flex: 1 1 0;
    text-align: center;
}

    .glosarie {
      font-size: 16px;          /* tamaño de letra */
      font-weight: 600;
      color: white;             /* letras blancas */
      background-color: #366BA3; /* azul (puedes cambiarlo) */
      padding: 10px 16px;       /* espacio interno */
      border-radius: 4px;       /* esquinas un poco redondeadas */
      display: inline-block;    /* la caja ocupa solo el ancho del texto */
    }

/* Dos columnas en tabs */
.two-cols {
    display: flex;
    /* gap: 32px; */
    flex-wrap: wrap;
    width: 100%;
}


.two-cols>div {
    flex: 1 1 0;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.two-cols3 {
    display: flex;
    width: 100%;
    align-items: center;
}


.two-cols3>div {
    flex: 1 1 0;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.two-cols2 {
    display: flex;
    /* gap: 32px; */
    /* flex-wrap: wrap; */
    width: 100%;
}


.two-cols2 > div:first-child {
    flex: 2 1 0;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.two-cols2 > div:last-child {
    flex: 2 1 0;
    /* max-width: 60%; */
    min-width: 240px;
    /* height: auto; */
    /* width: 0%; */

    display: flex;
    flex-direction: column;
}

.two-cols2 > div:last-child img {
    max-width: 40%;   /* reduce al 80% del ancho del contenedor */
    height: auto;     /* mantiene proporción */
    margin: 0 auto;   /* opcional: la centra */
}


.thumbnail-placeholder {
    width: 100%;
    min-height: 80px;
    background: #F8F8F8;
    border-radius: 8px;
    margin: 18px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 15px;
    font-style: italic;
    border: 1px dashed #C4C4C4;
}

.tools-img {
    max-width: 100%;
    border-radius: 8px;
    margin: 14px 0 18px 0;
    display: block;
}

.tools-list {
    margin: 0 0 0 0;
    padding-left: 18px;
}

.tools-list li {
    margin-bottom: var(--line-gap);
}

.zona {
    position: absolute;
    right: 8%;                /* lado derecho */
    width: 15%;              /* ocupa el 20% del ancho */
    height: 33.33%;          /* cada uno un tercio de altura */
    cursor: pointer;
}

.zona1 { top: 0; }
.zona2 { top: 33.33%; }
.zona3 { top: 66.66%; }

/* Sabías que... para caja de cuestionario */
.sabiasque {
    background: var(--color-accent-bg);
    border: 1.5px solid #366BA3;
    border-radius: 6px;
    padding: 24px 16px 16px 16px;
    position: relative;
    width: 100%;
    min-width: 220px;
    box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 0;
    display: block;
}

.importante {
    display: block;
    border: 1.5px solid #9F3230;
    background: rgba(159, 50, 48, 0.1);
    border-radius: 6px;
    padding: 24px 16px 16px 16px;
    margin-top: 24px;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    min-width: 260px;
    box-sizing: border-box;
}

.sabiasque p {
    margin: 0
}

.importante p {
    margin: 0
}


.sabiasque-header {
    position: absolute;
    left: 16px;
    top: -14px;
    background: #366BA3;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    padding: 4px 12px;
    z-index: 2;
    white-space: normal;
    max-width: 80%;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    display: inline-block;
}

.importante-header {
    position: absolute;
    left: 16px;
    top: -14px;
    background: #9F3230;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    padding: 4px 12px;
    z-index: 2;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    display: inline-block;
}


.sabiasque-body {
    color: #242424;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.importante-body {
    color: #242424;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}


/* Accordions */
.accordion-block {
    margin-bottom: 16px;
    width: 100%;
}

html, body {
  overflow-x: hidden;
}


.accordion {
    background-color: var(--color-accordion-bg);
    color: var(--color-text);
    cursor: pointer;
    padding: var(--padding);
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    border-radius: var(--border-radius);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s;
}

.accordion .v-arrow {
    margin-left: auto;
    transition: transform 0.3s;
    width: 16px;
    height: 10px;
    display: inline-block;
}

.accordion .v-toggle {
    transition: all 0.3s;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}


.accordion.active .v-arrow {
    transform: rotate(180deg);
}

.panel {
    background: #FFF;
    display: none;
    padding: var(--padding);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    box-shadow: var(--shadow);
    margin-top: -2px;
}

.accordion.active+.panel {
    display: block;
    animation: fadeIn 0.3s;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.box {
    background-color: var(--color-accent-bg);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.header-box {
    background-color: #366BA3;
    color: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    /* flex-direction: column; */
    font-weight: 600;
    align-items: center;
    text-align: center;
}

.normal-box {
    background-color: var(--color-accent-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 2px;
    display: flex;
    /* flex-direction: column; */
    /* align-items: center; */
    /* text-align: center; */
}

.box-title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
    /* <-- Esto alinea el título a la izquierda */
    width: 100%;
}

.box-content {
    display: flex;
    align-items: center;
    text-align: left;
    /* <-- Esto alinea el título a la izquierda */
    width: 100%;

}

.box-icon {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}



.box-icon-ejemplo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.box-text {
    flex: 1;
}

.containerbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

.containerbox-headers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px 10px;
    /* padding: 20px; */
}

/* Botón final */
.cta-button {
    display: flex;
    align-items: center;
    color: #366BA3;
    justify-content: space-between;
    background-color: #F8F8F8;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: var(--padding);
    margin: 36px 0 0 0;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-align: left;
    gap: 12px;
    /* width: 50%; */
    outline: none;
    user-select: none;
}

.cta-button .cta-arrow {
    margin-left: 12px;
    display: flex;
    align-items: center;
}

.guia-diagrama {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    font-weight: 100;
}


.guia-diagrama-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    position: relative;
}

.guia-row-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    position: relative;

}

.blue-badge-intro {
    background: #366BA3;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 12px;
    padding: 22px 28px;
    text-align: center;
    width: 240px;
    height: 60px;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    margin-top: 1.5%;
    margin-bottom: 1.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}



.guia-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;

}

.guia-diagrama-low {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    /* Asegura que las filas ocupen 100% del ancho */
    justify-content: center;
    margin-top: 0;
    width: 100%;
}

.pad5 {
    padding: 5px
}

.guia-row-low {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.guia-row-low2 {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.guia-diagrama-for {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin: 0 auto;
    /* centra horizontalmente */
    width: 75%;
    justify-content: center;
    /* Quita justify-content si no necesitas alinear verticalmente los hijos */
}

.blue-badge-for {
    background: #366BA3;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 16px;
    padding: 22px 28px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    flex-direction: column;
    /* height: 100px; */
    flex: 1 1 calc((100% - 30px) / 4);
    /* 3 gaps de 10px entre 4 cajas */
    min-width: 150px;
}



.blue-badge-low {
    background: #366BA3;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 16px;
    padding: 22px 28px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    flex: 1 1 30%;
    max-width: 30%;
    min-height: 100px;
    /* o lo que necesites como mínimo */
    box-sizing: border-box;
    word-break: break-word;
}

.guia-row-low2 {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.blue-badge-low2 {
    background: #366BA3;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 4px;
    padding: 22px 28px;
    text-align: center;
    height: 70px;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;

    flex: 1 1 calc((100% - 30px) / 5);
    /* 3 gaps de 10px entre 4 cajas */
    min-width: 120px;
}

.icon-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* .blue-badge {
    background: #366BA3;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 4px;
    padding: 22px 28px;
    text-align: center;
    height: 60px;
    box-shadow: 0 2px 8px rgba(54, 107, 163, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;

    flex: 1 1 calc((100% - 30px) / 4);

    min-width: 150px;
} */

/* Flipp Box */
.flip-box {
    background-color: transparent;
    min-width: 230px;
    /* width: 100%; */
    max-width: 100%;
    /* min-width: 150px; */
    height: 150px;
    /* perspective: 1000px; */
    cursor: pointer;
    box-sizing: border-box;
}



/* Flipp Box */
.flip-box-low {
    background-color: transparent;
    min-width: 230px;
    font-size: 14;
    max-width: 100%;
    /* min-width: 150px; */
    height: 70px;
    /* perspective: 1000px; */
    cursor: pointer;
    box-sizing: border-box;
}


/* Flipp Box */
.flip-box-ultralow {
    background-color: transparent;
    min-width: 230px;
    font-size: 14;
    max-width: 100%;
    /* min-width: 150px; */
    height: 70px;
    /* perspective: 1000px; */
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 50px;
}


/* Flipp Box */
.flip-box180 {
    background-color: transparent;
    min-width: 230px;
    font-size: 14px;
    max-width: 100%;
    /* min-width: 150px; */
    height: 70px;
    /* perspective: 1000px; */
    cursor: pointer;
    box-sizing: border-box;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box.flipped .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* border-radius: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 20px; */
    /* font-weight: 100; */
    /* font-weight: bold; */
    color: white;
}

.flip-box-back {
    transform: rotateY(180deg);
    font-size: 8px;
    /* <--- ajusta aquí el tamaño de la letra */
}

.pad-top10 {
    padding-top: 10px;
}

.financia-img-block {
    position: relative;
    margin: 12px 0 12px 0;
    text-align: center;
}

.financia-img-block img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}


/* Imagen de la intro */
.intro-img-block {
    margin: 24px 0 12px 0;
    text-align: center;
}

.intro-img-block img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}



.cuestionario-img-block {
    margin: 24px 0 12px 0;
    text-align: center;
}

.cuestionario-img-block img {
    max-width: 97%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}

.matrices-img-block {
    margin: 24px 0 12px 0;
    text-align: center;
}

.matrices-img-block img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}

.ejemplo-img-block {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
  position: relative;
  display: inline-block;   /* se ajusta al contenido, no se estira */
  max-width: 90vw;         /* límite horizontal en viewport */
  max-height: 90vh;        /* límite vertical */
}

.modal-content2 {
  position: relative;
  display: inline-block;   /* se ajusta al contenido, no se estira */
  max-width: 30vw;         /* límite horizontal en viewport */
  /* max-height: 30vh;        límite vertical */
}

.imagen-grande {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 20px #fff;
    background-color: white;
}

.imagen-grande2 {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 20px #fff;
    background-color: white;
}

.modal2 {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.modal2-content {
    display: flex;
    position: relative;
    background-color: #366BA3;
    padding: 20px;
    border-radius: 12px;
    font-size: 1rem;
    color: #fff;
    /* height: 400px; */
    width: 600px;
    justify-content: center;
    text-align: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.modal2-close {
    position: absolute;
    top: 5px;
    right: 5px;
    /* cámbialo a `left: 20px;` si prefieres que esté a la izquierda */
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
    user-select: none;
}


.bloque-contenido {
    display: flex;
    align-items: flex-start;
    /* o 'center' si prefieres alinear verticalmente */
    gap: 20px;
}


.imagen-piramide {
    position: relative;
    width: 100%;
    text-align: center;
}
/* .financia-img-block img {
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
} */



.imagen-piramide img {
    max-width: 60%;
    border-radius: 0;
    height: auto;
    /* Para mantener la proporción */
    display: block;
    margin: 0 auto;

}

.info {
    color: grey;
    font-size: 14px !important;
}

.pointer {
    cursor: pointer;
}


.blue-pointer {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}



  .quiz{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    width:100%;
    max-width:1000px;
  }

  @media (max-width:768px){
    .quiz{
      grid-template-columns:1fr;
    }
  }

  .question{
    background:var(--card);
    border:1px solid var(--ring);
    border-radius:16px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
    padding:20px;
  }

  .legend{
    font-size:1.125rem; font-weight:700; margin-bottom:14px;
  }

  .help{
    margin:4px 0 18px; color:var(--muted); font-size:.95rem;
  }

  .options{ display:grid; gap:10px; }
  .option{ position:relative; }

  .option input{
    position:absolute; inset:0; opacity:0; pointer-events:none;
  }

  .option label{
    display:block; padding:12px 14px; border:2px solid var(--ring);
    border-radius:12px; cursor:pointer; user-select:none;
    transition:transform .05s ease, border-color .15s ease, background .15s ease;
    background:#fff;
  }

  .option label:hover{ transform:translateY(-1px); }

  .option input.correct:checked + label{
    border-color:var(--ok);
    background:color-mix(in srgb, var(--ok) 12%, #fff);
  }
  .option input.incorrect:checked + label{
    border-color:var(--bad);
    background:color-mix(in srgb, var(--bad) 10%, #fff);
  }

  .error{
    display:none;
    margin-top:14px; padding:12px 14px; border:2px solid var(--bad);
    border-radius:12px; color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, #fff);
    font-weight:600;
  }

  .question:has(input.incorrect:checked) .error{ display:block; }
  .question:has(input.correct:checked) .error{ display:none; }

  .option input:focus-visible + label{
    outline:3px solid #60a5fa; outline-offset:2px;
  }


.box2 {
    width: 320px;
    font-family: 'Inter', sans-serif;
    border-radius: 12px; /* bordes redondeados */
    overflow: hidden; /* para que el header y body respeten el redondeado */
}

.box-header {
    background-color: #005b7f; /* azul */
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
}
.box-body {
    background-color: #e0e5eb; /* gris clarito */
    padding: 15px;
}
.box-body p {
    margin: 0 0 8px 0;
}

/* Menú lateral (desktop) */
.sidebar {
  width: 240px;
  background: #f4f4f4;
  font-family: 'Inter', sans-serif;
  padding: 10px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  border-right: 1px solid #ddd;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

.menu-link {
    font-size: 16px;
}
/* Estado oculto en móvil */
.sidebar.hidden {
  display: none;
}

/* Sidebar en overlay cuando se abre en móvil */
.sidebar.overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;       /* ocupa toda la pantalla */
  height: 100%;
  background: #f4f4f4;
  border-right: none;
  z-index: 2000;     /* por encima de todo */
}

/* Listas */
.sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Botones de módulos */
.sidebar .menu-link {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}

.sidebar .menu-link:hover {
  background: #ddd;
}

/* Submenús */
.submenu {
  display: none;
  margin-left: 10px;
  padding-left: 0;
}

.submenu li a {
  display: block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}

.submenu li a:hover {
  background: #ddd;
}

/* Activos */
.sidebar .menu-link.active {
  background: var(--color-accent);
  color: white;
}

.sidebar .submenu li a.active {
  background: var(--color-accent);
  color: white;
}

/* Botón hamburguesa */
.hamburger {
  font-size: 22px;
  background: var(--sidebar-color);
  color: #333;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Reglas responsive */
@media(max-width: 1620px) {
  .container {
    margin-left: 260px; /* ancho sidebar + margen */
  }
}

.mobile-header {
    display: none;
}

/* Menú hamburguesa (visible solo en móviles) */
/* .hamburger {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 24px;
  background: #007BFF;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1000;
} */

/* Cuando la pantalla es <= 900px */
@media (max-width: 900px) {
    .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1000;
    background: #f4f4f4;

  }

.mobile-header .logo {
  margin: 0;
  font-size: 18px;
}
  .sidebar {
    display: none; /* Esconde sidebar */
    margin-top: 60px;
  }
  .container {
    margin-left: 0; /* ocupa todo el ancho */
    margin-top: 70px;
  }
  .hamburger {
    display: block;
  }

  /* Sidebar como overlay al abrir con hamburguesa */
  .sidebar.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    z-index: 999;
    background: #f4f4f4;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
  }
}

/* Responsive */
@media (max-width: 900px) {
    .noshowmobile {
        display: none !important;
    }
    .tabs-content.active,
    .two-cols {
        flex-direction: column;
        gap: 18px;
    }

    .tabs-content .tabs-right {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .blue-badge {
        min-width: 120px;
        font-size: 14px;
    }
}

@media (max-width: 700px) {
    .container {
        padding: 8px;
    }

    .containerbox {
        grid-template-columns: 1fr;
        /* Cambia a una sola columna */
    }

    .guia-row-low {
        flex-direction: column;
    }

    .icon-arrow {
        transform: rotate(90deg);
        /* convierte la flecha → en ↓ */
    }

    .containerbox-headers {
        grid-template-columns: 1fr;
    }

    .bloque-contenido {
        flex-direction: column;
    }

    .texto,
    .imagen-piramide {
        flex: 1 1 100%;
        /* Que ambos ocupen el 100% del ancho */
        padding-right: 0;
        /* Quita el padding de la imagen para evitar espacio extra */
    }

    .box-content {
        flex-direction: column;
        align-items: flex-start;
        /* para que el texto e imagen se alineen a la izquierda */
    }

    .box-icon {
        display: none;
        /* margin: 0 0 10px 0; */
        /* espacio entre icono y texto */
    }

    .main-title {
        font-size: 20px;
    }

    .tabs-header {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .tab-divider {
        display: none;
    }

    .tabs-content {
        padding: 12px;
        font-size: 15px;
    }

    .accordion,
    .panel {
        padding: 12px;
        font-size: 18px;
    }

    .importante-header,
    .sabiasque-header {
        left: 8px;
        font-size: 14px;
        padding: 2px 8px;
    }

    .importante,
    .sabiasque {
        padding: 22px 8px 12px 8px;
    }

    .two-cols>div {
        min-width: 0;
    }
}