/* ==========================================================================
   DIOLKON - capa propia
   Se carga DESPUES del CSS de la plantilla y lo sobrescribe.
   No editar los archivos de la plantilla: todo cambio visual va aqui.
   ========================================================================== */

/* 1. Nav fijo y transparente
   La web es una sola pantalla: el nav no se oculta al hacer scroll ni cambia
   de fondo (el rebote del movil lo activaba). Sin desenfoque ni franja. */
.site-header,
.site-header.is-scrolled {
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

/* 2. Degradado superior intermedio: oscurece solo la franja del nav y se funde
   rapido con la imagen. Abajo se mantiene el degradado de la plantilla. */
.hero-shade {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 10%, transparent 20%),
    linear-gradient(180deg, transparent 75%, #000000 100%),
    linear-gradient(180deg, transparent 65%, #000000 100%);
}

/* 3. Boton de cerrar: solo la palabra, sin la "x".
   La palabra se cambia en config/languages/<idioma>.json -> common.close */
.header-contact::after,
.contact-popover > .header-contact::after {
  content: none;
  display: none;
}

/* 4. Linea legal al pie de la tarjeta de contacto (la inserta diolkon.js) */
.dk-legal {
  margin: 22px 0 0;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.4);
}
body.site.theme-light .dk-legal { color: var(--soft); }

/* 5. Selector de idioma
   Ordenador: ES / EN / ZH como en la plantilla.
   Movil (600 px o menos): solo el idioma actual "ES ‹". Al pulsarlo, los otros
   idiomas aparecen a su izquierda en la misma linea, solo texto, sin caja.
   (Lo crea diolkon.js) */
.dk-lang { display: none; position: relative; align-items: center; }
.dk-lang-btn,
.dk-lang-menu a {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-shadow: 0 0 10px #000000, 0 2px 10px #00000029;
}
.dk-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--text, #ffffff);
  cursor: pointer;
}
.dk-lang-chevron {
  width: 9px;
  height: 9px;
  transform: rotate(90deg);            /* apunta a la izquierda: hay mas idiomas */
  transition: transform 0.25s ease;
}
.dk-lang-btn[aria-expanded="true"] .dk-lang-chevron { transform: rotate(-90deg); }
.dk-lang-menu {
  position: absolute;
  top: 50%;
  right: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dk-lang.is-open .dk-lang-menu { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.dk-lang-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  color: var(--soft, rgba(255, 255, 255, 0.6));
}
.dk-lang-menu a:hover { color: #ffffff; }

@media (max-width: 600px) {
  .site-header .header-actions > .language-links { display: none; }
  .dk-lang { display: flex; }
}
@media (max-width: 359px) {
  .header-actions { gap: 6px; }
  .header-actions .outline-button { padding: 0.6em 0.7em; }
  .dk-lang-menu a { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-lang-menu, .dk-lang-chevron { transition: none; }
}

/* 6. WeChat desplegable (lo construye diolkon.js) */
.dk-wechat-toggle {
  display: block;
  width: 100%;
  padding: 7px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.dk-wechat-toggle .dk-arrow {
  display: inline-block;
  margin-left: 2px;
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
}
.dk-wechat-toggle[aria-expanded="true"] .dk-arrow { transform: rotate(0deg); }

.dk-wechat-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.dk-wechat-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.dk-wechat-panel > .dk-wechat-inner { overflow: hidden; min-height: 0; }

.dk-wechat-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0 12px;
}
.dk-wechat-qr {
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  padding: 4px;
  border-radius: 3px;
  background: #ffffff;
}
.dk-wechat-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dk-wechat-meta { display: flex; flex-direction: column; gap: 10px; font-size: 12px; min-width: 0; }
.dk-wechat-id { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.5); }
.dk-wechat-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
  background: none;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}
.dk-wechat-copy .dk-copy-icon { font-size: 11px; opacity: 0.6; }
.dk-wechat-copy.is-copied .dk-copy-icon { opacity: 1; }
.dk-wechat-open {
  align-self: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.75);
}
/* "Abrir WeChat" solo en moviles/tablets: en ordenador se escanea el QR */
@media (hover: hover) and (pointer: fine) { .dk-wechat-open { display: none; } }
body.site.theme-light .dk-wechat-id { color: var(--soft); }
body.site.theme-light .dk-wechat-copy { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .dk-wechat-panel, .dk-wechat-toggle .dk-arrow { transition: none; }
}

/* 7. Fondo negro uniforme detras de la web
   Safari (iPhone) tiñe la barra de estado y la zona de rebote con el color de
   fondo de la pagina, que era azul marino. Lo igualamos al negro del degradado
   superior para que arriba se vea todo del mismo color, tambien mientras carga
   el video. */
html,
body.site,
.hero-section {
  background-color: #000000;
}
/* 6. Efecto ola en Contacto/Cerrar: retraso por letra aunque la plantilla
   reescriba el texto sin él al cerrar la tarjeta */
.btn-animate-chars [data-button-animate-chars] span:nth-child(1)  { transition-delay: 0s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(2)  { transition-delay: 0.01s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(3)  { transition-delay: 0.02s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(4)  { transition-delay: 0.03s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(5)  { transition-delay: 0.04s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(6)  { transition-delay: 0.05s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(7)  { transition-delay: 0.06s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(8)  { transition-delay: 0.07s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(9)  { transition-delay: 0.08s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(10) { transition-delay: 0.09s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(11) { transition-delay: 0.10s; }
.btn-animate-chars [data-button-animate-chars] span:nth-child(12) { transition-delay: 0.11s; }