/* ============================================================
   MARE NOSTRUM — SOLO lo que el constructor de Elementor NO puede
   expresar. El resto (tipografía, paddings, márgenes, anchos, alturas,
   colores base, fondos, alineación) vive como AJUSTE NATIVO en
   _elementor_data (ver _scripts/build-home.php y BLUEPRINT-ESTILOS.md).
   Regla: CSS aquí solo cuando Elementor no lo permite desde el panel.
   ============================================================ */

/* ------------------------------------------------------------
   1. HEADER — neutralizar Hello Elementor (impone flex + ancho 1140).
   El diseño es bloque centrado a todo el ancho.
   ------------------------------------------------------------ */
.site-header { display: block !important; width: auto !important; max-width: none !important; left: 0 !important; right: 0 !important; }
.site-header__logo { display: inline-block !important; }
/* Footer a todo el ancho (Hello le impone max-width 1140; el inner se centra a 1380 vía mare-nostrum.css). */
.site-footer { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ------------------------------------------------------------
   2. LÍMITES DE TEXTO EN ch (no hay control de max-width en ch).
   ------------------------------------------------------------ */
/* Headings: el cap en ch funciona en el <h*> interno (no hay control max-width en el panel).
   El hero lleva 16ch (la caja = 983) y el wrapper va a width:100% (nativo) para poder expandirse. */
.mns-hero__title .elementor-heading-title { max-width: 16ch; }
.mns-artist__name, .mns-artist__name .elementor-heading-title { max-width: 14ch; }
/* Text-editor: Elementor fuerza `max-width:100%` a los widgets hijos de contenedor
   con `.e-con>...>.elementor-widget` (especificidad 0,4,0) y no hay control de
   max-width en el panel → !important para el cap en ch del cuerpo de texto. */
.elementor-widget-text-editor.mns-studio__text { max-width: 52ch !important; }
.elementor-widget-text-editor.mns-lead.is-light { max-width: 56ch !important; margin-left: auto; margin-right: auto; }
.elementor-widget-text-editor.mns-contact-lead { max-width: 36ch !important; }

/* ------------------------------------------------------------
   3. CURSIVAS DE ACENTO dentro de títulos: color por <em> (no se puede
   colorear una palabra suelta desde el panel). El color base sí es nativo.
   ------------------------------------------------------------ */
.mns-title em, .mns-title i,
.mns-title .elementor-heading-title em, .mns-title .elementor-heading-title i { font-style: italic; font-weight: 500; color: var(--terracotta); }
.mns-title--olive-em em, .mns-title--olive-em .elementor-heading-title em { color: var(--olive); }
.mns-title.is-light em, .mns-title.is-light .elementor-heading-title em { color: var(--accent-warm-pale); }
.mns-hero__title em, .mns-hero__title i,
.mns-hero__title .elementor-heading-title em, .mns-hero__title .elementor-heading-title i { font-style: italic; font-weight: 500; color: var(--accent-warm); }
.mns-lead em, .mns-lead i { font-style: italic; color: var(--terracotta); }
.mns-lead.is-light em, .mns-lead.is-light i { color: var(--accent-warm-pale); }
.mns-contact-lead em, .mns-contact-lead i { font-style: italic; color: var(--olive); }
.mns-contact-data strong { font-family: var(--font-body); font-weight: 400; }
.mns-contact-data p { margin-bottom: 1.5rem; }
.mns-contact-data { letter-spacing: 0.01em; }

/* ------------------------------------------------------------
   4. OVERLAYS multigradiente (el overlay nativo solo admite UN gradiente).
   El fondo (imagen) sí es nativo; aquí solo va la veladura.
   ------------------------------------------------------------ */
/* Hero */
.mns-hero { position: relative; isolation: isolate; color: #fff; }
.mns-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,24,20,0.55) 0%, rgba(28,24,20,0.35) 30%, rgba(28,24,20,0.32) 60%, rgba(28,24,20,0.7) 100%),
    linear-gradient(90deg, rgba(28,24,20,0.55) 0%, rgba(28,24,20,0.1) 55%, rgba(28,24,20,0) 100%);
}
/* Contenido sobre el overlay. OJO: NO usar `*` aquí (pisaría el position:absolute
   del .hero__scroll y lo sacaría de su sitio). Solo el inner y el wrapper. */
.mns-hero > .e-con-inner { position: relative; z-index: 2; }
.mns-hero__inner { position: relative; z-index: 2; }
/* Título partido en líneas como la muestra: padding/margin por línea para igualar el ALTO
   (la muestra usa .line con overflow:hidden para la animación de subida). */
.mns-hero__title .elementor-heading-title .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.08em; }
/* Animación de entrada: cada palabra "sube" (rise), escalonada (= .hero__title de la muestra). */
.mns-hero__title .word { display: inline-block; opacity: 0; transform: translateY(110%); animation: rise 1.2s var(--ease) forwards; }
.mns-hero__title .line:nth-child(1) .word { animation-delay: 0.35s; }
.mns-hero__title .line:nth-child(1) .word:nth-child(2) { animation-delay: 0.45s; }
.mns-hero__title .line:nth-child(2) .word { animation-delay: 0.55s; }
.mns-hero__title .line:nth-child(2) .word:nth-child(2) { animation-delay: 0.65s; }
.mns-hero__title .line:nth-child(3) .word { animation-delay: 0.75s; }
.mns-hero__title .accent { font-style: italic; font-weight: 500; color: var(--accent-warm); }
/* Indicador "Scroll": el widget HTML de Elementor es position:relative y capturaría
   el absolute del scroll. Se neutraliza para que su bloque contenedor sea el inner
   del hero (a todo el alto) → bottom:2rem (de mare-nostrum.css) cae abajo. */
.mns-hero .elementor-widget-html { position: static !important; }
/* Centrado horizontal con márgenes automáticos en lugar de translateX(-50%): el keyframe
   fadeUp solo define `to { transform: translateY(0) }`, así que al ACABAR la animación deja
   el transform en identidad y el indicador se descentraba ~28.8px a la derecha (no quedaba
   alineado con .intro__rule). Con left/right:0 + margen auto + ancho de contenido el centrado
   es inmune al transform; transform:none deja fadeUp como un simple fundido de opacidad. */
.mns-hero .hero__scroll {
  z-index: 3;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  transform: none;
}
/* CTA del hero: 0.78rem y blanco puro (la muestra usa .hero__cta, 0.78rem; el .link-arrow
   genérico es 0.74rem). Especificidad (0,4,0) para ganar a la regla base .mns-cta (0,3,0),
   que va después en el fichero. */
.elementor-widget.mns-cta.mns-cta--hero .elementor-button,
.elementor-button.mns-cta.mns-cta--hero {
  font-size: 0.78rem !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.7) !important;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 1s 1s var(--ease) forwards;
}
/* La muestra ADAPTA el hero en viewports BAJOS (@media max-height:820 + min-width:1024).
   Elementor NO tiene breakpoints por ALTURA (solo por ancho) → se replica por CSS.
   El font-size del H1 lo fija el CSS por-post de Elementor (especificidad alta) → !important. */
@media (max-height: 820px) and (min-width: 1024px) {
  .mns-hero__title .elementor-heading-title { font-size: clamp(2.4rem, 5.4vw, 5rem) !important; }
  .mns-hero__title { margin-bottom: 1.85rem !important; }
  .mns-hero--home > .e-con-inner { padding-top: 195px !important; }
}
/* Hero en MÓVIL (= .hero/.hero__title @media max-width:720 de la muestra): fuente mayor (11vw),
   contenido alineado abajo. (El header/scroll móvil ya adapta vía mare-nostrum.css.) */
@media (max-width: 767px) {
  .mns-hero__title .elementor-heading-title { font-size: clamp(2.4rem, 11vw, 4.5rem) !important; }
  /* Hero de la home centrado verticalmente en móvil (a petición del cliente).
     Padding superior e inferior iguales (despejan el header) para un centrado real. */
  .mns-hero--home > .e-con-inner { justify-content: center !important; padding-top: 175px !important; padding-bottom: 175px !important; }
  .mns-hero__inner { padding-bottom: 0 !important; }
}

/* Encargos (diagonal cálido + veladura) */
.mns-overlay { position: relative; isolation: isolate; color: var(--bone); }
.mns-overlay::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(180,97,61,0.78) 0%, rgba(143,74,42,0.72) 60%, rgba(107,56,32,0.85) 100%),
    linear-gradient(180deg, rgba(43,38,32,0.25), rgba(43,38,32,0.45));
}
.mns-overlay > .e-con-inner { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   5. ARTISTAS — rejilla asimétrica 3 col (los spans/auto-rows no son
   configurables limpiamente desde el panel). El padding/fondo de cada
   tarjeta es nativo; aquí solo el grid, el degradado y el apilado de texto.
   ------------------------------------------------------------ */
.mns-artists-grid,
.mns-artists-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(14rem, 22vw, 24rem);
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  width: 100%;
}
.mns-artists-grid > .e-con:nth-child(1),
.mns-artists-grid > .e-con-inner > .e-con:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.mns-artists-grid > .e-con:nth-child(2),
.mns-artists-grid > .e-con-inner > .e-con:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.mns-artists-grid > .e-con:nth-child(3),
.mns-artists-grid > .e-con-inner > .e-con:nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }

/* Tarjeta-póster: overlay degradado + nombre por encima */
.mns-artist { position: relative; overflow: hidden; isolation: isolate; min-height: 0; }
.mns-artist::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,24,20,0.35) 0%, rgba(28,24,20,0.08) 22%, rgba(28,24,20,0) 42%, rgba(28,24,20,0.25) 62%, rgba(28,24,20,0.78) 100%),
    linear-gradient(90deg, rgba(28,24,20,0.4) 0%, rgba(28,24,20,0) 55%);
}
.mns-artist > .e-con-inner,
.mns-artist .elementor-widget { position: relative; z-index: 2; }
/* CTA "Descubrir sus obras": hover por tarjeta (la muestra usa .artist__poster:hover) */
.mns-artist:hover .artist__cta { gap: 1.6rem; border-color: #fff; }
.mns-artist:hover .artist__cta svg { transform: translateX(4px); }
/* CTA como enlace real (el link de contenedor de Elementor no se renderiza en esta versión).
   El ::after amplía el área clicable a toda la fila del botón. La tarjeta entera clicable como
   en la muestra no sale limpio solo con CSS (el .e-con-inner posicionado, en flex-end, solo
   ocupa la banda inferior); si se quiere, se añade con un toque de JS. */
.mns-artist a.artist__cta { text-decoration: none; color: rgba(255,255,255,0.95); }
/* En hover el texto se mantiene blanco (como <a>, heredaba el color de enlace del kit). */
.mns-artist a.artist__cta:hover,
.mns-artist a.artist__cta:focus,
.mns-artist:hover a.artist__cta { color: #fff; }
.mns-artist a.artist__cta::after { content: ''; position: absolute; inset: 0; z-index: 3; }

@media (max-width: 1024px) {
  .mns-artists-grid,
  .mns-artists-grid > .e-con-inner { grid-template-columns: 1fr; grid-auto-rows: clamp(18rem, 55vw, 30rem); }
  .mns-artists-grid > .e-con:nth-child(n),
  .mns-artists-grid > .e-con-inner > .e-con:nth-child(n) { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------------
   6. ESTUDIO — la media a sangre necesita cubrir la celda; en móvil
   (apilado nativo) requiere alto propio.
   ------------------------------------------------------------ */
.mns-studio__media { background-size: cover; background-position: center center; }
@media (max-width: 1024px) {
  .mns-studio__media { min-height: 60vh; }
}

/* ------------------------------------------------------------
   7. BOTÓN EDITORIAL (.mns-cta): el kit global de Elementor impone
   Roboto + fondo verde. El look "enlace subrayado" exige neutralizarlo
   (no basta el panel porque el kit gana en especificidad/!important).
   ------------------------------------------------------------ */
.elementor-widget.mns-cta .elementor-button,
.elementor-button.mns-cta {
  display: inline-flex !important; align-items: center !important; gap: 1rem !important;
  background: transparent !important; background-color: transparent !important;
  color: var(--olive) !important;
  border: 0 !important; border-bottom: 1px solid var(--olive) !important;
  border-radius: 0 !important;
  padding: 0 0 0.45rem !important;
  font-family: var(--font-body) !important; font-size: 0.74rem !important; font-weight: 400 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  fill: currentColor !important;
  transition: gap .4s var(--ease), color .3s var(--ease), border-color .3s var(--ease) !important;
}
/* Flecha (→) idéntica a la muestra: SVG como mask (hereda color, anima en hover). */
.mns-cta .elementor-button::after {
  content: ''; width: 32px; height: 10px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><path d='M0 5h30M26 1l4 4-4 4' fill='none' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><path d='M0 5h30M26 1l4 4-4 4' fill='none' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
  transition: transform .4s var(--ease);
}
.mns-cta .elementor-button:hover { gap: 1.6rem !important; }
.mns-cta .elementor-button:hover::after { transform: translateX(4px); }
.elementor-widget.mns-cta .elementor-button:hover,
.elementor-button.mns-cta:hover { background: transparent !important; color: var(--olive-deep) !important; border-bottom-color: var(--olive-deep) !important; }
.elementor-widget.mns-cta.is-light .elementor-button,
.elementor-button.mns-cta.is-light { color: var(--bone) !important; border-bottom-color: rgba(255,255,255,0.7) !important; }
.elementor-widget.mns-cta.is-light .elementor-button:hover,
.elementor-button.mns-cta.is-light:hover { color: #fff !important; border-bottom-color: #fff !important; }

/* ------------------------------------------------------------
   8b. BOTÓN-CAJA (.mns-btn / .mns-btn--light) = .btn-primary de la muestra
   (borde + relleno, no enlace subrayado). Usado en "A Medida".
   ------------------------------------------------------------ */
.elementor-widget.mns-btn .elementor-button,
.elementor-button.mns-btn {
  display: inline-flex !important; align-items: center !important; gap: 1rem !important;
  padding: 1.05rem 2rem !important;
  font-family: var(--font-body) !important; font-size: 0.74rem !important; font-weight: 400 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  border-radius: 0 !important;
  background: var(--olive) !important; background-color: var(--olive) !important;
  color: var(--bone) !important;
  border: 1px solid var(--olive) !important;
  fill: currentColor !important;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), gap .4s var(--ease) !important;
}
.elementor-widget.mns-btn .elementor-button:hover,
.elementor-button.mns-btn:hover {
  background: transparent !important; color: var(--olive-deep) !important; border-color: var(--olive-deep) !important; gap: 1.6rem !important;
}
/* Variante clara (sobre fondos oscuros: A Medida) */
.elementor-widget.mns-btn--light .elementor-button,
.elementor-button.mns-btn--light {
  background: transparent !important; color: var(--bone) !important; border-color: rgba(255,255,255,0.75) !important;
}
.elementor-widget.mns-btn--light .elementor-button:hover,
.elementor-button.mns-btn--light:hover {
  background: var(--bone) !important; color: var(--ink) !important; border-color: var(--bone) !important;
}
/* Flecha (→) dentro del botón-caja */
.mns-btn .elementor-button::after {
  content: ''; width: 32px; height: 10px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><path d='M0 5h30M26 1l4 4-4 4' fill='none' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><path d='M0 5h30M26 1l4 4-4 4' fill='none' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
  transition: transform .4s var(--ease);
}
.mns-btn .elementor-button:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------
   9. PAGE-HERO (páginas interiores). Layout (min-height, padding, flex,
   imagen de fondo, color) = AJUSTE NATIVO. Aquí solo lo no expresable:
   la veladura multigradiente (::before), el cap del título en ch y el
   color del <em>. Espejo de .mns-hero pero con los gradientes de .page-hero.
   ------------------------------------------------------------ */
.mns-page-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.mns-page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,24,20,0.5) 0%, rgba(28,24,20,0.35) 40%, rgba(28,24,20,0.65) 100%),
    linear-gradient(90deg, rgba(28,24,20,0.45) 0%, rgba(28,24,20,0.05) 60%, rgba(28,24,20,0) 100%);
}
.mns-page-hero > .e-con-inner { position: relative; z-index: 2; }
.mns-page-hero__inner { position: relative; z-index: 2; }
/* Cap del título en ch (no hay control max-width en ch en el panel). */
.mns-page-hero__title .elementor-heading-title { max-width: 22ch; }
.mns-page-hero__title em, .mns-page-hero__title .elementor-heading-title em { font-style: italic; font-weight: 500; color: var(--accent-warm-pale); }
.mns-page-hero__lead { max-width: 56ch; }
.mns-page-hero__lead em, .mns-page-hero__lead .elementor-heading-title em { font-style: italic; color: var(--accent-warm-pale); }

/* ------------------------------------------------------------
   10. PAGE-INTRO (texto editorial bajo el hero): em en terracota.
   ------------------------------------------------------------ */
.mns-page-intro__text em, .mns-page-intro__text i { font-style: italic; color: var(--terracotta); }

/* ------------------------------------------------------------
   8. FORMULARIO de contacto (widget Form de Elementor Pro, .mns-form).
   El diseño de la muestra (.contact-form) es minimalista: inputs SOLO con
   subrayado, labels olive en versalitas, botón-caja olive. Ni el kit ni los
   controles del widget lo expresan limpiamente → se ajusta aquí.
   ------------------------------------------------------------ */
/* Pila de campos = .contact-form (flex col, gap 2rem) */
.mns-form .elementor-form-fields-wrapper { display: flex; flex-direction: column; gap: 2rem; margin: 0; }
.mns-form .elementor-field-group { width: 100% !important; max-width: 100% !important; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding: 0 !important; margin: 0 !important; }
/* Label = .contact-form__label */
.mns-form .elementor-field-group > label,
.mns-form .elementor-field-group .elementor-field-label {
  color: var(--olive) !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important; font-weight: 400 !important;
  letter-spacing: 0.28em !important; text-transform: uppercase !important;
  margin: 0 !important; padding: 0 !important;
}
/* Input/textarea = .contact-form__input (solo borde inferior) */
.mns-form .elementor-field-textual {
  font-family: var(--font-body) !important; font-size: 1rem !important; color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  padding: 0.85rem 0 !important; width: 100% !important; box-shadow: none !important;
  transition: border-color 0.3s var(--ease) !important;
}
.mns-form textarea.elementor-field-textual { resize: vertical; min-height: 7rem; line-height: 1.6; }
.mns-form .elementor-field-textual:focus { outline: none; border-bottom-color: var(--olive) !important; }
.mns-form .elementor-field-textual::placeholder { color: var(--ink-mute); opacity: 0.7; }
/* Botón "Enviar consulta" = .btn-primary (caja olive + flecha) */
.mns-form .elementor-field-type-submit { margin-top: 0.5rem; align-items: flex-start; }
.mns-form .elementor-button {
  width: auto !important; align-self: flex-start !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 1rem !important;
  padding: 1.05rem 2rem !important;
  font-family: var(--font-body) !important; font-size: 0.74rem !important; font-weight: 400 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  border-radius: 0 !important;
  background: var(--olive) !important; color: var(--bone) !important; border: 1px solid var(--olive) !important;
  min-height: 0 !important;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), gap .4s var(--ease) !important;
}
.mns-form .elementor-button:hover { background: transparent !important; color: var(--olive-deep) !important; border-color: var(--olive-deep) !important; gap: 1.6rem !important; }
.mns-form .elementor-button .elementor-button-text { display: inline; }
/* Flecha (→) tras el texto del botón */
.mns-form .elementor-button .elementor-button-content-wrapper::after {
  content: ''; width: 32px; height: 10px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><path d='M0 5h30M26 1l4 4-4 4' fill='none' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><path d='M0 5h30M26 1l4 4-4 4' fill='none' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
  transition: transform .4s var(--ease);
}
.mns-form .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(4px); }
.mns-form .elementor-message { font-size: 0.85rem; font-style: italic; letter-spacing: 0.04em; }