/* ======= Reset mínimo y tokens ======= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #0f172a;
  background: #fff;
}

:root{
  --brand: #F08A24;     /* naranja principal (Includére) */
  --brand-700: #C97214; /* hover más oscuro */
  --border: #e5e7eb;
  --muted: #6b7280;
  --radius: 14px;
  --shadow: 0 6px 30px rgba(2, 6, 23, .08);
}

/* ======= Layout centrado ======= */
.page {
  min-height: 100vh;
  min-height: 100dvh;          /* corrige en móviles con barras */
  display: grid;
  place-items: center;          /* centra vertical y horizontal */
  padding: 24px;
}

/* ======= Card principal ======= */
.card {
  width: min(900px, 92vw);
  text-align: center;
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
}

/* Tamaño compacto para tarjetas de avisos (error, etc.) */
.card-compact { width: min(680px, 92vw); }

/* ======= Encabezados ======= */
.logo {
  height: 64px;
  width: auto;
  margin-bottom: 16px;
  object-fit: contain;
}
h1 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin: 6px 0 8px;
  color: #111827;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 4px 0 14px;
  font-weight: 700;
}
.tagline {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 16px);
}

/* Forzar color naranja en “Bienvenid@s” */
#titulo {
  color: var(--brand);                  /* #F08A24 */
  text-decoration-color: var(--brand);  /* subrayado */
}

/* ======= Formulario ======= */
form { display: block; }

/* Grupo de label + input + botón: en columna y centrado */
.field {
  display: flex;
  flex-direction: column;   /* apilado */
  align-items: center;      /* centrado horizontal */
  gap: 10px;
}

/* Etiqueta */
label { font-weight: 600; }

/* Input */
input[type="text"] {
  width: 260px;
  max-width: 90vw;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  outline: none;
}
input[type="text"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(240, 138, 36, .18);
}

/* Botón (naranja Includére) */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--brand);   /* #F08A24 */
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .02s ease, background .15s ease, box-shadow .15s ease;
  width: max-content;         /* ocupa solo lo necesario */
  text-decoration: none;      /* para .btn (enlace) */
  margin-top: 6px;
}
button:hover,
.btn:hover { background: var(--brand-700); }   /* #C97214 */
button:active,
.btn:active { transform: translateY(1px); }
button:focus-visible,
.btn:focus-visible { outline: 4px solid rgba(240,138,36,.25); outline-offset: 2px; }
button:disabled { opacity: .6; cursor: not-allowed; }

/* Texto de ayuda bajo el campo */
.hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ======= Aviso de error (pantalla “Código inválido”) ======= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 6px auto 14px;
  text-align: left;
  border: 1px solid rgba(240,138,36,.35);
  border-left: 6px solid var(--brand);
  border-radius: 12px;
  background: #FFF7ED; /* tono ámbar muy claro */
}
.alert .icon {
  font-size: 20px;
  line-height: 1;
  color: var(--brand);
  margin-top: 2px;
}
.alert-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: #111827;
}
.alert-text {
  margin: 0;
  color: #374151;
}

/* Contenedor de acciones (p.ej. botón Reintentar) */
.actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* ======= Ajustes móviles ======= */
@media (max-width: 520px){
  .card { padding: 22px 16px; }
  .field { gap: 10px; }
  /* Si quieres que el botón sea ancho completo en móvil, descomenta:
  button, .btn { width: 100%; }
  */
}







/* ===========================
   estilo.css  (Inclumetrix)
   =========================== */

:root{
  --gris:#5a5661;       /* título gris */
  --texto:#3b3940;      /* texto general */
  --naranja:#ef7d19;    /* acento principal */
  --borde:#cfcfd6;      /* bordes input */
}

*{ box-sizing:border-box }
html,body{ height:auto; min-height:100% }
body{
  margin:0;
  background:#fff;
  color:var(--texto);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans";
  overflow-x:hidden;
}

/* ===== LAYOUT PRINCIPAL ===== */
.wrap{
  /* Quitamos min-height:100dvh para evitar el hueco grande */
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 64px);
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 14px;        /* espacio compacto entre secciones */
}

/* ===== BRAND ===== */
.brand{
  display:flex; align-items:center; justify-content:center;
}
.brand-logo{
  width: clamp(200px, 22vw, 320px);
  height:auto; display:block;
  margin: 6px 0 2px;
}

/* ===== BLOQUE CENTRAL ===== */
.hero{
  text-align:center;
  max-width: 980px;
  margin: 0 auto;       /* centrado */
  padding: 0 12px;      /* sin espacio vertical extra */
}
.bienvenida{
  font-size: clamp(26px, 3.6vw, 40px);
  color:var(--naranja);
  font-weight: 800;
  margin: 4px 0 8px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
.divisor{
  width: min(52%, 560px);
  height: 3px;
  background:#a79fa8;
  opacity:.7;
  margin: 8px auto 14px;
  border-radius:6px;
}
.producto{
  font-size: clamp(22px, 3.2vw, 34px);
  color:var(--gris);
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:.2px;
}
.producto .reg{ font-size:.6em; vertical-align:super; margin-left:2px }
.frase{
  font-size: clamp(14px, 2vw, 18px);
  color:#2f2e33; opacity:.9; margin:8px 0 0;
}

/* ===== FORMULARIO ===== */
.formulario{
  position:relative;
  max-width: 700px;
  margin: 14px auto 0;      /* pegado al bloque central */
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 10px;
  align-items:end;
}
.lbl{
  grid-column:1/-1;
  font-weight:600; color:#403d45;
}
#codigo{
  appearance:none; width:100%;
  padding:12px 14px;
  border:2px solid var(--borde);
  border-radius:12px;
  font-size:16px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  background:#fff;
}
#codigo:focus{
  border-color:var(--naranja);
  box-shadow:0 0 0 4px rgba(239,125,25,.15);
}
.btn-siguiente{
  justify-self:end;
  min-width:136px;
  padding:10px 18px;
  background:var(--naranja); border:none; color:#fff;
  font-weight:800; font-size:16px; border-radius:999px;
  cursor:pointer;
  transition:filter .15s ease, transform .06s ease, background .2s ease;
}
.btn-siguiente:hover{ filter:brightness(1.05) }
.btn-siguiente:active{ transform:translateY(1px) }
.btn-siguiente:focus-visible{ outline:4px solid rgba(239,125,25,.25) }

.ayuda{
  grid-column:1/-1;
  font-size:13px; color:#5c5962; margin:0; opacity:.9;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px){
  .formulario{ grid-template-columns: 1fr; }
  .btn-siguiente{ justify-self: stretch; }
}



/* — Reset & Core — */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.form-section {
  display: none;
}
.form-section.active {
  display: block;
}

/* — TAMAÑO UNIFORME DEL LOGO — */
.slide-logo,
.slide-logo-top,
.slide-logo-instr,
.slide-logo-info {
  width: 200px;
  margin: 0 auto 1rem;
  display: block;
}

/* — SLIDE 0: Franja 1 izquierda — */
.form-section.slide-0.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 1.png") no-repeat left center;
  background-size: 40% auto;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  justify-items: center;
}
.form-section.slide-0.active .slide-content {
  grid-column: 2;
  text-align: center;
  z-index: 1;
  max-width: 600px;
  padding: 12vh 1rem 2rem;
}
.slide-title {
  font-family: sans-serif;
  font-size: 2.5rem;      /* tamaño original */
  color: #f58423;
  margin: 0.5rem 0;
}
.slide-divider {
  width: 60%;
  margin: 0.5rem auto 1rem;
  border: none;
  border-top: 2px solid #7a6f6a;
}
.slide-subtitle {
  font-family: sans-serif;
  font-size: 2rem;        /* tamaño original */
  color: #5b5560;
  margin-bottom: 0.5rem;
}
.slide-caption {
  font-family: sans-serif;
  font-size: 1rem;        /* tamaño original */
  color: #333;
  margin-bottom: 3rem;
}
.slide-0 .btn-next {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
}

/* — SLIDE 1: Franja 2 izquierda — */
.form-section.slide-1.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 2.png") no-repeat left center;
  background-size: 40% auto;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  justify-items: center;
}
.form-section.slide-1.active .slide-content {
  grid-column: 2;
  text-align: left;
  z-index: 1;
  max-width: 600px;
  padding: 2rem 1rem;
}
.intro-title {
  font-family: sans-serif;
  font-size: 2.5rem;     /* tamaño original */
  color: #f58423;
  margin-bottom: 0.5rem;
}
.intro-subtitle {
  font-family: sans-serif;
  font-size: 2rem;       /* tamaño original */
  margin-bottom: 1rem;
}
.intro-text {
  margin-bottom: 1rem;
  font-family: sans-serif;
  font-size: 1rem;       /* tamaño original */
  color: #333;
}
.intro-emphasis {
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin: 1rem 0 2rem;
}
.slide-1 .prev-btn,
.slide-1 .btn-next {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

/* — SLIDE 2: Franja 3 arriba — */
.form-section.slide-2.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 3.png") no-repeat top center;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15vh;
}
.form-section.slide-2.active .slide-content {
  text-align: center;
  z-index: 1;
  max-width: 700px;
  width: 90%;
}
.instr-title {
  font-family: sans-serif;
  font-size: 2.5rem;     /* tamaño original */
  color: #f58423;
  margin-bottom: 1rem;
}
.instr-list,
.instr-bottom {
  font-family: sans-serif;
  font-size: 1rem;       /* tamaño original */
}
.slide-2 .prev-btn,
.slide-2 .btn-next {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

/* — SLIDE 3: Información General (Franja 1 derecha) — */
.form-section.slide-3.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 1.png") no-repeat right center;
  background-size: 40% auto;
  display: grid;
  grid-template-columns: 1fr 40%;
  align-items: center;
  justify-items: center;
}
.form-section.slide-3.active .slide-content {
  grid-column: 1;
  text-align: center;
  z-index: 1;
  max-width: 700px;
  width: 90%;
  padding: 2rem 1rem;
}
.info-title {
  font-family: sans-serif;
  font-size: 2.5rem;     /* tamaño original */
  color: #f58423;
  margin-bottom: 0.5rem;
}
.info-text {
  font-family: sans-serif;
  font-size: 1rem;       /* tamaño original */
  margin-bottom: 1.5rem;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}
.info-grid label {
  display: block;
  font-family: sans-serif;
}
.info-grid input {
  width: 100%; padding: 0.5rem; border: 1px solid #f58423;
  border-radius: 0.25rem; margin-top: 0.5rem;
}
.info-grid .full-width {
  grid-column: 1/3;
}
.slide-3 .prev-btn,
.slide-3 .btn-next {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
  margin: 0.5rem;
}
/* Estilos para los select de Slide 3 */
.info-grid select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #f58423;
  border-radius: 0.25rem;
  background: #fff;
  font-family: sans-serif;
  font-size: 1rem;
  margin-top: 0.5rem;
  appearance: none; /* quita flecha nativa si quieres */
}
/* — SLIDE 4: Franja 1 invertida (lado izquierdo) — */
.form-section.slide-4.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 1.png") no-repeat left center;
  background-size: 40% auto;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  justify-items: center;
}
.form-section.slide-4.active .slide-content {
  grid-column: 2;
  text-align: left;
  z-index: 1;
  max-width: 600px;
  padding: 2rem 1rem;
}

/* Grid responsive de selects */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.info-grid .full-width {
  grid-column: 1 / 3;
}

/* Estilo de todos los select en Slide 4 */
.info-grid select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #f58423;
  border-radius: 0.25rem;
  font-family: sans-serif;
  font-size: 1rem;
  margin-top: 0.5rem;
  background: #fff;
}
/* — SLIDE 5: Franja 1 izquierda (igual que slide-4) — */
.form-section.slide-5.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 1.png") no-repeat left center;
  background-size: 40% auto;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  justify-items: center;
}
.form-section.slide-5.active .slide-content {
  grid-column: 2;
  text-align: left;
  z-index: 1;
  max-width: 600px;
  padding: 2rem 1rem;
}

/* Checkbox grid */
.options-fieldset {
  border: none;
  margin: 1.5rem 0;
}
.options-legend {
  font-family: sans-serif;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}
.options-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: sans-serif;
  font-size: 1rem;
}
.options-row input {
  width: auto;
  transform: scale(1.2);
}

/* — SLIDE 6: Franja 3 arriba — */
.form-section.slide-6.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 3.png") no-repeat top center;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25vh;
}
.form-section.slide-6.active .slide-content {
  text-align: center;
  z-index: 1;
  max-width: 700px;
  width: 90%;
}
.exp-title {
  font-family: sans-serif;
  font-size: 2.5rem;
  color: #f58423;
  margin-bottom: 1rem;
}
.exp-text {
  font-family: sans-serif;
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}
.form-section.slide-6 .prev-btn,
.form-section.slide-6 .btn-next {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 1.5rem;
  cursor: pointer;
  margin: 0.5rem;
}

/* — SLIDE-7: franja ultra desplazada + filas separadas + selección clara — */
.form-section.slide-7.active {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #fff url("/img/Franja 4.png") no-repeat right center;
  background-size: 25% auto;       /* La franja ocupa el 85% del ancho */
  display: grid;
  grid-template-columns: 1fr 35%;   /* 15% para el contenido, 85% para la franja */
  padding: 5vh 2rem;
}

/* Contenido en la primera columna */
.form-section.slide-7.active .slide-content {
  grid-column: 1;
  text-align: left;
  z-index: 1;
  width: 100%;
}

/* Cada grupo de opciones (cada pregunta) en su propia fila */
.form-section.slide-7.active .likert-group {
  margin-bottom: 2.5rem;           /* más separación vertical */
}

/* La fila de radios dentro de la pregunta */
.form-section.slide-7.active .likert-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 3rem;                       /* más espacio horizontal */
  align-items: center;
}

/* Oculta el radio nativo, mantenemos sólo el emoji */
.form-section.slide-7.active .likert-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}

/* Etiquetas con emoji+texto */
.form-section.slide-7.active .likert-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

/* El span que contiene el emoji (suponiendo que tu HTML envuelve al emoji en <span class="emoji">) */
.form-section.slide-7.active .likert-options label .emoji {
  font-size: 1.2rem;
  transition: transform 0.15s;
}

/* Cuando el radio está chequeado, resalta el emoji y etiqueta */
.form-section.slide-7.active .likert-options input[type="radio"]:checked + .emoji {
  transform: scale(1.6);
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
}

/* Si en tu HTML el <input> viene antes del <span class="emoji"> y luego el texto, la regla anterior funcionará; si no, ajusta el selector a tu estructura. */


/* — SLIDE 8 (sin franja) — */
.slide-8 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 3rem auto;    /* más separación superior */
  padding: 0 1rem;
  text-align: left;
}

/* separar cada bloque de pregunta */
.slide-8 .likert-group {
  margin-bottom: 2.5rem;
}

/* texto de la pregunta */
.slide-8 .likert-group .question-text {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* contenedor de opciones: línea única, flexible */
.slide-8 .likert-options {
  display: flex;
  flex-wrap: nowrap;    /* quepan todas en una sola línea */
  align-items: center;
  gap: 2.5rem;          /* espacio entre cada etiqueta */
}

/* etiqueta individual */
.slide-8 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 1.5rem; /* para dejar espacio al círculo */
}

/* ocultar el input real */
.slide-8 .likert-options input {
  position: absolute;
  left: 0;
  opacity: 0;
  width: 1rem;
  height: 1rem;
}

/* estilo del emoji/color */
.slide-8 .likert-options .emoji {
  font-size: 1.3em;
  opacity: 0.5;
  transition: opacity 0.15s;
}

/* al seleccionar, icono opacidad total */
.slide-8 .likert-options input:checked + .emoji {
  opacity: 1;
}

/* fuerza que el label cliquee el input entero */
.slide-8 .likert-options input + .emoji + span {
  pointer-events: none;
}

/* botones */
.slide-8 .buttons {
  text-align: center;
  margin-top: 1rem;
}
.slide-8 .prev-btn,
.slide-8 .next-btn {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 0 0.5rem;
}
.slide-8 .prev-btn {
  background: #ccc;
  color: #333;
}

.slide-9 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #fff;
  /* Franja 3 invertida (ajusta el nombre/URL si tu PNG se llama distinto) */
  background-image: url("/img/Franja 3 invertida.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}

/* Contenedor de contenido */
.slide-9 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Layout de las opciones likert */
.slide-9 .likert-options {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Cada etiqueta en línea, con espacio */
.slide-9 .likert-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  /* opcional, para no apretujar demasiado */
  min-width: 140px;
}

/* Ocultamos el input real */
.slide-9 .likert-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Emoji: siempre visible, un poco grande */
.slide-9 .likert-options .emoji {
  font-size: 1.4rem;
  transition: transform 0.15s ease;
}

/* Cuando seleccionas, el emoji escala */
.slide-9 .likert-options input[type="radio"]:checked + .emoji {
  transform: scale(1.3);
}

/* Ajuste de texto al lado del emoji */
.slide-9 .likert-options span:last-child {
  font-size: 0.95rem;
  line-height: 1.2;
}

/* Botones de navegación, mismo estilo que el resto */
.slide-9 .buttons {
  text-align: center;
  margin-top: 2rem;
}
.slide-9 .prev-btn,
.slide-9 .next-btn {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  margin: 0 0.5rem;
}
.slide-9 .prev-btn {
  background: #ccc;
  color: #333;
}

/* — SLIDE 9: Desarrollo & Valoración (Franja 1 invertida) — */
.slide-9 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #fff;

  /* Franja 1 invertida a la izquierda */
  background-image: url("/img/Franja 1 invertida.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40% auto;
}

.slide-9 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Espacios entre preguntas */
.slide-9 .likert-group {
  margin-bottom: 2.5rem;
}

/* Texto de la pregunta */
.slide-9 .question-text {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Contenedor de todas las opciones en fila */
.slide-9 .likert-options {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

/* Cada etiqueta (radio + emoji + texto) */
.slide-9 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

/* Ocultar el input real */
.slide-9 .likert-options input[type="radio"] {
  display: none;
}

/* El emoji (circulo coloreado) */
.slide-9 .likert-options .emoji {
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}

/* Texto de la opción */
.slide-9 .likert-options span:last-child {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Cuando está seleccionado, agranda y subraya la emoji/texto */
.slide-9 .likert-options input[type="radio"]:checked + .emoji {
  transform: scale(1.3);
}
.slide-9 .likert-options input[type="radio"]:checked + .emoji + span {
  font-weight: 600;
}

/* Botones Anterior/Siguiente */
.slide-9 .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
.slide-9 .prev-btn {
  background: #ccc;
  color: #333;
}
.slide-9 .next-btn {
  background: #f58423;
  color: #fff;
}

/* Ajuste de tipografía general */
.slide-9 .slide-content,
.slide-9 .slide-content * {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
/* — SLIDE 10: Comparte tu experiencia (Franja 2 izquierda) — */
.slide-10 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #f0f4f5; /* ligero gris para destacar el contenido */
  background-image: url("/img/Franja 2.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40% auto;
}

.slide-10 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Margen entre cada bloque de pregunta */
.slide-10 .likert-group {
  margin-bottom: 2.5rem;
}

/* Pregunta */
.slide-10 .question-text {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Opciones en línea */
.slide-10 .likert-options {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

/* Cada etiqueta */
.slide-10 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Ocultar input real */
.slide-10 .likert-options input[type="radio"] {
  display: none;
}

/* Emoji-círculo */
.slide-10 .likert-options .emoji {
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}

/* Texto de la opción */
.slide-10 .likert-options span:last-child {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Resaltar opción activa */
.slide-10 .likert-options input[type="radio"]:checked + .emoji {
  transform: scale(1.3);
}
.slide-10 .likert-options input[type="radio"]:checked + .emoji + span {
  font-weight: 600;
}

/* Botones */
.slide-10 .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
.slide-10 .prev-btn {
  background: #ccc;
  color: #333;
}
.slide-10 .next-btn {
  background: #f58423;
  color: #fff;
}

/* Tipografía consistente */
.slide-10 .slide-content,
.slide-10 .slide-content * {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* — SLIDE 11: Comparte tu experiencia (Franja 2 izquierda) — */
.slide-11 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #fff;
  background-image: url("/img/Franja 2.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40% auto;
}

/* Contenido centrado y con padding */
.slide-11 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Separación entre preguntas */
.slide-11 .likert-group {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Zebra shading en filas pares */
.slide-11 .likert-group:nth-of-type(even) {
  background-color: #e5e5e5;
  border-radius: 0.5rem;
}

/* Texto de la pregunta */
.slide-11 .question-text {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Contenedor de opciones */
.slide-11 .likert-options {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: center;
}

/* Cada etiqueta-flex */
.slide-11 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Ocultar los radios nativos */
.slide-11 .likert-options input[type="radio"] {
  display: none;
}

/* Estilo de los emojis-círculo */
.slide-11 .likert-options .emoji {
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}

/* Texto descriptivo de cada opción */
.slide-11 .likert-options span:last-child {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Al seleccionar: agrandar emoji y negrita en texto */
.slide-11 .likert-options input[type="radio"]:checked + .emoji {
  transform: scale(1.3);
}
.slide-11 .likert-options input[type="radio"]:checked + .emoji + span {
  font-weight: 600;
}

/* Botones */
.slide-11 .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
.slide-11 .prev-btn {
  background: #ccc;
  color: #333;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
}
.slide-11 .next-btn {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 1.2rem;
}
/* — SLIDE 12: Ausentismo / Misión y Cultura (Franja 3 arriba izquierda) — */
.slide-12 {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  /* Franja 3 arriba izquierda */
  background: url("/img/Franja3.png") no-repeat left top;
  background-size: 55% auto;
}
.slide-12 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 6vh auto;
  padding: 1.5rem 2rem;
  text-align: left;
}

/* Grupos de pregunta */
.slide-12 .likert-group {
  margin-bottom: 2.5rem;
}
.slide-12 .question-text {
  font-size: 1.125rem;
  line-height: 1.4;
}

/* Opciones en fila */
.slide-12 .likert-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 0.75rem;
}
.slide-12 .likert-options input[type="radio"] {
  display: none;
}
.slide-12 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.slide-12 .emoji {
  font-size: 1.4rem;
  transition: transform 0.15s ease;
}
.slide-12 input[type="radio"]:checked + .emoji {
  transform: scale(1.5);
}

/* Botones */
.slide-12 .buttons {
  text-align: center;
  margin-top: 1.5rem;
}
.slide-12 .prev-btn,
.slide-12 .next-btn {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin: 0 0.5rem;
}
.slide-12 .prev-btn {
  background: #ccc;
  color: #333;
}

/* — SLIDE 13: Adaptación, integridad y prestaciones (Franja 4 arriba derecha) — */
.slide-13 {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  /* Franja 4 en esquina superior derecha */
  background: url("/img/Franja4.png") no-repeat right top;
  background-size: 55% auto;
}
.slide-13 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 6vh auto;
  padding: 1.5rem 2rem;
  text-align: left;
}

/* Destacar el bloque central (pregunta 2) */
.slide-13 .question-text.highlighted {
  background-color: #fff9c4;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

/* Likert: mismas reglas que slide-12 */
.slide-13 .likert-group {
  margin-bottom: 2.5rem;
}
.slide-13 .question-text {
  font-size: 1.125rem;
  line-height: 1.4;
}
.slide-13 .likert-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 0.75rem;
}
.slide-13 .likert-options input[type="radio"] {
  display: none;
}
.slide-13 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.slide-13 .emoji {
  font-size: 1.4rem;
  transition: transform 0.15s ease;
}
.slide-13 input[type="radio"]:checked + .emoji {
  transform: scale(1.5);
}

/* Botones igual que en el resto */
.slide-13 .buttons {
  text-align: center;
  margin-top: 1.5rem;
}
.slide-13 .prev-btn,
.slide-13 .next-btn {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin: 0 0.5rem;
}
.slide-13 .prev-btn {
  background: #ccc;
  color: #333;
}
/* — SLIDE 14: puertas abiertas, reglamento y familia (Franja 1 izquierda) — */
.slide-14 {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  /* Franja 1 en el lateral izquierdo */
  background: url("/img/Franja1.png") no-repeat left center;
  background-size: 45% auto;
}
.slide-14 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 750px;
  margin: 6vh auto;
  padding: 2rem 1rem;
  text-align: left;
}

/* Likert: mismos estilos utilizados en las slides anteriores */
.slide-14 .likert-group {
  margin-bottom: 2.5rem;
}
.slide-14 .question-text {
  font-size: 1.125rem;
  line-height: 1.4;
}
.slide-14 .likert-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 0.75rem;
}
.slide-14 .likert-options input[type="radio"] {
  display: none;
}
.slide-14 .likert-options label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.slide-14 .emoji {
  font-size: 1.4rem;
  transition: transform 0.15s ease;
}
.slide-14 input[type="radio"]:checked + .emoji {
  transform: scale(1.5);
}

/* Botones: mismos estilos */
.slide-14 .buttons {
  text-align: center;
}
.slide-14 .prev-btn,
.slide-14 .next-btn {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin: 0 0.5rem;
}
.slide-14 .prev-btn {
  background: #ccc;
  color: #333;
}
/* — SLIDE 16 — Comunidad y familias (Franja 5 a la derecha) — */
.slide-16 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #fff;
  background-image: url("/img/Franja 5.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 120%;
}

.slide-16 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.slide-16 .likert-group {
  margin-bottom: 2.5rem;
}

.slide-16 .likert-options {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.slide-16 .emoji {
  font-size: 1.2rem;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.slide-16 .buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}
/* — SLIDE 17 — Comentario final (Franja 4 arriba) — */
.slide-17 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #fff;
  background-image: url("/img/Franja 4.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.slide-17 .slide-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1rem;
}

.slide-17 .slide-logo {
  width: 180px;
  margin-bottom: 1rem;
}

.slide-17 .slide-title {
  font-size: 2rem;
  color: #f58423;
  margin-bottom: 0.5rem;
}

.slide-17 .slide-text {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}

.slide-17 .slide-subtitle {
  font-size: 2rem;
  color: #5b5560;
  margin-bottom: 0.5rem;
}

.slide-17 .slide-caption {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1.5rem;
}

.slide-17 .slide-question {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.slide-17 textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #f58423;
  border-radius: 1rem;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  resize: vertical;
}

.slide-17 .btn-send {
  background: #f58423;
  color: #fff;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 1.5rem;
  font-size: 1rem;
  cursor: pointer;
}