/* ============================================================
   PasaTuPrueba - default.css UNIFICADO (extraido del index)
   fuentes + base completa + componentes + SIMO/Planes
   + slider superior + intro/cuadricula
   ============================================================ */

/* ====== BLOQUE 1 ====== */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../bundle/0e3baca8-7060-4f77-882c-988fada8faf1.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../bundle/42d5b978-343c-4a83-bfdc-18935a134275.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../bundle/8f9ae212-de0d-4a79-8eeb-75b0882676af.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../bundle/a61cfe95-6143-412c-aad8-70ab88d60e7f.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../bundle/6b56881d-fef3-4953-b659-451552eb5292.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../bundle/7cfee341-2180-4e86-954d-5b8db0500666.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/124db05a-83f8-4a58-a136-f1960bf1b456.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: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/fef79cea-4b94-4175-b21f-62c46d428dab.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: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/e108c6ec-0897-4834-a41f-5eeff20ff990.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/3cf18a5c-841f-482f-81c4-8382ec2c4cf3.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: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/df9f1b02-596e-40fa-a336-bcac16aa2107.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: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../bundle/c285ef70-f746-4deb-b499-4d1597098010.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/3cf18a5c-841f-482f-81c4-8382ec2c4cf3.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/df9f1b02-596e-40fa-a336-bcac16aa2107.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../bundle/c285ef70-f746-4deb-b499-4d1597098010.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/3cf18a5c-841f-482f-81c4-8382ec2c4cf3.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/df9f1b02-596e-40fa-a336-bcac16aa2107.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../bundle/c285ef70-f746-4deb-b499-4d1597098010.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;
}

/* ====== BLOQUE 2 ====== */
/* ============================================================
   default.css — Sistema de diseño de PasaTuPrueba
   ------------------------------------------------------------
   Hoja de estilos reutilizable para todas las páginas del sitio.
   Incluye: tokens (color/tipografía/espaciado), tema claro/oscuro,
   header oscuro permanente, switcher, ventana flotante,
   botones, modales, tabs, formularios, alertas, acordeón, tabla,
   slider hero, carrusel, galería + lightbox, parallax,
   sistema de noticias paginado, tarjetas, footer.

   Uso en cualquier página:
     <!-- default.css removed: page is self-styled -->
     <html lang="es-CO" data-theme="light">  (o data-theme="dark")

   Tipografías (cargar desde Google Fonts):
     Manrope         — texto general
     Newsreader      — citas / editorial
   ============================================================ */

/* ============================================================
   DEFAULT.CSS — Sistema de diseño PasaTuPrueba
   ============================================================ */

/* --- 1. TOKENS DE TEMA: claro (por defecto) y oscuro -------- */
:root,
[data-theme="light"]{
  /* Colores marca (constantes en ambos modos) */
  --ink:#1A0B4E;        --violet:#6A1FD0;
  --violet-2:#7C4DFF;   --magenta:#C42A7E;
  --orange:#FF5320;     --orange-2:#FF8A00;
  --grad: linear-gradient(120deg,#1A0B4E 0%,#6A1FD0 30%,#C42A7E 58%,#FF5320 80%,#FF8A00 100%);
  /* Superficies modo claro */
  --bg:#FAFAF7;         --bg-2:#FFFFFF;         --bg-3:#F4F1EB;
  --surface:#FFFFFF;    --surface-2:#FBF9F5;
  --text:#1A0B4E;       --text-2:#1F1B2E;       --text-mute:#54515F;
  --rule:#E8E4DC;       --rule-2:#D6D1C6;
  --shadow-sm: 0 4px 14px -8px rgba(26,11,78,.20);
  --shadow-md: 0 18px 40px -22px rgba(26,11,78,.30);
  --shadow-lg: 0 40px 80px -40px rgba(26,11,78,.40);
  /* Grid de fondo punteado — MODO CLARO */
  --grid:        rgba(58,58,66,.48);
  --grid-vertex: rgba(24,24,30,.68);
  --grid-node:   rgba(10,10,16,.85);
  /* Header (SIEMPRE oscuro pero con tonalidad propia por modo) */
  --nav-bg: rgba(26,11,78,.85);
  --nav-border: rgba(255,255,255,.08);
  --nav-text: #FFFFFF;
  --nav-text-mute: rgba(255,255,255,.65);
  --nav-accent: #FF8A00;
}
[data-theme="dark"]{
  --bg:#0A0420;        --bg-2:#120736;        --bg-3:#1A0B4E;
  --surface:#160A3D;   --surface-2:#1F1158;
  --text:#F4F1EB;      --text-2:#E8E4DC;      --text-mute:#B3ADC6;
  --rule:rgba(255,255,255,.10);  --rule-2:rgba(255,255,255,.18);
  --shadow-sm: 0 4px 14px -8px rgba(0,0,0,.50);
  --shadow-md: 0 18px 40px -22px rgba(0,0,0,.65);
  --shadow-lg: 0 40px 80px -40px rgba(0,0,0,.80);
  /* Grid de fondo punteado — MODO OSCURO */
  --grid:        rgba(210,204,236,.25);
  --grid-vertex: rgba(228,223,248,.48);
  --grid-node:   rgba(255,255,255,.70);
  /* Header en modo oscuro: aún más oscuro y opaco para CONTRASTAR */
  --nav-bg: rgba(26,11,78,.85);
  --nav-border: rgba(255,255,255,.05);
}

/* --- 2. RESET Y BASE --------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; background:var(--bg); transition:background-color .4s ease}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--text); background:transparent;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:80px;
  transition: color .4s ease;
}
/* Cuadrícula de fondo PUNTEADA + PARALLAX (claro/oscuro) */
.grid-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.82; will-change:background-position;
  background-image:
    radial-gradient(circle at 0 0, var(--grid-node) 1.25px, transparent 1.9px),
    radial-gradient(circle at 0 0, var(--grid-vertex) 1.0px, transparent 1.5px),
    radial-gradient(circle at 0 0, var(--grid) 0.62px, transparent 1.15px),
    radial-gradient(circle at 0 0, var(--grid) 0.62px, transparent 1.15px);
  background-size:128px 128px, 32px 32px, 32px 6px, 6px 32px;
  -webkit-mask-image:radial-gradient(ellipse 100% 92% at 50% 35%, #000 0%, #000 60%, transparent 100%);
          mask-image:radial-gradient(ellipse 100% 92% at 50% 35%, #000 0%, #000 60%, transparent 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.serif{font-family:'Newsreader',Georgia,serif}

/* --- 3. TIPOGRAFÍA DEL SISTEMA ----------------------------- */
.eyebrow{
  font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--violet);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--magenta)}
[data-theme="dark"] .eyebrow{color:var(--violet-2)}
h1.display{font-weight:200;font-size:clamp(40px,5.5vw,72px);line-height:1.02;letter-spacing:-.035em;color:var(--text)}
h1.display b{font-weight:700;color:var(--violet)}
[data-theme="dark"] h1.display b{color:var(--violet-2)}
h2.section{font-weight:300;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.025em;line-height:1.08;color:var(--text)}
h2.section b{font-weight:700;color:var(--violet)}
[data-theme="dark"] h2.section b{color:var(--violet-2)}
.lead{font-weight:400;font-size:18px;line-height:1.55;color:var(--text-mute);max-width:620px}

/* --- 4. HEADER (siempre oscuro, switcher de tema, hamburguesa) -- */
.nav{
  position:fixed; left:0; right:0; bottom:0; height:72px;
  background:var(--nav-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--nav-border); z-index:60;
  display:flex; align-items:center;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px}
.nav .brand{display:flex;align-items:center;gap:11px}
.nav .brand svg{height:32px;width:auto;display:block}
.nav .brand .bn{font-weight:700;font-size:17px;color:var(--nav-text);letter-spacing:-.02em}
.nav .brand .bn span{color:var(--nav-accent)}
.nav .menu{display:flex;align-items:center;gap:30px}
.nav .menu a{font-size:14px;font-weight:700;color:var(--nav-text);transition:color .15s}
.nav .menu a:hover{color:var(--nav-accent)}
.nav .menu a.active{color:var(--nav-accent)}
.nav .tools{display:flex;align-items:center;gap:14px}
/* Theme switcher: sol / luna */
.theme-toggle{
  width:54px;height:30px;border-radius:99px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); cursor:pointer; position:relative;
  display:inline-flex; align-items:center; padding:0 4px; transition:background .25s;
}
.theme-toggle .knob{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#FF8A00,#FF5320);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.4,0,.2,1),background .25s;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.theme-toggle .knob svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.06)}
[data-theme="dark"] .theme-toggle .knob{transform:translateX(24px);background:linear-gradient(135deg,#6A1FD0,#1A0B4E)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* mobile sheet */
.mobile-sheet{
  position:fixed; left:0; right:0; bottom:72px; background:var(--surface);
  border-top:1px solid var(--rule); box-shadow:var(--shadow-lg); z-index:55;
  transform:translateY(120%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding:18px 28px 24px;
}
.mobile-sheet.show{transform:translateY(0)}
.mobile-sheet a{display:block;padding:14px 0;font-size:15.5px;font-weight:600;color:var(--text);border-bottom:1px solid var(--rule)}
.mobile-sheet a:last-child{border-bottom:0}

/* --- 5. VENTANA FLOTANTE PERMANENTE (curso gratuito) ------ */
.float-cta{
  position:fixed; left:18px; bottom:90px; z-index:55;
  display:flex; align-items:center; gap:12px;
  padding:12px 18px 12px 14px; border-radius:99px;
  background:var(--grad); color:#fff; font-weight:700; font-size:13.5px;
  box-shadow:0 18px 40px -10px rgba(106,31,208,.55);
  border:0; cursor:pointer; transition:.25s;
  animation: ctaPulse 3s ease-in-out infinite;
}
.float-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 24px 50px -10px rgba(196,42,126,.7)}
.float-cta .icon{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
}
.float-cta .icon svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.float-cta .lbl small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-top:1px}
.float-cta .close-x{
  width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;margin-left:4px;
}
.float-cta .close-x:hover{background:rgba(0,0,0,.35)}
.float-cta .close-x svg{width:11px;height:11px;stroke:#fff;stroke-width:2.5;stroke-linecap:round;fill:none}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 18px 40px -10px rgba(106,31,208,.55)}
  50%{box-shadow:0 18px 50px -8px rgba(255,83,32,.55)}
}
@media(max-width:600px){
  .float-cta{left:14px;right:14px;justify-content:center}
}

/* --- 6. HERO DE LA BIBLIOTECA ----------------------------- */
.hero{padding:90px 0 60px;position:relative;overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.hero .b1{width:520px;height:520px;background:var(--violet);opacity:.18;top:-180px;right:-80px}
.hero .b2{width:380px;height:380px;background:var(--orange);opacity:.12;bottom:-150px;left:-80px}
.hero h1{margin-top:18px}
.hero .lead{margin-top:22px}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.badge{
  font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--rule);color:var(--text-mute);
}
.badge.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.badge.grad{background:var(--grad);color:#fff;border:0}

/* --- 7. SECCIONES Y CABECERAS DE BLOQUE ------------------ */
section.block{padding:72px 0;position:relative}
.block-head{display:flex;align-items:baseline;gap:18px;margin-bottom:40px;flex-wrap:wrap}
.block-head .idx{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:13px;color:var(--magenta);letter-spacing:.12em}

/* --- 8. BOTONES ----------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:14px;border:0;cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .2s, color .2s;
  text-decoration:none;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(106,31,208,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(106,31,208,.7)}
.btn-secondary{background:var(--ink);color:#fff}
.btn-secondary:hover{transform:translateY(-2px);background:var(--violet)}
[data-theme="dark"] .btn-secondary{background:var(--violet);color:#fff}
[data-theme="dark"] .btn-secondary:hover{background:var(--violet-2)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--rule-2)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
[data-theme="dark"] .btn-ghost:hover{color:var(--violet-2);border-color:var(--violet-2)}
.btn-offer{background:linear-gradient(120deg,#FF5320,#FF8A00);color:#fff;box-shadow:0 14px 30px -12px rgba(255,83,32,.55)}
.btn-offer:hover{transform:translateY(-2px)}
.btn-disabled{background:var(--rule);color:var(--text-mute);cursor:not-allowed;opacity:.7}
.btn-disabled:hover{transform:none}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:10px}
.btn-lg{padding:18px 32px;font-size:16px;border-radius:16px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* --- 9. TARJETAS BÁSICAS Y CONTENEDORES ----------------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:28px;transition:.2s;box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.card .ic{width:50px;height:50px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--text)}
.card p{font-weight:400;font-size:14.5px;color:var(--text-mute);line-height:1.6;margin-top:9px}

/* --- 10. MODALES --------------------------------------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(8,3,24,.55);backdrop-filter:blur(8px);
  z-index:80;display:none;align-items:center;justify-content:center;
  padding:24px;animation:fadeIn .25s;
}
.modal-backdrop.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border-radius:22px;max-width:520px;width:100%;
  padding:38px;box-shadow:var(--shadow-lg);position:relative;
  animation:popIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal .close{
  position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  background:var(--bg-3);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.modal .close:hover{background:var(--rule)}
.modal .close svg{width:14px;height:14px;stroke:var(--text);stroke-width:2.5;fill:none;stroke-linecap:round}
.modal h3{font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--text)}
.modal p{font-weight:400;font-size:15.5px;color:var(--text-mute);line-height:1.55;margin-top:12px}
.modal .actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.modal-icon{
  width:60px;height:60px;border-radius:18px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.modal-icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- 11. INPUTS Y FORMULARIOS -------------------------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);font-family:'Montserrat','Helvetica Neue',sans-serif}
.input,.select,.textarea{
  font-family:inherit;font-size:15px;padding:13px 16px;border-radius:12px;
  border:1.5px solid var(--rule);background:var(--surface-2);color:var(--text);
  transition:border .18s, background .18s;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--violet);background:var(--surface)}
.textarea{min-height:100px;resize:vertical;font-family:inherit}
.checkbox-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2);cursor:pointer}
.checkbox-row input{accent-color:var(--violet);width:18px;height:18px}

/* --- 12. TABS ----------------------------------------- */
.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--rule);padding:5px;border-radius:14px;width:fit-content;flex-wrap:wrap}
.tab{
  font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;
  border-radius:10px;border:0;background:transparent;color:var(--text-mute);
  cursor:pointer;transition:.2s;
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .tab.active{background:var(--ink)}
.tab-panel{display:none;margin-top:30px;padding:30px;background:var(--surface);border:1px solid var(--rule);border-radius:18px;animation:fadeIn .3s}
.tab-panel.active{display:block}

/* --- 13. ALERTAS Y BADGES ----------------------------- */
.alert{display:flex;gap:14px;padding:16px 20px;border-radius:14px;font-size:14.5px;line-height:1.5;border:1.5px solid}
.alert .ic{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.alert .ic svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.alert.info{background:rgba(106,31,208,.08);border-color:rgba(106,31,208,.25);color:var(--violet)}
.alert.info .ic{background:var(--violet)}
.alert.success{background:rgba(31,138,91,.10);border-color:rgba(31,138,91,.30);color:#1F8A5B}
.alert.success .ic{background:#1F8A5B}
.alert.warn{background:rgba(255,138,0,.10);border-color:rgba(255,138,0,.30);color:#B36300}
.alert.warn .ic{background:#FF8A00}
.alert.error{background:rgba(200,49,42,.10);border-color:rgba(200,49,42,.30);color:#C8312A}
.alert.error .ic{background:#C8312A}
[data-theme="dark"] .alert.info{color:#B797FF}
[data-theme="dark"] .alert.warn{color:#FFB561}

/* --- 14. ACORDEONES ----------------------------------- */
.accordion{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--surface)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-item:last-child{border-bottom:0}
.acc-head{
  width:100%;background:none;border:0;cursor:pointer;padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:inherit;font-size:15.5px;font-weight:600;color:var(--text);text-align:left;
}
.acc-head:hover{background:var(--surface-2)}
.acc-head .chev{transition:transform .25s;flex-shrink:0}
.acc-head .chev svg{width:16px;height:16px;stroke:var(--violet);fill:none;stroke-width:2.5;stroke-linecap:round}
.acc-item.open .acc-head .chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 22px;color:var(--text-mute);font-size:14.5px;line-height:1.6;font-weight:400}
.acc-item.open .acc-body{max-height:300px;padding:0 22px 22px}

/* --- 15. TABLA --------------------------------------- */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--rule);font-size:14px}
.tbl th{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--surface-2)}

/* --- 16. SLIDER HERO (banner grande con varias diapositivas) -- */
.slider{position:relative;border-radius:24px;overflow:hidden;height:420px;background:var(--ink)}
.slide{position:absolute;inset:0;display:flex;align-items:center;padding:50px;opacity:0;transition:opacity .6s;color:#fff}
.slide.active{opacity:1}
.slide .slide-bg{position:absolute;inset:0;z-index:0}
.slide.s1 .slide-bg{background:linear-gradient(135deg,#1A0B4E,#6A1FD0)}
.slide.s2 .slide-bg{background:linear-gradient(135deg,#6A1FD0,#C42A7E)}
.slide.s3 .slide-bg{background:linear-gradient(135deg,#C42A7E,#FF5320,#FF8A00)}
.slide .slide-bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 25% 30%,rgba(255,255,255,.18) 1px,transparent 1.5px);background-size:24px 24px;opacity:.5}
.slide-content{position:relative;z-index:1;max-width:520px}
.slide-content .tag{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.slide-content h3{font-weight:300;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.025em;line-height:1.1;margin:12px 0 0}
.slide-content h3 b{font-weight:700}
.slide-content p{font-weight:400;font-size:16px;color:rgba(255,255,255,.78);margin:14px 0 0;line-height:1.5}
.slide-content .btn{margin-top:22px}
.slider-arrows{position:absolute;bottom:24px;right:24px;display:flex;gap:8px;z-index:2}
.slider-arrows button{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);
}
.slider-arrows button:hover{background:rgba(255,255,255,.28)}
.slider-arrows svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.slider-dots{position:absolute;bottom:30px;left:50px;display:flex;gap:8px;z-index:2}
.slider-dots button{width:28px;height:5px;border-radius:99px;background:rgba(255,255,255,.3);border:0;cursor:pointer;transition:.2s;padding:0}
.slider-dots button.active{background:#FF8A00;width:42px}

/* --- 17. CARRUSEL DE FOTOS ---------------------------- */
.carousel{position:relative;overflow:hidden;border-radius:18px;background:var(--surface);border:1px solid var(--rule)}
.carousel-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carousel-item{flex:0 0 100%;aspect-ratio:16/9;display:flex;align-items:flex-end;padding:24px;color:#fff;position:relative}
.carousel-item::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55) 100%)}
.carousel-item > *{position:relative}
.carousel-item h4{font-weight:600;font-size:22px;letter-spacing:-.015em}
.carousel-item p{font-size:14px;color:rgba(255,255,255,.8);margin-top:5px}
.ci1{background:linear-gradient(135deg,#6A1FD0,#C42A7E)}
.ci2{background:linear-gradient(135deg,#1A0B4E,#6A1FD0)}
.ci3{background:linear-gradient(135deg,#C42A7E,#FF5320)}
.ci4{background:linear-gradient(135deg,#FF5320,#FF8A00)}
.ci5{background:linear-gradient(135deg,#1A0B4E,#C42A7E)}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%;padding:0 18px;z-index:2;pointer-events:none}
.carousel-nav button{
  pointer-events:auto;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.carousel-nav button:hover{background:#fff;transform:scale(1.08)}
.carousel-nav svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* --- 18. GALERÍA DE FOTOS (mosaico + lightbox) -------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery .g-item{aspect-ratio:1;border-radius:12px;cursor:pointer;transition:.25s;position:relative;overflow:hidden}
.gallery .g-item:hover{transform:scale(1.04);box-shadow:var(--shadow-md)}
.gallery .g-item.tall{aspect-ratio:1/2;grid-row:span 2}
.gallery .g-item.wide{aspect-ratio:2;grid-column:span 2}
.lightbox{
  position:fixed;inset:0;background:rgba(8,3,24,.92);z-index:90;
  display:none;align-items:center;justify-content:center;padding:30px;
  backdrop-filter:blur(10px);
}
.lightbox.show{display:flex;animation:fadeIn .25s}
.lightbox .lb-content{max-width:900px;width:100%;aspect-ratio:16/10;border-radius:20px;position:relative;animation:popIn .35s}
.lightbox .lb-close{
  position:absolute;top:-50px;right:0;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lightbox .lb-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round}

/* --- 19. SECCIÓN PARALLAX --------------------------- */
.parallax{
  height:480px;position:relative;border-radius:24px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(106,31,208,.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255,83,32,.6) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(196,42,126,.5) 0%, transparent 60%),
    linear-gradient(180deg, #1A0B4E 0%, #0A0420 100%);
  background-attachment: fixed; background-size: cover; background-position: center;
}
.parallax::before{
  content:"";position:absolute;inset:0;
  background-image: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 28px 28px; opacity:.4;
}
.parallax .px-content{position:relative;z-index:1;max-width:640px;padding:0 30px}
.parallax h2{font-weight:200;font-size:clamp(34px,4.5vw,58px);letter-spacing:-.03em;line-height:1.05}
.parallax h2 b{font-weight:700}
.parallax p{font-weight:400;font-size:18px;color:rgba(255,255,255,.78);margin:20px 0 0;line-height:1.5}
.parallax .btn{margin-top:30px}

/* --- 20. SISTEMA DE NOTICIAS PAGINADO ---------------- */
.news-page{display:none;animation:fadeIn .35s}
.news-page.active{display:block}
.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.news-thumb{aspect-ratio:16/10;background:var(--grad);position:relative;display:flex;align-items:flex-end;padding:14px}
.news-thumb .cat{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);padding:5px 11px;border-radius:99px;backdrop-filter:blur(4px)}
.news-body{padding:22px;display:flex;flex-direction:column;flex:1}
.news-body .meta{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:10.5px;color:var(--magenta);letter-spacing:.1em;text-transform:uppercase}
.news-body h4{font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--text);margin:10px 0 0}
.news-body p{font-family:'Newsreader',serif;font-weight:400;font-size:14.5px;color:var(--text-mute);margin:9px 0 0;flex:1;line-height:1.5}
/* Paginador */
.pager{display:flex;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pager button{
  min-width:42px;height:42px;border-radius:11px;border:1.5px solid var(--rule);
  background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;
  font-weight:600;font-size:14px;transition:.18s;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
}
.pager button:hover{border-color:var(--violet);color:var(--violet)}
.pager button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="dark"] .pager button.active{background:var(--violet);border-color:var(--violet)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}

/* --- 21. FOOTER ------------------------------------- */
footer.foot{padding:60px 0 30px;border-top:1px solid var(--rule);margin-top:60px}
footer.foot .bn{font-weight:700;font-size:20px;color:var(--text);letter-spacing:-.02em}
footer.foot .bn span{color:var(--violet)}
[data-theme="dark"] footer.foot .bn span{color:var(--violet-2)}
footer.foot .endorse{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute);margin-top:10px}
footer.foot .legal{margin-top:30px;font-size:12px;color:var(--text-mute);text-align:center}

/* --- 22. UTILIDADES Y RESPONSIVE -------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.swatch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.swatch{border-radius:12px;border:1px solid var(--rule);padding:14px;background:var(--surface)}
.swatch .chip{height:70px;border-radius:9px;margin-bottom:10px}
.swatch .nm{font-weight:600;font-size:13px}
.swatch .hx{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;color:var(--text-mute);margin-top:3px}

@media(max-width:980px){
  .nav .menu{display:none}
  .burger{display:flex}
  .grid-3,.grid-4,.news-list{grid-template-columns:1fr 1fr}
  .swatch-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .grid-2,.grid-3,.grid-4,.news-list{grid-template-columns:1fr}
  .swatch-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  section.block{padding:54px 0}
  .modal{padding:28px 22px}
  .slider{height:340px}
  .slide{padding:30px}
}

/* ============================================================
   FIN DEFAULT.CSS
   ============================================================ */

/* ====== BLOQUE 3 ====== */
/* ============================================================
   landing.css — Home de PasaTuPrueba
   Extiende default.css: intro, animaciones, nuevas secciones.
   Toda animación de entrada respeta prefers-reduced-motion.
   ============================================================ */

/* --- 0. INTRO A PANTALLA COMPLETA (partículas → logo) ------ */
.intro{
  position:fixed; inset:0; z-index:200;
  background:
    radial-gradient(ellipse at 50% 40%, #2A1170 0%, #1A0B4E 45%, #0A0420 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .8s ease, visibility .8s;
}
.intro::before{ /* cuadrícula de marca */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
          mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
  animation:introGridDrift 14s linear infinite;
}
@keyframes introGridDrift{to{background-position:40px 40px}}
.intro.done{opacity:0; visibility:hidden; pointer-events:none}
.intro-canvas{position:absolute; inset:0; width:100%; height:100%}
.intro-stage{position:relative; z-index:2; text-align:center; transform:translateZ(0)}
.intro-logo{
  width:clamp(96px,13vw,150px); height:auto; display:block; margin:0 auto;
  opacity:0; transform:scale(.82);
  filter:drop-shadow(0 24px 60px rgba(124,77,255,.55));
}
.intro-logo.show{
  animation:introLogoPop 1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes introLogoPop{
  0%{opacity:0; transform:scale(.82)}
  100%{opacity:1; transform:scale(1)}
}
.intro-word{
  margin-top:26px; font-family:'Manrope',sans-serif; font-weight:200;
  font-size:clamp(28px,5vw,52px); letter-spacing:-.03em; color:#fff;
  opacity:0;
}
.intro-word b{font-weight:700;
  background:linear-gradient(100deg,#7C4DFF,#C42A7E 50%,#FF8A00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.intro-word.show{animation:introFadeUp .9s .15s cubic-bezier(.2,.8,.2,1) forwards}
.intro-sub{
  margin-top:14px; font-family:'Montserrat','Helvetica Neue',sans-serif; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.55);
  opacity:0;
}
.intro-sub.show{animation:introFadeUp .9s .35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes introFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.intro-skip{
  position:absolute; bottom:28px; right:30px; z-index:3;
  font-family:'Montserrat','Helvetica Neue',sans-serif; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:9px 16px; border-radius:99px; cursor:pointer; transition:.2s;
}
.intro-skip:hover{color:#fff; border-color:rgba(255,255,255,.35)}
.intro-sweep{ /* barrido de gradiente al revelar */
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:var(--grad); transform:translateY(101%);
}
.intro.wipe .intro-sweep{animation:introSweep 1.05s cubic-bezier(.7,0,.2,1) forwards}
@keyframes introSweep{
  0%{transform:translateY(101%)}
  42%{transform:translateY(0)}
  100%{transform:translateY(-101%)}
}
/* bloquear scroll mientras corre la intro */
body.intro-lock{overflow:hidden; height:100vh}

/* --- 1. REVEAL AL HACER SCROLL ------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(34px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}
  .reveal.left{transform:translateX(-40px)}
  .reveal.right{transform:translateX(40px)}
  .reveal.left.in,.reveal.right.in{transform:none}
  .reveal.zoom{transform:scale(.94)}
  .reveal.zoom.in{transform:scale(1)}
  /* stagger por data-d */
  [data-d="1"]{transition-delay:.06s}[data-d="2"]{transition-delay:.12s}
  [data-d="3"]{transition-delay:.18s}[data-d="4"]{transition-delay:.24s}
  [data-d="5"]{transition-delay:.30s}[data-d="6"]{transition-delay:.36s}
}

/* --- 2. FLOTANTES / DECORATIVOS ----------------------------- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatYsoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.float-a{animation:floatY 6s ease-in-out infinite}
.float-b{animation:floatYsoft 5s ease-in-out infinite .6s}
.float-c{animation:floatY 7s ease-in-out infinite 1.2s}
@media (prefers-reduced-motion: reduce){
  .float-a,.float-b,.float-c{animation:none}
}

/* --- 3. HERO HOME ------------------------------------------- */
.home-hero{padding:104px 0 70px; position:relative; overflow:hidden}
.home-hero .hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center;
}
.home-hero h1{margin-top:20px; max-width:14ch}
.home-hero .lead{margin-top:22px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; align-items:center}
.hero-trust{display:flex; gap:22px; align-items:center; margin-top:34px; flex-wrap:wrap}
.hero-trust .stars{display:flex; gap:3px}
.hero-trust .stars svg{width:17px; height:17px; fill:#FF8A00}
.hero-trust .t-txt{font-size:13px; color:var(--text-mute); line-height:1.4}
.hero-trust .t-txt b{color:var(--text); font-weight:700}
.hero-avatars{display:flex}
.hero-avatars .av{
  width:38px; height:38px; border-radius:50%; border:2.5px solid var(--bg);
  margin-left:-12px; background-size:cover; background-position:center;
}
.hero-avatars .av:first-child{margin-left:0}

/* visual del hero: marco con slot + chips flotantes */
.hero-visual{position:relative}
.hero-frame{
  position:relative; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--rule);
  background:var(--grad);
}
.hero-frame image-slot{display:block; width:100%; aspect-ratio:4/4.6}
.hero-glow{
  position:absolute; inset:-12% -8%; z-index:-1; border-radius:40px;
  background:var(--grad); filter:blur(46px); opacity:.32;
}
.chip-float{
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:16px; padding:13px 16px; box-shadow:var(--shadow-md);
}
.chip-float .ci{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.chip-float .ci svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chip-float .ct{font-size:12.5px; line-height:1.3}
.chip-float .ct b{display:block; font-weight:700; font-size:15px; color:var(--text)}
.chip-float .ct span{color:var(--text-mute); font-size:11.5px}
.chip-1{top:8%; left:-7%}
.chip-2{bottom:14%; right:-8%}
.chip-3{bottom:-4%; left:10%}

/* --- 4. BARRA DE CONFIANZA (marquee de concursos) ----------- */
.trust-bar{padding:34px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden}
.trust-bar .lbl{font-family:'Montserrat','Helvetica Neue',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); text-align:center; margin-bottom:22px}
.marquee{display:flex; gap:46px; width:max-content; animation:marquee 26s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee .item{
  font-family:'Montserrat','Helvetica Neue',sans-serif; font-weight:500; font-size:17px;
  letter-spacing:.04em; color:var(--text-2); opacity:.7; white-space:nowrap;
  display:flex; align-items:center; gap:11px;
}
.marquee .item::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--magenta)}
@media (prefers-reduced-motion: reduce){.marquee{animation:none; flex-wrap:wrap; justify-content:center}}

/* --- 5. CONTADORES / STATS ---------------------------------- */
.stats-band{background:var(--ink); border-radius:26px; padding:54px 40px; position:relative; overflow:hidden}
[data-theme="dark"] .stats-band{background:var(--bg-2); border:1px solid var(--rule)}
.stats-band::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 20% 20%, rgba(124,77,255,.4), transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(255,83,32,.35), transparent 45%);
}
.stats-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:30px}
.stat .num{font-weight:200; font-size:clamp(38px,4.4vw,58px); letter-spacing:-.03em; color:#fff; line-height:1}
.stat .num b{font-weight:700;
  background:linear-gradient(100deg,#FF8A00,#FF5320); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat .cap{font-size:13.5px; color:rgba(255,255,255,.78); margin-top:10px; line-height:1.4; font-weight:400}
.stat .bar{height:3px; width:42px; border-radius:99px; background:var(--grad); margin-top:16px}

/* --- 6. SECCIÓN "CÓMO FUNCIONA" (pasos) --------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step}
.step-card{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:20px; padding:30px; box-shadow:var(--shadow-sm); transition:.25s}
.step-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent}
.step-card .sn{
  counter-increment:step; font-family:'Montserrat','Helvetica Neue',sans-serif; font-weight:600;
  font-size:13px; color:#fff; width:40px; height:40px; border-radius:12px;
  background:var(--grad); display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.step-card .sn::before{content:"0" counter(step)}
.step-card h3{font-weight:600; font-size:19px; color:var(--text); letter-spacing:-.01em}
.step-card p{font-weight:400; font-size:14.5px; color:var(--text-mute); line-height:1.6; margin-top:9px}

/* --- 7. TABS con visual --------------------------------------*/
.tab-rich{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.tab-rich .t-media{border-radius:18px; overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow-md)}
.tab-rich .t-media image-slot{display:block; width:100%; aspect-ratio:16/11}
.tab-rich h3{font-weight:600; font-size:24px; letter-spacing:-.02em; color:var(--text)}
.tab-rich p{font-weight:400; font-size:15.5px; color:var(--text-mute); line-height:1.6; margin-top:12px}
.tab-rich ul{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px}
.tab-rich li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text-2); line-height:1.45}
.tab-rich li svg{width:20px; height:20px; flex-shrink:0; margin-top:1px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; background:var(--grad); border-radius:50%; padding:3px}

/* --- 8. SLOTS DE IMAGEN EN COMPONENTES EXISTENTES ----------- */
.carousel-item.has-slot{padding:0}
.carousel-item .ci-slot{position:absolute; inset:0; z-index:0}
.carousel-item .ci-slot image-slot{width:100%; height:100%; display:block}
.carousel-item .ci-cap{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:24px}
.slide .slide-slot{position:absolute; inset:0; z-index:0}
.slide .slide-slot image-slot{width:100%; height:100%; display:block}
.slide .slide-shade{position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(10,4,32,.86) 0%, rgba(26,11,78,.55) 55%, rgba(26,11,78,.15) 100%)}
.slide.s2 .slide-shade{background:linear-gradient(100deg, rgba(58,15,90,.86) 0%, rgba(106,31,208,.5) 60%, transparent 100%)}
.slide.s3 .slide-shade{background:linear-gradient(100deg, rgba(120,20,60,.86) 0%, rgba(196,42,126,.5) 60%, transparent 100%)}
.slide .slide-content{z-index:2}
.news-thumb image-slot{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.news-thumb::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45) 100%)}
.news-thumb .cat{z-index:2}
.gallery .g-item image-slot{width:100%; height:100%; display:block}

/* --- 9. SECCIÓN TESTIMONIOS --------------------------------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.testi{background:var(--surface); border:1px solid var(--rule); border-radius:20px; padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:.25s}
.testi:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.testi .stars{display:flex; gap:3px; margin-bottom:16px}
.testi .stars svg{width:16px; height:16px; fill:#FF8A00}
.testi blockquote{font-family:'Newsreader',serif; font-weight:300; font-size:18px; line-height:1.5; color:var(--text-2); flex:1; letter-spacing:-.01em}
.testi .who{display:flex; align-items:center; gap:12px; margin-top:22px}
.testi .who image-slot{width:46px; height:46px; display:block; flex-shrink:0}
.testi .who .nm{font-weight:700; font-size:14px; color:var(--text)}
.testi .who .ro{font-size:12px; color:var(--text-mute); font-family:'Montserrat','Helvetica Neue',sans-serif; letter-spacing:.04em; margin-top:2px}

/* --- 10. CTA FINAL grande ----------------------------------- */
.final-cta{
  border-radius:28px; overflow:hidden; position:relative; padding:70px 50px; text-align:center;
  background:var(--grad);
}
.final-cta::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:26px 26px; opacity:.4}
.final-cta .fc-in{position:relative; z-index:1; max-width:640px; margin:0 auto}
.final-cta h2{font-weight:200; font-size:clamp(32px,4.2vw,52px); letter-spacing:-.03em; color:#fff; line-height:1.05}
.final-cta h2 b{font-weight:700}
.final-cta p{font-weight:400; font-size:18px; color:rgba(255,255,255,.85); margin:18px 0 0; line-height:1.5}
.final-cta .btn-row{justify-content:center; margin-top:32px}
.final-cta .btn-on-grad{background:#fff; color:var(--violet)}
.final-cta .btn-on-grad:hover{transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(0,0,0,.35)}
.final-cta .btn-on-ghost{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.4); backdrop-filter:blur(6px)}
.final-cta .btn-on-ghost:hover{background:rgba(255,255,255,.22); transform:translateY(-2px)}

/* --- 11. AJUSTES NAV (home) --------------------------------- */
.nav .menu a.cta-link{
  background:var(--grad); color:#fff; padding:9px 18px; border-radius:99px;
}
.nav .menu a.cta-link:hover{color:#fff; transform:translateY(-1px)}

/* botón hover: brillo en btn-primary */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg); transition:none;
}
.btn-primary:hover::after{animation:btnShine .7s ease}
@keyframes btnShine{to{left:130%}}

/* section title centrada */
.sec-head-center{text-align:center; max-width:680px; margin:0 auto 48px}
.sec-head-center .eyebrow{justify-content:center; margin-bottom:14px}
.sec-head-center .lead{margin:16px auto 0}

/* --- 12. RESPONSIVE ----------------------------------------- */
@media(max-width:980px){
  .home-hero .hero-grid{grid-template-columns:1fr; gap:46px}
  .hero-visual{max-width:460px; margin:0 auto; width:100%}
  .stats-grid{grid-template-columns:1fr 1fr; gap:34px 24px}
  .steps,.testi-grid{grid-template-columns:1fr 1fr}
  .tab-rich{grid-template-columns:1fr; gap:24px}
}
@media(max-width:640px){
  .home-hero{padding:80px 0 50px}
  .stats-grid{grid-template-columns:1fr 1fr; gap:30px 18px}
  .steps,.testi-grid{grid-template-columns:1fr}
  .chip-1{left:0}.chip-2{right:0}.chip-float{transform:scale(.9)}
  .final-cta{padding:48px 24px}
  .stats-band{padding:40px 24px}
}

/* ====== BLOQUE 4 ====== */

/* ===== SECCIONES INTEGRADAS DESDE index.html (estilo completa) ===== */
/* --- SIMO --- */
#simo .card{position:relative;padding-top:30px}
.simo-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--grad);color:#fff;font-family:'Montserrat','Helvetica Neue',sans-serif;font-weight:600;font-size:18px;margin-bottom:16px}
.simo-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:42px}
.simo-meta{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:13px;color:var(--text-mute);letter-spacing:.04em}
/* --- PLANES --- */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:8px}
.plan-card{display:flex;flex-direction:column;position:relative}
.plan-card.featured{border-color:var(--violet);box-shadow:0 26px 60px -22px rgba(106,31,208,.55)}
[data-theme="dark"] .plan-card.featured{border-color:var(--violet-2)}
.plan-badge{position:absolute;top:-13px;left:28px;background:var(--grad);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;padding:6px 14px;border-radius:99px;box-shadow:0 8px 20px -6px rgba(196,42,126,.6)}
.plan-name{font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;color:var(--text);margin-bottom:6px}
.plan-who{font-size:14px;color:var(--text-mute);line-height:1.5;margin-bottom:18px;min-height:42px}
.plan-price{font-family:'Manrope',sans-serif;font-weight:300;font-size:30px;color:var(--violet);letter-spacing:-.02em;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
[data-theme="dark"] .plan-price{color:var(--violet-2)}
.plan-price small{display:block;font-size:13px;font-weight:400;color:var(--text-mute);letter-spacing:0;margin-top:4px}
.plan-feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:13px;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45;color:var(--text-2)}
.plan-feats svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;background:var(--grad);border-radius:50%;padding:3px}
.plans-note{text-align:center;font-size:13.5px;color:var(--text-mute);margin-top:30px}
@media(max-width:880px){.plans-grid{grid-template-columns:1fr}}

/* ====== BLOQUE 5 ====== */

/* ===== SLIDER SUPERIOR (POR QUÉ SOMOS DIFERENTES) — integrado desde index ===== */
#porque{padding:0;position:relative;overflow:hidden;background:#08021A}
#pqSlider{position:relative;width:100%;height:calc(100vh - 72px - 48px);min-height:440px;overflow:hidden}
#sliderLogo{position:fixed;top:16px;right:18px;z-index:7000;width:min(242px,48vw);display:block;text-decoration:none;opacity:.98;transition:transform .2s ease,opacity .3s ease,visibility .3s ease}
#sliderLogo:hover{transform:scale(1.04);opacity:1}
#sliderLogo svg{display:block;width:100%;height:auto}
body.i2-lock #sliderLogo{opacity:0;visibility:hidden;pointer-events:none}
.pqs{position:absolute;inset:0;background:#0A0420;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease;z-index:0}
.pqs.is-active{opacity:1;visibility:visible;z-index:2}
.pqs.is-prev{opacity:0;visibility:visible;z-index:1}
/* capa de imagen: recorrido horizontal + zoom (Ken Burns) */
.pqs-img{position:absolute;inset:-3%;background-size:cover;background-position:center;transform:translateX(0) scale(1.05);will-change:transform}
.pqs.is-active .pqs-img.zin{animation:pqKbIn 9s ease-out both}
.pqs.is-active .pqs-img.zout{animation:pqKbOut 9s ease-out both}
@keyframes pqKbIn{0%{transform:translateX(3.5%) scale(1.02)}100%{transform:translateX(0) scale(1.16)}}
@keyframes pqKbOut{0%{transform:translateX(3.5%) scale(1.16)}100%{transform:translateX(0) scale(1.03)}}
/* franja blur: 10% libre abajo / 30% barra oscura / 60% libre arriba */
.pqs-band{position:absolute;left:0;right:0;bottom:10%;height:30%;display:flex;align-items:center;overflow:hidden;z-index:3}
.pqs-band::before{content:"";position:absolute;inset:0;background:rgba(8,3,24,.44);-webkit-backdrop-filter:blur(17px) saturate(1.05);backdrop-filter:blur(17px) saturate(1.05);-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 60%),linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 45%,transparent 60%),linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);mask-composite:intersect}
/* slides a la derecha: el blur se desvanece hacia la izquierda (espejo) */
.pqs.right .pqs-band::before{-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 55%),linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent 40%,#000 55%),linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
/* texto + botón dentro de la franja; entran en sentido inverso a la imagen */
.pqs-inner{position:relative;z-index:1;width:100%;padding:0 clamp(36px,8vw,200px);display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.pqs.is-active .pqs-inner{animation:pqTxtIn .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes pqTxtIn{0%{transform:translateX(-58px);opacity:0}100%{transform:translateX(0);opacity:1}}
.pqs.right .pqs-inner{align-items:flex-end;text-align:right}
.pqs-eye{font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.pqs-title{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(25px,3.7vw,46px);letter-spacing:-.02em;line-height:1.02;color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.5)}
.pqs-title b{font-family:'Manrope',sans-serif;font-weight:800;color:#FF8A00}
.pqs-cta{display:inline-flex;align-items:center;gap:9px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;padding:13px 26px;border-radius:12px;border:0;cursor:pointer;background:linear-gradient(120deg,#1A0B4E,#6A1FD0 45%,#C42A7E 80%,#FF5320 100%);color:#fff;text-decoration:none;width:fit-content;box-shadow:0 10px 30px -8px rgba(106,31,208,.6);transition:transform .18s,box-shadow .18s}
.pqs-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(196,42,126,.65)}
.pqs-cta svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.pqs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.pqs-arrow:hover{background:rgba(255,255,255,.22)}
.pqs-prev{left:20px}.pqs-next{right:20px}
.pqs-arrow svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
.pqs-dots{position:absolute;bottom:22px;left:210px;display:flex;gap:7px;align-items:center;z-index:10}
.pqs-dot{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.3);border:0;cursor:pointer;transition:all .3s;padding:0}
.pqs-dot.active{width:26px;background:linear-gradient(90deg,#6A1FD0,#C42A7E)}
@media(max-width:768px){#sliderLogo{width:209px;top:12px;right:12px}}
@media(max-width:640px){
  #pqSlider{height:calc(100svh - 116px);min-height:430px}
  .pqs-band{top:auto;bottom:0;height:auto;align-items:flex-end;overflow:visible}
  .pqs-band::before{inset:0;-webkit-mask-image:none;mask-image:none;-webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);background:linear-gradient(to top,rgba(8,3,24,.93),rgba(8,3,24,.55) 52%,rgba(8,3,24,0))}
  .pqs-inner{padding:48px 22px 22px;align-items:flex-start;text-align:left;gap:11px;width:100%}
  .pqs.right .pqs-inner{align-items:flex-start;text-align:left}
  .pqs-title{font-size:clamp(24px,7vw,36px);line-height:1.08}
  .pqs-cta{padding:12px 20px;font-size:13.5px}
  .pqs-prev,.pqs-next{width:40px;height:40px;top:40%}.pqs-prev{left:10px}.pqs-next{right:10px}
  .pqs-dots{left:22px;bottom:auto;top:16px}
}
/* ====== BLOQUE 6 ====== */

body.i2-lock{overflow:hidden;height:100vh}
.i2-intro{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;overflow:hidden}
.i2-intro.done{visibility:hidden;pointer-events:none}
.i2-panel{position:absolute;left:0;right:0;height:50.5%;z-index:3;overflow:hidden;background:#0A0420}
.i2-panel.top{top:0}.i2-panel.bot{bottom:0}
.i2-panel::before{content:"";position:absolute;left:0;right:0;height:200%;background:radial-gradient(ellipse at 50% 50%,#2A1170 0%,#1A0B4E 48%,#0A0420 100%)}
.i2-panel.top::before{top:0}.i2-panel.bot::before{bottom:0}
.i2-pgrid{position:absolute;left:0;right:0;height:200vh;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 60% 40% at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 60% 40% at center,#000 30%,transparent 80%)}
.i2-panel.top .i2-pgrid{top:0}.i2-panel.bot .i2-pgrid{bottom:0}
.i2-intro.open .i2-panel.top{animation:i2shutterUp .95s 0s cubic-bezier(.7,0,.2,1) forwards}
.i2-intro.open .i2-panel.bot{animation:i2shutterDown .95s 0s cubic-bezier(.7,0,.2,1) forwards}
@keyframes i2shutterUp{to{transform:translateY(-100.5%)}}
@keyframes i2shutterDown{to{transform:translateY(100.5%)}}
.i2-seam{position:absolute;left:0;right:0;top:50%;height:2px;z-index:4;transform:translateY(-50%) scaleX(0);background:linear-gradient(90deg,transparent,#FF8A00,#C42A7E,#7C4DFF,transparent);box-shadow:0 0 24px 4px rgba(196,42,126,.6);opacity:0}
.i2-intro.seamglow .i2-seam{animation:i2seam 1s ease forwards}
@keyframes i2seam{0%{opacity:0;transform:translateY(-50%) scaleX(0)}30%{opacity:1;transform:translateY(-50%) scaleX(1)}100%{opacity:0;transform:translateY(-50%) scaleX(1)}}
.i2-stage{position:relative;z-index:5;text-align:center;pointer-events:none}
.i2-intro.open .i2-stage{animation:i2stageOut .5s ease forwards}
@keyframes i2stageOut{to{opacity:0;transform:scale(1.06)}}
.i2-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:10px;height:10px}
.i2-ring{position:absolute;top:50%;left:50%;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(124,77,255,.5);transform:translate(-50%,-50%) scale(.2);opacity:0}
.i2-ring.go{animation:i2ring 1.8s ease-out forwards}
.i2-ring.r2.go{animation-delay:.25s;border-color:rgba(196,42,126,.45)}
.i2-ring.r3.go{animation-delay:.5s;border-color:rgba(255,138,0,.4)}
@keyframes i2ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
.i2-logo{width:clamp(96px,13vw,150px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 24px 60px rgba(124,77,255,.55))}
.i2-logo .i2-stroke{fill:transparent;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.i2-logo .i2-fill{opacity:0;transition:opacity .7s ease}
.i2-logo.filled .i2-fill{opacity:1}
.i2-word{margin-top:28px;font-weight:200;font-size:clamp(28px,5vw,52px);letter-spacing:-.03em;color:#fff;display:flex;justify-content:center;flex-wrap:wrap}
.i2-word .i2-ch{display:inline-block;opacity:0;transform:translateY(18px)}
.i2-word .i2-ch.b{font-weight:800;background:linear-gradient(100deg,#7C4DFF,#C42A7E 50%,#FF8A00);-webkit-background-clip:text;background-clip:text;color:transparent}
.i2-word.go .i2-ch{animation:i2chUp .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes i2chUp{to{opacity:1;transform:translateY(0)}}
.i2-sub{margin-top:14px;font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55);opacity:0}
.i2-sub.go{animation:i2subIn .8s ease forwards}
@keyframes i2subIn{from{opacity:0;letter-spacing:.5em}to{opacity:.7;letter-spacing:.34em}}
/* ocultar cualquier objeto que se superponga a la intro */
body.i2-lock #sliderLogo,body.i2-lock .float-cta,body.i2-lock .nav{display:none!important}

/* ============================================================
   AUTH — registro / inicio de sesión (formularios dinámicos)
   ============================================================ */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:64px 60px 104px;
  background:linear-gradient(150deg,#1A0B4E 0%,#3D0E8F 48%,#6A1FD0 100%)}
.auth-brand::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 18% 18%,rgba(196,42,126,.5),transparent 42%),radial-gradient(circle at 92% 88%,rgba(255,138,0,.45),transparent 45%);opacity:.85}
.auth-brand::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 0 0,rgba(255,255,255,.12) 1px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000,transparent 80%);mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000,transparent 80%)}
.auth-brand>*{position:relative;z-index:1}
.auth-brand .ab-logo{width:56px;height:auto;margin-bottom:30px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
.auth-brand h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(26px,2.7vw,42px);line-height:1.07;letter-spacing:-.02em;margin-bottom:16px}
.auth-brand h2 b{color:#FF8A00}
.auth-brand .ab-lead{font-weight:400;color:rgba(255,255,255,.82);max-width:430px;line-height:1.6;margin-bottom:36px;font-size:16px}
.ab-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.ab-list li{display:flex;gap:13px;align-items:center;font-size:15px;color:rgba(255,255,255,.92)}
.ab-list .abi{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.ab-list .abi svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ab-quote{border-left:2px solid rgba(255,255,255,.3);padding-left:18px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:16px;color:rgba(255,255,255,.85);line-height:1.55}
.ab-quote cite{display:block;margin-top:10px;font-family:'Montserrat','Helvetica Neue',sans-serif;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}

.auth-main{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 26px 104px;min-height:100vh}
.auth-card{width:100%;max-width:444px;animation:authIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes authIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ac-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.ac-top .ac-logo{height:30px;width:auto;display:block}
.ac-top a{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.ac-top a:hover{color:var(--violet)}
.ac-top a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.auth-card h1{font-family:'Montserrat',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;margin-bottom:6px;color:var(--text)}
.auth-card .ac-sub{color:var(--text-mute);font-size:14.5px;margin-bottom:26px;line-height:1.5}

.steps-prog{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.sp-bar{flex:1;height:6px;border-radius:99px;background:var(--rule);overflow:hidden}
.sp-fill{height:100%;width:50%;border-radius:99px;background:var(--grad);transition:width .55s cubic-bezier(.4,0,.2,1)}
.sp-txt{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;color:var(--text-mute);letter-spacing:.06em;white-space:nowrap}

.step-panel{display:none}
.step-panel.active{display:block;animation:stepIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes stepIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

.ff{position:relative;margin-bottom:15px}
.ff input,.ff select{width:100%;height:58px;padding:22px 44px 8px 16px;border:1.5px solid var(--rule);border-radius:14px;background:var(--surface);color:var(--text);font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s,background .2s;outline:none;-webkit-appearance:none;appearance:none}
.ff input:focus,.ff select:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(106,31,208,.13)}
.ff label{position:absolute;left:16px;top:18px;color:var(--text-mute);font-size:15px;pointer-events:none;transition:all .18s ease;background:transparent}
.ff input:focus~label,.ff input:not(:placeholder-shown)~label,.ff select:focus~label,.ff select.filled~label{top:9px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--violet);text-transform:uppercase}
.ff .pw-toggle{position:absolute;right:12px;top:16px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--text-mute);cursor:pointer;background:none;border:0;padding:0}
.ff .pw-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.ff .chev{position:absolute;right:16px;top:23px;width:12px;height:12px;pointer-events:none;color:var(--text-mute)}
.ff .chev svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}

.pw-meter{display:flex;gap:5px;margin:-4px 2px 6px}
.pw-meter span{flex:1;height:4px;border-radius:99px;background:var(--rule);transition:background .35s}
.pw-meter[data-s="1"] span:nth-child(1){background:#FF5320}
.pw-meter[data-s="2"] span:nth-child(-n+2){background:#FF8A00}
.pw-meter[data-s="3"] span:nth-child(-n+3){background:#C42A7E}
.pw-meter[data-s="4"] span{background:#6A1FD0}
.pw-hint{font-size:11.5px;color:var(--text-mute);margin:0 2px 14px}

.ck{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text-2);margin:8px 0 20px;cursor:pointer;line-height:1.45}
.ck input{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:1.5px solid var(--rule-2);border-radius:6px;flex:0 0 auto;cursor:pointer;transition:.2s;position:relative;margin-top:1px}
.ck input:checked{background:var(--grad);border-color:transparent}
.ck input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ck a{color:var(--violet);font-weight:600}

.btn-full{width:100%;justify-content:center}
.auth-row{display:flex;gap:12px;margin-top:4px}
.auth-row .btn{flex:1;justify-content:center}

.or{display:flex;align-items:center;gap:14px;color:var(--text-mute);font-size:12px;margin:18px 0;font-family:'Montserrat','Helvetica Neue',sans-serif;letter-spacing:.06em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.btn-google{width:100%;justify-content:center;gap:10px;background:var(--surface);border:1.5px solid var(--rule);color:var(--text)}
.btn-google:hover{border-color:var(--rule-2);transform:translateY(-1px)}
.btn-google svg{width:18px;height:18px}

.fp-row{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 18px;font-size:13px}
.fp-row a{color:var(--violet);font-weight:600;text-decoration:none}
.auth-foot{text-align:center;margin-top:22px;font-size:14px;color:var(--text-mute)}
.auth-foot a{color:var(--violet);font-weight:700;text-decoration:none}

.auth-ok{text-align:center;padding:18px 0;animation:stepIn .5s ease both}
.auth-ok .ok-circle{width:78px;height:78px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 16px 40px -12px rgba(106,31,208,.6);animation:okPop .5s cubic-bezier(.2,1.2,.3,1) both}
@keyframes okPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.auth-ok .ok-circle svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:880px){.auth{grid-template-columns:1fr}.auth-brand{display:none}}

/* meta de cursos (lecciones · horas) */
.course-meta{margin-top:12px;font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11.5px;letter-spacing:.04em;color:var(--text-mute)}

/* ===== NOTICIAS (newsletter + category pill + leer) ===== */
.cat-pill{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.cat-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad)}
[data-theme="dark"] .cat-pill{color:var(--violet-2)}
.leer{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:700;font-size:13.5px;color:var(--violet);text-decoration:none}
.leer svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;transition:transform .2s}
.leer:hover svg{transform:translateX(3px)}
[data-theme="dark"] .leer{color:var(--violet-2)}
.news-date{font-family:'Montserrat','Helvetica Neue',sans-serif;font-size:11px;color:var(--text-mute);letter-spacing:.04em}
.newsletter{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:26px 30px;box-shadow:var(--shadow-sm);margin-bottom:34px}
.newsletter h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:var(--text);margin-bottom:4px;letter-spacing:-.01em}
.newsletter p{color:var(--text-mute);font-size:14px}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input{height:50px;padding:0 16px;border:1.5px solid var(--rule);border-radius:13px;background:var(--bg-2);color:var(--text);font:inherit;font-size:15px;min-width:220px;outline:none;transition:border-color .2s,box-shadow .2s}
.newsletter input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(106,31,208,.12)}
.feat-news{display:grid;grid-template-columns:1.1fr 1fr;gap:0;overflow:hidden;padding:0;margin-bottom:34px}
.feat-news .fn-media{min-height:260px;background-size:cover;background-position:center}
.feat-news .fn-body{padding:34px}
@media(max-width:760px){.feat-news{grid-template-columns:1fr}.feat-news .fn-media{min-height:180px}}

/* ============================================================
   NOTICIAS — arquitectura visual integrada desde el diseño
   original (page-header, featured, news-grid, filtros,
   ofertas, paginador, imágenes nt1–nt9). Clases exclusivas
   de noticias.html — no afectan a otras páginas.
   ============================================================ */
/* Botón Inscribirse destacado en el nav */
.nav .menu a.nav-cta{
  background:var(--grad);color:#fff;padding:8px 16px;border-radius:10px;
  font-size:13px;transition:opacity .2s;
}
.nav .menu a.nav-cta:hover{opacity:.85;color:#fff}
/* Separador visual en mobile sheet entre nav items y CTA */
.mobile-sheet .sheet-sep{height:1px;background:var(--rule);margin:4px 0}
.mobile-sheet a.sheet-cta{
  color:#fff;background:var(--grad);border-radius:12px;
  padding:14px 18px;margin-top:6px;border-bottom:0;text-align:center;
}
/* --- 20. NOTICIAS PAGINADAS ------------------------------ */
.news-page{display:none;animation:fadeIn .35s}
.news-page.active{display:block}
.news-card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.news-thumb{aspect-ratio:16/10;background:var(--grad);position:relative;display:flex;align-items:flex-end;padding:14px;background-size:cover;background-position:center}
.news-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,3,24,.6) 100%)}
.news-thumb .cat{font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);padding:5px 11px;border-radius:99px;backdrop-filter:blur(4px);position:relative;z-index:1}
.news-body{padding:22px;display:flex;flex-direction:column;flex:1}
.news-body .meta{font-family:'Montserrat',sans-serif;font-size:10.5px;color:var(--magenta);letter-spacing:.1em;text-transform:uppercase}
.news-body h4{font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--text);margin:10px 0 0}
.news-body p{font-family:'Newsreader',serif;font-weight:300;font-size:14.5px;color:var(--text-mute);margin:9px 0 0;flex:1;line-height:1.5}
.pager{display:flex;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pager button{
  min-width:42px;height:42px;border-radius:11px;border:1.5px solid var(--rule);
  background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;
  font-weight:600;font-size:14px;transition:.18s;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
}
.pager button:hover{border-color:var(--violet);color:var(--violet)}
.pager button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="dark"] .pager button.active{background:var(--violet);border-color:var(--violet)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.foot .brand-txt{font-weight:700;font-size:20px;color:var(--text);letter-spacing:-.02em}
.foot .brand-txt em{color:var(--violet);font-style:normal}
[data-theme="dark"] .foot .brand-txt em{color:var(--violet-2)}
.foot .links{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
.foot .links a{font-size:14px;color:var(--text-mute);font-weight:300}
.foot .links a:hover{color:var(--violet)}
/* ============================================================
   NOTICIAS — Componentes específicos de la página de noticias
   ============================================================ */

.page-header{padding:80px 0 60px;position:relative;overflow:hidden;background:var(--ink);color:#fff}
.page-header::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 20%,rgba(106,31,208,.55) 0%,transparent 50%),radial-gradient(ellipse at 10% 80%,rgba(255,83,32,.3) 0%,transparent 50%)}
.page-header::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:28px 28px;opacity:.4}
.page-header .wrap{position:relative;z-index:1}
.page-header h1{font-weight:200;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.035em;color:#fff;margin:16px 0 0}
.page-header h1 b{font-weight:700}
.page-header .lead{font-weight:300;font-size:18px;color:rgba(255,255,255,.72);max-width:580px;margin:18px 0 0;line-height:1.55}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:28px 0 0}
.filter-btn{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:99px;border:1.5px solid var(--rule);background:var(--surface);color:var(--text-mute);cursor:pointer;transition:.18s;font-family:inherit}
.filter-btn:hover{border-color:var(--violet);color:var(--violet)}
.filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="dark"] .filter-btn.active{background:var(--violet);border-color:var(--violet)}
.newsletter{background:var(--cream);border:1px solid var(--rule);border-radius:20px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:56px}
[data-theme="dark"] .newsletter{background:var(--surface-2)}
.newsletter .txt h3{font-weight:600;font-size:20px;color:var(--text);letter-spacing:-.01em}
.newsletter .txt p{font-weight:300;font-size:14.5px;color:var(--text-mute);margin-top:6px}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input{font-family:inherit;font-size:14.5px;padding:12px 16px;border-radius:12px;border:1.5px solid var(--rule);background:var(--surface);color:var(--text);min-width:240px;transition:border .18s}
.newsletter input:focus{outline:none;border-color:var(--violet)}
.featured-card{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:22px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow-md);margin-bottom:56px;background:var(--surface);transition:.2s}
.featured-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:transparent}
.featured-img{min-height:340px;background-size:cover;background-position:center;position:relative}
.featured-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--surface) 100%)}
.featured-body{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.featured-body .cat-pill{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(106,31,208,.08);border:1px solid rgba(106,31,208,.2);color:var(--violet);padding:5px 12px;border-radius:99px;margin-bottom:16px;width:fit-content}
[data-theme="dark"] .featured-body .cat-pill{color:var(--violet-2);background:rgba(124,77,255,.1);border-color:rgba(124,77,255,.25)}
.featured-body .cat-pill span{width:5px;height:5px;border-radius:50%;background:var(--violet)}
[data-theme="dark"] .featured-body .cat-pill span{background:var(--violet-2)}
.featured-body h2{font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.featured-body .excerpt{font-family:'Newsreader',serif;font-weight:300;font-size:16px;color:var(--text-mute);line-height:1.6;margin:14px 0 0}
.featured-body .meta{font-family:'Montserrat',sans-serif;font-size:11px;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;margin:20px 0 0}
.featured-body .read-more{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--violet);transition:gap .18s}
[data-theme="dark"] .featured-body .read-more{color:var(--violet-2)}
.featured-body .read-more:hover{gap:14px}
.featured-body .read-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.news-card.oferta{border:2px solid var(--orange-2)}
.news-card.oferta:hover{border-color:var(--orange)}
.news-thumb{aspect-ratio:16/10;position:relative;display:flex;align-items:flex-end;padding:14px;background-size:cover;background-position:center}
.news-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,3,24,.6) 100%)}
.news-thumb .cat{font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);padding:5px 11px;border-radius:99px;backdrop-filter:blur(4px);position:relative;z-index:1}
.news-thumb .oferta-flag{position:absolute;top:14px;right:14px;z-index:2;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(120deg,#FF5320,#FF8A00);color:#fff;padding:5px 12px;border-radius:99px}
.news-body{padding:22px;display:flex;flex-direction:column;flex:1}
.news-body .meta{font-family:'Montserrat',sans-serif;font-size:10.5px;color:var(--magenta);letter-spacing:.1em;text-transform:uppercase}
.news-body h4{font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--text);margin:10px 0 0}
.news-body p{font-family:'Newsreader',serif;font-weight:300;font-size:14.5px;color:var(--text-mute);margin:9px 0 0;flex:1;line-height:1.5}
.news-body .leer{margin-top:18px;font-size:13px;font-weight:600;color:var(--violet);display:inline-flex;align-items:center;gap:6px;transition:gap .18s}
[data-theme="dark"] .news-body .leer{color:var(--violet-2)}
.news-body .leer:hover{gap:10px}
.news-body .leer svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.oferta-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,138,0,.12);border:1px solid rgba(255,138,0,.35);color:#B36300;padding:4px 10px;border-radius:99px;width:fit-content}
[data-theme="dark"] .oferta-tag{color:#FF8A00;background:rgba(255,138,0,.15);border-color:rgba(255,138,0,.4)}
.oferta-tag span{width:5px;height:5px;border-radius:50%;background:#FF8A00}
/* ============================================================
   IMÁGENES — banda imagen+texto y miniatura en tarjetas
   ============================================================ */
.media-band{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.media-band + .media-band{margin-top:56px}
.media-band .mb-media{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--rule);aspect-ratio:4/3}
.media-band .mb-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.media-band:hover .mb-media img{transform:scale(1.04)}
.media-band.reverse .mb-media{order:2}
.media-band .mb-text .eyebrow{margin-bottom:14px}
.media-band .mb-text p{margin-top:14px}
@media(max-width:820px){
  .media-band{grid-template-columns:1fr;gap:30px}
  .media-band.reverse .mb-media{order:0}
}
/* miniatura superior en tarjetas */
.card-media{margin:-30px -28px 20px;border-radius:18px 18px 0 0;overflow:hidden;aspect-ratio:16/9;border-bottom:1px solid var(--rule);position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.card:hover .card-media img{transform:scale(1.05)}

/* Imágenes de las miniaturas de noticias (locales) */
.nt1{background-image:url('../img/grupo-estudio-laptops.webp')}
.nt2{background-image:url('../img/reunion-sala-presentacion.webp')}
.nt3{background-image:url('../img/empleado-carnet-oficina.webp')}
.nt4{background-image:url('../img/grupo-discusion-clase.webp')}
.nt5{background-image:url('../img/mujer-estudiando-libros.webp')}
.nt6{background-image:url('../img/hombre-revisando-planos.webp')}
.nt7{background-image:url('../img/aspirante-celebrando-exito.webp')}
.nt8{background-image:url('../img/estudiante-feliz-plataforma.webp')}
.nt9{background-image:url('../img/hombre-estudiando-laptop.webp')}

/* ============================================================
   ESLÓGANES (manifiesto integrado) — marquesina, banda, grilla
   Render dinámico desde assets/js/eslogans.js
   ============================================================ */
/* marquesina */
.sl-marquee{position:relative;overflow:hidden;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.sl-marquee-track{display:flex;width:max-content;animation:slScroll 40s linear infinite}
.sl-marquee:hover .sl-marquee-track{animation-play-state:paused}
.sl-marquee-track span{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.01em;color:var(--text);padding:0 30px;white-space:nowrap;opacity:.85}
.sl-marquee-track span::after{content:"◆";color:var(--orange);margin-left:30px;font-size:.5em;vertical-align:middle}
@keyframes slScroll{to{transform:translateX(-50%)}}

/* banda aspiracional full-bleed */
.sl-band{position:relative;padding:90px 24px;margin:0;overflow:hidden;text-align:center;background:linear-gradient(125deg,#1A0B4E 0%,#6A1FD0 38%,#C42A7E 66%,#FF5320 88%,#FF8A00 100%)}
.sl-band::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 0);background-size:26px 26px;opacity:.5}
.sl-band-in{position:relative;z-index:1;max-width:1000px;margin:0 auto}
.sl-band-in .lbl{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sl-rotator{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(28px,5.4vw,68px);line-height:1.04;letter-spacing:-.03em;color:#fff;margin-top:16px;min-height:1.1em;text-shadow:0 6px 30px rgba(0,0,0,.25)}

/* grilla de frases */
.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:30px}
.sl-quote{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:24px 22px;position:relative;overflow:hidden;transition:.25s}
.sl-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.sl-quote:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.sl-quote:hover::before{transform:scaleY(1)}
.sl-quote p{font-family:'Manrope',sans-serif;font-weight:600;font-size:17px;line-height:1.36;color:var(--text);letter-spacing:-.01em;margin:0}
.sl-cat{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:6px;display:block}
[data-theme="dark"] .sl-cat{color:var(--violet-2)}

/* ===== Banner teletexto (frases en movimiento) ===== */
.sl-ticker{display:flex;align-items:stretch;height:48px;background:var(--ink);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.sl-ticker .tk-lbl{flex-shrink:0;display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#FF8A00,#FF5320);color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:0 20px}
.sl-ticker .tk-lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:tkBlink 1.1s steps(1,end) infinite}
@keyframes tkBlink{50%{opacity:.25}}
.sl-ticker .tk-feed{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.sl-ticker .sl-marquee-track{animation-duration:39s}
.sl-ticker .sl-marquee-track span{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em;color:#fff;opacity:.92;padding:0 26px;white-space:nowrap}
.sl-ticker .sl-marquee-track span::after{content:"\25CF";color:#FF8A00;margin-left:24px;font-size:.6em;vertical-align:middle}

/* ===== Cuadro naranja con frase rotatoria ===== */
.sl-orangebox{display:inline-flex;flex-direction:column;gap:7px;background:linear-gradient(135deg,#FF8A00,#FF5320);border-radius:18px;padding:18px 24px;box-shadow:0 18px 38px -14px rgba(255,83,32,.55);max-width:560px;position:relative;overflow:hidden}
.sl-orangebox::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0);background-size:18px 18px;opacity:.5;pointer-events:none}
.sl-orangebox .ob-lbl{position:relative;z-index:1;font-family:'Montserrat',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:7px}
.sl-orangebox .ob-lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:tkBlink 1.1s steps(1,end) infinite}
.sl-orangebox .sl-rotator{position:relative;z-index:1;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(18px,2.3vw,25px);line-height:1.12;letter-spacing:-.01em;color:#fff;text-shadow:none;margin:0;min-height:1.12em}

/* ============================================================
   RESPONSIVE / UX — optimización móvil y multi-dispositivo
   ============================================================ */
/* 1) Evitar scroll horizontal accidental (clip no rompe position:sticky) */
html{overflow-x:clip}

/* 2) Barra de navegación: NUNCA solapar ni empujar la hamburguesa */
.nav .brand{flex-shrink:1;min-width:0}
.nav .brand .bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .tools{flex-shrink:0}
.burger,.theme-toggle{flex-shrink:0}

@media(max-width:980px){
  .nav .wrap{gap:12px}
  .nav .brand svg{height:35px}
  .nav .brand .bn{font-size:15px}
  .nav .tools{gap:10px}
}
@media(max-width:640px){
  .nav .wrap{gap:8px}
  .nav .brand svg{height:33px}
  .nav .brand .bn{font-size:14px}
  .nav .tools{gap:8px}
  .theme-toggle{width:42px;height:24px}
  .theme-toggle .knob{width:18px;height:18px}
  [data-theme="dark"] .theme-toggle .knob{transform:translateX(18px)}
  .burger{padding:6px 5px}
}

/* 3) Eslóganes (teletexto, banda, cuadro naranja, marquesina) en móvil */
@media(max-width:640px){
  .sl-orangebox{max-width:none;width:100%}
  .sl-orangebox .sl-rotator{font-size:19px}
  .sl-band{padding:56px 20px}
  .sl-grid{grid-template-columns:1fr}
  .sl-marquee-track span{font-size:17px;padding:0 18px}
  .sl-ticker .sl-marquee-track span{font-size:13.5px;padding:0 18px}
  .sl-ticker .tk-lbl{padding:0 13px;font-size:11px;letter-spacing:.08em}
}

/* 4) Aire, tipografía y toque cómodo */
@media(max-width:640px){
  section.block{padding:46px 0}
  .sec-head-center{padding-left:4px;padding-right:4px}
  .btn-lg{padding:13px 20px;font-size:14.5px}
  .media-band{gap:24px}
}
@media(max-width:480px){
  /* CTAs apilados y cómodos al pulgar */
  .hero-cta .btn,.final-cta .btn,.btn-row .btn{flex:1 1 100%;justify-content:center}
}

/* 5) Manifiesto (mf-) en pantallas pequeñas */
@media(max-width:640px){
  .mf-sec{padding:60px 0}
  .mf-hero{min-height:auto;padding:110px 0 40px}
  .mf-spine .row{gap:14px;padding:20px 0}
  .mf-glass{padding:30px 24px}
  .mf-band{padding:64px 20px}
}

/* 6) Dashboards en móvil: tarjetas, KPIs y tablas */
@media(max-width:620px){
  .ds-content{padding:16px}
  .kpi .val{font-size:25px}
  .ds-table th,.ds-table td{padding:11px 14px;font-size:13px}
  .panel-h{padding:15px 16px;flex-wrap:wrap}
  .panel-b{padding:16px}
}

/* 7) Imágenes nunca desbordan */
img{max-width:100%;height:auto}

/* ===== Selector de tema DENTRO del menú hamburguesa (móvil/tablet) ===== */
/* El switch va en la barra (no en el menú); ocultamos el selector del menú */
.sheet-theme{display:none}
.theme-mini{width:48px;height:27px;border-radius:99px;background:color-mix(in srgb,var(--text-mute) 32%,transparent);border:1px solid var(--rule);cursor:pointer;position:relative;padding:0 3px;display:inline-flex;align-items:center;flex-shrink:0;transition:background .25s}
.theme-mini .knob{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#FF8A00,#FF5320);transition:transform .3s cubic-bezier(.4,0,.2,1),background .25s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
[data-theme="dark"] .theme-mini{background:var(--violet)}
[data-theme="dark"] .theme-mini .knob{transform:translateX(21px);background:linear-gradient(135deg,#6A1FD0,#1A0B4E)}

/* En móvil el teletexto va sin la etiqueta naranja (más espacio para las frases) */
@media(max-width:640px){
  .sl-ticker .tk-lbl{display:none}
  .sl-ticker .tk-feed{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
}

/* ============================================================
   NAV v3 — Sistema de menús PasaTuPrueba
   Barra de 4 ítems con submenús desplegables (hacia ARRIBA,
   porque la barra es fija inferior), sheet móvil agrupado,
   footer de columnas y red de seguridad responsive.
   Breakpoints base: 1200 · 980 · 768 · 480
   ============================================================ */

/* ---- red de seguridad responsive (global) ---- */
html,body{overflow-x:clip}
img,svg,video,iframe{max-width:100%}
.grid-2>*,.grid-3>*,.grid-4>*,.media-band>*,.hero-grid>*,.stats-grid>*{min-width:0}
.card,.news-card,.kpi,.panel{overflow-wrap:break-word}

/* ---- ítems con submenú ---- */
.nav .menu .has-sub{position:relative;display:flex;align-items:center}
.nav .menu .sub-toggle{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--nav-text);
  padding:10px 0;transition:color .15s;
}
.nav .menu .sub-toggle:hover,
.nav .menu .has-sub.open .sub-toggle,
.nav .menu .has-sub.active .sub-toggle{color:var(--nav-accent)}
.nav .menu .sub-toggle svg{
  width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;
}
.nav .menu .has-sub.open .sub-toggle svg{transform:rotate(180deg)}

/* el panel se despliega HACIA ARRIBA (la barra vive abajo) */
.nav .menu .submenu{
  position:absolute;left:50%;bottom:calc(100% + 18px);transform:translate(-50%,8px);
  min-width:264px;background:var(--surface);border:1px solid var(--rule);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:70;
}
.nav .menu .submenu::after{ /* flecha hacia la barra */
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:var(--surface);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
/* Puente invisible que cubre el hueco de 18px entre el botón y el panel:
   mantiene el hover continuo al subir el cursor. Sin esto, al cruzar el
   espacio vacío se pierde el :hover y el submenú se cierra, obligando a
   hacer clic. El puente vive dentro de .submenu, así que solo está activo
   cuando el panel ya está abierto. */
.nav .menu .submenu::before{
  content:"";position:absolute;left:0;right:0;bottom:-22px;height:24px;
}
/* Zona de activación: hover sobre el ítem abre el panel; el puente cubre el
   trayecto hasta él. Ampliamos también el área sensible del propio .has-sub. */
.nav .menu .has-sub::after{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;pointer-events:auto;
}
.nav .menu .has-sub.open .submenu,
.nav .menu .has-sub:focus-within .submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
@media(hover:hover) and (pointer:fine){
  /* abrir al pasar el cursor por el ítem, por el puente o por el propio panel */
  .nav .menu .has-sub:hover .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
}
.nav .menu .submenu a{
  display:block;padding:11px 14px;border-radius:10px;
  font-size:14px;font-weight:700;color:var(--text);transition:background .15s,color .15s;
}
.nav .menu .submenu a:hover{background:var(--surface-2);color:var(--violet)}
[data-theme="dark"] .nav .menu .submenu a:hover{color:var(--violet-2)}
.nav .menu .submenu a.active{color:var(--violet)}
[data-theme="dark"] .nav .menu .submenu a.active{color:var(--violet-2)}
.nav .menu .submenu a span{
  display:block;font-weight:500;font-size:12px;color:var(--text-mute);margin-top:2px;line-height:1.35;
}
.nav .menu .submenu .free-tag{
  display:inline-block;vertical-align:1px;margin-left:7px;padding:2px 8px;border-radius:99px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--orange-2,#FF8A00);color:#fff;
}

/* ---- acciones de la zona derecha ---- */
.nav .tools .nav-login{
  font-size:14px;font-weight:700;color:var(--nav-text);transition:color .15s;white-space:nowrap;
}
.nav .tools .nav-login:hover{color:var(--nav-accent)}
.nav .tools .nav-cta{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:10px 18px;border-radius:99px;background:var(--grad);color:#fff;
  font-size:13.5px;font-weight:700;transition:.2s;
}
.nav .tools .nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(196,42,126,.6)}
.nav .tools .nav-cta svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}

/* ---- sheet móvil agrupado ---- */
.mobile-sheet{max-height:72vh;overflow-y:auto;overscroll-behavior:contain}
.mobile-sheet .sheet-h{
  font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);padding:16px 0 4px;
}
.mobile-sheet .sheet-grp a{padding-left:12px}
.mobile-sheet .sheet-grp a .free-tag{
  display:inline-block;margin-left:7px;padding:2px 8px;border-radius:99px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--orange-2,#FF8A00);color:#fff;
}
.mobile-sheet a.sheet-cta{
  margin-top:12px;border:0;border-radius:14px;background:var(--grad);color:#fff;
  text-align:center;font-weight:800;padding:15px 0;
}
.mobile-sheet .sheet-theme{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0 2px;font-size:14px;font-weight:600;color:var(--text-mute);
}

/* ---- contraste "La diferencia" (index / por-qué) ---- */
.duo-contrast{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.duo-contrast .dc{
  position:relative;border-radius:20px;padding:30px 28px;border:1px solid var(--rule);
  background:var(--surface);
}
.duo-contrast .dc .tag{
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:99px;margin-bottom:16px;
}
.duo-contrast .dc.old{opacity:.92}
.duo-contrast .dc.old .tag{background:var(--surface-2);color:var(--text-mute);border:1px solid var(--rule)}
.duo-contrast .dc.new{border:2px solid transparent;background:
  linear-gradient(var(--surface),var(--surface)) padding-box,
  var(--grad) border-box;}
.duo-contrast .dc.new .tag{background:var(--grad);color:#fff}
.duo-contrast .dc h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em}
.duo-contrast .dc p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-mute)}

/* ---- footer de columnas (menú "pie") ---- */
.foot .foot-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  text-align:left;padding-bottom:38px;margin-bottom:34px;border-bottom:1px solid var(--rule);
}
.foot .fc h4{
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:14px;
}
.foot .fc a{display:block;padding:6px 0;font-size:14px;font-weight:600;color:var(--text);transition:color .15s}
.foot .fc a:hover{color:var(--violet)}
[data-theme="dark"] .foot .fc a:hover{color:var(--violet-2)}

/* ---- breakpoints base: 1200 · 980 · 768 · 480 ---- */
@media(max-width:1200px){
  .nav .menu{gap:22px}
  .wrap{padding:0 26px}
}
@media(max-width:980px){
  .nav .tools .nav-login{display:none}
  .foot .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
  .duo-contrast{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav .tools .nav-cta{padding:9px 14px;font-size:12.5px}
  .media-band{grid-template-columns:1fr;gap:26px}
  .media-band.reverse .mb-media{order:0}
}
@media(max-width:480px){
  .nav .tools .nav-cta{display:none} /* el CTA vive en el sheet */
  .wrap{padding:0 16px}
  .foot .foot-cols{grid-template-columns:1fr;gap:8px}
  .foot .fc{padding-bottom:14px}
  .stats-grid{grid-template-columns:1fr;gap:24px}
  .hero{padding:60px 0 40px}
  h1.display{font-size:clamp(30px,9vw,40px)}
  .chip-float{display:none} /* chips flotantes fuera en móvil estrecho */
}

/* ============================================================
   SUBVISTAS v1 — maestro–detalle dentro de una vista
   ============================================================ */
.sv-detalle{max-width:880px;margin:0 auto}
.sv-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  padding:9px 16px;border:1px solid var(--rule);border-radius:99px;transition:.2s;
}
.sv-back:hover{color:var(--violet);border-color:var(--violet)}
[data-theme="dark"] .sv-back:hover{color:var(--violet-2);border-color:var(--violet-2)}
.sv-head .cat-pill{margin-bottom:14px}
.sv-head h1{
  font-weight:300;font-size:clamp(28px,4vw,42px);letter-spacing:-.025em;line-height:1.12;color:var(--text);
}
.sv-head h1 b{font-weight:700;color:var(--violet)}
[data-theme="dark"] .sv-head h1 b{color:var(--violet-2)}
.sv-meta{
  margin-top:12px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
}
.sv-media{
  margin:26px 0;border-radius:20px;border:1px solid var(--rule);
  aspect-ratio:16/7;background-size:cover;background-position:center;box-shadow:var(--shadow-md);
}
.sv-body{font-family:'Newsreader',serif;font-size:17.5px;line-height:1.72;color:var(--text)}
.sv-body p{margin:0 0 18px}
.sv-body h3{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;
  margin:30px 0 12px;color:var(--text);
}
.sv-body ul{margin:0 0 18px 22px}
.sv-body li{margin-bottom:8px}
.sv-body .nota{
  font-family:'Manrope',sans-serif;font-size:14px;line-height:1.55;color:var(--text-mute);
  background:var(--surface-2);border:1px solid var(--rule);border-left:3px solid var(--orange-2,#FF8A00);
  border-radius:12px;padding:14px 18px;margin:22px 0;
}
.sv-cta{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--rule);
}
/* tarjetas-resumen dentro del detalle (módulos del curso) */
.sv-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.sv-mods .m{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:18px 16px;
  font-family:'Manrope',sans-serif;
}
.sv-mods .m b{display:block;font-size:14.5px;margin-bottom:6px;color:var(--text)}
.sv-mods .m span{font-size:13px;line-height:1.5;color:var(--text-mute)}
.sv-mods .m i{
  display:inline-block;font-style:normal;font-family:'Montserrat',sans-serif;font-size:9.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--grad);border-radius:99px;padding:3px 9px;margin-bottom:10px;
}
.sv-meta-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.sv-meta-row .mm{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--text-mute);display:flex;align-items:center;gap:7px}
.sv-meta-row .mm svg{width:15px;height:15px;stroke:var(--magenta);fill:none;stroke-width:2.2;stroke-linecap:round}
.card .ver-mas{
  margin-top:12px;display:inline-flex;align-items:center;gap:7px;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--violet);
}
[data-theme="dark"] .card .ver-mas{color:var(--violet-2)}
.card .ver-mas svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
@media(max-width:768px){.sv-mods{grid-template-columns:1fr}}
@media(max-width:480px){
  .sv-media{aspect-ratio:16/10}
  .sv-body{font-size:16.5px}
  .sv-cta .btn{width:100%;justify-content:center}
}


/* ── Botones que sustituyen a enlaces de acción (logout, cambio de cuenta) ──
   Estos cambian el estado de la sesión, así que van dentro de un <form> POST
   con token CSRF. Este reset hace que el <button> herede exactamente el
   aspecto de la clase del enlace al que reemplaza. */
.form-salir{display:contents}
.boton-enlace{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}


/* ── Páginas de error (404 / 403) ───────────────────────────────────────────
   Antes usaban la clase .error-404, que no tenía ni una regla en ninguna hoja:
   la página salía sin estilo. Ahora comparten el chrome de la web pública y
   estas reglas les dan el mismo aire que el hero (auditoría NAV-06). */
.pagina-error{
  min-height:52vh;
  display:flex;align-items:center;
  padding:clamp(64px,12vh,140px) 0;
}
.pagina-error .wrap{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  max-width:60ch;
}
.pagina-error .display{margin:0;text-wrap:balance}
.pagina-error .lead{margin:0;color:var(--text-mute)}
.pagina-error .err-ruta{
  margin:0;font-size:.9rem;color:var(--text-mute);
}
.pagina-error .err-ruta code{
  background:var(--surface-2);border:1px solid var(--rule);
  padding:.12em .45em;border-radius:4px;word-break:break-all;
}
.pagina-error .err-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* ── Tarjeta de noticia enlazable ───────────────────────────────────────────
   La tarjeta entera sigue siendo clicable, pero el destino es un <a> real
   (navegable con teclado, abrible en pestaña nueva, rastreable) en vez de un
   onclick en el <article>. */
.news-card--enlazable{position:relative}
.news-card--enlazable .news-card-link{color:inherit;text-decoration:none}
.news-card--enlazable .news-card-link::after{
  content:"";position:absolute;inset:0;z-index:1;
}
.news-card--enlazable .news-card-link:focus-visible::after{
  outline:2px solid var(--orange-2);outline-offset:-3px;border-radius:18px;
}

/* ── Saltar al contenido ────────────────────────────────────────────────────
   El primer enfocable del documento, invisible hasta que recibe el foco. Hace
   falta más aquí que en un sitio normal: la barra de navegación va DESPUÉS del
   pie en el DOM (está fijada abajo por CSS), así que sin este salto el teclado
   recorría los once enlaces del pie y el menú entero antes de llegar al
   contenido, en cada página (auditoría NAV-07/NAV-16).

   No se oculta con display:none ni visibility:hidden: eso lo sacaría también
   del orden de tabulación y el enlace no existiría para quien lo necesita. */
.salto-contenido{
  /* fixed, no absolute: con absolute el top:0 es el del DOCUMENTO, así que en
     una página ya desplazada el enlace aparecía fuera de la pantalla y el
     navegador tenía que arrastrar el scroll hasta arriba para enseñarlo.
     Comprobado en el navegador. Fixed lo ancla a la ventana y sale donde el
     usuario está mirando.

     Sin transición sobre top: el navegador decide si tiene que desplazar la
     página para revelar el elemento enfocado, y lo decide leyendo la posición
     de ese instante — a mitad de la animación, la equivocada. */
  position:fixed;left:12px;top:-100px;z-index:2000;
  padding:12px 18px;border-radius:0 0 10px 10px;
  background:var(--ink);color:#fff;
  font-weight:700;text-decoration:none;
  box-shadow:var(--shadow-md);
}
.salto-contenido:focus{top:0}
/* El destino recibe el foco por tabindex="-1"; no debe dibujar un contorno
   alrededor de media página. */
#contenido:focus{outline:none}

/* ── Foco visible en enlaces y botones ──────────────────────────────────────
   Los únicos estilos de foco de la hoja eran de campos de formulario, varios
   con outline:none compensado por border o box-shadow. Todo lo demás quedaba
   con el contorno por defecto del navegador, de contraste incierto sobre la
   barra oscura y las tarjetas de color (auditoría NAV-15).

   :focus-visible y no :focus, para que el contorno aparezca al navegar con
   teclado y no en cada clic de ratón. */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible{
  outline:3px solid var(--orange-2);
  outline-offset:2px;
  border-radius:6px;
}
/* Sobre la barra —que es oscura en ambos temas— el naranja de marca pierde
   contraste contra el violeta del fondo: allí el contorno se pinta en blanco. */
.nav a:focus-visible,
.nav button:focus-visible,
.mobile-sheet a:focus-visible,
.mobile-sheet button:focus-visible{
  outline-color:#fff;
}

/* ── Ítem de menú activo ────────────────────────────────────────────────────
   La clase la pone el SERVIDOR (es_ruta_actual()), no el JS. La lógica vieja
   comparaba el último segmento del path contra el href completo y para
   "herramientas/dba" nunca casaba: la marca llevaba rota desde la maqueta
   estática (auditoría NAV-09). El color no es el único indicador — el enlace
   lleva además aria-current="page". */
.nav .menu > a.active,
.nav .menu .has-sub.active > .sub-toggle{
  color:var(--nav-accent);
}
.nav .menu .submenu a.active{
  background:var(--surface-2);font-weight:700;
}
.mobile-sheet a[aria-current="page"]{
  color:var(--nav-accent);font-weight:700;
}