/* OMN-238 · Presentación compartida. No reescribir .ob-*, .omnia-* ni .oi-*.
 * El padding del body puede pertenecer al sticky de OMNIA WP: no tocarlo.
 * Las clases omt-* son propiedad del tema; el contenido legado conserva sus estilos. */

:where(.omt-header, .omt-footer, .omt-hero, .omt-section, .omt-page, .omt-archive, .omt-cta, .omt-specification) {
  box-sizing: border-box;
}
:where(.omt-header, .omt-footer, .omt-hero, .omt-section, .omt-cta) :where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--teal);
  outline-offset: 4px;
  border-radius: 3px;
}
:where(.omt-cta, .omt-footer) a:focus-visible { outline-color: var(--wp--preset--color--lime); }
.omt-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); }
.omt-header__inner { min-height: 88px; gap: 2rem; padding-block: 1.25rem; }
.omt-brand { flex-shrink: 0; gap: 0.65rem; }
.omt-brand .wp-block-site-logo img { max-height: 56px; width: auto; }
.omt-header .wp-block-navigation-item__content { padding-block: 0.65rem; }
.omt-header .wp-block-navigation { margin-left: auto; }
.omt-header .wp-block-navigation__responsive-container-open,
.omt-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.omt-eyebrow, .is-style-omt-eyebrow { color: var(--wp--preset--color--muted); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; }
.omt-hero { padding-block: clamp(3.5rem, 6vw, 6rem); }
.omt-hero__columns { gap: clamp(2rem, 6vw, 6rem); align-items: center !important; }
.omt-hero__title { max-width: 12ch; margin-block: 1.5rem !important; font-weight: 550; letter-spacing: -0.055em; line-height: 1.04; }
.omt-hero__lead { max-width: 42ch; color: var(--wp--preset--color--muted); }
.omt-hero__actions { gap: 0.75rem; margin-top: 2rem !important; }
.omt-hero__note { max-width: 48ch; margin-top: 1.5rem !important; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.omt-study { position: relative; background: var(--wp--preset--color--mineral); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; overflow: hidden; }
.omt-study__art { margin: 0 !important; }
/* Proporción intrínseca del SVG600×630. Reservar espacio en CSS mantiene el HTML
 * canónico de core/image sin dimensiones que sus atributos no han declarado. */
.omt-study__art img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 21; }
.omt-study__caption { margin: 0 !important; border-top: 1px solid var(--wp--preset--color--line); padding: 1rem 1.25rem; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--wp--preset--color--muted); }
.omt-topic-strip { border-block: 1px solid var(--wp--preset--color--line); padding-block: 1.15rem; gap: 0.75rem 2rem; }
.omt-topic-strip p { margin: 0; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.omt-section { padding-block: var(--wp--preset--spacing--90); }
.omt-section__intro { max-width: 760px; margin-bottom: 2.5rem !important; }
.omt-section__intro h2 { max-width: 22ch; }
.omt-section__intro > p:last-child { color: var(--wp--preset--color--muted); max-width: 60ch; }
.omt-cards { gap: 1.25rem; align-items: stretch !important; }
.omt-card { height: 100%; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--paper); }
.omt-card__number { width: 2.4rem; min-height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--teal); }
.omt-card h3 { margin-top: 2rem; }
.omt-card > p { color: var(--wp--preset--color--muted); font-size: 1rem; }
.omt-card .wp-block-buttons { margin-top: 2rem; }
.omt-card .wp-block-button.is-style-outline .wp-block-button__link { padding: 0.6rem 0; border: 0; background: transparent; color: var(--wp--preset--color--teal); text-align: left; }
.omt-card .wp-block-button.is-style-outline .wp-block-button__link:hover { text-decoration: underline; }
.omt-section--mineral { background: var(--wp--preset--color--mineral); }
.omt-service-row { padding-block: 1.5rem; margin-top: 0 !important; border-top: 1px solid var(--wp--preset--color--line); gap: 1.5rem; }
.omt-service-row:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.omt-service-row h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.omt-service-row p { color: var(--wp--preset--color--muted); font-size: 1rem; }
.omt-process { gap: 2rem; }
.omt-process h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.omt-process p { font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.omt-process__step { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.5rem; }
.omt-process__step > p:first-child { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--teal); }
.omt-cta { padding: clamp(2rem, 5vw, 4rem); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-radius: 16px; }
.omt-cta h2 { max-width: 20ch; }
.omt-cta p { max-width: 52ch; color: var(--wp--preset--color--line); }
.omt-cta .wp-block-button__link { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }
.omt-cta .wp-block-button__link:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.omt-footer { margin-top: 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding-block: 3rem 1.5rem; }
.omt-footer__top { align-items: flex-start; gap: 3rem; }
.omt-footer .wp-block-site-title a { color: var(--wp--preset--color--paper); }
.omt-footer a { color: var(--wp--preset--color--line); text-decoration: none; }
.omt-footer a:hover { text-decoration: underline; }
.omt-footer p { font-size: 0.875rem; color: var(--wp--preset--color--line); }
.omt-footer__nav { gap: 0.35rem; }
.omt-footer__nav a { display: inline-block; padding-block: 0.45rem; }
.omt-footer__bottom { padding-top: 1.5rem; margin-top: 3rem !important; border-top: 1px solid var(--wp--preset--color--muted); gap: 1rem; }
.omt-footer__bottom p { font-size: 0.75rem; }
.omt-page, .omt-archive { margin-top: 0; padding-block: clamp(2.5rem, 5vw, 5rem); }
.omt-page--plain { padding-top: 2rem; }
.omt-page--full { margin-top: 0; padding: 0; }
.omt-page__title { margin-bottom: 2rem; }
.omt-post-header { margin-bottom: 3rem; }
.omt-post-header .wp-block-post-title { max-width: 22ch; }
.omt-post-meta { gap: 1rem; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.omt-post-featured { margin-block: 2rem; }
.omt-post-featured img { border-radius: 12px; }
.omt-post-grid { gap: 2rem; }
.omt-post-card { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; height: 100%; }
.omt-post-card__body { padding: 1.5rem; }
.omt-post-card .wp-block-post-title { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.025em; }
.omt-post-card .wp-block-post-featured-image { margin: 0; }
.omt-post-card .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; }
.omt-pagination { gap: 0.75rem; padding-top: 2rem; font-size: 0.9375rem; }
.omt-pagination :where(a, .page-numbers) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.omt-comments { border-top: 1px solid var(--wp--preset--color--line); margin-top: 4rem; padding-top: 2rem; }
.omt-comments :where(input:not([type="checkbox"]), textarea) { max-width: 100%; box-sizing: border-box; border: 1px solid var(--wp--preset--color--muted); border-radius: 8px; padding: 0.75rem; font: inherit; }
.omt-comments :where(input, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 3px; }
.omt-comments .comment-form-cookies-consent { font-size: 0.875rem; }
.is-style-omt-panel { background: var(--wp--preset--color--mineral); padding: 2rem; border-radius: 12px; }
.is-style-omt-outline { border: 1px solid var(--wp--preset--color--line); padding: 2rem; border-radius: 12px; }
.is-style-omt-specification { overflow-x: auto; }
.is-style-omt-specification table { border-collapse: collapse; width: 100%; }
.is-style-omt-specification :where(td, th) { padding: 1rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; font-size: 1rem; }
.is-style-omt-specification th { background: var(--wp--preset--color--mineral); font-weight: 600; }
.omt-specification { padding-block: 3rem; }
.omt-specification__notice { border-left: 3px solid var(--wp--preset--color--teal); padding-left: 1rem; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
/* Publicidad opt-in: el contenedor mantiene su geometría aunque no haya anuncio.
 * SDK, consentimiento y selección de inventario son una integración futura. */
.omt-ad { margin-block: 3rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--mineral); border-radius: 8px; padding: 0.75rem; }
.omt-ad__label { margin: 0 !important; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.omt-ad__space { min-height: 250px; display: grid; place-items: center; }
.omt-ad__space p { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.omt-empty { padding-block: 4rem; }
.omt-empty h1 { max-width: 15ch; }
.omt-empty .wp-block-search { max-width: 36rem; }
.omt-empty .wp-block-search__input { min-width: 0; border: 1px solid var(--wp--preset--color--muted); border-radius: 8px; padding: 0.75rem; font: inherit; }
.omt-empty .wp-block-search__button { margin-left: 0.5rem; }
.omt-commerce { padding-block: 3rem 5rem; }

@media (max-width: 1100px) and (min-width: 783px) {
  .omt-header__inner { gap: 1.25rem; }
  .omt-header .wp-block-navigation { font-size: 0.8125rem; }
  .omt-header .wp-block-navigation__container { gap: 1rem; }
}
@media (max-width: 782px) {
  .omt-header__inner { min-height: 76px; gap: 1rem; flex-wrap: wrap !important; }
  .omt-header .wp-block-navigation { order: 3; }
  .omt-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .omt-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  /* OMN-254. El menú móvil y el buscador son dos capas de pantalla completa que
     salen de la misma fila de la cabecera. Comparten superficie a propósito: así el
     visitante aprende un solo idioma de «capa», en vez de encontrarse un overlay
     blanco de WordPress junto a uno negro del tema. El negro y el Green Glow son los
     mismos de `search.css`, tomados del token, sin repetir un hex.
     Si algún día se decide que el menú lleve superficie clara propia, se cambia aquí:
     es un bloque acotado a `.omt-header` y no toca la navegación de escritorio. */
  /* El núcleo pinta el overlay de blanco con
     `.wp-block-navigation:not(.has-background) … .is-menu-open`, que tiene la MISMA
     especificidad que un selector de dos clases: sin igualar su forma, quién gana
     depende del orden de carga de las hojas. Se repite su estructura y se añade
     `.omt-header`, así que gana siempre y sin `!important`. */
  /* OMN-254 · zona del pulgar. El menú NO ocupa la pantalla entera: es un panel
     anclado abajo a la derecha, donde alcanza el pulgar de una mano.
     El patrón es de Google — el botón flotante de Material Design, el que Gmail y
     Android popularizaron desde 2014. De ahí lo tomó todo el mundo, Orbital incluido.
     La implementación es propia.
     Un menú a pantalla completa con el cierre arriba obliga a recolocar el teléfono
     en cuanto la pantalla pasa de 6". El velo oscuro detrás sigue cubriendo todo,
     así que el contenido de atrás no compite y la capa se entiende como modal. */
  .omt-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
  .omt-header .wp-block-navigation__responsive-container.is-menu-open {
    padding: 0;
    background-color: color-mix(in srgb, #000 78%, transparent);
    color: var(--wp--preset--color--paper);
    color-scheme: dark;
    /* El contenedor sigue cubriendo el viewport: es el velo. El panel va dentro. */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    width: min(20rem, calc(100vw - 2rem));
    /* `margin-left: auto` empuja el panel a la derecha pase lo que pase con el
       alineado del contenedor, que lo fija el nucleo y puede cambiar. */
    margin: 0 1rem max(1.25rem, env(safe-area-inset-bottom)) auto;
    max-height: min(72dvh, 31rem);
    display: flex;
    flex-direction: column;
    background-color: #000;
    border: 1px solid #344034;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgb(0 0 0 / 55%);
  }
  /* El botón de cerrar baja al panel y se alinea a la derecha, al alcance del pulgar. */
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: static;
    order: 2;               /* al final del panel, no arriba */
    align-self: stretch;
    margin: 0;
    width: 100%;
    min-height: 48px;
    /* El glifo va al lado derecho: mismo lado del pulgar que abre el menu. */
    justify-content: flex-end;
    padding-right: 1rem;
    border-top: 1px solid #344034;
    color: var(--wp--preset--color--brand-green);
  }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { order: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
      animation: omt-menu-entra 220ms ease-out;
    }
  }
  @keyframes omt-menu-entra { from { transform: translateX(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--brand-green); }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 0 1rem 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; gap: 0; }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid #344034; }
  /* El enlace se estira al alto del `li`, así que con `display:block` el texto
     quedaba pegado arriba y el separador flotando muy por debajo. Se centra. */
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0.45rem 0.25rem;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--paper);
  }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
  .omt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--brand-green); }
  .omt-header .wp-block-navigation__responsive-container.is-menu-open :focus-visible { outline: 3px solid var(--wp--preset--color--brand-green); outline-offset: 4px; }
  .omt-hero__title { max-width: 15ch; }
  .omt-hero__columns { gap: 2.5rem; }
  .omt-study { max-width: 32rem; }
  .omt-service-row { gap: 0.75rem; }
  .omt-footer__top { gap: 2rem; }
  .omt-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .omt-header__inner { gap: 0.65rem; }
  .omt-brand .wp-block-site-logo img { max-width: 48px; }
  .omt-hero__actions { align-items: stretch !important; flex-direction: column; }
  .omt-hero__actions .wp-block-button, .omt-hero__actions .wp-block-button__link { width: 100%; box-sizing: border-box; }
  .omt-post-grid { grid-template-columns: minmax(0, 1fr); }
  .omt-cta { border-radius: 12px; }
  .is-style-omt-specification :where(td, th) { padding: 0.75rem; font-size: 0.875rem; }
  .omt-empty .wp-block-search__inside-wrapper { flex-direction: column; gap: 0.75rem; }
  .omt-empty .wp-block-search__button { margin: 0; }
}
