/* ==========================================================================
   Más DTF — Fuentes, base tipográfica y componentes mínimos (fase 2)

   Todo lo visual va prefijado con .md- y se aplica a las secciones de la home.
   No se toca el tema padre ni las plantillas de WooCommerce: un reset global
   aquí rompería la tienda. Lo único global es el foco de teclado.
   ========================================================================== */

/* --- 1. Fuentes autoalojadas ---------------------------------------------
   Una sola familia en toda la web, como la demo «Print on Demand»: Manrope
   en 500 (texto), 600 (etiquetas, botones secundarios) y 700 (titulares y
   botones). Subconjunto latino de Fontsource, con acentos, eñes, comillas
   españolas y símbolos de moneda. Manrope no tiene eje de anchura. */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. Foco de teclado (global, a propósito) -----------------------------
   Único estilo que sí se aplica a todo el sitio, tienda incluida. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--foco-grosor) solid var(--c-foco, #046DB5);
  outline-offset: var(--foco-offset);
  border-radius: var(--r-s);
}

/* --- 3. Base tipográfica de las secciones de la home ---------------------- */
.md-seccion {
  background-color: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--ff-texto);
  font-size: var(--fs-0);
  line-height: var(--lh-texto);
  padding-block: var(--sec-y);
  text-align: left;
}

.md-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.md-seccion :is(h1, h2, h3, h4) {
  font-family: var(--ff-titulo);
  font-stretch: var(--wdth-expanded);
  color: var(--c-titulo);
  text-wrap: balance;
  margin-block: 0 var(--sp-4);
}

.md-seccion h1 { font-size: var(--fs-5); font-weight: var(--fw-titulo);    line-height: var(--lh-titulo); }
.md-seccion h2 { font-size: var(--fs-3); font-weight: var(--fw-titulo);    line-height: var(--lh-titulo); }
.md-seccion h3 { font-size: var(--fs-2); font-weight: var(--fw-subtitulo); line-height: var(--lh-subtitulo); }
.md-seccion h4 { font-size: var(--fs-1); font-weight: var(--fw-subtitulo); line-height: var(--lh-subtitulo); }

.md-seccion p { margin-block: 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }
.md-seccion p:last-child { margin-block-end: 0; }

.md-entradilla { font-size: var(--fs-1); line-height: var(--lh-entradilla); color: var(--c-texto-2); }
.md-pequeno    { font-size: var(--fs-m1); line-height: var(--lh-pequeno); }
.md-secundario { color: var(--c-texto-2); }

/* Cifras reales: medidas, precios y plazos. Si no lleva número, no lleva mono. */
.md-cifra {
  font-family: var(--ff-cifra);
  font-weight: 500;
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.md-cifra--destacada { font-size: var(--fs-4); }

.md-seccion a {
  color: var(--c-enlace);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--t-rapida) var(--easing);
}
.md-seccion a:hover { color: var(--c-enlace-hover); }

/* --- 4. Botones -----------------------------------------------------------
   Sin flechas, sin iconos decorativos. El naranja nunca es un botón. */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 1.5px solid transparent;
  border-radius: var(--r-s);
  font-family: var(--ff-texto);
  font-size: var(--fs-0);
  font-weight: var(--fw-enfasis);
  line-height: var(--lh-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-rapida) var(--easing),
              color var(--t-rapida) var(--easing),
              border-color var(--t-rapida) var(--easing);
}

.md-btn--primario {
  background-color: var(--md-azul);   /* 5,15:1 con blanco */
  border-color: var(--md-azul);
  color: var(--md-blanco);
}
.md-btn--primario:hover,
.md-btn--primario:active {
  background-color: var(--md-azul-hover);    /* 6,90:1 con blanco */
  border-color: var(--md-azul-hover);
  color: var(--md-blanco);
}

.md-btn--secundario {
  background-color: transparent;
  border-color: var(--md-grafito);
  color: var(--md-grafito);
}
.md-btn--secundario:hover {
  background-color: var(--md-grafito);
  color: var(--md-blanco);
}

.md-btn--terciario {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-azul);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.md-btn--terciario:hover { color: var(--md-azul-hover); }

/* Sobre grafito los botones cambian de tono, no de regla. */
.md-oscuro .md-btn--secundario { border-color: var(--md-blanco); color: var(--md-blanco); }
.md-oscuro .md-btn--secundario:hover { background-color: var(--md-blanco); color: var(--md-grafito); }
.md-oscuro .md-btn--terciario { color: var(--md-azul-claro); }

/* --- 5. Badge y contador (único sitio del amarillo) ----------------------
   Amarillo de marca de fondo con texto grafito: 6,59:1. El amarillo nunca es
   texto sobre claro; sobre grafito sí lo es (6,59:1) y ahí hace de urgencia.
   El rojo de marca no llega a AA como texto: se usa su tono de trabajo. */
.md-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-s);
  background-color: var(--md-amarillo);
  color: var(--md-grafito);
  font-size: var(--fs-m1);
  font-weight: var(--fw-etiqueta);
  line-height: var(--lh-pequeno);
}
/* Urgencia como texto: el rol --c-urgencia ya vale rojo de trabajo sobre claro
   y amarillo sobre grafito. Definido en tokens.css. */
.md-texto-urgencia { color: var(--c-urgencia); }

/* Estado correcto (archivo válido, pedido entrado). Nunca decorativo. */
.md-texto-ok { color: var(--md-verde-texto); }
.md-oscuro .md-texto-ok { color: var(--md-verde); }

/* --- 6. Tarjetas ----------------------------------------------------------
   Sin sombra: borde de 1 px o cambio de fondo. La única sombra es el hero. */
.md-tarjeta {
  background-color: var(--md-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  padding: var(--sp-6);
}

.md-hero-bloque {
  border-radius: var(--r-l);
  box-shadow: var(--shadow-hero);
  background-color: var(--md-blanco);
  overflow: hidden;
}

/* --- 7. Rejilla ----------------------------------------------------------- */
.md-grid { display: grid; gap: var(--sp-6); }
.md-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .md-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .md-grid--3,
  .md-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- 8. Secuencia numerada (solo donde codifica información) --------------- */
.md-proceso { counter-reset: paso; }
.md-proceso .md-paso { counter-increment: paso; }
.md-proceso .md-paso > *:first-child::before {
  content: "0" counter(paso);
  display: block;
  margin-block-end: var(--sp-2);
  font-family: var(--ff-cifra);
  font-weight: 500;
  font-size: var(--fs-m1);
  color: var(--md-azul);
}
.md-oscuro.md-proceso .md-paso > *:first-child::before { color: var(--md-azul-claro); }

/* --- 9. Imágenes ---------------------------------------------------------- */
.md-seccion :is(img, video) { max-width: 100%; height: auto; display: block; }
.md-ratio-3-2 { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-m); }
.md-ratio-4-5 { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-m); }

/* --- 10. CTA final: el único centrado de toda la home --------------------- */
.md-cta { text-align: center; }
.md-cta :is(h2, p) { margin-inline: auto; }

/* --- 11. Salto al contenido ----------------------------------------------- */
.md-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--md-grafito);
  color: var(--md-blanco);
  text-decoration: none;
}
.md-skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* --- 12. Movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 13. Anchura de los titulares ---------------------------------------
   Con Manrope (sin eje de anchura) --wdth-expanded vale 100% y esta clase no
   cambia nada. Se conserva para que las secciones que la llevan en Avanzado →
   Clases CSS sigan validando. */
.md-expanded { font-stretch: var(--wdth-expanded); }

/* --- 14. Compatibilidad con el constructor de pliegos DTF -----------------
   PrintSpace estila TODOS los botones de la web con una regla global
   (`button, [type="button"], [type="submit"]`: alto 48 px, line-height 48 px,
   relleno 0 35px, texto blanco, fondo azul, radio 48 px, peso 700). El
   constructor (plugin dtf-builder) no la neutraliza y sus botones de varias
   líneas (mesas, «Copias: 2») salían aplastados y con el texto en blanco sobre
   blanco. Esto devuelve los botones del constructor a su estado neutro y deja
   que las clases del plugin manden (van después y pesan lo mismo).

   Lo suyo es que esta regla viva en el CSS del plugin (assets/css/builder.css,
   al principio); mientras tanto se queda aquí, acotada a .masdtf-builder. */
.masdtf-builder :where(button, [type="button"], [type="submit"], [type="reset"]) {
  height: auto;
  line-height: inherit;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}