@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: "RobotoSlab";
    src: url("./fonts/RobotoSlab/RobotoSlab-VariableFont_wght.ttf") format("truetype");
    font-display: swap;
  }
  

* ,
*:before,
*:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root {
    --background: #fdfff6;
    --main: #090C9B;
    --main1:#f0f0fb;
    --main2: #ECECFE;
    --main3: #d8d8fd;
    --main35: #9FA0FA;
    --main4: #5052c0e3;
    --main55: #0a0c94;
    --main6: #232270;
    --main7: #04064D;
    --main8: #03043A;
    --contrary: #2D60FA;
    --black: #3C3744;
    --bk: rgb(241, 241, 241);
    --wt: rgb(242, 242, 242);
    --black: rgb(18, 29, 46);
    --wt-hover: rgb(234, 232, 232);
}

.header-wrapper,
.content-wrapper {
    width: 90%;
    margin: 0 auto;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: "Roboto";
    font-size: 17px;
    
}

/* COMMON */

header {
    display: flex;
    height: 4rem;
    width: 100%;
    position: relative;
    position: fixed;
    background-color: var(--background);
    top: 0;
    z-index: 10;
}

.header-wrapper {
    height: inherit;
    display: flex;
    justify-content: space-between;
}

.header-wrapper .header-logo {
    max-height: inherit;
    display: flex;
    align-items: center;
    position: relative;
}

header .header-logo a {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    cursor: pointer;
}

.header-logo p {
    font-size: 1.5rem;
    font-weight: 500;
    color: rgb(64, 59, 59);
    font-family: 'RobotoSlab';
}

.header-logo img {
    width: 2rem;
}

header .header-wrapper .header-logo .logo-title {
    font-family: 'RobotoSlab';
    font-weight: 600;
}

.header-logo p i {
    color: rgb(64, 59, 59);
}

.header-nav {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-nav .nav-img,
.header-nav #toggle-menu {
    display: none;
}

.header-nav nav ul {
    display: flex;
    height: inherit;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}

.header-nav nav ul li {
    margin: 0 0 0 1rem;
    height: 40%;
    border-radius: 6px;
    font-weight: 700;
    color: rgb(18, 29, 46);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.header-nav nav ul li img {
    pointer-events: none;
}

.header-nav nav ul li a.high {
    background-color: var(--contrary);
    color: var(--background);
    border: none;
    padding: .5rem 1.5rem .5rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    width: max-content;
}

.header-nav nav ul li a.high:hover {
    background-color: rgb(255, 191, 0);
    color: var(--black);
    transform: scale(1.05);
}

.main.input {
    display: none;
}

header .dropdown-navbar {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 34px;
    left: 0;
    width: 100%;
    align-items: center;
    padding-top: 2px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
    background-color: var(--main6);
    transition: max-height 200ms ease-out, opacity 200ms ease-out;
}

header .main.input:checked~.dropdown-navbar {
    max-height: 90vh;
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
}

header .header-nav li {
    position: relative;
    display: flex;
    transition: filter 200ms ease;
}

header .header-nav li img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    transition: filter 200ms ease;
    pointer-events: none;
}

header .header-nav li label {
    cursor: pointer;
    text-align: left;
    z-index: 4;
    border-radius: 6px;
    padding: 0.5rem 1.5rem 0.5rem 10px;
    transition: background-color 200ms, color 200ms, font-weight 200ms, border-radius 200ms;
}

.header-nav nav ul li input:checked~label {
    background-color: var(--main7);
    color: var(--background);
    font-weight: 600;
    border-radius: 6px 6px 0 0;
}

.header-nav nav ul li:hover {
    background-color: var(--main7);
    color: var(--background);
    font-weight: 600;
}

.header-nav nav ul li label:hover~img,
.header-nav nav ul li input:checked~img {
    filter: invert(100%) brightness(2) contrast(100);
}

/* Estilos para los enlaces dentro del dropdown */
header .dropdown-navbar a {
    color: var(--main2);
    font-weight: 400;
    text-decoration: none;
    border-radius: 4px;
    padding: 6px 6px 6px 10px;
    width: 99%;
    transition: background-color 200ms, color 200ms, font-weight 200ms;
}

/* Estados hover y active para los enlaces del dropdown */
header .dropdown-navbar a:hover,
header .dropdown-navbar a:active {
    background-color: rgb(255, 191, 0);
    color: var(--main8);
    font-weight: 700;
}

/* Personalización de la barra de desplazamiento en navegadores WebKit */
header .dropdown-navbar {
    --sb-track-color: #50555d;
    --sb-thumb-color: #4f50b3;
    --sb-size: 7px;
}

header .dropdown-navbar::-webkit-scrollbar {
    width: var(--sb-size);
}

header .dropdown-navbar::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 2px;
}

header .dropdown-navbar::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 2px;
}

/* Para navegadores que no soportan ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
    header .dropdown-navbar {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}





















main {
    background-color: var(--background);
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 4rem 0;
}

main .content-wrapper {
  display: grid;
    grid-template-areas:
        "hero hero"
        "aside aside"
        "cta cta";
    grid-template-columns: 1.5fr 1.5fr;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    margin: 0 auto;
    place-items: initial;
}


.content-wrapper section {
    border-radius: 10px;
}















.hero {
  grid-area: hero;
  background: var(--background);
  border-bottom: 1px solid rgba(18,29,46,0.04);
  padding: 0;
  color: var(--black);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding-bottom: 2rem;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
   grid-template-areas:
        "img txt"
        "2nd txt";
  grid-template-columns: 300px 1fr;
  grid-template-rows: 300px 1fr;
  gap: 2rem;
  align-items: start;
  justify-items: start;
  justify-content: start;
}

.hero-eyebrow {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--main6);
  margin: 0 0 8px 0;
  letter-spacing: 0.2px;
}

.hero-copy{
  grid-area: txt;
}

.hero-copy h1,
.hero-copy #hero-title {
  font-size: 2.4rem;
  line-height: 1.03;
  margin: 0 0 16px 0;
  color: var(--main8);
  font-weight: 700;
}

.hero-lead {
  font-size: 1.rem;
  color: rgba(18,29,46,0.92);
  margin: 0 0 16px 0;
  max-width: 56ch;
}

.hero-benefits {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  font-weight: 600;
  color: rgba(18,29,46,0.95);
}
.hero-benefits li {
  position: relative;
  padding-left: 22px;
  line-height: 1.35;
}
.hero-benefits li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--main7);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
}

.hero-value {
  margin-top: 6px;
  font-weight: 600;
  color: rgba(18,29,46,0.9);
}

.hero-offer .price {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 10px 0 4px 0;
  color: var(--main8);
}
.hero-offer .small {
  font-size: 0.92rem;
  color: rgba(18,29,46,0.7);
  margin: 0;
}

.hero-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--main4);
  color: var(--background);
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(9,12,155,0.06);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(9,12,155,0.12); }
.btn-primary:active { transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 3px solid rgba(18,107,159,0.18); border-radius: 10px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--main7);
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--main7);
  text-decoration: none;
  font-weight: 700;
}
.btn-outline:hover { background: var(--main4); color: var(--background); }
.btn-outline:focus-visible { outline: 3px solid rgba(18,107,159,0.12); border-radius: 10px; }

.hero-trust {
  margin-top: 12px;
  font-size: 0.95rem;
  color: rgba(18,29,46,0.8);
}
.hero-urgency {
  margin-top: 6px;
  font-size: 0.93rem;
  color: var(--main7);
  font-weight: 700;
}

.hero-visual {
  grid-area: img;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(9,12,155,0.08);
  display: block;
}

@media (max-width: 1024px) {
  .hero-copy h1 { font-size: 2.2rem; }
  .hero-benefits { grid-template-columns: repeat(2, 1fr); }
  .hero-visual img { max-width: 320px; }
  .hero-inner {
  
   grid-template-areas:
        "img txt"
        "2nd txt";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 200px 1fr;
  gap: 24px;
  
}
}

@media (max-width: 768px) {
  .hero-inner {
      grid-template-areas:
        "txt txt"
        "txt txt";
     padding: 0 12px; }
  .hero-visual { display: none; }
  .hero-copy { order: 1; }
  .hero-copy h1 { font-size: 1.8rem; }
  .hero-benefits { grid-template-columns: 1fr; margin-bottom: .5rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-eyebrow{display:none;}
  .btn-primary, .btn-outline { width: 100%; justify-content: center; margin-top: .5rem;}
}

@media (max-width: 480px) {
  .hero { padding: 32px 0; }
  .hero-copy h1 { font-size: 1.6rem; }
  .hero-offer .price { font-size: 1rem; }
  .hero-trust, .hero-urgency { font-size: 0.92rem; }
}

:focus { outline: none; }
:focus-visible { outline: 3px solid rgba(18,107,159,0.18); }

.hero .small { 
  font-size: 0.92rem; 
  color: rgba(18,29,46,0.7); 
  grid-area: 2nd;
place-self: start;
}





























/* ===============================
   STORY / MI HISTORIA — sección
   Diseñado para .story-section
   Pegar al final de index.css
   =============================== */

.story-section {
  grid-area: aside;
  background: transparent;
  color: var(--black);
  padding: 0  0  0 24px ;
  box-sizing: border-box;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Contenedor central (coincide con tu ancho habitual) */
.story-section .story-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/* Intro / título (sin usar <header> para evitar conflicto) */
.story-section .story-intro h2 {
  font-size: 1.75rem;
  color: var(--main8);
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.08;
}

.story-section .story-intro .lead {
  margin: 1rem 0.5rem 2rem 0.5rem;
  color: rgba(18,29,46,0.86);
  font-size: 1rem;
}

/* Layout principal: contenido + lateral (cards/foto) */
.story-section .story-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

/* Asegurar que dentro de contenedores flexibles no se compriman */
.story-section .story-main { min-width: 0; }

/* Cada segmento (artículo) */
.story-section .story-segment {
  padding: 18px 18px;
  border-radius: 10px;
  background: transparent;
  transition: background 180ms ease, transform 180ms ease;
  margin-bottom: 14px;
  box-sizing: border-box;
}

/* Separador visual entre segmentos: sutil línea superior */
.story-section .story-segment + .story-segment {
  border-top: 1px solid rgba(18,29,46,0.04);
  padding-top: 22px;
}

/* Titulares de segmento */
.story-section .story-segment h3 {
  margin: 0 0 8px;
  color: var(--main6);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Texto de párrafo */
.story-section .story-segment p {
  margin: 0 0 10px;
  color: rgba(18,29,46,0.9);
  line-height: 1.55;
  font-size: 0.98rem;
}

/* Listas internas */
.story-section .story-segment ul {
  margin: 8px 0 0 18px;
  color: rgba(18,29,46,0.9);
  font-weight: 600;
}

/* CTA dentro de la sección: botón que hereda estilos .btn-primary pero específico */
.story-section .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  background: var(--main7);
  color: var(--background);
  box-shadow: 0 8px 24px rgba(9,12,155,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.story-section .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(9,12,155,0.12); }
.story-section .btn-primary:focus-visible { outline: 3px solid rgba(18,107,159,0.14); border-radius: 10px; }

/* Aside lateral (credenciales + foto) */
.story-section .story-card .card {
  padding: 16px;
  border-radius: 10px;
  background: var(--wt);
  box-shadow: 0 6px 18px rgba(9,12,155,0.03);
}
.story-section .story-card h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--main6);
}
.story-section .story-card ul {
  margin: 8px 0 0 18px;
  color: rgba(18,29,46,0.9);
  font-weight: 600;
  line-height: 1.45;
}

/* Foto / imagen lateral */
.story-section .photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-top: 14px;
  box-shadow: 0 12px 30px rgba(9,12,155,0.06);
  object-fit: cover;
  background-color: #f6f6f6;
}

/* Small utility classes */
.story-section .small { font-size: .92rem; color: rgba(18,29,46,0.68); }

.story-section a {
  color: var(--main7);
  text-decoration: none;
  font-weight: 700;
  background-image: linear-gradient(#ffd54a,#ffd54a);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .18em;
  padding-bottom: .08em;
  transition: background-size .18s ease, color .12s ease;
}

.story-section a:hover,
.story-section a:focus {
  background-size: 100% .55em;
  color: var(--main55);
  outline: none;
}


/* Responsive adjustments */
@media (max-width: 1024px) {
  .story-section .story-grid { grid-template-columns: 1fr 300px; gap: 22px; }
}

@media (max-width: 768px) {
  .story-section { padding: 32px 0; }
  .story-section .story-grid { grid-template-columns: 1fr; gap: 18px; }
  .story-section .story-card { order: 2; }
  .story-section .story-main { order: 1; }
  .story-section .story-segment { padding: 14px 8px; }
  .story-section .story-segment + .story-segment { padding-top: 18px; }
  .story-section .photo img { margin-top: 10px; }
}

/* Print-friendly tweaks */
@media print {
  .story-section { padding: 12px 0; color: #000; }
  .story-section .photo img { display: none; }
  .story-section .btn-primary { display: none; }
}

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 2rem 1rem;
  max-width: 800px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--main6, #ccc);
}

.timeline-item {
  position: relative;
  margin: 2rem 0 2rem 60px;
  padding-left: 1rem;
}

.timeline-marker {
  position: absolute;
  left: -42px;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--main7, #0077ff);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--main7, #0077ff);
}

.timeline-content h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
  color: var(--main8, #222);
}

.timeline-content p {
  margin: .5rem 0;
  color: var(--main6, #555);
}

.timeline-content a {
  color: var(--main7, #0077ff);
  text-decoration: none;
}

.timeline-content a:hover {
  text-decoration: underline;
}


/* ============================
   Timeline connector (línea + puntos)
   Aplica la clase .timeline-connector
   ============================ */

/* Contenedor con la línea vertical */
.timeline-connector {
  position: relative;
  padding-left: 56px; /* espacio para la línea y los puntos */
  box-sizing: border-box;
}

/* Línea vertical: ocupa todo el alto del contenedor */
.timeline-connector::before {
  content: "";
  position: absolute;
  left: 28px;           /* distancia desde el borde izquierdo de la sección */
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--main3) 0%, var(--main6) 100%);
  opacity: 0.95;
  pointer-events: none;
  transition: background .18s ease, transform .18s ease;
  box-shadow: 0 6px 18px rgba(9,12,155,0.04) inset;
}

/* Cada bloque que será marcado con un punto (asegúrate de que sean hijos directos) */
.timeline-connector > * {
  position: relative;
  padding-left: 18px; /* separación interna del bloque respecto al punto */
  min-width: 0; /* evita que se compriman en contenedores flex */
}

/* El punto (dot) que indica cada segmento */
.timeline-connector > *::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 2px;             /* ajustar para centrar respecto al título del segmento */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--background); /* círculo con borde */
  border: 3px solid var(--main7);
  box-shadow: 0 6px 18px rgba(9,12,155,0.12);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), border-color .18s ease, background .18s ease;
  z-index: 2;
}

/* Variante: punto relleno cuando el segmento está "activo" (puedes añadir .active en JS si quieres) */
.timeline-connector > *.active::before {
  background: var(--main7);
  border-color: var(--background);
  transform: scale(1.05);
}

/* Efecto hover sobre el bloque: realza punto + sutil resplandor en la línea */
.timeline-connector > *:hover::before {
  transform: scale(1.15);
  border-color: var(--main55);
}


/* Ajustes visuales para cuando el bloque tiene varios párrafos (mejora el centrado vertical) */
.timeline-connector > * { padding-top: 8px; padding-bottom: 8px; }



/* Pequeña corrección si quieres la línea más corta (no cubrir header/footers) */
.timeline-connector.short-line::before {
  top: 24px;
  bottom: 24px;
}

/* Si usas secciones con fondo claro/oscuro, ajusta contraste del punto */
.timeline-connector.contrast-dark > *::before {
  background: rgba(255,255,255,0.06);
  border-color: var(--background);
}

































































.cta-section {
  background: transparent;
  color: var(--black);
  box-sizing: border-box;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  grid-area: cta;
}

.cta-section .cta-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.cta-section h2 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.06;
  color: var(--main8);
  font-weight: 800;
  margin-bottom: 12px;
}

.cta-section .cta-lead {
  margin-top: 8px;
  font-size: 1.02rem;
  color: rgba(18,29,46,0.88);
  margin-bottom: 2rem;
}

.cta-section .cta-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
  box-sizing: border-box;
}

.cta-section .cta-steps p {
  margin: 0 0 12px 0;
  font-weight: 700;
  color: var(--main6);
  font-size: 0.98rem;
}

.cta-section ol {
  margin: 0 0 18px 18px;
  padding: 0;
  color: rgba(18,29,46,0.92);
  line-height: 1.6;
  font-size: 0.98rem;
}

.cta-section ol li {
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.cta-section .cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.cta-section .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--main7);
  border: 2px solid var(--main7);
  transition: background-color .18s ease, color .12s ease, transform .12s ease;
}

.cta-section .btn-outline:hover { background: var(--main4); color: var(--background); transform: translateY(-2px); }
.cta-section .btn-outline:focus-visible { outline: 3px solid rgba(18,107,159,0.12); border-radius: 10px; }

.cta-section .cta-aside .card {
  padding: 18px;
  border-radius: 10px;
  background: var(--wt);
  box-shadow: 0 8px 20px rgba(9,12,155,0.04);
  color: rgba(18,29,46,0.95);
  border: 2px dotted var(--main);
}

.cta-section .cta-aside h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--main6);
}

.cta-section .cta-aside p {
  margin: 0;
  color: rgba(18,29,46,0.9);
  line-height: 1.5;
  font-size: 0.96rem;
}

.cta-section .cta-aside > div + div {
  margin-top: 14px;
  font-size: .95rem;
  color: rgba(18,29,46,0.8);
}

.cta-section .cta-aside strong {
  color: rgba(18,29,46,0.9);
}


@media (max-width: 1024px) {
  .cta-section .cta-grid { grid-template-columns: 1fr 300px; gap: 20px; }
}

@media (max-width: 768px) {
  .cta-section { padding: 32px 0; }
  .cta-section .cta-grid { grid-template-columns: 1fr; gap: 18px; }
  .cta-section .cta-actions { flex-direction: column; }
  .cta-section .btn-primary, .cta-section .btn-outline { width: 100%; justify-content: center; }
}

@media print {
  .cta-section .btn-primary, .cta-section .btn-outline { display: none; }
}

.week-steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.week-steps .step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(250,250,252,0.6);
  box-shadow: 0 6px 18px rgba(9,12,155,0.03);
  transition: transform .12s ease, box-shadow .12s ease;
}

.week-steps .step:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(9,12,155,0.06);
}

.week-steps .step::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  color: var(--background);
  background: linear-gradient(180deg, var(--main4), var(--main7));
  box-shadow: 0 6px 18px rgba(9,12,155,0.08);
  font-size: 0.95rem;
}

.step-body { min-width: 0; }

.step-title {
  display: block;
  font-weight: 800;
  color: var(--main6);
  margin-bottom: 6px;
  font-size: 1rem;
}

.step-desc {
  color: rgba(18,29,46,0.9);
  font-weight: 600;
  line-height: 1.45;
  display: block;
  font-size: 0.97rem;
}

@media (max-width: 768px) {
  .week-steps .step {
    padding: 10px 12px;
    gap: 10px;
  }

  .week-steps .step::before {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    flex: 0 0 32px;
  }

  .step-title { font-size: 0.98rem; }
  .step-desc { font-size: 0.95rem; }
  .cta-section .cta-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 28px;
  align-items: start;
  box-sizing: border-box;
}
}




















    .footer-content {
        display: flex;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer-section {
        flex: 1;
        padding: 0 20px;
        margin-bottom: 8px;
        display: flex;
        justify-content: center;
    }

    .footer-section.header {
        flex-direction: column;
    }

    .footer-section p.header-footer {
        font-size: 1.5rem;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .footer-section p {
        margin-bottom: 5px;

        margin: 0 auto;
        width: fit-content;
    }

    .footer-section a {
        color: gray;
        font-size: .8rem;
    }

    .social-icons li {
        margin-right: 10px;
    }

    .social-icons a {
        color: #fff;
        text-decoration: none;
        font-size: 1.2rem;
    }

    .footer-bottom {
        background-color: #222;
        text-align: center;
        padding: 10px 0;
    }

    .footer-bottom p {
        margin: 0;
    }

    footer .social {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1rem;
        margin: 1rem 1rem 2.5rem 1rem;
        position: relative;
        gap: 6px;
        margin-top: 1rem;
        height: 3rem;
    }

    footer .social p {
        font-weight: 200;
        font-size: 1rem;
        color: rgb(201, 201, 201);
        margin-right: .3rem;
    }

    footer .social .icon {
        display: inline-block;

        background-size: contain;

        background-repeat: no-repeat;

        text-decoration: none;

        z-index: 9;
        width: 100%;
        height: 100%;
    }



    footer .social div {
        height: 2rem;
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: wheat;
        border-radius: 6px;
        overflow: hidden;
    }

    footer .social .telegram-container {
        padding: 3px;
    }

    footer .social .telegram {
        background-image: url('./img/telegram.svg');
        background-position: center;
    }



































































@media only screen and (max-width: 1439px) {
  
  


}

@media only screen and (max-width: 1279px) {
    .header-nav nav ul li {
        margin: 0 0 0 .6rem;
   
    }
    
 

    .header-wrapper,
    .content-wrapper {
        width: 93%;
        margin: 0 auto;
    }






  }


































@media only screen and (max-width: 1023px) {
 
    div.header-nav  nav  ul{
        gap: 1rem;
     }
    
            .header-nav nav ul li {
                padding: 4px 24px 4px 4px;
                margin: 0;
            }
    
            header .header-nav li label {
        padding: 0px;
        max-width: 6.6rem;
            }
    
            header .dropdown-navbar{
                top: 44px;
            }
    
           


}


































































@media only screen and (max-width: 767px) {

     /* COMMON */ 
     main {
        margin-top: 1rem;
    }

    header {
        height: 3.5rem;
        z-index: 10;
    }

    .header-nav .nav-img {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    .header-nav .nav-img img {
        width: 1.9rem;
    }

    .header-nav nav {
        position: absolute;
        right: 15rem;
        opacity: 0;
        visibility: hidden;
        top: 3.5rem;
        transform: translateX(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .header-nav nav::-webkit-scrollbar,
    .header-nav nav ul::-webkit-scrollbar,
    .header-nav nav ul li::-webkit-scrollbar,
    .header-nav nav ul .dropdown-navbar::-webkit-scrollbar {
        display: none !important;
    }

   
    .header-nav #toggle-menu:checked~nav {
        visibility: visible;
        display: flex;
        flex-direction: column;
        transform: translateX(0);
        right: 0;
        width: 100%;
        height: 100vh;
        opacity: 1;
        overflow-y: auto;
        pointer-events: auto;
        background: linear-gradient(180deg, var(--background) 30%, #f7f5f5 100%);
        transition: all 0.3s ease;
        z-index: 2;
    }

    .header-nav nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: start;
        width: 100%;
        margin-top: 1rem;
        padding: 1rem 5% 0 5%;
        padding-bottom: 1rem;
        overflow-y: auto;
    }

    .header-nav nav ul li {
        position: relative;
        display: grid;
        grid-template-areas:
            "button button"
            "dropdown dropdown";
        width: 100%;
        box-sizing: border-box;
        height: fit-content;
        border: 1px solid var(--main);
        margin: 0.5rem 0;
        padding: 0;
        color: var(--main4);
        font-size: 1.3rem;
        max-width: 100%;
    }
    .header-nav nav ul li  label{
        max-width: 100%;
        padding: 12px 8px 12px 8px;
    }
    .header-nav nav ul li.high {
        background-color: inherit;
        color: var(--main4);
        font-weight: 600;
        border: none;
        width: 100%;
      
    }

    .header-nav nav ul li.high a {
        padding: 0.9rem 1rem;
        min-width: 40vw;
    }

    .header-nav li img {
        position: absolute;
        top: 1.2rem;
        right: 1rem;
        height: 2.6rem;
        width: 2rem;
        pointer-events: none;
    }

    .header-nav li label {
        grid-area: button;
        width: 100%;
        height: 100%;
        display: block;
        padding: 0.9rem 1rem;
    }

    .header-nav nav ul li input:active~label,
    .header-nav nav ul li input:checked~label {
        background-color: var(--main7);
        color: var(--background);
        font-weight: 600;
        border-radius: 6px 6px 0 0;
    }

    .header-nav nav ul li input:checked~img {
        filter: invert(100%) brightness(2) contrast(100);
    }

    header .dropdown-navbar {
        grid-area: dropdown;
        display: flex;
        flex-direction: column;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 0 0 0;
        transition: all 200ms linear;
        background-color: rgb(246, 246, 246);
        align-items: center;
        padding-top: 7px;
    }

    header .dropdown-navbar a {
        font-size: 1.1rem;
        color: var(--main);
        font-weight: 500;
        position: relative;
        width: 100%;
        padding: 8px 6px 6px 16px;
        display: block;
        text-decoration: none;
    }

    header .dropdown-navbar a::before {
        position: absolute;
        content: "";
        opacity: 0.3;
        background-color: var(--main35);
        width: 100%;
        height: 0.1rem;
        margin-left: -14px;
        top: 97%;
        z-index: 4;
    }

    header .dropdown-navbar a::after {
        content: "ℹ️";
        position: absolute;
        right: 5%;
        font-size: 0.9rem;
        transform: translateY(-50%);
        top: 50%;
        opacity: 0.7;
    }

    header .dropdown-navbar a:hover,
    header .dropdown-navbar a:active {
        background-color: rgb(255, 191, 0);
        color: var(--main8);
        font-weight: 700;
    }

    .header-nav .dropdown-navbar a:first-child {
        padding-top: initial;
    }
  }

   






































@media only screen and (max-width: 599px) {
   /*COMMON */
   main {
    padding-top: 54px;
}


}

@media only screen and (max-width: 479px) {


  
.cta-section .cta-grid {
  display: grid;
  grid-template-columns:1fr ;

}

  .cta-grid .cta-aside{
    display: none;
  }
}