/* margot-ghl.css — estilos de las piezas que sustituyen a los plugins de WordPress.
   Se carga la última, después de todo el CSS original de Oxygen. */

/* ---- Buscador (sustituye a Ajax Search Lite) */
.margot-busqueda {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2147483000;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  padding: 6px; max-height: 70vh; overflow: auto; text-align: left;
}
.margot-busqueda[hidden] { display: none; }
.margot-busqueda__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  color: #1a1a1a; text-decoration: none; font-family: Poppins, sans-serif; font-size: 13px;
}
.margot-busqueda__item:hover, .margot-busqueda__item:focus { background: #f6efe2; }
.margot-busqueda__item img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.margot-busqueda__item span { display: flex; flex-direction: column; line-height: 1.3; }
.margot-busqueda__item small { color: #8a6d3b; font-weight: 600; }
.margot-busqueda__vacio { margin: 0; padding: 10px; font: 13px Poppins, sans-serif; color: #666; }

/* ---- Reserva en la ficha (sustituye a WooCommerce Appointments) */
.margot-reserva { padding: 16px 20px 20px; }
.margot-reserva iframe { display: block; }
.margot-reserva__cargando, .margot-reserva__aviso { margin: 0 0 14px; font: 14px/1.5 Poppins, sans-serif; color: #444; }
.margot-reserva__boton {
  display: block; text-align: center; padding: 14px 18px; border-radius: 999px;
  background: linear-gradient(90deg, #e2b56b, #c99a4a); color: #fff !important; font: 600 14px Poppins, sans-serif;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
}
.margot-reserva__tel { display: block; margin-top: 10px; text-align: center; font: 13px Poppins, sans-serif; color: #555 !important; }

/* ---- Mapa de contacto (sustituye a WP Go Maps) */
.margot-mapa { display: block; width: 100%; min-height: 400px; height: 100%; border: 0; border-radius: inherit; }

/* ---- Formularios: estado de error y confirmación (WPForms ya no carga su JS) */
form[data-margot-form] input.wpforms-error, form[data-margot-form] select.wpforms-error { border-color: #d63637 !important; }
form[data-margot-form] em.wpforms-error { display: block; color: #d63637; font-size: 12px; font-style: normal; margin-top: 4px; }
.wpforms-confirmation-container-full {
  background: #e0ffc7; border: 1px solid #b4d39b; border-radius: 10px; padding: 15px 20px;
  font: 14px/1.5 Poppins, sans-serif; color: #333;
}
.wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* ---- WhatsApp: el plugin hacía visible la caja con JS */
.wa__popup_chat_box { visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.wa__popup_chat_box.wa__active { visibility: visible; opacity: 1; }


/* ---- Imágenes del contenido de las páginas (gracias, legales): en WordPress las limitaba
   al ancho una hoja de WooCommerce que ya no se carga. */
main.ct-inner-content p img, main.ct-inner-content figure img { max-width: 100%; height: auto; }


/* ---- Curvas invertidas (esquinas cóncavas) de la cabecera, el hero y las cajas negras.
   En Oxygen eran ::before/::after con curve.svg y curve-black.svg servidos desde
   dev.margotmedicinaestetica.com; ese dominio ya no existe y el 2026-09-30 se cambiaron
   por "none". Aquí vuelven con las mismas reglas y los SVG originales embebidos
   (copia de las reglas: ~/backups-claude/margot/universal.css.orig-20260930). */
.tab-dropdown:hover a.oxy-mega-dropdown_link::after {
  content: ''; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.999 0.0471192C19.9993 0.0471191 19.9997 0.0471191 20 0.0471191V20.0471L0 20.0471C0 20.0468 0 20.0465 0 20.0461C10.9523 19.9385 19.8914 10.9995 19.999 0.0471192Z' fill='white'/%3E%3C/svg%3E");
  position: absolute; right: 0; bottom: 0; transform: translateX(100%) rotate(90deg);
}
.box-top-title-hero-home::before {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.999 0.0471192C19.9993 0.0471191 19.9997 0.0471191 20 0.0471191V20.0471L0 20.0471C0 20.0468 0 20.0465 0 20.0461C10.9523 19.9385 19.8914 10.9995 19.999 0.0471192Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; left: 0; top: 0; transform: translateY(-100%) rotate(90deg);
}
.box-top-title-hero-home::after {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.999 0.0471192C19.9993 0.0471191 19.9997 0.0471191 20 0.0471191V20.0471L0 20.0471C0 20.0468 0 20.0465 0 20.0461C10.9523 19.9385 19.8914 10.9995 19.999 0.0471192Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; right: 0; bottom: 0; transform: translateX(100%) rotate(90deg);
}
.box-in-hero-home::after {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.999 0.0471192C19.9993 0.0471191 19.9997 0.0471191 20 0.0471191V20.0471L0 20.0471C0 20.0468 0 20.0465 0 20.0461C10.9523 19.9385 19.8914 10.9995 19.999 0.0471192Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; right: 0; bottom: 0; transform: translateX(100%) rotate(90deg);
}
.ctn-black::before {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.00157559 3.83961e-08C0.00105182 1.28448e-08 0.000528059 0 4.29153e-06 0L0 32L32 32C32 31.9995 32 31.999 32 31.9985C14.4763 31.8263 0.173768 17.5239 0.00157559 3.83961e-08Z' fill='%230C0C0C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; left: 0; top: 0; transform: translateY(-100%);
}
.ctn-black::after {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.00157559 3.83961e-08C0.00105182 1.28448e-08 0.000528059 0 4.29153e-06 0L0 32L32 32C32 31.9995 32 31.999 32 31.9985C14.4763 31.8263 0.173768 17.5239 0.00157559 3.83961e-08Z' fill='%230C0C0C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; right: 0; top: 0; transform: translateY(-100%) rotate(270deg);
}
.box-ofertas::before {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.00157559 3.83961e-08C0.00105182 1.28448e-08 0.000528059 0 4.29153e-06 0L0 32L32 32C32 31.9995 32 31.999 32 31.9985C14.4763 31.8263 0.173768 17.5239 0.00157559 3.83961e-08Z' fill='%230C0C0C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; left: 0; bottom: 0; transform: translateY(100%) rotate(90deg);
}
.box-ofertas::after {
  content: ''; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.00157559 3.83961e-08C0.00105182 1.28448e-08 0.000528059 0 4.29153e-06 0L0 32L32 32C32 31.9995 32 31.999 32 31.9985C14.4763 31.8263 0.173768 17.5239 0.00157559 3.83961e-08Z' fill='%230C0C0C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
  position: absolute; right: 0; bottom: 0; transform: translateY(100%) rotate(180deg);
}

/* ---- Tarjetas del blog: la foto va dentro de un <a> que no ocupaba la caja entera, así que
   en escritorio quedaba a 179 px dentro de una caja de 250 y asomaba el fondo gris debajo.
   El alto de la caja sale del flex, no de un height, así que un height:100% no resuelve:
   el enlace se ancla a los cuatro bordes de la caja. */
.box-img-card-blog { position: relative; }
.box-img-card-blog > a { position: absolute; inset: 0; display: block; }
.box-img-card-blog img.img-card-blog { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---- Selector de moneda (marcado de YayCurrency, estilo propio).
   Cerrado: píldora sobre la barra negra con bandera redonda, código y flecha fina.
   Abierto: tarjeta blanca con sombra suave; la moneda elegida lleva un check dorado. */
.yay-currency-custom-select-wrapper,
.yay-currency-custom-select-wrapper.small { width: auto; min-width: 0; font: 500 12px/1 Poppins, sans-serif; }
.yay-currency-custom-select__trigger,
.yay-currency-custom-select__trigger.small {
  height: 28px; gap: 8px; padding: 0 12px 0 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  transition: background .2s, border-color .2s;
}
.yay-currency-custom-select__trigger:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.yay-currency-custom-select.open .yay-currency-custom-select__trigger { border-color: #e2b56b; background: rgba(226, 181, 107, .12); }
.yay-currency-custom-selected-option { display: flex; align-items: center; gap: 8px; }
.yay-currency-custom-select__trigger .yay-currency-flag {
  width: 20px; height: 20px; margin: 0; border-radius: 50%; background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.yay-currency-selected-option { color: #fff; letter-spacing: .02em; white-space: nowrap; }
.yay-currency-selected-option small { color: rgba(255, 255, 255, .55); font-size: 11px; margin-left: 2px; }
.yay-currency-custom-arrow {
  position: static; width: 6px; height: 6px; margin: 0 0 3px 2px; border: solid rgba(255, 255, 255, .7);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s, margin .2s;
}
.yay-currency-custom-arrow::before, .yay-currency-custom-arrow::after { display: none !important; }
.yay-currency-custom-select.open .yay-currency-custom-arrow { transform: rotate(-135deg); margin: 3px 0 0 2px; }
.yay-currency-custom-loader {
  position: static; width: 12px; height: 12px; border: 1.5px solid rgba(255, 255, 255, .25); border-top-color: #e2b56b;
  border-radius: 50%; animation: margot-gira .7s linear infinite;
}
@keyframes margot-gira { to { transform: rotate(360deg); } }

.yay-currency-custom-options {
  top: calc(100% + 8px); left: 0 !important; right: auto; width: 240px; padding: 6px; z-index: 100000;
  background: #fff; border: 0; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s;
  max-height: none; overflow: visible;
}
.yay-currency-custom-select.open .yay-currency-custom-options { opacity: 1; visibility: visible; transform: none; }
.yay-currency-custom-option-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  color: #1d1a16; background: transparent; transition: background .15s;
}
.yay-currency-custom-option-row:hover { background: #f6efe2; }
.yay-currency-custom-option-row.selected { background: #faf5ec; }
.yay-currency-custom-option-row .yay-currency-flag {
  width: 24px; height: 24px; margin: 0; flex: none; border-radius: 50%; background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.yay-currency-custom-option, .yay-currency-custom-option.small { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 13px; line-height: 1.2; color: #1d1a16; }
.yay-currency-custom-option small { font-size: 11px; color: #8a7f72; letter-spacing: .02em; }
.yay-currency-custom-option-row.selected .yay-currency-custom-option { font-weight: 600; }
.yay-currency-custom-option-row.selected::after {
  content: ''; width: 5px; height: 10px; margin-right: 4px; border: solid #c99a4a; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
}
/* ajustes: el plugin fija anchos y márgenes con más especificidad */
.yay-currency-custom-select-wrapper.small { width: auto !important; }
.yay-currency-custom-select__trigger { justify-content: flex-start !important; }
.yay-currency-custom-select__trigger .yay-currency-flag, .yay-currency-custom-option-row .yay-currency-flag { margin: 0 !important; }
.yay-currency-selected-option { margin: 0 !important; padding: 0 !important; }
.yay-currency-custom-options { width: 230px !important; right: auto !important; }
.yay-currency-custom-option, .yay-currency-custom-option.small { margin: 0 !important; padding: 0 !important; white-space: nowrap; }
.yay-currency-custom-option-row:hover { background: #f3e6cc !important; }
.yay-currency-custom-options { border-radius: 14px !important; padding: 6px !important; border: 0 !important; }
.yay-currency-custom-selected-option { flex: none !important; width: auto !important; padding: 0 !important; }
.yay-currency-custom-arrow { margin-left: 0 !important; }
.yay-currency-custom-select.open .yay-currency-custom-arrow { margin-left: 0 !important; }
/* la bandera con el mismo aire arriba, abajo e izquierda: (28 − 2 de borde − 20) / 2 = 3 px */
.yay-currency-custom-select__trigger, .yay-currency-custom-select__trigger.small { padding: 0 12px 0 3px !important; }

/* ---- Buscador: enlace al archivo de resultados, fila activa con el teclado y aviso de resultados */
.margot-busqueda__item.is-activo { background: #f6efe2; }
.margot-busqueda__todos {
  display: flex; justify-content: center; gap: 6px; margin-top: 4px; padding: 10px; border-top: 1px solid #f0e6d6;
  border-radius: 0 0 10px 10px; color: #8a6d3b !important; font: 600 12px Poppins, sans-serif; text-decoration: none;
}
.margot-busqueda__todos:hover { background: #f6efe2; }
.margot-resultados { width: 100%; margin: 0 0 18px; text-align: center; font: 14px/1.5 Poppins, sans-serif; color: #5b5248; }
.margot-resultados a { color: #8a6d3b; font-weight: 600; }

/* ---- página de tablet para consentimientos (/tablet-consentimientos/, sin indexar) */
.margot-tablet { max-width: 720px; margin: 40px auto 80px; padding: 0 16px; }
.margot-tablet h1 { font-size: 34px; margin: 0 0 12px; }
.margot-tablet__intro { color: #555; margin: 0 0 24px; line-height: 1.5; }
.margot-tablet .wpforms-field { margin-bottom: 18px; }
.margot-tablet .wpforms-field-label { display: block; font-weight: 600; margin-bottom: 6px; }
.margot-tablet input, .margot-tablet select { width: 100%; font-size: 18px; padding: 12px 14px; border: 1px solid #d8cdb9; border-radius: 12px; background: #fff; box-sizing: border-box; }
.margot-tablet__fila { display: flex; gap: 12px; }
.margot-tablet .wpforms-required-label { color: #b07d32; }
.margot-tablet .wpforms-submit { width: 100%; font-size: 18px; padding: 16px; border: 0; border-radius: 999px; background: #b07d32; color: #fff; font-weight: 600; cursor: pointer; }
.margot-tablet .wpforms-submit:disabled { opacity: .6; }
.margot-tablet em.wpforms-error { color: #c0392b; font-style: normal; font-size: 14px; }
.margot-tablet .wpforms-confirmation-container-full { font-size: 18px; padding: 24px; background: #faf6ef; border-radius: 16px; }
@media (max-width: 600px) { .margot-tablet__fila { flex-direction: column; } }

/* Textos de entradas: URLs largas en enlaces ensanchaban el bloque en móvil (p. ej. /hifu-facial-y-corporal/ a 390px) */
.oxy-stock-content-styles, .oxy-stock-content-styles * { overflow-wrap: anywhere; }
.oxy-stock-content-styles { display: block; max-width: 100%; }

/* ---- Panel de reserva de la ficha (tipo Viator) + ventana con el calendario de GHL */
.sticky-right-product:has(.margot-panel) .top-form-product .code-price { display: none !important; }
.margot-panel-caja { padding: 0 !important; }
.margot-panel { flex: 1 1 100%; width: 100%; box-sizing: border-box; padding: 22px 22px 20px; font-family: Poppins, sans-serif; color: #0c0c0c; }
.margot-panel__nombre { margin: 0 0 14px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.margot-panel__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; }
.margot-panel__desde { width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #777; }
.margot-panel__importe { font-size: 30px; font-weight: 700; line-height: 1; }
.margot-panel__regular { font-size: 16px; color: #999; }
.margot-panel__ahorro { font-size: 12px; font-weight: 600; color: #6b4a14; background: #f6eedf; border-radius: 999px; padding: 3px 10px; }
.margot-panel__datos, .margot-panel__garantias { list-style: none; margin: 0; padding: 0; }
.margot-panel__datos { border-top: 1px solid #ececec; margin-bottom: 18px; }
.margot-panel__datos li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ececec; font-size: 14px; font-weight: 500; }
.margot-panel__datos small { display: block; font-size: 11px; font-weight: 400; color: #888; text-transform: uppercase; letter-spacing: .05em; }
.margot-panel__icono { flex: none; color: #b07d32; }
.margot-panel__boton, .margot-barra__boton {
  display: block; width: 100%; box-sizing: border-box; text-align: center; cursor: pointer; user-select: none;
  background: #dca756; color: #0c0c0c !important; font: 600 16px/1 Poppins, sans-serif; letter-spacing: .02em;
  padding: 17px 20px; border-radius: 999px; text-decoration: none; border: 0;
  box-shadow: 0 8px 20px rgba(176, 125, 50, .28); transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.margot-panel__boton:hover, .margot-barra__boton:hover { background: #e2b366; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(176, 125, 50, .34); }
.margot-panel__boton:focus-visible, .margot-barra__boton:focus-visible, .margot-modal__cerrar:focus-visible { outline: 3px solid #0c0c0c; outline-offset: 3px; }
.margot-panel__garantias { margin-top: 14px; }
.margot-panel__garantias li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #444; padding: 5px 0; }
.margot-panel__garantias .margot-panel__icono { width: 18px; height: 18px; }

.margot-modal__estado { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.margot-modal {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; font-family: Poppins, sans-serif;
}
.margot-modal__estado:checked + .margot-modal { visibility: visible; opacity: 1; transition: opacity .2s ease; }
body:has(.margot-modal__estado:checked) { overflow: hidden; }
.margot-modal__fondo { position: absolute; inset: 0; background: rgba(12, 12, 12, .62); cursor: pointer; }
.margot-modal__caja {
  position: relative; display: flex; flex-direction: column; width: min(1120px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); /* ≥ ~1000 px de iframe el widget de GHL pasa a 2 columnas */
  background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  transform: translateY(12px); transition: transform .2s ease;
}
.margot-modal__estado:checked + .margot-modal .margot-modal__caja { transform: none; }
.margot-modal__titulo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* solo para lectores de pantalla */
.margot-modal__cerrar {
  position: absolute; z-index: 3; top: 10px; right: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); font-size: 24px; line-height: 1; cursor: pointer; color: #0c0c0c;
}
.margot-modal__cerrar:hover { background: #f1ece3; }
.margot-modal__aviso { position: absolute; z-index: 3; left: 24px; bottom: 16px; margin: 0; font-size: 12px; line-height: 1.3; color: #6b6b6b; pointer-events: none; }
.margot-modal__cuerpo { position: relative; flex: 1; min-height: 0; background: #fff; overflow: hidden; }
.margot-modal__cuerpo iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
/* Con el widget a 2 columnas (iframe ≥ ~992 px) su caja mide 700 px y deja 64 px en blanco arriba y 16 abajo: se recortan */
@media (min-width: 1024px) {
  /* El documento del widget mide 780 px y no hace scroll (solo lo hace su lista interna). En ventanas bajas
     margot-ghl.js pone --margot-k < 1 y el iframe se reduce con scale para que la caja entera quepa */
  .margot-modal__caja { height: calc(702px * var(--margot-k, 1)); }
  .margot-modal__cuerpo iframe { width: calc(100% / var(--margot-k, 1)); height: 780px; margin-top: -64px; transform-origin: 0 0; transform: scale(var(--margot-k, 1)); }
}
/* En pantallas estrechas el widget empieza arriba del todo: una banda blanca fina aloja la × y el aviso de pago */
@media (max-width: 1023px) {
  .margot-modal__cuerpo { margin-top: 48px; }
  .margot-modal__cerrar { top: 6px; }
  .margot-modal__aviso { top: 16px; bottom: auto; left: 16px; }
}
.margot-modal__cargando { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #777; }

.margot-barra { display: none; }
@media (max-width: 767px) {
  .margot-modal__caja { width: 100vw; height: 100%; height: min(790px, 100dvh); border-radius: 16px; } /* el widget móvil mide 741 px de alto + 48 de banda: no sobra hueco */
  .margot-barra {
    display: flex; align-items: center; gap: 14px; position: fixed; left: 8px; right: 8px; bottom: 84px; z-index: 9990;
    background: #fff; border-radius: 18px; padding: 10px 10px 10px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-family: Poppins, sans-serif;
  }
  .margot-barra__precio { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.3; }
  .margot-barra__precio strong { font-size: 19px; color: #0c0c0c; }
  .margot-barra__precio del { font-size: 13px; color: #999; }
  .margot-barra__precio span { width: 100%; font-size: 12px; color: #777; }
  .margot-barra__boton { width: auto; flex: none; padding: 14px 26px; font-size: 15px; box-shadow: none; }
}

/* Páginas legales (cookies, condiciones, aviso legal): el contenido de WordPress va en un
   .ct-span con la utilidad .w-100, que en Oxygen es display:flex en fila → cada párrafo
   acababa en una columna estrecha y la página se desbordaba miles de px a lo ancho.
   (Más específica que la utilidad .w-100:not(.ct-section):not(.oxy-easy-posts).) */
.ct-span.oxy-stock-content-styles.w-100:not(.ct-section) { display: block; }
/* Tablas legales: con overflow-wrap:anywhere la primera columna se partía letra a letra («Res po nsa ble») */
.oxy-stock-content-styles td, .oxy-stock-content-styles th { overflow-wrap: break-word; word-break: normal; }
.oxy-stock-content-styles td:first-child { min-width: 7.5em; }
.oxy-stock-content-styles table { width: 100%; border-collapse: collapse; }
@media (max-width: 767px) { .oxy-stock-content-styles table { display: block; overflow-x: auto; } }

/* Listado del blog (sustituye a la rejilla de productos que pintaba la plantilla Shop) */
.margot-blog .ct-section-inner-wrap { max-width: 1240px; margin: 0 auto; padding: 48px 20px 80px; }
.margot-blog__lista { display: flex; flex-wrap: wrap; gap: 16px; }
.margot-blog .title-card-blog { font-size: 18px; line-height: 1.3; margin: 6px 0; }

/* FAQ: botón «Ver más preguntas» con aire lateral (OxyExtras solo daba padding vertical) */
.oxy-read-more-link { padding-left: 20px !important; padding-right: 20px !important; font-size: 14px; font-weight: 500; }
/* Listas numeradas dentro de las respuestas: los números quedaban recortados por overflow:hidden */
.oxel_accordion__content ol, .oxel_accordion__content ul { padding-left: 1.4em; margin-left: 0; }

/* ---- Aviso de cookies (margot-cookies.js). Estilo de la web: tarjeta blanca, dorado, Poppins */
.margot-cookies[hidden] { display: none !important; }
/* Con la ventana de reserva abierta el aviso de cookies tapaba el calendario: se esconde y vuelve al cerrar */
body:has(.margot-modal__estado:checked) .margot-cookies { display: none; }
.margot-cookies { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; width: min(540px, calc(100vw - 32px)); font-family: Poppins, sans-serif; }
.margot-cookies__caja { background: #fff; color: #1d1d1d; border-radius: 20px; padding: 22px 24px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .22); border: 1px solid #f1e4cc; }
.margot-cookies__titulo { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #0c0c0c; }
.margot-cookies__texto { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #444; }
.margot-cookies__ajustes { display: grid; gap: 10px; margin: 0 0 14px; }
.margot-cookies__ajustes[hidden] { display: none; }
.margot-cookies__opcion { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #444; padding: 10px 12px; background: #faf6ef; border-radius: 12px; cursor: pointer; }
.margot-cookies__opcion strong { display: block; color: #0c0c0c; }
.margot-cookies__opcion input { margin-top: 3px; width: 18px; height: 18px; accent-color: #b8893e; flex: none; }
.margot-cookies__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.margot-cookies__boton { flex: 1 1 120px; padding: 12px 16px; border-radius: 999px; border: 1px solid #e4d5ba; background: #fff; color: #1d1d1d; font: 600 14px/1.2 Poppins, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.margot-cookies__boton:hover { background: #faf6ef; border-color: #dca756; }
.margot-cookies__boton--principal { background: #dca756; border-color: #dca756; color: #0c0c0c; }
.margot-cookies__boton--principal:hover { background: #cf9844; border-color: #cf9844; }
.margot-cookies__boton[hidden] { display: none; }
.margot-cookies__boton:focus-visible, .margot-cookies a:focus-visible { outline: 2px solid #0c0c0c; outline-offset: 2px; }
.margot-cookies__enlaces { margin: 12px 0 0; font-size: 12px; text-align: center; color: #777; }
.margot-cookies__enlaces a { color: #8a6424; text-decoration: underline; }
@media (max-width: 767px) {
  .margot-cookies { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .margot-cookies__caja { padding: 18px 16px 12px; max-height: calc(100vh - 16px); overflow: auto; }
  .margot-cookies__texto { font-size: 13px; }
}

/* Contenido de terceros bloqueado hasta aceptar (mapas y vídeos) */
.margot-externo { position: relative; width: 100%; height: 100%; }
.margot-externo--mapa { min-height: 400px; }
.margot-externo > iframe:not([src]) { background: #f3eee6; }
.margot-externo__aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: #f6efe3; border-radius: inherit; font-family: Poppins, sans-serif; }
.margot-externo__aviso p { margin: 0; max-width: 360px; font-size: 14px; line-height: 1.5; color: #444; }
.margot-externo__aviso .margot-cookies__boton { flex: none; }
.margot-externo__aviso a { font-size: 12px; color: #8a6424; text-decoration: underline; }
.margot-externo--visible .margot-externo__aviso { display: none; }

/* Ficha de producto: el formulario «Infórmate sin compromiso» (wpforms) se quedaba al ancho de su
   contenido (274 px de 332 a 390) porque el shortcode es un flex en fila: que ocupe toda la caja. */
.form-product, .form-product .wpforms-container, .form-product form.wpforms-form { width: 100%; max-width: none; box-sizing: border-box; }
.form-product .wpforms-container { margin-left: 0; margin-right: 0; }