/* ============================================================
   AGROTAST ES MOLINOT — Componentes del tema
   ------------------------------------------------------------
   Criterio: aquí SOLO va lo que Elementor no sabe hacer desde su
   interfaz (degradados de varias paradas, pseudo-elementos, hovers
   compuestos, marcas de agua). Colores, tipografías, espaciados y
   animaciones se configuran en Elementor.

   Los valores están tomados por medición directa del prototipo
   (web/index.html) a 1440 px. Ver web/css/styles.css.

   Las clases utilitarias se aplican en el editor:
   widget → Avanzado → Clases CSS.
   ============================================================ */

/* ---- Base ------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Compensa la cabecera fija al saltar a una sección por ancla. */
.elementor-element[id] {
  scroll-margin-top: 92px;
}

/* Ningún contenedor más ancho que su padre (2026-09-23).
   Los bloques de texto centrados llevan un ancho fijo de 760, 820 o 860 px
   (en el prototipo era max-width) que Elementor aplica desde 768 px. Entre
   768 y ~900 px no caben con el margen de la sección y la página desbordaba
   en horizontal: los iPad en vertical la veían reducida, con una franja
   blanca y el «Rechazar» del banner de cookies fuera de alcance. Con esto
   el ancho fijo pasa a funcionar como máximo; en escritorio y móvil no
   cambia nada (comprobado píxel a píxel). */
.e-con {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Color por defecto de los titulares.
   El widget de Título de Elementor trae de fábrica el color Primario
   (verde) en «.elementor-widget-heading .elementor-heading-title», con la
   misma especificidad que la regla del kit pero cargándose después: por eso
   los H2 salían verdes en lugar de tinta. Se repite aquí el selector para
   ganar por orden de carga, apuntando al color global «Tinta» para que el
   cliente lo siga controlando desde Ajustes del sitio. Los titulares con
   color propio (hero, CTA, filosofía) no se ven afectados: su regla lleva
   el ID del elemento y es más específica. */
.elementor-widget-heading .elementor-heading-title {
  color: var(--e-global-color-text);
}

/* ============================================================
   ANIMACIÓN DE ENTRADA
   Reproduce el .reveal del prototipo: 28 px hacia arriba, 0,8 s,
   con la curva de marca. Se elige en cualquier widget desde
   Avanzado → Efectos de movimiento → Animación de entrada
   («Agrotast · Reveal»), y el retardo desde el control de al lado.
   ============================================================ */

@keyframes agrotastReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.animated.agrotast-reveal {
  animation-name: agrotastReveal;
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .animated.agrotast-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   CABECERA
   ============================================================ */

/* Flota sobre la foto del hero. Se posiciona en absoluto el
   CONTENEDOR de la plantilla, no el contenedor de Elementor: así el
   espaciador que inserta el sticky queda fuera del flujo. */
.elementor-location-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
}

/* ============================================================
   PÁGINAS SIN FOTO DE CABECERA (carrito, finalizar compra, mi cuenta…)
   ============================================================
   La cabecera flota en absoluto porque debajo hay una foto a sangre. Sin
   esa foto se pisa el contenido, y además su logotipo y sus enlaces son
   BLANCOS sobre fondo claro: invisibles. Lo reportó la clienta el
   2026-09-03 al llegar al checkout.

   Solución: devolverla al flujo y darle el MISMO aspecto sólido que ya
   tiene al hacer scroll, reutilizando las piezas que existen. La clase
   la pone functions.php (agrotast_clase_sin_hero). */
body.no-hero .elementor-location-header {
  position: relative;
}

body.no-hero .ag-header {
  background-color: var(--c-cream);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

/* Logotipo: el mismo cruce que en el estado sólido (ver más abajo). */
body.no-hero .ag-header .logo-light { opacity: 0; }
body.no-hero .ag-header .logo-dark  { opacity: 1; pointer-events: auto; }

/* Enlaces en tinta. Hace falta la misma cuenta de clases que en la regla
   del estado sólido para ganarle a Elementor, y también «fill» por la
   flecha del desplegable, que es un SVG (ver nota detallada abajo). */
body.no-hero .elementor-location-header .ag-header .elementor-nav-menu--main .elementor-item,
body.no-hero .elementor-location-header .ag-header .elementor-nav-menu--main .elementor-item:hover,
body.no-hero .elementor-location-header .ag-header .elementor-nav-menu--main .elementor-item:focus,
body.no-hero .elementor-location-header .ag-header .elementor-nav-menu--main .elementor-item.highlighted,
body.no-hero .elementor-location-header .ag-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--c-ink);
  fill: var(--c-ink);
}

.ag-header {
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              min-height var(--dur) var(--ease);
}

/* Estado sólido al hacer scroll: crema translúcido con desenfoque
   y la cabecera encoge de 88 a 74 px, como en el prototipo. */
.ag-header.elementor-sticky--effects {
  background-color: rgba(251, 248, 242, .9) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
  min-height: 74px !important;
}

/* Sobre el fondo crema los enlaces pasan a tinta.
   Tres cosas que hay que respetar del CSS de Elementor:

   1. Escribe el color con CINCO clases
      (.elementor-70 .elementor-element.elementor-element-XXX
       .elementor-nav-menu--main .elementor-item), así que aquí hace falta
      la misma cuenta para empatar y ganar por orden de carga.
   2. Fija «color» Y «fill». Si solo se cambia el color, la flecha del
      desplegable —que es un SVG— se queda blanca e invisible.
   3. Agrupa :hover con .elementor-item-active, .highlighted y :focus.
      La clase .highlighted permanece un instante al cerrar el desplegable:
      si no se cubre, el texto parpadea en blanco al quitar el ratón. */

.elementor-location-header .ag-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item,
.elementor-location-header .ag-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .ag-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item:focus,
.elementor-location-header .ag-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-location-header .ag-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item.elementor-item-active {
  /* En el prototipo, en estado sólido TODOS los enlaces van en tinta,
     incluido el de la página actual: el único indicador es el subrayado. */
  color: var(--c-ink);
  fill: var(--c-ink);
}

/* La sección actual se marca desde las páginas hijas añadiendo la clase
   «elementor-item-active» al enlace en functions.php: la regla de Elementor
   que apaga el subrayado no cede por especificidad. */

/* La flecha del submenú hereda el color del enlace en los dos estados. */
.ag-header .elementor-nav-menu--main .elementor-item .sub-arrow svg,
.ag-header .elementor-nav-menu--main .elementor-item .sub-arrow i {
  fill: currentColor;
  color: inherit;
}

.ag-header.elementor-sticky--effects .elementor-menu-toggle {
  color: var(--c-ink);
}

/* Los dos logotipos se cruzan en opacidad, no con display, para que
   la transición sea suave igual que en el prototipo. */
.ag-header__brand {
  position: relative;
}

.logo-light,
.logo-dark {
  transition: opacity var(--dur) var(--ease);
}

.logo-dark {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.ag-header.elementor-sticky--effects .logo-light { opacity: 0; }
.ag-header.elementor-sticky--effects .logo-dark  { opacity: 1; pointer-events: auto; }

/* ============================================================
   SELECTOR DE IDIOMA (ES · CA · EN · DE) — cabecera (WPML, 2026-09-18)
   ============================================================
   El HTML lo pone la plantilla de WPML del tema hijo
   (wpml/templates/language-switchers/agrotast-codigos/): un <nav.ag-lang>
   con un enlace por idioma y solo el código. Aquí se le da el mismo
   comportamiento que a los enlaces del menú: blanco sobre el hero, tinta en
   el estado sólido y en las páginas sin hero; el idioma actual se marca con
   el subrayado terracota del menú (no con color, que sobre crema no
   contrasta a este cuerpo). El separador «·» es un pseudoelemento para que
   no cuente como enlace ni lo lea el lector de pantalla. */
.ag-header .ag-lang__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-header .ag-lang__item {
  display: flex;
  align-items: center;
}

.ag-header .ag-lang__item + .ag-lang__item::before {
  content: "·";
  margin: 0 .5rem;
  color: rgba(255, 255, 255, .55);
  transition: color var(--dur) var(--ease);
}

/* Elementor escribe el color del widget de WPML con SEIS clases
   (.elementor-70 .elementor-element.elementor-element-XXX .wpml-elementor-ls
   .wpml-ls-item .wpml-ls-link, con el color global «Texto»), asi que aqui
   hacen falta al menos las mismas, igual que con el menu. */
.elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link {
  font-family: var(--font-body);
  font-size: 13.6px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  padding: 6.4px 0;
  transition: color var(--dur-fast) var(--ease);
}

.elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link:hover,
.elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link:focus-visible {
  color: var(--c-terra);
}

.elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-current-language .ag-lang__link {
  text-decoration: underline;
  text-decoration-color: var(--c-terra);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* Estado sólido (scroll) y páginas sin hero: tinta, como el menú. */
.elementor-location-header .ag-header.elementor-sticky--effects .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link,
body.no-hero .elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link {
  color: var(--c-ink);
}

.elementor-location-header .ag-header.elementor-sticky--effects .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link:hover,
.elementor-location-header .ag-header.elementor-sticky--effects .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link:focus-visible,
body.no-hero .elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link:hover,
body.no-hero .elementor-location-header .ag-header .ag-header__lang .wpml-elementor-ls .ag-lang .wpml-ls-item .ag-lang__link:focus-visible {
  color: var(--c-terra);
}

.ag-header.elementor-sticky--effects .ag-lang__item + .ag-lang__item::before,
body.no-hero .ag-header .ag-lang__item + .ag-lang__item::before {
  color: var(--line-strong);
}

/* Desplegable «Experiencias»: el prototipo desplaza el texto al pasar. */
.ag-header .elementor-nav-menu--dropdown a:hover {
  padding-left: 1.2rem !important;
}

.ag-header .elementor-nav-menu--dropdown a {
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              padding-left var(--dur-fast) var(--ease);
}

/* ============================================================
   MICRO-ETIQUETA (.kicker)
   Versales con una línea corta delante. El color se aplica al
   título interior del widget porque los estilos de encabezado del
   kit ganan en especificidad al wrapper.
   ============================================================ */

/* El wrapper conserva a propósito el interlineado del cuerpo: en el
   prototipo la etiqueta es un elemento inline-flex dentro de un bloque,
   así que ocupa la caja de línea del padre (27,5 px) aunque el elemento
   en sí mida 20,2. Anularlo acortaba cada sección unos 7 px. */

.kicker .elementor-heading-title,
.kicker p {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--c-terra-700);
}

.kicker .elementor-heading-title::before,
.kicker p::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.kicker--center .elementor-heading-title::after,
.kicker--center p::after {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

/* Sobre fotografía o banda verde. */
.kicker--light .elementor-heading-title,
.kicker--light p {
  color: var(--c-terra);
}

/* ============================================================
   PALABRA-ACENTO CALIGRÁFICA (.script)
   Ballet tiene un ojo pequeño: necesita más cuerpo que el titular.
   ============================================================ */

.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-terra);
  font-size: 1.12em;
  padding: 0 .06em;
  /* Sin line-height propio: hereda el del titular, como en el prototipo.
     Fijarlo a 1 encogía la caja de línea y acortaba el bloque 7 px. */
}

/* En la banda de filosofía el titular es menor y el acento sube algo. */
.band-filosofia .script {
  font-size: 1.15em;
}

/* ============================================================
   HERO DE LA HOME
   ============================================================ */

/* El velo lleva DOS degradados y el lateral tiene cuatro paradas;
   el editor de Elementor solo permite un degradado de dos paradas,
   así que el velo completo se resuelve aquí. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(15, 22, 13, .84) 0%,
      rgba(15, 22, 13, .56) 34%,
      rgba(15, 22, 13, .22) 60%,
      rgba(15, 22, 13, .04) 100%),
    linear-gradient(to top,
      rgba(15, 22, 13, .5) 0%,
      rgba(15, 22, 13, 0) 36%);
}

.home-hero > .e-con-inner,
.home-hero > .elementor-element {
  position: relative;
  z-index: 1;
}

.home-hero .elementor-heading-title,
.home-hero .elementor-widget-text-editor {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .32), 0 6px 28px rgba(0, 0, 0, .34);
}

/* .hero__title { max-width: 15em }. Va sobre el H1 y no sobre el widget
   porque «em» debe medirse con el cuerpo del titular (84 px), no con el
   del wrapper, que hereda los 17 px del cuerpo de texto. */
.hero-title .elementor-heading-title {
  display: block;
  max-width: 15em;
}

/* El widget que aloja el indicador de scroll debe quedar FUERA del
   contexto de posicionamiento: Elementor da «position:relative» a todos
   los widgets, así que el indicador se anclaba al widget (alto 0, al
   final del contenido) en vez de al hero, y quedaba 200 px demasiado
   alto. En estático, el «absolute» de dentro resuelve contra el hero. */
.hero-scroll-holder {
  position: static;
}

/* Indicador de scroll con el punto que baja. */
.hero-scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-pill);
  display: block;
}

.hero-scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
  animation: scrollDot 1.8s var(--ease) infinite;
}

@keyframes scrollDot {
  0%   { opacity: 0; top: 8px; }
  40%  { opacity: 1; }
  80%  { opacity: 0; top: 24px; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll span { animation: none; }
}

/* ============================================================
   INTRO — icono terracota que desborda la foto
   ============================================================ */

.intro-media {
  position: relative;
  overflow: visible !important;
}

.intro-icon {
  position: absolute;
  bottom: -26px;
  left: -26px;
  z-index: 2;
  width: 84px;
  opacity: .9;
  filter: drop-shadow(0 8px 20px rgba(26, 38, 26, .18));
}

.intro-icon img {
  width: 84px;
  height: auto;
}

/* ============================================================
   TARJETAS DE EXPERIENCIA
   ============================================================ */

.exp-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.exp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.exp-card__media img {
  transition: transform .7s var(--ease);
}

.exp-card:hover .exp-card__media img {
  transform: scale(1.06);
}

/* En el prototipo .btn-text es un hijo flex directo de .exp-card__body, así
   que no genera caja de línea. Elementor deja el enlace como inline-block
   dentro del div del widget (que es un bloque con interlineado 27,54), y la
   caja de línea añade 1,6 px por tarjeta que acababan alargando la fila.
   Poniendo el widget en flex, el enlace vuelve a ser hijo flex: sin caja de
   línea, la altura es la del propio enlace y coincide con la muestra. */
.elementor-widget-button.btn-text {
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   BOTÓN VERDE (.btn-green — equivale a .btn--green del prototipo)
   El kit da a TODOS los botones un borde de 1,5 px del color rojo
   Molinot. En los botones rojos coincide con el fondo y no se ve,
   pero en los verdes (vales regalo, WhatsApp) dibujaba un contorno
   rojo alrededor del verde. El borde debe seguir al fondo.
   ============================================================ */

.btn-green .elementor-button {
  border-color: var(--c-green);
}

.btn-green .elementor-button:hover,
.btn-green .elementor-button:focus {
  border-color: var(--c-green-700);
}

/* Enlace-acción con flecha: subrayado terracota que se separa al pasar. */
.btn-text .elementor-button {
  gap: .5rem;
  transition: gap var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn-text .elementor-button-content-wrapper {
  gap: .5rem;
  transition: gap var(--dur-fast) var(--ease);
}

.btn-text .elementor-button:hover .elementor-button-content-wrapper {
  gap: .85rem;
}

/* ============================================================
   BANDA DE FILOSOFÍA — marca de agua
   ============================================================ */

.band-filosofia {
  position: relative;
  overflow: hidden;
}

.band-filosofia::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  width: 460px;
  height: 540px;
  background: url("../svg/icono-blanco.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}

.band-filosofia > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* ============================================================
   GALERÍA
   ============================================================ */

/* Empaquetado compacto: rellena los huecos que dejan la celda alta y la
   ancha. Elementor no expone «dense» en su control de flujo y escribe
   --grid-auto-flow:row en una regla por elemento
   (.elementor-N .elementor-element-XXX), más específica que esta clase:
   por eso hace falta !important. */
.galeria-grid {
  grid-auto-flow: row dense !important;
}

/* En móvil, sin las celdas dobles de escritorio (2026-09-23).
   La rejilla pasa a una columna, pero la celda alta («ocupa 2 filas») y la
   ancha («ocupa 2 columnas») conservaban su tamaño: la ancha creaba una
   columna fantasma, dos fotos quedaban a 0 px y sobraban filas (hueco de
   ~550 px). El prototipo lo resolvía igual (web/css/styles.css:416-427).
   !important porque Elementor escribe los span por elemento. */
@media (max-width: 767px) {
  .galeria-grid > .galeria__item {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.galeria__item {
  overflow: hidden;
}

.galeria__item img {
  transition: transform .8s var(--ease);
}

.galeria__item:hover img {
  transform: scale(1.07);
}

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */

/* En el prototipo el título «Experiencias» del pie es un enlace y le
   aplica el mismo relleno que a los demás (.footer__col a), lo que hace
   ese encabezado 10 px más alto que los otros tres. Se replica para que
   la columna más alta —y con ella la fila— mida lo mismo. */
.ag-footer .elementor-widget-heading a {
  display: block;
  padding: 5.12px 0;
}

.ag-footer .elementor-nav-menu a {
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.ag-footer .elementor-nav-menu a:hover {
  padding-left: .3rem;
}

.ag-footer .elementor-social-icon {
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* El enlace de WhatsApp del pie va en terracota, como en el prototipo. */
.footer-contact .elementor-icon-list-item:last-child .elementor-icon-list-text {
  color: var(--c-terra);
  font-weight: 600;
}

/* ============================================================
   PÁGINAS INTERIORES
   ============================================================ */

/* ---- Cabecera de página interior --------------------------
   Mismo criterio que el hero de la home: el velo lleva dos
   degradados y el lateral cuatro paradas, fuera del alcance del
   editor. Las paradas NO son las de la home (42/72/100 frente a
   34/60/100) porque el titular es más corto y necesita menos
   oscurecimiento a la derecha. */

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(15, 22, 13, .85) 0%,
      rgba(15, 22, 13, .56) 42%,
      rgba(15, 22, 13, .24) 72%,
      rgba(15, 22, 13, .05) 100%),
    linear-gradient(to top,
      rgba(15, 22, 13, .5) 0%,
      rgba(15, 22, 13, 0) 48%);
}

.page-hero > .e-con-inner,
.page-hero > .elementor-element {
  position: relative;
  z-index: 1;
}

.page-hero .elementor-heading-title,
.page-hero .elementor-widget-text-editor {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 26px rgba(0, 0, 0, .34);
}

/* 18ch medido sobre el cuerpo del H1, no sobre el del wrapper.
   Misma trampa que .hero-title en la home. */
.page-hero-title .elementor-heading-title {
  display: block;
  max-width: 18ch;
}

/* ---- Tarjetas de información práctica ---------------------
   El círculo del icono: Elementor sabe hacer fondo, borde y radio
   en su widget de icono, pero no fijar la caja a 44x44 con el SVG
   a 22 sin que el propio widget imponga su padding.

   OJO con el borde: el widget de icono en vista «default» genera
   `.elementor-widget-icon.elementor-view-default .elementor-icon`
   con `color` Y `border-color` a Primario (verde), especificidad
   0,3,0. Una regla `.spec-icon .elementor-icon` (0,2,0) pierde y el
   anillo sale verde. Se iguala con el compuesto `.spec-icon.elementor-widget-icon`
   (0,3,0) y se gana por orden de carga (el tema hijo va después del
   CSS por página). Aquí el color verde del icono SÍ es el correcto;
   solo se corrige el borde. */

.spec-icon.elementor-widget-icon .elementor-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-cream-2);
  border: 1px solid var(--line);
  color: var(--c-green);
}

.spec-icon .elementor-icon svg {
  width: 22px;
  height: 22px;
}

/* Los iconos de marca son de TRAZO, no de relleno. Elementor da por hecho
   que todo SVG se pinta con «fill» y lo impone con una regla que no cede por
   especificidad: sin esto los iconos salen como manchas negras.
   El «fill: none» va solo en el <svg>: los trazos que sí deben ir rellenos
   (el punto de la «i», por ejemplo) llevan su propio atributo en el elemento,
   que gana al valor heredado. */
.spec-icon .elementor-icon svg,
.gift-icon .elementor-icon svg,
.ag-notes .e-n-accordion-item-title-icon svg {
  fill: none !important;
  stroke: currentColor;
}

/* En las tarjetas el icono no debe estirarse con la columna. */
.spec-icon {
  flex: none;
}

/* ---- Listas con punto terracota --------------------------- */

.bullets ul,
ul.bullets {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--c-ink);
  list-style: none;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-terra);
}

/* ---- Dos listas en paralelo (privadas, eventos y grupos) --- */

/* .duo__card .bullets: margin-top 1.1rem. */
.duo-bullets {
  margin-top: 1.1rem;
}

/* ---- Banner de vales regalo -------------------------------
   Compuesto (0,3,0) por el mismo motivo que el icono de ficha: aquí
   tanto el color del icono como el borde deben ser terracota, y el
   widget los pinta de verde. */

.gift-icon.elementor-widget-icon .elementor-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 1px solid rgba(226, 164, 91, .5);
  color: var(--c-terra-700);
}

.gift-icon .elementor-icon svg {
  width: 26px;
  height: 26px;
}

/* El icono y el botón no encogen; el cuerpo se queda el resto.
   Sin esto el botón se comprime hasta partir «Consultar vales regalo»
   en dos líneas y el banner crece 15 px. */
.gift-icon,
.gift > .e-con-inner > .elementor-widget-button,
.gift > .elementor-widget-button {
  flex: none;
}

/* ---- Acordeón de condiciones ------------------------------
   Cada nota es un acordeón de un solo elemento (el widget solo
   admite un icono para todos sus elementos y el prototipo usa uno
   distinto por nota). Aquí se le da la forma de tarjeta de
   `.note`: el widget no expone ni el círculo del icono ni el
   relleno asimétrico del cuerpo. */

.ag-notes .e-n-accordion-item {
  background: var(--c-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.ag-notes .e-n-accordion-item[open] {
  border-color: var(--line-strong);
}

/* .note__head: padding 1.15rem 1.4rem, gap .9rem, 1.06rem/600.
   Sin borde propio: el widget se lo pone a la cabecera Y a la tarjeta, y los
   dos se sumaban (1,6 px por nota). El único borde es el de `.note`. */
.ag-notes .e-n-accordion-item-title {
  gap: .9rem;
  padding: 1.15rem 1.4rem;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.ag-notes .e-n-accordion-item-title:hover {
  background: var(--c-cream-2);
}

.ag-notes .e-n-accordion-item-title-text {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.62;
  color: var(--c-ink);
}

/* .note__icon: círculo de 38 px con el SVG a 19.
   El envoltorio va en flex para que el círculo no genere caja de línea:
   como bloque añadía 1,6 px a cada cabecera. */
.ag-notes .e-n-accordion-item-title-icon {
  flex: none;
  order: -1;
  display: flex;
}

/* El centrado se escribe en clave FLEX, no grid: Elementor impone
   `display: flex` a `.e-closed` / `.e-opened` con
   `.elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title-icon
   .e-closed` (0,4,0), que gana al `display: grid` de aquí (0,3,0). Y en flex
   `justify-items` se ignora, así que `place-items: center` solo centraba en
   vertical: el icono quedaba pegado a la izquierda del círculo (0,8 px a un
   lado y 18,2 al otro). Con `justify-content` se centra en los dos ejes,
   gane quien gane el `display`. */
.ag-notes .e-n-accordion-item-title-icon > span,
.ag-notes .e-n-accordion-item-title-icon .e-opened,
.ag-notes .e-n-accordion-item-title-icon .e-closed {
  display: grid;
  place-items: center;
  justify-content: center;
  align-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-cream-2);
  border: 1px solid var(--line);
  color: var(--c-green);
}

/* El tamaño del icono se da con la VARIABLE de Elementor, no con `height`:
   su regla `.elementor-widget-n-accordion .e-n-accordion-item-title-icon
   span > svg { height: var(--n-accordion-icon-size) }` es 0,2,2 y gana a
   cualquier `.ag-notes … svg` (0,2,1). El SVG quedaba en 19 × 15: como el
   viewBox es cuadrado, se escalaba a la altura menor y el icono salía a
   15 px, pequeño y perdido dentro del círculo de 38. */
/* La variable va en el WIDGET y con tres clases. Dos motivos encadenados:
   1. Elementor la declara en el propio elemento, así que heredarla desde
      `.ag-notes` no sirve: el valor local siempre gana.
   2. La declara con `.elementor-N .elementor-element.elementor-element-XXX`
      (0,3,0), así que un `.ag-note` suelto (0,1,0) tampoco basta.
   Con las tres clases del propio widget se iguala a 0,3,0 y se gana por
   orden de carga. */
.ag-note.elementor-element.elementor-widget-n-accordion {
  --n-accordion-icon-size: 19px;
}

.ag-notes .e-n-accordion-item-title-icon svg {
  width: 19px;
}

/* .note__caret: la flecha de la derecha que gira al abrir.
   El widget solo admite UN icono por elemento y ese se usa para el icono de
   la nota, así que la flecha se dibuja aquí con una máscara. */
.ag-notes .e-n-accordion-item-title::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 22px;
  height: 22px;
  background-color: var(--c-green);
  -webkit-mask: var(--ag-caret) no-repeat center / 22px 22px;
  mask: var(--ag-caret) no-repeat center / 22px 22px;
  transition: transform var(--dur-fast) var(--ease);
}

.ag-notes .e-n-accordion-item[open] .e-n-accordion-item-title::after {
  transform: rotate(180deg);
}

/* .note__body: sangrado a la altura del texto, no del icono, y sin el filete
   superior que el widget dibuja entre cabecera y cuerpo. */
.ag-notes .e-n-accordion-item > .e-con {
  padding: 0 1.4rem 1.35rem calc(1.4rem + 38px + .9rem);
  border: 0;
}

.ag-notes .bullets li {
  color: var(--c-ink-soft);
  font-size: .98rem;
  line-height: 1.55;
}

.ag-notes .bullets li::before {
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--c-green);
  opacity: .5;
}

/* ---- Formulario de contacto -------------------------------
   Esta versión del widget de formulario ya no expone los controles
   de estilo de los campos en el panel, así que el aspecto del
   prototipo (`.form`) se reproduce aquí entero. El cliente sigue
   controlando campos, etiquetas y destinatario desde el editor;
   solo el aspecto está fijado. */

/* .form: rejilla con hueco 1.1rem.
   Elementor separa los campos con relleno lateral y margen inferior
   calculados desde sus propias variables, no con «gap». Se ponen a cero
   —es más limpio que pelear con la especificidad de sus reglas— y el
   hueco lo da un «gap» normal, igual en filas y columnas como la muestra.
   Sin esto cada fila arrastraba 10 px de margen y el formulario medía 40
   px de más. */
.ag-form .elementor-form-fields-wrapper {
  /* Las variables van AQUÍ, no en un ancestro: Elementor las declara en el
     propio envoltorio, así que una declaración en el padre queda tapada. */
  --e-form-row-gap: 0px;
  --e-form-column-gap: 0px;

  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  /* Mismo caso que el margen de los grupos: Elementor compensa sus gutters
     con «margin: 0 -5px -10px» en una regla que no cede. Ese -10 de abajo
     hacía que el widget midiera 10 px menos que su contenido. */
  margin: 0 !important;
}

.ag-form .elementor-form-fields-wrapper .elementor-field-group {
  /* El margen inferior de 10 px lo escribe Elementor en una regla que no cede
     por especificidad (ni por sus variables, que declara en el propio
     envoltorio). Sumaba 10 px a cada fila: 40 px de más en el formulario.
     Aquí el hueco lo da el «gap» del envoltorio, así que este margen sobra. */
  margin: 0 !important;
  padding: 0;
  /* .form__row: hueco .4rem entre etiqueta y campo. */
  row-gap: .4rem;
}

/* .form .btn: separado .3rem de más respecto al hueco normal. */
.ag-form .elementor-form-fields-wrapper .elementor-field-type-submit {
  margin-top: .3rem !important;
}

.ag-form .elementor-field-group.elementor-col-50 {
  width: calc(50% - .55rem);
}

.ag-form .elementor-field-group.elementor-col-100 {
  width: 100%;
}

/* En la muestra los campos pasan a ancho completo por debajo de 620 px.
   Elementor no aplica aquí sus puntos de ruptura porque el ancho se lo damos
   nosotros, así que la media query también va aquí. */
@media (max-width: 620px) {
  .ag-form .elementor-field-group.elementor-col-50 {
    width: 100%;
  }
}

/* La regla de Elementor para la etiqueta lleva dos clases: hay que empatar
   con el selector de elemento para ganar por orden de carga. Si no, la
   etiqueta se queda en 17 px y cada fila crece 6,2 px. */
.ag-form .elementor-field-group > label.elementor-field-label {
  padding: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.62;
  color: var(--c-ink);
}

/* El fondo lleva !important porque Elementor escribe siempre
   `.elementor-N .elementor-element.elementor-element-XXX .elementor-field-group
   .elementor-field:not(.elementor-select-wrapper) { background-color:#ffffff }`
   —especificidad 0,6,0— aunque el panel no exponga ningún control para
   cambiarlo. Sin esto los campos salen blancos sobre el crema del bloque. */
.ag-form .elementor-field-group .elementor-field-textual {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-cream) !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.ag-form .elementor-field-group .elementor-field-textual::placeholder {
  color: var(--c-ink-mute);
}

/* La opción vacía del desplegable se ve como un marcador de posición, no
   como una respuesta más. */
.ag-form .elementor-field-group select.elementor-field-textual:invalid,
.ag-form .elementor-field-group select.elementor-field-textual option[value=""] {
  color: var(--c-ink-mute);
}

/* Anillo de foco compuesto (borde + halo). */
.ag-form .elementor-field-group .elementor-field-textual:focus {
  outline: none;
  border-color: var(--c-terra);
  box-shadow: 0 0 0 3px rgba(226, 164, 91, .2);
}

.ag-form .elementor-field-group textarea.elementor-field-textual {
  min-height: 150px;
  resize: vertical;
}

/* .form .btn: alineado a la izquierda y separado .3rem de más. */
.ag-form .elementor-field-type-submit {
  margin-top: .3rem;
}

.ag-form .elementor-button[type="submit"] {
  padding: 1.1rem 2.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.62;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--c-red);
  color: var(--c-cream);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.ag-form .elementor-button[type="submit"]:hover {
  background: var(--c-red-700);
  border-color: var(--c-red-700);
}

/* ---- Datos de contacto ------------------------------------ */

/* La dirección es un bloque y sí usa su propio interlineado; el teléfono y
   el email son enlaces en línea y su caja la marca el puntal del párrafo. */
.contact-dato address {
  font-style: normal;
  line-height: 1.5;
}

/* El teléfono y el email son enlaces, y el kit pinta todos los enlaces con
   el color Primario (verde). En «Datos de contacto» deben ir en tinta, como
   la dirección, y reservar el rojo para el hover. */
.contact-dato a {
  color: var(--c-ink);
  line-height: 1.5;
}

.contact-dato a:hover {
  color: var(--c-red);
}

/* ============================================================
   UTILIDADES
   ============================================================ */

/* Imagen que rellena su contenedor manteniendo proporción.
   Hay que estirar toda la cadena (contenedor → widget → figure → img):
   si falta un eslabón, la imagen conserva su alto natural. */
.img-cover,
.img-cover > .e-con-inner,
.img-cover .elementor-widget-image,
.img-cover .elementor-widget-container,
.img-cover figure,
.img-cover figure > a {
  height: 100%;
  margin: 0;
}

.img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Espaciado entre párrafos: el prototipo usa .65em dentro del cuerpo
   y .55em en la banda de filosofía. */
.elementor-widget-text-editor p {
  margin: 0;
}

.elementor-widget-text-editor p + p {
  margin-top: .65em;
}

.band-filosofia .elementor-widget-text-editor p + p {
  margin-top: .55em;
}

/* Proporción fija para las fotos de sección y de tarjeta. */
.ratio-5-44 img {
  aspect-ratio: 5 / 4.4;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--shadow);
}

.ratio-4-32 img {
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  width: 100%;
}

/* Las fotos de las interiores usan una proporción algo más alta
   que las de la home (.feature__media). */
.ratio-5-42 img {
  aspect-ratio: 5 / 4.2;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP (plugin Click to Chat)
   Se ajusta al tamaño, color y sombra del prototipo.
   ============================================================ */

/* El icono del plugin ya es un círculo verde con transparencia alrededor,
   así que la sombra se hace con drop-shadow (sigue la silueta) y no con
   box-shadow, que dibujaría una sombra cuadrada. Tamaño y posición se
   configuran en el plugin, no aquí. */
.ht-ctc.ht-ctc-chat {
  filter: drop-shadow(0 10px 16px rgba(37, 211, 102, .55));
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  animation: agrotastWaIn .5s var(--ease) both .8s;
}

.ht-ctc.ht-ctc-chat:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 14px 22px rgba(37, 211, 102, .65));
}

/* Entrada del prototipo (@keyframes waIn): aparece con escala tras 0,8 s. */
@keyframes agrotastWaIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ht-ctc.ht-ctc-chat { animation: none; }
}


/* ============================================================
   PÁGINAS LEGALES (Aviso legal · Privacidad y cookies)
   Un solo editor de texto con el articulado. Elementor da la
   tipografía global de h2/h3/p; aquí solo el ritmo vertical, la
   tabla de cookies (Elementor no estila tablas) y la fecha.
   ============================================================ */
.prose--legal .legal-fecha {
  color: var(--c-ink-mute);
  font-size: var(--fs-sm);
  margin-bottom: 2.2rem;
}

.prose--legal .legal-texto h2 {
  font-size: var(--fs-h3);
  margin: 2.4rem 0 .7rem;
}

.prose--legal .legal-texto h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 1.6rem 0 .5rem;
}

.prose--legal .legal-texto p,
.prose--legal .legal-texto ul {
  margin: 0 0 1rem;
}

.prose--legal .legal-texto ul {
  padding-left: 1.3rem;
}

.prose--legal .legal-texto li + li {
  margin-top: .35rem;
}

.prose--legal .legal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: .5rem 0 1.5rem;
}

.prose--legal .legal-tabla th,
.prose--legal .legal-tabla td {
  text-align: left;
  vertical-align: top;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--line);
}

.prose--legal .legal-tabla th {
  font-weight: 600;
  background: var(--c-cream-2);
}

/* En móvil la tabla de cinco columnas no cabe: se desplaza en horizontal. */
@media (max-width: 767px) {
  .prose--legal .legal-tabla {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================
   CABECERA EN MÓVIL Y TABLET (2026-09-21)
   Con hamburguesa, el selector de idioma y «Reservar» van DENTRO
   del menú: WPML añade los idiomas como elementos del menú
   Principal (.menu-item-language) y menu-movil.php añade el
   «Reservar» (.ag-menu-cta). El widget de menú pinta DOS copias
   del menú (la horizontal y el desplegable): esos elementos se
   ocultan en la horizontal, donde ya están el selector y el botón
   del contenedor de acciones (oculto a su vez en tablet/móvil
   desde Elementor).
   ============================================================ */
.ag-header__nav .elementor-nav-menu--main .wpml-ls-menu-item,
.ag-header__nav .elementor-nav-menu--main .ag-menu-cta {
  display: none;
}

/* El aspecto del desplegable (panel a pantalla completa, «Reservar» como
   botón, idiomas en línea) está en «MENÚ MÓVIL A PANTALLA COMPLETA», abajo. */


/* ============================================================
   MENÚ MÓVIL A PANTALLA COMPLETA (2026-09-23)
   ============================================================
   Aprobado por el equipo (variante verde, con el idioma actual en la fila
   de idiomas: WPML «incluir el idioma actual» en el selector del menú).
   Sustituye el desplegable crema de Elementor (≤ 1024 px) por un panel
   verde a pantalla completa con el lenguaje de la banda de Filosofía:
   verde 900, hoja de marca de agua, secciones en The Seasons, rayita
   ocre de las micro-etiquetas. «Reservar» pasa a botón rojo y los
   idiomas a una línea «ES · EN», como el selector de escritorio.

   Solo CSS sobre el widget de menú nativo, sin plantillas ni JavaScript:
   - Elementor marca el menú abierto con .elementor-active en el botón;
     la cabecera se entera con :has().
   - El estado sólido de la cabecera lleva backdrop-filter, que la
     convierte en bloque contenedor de los position:fixed: el panel
     quedaría encerrado en sus 74 px. Con el menú abierto se quita.
   - El JS de «estirar» del widget escribe top/left/width en línea:
     de ahí los !important de esas tres propiedades.
   - Elementor escribe sus reglas del desplegable con el id de la
     plantilla (.elementor-70 … en ES, .elementor-194 … en EN): aquí se
     gana por número de clases, sin depender de la plantilla.
   ============================================================ */

/* ---- Botón de menú legible sobre crema --------------------------------
   En el estado sólido (scroll) y en las páginas sin foto el botón seguía
   BLANCO sobre crema: Elementor lo pinta con color y con fill en el SVG,
   y con más especificidad que la regla del estado sólido de arriba. */
.elementor-location-header .ag-header.elementor-sticky--effects .ag-header__nav div.elementor-menu-toggle,
body.no-hero .elementor-location-header .ag-header .ag-header__nav div.elementor-menu-toggle {
  color: var(--c-ink);
}

.elementor-location-header .ag-header.elementor-sticky--effects .ag-header__nav div.elementor-menu-toggle svg,
body.no-hero .elementor-location-header .ag-header .ag-header__nav div.elementor-menu-toggle svg {
  fill: var(--c-ink);
}

@keyframes agMenuEntrada {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {

  /* Alto de la barra con el menú abierto; el panel empieza justo debajo. */
  .ag-header {
    --ag-barra: 74px;
  }

  /* ---- La barra con el menú abierto: verde, logotipo claro ---------- */
  .elementor-location-header .ag-header:has(.ag-header__nav .elementor-menu-toggle.elementor-active) {
    background-color: var(--c-green-900) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    min-height: var(--ag-barra) !important;
  }

  .elementor-location-header .ag-header:has(.ag-header__nav .elementor-menu-toggle.elementor-active) .logo-light {
    opacity: 1;
  }

  .elementor-location-header .ag-header:has(.ag-header__nav .elementor-menu-toggle.elementor-active) .logo-dark {
    opacity: 0;
    pointer-events: none;
  }

  .elementor-location-header .ag-header:has(.ag-header__nav .elementor-menu-toggle.elementor-active) .ag-header__nav div.elementor-menu-toggle {
    color: var(--c-on-dark);
    background-color: rgba(246, 239, 227, .08);
  }

  .elementor-location-header .ag-header:has(.ag-header__nav .elementor-menu-toggle.elementor-active) .ag-header__nav div.elementor-menu-toggle svg {
    fill: var(--c-on-dark);
  }

  /* ---- El panel ------------------------------------------------------ */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed;
    top: var(--ag-barra) !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--ag-barra));
    height: calc(100dvh - var(--ag-barra));
    max-height: none;
    margin: 0 !important;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--c-green-900);
    border-radius: 0;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s var(--ease), visibility 0s;
  }

  /* Hoja de marca de agua, como en la banda de Filosofía. */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown.elementor-nav-menu__container::after {
    content: "";
    position: fixed;
    right: -80px;
    bottom: -60px;
    z-index: -1;
    width: 320px;
    height: 380px;
    background: url("../svg/icono-blanco.svg") no-repeat center / contain;
    opacity: .06;
    transform: rotate(8deg);
    pointer-events: none;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown > .elementor-nav-menu {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    max-width: 560px;
    margin: 0;
    padding: 18px 28px 44px;
  }

  /* Cada sección a lo ancho; los idiomas, en fila al final. */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li {
    flex: 0 0 100%;
    border-bottom: 1px solid rgba(246, 239, 227, .12);
  }

  /* ---- Secciones -------------------------------------------------------- */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 7.4vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--c-on-dark);
    fill: var(--c-on-dark);
    background: none;
    border: 0;
    border-radius: 0;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item:hover,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item:focus-visible,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item.elementor-item-active,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item.highlighted {
    color: var(--c-terra);
    fill: var(--c-terra);
    background: none;
  }

  /* El desplegable de escritorio desplaza el texto al pasar el ratón
     (padding-left 1.2rem !important, «DESPLEGABLE EXPERIENCIAS» más arriba).
     En el panel no: en pantallas táctiles el :hover se queda pegado tras
     tocar y la sección se movía 19 px. */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item:hover {
    padding-left: 0 !important;
  }

  /* Flecha de «Experiencias»: pequeña y girada con el submenú abierto. */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item .sub-arrow {
    display: inline-flex;
    margin-left: 14px;
    padding: 0;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item .sub-arrow svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    transition: transform .3s var(--ease);
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item.highlighted .sub-arrow svg {
    transform: rotate(180deg);
  }

  /* ---- Submenú de experiencias ------------------------------------------ */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu.elementor-nav-menu--dropdown {
    position: static;
    width: auto !important;
    min-width: 0;
    margin: 0;
    padding: 0 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu a.elementor-sub-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 9px 0 9px 28px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-on-dark-soft);
    background: none;
    border: 0;
    border-radius: 0;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu a.elementor-sub-item:hover {
    padding-left: 28px !important;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu a.elementor-sub-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 1px;
    background: var(--c-terra);
    opacity: .8;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu a.elementor-sub-item:hover,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu a.elementor-sub-item:focus-visible,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu__container .sub-menu a.elementor-sub-item.elementor-item-active {
    color: var(--c-terra);
    background: none;
  }

  /* ---- «Reservar»: botón rojo a lo ancho ------------------------------- */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.ag-menu-cta {
    margin-top: 30px;
    border: 0;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.ag-menu-cta > a.elementor-item {
    justify-content: center;
    padding: 16px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background-color: var(--c-red);
    border-radius: 999px;
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55);
    transition: background-color var(--dur-fast) var(--ease);
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.ag-menu-cta > a.elementor-item:hover,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.ag-menu-cta > a.elementor-item:focus-visible {
    color: #fff;
    background-color: var(--c-red-700);
  }

  /* ---- Idiomas: «ES · EN» como en escritorio ---------------------------
     WPML pone el nombre nativo («English»); se muestra el código de su
     atributo lang. El nombre sigue en el aria-label del enlace. */
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-top: 28px;
    border: 0;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item.wpml-ls-first-item::before {
    content: "";
    width: 26px;
    height: 1px;
    margin-right: .9rem;
    background: var(--c-terra);
    opacity: .7;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item + li.wpml-ls-menu-item::before {
    content: "·";
    margin: 0 .6rem;
    color: rgba(246, 239, 227, .45);
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item > a.elementor-item {
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 13.6px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-on-dark-soft);
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item .wpml-ls-native {
    font-size: 0;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item .wpml-ls-native::after {
    content: attr(lang);
    font-size: 13.6px;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-current-language > a.elementor-item {
    color: var(--c-on-dark);
    text-decoration: underline;
    text-decoration-color: var(--c-terra);
    text-decoration-thickness: 2px;
    text-underline-offset: .45em;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item > a.elementor-item:hover,
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu > li.wpml-ls-menu-item > a.elementor-item:focus-visible {
    color: var(--c-terra);
  }

  /* ---- Entrada escalonada de las secciones -------------------------------- */
  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li {
    animation: agMenuEntrada .5s var(--ease) both;
  }

  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li:nth-child(2) { animation-delay: .04s; }
  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li:nth-child(3) { animation-delay: .08s; }
  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li:nth-child(4) { animation-delay: .12s; }
  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li:nth-child(5) { animation-delay: .16s; }
  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li:nth-child(n+6) { animation-delay: .2s; }

  /* ---- Con el menú abierto: la página no se mueve y el botón flotante
     de WhatsApp se aparta (el menú ya lleva «Reservar»). */
  html:has(.ag-header__nav .elementor-menu-toggle.elementor-active) {
    overflow: hidden;
  }

  body:has(.ag-header__nav .elementor-menu-toggle.elementor-active) .ht-ctc {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .ag-header {
    --ag-barra: 64px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-location-header .ag-header .ag-header__nav .elementor-nav-menu--dropdown > .elementor-nav-menu {
    padding: 28px 48px 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-location-header .ag-header .ag-header__nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container .elementor-nav-menu > li {
    animation: none;
  }
}