/* DECLARACIONES GLOBALES */

/* Los colores están definidos como variables */

:root {
  --primario: #02519c;
  --fondo: #fffafa;
  --texto: var(--primario);
  --secundario: #d1e9f0;
  --enfasis: #97BCD8;
  --padding-mobile: 10px;
  --padding-desktop: 20px;
  --margin-mobile: 10px;
  --margin-desktop: 40px;
  --border-radius-mobile: 10px;
  --border-radius-desktop: 20px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  text-wrap: pretty;
  cursor: none;
  list-style: none;
  font-family: "Inter", sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Creo el cursor personalizado */

.custom-cursor {
  width: 30px;
  height: 30px;
  background-color: var(--primario);
  border-radius: 50%;
  filter: blur(0px);
  mix-blend-mode: multiply;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
  will-change: transform, filter;
}

/* Ocultar cursor por defecto en elementos interactivos */
button {
  cursor: none;
  position: relative;
}

/* Área extendida invisible para el cursor */
button::before {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  cursor: none;
}

a,
.boton-menu,
.boton-menu-sticky {
  cursor: none;
}

/* Mantener cursor oculto durante hover */
a:hover,
button:hover,
.boton-menu:hover,
.boton-menu-sticky:hover {
  cursor: none;
}

/* Media query para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  * {
    cursor: auto !important;
  }

  .custom-cursor {
    display: none !important;
  }
}

/* Estilo del body */

body {
  background-color: var(--fondo);
  color: var(--texto);
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  font-size: 1rem;
  padding: var(--padding-mobile);

  overflow-x: hidden;
  height: 100%;
  width: 100%;
  position: relative;
  /* Círculo degradado sutil en el fondo */
  background:
    radial-gradient(960px 960px at 70% -0%, rgba(209, 233, 240, 0.8) 0%, rgba(209, 233, 240, 0.4) 35%, rgba(209, 233, 240, 0.00) 60%),
    var(--fondo);
}

@media screen and (min-width: 768px) {
  body {
    font-size: 1.5rem;
    padding: var(--padding-desktop);
    /* Escalado del círculo degradado para pantallas grandes */
    background:
      radial-gradient(960px 960px at 70% -0%, rgba(209, 233, 240, 0.8) 0%, rgba(209, 233, 240, 0.4) 35%, rgba(209, 233, 240, 0.00) 60%),
      var(--fondo);
  }
}

/* Color de selección */

::selection {
  color: var(--fondo);
  background-color: var(--primario);
}

/* ESTILOS DE LOS ELEMENTOS */

/* Estilos de los encabezados */

h1 {
  font-family: "Gloock", serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 0.9;
  margin-bottom: calc(var(--margin-mobile) * 1);
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 9rem;
    margin-bottom: calc(var(--margin-desktop) * 0.5);
  }
}

h2 {
  font-weight: 300;
  font-size: 2rem;
  text-wrap: balance;
  padding-bottom: calc(var(--padding-mobile) * 2);
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: 3rem;
    padding-bottom: calc(var(--padding-desktop) * 2);
  }
}

h3 {
  font-weight: 400;
  font-size: 1.5rem;
  padding-bottom: calc(var(--padding-mobile) * 1.5);
}

@media screen and (min-width: 768px) {
  h3 {
    font-size: 2rem;
    padding-bottom: calc(var(--padding-desktop) * 1);
  }
}

.participantes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
}

.participantes p:first-child {
  font-size: 1.5rem;
  font-style: italic;
}

@media screen and (min-width: 768px) {
  .participantes p:first-child {
    font-size: 2rem;
  }
}

.participantes p:last-child {
  font-size: 3rem;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .participantes p:last-child {
    font-size: 5rem;
  }
}

/* Logotipos */

.logotipos {
  display: flex;
  position: absolute;
  width: 100%;
  gap: calc(var(--margin-mobile) * 2);
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  height: 40px;
  margin-top: calc(var(--margin-mobile) * 6);
}

@media screen and (min-width: 1024px) {
  .logotipos {
    gap: calc(var(--margin-desktop) * 2);
    height: 80px;
    margin-top: 0;
  }
}

.logotipos a {
  display: flex;
  height: fit-content;
}

.logotipos>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logotipos svg {
  height: 21px;
  width: auto;
  fill: var(--primario);
}

@media screen and (min-width: 1024px) {
  .logotipos svg {
    height: 54px;
  }
}

.logotipos div:first-child svg {
  height: 40px;
  width: auto;
}

@media screen and (min-width: 1024px) {
  .logotipos div:first-child svg {
    height: 80px;
  }
}

.logotipos p {
  font-weight: 400;
  font-size: 1rem;
  width: 100%;
  white-space: nowrap;
}

/* Header con botones de idiomas */

header {
  position: relative;
  margin-bottom: calc(var(--margin-mobile) * 10);
  width: 100%;
  height: fit-content;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  header {
    margin-bottom: calc(var(--margin-desktop) * 3);
  }
}

.idiomas-container {
  display: flex;
  gap: var(--margin-mobile);
  justify-content: right;
  align-items: center;
  height: 40px;
}

.boton-idiomas {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.1rem;
  background-color: transparent;
  color: var(--texto);
  border: 1px solid var(--texto);
  border-radius: var(--border-radius-mobile);
  text-align: center;
  width: fit-content;
  height: 40px;
  padding: 10px 20px;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, border 0.3s ease-in-out;
}

.boton-idiomas:hover {
  background-color: var(--primario);
  color: var(--fondo);
  border: 1px solid var(--primario);
}

.boton-idiomas.idioma-activo {
  background-color: var(--primario);
  color: var(--fondo);
  font-weight: 600;
  /* Otros estilos que quieras para destacar */
}

/* Estilos de los cuerpos de texto */

a {
  text-decoration: none;
  color: var(--texto);
}

.bold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.item-titulo {
  font-size: 1.5rem;
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .item-titulo {
    font-size: 2rem;
  }
}

.item-subtitulo {
  margin-top: calc(var(--padding-mobile) / 2);
}

@media screen and (min-width: 768px) {
  .item-subtitulo {
    margin-top: calc(var(--padding-desktop) / 2);
  }
}

.item-descripcion {
  font-style: italic;
  font-size: 1.25rem;
  padding: 10px;
  background-color: var(--primario);
  border-radius: calc(var(--border-radius-mobile) / 2);
  margin-top: auto;
  align-self: flex-end;
}

@media screen and (min-width: 768px) {
  .item-descripcion {
    font-size: 2rem;
    padding: 20px;
    border-radius: calc(var(--border-radius-desktop) / 2);
  }
}

.item-botones,
.item-botones-priorizacion,
.item-botones-seleccion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media screen and (min-width: 768px) {

  .item-botones,
  .item-botones-priorizacion,
  .item-botones-seleccion {
    gap: 20px;
  }
}

.item-botones li,
.item-botones-priorizacion li,
.item-botones-seleccion li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  font-weight: 600;
  width: fit-content;
  min-height: 50px;
  border-radius: calc(var(--border-radius-mobile) / 2);
}

.item-botones li {
  border: 1px solid var(--fondo);
  font-weight: 600;
}

.item-botones-priorizacion li,
.item-botones-seleccion li {
  border: 1px solid var(--texto);
  font-weight: 400;
}

@media screen and (min-width: 768px) {

  .item-botones li,
  .item-botones-priorizacion li,
  .item-botones-seleccion li {
    padding: 20px;
    height: 70px;
    border-radius: calc(var(--border-radius-desktop) / 2);
  }
}

.item-botones li.seleccionado {
  background-color: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--fondo);
}

.item-botones-priorizacion li.seleccionado,
.item-botones-seleccion li.seleccionado {
  background-color: var(--primario);
  color: var(--fondo);
  border: 1px solid var(--primario);
}

.item-botones li:hover {
  border: 1px solid var(--fondo);
  background-color: var(--fondo);
  color: var(--texto);
}

.item-botones-priorizacion li:hover,
.item-botones-seleccion li:hover {
  border: 1px solid var(--primario);
  background-color: var(--primario);
  color: var(--fondo);
}

.item-y-n {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  align-items: center;

  p {
    justify-self: flex-start;
    width: calc((100% - 20px) / 6 * 4);
  }
}

.item-escala {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: left;
  padding-bottom: 10px;
}

.item-escala:last-child {
  padding-bottom: 0px;
}

.item-escala .grupo-botones {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .item-y-n {
    gap: 20px;

    p {
      width: calc((100% - 40px) / 6 * 4);
    }
  }

  .item-escala {
    gap: 20px;
    padding-bottom: 20px;
  }

  .item-escala .grupo-botones {
    gap: 20px;
  }
}

.item-boton-y-n,
.item-boton-escala {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 10px;
  font-weight: 600;
  border-radius: calc(var(--border-radius-mobile) / 2);
}

.item-boton-y-n {
  width: calc((100% - 20px) / 6 * 1);
  border: 1px solid var(--primario);
}

.item-boton-escala {
  width: 100%;
  border: 1px solid var(--fondo);
  background-color: var(--fondo);
  font-size: 1.5rem;
}

@media screen and (min-width: 768px) {
  .item-boton-y-n {
    width: calc((100% - 40px) / 6 * 1);
    height: 70px;
    padding: 20px;
    border-radius: calc(var(--border-radius-desktop) / 2);
  }

  .item-boton-escala {
    width: 100%;
    height: 70px;
    border-radius: calc(var(--border-radius-desktop) / 2);
    font-size: 2rem;
  }
}

.item-boton-y-n:hover,
.item-boton-escala:hover {
  border: 1px solid var(--primario);
  background-color: var(--primario);
  color: var(--fondo);
}

.item-y-n div.seleccionado,
.item-boton-escala.seleccionado {
  background-color: var(--primario);
  color: var(--fondo);
  border: 1px solid var(--primario);
}

.item-boton-aceptar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  min-height: 50px;
  border: 1px solid var(--primario);
  font-weight: 600;
  border-radius: calc(var(--border-radius-mobile) / 2);
}

@media screen and (min-width: 768px) {
  .item-boton-aceptar {
    padding: 20px;
    height: 70px;
    border-radius: calc(var(--border-radius-desktop) / 2);
  }
}

.item-boton-aceptar:hover {
  border: 1px solid var(--primario);
  background-color: var(--primario);
  color: var(--fondo);
}

.item-dicotomia {
  display: flex;
}

.item-dicotomia div {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 50%;
  border: 1px solid var(--primario);
  background-color: #0505F31A;
}

@media screen and (min-width: 768px) {
  .item-dicotomia div {
    padding: 20px;
  }
}

.item-dicotomia div:hover {
  background-color: var(--primario);
  color: var(--fondo);
}

.item-dicotomia div.seleccionado {
  background-color: var(--primario);
  color: var(--fondo);
  border: 1px solid var(--primario);
}

.item-dicotomia div:first-child {
  border-radius: 5px 0 0 5px;
}

.item-dicotomia div:last-child {
  border-radius: 0 5px 5px 0;
  text-align: right;
  justify-content: flex-end;
  border-left: none;
}

@media screen and (min-width: 768px) {
  .item-dicotomia div:first-child {
    border-radius: 10px 0 0 10px;
  }

  .item-dicotomia div:last-child {
    border-radius: 0 10px 10px 0;
  }
}

.item-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  .item-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.item-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .item-checklist li {
    gap: 20px;
  }
}

.item-checklist li div {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px solid var(--primario);
}

.item-checklist li div.seleccionado {
  background-color: var(--primario);
}

@media screen and (min-width: 768px) {
  .item-checklist li div {
    height: 40px;
    width: 40px;
  }
}

.item-checklist li div:hover {
  background-color: var(--primario);
}

/* Dos columnas */

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  .dos-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }
}

/* Estilos del bento-grid */

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 20px;
  }

  .bloque-1 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 1;
  }

  .bloque-2 {
    grid-column: 4 / span 6;
    grid-row: 1 / span 1;
  }

  .bloque-3 {
    grid-column: 10 / span 3;
    grid-row: 1 / span 1;
  }

  .bloque-4 {
    grid-column: 1 / span 6;
    grid-row: 2 / span 1;
  }

  .bloque-5 {
    grid-column: 7 / span 6;
    grid-row: 2 / span 1;
  }

  .bloque-6 {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
  }

  .bloque-7 {
    grid-column: 5 / span 4;
    grid-row: 3 / span 1;
  }

  .bloque-8 {
    grid-column: 9 / span 4;
    grid-row: 3 / span 1;
  }
}

.bento-item {
  border-radius: var(--border-radius-mobile);
  background-color: var(--secundario);
  border: 1px solid transparent;
  padding: var(--padding-mobile);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  .bento-item {
    border-radius: var(--border-radius-desktop);
    padding: var(--padding-desktop);
    gap: 20px;
  }
}

.bloque-1 {
  color: var(--fondo);
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.5s;
  overflow: hidden;
  min-height: 360px;
}

.bloque-1>* {
  position: relative;
  z-index: 2;
}

.bloque-7 {
  justify-content: space-between;
  display: grid;
  grid-template-columns: 1fr;
}

.bloque-8 {
  padding: 0;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 1rem;
  gap: 10px;
  text-align: right;
  color: var(--enfasis);

  a {
    text-decoration: underline;
    color: var(--enfasis);
  }

  a:hover {
    color: var(--primario);
  }
}

@media screen and (min-width: 768px) {
  .bloque-8 {
    font-size: 1.5rem;
  }
}

/* ESTILOS DE BLOQUES */

section {
  margin-top: calc(var(--margin-mobile) * 2);
}

section:first-of-type {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  section {
    margin-top: calc(var(--margin-desktop) * 1);
  }
}

/* TEXT AREA */

#messageForm {
  text-align: center;
  height: 100%;
}

#messageForm textarea {
  font-size: 1rem;
  line-height: 1.1;
  color: var(--primario);
  background-color: var(--fondo);
  border: 1px solid var(--fondo);
  width: 100%;
  min-height: 240px;
  height: 100%;
  border-radius: calc(var(--border-radius-mobile) / 2);
  padding: 10px;

  resize: none;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  #messageForm textarea {
    font-size: 1.5rem;
    border-radius: calc(var(--border-radius-desktop) / 2);
    padding: 20px;
  }
}

#emailForm {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  #emailForm {
    gap: 20px;
  }
}

#emailForm div {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

@media screen and (min-width: 768px) {
  #emailForm div {
    gap: 20px;
  }
}

#emailForm textarea {
  font-size: 1rem;
  line-height: 1.1;
  color: var(--primario);
  background-color: var(--fondo);
  border: 1px solid var(--fondo);
  width: 100%;
  height: 50px;
  border-radius: calc(var(--border-radius-mobile) / 2);
  padding: calc((50px - 1.1rem) / 2) 15px;

  resize: none;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  #emailForm textarea {
    font-size: 1.5rem;
    height: 70px;
    border-radius: calc(var(--border-radius-desktop) / 2);
    padding: calc((70px - 1.5rem) / 2) 20px;
  }
}

#messageForm textarea::after,
#emailForm textarea::after {
  content: attr(data-replicated-value) " ";
  visibility: hidden;
  white-space: pre-wrap;
}

#messageForm textarea::placeholder,
#emailForm textarea::placeholder {
  font-size: 1rem;
  line-height: 1.1;
  color: var(--enfasis);
}

@media screen and (min-width: 768px) {

  #messageForm textarea::placeholder,
  #emailForm textarea::placeholder {
    font-size: 1.5rem;
  }
}

#messageForm textarea:focus {
  outline: none;
  border: 1px solid var(--primario);
}

#emailForm textarea:focus {
  outline: none;
  border: 1px solid var(--primario);
}

/* Error en el formulario */

.campo-error {
  background-color: #B4D3E4 !important;
  border: 1px solid var(--primario) !important;
}

#errorMensaje {
  color: var(--primario);
  background-color: #B4D3E4;
  border: 1px solid var(--primario);
  padding: 10px;
  border-radius: calc(var(--border-radius-mobile) / 2);
  display: none;
}

@media screen and (min-width: 768px) {
  #errorMensaje {
    padding: 20px;
    border-radius: calc(var(--border-radius-desktop) / 2);
  }
}

/* Modal INFORMACIÓN */

.modal-outro-info {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(151, 188, 216, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 500ms ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-outro-info.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-contenido-info {
  background: var(--fondo);
  padding: var(--padding-mobile);
  margin: calc(var(--margin-mobile) * 1);
  border-radius: var(--border-radius-mobile);
  display: flex;
  flex-direction: column;
  text-align: left;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 500ms ease, opacity 500ms ease;
  width: 100%;
  max-height: 90dvh;
  overflow: auto;
}

.modal-outro-info.is-open .modal-contenido-info {
  transform: translateY(0px);
  opacity: 1;
}

@media screen and (min-width: 1024px) {
  .modal-contenido-info {
    padding: var(--padding-desktop);
    border-radius: var(--border-radius-desktop);
    margin: calc(var(--margin-desktop) * 2);
    width: 80%;
  }
}

@media screen and (min-width: 1440px) {
  .modal-contenido-info {
    width: 60%;
  }
}

.modal-contenido-info button {
  margin-top: calc(var(--margin-mobile) * 2);
  padding: var(--padding-mobile) calc(var(--padding-mobile) * 2);
  border: 1px solid var(--primario);
  background: var(--fondo);
  color: var(--primario);
  border-radius: var(--border-radius-mobile);
  font-size: 1rem;
  font-weight: 600;
  height: 50px;
}

@media screen and (min-width: 768px) {
  .modal-contenido-info button {
    margin-top: calc(var(--margin-desktop));
    padding: var(--padding-desktop) calc(var(--padding-desktop) * 2);
    border-radius: var(--border-radius-mobile);
    font-size: 1.5rem;
    height: 70px;
  }
}

.modal-contenido-info button:hover {
  background: var(--primario);
  color: var(--fondo);
}

/* Bloqueo de scroll del fondo cuando el modal está abierto */
body.modal-open {
  overflow: hidden;
}

/* Modal ENVÍO RESPUESTAS */

.modal-outro-respuesta {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(151, 188, 216, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 500ms ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-outro-respuesta.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-contenido-respuesta {
  background: var(--fondo);
  padding: var(--padding-mobile);
  margin: calc(var(--margin-mobile) * 1);
  border-radius: var(--border-radius-mobile);
  display: flex;
  flex-direction: column;
  text-align: center;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 500ms ease, opacity 500ms ease;
  width: 100%;
  max-height: 90dvh;
  overflow: auto;
}

.modal-outro-respuesta.is-open .modal-contenido-respuesta {
  transform: translateY(0px);
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .modal-contenido-respuesta {
    padding: var(--padding-desktop);
    border-radius: var(--border-radius-desktop);
    margin: calc(var(--margin-desktop) * 2);
    width: 80%;
  }
}

@media screen and (min-width: 1440px) {
  .modal-contenido-respuesta {
    width: 60%;
  }
}

.modal-contenido-respuesta button {
  margin-top: calc(var(--margin-mobile) * 2);
  padding: var(--padding-mobile) calc(var(--padding-mobile) * 2);
  border: 1px solid var(--primario);
  background: var(--fondo);
  color: var(--primario);
  border-radius: var(--border-radius-mobile);
  font-size: 1rem;
  font-weight: 600;
  height: 50px;
}

@media screen and (min-width: 768px) {
  .modal-contenido-respuesta button {
    margin-top: calc(var(--margin-desktop));
    padding: var(--padding-desktop) calc(var(--padding-desktop) * 2);
    border-radius: var(--border-radius-mobile);
    font-size: 1.5rem;
    height: 70px;
  }
}

.modal-contenido-respuesta button:hover {
  background: var(--primario);
  color: var(--fondo);
}



/* NUEVA HOME */

/* Estilos de los botones de índice */

.menu-indice {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--margin-mobile);
  justify-content: left;
  margin: calc(var(--margin-mobile) * 2) 0 0;
  width: 100%;
  box-sizing: border-box;

  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: var(--padding-mobile);
  overflow-x: auto;
  -ms-overflow-style: none;
  /* IE y Edge */
  scrollbar-width: none;
  /* Firefox */
}

.menu-indice::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

@media screen and (min-width: 768px) {
  .menu-indice {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--margin-desktop) / 2);
    margin: calc(var(--margin-desktop) / 2) 0 0;

    padding-top: var(--padding-desktop);
  }
}

.boton-indice {
  display: flex;
  align-items: center;
  font-size: 1rem;
  background-color: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--texto);
  border-radius: 100px;
  text-align: center;
  width: fit-content;
  height: 40px;
  padding: 10px 20px;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, border 0.3s ease-in-out;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media screen and (min-width: 768px) {
  .boton-indice {
    font-size: 1.5rem;
  }
}

.boton-indice:hover {
  background-color: var(--primario);
  color: var(--fondo);
  border: 1px solid var(--primario);
}

/* Títulos */

.section-title-1 {
  font-family: "Gloock", serif;
  font-size: 3rem;
  font-weight: 300;
  line-height: 0.9;
  margin-bottom: calc(var(--margin-mobile) / 1);
}

@media screen and (min-width: 768px) {
  .section-title-1 {
    font-size: 4.5rem;
    margin-bottom: calc(var(--margin-desktop) / 2);
  }
}

.section-title-2 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 0.9;
  margin-bottom: calc(var(--margin-mobile) / 1);
}

@media screen and (min-width: 768px) {
  .section-title-2 {
    font-size: 3rem;
    margin-bottom: calc(var(--margin-desktop) / 2);
  }
}

/* Sección "Está pasando" con fondo azul claro y esquinas redondeadas */

.fondo-azul {
  background-color: var(--secundario);
  border-radius: var(--border-radius-mobile);
  padding: calc(var(--padding-mobile) * 1);
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .fondo-azul {
    border-radius: var(--border-radius-desktop);
    padding: calc(var(--padding-desktop) * 1);
  }
}

/* Typeform embed (centrado + border-radius consistente) */

.typeform-embed {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: calc(var(--margin-mobile) * 2) 0 0;
}

@media screen and (min-width: 768px) {
  .typeform-embed {
    margin: calc(var(--margin-desktop) * 1) 0 0;
  }
}

.typeform-embed [data-tf-live] {
  width: 100%;
  height: 720px;
  border-radius: var(--border-radius-mobile);
  overflow: hidden;
  /* recorta el iframe a bordes redondeados */
  background: var(--secundario);
}

@media screen and (min-width: 768px) {
  .typeform-embed [data-tf-live] {
    width: 100%;
    border-radius: var(--border-radius-desktop);
  }
}

.typeform-embed iframe {
  border: 0;
  border-radius: inherit;
  display: block;
  width: 100%;
}

/* Bloques con imágenes */

.bloques-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--padding-mobile);
  margin: calc(var(--padding-mobile) * 2) 0 calc(var(--padding-mobile) * 1);
}

@media screen and (min-width: 768px) {
  .bloques-grid {
    grid-template-columns: 1fr;
    gap: var(--padding-desktop);
    margin: calc(var(--padding-desktop) * 2) 0 calc(var(--padding-desktop) * 1);
  }
}

.bloque {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-mobile);
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 1200px) {
  .bloque {
    border-radius: var(--border-radius-desktop);
    aspect-ratio: 16/9;
  }
}

.bloque-imagen {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-mobile);
  aspect-ratio: 16/9;
  height: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .bloque-imagen {
    border-radius: var(--border-radius-desktop);
    aspect-ratio: 16/9;
    height: auto;
  }
}

@media screen and (min-width: 1200px) {
  .bloque-imagen {
    border-radius: var(--border-radius-desktop);
    aspect-ratio: auto;
    min-width: 240px;
  }
}

/* Capa de imagen con blur */
.bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  filter: blur(0px);
}

.bloque-imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
}

/* Oscurecido encima del blur */
.bloque::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(2, 81, 156, 0),
      rgba(2, 81, 156, 0),
      rgba(2, 81, 156, 0),
      rgba(2, 81, 156, 0.75));
}

/* Oscurecido encima del blur */
.bloque-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(2, 81, 156, 0),
      rgba(2, 81, 156, 0),
      rgba(2, 81, 156, 0),
      rgba(2, 81, 156, 0.75));
}

.bloque-content {
  position: relative;
  z-index: 1;
  color: var(--fondo);
  width: 100%;
  height: 100%;
  padding: var(--padding-mobile);
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .bloque-content {
    padding: var(--padding-desktop);
  }
}

/* Título arriba izquierda */
.bloque-title {
  margin: 0;
  margin-bottom: var(--margin-mobile);
  font-size: 3rem;
  font-weight: 300;
  line-height: 0.9;
  width: 100%;
  align-self: flex-start;
}

@media screen and (min-width: 768px) {
  .bloque-title {
    font-size: 4.5rem;
    width: 75%;
    margin-bottom: var(--margin-desktop);
  }
}

/* Lista abajo derecha */
.bloque-list {
  margin: 0;
  margin-top: auto;
  align-self: flex-end;
  text-align: right;
  list-style: none;
}

.bloque-paragraph {
  margin: 0;
  margin-top: auto;
  align-self: flex-start;
  text-align: left;
}

.bloque-list-izq li {
  text-align: left;
  margin-bottom: 10px;
  font-weight: 600;
}

.bloque-list-izq li:last-child {
  margin-bottom: 0px;
}

.item-descarga {
  margin: calc(var(--margin-mobile) * 2) 0 0;
}

@media screen and (min-width: 768px) {
  .item-descarga {
    margin: calc(var(--margin-desktop) * 1) 0 0;
  }
}

.item-descarga p {
  margin: 0 0 calc(var(--margin-mobile) * 1);
}

@media screen and (min-width: 768px) {
  .item-descarga p {
    margin: 0 0 calc(var(--margin-desktop) / 2);
  }
}

/* Padding secciones */

.padding-superior {
  padding-top: calc(var(--margin-mobile) * 9);
  margin: 0;
}

@media screen and (min-width: 768px) {
  .padding-superior {
    padding-top: calc(var(--margin-desktop) * 3);
  }
}

.padding-inferior {
  padding-bottom: calc(var(--margin-mobile) * 6);
  margin: 0;
}

@media screen and (min-width: 768px) {
  .padding-inferior {
    padding-bottom: calc(var(--margin-desktop) * 2);
  }
}

/* Bloque Encuesta Online */

.grid-encuesta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--padding-mobile);
  margin: calc(var(--margin-mobile) * 0) 0;
}

@media screen and (min-width: 1200px) {
  .grid-encuesta {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .grid-encuesta {
    gap: var(--padding-desktop);
    margin: calc(var(--margin-desktop) * 0) 0;
  }
}

.card-encuesta {
  background-color: var(--secundario);
  border-radius: var(--border-radius-mobile);
  padding: var(--padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--padding-mobile);
}

@media screen and (min-width: 768px) {
  .card-encuesta {
    border-radius: var(--border-radius-desktop);
    padding: var(--padding-desktop);
    gap: var(--padding-desktop);
    /* Eliminarlo? */
  }
}

.card-encuesta p, .card-encuesta-dato p {
  margin: 0;
}

.card-encuesta-dato {
  background-color: var(--primario);
  color: var(--fondo);
  border-radius: var(--border-radius-mobile);
  padding: var(--padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--padding-mobile);
}

@media screen and (min-width: 768px) {
  .card-encuesta-dato {
    border-radius: var(--border-radius-desktop);
    padding: var(--padding-desktop);
    gap: var(--padding-desktop);
  }
}

.texto-encuesta-dato {
  font-size: 1.5rem;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .texto-encuesta-dato {
    font-size: 3rem;
  }
}

/* Gráficas */

.grafica-barras-horizontal {
  display: flex;
  flex-direction: column;
  gap: var(--padding-mobile);
}

@media screen and (min-width: 768px) {
  .grafica-barras-horizontal {
    gap: var(--padding-desktop);
  }
}

.barra-item {
  display: flex;
  align-items: center;
  gap: var(--padding-mobile);
}

.grafica-barras-label-arriba .barra-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "label label"
    "track valor";
  align-items: center;
  column-gap: var(--padding-mobile);
  row-gap: 5px;
}

.barra-label {
  min-width: 100px;
}

.grafica-barras-label-arriba .barra-label {
  grid-area: label;
  min-width: 0;
}

@media screen and (min-width: 768px) {
  .barra-label {
    min-width: 160px;
  }
}

.barra-valor {
  min-width: 50px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.grafica-barras-label-arriba .barra-valor {
  grid-area: valor;
}

@media screen and (min-width: 768px) {
  .barra-valor {
    min-width: 80px;
  }
}

.barra-track {
  flex: 1;
  height: 10px;
  background-color: var(--enfasis);
  border-radius: 999px;
  overflow: hidden;
}

.grafica-barras-label-arriba .barra-track {
  grid-area: track;
}

@media screen and (min-width: 768px) {
  .barra-track {
    height: 20px;
  }
}

.barra-fill {
  height: 100%;
  width: var(--valor);
  background-color: var(--primario);
  border-radius: inherit;
}