/* -------------- Paleta de Colores ------------------- */
/* Colores base */
:root {
  --verde-abeto: #00211a;
  --verde-menta: #c7e9da;
  --blanco-roto: #f5f5f0;
  --arena-verdoso: #e3eae6;
  --blanco: #ffffff;
  --header-height: 80px;
  --header-height-2: 100px;
}

/* Fondo y texto principal */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Quicksand", sans-serif;
  background-color: var(--blanco);
  color: var(--verde-abeto);
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}
/* Títulos principales */

h1,
h2,
.titulo-decorativo {
  font-family: "Cookie", cursive;
  color: var(--verde-abeto);
  font-weight: bold;
}

h3,
h4,
h5,
h6 {
  color: var(--verde-abeto);
  font-weight: bold;
}

/* Texto secundario */
p,
li {
  color: var(--verde-salvia);
  font-family: "Quicksand", sans-serif;
}

a {
  color: var(--verde-abeto);
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  font-weight: bold;
  color: var(--verde-abeto);
}

a.boton {
  background-color: var(--verde-abeto);
  color: var(--blanco);
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: background 0.3s ease, color 0.3s ease;
  margin-top: 1rem;
}

a.boton:hover,
a.boton:focus {
  background-color: var(--verde-menta);
  color: var(--verde-abeto);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 50);
}

a.boton-oscuro,
.boton-oscuro {
  background-color: var(--verde-abeto);
  color: var(--blanco);
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: background 0.3s ease, color 0.3s ease;
  border: none;
}
a.boton-oscuro:hover,
a.boton-oscuro:focus,
.boton-oscuro:hover,
.boton-oscuro:focus {
  background-color: var(--blanco);
  color: var(--verde-abeto);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

a.boton-claro {
  background-color: var(--verde-menta);
  color: var(--verde-abeto);
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-flex;
  align-items: center;
}

a.boton-claro:hover,
a.boton-claro:focus {
  background-color: var(--verde-abeto);
  color: var(--blanco);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 50);
}

#ast-scroll-top {
  background-color: var(--verde-abeto);
  font-size: 15px;
  border-radius: 10px;
}

.woocommerce-js .blockUI.blockOverlay::before,
.woocommerce .blockUI.blockOverlay::before {
  content: "";
  display: block;
  width: 48px !important;
  height: 48px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
  border: 6px solid #eee !important;
  border-top: 6px solid #009688 !important;
  border-radius: 50%;
  background: none !important;
  box-shadow: none !important;
  animation: spin 1s linear infinite !important;
  z-index: 9999;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.contenedor-rayas {
  /* Dimensiones y sombra (opcional, para visualización) */
  width: 100%;
  height: 500px;
  /* --- Inicio de la replicación del fondo --- */
  /* 1. Paleta de colores para las rayas. */
  --color-verde-oscuro: #1e3e34;
  --color-verde-medio: #6a9385;
  --color-verde-claro: #cde5da;
  --color-fondo-blanco: #ffffff;
  /* 2. El color de fondo del div crea las "rayas" blancas. */
  background-color: var(--color-fondo-blanco);
  /* 3. El SVG en línea dibuja las 3 rayas de colores con bordes ondulados. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3e%3cpath fill='%23c7e9da' d='M-5 5C40-5 160 15 205 5l0 20C160 35 40 15 -5 25z'/%3e%3cpath fill='%2300211a' d='M-5 65C50 75 150 55 205 65l0 20C150 75 50 95 -5 85z'/%3e%3cpath fill='%23CDE5DA' d='M-5 125C60 115 140 135 205 125l0 20C140 155 60 135 -5 145z'/%3e%3c/svg%3e");
  /* 4. El tamaño del patrón SVG (un ciclo completo). */
  background-size: 100%; /* Ancho completo, 180px de alto por ciclo */
  /* 5. Se repite el patrón verticalmente para llenar el div. */
  background-repeat: repeat-y;
  min-height: 650px;
}

button.cky-show-desc-btn:not(:hover):not(:active) {
  color: var(--verde-abeto) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

.cky-accordion-header .cky-always-active {
  color: var(--verde-abeto) !important;
}

#ast-scroll-top {
  background-color: #002820 !important;
  border-radius: 10px !important;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#ast-scroll-top svg {
  width: 20px !important;
  height: auto !important;
  fill: white !important;
}