/* =========================================================
   TMI × Divi 5 — adaptación del DOM de Divi a la maqueta.
   tmi.css (generado) define el diseño. Aquí solo se neutralizan
   valores por defecto de Divi en elementos que llevan clases de la
   maqueta. Cada regla dice qué anula; cualquier !important se
   documenta en CUSTOM-CODE.md.
   ========================================================= */

/* CSS del Personalizador de Divi (et-cache/global/et-divi-customizer.min.css, cargado después
   de tmi.css): body,input,textarea,select { font-family: var(--et_global_body_font) },
   h1–h6 { font-family: var(--et_global_heading_font) } y body { font-size: 14px }.
   Divi define esas variables en <style class="et-vb-global-fonts">:root{…} ('Open Sans').
   html:root (0,1,1) gana a su :root (0,1,0) sin importar el orden: las reglas de Divi
   quedan con las fuentes de la marca. body (0,0,1) de Divi gana a body de tmi.css por orden;
   html body (0,0,2) restablece el tamaño de tmi.css. */
/* Divi también imprime body { line-height: var(--et_global_body_font_height) } (1.7em) y
   .et_pb_text { line-height: var(--et_global_body_font_height, 1.7em) }: la maqueta usa 1.6 (body de tmi.css).
   Medido en el pie (Task 10): párrafos de 25,5px en vez de 24px. */
html:root { --et_global_body_font: var(--font-body); --et_global_heading_font: var(--font-display); --et_global_body_font_height: 1.6; }
html body { font-size: 16px; }

/* Divi: h1–h6 { padding-bottom: 10px; color: #333 } y p { padding-bottom: 1em }.
   Especificidad (0,0,2): gana a Divi (0,0,1) y pierde ante cualquier clase de tmi.css. */
body :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; color: inherit; font-weight: inherit; }
body p { padding-bottom: 0; }

/* Secciones de Divi con clases de la maqueta (piloto, Task 6). Ganan a tmi.css por orden:
   .et_pb_section { padding: 54px 0 } (et-critical-inline-css, ≥1350px) y
   .et_flex_section { display: flex; padding: var(--section-padding) 0 } (0,1,0).
   (0,2,0) restablece los valores de .section / .hero de tmi.css. */
.et_pb_section:is(.section, .hero, .footer) { display: block; }
.et_pb_section.section { padding: var(--space-8) 0; }
@media (min-width: 1024px) { .et_pb_section.section { padding: var(--space-10) 0; } }
.et_pb_section.hero { padding: 0; }
/* Pie global (Theme Builder): mismo caso que .section, con el relleno de .footer de tmi.css. */
.et_pb_section.footer { padding: var(--space-8) 0 var(--space-6); }
/* Espacio para el WhatsApp flotante de escritorio (.float-wa), igual que .footer en tmi.css. */
@media (min-width: 900px) { .et_pb_section.footer { padding-bottom: calc(var(--space-6) + 88px); } }

/* Filas de Divi usadas como .container. Choque de nombres: Divi también usa .container en su
   plantilla y alcanza a estas filas con
   .container { width: 80%; max-width: 1080px } (hoja del padre),
   .et_pb_row:not([class*="et_flex_column"]) { width/max-width: var(--content-…) } (0,2,0),
   .et_flex_section > .et_pb_row { margin: initial } (0,2,0) y
   body:not(.et-tb) #main-content .container { padding-top: 58px } (1,2,1).
   body #main-content .et_pb_row.container (1,2,2) es lo mínimo que gana a las cuatro;
   el relleno lateral sigue siendo el de .container en tmi.css. */
/* El pie del Theme Builder está fuera de #main-content (footer.et-l--footer): misma regla. */
body :is(#main-content, .et-l--footer) .et_pb_row.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-top: 0; padding-bottom: 0; }
.et_pb_row.container > .et_pb_column { margin-right: 0; }
.et_pb_row.container .et_pb_module { margin-bottom: 0; }

/* Grupos de Divi 5: .et_flex_group { display: flex } (0,1,0). En la maqueta estos son bloques. */
.et_flex_group:is(.units, .unit__body, .cta__main, .tmi-bloque) { display: block; }
/* .tmi-bloque: clase solo para Divi en los grupos que reemplazan un <div> sin clase de la maqueta
   (columna de texto del hero, cuerpo de .unit). Fase 3. */

/* Filas de envoltura (.tmi-envoltura): un bloque de ancho completo de la maqueta que lleva su propio
   .container dentro (p. ej. .facts del hero). La fila de Divi trae ancho 80 %, máx. 1080px, margen y relleno. */
body :is(#main-content, .et-l--footer) .et_pb_row.tmi-envoltura { width: 100%; max-width: none; margin: 0; padding: 0; }
.et_pb_row.tmi-envoltura > .et_pb_column { margin: 0; width: 100%; }
.et_pb_row.tmi-envoltura .et_pb_module { margin-bottom: 0; }
/* Y .et_flex_group { flex-direction: var(--flex-direction) } (columna) apila los grupos que
   tmi.css hace flex en fila. */
.et_flex_group.unit__actions { flex-direction: row; }
/* Divi 5 da a todo grupo un gap de 30px (.et_flex_group); .line (flex en columna en tmi.css) no lleva gap:
   sus márgenes ya separan a los hijos (Fase 3, medido: tarjetas 60px más altas). */
.et_flex_group.line { gap: 0; }

/* Pie global (Theme Builder, Task 10). */
/* .et_flex_column { flex-direction: var(--flex-direction) } (columna) apila .footer__bottom,
   que en tmi.css es flex en fila. */
.et_flex_column.footer__bottom { flex-direction: row; }

/* Botón de Divi con clases de la maqueta: quitar el relleno animado del hover y el ícono de Divi.
   Borde (2px), relleno, fuente y radio los pone .btn de tmi.css (medido en el piloto: el
   "borde 0" del plan dejaba el fantasma claro sin borde). */
.et_pb_button.btn,
.et_pb_button.btn:hover { border-width: 2px; border-radius: var(--radius); font-size: 15px; padding: 12px 22px; letter-spacing: .01em; }
/* !important documentado en CUSTOM-CODE.md: el padre declara .et_pb_button { line-height: 1.7em !important }
   (botón de 53,5px en vez de 48px). Solo otro !important con más especificidad le gana. */
.et_pb_button.btn { line-height: 1.2 !important; }
.et_pb_button.btn::after,
.et_pb_button.btn::before { content: none; }
/* Divi 5 marca el botón como .et_flex_module { flex-direction: var(--flex-direction) } (columna):
   el ícono de .btn--wa / .btn--flecha quedaba debajo del texto (botón de 74px). .btn es una fila. */
.et_pb_button.btn { flex-direction: row; }
/* .et_pb_module.et_pb_button:not(.et_block_module) { max-width: max-content } (0,3,0) impide que
   el botón llene su envoltorio bajo 640px como en la maqueta. */
.et_pb_module.et_pb_button.btn { max-width: none; }

/* Color del texto: .et_pb_bg_layout_light.et_pb_module.et_pb_button { color: #2ea3f2 }
   (style-static.min.css, 0,3,0) gana a .btn--primary (0,1,0): azul sobre amarillo, viola la marca.
   (0,3,0)/(0,4,0) cargados después repiten los colores de tmi.css. */
.et_pb_button.btn.btn--primary { color: var(--on-accent); border-color: transparent; }
.et_pb_button.btn.btn--ghost-dark { color: var(--tmi-white); border-color: var(--line-dark); }
.et_pb_button.btn.btn--ghost-dark:hover { border-color: var(--tmi-white); }
.et_pb_button.btn.btn--ghost-light { color: var(--tmi-black); border-color: var(--tmi-black); }
.et_pb_button.btn.btn--ghost-light:hover { color: var(--tmi-white); }

/* Íconos Lucide en botones sin SVG en línea (manual §9): máscara del mismo trazo del sprite. */
.btn.btn--wa { --tmi-ico-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2Zm5.8 14.03c-.25.69-1.44 1.32-1.98 1.36-.5.05-.98.23-3.3-.69-2.8-1.1-4.56-3.96-4.7-4.14-.14-.18-1.12-1.49-1.12-2.85 0-1.35.71-2.02.96-2.29.25-.28.55-.35.73-.35l.53.01c.17 0 .4-.06.62.48.23.55.78 1.9.85 2.04.07.14.11.3.02.48-.09.18-.14.3-.28.46l-.41.48c-.14.14-.28.29-.12.57.16.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.28.14.44.12.6-.07.16-.18.69-.8.88-1.08.18-.28.37-.23.62-.14.25.09 1.6.76 1.87.9.28.14.46.21.53.32.07.12.07.67-.18 1.37Z'/%3E%3C/svg%3E"); }
.btn.btn--wa::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--tmi-ico-wa) center / contain no-repeat;
          mask: var(--tmi-ico-wa) center / contain no-repeat;
}
/* Subir archivo e ubicación (i-upload, i-pin del sprite; Fase 3): mismos trazos, delante del texto. */
.btn.btn--upload { --tmi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.btn.btn--pin { --tmi-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.btn:is(.btn--upload, .btn--pin)::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--tmi-ico) center / contain no-repeat;
          mask: var(--tmi-ico) center / contain no-repeat;
}
.btn.btn--flecha::after {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn.btn--flecha:hover::after { transform: translateX(3px); } }
/* El preset de botón con "ícono desactivado" emite
   body #page-container .et_pb_section .preset--module--divi-button--<id>:before, …:after { display: none !important }
   y lo mismo por módulo (.et_pb_button_N, 1,2,2). Además .et_pb_button:after (0,1,1) trae position: absolute,
   opacity: 0 y margin-left: -1em. Solo otro !important con más especificidad (1,4,2) devuelve los íconos
   de la maqueta (medido en la Task 10: sin esto, "Ir al cotizador" y "Paro de planta 24/7" salían sin ícono).
   !important documentado en CUSTOM-CODE.md. */
body #page-container .et_pb_section .et_pb_button.btn:is(.btn--wa, .btn--upload, .btn--pin)::before,
body #page-container .et_pb_section .et_pb_button.btn.btn--flecha::after { display: inline-block !important; }
.et_pb_button.btn:is(.btn--wa, .btn--upload, .btn--pin)::before,
.et_pb_button.btn.btn--flecha::after { position: static; opacity: 1; margin: 0; flex: none; transform: none; }
/* Divi también desplaza el ícono (top: 50%; transform: translateY(-50%)); el desplazamiento al pasar el ratón
   de la maqueta se repite aquí con un selector de más peso. */
@media (hover: hover) and (pointer: fine) { .et_pb_button.btn.btn--flecha:hover::after { transform: translateX(3px); } }

/* Grupo .hero__ctas de Divi 5 (llamada a cotizar, heroes): .et_flex_group { flex-direction: var(--flex-direction) }
   lo apila; en tmi.css es una fila que envuelve. Cada botón de Divi 5 va dentro de
   div.et_pb_button_module_wrapper: ese envoltorio es el hijo flex, así que recibe el flex de
   .hero__ctas .btn de tmi.css (1 1 220px; 0 0 auto desde 640px) y el botón lo llena. */
.et_flex_group.hero__ctas { flex-direction: row; }
.hero__ctas > .et_pb_button_module_wrapper { display: flex; flex: 1 1 220px; }
.hero__ctas > .et_pb_button_module_wrapper > .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .hero__ctas > .et_pb_button_module_wrapper { flex: 0 0 auto; } }

/* Listas dentro de módulos Texto: Divi pone
   #left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul
   { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px } (0,1,1) y
   .et_pb_text ul / ol { padding-bottom: 1em } (0,1,1), que ganan al reset ul, ol de tmi.css (0,0,1).
   Medido en la Task 10 (.cta__steps 42px en vez de 22px, viñetas en el pie). Mismo peso, cargado después:
   vuelve al reset de la maqueta; las clases de tmi.css (.cta__steps, .triage…) siguen ganando con más peso.
   No toca .prose (entradas del blog, editor de bloques, fuera de .et_pb_text). */
:is(.et_pb_text, .et_pb_code) :is(ul, ol) { list-style: none; padding: 0; line-height: inherit; }
/* Única clase de lista de tmi.css que fija relleno (padding-top), y lo pierde contra el reset anterior. */
:is(.et_pb_text, .et_pb_code) .unit__scope { padding-top: var(--space-4); }

/* Divi: p:not(.has-background):last-of-type { padding-bottom: 0 } (0,2,1) gana a .head .lede (0,2,0),
   que la maqueta usa para alinear la base del lede con el título (Fase 3, medido: 58px en vez de 64px). */
@media (min-width: 1024px) { .head p.lede:last-of-type { padding-bottom: 6px; } }

/* Un .container de la maqueta dentro de un módulo (p. ej. .facts del hero, en una fila .tmi-envoltura):
   Divi le aplica body:not(.et-tb) #main-content .container { padding-top: 58px } (1,2,1). */
body :is(#main-content, .et-l--footer) .et_pb_module .container { padding-top: 0; }

/* Con sesión iniciada, la barra de administración de WordPress (position: fixed desde 601px; 46px de alto
   hasta 782px y 32px desde 783px, admin-bar.css del core) tapa el header, que es sticky con top: 0. */
@media (min-width: 601px) { .admin-bar .header { top: 46px; } }
@media (min-width: 783px) { .admin-bar .header { top: 32px; } }

/* Solo en el editor de Divi para tipos propios (pie del Theme Builder, elementos de biblioteca): Divi carga
   style-static-cpt.min.css con .et-db #et-boc .et-l .et_pb_section { background-color: #fff } y
   .et-db #et-boc .et-l .et_flex_column { display: flex } (1,3,0), y el pie se veía blanco sobre blanco
   (medido en el VB, 2026-10-23). (1,4,0) devuelve el fondo y la grilla de tmi.css. No aplica en el sitio público. */
.et-db #et-boc .et-l .et_pb_section.footer { background-color: var(--ink); }
.et-db #et-boc .et-l .et_flex_column.footer__grid { display: grid; }

/* Tablas de la maqueta dentro del contenido (Fase 3). Divi: .entry-content table:not(.variations)
   { border: 1px solid #eee; margin: 0 0 15px } (0,2,1), .entry-content tr td { border-top: 1px solid #eee;
   padding: 6px 24px } y .entry-content tr th / thead th { color: #555; font-weight: 700; padding: 9px 24px }
   (0,1,2) ganan a .report td / .data-table td (0,1,1). Se repiten los valores de tmi.css con más peso. */
.entry-content :is(.report, .data-table) table { border: 0; margin: 0; }
.entry-content .report :is(th, td) { padding: 12px var(--space-5); border-top: 0; }
.entry-content .report th { color: var(--steel-300); font-weight: 600; }
.entry-content .data-table th { padding: var(--space-3) var(--space-4) var(--space-3) 0; color: var(--fg-muted); font-weight: 600; }
.entry-content .data-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 0; }
/* p:not(.has-background):last-of-type { padding-bottom: 0 } (0,2,1) también anula el relleno de .report__foot. */
p.report__foot:last-of-type { padding-bottom: var(--space-3); }

/* Módulo Imagen con .frame--photo: Divi envuelve el <img> en span.et_pb_image_wrap { position: relative },
   y el img de la maqueta es absolute (inset: 0) respecto del marco: quedaba de 0×0 (medido, Fase 3).
   El envoltorio deja de ser el contenedor posicionado y de recibir .frame span (bloque de texto del marco). */
.et_pb_image.frame--photo .et_pb_image_wrap { position: static; display: block; margin: 0; max-width: none; }

/* Logo del pie como módulo Imagen (archivo de Medios): en la maqueta es a.logo > img.logo__img.
   El módulo lleva la clase .logo en el div; el img no tiene .logo__img, así que se repite su alto. */
.et_pb_image.logo { display: block; margin: 0; line-height: inherit; font-size: inherit; }
.et_pb_image.logo a { display: inline-flex; align-items: center; }
.et_pb_image.logo .et_pb_image_wrap { display: block; }
.footer .et_pb_image.logo img { height: 52px; width: auto; max-width: none; }

/* Filtros del blog como enlaces a categorías (E8, Task 18): mismo aspecto que .filters button de la
   maqueta; la categoría actual (aria-current) como el botón presionado. */
.filters a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--gray-400); border-radius: var(--radius); background: var(--tmi-white);
  font: 600 14px var(--font-body); color: var(--fg); text-decoration: none;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out), transform .16s var(--ease-out);
}
.filters a:hover { border-color: var(--tmi-black); }
.filters a:active { transform: scale(0.97); }
.filters a[aria-current] { background: var(--tmi-black); border-color: var(--tmi-black); color: var(--tmi-white); }
@media (prefers-reduced-motion: reduce) { .filters a:active { transform: none; } }

/* Listas del artículo (.prose dentro del módulo Contenido de la entrada, plantilla "Entrada" del Theme
   Builder): Divi aplica .et-l--body ul / ol { disc|decimal inside; padding: 0 0 23px 1em; line-height: 26px }
   (0,1,1). Medido: viñetas desplazadas 17px y renglones de 26px en vez de 29px. (0,2,1) repite tmi.css. */
.et-l--body .prose ul { list-style: none; padding: 0; line-height: inherit; }
.et-l--body .prose ol { list-style: decimal outside; padding: 0 0 0 var(--space-5); line-height: inherit; }

/* Divi dibuja la línea divisoria de su barra lateral en #main-content .container::before (1,1,1) y solo la
   oculta con .et_full_width_page. En el blog y las entradas (Theme Builder, sin ese body class) aparecía
   una línea gris vertical a la izquierda de cada fila .container (medido, Task 18). */
#main-content .et_pb_row.container::before { display: none; }