/* =====================================================================
   ePrilux · Diseño común (módulo diseno-general, 26/10/2026)
   ===================================================================== */

/* Sellos sobre las fotos de las institucionales («Proyectos por el mundo», «Equipo Prilux»…), Karen: van sobre la
   esquina de la foto. Estaban pegados al fondo de su columna, y la columna se estiraba hasta la altura del texto de al
   lado: el sello quedaba debajo de la foto. La columna pasa a medir lo que la foto. Solo con las columnas lado a lado.
   Columnas (foto + sello), buscadas en todas las páginas el 26/10: Quiénes somos (957), Por qué ePrilux (2732),
   Sostenibilidad (2836), Calidad técnica (2811) y Certificaciones (2535). */
@media (min-width: 768px) {
  html body :is([data-id="e57178e"], [data-id="1467ae2"], [data-id="71dc4b67"], [data-id="908dab4"], [data-id="9d71c0e"],
    [data-id="62daa449"], [data-id="8b8fc78"], [data-id="4196ce76"], [data-id="41f339c9"]) { align-self: flex-start !important; }
  /* Y el sello, un poco separado del borde de la foto (antes, pegado abajo). */
  html body :is([data-id="12d750a"], [data-id="fe311cb"], [data-id="e382762"], [data-id="ab9b9dd"], [data-id="1371cf0"],
    [data-id="513050f0"], [data-id="78be56c"], [data-id="2380908d"], [data-id="46b3f996"]) { bottom: 32px !important; left: 28px !important; }
}

/* ---------- F9 · Botones unificados (Karen, 25/10: «todos como los de la portada») ----------
   Tres tipos, con la misma letra (mayúsculas, 10,5 px, seminegrita y espaciada, como «VER LA SELECCIÓN»):
   1. Contorno: blanco con borde navy fino («AÑADIR», «VOLVER AL INICIO»). Al pasar, se rellena de navy.
   2. Amarillo: el botón principal de cada formulario y los que van sobre fondo navy («ENVIAR CONSULTA»).
   3. Compra: navy con filo amarillo a la izquierda, como «Añadir al carrito» de la ficha. Solo para comprar
      («Pasar al pago», «Realizar pedido»). Al pasar, sigue navy (antes «Realizar pedido» se volvía azul).
   Revisado el 26/10 en portada, tienda, ficha, carrito, pago, contacto, profesionales, Quiénes somos, Mi cuenta y 404. */

/* 2. Amarillo: botones de envío de todos los formularios (Profesionales, Mi cuenta, Devoluciones…), como Contacto. */
/* :not(#epx-a):not(#epx-b) solo sube la prioridad: Forminator pone sus estilos con el id de cada formulario. */
html body .forminator-ui .forminator-button-submit:not(#epx-a):not(#epx-b),
html body .elementor-location-footer .e-form-submit-button-base {
  background: #FDCF63 !important;
  border: 1px solid #FDCF63 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #06163d !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
/* Al pasar: navy con letra blanca. En los formularios, botones.css hace entrar el navy de izquierda a derecha; aquí
   solo se asegura el resultado final (también en los que no llevan ese efecto, como Profesionales). */
html body .forminator-ui .forminator-button-submit:not(#epx-a):not(#epx-b):is(:hover, :focus-visible),
html body .elementor-location-footer .e-form-submit-button-base:is(:hover, :focus-visible) {
  border-color: #06163d !important;
  color: #fff !important;
}
html body .forminator-ui.epx-p-form .forminator-button-submit:not(#epx-a):not(#epx-b):is(:hover, :focus-visible),
html body .epx-p-form .forminator-button-submit:not(#epx-a):not(#epx-b):is(:hover, :focus-visible),
html body .elementor-location-footer .e-form-submit-button-base:is(:hover, :focus-visible) { background: #06163d !important; }
/* En el pie (fondo navy), al pasar: blanco con letra navy, para que no desaparezca sobre el fondo. */
html body .elementor-location-footer .e-form-submit-button-base:is(:hover, :focus-visible) { background: #fff !important; border-color: #fff !important; color: #06163d !important; }

/* 1. Contorno: «Aplicar filtros» (antes navy relleno), y en la 404 «Atención al cliente» (antes navy relleno) y
   «Volver al inicio» y «Buscar» con la letra de la portada. */
html body .eprilux-filter-submit,
html body [data-id="282cc58"] .elementor-button,
html body [data-id="a1ae7fb"] .elementor-button {
  background: #fff !important;
  border: 1px solid #06163d !important;
  border-radius: 0 !important;
  color: #06163d !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
html body .eprilux-filter-submit:hover,
html body .eprilux-filter-submit:focus-visible,
html body [data-id="282cc58"] .elementor-button:hover,
html body [data-id="a1ae7fb"] .elementor-button:hover { background: #06163d !important; color: #fff !important; }
html body [data-id="644dfa9"] .elementor-search-form__submit { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .18em !important; }

/* 3. Compra: «Pasar al pago» (carrito) y «Realizar pedido» (pago), como «Añadir al carrito» de la ficha. */
html body .summary-box a.checkout-button,
html body #place_order.cta-pay {
  background: #06163d !important;
  border: 0 !important;
  border-left: 3px solid #FDCF63 !important;
  border-radius: 0 !important;
  color: #fff !important;
}
html body .summary-box a.checkout-button:hover,
html body #place_order.cta-pay:hover,
html body #place_order.cta-pay:focus-visible { background: #0d2457 !important; color: #fff !important; }

/* ---------- F10 · Páginas legales con la línea de las institucionales (26/10) ----------
   Antes: rótulo «Información legal» en amarillo sobre claro, cada enlace del menú en una caja, título todo fino y sin
   migas. Ahora, como las institucionales: rótulo gris con raya amarilla (amarillo solo sobre oscuro), menú como lista
   con una raya a la izquierda (la página actual en navy con la raya amarilla), migas y palabra clave en negrita
   (diseno-general.php). */
html body .epx-legal .toc .eyebrow {
  display: flex !important;
  align-items: center;
  gap: 12px;
  color: #697183 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
}
html body .epx-legal .toc .eyebrow::before { content: "" !important; display: block !important; flex: 0 0 28px; height: 1px; background: #FDCF63; }
html body .epx-legal .toc ul { border-left: 1px solid #e4e6e9 !important; }
html body .epx-legal .toc li { margin: 0 !important; }
html body .epx-legal .toc li a {
  margin: 0 0 0 -1px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #46505f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html body .epx-legal .toc li a:hover { color: #06163d !important; border-left-color: #23a7d6 !important; }
html body .epx-legal .toc li a.active,
html body .epx-legal .toc li a[aria-current="page"] { color: #06163d !important; font-weight: 700 !important; border-left-color: #FDCF63 !important; background: transparent !important; }
html body .epx-legal .toc .toc-grp { color: #697183 !important; font-size: 9.5px !important; letter-spacing: .16em !important; }

/* Migas encima del título, como en las categorías. */
html body .epx-migas-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; color: #697183; font-size: 12px; font-weight: 500; }
html body .epx-migas-legal a { color: #697183 !important; text-decoration: none !important; }
html body .epx-migas-legal a:hover { color: #06163d !important; }
html body .epx-migas-legal [aria-current="page"] { color: #06163d; }
html body .epx-legal h1 { margin-top: 0 !important; }
html body .epx-legal h1 b { font-weight: 700; }
/* En el móvil, primero el texto de la página y después el menú legal (antes el menú llenaba la primera pantalla). */
@media (max-width: 767px) {
  html body [data-id="f8fc1c2"] { order: -1; }
  html body [data-id="58298ce"] { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e4e6e9; }
}

/* ---------- Migas propias (módulo migas, 26/10/2026): las de tienda, categorías y estancias ----------
   Mismo aspecto que tenían con Unlimited Elements (5750-estilos-web.css): 12 px, gris, la página actual en navy. */
html body .epx-migas { font-family: "Montserrat", sans-serif; line-height: 30px; }
html body .epx-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
html body .epx-migas li { display: flex; align-items: center; margin: 0; padding: 0; color: #697183; font-size: 12px; font-weight: 500; letter-spacing: .02em; }
html body .epx-migas li + li::before { content: "/"; margin: 0 10px; color: #c9ced6; }
html body .epx-migas a { color: #697183 !important; text-decoration: none !important; }
html body .epx-migas a:hover { color: #06163d !important; }
html body .epx-migas li[aria-current="page"] { color: #06163d; }

/* Cabeceras con foto de las institucionales (Karen: «tiene mucho espacio… en tablet»): el bloque del título mide
   600 px en tablet y Elementor lo centraba, así que dejaba un hueco grande a la izquierda. Ahora va a la izquierda,
   con el margen de la página, como en el ordenador. Solo en tablet: en el ordenador lo sacaba de la línea del logo en
   pantallas anchas (Karen, 27/10: «tienen que ir alineados»). */
@media (min-width: 768px) and (max-width: 1024px) {
  html body .l-container:has(> .hero-h1) { align-self: flex-start !important; margin-left: 0 !important; }
}

/* ---------- Contacto a dos columnas (26/10/2026, Karen: «no respira») ----------
   Títulos y texto a la izquierda; formulario (9f2ff68) y preguntas (0fec6e4) a la derecha, como mucho de 680 px. El
   formulario lo pasó a este bloque scripts/contacto-dos-columnas.php. Las filas 1 y 5 se reparten el alto sobrante, así
   el texto queda centrado en vertical frente a la columna derecha («que queden centrados»). En tablet y móvil, uno
   debajo de otro y las preguntas a todo el ancho (llevaban un ancho fijo y en móvil salían en una columna estrecha). */
@media (min-width: 1025px) {
  html body .elementor-element-9f2ff68,
  html body .elementor-element-0fec6e4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(64px, 7vw, 128px) !important;
    row-gap: 0 !important;
    align-items: start;
  }
  html body :is(.elementor-element-9f2ff68, .elementor-element-0fec6e4) > * { grid-column: 1; width: auto !important; max-width: 100%; }
  html body :is(.elementor-element-9f2ff68, .elementor-element-0fec6e4) > :nth-child(1) { grid-row: 2; margin-bottom: 12px; }
  html body :is(.elementor-element-9f2ff68, .elementor-element-0fec6e4) > :nth-child(2) { grid-row: 3; margin-bottom: 16px; }
  html body :is(.elementor-element-9f2ff68, .elementor-element-0fec6e4) > :nth-child(3) { grid-row: 4; }
  html body .elementor-element-9f2ff68 > .elementor-widget-form,
  html body .elementor-element-0fec6e4 > .epx-faq { grid-column: 2; grid-row: 1 / -1; width: 100% !important; margin-top: 0; padding: 0 !important; }
  /* El formulario lleva además una foto debajo del texto que llena la columna hasta el final del formulario: aquí el
     texto va arriba, no centrado. */
  html body .elementor-element-9f2ff68 { grid-template-rows: auto auto auto 1fr; }
  html body .elementor-element-9f2ff68 > .elementor-widget-form { margin-bottom: 0 !important; }
  html body .elementor-element-9f2ff68 > :nth-child(1) { grid-row: 1; }
  html body .elementor-element-9f2ff68 > :nth-child(2) { grid-row: 2; }
  html body .elementor-element-9f2ff68 > :nth-child(3) { grid-row: 3; }
  html body .elementor-element-9f2ff68 > .epx-contacto-foto { grid-row: 4; align-self: stretch; height: auto; min-height: 320px; margin-top: 32px; position: relative; overflow: hidden; }
  html body .elementor-element-9f2ff68 > .epx-contacto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
}
@media (max-width: 1024px) {
  html body .epx-contacto-foto { display: none !important; }
}
@media (max-width: 1024px) {
  html body .elementor-element-0fec6e4 > .epx-faq { width: 100% !important; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}
/* Cifras de la cabecera (+40 años, 3 años, 39,95 €, 30 días): en móvil, dos por fila y el icono al lado, no encima.
   La foto de la lámpara (23fcfa8), fuera en móvil (Karen, 26/10). */
@media (max-width: 767px) {
  html body .elementor-element-23fcfa8 { display: none !important; }
  html body .elementor-element-a38cb82 { margin-top: 24px !important; }
  html body .elementor-element-a38cb82 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; }
  html body .elementor-element-a38cb82 .elementor-icon-box-wrapper { flex-direction: row !important; align-items: flex-start; gap: 10px; text-align: left !important; }
  html body .elementor-element-a38cb82 .elementor-icon-box-icon { flex: 0 0 auto; margin: 0 !important; }
  html body .elementor-element-a38cb82 .elementor-icon { width: 40px; height: 40px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; font-size: 20px !important; }
  html body .elementor-element-a38cb82 .elementor-icon svg { width: 20px; height: 20px; }
  html body .elementor-element-a38cb82 .elementor-icon-box-title { font-size: 18px !important; line-height: 1.2; margin: 0 0 2px !important; }
  html body .elementor-element-a38cb82 .elementor-icon-box-description { font-size: 11.5px !important; line-height: 1.4; }
}