.elementor-kit-7{--e-global-color-primary:#0A0A0A;--e-global-color-secondary:#141414;--e-global-color-text:#EDEDED;--e-global-color-accent:#FB6D04;--e-global-color-rojo001:#B11F1D;--e-global-color-grissec:#A3A3A3;--e-global-color-linea:#EDEDED24;--e-global-color-lineafuerte:#EDEDED52;--e-global-typography-primary-font-family:"Boldonse";--e-global-typography-primary-font-size:clamp(1.6rem, 8.2vw, 5.5rem);--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.3em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Schibsted Grotesk";--e-global-typography-secondary-font-size:1.0625rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-text-font-family:"Schibsted Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Schibsted Grotesk";--e-global-typography-accent-font-size:0.8125rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.16em;--e-global-typography-mega-font-family:"Boldonse";--e-global-typography-mega-font-size:clamp(1.6rem, 8.2vw, 5.5rem);--e-global-typography-mega-font-weight:400;--e-global-typography-mega-text-transform:uppercase;--e-global-typography-mega-line-height:1.3em;--e-global-typography-mwtit-font-family:"Boldonse";--e-global-typography-mwtit-font-size:clamp(1.6rem, 8.2vw, 5.5rem);--e-global-typography-mwtit-font-weight:400;--e-global-typography-mwtit-text-transform:uppercase;--e-global-typography-mwtit-line-height:1.3em;--e-global-typography-mwtit-letter-spacing:-0.02em;--e-global-typography-mwtit2-font-family:"Boldonse";--e-global-typography-mwtit2-font-size:clamp(1.6rem, 4.4vw, 3.5rem);--e-global-typography-mwtit2-font-weight:400;--e-global-typography-mwtit2-text-transform:uppercase;--e-global-typography-mwtit2-line-height:1.3em;--e-global-typography-mwtit2-letter-spacing:-0.02em;--e-global-typography-mwpieza-font-family:"Boldonse";--e-global-typography-mwpieza-font-size:clamp(1rem, 4.5vw, 6rem);--e-global-typography-mwpieza-font-weight:400;--e-global-typography-mwpieza-text-transform:uppercase;--e-global-typography-mwpieza-line-height:1.3em;--e-global-typography-mwetiq-font-family:"Schibsted Grotesk";--e-global-typography-mwetiq-font-size:clamp(1.125rem, 1.5vw, 1.5rem);--e-global-typography-mwetiq-font-weight:400;--e-global-typography-mwetiq-font-style:italic;--e-global-typography-mwetiq-line-height:1.3em;--e-global-typography-mwcuerpo-font-family:"Schibsted Grotesk";--e-global-typography-mwcuerpo-font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);--e-global-typography-mwcuerpo-font-weight:400;--e-global-typography-mwcuerpo-line-height:1.65em;--e-global-typography-mwmeta-font-family:"Schibsted Grotesk";--e-global-typography-mwmeta-font-size:0.8125rem;--e-global-typography-mwmeta-font-weight:400;--e-global-typography-mwmeta-text-transform:uppercase;--e-global-typography-mwmeta-letter-spacing:0.16em;--e-global-typography-mwboton-font-family:"Schibsted Grotesk";--e-global-typography-mwboton-font-size:0.9375rem;--e-global-typography-mwboton-font-weight:700;--e-global-typography-mwboton-text-transform:uppercase;--e-global-typography-mwboton-letter-spacing:0.08em;background-color:#0A0A0A;color:#EDEDED;font-family:"Schibsted Grotesk", Sans-serif;font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.65em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Schibsted Grotesk", Sans-serif;font-size:0.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var( --e-global-color-primary );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;padding:0.85rem 1.4rem 0.85rem 1.4rem;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:#0A0A0A00;color:var( --e-global-color-accent );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#FB6D04;}.elementor-kit-7 a:hover{color:#EDEDED;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1000px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:700px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Mylan Westers · CSS del kit de Elementor (Ajustes del sitio → CSS personalizado).
   Lo que sale en más de una plantilla y el panel no sabe expresar. Traducido de css/mylan-westers.css;
   origen de cada valor en docs/diseno-tokens.md. Colores y tipografías son los globales del kit: aquí
   solo se les da nombre corto. Lo de una sola sección vive en el CSS de su contenedor, anclado a su #id.
   Generado desde wordpress/css/kit.css por wordpress/volcar.py: se edita en el repo. */

/* Los colores salen de los globales, que Elementor declara en la clase del kit (en <body>): van en body. Los
   valores sueltos, en :root, para que también los vea html (scroll-padding-top; trampa §60). */
body {
  --tinta: var(--e-global-color-primary);
  --panel: var(--e-global-color-secondary);
  --hueso: var(--e-global-color-text);
  --marca: var(--e-global-color-accent);
  --rojo: var(--e-global-color-rojo001);
  --gris: var(--e-global-color-grissec);
  --linea: var(--e-global-color-linea);
  --linea-fuerte: var(--e-global-color-lineafuerte);
  --f-titular: var(--e-global-typography-primary-font-family), "Arial Black", Impact, sans-serif; /* Boldonse */
  -webkit-font-smoothing: antialiased;
}
:root {
  --t-meta: 0.8125rem;
  --tracking-meta: 0.16em;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --seccion: clamp(4.5rem, 10vw, 9rem);
  --hueco: clamp(1rem, 2vw, 1.5rem);
  --lectura: 46rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Saltos a un ancla (menú, «Book Mylan», la cinta): el titular queda debajo de la tarjeta del menú, que está fija
   arriba, y no detrás; la sección ya trae su padding. Elementor 4.3 deja el salto al navegador, así que esto es lo
   que manda. Suma la barra de administración, que baja la tarjeta cuando hay sesión iniciada. Las variables, en
   :root (trampa §60). Hasta el 07/10, la altura de la barra pegajosa del diseño anterior (72 px). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: max(1rem, calc(var(--alto-tarjeta) - var(--seccion) + var(--wp-admin--admin-bar--height, 0px)));
}
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
/* El reset.css de Hello pone a los enlaces y botones su propio foco (0-1-1, contorno negro de 2 px) y gana a
   la regla de arriba (0-1-0): sobre la tinta, el foco no se veía en ningún enlace (QA del 01/10). Con :root
   delante, 0-2-1. Los campos del formulario y el menú llevan el suyo y no cambian. */
:root a:focus-visible,
:root button:focus-visible,
:root [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; box-shadow: none; }

/* Las páginas que no son de Elementor (la tienda, la ficha, el carrito, el pago y la cuenta, con la plantilla del
   tema) empiezan debajo de la tarjeta del menú, que está fija arriba a la izquierda y taparía su título. */
.site-main { padding-block-start: calc(var(--alto-tarjeta) + 1rem); }

/* Componentes: márgenes que el build local da por clase. El panel de estos widgets queda vacío.
   A 0-3-0 con «.e-con» delante: Elementor anula el margen de los widgets con
   «.e-con .elementor-widget.elementor-widget» (0-3-0) y a 0-2-0 esta regla pierde sin avisar. La entrada, con el
   .elementor-kit-7 largo: el max-width: 100 % de Elementor a los widgets es 0-4-0 (trampa §52). */
.e-con.e-con > .elementor-widget.entrada,
.e-con.e-con > .e-con-inner > .elementor-widget.entrada { margin-block-start: 1.25rem; max-width: 46ch; }
.e-con .elementor-element.botones { margin-block-start: 2rem; }

/* Párrafos hechos con el widget Heading (etiqueta p): Elementor les pone line-height 1 y el cuerpo
   del build local va a 1,65. Los que tienen interlineado propio en el panel ganan (0-4-0). */
.elementor-widget-heading p.elementor-heading-title { line-height: 1.65; }

/* Botones. La base (color, borde, tipografía, padding) está en Ajustes del sitio → Botones.
   Aquí va lo que el panel no tiene: alto mínimo, transición y las variantes. Las variantes suben a
   0-3-0 (.elementor-widget-button.clase …) porque el CSS del kit carga primero y pierde los empates
   contra el de cada plantilla (kit 07 §3). No simplificar. */
.elementor-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.elementor-button .flecha { margin-inline-start: 0.6em; font-size: 1.1em; line-height: 1; }

.elementor-widget-button.boton--linea .elementor-button {
  background-color: transparent;
  color: var(--hueso);
  border-color: var(--linea-fuerte);
}
.elementor-widget-button.boton--linea .elementor-button:hover,
.elementor-widget-button.boton--linea .elementor-button:focus-visible {
  color: var(--hueso);
  border-color: var(--hueso);
}

/* Sobre el rojo (Booking y la página de gracias): el principal va en tinta, porque el naranja sobre
   rojo no se distingue y el rojo como texto no pasa AA (diseno-tokens.md). */
.elementor-widget-button.boton--tinta .elementor-button {
  background-color: var(--tinta);
  color: var(--hueso);
  border-color: var(--tinta);
}
.elementor-widget-button.boton--tinta .elementor-button:hover,
.elementor-widget-button.boton--tinta .elementor-button:focus-visible {
  background-color: transparent;
  color: var(--hueso);
  border-color: var(--hueso);
}
.fondo-rojo .elementor-widget-button.boton--linea .elementor-button {
  border-color: color-mix(in srgb, var(--hueso) 55%, transparent);
}

/* Páginas legales (kit 06 §5). Las tres llevan la clase «legal» y su CSS vive aquí: ninguna página
   lleva CSS propio. Las tablas pisan el reset de Hello (bordes, cebra y padding de 15 px). */
.e-con .elementor-element.legal-fecha {
  margin-block-start: 1rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--linea);
}
.e-con .elementor-element.legal-h2 { margin-block: 2.5rem 0.75rem; }
.legal .elementor-widget-text-editor { color: var(--gris); }
.legal .elementor-widget-text-editor p { margin: 0 0 1rem; }
.legal .elementor-widget-text-editor ul { margin: 0.75rem 0 1rem; padding-inline-start: 1.2em; }
.legal .elementor-widget-text-editor a { color: var(--marca); }
.legal-datos { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0; font-size: inherit; }
.legal-datos th,
.legal-datos td {
  text-align: start;
  vertical-align: top;
  padding: 0.6rem 1rem 0.6rem 0;
  border: 0;
  border-block-end: 1px solid var(--linea);
  background: transparent;
}
.legal-datos tbody > tr:nth-child(odd) > th,
.legal-datos tbody > tr:nth-child(odd) > td,
.legal-datos tbody > tr:hover > th,
.legal-datos tbody > tr:hover > td { background: transparent; }
.legal-datos th {
  width: 38%;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}
.legal-datos td { color: var(--hueso); }

/* Hello Elementor da a .alignwide margin-inline: -80px en todos los anchos. Los bloques de carrito y pago de
   WooCommerce la llevan y, en una página del tema, se salen 80 px por cada lado: en móvil, cortados. */
.woocommerce-page .alignwide { margin-inline: 0; }

/* Sin descripción no hay pestañas, y eran ellas las que limpiaban los flotantes de la ficha: el título de
   «Related products» se colaba al lado de la portada. */
.woocommerce div.product .related { clear: both; }

/* Botones de WooCommerce con el estilo del botón del kit: naranja con texto negro (6,87:1) y, al pasar, vacío con
   el borde. El carrito los sacaba en gris con texto naranja (4,17:1, no llega a AA) y la ficha, en morado. Los suyos
   son 0-3-1 y su hoja carga después que la del kit: con :root, 0-4-1. Tamaño y espaciado, los del botón del kit
   (Ajustes del sitio → Botones), que no son una tipografía global: si cambian allí, cambian aquí. */
:root .woocommerce a.button,
:root .woocommerce button.button,
:root .woocommerce a.button.alt,
:root .woocommerce button.button.alt,
:root .wc-block-components-button:not(.is-link),
:root .woocommerce-page .wp-block-button__link {
  background-color: var(--marca);
  color: var(--tinta);
  border: 2px solid var(--marca);
  border-radius: 0;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
:root .woocommerce a.button:hover,
:root .woocommerce button.button:hover,
:root .woocommerce a.button.alt:hover,
:root .woocommerce button.button.alt:hover,
:root .wc-block-components-button:not(.is-link):hover,
:root .woocommerce-page .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--marca);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .elementor-button { transition: none; }
}

/* ============================================================================================================
   El diseño del rediseño del 06/10 (Sofiasound, todo oscuro, Boldonse + Schibsted Grotesk) con las proporciones
   del 07/10. De css/mylan-westers.css; valores y origen en docs/diseno-tokens.md. Montado en el taller y aprobado
   por Pablo el 07/10: desde entonces, todo el sitio.
   ============================================================================================================ */
:root {
  /* La tarjeta del menú pasa por encima de la banda roja de Booking: el filete oscuro y la sombra la separan */
  --sombra-tarjeta: 0 0 0 1px rgba(10, 10, 10, 0.45), 0 18px 50px rgba(0, 0, 0, 0.45);
  --t-etiqueta: clamp(1.125rem, 1.5vw, 1.5rem);
  /* Las dos columnas, con las medidas de la hoja de Sofiasound: crecen con la ventana */
  --obra: 85vw;
  --entre-columnas: 9rem;
  --entre-filas: 10rem;
  --desfase: 12rem;          /* lo que baja la segunda columna */
  --borde-cabeza: 1.5rem;    /* titulares a 16 px del borde derecho de la ventana, contando la barra de scroll */
  --tarjeta-menu: 19.375rem; /* 310 px */
  --alto-tarjeta: 13.5rem;   /* lo que tapa la tarjeta arriba, con su margen */
  --ticker: 16s;
  --marquee: 38s;
}
/* Por debajo de 1000 px (el corte de tablet del kit) la tarjeta pasa a barra y las columnas vuelven al contenedor */
@media (max-width: 1000px) {
  :root {
    --alto-tarjeta: 7rem;
    --obra: 100%;
    --entre-columnas: clamp(0.75rem, 9vw, 10rem);
    --entre-filas: clamp(2.5rem, 7vw, 6rem);
    --desfase: clamp(3rem, 14vw, 12rem);
  }
}

/* Cabeza de sección: la entrada debajo del titular, en su columna de 46 caracteres y a la derecha. Elementor limita
   los widgets al 100 % con «.e-con.e-con > … > .elementor-widget» (0-4-0, trampa §52): de ahí el .elementor-kit-7 largo. */
.e-con.e-con.cabeza > .elementor-widget.entrada { max-width: 46ch; margin-block-start: 1.5rem; margin-inline-start: auto; }

/* La obra (las dos columnas, la barra de filtros, «Also on») y la rejilla de discos salen del contenedor de 1280 px.
   Mismo motivo que arriba (§52). */
.e-con .e-con.obra,
.e-con.e-con > .e-con-inner > .elementor-widget.disco-rejilla { max-width: none; }

/* Discos en dos columnas, la segunda bajada (rejilla del Loop Grid). Con translate y no con margen, para que las
   filas no crezcan; el padding de abajo deja sitio a la última. Elementor mete un <style> dentro del contenedor,
   antes de los discos: se cuentan solo los discos («of .e-loop-item»), o el escalonado sale al revés. Los filtros
   recalculan qué es «la segunda» (CSS de la discografía). */
.elementor-element.disco-rejilla { width: var(--obra); margin-inline: calc((100% - var(--obra)) / 2); }
.elementor-element.disco-rejilla .elementor-loop-container { padding-block-end: var(--desfase); }
.elementor-element.disco-rejilla .e-loop-item:nth-child(even of .e-loop-item) { translate: 0 var(--desfase); }

/* La cinta (sellos y el último lanzamiento en el menú): animación CSS, que respeta prefers-reduced-motion */
@keyframes cinta { to { transform: translateX(-50%); } }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Boldonse';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://mylandwesters-zsghswvva2.live-website.com/wp-content/uploads/2026/10/boldonse-regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */