:root {
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  --btn-radius: 15px;
  --btn-pad-y: 20px;  /* padding vertical del botón principal */
  --btn-pad-x: 25px;  /* padding horizontal del botón principal */
  --decor-size: 60px; /* lado del botón decorativo (cuadrado) */
  --brand: #ff0138;
}

/* Global */
/* ===== GLOBAL + FONDO DE PÁGINA (UNIFICADO) ===== */


/* 🔹 Suavizado global de fuentes */
* {

  box-sizing: border-box;              /* ✅ AÑADE ESTO */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titulares */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
}

/* Texto enfatizado */
strong, b { font-weight: 800; }

/* Enlaces */
a { color: #0077cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Párrafos */
p { margin: 0 0 1rem; max-width: 65ch; }

/* ===== Wrapper general ===== */
.wrapper {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ===== Header ===== */
header {
  width: 100%;
  margin-top: 20px;
}

/* ===== NAV — Versión escritorio ===== */
nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  width: 100%;
  height: clamp(58px, 3vw, 58px);
  overflow: hidden;
  padding: 1px 5px;    /* un poco más de aire lateral */

  /* 🔹 NUEVO: separación entre columnas (izq–centro–derecha) */
  column-gap: 22px;     /* prueba 20–24px si quieres afinar */

  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);

  font-family: var(--font-sans);
}




/* IZQUIERDA: imagen + h1 */
.nav-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-left img {
  width: 53px;
  height: 53px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transform: scale(1.3) translateX(-8px);
  transform-origin: left center;
}

.nav-left h1 {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  transform: translateX(-2px);
  will-change: transform;
  text-shadow:
    0.4px 0.4px 0.2px rgba(34, 34, 34, 0.9),
   -0.4px 0.4px 0.2px rgba(34, 34, 34, 0.9),
    0.4px -0.4px 0.2px rgba(34, 34, 34, 0.9),
   -0.4px -0.4px 0.2px rgba(34, 34, 34, 0.9);
}

/* CENTRO: lista centrada */
.nav-center {
  justify-self: center;
  transform: translateX(-10px);
  will-change: transform;
}
.nav-center ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 36px;
}
.nav-center li {
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease;
  text-shadow:
    0.1px 0.1px 0.2px rgba(34, 34, 34, 0.9),
   -0.1px 0.1px 0.2px rgba(34, 34, 34, 0.9),
    0.1px -0.1px 0.2px rgba(34, 34, 34, 0.9),
   -0.1px -0.1px 0.2px rgba(34, 34, 34, 0.9);
}
.nav-center li:hover {
  color: #ff0138;
  opacity: 1;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  text-shadow:
    0.3px 0.3px 0.2px rgba(255, 1, 56, 0.9),
   -0.3px 0.3px 0.2px rgba(255, 1, 56, 0.9),
    0.3px -0.3px 0.2px rgba(255, 1, 56, 0.9),
   -0.3px -0.3px 0.2px rgba(255, 1, 56, 0.9);
}

/* DERECHA: botón (estilos base, sin trucos de posición) */
/* DERECHA: botón (base global) */
.nav-right {
  display: flex;
  align-items: center;
}

.nav-right button {
  appearance: none;
  border: 0;
  padding: 12px 25px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  background: #ff0138;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: filter 0.2s ease, transform 0.02s ease;
  transform: none;
  will-change: transform;
  text-shadow:
    0.1px 0.1px 0.2px rgba(255, 255, 255, 0.9),
   -0.1px 0.1px 0.2px rgba(255, 255, 255, 0.9),
    0.1px -0.1px 0.2px rgba(255, 255, 255, 0.9),
   -0.1px -0.1px 0.2px rgba(255, 255, 255, 0.9);
}




/* Accesibilidad */
nav a, .nav-center li, .nav-right button { outline: none; }
nav a:focus-visible,
.nav-center li:focus-visible,
.nav-right button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,119,204,0.35);
  border-radius: 8px;
}

/* ===== HAMBURGUESA: ESTILOS BASE (desktop + tablet) ===== */

/* Ocultamos el checkbox */
.nav-toggle {
  display: none;
}

/* El icono de hamburguesa: por defecto oculto (solo se verá en móvil) */
.nav-toggle-label {
  display: none;  /* en móvil lo activamos */
}

/* La envoltura de menú sigue comportándose como antes en desktop/tablet */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center; /* se ajustará en móvil */
  gap: 16px;
}



/* ===== Section 2 columnas a pantalla completa ===== */
/* SECCION-DOS-COLUMNAS — DESKTOP BASE “SANA” */
/* ===== SECCION-DOS-COLUMNAS — DESKTOP BASE “SANA” ===== */
.seccion-dos-columnas {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  width: 100%;

  height: auto;
  min-height: 500px;

  gap: 24px;

  /* 🔥 Ajustado para subir toda la sección */
  margin-top: -30px;      /* antes 0px → ahora sube aprox. 40px */
  margin-bottom: 60px;    /* lo dejamos igual */

  padding-left: 5px;
  padding-right: 40px;
  padding-top: 0px;
  padding-bottom: 60px;

  box-sizing: border-box;
}



/* 🔹 Ajuste vertical del bloque izquierdo completo */
.seccion-dos-columnas .col-izquierda {
  position: relative;
  top: 60px; /* 🔹 sube todo el bloque: prueba -10px, -20px o -30px */
}

/* Columna izquierda: título principal (h2) */
.seccion-dos-columnas .col-izquierda h2 {
  margin: 0;
  font-family: var(--font-sans);   /* misma tipografía del h1 */
  font-weight: 500;                /* mismo peso base */
  font-size: 3rem;                 /* 🔹 más grande que antes (2.2 → 3rem) */
  line-height: 1.15;               /* ajusta la separación entre líneas */
  color: #222;
  transform: translateX(-2px);
  will-change: transform;

  /* 🔹 Engrosar visualmente las letras (igual que el h1) */
  text-shadow:
   0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
    0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9);
}

/* 🔹 Última palabra del h2 (span) — versión PRO */
.seccion-dos-columnas .col-izquierda h2 .resaltado {
  color: #ff0039;                    /* color principal */
  font-weight: 500;
  border: none;
  padding: 0;
  border-radius: 0;

  /* 🔹 Trazo del mismo color que el texto */
  -webkit-text-stroke: 0.4px #ff0039;
  text-stroke: 0.4px #ff0039;

  /* 🔹 Text-shadow multicapa para grosor profesional y equilibrio */
  text-shadow:
     0.6px  0.6px 0   rgba(255, 0, 57, 0.95),
    -0.6px  0.6px 0   rgba(255, 0, 57, 0.95),
     0.6px -0.6px 0   rgba(255, 0, 57, 0.95),
    -0.6px -0.6px 0   rgba(255, 0, 57, 0.95),
     0.9px  0.9px 0   rgba(255, 0, 57, 0.85),
    -0.9px -0.9px 0   rgba(255, 0, 57, 0.85);
}

/* 🔹 Cápsula decorativa (visual, no interactiva) */
.capsula-decorativa {
  display: inline-flex;
  align-items: center;
  gap: 5px;                         /* espacio entre icono y texto */
  padding: 4px 14px;                /* tamaño compacto, alineado con el nav */
  border-radius: 9999px;            /* forma de cápsula */
  background: rgba(255, 1, 56, 0.1);/* color translúcido coherente */
  color: #ff0138;                   /* mismo tono que el botón principal */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;

  transform: translateY(-25px);     /* mantiene la alineación con el nav */
  will-change: transform;
}

/* 🔹 Imagen dentro de la cápsula — ajustable sin alterar el layout */
.capsula-decorativa img {
  width: 16px;                      /* tamaño base real */
  height: 16px;
  object-fit: contain;
  display: block;
  transform: scale(1.8) translateX(-4px);  /* agranda y mueve ligeramente a la izquierda */
  transform-origin: center;
}

/* 🔹 Texto dentro de la cápsula — mismo grosor visual que h1/h2 */
.capsula-decorativa span {
  font-weight: 500;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #ff0138;

  /* Engrosamiento visual profesional */
  text-shadow:
    0.1px 0.1px 0.2px rgba(255, 1, 56, 0.9),
   -0.1px 0.1px 0.2px rgba(255, 1, 56, 0.9),
    0.1px -0.1px 0.2px rgba(255, 1, 56, 0.9),
   -0.1px -0.1px 0.2px rgba(255, 1, 56, 0.9);
}

/* 🔹 Párrafo debajo del h2 — bajado sin afectar al resto */
.seccion-dos-columnas .col-izquierda p {
  position: relative;     /* saca el párrafo del flujo del layout */
  top: 20px;              /* 🔹 muévelo hacia abajo: prueba 30px, 40px, 50px */
  
  margin: 0;              /* evita márgenes que empujen otros elementos */
  max-width: 50ch;        /* ancho de lectura óptimo */
  color: #222;
  line-height: 1.6;
  font-size: 1.1rem;     /* 🔹 tamaño ligeramente mayor (ajustable) */
}

/* 🔹 Color destacado dentro del párrafo */
.seccion-dos-columnas .col-izquierda p .resaltado-texto {
  color: #ff0138; /* mismo tono principal */
  font-weight: 500;
}


/* 🔹 Contenedor del botón funcional y el botón decorativo */
.botonera {
  display: flex;
  align-items: center;
  gap: 16px;              /* espacio entre el botón y el div decorativo */
  margin-top: 50px;       /* separación respecto al <p> */
}

/* 🔹 Botón principal funcional */
.boton-principal {
  background-color: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-shadow:
    0.2px 0.2px 0.2px rgba(255, 255, 255, 0.85),
   -0.2px 0.2px 0.2px rgba(255, 255, 255, 0.85),
    0.2px -0.2px 0.2px rgba(255, 255, 255, 0.85),
   -0.2px -0.2px 0.2px rgba(255, 255, 255, 0.85);
}

/* Icono dentro del botón principal */
.boton-principal .icon-arrow-right2 {
  font-size: 1.1rem;      /* tamaño del icono dentro del botón */
  line-height: 1;
  color: #fff;            /* mismo color que el texto */
}

/* 🔹 Div decorativo (no funcional, solo visual) */
.boton-decorativo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--decor-size);
  height: var(--decor-size);
  border-radius: var(--btn-radius);
  background-color: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* 🔹 Icono dentro del div decorativo */
.boton-decorativo .icon-icono-QR-SVG {
  font-size: 3rem;  /* tamaño grande para el icono decorativo */
  color: #ff0138;
  line-height: 1;
}

.seccion-dos-columnas .col-derecha img {
  width: 100%;          /* ocupa el ancho de su columna (el 40%) */
  max-width: 450px;     /* nunca será más grande de 750px, pero puede ser menor */
  height: auto;         /* mantiene proporción */
  object-fit: contain;
  position: relative;
  top: 75px;
  transform: translateX(-0rem);  /* mantenemos tu desplazamiento lateral */
}



/* ===== SECTION: CARDS (visible al hacer scroll) ===== */
/* ===== SECCION CARDS — DESKTOP BASE (sin trucos negativos) ===== */
.seccion-cards {
  width: 100%;
  min-height: auto;            /* 🔹 altura natural, sin forzar 100vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 🔹 que empiece arriba, no centrado vertical */
  box-sizing: border-box;

  /* 🔹 Separación correcta con la sección superior (hero) */
  margin-top: 40px;            /* puedes poner 20, 30, 60 según tu gusto */

  /* 🔹 Aire interno */
  padding-top: 40px;
  padding-bottom: 60px;
}


/* 🔹 Título del segundo section (h3) — Mulish ExtraBold */
.seccion-cards h3 {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;         /* ExtraBold */
  font-size: 1.8rem;        /* ajusta según el tamaño que prefieras */
  letter-spacing: 1px; /* ajusta como quieras */
  color: #222;
  text-align: center;
  margin-bottom: 40px;      /* mantiene el espacio con las tarjetas */
  line-height: 1.2;

  /* Engrosamiento visual profesional (mismo estilo que h1/h2 oscuros) */
  text-shadow:
    0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
    0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9);
}

/* 🔹 Color destacado dentro del h3 */
.seccion-cards h3 .medio {
  color: #ff0138;           /* tono principal */
  font-weight: 500;          /* mantiene el grosor ExtraBold */

   /* Engrosamiento visual adaptado al tono #ff0138 */
  text-shadow:
    0.8px  0.8px 0   rgba(255, 1, 56, 0.95),
   -0.8px  0.8px 0   rgba(255, 1, 56, 0.95),
    0.8px -0.8px 0   rgba(255, 1, 56, 0.95),
   -0.8px -0.8px 0   rgba(255, 1, 56, 0.95),
    0.8px  0.8px 0   rgba(255, 1, 56, 0.85),
   -0.8px -0.8px 0   rgba(255, 1, 56, 0.85);
}





/* 🔹 Contenedor de las 4 tarjetas — ocupa todo el ancho del navegador */
/* Contenedor de las 4 tarjetas */
.contenedor-cards {
  display: flex;
  justify-content: center;      /* las centramos en la fila */
  align-items: center;
  gap: 30px;                    /* mismo hueco entre tarjetas */
  flex-wrap: nowrap;            /* ✅ siguen siendo UNA FILA en desktop */
  width: 100%;
  margin: 0;
  padding-left: 1px;
  padding-right: 1px;
  box-sizing: border-box;
}

/* Tarjetas individuales */
.card {
  background-color: #fff;
  border-radius: 16px;

  /* ✅ ancho adaptable para que entren 4 sin sacar scroll:
     (ancho disponible - 3 huecos) / 4
     → así siempre caben en 100% del contenedor
  */
  width: calc((100% - 3 * 30px) / 4);

  /* ✅ misma altura que antes (220px) */
  height: 250px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  font-family: var(--font-sans);
  color: #222;
  padding-top: 30px;
  transition: none;
}




/* 🔹 Tarjetas individuales */
/* Iconos por card (más específicos: solo el icono, no el texto) */
.contenedor-cards .card:first-child .icon-cartera-SVG { 
  font-size: 7.2rem; 
  color: #ff0138; 
  line-height: 1; 
  display: inline-block; 
 transform: translateY(-25px);
}

.contenedor-cards .card:nth-child(2) .icon-flechas-SVG { 
  font-size: 6.2rem; 
  color: #ff0138; 
  line-height: 1; 
  display: inline-block; 
  transform: translateY(-15px);
}
.contenedor-cards .card:nth-child(3) .icon-verificado-2-SVG { 
  font-size: 7rem; 
  color: #ff0138; 
  line-height: 1; 
  display: inline-block; 
  transform: translateY(-22px);
}
.contenedor-cards .card:nth-child(4) .icon-regalo-SVG { 
  font-size: 7rem; 
  color: #ff0138; 
  line-height: 1; 
  display: inline-block; 
  transform: translateY(-20px);
}

/* 🔹 Texto debajo del icono */
.card .texto-card {
  display: block;         /* asegura que se apile debajo */
  font-size: 0.95rem;        /* 🔹 ajusta este valor para cambiar el tamaño */
  line-height: 1.4;
  color: #222;
  text-align: center;
  margin: 0px 25px 15px 25px;  /* 🔹 margen: top, right, bottom, left */

  /* 🔹 Engrosamiento visual profesional (como h1/h2) */
  text-shadow:
    0.02px 0.02px 0.02px rgba(34, 34, 34, 0.9),
   -0.02px 0.02px 0.02px rgba(34, 34, 34, 0.9),
    0.02px -0.02px 0.02px rgba(34, 34, 34, 0.9),
   -0.02px -0.02px 0.02px rgba(34, 34, 34, 0.9);
}

/* Texto del card 1 */
.txt-1 {
  transform: translateY(-27px);   /* súbelo o bájalo */
  display: inline-block;         /* NECESARIO para que translate funcione */
}

/* Texto del card 2 */
.txt-2 {
  transform: translateY(-11px);
  display: inline-block;
}

/* Texto del card 3 */
.txt-3 {
  transform: translateY(-25px);
  display: inline-block;
}

/* Texto del card 4 */
.txt-4 {
  transform: translateY(-25px);
  display: inline-block;
}



/* ===== SECTION: REGLAS ===== */
/* ===== SECCION-REGLAS — DESKTOP BASE LIMPIO ===== */
.seccion-reglas {
  width: 100%;
  min-height: auto;              /* sin forzar altura mínima en vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* el contenido empieza arriba, no centrado en la ventana */
  box-sizing: border-box;

  /* separación con la sección anterior (seccion-cards) */
  margin-top: 0px;              /* ajustable: 30–60px según te guste */
  margin-bottom: 0px;           /* aire con la siguiente sección */

  /* aire interno de la sección */
  padding-top: 0px;
  padding-bottom: 60px;
  padding-left: 0;
  padding-right: 0;
}


/* Reutiliza tu .titulo-cards existente para el h3 centrado */
.seccion-reglas .titulo-cards {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;         /* ExtraBold */
  font-size: 1.8rem;        /* ajusta según el tamaño que prefieras */
  letter-spacing: 1px; /* ajusta como quieras */
  color: #222;
  text-align: center;
  margin-bottom: 40px;      /* mantiene el espacio con las tarjetas */
  line-height: 1.2;

  /* Engrosamiento visual profesional (mismo estilo que h1/h2 oscuros) */
  text-shadow:
    0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
    0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9);
}


/* 🔹 Color destacado dentro del h3 */
.seccion-reglas h3 .medio {
  color: #ff0138;           /* tono principal */
  font-weight: 500;          /* mantiene el grosor ExtraBold */

   /* Engrosamiento visual adaptado al tono #ff0138 */
  text-shadow:
    0.8px  0.8px 0   rgba(255, 1, 56, 0.95),
   -0.8px  0.8px 0   rgba(255, 1, 56, 0.95),
    0.8px -0.8px 0   rgba(255, 1, 56, 0.95),
   -0.8px -0.8px 0   rgba(255, 1, 56, 0.95),
    0.8px  0.8px 0   rgba(255, 1, 56, 0.85),
   -0.8px -0.8px 0   rgba(255, 1, 56, 0.85);
}



/* Contenedor de dos cajas — reutiliza la lógica de tu .contenedor-doble */
.seccion-reglas .contenedor-doble {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1250px;      /* igual que tu wrapper */
  gap: 30px;
  padding: 0;
  box-sizing: border-box;
}


/* Cajas blancas con esquinas redondeadas (igual al section anterior) */
.seccion-reglas .caja {
  background: #fff;
  border-radius: 16px;
  flex: 1;
  padding: 32px 42px 32px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}

/* Título dentro de cada caja: tipografía general (NO el h3 estilizado previo) */
.seccion-reglas .caja h3 { 
  margin: 0; 
  font-family: var(--font-sans); 
/* Mulish general */ 
  font-weight: 500; /* coherente con tus subtítulos */ 
  font-size: 1.6rem; 
  letter-spacing: 0.6px; /* ajusta como quieras */
  line-height: 1.2; 
  color: #222; /* sutil engrosado como en el resto (muy leve) */ 
  text-shadow: 
  0.4px 0.4px 0.4px rgba(34,34,34,0.7), 
  -0.4px 0.4px 0.4px rgba(34,34,34,0.7), 
  0.4px -0.4px 0.4px rgba(34,34,34,0.7), 
  -0.4px -0.4px 0.4px rgba(34,34,34,0.7); 
}

/* 🔹 Color especial para la palabra “step” en los h3 */
.seccion-reglas .caja h3 .step {
  color: #ff0138;

  text-shadow:
    0.4px 0.4px 0.4px rgba(255, 1, 56, 0.9),
   -0.4px 0.4px 0.4px rgba(255, 1, 56, 0.9),
    0.4px -0.4px 0.4px rgba(255, 1, 56, 0.9),
   -0.4px -0.4px 0.4px rgba(255, 1, 56, 0.9);
}




/* Párrafos dentro de las cajas: Mulish general */
/* Engrosado suave para todo el texto de los párrafos */
.seccion-reglas .caja p {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: #222;

  /* ligero engrosado, muy discreto, mismo color del texto */
  text-shadow:
    0.08px 0.08px 0 rgba(34,34,34,0.85),
   -0.08px 0.08px 0 rgba(34,34,34,0.85),
    0.08px -0.08px 0 rgba(34,34,34,0.85),
   -0.08px -0.08px 0 rgba(34,34,34,0.85);
}

/* Texto especial dentro de los párrafos */
.seccion-reglas .caja p .colorado {
  color: #ff0138;
  font-weight: 500;

  /* Engrosado del MISMO color (sin halo oscuro) */
  text-shadow:
    0.07px 0.07px 0 rgba(255,1,56,0.95),
   -0.07px 0.07px 0 rgba(255,1,56,0.95),
    0.07px -0.07px 0 rgba(255,1,56,0.95),
   -0.07px -0.07px 0 rgba(255,1,56,0.95);
}


/* Fila de título + icono SOLO en la caja izquierda */
.seccion-reglas .caja:first-child .titulo-caja {
  display: flex;
  align-items: center;        /* ícono alineado con el h3 */
  position: relative;
  justify-content: flex-start; /* h3 y la imagen juntos */
  gap: 0px;                  /* espacio entre h3 e imagen */
  margin-bottom: 8px;
}

/* Imagen al lado del h3 */
.seccion-reglas .icono-caja {
  position: absolute;
  right: 235px;        /* a la derecha del h3 */
  top: -15px;          /* súbela o bájala como quieras */
  width: 65px;       /* AJUSTA EL TAMAÑO AQUÍ */
  height: 65px;      /* AJUSTA EL TAMAÑO AQUÍ */
  object-fit: contain;
  display: inline-block;
}

.seccion-reglas .caja-izquierda .titulo-caja {
  padding-top: 0px;  /* AJUSTA ESTE VALOR */
}

.seccion-reglas .caja-izquierda p {
  padding-top: -30px;  /* AJUSTA ESTE VALOR */
}

.seccion-reglas .caja-derecha h3 {
  padding-top: 2px;  /* AJUSTA ESTE VALOR */
}

.seccion-reglas .caja-derecha p {
  padding-top: 5px;  /* AJUSTA ESTE VALOR */
}


/* ===== SECTION EXTRA (igual ancho y lógica que seccion-reglas) ===== */
/* ===== SECCION-EXTRA — DESKTOP BASE LIMPIO ===== */
.seccion-extra {
  width: 100%;
  min-height: auto;              /* sin forzar altura mínima en vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* contenido empieza arriba */
  box-sizing: border-box;

  /* separación con la sección anterior (seccion-reglas) */
  margin-top: 0px;              /* ajusta a 30–50 si la quieres más pegada o más lejos */
  margin-bottom: 10px;           /* aire con la siguiente sección */

  /* aire interno de la sección */
  padding-top: 0px;
  padding-bottom: 60px;
  padding-left: 0;
  padding-right: 0;
}


/* Título centrado del nuevo section — reutiliza la misma lógica de .titulo-cards */
.seccion-extra .titulo-cards  {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;         /* ExtraBold */
  font-size: 1.8rem;        /* ajusta según el tamaño que prefieras */
  letter-spacing: 1px; /* ajusta como quieras */
  color: #222;
  text-align: center;
  margin-bottom: 40px;      /* mantiene el espacio con las tarjetas */
  line-height: 1.2;

  /* Engrosamiento visual profesional (mismo estilo que h1/h2 oscuros) */
  text-shadow:
    0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px 0.9px 0.2px rgba(34, 34, 34, 0.9),
    0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9),
   -0.9px -0.9px 0.2px rgba(34, 34, 34, 0.9);
}


/* 🔹 Color destacado dentro del h3 */
.seccion-extra h3 .medio {
  color: #ff0138;           /* tono principal */
  font-weight: 500;          /* mantiene el grosor ExtraBold */

   /* Engrosamiento visual adaptado al tono #ff0138 */
  text-shadow:
    0.8px  0.8px 0   rgba(255, 1, 56, 0.95),
   -0.8px  0.8px 0   rgba(255, 1, 56, 0.95),
    0.8px -0.8px 0   rgba(255, 1, 56, 0.95),
   -0.8px -0.8px 0   rgba(255, 1, 56, 0.95),
    0.8px  0.8px 0   rgba(255, 1, 56, 0.85),
   -0.8px -0.8px 0   rgba(255, 1, 56, 0.85);
}

/* Contenedor de las dos cajas — mismo ancho que seccion-reglas */
.seccion-extra .contenedor-doble {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1250px;            /* igual que tu wrapper */
  gap: 30px;
  padding: 0;                   /* ya alineamos con el padding del section */
  box-sizing: border-box;
}

/* Cajas blancas del nuevo section — igual estilo que las de seccion-reglas */
.seccion-extra .caja {
  background: #fff;
  border-radius: 16px;
  flex: 1;
  padding: 10px 32px 32px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}


/* ====== BLOQUE DE CÁLCULO (SECTION EXTRA) ====== */

.bloque-calculo {
  margin-top: 20px;
  width: 100%;
}

/* Fila completa: columnas + símbolos */
.fila-calculo {
  display: flex;
  align-items: flex-end;      /* alinear inputs, × y = en la misma línea */
  justify-content: flex-start;  /* 🔹 ya NO estira hasta los bordes, deja sitio al final */
  gap: 16px;                   /* puedes bajar a 12px si quieres todo más juntito */
}


/* Columna base */
.columna-calculo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  gap: 0px;
}

/* ===== CONTROL DE ANCHO DE CADA COLUMNA (VERSIÓN FINAL) ===== */

/* Ajusta estos valores como quieras (más grande = más ancho) */
:root {
  --col1: 1.6;   /* Columna 1 — Número de formulario */
  --col2: 0.5;   /* Columna 2 — Se multiplica */
  --col3: 1.4;   /* Columna 3 — Resultado */
}

/* Aplicación directamente a las columnas */
.fila-calculo > .columna-calculo:nth-of-type(1) {
  flex: var(--col1);
}

.fila-calculo > .columna-calculo:nth-of-type(2) {
  flex: var(--col2);
}

.fila-calculo > .columna-calculo:nth-of-type(3) {
  flex: var(--col3);
}



/* Etiquetas */
.label-col {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  color: #222;
}

/* Ajustes finos de alineación por columna */
.label-col-1 {
  margin-top: 0rem;     /* referencia, usualmente la que menos se mueve */
  padding-bottom: 1rem;
}

.label-col-2 {
  margin-top: 0rem;  /* súbelo/bájalo cambiando este valor */
  padding-bottom: 1.5rem;
}


/* Ajuste fino de la etiqueta "Resultado" del div IZQUIERDO */
.label-col-resultado-izq {
  margin-top: 0rem;       /* AJUSTA HACIA ARRIBA/ABAJO */
  padding-bottom: 0.8rem;   /* AJUSTA la altura bajo el texto */
}

/* Ajuste fino de la etiqueta "Resultado" del div DERECHO */
.label-col-resultado-der {
  margin-top: 0rem;        /* AJUSTA HACIA ARRIBA/ABAJO */
 transform: translateY(3px); 
}


/* 🔹 Última palabra de los labels en color brand */
.label-col-colorado {
  color: #ff0138;
  font-weight: 500;
}



/* Input del número de formulario */
/* Contenedor que agrupa icono + input */
.input-wrapper {
  position: relative;
  width: 100%;
}

/* Input del número de formulario */
.input-formulario {
  width: 100%;
  max-width: 600px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid #ff0138;
  padding: 0 10px;
  padding-right: 48px;  /* 🔹 AHORA dejamos espacio a la DERECHA para el icono */
  padding-left: 20px;   /* AJUSTA ESTE VALOR */
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: #222;
  background: #fff;
  box-sizing: border-box;

  /* 🔹 Quitar flechas (Firefox) */
  -moz-appearance: textfield;
}

/* 🔹 Quitar flechas (Chrome, Edge, Opera) */
.input-formulario::-webkit-inner-spin-button,
.input-formulario::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Mantener siempre el borde rosa cuando el input está en foco o validando */
.input-formulario:focus,
.input-formulario:focus-visible,
.input-formulario:active,
.input-formulario:focus:valid,
.input-formulario:focus:invalid {
  border-color: #ff0138;      /* borde rosa SIEMPRE */
  outline: none;              /* quita el outline azul por defecto */
  box-shadow: none;           /* por si el navegador añade brillo raro */
}


/* Icono vectorial dentro del input (AHORA A LA DERECHA) */
.input-wrapper .icono-input {
  position: absolute;
  right: 10px;              /* 🔹 lo movemos al lado derecho */
  left: auto;               /* por si acaso */
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: #ff0138;
  pointer-events: none;
}

/* Icono del input derecho */
.input-wrapper.icon-derecha .icono-input {
  right: 10px;          /* a la derecha */
  left: auto;
  font-size: 4rem;    /* ajusta si quieres */
  color: #ff0138;       /* mismo color que el borde */
}




/* Número grande de la columna "Se multiplica" */
.multiplicador {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 2rem;        /* tamaño del ×2 */
  color: #222;              /* 🔹 AHORA EN NEGRO */
  text-align: center;
  min-width: 60px;
  transform: translateY(-3px);   /* ⬆️ sube */
  text-shadow:
    0.1px 0.1px 0 rgba(34,34,34,0.9),
   -0.1px 0.1px 0 rgba(34,34,34,0.9),
    0.1px -0.1px 0 rgba(34,34,34,0.9),
   -0.1px -0.1px 0 rgba(34,34,34,0.9);
}


/* Resultado de la operación (número + icono) */
.resultado {
  display: inline-flex;           /* número + icono en la misma línea */
  align-items: center;            /* alineados verticalmente */
  gap: 0rem;                   /* espacio entre número e icono (ajusta si quieres) */

  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 2rem;
  color: #222;
  text-align: left;

  /* 🔹 Eliminamos la “caja gris” */
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;

  /* 🔹 Mantengo tu mismo engrosado visual */
  text-shadow:
    0.2px 0.2px 0 rgba(34,34,34,0.9),
   -0.2px 0.2px 0 rgba(34,34,34,0.9),
    0.2px -0.2px 0 rgba(34,34,34,0.9),
   -0.2px -0.2px 0 rgba(34,34,34,0.9);
}

/* Contenedor del número dentro del resultado (necesario para JS) */
.resultado-numero {
  display: inline-block;
}

/* Icono pegado al resultado */
.icono-resultado {
  font-size: 3.75rem;          /* ajusta si lo quieres más grande/pequeño */
  line-height: 1;
  color: #ff0138;             /* color del icono */
  text-shadow: none;          /* NO queremos engrosado aquí (solo número) */
  display: inline-block;
}

.resultado-izquierda .icono-resultado {
  font-size: 3.9rem;   /* AJUSTA si quieres otro tamaño específico */
}

.resultado-derecha .icono-resultado {
  font-size: 4.9rem;  /* ejemplo: tamaño distinto para el derecho */
}

/* 🔹 Ajuste fino SOLO del resultado de la caja derecha */
.resultado-derecha {
  transform: translateY(0.7rem); /* súbelo/bájalo cambiando este valor */
}

.icono-res-izq {
  transform: translateX(-12px);   /* mueve a la izquierda */
}

.icono-res-der {
  transform: translateX(-7px);   /* mueve a la izquierda más o menos según necesites */
}




/* Símbolos × y = */
.simbolo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  display: flex;
  align-items: flex-end;     /* alinea exacto con los números */
  justify-content: center;
  padding-bottom: 12px;      /* AJUSTA para subir/bajar el símbolo */
}

/* 🔹 Tamaño personalizado SOLO para el símbolo "×" */
.simbolo.multiplicar {
  font-size: 1.8rem;     /* AJUSTA este valor: 1.4rem, 1.8rem, 2rem… */
  padding-bottom: 5px;  /* AJUSTA para alinearlo verticalmente */
}

/* 🔹 Estilos específicos SOLO para el símbolo "=" */
.simbolo.igual {
  transform: translateX(-3.7rem);  /* muévelo a la izquierda. Prueba -0.3rem, -1rem, etc. */
  font-size: 1.1rem;               /* tamaño del "=" (puede ser distinto a la "×") */
}

/* 🔹 Mover visualmente la tercera columna (Resultado) hacia la izquierda */
.fila-calculo > .columna-calculo:last-of-type {
  transform: translateX(-3.7rem);  /* prueba -0.3rem, -0.6rem, -1rem, etc. */
}





/* ===== SECTION 5: EXTRA-BIS ===== */
/* ===== SECCION-EXTRA-BIS — DESKTOP BASE LIMPIO ===== */
.seccion-extra-bis {
  width: 100%;
  min-height: auto;              /* sin altura mínima en vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* contenido empieza arriba */
  box-sizing: border-box;

  /* separación con la sección anterior (seccion-extra) */
  margin-top: 0px;              /* puedes bajar a 30px o subir a 50px si quieres */
  margin-bottom: 60px;           /* aire con la tabla / footer */

  /* aire interno */
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0;
  padding-right: 0;
}



/* Título centrado — MISMO estilo que section-extra */
.seccion-extra-bis .titulo-cards {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 1px;
  color: #222;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.2;

  text-shadow:
    0.9px 0.9px 0.2px rgba(34,34,34,0.9),
   -0.9px 0.9px 0.2px rgba(34,34,34,0.9),
    0.9px -0.9px 0.2px rgba(34,34,34,0.9),
   -0.9px -0.9px 0.2px rgba(34,34,34,0.9);
}

/* Color destacado (segunda palabra) */
.seccion-extra-bis h3 .medio {
  color: #ff0138;
  font-weight: 500;

  text-shadow:
    0.8px 0.8px 0 rgba(255,1,56,0.95),
   -0.8px 0.8px 0 rgba(255,1,56,0.95),
    0.8px -0.8px 0 rgba(255,1,56,0.95),
   -0.8px -0.8px 0 rgba(255,1,56,0.95),
    0.8px 0.8px 0 rgba(255,1,56,0.85),
   -0.8px -0.8px 0 rgba(255,1,56,0.85);
}

/* Contenedor de las dos cajas */
.seccion-extra-bis .contenedor-doble {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1250px; /* igual que las otras sections */
  gap: 30px;
  padding: 0;
  box-sizing: border-box;
}

/* Cajas blancas */
.seccion-extra-bis .caja {
  background: #fff;
  border-radius: 16px;
  flex: 1;
  padding: 25px 25px 25px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Fila: imagen a la izquierda, texto (h4 + p) a la derecha */
.seccion-extra-bis .fila-superior {
  display: flex;
  align-items: flex-start;   /* alineamos arriba */
  gap: 20px;                 /* espacio entre imagen y bloque de texto */
}

/* Imagen cuadrada a la izquierda */
.seccion-extra-bis .img-cuadrada {
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex-shrink: 0;            /* no se deforma */
}

/* Bloque de texto (h4 + p) a la derecha */
.seccion-extra-bis .texto-caja {
  display: flex;
  flex-direction: column;
}

/* Título dentro de los divs */
.seccion-extra-bis .titulo-div {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.2rem;
  color: #222;
  margin: 0 0 12px 0;         /* un poco de espacio con el <p> */

   /* 🔹 Engrosamiento visual profesional (mismo estilo que tus otros títulos) */
  text-shadow:
    0.3px 0.3px 0 rgba(34, 34, 34, 0.9),
   -0.3px 0.3px 0 rgba(34, 34, 34, 0.9),
    0.3px -0.3px 0 rgba(34, 34, 34, 0.9),
   -0.3px -0.3px 0 rgba(34, 34, 34, 0.9);
}

.rosa-palabra {
  color: #ff0138;
  font-weight: 500;   /* igual que tus títulos */
  
  /* Grosor elegante como el resto de tus textos */
  text-shadow:
    0.08px 0.08px 0 rgba(255,1,56,0.95),
   -0.08px 0.08px 0 rgba(255,1,56,0.95),
    0.08px -0.08px 0 rgba(255,1,56,0.95),
   -0.08px -0.08px 0 rgba(255,1,56,0.95);
}


/* Párrafo justo debajo del h4, alineado con él */
.seccion-extra-bis .texto-caja p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #222;

  /* 🔹 Engrosado suave (estilo párrafo, coherente con el resto de tu web) */
  text-shadow:
    0.12px 0.12px 0 rgba(34,34,34,0.85),
   -0.12px 0.12px 0 rgba(34,34,34,0.85),
    0.12px -0.12px 0 rgba(34,34,34,0.85),
   -0.12px -0.12px 0 rgba(34,34,34,0.85);
}

/* Contenedor del botón + icono + texto */
.seccion-extra-bis .acciones-caja {
  display: flex;
  align-items: center;
  gap: 16px;                       /* separación entre botón e icono */
  margin-top: 18px;                /* espacio respecto al párrafo */
  align-self: flex-start;        /* ← se asegura 100% de estar alineado con el texto */
}

/* Botón rosa */
.seccion-extra-bis .btn-rosa {
  background: #ff0138;
  color: #fff;
  border: none;
  border-radius: 10px;             /* bordes redondeados */
  padding: 10px 15px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

/* Hover del botón */
.seccion-extra-bis .btn-rosa:hover {
  background: #e00132;
}

/* Contenedor del icono + texto */
.seccion-extra-bis .mensaje-icono {
  display: inline-flex;
  align-items: center;
  gap: 6px;                        /* separación entre icono y texto */
}

/* Icono */
.seccion-extra-bis .icono-mensaje {
  font-size: 1.9rem;               /* AJUSTA tamaño del icono */
  color: #ff0138;
}

/* Texto “todos bienvenidos” */
.seccion-extra-bis .texto-mensaje {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: #222;

   /* 🔹 Engrosado visual (mismo estilo que el resto) */
  text-shadow:
    0.1px 0.1px 0 rgba(34,34,34,0.9),
   -0.1px 0.1px 0 rgba(34,34,34,0.9),
    0.1px -0.1px 0 rgba(34,34,34,0.9),
   -0.1px -0.1px 0 rgba(34,34,34,0.9);

    transform: translateX(-6px);   /* 🔹 ACÉRCALO como quieras */
}

 /* WIDGET */
/* ===== SECTION: TABLA DINÁMICA ===== */
/* ===== SECCION-TABLA-DINAMICA — DESKTOP BASE LIMPIO ===== */
.seccion-tabla-dinamica {
  width: 100%;
  min-height: auto;              /* sin altura mínima en vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* contenido desde arriba, no centrado */
  box-sizing: border-box;

  /* separación con la sección anterior (extra-bis) */
  margin-top: 40px;              /* ajustable: 30–50px según el aire que quieras */
  margin-bottom: 0px;           /* aire con el footer */

  /* aire interno */
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 0;
  padding-right: 0;
}




/* ===== TABLA DINÁMICA ===== */

.tabla-dinamica {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columnas verticales */
  grid-template-rows: repeat(8, 1fr);    /* 8 filas horizontales */
  width: 100%;
  max-width: 1250px;
  min-height: 560px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;

  /* ❗ clave para eliminar las líneas internas */
  gap: 0;
}

/* ===== CELDAS ===== */

.celda-dinamica {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 0.99rem;
  display: flex;
  align-items: center;
  justify-content: center;


  /* ❗ eliminar 100% las líneas internas */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Encabezados (fila 1) */
.celda-dinamica.encabezado {
  background: #ffffff;  /* siempre blanca */
  font-weight: 500;
  min-height: 48.625px;   /* PRUEBA QUE SE VEA IGUAL PERO CON REM, NO PX */
}

.celda-dato {
  display: flex;
  align-items: center;
  min-height: 48.625px;   /* PRUEBA QUE SE VEA IGUAL PERO CON REM, NO PX!!!!!!!!!!!  */
}



/* ===== FILAS ALTERNAS DE COLOR (sin líneas) ===== */

/* Filas 2, 4, 6, 8 → Color #ff0138 translúcido */
.celda-dinamica[data-row="1"],
.celda-dinamica[data-row="3"],
.celda-dinamica[data-row="5"],
.celda-dinamica[data-row="7"] {
  background: #fff7f9;
}

/* Filas 3, 5, 7 → blancas */
.celda-dinamica[data-row="2"],
.celda-dinamica[data-row="4"],
.celda-dinamica[data-row="6"] {
  background: #ffffff;
}



/* Versión DIV del botón de la columna 6 (sin hover) */
.btn-col6-div {
  background: #ddecd4;        /* color del "botón" */
  color: #2cb615;             /* color del texto */
  padding: 4px 15px;          /* mismas dimensiones que el botón */
  border-radius: 6px;         /* bordes redondeados */
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-block;      /* para imitar un botón */
  cursor: default;            /* no es clicable */
  user-select: none;

  /* Text-shadow para engrosar el texto */
  text-shadow:
    0.01px 0.01px 0 rgba(44, 182, 21, 0.85),
   -0.01px 0.01px 0 rgba(44, 182, 21, 0.85),
    0.01px -0.01px 0 rgba(44, 182, 21, 0.85),
   -0.01px -0.01px 0 rgba(44, 182, 21, 0.85);

  /* Evitar efectos de foco o borde */
  box-shadow: none;
  border: none;
}




/* Imagen PNG delante del texto en la columna 1 */
/* Contenedor imagen + texto en la columna 1 */
.col1-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;  /* espacio entre imagen y texto */
}

/* Imagen base de columna 1 */
.icono-genero {
  object-fit: contain;
  display: inline-block;
}

/* Tamaño SOLO para el icono de HOMBRE */
.img-hombre {
  width: 30px;   /* AJUSTA COMO QUIERAS */
  height: 30px;
}

/* Tamaño SOLO para el icono de MUJER */
.img-mujer {
  width: 30px;   /* AJUSTA COMO QUIERAS */
  height: 30px;
}

/* Texto "hombre"/"mujer" */
.texto-col1 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: #222;
}



/* Alinear el contenido de TODAS las columnas a la izquierda */
.seccion-tabla-dinamica .celda-dinamica {
  justify-content: flex-start !important;
  text-align: left !important;
}


/* Aumentar el margen interno (izquierdo) SOLO de la primera columna */
.tabla-dinamica .celda-dinamica:nth-child(1),
.tabla-dinamica .celda-dinamica[data-col="0"] {
  padding-left: 32px;   /* AJUSTA ESTE VALOR: 10px, 15px, 25px… */
}




/* ===== CONTROL DE ANCHO DE CADA COLUMNA ===== */
/* Cada valor controla una columna vertical (6 columnas) */

.seccion-tabla-dinamica .tabla-dinamica {
  display: grid;
  grid-template-columns:
    minmax(200px, 2fr)   /* Col 1: misma base que tus 200px */
    minmax(240px, 2.4fr) /* Col 2 */
    minmax(230px, 2.3fr) /* Col 3 */
    minmax(200px, 1.6fr) /* Col 4 */
    minmax(190px, 1.9fr) /* Col 5 */
    minmax(170px, 1.7fr);/* Col 6 */
}

/* =======================================
   TEXT SHADOW PARA TODA LA TABLA
======================================= */



/* =======================================
   TEXT SHADOW MÁS FUERTE PARA EL ENCABEZADO
======================================= */
.seccion-tabla-dinamica .celda-dinamica.encabezado {
  font-weight: 500; /* opcional: hace que se vea más sólida */
  text-shadow:
    0.03px 0.03px 0 rgba(34,34,34,0.95),
   -0.03px 0.03px 0 rgba(34,34,34,0.95),
    0.03px -0.03px 0 rgba(34,34,34,0.95),
   -0.03px -0.03px 0 rgba(34,34,34,0.95);
}




/* ===== FOOTER PRINCIPAL (mismas dimensiones que el nav) ===== */
/* ===== FOOTER — DESKTOP BASE LIMPIO ===== */

.footer-main {
  width: 100%;
  margin-top: 40px;         /* separación natural con la tabla */
  margin-bottom: 30px;      /* aire antes del final de página */
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Barra igualada visualmente con el nav */
.footer-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  width: 100%;
  height: clamp(58px, 3vw, 58px);

  /* PADDING consistente con el nav desktop */
  padding-top: 1px;
  padding-left: 18px;
  padding-right: 5px;
  padding-bottom: 1px;
  background-color: #ff0138;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);

  box-sizing: border-box;
  font-family: var(--font-sans);
}




/* DERECHA: botón blanco (como en el nav pero invertido) */
.footer-right {
  display: flex;
  align-items: center;
}

.footer-boton {
  appearance: none;
  border: 0;
  padding: 12px 25px;          /* igual que .nav-right button */
  border-radius: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  background: #fff;            /* blanco */
  color: #ff0138;              /* texto rosa */
  cursor: pointer;
  user-select: none;
  transition: filter 0.2s ease, transform 0.02s ease;
  transform: translateX(-6px); /* mismo pequeño ajuste que en el nav */

  text-shadow:
    0.1px 0.1px 0.2px rgba(255, 1, 56, 0.9),
   -0.1px 0.1px 0.2px rgba(255, 1, 56, 0.9),
    0.1px -0.1px 0.2px rgba(255, 1, 56, 0.9),
   -0.1px -0.1px 0.2px rgba(255, 1, 56, 0.9);
}

/* CENTRO: vacío (solo empuja a los lados) */
.footer-center {
  /* no hace falta nada, ocupa el 1fr central */
}

/* IZQUIERDA: imagen + h1 (igual que .nav-left pero en rosa) */
.footer-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.footer-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transform: scale(1.3) translateX(-8px); /* igual que .nav-left img */
  transform-origin: left center;
}

.footer-title {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;        /* igual que .nav-left h1 */
  line-height: 1;
  transform: translateX(-2px);
  will-change: transform;
  color: #fff;
  text-shadow:
    0.4px 0.4px 0.2px rgba(255, 255, 255, 0.9),
   -0.4px 0.4px 0.2px rgba(255, 255, 255, 0.9),
    0.4px -0.4px 0.2px rgba(255, 255, 255, 0.9),
   -0.4px -0.4px 0.2px rgba(255, 255, 255, 0.9);
}


/* 🔹 Asegurar que el header/nav está SIEMPRE por encima de las secciones */
header {
  position: relative;
  z-index: 9999;
}

nav {
  position: relative;
  z-index: 9999;
}

 /* =====================================================
   DESKTOP ESTRECHO (entre 1025px y 1249px de ancho)
   - Misma estructura que el desktop "ancho"
   - Todo un poco más compacto (como a una escala menor)
   - Fondo diferente para que lo identifiques fácilmente
===================================================== */
@media screen and (min-width: 1025px) and (max-width: 1249px) {


  /* 🔹 Reducimos un poco el tamaño base de toda la tipografía */
  html {
    font-size: 15px;  /* si el base era 16px, ahora todo baja un pelín */
  }

  /* ========= WRAPPER ========= */
  .wrapper {
    max-width: 1150px;  /* un poco menos que 1250 para compactar todo el bloque */
    padding: 0 16px;
  }

  /* ========= NAV ========= */

  /* NAV: acercamos todo al borde izquierdo un poco más */
   /* ========= NAV ========= */

  /* NAV en desktop estrecho: igual que desktop ancho, pero compacto */
  nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 5px;   /* 👈 EXACTO como lo tenías, no se toca */
  padding-right: 12px; /* 👈 SOLO aumenta el espacio a la derecha */
}


/* ❗ Hacer que nav-menu "desaparezca" y deje a nav-center y nav-right
   comportarse como hijos directos del grid del nav */
.nav-menu {
  display: contents;
}


  /* Contenedor izquierda: imagen + h1 */
  .nav-left {
    gap: 4px;               /* h1 más cerca de la imagen */
  }

  /* IMAGEN: mismo tamaño que desktop ancho */
  .nav-left img {
    width: 53px;
    height: 53px;
    object-fit: cover;
    border-radius: 10px;
    display: block;

    /* MISMA transformación que la versión desktop ancha */
    transform: scale(1.3) translateX(-8px);
    transform-origin: left center;
  }

  /* TÍTULO: misma posición */
  .nav-left h1 {
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    transform: translateX(-2px);
  }




  .nav-center li {
    font-size: 1rem;
  }

    /* CENTRO: los li quedan centrados en la columna central */
  .nav-center {
    justify-self: center;
  }

  .nav-center ul {
    display: flex;
    gap: 26px;     /* el mismo gap que ya usabas aquí */
    margin: 0;
    padding: 0;
  }

  /* DERECHA: el botón ocupa la tercera columna, pegado a la derecha */
  .nav-right {
    justify-self: end;         /* columna derecha del grid */
    display: flex;
    align-items: center;
  }

  .nav-right button {
    padding: 12px 25px;
    border-radius: 12px;
    font-size: 0.95rem;
    transform: none;
    margin-left: 0;            /* aquí ya NO empujamos hacia dentro */
  }



  /* ========= HERO: .seccion-dos-columnas ========= */
  /* SECCION-DOS-COLUMNAS — DESKTOP ESTRECHO (versión estable y fluida) */
/* SECCION-DOS-COLUMNAS — DESKTOP ESTRECHO (versión estable) */
.seccion-dos-columnas {
  display: grid;
  grid-template-columns: 60% 40%;
  width: 100%;
  height: auto;            
  min-height: 480px;       

  margin-top: 16px;        
  margin-bottom: 40px;     

  padding-left: 5px;
  padding-right: 20px;
  padding-top: 0;
  padding-bottom: 40px;

  gap: 18px;
  box-sizing: border-box;
}



  .seccion-dos-columnas .col-izquierda h2 {
    font-size: 2.6rem;               /* un poco más pequeño que en desktop grande */
  }

  .seccion-dos-columnas .col-izquierda p {
    font-size: 1rem;
  }

  /* Respetamos tu posición de la imagen, pero la hacemos algo más contenida */
  .seccion-dos-columnas .col-derecha img {
    width: 100%;
    max-width: 420px;   /* un pelín más pequeña en este rango */
    height: auto;
    object-fit: contain;
    position: relative;
    top: 65px;          /* ligeramente menos que 75px para compactar */
    transform: translateX(0);
  }

  /* ========= CARDS ========= */
  /* ========= SECCION-CARDS — DESKTOP ESTRECHO ========= */
/* ========= SECCION-CARDS — DESKTOP ESTRECHO (versión final y estable) ========= */
.seccion-cards {
  width: 100%;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;

  /* separación con el hero */
  margin-top: 24px;        /* un poco más compacto que 24px */
  margin-bottom: 40px;     /* separación correcta antes de seccion-reglas */

  /* aire interno más equilibrado */
  padding-top: 30px;       /* antes 30px → ahora más proporcionado */
  padding-bottom: 20px;    /* antes 50px → más equilibrado */
  padding-left: 10px;
  padding-right: 10px;
}



  .seccion-cards h3 {
    font-size: 1.7rem;
  }

  .contenedor-cards {
    gap: 24px;
  }

  .card {
    width: calc((100% - 3 * 24px) / 4);  /* 4 en fila, un pelín más estrechas */
    height: 250px;                       /* mantenemos tu altura */
  }

  /* ========= SECCIONES CON DOS CAJAS ========= */
  .seccion-reglas,
  .seccion-extra,
  .seccion-extra-bis {
    padding-left: 10px;
    padding-right: 10px;
  }

  .seccion-reglas .contenedor-doble,
  .seccion-extra .contenedor-doble,
  .seccion-extra-bis .contenedor-doble {
    gap: 24px;
  }

  .seccion-reglas .caja,
  .seccion-extra .caja,
  .seccion-extra-bis .caja {
    padding: 24px 26px 28px;
  }

.seccion-reglas .caja-izquierda .titulo-caja {
    margin-top: -11px;   /* prueba con -8px; si hace falta, ajustamos */
  }


 /* Subimos un poco el párrafo de la caja izquierda para recuperar la altura visual */
  .seccion-reglas .caja-izquierda p {
    margin-top: -4px;   /* prueba con -10px, y si hace falta -15px, -20px… */
  }


  /* Hacemos que el contenedor del título y el icono se comporte como un flex */
  .seccion-reglas .titulo-caja {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px; /* espacio entre el h3 y el icono */
    position: relative; /* ya no se necesita absolute en el icono */
  }

  /* Icono: lo devolvemos al flujo normal */
  .seccion-reglas .icono-caja {
    position: static;  /* elimina el posicionamiento absoluto */
    width: 55px;       /* tamaño adaptado */
    height: 55px;
    flex-shrink: 0;    /* evita que el icono se reduzca o se deforme */
  }


  /* SECCION EXTRA - Quitamos los desplazamientos forzados */
.seccion-extra .caja {
    padding-top: 12px;
  }


/* Ajustes finos de labels en DESKTOP ESTRECHO (1025px–1249px) */

  /* NO tocamos .label-col-1: será nuestra referencia visual */

  /* 🔹 Ajusta este valor hasta que .label-col-2 se vea alineado con .label-col-1 */
  .seccion-extra .label-col-2 {
    transform: translateY(-5px);   /* prueba con -1px, -2px, +1px, etc. */
  }

  /* 🔹 Ajusta este para el label de "Resultado" de la columna izquierda */
  .seccion-extra .label-col-resultado-izq {
    transform: translateY(-4px);   /* igual: cambia el valor a ojo */
  }

  /* 🔹 Y este para el label de "Resultado" de la columna derecha */
  .seccion-extra .label-col-resultado-der {
    transform: translateY(-2px);   /* idem, ajústalo tú a ojo */
  }


  /* Reducimos la corrección horizontal para que no se pisen */
  .simbolo.igual {
    transform: translateX(-3rem);   /* antes -3.7rem */
  }

  .fila-calculo > .columna-calculo:last-of-type {
    transform: translateX(-2rem);   /* antes -3.7rem */
  }



  .seccion-extra-bis .titulo-div {
    font-size: 1rem;    /* más pequeño que el 1.2rem base */
    white-space: nowrap;  /* NO permitir que baje a 2 líneas */
  }

  .seccion-extra-bis .texto-caja p {
    font-size: 0.75rem;
  }


 .seccion-extra-bis .acciones-caja {
    margin-top: 19.5px;  /* base: 18px → prueba 14, 12, 16… */
  }


 /* Restaurar el tamaño EXACTO del botón rosa del desktop base */
  .seccion-extra-bis .btn-rosa {
    font-size: 12.8px;      /* mantiene la escala del desktop ancho */
    padding: 11.5px 15px;     /* igual que en la versión base */
  }




  /* ========= TABLA DINÁMICA (solo compactar un poco) ========= */
  .seccion-tabla-dinamica {
    padding-left: 10px;
    padding-right: 10px;
  }

  .seccion-tabla-dinamica .tabla-dinamica {
    max-width: 100%;
    grid-template-columns:
      minmax(0, 2fr)
      minmax(0, 2.4fr)
      minmax(0, 2.3fr)
      minmax(0, 1.6fr)
      minmax(0, 1.9fr)
      minmax(0, 1.7fr);
  }

  .celda-dinamica {
    padding: 8px 10px;
    font-size: 0.95rem;
  }

  .tabla-dinamica .celda-dinamica:nth-child(1),
  .tabla-dinamica .celda-dinamica[data-col="0"] {
    padding-left: 22px;
  }

  .img-hombre,
  .img-mujer {
    width: 26px;
    height: 26px;
  }

  /* ========= FOOTER ========= */
  .footer-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .footer-bar {
    padding-left: 16px;
    padding-right: 10px;
  }

  .footer-title {
    font-size: 0.85rem;
  }

  .footer-boton {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

.seccion-reglas {
    margin-top: 0px;     /* separa un poco de seccion-cards */
    margin-bottom: 0px;  /* separación antes de seccion-extra */
  }

}



@media screen and (max-width: 1075px) {
  .seccion-reglas .caja p br {
    display: none;
  }
  .seccion-extra-bis .texto-caja p {
    font-size: 0.84rem;
  }
}



/* A partir de 1045px hacia abajo, ocultar los <br> de las cards */
@media screen and (max-width: 1075px) {
  .seccion-cards .texto-card br {
    display: none;
  }
  .seccion-extra-bis .texto-caja p {
    font-size: 0.84rem;
  }
}


@media screen and (max-width: 1095px) {
  .seccion-reglas .caja p br {
    display: none !important;
  }
  .seccion-extra-bis .texto-caja p {
    font-size: 0.84rem;
  }
}

/* Desktop estrecho - ajustar labels del bloque de cálculo */
@media screen and (min-width: 1025px) and (max-width: 1080px) {
  /* Labels dentro de seccion-extra (bloque cálculo) */
  .seccion-extra .label-col {
    font-size: 0.95rem;      /* antes 1.1rem, las hacemos un poco más pequeñas */
    white-space: nowrap;     /* evita que se dividan en 2 líneas */
  } 

  /* ⬇️ Ajuste del margen superior interior de la caja */
  .seccion-extra .caja {
    padding-top: 8px;  /* prueba con 14px; si aún ves mucho aire, baja a 12px o 10px */
  }

  .seccion-extra-bis .texto-caja p {
    font-size: 0.74rem;
  }
}


/* ============================
   TEST RANGOS RESPONSIVE
   (solo colores de fondo)
   ============================ */

/* TABLET: 769px – 1024px */
/* TABLET: 769px – 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  /* Wrapper igual que ya tenías */
  .wrapper {
    max-width: 100%;
    padding: 0 16px;
    margin: 0 auto;
  }

  /* NAV tablet: nav bajito y compacto */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding-left: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 9px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 12px;
  }

  /* IZQUIERDA: logo más pequeño */
  .nav-left img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    transform: scale(1);
    transform-origin: left center;
  }

  .nav-left {
    margin-left: -5px;
    gap: 0;
  }

  .nav-left h1 {
    font-size: 0.8rem;
    transform: translateX(0);
  }

  /* 🔥 IMPORTANTE: en tablet NO queremos hamburguesa */
  .nav-toggle,
  .nav-toggle-label {
    display: none !important;
  }

  /* 🔥 Truco clave:
     Hacemos que .nav-menu "desaparezca" en el layout
     y que .nav-center y .nav-right vuelvan a ser hijos directos de <nav> */
  .nav-menu {
    display: contents;    /* se comporta como si no existiera */
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    box-shadow: none;
    background: none;
  }

  /* CENTRO: ahora sí se puede centrar de verdad */
  .nav-center {
    flex: 1;                         /* ocupa el espacio central */
    display: flex;
    justify-content: center;         /* centra el UL dentro del hueco */
    align-items: center;
    margin: 0 14px;                  /* aire lateral */
    transform: none;
  }

  .nav-center ul {
    display: flex;
    justify-content: center;         /* li centrados */
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
  }

  .nav-center li {
    font-size: 0.85rem;
    line-height: 1;
    text-align: center;
  }

  /* DERECHA: botón mantiene su sitio */
  .nav-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .nav-right button {
    transform: none;
    padding: 8px 18px;
    font-size: 0.9rem;
    border-radius: 9px;
  }

  .capsula-decorativa {
    transform: translateY(-12px);
  }




/* ===== SECCION-CARDS — Ajustes tablet ===== */

.contenedor-cards .card {
  height: 215px;         /* un poco más baja para evitar desbordes */
  padding-top: 28px;     /* iconos no pegados al borde superior */
}

/* ICONOS — tamaño general para todos */
.contenedor-cards .card .icon-cartera-SVG,
.contenedor-cards .card .icon-flechas-SVG,
.contenedor-cards .card .icon-verificado-2-SVG,
.contenedor-cards .card .icon-regalo-SVG {
  font-size: 5.4rem !important;   /* tamaño base tablet */
  display: block;
  margin: 0 auto;
  transform: translateY(-4px);    /* reduce aire vertical */
}

/* PRIMER ICONO — un poco más grande */
.contenedor-cards .card:first-child .icon-cartera-SVG {
  font-size: 5.7rem !important;   /* ajustado para niveles visuales */
}

/* TEXTO — más pequeño y más cerca del icono */
.card .texto-card {
  font-size: 0.80rem;    /* más compacto → NO se sale por abajo */
  line-height: 1.3;
  margin-top: -6px;      /* acerca el texto a los iconos */
}

/* ALINEACIÓN VERTICAL — todos los textos comienzan EXACTAMENTE al mismo nivel */
.txt-1,
.txt-2,
.txt-3,
.txt-4 {
  transform: translateY(-8px);
}

/* ===== SECCION-REGLAS — icono a la derecha del h3 ===== */

.seccion-reglas .caja {
  display: block;
}


 /* === SECCION-REGLAS: título + icono en línea (icono a la derecha del h3) === */
    .seccion-reglas .titulo-caja {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;       /* espacio entre h3 e icono */
      position: relative;
    }

    .seccion-reglas .icono-caja {
      position: static;   /* quita el absolute de la versión base */
      width: 50px;        /* un poco más pequeño que en desktop estrecho (55px) */
      height: 50px;
      flex-shrink: 0;     /* que no se achique por falta de espacio */
    }

/* SECCION-REGLAS — Alinear caja-izquierda con caja-derecha en tablet */
.seccion-reglas .caja-izquierda .titulo-caja {
  margin-top: -8px;   /* sube el h3+icono para alinearlo con el h3 derecho */
}

.seccion-reglas .caja-izquierda p {
  margin-top: -4px;   /* sube un poco el párrafo izquierdo */
}

.seccion-reglas .caja-derecha p {
  padding-top: 5px;   /* baja un poco el párrafo derecho para igualarlo */
}

/* SECCION-EXTRA — Ocultar todos los label-col solo en tablet */
.seccion-extra .label-col {
  display: none !important;
}

 /* ===== SECCION-EXTRA — versión compacta y alineada en tablet ===== */

 /* ===== SECCION-EXTRA — Ensanchar formulario en tablet ===== */

/* ===== SECCION-EXTRA — versión compacta y alineada en TABLET ===== */

/* Todo un poco más pequeño, pero sin ser enano */
.seccion-extra .bloque-calculo {
  font-size: 0.9rem;
  max-width: 840px;        /* formulario más largo horizontalmente */
  margin: 0 auto;
  width: 100%;
}

/* Fila principal: TODO alineado en una misma línea */
.seccion-extra .fila-calculo {
  display: flex;
  align-items: center;      /* alinea verticalmente inputs, símbolos y números */
  justify-content: space-between;
  gap: 16px;
}

/* Cada columna en posición limpia, sin transform raros */
.seccion-extra .fila-calculo > .columna-calculo {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

/* Primera columna un poco más ancha para el input */
.seccion-extra .fila-calculo > .columna-calculo:nth-of-type(1) {
  flex: 1.3;
}

/* Input más ancho y proporcionado */
.seccion-extra .input-formulario {
  width: 100%;
  max-width: 260px;
  height: 46px;
  font-size: 0.9rem;
}

/* Multiplicador (×2, ×3…) */
.seccion-extra .multiplicador {
  font-size: 1.35rem;
  margin: 0;
  transform: none;
}

/* Resultado: número + icono alineados */
.seccion-extra .resultado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.45rem;
  transform: none;
}

.seccion-extra .icono-resultado {
  font-size: 2.6rem;
  transform: none;
}

/* Símbolos × y = un poco más pequeños y finos, pero visibles */
.seccion-extra .simbolo {
  font-size: 1.05rem !important;   /* tamaño intermedio */
  font-weight: 600 !important;     /* más fino que bold gordo */
  line-height: 1;
  margin: 0 4px;
  padding: 0;
  transform: none;
}

/* Por si quedara algún transform heredado de desktop, lo anulamos */
.seccion-extra .fila-calculo > .columna-calculo:last-of-type,
.seccion-extra .resultado-derecha,
.seccion-extra .icono-res-izq,
.seccion-extra .icono-res-der {
  transform: none;
}

/* === SECCION-EXTRA — Centrar verticalmente y bajar altura de .caja === */

/* 1) Hacemos las cajas un poco más bajas y activamos el centrado vertical */
.seccion-extra .caja {
  padding-top: 15px;      /* antes era más grande → ahora más compacto */
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 🔥 CENTRAR VERTICALMENTE TODO EL CONTENIDO */
}

/* 2) Asegurar que el bloque de cálculo no se pega arriba ni abajo */
.seccion-extra .bloque-calculo {
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0;       /* un poquito de aire para repartir */
}

/* 3) Alinear la fila en el centro vertical (por si hereda algo) */
.seccion-extra .fila-calculo {
  align-items: center;    /* 🔥 garantía de centrado vertical */
}

/* SECCION-EXTRA-BIS — eliminar el bloque de acciones (botón + mensaje) en tablet */
    .seccion-extra-bis .acciones-caja {
      display: none !important;
    }

    /* SECCION-EXTRA-BIS — hacer la caja más baja y centrar contenido verticalmente */
    .seccion-extra-bis .caja {
      padding-top: 20px;
      padding-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;   /* centra imagen + h4 + p en vertical */
      gap: 16px;
    }

    .seccion-extra-bis .texto-caja p {
      font-size: 0.72rem;
    }

/* ===== SECCION-TABLA-DINAMICA — Tablet (769–1024px) ===== */

/* ===== SECCION-TABLA-DINAMICA — Versión TABLET (769–1024px) ===== */
/* ===== SECCION-TABLA-DINAMICA — Tablet (misma tabla, escala más pequeña) ===== */


 /* La sección no se sale y respira un poco en laterales */
  .seccion-tabla-dinamica {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -40px; /* si quieres un poco menos de altura visual */
  }

  /* Misma tabla pero ESCALADA: más compacta y sin overflow */
  .seccion-tabla-dinamica .tabla-dinamica {
    max-width: 100%;
    width: 100%;
    min-height: 430px;  /* más baja que los 560px de desktop */

    /* mismas proporciones, pero sin mínimos en px (se adapta al ancho) */
    grid-template-columns:
      minmax(0, 2fr)    /* Col 1 */
      minmax(0, 2.4fr)  /* Col 2 */
      minmax(0, 2.3fr)  /* Col 3 */
      minmax(0, 1.6fr)  /* Col 4 */
      minmax(0, 1.9fr)  /* Col 5 */
      minmax(0, 1.7fr); /* Col 6 */
  }

  /* Celdas más pequeñas: tabla a escala */
  .seccion-tabla-dinamica .celda-dinamica {
    padding: 6px 8px;
    font-size: 0.88rem;
  }

  /* Iconos de hombre/mujer más pequeños */
  .seccion-tabla-dinamica .img-hombre,
  .seccion-tabla-dinamica .img-mujer {
    width: 24px;
    height: 24px;
  }

  /* Texto de “hombre/mujer” un pelín más pequeño */
  .seccion-tabla-dinamica .texto-col1 {
    font-size: 0.85rem;
  }

  /* Primera columna con menos padding a la izquierda */
  .seccion-tabla-dinamica .tabla-dinamica .celda-dinamica[data-col="0"] {
    padding-left: 20px;
  }

  /* Botón de la columna 6 a escala */
  .seccion-tabla-dinamica .btn-col6-div {
    padding: 3px 10px;
    font-size: 0.78rem;
    border-radius: 5px;
  }




/* ===== FOOTER — versión tablet (misma lógica que el nav) ===== */

.footer-main {
  margin-top: -25px;
  margin-bottom: 25px;
  padding-left: 0;
  padding-right: 0;
}

/* Footer-bar con la misma lógica que el nav: flex, 46px de alto, paddings similares */
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 46px;          /* misma altura que el nav en tablet */
  padding-left: 10px;     /* como el nav */
  padding-right: 9px;    /* como el nav */
  padding-top: 5px;
  padding-bottom: 5px;

  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;   /* mismo radio que el nav tablet */
  /* 🔹 mantenemos tu background y colores originales del footer
     (rosa, textos blancos, etc.) definidos fuera del @media */
}

/* IZQUIERDA: imagen + título, misma lógica que .nav-left */
.footer-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: -5px;     /* igual que .nav-left en tablet */
}

/* Imagen del footer: un poco más grande pero sin deformar el alto */
.footer-img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transform: none;       /* quitamos el scale para que no aumente la altura del footer */
}

/* Título del footer: proporción similar al h1 del nav */
.footer-title {
  margin: 0;
  font-weight: 500;
  font-size: 0.8rem;     /* igual que .nav-left h1 en tablet */
  line-height: 1;
  transform: translateX(0);
}

/* DERECHA: botón con mismas dimensiones que el botón del nav */
.footer-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer-boton {
  appearance: none;
  border: 0;
  padding: 8px 18px;     /* igual que .nav-right button */
  border-radius: 9px;    /* igual que nav tablet */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transform: none;       /* sin desplazamiento raro como en desktop */

  /* 🔹 OJO: aquí conservas los COLORES del footer
     (background blanco, texto rosa) tal y como los tienes en el CSS base.
     No los tocamos en tablet, solo las dimensiones y layout. */
}

  /* ===== SEPARACIÓN VERTICAL SANA EN TABLET ===== */

  /* Hero cerca del nav, pero sin solaparse con nadie */
  .seccion-dos-columnas {
    margin-top: 16px;
    margin-bottom: 32px;
  }

  /* Cards pegadas al hero pero sin montarse, y con aire antes de reglas */
  .seccion-cards {
    margin-top: 20px;
    margin-bottom: 0px;
  }

  /* Reglas → Extra → Extra-bis con separación homogénea */
  .seccion-reglas {
    margin-top: 0;
    margin-bottom: 0px;
  }

  .seccion-extra {
    margin-top: 0;
    margin-bottom: 0px;
  }

  .seccion-extra-bis {
    margin-top: 0;
    margin-bottom: 32px;
  }

  /* Tabla un poco más separada para que no se vea todo apelmazado al final */
  .seccion-tabla-dinamica {
    margin-top: 0;
    margin-bottom: 40px;
  }

  /* Footer con aire arriba y abajo, sin pegarse a la tabla */
  .footer-main {
    margin-top: 16px;
    margin-bottom: 24px;
  }


}





/* TABLET “estrecha”: 769px – 920px
   Versión compacta pero estable, sin solapamientos */
@media screen and (min-width: 769px) and (max-width: 920px) {

  /* NAV un poco más compacto que tablet normal */
  .nav-left h1 {
    font-size: 0.75rem;
  }

  .nav-center ul {
    gap: 10px;                 /* todavía menos separación */
  }

  .nav-center li {
    font-size: 0.8rem;         /* texto del menú más pequeño */
  }

  .nav-right button {
    padding: 7px 16px;         /* botón más compacto */
    font-size: 0.85rem;
  }

  /* HERO: más protagonismo a la imagen, pero sin mover cosas con top/negativos */
  .seccion-dos-columnas {
    grid-template-columns: 52% 48%;
    margin-top: 8px;           /* un pelín más cerca del nav que en tablet normal */
    margin-bottom: 24px;       /* algo menos de aire antes de las cards */
  }

  /* h2 y span un poco más pequeños */
  .seccion-dos-columnas .col-izquierda h2 {
    font-size: 2.4rem;
    line-height: 1.2;
  }

  .seccion-dos-columnas .col-izquierda h2 .resaltado {
    font-size: 2.4rem;
  }

  /* Párrafo más compacto */
  .seccion-dos-columnas .col-izquierda p {
    font-size: 0.95rem;
    max-width: 48ch;
  }

  /* Columna derecha: imagen centrada horizontalmente, sin top raro */
  .seccion-dos-columnas .col-derecha {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .seccion-dos-columnas .col-derecha img {
    max-width: 350px;
    transform: none;
    display: block;
  }

  /* Quitar el <br> del h2 en tablet estrecha */
  .seccion-dos-columnas .col-izquierda h2 br {
    display: none;
  }

  /* ===== SECCION-EXTRA-BIS — más compacta, sin desbordar por la derecha ===== */

  .seccion-extra-bis .img-cuadrada {
    width: 90px;
    height: 90px;
  }

  .seccion-extra-bis .caja {
    max-width: 100%;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
  }

  .seccion-extra-bis .fila-superior {
    gap: 14px;
    align-items: flex-start;
  }

  .seccion-extra-bis .texto-caja {
    max-width: calc(100% - 90px - 14px); /* ancho total - imagen - gap */
  }

  .seccion-extra-bis .texto-caja p {
    font-size: 0.70rem;
  }

  /* ===== SECCION-TABLA-DINAMICA — igual que tablet, pero un pelín más compacta ===== */

  .seccion-tabla-dinamica .tabla-dinamica {
    min-height: 400px;   /* un poco más baja que en tablet normal */
  }

  .seccion-tabla-dinamica .celda-dinamica {
    padding: 5px 6px;
    font-size: 0.82rem;
  }

  .seccion-tabla-dinamica .img-hombre,
  .seccion-tabla-dinamica .img-mujer {
    width: 22px;
    height: 22px;
  }

  .seccion-tabla-dinamica .texto-col1 {
    font-size: 0.8rem;
  }

  .seccion-tabla-dinamica .btn-col6-div {
    padding: 3px 9px;
    font-size: 0.75rem;
  }

  /* ===== FOOTER — igual que en tablet, pero con márgenes normales (sin negativos) ===== */

  .footer-main {
    margin-top: 12px;
    margin-bottom: 24px;
    padding-left: 0;
    padding-right: 0;
  }

  .footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 46px;
    padding-left: 10px;
    padding-right: 9px;
    padding-top: 5px;
    padding-bottom: 5px;

    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px;
  }

  .footer-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: -5px;
  }

  .footer-img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transform: none;
  }

  .footer-title {
    margin: 0;
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1;
    transform: translateX(0);
  }

  .footer-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .footer-boton {
    appearance: none;
    border: 0;
    padding: 8px 18px;
    border-radius: 9px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transform: none;
  }


    /* ===== SECCION-EXTRA — compactar verticalmente en TABLET ESTRECHA ===== */
  .seccion-extra {
    margin-top: 0px;       /* menos aire con la sección de arriba */
    margin-bottom: 0px;    /* menos aire con la sección de abajo */
    padding-top: 0px;      /* antes 40px → más compacta dentro */
    padding-bottom: 40px;   /* un poco menos cargada que 60px */
  }

  /* Ajustamos también ligeramente las secciones vecinas para que todo se vea compacto */
  .seccion-reglas {
    margin-bottom: 0px;    /* las acerca un poco a seccion-extra */
  }

  .seccion-extra-bis {
    margin-top: 0px;       /* reduce el hueco entre extra y extra-bis */
  }

}





@media screen and (max-width: 910px) {
  .seccion-dos-columnas .col-izquierda p br {
    display: none;
  }
  .seccion-extra-bis .texto-caja p {
    font-size: 0.70rem;
  }
}



/* MÓVIL: ≤ 768px */
@media screen and (max-width: 768px) {

  /* Aseguramos que la página usa todo el ancho real */
   /* === RESET BÁSICO EN MÓVIL === */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}


  .wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  header {
    width: 100%;
    margin: 0;
    padding: 0;   /* muy importante: que no meta padding lateral extra */
  }

/* ============================================
   NAV — VERSIÓN MÓVIL (≤768px)
   ============================================ */
   /* NAV — VERSIÓN MÓVIL (≤768px) */
    nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 100%;
    height: 56px;

    padding-left: 0px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    box-sizing: border-box;

    background-color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);

    margin-top: 18px;
    margin-bottom: 18px;

    /* 🔥 IMPORTANTE: dejar que el menú pueda “salirse” por abajo */
    overflow: visible;
  }


/* IZQUIERDA — imagen + h1, exactamente como te gustaba */
.nav-left {
  display: flex;
  align-items: center;
  gap: 4px;            /* ← el gap que tú querías */
  margin-left: -6px;   /* ← pegado al borde izquierdo sin tocar imagen ni h1 */
}

.nav-left img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
  transform: none;      /* no se deforma */
}

.nav-left h1 {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.1;
  transform: none;
}

/* HAMBURGUESA */
  /* ====== HAMBURGUESA ====== */

  /* Ocultamos el checkbox (solo sirve de estado) */
  .nav-toggle {
    display: none;
  }

  /* Icono hamburguesa (el label) */
  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-right: 4px;
  }

  .nav-toggle-label span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #000;
    position: relative;
    border-radius: 6px;
    transition: background-color 0.2s ease;
  }

  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background-color: #000;
    border-radius: 6px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle-label span::before {
    top: -6px;
  }

  .nav-toggle-label span::after {
    top: 6px;
  }

  /* Animación cuando el menú está ABIERTO (checkbox marcado) */
  .nav-toggle:checked + .nav-toggle-label span {
    background-color: transparent;
  }

  .nav-toggle:checked + .nav-toggle-label span::before {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span::after {
    transform: translateY(-6px) rotate(-45deg);
  }


  /* ====== MENÚ DESPLEGABLE ====== */
/* MENÚ DESPLEGABLE — alineado bajo el logo */
.nav-menu {
  position: absolute;
  top: 56px;          /* justo debajo del nav */

  /* 🔹 En vez de ocupar todo el ancho, lo “pegamos” a la derecha */
  left: auto;
  right: 10px;        /* mismo aire que el padding-right del nav */

  width: auto;        /* el panel se ajusta al contenido */
  max-width: 80%;     /* por si el texto es muy largo, que no sea gigante */

  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  border-radius: 12px;  /* panel flotante con esquinas redondeadas */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);

  align-items: flex-end;  /* los li y el botón siguen a la derecha */
  text-align: right;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: 0.25s ease;
}


/* Mostrar menú cuando el checkbox está activado (déjalo igual si ya lo tienes) */
.nav-toggle:checked ~ .nav-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


  /* Cuando el checkbox está MARCADO → abrimos el menú */
  .nav-toggle:checked ~ .nav-menu {
    max-height: 500px;   /* suficientemente grande para todo el contenido */
  }

 .nav-center ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;

  align-items: flex-end;  /* los items se “pegan” a la derecha */
  width: 100%;
}

.nav-center li {
  list-style: none;
  font-size: 1rem;

  padding-right: 4px;     /* pequeño margen para que no queden pegados al borde */
}


  .nav-right {
  margin-top: 6px;
  width: 100%;
  display: flex;
  justify-content: flex-end;   /* botón alineado a la derecha */
}

.nav-right button {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.9rem;

  margin-right: 4px;          /* margecito para que no pegue al borde derecho */
}

/* ================================
   SECCION-DOS-COLUMNAS — MÓVIL
   ================================ */

.seccion-dos-columnas {
  display: grid;                    /* seguimos con 2 columnas */
  grid-template-columns: 60% 40%;   /* misma idea que en desktop */
  align-items: center;
  column-gap: 14px;                 /* menos separación horizontal */
  row-gap: 0;

  margin-top: 10px;                 /* separación normal después del nav */
  margin-bottom: 0px;              /* deja aire antes de la siguiente sección */

  padding-left: 5px;                /* alineado con el nav */
  padding-right: 10px;
  box-sizing: border-box;
}

/* COLUMNA IZQUIERDA — TEXTO */
.seccion-dos-columnas .col-izquierda {
  position: relative;               /* por si la cápsula usa posición rara en base */
}

/* Cápsula más pequeña y más cerca del h2 */
/* Cápsula más pequeña pero manteniendo SU FORMA ORIGINAL */
.capsula-decorativa {
  transform: scale(0.9);          /* reduce a un 75% su tamaño original */
  transform-origin: top left;      /* se encoge hacia la esquina superior izquierda */
  margin-bottom: 12px;              /* queda más cerca del h2 */
}


/* H2 más pequeño */
.seccion-dos-columnas .col-izquierda h2 {
  font-size: 2.2rem;                /* más pequeño que tablet/desktop */
  line-height: 1.2;
  margin: 0 0 10px 0;
}

/* Resaltado del h2 al mismo tamaño para que no grite tanto */
.seccion-dos-columnas .col-izquierda h2 .resaltado {
  font-size: 2.2rem;
}

/* Párrafo más pequeño y compacto */
.seccion-dos-columnas .col-izquierda p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  max-width: 40ch;                  /* buena lectura en móvil */
   margin-top: -10px;   /* acerca el párrafo al h2 */
}

/* COLUMNA DERECHA — IMAGEN */
.seccion-dos-columnas .col-derecha img {
  width: 100%;
  max-width: 260px;        /* tamaño reducido */
  height: auto;
  object-fit: contain;

  display: block;
  margin-left: auto;
  margin-right: auto;

  /* ahora sí puedes moverla hacia abajo */
  position: relative;
  top: 40px;              /* ajusta este valor a tu gusto */
  transform: none;
}


/* == BOTONERA MÁS PEQUEÑA EN MÓVIL == */

/* Contenedor del botón y el decorativo */
.seccion-dos-columnas .botonera {
  margin-top: 48px;      /* antes 50px → más cerca del texto */
  gap: 10px;             /* antes 16px → más juntos */
}

/* Botón principal a escala más pequeña */
.seccion-dos-columnas .boton-principal {
  font-size: 0.95rem;    /* antes 1.1rem */
  padding: 14px 18px;     /* menos alto y un poco más estrecho */
  border-radius: 10px;   /* ligeramente más compacto visualmente */
}

/* Icono dentro del botón principal un pelín más pequeño */
.seccion-dos-columnas .boton-principal .icon-arrow-right2 {
  font-size: 1rem;       /* antes 1.1rem */
}

/* Botón decorativo más pequeño */
.seccion-dos-columnas .boton-decorativo {
  width: 46px;           /* más pequeño que en desktop */
  height: 46px;
  border-radius: 10px;   /* que quede igual de redondeado que el otro */
}

/* Icono QR también un poco más pequeño */
.seccion-dos-columnas .boton-decorativo .icon-icono-QR-SVG {
  font-size: 2.4rem;     /* antes 3rem → igual pero a escala */
}

/* Subir toda la sección-dos-columnas en móvil */
.seccion-dos-columnas {
  margin-top: -80px !important;   /* antes estaba más abajo → ahora sube 50px */
}

/* ===== SECCION-CARDS — MÓVIL (≤768px) ===== */
/* ===== SECCION-CARDS — MÓVIL (≤768px) ===== */

/* Título principal de la sección */
.seccion-cards .titulo-cards {
  font-size: 1.7rem;      /* más pequeño, pero en la misma posición */
  line-height: 1.2;
}

/* Texto intermedio (el que va debajo del título) */
.seccion-cards .medio {
  font-size: 1.5rem;     /* también un poco más pequeño */
  line-height: 1.4;
}


/* Contenedor de las cards: 2 columnas x 2 filas */
/* Contenedor: 2 columnas de 2 cards, todas con la MISMA altura */
.seccion-cards .contenedor-cards {
  display: flex;
  flex-wrap: wrap;               /* permite 2x2 */
  gap: 18px 16px;                /* vertical / horizontal */
  width: 100%;
  justify-content: center;
}

/* Cada card: 50% del ancho, misma altura para las 4 */
/* Cada card: más pequeña pero todas EXACTAMENTE iguales */
.seccion-cards .card {
  flex: 0 0 calc(50% - 8px);   /* 2 columnas */
  min-height: 215px;           /* 🔹 un poco más alta para que quepa el texto */
  padding: 22px 10px 26px;     /* 🔹 más aire abajo (26px) */
  border-radius: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}


/* Iconos x2 de tamaño y con aire arriba consistente */
.contenedor-cards .card .icon-cartera-SVG,
.contenedor-cards .card .icon-flechas-SVG,
.contenedor-cards .card .icon-verificado-2-SVG,
.contenedor-cards .card .icon-regalo-SVG {
  font-size: 6.9rem !important;
  display: block;
  margin: 2px auto 0px;   /* ⬅️ antes 2px → ahora 0px */
  transform: none;
}

.contenedor-cards .card:first-child .icon-cartera-SVG {
  font-size: 6.9rem !important;
}


/* Texto de las cards: más pequeño y ALINEADO en cada fila */
.seccion-cards .card .texto-card {
  font-size: 0.9rem;
  line-height: 1.35;
  margin-top: -6px;      /* ⬅️ antes -4px → ahora -6px */
  padding: 0 6px;
  min-height: 46px;      /* mantiene alineación vertical perfecta */
}

/* Anulamos ajustes raros de alineación que usamos en tablet */
.txt-1,
.txt-2,
.txt-3,
.txt-4 {
  transform: none !important;
}

/* SECCION-CARDS — acercarla al hero en móvil */
.seccion-cards {
  margin-top: -25px;    /* súbela un poco hacia seccion-dos-columnas */
  margin-bottom: 30px;  /* deja algo de aire antes de la siguiente sección */
}

/* ===== SECCION-REGLAS — versión móvil (cajas una debajo de la otra) ===== */
/* ==== Títulos seccion-reglas en móvil ==== */

/* h3 y .titulo-seccion iguales */
.seccion-reglas .titulo-seccion,
.seccion-reglas h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 500;   /* mismo grosor para que se vean iguales */
}

/* Texto .medio con tamaño ajustado */
.seccion-reglas .medio {
  font-size: 1.8rem;   /* lo dejaste así para que se viera igual de grande */
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}



/* Contenedor doble en columna: primero izquierda, luego derecha */
.seccion-reglas .contenedor-doble {
  display: flex;
  flex-direction: column;   /* apila las cajas */
  gap: 18px;                /* espacio entre caja-izquierda y caja-derecha */
}

/* Cada caja ocupa todo el ancho y se hace más compacta */
.seccion-reglas .caja {
  width: 100%;
  padding: 18px 18px 22px;  /* menos alto que en desktop */
  box-sizing: border-box;
}

/* Por si en otro @media tuvieras algo raro con widths */
.seccion-reglas .caja-izquierda,
.seccion-reglas .caja-derecha {
  width: 100%;
}


/* ==== SECCION-REGLAS — título + icono en línea (MÓVIL) === */

.seccion-reglas .titulo-caja {
  display: flex;
  align-items: center;      /* alinea verticalmente h3 + icono */
  justify-content: flex-start;
  gap: 10px;                /* separación fija entre icono y h3 */
  position: relative;
}

.seccion-reglas .titulo-caja h3 {
  margin: 0;
  line-height: 1.2;
}

/* Icono: tamaño fijo, pegado al h3, sin irse al borde derecho */
.seccion-reglas .icono-caja {
  position: static;
  width: 55px;
  height: 55px;
  flex-shrink: 0;
}

/* ==== SOLO CAJA IZQUIERDA — ajustar aire interno ==== */

/* Subir un poco h3+icono SOLO en caja-izquierda */
.seccion-reglas .caja-izquierda .titulo-caja {
  margin-top: -6px;      /* si lo quieres un pelín más abajo, pon -4px */
}

/* Acercar el párrafo al h3 SOLO en caja-izquierda */
.seccion-reglas .caja-izquierda p {
  margin-top: -2px;       /* prueba 2px o 6px si quieres afinar a ojo */
}


  /* Ocultar completamente la sección-extra en móvil */
  .seccion-extra {
    display: none !important;
  }

  
/* ===== SECCION-EXTRA-BIS — MÓVIL (≤768px) ===== */

/* Que ocupe el hueco de la antigua seccion-extra */
.seccion-extra-bis {
  margin-top: 0;           /* si quieres separarla más, sube a 16px o 24px */
  margin-bottom: 85px;
}

/* === SECCION-EXTRA-BIS — Título y .medio en móvil === */
.seccion-extra-bis .titulo-cards,
.seccion-extra-bis .medio {
  font-size: 1.7rem;
  line-height: 1.3;
  margin: 0 0 40px;   /* mismo margin-bottom que en las otras secciones */
}


  .seccion-extra-bis .texto-caja p {
    font-size: 0.76rem;
  }


/* Cajas apiladas una debajo de otra */
.seccion-extra-bis .contenedor-doble {
  display: flex;
  flex-direction: column;
  gap: 16px;               /* espacio vertical entre caja-izq y caja-der */
}

/* Cada caja: ancho completo dentro del wrapper, con buen aire interior */
.seccion-extra-bis .caja {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 22px 20px 26px; /* arriba - laterales - abajo */
  box-sizing: border-box;
}



  /* ============================================================
   SECCION-TABLA-DINAMICA — MÓVIL (≤768px)
   MISMO DISEÑO QUE TABLET, PERO CON SCROLL HORIZONTAL
   ============================================================ */

.seccion-tabla-dinamica {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -40px;

  /* 🔥 Scroll horizontal REAL */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; /* scroll suave en iPhone */

  /* Necesario para que el scroll exista */
  display: block;
  width: 100%;
}

/* La tabla conserva EXACTAMENTE el diseño que te gusta,
   pero se fuerza a ser más ancha que la pantalla */
.seccion-tabla-dinamica .tabla-dinamica {
  width: 760px;           /* 🔥 más ancha que un móvil → aparece scroll */
  min-width: 760px;
  max-width: none;

  min-height: 430px;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 2.4fr)
    minmax(0, 2.3fr)
    minmax(0, 1.6fr)
    minmax(0, 1.9fr)
    minmax(0, 1.7fr);
}

/* Celdas a escala — exactamente igual que tablet */
.seccion-tabla-dinamica .celda-dinamica {
  padding: 6px 8px;
  font-size: 0.88rem;
  line-height: 1.35;
  box-sizing: border-box;
  white-space: nowrap;     /* impide que el texto salte de línea */
}

/* Iconos de hombre/mujer — igual que tablet */
.seccion-tabla-dinamica .img-hombre,
.seccion-tabla-dinamica .img-mujer {
  width: 24px;
  height: 24px;
}

/* Texto de columna 1 — igual que tablet */
.seccion-tabla-dinamica .texto-col1 {
  font-size: 0.85rem;
}

/* Padding columna 1 */
.seccion-tabla-dinamica .tabla-dinamica .celda-dinamica[data-col="0"] {
  padding-left: 20px;
}

/* Botón — igual que tablet */
.seccion-tabla-dinamica .btn-col6-div {
  padding: 3px 10px;
  font-size: 0.78rem;
  border-radius: 5px;
}

/* ===== FOOTER — más espacio arriba y abajo en móvil ===== */
.footer-main {
  margin-top: 30px !important;     /* antes tenías 18px → ahora más aire */
  margin-bottom: 20px !important;  /* aumenta separación inferior */
}


/* ===== FOOTER — agrandar imagen en móvil ===== */
.footer-img {
  width: 32px !important;     /* antes 35px → ahora más grande */
  height: 32px !important;
  border-radius: 8px;        /* mantiene la estética redondeada */
  object-fit: cover;
}



 
}


/* ===== AJUSTE ESPECIAL PARA ≤ 640px ===== */
@media screen and (max-width: 640px) {

  /* ---- Ajuste de columnas: más separación visual ---- */
  .seccion-dos-columnas {
    grid-template-columns: 52% 48%;     /* izquierda 52% | derecha 48% */
  }

  /* ---- Imagen más pequeña y pegada a la derecha ---- */
  .seccion-dos-columnas .col-derecha img {
    max-width: 220px;      /* antes 270px → ahora más compacta */
    width: 100%;
    height: auto;
    margin-left: auto;     /* empuja la imagen hacia la derecha */
    margin-right: 0;       /* queda alineada al borde derecho */
    display: block;
  }

  /* ---- Título más pequeño ---- */
  .seccion-dos-columnas .col-izquierda h2 {
    font-size: 1.9rem;  
    line-height: 1.15;
  }

  /* ---- Resaltado dentro del h2 ---- */
  .seccion-dos-columnas .col-izquierda h2 .resaltado {
    font-size: 1.9rem;
  }

  /* ---- Párrafo más compacto ---- */
  .seccion-dos-columnas .col-izquierda p {
    font-size: 0.85rem;     
    line-height: 1.35;
    max-width: 48ch;
    /* si quieres aún más cercanía al h2:
       margin-top: -4px;
    */
  }

  /* Texto más pequeño (0.82rem) y alineado perfectamente */
  .seccion-cards .texto-card {
    font-size: 0.82rem;
    line-height: 1.27;     /* ajusta verticalmente para un ancho óptimo */
    margin-top: -3px;      /* 🔥 mantiene alineación perfecta con iconos */
  }

  /* Garantizamos alineación vertical idéntica entre todas las cards */
  .seccion-cards .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .seccion-extra-bis .texto-caja p {
    font-size: 0.74rem;
  }

}





/* SECCION-EXTRA-BIS — Ajuste SOLO de 543px a 768px */
@media screen and (min-width: 543px) and (max-width: 768px) {

  /* Imagen más grande para “comer” aire a la derecha */
  .seccion-extra-bis .img-cuadrada {
    width: 130px;   /* súbelo o bájalo a ojo: 120–140px */
    height: 130px;
  }

  /* Más espacio entre imagen y texto */
  .seccion-extra-bis .fila-superior {
    gap: 24px;      /* antes tenías algo tipo 14–16px → ahora más amplio */
  }

   
   /* Párrafos ligeramente más grandes */
  .seccion-extra-bis .texto-caja p {
    font-size: 0.78rem;
    line-height: 1.45; /* más legible y estable */
  }

   /* Más aire entre el texto y el bloque de acciones */
  .seccion-extra-bis .acciones-caja {
    margin-top: 36px;   /* prueba 20–28px para afinar visualmente */
  }

  }

/* === Ajuste especial para evitar que el título se parta en dos líneas (625px → 543px) === */
@media screen and (min-width: 543px) and (max-width: 625px) {

  /* Título más pequeño para que no salte de línea */
  .seccion-extra-bis .titulo-div {
    font-size: 1.07rem;       /* ajusta a 0.90 si aún salta */
    line-height: 1.25;
    white-space: nowrap;      /* evita que se divida en 2 líneas */
  }

  /* Párrafo ligeramente más pequeño */
  .seccion-extra-bis .texto-caja p {
    font-size: 0.74rem;
    line-height: 1.4;         /* mantiene legibilidad */
  }


  /* Dar un poco más de espacio horizontal a la zona del texto */
  .seccion-extra-bis .fila-superior {
    gap: 18px;    /* antes 14px → más aire para que quepa el título sin saltar */
  }
}



/* ===== AJUSTE ESPECIAL PARA ≤ 542px ===== */
@media screen and (max-width: 542px) {

  .capsula-decorativa {
    transform: scale(0.75);    /* escala general más pequeña */
    margin-bottom: 6px;        /* opcional: acerca la cápsula al h2 */
  }

  /* Título más pequeño para que no compita con la imagen */
  .seccion-dos-columnas .col-izquierda h2 {
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: 0.7px;   /* aumenta ligeramente separación de letras */
  }

  /* Resaltado dentro del h2 también a escala */
  .seccion-dos-columnas .col-izquierda h2 .resaltado {
    font-size: 1.65rem;
    letter-spacing: 0.5px;   /* aumenta ligeramente separación de letras */
  }

  /* Párrafo proporcionalmente reducido */
  .seccion-dos-columnas .col-izquierda p {
    font-size: 0.78rem;
    line-height: 1.32;
    max-width: 48ch;   /* mantiene buena legibilidad */
  }

 /* SUBIR TODA LA SECCIÓN 30px FORZADO */
  .seccion-dos-columnas {
    margin-top: -110px !important;
  }

/* 🔹 Título de la caja */
  .seccion-extra-bis .titulo-div {
    font-size: 0.88rem;   /* ← AJUSTA ESTE VALOR SOLO PARA EL TÍTULO */
    line-height: 1.25;
  }

  /* 🔹 Párrafo debajo del título */
  .seccion-extra-bis .texto-caja p {
    font-size: 0.70rem;
    line-height: 1.38;
  }

  /* 🔹 Botón rosa */
  .seccion-extra-bis .btn-rosa {
    font-size: 0.82rem;   /* ← AJUSTA SOLO EL TEXTO DEL BOTÓN */
    padding: 9px 14px;    /* puedes ajustar si hiciera falta */
  }

  /* 🔹 Texto pequeño que va debajo del botón */
  .seccion-extra-bis .texto-mensaje {
    font-size: 0.78rem;   /* ← AJUSTA SOLO ESTE TEXTO */
    line-height: 1.35;
  }

/* 🔹 Separar acciones-caja del párrafo */
  .seccion-extra-bis .acciones-caja {
    margin-top: 26px;   /* ← AJUSTA: prueba 20px, 24px, 28px */
  }

}





/* MÓVIL PEQUEÑO: ≤ 480px (pisará al de móvil) */
@media screen and (max-width: 480px) {
    

    /* Reducir distancia entre imagen y h1 SIN mover la imagen */
.nav-left h1 {
  transform: translateX(-8px);   /* acerca el texto a la imagen */
}

/* 1) Ocultar la cápsula decorativa en móvil estrecho */
.capsula-decorativa {
  display: none !important;
}


  /* SECCION-DOS-COLUMNAS — móvil estrecho (texto arriba, imagen abajo) */
  .seccion-dos-columnas {
    display: flex;
    flex-direction: column;   /* col-izquierda arriba, col-derecha abajo */
    gap: 90px;                /* separación entre texto e imagen */

    margin-top: 0;            /* dejamos el margen limpio */
    transform: translateY(-40px);  /* 🔥 la subimos visualmente 40px */
  }


/* 3) Columna izquierda ocupa todo el ancho, título alineado a la izquierda */
.seccion-dos-columnas .col-izquierda {
  width: 100%;
}

/* Título alineado desde el lado izquierdo */
.seccion-dos-columnas .col-izquierda h2 {
  text-align: left;
   line-height: 1.8;   /* prueba 1.32–1.38 según lo que veas */
   font-size: 2rem;   /* prueba 1.9rem, 2rem o 2.1rem según lo que veas */
}


/* Agrandar h2 en móvil estrecho */
.seccion-dos-columnas .col-izquierda h2 {
  font-size: 2.5rem;        /* ajusta según prefieras */
  line-height: 1.35;
}

/* Aplicar exactamente el mismo tamaño al texto resaltado */
.seccion-dos-columnas .col-izquierda h2 .resaltado {
  font-size: 2.6rem;        /* igual que el h2 */
  line-height: 1.35;      /* mantiene misma separación visual */
}


/* 4) Párrafo alineado desde el lado derecho */
/* Párrafo alineado al lado derecho ocupando todo el ancho de la columna */
.seccion-dos-columnas .col-izquierda p {
  width: 100%;
  max-width: 100%;      /* quitamos límites de ancho tipo 48ch en este media */
  text-align: right;    /* pegado al lado derecho (respetando padding del wrapper) */
  margin-top: 20px;      /* separación con el h2 */
  margin-right: 0;
  margin-left: 0;
   font-size: 1rem; 

}

/* 5) Columna derecha (imagen) debajo, ocupando todo el ancho */
.seccion-dos-columnas .col-derecha {
  width: 100%;
}

/* Imagen adaptada a móvil, centrada pero debajo del texto */
.seccion-dos-columnas .col-derecha img {
  display: block;
  width: 100%;
  max-width: 260px;    /* si quieres más grande/pequeña, ajusta este valor */
  height: auto;
  margin: 0 auto;      /* centrada dentro del ancho disponible */
}



/* Bajar la sección para que no quede debajo del nav */
.seccion-dos-columnas {
  margin-top: 0px !important;   /* ajusta 35–55px según lo que veas */
}


  /* Títulos más pequeños pero en la MISMA posición */
  .seccion-cards .titulo-cards {
    font-size: 1.9rem;   /* antes 1.5rem */
    line-height: 1.6;
    margin-bottom: 40px;
  }

  .seccion-cards .medio {
    font-size: 1.9rem;   /* igual que el título */
    line-height: 1.6;
    margin-bottom: 18px;
  }

  /* Cards apiladas: una debajo de la otra */
  .seccion-cards .contenedor-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;         /* separación consistente entre cards */
    width: 100%;
  }

  /* Cada card ocupa TODO el ancho disponible */
  .seccion-cards .card {
    flex: 0 0 100%;
    width: 100%;
    min-height: 220px;   /* tu altura actual funciona bien */
    padding: 22px 12px 26px;
    box-sizing: border-box;
  }

  /* Iconos se mantienen idénticos (sin cambios visuales) */
  .contenedor-cards .card .icon-cartera-SVG,
  .contenedor-cards .card .icon-flechas-SVG,
  .contenedor-cards .card .icon-verificado-2-SVG,
  .contenedor-cards .card .icon-regalo-SVG {
    margin: 2px auto 0px; /* mismo alineamiento perfecto */
  }

  /* Alineación del texto garantizada */
  .seccion-cards .card .texto-card {
    font-size: inherit;  /* conserva el tamaño actual */
    line-height: 1.35;
    margin-top: -6px;    /* mantiene alineación vertical */
    min-height: 48px;    /* asegura que todas se alineen entre sí */
  }



/* Más separación desde la sección anterior */
  .seccion-extra-bis {
    margin-top: 32px;   /* ajusta a 36–50px según lo que veas mejor */
  }

.seccion-extra-bis .titulo-cards {
    font-size: 1.45rem;   /* antes 1.4rem */
    line-height: 1.25;
    margin-bottom: 32px;  /* conserva el aire visual */
  }

.seccion-extra-bis .titulo-cards,
  .seccion-extra-bis .medio {
    font-size: 1.45rem;   /* antes 1.4rem */
    line-height: 1.25;
    margin-bottom: 32px;  /* conserva la coherencia visual */
  }

  /* 1) La caja ahora se organiza verticalmente: título + texto + imagen */
  .seccion-extra-bis .caja {
    display: flex;
    flex-direction: column;
    align-items: center;      /* 🔥 CENTRA todo horizontalmente */
    justify-content: flex-start;
    
    padding: 22px 18px 28px;  /* más balanceado tras mover la imagen */
    width: 100%;
    box-sizing: border-box;
  }

  /* 2) Texto centrado (sin modificar tamaños que ya ajustamos) */
  .seccion-extra-bis .texto-caja {
    text-align: center;
    margin-bottom: 14px;      /* espacio antes de la imagen */
  }

  .seccion-extra-bis .texto-caja p {
    font-size: 0.68rem;
  }

  /* 3) La img-cuadrada pasa a estar debajo del texto y centrada */


  /* Fila superior en columna:
     Primero texto-caja, debajo la imagen */
  .seccion-extra-bis .fila-superior {
    display: flex;
    flex-direction: column;     /* 🔥 Texto arriba, imagen debajo */
    align-items: flex-start;    /* texto alineado a la izquierda */
    gap: 10px;                  /* separación entre texto y la imagen */
  }

  /* Imagen debajo del texto y centrada horizontalmente dentro de la caja */
  .seccion-extra-bis .img-cuadrada {
    width: 155px;               /* el tamaño que tú quieras mantener */
    height: 155px;
    object-fit: cover;
    display: block;
    margin: 0 auto;             /* 🔥 centrada horizontalmente */
  }



/* Orden dentro de cada .caja de seccion-extra-bis */
  .seccion-extra-bis .caja .titulo-div {
    order: 0;
  }

  .seccion-extra-bis .caja .texto-caja {
    order: 1;   /* 🔹 TEXTO antes que la imagen */
  }

  .seccion-extra-bis .caja .img-cuadrada {
    order: 2;   /* 🔹 IMAGEN debajo del texto */
  }

  .seccion-extra-bis .caja .acciones-caja {
    order: 3;   /* si existe, va al final */
  }



  /* Las cajas se apilan y ocupan TODO el ancho disponible */
  .seccion-extra-bis .contenedor-doble {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* 👈 las cajas se estiran a lo ancho, no a la derecha */
  }

  .seccion-extra-bis .caja {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    align-self: stretch;    /* por si acaso, que no se quede a la derecha */
    text-align: left;       /* el contenido alineado normal */
  }


  /* Ocultar el botón del footer en móvil estrecho */
  .footer-right,
  .footer-right .footer-boton {
    display: none !important;
  }

 

}


/* DESKTOP ANCHO: logo izquierda, menú centrado, botón derecha */
@media screen and (min-width: 1250px) {

  /* NAV como grid de 3 columnas: izquierda, centro, derecha */
  nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    width: 100%;
    height: clamp(58px, 3vw, 58px);
    padding: 1px 5px;
    box-sizing: border-box;

    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);

    font-family: var(--font-sans);
  }

  /* OCULTAMOS la hamburguesa en desktop ancho */
  .nav-toggle,
  .nav-toggle-label {
    display: none !important;
  }

  /* Truco clave:
     .nav-menu se vuelve "transparente" para el layout,
     y sus hijos (.nav-center y .nav-right) pasan a ser grid-items del nav */
  .nav-menu {
    display: contents;
  }

  /* CENTRO: los li se quedan centrados en la columna central del grid */
  .nav-center {
    justify-self: center;
  }

  .nav-center ul {
    display: flex;
    gap: 36px;     /* el espacio que ya te gustaba entre li */
    margin: 0;
    padding: 0;
  }

  /* DERECHA: el botón ocupa la tercera columna, pegado a la derecha */
  .nav-right {
    justify-self: end;
    display: flex;
    align-items: center;
  }

  .nav-right button {
    transform: none;
    margin-right: 5px;   /* pegado al padding-right del nav */
  }

  .seccion-extra-bis .texto-caja p {
    font-size: 0.88rem;
  }
}


/* ===== FONDO GLOBAL DE TODA LA WEB ===== */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: #222;

  /* FONDO */
  background-image: url("../img/fondo.png");
  background-size: cover;          /* ocupa toda la pantalla */
  background-repeat: no-repeat;    /* no se repite */
  background-position: center top; /* empieza desde arriba */
  background-attachment: scroll;   /* se mueve con la página */

  background-color: #f4f6fa;       /* respaldo */
}

/* Overlay que tapa la web hasta pasar Turnstile */
#captcha-screen {
  position: fixed;
  inset: 0;
  background: #fffefe;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
}