/* ==========================================================================
   MÁS DTF Home — Pedido rápido (pantalla completa)

   Usa los tokens del tema hijo cuando existen y lleva respaldo para cuando
   no. Reglas de marca que se respetan aquí:
     · azul = acción (botones, tarjetas al pasar el ratón, paso actual)
     · amarillo = urgencia (solo el aviso de la hora límite)
     · rojo y verde solo en los iconos, como en el logo
     · botones en cápsula (48 px), tarjetas a 20 px, sin sombras
     · al pasar el ratón cambia el color: nada se desplaza ni se levanta
   ========================================================================== */

.md-pedido {
  --pd-grafito:    var(--md-grafito, #343A40);
  --pd-azul:       var(--md-azul, #046DB5);
  --pd-azul-hover: var(--md-azul-hover, #035C99);
  --pd-azul-tinta: #E8F2F9;       /* azul de marca al 10 % sobre blanco */
  --pd-amarillo:   var(--md-amarillo, #F6BB13);
  --pd-rojo:       var(--md-rojo, #E74435);
  --pd-verde:      var(--md-verde, #2FAA55);
  --pd-film:       var(--md-film, #F2F3F0);
  --pd-blanco:     var(--md-blanco, #FFFFFF);
  --pd-gris:       var(--md-gris-texto, #585F6B);
  --pd-borde:      var(--md-borde, #D5D8DC);
  --pd-texto:      var(--ff-texto, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --pd-r-tarjeta:  var(--r-l, 20px);
  --pd-r-boton:    var(--r-boton, 48px);
  --pd-lado:       clamp(16px, 4vw, 40px);
  /* Escala algo más contenida que la de las páginas largas: cada paso tiene
     que caber entero en la pantalla de un portátil (unos 900 px de alto),
     con la ayuda, el aviso de las 11:00 y el pie a la vista. */
  --pd-fs-titulo:  clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);
  --pd-fs-nombre:  clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --pd-fs-entrada: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  /* Fondo oscuro (grafito de marca) para que las tarjetas blancas destaquen.
     Sobre grafito mandan el azul claro y el gris claro (AA), como en el resto
     de secciones oscuras de la web. */
  --pd-fondo:        #2B3136;
  --pd-superficie:   #363D44;
  --pd-borde-oscuro: #4A515A;
  --pd-azul-claro:   var(--md-azul-claro, #57B4E8);
  --pd-gris-claro:   var(--md-gris-claro, #C3C7CE);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--pd-fondo);
  color: var(--pd-blanco);
  font-family: var(--pd-texto);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.md-pedido *,
.md-pedido *::before,
.md-pedido *::after { box-sizing: border-box; }

.md-pedido [hidden] { display: none !important; }

/* El widget ocupa todo el ancho del contenedor de Elementor. */
.elementor-widget-masdtf-pedido-rapido,
.elementor-widget-masdtf-pedido-rapido > .elementor-widget-container { width: 100%; }

/* En la plantilla «Elementor Canvas» el cuerpo no lleva márgenes, pero por si
   la página se monta con otra plantilla. */
body.elementor-template-canvas { margin: 0; background: #2B3136; }

/* --- 1. Barra superior ------------------------------------------------- */
.md-pedido__barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 8px var(--pd-lado);
  background: var(--pd-blanco);
  border-bottom: 1px solid var(--pd-borde);
}
/* La cinta de cuatro colores del logo, como en la cabecera de la web. */
.md-pedido__barra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--pd-azul) 0 25%, var(--pd-rojo) 25% 50%,
    var(--pd-amarillo) 50% 75%, var(--pd-verde) 75% 100%);
}
body.admin-bar .md-pedido__barra { top: 32px; }
@media (max-width: 782px) { body.admin-bar .md-pedido__barra { top: 46px; } }

.md-pedido__logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.md-pedido__logo img { display: block; width: auto; height: 32px; max-width: 180px; }
.md-pedido__logo-texto { font-weight: 800; letter-spacing: 0.02em; font-size: 1.25rem; color: var(--pd-grafito); }

.md-pedido__pasos {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pd-gris);
}
.md-pedido__pasos li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.md-pedido__pasos li + li::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1.5px;
  margin-right: 6px;
  background: var(--pd-borde);
}
.md-pedido__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--pd-borde);
  background: var(--pd-blanco);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pd-gris);
}
.md-pedido__pasos li.is-actual { color: var(--pd-grafito); }
.md-pedido__pasos li.is-actual .md-pedido__num { background: var(--pd-azul); border-color: var(--pd-azul); color: #fff; }
.md-pedido__pasos li.is-hecho .md-pedido__num { background: var(--pd-grafito); border-color: var(--pd-grafito); color: #fff; }

/* Cada paso es un enlace, pero solo se puede pulsar el que ya está hecho:
   desde el paso 3 se vuelve al 1 o al 2 con un clic en su número. */
.md-pedido__paso-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 2px 2px;
  border-radius: var(--pd-r-boton);
  color: inherit;
  text-decoration: none;
  transition: color 120ms;
}
.md-pedido__pasos li:not(.is-hecho) .md-pedido__paso-enlace { pointer-events: none; cursor: default; }
.md-pedido__pasos li.is-hecho .md-pedido__paso-enlace { cursor: pointer; }
.md-pedido__pasos li.is-hecho .md-pedido__paso-enlace:hover,
.md-pedido__pasos li.is-hecho .md-pedido__paso-enlace:focus-visible { color: var(--pd-azul); text-decoration: none; }
.md-pedido__pasos li.is-hecho .md-pedido__paso-enlace:hover .md-pedido__num,
.md-pedido__pasos li.is-hecho .md-pedido__paso-enlace:focus-visible .md-pedido__num { background: var(--pd-azul); border-color: var(--pd-azul); }
.md-pedido__pasos li.is-hecho .md-pedido__paso-enlace:hover .md-pedido__paso-nombre { text-decoration: underline; text-underline-offset: 0.18em; }
.md-pedido__paso-enlace:focus-visible { outline: 3px solid var(--pd-azul); outline-offset: 2px; }

/* Botón «Atrás» al principio de los pasos 2 y 3. */
.md-pedido__atras {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 12px;
  padding: 0 14px 0 10px;
  border: 1.5px solid var(--pd-borde);
  border-radius: var(--pd-r-boton);
  background: var(--pd-blanco);
  color: var(--pd-grafito);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms, color 120ms;
}
.md-pedido__atras:hover,
.md-pedido__atras:focus-visible { border-color: var(--pd-azul); color: var(--pd-azul); text-decoration: none; }

.md-pedido__volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--pd-borde);
  border-radius: var(--pd-r-boton);
  color: var(--pd-grafito);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 120ms, color 120ms, background-color 120ms;
}
.md-pedido__volver:hover,
.md-pedido__volver:focus-visible { border-color: var(--pd-azul); color: var(--pd-azul); text-decoration: none; }

/* --- 2. Cuerpo ---------------------------------------------------------- */
/* El cuerpo se centra en vertical cuando sobra sitio (pantallas altas) y
   empuja el pie al fondo; cuando no cabe, la página hace scroll normal. */
.md-pedido__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* arriba del todo: no se desperdicia margen */
  flex: 1 0 auto;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 14px var(--pd-lado) clamp(16px, 2vw, 24px);
}

.md-pedido__paso { animation: md-pedido-entra 220ms ease-out both; }
@keyframes md-pedido-entra { from { opacity: 0; } to { opacity: 1; } }

.md-pedido__intro {
  max-width: 900px;
  margin: 0 auto clamp(16px, 2.5vw, 26px);
  text-align: center;
}

.md-pedido__pildora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: var(--pd-r-boton);
  background: rgba(87, 180, 232, 0.16);
  color: var(--pd-azul-claro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-pedido__pildora i { width: 8px; height: 8px; border-radius: 50%; background: var(--pd-azul-claro); }

.md-pedido__titulo {
  margin: 0 0 8px;
  font-family: var(--pd-texto);
  font-size: var(--pd-fs-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pd-blanco);
  text-wrap: balance;
}
.md-pedido__titulo:focus { outline: none; }

.md-pedido__entradilla {
  margin: 0;
  font-size: var(--pd-fs-entrada);
  line-height: 1.6;
  color: var(--pd-gris-claro);
  text-wrap: pretty;
}

/* Chip «Has elegido: DTF DTI Textil · Cambiar». */
.md-pedido__chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 6px 8px 6px 16px;
  border: 1px solid var(--pd-borde-oscuro);
  border-radius: var(--pd-r-boton);
  background: var(--pd-superficie);
  font-size: 0.875rem;
  color: var(--pd-gris-claro);
}
.md-pedido__chip strong { color: var(--pd-blanco); font-weight: 700; }
.md-pedido__cambiar {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--pd-r-boton);
  background: rgba(87, 180, 232, 0.16);
  color: var(--pd-azul-claro);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
}
.md-pedido__cambiar:hover,
.md-pedido__cambiar:focus-visible { background: var(--pd-azul-claro); color: var(--pd-grafito); text-decoration: none; }

/* --- 3. Tarjetas -------------------------------------------------------- */
.md-pedido__tarjetas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.md-pedido__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--pd-r-tarjeta);
  background: var(--pd-blanco);
  color: var(--pd-grafito);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 140ms, background-color 140ms;
}
.md-pedido__tarjeta:hover,
.md-pedido__tarjeta:focus-visible {
  border-color: var(--pd-azul-claro);
  color: var(--pd-grafito);
  text-decoration: none;
}
.md-pedido__tarjeta:focus-visible { outline: 3px solid var(--pd-azul-claro); outline-offset: 3px; }

/* Franja superior de la tarjeta: aquí irá la foto del producto (control del
   widget). Mientras no la haya, un fondo de marca con el icono. El texto
   (antetítulo, nombre, etiqueta) va siempre por encima de la imagen, sobre
   un degradado que garantiza la lectura. */
.md-pedido__banda {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 150px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #3A424A 0%, #23282D 100%);
  background-size: cover;
  background-position: center;
  color: var(--pd-blanco);
  isolation: isolate;
}
.md-pedido__banda::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(35, 40, 45, 0.15) 0%, rgba(35, 40, 45, 0.55) 55%, rgba(35, 40, 45, 0.85) 100%);
}
/* Sin foto: el icono, grande y apagado, decora la esquina. */
.md-pedido__banda:not(.has-foto) .md-pedido__icono {
  position: absolute;
  right: 18px;
  top: 14px;
  opacity: 0.9;
}
.md-pedido__banda.has-foto .md-pedido__icono { display: none; }
.md-pedido__banda .md-pedido__eyebrow { color: var(--pd-azul-claro); }
.md-pedido__banda .md-pedido__nombre { color: var(--pd-blanco); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.md-pedido__banda .md-pedido__tag { background: rgba(255, 255, 255, 0.92); color: var(--pd-grafito); }
.md-pedido__banda .md-pedido__badge { border-color: rgba(255, 255, 255, 0.85); color: var(--pd-blanco); background: rgba(35, 40, 45, 0.45); }

.md-pedido__cuerpo-tarjeta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  padding: 16px 20px 18px;
}
.md-pedido__tarjeta:hover .md-pedido__cta,
.md-pedido__tarjeta:focus-visible .md-pedido__cta { background: var(--pd-azul-hover); }
.md-pedido__tarjeta.is-cargando { pointer-events: none; }
.md-pedido__tarjeta.is-cargando .md-pedido__cta { opacity: 0.7; }

.md-pedido__cabecera-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.md-pedido__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-azul);
}
.md-pedido__tag,
.md-pedido__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--pd-r-boton);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.md-pedido__tag { background: var(--pd-film); color: var(--pd-grafito); }
.md-pedido__badge { border: 1.5px solid var(--pd-grafito); color: var(--pd-grafito); background: var(--pd-blanco); }

.md-pedido__titular { display: flex; align-items: center; gap: 14px; }
.md-pedido__icono { display: block; flex: none; line-height: 0; }
.md-pedido__icono svg { width: 56px; height: 56px; }

.md-pedido__nombre {
  display: block;
  font-size: var(--pd-fs-nombre);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.md-pedido__desc { display: block; color: var(--pd-gris); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }

.md-pedido__lista {
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.md-pedido__lista li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.md-pedido__lista svg { flex: none; margin-top: 2px; color: var(--pd-azul); }

.md-pedido__pie-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: auto;
  padding-top: 4px;
}
.md-pedido__precio { display: inline-flex; align-items: baseline; gap: 6px; }
.md-pedido__precio strong { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.md-pedido__precio small { font-size: 0.8125rem; color: var(--pd-gris); }

.md-pedido__cta,
.md-pedido__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--pd-r-boton);
  background: var(--pd-azul);
  color: #fff;
  font-family: var(--pd-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.md-pedido__cta { margin-left: auto; }
.md-pedido__cta svg { transition: transform 140ms; }
.md-pedido__boton:hover,
.md-pedido__boton:focus-visible { background: var(--pd-azul-hover); color: #fff; text-decoration: none; }
.md-pedido__boton--secundario { background: transparent; border-color: var(--pd-grafito); color: var(--pd-grafito); }
.md-pedido__boton--secundario:hover,
.md-pedido__boton--secundario:focus-visible { background: var(--pd-grafito); border-color: var(--pd-grafito); color: #fff; }

/* Tarjeta de servicio aún sin pedido online: se atenúa el icono, no el texto. */
.md-pedido__tarjeta.is-pronto .md-pedido__icono { opacity: 0.55; }

/* --- 4. Cajas de ayuda y aviso ------------------------------------------
   Bajo las tarjetas y a todo el ancho, una debajo de otra: son información
   general de la página, no de una tarjeta concreta (con las dos cajas en
   columnas parecía que cada una hablaba de la tarjeta que tenía encima).
   Dentro de la ayuda, los dos párrafos van en dos columnas en escritorio. */
.md-pedido__abajo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: clamp(12px, 1.8vw, 16px);
}

.md-pedido__ayuda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 22px;
  row-gap: 6px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--pd-borde-oscuro);
  border-radius: 16px;
  background: var(--pd-superficie);
}
.md-pedido__ayuda h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 1px;
  font-family: var(--pd-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pd-blanco);
}
.md-pedido__ayuda h3 svg { color: var(--pd-azul-claro); flex: none; }
.md-pedido__ayuda p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--pd-gris-claro); }
.md-pedido__ayuda p strong { color: var(--pd-blanco); }
.md-pedido__ayuda a { color: var(--pd-azul-claro); }

/* El único amarillo de la página: urgencia (sobre grafito cumple AA). */
.md-pedido__corte {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--pd-borde-oscuro);
  border-left: 5px solid var(--pd-amarillo);
  border-radius: 16px;
  background: var(--pd-superficie);
  font-size: 0.9375rem;
  color: var(--pd-blanco);
}
.md-pedido__corte-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pd-amarillo);
  color: var(--pd-grafito);
}
.md-pedido__corte-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.md-pedido__corte-texto strong { font-weight: 700; font-size: 0.9375rem; color: var(--pd-amarillo); }
.md-pedido__corte-texto > span { color: var(--pd-gris-claro); font-size: 0.875rem; line-height: 1.45; }
.md-pedido__corte-texto a { color: var(--pd-azul-claro); font-size: 0.875rem; font-weight: 600; }

/* --- 5. Servicio aún sin pedido online ---------------------------------- */
.md-pedido__pronto {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border: 2px solid var(--pd-borde);
  border-radius: var(--pd-r-tarjeta);
  background: var(--pd-blanco);
  text-align: center;
}
.md-pedido__pronto h3 {
  margin: 0;
  font-family: var(--pd-texto);
  font-size: var(--pd-fs-nombre);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pd-grafito);
  text-wrap: balance;
}
.md-pedido__pronto p { margin: 0; color: var(--pd-gris); line-height: 1.6; }
.md-pedido__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* --- 6. Panel de envío (el del constructor, con la ropa de la marca) ---- */

/* PrintSpace estila TODOS los botones de la web con una regla global (alto y
   line-height de 48 px, relleno 0 35px, texto blanco sobre azul). Dentro del
   panel de envío eso recortaba las pestañas de dos líneas y pintaba en blanco
   el texto de los botones perfilados. Se devuelven a su estado neutro y mandan
   las reglas del constructor y las de abajo (van después y pesan más). */
.md-pedido :is(button, [type="button"], [type="submit"], [type="reset"]) {
  height: auto;
  line-height: 1.3;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.md-pedido__envio {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px);
  border: 2px solid var(--pd-borde);
  border-radius: var(--pd-r-tarjeta);
  background: var(--pd-blanco);
}
.md-pedido__envio .masdtf-meters {
  --mm-line: var(--pd-borde);
  --mm-ink: var(--pd-grafito);
  --mm-muted: var(--pd-gris);
  --mm-ok: var(--pd-azul);
  --mm-okbg: var(--pd-azul-tinta);
  --mm-brand: var(--pd-azul);
  --mm-brandbg: var(--pd-azul-tinta);
  --mm-brandline: #BFD9EC;
  max-width: none;
  font-family: var(--pd-texto);
}
.md-pedido__envio .masdtf-meters__tabs {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.md-pedido__envio .masdtf-meters__tabs button {
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  border-width: 1.5px;
  border-radius: var(--pd-r-boton);
  font-family: var(--pd-texto);
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: normal;
}
.md-pedido__envio .masdtf-meters__tabs button.is-on { background: var(--pd-azul); border-color: var(--pd-azul); color: #fff; }
.md-pedido__envio .masdtf-meters__drop { border-radius: 16px; padding: 32px 18px; background: var(--pd-film); }
.md-pedido__envio .masdtf-meters__drop.is-over { background: var(--pd-azul-tinta); }
.md-pedido__envio .masdtf-meters__drop strong { font-size: 1rem; }
.md-pedido__envio .masdtf-meters .masdtf-button {
  min-height: 48px;
  border-width: 1.5px;
  border-radius: var(--pd-r-boton);
  font-family: var(--pd-texto);
  font-weight: 700;
  padding: 12px 22px;
}
.md-pedido__envio .masdtf-meters .masdtf-button:not(.masdtf-button--primary) { border-color: var(--pd-grafito); }
.md-pedido__envio .masdtf-meters .masdtf-button:not(.masdtf-button--primary):hover { background: var(--pd-grafito); color: #fff; }
.md-pedido__envio .masdtf-meters .masdtf-button--primary:hover { background: var(--pd-azul-hover); border-color: var(--pd-azul-hover); }
.md-pedido__envio .masdtf-meters__linklabel input,
.md-pedido__envio .masdtf-meters__unit input {
  border-radius: 12px;
  border-width: 1.5px;
  font-family: var(--pd-texto);
}
.md-pedido__envio .masdtf-meters__linklabel input:focus,
.md-pedido__envio .masdtf-meters__unit input:focus { outline: 3px solid var(--pd-azul); outline-offset: 2px; }
.md-pedido__envio .masdtf-meters__file { border-radius: 14px; }
.md-pedido__envio .masdtf-meters__totals { border-top-color: var(--pd-grafito); }
.md-pedido__aviso { margin: 0; color: var(--md-rojo-texto, #C4291B); font-weight: 600; }

/* --- 7. Pie mínimo ------------------------------------------------------ */
.md-pedido__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 28px;
  padding: 12px var(--pd-lado);
  border-top: 1px solid var(--pd-borde-oscuro);
  background: var(--pd-fondo);
  font-size: 0.8125rem;
  color: var(--pd-gris-claro);
}
.md-pedido__pie a,
.md-pedido__pie span { display: inline-flex; align-items: center; gap: 6px; }
.md-pedido__pie a { color: var(--pd-azul-claro); font-weight: 600; text-decoration: none; }
.md-pedido__pie a:hover { color: #8CCBEE; text-decoration: underline; }

/* Botón «Atrás» sobre el fondo oscuro. */
.md-pedido__atras { border-color: var(--pd-borde-oscuro); background: transparent; color: var(--pd-blanco); }
.md-pedido__atras:hover,
.md-pedido__atras:focus-visible { border-color: var(--pd-azul-claro); color: var(--pd-azul-claro); }

/* --- 7b. Escritorio: «Atrás» en la esquina y pantallas bajas ------------ */
@media (min-width: 1025px) {
  /* El botón «Atrás» se pone en la esquina superior izquierda del paso, en
     la misma fila que el chip: no gasta una línea propia. */
  .md-pedido__paso { position: relative; }
  .md-pedido__atras { position: absolute; left: 0; top: 4px; margin: 0; }
}

/* Portátiles de poca altura (1366 × 768 con el navegador): se quita lo
   prescindible para que el paso siga cabiendo con el pie a la vista. */
@media (min-width: 1025px) and (max-height: 860px) {
  .md-pedido__cuerpo { padding-top: 14px; padding-bottom: 14px; }
  .md-pedido__pildora { display: none; }
  .md-pedido__intro { margin-bottom: 12px; }
  .md-pedido__titulo { margin-bottom: 4px; }
  .md-pedido__chip { margin-bottom: 10px; }
  .md-pedido__banda { min-height: 128px; padding: 14px 18px; }
  .md-pedido__cuerpo-tarjeta { padding: 12px 18px 14px; gap: 8px; }
  .md-pedido__abajo { margin-top: 10px; gap: 8px; }
  .md-pedido__ayuda, .md-pedido__corte { padding: 8px 16px; }
  .md-pedido__pie { padding-top: 8px; padding-bottom: 8px; }
}

/* --- 8. Tableta y móvil ------------------------------------------------- */
@media (max-width: 1024px) {
  .md-pedido__ayuda { grid-template-columns: minmax(0, 1fr); }
  .md-pedido__ayuda h3 { white-space: normal; }
  .md-pedido__pasos li + li::before { width: 16px; }
  /* En tableta la barra no da para logo, tres pasos con nombre y el texto de
     «Volver»: el enlace se queda en el icono (con su etiqueta accesible). */
  .md-pedido__volver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .md-pedido__volver { width: 40px; padding: 0; justify-content: center; }
}

@media (max-width: 767px) {
  .md-pedido__barra { min-height: 60px; gap: 10px; }
  .md-pedido__logo img { height: 26px; }
  .md-pedido__paso-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .md-pedido__pasos { gap: 4px; }
  .md-pedido__pasos li + li::before { width: 10px; margin-right: 4px; }
  .md-pedido__num { width: 26px; height: 26px; }
  .md-pedido__volver { min-height: 36px; width: 36px; font-size: 0.8125rem; }
  .md-pedido__intro { text-align: left; }
  .md-pedido__chip { justify-content: flex-start; }
  .md-pedido__tarjetas { grid-template-columns: minmax(0, 1fr); }
  .md-pedido__icono svg { width: 48px; height: 48px; }
  .md-pedido__banda { min-height: 124px; padding: 14px 16px; }
  .md-pedido__cuerpo-tarjeta { padding: 14px 16px 16px; }
  .md-pedido__corte-texto { display: grid; }
  .md-pedido__pie-tarjeta { flex-direction: column; align-items: stretch; }
  .md-pedido__cta { margin-left: 0; width: 100%; }
  .md-pedido__botones { flex-direction: column; align-items: stretch; }
  .md-pedido__pie { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .md-pedido__paso { animation: none; }
  .md-pedido * { transition-duration: 0.001ms !important; }
}

/* --- 9. Cajas en blanco sobre el fondo oscuro (revisión de José) --------
   Solo el fondo de la página es oscuro: la ayuda, el aviso de las 11:00, el
   chip y «Atrás» vuelven al blanco para destacar, como las tarjetas. */
.md-pedido__ayuda,
.md-pedido__corte,
.md-pedido__chip,
.md-pedido__atras {
  background: var(--pd-blanco);
  border-color: var(--pd-borde);
  color: var(--pd-grafito);
}
.md-pedido__ayuda h3 { color: var(--pd-grafito); }
.md-pedido__ayuda h3 svg { color: var(--pd-azul); }
.md-pedido__ayuda p { color: var(--pd-gris); }
.md-pedido__ayuda p strong { color: var(--pd-grafito); }
.md-pedido__ayuda a { color: var(--pd-azul); }
.md-pedido__corte-texto strong { color: var(--pd-grafito); }
.md-pedido__corte-texto > span { color: var(--pd-gris); }
.md-pedido__corte-texto a { color: var(--pd-azul); }
.md-pedido__chip { color: var(--pd-gris); }
.md-pedido__chip strong { color: var(--pd-grafito); }
.md-pedido__cambiar { background: var(--pd-azul-tinta); color: var(--pd-azul); }
.md-pedido__cambiar:hover,
.md-pedido__cambiar:focus-visible { background: var(--pd-azul); color: #fff; }
.md-pedido__atras:hover,
.md-pedido__atras:focus-visible { border-color: var(--pd-azul); color: var(--pd-azul); background: var(--pd-blanco); }