@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Kablammo&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

* {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

p,
label {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

main {
  flex: 1;
}

:root {
  /*paleta básica*/
  --color-rojo: #e8332f;
  --color-celeste: #44c2dd;
  --color-amarillo: #d9c93b;
  --color-verde-agua: #1d8e7a;
  --color-verde: #7ab24e;

  --color-azul-suave: #56a4af;
  --color-azul-oscuro: #403786;
  --color-gris-claro: #dadada;
  --color-verde-oscuro: #4c5f41;
  --color-negro: #111110;

  /*verdes*/
  --color--verde-claro: #9fdc7a;
  --color--verde-medio: #6fae5c;
  --color--verde-bosque: #2f5d34;
  --color--verde-musgo: #597a4a;
  --color--verde-menta: #90d8c2;
  --color--verde-lima: #c7e86a;

  /*azules*/
  --color--azul-cielo: #7dd5ef;
  --color--azul-profundo: #2b2f5b;
  --color--azul-turquesa: #2fb8b0;
  --color--azul-gris: #8aa9b1;

  /*amarillos*/
  --color--amarillo-suave: #f3e57c;
  --color--amarillo-ocre: #d3a724;
  --color--naranja-suave: #e8a16a;

  /*cafés*/
  --color--cafe-madera: #6a4a2b;
  --color--cafe-claro: #d7b89c;
  --color--cafe-arena: #c9a27d;
  --color--cafe-tierra: #8b5e34;

  /*grises*/
  --color--gris-medio: #a0a0a0;
  --color--gris-oscuro: #5a5a5a;
  --color--blanco-hueso: #f4f4f1;

  --color--verde-hoover: #4fe721;
  --color--cafe-hoover: #4e342e;
  --color--gris-borde: #c5c5c5;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, sans-serif;
  background-color: #f4f7f6;
}

.header {
  background-color: var(--color-verde);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  box-shadow: 0vh 0vh 0vh var(--color-verde-oscuro);

  font-family: "Knewave", system-ui;
  font-weight: 400;
  font-style: normal;
}

.header-derecha {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 15px;
}

.logo-img {
  height: 13vh;
}

.logo-img:hover {
  transform: scale(1.15);
  transition: transform 0.4s ease;
}

.header-link {
  color: var(--color--blanco-hueso);
  text-decoration: none;
  font-size: 2.2vh;
  font-weight: bold;
  transition: color 0.4s ease;
  text-shadow: 0 0.3vh 0.5vh rgba(0, 0, 0, 0.35);
  transition: 0.3s ease;
}

.header-link:hover {
  color: var(--color--verde-lima);
  text-shadow: 0 0.3vh 0.5vh rgba(0, 0, 0, 0.55);
  transform: scale(1.1);
}

.submenu-container {
  position: relative;
}

.header-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-verde-oscuro);
  list-style: none;
  min-width: 18vh;
  border-radius: 0.5vh;
  overflow: hidden;
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, 0.3);
  z-index: 999;
}

/*botones de login*/
#logInbtn,
#logOutbtn,
#adminbtn,
#regbtn {
  height: 5.5vh;
  width: auto;
  background: var(--color--verde-claro);
  border-color: var(--color--verde-bosque);
  padding: 1.2vh 2vh;
  border-radius: 2vh;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#logInbtn:hover,
#adminbtn:hover,
#logOutbtn:hover,
#regbtn:hover {
  background: var(--color--verde-lima);
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.cart-button {
  background-color: var(--color--amarillo);
  color: var(--color-negro);
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}
.cart-button:hover {
  transform: scale(1.05);
  background-color: var(--color--amarillo-ocre);
}

/*Login */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

.modal-content {
  background: var(--color--verde-medio);
  border: 0.3vh solid var(--color--verde-bosque);
  padding: 4vh;
  border-radius: 2vh;
  width: 90%;
  max-width: 400px;
  margin: 5vh auto;
  max-height: 90vh;
  overflow-y: auto;
  transition: 0.4s ease;
}

.modal-content:hover {
  border-color: var(--color-verde-oscuro);
  box-shadow: 0 0 1vh var(--color--verde-hoover);
  transform: scale(1.1);
}

#formLogin {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  width: 100%;
}

#formLogin .inputLogin,
#formLogin .inputPassword {
  background: var(--color--blanco-hueso);
  border: 0.2vh solid var(--color--gris-borde);
  border-radius: 1vh;
  padding: 1.5vh;
  font-size: 2vh;
  outline: none;
  transition: all 0.3s ease;
}

#formLogin .inputCaptcha {
  background: var(--color--blanco-hueso);
  border: 0.2vh solid var(--color--gris-borde);
  border-radius: 1vh;
  padding: 1.5vh;
  font-size: 2vh;
  outline: none;
  transition: all 0.3s ease;
}

#formLogin input::placeholder {
  color: var(--color--gris-oscuro);
}

#formLogin input:focus {
  border-color: var(--color--verde-medio);
  box-shadow: 0.3vh solid var(--color--verde-bosque);
}

#formLogin button,
#formRegister button {
  background: var(--color--blanco-hueso);
  border: none;
  padding: 1.5vh;
  border-radius: 2vh;
  font-size: 2vh;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#formLogin button:hover,
#formRegister button:hover {
  background: var(--color--verde-lima);
  box-shadow: 0 0 4vh 1vh rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.close {
  float: right;
  font-size: 3vh;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s ease;
}

.close:hover {
  color: var(--color-rojo);
  transform: scale(1.2);
}

/*Registrarse*/
#formRegister {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  width: 100%;
}

#formRegister .inputRegUser,
#formRegister .inputRegEmail,
#formRegister .inputRegPass {
  background: var(--color--blanco-hueso);
  border: 0.2vh solid var(--color--gris-borde);
  border-radius: 1vh;
  padding: 1.5vh;
  font-size: 2vh;
  outline: none;
  transition: all 0.3s ease;
}

/*footer*/
.footer {
  background: var(--color-verde);
  text-align: center;
  padding: 1.5vh 0;
  color: var(--color--blanco-hueso);
  box-shadow: 0 -0.4vh 1vh rgba(0, 0, 0, 0.15);
}

.footer-titulo {
  font-size: 1.9vh;
  margin: 1.5vh 0;
  font-weight: bold;
}

.footer-contacto {
  background: var(--color--verde-claro);
  margin: 1.8vh 0;
  padding: 0.8vh 2.2vh;
  border-radius: 0.8vh;
  border-color: var(--color--verde-bosque);
  font-size: 1.8vh;
  font-weight: bold;
  transition: 0.3s ease;
  cursor: pointer;
}

.footer-contacto:hover {
  background: var(--color--verde-lima);
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.footer-icon {
  font-size: 3.2vh;
  color: var(--color--blanco-hueso);
  transition: transform 0.4s ease-in-out, color 0.4s ease;
}

.footer-icon:hover {
  transform: scale(1.15);
  background: linear-gradient(
    45deg,
    var(--color-amarillo),
    var(--color-rojo),
    var(--color-azul-oscuro)
  );

  background-clip: text;
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer-copyright {
  margin-top: 1.5vh;
  font-size: 1.6vh;
  opacity: 0.8;
}

/*Responsive*/
@media (max-width: 900px) {
  .header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 2vh 0;
    text-align: center;
  }

  .logo-img {
    height: 10vh;
  }

  .header-derecha {
    margin-right: 0;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-link {
    font-size: 2vh;
  }

  #logInbtn,
  #logOutbtn,
  #regbtn {
    height: 5vh;
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .header {
    flex-direction: column;
    gap: 2vh;
    padding-bottom: 2vh;
  }

  .logo-img {
    height: 9vh;
  }

  .header-derecha {
    flex-direction: column;
    gap: 1.2vh;
  }

  .header-link {
    font-size: 1.8vh;
  }

  #logInbtn,
  #logOutbtn,
  #regbtn {
    width: 70%;
    font-size: 14px;
  }

  .submenu-container {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .footer {
    padding: 2vh;
  }

  .footer-titulo {
    font-size: 1.8vh;
  }

  .footer-contacto {
    font-size: 1.7vh;
    padding: 1vh 2vh;
  }

  .footer-icon {
    font-size: 3vh;
  }

  .footer-copyright {
    font-size: 1.5vh;
  }
}

@media (max-width: 600px) {
  .footer {
    padding: 3vh 1vw;
  }

  .footer-titulo {
    font-size: 2vh;
    margin-bottom: 1vh;
  }

  .footer-contacto {
    width: 80%;
    font-size: 1.9vh;
    padding: 1vh 0;
  }

  .footer-icon {
    font-size: 3.5vh;
    margin: 0 1vh;
  }

  .footer-contacto:hover,
  .footer-icon:hover {
    transform: scale(1.08);
  }

  .footer-copyright {
    font-size: 1.8vh;
  }
}

/*Animación mouse*/

.huella-animada {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 24px;
  color: var(--color--cafe-tierra);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: huellita 1.5s linear forwards;
}

@keyframes huellita {
  0% {
    opacity: 0.8;
    transform: scale(0.5) rotate(var(--rotacion));
  }
  20% {
    opacity: 1;
    transform: scale(1.1) rotate(var(--rotacion));
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-20px) rotate(var(--rotacion));
  }
}

/* --- ANIMACIONES DE SCROLL (SCROLL REVEAL) --- */

/* Estado inicial oculto */
.hidden {
  opacity: 0;
  filter: blur(5px); /* Un desenfoque inicial se ve muy elegante */
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición suave */
}

/* Animación: Aparecer desde abajo */
.hidden.fade-up {
  transform: translateY(50px);
}

/* Animación: Aparecer desde la izquierda */
.hidden.fade-left {
  transform: translateX(-50px);
}

/* Animación: Aparecer desde la derecha */
.hidden.fade-right {
  transform: translateX(50px);
}

/* CLASE QUE ACTIVA LA ANIMACIÓN (JS la agrega) */
.show {
  opacity: 1;
  filter: blur(0);
  transform: translate(0) !important; /* Regresa a su posición original */
}

/* --- Delay escalonado para tarjetas (Staggering) --- */
/* Esto hace que si hay 3 tarjetas, aparezcan una tras otra */
.main-card:nth-child(2) {
  transition-delay: 0.2s;
}
.main-card:nth-child(3) {
  transition-delay: 0.4s;
}

.card-certificacion:nth-child(even) {
  transition-delay: 0.2s;
}

.comentarios-card:nth-child(2) {
  transition-delay: 0.2s;
}
.comentarios-card:nth-child(3) {
  transition-delay: 0.4s;
}

/* ==========================================================================
   ESTILOS NUEVOS PARA EL MODAL SLIDING (VERSIÓN DEFINITIVA 🌿)
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  /*z-index: 10000;*/
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.container-slid {
  background-color: var(--color--blanco-hueso);
  border-radius: 30px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  width: 850px;
  max-width: 100%;
  min-height: 550px;
}
.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
  display: flex;
  align-items: center;
}
.form-container form {
  background-color: var(--color--blanco-hueso);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  height: 100%;
  width: 100%;
  text-align: center;
}
.form-container h1 {
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--color--verde-bosque);
  font-family: "DynaPuff", system-ui;
  font-size: 2.2em;
}
.social-container {
  margin: 15px 0;
}
.social-container a {
  border: 2px solid var(--color--verde-claro);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px;
  height: 45px;
  width: 45px;
  color: var(--color--verde-bosque);
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.2em;
}
.social-container a:hover {
  background: var(--color--verde-lima);
  color: var(--color-negro);
  border-color: var(--color--verde-lima);
  transform: scale(1.1);
}
.form-container span {
  font-size: 13px;
  margin-bottom: 15px;
  color: var(--color--gris-oscuro);
  font-weight: 600;
}
.form-container input {
  background-color: #eee;
  border: 2px solid transparent;
  padding: 12px 15px;
  margin: 6px 0;
  width: 100%;
  border-radius: 10px;
  outline: none;
  transition: 0.3s;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
}
.form-container input:focus {
  border-color: var(--color--verde-medio);
  background-color: #fff;
}
.form-container button {
  border-radius: 25px;
  border: none;
  background-color: var(--color--verde-bosque);
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 50px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 20px;
  font-family: "DynaPuff", system-ui;
  box-shadow: 0 5px 15px rgba(47, 93, 52, 0.3);
}
.form-container button:hover {
  background-color: var(--color--verde-lima);
  color: var(--color-negro);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(199, 232, 106, 0.4);
}
.form-container button:active {
  transform: scale(0.95);
}

/* Animaciones Slider */
.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}
.container-slid.right-panel-active .sign-in-container {
  transform: translateX(100%);
}
.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}
.container-slid.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: show 0.6s;
}
@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}

/* --- OVERLAY VERDE (EL QUE NO SE VEÍA) --- */
.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 100px;
}
.container-slid.right-panel-active .overlay-container {
  transform: translateX(-100%);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 100px;
}
.overlay {
  /* MÉTODO A PRUEBA DE FALLOS */
  background-color: #2f5d34 !important; /* Verde bosque forzado */

  /* Degradado directo con códigos HEX (sin variables para evitar errores) */
  background: linear-gradient(to right, #4c5f41, #2f5d34);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  color: #ffffff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: all 0.6s ease-in-out;
}
.container-slid.right-panel-active .overlay {
  transform: translateX(50%);
}
.overlay-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}
.overlay-panel h1 {
  font-family: "DynaPuff", system-ui;
  font-size: 2.5em;
  margin-bottom: 15px;
  color: #ffffff; /* Texto blanco */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.overlay-panel p {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 20px 0 35px;
  color: var(--color--blanco-hueso);
}
.overlay-panel button.ghost {
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 25px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: "DynaPuff", system-ui;
}
.overlay-panel button.ghost:hover {
  background-color: #ffffff;
  color: var(--color--verde-bosque);
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.overlay-left {
  transform: translateX(-20%);
}
.container-slid.right-panel-active .overlay-left {
  transform: translateX(0);
}
.overlay-right {
  right: 0;
  transform: translateX(0);
}
.container-slid.right-panel-active .overlay-right {
  transform: translateX(20%);
}

.icon-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  color: var(--color--gris-oscuro);
  z-index: 200;
  cursor: pointer;
  transition: 0.3s;
}
.icon-close:hover {
  color: var(--color-rojo);
  transform: rotate(90deg);
}
.container-slid.right-panel-active .icon-close {
  left: 25px;
  right: auto;
  color: var(--color--gris-oscuro);
}
/* =========================================
   1. ESTILOS DEL WIDGET (Botón y Menú)
   ========================================= */
#widget-acc-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.btn-flotante {
  background-color: var(--color-verde-oscuro, #2f5d34);
  color: var(--color--blanco-hueso, #fff);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 3px solid var(--color--verde-lima, #c7e86a);
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-flotante:hover {
  transform: scale(1.1) rotate(10deg);
  filter: brightness(1.2);
}

.menu-acc {
  background: var(--color--blanco-hueso, #fff);
  color: var(--color-negro, #000);
  border: 4px solid var(--color--cafe-tierra, #8b5e34);
  padding: 15px;
  border-radius: 15px;
  position: absolute;
  bottom: 75px;
  left: 0;
  width: 250px;
  display: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-acc.mostrar {
  display: block;
}

.item-acc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Botones de control de fuente */
.btn-font-control {
  background: var(--color--verde-claro, #9fdc7a);
  border: 2px solid var(--color--verde-bosque, #2f5d34);
  color: var(--color--verde-bosque, #2f5d34); /* Texto oscuro para contraste */
  min-width: 30px;
  height: 30px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}
.btn-font-control:hover {
  background: var(--color--verde-lima, #c7e86a);
  transform: translateY(-2px);
}

/* Switch Toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--color-verde, #7ab24e);
}
input:checked + .slider:before {
  transform: translateX(20px);
}

/*Sección de modo oscuro*/
body.dark-mode {
  --color--blanco-hueso: #121212;
  --color-gris-claro: #1e1e1e;
  --color-negro: #e0e0e0;
  --color--gris-medio: #555555;
  --color--gris-oscuro: #b0b0b0;
  --color--gris-borde: #333333;
  --color-verde-oscuro: #8bc34a;
  --color--verde-bosque: #66bb6a;
  --color--verde-claro: #1b5e20;
  --color-verde: #2e7d32;
  --color-verde-agua: #004d40;
  --color--verde-medio: #4caf50;
  --color--verde-musgo: #9ccc65;
  --color--verde-menta: #00695c;
  --color--verde-lima: #827717;
  --color--verde-hoover: #00e676;
  --color--cafe-tierra: #a1887f;
  --color--cafe-madera: #8d6e63;
  --color--cafe-claro: #3e2723;
  --color--cafe-hoover: #d7ccc8;
  --color-rojo: #ef5350;
  --color-celeste: #00acc1;
  --color-amarillo: #fbc02d;
  --color-azul-suave: #26c6da;
  --color-azul-oscuro: #7986cb;
  background-color: #050505;
  color: var(--color-negro);
}

body.dark-mode .imagen-fondo,
body.dark-mode html {
  background-blend-mode: overlay;
  background-color: rgba(0, 0, 0, 0.85);
}

body.dark-mode img {
  filter: brightness(0.85);
  transition: filter 0.3s;
}
body.dark-mode img:hover {
  filter: brightness(1);
}

body.dark-mode .fa-brands,
body.dark-mode .fa-solid {
  color: inherit;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #2b2b2b;
  color: #fff;
  border: 1px solid var(--color--cafe-tierra);
}

body.dark-mode ::placeholder {
  color: #888;
}

body.dark-mode .polaroid,
body.dark-mode .comentarios-card,
body.dark-mode .suscripcion-section,
body.dark-mode .datos-seccion {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .menu-acc {
  background-color: #222;
  border-color: #555;
}
body.dark-mode .btn-font-control {
  color: #fff;
  background-color: var(--color--verde-claro);
}

body.dark-mode img,
body.dark-mode svg,
body.dark-mode video,
body.dark-mode iframe {
  filter: brightness(0.8) contrast(1.1);
  transition: filter 0.3s ease;
}

body.dark-mode img:hover,
body.dark-mode svg:hover {
  filter: brightness(1) contrast(1);
}

body.dark-mode [style*="background-image"] {
  background-color: rgba(0, 0, 0, 0.85) !important;
  background-blend-mode: overlay;
}

body.dark-mode section,
body.dark-mode article,
body.dark-mode header,
body.dark-mode footer,
body.dark-mode div {
  background-blend-mode: overlay;
}

body.dark-mode header img,
body.dark-mode footer img,
body.dark-mode nav img {
  mix-blend-mode: multiply;
  opacity: 0.9;
  filter: brightness(1) contrast(1.2);
}

body.dark-mode .fa-solid,
body.dark-mode .fa-brands,
body.dark-mode .fa-regular,
body.dark-mode i {
  color: inherit;
}

/* --- NUEVOS ESTILOS PARA AGRUPAR EL INPUT Y EL BOTÓN --- */

.captcha-group {
    /* Habilita Flexbox para alinear los elementos horizontalmente */
    display: flex;
    align-items: center; /* Centra verticalmente el input y el botón */
    gap: 10px; /* Espacio entre el campo de texto y el botón */
    width: 100%;
    margin-bottom: 5px; /* Margen inferior para separarlo de otros elementos */
}

/* Ajuste para el Input de Texto: Ocupa la mayor parte del espacio */
.captcha-group #captchaTxt {
    flex-grow: 1; /* Permite que el input crezca para llenar el espacio disponible */
    margin: 0; /* Asegura que no tenga márgenes molestos que Flexbox pueda ignorar */
}

/* Ajuste para el Botón de Regenerar: No crece y mantiene su tamaño */
.captcha-group #btnRegenerarCaptcha {
    flex-shrink: 0; /* Evita que el botón se encoja */
    margin: 0; /* Quita los márgenes anteriores que podrían desalinearlo */
    /* Asegura que tenga el tamaño que definiste */
    width: 40px; 
    height: 40px;
}

/* --- ESTILOS PARA LOS ELEMENTOS DEL CAPTCHA DENTRO DEL FORMULARIO SLIDING --- */

/* Contenedor del Captcha */
#captchaContainer {
  /* Asegura que el contenedor tenga un fondo claro como el input normal */
  background-color: #eee;
  /* Margen para separarlo de otros elementos */
  margin: 6px 0;
  /* El mismo padding para que se vea como un campo de entrada */
  padding: 12px 15px;
  width: auto;
  /* Borde redondeado */
  border-radius: 10px;
  /* Borde sutil */
  border: 2px solid transparent;
  /* Transición para el efecto de foco */
  transition: 0.3s;
  /* Estilos para el texto/imagen del captcha */
  display: flex; /* Para centrar o alinear contenido si el captcha es una imagen */
  justify-content: center;
  align-items: center;
  font-size: 24px; /* Un tamaño visible para el código */
  font-weight: bold;
  color: var(--color--verde-bosque); /* Color de texto del bosque */
  /* Puedes añadir un estilo de fuente divertido o formal si es solo texto */
  font-family: "Kablammo", cursive; /* Usando una fuente exótica/temática */
  letter-spacing: 3px; /* Espaciado para mejorar la legibilidad */
  user-select: none; /* Evita que el usuario seleccione el texto del captcha */
  height: 50px; /* Altura definida para el área de visualización */
}


/* Efecto visual de foco para el contenedor del captcha */
#formLogin:focus-within #captchaContainer {
  border-color: var(--color--verde-medio);
  background-color: #fff;
}


/* Input de Texto para Escribir el Captcha */
#captchaTxt {
  /* Hereda los estilos de los inputs normales, pero lo forzamos a quedar bien */
  background-color: #eee;
  border: 2px solid transparent;
  padding: 12px 15px;
  margin: 6px 0; /* Un poco más de margen inferior para separarlo del botón */
  width: 100%;
  border-radius: 10px;
  outline: none;
  transition: 0.3s;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  box-sizing: border-box; /* Asegura que el padding no cambie el ancho total */
}

#captchaTxt:focus {
  border-color: var(--color--verde-medio);
  background-color: #fff;
}

/* Botón de Regenerar Captcha */
#btnRegenerarCaptcha {
  /* Lo hago parecer un ícono o un pequeño botón utilitario */
  background-color: var(--color--verde-claro);
  border: none;
  border-radius: 50%; /* Lo hace redondo */
  width: 40px; /* Tamaño del círculo */
  height: 40px;
  padding: 0; /* Quita el padding por defecto */
  margin: 5px auto 15px; /* Centrado y con margen */
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Icono (simulación con Font Awesome) */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: var(--color--verde-bosque);

  /* Pongo el icono de Font Awesome de recargar/refresh para la simulación */
  content: "\f2f1"; /* Código Unicode para fa-solid fa-arrows-rotate (Asegúrate de que Font Awesome esté cargado) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#btnRegenerarCaptcha::before {
  /* Esto es lo que realmente hace aparecer el ícono de recargar */
  content: "\f2f1"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#btnRegenerarCaptcha:hover {
  background-color: var(--color--verde-lima);
  transform: rotate(45deg); /* Efecto visual de "girar" al regenerar */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Ajuste adicional para la disposición, si necesitas agrupar el input del captcha y el botón de refrescar */
/* Si se llegara a necesitar, puedes envolver #captchaTxt y #btnRegenerarCaptcha en un div y darle display: flex; */
.captcha-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 5px; /* Ajusta el margen si usas un grupo */
}

/* Asegurando que el input del captcha ocupe su espacio si se agrupa con el botón */
.captcha-group #captchaTxt {
    flex-grow: 1;
    margin: 0; /* Quitar márgenes si está en un grupo */
}

/* Si decides no usar el grupo, asegura que el botón Regenerar no tenga margen automático */
#btnRegenerarCaptcha {
    margin: 5px 0 15px 0; /* Ajuste si está solo */
}

#mensajeBloqueo {
  margin: 10px 0; 
  color: #e8332f; 
  font-weight: bold; 
  display: none;
}

body.dark-mode a img[src*=".png"] {
}

/* --- ANIMACIONES DEL MODAL --- */

/* Animación de Entrada (Pop In) */
@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.8); /* Empieza pequeño */
  }
  to {
    opacity: 1;
    transform: scale(1); /* Termina tamaño normal */
  }
}

/* Animación de Salida (Pop Out / Cierre) */
@keyframes modalPopOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8); /* Se encoge al cerrar */
  }
}

/* Aplicamos la animación de entrada por defecto al overlay */
.modal-overlay {
  /* Mantenemos tus estilos existentes y agregamos la animación */
  animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Clase auxiliar que JS agregará para cerrar */
.modal-overlay.closing {
  animation: modalPopOut 0.3s ease-in forwards;
  pointer-events: none; /* Evita clics mientras se cierra */
}

/* --- CHATBOT FLOTANTE --- */

/* Contenedor principal posicionado */
#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px; /* A la derecha, opuesto a accesibilidad */
    z-index: 10001; /* Un poco más que el modal para que no se solape mal */
    font-family: "Nunito", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alineado a la derecha */
}

/* Botón flotante (Estilo similar al de accesibilidad) */
.btn-flotante-chat {
    background-color: var(--color--verde-bosque);
    color: var(--color--blanco-hueso);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--color--verde-lima);
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-flotante-chat:hover {
    transform: scale(1.1);
    background-color: var(--color--verde-medio);
    box-shadow: 0 6px 20px rgba(47, 93, 52, 0.6);
}

/* Ventana del Chat */
.chat-window {
    background-color: var(--color--blanco-hueso);
    width: 350px;
    height: 450px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 15px; /* Espacio entre ventana y botón */
    border: 3px solid var(--color--verde-bosque);
    
    /* Animación de entrada */
    transform-origin: bottom right;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* Para no bloquear clicks cuando está oculto */
}

.chat-window.mostrar-chat {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}

/* Header del Chat */
.chat-header {
    background-color: var(--color--verde-bosque);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "DynaPuff", system-ui;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
}

.close-chat {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: 0.2s;
}
.close-chat:hover {
    color: var(--color-rojo);
    transform: scale(1.2);
}

/* Área de Mensajes */
.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f4f7f6; /* Fondo suave */
}

/* Burbujas de mensaje */
.message {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

.bot-message {
    background-color: var(--color--gris-claro);
    color: var(--color-negro);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.user-message {
    background-color: var(--color--verde-claro);
    color: var(--color--verde-bosque);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    font-weight: 600;
}

/* Área de Input */
.chat-input-area {
    padding: 10px;
    background-color: white;
    border-top: 1px solid var(--color--gris-claro);
    display: flex;
    gap: 10px;
}

.chat-input-area input {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 2px solid var(--color--gris-claro);
    outline: none;
    font-family: "Nunito", sans-serif;
}

.chat-input-area input:focus {
    border-color: var(--color--verde-medio);
}

.chat-input-area button {
    background-color: var(--color--verde-bosque);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-input-area button:hover {
    background-color: var(--color--verde-lima);
    transform: scale(1.1);
}

/* --- PERSONALIZACIÓN DEL SCROLLBAR (Chrome, Safari, Edge) --- */
.chat-messages::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra */
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color de fondo del riel */
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--color--verde-medio); /* Color de la barra (tu verde) */
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--color--verde-bosque); /* Color al pasar el mouse */
}

/* Firefox (usa propiedades diferentes) */
.chat-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--color--verde-medio) #f1f1f1;
}

#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10001;
    font-family: "Nunito", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    /* --- AGREGA ESTA LÍNEA --- */
    pointer-events: none; /* Deja pasar los clics a través del área vacía */
}

.btn-flotante-chat {
    /* ... (tus otros estilos) ... */
    
    /* --- AGREGA ESTA LÍNEA --- */
    pointer-events: auto; /* Reactiva los clics solo para el botón */
}

.chat-window {
    /* ... (tus otros estilos: background, width, transition, etc.) ... */
    
    /* --- AGREGA O MODIFICA ESTO --- */
    pointer-events: none; /* Por defecto, ignorar clics (está oculta) */
}

/* Y busca la clase donde se muestra: */
.chat-window.mostrar-chat {
    transform: scale(1);
    opacity: 1;
    
    pointer-events: auto; /* Ahora sí, permite clics dentro del chat */
}

.forgot-password-container {
  left: 0;
  width: 50%;
  z-index: 1;
  opacity: 0;
  transform: translateY(100%); 
  transition: all 0.6s ease-in-out;
  pointer-events: none; 
}

.container-slid.show-forgot .sign-in-container {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.container-slid.show-forgot .forgot-password-container {
  transform: translateY(0);
  opacity: 1;
  z-index: 5;
  pointer-events: all;
}

.container-slid.show-forgot .overlay-container {
  transform: translateX(0); 
}