/* MelosoBase: CSS estructural. Los colores y tipografías provienen de theme.json. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }
.meloso-site-header { position: relative; z-index: 30; background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--border); }
.meloso-site-header .wp-block-site-title { margin: 0; font-weight: 800; letter-spacing: -.04em; font-size: clamp(1.15rem,2vw,1.42rem); }
.meloso-site-header .wp-block-site-title a { color: var(--wp--preset--color--heading); text-decoration: none; }
.meloso-site-header .wp-block-navigation-item__content { text-decoration: none; }
.meloso-site-footer { background: var(--wp--preset--color--soft); border-top: 1px solid var(--wp--preset--color--border); }
.meloso-site-footer .wp-block-site-title { font-size: 1.15rem; font-weight: 750; }
.meloso-hero { padding-block: clamp(4rem, 8vw, 8.5rem); background: var(--wp--preset--color--background); overflow: hidden; }
.meloso-hero h1 { max-width: 14ch; }
.meloso-hero p { max-width: 57ch; }
.meloso-eyebrow { font-size: .75rem !important; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.meloso-section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.meloso-section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.meloso-card { height: 100%; padding: clamp(1.4rem,3vw,2.2rem); border-radius: 20px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface); box-shadow: 0 12px 32px rgba(15,39,50,.035); }
.meloso-card h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.meloso-round { border-radius: 24px; overflow: hidden; }
.meloso-art { min-height: 390px; border: 1px solid var(--wp--preset--color--border); border-radius: 28px; background: radial-gradient(circle at 75% 22%, var(--wp--preset--color--accent) 0, transparent 32%), radial-gradient(circle at 30% 72%, var(--wp--preset--color--primary) 0, transparent 44%), var(--wp--preset--color--soft); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.meloso-art-panel { width: min(100%, 330px); border-radius: 20px; background: var(--wp--preset--color--surface); padding: clamp(1.5rem,3vw,2rem); border: 1px solid var(--wp--preset--color--border); box-shadow: 0 22px 65px rgba(0,0,0,.09); transform: rotate(-3deg); }
.meloso-art-panel .wp-block-separator { margin-block: 1rem; }
.meloso-pill { display: inline-flex; padding: .4rem .85rem; background: var(--wp--preset--color--soft); border: 1px solid var(--wp--preset--color--border); border-radius: 99px; }
.meloso-cta { padding: clamp(2rem,5vw,4rem); border-radius: 28px; background: var(--wp--preset--color--soft); }
.meloso-feature-rule { border-top: 1px solid var(--wp--preset--color--border); padding-top: 1.2rem; }
.meloso-page-top { padding-top: clamp(3rem,6vw,5rem); }
.meloso-post-meta { color: var(--wp--preset--color--muted); }
.wp-block-post-title a { text-decoration: none; }
.wp-block-query-pagination { margin-top: 2.5rem; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--primary); border-color: currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--soft); }
:where(button, a, input, textarea, select, .wp-block-navigation-item__content):focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }
:where(input:not([type=checkbox]):not([type=radio]), textarea, select) { max-width: 100%; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--text); }
/* Estilos de integración generales: no sustituyen el CSS ni las plantillas de WooCommerce. */
.woocommerce div.product .product_title { color: var(--wp--preset--color--heading); }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button { border-radius: 999px; }
@media (max-width: 781px) {
  .meloso-hero { padding-block: 3.6rem 4rem; }
  .meloso-hero h1 { max-width: none; }
  .meloso-art { min-height: 270px; }
  .meloso-art-panel { transform: none; }
  .meloso-card { padding: 1.3rem; }
  .meloso-site-header .wp-block-navigation { margin-left: auto; }
  .meloso-site-header > .wp-block-group { gap: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}