/* =====================================================================
   componentes.css — SOLO lo que Elementor no puede expresar.
   Todo lo demas (colores, tipografias, espaciados, radios, sombras) vive
   en los ajustes globales y en los propios widgets, para que el cliente
   lo pueda cambiar desde el editor.

   Lo que hay aqui y por que:
     1. Degradados de TRES paradas. El control de Elementor solo admite dos.
     2. Estilos de un hijo cuando el raton esta sobre el padre. Elementor no
        tiene selectores de descendiente.
     3. Posiciones absolutas y opacidades que no tienen control propio.
     4. El corte de 1280px del menu, que no es un breakpoint de Elementor.
   ===================================================================== */

/* ── 1. Degradados de tres paradas ─────────────────────────────── */

/* Barra superior: linear-gradient(90deg,#010101 0%,#0d3a4a 60%,#1991B9 100%) */
.wc-barra-superior {
  background-image: linear-gradient(90deg, #010101 0%, #0d3a4a 60%, #1991b9 100%) !important;
}

/* Cabecera de paginas internas:
   linear-gradient(100deg,#010101 0%,#0d3a4a 55%,#1991B9 100%) */
.wc-cabecera {
  background-image: linear-gradient(100deg, #010101 0%, #0d3a4a 55%, #1991b9 100%) !important;
}

/* Velo del hero: cinco paradas, de negro opaco a casi transparente.
   A partir de 991px el React lo cambia por un velo plano. */
.wc-hero > .elementor-background-overlay,
.wc-hero::before {
  background-image: linear-gradient(
    90deg,
    #010101 0%,
    #010101 28%,
    rgba(1, 1, 1, 0.82) 45%,
    rgba(1, 1, 1, 0.25) 70%,
    rgba(1, 1, 1, 0.1) 100%
  ) !important;
}
@media (max-width: 991px) {
  .wc-hero > .elementor-background-overlay,
  .wc-hero::before {
    background-image: none !important;
    background-color: rgba(1, 1, 1, 0.78) !important;
  }
}

/* ── 2. Estados de los hijos al pasar el raton por la tarjeta ──── */

/* Tarjeta de servicio. En reposo es BLANCA con el texto oscuro; al pasar el
   raton, el fondo se vuelve negro (eso lo hace el propio contenedor, desde el
   panel) y con el cambian sus hijos: titulo a blanco, texto a blanco al 75 % y
   el circulo del icono de gris a azul con el glifo en blanco. Elementor no
   tiene selectores de descendiente, asi que los hijos van aqui.
   El boton NO cambia: en el React tampoco.                                   */
.wc-tarjeta-servicio .wc-tarjeta-servicio-titulo .elementor-heading-title,
.wc-tarjeta-servicio .wc-tarjeta-servicio-texto,
.wc-tarjeta-servicio .wc-tarjeta-servicio-icono .elementor-icon,
.wc-tarjeta-servicio .wc-tarjeta-servicio-icono .elementor-icon svg {
  transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out,
    fill 0.4s ease-in-out;
}
.wc-tarjeta-servicio:hover .wc-tarjeta-servicio-titulo .elementor-heading-title,
.wc-tarjeta-servicio:hover .wc-tarjeta-servicio-titulo .elementor-heading-title a {
  color: #ffffff !important;
}
/* Y si el raton esta justo encima del titulo, este pasa a azul: el React tiene
   las dos reglas (`.service-card:hover .box-title` y `.box-title a:hover`). */
.wc-tarjeta-servicio .wc-tarjeta-servicio-titulo .elementor-heading-title a:hover {
  color: var(--e-global-color-primario) !important;
}
.wc-tarjeta-servicio:hover .wc-tarjeta-servicio-texto {
  color: rgba(255, 255, 255, 0.75) !important;
}
.wc-tarjeta-servicio:hover .wc-tarjeta-servicio-icono .elementor-icon {
  background-color: #1991b9 !important;
}
.wc-tarjeta-servicio:hover .wc-tarjeta-servicio-icono .elementor-icon svg {
  fill: #ffffff !important;
}

/* Paso de la metodologia: se levanta 4px. */
.wc-metodo-paso {
  transition: transform 0.3s;
}
.wc-metodo-paso:hover {
  transform: translateY(-4px);
}

/* Tarjeta de paso del control externo: borde azul y sombra al hover. */
.wc-ce-card {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.wc-ce-card:hover {
  border-color: #1991b9 !important;
  box-shadow: 0 6px 22px rgba(25, 145, 185, 0.12) !important;
}

/* Enlace del socio estrategico y accesos del panel. */
.wc-socio {
  transition: border-color 0.3s;
}
.wc-socio:hover {
  border-color: #1991b9 !important;
}

/* ── 3. Posiciones y opacidades sin control propio ────────────── */

/* Icono decorativo de la tarjeta destacada: arriba a la derecha, al 18 %. */
.wc-destacada {
  position: relative;
  overflow: hidden;
}
.wc-destacada .wc-destacada-icono {
  position: absolute;
  top: 22px;
  right: 22px;
  opacity: 0.18;
  pointer-events: none;
}
.wc-destacada .wc-destacada-titulo {
  padding-right: 60px;
}

/* Numero del paso de la metodologia: circulo azul de 46px. */
.wc-metodo-n .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1991b9;
}

/* Numero de «Rigor cientifico y calidad»: circulo con borde azul de 50px. */
.wc-calidad-n .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #1991b9;
  background: #ffffff;
}

/* Icono en circulo de las tarjetas de publico: 56px, fondo azul. */
.wc-publico-icono .elementor-icon {
  width: 56px;
  height: 56px;
}

/* Checklist en dos columnas (checklist style2 list-two-column). */
@media (min-width: 576px) {
  .wc-checklist-2col .elementor-icon-list-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Logo: el nombre lleva la segunda parte en azul, como en el React. */
.wc-logo-nombre .elementor-heading-title span {
  color: #1991b9;
}
.wc-logo-blanco .wc-logo-nombre .elementor-heading-title span {
  color: #1991b9;
}
.wc-logo {
  text-decoration: none;
}

/* Titulo del hero: la palabra resaltada va en azul. */
.wc-hero-titulo .elementor-heading-title span {
  color: #1991b9;
}

/* Imagen de la ficha de servicio: alto fijo y recorte, como el React. */
.wc-ficha-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

/* Portada de las paginas de area: alto maximo y recorte. */
.wc-portada img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 20px;
}

/* Mapa de contacto. */
.wc-mapa iframe,
.wc-mapa .elementor-custom-embed,
.wc-mapa > div {
  height: 420px !important;
}

/* Anclas: el header es fijo, asi que el destino del salto se baja 140px. */
[id] {
  scroll-margin-top: 140px;
}

/* ── 4. El corte de 1280px del menu ────────────────────────────
   El React esconde el menu de escritorio por debajo de 1280px y usa el
   drawer, aunque de 992 a 1279 hubiera sitio. No es un breakpoint de
   Elementor (el mas cercano es 1199), asi que va a mano.                 */
@media (max-width: 1279px) {
  .wc-menu-escritorio {
    display: none !important;
  }
  .wc-menu-movil {
    display: flex !important;
  }
}
@media (min-width: 1280px) {
  .wc-menu-movil {
    display: none !important;
  }
}

/* Escala del menu principal por ancho, como en wc.css. */
@media (min-width: 1800px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 14px; }
}
@media (min-width: 1500px) and (max-width: 1799px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 13px; }
}
@media (min-width: 1280px) and (max-width: 1499px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 12px; }
}

/* Tercer nivel del menu: anidado dentro del mismo panel, con borde
   izquierdo y sin flecha, como el esquema aprobado del React. */
.wc-menu-escritorio .elementor-nav-menu .sub-menu .sub-menu {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 2px 0 6px 14px !important;
  margin: 2px 0 4px 12px !important;
  border-left: 1px solid #d8dde1;
}
.wc-menu-escritorio .elementor-nav-menu .sub-menu .sub-menu a {
  font-size: 14px !important;
  line-height: 26px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ── 5. Boton flotante de WhatsApp y volver arriba ────────────── */

button.wc-arriba {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 13, 68, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  padding: 0;
}
.wc-arriba.visible {
  opacity: 1;
  visibility: visible;
}
.wc-arriba svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wc-arriba .wc-arriba-pista {
  fill: none;
  stroke: rgba(25, 145, 185, 0.18);
  stroke-width: 4;
}
.wc-arriba .wc-arriba-progreso {
  fill: none;
  stroke: #1991b9;
  stroke-width: 4;
  transition: stroke-dashoffset 10ms linear;
}
/* La flecha es el glifo real de Font Awesome (\f062), incrustado. */
button.wc-arriba::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20fill%3D%22%231991B9%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M7%20232%20175%20408Q182%20416%20192%20416Q202%20416%20209%20409L377%20233Q391%20215%20377%20199Q359%20185%20343%20199L216%20332V-8Q214%20-29%20193%20-31Q183%20-31%20176%20-25Q168%20-18%20168%20-8V332L41%20199Q25%20185%207%20199Q-7%20215%207%20232Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
  background-size: 20px 20px;
}
@media (max-width: 767px) {
  .wc-arriba {
    right: 16px;
    bottom: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ── 6. Paginas que genera WooCommerce ────────────────────────
   Carrito, pago y mi cuenta salen con la tipografia del plugin. Se les
   da la del proyecto para que no canten (regla 6.3).                     */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
  font-family: "Outfit", sans-serif;
  color: #010101;
  text-transform: none;
}
.woocommerce, .woocommerce-page,
.woocommerce input, .woocommerce select, .woocommerce textarea,
.woocommerce table, .woocommerce label {
  font-family: "DM Sans", sans-serif;
  color: #5f6b78;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: #1991b9 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  padding: 16px 28px !important;
  border: none !important;
  text-shadow: none !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: #010101 !important;
  color: #ffffff !important;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: #1991b9;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: #1991b9;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text {
  background: #f5f7fa;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 18px;
  min-height: 54px;
}
.woocommerce table.shop_table,
.woocommerce-checkout #order_review {
  border-radius: 20px;
  border-color: #d8dde1;
}
.woocommerce .price,
.woocommerce span.amount {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  color: #010101;
}

/* Etiqueta de formato del producto, como el .wc-product-tag del React. */
.wc-producto-etiqueta .elementor-heading-title,
.wc-producto-etiqueta {
  display: inline-block;
  background: #1991b9;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 99px;
}

/* ── 7. Nada de scroll horizontal ─────────────────────────────
   Red de seguridad: ninguna imagen ni tabla puede empujar la pagina.
   No es un overflow:hidden que tape el problema — las tablas y los
   diagramas siguen teniendo su propio scroll.                            */
img,
video,
iframe {
  max-width: 100%;
}
.woocommerce table.shop_table_responsive,
.woocommerce table.cart {
  display: block;
  overflow-x: auto;
}

/* El menu de 7 items largos en una sola linea: el ul de Elementor envuelve
   por omision y el menu del React nunca se parte. */
.wc-menu-escritorio .elementor-nav-menu {
  flex-wrap: nowrap !important;
}
.wc-menu-escritorio .elementor-nav-menu > li > a {
  white-space: nowrap;
}

/* La barra del menu va a ancho completo, con un tope a 1620px a partir de
   1700px de pantalla, igual que el React. */
@media (min-width: 1700px) {
  .wc-barra-menu > .e-con-inner {
    max-width: 1620px;
    margin-inline: auto;
  }
}

/* ── 8. Ancho automatico de contenedores ───────────────────────
   Elementor le pone `--width:100%` a todo contenedor interno y su control
   de ancho es un slider: no hay forma de pedir `auto` desde el panel. En
   una fila flex eso hace que un bloque pequeno (el logo, un grupo de
   botones) se lleve el ancho entero y empuje a los hermanos fuera de la
   pantalla. `el_ancho_auto()` marca esos contenedores con esta clase. */
.e-con.wc-auto,
.elementor-element.wc-auto {
  --width: auto;
  width: auto;
  min-width: 0;
}

/* El lema del logo solo aparece por encima de 1700px: entre 992 y 1699 el
   React lo esconde y baja el nombre a 20px, que es lo que deja sitio al menu
   de 7 items. Son dos cortes que Elementor no tiene (1699 y 1700). */
@media (min-width: 992px) and (max-width: 1699px) {
  .wc-barra-menu .wc-logo-lema {
    display: none !important;
  }
  .wc-barra-menu .wc-logo-nombre .elementor-heading-title {
    font-size: 20px !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .wc-barra-menu .wc-logo-nombre .elementor-heading-title {
    font-size: 17px !important;
  }
  .wc-barra-menu .wc-logo-marca img {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── 9. Cabecera en movil sin scroll horizontal ────────────────
   El React deja el nombre del logo en `white-space:nowrap`, y a 390px la
   suma de logo + botones se sale: su propia pagina tiene scroll horizontal
   ahi. Aqui no se puede entregar asi (punto 12.3), asi que por debajo de
   576px el nombre puede partirse en dos lineas y el logo se limita. Es una
   desviacion deliberada respecto al React, anotada en analisis/DIFF.md.     */
@media (max-width: 575px) {
  .wc-barra-menu .wc-logo {
    max-width: calc(100% - 150px);
  }
  .wc-barra-menu .wc-logo-nombre .elementor-heading-title {
    font-size: 17px !important;
    line-height: 1.2;
    white-space: normal;
  }
  .wc-barra-menu .wc-logo-marca img {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── 10. Bloque de «mensaje enviado» del formulario ────────────
   El React no pone un aviso DEBAJO del formulario: cuando el envio sale bien
   reemplaza el formulario entero por un titulo y un parrafo
   (Widgets.tsx:151-156). El widget Form siempre anade su aviso al final del
   <form>, asi que el texto sale del propio ajuste del widget —editable desde
   el panel— y aqui solo se esconde lo demas y se le da la pinta del React.
   Elementor pinta su aviso en verde y con un icono de tic que el React no
   tiene: los dos se quitan.                                                  */
.elementor-form.wc-form-enviado > *:not(.elementor-message-success) {
  display: none;
}
.elementor-form .elementor-message-success {
  color: inherit;
  font-size: inherit;
}
.elementor-form .elementor-message-success::before {
  content: none;
}
/* .appointment-form .form-title del React: centrado, 600, 27px de aire. */
.elementor-form .elementor-message-success .wc-exito-titulo {
  margin: -0.26em 0 27px;
  text-align: center;
  font-family: var(--e-global-typography-titulos-font-family), sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.333;
  color: var(--e-global-color-negro);
}
.elementor-form .elementor-message-success .wc-exito-texto {
  margin: 0;
  font-family: var(--e-global-typography-cuerpo-font-family), sans-serif;
  color: var(--e-global-color-texto);
}

/* ── 11. Encabezados de bloque del libro de reclamaciones ──────
   Van dentro del formulario, como campo HTML: el widget Form no tiene control
   de tipografia para ese campo, asi que el h3 se quedaba con el tamano de h3
   del sitio (36px) cuando el React lo pinta a 22px/700.                      */
/* Va con dos clases porque el kit de Elementor pinta sus encabezados con
   `.elementor-kit-N h3`, que le gana a una sola clase.                        */
.elementor-widget-form .wc-form-bloque {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--e-global-color-negro);
  margin: 24px 0 8px;
}

/* ── 12. Banda decorativa detras del logo de la cabecera ───────
   El React la pinta con un div dentro del bloque del logo: 2000px de ancho,
   `right:-26px`, por detras del logo y con el borde derecho cortado en
   diagonal 42px. Ni el ancho fuera del bloque ni el clip-path tienen control
   en Elementor; la imagen si, y sigue saliendo del panel.                    */
.wc-barra-menu .wc-logo {
  position: relative;
}
.wc-barra-menu .wc-logo-fondo {
  position: absolute;
  /* La banda cubre TODA la altura de la barra, no solo la del logo: por eso
     se sale hacia arriba y hacia abajo el relleno de la barra (14px, 12px en
     movil), igual que en el React, donde el bloque del logo mide 100px.      */
  top: -14px;
  right: -26px;
  height: calc(100% + 28px);
  width: 2000px;
  min-height: 0;
  padding: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
}
@media (max-width: 1199px) {
  .wc-barra-menu .wc-logo-fondo {
    right: -15px;
  }
}
@media (max-width: 575px) {
  .wc-barra-menu .wc-logo-fondo {
    right: -60px;
    top: -12px;
    height: calc(100% + 24px);
  }
}

/* ── 13. Botones redondos de la cabecera ───────────────────────
   En la vista «framed» de Elementor, un solo control pinta el glifo Y el
   borde, y el React los tiene distintos: glifo negro con borde gris claro.
   Al pasar el raton, los dos pasan a azul, y eso si lo hace el propio widget. */
.wc-boton-icono .elementor-icon {
  border-color: var(--e-global-color-borde);
}
.wc-boton-icono .elementor-icon:hover {
  border-color: var(--e-global-color-primario);
}

/* ── 14. Cortes del menu que Elementor no tiene ────────────────
   El React escala el menu principal en CINCO tramos (1100, 1300, 1500 y 1800),
   y ninguno es un breakpoint de Elementor. Se replican tal cual, tamano y
   separacion, porque de ellos depende que los siete items quepan: con la
   escala de Elementor a secas, a 1280px el menu se salia 95px de la pantalla.

   Van con !important porque el selector que genera Elementor para la
   tipografia del widget y para la separacion de los items es mas especifico
   que cualquiera razonable.

   El boton del panel de informacion sale a partir de 1700px, que tampoco es un
   breakpoint de Elementor.                                                    */
@media (max-width: 1699px) {
  .wc-barra-menu .wc-solo-xxl {
    display: none !important;
  }
}
@media (min-width: 1800px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 14px !important; }
  .wc-menu-escritorio .elementor-nav-menu > li { margin: 0 11px 0 0 !important; }
}
@media (min-width: 1500px) and (max-width: 1799px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 13px !important; }
  .wc-menu-escritorio .elementor-nav-menu > li { margin: 0 8px 0 0 !important; }
}
@media (min-width: 1300px) and (max-width: 1499px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 12px !important; }
  .wc-menu-escritorio .elementor-nav-menu > li { margin: 0 6px 0 0 !important; }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 11px !important; }
  .wc-menu-escritorio .elementor-nav-menu > li { margin: 0 5px 0 0 !important; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .wc-menu-escritorio .elementor-nav-menu > li > a { font-size: 10.5px !important; }
  .wc-menu-escritorio .elementor-nav-menu > li { margin: 0 4px 0 0 !important; }
}

/* Los botones redondos bajan a 40px por debajo de 1400px. El control
   `icon_padding` del widget Icon NO es responsive (Elementor lo registra con
   add_control, no con add_responsive_control): los valores por dispositivo se
   guardan en el JSON, no generan ni una media query, y los botones se quedaban
   a 56px en movil, sacando la cabecera 12px fuera de la pantalla.            */
@media (max-width: 1399px) {
  .wc-boton-icono .elementor-icon {
    /* !important: el selector de Elementor lleva el id del documento y el del
       elemento, y gana a cualquier clase. */
    padding: 9px !important;
  }
}

/* ── 15. Iconos y forma de los campos del formulario ───────────
   El React pone un icono a la derecha de cada campo (`<i class="fal fa-user">`
   y companyia) y le da a los campos forma de pastilla, sin borde. El widget
   Form no tiene control de icono por campo, asi que los iconos van aqui como
   data-URI: son los MISMOS SVG de assets-origen/iconos que usa el resto del
   sitio, incrustados para que no dependan de la ruta de subida (que lleva el
   ano y el mes y cambia al reconstruir en otro mes).
   El resto de la apariencia (fondo, radio, color del texto) sale de los
   ajustes del widget, editables desde el panel.                              */
.elementor-form .elementor-field-textual {
  height: 56px;
  padding: 0 45px 0 25px;
}
.elementor-form textarea.elementor-field-textual {
  height: 154px;
  padding: 16px 45px 17px 25px;
}
.elementor-form .elementor-field-group {
  position: relative;
}
.elementor-form .elementor-field-textual {
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px 16px;
}
.elementor-form .elementor-field-group textarea.elementor-field-textual {
  background-position: right 20px top 19px;
}
.elementor-form .elementor-field-group-nombre .elementor-field-textual {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22%235F6B78%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M224%20192Q278%20193%20315%20229Q351%20266%20352%20320Q351%20374%20315%20411Q278%20447%20224%20448Q170%20447%20133%20411Q97%20374%2096%20320Q97%20266%20133%20229Q170%20193%20224%20192ZM224%20416Q265%20415%20292%20388Q319%20361%20320%20320Q319%20279%20292%20252Q265%20225%20224%20224Q183%20225%20156%20252Q129%20279%20128%20320Q129%20361%20156%20388Q183%20415%20224%20416ZM275%20144H173Q100%20142%2051%2093Q2%2044%200%20-29Q0%20-44%2010%20-54Q20%20-64%2035%20-64H413Q428%20-64%20438%20-54Q448%20-44%20448%20-29Q446%2044%20397%2093Q348%20142%20275%20144ZM413%20-32H35Q32%20-32%2032%20-29Q34%2031%2073%2071Q113%20110%20173%20112H275Q335%20110%20375%2071Q414%2031%20416%20-29Q416%20-32%20413%20-32Z%22%2F%3E%3C%2Fsvg%3E");
}
.elementor-form .elementor-field-group-email .elementor-field-textual {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%235F6B78%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M448%20384H64Q37%20383%2019%20365Q1%20347%200%20320V64Q1%2037%2019%2019Q37%201%2064%200H448Q475%201%20493%2019Q511%2037%20512%2064V320Q511%20347%20493%20365Q475%20383%20448%20384ZM64%20352H448Q462%20352%20471%20343Q480%20334%20480%20320V284L285%20138Q272%20128%20256%20128Q240%20128%20227%20138L32%20284V320Q32%20334%2041%20343Q50%20352%2064%20352ZM480%2064Q480%2050%20471%2041Q462%2032%20448%2032H64Q50%2032%2041%2041Q32%2050%2032%2064V245L208%20112Q230%2096%20256%2096Q282%2096%20304%20112L480%20245V64Z%22%2F%3E%3C%2Fsvg%3E");
}
.elementor-form .elementor-field-group-telefono .elementor-field-textual {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%235F6B78%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M485%20117Q485%20117%20485%20117L383%20161Q352%20172%20330%20148L297%20108Q216%20152%20172%20233L212%20266Q236%20288%20225%20319L181%20421Q174%20436%20160%20443Q146%20450%20130%20447L35%20425Q19%20421%2010%20409Q0%20397%200%20381Q1%20257%2061%20157Q120%2056%20221%20-3Q321%20-63%20445%20-64Q461%20-64%20473%20-54Q485%20-45%20489%20-29L511%2066Q514%2082%20507%2096Q500%20110%20485%20117ZM458%20-22Q455%20-31%20445%20-32Q330%20-31%20237%2024Q144%2080%2088%20173Q33%20266%2032%20381Q33%20391%2042%20394L137%20416Q138%20416%20140%20416Q148%20416%20152%20408L196%20306Q199%20297%20192%20291L141%20249Q132%20241%20137%20230Q162%20179%20203%20139Q243%2098%20294%2073Q305%2068%20313%2077L355%20128Q361%20135%20370%20132L472%2088Q481%2083%20480%2073L458%20-22Z%22%2F%3E%3C%2Fsvg%3E");
}
.elementor-form .elementor-field-group-perfil .elementor-field-textual {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22%235F6B78%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M4%20267Q9%20272%2016%20273Q22%20273%2027%20269L224%2088L421%20269Q433%20278%20444%20268Q453%20256%20443%20245L235%2053Q224%2045%20213%2053L5%20245Q-5%20255%204%20267Z%22%2F%3E%3C%2Fsvg%3E");
}
.elementor-form .elementor-field-group-interes .elementor-field-textual {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22%235F6B78%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M4%20267Q9%20272%2016%20273Q22%20273%2027%20269L224%2088L421%20269Q433%20278%20444%20268Q453%20256%20443%20245L235%2053Q224%2045%20213%2053L5%20245Q-5%20255%204%20267Z%22%2F%3E%3C%2Fsvg%3E");
}
.elementor-form .elementor-field-group-mensaje .elementor-field-textual {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%235F6B78%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M493%20392%20456%20429Q436%20448%20411%20448Q385%20448%20365%20429L31%2096Q28%2092%2027%2088L0%20-44Q-1%20-62%2016%20-64Q18%20-64%2019%20-64L151%20-37Q156%20-36%20159%20-33L493%20301Q512%20321%20512%20347Q512%20372%20493%20392ZM112%20131%20315%20334%20398%20251%20195%2048H112V131ZM140%20-7%2036%20-28%2057%2076%2080%2099V16H163L140%20-7ZM471%20324%20422%20274%20339%20357%20389%20407Q397%20416%20411%20416Q424%20416%20433%20407L471%20369Q480%20359%20480%20347Q480%20334%20471%20324Z%22%2F%3E%3C%2Fsvg%3E");
}

/* El caret de Elementor es un triangulo relleno y el del React un chevron de
   trazo: se quita el suyo y manda el icono de arriba (regla 2.2). */
.elementor-form .elementor-select-wrapper .select-caret-down-wrapper {
  display: none;
}

/* ── 16. Iconos que el React pinta con pseudo-elementos ────────
   Estos cinco no salen de ninguna clase del JSX: los pone el CSS del template
   sobre un ::before o un ::after, y por eso no se veian en el inventario de
   iconos hasta que el extractor aprendio a leer tambien el CSS. Son los mismos
   glifos de Font Awesome 6 Pro del proyecto (extraidos de sus .ttf), no
   parecidos de la version gratuita, y van incrustados para no depender de la
   ruta de subida.

     1. «+» detras de los items de menu con submenu   (\2b, peso 600 -> Solid)
     2. chevron delante de los enlaces del pie        (\f054, peso 600 -> Solid)
     3. angulo delante de los items del menu movil    (\f105, peso 400 -> Regular)
     4. «+» / «-» del desplegable del menu movil      (\f067 / \f068, Regular)
     5. flecha del boton de volver arriba             (\f062, Regular)         */

/* 1. El «+» de los items con submenu, en los dos menus. */
.wc-menu-escritorio .elementor-nav-menu > li.menu-item-has-children > a::after,
.wc-menu-movil-nav .elementor-nav-menu li.menu-item-has-children > a::after {
  content: "";
  /* Elementor reserva ::before y ::after de cada item para su efecto de
     subrayado: los deja absolutos, con fondo propio, a todo lo ancho y
     apagados con
     `.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):after{opacity:0}`.
     Ese selector lleva cinco clases, asi que las tres correcciones van con
     !important: sin ellas el icono sale invisible, con fondo azul o encima
     del texto. */
  opacity: 1 !important;
  position: static !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22%23010101%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M432%20192Q432%20178%20423%20169Q414%20160%20400%20160H256V16Q256%202%20247%20-7Q238%20-16%20224%20-16Q210%20-16%20201%20-7Q192%202%20192%2016V160H48Q34%20160%2025%20169Q16%20178%2016%20192Q16%20206%2025%20215Q34%20224%2048%20224H192V368Q192%20382%20201%20391Q210%20400%20224%20400Q238%20400%20247%20391Q256%20382%20256%20368V224H400Q414%20224%20423%20215Q432%20206%20432%20192Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  /* 0.9em y 4px: el React lo pinta como texto, asi que crece y encoge con el
     item. Con un tamano fijo, el menu se iba 40px de ancho. */
  width: 0.9em;
  height: 0.9em;
  margin-left: 4px;
  vertical-align: baseline;
}

/* 2. (El chevron de los enlaces del pie ya no va aqui: lo pinta el propio
   widget de lista, con el mismo SVG, y asi el cliente puede cambiarlo.)
   Regla anulada, se deja el hueco documentado.
.wc-pie-enlaces-ANULADO {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%20fill%3D%22%23010101%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M96%20-32Q83%20-32%2073%20-23Q64%20-13%2064%200Q64%2013%2073%2023L243%20192L73%20361Q64%20371%2064%20384Q64%20397%2073%20407Q83%20416%2096%20416Q109%20416%20119%20407L311%20215Q320%20205%20320%20192Q320%20179%20311%20169L119%20-23Q109%20-32%2096%20-32Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* 3 y 4. El menu movil: angulo delante de cada item y separador entre ellos. */
.wc-menu-movil-nav .elementor-nav-menu li > a {
  position: relative;
  /* !important porque el widget pone su propio relleno horizontal con un
     selector mas especifico, y sin el hueco de la izquierda el angulo se
     monta encima del texto. */
  padding: 12px 0 12px 18px !important;
  border-bottom: 1px solid #fdedf1;
}
.wc-menu-movil-nav .elementor-nav-menu li > a::before {
  content: "";
  opacity: 1 !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 12px;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%20fill%3D%22%23010101%22%3E%3Cpath%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%20d%3D%22M89%20360%20233%20208Q239%20201%20239%20192Q239%20183%20233%20175L89%2023Q73%209%2056%2023Q41%2039%2055%2057L183%20192L55%20328Q41%20345%2056%20361Q73%20375%2089%20360Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* El icono flotante ocupa 64px de alto porque hereda la altura de linea del
   texto; sin esto, el circulo queda 8px mas arriba de donde lo pone el React. */
.wc-wa .elementor-icon-wrapper,
.wc-wa .elementor-widget-container {
  line-height: 0;
}

/* Subrayado de los titulos de columna del pie: una linea tenue a todo lo ancho
   y encima un trozo azul de 92px que se difumina, tal cual el React.          */
.wc-widget-titulo {
  position: relative;
}
.wc-widget-titulo::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(120, 128, 148, 0.4);
}
.wc-widget-titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 92px;
  height: 2px;
  background-image: linear-gradient(to right, #1991b9, rgba(25, 145, 185, 0));
}

/* El kit de Elementor pinta TODOS los <button> con su color de marca, su radio
   y su relleno, y le gana a una sola clase: el boton de volver arriba salia
   como un rectangulo azul macizo. Aqui se le devuelve lo suyo.               */
button.wc-arriba {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  width: 50px !important;
  height: 50px !important;
  box-shadow: none !important;
  right: 30px;
  bottom: 30px;
}

/* El boton de cerrar del drawer: circulo de 33px pegado al borde derecho del
   panel y medio fuera, a 25px del techo, como en el React.                   */
.wc-panel-cerrar {
  position: absolute;
  top: 25px;
  right: -16px;
  z-index: 5;
  width: 33px;
}
.wc-panel-cerrar .elementor-icon {
  width: 33px;
  height: 33px;
}
.e-off-canvas__content {
  position: relative;
}

/* ── 17. Panel del buscador ────────────────────────────────────
   El React lo pinta como un velo negro al 95 % con una pastilla de 700x70
   centrada en la pantalla y la lupa DENTRO, a la derecha. El widget Search da
   la pastilla, el icono y los resultados en vivo; lo que no tiene es ancho
   maximo, centrado vertical ni el boton metido dentro del campo.

   Las clases son las del widget nuevo (`.e-search-*`), no las del antiguo
   (`.elementor-search-form__*`): el widget cambio de marcado en la 4.x.       */
.wc-buscador-cuerpo {
  min-height: 100vh;
  justify-content: center;
  position: relative;
}
/* La X de cerrar, arriba a la derecha, como en el React. */
.wc-buscador-cerrar {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 50px;
}
.wc-buscador .e-search-form {
  position: relative;
}
.wc-buscador .e-search-input {
  height: 70px;
}
/* La lupa, dentro del campo y pegada al borde derecho. */
.wc-buscador .e-search-submit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  padding: 0;
}

/* ── 18. Bloques de carrito y checkout: sin «alignwide» ────────
   Los bloques de WooCommerce salen con la clase `alignwide`, que en un tema de
   bloques significa «mas ancho que el contenido» y se implementa con margenes
   negativos. Hello Elementor no define ese ancho, asi que los margenes tiran
   del bloque fuera de la pantalla: 18px de scroll horizontal a 1280 y 78px a
   390. Se les quita el ensanchado —el bloque pasa a medir lo que su contenedor,
   que es lo que hace el resto del sitio—, en vez de taparlo con overflow
   (prohibido por el punto 8.3).                                              */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.woocommerce-page .alignwide {
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* La X del panel de informacion, arriba a la derecha dentro del panel. */
.wc-panel-info-cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 50px;
  z-index: 5;
}

/* ── 19. La marca del logo no puede encogerse a cero ───────────
   Un widget de imagen dentro de una fila flex mide lo que su contenido, y su
   contenido —un SVG con `max-width: 100%`— mide lo que el widget: el calculo
   se cierra en cero y la marca desaparece. Pasa en los paneles deslizantes,
   donde el logo va dentro del contenedor del enlace. Se le pone un ancho
   minimo igual al que ya tiene declarado en el widget.                       */
.wc-logo-marca {
  flex: 0 0 auto;
  width: 52px;
}
.wc-logo-marca img {
  min-width: 52px;
}
@media (max-width: 1199px) {
  .wc-logo-marca,
  .wc-logo-marca img {
    width: 40px;
    min-width: 40px;
  }
}

/* ── 20. Tarjetas: imagenes iguales y botones alineados ────────
   Tres cosas que se ven mal en cuanto una tarjeta tiene mas texto que su
   vecina, y que el React resuelve con altura fija de imagen y el pie pegado
   abajo:

     1. Las imagenes se recortan a una altura fija («cover»), asi que todas las
        tarjetas de una fila empiezan igual. Sin esto cada imagen conservaba su
        proporcion y las tarjetas quedaban descuadradas.
     2. El boton (o el pie con el precio) se va al fondo de la tarjeta, asi que
        todos los botones de una fila quedan a la misma altura.
     3. El radio superior lo lleva la imagen, porque la tarjeta ya no puede
        recortar con overflow (recortaba el boton de compra).                 */

/* 1. Altura de las imagenes, por tipo de tarjeta (las del React). */
.wc-tarjeta-img img,
.wc-tarjeta-img .elementor-widget-container img {
  height: 225px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}
.wc-producto-img img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}
/* La imagen de la ficha de area ocupa TODO el ancho de la tarjeta: el widget
   de imagen, dentro de una columna flex, se queda con el ancho de su contenido
   si no se le dice lo contrario, y la foto salia a media tarjeta. */
.wc-ficha-img {
  width: 100%;
}
.wc-ficha-img img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

/* 2. El boton, al fondo de la tarjeta. */
.wc-tarjeta-boton,
.wc-producto-pie,
.wc-ficha .elementor-widget-button,
.wc-tarjeta-servicio-boton,
.wc-destacada-boton {
  margin-top: auto;
}

/* 3. La etiqueta de formato va ENCIMA de la imagen, arriba a la izquierda,
      como una pastilla — no como una franja azul a todo lo ancho. */
.wc-producto-img {
  position: relative;
}
.wc-producto-etiqueta {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: auto;
  background-color: var(--e-global-color-primario);
  border-radius: 6px;
  padding: 6px 12px;
}
.wc-producto-etiqueta .elementor-heading-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ── 21. Puntos del carrusel ───────────────────────────────────
   El React: 10x10 en blanco al 40 %, y el activo alargado a 26x10 en azul.
   Los de Elementor salian de 5x5 y casi no se veian.                        */
/* El carrusel anidado pinta sus puntos con `.elementor-widget-n-carousel
   .swiper-pagination-bullet`, que le gana a la clase sola: por eso el punto se
   quedaba en 5px de alto aunque el ancho si cambiara. Se igualan los dos
   selectores.                                                                */
.elementor-widget-n-carousel .swiper-pagination-bullet,
.swiper-pagination-bullet {
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-width: 10px;
  --swiper-pagination-bullet-height: 10px;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  opacity: 0.4;
  border-radius: 10px;
  transition: width 0.3s, opacity 0.3s, background-color 0.3s;
}
.elementor-widget-n-carousel .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active,
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 26px;
  background-color: var(--e-global-color-primario);
  opacity: 1;
}