/* ==========================================================================
   Maquetador Web OZ — Frontend Styles (v0.2.1)
   Solo CSS necesario para el render del maquetador.
   Las variables del tema (--container, --container-padding, --color-*, --font-*)
   se heredan de Ozado New.
   ========================================================================== */

:root {
  --ml-space-none: 0;
  --ml-space-xs: 0.25rem;
  --ml-space-sm: 0.5rem;
  --ml-space-md: 1rem;
  --ml-space-lg: 2rem;
  --ml-space-xl: 3rem;
}

/* --- Section (row) ---------------------------------------------------- */

.ml-section {
  position: relative;
  width: 100%;
  padding: var(--ml-row-padding-mobile, 0);
}

/* Fila full-bleed: ocupa ancho absoluto de viewport */
.ml-section.ml-row-screen {
  position: relative;
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50dvw);
}

/* Fondo full-bleed, contenido en contenedor (grid sigue limitado por regla general) */
.ml-section.ml-row-bg-screen {
  position: relative;
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50dvw);
  overflow-x: clip;
}

.ml-section.ml-row-bg-screen .ml-row-inner {
  width: min(calc(100% - (var(--ml-theme-padding, 24px) * 2)), var(--ml-theme-container, 1440px));
  margin-left: auto;
  margin-right: auto;
}

/* Prevent horizontal scroll caused by 100vw rows */
.oz-builder-root {
  overflow-x: clip;
}

/* Let inner wrapper control width for bg-screen rows */
.ml-section.ml-row-bg-screen .ml-grid-layout {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Parallax background for rows that opt-in */
.ml-section.row-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.ml-section > * {
  position: relative;
  z-index: 1;
}

/* --- Grid layout (responsive via CSS variables) ----------------------- */

.ml-grid {
  display: grid;
  align-items: stretch;
}

.ml-grid-layout {
  grid-template-columns: var(--ml-template-mobile, repeat(var(--ml-cols-mobile, 1), minmax(0, 1fr)));
  gap: var(--ml-gap-mobile, var(--ml-space-md));
  overflow: hidden;
  align-items: stretch;
}

/* Nested rows (sub-rows) */
.ml-subrow {
  width: 100%;
}

.ml-subrow > .ml-grid-layout {
  display: grid !important;
  grid-template-columns: var(--ml-template-mobile, repeat(var(--ml-cols-mobile, 1), minmax(0, 1fr))) !important;
  gap: var(--ml-gap-mobile, var(--ml-space-md)) !important;
  align-items: stretch;
}

/* Ancho alineado al contenedor del tema (--ml-theme-container desde theme_mod en PHP, igual que el preview admin) */
.ml-section:not(.ml-row-screen):not(.ml-row-full) .ml-grid-layout {
  max-width: min(100%, var(--ml-theme-container, 1440px));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Migas / título suelen ir en el contenedor del tema; the_content a veces ocupa todo .entry-content.
 * Con body.ml-builder-root-align centramos .oz-builder-root al mismo ancho que --ml-theme-container.
 * Desactivar: add_filter('maquetador_lite_builder_root_max_width_align', '__return_false');
 * Filas ml-row-screen / ml-row-bg-screen mantienen breakout a viewport (100vw + margen).
 */
body.ml-builder-root-align .entry-content .oz-builder-root,
body.ml-builder-root-align #content .oz-builder-root,
body.ml-builder-root-align .site-main .oz-builder-root,
body.ml-builder-root-align .content-area .oz-builder-root,
body.ml-builder-root-align .woocommerce .oz-builder-root,
body.ml-builder-root-align .wp-block-post-content > .oz-builder-root {
  width: 100%;
  max-width: min(100%, var(--ml-theme-container, 1440px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.ml-section.ml-row-full .ml-grid-layout {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Entrance animations (frontend only) */
.oz-builder-root .ml-section.oz-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.oz-builder-root .ml-section.oz-anim.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .oz-builder-root .ml-section.oz-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hover micro-interactions (frontend) */
@media (hover: hover) and (pointer: fine) {
  .oz-builder-root .ml-image-wrap img,
  .oz-builder-root .ml-card,
  .oz-builder-root .ml-theme-logo-wrap img {
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
    transform: translateZ(0);
  }

  .oz-builder-root .ml-image-wrap:hover img,
  .oz-builder-root .ml-theme-logo-wrap:hover img {
    transform: scale(1.04);
  }

  .oz-builder-root .ml-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oz-builder-root .ml-image-wrap img,
  .oz-builder-root .ml-card,
  .oz-builder-root .ml-theme-logo-wrap img {
    transition: none !important;
    transform: none !important;
  }
}

/* Contact page cards (3 items at top) */
body.oz-page-contact .oz-builder-root .ml-section:first-of-type .ml-col {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px 18px;
  background: #ffffff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.oz-page-contact .oz-builder-root .ml-section:first-of-type .ml-col:hover {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
  transform: translateY(-2px);
}

body.oz-page-contact .oz-builder-root .ml-section:first-of-type .ml-col:hover .ml-text,
body.oz-page-contact .oz-builder-root .ml-section:first-of-type .ml-col:hover .ml-text * ,
body.oz-page-contact .oz-builder-root .ml-section:first-of-type .ml-col:hover a {
  color: #ffffff !important;
}

body.oz-page-contact .oz-builder-root .ml-section:first-of-type .ml-col:hover img {
  filter: brightness(0) invert(1);
}

/* Contact page: make Google Maps height match the form column */
body.oz-page-contact .oz-builder-root .oz-map-embed {
  height: 100%;
  min-height: 520px;
}

body.oz-page-contact .oz-builder-root .oz-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 768px) {
  .ml-section {
    padding: var(--ml-row-padding-tablet, var(--ml-row-padding-mobile, 0));
  }
  .ml-grid-layout {
    grid-template-columns: var(--ml-template-tablet, repeat(var(--ml-cols-tablet, var(--ml-cols-mobile, 1)), minmax(0, 1fr)));
    gap: var(--ml-gap-tablet, var(--ml-gap-mobile, var(--ml-space-md)));
  }

  .ml-subrow > .ml-grid-layout {
    grid-template-columns: var(--ml-template-tablet, repeat(var(--ml-cols-tablet, var(--ml-cols-mobile, 1)), minmax(0, 1fr))) !important;
    gap: var(--ml-gap-tablet, var(--ml-gap-mobile, var(--ml-space-md))) !important;
  }
}

@media (min-width: 992px) {
  .ml-section {
    padding: var(--ml-row-padding-laptop, var(--ml-row-padding-tablet, var(--ml-row-padding-mobile, 0)));
  }
  .ml-grid-layout {
    grid-template-columns: var(--ml-template-laptop, repeat(var(--ml-cols-laptop, var(--ml-cols-tablet, 1)), minmax(0, 1fr)));
    gap: var(--ml-gap-laptop, var(--ml-gap-tablet, var(--ml-space-md)));
  }

  .ml-subrow > .ml-grid-layout {
    grid-template-columns: var(--ml-template-laptop, repeat(var(--ml-cols-laptop, var(--ml-cols-tablet, 1)), minmax(0, 1fr))) !important;
    gap: var(--ml-gap-laptop, var(--ml-gap-tablet, var(--ml-space-md))) !important;
  }
}

@media (min-width: 1200px) {
  .ml-section {
    padding: var(--ml-row-padding-desktop, var(--ml-row-padding-laptop, var(--ml-row-padding-tablet, var(--ml-row-padding-mobile, 0))));
  }
  .ml-grid-layout {
    grid-template-columns: var(--ml-template-desktop, repeat(var(--ml-cols-desktop, var(--ml-cols-laptop, 1)), minmax(0, 1fr)));
    gap: var(--ml-gap-desktop, var(--ml-gap-laptop, var(--ml-space-md)));
  }

  .ml-subrow > .ml-grid-layout {
    grid-template-columns: var(--ml-template-desktop, repeat(var(--ml-cols-desktop, var(--ml-cols-laptop, 1)), minmax(0, 1fr))) !important;
    gap: var(--ml-gap-desktop, var(--ml-gap-laptop, var(--ml-space-md))) !important;
  }
}

/* --- Column ----------------------------------------------------------- */

.ml-col {
  min-width: 0;
  order: var(--ml-col-order-mobile, 0) !important;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
}

.ml-col > * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Misma lógica que el builder: hijos a ancho completo impiden centrar con flex */
.ml-col.ml-col--ix-center > *:not(.ml-cards-grid):not(.ml-buttons-group):not(.ml-buttons-group--grid):not(.ml-buttons-group--grid2):not(.ml-buttons-group--inline) {
  width: auto;
  align-self: center;
}
.ml-col.ml-col--ix-right > *:not(.ml-cards-grid):not(.ml-buttons-group):not(.ml-buttons-group--grid):not(.ml-buttons-group--grid2):not(.ml-buttons-group--inline) {
  width: auto;
  align-self: flex-end;
}

@media (max-width: 767px) {
  .ml-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ml-hide-tablet {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .ml-hide-laptop {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .ml-hide-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .ml-col {
    order: var(--ml-col-order-tablet, var(--ml-col-order-mobile, 0)) !important;
  }
}

@media (min-width: 992px) {
  .ml-col {
    order: var(--ml-col-order-laptop, var(--ml-col-order-tablet, var(--ml-col-order-mobile, 0))) !important;
  }
}

@media (min-width: 1200px) {
  .ml-col {
    order: var(--ml-col-order-desktop, var(--ml-col-order-laptop, var(--ml-col-order-tablet, var(--ml-col-order-mobile, 0)))) !important;
  }
}

/* Legacy span support (cards spanning multiple grid cells) */
.ml-span-col-m-1 { grid-column: span 1; }
.ml-span-col-m-2 { grid-column: span 2; }
.ml-span-col-m-3 { grid-column: span 3; }
.ml-span-col-m-4 { grid-column: span 4; }
.ml-span-row-m-1 { grid-row: span 1; }
.ml-span-row-m-2 { grid-row: span 2; }
.ml-span-row-m-3 { grid-row: span 3; }

@media (min-width: 768px) {
  .ml-span-col-t-1 { grid-column: span 1; }
  .ml-span-col-t-2 { grid-column: span 2; }
  .ml-span-col-t-3 { grid-column: span 3; }
  .ml-span-col-t-4 { grid-column: span 4; }
  .ml-span-row-t-1 { grid-row: span 1; }
  .ml-span-row-t-2 { grid-row: span 2; }
  .ml-span-row-t-3 { grid-row: span 3; }
}

@media (min-width: 1200px) {
  .ml-span-col-d-1 { grid-column: span 1; }
  .ml-span-col-d-2 { grid-column: span 2; }
  .ml-span-col-d-3 { grid-column: span 3; }
  .ml-span-col-d-4 { grid-column: span 4; }
  .ml-span-row-d-1 { grid-row: span 1; }
  .ml-span-row-d-2 { grid-row: span 2; }
  .ml-span-row-d-3 { grid-row: span 3; }
}

/* --- Text block ------------------------------------------------------- */

.ml-text-wrap,
.ml-image-wrap,
.ml-button-wrap,
.ml-shortcode,
.ml-custom-html-wrap,
.ml-spacer-divider {
  box-sizing: border-box;
}

.ml-custom-html-inner {
  box-sizing: border-box;
  max-width: 100%;
}

.ml-text {
  margin: 0;
  line-height: 1.6;
}

.ml-text + .ml-text {
  margin-top: var(--ml-space-sm);
}

/* --- Image block ------------------------------------------------------ */

.ml-image-wrap {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.ml-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Button block ----------------------------------------------------- */

.ml-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  transition: opacity 0.2s ease;
}

.ml-btn .ml-btn-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

.ml-btn:hover {
  opacity: 0.9;
}

.ml-btn.is-primary {
  background: var(--color-primary, #111827);
  color: var(--color-primary-contrast, #fff);
}

/* --- Card block ------------------------------------------------------- */

.ml-cards-grid {
  display: grid;
  grid-template-columns: repeat(var(--ml-grid-cols, 2), minmax(0, 1fr));
  gap: var(--ml-card-grid-gap, 16px);
  width: 100%;
}

@media (max-width: 767px) {
  .ml-cards-grid {
    grid-template-columns: 1fr;
  }
}

.ml-buttons-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ml-buttons-gap, 6px);
}

.ml-buttons-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.ml-buttons-group--grid2 {
  display: grid;
  grid-template-columns: repeat(var(--ml-grid-cols, 2), max-content);
  justify-content: center;
  justify-items: center;
  gap: var(--ml-buttons-gap, 6px);
  align-items: start;
}

.ml-buttons-group--grid {
  display: grid;
  grid-template-columns: repeat(var(--ml-grid-cols, 2), max-content);
  justify-content: center;
  justify-items: center;
  gap: var(--ml-buttons-gap, 6px);
  align-items: start;
}

.ml-card {
  position: relative;
  min-height: var(--ml-card-min-h-m, 220px);
  background-color: transparent;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}

@media (min-width: 768px) {
  .ml-card {
    min-height: var(--ml-card-min-h-t, 240px);
  }
}

@media (min-width: 1200px) {
  .ml-card {
    min-height: var(--ml-card-min-h-d, 280px);
  }
}

.ml-card.is-overlay-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--ml-card-overlay-opacity, 0.35));
}

.ml-card.is-overlay-on.is-overlay-gradient::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, var(--ml-card-overlay-opacity, 0.35)) 100%);
}

.ml-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ml-card-gap, 0.75rem);
  padding: 1.25rem;
}

.ml-card-y-top { justify-content: flex-start; }
.ml-card-y-center { justify-content: center; }
.ml-card-y-bottom { justify-content: flex-end; }
.ml-card-x-left { text-align: left; align-items: flex-start; }
.ml-card-x-center { text-align: center; align-items: center; }
.ml-card-x-right { text-align: right; align-items: flex-end; }

.ml-card__title {
  margin: 0;
  color: var(--ml-card-title-color, inherit);
  font-size: var(--ml-card-title-size, 28px);
  font-weight: var(--ml-card-title-weight, 700);
  line-height: 1.2;
}

/* Ensure theme styles don't override card typography */
.oz-builder-root .ml-card__title {
  font-size: var(--ml-card-title-size, 28px) !important;
}

.ml-card__desc {
  margin: 0;
  color: var(--ml-card-desc-color, inherit);
  font-size: var(--ml-card-desc-size, 16px);
}

.oz-builder-root .ml-card__desc {
  font-size: var(--ml-card-desc-size, 16px) !important;
}

.ml-card__btn {
  display: inline-flex;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: var(--ml-card-btn-radius, 8px);
  background: var(--ml-card-btn-bg, #1d4ed8);
  color: var(--ml-card-btn-color, #fff);
  font-weight: 600;
}

.ml-card-effect-overlayZoom:hover {
  transform: scale(1.01);
  transition: transform 0.2s ease;
}

/* --- Shortcode block -------------------------------------------------- */

.ml-shortcode:empty {
  display: none;
}

/* --- Spacer / Divider block ------------------------------------------- */

.ml-spacer-divider.ml-mode-spacer {
  height: var(--ml-space-md);
}

.ml-spacer-divider.ml-space-none { height: var(--ml-space-none); }
.ml-spacer-divider.ml-space-xs { height: var(--ml-space-xs); }
.ml-spacer-divider.ml-space-sm { height: var(--ml-space-sm); }
.ml-spacer-divider.ml-space-md { height: var(--ml-space-md); }
.ml-spacer-divider.ml-space-lg { height: var(--ml-space-lg); }
.ml-spacer-divider.ml-space-xl { height: var(--ml-space-xl); }

.ml-spacer-divider.ml-mode-divider {
  height: auto;
  margin-block: var(--ml-space-md);
}

.ml-spacer-divider.ml-mode-divider::before {
  content: "";
  display: block;
  border-top: 1px solid var(--color-border, #d1d5db);
}

.ml-spacer-divider.ml-line-dashed::before {
  border-top-style: dashed;
}

/* --- Mobile button full-width ----------------------------------------- */

@media (max-width: 767px) {
  .ml-button-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .ml-btn {
    width: auto;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    align-self: center;
  }
}