/* ===================================================================== CM+ — diseño pixel-perfect sobre Kadence Blocks (formato canónico v2). PARIDAD FRONT + EDITOR: cada regla se aplica bajo dos raíces: .cmplus-home -> en el front (plantilla canvas) .editor-styles-wrapper-> contenedor del iframe del editor de bloques Por eso el prefijo de scope es :is(.cmplus-home,.editor-styles-wrapper). La estructura de columnas difiere entre contextos: FRONT : .cm-grid > .kt-row-column-wrap > .kadence-column{uid} EDITOR : .cm-grid (.kt-row-column-wrap) > … .innerblocks-wrap > .kadence-column-{uid} Por eso los grids apuntan a AMBOS contenedores (.kt-row-column-wrap y .innerblocks-wrap). Imágenes de fondo relativas a este archivo: ../img/... ===================================================================== */ /* ========== TOKENS (ambas raíces) ========== */ .cmplus-home, .editor-styles-wrapper { --cm-black:#0A0A0A; --cm-charcoal:#161616; --cm-graphite:#1F1F1F; --cm-cream:#FBFBF9; --cm-bone:#F2F1ED; --cm-white:#FFFFFF; --cm-gray-100:#E8E8E5; --cm-gray-200:#D6D6D2; --cm-gray-300:#BBBBBB; --cm-gray-400:#8A8A85; --cm-gray-500:#6B6B66; --cm-gray-600:#4A4A45; --cm-gray-700:#2C2C2A; --font-serif:"Source Serif 4", serif; --font-sans:"Funnel Sans", sans-serif; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; } /* ========== BASE ========== */ .cmplus-home { margin:0; background:var(--cm-cream); } .cmplus-home, .editor-styles-wrapper.cmplus-canvas-editor { font-family:var(--font-sans); font-weight:400; color:var(--cm-black); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55; font-size:16px; } html { scroll-behavior:smooth; } .cmplus-home-wrap { overflow-x:clip; } /* ========================================================== TIPOGRAFÍA BASE — PARIDAD FRONT + EDITOR El editor pone mis classNames (.cm-h2…) en el DIV envoltorio y el texto real vive en un hijo `.kadence-advancedheading-text`; el front pone la clase en el propio

con `.wp-block-kadence-advancedheading`. Para que el font-family y el color se vean IGUAL en ambos, apuntamos a: - el elemento con className (front: el heading; editor: el wrapper) - y su hijo `.kadence-advancedheading-text` (texto real en el editor) Subimos especificidad con la raíz .editor-styles-wrapper para ganarle a `.editor-styles-wrapper h2 { color: var(--global-palette3) }` de Kadence. ========================================================== / / Serif SOLO en headings reales (h1–h6) de advancedheading, en ambos contextos. IMPORTANTE: en el editor el texto vive en `.kadence-advancedheading-text`, pero ese hijo existe también dentro de advancedheadings con htmlTag=p/div/span. Por eso NO targeteamos el hijo de forma genérica: lo limitamos a cuando el wrapper es un heading (h1..h6), para no volver serif a los párrafos. / :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-advancedheading:is(h1,h2,h3,h4,h5,h6), :is(.cmplus-home,.editor-styles-wrapper) :is(h1,h2,h3,h4,h5,h6).kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) :is(h1,h2,h3,h4,h5,h6).wp-block-kadence-advancedheading .kadence-advancedheading-text { font-family:var(--font-serif); font-weight:400; letter-spacing:-0.015em; margin:0; line-height:1.1; } / Párrafos advancedheading (htmlTag=p) = SANS (Funnel), en ambos contextos / :is(.cmplus-home,.editor-styles-wrapper) p.wp-block-kadence-advancedheading, :is(.cmplus-home,.editor-styles-wrapper) p.wp-block-kadence-advancedheading .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) p.kadence-advancedheading-text { font-family:var(--font-sans); margin:0; } :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-advancedheading p { margin:0; } :is(.cmplus-home,.editor-styles-wrapper) .cmplus-home-wrap a, :is(.cmplus-home,.editor-styles-wrapper) .nav a { color:inherit; text-decoration:none; } :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-advancedheading img { display:block; max-width:100%; height:auto; } / ========== CONTENEDOR CENTRAL (front: centra a 1240px) ========== / .cmplus-home .wp-block-kadence-rowlayout > .kt-row-column-wrap { max-width:1240px; margin:0 auto; padding-left:var(--sp-6); padding-right:var(--sp-6); width:100%; } .cmplus-home .wp-block-kadence-rowlayout { width:100%; } / Filas ANIDADAS (dentro de una columna) NO deben heredar los 32px de padding lateral del contenedor de sección — eso causaba el corrimiento +32px del cuerpo (acordeón de servicios, pasos de proceso, tarjetas). Reset dual-context (editor+front), con especificidad (0,4,0) que gana a la regla de contenedor (0,3,0). / :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-column .wp-block-kadence-rowlayout > .kt-row-column-wrap { padding-left:0; padding-right:0; max-width:none; } :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-column { width:100%; } :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-advancedheading { margin:0; padding:0; } / ========== TIPOGRAFÍA HELPERS ========== Cada helper aplica también a su hijo `.kadence-advancedheading-text` (editor) y duplicamos el selector con prefijo `.editor-styles-wrapper` extra para ganar especificidad contra los estilos inline de Kadence en el editor. / / EYEBROW (sans, gris, mayúsculas) / :is(.cmplus-home,.editor-styles-wrapper) .cm-eyebrow, :is(.cmplus-home,.editor-styles-wrapper) .cm-eyebrow .kadence-advancedheading-text { font-family:var(--font-sans); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-500); margin-bottom:var(--sp-5); display:block; } :is(.cmplus-home,.editor-styles-wrapper) .experiencia .cm-eyebrow, :is(.cmplus-home,.editor-styles-wrapper) .experiencia .cm-eyebrow .kadence-advancedheading-text { color:var(--cm-gray-300); } / LEAD (sans, gris) / :is(.cmplus-home,.editor-styles-wrapper) .cm-lead, :is(.cmplus-home,.editor-styles-wrapper) .cm-lead .kadence-advancedheading-text { font-family:var(--font-sans); font-size:clamp(18px,1.4vw,21px); line-height:1.5; color:var(--cm-gray-600); max-width:60ch; } / H2 / SECTION-TITLE / H1 (serif, negro CM+) — color con especificidad reforzada / .editor-styles-wrapper .cm-h2, .editor-styles-wrapper .cm-h2 .kadence-advancedheading-text, .editor-styles-wrapper .cm-h1, .editor-styles-wrapper .cm-h1 .kadence-advancedheading-text, .editor-styles-wrapper .section-title, .editor-styles-wrapper .section-title .kadence-advancedheading-text, .cmplus-home .cm-h2, .cmplus-home .cm-h1, .cmplus-home .section-title { font-family:var(--font-serif); color:var(--cm-black); } :is(.cmplus-home,.editor-styles-wrapper) .section-title, :is(.cmplus-home,.editor-styles-wrapper) .section-title .kadence-advancedheading-text { font-size:clamp(38px,4.4vw,60px); line-height:1.05; letter-spacing:-0.024em; font-weight:500; } :is(.cmplus-home,.editor-styles-wrapper) .cm-h2, :is(.cmplus-home,.editor-styles-wrapper) .cm-h2 .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .cm-h1, :is(.cmplus-home,.editor-styles-wrapper) .cm-h1 .kadence-advancedheading-text { font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-0.022em; font-weight:500; } / Override de especificidad: la regla base de headings (.wp-block-kadence-advancedheading:is(h1..h6), espec. 0,2,1) ganaba a .cm-h2/.cm-h1 (0,2,0) y forzaba font-weight:400, letter-spacing:-0.015em y line-height:1.1. Igualamos especificidad apuntando al heading real (front) para restaurar 500 / -0.022em / 1.08. El contexto editor ya queda cubierto por el selector .kadence-advancedheading-text. / :is(.cmplus-home,.editor-styles-wrapper) .cm-h2:is(h1,h2,h3,h4,h5,h6), :is(.cmplus-home,.editor-styles-wrapper) .cm-h1:is(h1,h2,h3,h4,h5,h6) { line-height:1.08; letter-spacing:-0.022em; font-weight:500; } / Mismo refuerzo de especificidad para .section-title: la base de Kadence (.wp-block-kadence-advancedheading:is(h1..h6), 0,2,1) le forzaba font-weight:400, letter-spacing:-0.015em y line-height:1.1. Apuntamos al heading real para restaurar 500 / -0.024em / 1.05. / :is(.cmplus-home,.editor-styles-wrapper) .section-title:is(h1,h2,h3,h4,h5,h6) { line-height:1.05; letter-spacing:-0.024em; font-weight:500; } :is(.cmplus-home,.editor-styles-wrapper) .cm-h1, :is(.cmplus-home,.editor-styles-wrapper) .cm-h1 .kadence-advancedheading-text { font-size:clamp(40px,5vw,64px); } / ========== BOTONES ========== El relleno base (negro/crema, padding, tipografía, radio 0) lo define el BOTÓN GLOBAL del Customizer (buttons_), que Kadence aplica a `.kb-button` (front: ) y `.kb-btn-global-fill` (editor: ) por igual. Aquí sólo añadimos: (a) la flecha →, (b) las dos variantes del hero. El selector base `.kb-btn-global-fill` cubre AMBOS contextos. / :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill { display:inline-flex; align-items:center; gap:var(--sp-3); border-radius:0 !important; letter-spacing:0.01em; text-transform:none; line-height:1.55; transition:background .25s, color .25s, border-color .25s; } :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill .kt-btn-svg-icon, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill svg { display:none; } /* Botones de CONTENIDO (Conozca Más, Ver Proyectos, Agendar…): Kadence aplica `.kb-button:not(.kb-btn-global-inherit){font-size:1.125rem}` (18px) y un padding escalado (7.2/18), que PISA la config global del Customizer (15.5px / 12-22). Lo igualamos a la referencia con especificidad (0,3,0) — como ya hicimos con los del hero. Cubre front (.entry-content) y editor (.kb-buttons-wrap/.singlebtn). / :is(.cmplus-home,.editor-styles-wrapper) .entry-content .kb-btn-global-fill, :is(.cmplus-home,.editor-styles-wrapper) .kb-buttons-wrap .kb-btn-global-fill, :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-singlebtn .kb-btn-global-fill { font-size:15.5px; padding:12px 22px; line-height:1.55; } / Alineación de botones a la IZQUIERDA como la referencia. Kadence centra por defecto el contenedor flex `.kb-buttons-wrap` (justify-content:center), lo que dejaba CTAs como "Agendar una reunión" centrados. La referencia los alinea a la izquierda (con el título). El hero (.cm-hero-cta) ya lo tenía; lo generalizamos. / :is(.cmplus-home,.editor-styles-wrapper) .wp-block-kadence-advancedbtn.kb-buttons-wrap { justify-content:flex-start; } / Flecha "→" tras el texto, idéntica a la referencia (línea + punta limpia). Usamos un SVG vía `mask` para que herede currentColor (negro en botón crema, crema en botón outline). Front usa `.kt-btn-inner-text`; el editor `.kt-button-text`. / :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill .kt-btn-inner-text::after, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill .kt-button-text::after { content:""; width:18px; height:11px; margin-left:var(--sp-3); display:inline-block; vertical-align:middle; flex-shrink:0; background-color:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; mask:url("data:image/svg+xml;utf8,") no-repeat center/contain; transition:transform .25s; } :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill:hover .kt-btn-inner-text::after, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill:hover .kt-button-text::after { transform:translateX(4px); } / Variante CREMA (fondo crema, texto negro) — className en el wrapper singlebtn / :is(.cmplus-home,.editor-styles-wrapper) .btn-cream .kb-btn-global-fill, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill.btn-cream { background:var(--cm-cream) !important; color:var(--cm-black) !important; border-color:var(--cm-cream) !important; } :is(.cmplus-home,.editor-styles-wrapper) .btn-cream .kb-btn-global-fill:hover, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill.btn-cream:hover { background:var(--cm-white) !important; border-color:var(--cm-white) !important; } / Variante OUTLINE CREMA (transparente, borde y texto crema) / :is(.cmplus-home,.editor-styles-wrapper) .btn-outline-cream .kb-btn-global-fill, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill.btn-outline-cream { background:transparent !important; color:var(--cm-cream) !important; border:1px solid var(--cm-cream) !important; } :is(.cmplus-home,.editor-styles-wrapper) .btn-outline-cream .kb-btn-global-fill:hover, :is(.cmplus-home,.editor-styles-wrapper) .kb-btn-global-fill.btn-outline-cream:hover { background:var(--cm-cream) !important; color:var(--cm-black) !important; } :is(.cmplus-home,.editor-styles-wrapper) .kb-buttons-wrap { display:flex; flex-wrap:wrap; gap:var(--sp-3); } / ========== NAV ========== / .cmplus-home .nav { position:absolute; top:0; left:0; right:0; z-index:50; background:transparent; } .cmplus-home .nav > .kt-row-column-wrap { max-width:1240px; margin:0 auto; padding:0 var(--sp-6); display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .nav .wp-block-kadence-column { width:auto; } :is(.cmplus-home,.editor-styles-wrapper) .nav-logo-inner img, :is(.cmplus-home,.editor-styles-wrapper) .nav-logo-inner svg { height:44px; width:auto; display:block; } :is(.cmplus-home,.editor-styles-wrapper) .nav-links { display:flex; align-items:center; gap:60px; flex-wrap:wrap; } :is(.cmplus-home,.editor-styles-wrapper) .nav-links a { font-family:var(--font-sans); font-size:15.5px; color:var(--cm-cream); letter-spacing:0.01em; transition:color .2s; white-space:nowrap; } :is(.cmplus-home,.editor-styles-wrapper) .nav-links a:hover { color:var(--cm-gray-300); } :is(.cmplus-home,.editor-styles-wrapper) .nav-lang { font-family:var(--font-sans); font-size:15px; letter-spacing:0.18em; color:var(--cm-gray-400); padding-left:var(--sp-3); border-left:1px solid rgba(251,251,249,0.15); white-space:nowrap; } :is(.cmplus-home,.editor-styles-wrapper) .nav-lang .active { color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .nav-lang .sep { color:var(--cm-gray-500); margin:0 4px; } / En el editor, el nav no es absolute (para poder verlo); dale fondo oscuro / .editor-styles-wrapper .nav { background:var(--cm-black); } .cmplus-home .nav-toggle { display:none; background:none; border:none; color:var(--cm-cream); cursor:pointer; padding:8px; } .cmplus-home .nav-toggle .bars { display:inline-flex; flex-direction:column; gap:6px; } .cmplus-home .nav-toggle .bars span { display:block; width:26px; height:1.5px; background:var(--cm-cream); transition:transform .45s cubic-bezier(0.65,0,0.35,1), opacity .2s; transform-origin:center; } / ========== HERO (rowlayout legacy) — sólo si existe ========== / .cmplus-home .hero > .kt-row-column-wrap { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 var(--sp-6); width:100%; } :is(.cmplus-home,.editor-styles-wrapper) .hero .hero-col > .kt-inside-inner-col { min-height:592px; display:flex; flex-direction:column; justify-content:flex-end; } .cmplus-home .hero::before { content:""; position:absolute; inset:0; z-index:0; background:url("../img/hero-1.jpg") center/cover no-repeat; } :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-title .kadence-advancedheading-text { font-size:clamp(34px,4vw,56px); line-height:1.1; letter-spacing:-0.02em; max-width:none; font-weight:500; color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .hero .cm-lead { color:var(--cm-cream); margin-top:var(--sp-5); max-width:52ch; } :is(.cmplus-home,.editor-styles-wrapper) .hero .cm-hero-cta { margin-top:var(--sp-7); } / ========== ADVANCED SLIDER HERO (Kadence Pro) ========== DOM real del slide: li.kb-advanced-slide-item.cm-slide-overlay > .kb-advanced-slide > .kb-advanced-slide-inner-wrap (Kadence pone aquí el background-image) > .kb-advanced-slide-inner (contenido: h1, p, botones) / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider { background:var(--cm-black); position:relative; overflow:hidden; } / ALTURA DEL HERO = 720px (igual que la referencia Website-Home.html). El modo "ratio" de Kadence pone `.kb-advanced-slide{height:0;padding-bottom:41.67%}`, lo neutralizamos con altura fija. / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .kb-advanced-slide { height:720px !important; min-height:520px; padding-bottom:0 !important; } :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .kb-advanced-slide-inner-wrap { position:absolute; inset:0; height:100%; min-height:0; display:flex; align-items:flex-end; / Kadence pone 48px de padding lateral en el slide-inner-wrap, que se SUMABA a los 32px del slide-inner → el contenido quedaba 96px más angosto que la referencia (causa del "achorizado"). Lo anulamos: el ancho/padding del contenido lo controla .kb-advanced-slide-inner (max-width 1240 + 0 32px), idéntico al .hero-inner de la referencia. / padding-left:0 !important; padding-right:0 !important; background-size:cover !important; background-position:center !important; } / el track/lista deben seguir la altura del slide / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .splidetrack, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .splidelist, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .kb-advanced-slide-item { height:720px !important; min-height:520px; } / Overlay SUTIL como la referencia: la imagen ya es oscura; sólo un velo muy leve para asegurar contraste del texto (la referencia no usa gradiente fuerte). / :is(.cmplus-home,.editor-styles-wrapper) .cm-slide-overlay .kb-advanced-slide-inner-wrap::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,0.20) 0%, rgba(10,10,10,0.10) 50%, rgba(10,10,10,0.45) 100%); } / Contenido alineado abajo (como la referencia: align-items:flex-end + padding inferior sp-8), centrado a 1240px y por encima del overlay. IMPORTANTE: Kadence centra el contenido del slide (.kb-advanced-slide-inner-wrap trae text-align:center). La referencia es a la IZQUIERDA, así que lo forzamos. / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .kb-advanced-slide-inner-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .kb-advanced-slide-inner { text-align:left; } :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .kb-advanced-slide-inner { position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto; padding:0 var(--sp-6) var(--sp-8); align-self:flex-end; } / Título del hero: los 3 quiebres exactos vienen de los
del contenido (como la referencia). max-width:none para que cada línea fluya completa. / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-hero-title .kadence-advancedheading-text { color:var(--cm-cream); max-width:none; font-weight:500; } :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-lead { color:var(--cm-cream); margin-top:var(--sp-5); max-width:52ch; } / CTAs a la IZQUIERDA como la referencia (alineados con el título en x=132). El slider de Kadence hereda justify-content:center del contenedor del slide; lo sobreescribimos explícitamente. / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-hero-cta { margin-top:var(--sp-7); justify-content:flex-start; flex-wrap:wrap; gap:var(--sp-3); } / Botones del hero: 15.5px, padding 12/22px (=50px de alto como la referencia). Kadence escala el padding del botón global con su factor de tamaño, por lo que necesitamos forzarlo aquí explícitamente. / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-cta .kb-button, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-cta .kb-btn-global-fill { font-size:15.5px; padding:12px 22px !important; line-height:1.55; } / ======================================================================== FLECHAS Y DOTS DEL SLIDER — rediseño CM+ - Flechas: círculo de 52px, borde crema 1px, transparente; al hover se rellenan de crema con la flecha en negro. Abajo-derecha. - Dots: barras; la activa se alarga y va crema sólido; inactivas cortas y semitransparentes. Abajo-izquierda. - Ambos alineados al contenedor de 1240px. ======================================================================== / / --- FLECHAS (.splidearrow) --- / .cmplus-home .cm-hero-slider .splidearrows { position:absolute; z-index:6; bottom:40px; left:0; right:0; margin:0 auto; width:100%; max-width:1240px; padding:0 var(--sp-6); display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-3); pointer-events:none; } / Flechas: 40px, círculo borde crema. Splide usa scaleX(-1) en .prev; NO sobreescribimos con transform:none para que prev muestre la dirección correcta. / .cmplus-home .cm-hero-slider .splidearrow { position:static; width:40px; height:40px; margin:0; background:transparent; border:1px solid rgba(251,251,249,0.5); border-radius:50%; opacity:1; pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .25s cubic-bezier(0.4,0,0.2,1), border-color .25s; } / El botón en sí no debe tener transform (Splide/Alpine lo controla con inline styles). Para que prev apunte a la izquierda: giramos SOLO el SVG interior del prev. / .cmplus-home .cm-hero-slider .splidearrow--prev { } .cmplus-home .cm-hero-slider .splidearrow--next { } .cmplus-home .cm-hero-slider .splidearrow:hover { background:var(--cm-cream); border-color:var(--cm-cream); } / SVG: prev invertido horizontalmente, next normal / .cmplus-home .cm-hero-slider .splidearrow svg { width:14px; height:14px; fill:var(--cm-cream); transition:fill .25s, transform .2s; } .cmplus-home .cm-hero-slider .splidearrow--prev svg { transform:scaleX(-1) !important; } .cmplus-home .cm-hero-slider .splidearrow--next svg { transform:none !important; } .cmplus-home .cm-hero-slider .splidearrow:hover svg { fill:var(--cm-black); } .cmplus-home .cm-hero-slider .splidearrow:disabled { opacity:0.35; cursor:default; } / --- DOTS (.splidepagination) como barras, CENTRADOS --- / / Centrados horizontalmente (justify-content:center) y alineados al mismo centro vertical que las flechas (flechas: bottom 48px, alto 52px → centro en 74px; barra de 3px → bottom ~72px). Splide fija un `top:###px` inline que gana al `bottom`; lo anulamos con top:auto !important para que el `bottom` mande. / / bottom aligns with arrows center: arrows bottom:40px + height:40px/2 = 60px center; bars 3px/2=1.5 → bottom ~59px / .cmplus-home .cm-hero-slider .splidepagination { position:absolute !important; z-index:6; top:auto !important; bottom:59px !important; left:0; right:0; margin:0 auto; width:100%; max-width:1240px; padding:0 var(--sp-6); display:flex; justify-content:center; align-items:center; gap:10px; } .cmplus-home .cm-hero-slider .splidepagination li { line-height:0; margin:0; } .cmplus-home .cm-hero-slider .splidepaginationpage { width:28px; height:3px; border-radius:2px; padding:0; margin:0; border:0; background:rgba(251,251,249,0.35); opacity:1; transform:none; cursor:pointer; transition:width .3s cubic-bezier(0.4,0,0.2,1), background .3s; } .cmplus-home .cm-hero-slider .splidepaginationpage.is-active { width:56px; background:var(--cm-cream); } .cmplus-home .cm-hero-slider .splidepaginationpage:hover { background:rgba(251,251,249,0.7); } / Anula el margin-bottom:30px que Kadence aplica al slider cuando hay dots. / :is(.cmplus-home,.editor-styles-wrapper) .kb-splide[data-slider-dots=true] { margin-bottom:0 !important; } / En el editor no hay Splide (no se ven flechas/dots); el front es quien manda. / / ========== GRIDS (front + editor) ========== / :is(.cmplus-home,.editor-styles-wrapper) :is(.cm-two-col,.cm-exp-grid,.cm-serv-grid,.cm-proc-grid,.cm-porque-grid,.cm-footer-grid) > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) :is(.cm-two-col,.cm-exp-grid,.cm-serv-grid,.cm-proc-grid,.cm-porque-grid,.cm-footer-grid) .innerblocks-wrap { display:grid; } :is(.cmplus-home,.editor-styles-wrapper) :is(.cm-two-col,.cm-exp-grid,.cm-serv-grid,.cm-proc-grid,.cm-porque-grid,.cm-footer-grid) :is(.kt-row-column-wrap,.innerblocks-wrap) > .wp-block-kadence-column { width:auto; } / ratios por sección / :is(.cmplus-home,.editor-styles-wrapper) .cm-two-col > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-two-col .innerblocks-wrap { grid-template-columns:1.05fr 1fr; gap:var(--sp-8); align-items:center; } :is(.cmplus-home,.editor-styles-wrapper) .cm-exp-grid > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-exp-grid .innerblocks-wrap { grid-template-columns:1.4fr 1fr; gap:100px; align-items:center; } :is(.cmplus-home,.editor-styles-wrapper) .cm-serv-grid > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-serv-grid .innerblocks-wrap { grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:stretch; } :is(.cmplus-home,.editor-styles-wrapper) .cm-proc-grid > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-proc-grid .innerblocks-wrap { grid-template-columns:repeat(3,1fr); gap:var(--sp-7); align-items:start; } :is(.cmplus-home,.editor-styles-wrapper) .cm-porque-grid > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-porque-grid .innerblocks-wrap { grid-template-columns:1.5fr 1fr; gap:var(--sp-7); align-items:center; } :is(.cmplus-home,.editor-styles-wrapper) .cm-footer-grid > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .cm-footer-grid .innerblocks-wrap { grid-template-columns:2fr 1fr 1.2fr; gap:var(--sp-7); } :is(.cmplus-home,.editor-styles-wrapper) .cm-proc-grid { margin-top:var(--sp-7); } / Editor parity: las columnas de SOLO IMAGEN (firma-media/group.png · servicios-media/people.jpg) están vacías, así que con width:auto colapsan a min-content (~36px) en el editor (en el front sí llenan su pista del grid). Las forzamos al 100% de su pista. !important para ganarle a la regla genérica de columnas (width:auto). / .editor-styles-wrapper .firma-media, .editor-styles-wrapper .servicios-media { width:100% !important; min-width:0; } / group.png usa aspect-ratio 4/3 en el front vía `.firma-media > .kt-inside-inner-col`, pero ese elemento no existe en el editor (ahí el inner de la columna es `.kadence-inner-column-inner`), así que la columna quedaba sin alto (~40px). Replicamos el aspect-ratio sobre el inner del editor para que la foto se vea con las mismas proporciones que en el front. / .editor-styles-wrapper .firma-media .kadence-inner-column-inner { aspect-ratio:4/3; } / En el front, `.cm-two-col` usa pistas 1.05fr/1fr (texto un poco más ancho que la media). En el editor, la clase `.kb-grid-columns-2` de Kadence fuerza columnas iguales (1fr/1fr) y le gana a nuestra regla, así que la columna de imagen salía a la mitad exacta (604px) en vez de ~la del front. Override SOLO-editor para igualar el ratio (no hay media query móvil en el editor, así que !important aquí no rompe el apilado responsive del front). También alinea liderazgo (.cm-two-col). / .editor-styles-wrapper .cm-two-col .innerblocks-wrap { grid-template-columns:1.05fr 1fr !important; } / ========== NUESTRA FIRMA ========== / :is(.cmplus-home,.editor-styles-wrapper) .firma-text .cm-h2 { margin-bottom:var(--sp-5); max-width:none; } :is(.cmplus-home,.editor-styles-wrapper) .firma-text p { color:var(--cm-gray-600); font-size:18px; line-height:1.7; max-width:56ch; margin-bottom:var(--sp-6); } :is(.cmplus-home,.editor-styles-wrapper) .firma-text .kb-buttons-wrap { margin-top:var(--sp-2); } :is(.cmplus-home,.editor-styles-wrapper) .firma-media > .kt-inside-inner-col { position:relative; aspect-ratio:4/3; background:url("../img/group.jpg") center/cover no-repeat; } :is(.cmplus-home,.editor-styles-wrapper) .firma-media > .kt-inside-inner-col::after { content:""; position:absolute; right:-40px; bottom:-40px; width:160px; height:160px; background-color:var(--cm-cream); background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat; } / ========== EXPERIENCIA ========== / .cmplus-home .experiencia::before { content:""; position:absolute; inset:0; z-index:0; background:url("../img/bg-stats.png") center/cover no-repeat; } .cmplus-home .experiencia { position:relative; } .cmplus-home .experiencia > .kt-row-column-wrap { position:relative; z-index:2; } .editor-styles-wrapper .experiencia { background:#0A0A0A url("../img/bg-stats.png") center/cover no-repeat; } :is(.cmplus-home,.editor-styles-wrapper) .experiencia-left .cm-h2 { margin-bottom:var(--sp-5); max-width:none; color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .experiencia-left p { color:var(--cm-cream); font-size:18px; line-height:1.7; } :is(.cmplus-home,.editor-styles-wrapper) .experiencia-right > .kt-inside-inner-col { text-align:center; } :is(.cmplus-home,.editor-styles-wrapper) .experiencia-right .stat { font-family:var(--font-serif); font-size:clamp(56px,8vw,110px); line-height:1; color:var(--cm-cream); letter-spacing:-0.03em; } :is(.cmplus-home,.editor-styles-wrapper) .experiencia-right .stat sup { font-size:0.55em; vertical-align:super; } :is(.cmplus-home,.editor-styles-wrapper) .experiencia-right .stat-desc { font-size:18px; color:var(--cm-cream); margin-top:var(--sp-5); line-height:1.7; } / ========== SERVICIOS (acordeón custom) ========== / :is(.cmplus-home,.editor-styles-wrapper) .servicios .section-title { margin-bottom:var(--sp-7); max-width:24ch; } :is(.cmplus-home,.editor-styles-wrapper) .servicios-list > .kt-inside-inner-col { border-top:1px solid var(--cm-gray-200); } :is(.cmplus-home,.editor-styles-wrapper) .cm-service { border-bottom:1px solid var(--cm-gray-200); padding:var(--sp-5) 0; cursor:pointer; } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head .name { font-family:var(--font-serif); font-size:28px; line-height:1.55; } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head .toggle { width:22px; height:22px; position:relative; flex-shrink:0; transition:transform .25s cubic-bezier(0.4,0,0.2,1); } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head .toggle::before, :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head .toggle::after { content:""; position:absolute; background:var(--cm-black); } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head .toggle::before { width:22px; height:1.5px; top:50%; left:0; transform:translateY(-50%); } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-head .toggle::after { width:1.5px; height:22px; left:50%; top:0; transform:translateX(-50%); transition:transform .25s; } :is(.cmplus-home,.editor-styles-wrapper) .cm-service.open .cm-service-head .toggle::after { transform:translateX(-50%) rotate(90deg); } .cmplus-home .cm-service-content { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(0.4,0,0.2,1); } .cmplus-home .cm-service.open .cm-service-content { max-height:360px; } / en el editor mostramos todo el contenido (no hay JS de acordeón) / .editor-styles-wrapper .cm-service-content { max-height:none; } :is(.cmplus-home,.editor-styles-wrapper) .cm-service-content p { margin-top:var(--sp-4); font-size:18px; color:var(--cm-gray-600); max-width:52ch; line-height:1.7; } :is(.cmplus-home,.editor-styles-wrapper) .servicios-media > .kt-inside-inner-col { position:relative; min-height:480px; height:100%; background:url("../img/people.jpg") center/cover no-repeat; } :is(.cmplus-home,.editor-styles-wrapper) .servicios-media > .kt-inside-inner-col::after { content:""; position:absolute; right:-30px; top:40px; width:120px; height:240px; background-color:var(--cm-cream); background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat; } / ========== CÓMO TRABAJAMOS ========== / :is(.cmplus-home,.editor-styles-wrapper) .como .section-title { max-width:22ch; } :is(.cmplus-home,.editor-styles-wrapper) .process-step > .kt-inside-inner-col { border-top:1px solid var(--cm-gray-300); padding-top:var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .process-step .cm-step-title { font-family:var(--font-serif); font-size:28px; margin-bottom:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .process-step .desc { font-size:18px; color:var(--cm-gray-600); margin-bottom:var(--sp-5); line-height:1.7; max-width:38ch; } :is(.cmplus-home,.editor-styles-wrapper) .process-step ul { list-style:none; padding:0; margin:0; } :is(.cmplus-home,.editor-styles-wrapper) .process-step li { font-size:16px; color:var(--cm-gray-700); padding:8px 0; border-bottom:1px solid var(--cm-gray-200); line-height:1.5; } :is(.cmplus-home,.editor-styles-wrapper) .process-step li:last-child { border-bottom:none; } :is(.cmplus-home,.editor-styles-wrapper) .process-step li::before { content:"+ "; color:var(--cm-gray-400); margin-right:6px; } / ========== PROYECTOS (cards) ========== / :is(.cmplus-home,.editor-styles-wrapper) .proyectos-head > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .proyectos-head .innerblocks-wrap { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--sp-7); flex-wrap:wrap; gap:var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .proyectos-head .wp-block-kadence-column { width:auto; } :is(.cmplus-home,.editor-styles-wrapper) .proyectos-head .cm-h2 { max-width:32ch; } :is(.cmplus-home,.editor-styles-wrapper) .cm-card-row { margin-bottom:var(--sp-3); } :is(.cmplus-home,.editor-styles-wrapper) .cm-card-row > .kt-row-column-wrap { max-width:1240px; } :is(.cmplus-home,.editor-styles-wrapper) .project-card { position:relative; min-height:330px; overflow:hidden; background:var(--cm-charcoal); color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .project-card > .kt-inside-inner-col { position:relative; min-height:330px; z-index:2; padding:var(--sp-6); display:flex; flex-direction:column; justify-content:flex-end; width:50%; } :is(.cmplus-home,.editor-styles-wrapper) .project-card::before { content:""; position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-image:var(--bg,none); } :is(.cmplus-home,.editor-styles-wrapper) .project-card::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.50) 45%, rgba(10,10,10,0.96) 100%); } :is(.cmplus-home,.editor-styles-wrapper) .project-card.portalmar::before { background-image:url("../img/projects/portalmar.jpg"); } :is(.cmplus-home,.editor-styles-wrapper) .project-card.atrio::before { background-image:url("../img/projects/atrio.jpg"); } :is(.cmplus-home,.editor-styles-wrapper) .project-card.hilton::before { background-image:url("../img/projects/hilton.jpg"); } :is(.cmplus-home,.editor-styles-wrapper) .project-card.sheraton::before { background-image:url("../img/projects/sheraton.jpg"); } :is(.cmplus-home,.editor-styles-wrapper) .project-card.arraijan::before { background-image:url("../img/projects/towncenter.jpg"); } :is(.cmplus-home,.editor-styles-wrapper) .project-card .badge { display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-300); margin-bottom:var(--sp-3); } :is(.cmplus-home,.editor-styles-wrapper) .project-card .cm-proj-title { font-family:var(--font-serif); font-size:clamp(32px,3.34vw,48px); line-height:1.05; color:var(--cm-cream); font-weight:500; } :is(.cmplus-home,.editor-styles-wrapper) .project-card .desc { position:absolute; right:var(--sp-6); bottom:var(--sp-6); z-index:3; max-width:36ch; font-size:13px; color:var(--cm-cream); line-height:1.45; } / ===== Bloque dinámico de proyectos (CPT) — contenedor centrado a 1240 ===== / :is(.cmplus-home,.editor-styles-wrapper) .cm-projects { max-width:1240px; margin:0 auto; } / ===== Filtro de proyectos por tipo (chips, estilo CM+) ===== / :is(.cmplus-home,.editor-styles-wrapper) .cm-proj-filter { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 var(--sp-6); } :is(.cmplus-home,.editor-styles-wrapper) .cm-proj-filter-label { flex-basis:100%; font-family:var(--font-sans); font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--cm-gray-500); margin:0 0 5px; } :is(.cmplus-home,.editor-styles-wrapper) .cm-filter-chip { font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:0.02em; line-height:1; padding:11px 20px; border:1px solid var(--cm-gray-300); background:transparent; color:var(--cm-gray-700); cursor:pointer; border-radius:0; transition:background .2s,color .2s,border-color .2s; } :is(.cmplus-home,.editor-styles-wrapper) .cm-filter-chip:hover { border-color:var(--cm-black); color:var(--cm-black); } :is(.cmplus-home,.editor-styles-wrapper) .cm-filter-chip.is-active { background:var(--cm-black); border-color:var(--cm-black); color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .cm-projects .project-card.is-hidden { display:none !important; } / Editor parity: el preview SSR del bloque se envuelve en `.cm-projects-editor`, que —a diferencia del `.kt-row-column-wrap` del front— no recibe el padding lateral de 32px de la fila, así que las tarjetas salían a 1240px (vs 1176px del front) y se "salían" del resto del contenido. Replicamos el inset. / .editor-styles-wrapper .cm-projects-editor { padding-left:32px; padding-right:32px; } / Editor parity: Gutenberg le mete a cada bloque un margen vertical por defecto (~28px). Los bloques de Kadence lo neutralizan, pero nuestro bloque dinámico no, así que aparecía un margen arriba/abajo que NO existe en el front. Lo quitamos (selector solo-editor: [data-type] no existe en el front). / .editor-styles-wrapper .block-editor-block-list__block[data-type="cmplus/projects"] { margin-top:0; margin-bottom:0; } :is(.cmplus-home,.editor-styles-wrapper) .cm-projects .project-card { display:block; text-decoration:none; } / Toggle apagado: tarjetas visibles pero NO clicables / :is(.cmplus-home,.editor-styles-wrapper) .cm-projects--nolink .project-card { cursor:default; } / ===== Single de Proyecto (CPT cmplus_project) — diseño on-brand ===== / .cmplus-home .cm-project-wrap { background:var(--cm-cream); } / Hero / .cmplus-home .cm-project-hero { position:relative; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:var(--cm-black); } .cmplus-home .cm-project-hero::before { content:""; position:absolute; inset:0; z-index:0; background-image:var(--bg,none); background-size:cover; background-position:center; } .cmplus-home .cm-project-hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,0.30) 0%, rgba(10,10,10,0.50) 52%, rgba(10,10,10,0.85) 100%); } .cmplus-home .cm-project-hero-inner { position:relative; z-index:2; max-width:1240px; width:100%; margin:0 auto; padding:160px var(--sp-6) var(--sp-8); } .cmplus-home .cm-project-back { display:inline-block; font-family:var(--font-sans); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cm-gray-300); margin-bottom:var(--sp-6); } .cmplus-home .cm-project-back:hover { color:var(--cm-cream); } .cmplus-home .cm-project-badge { display:block; font-family:var(--font-sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-300); margin-bottom:var(--sp-3); } .cmplus-home .cm-project-title { font-family:var(--font-serif); font-size:clamp(40px,5vw,72px); line-height:1.05; letter-spacing:-0.02em; color:var(--cm-cream); font-weight:500; margin:0; max-width:16ch; } / Intro: resumen + ficha técnica (2 columnas) / .cmplus-home .cm-project-intro { max-width:1240px; margin:0 auto; padding:var(--sp-9) var(--sp-6); } .cmplus-home .cm-project-intro-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--sp-8); align-items:start; } .cmplus-home .cm-project-lead { font-family:var(--font-serif); font-size:clamp(24px,2.4vw,32px); line-height:1.3; color:var(--cm-black); font-weight:500; margin:0 0 var(--sp-7); } .cmplus-home .cm-project-content { font-size:clamp(16px,1.15vw,18px); line-height:1.7; color:var(--cm-gray-600); } .cmplus-home .cm-project-content h3 { font-family:var(--font-serif); font-size:clamp(20px,1.7vw,26px); line-height:1.2; color:var(--cm-black); font-weight:500; margin:var(--sp-7) 0 var(--sp-3); } .cmplus-home .cm-project-content h3:first-child { margin-top:0; } .cmplus-home .cm-project-content p { margin:0 0 var(--sp-5); } .cmplus-home .cm-project-content ul { margin:0 0 var(--sp-5); padding:0; list-style:none; } .cmplus-home .cm-project-content li { position:relative; padding-left:var(--sp-5); margin-bottom:var(--sp-2); } .cmplus-home .cm-project-content li::before { content:""; position:absolute; left:0; top:0.6em; width:14px; height:1px; background:var(--cm-black); } / Ficha técnica / .cmplus-home .cm-project-ficha { position:sticky; top:var(--sp-7); background:var(--cm-black); color:var(--cm-cream); padding:var(--sp-6); } .cmplus-home .cm-project-ficha-title { font-family:var(--font-sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-300); font-weight:600; margin:0 0 var(--sp-5); } .cmplus-home .cm-project-ficha-list { margin:0; } .cmplus-home .cm-project-ficha-row { display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-top:1px solid rgba(245,242,235,0.14); } .cmplus-home .cm-project-ficha-row:first-child { border-top:0; padding-top:0; } .cmplus-home .cm-project-ficha-row dt { font-family:var(--font-sans); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--cm-gray-300); margin:0; flex:0 0 auto; } .cmplus-home .cm-project-ficha-row dd { font-family:var(--font-sans); font-size:14px; color:var(--cm-cream); margin:0; text-align:right; } / Banda CTA → Contacto / .cmplus-home .cm-project-cta { background:var(--cm-black); } .cmplus-home .cm-project-cta-inner { max-width:1240px; margin:0 auto; padding:var(--sp-9) var(--sp-6); text-align:center; } .cmplus-home .cm-project-cta-title { font-family:var(--font-serif); font-size:clamp(28px,3vw,44px); line-height:1.1; color:var(--cm-cream); font-weight:500; margin:0 0 var(--sp-3); } .cmplus-home .cm-project-cta-text { font-size:clamp(16px,1.2vw,18px); line-height:1.6; color:var(--cm-gray-300); max-width:48ch; margin:0 auto var(--sp-6); } .cmplus-home .cm-project-cta-btn { display:inline-block; background:var(--cm-cream); color:var(--cm-black); font-family:var(--font-sans); font-size:15.5px; letter-spacing:0.02em; padding:12px 22px; transition:opacity .25s ease; } .cmplus-home .cm-project-cta-btn:hover { opacity:0.85; } @media (max-width:900px){ .cmplus-home .cm-project-intro-grid { grid-template-columns:1fr; gap:var(--sp-6); } .cmplus-home .cm-project-ficha { position:static; order:-1; } } @media (max-width:760px){ .cmplus-home .cm-project-hero { min-height:440px; } .cmplus-home .cm-project-hero-inner { padding:120px var(--sp-5) var(--sp-7); } .cmplus-home .cm-project-intro { padding:var(--sp-8) var(--sp-5); } .cmplus-home .cm-project-cta-inner { padding:var(--sp-8) var(--sp-5); } } / ========== AGENDA / POR QUÉ (CTA global antes del footer) ========== / / Fondo + ancho + padding en estático: la banda se inyecta en kadence_before_footer, donde el CSS dinámico de Kadence (bgColor/maxWidth/padding) no llega al . / .cmplus-home .por-que { position:relative; overflow:hidden; background:var(--cm-bone); } :is(.cmplus-home,.editor-styles-wrapper) .por-que > .kt-row-column-wrap { max-width:1240px; margin-inline:auto; padding:var(--sp-9) var(--sp-6); box-sizing:border-box; } @media (max-width:760px){ :is(.cmplus-home,.editor-styles-wrapper) .por-que > .kt-row-column-wrap { padding:var(--sp-8) var(--sp-5); } } :is(.cmplus-home,.editor-styles-wrapper) .por-que .cm-eyebrow { margin-bottom:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .por-que .cm-h2 { max-width:18ch; margin-bottom:var(--sp-5); line-height:1.1; } :is(.cmplus-home,.editor-styles-wrapper) .por-que-sub { font-size:16px; line-height:1.65; color:var(--cm-gray-700); margin-bottom:var(--sp-6); max-width:356px; font-weight:400; } / El reset base p.wp-block-kadence-advancedheading{margin:0} (espec. 0,2,1) anulaba el margin-bottom del subtítulo CTA. Igualamos especificidad apuntando al
real para restaurar la separación de 32px antes del botón (visible en móvil/tablet). / :is(.cmplus-home,.editor-styles-wrapper) p.por-que-sub { margin-bottom:var(--sp-6); } :is(.cmplus-home,.editor-styles-wrapper) .plus-deco > .kt-inside-inner-col { min-height:240px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat; } / ========== FOOTER ========== / :is(.cmplus-home,.editor-styles-wrapper) .footer-brand img, :is(.cmplus-home,.editor-styles-wrapper) .footer-brand svg { height:32px; width:auto; } :is(.cmplus-home,.editor-styles-wrapper) .footer-brand p { color:var(--cm-gray-300); font-size:13px; line-height:1.7; max-width:48ch; margin-top:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .footer .cm-foot-h { font-family:var(--font-sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-400); font-weight:500; margin-bottom:var(--sp-4); display:block; } :is(.cmplus-home,.editor-styles-wrapper) .footer ul, :is(.cmplus-home,.editor-styles-wrapper) .footer-map ul { list-style:none; padding:0; margin:0; } :is(.cmplus-home,.editor-styles-wrapper) .footer li, :is(.cmplus-home,.editor-styles-wrapper) .footer-map li { padding:4px 0; font-size:13.5px; color:var(--cm-gray-300); } :is(.cmplus-home,.editor-styles-wrapper) .footer-map a:hover { color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .contact-block .cm-contact-title { font-family:var(--font-serif); font-size:28px; color:var(--cm-cream); margin-bottom:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .contact-line { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--cm-gray-300); padding:4px 0; } :is(.cmplus-home,.editor-styles-wrapper) .contact-line svg { width:14px; height:14px; color:var(--cm-gray-400); flex-shrink:0; } :is(.cmplus-home,.editor-styles-wrapper) .footer-base .kt-inside-inner-col { border-top:1px solid rgba(251,251,249,0.08); padding-top:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .footer-base .copyright { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cm-gray-500); } / ========== INTERNAS: enfoque / liderazgo / quote / mapa / contacto / servicios detalle ========== / / ===== HERO unificado de páginas internas (referencia: hero de Website-About) ===== subtítulo (eyebrow) + título (h1) + descripción, SIN botón. Mismo ancho/alto en todas; fondo negro + imagen B&N (grayscale) + overlay degradado. / / Imagen B&N + overlay como BACKGROUND del elemento (los pseudo-elementos ::before/::after no se pintan sobre el rowlayout de Kadence). Capas: overlay (arriba) · gris a 'saturation' para desaturar a B&N · imagen (abajo). El texto no se ve afectado (va en hijos). / / Estructura del hero. La IMAGEN de fondo y el OVERLAY ahora son NATIVOS de Kadence (editables desde el editor: bloque rowlayout → pestaña Fondo + Overlay). / :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero { position:relative; color:var(--cm-cream); min-height:520px; display:flex; align-items:flex-end; overflow:hidden; } :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero :is(.kt-row-column-wrap,.innerblocks-wrap) { max-width:1240px; margin:0 auto; padding:var(--sp-10) var(--sp-6) var(--sp-9); box-sizing:border-box; width:100%; display:grid; grid-template-columns:70% 30%; align-content:end; } / En el editor Kadence genera su propia grilla (1 col) para el inner-wrap del hero y gana; la forzamos a 70/30 + contenido abajo (!important) para igualar el front. / .editor-styles-wrapper .cm-page-hero .innerblocks-wrap { grid-template-columns:70% 30% !important; align-content:end !important; } / Contenido en la columna del 70%; la segunda pista (30%) queda vacía. / :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero .cm-page-hero-col { width:auto; max-width:none; min-width:0; grid-column:1; } / En el editor el inner-wrap queda a 1 columna (Kadence), así que el contenido sale a 100%. Lo limitamos al 70% (= el track del 70% del front) para que el texto envuelva igual. / .editor-styles-wrapper .cm-page-hero .cm-page-hero-col { max-width:70% !important; } .editor-styles-wrapper .cm-page-hero .cm-hero-lead, .editor-styles-wrapper .cm-page-hero .cm-hero-lead .kadence-advancedheading-text { max-width:56ch !important; } :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero .cm-hero-eyebrow { font-family:var(--font-sans); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-300); margin:0 0 var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero .cm-hero-title { font-family:var(--font-serif); font-size:clamp(40px,5.5vw,78px); line-height:1.05; letter-spacing:-0.02em; color:var(--cm-cream); font-weight:500; margin:0 0 var(--sp-5); max-width:none; } :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero .cm-hero-lead { font-family:var(--font-sans); font-size:clamp(18px,1.4vw,21px); line-height:1.5; color:var(--cm-gray-300); max-width:56ch; margin:0; } / (La imagen de fondo de cada hero ahora se define por página desde el editor — bloque rowlayout `.cm-page-hero` → Fondo → Imagen + Overlay. Ya no se hardcodea en CSS.) / @media (max-width:760px){ .cmplus-home .cm-page-hero { min-height:420px; } :is(.cmplus-home,.editor-styles-wrapper) .cm-page-hero .kt-row-column-wrap { padding:var(--sp-9) var(--sp-5) var(--sp-8); grid-template-columns:1fr; } } :is(.cmplus-home,.editor-styles-wrapper) .lead-statement .cm-h2 { font-size:clamp(24px,2.6vw,38px); line-height:1.28; letter-spacing:-0.012em; max-width:24ch; } :is(.cmplus-home,.editor-styles-wrapper) .enfoque p, :is(.cmplus-home,.editor-styles-wrapper) .intro-text p { color:var(--cm-gray-600); font-size:18px; line-height:1.7; margin-bottom:var(--sp-5); } / Enfoque — solo nosotros-2 (Figma): foto de fondo (Carlos+Adela) + velo degradado izq + texto constreñido / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque { position:relative; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.62) 38%, rgba(10,10,10,0.18) 72%, rgba(10,10,10,0) 100%); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque > .kt-row-column-wrap { position:relative; z-index:2; min-height:480px; align-items:center; align-content:center; } / Centrado vertical real: la columna deja de estirarse (align-self) y centra su contenido. / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque-col { align-self:center; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque-col > .kt-inside-inner-col { justify-content:center; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .section-title, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .cm-h2 { max-width:60%; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque p { color:var(--cm-cream); font-size:18px; line-height:1.7; max-width:52%; } / "Nuestro Enfoque": textos en blanco (cream) + h2 más pequeño. / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .cm-eyebrow, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .cm-eyebrow .kadence-advancedheading-text { color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .section-title, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .section-title .kadence-advancedheading-text { color:var(--cm-cream); font-size:clamp(34px,4vw,52px); } :is(.cmplus-home,.editor-styles-wrapper) .diferencia-list ul { list-style:none; padding:0; margin:var(--sp-7) 0 0; border-top:1px solid var(--cm-gray-300); } :is(.cmplus-home,.editor-styles-wrapper) .diferencia-list li { font-family:var(--font-serif); font-size:clamp(18px,1.4vw,22px); padding:var(--sp-4) 0; border-bottom:1px solid var(--cm-gray-200); } / Líderes — base global (/nosotros/ original: vertical, placeholder gris 3/4) / :is(.cmplus-home,.editor-styles-wrapper) .lider-card > .kt-inside-inner-col { display:flex; flex-direction:column; gap:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .lider-photo { aspect-ratio:3/4; background:var(--cm-gray-200) center/cover no-repeat; } / Líderes — solo nosotros-2 (Figma): apiladas, horizontal foto cuadrada izq + texto der + fotos reales / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .liderazgo .cm-grid > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .liderazgo .cm-grid > .innerblocks-wrap { grid-template-columns:1fr; gap:var(--sp-8); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .lider-card > .kt-inside-inner-col { display:grid; grid-template-columns:300px 1fr; column-gap:var(--sp-6); row-gap:var(--sp-3); align-content:start; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .lider-photo { grid-column:1; grid-row:1 / span 9; aspect-ratio:1/1; width:300px; align-self:start; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .kt-adv-heading17_298cf1-ea.lider-photo { background-image:url("../img/about-carlos.jpg"); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .kt-adv-heading17_ff918b-1c.lider-photo { background-image:url("../img/about-adela.jpg"); } :is(.cmplus-home,.editor-styles-wrapper) .lider-info .name { font-family:var(--font-serif); font-size:24px; } :is(.cmplus-home,.editor-styles-wrapper) .lider-info .role { font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cm-gray-500); margin-top:var(--sp-2); } / Bio más angosta (≈ referencia 60ch) + iconos de redes sociales por líder. / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .lider-card p { max-width:56ch; } :is(.cmplus-home,.editor-styles-wrapper) .lider-social { display:flex; gap:var(--sp-3); margin-top:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .lider-social a { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; color:var(--cm-black); border:1px solid transparent; transition:background .2s, border-color .2s; } :is(.cmplus-home,.editor-styles-wrapper) .lider-social a:hover { background:var(--cm-white); border-color:var(--cm-gray-200); } :is(.cmplus-home,.editor-styles-wrapper) .lider-social svg { width:18px; height:18px; } :is(.cmplus-home,.editor-styles-wrapper) .quote-section blockquote { font-family:var(--font-serif); font-size:clamp(24px,2.6vw,36px); line-height:1.28; letter-spacing:-0.012em; color:var(--cm-cream); max-width:24ch; margin:0; } :is(.cmplus-home,.editor-styles-wrapper) .quote-attr { margin-top:var(--sp-6); font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cm-gray-400); } / ===== Quote + Firma — solo nosotros-2 (Figma node 89-306) ===== / / Firma: solo texto a ancho (≤934px), sin foto del equipo / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .firma-media { display:none; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .firma-text { grid-column:1 / -1; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .firma-text .cm-h2 { max-width:934px; } / El párrafo de "Nuestra Firma" al mismo ancho que el h2. / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .firma-text p { max-width:934px; } / Quote = caja #101010 ancho-contenido con foto de Carlos DENTRO a la derecha / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section { background-color:transparent !important; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .wp-block-kadence-column > .kt-inside-inner-col { background:#101010; position:relative; overflow:hidden; min-height:412px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; padding:64px; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .wp-block-kadence-column > .kt-inside-inner-col::after { content:""; position:absolute; top:0; right:0; bottom:0; width:544px; max-width:44%; background:url("../img/about-quote.jpg") center/cover no-repeat; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section blockquote { position:relative; z-index:2; max-width:58%; font-family:var(--font-serif); font-size:clamp(22px,2.4vw,32px); line-height:1.2; font-weight:600; letter-spacing:-0.012em; color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .quote-attr { position:relative; z-index:2; max-width:56%; margin-top:40px; font-family:var(--font-sans); font-size:20px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .quote-attr::after { content:"Fundador de CM+"; display:block; font-family:var(--font-sans); font-size:16px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--cm-gray-300); margin-top:2px; } / Quote idéntico al Figma: sin línea de acento · comillas · patrón de cruces / :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section blockquote { border-left:0; padding-left:0; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section blockquote::before { content:"\201C"; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section blockquote::after { content:"\201D"; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .wp-block-kadence-column > .kt-inside-inner-col::before { content:""; position:absolute; z-index:1; left:55%; bottom:44px; width:190px; height:154px; pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat; } / About (nosotros-2) — responsive / @media (max-width:760px){ :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .lider-card > .kt-inside-inner-col { grid-template-columns:1fr; row-gap:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .lider-photo { grid-row:auto; width:220px; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .section-title, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque .cm-h2, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque p, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .firma-text .cm-h2, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .firma-text p { max-width:none; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .enfoque::before { background:linear-gradient(180deg, rgba(10,10,10,0.45), rgba(10,10,10,0.82)); } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .wp-block-kadence-column > .kt-inside-inner-col { padding:32px; min-height:0; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section blockquote, :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .quote-attr { max-width:none; } :is(.cmplus-home,.editor-styles-wrapper):is(.page-id-17,.page-id-71) .quote-section .wp-block-kadence-column > .kt-inside-inner-col::after { position:static; width:100%; height:240px; margin-top:var(--sp-6); } } / ===== /servicios/ — intro a 2 columnas + servicios en filas editoriales (igual a Website-Servicios.html) ===== / / Intro: eyebrow+título (izq) · 2 párrafos (der) / :is(.cmplus-home,.editor-styles-wrapper) .intro-grid-row > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .intro-grid-row .innerblocks-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:start; } :is(.cmplus-home,.editor-styles-wrapper) .intro-grid-row :is(.kt-row-column-wrap,.innerblocks-wrap) > .wp-block-kadence-column { width:auto; } :is(.cmplus-home,.editor-styles-wrapper) .intro-head .section-title { max-width:24ch; } / Cada servicio = fila editorial: head angosto (título+desc) + body ancho ("Qué incluye" + 6 puntos en 2 col) / :is(.cmplus-home,.editor-styles-wrapper) .servicio-row > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .servicio-row .innerblocks-wrap { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr); gap:var(--sp-8) var(--sp-9); align-items:start; } :is(.cmplus-home,.editor-styles-wrapper) .servicio-row :is(.kt-row-column-wrap,.innerblocks-wrap) > .wp-block-kadence-column { width:auto; min-width:0; } :is(.cmplus-home,.editor-styles-wrapper) .servicio-head .cm-h2 { font-size:clamp(38px,4.4vw,60px); line-height:1.0; letter-spacing:-0.022em; margin-bottom:var(--sp-5); max-width:14ch; } :is(.cmplus-home,.editor-styles-wrapper) .servicio-desc { color:var(--cm-gray-600); font-size:clamp(17px,1.3vw,19px); line-height:1.6; max-width:38ch; } :is(.cmplus-home,.editor-styles-wrapper) .body-eyebrow { font-family:var(--font-sans); font-size:10.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--cm-gray-500); margin-bottom:var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--cm-gray-300); } :is(.cmplus-home,.editor-styles-wrapper) .servicio-points ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-6); } :is(.cmplus-home,.editor-styles-wrapper) .servicio-points li { position:relative; list-style:none; padding:var(--sp-3) 0 var(--sp-3) var(--sp-5); border-bottom:1px solid var(--cm-gray-200); font-family:var(--font-serif); font-size:16px; line-height:1.4; color:var(--cm-black); } :is(.cmplus-home,.editor-styles-wrapper) .servicio-points li::before { content:""; position:absolute; left:0; top:calc(var(--sp-3) + 6px); width:12px; height:12px; opacity:0.55; background:linear-gradient(var(--cm-black),var(--cm-black)) center/12px 1px no-repeat, linear-gradient(var(--cm-black),var(--cm-black)) center/1px 12px no-repeat; } @media (max-width:900px){ :is(.cmplus-home,.editor-styles-wrapper) .intro-grid-row > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .intro-grid-row .innerblocks-wrap, :is(.cmplus-home,.editor-styles-wrapper) .servicio-row > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .servicio-row .innerblocks-wrap { grid-template-columns:1fr; gap:var(--sp-5); } } @media (max-width:720px){ :is(.cmplus-home,.editor-styles-wrapper) .servicio-points ul { grid-template-columns:1fr; } } :is(.cmplus-home,.editor-styles-wrapper) .contact-info .cm-h2 { margin-bottom:var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .contact-info p { color:var(--cm-gray-600); font-size:18px; line-height:1.7; } :is(.cmplus-home,.editor-styles-wrapper) .contact-big { font-family:var(--font-serif); font-size:clamp(20px,1.8vw,26px); margin:var(--sp-4) 0; display:flex; align-items:center; gap:12px; } :is(.cmplus-home,.editor-styles-wrapper) .contact-big svg { width:22px; height:22px; flex-shrink:0; color:var(--cm-gray-500); } :is(.cmplus-home,.editor-styles-wrapper) .map-embed { min-height:420px; background:var(--cm-gray-200) center/cover no-repeat; } .cmplus-home .map-embed { background-image:url("../img/panorama.jpg"); } .editor-styles-wrapper .map-embed { background-image:url("../img/panorama.jpg"); } / Hero placeholder (banda oscura simple antes/si no hay slider) / .cmplus-home .cm-hero-ph .cm-hero-title, .editor-styles-wrapper .cm-hero-ph .cm-hero-title { color:var(--cm-cream); max-width:18ch; font-size:clamp(40px,5vw,64px); } .cmplus-home .cm-hero-ph .cm-lead, .editor-styles-wrapper .cm-hero-ph .cm-lead { color:var(--cm-cream); margin-top:var(--sp-5); max-width:52ch; } / Formulario de contacto (maqueta visual) / :is(.cmplus-home,.editor-styles-wrapper) .cm-form-mock { background:var(--cm-white); border:1px solid var(--cm-gray-200); padding:var(--sp-7); } :is(.cmplus-home,.editor-styles-wrapper) .cm-form-mock .cm-contact-title { font-family:var(--font-serif); font-size:24px; margin-bottom:var(--sp-2); } :is(.cmplus-home,.editor-styles-wrapper) .cm-form-note { font-size:13px; color:var(--cm-gray-500); margin-bottom:var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .cm-field { margin-bottom:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .cm-field label { display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cm-gray-500); margin-bottom:6px; } :is(.cmplus-home,.editor-styles-wrapper) .cm-input { height:44px; border:1px solid var(--cm-gray-200); background:var(--cm-cream); } :is(.cmplus-home,.editor-styles-wrapper) .cm-input-area { height:120px; } :is(.cmplus-home,.editor-styles-wrapper) .cm-form-cta { margin-top:var(--sp-5); } / ===== Contacto — formulario Gravity Forms (estilo CM+, reemplaza el mock) ===== / :is(.cmplus-home,.editor-styles-wrapper) .contact-form > .kt-inside-inner-col, :is(.cmplus-home,.editor-styles-wrapper) .contact-form > .kadence-inner-column-inner { background:var(--cm-white); border:1px solid var(--cm-gray-200); padding:var(--sp-7); } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .cm-contact-title { font-family:var(--font-serif); font-size:24px; line-height:1.15; color:var(--cm-black); margin:0 0 var(--sp-2); } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .cm-form-note { font-size:13px; color:var(--cm-gray-500); margin:0 0 var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gform_wrapper { margin:0; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gform_required_legend { display:none; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gform_fields { display:grid; grid-template-columns:1fr; gap:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gfield_label { font-family:var(--font-sans); font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--cm-gray-500); margin:0 0 6px; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gfield_required { color:var(--cm-gray-500); margin-left:2px; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .ginput_container input, :is(.cmplus-home,.editor-styles-wrapper) .contact-form .ginput_container textarea { width:100% !important; height:44px; padding:0 12px; border:1px solid var(--cm-gray-200) !important; background:var(--cm-cream) !important; border-radius:0 !important; font-family:var(--font-sans); font-size:15px; color:var(--cm-black); box-sizing:border-box; box-shadow:none !important; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .ginput_container textarea { height:120px; padding:10px 12px; resize:vertical; line-height:1.5; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .ginput_container input:focus, :is(.cmplus-home,.editor-styles-wrapper) .contact-form .ginput_container textarea:focus { border-color:var(--cm-black) !important; outline:none; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gform_footer { margin:var(--sp-5) 0 0; padding:0; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gform_button { display:inline-block; width:auto; height:50px; padding:0 28px; background:var(--cm-black) !important; color:var(--cm-cream) !important; border:1px solid var(--cm-black) !important; border-radius:0 !important; font-family:var(--font-sans); font-size:15px; font-weight:500; cursor:pointer; transition:background .2s; } :is(.cmplus-home,.editor-styles-wrapper) .contact-form .gform_button:hover { background:var(--cm-charcoal) !important; } :is(.cmplus-home,.editor-styles-wrapper) .map-section .cm-h2 { margin-bottom:var(--sp-4); } :is(.cmplus-home,.editor-styles-wrapper) .liderazgo .cm-two-col > .kt-row-column-wrap, :is(.cmplus-home,.editor-styles-wrapper) .liderazgo .cm-two-col .innerblocks-wrap { align-items:start; gap:var(--sp-8); margin-top:var(--sp-7); } / ===== Nosotros — Nuestros aliados ===== / / Centrado real: text-align centra el texto; align-items:center centra los bloques (h2/logo/desc) en la columna flex de Kadence — front (.kt-inside-inner-col) + editor (.kadence-inner-column-inner). / :is(.cmplus-home,.editor-styles-wrapper) .aliados-head, :is(.cmplus-home,.editor-styles-wrapper) .aliados-grid .aliado { text-align:center; } :is(.cmplus-home,.editor-styles-wrapper) .aliados-head .kt-inside-inner-col, :is(.cmplus-home,.editor-styles-wrapper) .aliados-head .kadence-inner-column-inner, :is(.cmplus-home,.editor-styles-wrapper) .aliados-grid .aliado .kt-inside-inner-col, :is(.cmplus-home,.editor-styles-wrapper) .aliados-grid .aliado .kadence-inner-column-inner { align-items:center; } / Heading al mismo tamaño que los demás headings (hereda .cm-h2 = clamp(34,4vw,52)). inline-block → lo centra el text-align:center del padre block (margin auto cubre el caso flex del editor). / :is(.cmplus-home,.editor-styles-wrapper) .aliados-title { display:inline-block; max-width:22ch; margin:var(--sp-4) auto 0; } / Logos en caja de alto fijo y centrados → ambos a la misma altura, descripciones alineadas / :is(.cmplus-home,.editor-styles-wrapper) .aliados-grid .aliado-logo { display:flex; align-items:center; justify-content:center; height:84px; margin:0 0 var(--sp-5); } :is(.cmplus-home,.editor-styles-wrapper) .aliados-grid .aliado-logo img { max-height:84px; max-width:220px; width:auto; height:auto; object-fit:contain; } :is(.cmplus-home,.editor-styles-wrapper) .aliado-desc { display:inline-block; font-size:17px; line-height:1.6; color:var(--cm-gray-600); margin:0 auto; max-width:30ch; } / ========================================================== OVERRIDES POR PÁGINA (heroes internos + ajustes específicos) Los heroes internos usan .cm-hero-title (tope 56) pero la referencia los quiere más grandes (78px nosotros / 72px resto) y peso 400. Se scopean con .page-id- para no afectar el hero del home (verificado, 56px/500). El letter-spacing y el tracking absoluto se alinean solos al ser em-based (-0.02em ya en .cm-hero-title). ========================================================== / / NOSOTROS (17) ahora usa el diseño de nosotros-2: sus estilos viven en el bloque "ABOUT" de arriba, scopeado a :is(.page-id-17,.page-id-71). / / SERVICIOS (18) / PROYECTOS (19) / CONTACTO (20) — hero 72px, peso 400, lh 1.05 / :is(.cmplus-home,.editor-styles-wrapper).page-id-18 .cm-hero-slider .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper).page-id-18 .cm-hero-slider .cm-hero-title .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper).page-id-19 .cm-hero-slider .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper).page-id-19 .cm-hero-slider .cm-hero-title .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper).page-id-20 .cm-hero-slider .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper).page-id-20 .cm-hero-slider .cm-hero-title .kadence-advancedheading-text { font-size:clamp(40px,5vw,72px); line-height:1.05; font-weight:400; letter-spacing:-0.02em; } / (Los antiguos overrides de NOSOTROS 17 se retiraron: el diseño ahora proviene del bloque ABOUT scopeado a :is(.page-id-17,.page-id-71).) / / SERVICIOS (18) — "Cuatro frentes" lleva .section-title pero la referencia lo quiere a escala .cm-h2 (52/1.08; min 34 en tablet/móvil). / :is(.cmplus-home,.editor-styles-wrapper).page-id-18 .intro-text .section-title, :is(.cmplus-home,.editor-styles-wrapper).page-id-18 .intro-text .section-title .kadence-advancedheading-text { font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-0.022em; } / PROYECTOS (19) — tarjetas idénticas al home (título grande, sin override). / / CONTACTO (20) — tarjeta del formulario y bloque de mapa / :is(.cmplus-home,.editor-styles-wrapper).page-id-20 .cm-form-mock .cm-contact-title { font-size:26px; font-weight:400; letter-spacing:-0.015em; line-height:1.1; } :is(.cmplus-home,.editor-styles-wrapper).page-id-20 .cm-form-mock .cm-form-note { font-size:13.5px; line-height:1.55; } :is(.cmplus-home,.editor-styles-wrapper).page-id-20 .map-section p { font-size:18px; line-height:1.7; } / ========== REVEAL (sólo front; en editor todo visible) ========== / .cm-js .cmplus-home .reveal { opacity:0; transform:translateY(28px); transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); } .cmplus-home .reveal.in { opacity:1; transform:translateY(0); } / Revelado del título del hero (fade-up del título completo; los
dan las 3 líneas). Sólo en el front con JS activo. / .cm-js .cmplus-home .cm-hero-slider .cm-hero-title { opacity:0; transform:translateY(24px); transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); } .cmplus-home .cm-hero-slider .cm-hero-title.in { opacity:1; transform:translateY(0); } / ========================================================== OVERRIDES DE COLOR EN CONTEXTOS OSCUROS — PARIDAD EDITOR Como el editor mete `.editor-styles-wrapper h2 { color: var(--global-palette3) }` y nuestro texto vive en `.kadence-advancedheading-text`, forzamos el color crema en los headings/textos sobre fondo oscuro apuntando también al hijo. Alta especificidad con doble raíz para el editor. ========================================================== / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-hero-title .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-ph .cm-hero-title, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-ph .cm-hero-title .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .experiencia-left .cm-h2, :is(.cmplus-home,.editor-styles-wrapper) .experiencia-left .cm-h2 .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .quote-section blockquote, :is(.cmplus-home,.editor-styles-wrapper) .quote-section .cm-h2, :is(.cmplus-home,.editor-styles-wrapper) .quote-section .cm-h2 .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .project-card .cm-proj-title, :is(.cmplus-home,.editor-styles-wrapper) .project-card .cm-proj-title .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .contact-block .cm-contact-title, :is(.cmplus-home,.editor-styles-wrapper) .contact-block .cm-contact-title .kadence-advancedheading-text { color:var(--cm-cream); } / textos secundarios crema sobre oscuro / :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-lead, :is(.cmplus-home,.editor-styles-wrapper) .cm-hero-slider .cm-lead .kadence-advancedheading-text, :is(.cmplus-home,.editor-styles-wrapper) .experiencia-left p, :is(.cmplus-home,.editor-styles-wrapper) .experiencia-left .kadence-advancedheading-text { color:var(--cm-cream); } / ========== RESPONSIVE ========== / @media (max-width:900px){ / Grids que colapsan a columna única / .cmplus-home .cm-two-col > .kt-row-column-wrap, .cmplus-home .cm-exp-grid > .kt-row-column-wrap, .cmplus-home .cm-serv-grid > .kt-row-column-wrap, .cmplus-home .cm-porque-grid > .kt-row-column-wrap { grid-template-columns:1fr; gap:var(--sp-6); } .cmplus-home .firma-media > .kt-inside-inner-col::after { right:-20px; bottom:-20px; width:120px; height:120px; } / El menú móvil es el popup drawer de Kadence (estilos en header-footer.css) / } @media (max-width:760px){ .cmplus-home .cm-proc-grid > .kt-row-column-wrap, .cmplus-home .cm-footer-grid > .kt-row-column-wrap { grid-template-columns:1fr; gap:var(--sp-6); } .cmplus-home .project-card > .kt-inside-inner-col { width:100%; } .cmplus-home .project-card .desc { position:static; margin-top:var(--sp-4); max-width:100%; right:auto; bottom:auto; } / ---- HERO SLIDER móvil ---- El hero replica la referencia Website-Home.html, que NO tiene ningún override responsive del hero: la tipografía es FLUIDA (título clamp(34px,4vw,56px), lead clamp(18px,1.4vw,21px)), el padding lateral constante (0 32px), el padding inferior 64px, contenido alineado abajo (flex-end) y los
hacen saltos de línea naturales. Por eso aquí NO tocamos el texto/padding del hero (eso causaba el "achorizado"): solo ajustamos los controles del slider (flechas/dots) que la referencia no tiene. */ .cmplus-home .cm-hero-slider .splidearrows { bottom:24px; padding:0 var(--sp-4); gap:var(--sp-2); } .cmplus-home .cm-hero-slider .splidearrow { width:36px; height:36px; } .cmplus-home .cm-hero-slider .splidearrow svg { width:11px; height:11px; } .cmplus-home .cm-hero-slider .splidepagination { bottom:36px; padding:0 var(--sp-4); } } @media (prefers-reduced-motion:reduce){ .cmplus-home .reveal, .cmplus-home .reveal.in, .cmplus-home .cm-hero-slider .cm-hero-title { opacity:1 !important; transform:none !important; transition:none !important; } }