/* ============================================================================ fc-landing.css · Factoría de Contenidos en elocuent.com ---------------------------------------------------------------------------- Sostiene el aspecto de las tres landings comerciales cuando su contenido vive en BLOQUES NATIVOS de WordPress (Gutenberg) dentro del tema Newspaper. Reglas de convivencia con el tema (no negociables): 1. NADA de selectores globales (`*`, `body`, `h1`). Todo cuelga de `.fc-landing`, que es la clase del grupo raíz de cada página. Fuera de ese árbol, el tema manda. 2. Nada de `!important` salvo donde tagDiv inyecta inline (marcado abajo). 3. Las clases `fc-*` las escriben los bloques vía su atributo className, así que un editor puede reordenar, duplicar o borrar bloques sin romper el CSS. Origen: admin/marketing-landing/{home,plataforma,index}.html · las variables son las mismas de esos ficheros, sin tocar valores. ========================================================================== */ .fc-landing{ --elo-soy:#56A4B1; --elo-digo:#3DA3DA; --elo-doy:#8B4494; --elo-doy-intenso:#031976; --elo-doy-claro:#C22BD1; --elo-corporativo:#2B00C8; --elo-ink:#2B2B36; --elo-slate:#3A3A4E; --elo-muted:#777777; --elo-line:#E6E6EB; --elo-surface-2:#F4F4F7; --elo-bg:#FAFAFC; --grad-tagline:linear-gradient(90deg,#56A4B1 0%,#3DA3DA 48%,#C22BD1 100%); --grad-corporate:linear-gradient(135deg,#031976 0%,#2B00C8 100%); --grad-soft:linear-gradient(135deg,rgba(86,164,177,.12) 0%,rgba(61,163,218,.10) 50%,rgba(194,43,209,.12) 100%); --shadow-sm:0 2px 6px rgba(3,25,118,.08),0 1px 2px rgba(3,25,118,.06); --shadow-md:0 8px 24px rgba(3,25,118,.10),0 2px 6px rgba(3,25,118,.06); --shadow-lg:0 20px 48px rgba(3,25,118,.14),0 4px 12px rgba(3,25,118,.08); --fc-font:'Gotham','Avenir Next','Futura','Helvetica Neue',Arial,sans-serif; --ease-out:cubic-bezier(.2,.8,.2,1); --r-md:8px; --r-xl:12px; --r-2xl:20px; font-family:var(--fc-font); color:var(--elo-ink); background:var(--elo-bg); line-height:1.55; -webkit-font-smoothing:antialiased; } /* El tema Newspaper mete su tipografía por cascada en cada elemento de texto: la reponemos dentro del árbol de la landing, sin salir de él. */ .fc-landing h1,.fc-landing h2,.fc-landing h3,.fc-landing h4, .fc-landing p,.fc-landing li,.fc-landing a,.fc-landing strong,.fc-landing em{ font-family:var(--fc-font); } .fc-landing a{color:inherit;text-decoration:none} .fc-landing p{margin:0 0 14px} .fc-landing h1,.fc-landing h2,.fc-landing h3{letter-spacing:-.02em;line-height:1.15;margin:0} .fc-landing ul{margin:0;padding:0;list-style:none} /* Las secciones "de ancho completo" se quedan dentro del contenedor del tema. El patrón habitual de full bleed (width:100vw + margen negativo de 50vw) NO se usa aquí a propósito: 100vw incluye el ancho de la barra de scroll, y Newspaper no declara overflow-x en html ni en body, así que en Windows daría ~15px de scroll horizontal en toda la página. La landing va integrada en la web, no flotando por encima de ella. */ .fc-landing .fc-full{ width:auto;max-width:none; margin-left:0;margin-right:0; padding-left:0;padding-right:0; border-radius:var(--r-2xl); } .fc-landing .fc-wrap{max-width:1160px;margin:0 auto} /* ============================================================================ Convivencia con la plantilla de Newspaper ---------------------------------------------------------------------------- Todo lo de este bloque toca elementos del TEMA, fuera del árbol .fc-landing, así que cuelga de `.fc-landing-page` — la clase que el mu-plugin pone en el solo en estas tres páginas. Sin esa clase, ni una de estas reglas se aplica en ninguna otra parte del sitio. ========================================================================== */ /* `page.php` de Newspaper es rígido: siempre 8/12 de contenido y 4/12 de sidebar, aunque la sidebar esté vacía — que es el caso. La landing se queda con el ancho entero. */ .fc-landing-page .td-pb-span8.td-main-content{ width:100%!important;float:none!important; } .fc-landing-page .td-pb-span4.td-main-sidebar{display:none!important} /* Con la sidebar fuera, el contenedor del contenido puede respirar un poco más que el ancho estándar del tema. Solo el área de contenido: el header y el pie conservan su ancho y siguen alineados con el resto del sitio. */ .fc-landing-page .td-main-content-wrap .td-container{max-width:1240px} /* El tema imprime el título de la página justo encima del hero, que ya trae su propio h1. Las migas de pan (.td-crumb-container) se conservan. */ .fc-landing-page .td-page-header{display:none} /* ---------------------------------------------------------------- tipografía */ .fc-landing .fc-eyebrow{ display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--elo-corporativo); background:var(--elo-surface-2);border-radius:999px;padding:6px 13px;margin-bottom:18px; } .fc-landing .fc-kicker{ display:block;font-size:12px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--elo-muted);margin-bottom:10px; } /* Los rótulos en versalitas con letter-spacing son lo primero que se rompe cuando una columna se estrecha: el navegador parte "TECNOLOGÍA" en "TECNO / LOGÍA". Aquí se prohíbe partir palabras y se deja que, si no cabe, la caja crezca en vez de trocear el texto. */ .fc-landing .fc-n, .fc-landing .fc-kicker, .fc-landing .fc-eyebrow, .fc-landing .fc-tag, .fc-landing .fc-pill{ hyphens:none;-webkit-hyphens:none; overflow-wrap:normal;word-break:normal; text-wrap:pretty; } .fc-landing .fc-lead{ font-size:clamp(16px,1.5vw,18.5px);color:var(--elo-slate); max-width:74ch;line-height:1.55; } .fc-landing .fc-grad{ background:var(--grad-tagline);-webkit-background-clip:text;background-clip:text; color:transparent; } /* --------------------------------------------------------------------- hero */ .fc-landing .fc-hero{ background:var(--grad-soft); border:1px solid var(--elo-line); border-radius:var(--r-2xl); padding:clamp(40px,6vw,72px) clamp(22px,3.5vw,44px); margin-bottom:8px; } .fc-landing .fc-hero h1{font-size:clamp(34px,5.4vw,60px);margin:0 0 18px} .fc-landing .fc-hero .fc-lead{font-size:clamp(17px,1.7vw,20px)} /* ------------------------------------------------------------------ botones */ .fc-landing .wp-block-buttons{gap:12px} .fc-landing .fc-btn .wp-block-button__link, .fc-landing a.fc-btn{ display:inline-flex;align-items:center;gap:8px; font-weight:700;font-size:14px;padding:12px 20px; border-radius:var(--r-md);border:0;cursor:pointer; transition:transform .15s var(--ease-out),box-shadow .2s; } .fc-landing .fc-btn-primary .wp-block-button__link{ background:var(--grad-corporate);color:#fff;box-shadow:var(--shadow-sm); } .fc-landing .fc-btn-primary .wp-block-button__link:hover{ transform:translateY(-1px);box-shadow:var(--shadow-md);color:#fff; } .fc-landing .fc-btn-ghost .wp-block-button__link{ background:#fff;color:var(--elo-corporativo); border:1px solid var(--elo-line);box-shadow:var(--shadow-sm); } .fc-landing .fc-btn-ghost .wp-block-button__link:hover{border-color:var(--elo-corporativo)} /* ------------------------------------------------------------------ tarjetas */ .fc-landing .fc-card{ background:#fff;border:1px solid var(--elo-line);border-radius:var(--r-xl); padding:22px;box-shadow:var(--shadow-sm);height:100%; } .fc-landing .fc-card h3{font-size:17px;margin:8px 0 0} .fc-landing .fc-card p{color:var(--elo-slate);font-size:14.5px;margin:8px 0 0;line-height:1.5} .fc-landing .fc-card .fc-n{ font-size:11.5px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--elo-muted); } /* borde superior de color · las tres voces SOY · DIGO · DOY */ .fc-landing .fc-card-soy{border-top:3px solid var(--elo-soy)} .fc-landing .fc-card-digo{border-top:3px solid var(--elo-digo)} .fc-landing .fc-card-doy{border-top:3px solid var(--elo-doy)} /* Radio moderado y no 999px: la píldora perfectamente redonda solo funciona con texto de una línea, y varias de estas frases ocupan tres en una columna estrecha — quedaba un óvalo deforme. */ .fc-landing .fc-pill{ display:inline-block;margin-top:13px;font-size:12.5px;font-weight:700; color:var(--elo-slate);background:var(--elo-surface-2); border-radius:10px;padding:7px 12px;line-height:1.35; } .fc-landing .fc-tag{ display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--elo-corporativo); background:var(--elo-surface-2);border-radius:10px;padding:6px 12px;line-height:1.35; } /* tarjeta que además es enlace (las "tres puertas" de la home) */ .fc-landing .fc-card-link{display:block;transition:transform .15s var(--ease-out),box-shadow .2s} .fc-landing .fc-card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .fc-landing .fc-go{ display:inline-block;margin-top:14px;font-weight:700;font-size:14px; color:var(--elo-corporativo); } /* ------------------------------------------------------- columnas y secciones */ .fc-landing .fc-section{padding:clamp(34px,4.5vw,60px) 0} .fc-landing .fc-section-alt{ background:#fff; border:1px solid var(--elo-line); border-radius:var(--r-2xl); padding-left:clamp(20px,3vw,36px); padding-right:clamp(20px,3vw,36px); } .fc-landing .fc-section h2{font-size:clamp(24px,3vw,34px);margin:0 0 14px} .fc-landing .wp-block-columns{gap:18px} .fc-landing .wp-block-column{min-width:0} /* cifras destacadas */ .fc-landing .fc-stat{text-align:left} .fc-landing .fc-stat .fc-num{ display:block;font-size:clamp(28px,3.4vw,40px);font-weight:800; letter-spacing:-.03em;color:var(--elo-corporativo);line-height:1; } .fc-landing .fc-stat .fc-lbl{ display:block;margin-top:8px;font-size:13.5px;color:var(--elo-slate);line-height:1.4; } /* nota lateral con filete de color */ .fc-landing .fc-note{ border-left:3px solid var(--elo-doy);padding-left:15px; max-width:78ch;font-size:15px;line-height:1.55;color:var(--elo-ink); } /* tabla comparativa (generador de IA vs Factoría) */ .fc-landing .fc-table table{width:100%;border-collapse:collapse;background:#fff} .fc-landing .fc-table th,.fc-landing .fc-table td{ border:1px solid var(--elo-line);padding:12px 14px;font-size:14.5px; text-align:left;vertical-align:top; } .fc-landing .fc-table thead th{ background:var(--elo-surface-2);font-weight:800;font-size:13px; letter-spacing:.03em;text-transform:uppercase;color:var(--elo-slate); } .fc-landing .fc-table tbody th{font-weight:700;color:var(--elo-muted);width:22%} /* pasos del raíl editorial */ .fc-landing .fc-step{ background:#fff;border:1px solid var(--elo-line);border-radius:var(--r-md); padding:16px;height:100%; } .fc-landing .fc-step .fc-n{ display:inline-block;font-size:12px;font-weight:800;color:#fff; background:var(--grad-corporate);border-radius:6px;padding:3px 8px;margin-bottom:10px; } .fc-landing .fc-step b{display:block;font-size:15px;margin-bottom:4px} .fc-landing .fc-step p{font-size:13.5px;color:var(--elo-slate);margin:0} /* franja de cierre */ .fc-landing .fc-strip{ background:var(--grad-corporate);color:#fff;border-radius:var(--r-2xl); padding:clamp(26px,3.6vw,44px);box-shadow:var(--shadow-lg); } .fc-landing .fc-strip h2,.fc-landing .fc-strip p{color:#fff} .fc-landing .fc-strip p{opacity:.88;margin-bottom:0} .fc-landing .fc-strip .wp-block-button__link{background:#fff;color:var(--elo-corporativo)} /* vídeos de ejemplo · son verticales 9:16 y sin tope de altura ocuparían pantalla y media en escritorio */ .fc-landing .fc-video video{ display:block;width:auto;max-width:100%;max-height:600px;margin:0 auto; border-radius:var(--r-xl);border:1px solid var(--elo-line); box-shadow:var(--shadow-md);background:#000; } .fc-landing .fc-video figcaption{ font-size:13.5px;color:var(--elo-slate);margin-top:10px; text-align:left;line-height:1.45; } .fc-landing .fc-videos{align-items:flex-start} /* imágenes de caso · marco de dispositivo */ .fc-landing .fc-shot img{ border-radius:var(--r-xl);border:1px solid var(--elo-line); box-shadow:var(--shadow-md);display:block;width:100%;height:auto; } .fc-landing .fc-shot figcaption{ font-size:12.5px;color:var(--elo-muted);margin-top:8px;text-align:left; } /* pie de la landing (no es el footer del tema) */ .fc-landing .fc-foot{ border-top:1px solid var(--elo-line);margin-top:8px; padding:26px 24px;font-size:13px;color:var(--elo-muted); } /* --------------------------------------------------------------- responsive */ /* Gutenberg solo apila las columnas por debajo de 782px. Entre eso y el ancho del contenedor del tema (~1068px), cuatro columnas se quedan en ~200px y el contenido se estrangula. Se rompe antes: 4→2 en tablet, 2→1 en móvil. El !important es contra el `flex-basis` que Gutenberg imprime inline. */ @media(max-width:1100px){ .fc-landing .wp-block-columns{flex-wrap:wrap!important} .fc-landing .wp-block-columns>.wp-block-column{ flex-basis:calc(50% - 9px)!important;flex-grow:0; } } @media(max-width:680px){ .fc-landing .wp-block-columns>.wp-block-column{flex-basis:100%!important} } @media(max-width:860px){ .fc-landing .wp-block-columns{flex-wrap:wrap!important} /* tagDiv fuerza nowrap inline */ .fc-landing .fc-table table,.fc-landing .fc-table tbody, .fc-landing .fc-table tr,.fc-landing .fc-table td,.fc-landing .fc-table th{display:block} .fc-landing .fc-table thead{display:none} .fc-landing .fc-table tr{margin-bottom:14px;border:1px solid var(--elo-line);border-radius:var(--r-md)} .fc-landing .fc-table td,.fc-landing .fc-table th{border:0;border-bottom:1px solid var(--elo-line)} } @media(prefers-reduced-motion:reduce){ .fc-landing *{transition:none!important;animation:none!important} }