/*
Theme Name: pd-native
Theme URI: https://www.productosdigitales.mx
Author: Productos Digitales Architecture Team
Author URI: https://www.productosdigitales.mx
Description: Tema híbrido nativo de WordPress (Classic + Gutenberg) con blindaje de layout vía theme.json y Custom Post Types.
Version: 1.2.0
Text Domain: pd-native
Domain Path: /languages
*/

/* ==========================================================================
   Índice (Fase 6, punto 7)
   Ajustes sobre webflow.css, que se carga antes. Las reglas usan las clases
   del dump (y las de WordPress para el marcado de los bloques core); lo que
   no existe en el dump usa clases propias con el prefijo pd-, documentadas en
   contexto.md. Ninguna declaración lleva la marca de prioridad máxima: esta
   hoja va después de webflow.css y de las hojas del core, y sus selectores
   tienen igual o más especificidad (T-01).
   El lienzo del editor carga esta misma hoja; sus ajustes propios están en
   assets/css/editor-style.css, con el mismo orden de grupos.

   Base
     1. Fuente de iconos
     2. Enlace para saltar al contenido
   Layout
     3. Navbar fija
     4. Secciones claras (.section-one.blue)
     5. Hero de las páginas (.hero_sub)
   Componentes
     6. Logos del sitio (navbar y pie)
     7. Dropdown "Programas" de la navbar de escritorio
     8. Navbar: menú móvil, teclado y fondo transparente
     9. Formulario del pie
    10. Tarjetas de proyectos: interruptor
    11. Logos y cápsulas de logos
    12. Línea de pasos
    13. Enlaces con el texto directamente en el enlace
    14. Animaciones Lottie
   Páginas y plantillas
    15. Portada
    16. Equipo
    17. MVP
    18. Automatiza
    19. Guía de ofertas
    20. Políticas de privacidad
    21. Perfiles de consultores
    22. Listado del blog (/blogposts/)
    23. Listados del blog (archive.php e index.php)
    24. Artículo del blog y su cierre (single.php)
    25. Página 404 (404.php)
   ========================================================================== */

/* ##########################################################################
   BASE
   Tipografía propia del tema y accesibilidad general.
   ########################################################################## */

/* ==========================================================================
   1. Fuente de iconos (Material design iconic font)
   La usan los iconos del menú (pd-icono-*), los beneficios de Automatiza y
   Propuesta de valor (.text-block-109, con sus colores y el brightness(20)
   de webflow.css, como en el dump) y los consultores (§21).
   ========================================================================== */
@font-face {
    font-family: 'Material design iconic font';
    src: url('assets/fonts/Material-Design-Iconic-Font.woff2') format('woff2'),
         url('assets/fonts/Material-Design-Iconic-Font.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. Accesibilidad: enlace para saltar al contenido (header.php)
   Clase propia (no existe en el dump). Fuera de la vista hasta que recibe el
   foco con el teclado; entonces aparece sobre la navbar fija (z-index 1000).
   ========================================================================== */
.pd-skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1001;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #fff;
    color: #0a0e36;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.pd-skip-link:focus {
    transform: none;
}

main:focus {
    outline: none;
}

/* ##########################################################################
   LAYOUT
   Estructura común de las páginas: navbar fija, secciones y hero.
   ########################################################################## */

/* ==========================================================================
   3. Navbar fija (header.php, .navigation-wrap)
   La navbar queda fija arriba y por encima del contenido (z-index 1000);
   ni ella ni la de escritorio (.navigation.w-nav) recortan la lista del
   dropdown (overflow visible).
   ========================================================================== */
.navigation-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    overflow: visible;
}

.navigation.w-nav {
    overflow: visible;
}

/* ==========================================================================
   4. Secciones claras (.section-one.blue): texto oscuro
   Sección clara del dump (fondo azul claro), en la portada, MVP, Automatiza,
   el portafolio y Propuesta de valor. El texto va en el azul oscuro de la
   marca; en el dump hereda uno casi igual (#090e36), salvo la etiqueta .tag,
   blanca sobre el fondo claro. Los iconos de los beneficios de Automatiza
   (.text-block-109) conservan su color de webflow.css.
   ========================================================================== */
.section-one.blue,
.section-one.blue .wrapper,
.section-one.blue h1,
.section-one.blue h2,
.section-one.blue h3,
.section-one.blue p:not(.text-block-109),
.section-one.blue .h2_home,
.section-one.blue .heading-87,
.section-one.blue .heading-88,
.section-one.blue .paragraph {
    color: #0b132a;
}

.section-one.blue .tag.blue {
    color: #fff;
    background-color: #0a0e36;
}

.section-one.blue .collection-item-14 .heading-87 {
    color: #0b132a;
}

.section-one.blue .collection-item-14 .heading-88 {
    color: #4a5568;
}

.section-one.blue a.link-block-22 {
    color: #0b132a;
}

.section-one.blue .material_icon {
    color: #212121;
}

/* ==========================================================================
   5. Hero de las páginas (.hero_sub)
   Las piezas del hero de página que comparten Programas, MVP, Automatiza,
   el portafolio, Propuesta de valor, las landings y el patrón "Hero de
   página": su imagen y su inicio bajo la navbar fija. El diagrama de
   Automatiza (.image-45) está en §18.
   ========================================================================== */
/*
 * Imagen del hero de las páginas (.hero_sub .div-block-193 .heroimg_section)
 * En el dump, .heroimg_section va en el <img>: como mucho 300 px de alto
 * (220 px por debajo de 768 px) y el max-width:100% de las imágenes de
 * webflow.css, centrado por .div-block-193. En WordPress la clase del bloque
 * core/image cae en su <figure>: el <figure> va sin margen y la imagen recibe
 * los límites de .heroimg_section. (Automatiza, con .image-45: §18.)
 */
.hero_sub .div-block-193 > .wp-block-image {
    margin: 0;
}

.hero_sub .div-block-193 > .heroimg_section img {
    width: auto;
    max-height: 300px;
}

@media screen and (max-width: 767px) {
    .hero_sub .div-block-193 > .heroimg_section img {
        max-height: 220px;
    }
}

/*
 * Hero de las páginas (.hero_sub) bajo la navbar fija
 * - Por debajo de 480 px, webflow.css deja a .hero_sub un padding-top de
 *   42 px, menos que la navbar fija (60 px), que tapaba la primera línea del
 *   hero (la etiqueta de Programas y MVP, "¿Por qué trabajar con nosotros?" en
 *   Propuesta de valor; también en el dump): el hero empieza como el hero
 *   oscuro de las landings (.hero_sub.port, 6em). Las variantes con su propio
 *   padding-top en webflow.css (.port, .services, .scaleup) no cambian.
 *   Decisión del responsable (Fase 6).
 * - Automatiza (.hero_sub.automation): webflow.css le quita el padding-top a
 *   todos los anchos (padding: 0 32px), así que la navbar fija tapaba la
 *   etiqueta y la primera línea del título (también en el dump). Empieza
 *   como los demás .hero_sub: 140 px, y 6em por debajo de 480 px; la
 *   etiqueta, el título y el subtítulo quedan a la altura de los de MVP y
 *   Programas. Decisión del responsable (Fase 6).
 * - Propuesta de valor (.hero_sub.propuesta): webflow.css le da el azul
 *   medianoche de la marca (sobre la malla mesh-43) y, por debajo de 768 px,
 *   lo cambia a blanco con la ilustración undraw_searching de fondo, sin
 *   cambiar el texto ni la imagen del hero, que son blancos: a 390 px solo se
 *   leía "valor" (también en productosdigitales.mx). Aquí conserva el fondo de
 *   los anchos mayores (la misma regla de webflow.css), así que el texto y la
 *   ilustración se ven como a 768 px o más. Decisión del responsable (Fase 6).
 */
.hero_sub.automation {
    padding-top: 140px;
}

@media screen and (max-width: 767px) {
    .hero_sub.propuesta {
        background-image: linear-gradient(#0a0e36, #0a0e36), url("assets/img/webflow/mesh-43.png");
        background-position: 0 0, 100% 0;
        background-size: auto, cover;
    }
}

@media screen and (max-width: 479px) {
    .hero_sub,
    .hero_sub.automation {
        padding-top: 6em;
    }
}

/* ##########################################################################
   COMPONENTES
   Piezas que se repiten en varias páginas o en todas.
   ########################################################################## */

/* ==========================================================================
   6. Logos del sitio (the_custom_logo y "Ajustes del sitio")
   El <img> ocupa su .logo_navbar como el <svg> en línea del dump
   (width="100%" height="auto", alineado en la línea base).
   ========================================================================== */
.logo_navbar img {
    width: 100%;
    height: auto;
    vertical-align: baseline;
}

/* Insignia de partner del pie (.image-44, max-width 160px en webflow.css): el
   <img> de wp_get_attachment_image() lleva width/height, y webflow.css no pone
   height:auto a las imágenes. */
.image-44 {
    height: auto;
}

/* ==========================================================================
   7. Dropdown "Programas" de la navbar de escritorio: estructura y microinteracciones
   Solo el de la navbar de escritorio (.navigation, .navigation-dropdown): el
   dropdown del menú móvil (.mobile-dropdown) usa las reglas de webflow.css
   para las mismas clases (.icon-wrap, .dropdown-title, .nav-link-details).
   ========================================================================== */
.navigation .w-dropdown {
    position: relative;
    display: inline-block;
    text-align: left;
}

.dropdown-toggle-2 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

/* Microinteracción de apertura al hacer hover */
.w-dropdown:hover .navigation-dropdown,
.w-dropdown.w--open .navigation-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0px, 0px) scale3d(1, 1, 1);
    pointer-events: auto;
}

.navigation-dropdown {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate3d(-50%, 15px, 0px) scale3d(0.95, 0.95, 1);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
    pointer-events: none;
    z-index: 1001;
}

/* Abierta con clic o con el teclado (navbar.js pone w--open en la lista): en
   el mismo sitio y con el mismo aspecto que con el ratón encima. webflow.css
   da a .navigation-dropdown.w--open left:-100px y padding-top:10px (así
   centraba Webflow la lista, sin transform): sumados al translate de arriba,
   la lista se corría 160 px a la izquierda y 10 px hacia abajo. El fondo
   transparente del estado abierto de webflow.css vale también con el ratón
   encima: sin él, el gris de .w-dropdown-list asomaba en las esquinas
   redondeadas de .dropdown-wrapper. */
.navigation .navigation-dropdown {
    background-color: transparent;
}

.navigation .navigation-dropdown.w--open {
    left: 50%;
    padding-top: 0;
}

.dropdown-pointer {
    position: relative;
}

.dropdown-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    min-width: 320px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 8px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dropdown-link:hover {
    background-color: #f7f8fc;
    transform: translateX(4px);
}

.navigation-dropdown .dropdown-title {
    color: #ff5461;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
    font-family: Montserrat, sans-serif;
}

.navigation-dropdown .nav-link-details {
    color: #555e68;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    font-family: Open Sans, sans-serif;
}

.navigation-dropdown .icon-wrap {
    background-color: rgba(255, 84, 97, 0.08);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    transition: background-color 0.2s ease;
}

.dropdown-link:hover .icon-wrap {
    background-color: rgba(255, 84, 97, 0.16);
}

/* ==========================================================================
   8. Navbar: menú móvil, teclado y fondo transparente (header.php, navbar.js y navbar-fondo.js)
   - Escritorio: la lista de "Programas" sigue abierta mientras el foco está
     dentro (:focus-within), igual que con el ratón encima o con .w--open.
   - Móvil: el botón .menu-mob queda por encima del panel abierto (el panel
     tiene z-index 1 en webflow.css), porque es el control para cerrarlo y
     webflow.css ya estiliza su estado abierto (.menu-mob.w--open).
   - html.pd-menu-abierto (clase propia): sin scroll de fondo con el menú
     abierto.
   - Foco visible con el teclado: webflow.css quita el outline del botón y de
     los disparadores (.w-nav-button:focus, .w-dropdown-toggle:focus).
   - Navbar móvil transparente al principio (assets/js/navbar-fondo.js, Fase 6;
     la interacción IX2 "Navbar" del dump, solo en las vistas con hero oscuro):
     con la clase propia pd-navbar-fondo, el fondo de .navigation-mob es el
     azul medianoche de webflow.css (--midnight-blue, #0a0e36) con la opacidad
     que el JS pone en --pd-navbar-opacidad (0 arriba, 1 a partir del 3 % del
     desplazamiento). La transición corta sustituye al suavizado de IX2. Sin la
     clase (sin JS o en las vistas con hero claro), la navbar es azul.
   ========================================================================== */
.navigation-mob.pd-navbar-fondo {
    background-color: rgb(10 14 54 / var(--pd-navbar-opacidad, 1));
    transition: background-color 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .navigation-mob.pd-navbar-fondo {
        transition: none;
    }
}

.navigation-dropdown:focus-within {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0px, 0px) scale3d(1, 1, 1);
    pointer-events: auto;
}

.navigation-mob .w-nav-button {
    z-index: 2;
}

/* El icono del botón es un <span> (el <button> no admite un <div>); como el
   <div> del dump, ocupa su propia línea. */
.menu-mob .icon-12 {
    display: block;
}

html.pd-menu-abierto,
html.pd-menu-abierto body {
    overflow: hidden;
}

.w-nav-button:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-nav-link:focus-visible,
.w-nav-brand:focus-visible,
.dropdown-link:focus-visible,
.dropdown-link-mobile:focus-visible {
    outline: 2px solid #d7ff00;
    outline-offset: 2px;
}

/* ==========================================================================
   9. Formulario del pie (footer.php, assets/js/formulario.js; Fase 3B, T-07)
   - Estado del envío en el bloque .w-form (clases propias, las pone footer.php
     tras la redirección sin JS o formulario.js sin recargar): pd-form-enviado
     oculta el formulario y muestra .w-form-done; pd-form-error muestra
     .w-form-fail debajo. Es lo que webflow.js hacía con estilos en línea.
   - .pd-trampa (clase propia): el campo trampa (honeypot) queda fuera de la
     vista, sin display:none, que algunos bots detectan y se saltan.
   ========================================================================== */
.w-form.pd-form-enviado > form {
    display: none;
}

.w-form.pd-form-enviado > .w-form-done,
.w-form.pd-form-error > .w-form-fail {
    display: block;
}

.pd-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   10. Tarjetas de proyectos: interruptor .div-block-175
   En el dump, el botón .link-block-14 se desplaza y se pone rojo al pasar el
   ratón por la tarjeta (interacción IX2). Aquí es solo CSS, y también responde
   al foco del teclado dentro de la tarjeta (:focus-within). Sin transición con
   prefers-reduced-motion. No es un slider: no necesita JS.
   ========================================================================== */
/* Riel: espaciado uniforme para contener la perilla. */
.card_base .div-block-175 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Perilla en reposo: a la izquierda y gris. */
.card_base .link-block-14,
a.card_base .link-block-14 {
    background-color: rgb(161, 161, 161);
    transform: translate3d(0px, 0px, 0px);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.25s ease;
}

/* Ratón o foco en la tarjeta: se desplaza 17 px y se enciende en rojo. */
.card_base:hover .link-block-14,
a.card_base:hover .link-block-14,
.collection-item-8:hover .link-block-14,
.collection-item-8:focus-within .link-block-14,
.link-block-17:hover ~ .card_base .link-block-14 {
    background-color: #ff5461;
    transform: translate3d(17px, 0px, 0px);
}

@media (prefers-reduced-motion: reduce) {
    .card_base .link-block-14 {
        transition: none;
    }
}

/* ==========================================================================
   11. Logos (.logos, .collection-item-13) y cápsulas de logos (.collection-list-15)
   Componente de la portada ("Herramientas"), de Propuesta de valor y de
   Automatiza: cada logo es un core/image dentro de .logos, y su <figure> no
   añade margen ni caja de línea (en el dump el <img> iba suelto; sin estas
   reglas, cada fila de logos de la portada baja 10 px). Las cápsulas son de
   Propuesta de valor y Automatiza (§18 ajusta las de Automatiza). Los logos
   de una cápsula pasan a otra línea cuando no caben (el flex-wrap: wrap de
   webflow.css, como en el dump): a 390 px, la segunda cápsula de "¿Cómo?" de
   Propuesta de valor (8 logos) desbordaba la página (Fase 6). Entre logos,
   los huecos de webflow.css (7 px en la línea y 16 px entre líneas).
   ========================================================================== */
.collection-list-15 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.collection-item-13 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.logos figure.wp-block-image {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Solo los logos de las cápsulas (.collection-list-15): los de la portada
   (.collection-list-13) conservan los límites de .image-28 del dump (§15).
   Los de img.image-28.mini del dump (como mucho 46 × 31 px, con su
   proporción), en el <img> del core/image: la clase va en el <figure>. */
.collection-list-15 .logos figure.wp-block-image img,
.logos img.image-28.mini {
    display: block;
    width: auto;
    height: auto;
    max-width: 46px;
    max-height: 31px;
    object-fit: contain;
}

.collection-item-13:empty,
.collection-item-13:has(.logos:empty) {
    display: none;
}

/* ==========================================================================
   12. Línea de pasos (.div-block-200: MVP, Automatiza y el patrón "Pasos")
   La línea fina del último tramo (.div-block-206.two) no se ve, y el número
   y el título de cada paso son párrafos (en el dump, <div>).
   ========================================================================== */
.div-block-206.two {
    opacity: 0;
}

/*
 * La línea de pasos es más ancha que su columna (webflow.css: width 100 %,
 * margin-left y translate de 32 px desde 1440 px, y la raya de cada paso,
 * .div-block-204, al 107 %): MVP y Automatiza medían 1452 px a 1440 px. En el
 * dump no desbordaba porque todo el contenido va dentro de .div-block-122
 * (overflow: hidden), el envoltorio que el tema solo pinta en el 404. Aquí se
 * recorta solo la sección que contiene la línea, en horizontal (clip no crea
 * un contenedor de desplazamiento ni recorta en vertical). Lo que queda fuera
 * es el relleno vacío de la línea y el final de la raya, como en el dump.
 */
.section-one:has(.div-block-200) {
    overflow-x: clip;
}

/*
 * Por debajo de 480 px, webflow.css pone la línea en una columna
 * (.div-block-200), pero la variante de tres pasos (._3_col) conserva sus tres
 * columnas, que gana por especificidad: en Automatiza (y el patrón "Pasos")
 * no cabían ("Implementar" y el texto del tercer paso quedaban cortados, en el
 * dump también) y la página medía 405 px a 390 px. En una columna, como la
 * línea de MVP en móvil.
 */
@media screen and (max-width: 479px) {
    .div-block-200._3_col {
        grid-template-columns: 1fr;
    }
}

/*
 * En el dump, el número y el título de cada paso son <div>; en bloques son
 * párrafos, y webflow.css da a todo <p> margin-bottom:10px. :where() deja la
 * especificidad de un simple `p`, así que las media queries de webflow.css
 * (margin-bottom:-32px de .text-block-106 en móvil) siguen mandando.
 */
p:where(.text-block-106, .text-block-105) {
    margin-bottom: 0;
}

/* ==========================================================================
   13. Enlaces con el texto directamente en el enlace (Fase 4)
   En el dump, estos enlaces llevaban el texto en un <span> con su clase. En
   bloques el texto va en el enlace: un elemento dentro de un enlace no se
   puede editar (al escribir, el editor lo parte en un enlace por letra). El
   enlace lleva el estilo del span del dump (webflow.css), con sus media
   queries; la separación que daba el margin-bottom del span es aquí padding.
   ========================================================================== */
/* "Más detalles →" (Portafolio y Propuesta de valor, "¿Quién?"): span.text-block-108. */
a.link-block-22 {
    font-size: 14px;
}

/* "Fuente: …" (Propuesta de valor, "¿Para qué?"): div.text-block-110, blanco,
   centrado y sin el subrayado del enlace (en el dump, el texto va en un <div>
   dentro del enlace y no se ve subrayado). */
a.link-block-23 {
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
}

/* Subtítulo de la Guía de ofertas: span.brix---subtitle-3. */
a.link-block-38 {
    color: var(--light-coral);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 20px;
    padding-bottom: 8px;
}

@media screen and (max-width: 767px) {
    a.link-block-38 {
        font-size: 12px;
        line-height: 19px;
    }
}

@media screen and (max-width: 479px) {
    a.link-block-38 {
        font-size: 14px;
        line-height: 18px;
    }
}

/* ==========================================================================
   14. Animaciones Lottie (assets/js/lottie.js; Fase 3B, punto 5)
   Un bloque core/image con la clase pd-lottie-<nombre> es la imagen fija de la
   animación assets/lottie/<nombre>.json. La clase del dump del contenedor de
   la Lottie (.lottie-animation-9, .lottie-animation-5…) va en el mismo bloque
   y da la caja; la imagen y la animación la ocupan igual que el SVG del dump
   (alto del contenedor si lo tiene, si no, el que da el ancho; en línea, sobre
   la línea base).
   - pd-animada (clase propia): la pone el JS cuando la animación está lista;
     oculta la imagen fija y muestra .pd-animacion (clase propia, contenedor
     del SVG que pinta lottie-web).
   ========================================================================== */
.wp-block-image[class*="pd-lottie-"] {
    margin: 0;
}

.wp-block-image[class*="pd-lottie-"] img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    vertical-align: baseline;
}

.wp-block-image.pd-animada > img,
.wp-block-image:not(.pd-animada) > .pd-animacion {
    display: none;
}

.pd-animacion {
    width: 100%;
    height: 100%;
}

/* ##########################################################################
   PÁGINAS Y PLANTILLAS
   Lo propio de una página o de una plantilla del tema.
   ########################################################################## */

/* ==========================================================================
   15. Portada (Fase 4, G-03; marcado de dump/index.html)
   Los 4 core/html de la portada pasaron a bloques core con las clases del
   dump. Lo que cambia respecto al dump:
   - Hero: la imagen de fondo es un core/image y la clase .image-58 va en el
     <figure>; la imagen lo ocupa entero, como el img.image-58 del dump. El
     botón es un párrafo con el enlace a.cust_btn y el texto directamente en
     el enlace, con el estilo del div.text-block-121.yellow que en el dump iba
     dentro: un elemento dentro de un enlace no se puede editar (al escribir,
     el editor lo parte en un enlace por letra).
   - Clientes: cada logo es un core/image enlazado (figure > a.client_logo >
     img). El enlace recupera el display:flex del dump (el core lo pisa con
     .wp-block-image > a) y la imagen lleva las reglas de .image-22, con sus
     media queries, que en el dump iban en el <img>: en el <figure> limitarían
     también el enlace.
   - Herramientas: cada logo del dump repetía el id w-node-_67295a0f…
     (justify-self:center en webflow.css); en bloques no se repiten anclas y la
     regla va por clase. La imagen lleva los límites de .image-28 del dump.
   - Los logos (Clientes y Herramientas) llevan width y height auto: con
     max-width y max-height, un <img> con atributos width/height (los pone el
     editor, y los pondrá wp_get_attachment_image() cuando las imágenes pasen
     a la biblioteca de medios) se deformaría.
   - Productos digitales: en el dump cada tarjeta es un <a> entero. En bloques
     es un grupo (.brix---link-content-2) y el enlace va en el título: su
     ::after cubre la tarjeta, imagen incluida, como el del título del
     catálogo de la Guía (§19). Para que la tarjeta sea su bloque contenedor, es flex en columna
     y la caja del texto (.brix---card-v11-feature-over-image) deja de ser
     position:relative: como elemento flex, su z-index:1 la sigue poniendo
     sobre la imagen. El texto hereda el font-weight:500 que webflow.css da a
     todo <a>, y el enlace del título, el color y el peso del título. La
     imagen y la flecha llevan sus reglas del dump en el <img> y sus <figure>
     no añaden margen; "Conócelo" es un párrafo sin margen. El ::after del
     enlace no va en editor-style.css: en el lienzo taparía los textos y un
     clic ya no los seleccionaría.
   ========================================================================== */
.hero_section > .image-58 {
    margin: 0;
}

.hero_section > .image-58 img {
    width: 100%;
    height: 100%;
}

.div-block-324 > p:has(> .cust_btn) {
    margin-bottom: 0;
}

.div-block-324 .cust_btn {
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.3em;
}

@media screen and (max-width: 991px) {
    .div-block-324 .cust_btn {
        font-size: .8em;
    }
}

@media screen and (max-width: 767px) {
    .div-block-324 .cust_btn {
        text-align: center;
    }
}

.collection-item-15 > .wp-block-image {
    margin: 0;
}

.collection-item-15 .client_logo {
    display: flex;
}

.collection-item-15 .client_logo img {
    width: auto;
    height: auto;
    opacity: .63;
    filter: brightness(34%) grayscale() invert();
    max-width: 82px;
    max-height: 32px;
}

@media screen and (max-width: 767px) {
    .collection-item-15 .client_logo img {
        max-width: 74px;
        max-height: 30px;
    }
}

@media screen and (max-width: 479px) {
    .collection-item-15 .client_logo img {
        max-width: 83px;
        max-height: 28px;
    }
}

.collection-list-13 > .collection-item-13 {
    justify-self: center;
}

.collection-list-13 .logos > .image-28 img {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 60px;
}

.brix---link-content-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    font-weight: 500;
}

.brix---link-content-2 > .brix---card-v11-feature-over-image {
    position: static;
}

.brix---heading-h3-size-3 a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

/* z-index 1 dentro de la caja del texto (su contexto de apilamiento): por
   encima de p.dark, que es position:relative por debajo de 992 px, y de la
   flecha, cuyo filter crea su propio contexto. */
.brix---heading-h3-size-3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.brix---image-border-radius-24px > .brix---image-width-100,
.brix---link-wrapper-2 > .brix---link-icon-right-2 {
    margin-top: 0;
    margin-bottom: 0;
}

/* En el dump, la flecha es un elemento flex (sin la caja de línea de un <img>
   dentro de un <figure>). */
.brix---link-wrapper-2 > .brix---link-icon-right-2 img {
    display: block;
}

.brix---image-border-radius-24px > .brix---image-width-100 img {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
}

p:where(.brix---text-200-bold-3) {
    margin-bottom: 0;
}

/* ==========================================================================
   16. Equipo (<body class="body blue"> en el dump, T-04)
   El fondo azul claro de Webflow (Alice Blue) en la página y en su sección
   .section-24, y los bloques core de las fotos (.image-23 y .image-32, que
   ocupan su caja) y del enlace a la página (p.div-block-141).
   ========================================================================== */
.wp-block-image.image-23 {
    margin: 0;
}
.wp-block-image.image-23 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.wp-block-image.image-32 {
    margin: 0;
    width: 100%;
    height: 100%;
}
.wp-block-image.image-32 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale();
    display: block;
}
p.div-block-141 {
    margin-top: 8px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    display: flex;
    justify-content: center;
}

.body.blue,
.body.blue .wp-block-group.section-24 {
    background-color: #f3f8fd;
}

/* ==========================================================================
   17. MVP (/programas/mvp/)
   - Ilustraciones de "¿Por qué te conviene?" (.section-29.blue .div-block-196):
     80 px de alto, como en el dump.
   - Lista de Startups ("Proyectos relevantes"): la lista es el patrón
     "Proyectos – slider" (.collection-item-11 > .collection-list-7), el mismo
     de la portada, el portafolio y las landings. En MVP va en una sección
     clara y su título es .heading-66 (en las demás, .heading-81): esa clase
     del dump es su contexto (T-17). Así, el patrón puesto en otra sección
     clara no hereda esta rejilla. El título va a la izquierda y las tarjetas
     en una rejilla de 3, 2 y 1 columnas con 24 px de hueco (decisión de la
     migración; el dump centra el título y usa 16 px).
   ========================================================================== */
.section-29.blue .div-block-196 figure.wp-block-image {
    margin: 0 0 24px 0;
    max-height: 80px;
    display: flex;
    align-items: flex-start;
}

.section-29.blue .div-block-196 figure.wp-block-image img,
.section-29.blue .div-block-196 img.image-30 {
    max-height: 80px;
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0;
}

.collection-item-11:has(> .heading-66) {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.collection-item-11 > .heading-66,
.collection-item-11 > .heading-66 a {
    text-align: left;
    align-self: flex-start;
    justify-content: flex-start;
    margin-left: 0;
}

.collection-item-11:has(> .heading-66) .collection-list-7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

.collection-item-11:has(> .heading-66) .collection-item-8 {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 991px) {
    .collection-item-11:has(> .heading-66) .collection-list-7 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .collection-item-11:has(> .heading-66) .collection-list-7 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   18. Automatiza (/programas/automatiza/)
   - Diagrama del hero (.hero_sub.automation .image-45): hasta 540 px,
     centrado en su columna (el inicio del hero es de §5).
   - Cápsulas de conexiones (.div-block-284): rejilla de 6, 4, 3 y 2
     columnas con dos logos por cápsula; sus logos, de 24 px de alto, ganan a
     los de §11 (misma especificidad, después). Las 6 columnas necesitan unos
     730 px: entre 992 y 1199 px, la columna de la sección es más estrecha y
     la rejilla la ensanchaba (la página medía 1153 px), así que pasa a 4
     columnas por debajo de 1200 px (antes, de 992 px).
   ========================================================================== */
.hero_sub.automation .div-block-193 figure.wp-block-image {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hero_sub.automation .div-block-193 figure.wp-block-image img,
.hero_sub.automation .div-block-193 img.image-45 {
    max-width: 540px;
    max-height: 540px;
    width: 100%;
    height: auto;
    padding: 0;
    object-fit: contain;
}

.div-block-284 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 16px;
    margin-top: 32px;
    width: 100%;
}

@media screen and (max-width: 1199px) {
    .div-block-284 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .div-block-284 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 479px) {
    .div-block-284 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.div-block-284 .collection-list-wrapper-8.limit-2 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 64px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 140px;
    width: 100%;
    margin: 0 auto;
}

.div-block-284 .collection-list-15.limit-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.div-block-284 .collection-item-13 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
}

.div-block-284 .logos {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.div-block-284 .logos figure.wp-block-image {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-block-284 .logos figure.wp-block-image img,
.div-block-284 .logos img.image-28.mini {
    height: 24px;
    max-height: 24px;
    width: auto;
    max-width: 44px;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   19. Guía de ofertas (.collection-item-24 y .brix---section-3)
   ========================================================================== */
/* El h1 (.brix---color-neutral-804 > h1) hereda el color de su envoltorio, el
   neutral 800 de la plantilla BRIX (#211f54). En el dump sale blanco sobre el
   gris claro de .body.grey (solo se lee el enlace "Amazon México"): la regla
   h1{color:#fff} de webflow.css gana al color del envoltorio. Mismo criterio
   que los listados del blog (§23); decisión del responsable (Fase 6). */
.brix---color-neutral-804 > h1 {
    color: inherit;
}

.collection-item-24 h3.glance_list,
.collection-item-24 .glance_list h3 {
    color: #0a0e36;
    margin: 0;
    font-size: 1em;
    line-height: 1.2;
}

.collection-item-24 h3.glance_list a,
.collection-item-24 .glance_list h3 a {
    color: #0a0e36;
    text-decoration: none;
}

.collection-item-24 h3.glance_list a:hover,
.collection-item-24 .glance_list h3 a:hover {
    color: #ff5461;
}

.collection-item-24 figure.wp-block-image {
    margin: 0;
    width: 32px;
    height: 32px;
}

.collection-item-24 figure.wp-block-image img,
.collection-item-24 img.brix---square-icon-56px {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    border-radius: 8px;
}

/* El espacio entre banners lo da el margin-bottom:1em de .link-block-40 (dump). */
.otras_ofertas figure.wp-block-image {
    margin: 0;
}

.otras_ofertas figure.wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/*
 * Catálogo de "Promociones pasadas" en bloques (Fase 4): en el dump, el título
 * era un h3 dentro de <b>, y un .id_link absoluto cubría toda la fila. Aquí el
 * título lleva el enlace, y su ::after cubre la fila (.collection-item-24 es
 * position:relative en webflow.css).
 */
.collection-item-24 .glance_list h3 {
    font-weight: 700;
}

/* webflow.css da font-weight:500 a todo <a>. */
.collection-item-24 .glance_list h3 a {
    font-weight: inherit;
}

.collection-item-24 .glance_list h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* ==========================================================================
   20. Políticas de privacidad (/politicas-de-privacidad/, marcado de
   dump/politicas-de-privacidad; Fase 6)
   La página no tiene cabecera: su .wrapper (el título en la primera columna y
   el texto legal en la segunda) empieza en el borde superior, y la navbar fija
   tapaba el título y las primeras líneas, también en el dump. Baja lo mismo
   que el artículo del blog, que tiene el mismo marcado (.wrapper >
   .wrapper_2col > .first_col) y se separa de la navbar con el padding-top: 5em
   de .div-block-291.blog. Se reconoce por el título de la página (h1) en la
   primera columna, que solo tiene Políticas. El título lleva la variante del
   dump para fondos claros, .tag.blue (en el contenido; tools/paginas).
   ========================================================================== */
.wrapper:has(> .wrapper_2col > .first_col > h1) {
    padding-top: 5em;
}

/* ==========================================================================
   21. Perfiles de consultores (/consultores/<nombre>/,
   tools/paginas/consultor.js; Fase 5, punto 4)
   - El nombre (h1.heading-94) sale blanco sobre blanco en el dump (regla
     h1{color:#fff} de webflow.css): aquí hereda el color del texto.
   - Los iconos del lugar y del teléfono (div.text-block-119 del dump, glifos
     de Material design iconic font) son pseudo-elementos con su estilo.
   - Lugar, teléfono y botones son párrafos (se editan con un clic): sin el
     margen que webflow.css da a <p>.
   - core/image pone .image-33 en el <figure>: la foto lo ocupa como el <img>
     del dump.
   - Lista de proyectos (Query Loop): el <li> sin margen ni viñeta; "Leer más"
     lleva el estilo del div.text-block-156 del dump y conserva el subrayado
     del enlace, que core/read-more quita.
   ========================================================================== */
.section-31 h1.heading-94 {
    color: inherit;
}

.div-block-236::before,
a.link-block-32::before {
    margin-right: 4px;
    font-family: "Material design iconic font", sans-serif;
}

.div-block-236::before {
    content: "\f1ab";
}

a.link-block-32::before {
    content: "\f2b6";
}

.div-block-236 > p,
.div-block-238 > p,
.div-block-244 > p {
    margin-bottom: 0;
}

figure.image-33 {
    margin: 0;
}

figure.image-33 img {
    object-fit: cover;
    object-position: 50% 0%;
    width: 100%;
    height: 100%;
}

.section-34 .wp-block-post {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
}

a.link-block-33 {
    font-weight: 700;
    text-decoration: underline;
}

/* ==========================================================================
   22. Listado del blog en bloques (/blogposts/, patrones "Blog – …"; Fase 5)
   Marcado de dump/blogposts con tres Query Loop (tools/paginas/secciones.js).
   - Cada tarjeta era un <a> en el dump; aquí el enlace es el del título, que
     su ::after estira sobre la tarjeta (el envoltorio es el bloque
     contenedor). La categoría (core/post-terms) enlaza a su archivo y queda
     por encima. Los enlaces conservan el aspecto del texto del dump.
   - core/post-template pinta <li>: sin el margen ni la viñeta que webflow.css
     da a todo <li>. En la rejilla, el <li> hace de .collection-item-26
     (display:flex) y del #w-node-da531bb1… del dump (align-self:stretch).
   - core/post-featured-image pone la clase del dump en el <figure>: las
     reglas de img.brix---blog-card-image se repiten en su <img>.
   - El extracto (core/post-excerpt) lleva el estilo de p.brix---mg-bottom-0.
   ========================================================================== */
.brix---blog-card-wrapper,
.brix---blog-card-wrapper-featured-sidebar,
.brix---blog-card-wrapper-shadow {
    position: relative;
}

:is(.brix---blog-card-wrapper, .brix---blog-card-wrapper-featured-sidebar, .brix---blog-card-wrapper-shadow) .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

:is(.brix---blog-card-wrapper, .brix---blog-card-wrapper-featured-sidebar, .brix---blog-card-wrapper-shadow) .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

:is(.brix---blog-card-wrapper, .brix---blog-card-wrapper-featured-sidebar, .brix---blog-card-wrapper-shadow) .wp-block-post-terms {
    position: relative;
    z-index: 2;
}

:is(.brix---blog-card-wrapper, .brix---blog-card-wrapper-featured-sidebar, .brix---blog-card-wrapper-shadow) .wp-block-post-terms a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.brix---grid-blog-featured-v3 .wp-block-post,
.brix---grid-2-columns---gap-48px > .wp-block-post {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
}

.brix---grid-2-columns---gap-48px > .wp-block-post {
    display: flex;
    align-self: stretch;
}

figure.brix---blog-card-image {
    margin: 0;
}

figure.brix---blog-card-image img {
    object-fit: cover;
    object-position: 50% 0%;
    width: 100%;
    max-height: 160px;
}

figure.brix---blog-card-image.first img {
    max-height: 370px;
}

figure.brix---blog-card-image.side img {
    max-height: 70px;
}

.brix---paragraph-default-2 > .wp-block-post-excerpt__excerpt {
    color: var(--midnight-blue);
    margin-bottom: 0;
    line-height: 1.4;
}

/* ==========================================================================
   23. Plantillas: listados del blog (archive.php e index.php,
   template-parts/listado.php, marcado de dump/blogposts)
   En el dump, el h1 del listado (.brix---color-neutral-802 > h1) sale blanco
   sobre blanco: la regla h1{color:#fff} de webflow.css gana al color de su
   envoltorio. Aquí hereda el color del envoltorio, como pretendía el diseño.
   ========================================================================== */
.brix---color-neutral-802 > h1 {
    color: inherit;
}

/* ==========================================================================
   24. Plantillas: artículo del blog y su cierre (single.php, patrón
   "Cierre de los artículos del blog", section.hero-without-image del dump)
   - El título es un h2 (un solo h1 por página) con los márgenes del h1 del
     dump; el tamaño ya lo da .white.
   - El botón es un párrafo con el enlace a.cust_btn (se edita con un clic): el
     texto lleva el estilo del .text-block-121 interior del dump, con sus
     mismas media queries, y el párrafo no añade margen.
   - Fondo desenfocado de la cabecera (.div-block-289): la imagen destacada,
     que single.php pasa en la variable --pd-fondo (en el dump era un
     background-image en línea).
   - La imagen destacada del artículo (.image-47) conserva su proporción:
     wp_get_attachment_image() pone width y height, y webflow.css solo le da
     width:100% (Fase 5).
   - El título del artículo (h1.heading-112) hereda el color del texto de la
     página (.body, #090e36). En el dump sale blanco sobre el fondo desenfocado
     casi blanco, con un contraste de 1.2 a 1.3:1, por la regla h1{color:#fff}
     de webflow.css (Fase 6).
   ========================================================================== */
.div-block-289 {
    background-image: var(--pd-fondo);
}

.div-block-295 > .heading-112 {
    color: inherit;
}

.image-47 {
    height: auto;
}

.hero-without-image h2.white {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-wrapper-two > p:has(> .cust_btn) {
    margin-bottom: 0;
}

.hero-wrapper-two .cust_btn {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3em;
}

@media screen and (max-width: 991px) {
    .hero-wrapper-two .cust_btn {
        font-size: .7em;
    }
}

@media screen and (max-width: 767px) {
    .hero-wrapper-two .cust_btn {
        text-align: center;
        font-size: .9em;
    }
}

@media screen and (max-width: 479px) {
    .hero-wrapper-two .cust_btn {
        font-size: .8em;
    }
}

/* ==========================================================================
   25. Plantillas: página 404 (404.php, patrón "Página 404")
   El título es un h1 (un solo h1 por página) con el aspecto del h2 del dump
   (dump/404.html): 26/36 px, color del texto y sin márgenes. El texto del dump
   es un <div> sin margen.
   ========================================================================== */
.utility-page-content h1 {
    margin: 0;
    color: inherit;
    font-size: 26px;
    line-height: 36px;
}

.utility-page-content > p {
    margin-bottom: 0;
}

/* Los enlaces útiles ("Ir al inicio", "Ver casos de estudio"; el dump no los
   tiene) van en un grupo separado 24 px del texto. Antes, en línea (Fase 6,
   T-12). */
.utility-page-content > .wp-block-group {
    margin-top: 24px;
}