* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*:focus-visible {
  outline: none;
}

img {
  display: block;
}

html {
  overflow-x: auto;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
}

a {
  height: fit-content;
  display: inline-block;
}

/* svg {
  width: 100px;
  height: 100px;
} */
body {
  min-height: 60px;
  background-size: cover;
  background-position: center;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

.invisible {
  visibility: hidden;
  opacity: 0;
}

.fantasma {
  opacity: 0;
  visibility: hidden;
}

.elementSection {
  width: 100%;
  display: flex;
}

.column,
.columna {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  height: 100%;
}

.layout {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.wrapper {
  width: 100%;
  position: relative;
}

.wrapper-floating-element,
.wrapper-auto {
  width: auto !important;
}

.sortable-ghost {
  opacity: 0;
  display: none;
}

.list-group-total {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
}

/* prueba */

.containerWithOutElement span {
  color: #a1a1a1;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  pointer-events: none;
}

.containerWithOutElement:hover svg {
  transition: all ease-in-out 320ms;
  pointer-events: none;
}

.containerWithOutElement:hover svg {
  color: #000;
}

.hidden {
  display: none;
}

/* .widthTotalColumn {
  width: 100% !important;
} */

.wtps-element {
  width: 100%;
}

.wtps-element {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.wtps-image {
  width: 100%;
  overflow: hidden;
}

.wtps-image img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.element iframe {
  width: 100%;
}

[data-element="video"] {
  position: relative;
  width: 100%;
  height: 0 !important;
  overflow: hidden;
  margin: 0 auto;
}

[data-element="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-element="video"] iframe,
[data-element="video"] object,
[data-element="video"] embed {
  object-fit: cover;
}

[data-element="title"] {
  word-break: normal !important;
  display: inline;
}

[data-element="paragraph"] {
  word-break: normal !important;
  display: inline;
}

[data-element="paragraph"] p:not(:last-child) {
  padding-bottom: 16px;
}

[data-element="paragraph"] ul,
[data-element="paragraph"] ol {
  padding-inline-start: 20px;
}

.content-page {
  min-height: 300px;
}

[data-element="button"] {
  transition: all 0.3s ease-in-out;
  text-align: center;
  cursor: pointer;
  justify-content: center;
  flex-direction: row;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-transform: inherit;
}

p > a {
  font-size: inherit !important;
}

[data-href] {
  cursor: pointer;
}

/*  EFECTO INVISIBILIDAD:
    El elemento que tenga el atributo 'data-hide-container' puesto como "true"
    se muestra invisible hasta que se pasa el ratón por encima de su contenedor.
    En hover, se hace visible el elemento.
*/



@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.5); opacity: 0; }
}

@keyframes slideLeftIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideLeftOut {
  from { transform: translateX(0%); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideRightIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideRightOut {
  from { transform: translateX(0%); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideUpIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUpOut {
  from { transform: translateY(0%); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

@keyframes slideDownIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDownOut {
  from { transform: translateY(0%); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

[data-hide-element]:not([data-hide-element="false"]) {
 opacity: 0;
}

@media ((max-width: 1024px) and (min-width: 768px)) {
  [data-hide-element]:not(.dataHideTablet) {
    animation: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {
  [data-hide-element]:not(.dataHideMobile) {
    animation: none !important;
    opacity: 1 !important;
  }
}

.wrapper:has(>.layoutSection):has([data-hide-element]:not([data-hide-element="false"])) {
  overflow-x: hidden;
}

.cke_editable {
  /* 1) Usa break-spaces para que incluso los   puedan romper línea cuando haga falta */
  white-space: break-spaces !important;

  /* Fallback para navegadores más viejos */
  white-space: -moz-pre-wrap !important;
  white-space: -webkit-pre-wrap !important;
  white-space: pre-wrap !important;
}

.cke_editable span,
.cke_editable strong,
.cke_editable em {
  display: inline !important;
  box-sizing: border-box;
  max-width: 100%;
}