/**
 * Iconos SVG — reemplazo de FontAwesome Pro.
 *
 * FontAwesome se usaba de dos formas:
 *   1. <i class="fal fa-..."> en las plantillas -> ahora SVG inline (inc/svg-icons.php).
 *   2. Pseudo-elementos ::before/::after con content:'\fXXX' -> este archivo.
 *
 * Para los pseudo-elementos se usa mask-image con el SVG en data-URI: así el
 * icono sigue heredando el color del texto (background-color: currentColor),
 * igual que hacía la fuente. No hay peticiones extra.
 */

/*
 * WordPress 6.7+ añade sizes="auto" a las imágenes lazy y, con ello, inyecta
 * una hoja propia (wp-img-auto-sizes) con:
 *
 *   img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
 *
 * Ese selector tiene especificidad (0,1,1) y gana al `img { max-width:100%;
 * height:auto }` del theme, que es solo (0,0,1). Resultado: las miniaturas de la
 * galería reservaban 1500px de alto y la imagen se deformaba.
 *
 * Se restaura el comportamiento normal con la misma especificidad que usa core.
 */
img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: none;
  max-width: 100%;
  height: auto;
}

/* Base para iconos SVG inline */
.o612-icon {
  display: inline-block;
  /* Compensa la línea base como hacía la fuente, para iconos dentro de texto. */
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/*
 * Dentro de un contenedor flex el ajuste de línea base no aplica y descentra el
 * icono (los <i> de FontAwesome no lo sufrían porque eran texto). En esos casos
 * el centrado lo hace el propio flex, así que anulamos vertical-align.
 */
.d-flex > .o612-icon,
.slick-arrow > .o612-icon,
.btn > .o612-icon,
.preview > .o612-icon,
.gtf-back-to-top > .o612-icon,
.nav-link > .o612-icon,
.input-group-text > .o612-icon,
button > .o612-icon,
.boton_wsp > .o612-icon {
  vertical-align: middle;
}

/* ---------- Base común de los pseudo-elementos ---------- */
.idiomas_menu_padre::after,
.navbar ul .menu-item.menu-item-has-children > a::after,
.custom-dropdown-toggle::after,
.dropright .dropdown-toggle::after,
.dropdown-toggle::after,
.sidenav .nav-link.dropdown-toggle .caret::after,
.accordion .card-header .icon:before,
.breadcrumb-site .breadcrumb-item + .breadcrumb-item::before,
.frequently-bought-together .custom-control-input:checked ~ .custom-control-label::before,
.rate-input label:hover i::before,
.rate-input label:hover ~ label i::before,
.rate-input input:checked ~ label i::before,
.rate-input:hover > input:checked ~ label i::before {
  content: '';
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  border: 0;
}

/* ---------- angle-down (\f107): selector de idioma y menú con hijos ---------- */
.idiomas_menu_padre::after,
.navbar ul .menu-item.menu-item-has-children > a::after {
  width: 10px;
  height: 10px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'/%3E%3C/svg%3E");
}

/* ---------- chevron-down (\f078): dropdowns de Bootstrap ---------- */
.custom-dropdown-toggle::after,
.dropright .dropdown-toggle::after,
.dropdown-toggle::after {
  width: 12px;
  height: 12px;
  vertical-align: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
}

/* ---------- angle-right (\f105): caret del menú lateral ---------- */
.sidenav .nav-link.dropdown-toggle .caret::after {
  width: 14px;
  height: 14px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z'/%3E%3C/svg%3E");
}

/* ---------- Acordeones ----------
 *
 * El icono cambiaba con `content:'\fXXX'` según el estado (abierto/cerrado), y
 * hay DOS estilos distintos en el theme:
 *   .accordion            -> angle-up (\f106) abierto / angle-down (\f107) cerrado
 *   .accordion-style-02   -> minus    (\f068) abierto / plus       (\f067) cerrado
 *
 * Con máscaras el estado se cambia sustituyendo la mask-image, no el content.
 * Bootstrap añade/quita la clase .collapsed en el <a>, que es lo que se usa aquí.
 */

/* Estilo genérico: angle-up cuando está ABIERTO */
.accordion .card-header .icon:before {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'/%3E%3C/svg%3E");
}

/* Estilo genérico: angle-down cuando está CERRADO */
.accordion .card-header a.collapsed .icon:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'/%3E%3C/svg%3E");
}

/* accordion-style-02: MINUS cuando está abierto */
.accordion-style-02 .card-header .icon:before {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M376 232H8c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M376 232H8c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8z'/%3E%3C/svg%3E");
}

/* accordion-style-02: PLUS cuando está cerrado */
.accordion-style-02 .card-header a.collapsed .icon:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M376 232H216V72c0-4.4-3.6-8-8-8h-32c-4.4 0-8 3.6-8 8v160H8c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h160v160c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8V280h160c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M376 232H216V72c0-4.4-3.6-8-8-8h-32c-4.4 0-8 3.6-8 8v160H8c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h160v160c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8V280h160c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8z'/%3E%3C/svg%3E");
}

/* ---------- chevron-right (\f054): separador de breadcrumbs ---------- */
.breadcrumb-site .breadcrumb-item + .breadcrumb-item::before {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z'/%3E%3C/svg%3E");
}

/* ---------- check (\f00c): checkbox marcado ---------- */
.frequently-bought-together .custom-control-input:checked ~ .custom-control-label::before {
  width: 9px;
  height: 9px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0L481.103 128.72c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.971.001z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0L481.103 128.72c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.971.001z'/%3E%3C/svg%3E");
}

/* ---------- star (\f005): valoraciones ---------- */
.rate-input label:hover i::before,
.rate-input label:hover ~ label i::before,
.rate-input input:checked ~ label i::before,
.rate-input:hover > input:checked ~ label i::before {
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E");
}

/* Flechas de carrusel (slick) inyectadas por theme.js */
/*
 * Iconos dentro de botones circulares.
 *
 * Los <i> de FontAwesome se dimensionaban por font-size, que en estos botones
 * es pequeño (14-16px) mientras el círculo mide 45-48px. Como glifo de fuente el
 * icono llenaba más caja de la que sugiere su font-size; un SVG a 1em queda
 * visiblemente menor. Se fijan tamaños en px para recuperar la proporción.
 */

/*
 * Flechas de carrusel (slick): círculo de 45px, font-size 14px.
 * El <i> original se estiraba al 100% de alto (regla en custom.css) y centraba
 * el glifo dentro. Aquí fijamos ancho y alto iguales y dejamos que el flex del
 * contenedor haga el centrado, sin depender del alto heredado.
 */
.slick-arrow .o612-icon-arrow,
.o612-icon-arrow {
  /* 16px = 18px - 10% */
  width: 16px;
  height: 16px;
  /* Anula el height:100% heredado de .slick-arrow.slick-prev > .o612-icon */
  min-height: 0;
  align-self: center;
}

/*
 * Slick escribe style="display: block" DIRECTAMENTE en el botón de la flecha,
 * y un estilo en línea gana a cualquier hoja de estilos. Eso anulaba el
 * display:flex de themes.css, así que align-items/justify-content no hacían
 * nada y el SVG quedaba arriba a la izquierda (medido: -10.9px x, -10.2px y).
 *
 * Con FontAwesome no se notaba porque el glifo llenaba la caja de línea.
 * !important es necesario aquí: es la única forma de ganar a un estilo en línea.
 */
.slick-arrow {
  align-items: center;
  justify-content: center;
}

/*
 * Solo se fuerza flex cuando slick pide mostrar la flecha. Se excluyen los
 * casos en que la oculta (style="display:none", .slick-hidden, .slick-disabled),
 * porque un !important indiscriminado las volvería visibles.
 */
.slick-arrow[style*="display: block"]:not(.slick-hidden):not(.slick-disabled),
.slick-arrow[style*="display:block"]:not(.slick-hidden):not(.slick-disabled) {
  display: flex !important;
}

/*
 * En móvil las flechas se ocultan SIEMPRE.
 *
 * .slick-prev usa left:-60px y .slick-next right:-60px, o sea que quedan FUERA
 * del contenedor. En pantallas anchas hay margen de sobra, pero en móvil se
 * salen del viewport y generan scroll horizontal en toda la página.
 *
 * custom.css ya lo hacía, pero solo para `.productos .slick-arrow`, y hay 7
 * carruseles en el theme (banner, categoría, galería, carrito, relacionados…).
 * Se generaliza a cualquier .slick-arrow: en móvil se navega deslizando, así
 * que no se pierde funcionalidad.
 *
 * Va DESPUÉS de la regla de arriba y repite los selectores con [style] para
 * ganar al style="display:block" en línea que escribe slick.
 */
@media (max-width: 1100px) {
  .slick-arrow,
  .slick-arrow[style],
  .slick-arrow[style*="display: block"]:not(.slick-hidden):not(.slick-disabled),
  .slick-arrow[style*="display:block"]:not(.slick-hidden):not(.slick-disabled) {
    display: none !important;
  }
}

/*
 * Refuerzo contra el scroll horizontal: aunque las flechas estén ocultas,
 * cualquier elemento absoluto que se salga del slider puede desbordar.
 */
@media (max-width: 1100px) {
  .slick-slider {
    overflow-x: clip;
  }
}

/*
 * Compensación ÓPTICA de las flechas.
 *
 * Con la caja ya centrada, la masa de tinta no lo está: la punta es maciza y el
 * asta fina, así que el centroide cae un 9% hacia la punta (medido rasterizando
 * el trazo). Se desplaza ~1.6px hacia el asta para centrarlo a la vista.
 */
.slick-arrow.slick-prev .o612-icon-arrow {
  transform: translateX(1.75px);
}

.slick-arrow.slick-next .o612-icon-arrow {
  transform: translateX(-1.75px);
}

/*
 * Iconos de la cabecera (buscador y bolsa).
 * themes.css los dimensionaba con `.main-header .navbar-right .nav-link i
 * { font-size: 20px }`, regla que ya no aplica al ser <svg> en vez de <i>.
 * Se replica ese tamaño para que se vean como antes y el contador (.number)
 * quede en la esquina sin invadir el icono.
 */
.main-header .navbar-right .nav-link .o612-icon,
.main-header .navbar-right .nav-link > .o612-icon {
  /* MISMO tamaño en desktop y móvil: antes había 22px y 24px según el ancho,
     y la cabecera se veía distinta en cada dispositivo. */
  width: 22px;
  height: 22px;
  /* Los <i> originales llevaban style="color:#000" en línea. */
  color: #000;
}

/*
 * Contador del carrito — una ÚNICA regla para todos los tamaños de pantalla.
 *
 * Antes había dos definiciones con valores distintos (desktop top:-11px/19px,
 * móvil top:2px/17px), así que el badge no coincidía entre dispositivos.
 *
 * Se ancla al ICONO, no al enlace: el <a> lleva px-3 y mr-n2, de modo que su
 * caja es mucho más ancha que la bolsa y posicionar contra ella dejaba el
 * círculo flotando fuera del dibujo.
 *
 * El <a> es position:relative (clase .position-relative del markup) y el icono
 * mide 22px, así que el badge se coloca respecto al borde del icono.
 */
.main-header .navbar-right .menu-cart {
  /* Ancla explícita para el badge. */
  position: relative;
}

.main-header .navbar-right .menu-cart .number {
  position: absolute;
  /* El icono está centrado en el <a>; el badge monta sobre su esquina
     superior derecha, sin separarse ni taparlo del todo. */
  top: 50%;
  right: 50%;
  margin-top: -17px;
  margin-right: -21px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
  border-radius: 50%;
  text-align: center;
  padding: 0;
}


/*
 * Los iconos de la cabecera van más juntos: los <i> de FontAwesome ocupaban
 * más caja que el SVG, así que con el mismo px-3 quedaba demasiado aire.
 */
.main-header .navbar-right .nav-link.nav-search,
.main-header .navbar-right .nav-link.menu-cart {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/*
 * Alineación vertical de los iconos de la cabecera.
 *
 * El <a> del carrito lleva `py-0` y el del buscador no, así que sus alturas no
 * coinciden (22px vs 38px) y los iconos quedaban desalineados 3.5px. Con los
 * <i> de FontAwesome se corregía con un `top:3px` en móvil; con SVG lo limpio
 * es igualar la caja de ambos enlaces y dejar que el flex los centre.
 */
.main-header .navbar-right .nav-link.nav-search,
.main-header .navbar-right .nav-link.menu-cart {
  display: flex;
  align-items: center;
  align-self: center;
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * Móvil: solo alineación, NO tamaño.
 *
 * El tamaño se define una sola vez más arriba (22px) para que la cabecera se
 * vea idéntica en desktop y en móvil. Aquí únicamente se garantiza que la fila
 * de iconos comparta el mismo centro vertical.
 */
@media (max-width: 1199px) {
  .main-header .navbar-right,
  .main-header .navbar-right .nav-item,
  .main-header .navbar-right .item-menu-mobile {
    display: flex;
    align-items: center;
  }

}

/* El selector de idioma tenía 20px a cada lado: se reduce el lado derecho
   para que "Español" no quede tan separado de la lupa. */
.main-header .idiomas_menu_padre {
  padding-right: 10px;
}

/* Botón "vista previa" (ojo) y similares: círculo de 45px. */
.preview > .o612-icon {
  width: 20px;
  height: 20px;
}

/* Botón "volver arriba": círculo de 48px. */
.gtf-back-to-top > .o612-icon {
  width: 20px;
  height: 20px;
}

/*
 * Botón de play del vídeo: el círculo pasa de 45px a 115px en pantallas grandes
 * y el tamaño lo controla fs-sm-20, así que aquí sí interesa escalar con em.
 */
.rounded-circle > .o612-icon[class*="o612-icon"]:not(.o612-icon-arrow) {
  flex-shrink: 0;
}