/* ==========================================================================
   Más DTF — Secciones de la home (fase 4: hero y selector de producto)
   --------------------------------------------------------------------------
   Las secciones se montan en Elementor con contenedores y widgets normales;
   base.css ya trae la tipografía, los botones y las tarjetas del sistema.
   Aquí solo se traduce eso al marcado que genera Elementor (.elementor-*) y
   se resuelve lo que el editor no expone.

   Clases (Avanzado → Clases CSS):
     .md-seccion.md-hero        contenedor raíz del hero (fondo film)
       .md-hero__texto          columna izquierda   .md-hero__visual  columna del pliego
       .md-avales               lista de tres avales
       .md-hero__ctas           fila de botones
     .md-btn--primario / --secundario / --terciario   en cada widget de botón
     .md-seccion.md-productos   selector de producto (fondo blanco)
       .md-tarjetas             fila de tarjetas     .md-tarjeta       cada tarjeta
       .md-tarjeta__publico     línea de público     .md-tarjeta__datos lista de datos
   ========================================================================== */

/* --- 0. Contenedores de sección --------------------------------------------
   Elementor mete su propio relleno por variables (0,3,0); con dos clases se
   le gana sin !important. El ritmo vertical es el mismo en toda la home. */
.e-con.md-seccion { padding-block: var(--sec-y); }
.e-con.md-hero { padding-block: calc(var(--sec-y) + var(--sp-4)) var(--sec-y); }

/* Tipografía base dentro de las secciones: gana a la del kit y a la del tema. */
.md-seccion .elementor-widget-text-editor,
.md-seccion .elementor-widget-text-editor p {
  font-family: var(--ff-texto);
  font-size: var(--fs-0);
  line-height: var(--lh-texto);
  color: var(--c-texto-2);
}
.md-seccion .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.md-seccion .elementor-heading-title {
  font-family: var(--ff-titulo);
  font-stretch: var(--wdth-expanded);
  color: var(--c-titulo);
  text-wrap: balance;
}

/* --- 1. Hero ------------------------------------------------------------------ */
.md-hero .elementor-heading-title {
  font-size: var(--fs-5);
  font-weight: var(--fw-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: -0.015em;
}

.md-hero__entradilla .elementor-widget-container,
.md-hero__entradilla p {
  max-width: 56ch;
  font-size: var(--fs-1) !important;   /* el kit fija 16 px al párrafo con más peso */
  line-height: var(--lh-entradilla);
  color: var(--c-texto-2);
  text-wrap: pretty;
}

/* Avales: lista en línea con la marca de verificación en verde de trabajo. */
.md-avales .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0; padding: 0; }
.md-avales .elementor-icon-list-item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.md-avales .elementor-icon-list-icon { width: auto; display: flex; }
/* Tres clases: el widget pone el color del icono con (0,3,0) y va después. */
.md-seccion .md-avales .elementor-icon-list-icon i,
.md-seccion .md-avales .elementor-icon-list-icon svg { font-size: 16px; width: 16px; height: 16px; color: var(--md-verde-texto); fill: var(--md-verde-texto); }
.md-seccion .md-avales .elementor-icon-list-text {
  font-family: var(--ff-texto);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-texto);
  padding: 0;
}

/* Fila de botones */
.md-hero__ctas { align-items: center; }
.md-hero__ctas .elementor-widget-button { width: auto; }

/* --- 2. Botones (widget «botón» de Elementor con las clases del sistema) ---- */
.md-seccion .md-btn--primario .elementor-button,
.md-seccion .md-btn--secundario .elementor-button,
.md-seccion .md-btn--terciario .elementor-button {
  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-boton);
  font-family: var(--ff-texto);
  font-size: var(--fs-0);
  font-weight: var(--fw-enfasis);
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: background-color var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
}
.md-seccion .md-btn--primario .elementor-button {
  background: var(--md-degradado-azul, var(--md-azul));
  border-color: transparent;
  color: var(--md-blanco);
}
.md-seccion .md-btn--primario .elementor-button:hover,
.md-seccion .md-btn--primario .elementor-button:focus {
  background: var(--md-degradado-azul-hover, var(--md-azul-hover));
  color: var(--md-blanco);
}
.md-seccion .md-btn--secundario .elementor-button {
  background: transparent;
  border-color: var(--md-grafito);
  color: var(--md-grafito);
}
.md-seccion .md-btn--secundario .elementor-button:hover,
.md-seccion .md-btn--secundario .elementor-button:focus {
  background: var(--md-grafito);
  color: var(--md-blanco);
}
.md-seccion .md-btn--terciario .elementor-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-azul);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.md-seccion .md-btn--terciario .elementor-button:hover,
.md-seccion .md-btn--terciario .elementor-button:focus { color: var(--md-azul-hover); background: none; }

/* --- 3. Selector de producto -------------------------------------------------- */
.md-productos .elementor-heading-title {
  font-size: var(--fs-3);
  font-weight: var(--fw-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: -0.01em;
}
.md-productos__intro p { max-width: 60ch; }

.md-tarjeta {
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  background-color: var(--md-blanco);
}
.md-tarjeta .elementor-heading-title {
  font-size: var(--fs-2);
  font-weight: var(--fw-subtitulo);
  line-height: var(--lh-subtitulo);
  letter-spacing: 0;
}
.md-tarjeta__publico p {
  font-size: 0.8125rem !important;
  font-weight: 500;
  color: var(--c-texto-2);
}

/* Precio desde (widget del plugin masdtf-home) */
.md-precio-desde { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.md-precio-desde__cifra {
  font-family: var(--ff-cifra);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1;
  color: var(--c-texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.md-precio-desde__nota { font-family: var(--ff-texto); font-size: 0.8125rem; color: var(--c-texto-2); }

/* Datos de la tarjeta: lista sin viñeta de Elementor, con punto azul. */
.md-tarjeta__datos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.md-tarjeta__datos li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9375rem; color: var(--c-texto); }
.md-tarjeta__datos li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--md-azul); }
.md-tarjeta__datos .md-cifra,
.md-dato__valor { font-family: var(--ff-cifra); font-weight: 500; font-variant-numeric: tabular-nums; }

.md-tarjeta__acciones { align-items: center; }
.md-tarjeta__acciones .elementor-widget-button { width: auto; }

/* --- 4. Tablet y móvil -------------------------------------------------------- */
@media (max-width: 1024px) {
  .md-hero .elementor-heading-title { max-width: 18ch; }
  /* Con una sola columna el pliego ocuparía todo el ancho y saldría altísimo. */
  .md-hero__visual .md-pliego { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .e-con.md-hero { padding-block: var(--sp-10) var(--sec-y); }
  .md-hero .elementor-heading-title { max-width: none; }
  .md-hero__ctas .elementor-widget-button { width: 100%; }
  .md-hero__ctas .md-btn--primario .elementor-button,
  .md-hero__ctas .md-btn--secundario .elementor-button { width: 100%; }
  .md-hero__ctas .md-btn--terciario { width: auto; }
}

/* ============================================================================
   5. Página de producto (DTF DTI Textil) — 0.9.2
   ========================================================================== */

/* Antetítulo pequeño sobre el H1 y sobre los títulos de sección. */
.md-eyebrow p,
.md-eyebrow .elementor-heading-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--ff-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-azul);
}

/* Precio inicial del hero: cifra grande + nota del bono. */
.md-precio-inicial { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.md-precio-inicial__cifra {
  font-family: var(--ff-cifra);
  font-size: var(--fs-4);
  font-weight: 500;
  line-height: 1;
  color: var(--c-texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.md-precio-inicial__bono { font-size: 0.9375rem; color: var(--c-texto-2); }

/* Botón blanco sobre fondo oscuro. */
.md-seccion .md-btn--blanco .elementor-button {
  background: #fff;
  color: var(--md-grafito);
  border: 1px solid #fff;
  border-radius: var(--r-boton);
  font-family: var(--ff-texto);
  font-weight: 600;
}
.md-seccion .md-btn--blanco .elementor-button:hover,
.md-seccion .md-btn--blanco .elementor-button:focus-visible { background: var(--md-film); color: var(--md-grafito); }

/* Imagen del hero de producto. */
.md-hero--producto .md-hero__visual img { border-radius: var(--r-m); box-shadow: var(--shadow-hero); }

/* Comparativa de ancho útil: barras proporcionales. */
.md-barras { display: grid; gap: var(--sp-3); }
.md-barras__fila { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: var(--sp-3); font-size: 0.9375rem; color: var(--c-texto-2); }
.md-barras__fila span:first-child { font-weight: 600; color: var(--c-texto); }
.md-barras__barra { height: 22px; border-radius: 6px; background: var(--md-borde); }
.md-barras__fila--mas .md-barras__barra { background: var(--md-degradado-azul); }
.md-barras__fila--mas span:last-child { font-family: var(--ff-cifra); font-weight: 500; color: var(--md-azul); }
.md-barras__nota { margin-top: var(--sp-3); font-size: 0.8125rem; color: var(--c-texto-2); }

/* Tres pasos numerados: el número va como ::before del título h3. */
.md-pasos { counter-reset: paso; }
.md-paso { counter-increment: paso; }
.md-paso .elementor-heading-title::before {
  content: "0" counter(paso);
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--ff-cifra);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--md-azul);
}
.md-paso img { border-radius: var(--r-m); }

/* Tabla de tarifas. Va con .md-seccion delante porque WooCommerce estila
   `.woocommerce-js table th/td` (0,1,2) en todas las páginas. */
.md-seccion .md-tabla table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; background: #fff; border: 1px solid var(--md-borde); border-radius: var(--r-m); overflow: hidden; }
.md-seccion .md-tabla tr:last-child td { border-bottom: 0; }
.md-seccion .md-tabla td .md-cifra { font-size: 1.125rem; }
.md-seccion .md-tabla th,
.md-seccion .md-tabla td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--md-borde); vertical-align: top; }
.md-seccion .md-tabla th { font-family: var(--ff-texto); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-texto-2); background: var(--md-film); }
.md-seccion .md-tabla td:first-child { font-weight: 600; color: var(--c-texto); }
.md-seccion .md-tabla .md-cifra { font-family: var(--ff-cifra); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-seccion .md-tabla .md-tabla__bono td { background: color-mix(in srgb, var(--md-azul) 6%, #fff); }
.md-seccion .md-tabla .md-tabla__bono td:first-child { color: var(--md-azul); }
.md-seccion .md-tabla small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--c-texto-2); white-space: nowrap; }

/* Condiciones en dos columnas. */
.md-cond ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-6); }
.md-cond li { position: relative; padding-left: 18px; font-size: 0.9375rem; color: var(--c-texto); }
.md-cond li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--md-azul); }

/* Ficha de recogida y envío (dl) dentro de una tarjeta. */
.md-ficha { border: 1px solid var(--md-borde); border-radius: var(--r-m); background: #fff; }
.md-ficha .elementor-heading-title { margin-bottom: var(--sp-3); }
.md-ficha dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); }
.md-ficha dt { font-family: var(--ff-texto); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-texto-2); }
.md-ficha dd { margin: 0; font-size: 0.9375rem; color: var(--c-texto); }
.md-ficha dd a { color: var(--md-azul); text-decoration: none; }
.md-ficha dd a:hover { text-decoration: underline; }

/* Bloques oscuros (producción mensual): los tokens semánticos los redefine
   tokens.css en .md-oscuro. El CSS de la cabecera (post-14756.css) pinta todos
   los títulos de Elementor con el color global primario y carga después del
   tema hijo, así que aquí hace falta más especificidad (0,4,0). */
.md-seccion.md-oscuro .elementor-widget-heading .elementor-heading-title,
.md-seccion.md-oscuro .elementor-widget-text-editor,
.md-seccion.md-oscuro .elementor-widget-text-editor p { color: var(--c-texto); }
.md-seccion.md-oscuro .md-eyebrow p { color: var(--md-amarillo); }
.md-seccion.md-oscuro .md-texto-2 p { color: var(--c-texto-2); }
.md-seccion.md-oscuro a:not(.elementor-button) { color: var(--c-enlace); }

/* FAQ con <details> nativo (widget HTML): sin JS, accesible. */
.md-faq details { border-top: 1px solid var(--md-borde); padding: var(--sp-4) 0; }
.md-faq details:last-of-type { border-bottom: 1px solid var(--md-borde); }
.md-faq summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); list-style: none; font-family: var(--ff-texto); font-size: 1rem; font-weight: 600; color: var(--c-texto); }
.md-faq summary::-webkit-details-marker { display: none; }
.md-faq summary::after { content: "+"; flex: none; font-family: var(--ff-cifra); font-size: 1.25rem; line-height: 1; color: var(--md-azul); }
.md-faq details[open] summary::after { content: "–"; }
.md-faq details p { margin: var(--sp-3) 0 0; max-width: 70ch; font-size: 0.9375rem; color: var(--c-texto-2); }

/* Cierre centrado. */
.md-cierre .elementor-heading-title,
.md-cierre .elementor-widget-text-editor { text-align: center; }
.md-cierre .md-cierre__ctas { justify-content: center; }

/* Tablet y móvil. */
@media (max-width: 1024px) {
  .md-barras__fila { grid-template-columns: 110px 1fr auto; }
}
/* Solo tablet: con una columna la ilustración del hero saldría a 900 px de
   ancho y los tres pasos apilados ocuparían tres pantallas. */
@media (min-width: 768px) and (max-width: 1024px) {
  .md-hero--producto .md-hero__visual img,
  .md-dti__visual img { display: block; max-width: 560px; margin-inline: auto; }
  .md-pasos .e-con.md-paso { display: grid; grid-template-columns: 220px 1fr; column-gap: var(--sp-6); row-gap: var(--sp-2); align-items: start; }
  .md-paso > .elementor-widget-image { grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
  .md-cond ul { grid-template-columns: 1fr; }
  .md-ficha dl { grid-template-columns: 1fr; gap: 2px var(--sp-4); }
  .md-ficha dd { margin-bottom: var(--sp-3); }
  .md-seccion .md-tabla table, .md-seccion .md-tabla tbody, .md-seccion .md-tabla tr, .md-seccion .md-tabla td { display: block; width: 100%; }
  .md-seccion .md-tabla thead,
  .md-seccion .md-tabla td:empty { display: none; }
  .md-seccion .md-tabla tr { border: 1px solid var(--md-borde); border-radius: var(--r-s); margin-bottom: var(--sp-3); overflow: hidden; }
  .md-seccion .md-tabla td { border-bottom: 0; padding: 8px 14px; }
  .md-seccion .md-tabla td:first-child { padding-top: 14px; }
  .md-seccion .md-tabla td:last-child { padding-bottom: 14px; }
  .md-seccion .md-tabla td[data-th]::before { content: attr(data-th) ": "; font-size: 0.8125rem; font-weight: 600; color: var(--c-texto-2); }
  .md-precio-inicial__cifra { font-size: var(--fs-3); }
  .md-cierre__ctas .elementor-widget-button { width: 100%; }
  .md-cierre__ctas .elementor-button { width: 100%; }
}