:
los párrafos heredan el texto del bloque (contraste AA) y las listas recuperan sus marcadores */
.cms-rt-body p { color: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.cms-rt-body ul { list-style: disc outside; }
.cms-rt-body ol { list-style: decimal outside; }
.cms-rt-body ul > li { list-style: disc outside; }
.cms-rt-body ol > li { list-style: decimal outside; }
@media (max-width: 767px) { .cms-rt.is-card { padding: 34px 22px; border-radius: 28px; } }
/* ---------- rejilla libre ---------- */
.cms-grid-row + .cms-grid-row { margin-top: 30px; }
.cms-grid-col { height: 100%; }
.cms-grid-col.is-card, .cms-grid-col.is-orange, .cms-grid-col.is-outline { padding: 40px 36px; border-radius: 30px; }
.cms-grid-col.is-card { background: var(--theme-color2); border: 1px solid var(--border-color2-rgba); }
.cms-grid-col.is-orange { background: var(--theme-color1); }
.cms-grid-col.is-outline { border: 1px solid rgba(255,255,255,.22); }
.cms-grid-col > * + * { margin-top: 18px; }
.cms-b-heading { color: #fff; margin: 0; }
.cms-b-heading.is-s { font-size: 22px; } .cms-b-heading.is-m { font-size: 30px; } .cms-b-heading.is-l { font-size: 44px; } .cms-b-heading.is-xl { font-size: 62px; line-height: 1.05; }
.cms-b-text { color: rgba(255,255,255,.72); line-height: 1.8; }
.cms-grid-col.is-orange .cms-b-text { color: rgba(255,255,255,.92); }
.cms-b-text p:last-child { margin-bottom: 0; }
.cms-b-text a { color: var(--theme-color1); }
.cms-b-image { margin: 0; border-radius: 24px; overflow: hidden; }
.cms-b-image img { width: 100%; height: auto; display: block; }
.cms-b-image figcaption { font-size: 14px; color: rgba(255,255,255,.6); padding-top: 10px; }
.cms-b-iconbox { height: 100%; }
.cms-b-icon { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(var(--theme-color1-rgb), .14); color: var(--theme-color1); margin-bottom: 20px; }
.cms-grid-col.is-orange .cms-b-icon { background: #151515; color: #fff; }
.cms-b-iconbox-title { font-size: 24px; color: #fff; margin: 0 0 10px; }
.cms-b-iconbox-text { color: rgba(255,255,255,.7); line-height: 1.7; }
.cms-b-iconbox .cms-link-btn { margin-top: 14px; }
.cms-b-counter .cms-stat-number { color: var(--theme-color1); }
.cms-b-counter.is-s .cms-stat-number { font-size: 40px; } .cms-b-counter.is-l .cms-stat-number, .cms-b-counter.is-xl .cms-stat-number { font-size: 90px; }
.cms-b-list-title { color: #fff; font-size: 22px; margin: 0; }
.cms-b-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cms-b-list li { display: flex; gap: 12px; align-items: baseline; color: rgba(255,255,255,.82); }
.cms-b-list i { color: var(--theme-color1); }
.cms-b-quote { margin: 0; font-family: var(--heading-font-family); font-size: 28px; line-height: 1.4; color: #fff; }
.cms-b-quote::before { content: '“'; display: block; font-size: 70px; line-height: .6; color: var(--theme-color1); margin-bottom: 8px; }
.cms-b-quote cite { display: block; margin-top: 14px; font-size: 15px; font-style: normal; color: rgba(255,255,255,.6); font-family: var(--body-font-family); }
.cms-b-video { position: relative; border-radius: 24px; overflow: hidden; min-height: 220px; background: #151515; }
.cms-b-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-b-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; background: var(--theme-color1); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px; }
.cms-b-video-title { position: absolute; left: 22px; bottom: 18px; right: 22px; color: #fff; font-weight: 500; }
.cms-b-spacer.is-s { height: 20px; } .cms-b-spacer.is-m { height: 40px; } .cms-b-spacer.is-l { height: 80px; } .cms-b-spacer.is-xl { height: 130px; }
.cms-b-divider { border: 0; border-top: 1px solid rgba(255,255,255,.14); opacity: 1; }
@media (max-width: 767px) { .cms-grid-col.is-card, .cms-grid-col.is-orange, .cms-grid-col.is-outline { padding: 30px 22px; } .cms-b-heading.is-xl { font-size: 42px; } .cms-b-heading.is-l { font-size: 34px; } }
/* ---------- utilidades de las plantillas endurecidas ---------- */
.cms-ring { width: 169px; height: 169px; animation: cmsSpin 14s linear infinite; }
.cms-ring text { fill: #fff; font-size: 13.5px; letter-spacing: 3px; text-transform: uppercase; font-family: var(--heading-font-family); }
@keyframes cmsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cms-ring { animation: none; } }
.cms-grid-col.is-orange .cms-b-counter .cms-stat-number, .cms-grid-col.is-orange .cms-b-list i, .cms-grid-col.is-orange .cms-b-text a { color: #fff; }
.cms-grid-col.is-orange .cms-b-quote::before { color: #151515; }
/* ---------- Ajustes para elementos que se ocultan al vaciarlos ---------- */
/* Tarjeta de equipo: la fila de iconos reserva su alto aunque no haya enlaces */
.team-block .inner-block .content-block .social-icon { min-height: 40px; }
/* Caja de ayuda (detalle de servicio): enlace extra (p. ej. email) */
.help-contact .help-contact-link { display: inline-block; margin-top: 6px; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.help-contact span.help-contact-link { color: inherit; }
.service-sidebar-single > .service-details-help:first-child { margin-top: 0; }
/* Artículo: iconos de compartir a la derecha aunque se oculten las etiquetas */
.blog-details__social-list { margin-left: auto; }
/* Pie: iconos sociales a la derecha aunque se vacíe el copyright */
.footer-bottom-wrapper .social-icon { margin-left: auto; }
/* Pie: el botón fijo «volver arriba» (50 px, a 30 px de la esquina) no tapa el enlace de Vimeo.
Escritorio: hueco a la derecha mientras el margen lateral no basta; móvil: todo centrado y
espacio debajo para el botón */
@media (min-width: 768px) and (max-width: 1599.98px) {
.foorer-area .footer-bottom .footer-bottom-wrapper { padding-right: 80px; }
}
@media (max-width: 767.98px) {
.foorer-area .footer-bottom { padding-bottom: 90px; }
.foorer-area .footer-bottom .footer-bottom-wrapper { text-align: center; }
.foorer-area .footer-bottom .footer-bottom-wrapper .social-icon { margin-left: 0; justify-content: center; }
.foorer-area .footer-bottom .footer-bottom-wrapper .social-icon a:last-child { margin-right: 0; }
}
/* Miga de pan: sin mayúscula en cada palabra (los títulos ya vienen bien escritos;
en español «Política de cookies», no «Política De Cookies») */
.page-breadcrumb li, .page-breadcrumb li a,
.page-title.style-two .page-breadcrumb li, .page-title.style-two .page-breadcrumb li a { text-transform: none; }
.footer-content form .cms-form-result { position: relative; clear: both; }
/* Pie 1 sin bloque de suscripción: el título queda solo y no deja hueco debajo (en móvil) */
.foorer-area .footer-widget-wrapper .footer-content .title:last-child { margin-bottom: 0; }
/* Contacto: sin sangría cuando falta el icono de la fila */
.contact-details__info li > .text:first-child { margin-left: 0; }
/* Proceso de trabajo: sin margen superior si se oculta el paso fijo 1 */
@media (min-width: 992px) {
.work-process-section .col-lg-6 > .working-block-one:first-child .inner-block { margin-top: 0; }
}
/* Servicios (home3): fila sin imagen no deja hueco */
.service-block-three .inner-box:not(:has(.image-box)) .content-box { padding-left: 0 !important; }
/* Rejilla de servicios a 4 columnas */
@media (min-width: 1200px) {
.service-section .col-xl-3 .service-block-one .inner-block { padding-left: 28px; padding-right: 28px; }
.service-section .col-xl-3 .service-block-one .title { font-size: 21px; }
}
/* Iconos sin enlace */
.testimonial-one .left-content a.icon:not([href]),
.circle-box a.arrow-icon:not([href]),
a.circle-btn:not([href]) { cursor: default; }
/* ---------- Casilla de privacidad en los formularios (RGPD art. 13 / LSSI-CE art. 21) ----------
La genera cms_privacy_field() justo antes del botón de envío. Los !important neutralizan
los estilos que la plantilla aplica a todos los de cada formulario (pies, contacto…). */
.cms-privacy { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 24px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); text-align: left; }
.cms-privacy input[type="checkbox"] {
-webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; appearance: auto !important;
display: inline-block !important; position: static !important; flex: 0 0 18px; width: 18px !important; height: 18px !important; min-width: 18px;
margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 3px !important;
background: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important;
accent-color: var(--theme-color1); cursor: pointer;
}
.cms-privacy input[type="checkbox"]:focus-visible { outline: 2px solid var(--theme-color1) !important; outline-offset: 2px; }
.cms-privacy label[for] { display: block; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: inherit; font-weight: 400; line-height: inherit; color: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; }
.cms-privacy label a { color: var(--theme-color1); text-decoration: underline; text-underline-offset: 3px; }
.cms-privacy label a:hover, .cms-privacy label a:focus { color: #fff; }
/* pies de página: bajo el campo de correo; el botón (absoluto, arriba a la derecha) no se toca */
.cms-privacy--newsletter { margin: 14px 0 0; font-size: 13px; }
.foorer-area .footer-content .form-group .cms-privacy--newsletter { padding: 0 12px; }
/* formularios en rejilla (home1 / home3): el espaciado lo pone la fila */
.contact-form-style-1 .cms-privacy, .contact-form3 .cms-privacy { margin: 0; }
/* ---------- Página 404: enlaces legales bajo el botón (la 404 no tiene pie) ---------- */
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 36px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; }
.error-page__links li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.error-page__links li + li:before { content: "·"; margin: 0 12px; color: rgba(255, 255, 255, .45); }
.error-page__links a { color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 3px; }
.error-page__links a:hover, .error-page__links a:focus { color: var(--theme-color1); }
@media (max-width: 575px) {
.error-page__links { gap: 8px 22px; }
.error-page__links li + li:before { content: none; }
}
/* ==========================================================
[B2] Texto largo con formato — artículos (news/details),
servicios (service-details/details) y casos de éxito
(project-details/details). Lo genera cms/lib/rich-body.php:
.cms-body > .cms-body-item(.is-lead|.is-quote|.is-box)
> .cms-body-main > h3.cms-body-sub + .cms-rich
> figure.cms-body-figure(.is-medium|.is-small)
Resaltados del contrato de texto enriquecido: hl-orange,
hl-white, hl-mark, hl-under, hl-big y p.lead.
========================================================== */
.cms-body { margin: 4px 0 0; }
.cms-body-item + .cms-body-item { margin-top: 28px; }
.cms-body-sub { position: relative; margin: 22px 0 14px; padding-left: 20px; font-size: 26px; line-height: 1.3; font-weight: 600; color: #fff; }
.cms-body-sub::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 4px; background: var(--theme-color1); }
.cms-body-item:first-child .cms-body-sub, .cms-body-main > .cms-body-sub:first-child:last-child { margin-top: 0; }
.cms-body-main > .cms-body-sub:last-child { margin-bottom: 0; }
/* texto con formato */
.cms-rich { color: rgba(255, 255, 255, .74); font-size: 17px; line-height: 1.8; font-weight: 400; letter-spacing: normal; }
.cms-rich p { color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: normal; margin: 0 0 1em; }
.cms-rich > :last-child, .cms-rich > .cms-f > :last-child { margin-bottom: 0; }
.cms-rich strong, .cms-rich b { color: #fff; font-weight: 700; }
.cms-rich em { font-style: italic; }
.cms-rich u { text-decoration: underline; text-decoration-color: var(--theme-color1); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cms-rich a { color: var(--theme-color1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.cms-rich a:hover, .cms-rich a:focus { color: #fff; }
.cms-rich h3, .cms-rich h4 { color: #fff; font-weight: 600; line-height: 1.3; margin: 1.5em 0 .55em; }
.cms-rich h3 { font-size: 24px; }
.cms-rich h4 { font-size: 20px; }
.cms-rich > h3:first-child, .cms-rich > h4:first-child { margin-top: 0; }
.cms-rich ul, .cms-rich ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.cms-rich ul, .cms-rich ul > li { list-style: disc outside; }
.cms-rich ol, .cms-rich ol > li { list-style: decimal outside; }
.cms-rich li { margin-bottom: .45em; padding-left: .2em; }
.cms-rich li::marker { color: var(--theme-color1); }
.cms-rich blockquote { margin: 1.4em 0; padding: 22px 28px; border-left: 3px solid var(--theme-color1); background: rgba(255, 255, 255, .04); border-radius: 0 20px 20px 0; color: #fff; font-family: var(--heading-font-family); font-size: 1.2em; line-height: 1.55; }
.cms-rich blockquote p:last-child { margin-bottom: 0; }
.cms-rich mark, .cms-rich .hl-mark { color: #fff; background: linear-gradient(180deg, transparent 56%, rgba(var(--theme-color1-rgb), .45) 56%, rgba(var(--theme-color1-rgb), .45) 94%, transparent 94%); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cms-rich .hl-orange { color: var(--theme-color1); }
.cms-rich .hl-white { color: #fff; font-weight: 600; }
.cms-rich .hl-under { text-decoration: underline; text-decoration-color: var(--theme-color1); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cms-rich .hl-big { font-size: 1.15em; }
.cms-rich p.lead, .cms-rich .lead { font-size: 1.2em; line-height: 1.65; font-weight: 400; color: rgba(255, 255, 255, .92); }
/* estilos por párrafo: entradilla, cita destacada y recuadro */
.cms-body-item.is-lead .cms-rich { font-size: 20px; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.cms-body-item.is-quote .cms-body-main,
.cms-rich.cms-quote { position: relative; overflow: hidden; margin: 0; padding: 30px 38px 30px 40px; border-left: 4px solid var(--theme-color1); border-radius: 0 28px 28px 0; background: linear-gradient(90deg, rgba(var(--theme-color1-rgb), .12), rgba(255, 255, 255, .02)); }
.cms-rich.cms-quote { margin: 28px 0; }
.cms-body-item.is-quote .cms-body-main::after,
.cms-rich.cms-quote::after { content: '\201C'; position: absolute; right: 22px; top: -14px; font-family: Georgia, 'Times New Roman', serif; font-size: 150px; line-height: 1; color: rgba(var(--theme-color1-rgb), .22); pointer-events: none; }
.cms-body-item.is-quote .cms-rich,
.cms-rich.cms-quote { font-family: var(--heading-font-family); font-size: 23px; line-height: 1.5; font-weight: 500; color: #fff; }
.cms-body-item.is-quote .cms-rich { position: relative; z-index: 1; }
.cms-body-item.is-quote .cms-body-sub { padding-left: 0; margin: 0 0 12px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-color1); }
.cms-body-item.is-quote .cms-body-sub::before { display: none; }
.cms-body-item.is-box .cms-body-main { padding: 34px 38px; border-radius: 30px; border: 1px solid rgba(var(--theme-color1-rgb), .45); background: linear-gradient(135deg, rgba(var(--theme-color1-rgb), .16), rgba(var(--theme-color1-rgb), .04) 60%, rgba(255, 255, 255, .02)); }
.cms-body-item.is-box .cms-body-sub { margin-top: 0; }
.cms-body-item.is-box .cms-rich { color: rgba(255, 255, 255, .88); }
/* imagen entre párrafos */
.cms-body-figure { margin: 30px 0 0; }
.cms-body-item > .cms-body-figure:first-child { margin-top: 0; }
.cms-body-figure img, .project-details__content .cms-body-figure img { display: block; width: 100%; height: auto; border-radius: 24px; }
.cms-body-figure.is-medium { max-width: 75%; margin-left: auto; margin-right: auto; }
.cms-body-figure.is-small { max-width: 50%; margin-left: auto; margin-right: auto; }
.cms-body-figure figcaption { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--theme-color1); font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
@media (max-width: 767px) {
.cms-rich { font-size: 16px; line-height: 1.75; }
.cms-body-sub { font-size: 22px; padding-left: 16px; }
.cms-body-item.is-lead .cms-rich { font-size: 18px; }
.cms-body-item.is-quote .cms-body-main, .cms-rich.cms-quote { padding: 24px 22px 24px 24px; border-radius: 0 22px 22px 0; }
.cms-body-item.is-quote .cms-rich, .cms-rich.cms-quote { font-size: 19px; }
.cms-body-item.is-box .cms-body-main { padding: 26px 22px; border-radius: 24px; }
.cms-body-figure.is-medium, .cms-body-figure.is-small { max-width: 100%; }
.cms-body-figure img { border-radius: 18px; }
}
/* [B2] Filtro de la rejilla de artículos (Insights · news/grid) */
.cms-news-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 50px; }
.cms-news-filters button { border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; padding: 11px 24px; border-radius: 40px; font-size: 15px; line-height: 1.4; cursor: pointer; transition: all .25s; }
.cms-news-filters button:hover { border-color: var(--theme-color1); }
.cms-news-filters button.is-active { background: var(--theme-color1); border-color: var(--theme-color1); color: #fff; }
.cms-news-filters button:focus-visible { outline: 2px solid var(--theme-color1); outline-offset: 3px; }
.cms-news-col.is-hidden { display: none !important; }
/* ==========================================================
B3 · Imagen bajo el título de las secciones propias, imagen de los grupos
de servicios, galerías de vídeo del portfolio y vídeos en ventana (Fancybox)
========================================================== */
/* imagen opcional entre el título y el texto (heading_image / heading_image_ratio) */
.cms-heading-media { display: block; margin: 34px 0 0; border-radius: 30px; overflow: hidden; background: rgba(255, 255, 255, .04); }
.cms-heading-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-heading-media.is-wide { aspect-ratio: 21 / 9; }
.cms-heading-media.is-landscape { aspect-ratio: 16 / 9; }
.cms-heading-media.is-natural { aspect-ratio: auto; background: transparent; }
.cms-heading-media.is-natural img { height: auto; }
.cms-heading .sub-title + .cms-heading-media { margin-top: 20px; }
.cms-heading.has-media .cms-heading-text { margin-top: 28px; }
/* panel CTA: la imagen va entre el título y el texto */
.cms-cta-box .cms-cta-media { margin: 6px 0 30px; }
.cms-cta-box.text-center .cms-cta-media { max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 767.98px) {
.cms-heading-media { margin-top: 24px; border-radius: 20px; }
.cms-heading-media.is-wide { aspect-ratio: 16 / 9; } /* 21:9 queda demasiado baja en el móvil */
.cms-heading.has-media .cms-heading-text { margin-top: 22px; }
}
/* grupos de servicios: imagen 16:9 opcional entre el título y el texto de la tarjeta */
.cms-sg-media { display: block; margin: 0 0 22px; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .04); flex: 0 0 auto; }
.cms-sg-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cms-sg-card:hover .cms-sg-media img { transform: scale(1.03); }
.cms-sg-card.is-orange .cms-sg-media { background: rgba(0, 0, 0, .14); }
@media (max-width: 767.98px) { .cms-sg-media { border-radius: 18px; margin-bottom: 18px; } }
/* portfolio / galería de vídeo: forma de las miniaturas y tarjeta de vídeo sin imagen */
.cms-pf-grid.is-r-16x9 .cms-pf-image { aspect-ratio: 16 / 9; }
.cms-pf-grid.is-r-3x2 .cms-pf-image { aspect-ratio: 3 / 2; }
.cms-pf-grid.is-r-1x1 .cms-pf-image { aspect-ratio: 1 / 1; }
.cms-pf-image.is-empty { background: radial-gradient(circle at 30% 20%, rgba(var(--theme-color1-rgb), .22), transparent 60%), #1c1c1c; }
.cms-pf-play i { transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 0 0 10px rgba(var(--theme-color1-rgb), .22); }
a.cms-pf-card:hover .cms-pf-play i { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(var(--theme-color1-rgb), .18); }
.cms-pf-card:focus-visible, .cms-b-video-play:focus-visible { outline: 2px solid var(--theme-color1); outline-offset: 4px; }
/* vídeos en ventana: el reproductor toma la proporción real del vídeo y cabe en la ventana
(tamaño calculado en cms-sections.js; sin franjas negras por un marco de otra proporción) */
.fancybox-slide--video .fancybox-content.cms-fb-video { padding: 0; max-width: none; max-height: none; overflow: hidden; background: #000; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.fancybox-slide--video .fancybox-content.cms-fb-video.is-reshaping { transition: width .25s ease, height .25s ease, margin .25s ease; }
.fancybox-slide--video .fancybox-content.cms-fb-video .fancybox-iframe { display: block; width: 100%; height: 100%; background: #000; }
@media (max-width: 575.98px) { .fancybox-slide--video .fancybox-content.cms-fb-video { border-radius: 6px; } }
@media (prefers-reduced-motion: reduce) {
.fancybox-slide--video .fancybox-content.cms-fb-video.is-reshaping, .cms-sg-media img, .cms-pf-play i { transition: none; }
}
/* [B2] Texto largo · ajuste: un elemento que sólo lleva subtítulo se separa del párrafo
anterior y queda pegado al párrafo siguiente (como un subtítulo normal) */
.cms-body-item:not(:first-child) > .cms-body-main > .cms-body-sub:only-child { margin-top: 22px; }
.cms-body-item:has(> .cms-body-main > .cms-body-sub:only-child):not(:has(> .cms-body-figure)) + .cms-body-item { margin-top: 14px; }
/* ==========================================================
B1 · TEXTO ENRIQUECIDO (campos «con formato», salida de $s->h())
Clases permitidas por cms_sanitize_html() (cms_rich_class_tokens()):
hl-orange texto en el naranja de la web
hl-white texto en blanco, seminegrita
hl-mark rotulador: franja naranja translúcida bajo el texto
hl-under subrayado naranja separado del texto
hl-big texto un 15 % más grande
lead (en ) entradilla: párrafo más grande y más claro
Se pueden combinar: .
Envoltorio genérico para cualquier plantilla: .cms-rich (sólo da estilo a
su contenido; no cambia el color ni el tamaño del propio envoltorio).
========================================================== */
/* --- marcas de resaltado: nombres únicos, válidas en cualquier contenedor --- */
.hl-orange { color: var(--theme-color1) !important; }
.hl-white { color: #fff !important; font-weight: 600; }
.hl-mark {
color: #fff !important;
background-image: linear-gradient(180deg, transparent 57%, rgba(var(--theme-color1-rgb), .45) 57%, rgba(var(--theme-color1-rgb), .45) 93%, transparent 93%);
background-repeat: no-repeat;
padding: 0 .12em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.hl-under {
text-decoration-line: underline;
text-decoration-color: var(--theme-color1);
text-decoration-thickness: 2px;
text-underline-offset: .24em;
text-decoration-skip-ink: auto;
}
.hl-big { font-size: 1.15em; }
span.hl-big, strong.hl-big, em.hl-big, u.hl-big, mark.hl-big { line-height: 1.25; }
/* lo que va dentro de una marca de color toma su color (negrita naranja, cursiva blanca…) */
.hl-orange strong, .hl-orange b, .hl-orange em, .hl-orange i, .hl-orange u, .hl-orange a,
.hl-white strong, .hl-white b, .hl-white em, .hl-white i, .hl-white u,
.hl-mark strong, .hl-mark b, .hl-mark em, .hl-mark i, .hl-mark u { color: inherit; }
/* sobre fondo naranja, el naranja pasa a casi negro */
.is-orange .hl-orange, .is-panel .hl-orange, .bg-theme-color1 .hl-orange { color: #151515 !important; }
.is-orange .hl-mark, .is-panel .hl-mark, .bg-theme-color1 .hl-mark {
background-image: linear-gradient(180deg, transparent 57%, rgba(0, 0, 0, .22) 57%, rgba(0, 0, 0, .22) 93%, transparent 93%);
}
.is-orange .hl-under, .is-panel .hl-under, .bg-theme-color1 .hl-under,
.is-orange .cms-rich u, .is-orange .cms-b-text u { text-decoration-color: #151515; }
/* --- formato en línea dentro de los contenedores de texto con formato --- */
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .cms-b-quote, .blog-details__content, .services-details__content, .service-details, .project-details__content, .project-details) :is(strong, b) {
color: #fff;
font-weight: 700;
}
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .cms-b-quote, .blog-details__content, .services-details__content, .service-details, .project-details__content, .project-details) :is(em, i):not([class*="fa-"]):not([class*="flaticon"]):not([class*="icon"]) {
font-style: italic;
}
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .cms-b-quote, .blog-details__content, .services-details__content, .service-details, .project-details__content, .project-details) u {
text-decoration-line: underline;
text-decoration-color: var(--theme-color1);
text-decoration-thickness: 2px;
text-underline-offset: .22em;
}
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .cms-b-quote, .blog-details__content, .services-details__content, .service-details, .project-details__content, .project-details) mark {
color: #fff;
background-color: transparent;
background-image: linear-gradient(180deg, transparent 57%, rgba(var(--theme-color1-rgb), .4) 57%, rgba(var(--theme-color1-rgb), .4) 93%, transparent 93%);
padding: 0 .12em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* (tras las reglas anteriores: una negrita dentro de una marca de color conserva ese color) */
.hl-orange :is(strong, b), .hl-mark :is(strong, b) { color: inherit; }
.cms-rich a:not(.theme-btn):not(.btn), .cms-b-iconbox-text a {
color: var(--theme-color1);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.cms-rich a:not(.theme-btn):not(.btn):hover, .cms-rich a:not(.theme-btn):not(.btn):focus { color: #fff; }
/* --- bloques (párrafos, subtítulos, listas, citas) --- */
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) p {
color: inherit;
font-size: inherit;
line-height: inherit;
margin: 0 0 1em;
}
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) > :last-child,
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) > .cms-f > :last-child { margin-bottom: 0; }
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .blog-details__content, .services-details__content, .project-details__content) p.lead {
font-size: 1.2em;
line-height: 1.7;
font-weight: 400;
color: rgba(255, 255, 255, .9);
margin-bottom: 1.2em;
}
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h2,
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h3,
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h4,
:is(.blog-details__content, .services-details__content, .project-details__content) > :is(h3, h4):not([class]),
:is(.blog-details__content, .services-details__content, .project-details__content) .cms-f > :is(h3, h4):not([class]) {
color: #fff;
font-family: var(--heading-font-family);
line-height: 1.3;
margin: 1.7em 0 .6em;
}
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h2 { font-size: 32px; font-weight: 500; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h3,
:is(.blog-details__content, .services-details__content, .project-details__content) > h3:not([class]) { font-size: 26px; font-weight: 500; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h4,
:is(.blog-details__content, .services-details__content, .project-details__content) > h4:not([class]) { font-size: 20px; font-weight: 600; }
/* subtítulo: pequeña barra naranja encima */
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h3::before {
content: "";
display: block;
width: 38px;
height: 3px;
margin-bottom: 14px;
border-radius: 3px;
background: var(--theme-color1);
}
.is-orange :is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h3::before { background: #151515; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) > :is(h2, h3, h4):first-child,
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) > .cms-f > :is(h2, h3, h4):first-child { margin-top: 0; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.3em; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) ul,
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) ul > li { list-style: disc outside; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) ol,
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) ol > li { list-style: decimal outside; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) li { margin-bottom: .45em; padding-left: .2em; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) li::marker { color: var(--theme-color1); }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) blockquote {
margin: 1.6em 0;
padding: 24px 28px;
border-left: 3px solid var(--theme-color1);
border-radius: 0 20px 20px 0;
background: rgba(255, 255, 255, .04);
color: #fff;
font-size: 1.15em;
line-height: 1.6;
font-style: normal;
}
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) blockquote > :last-child { margin-bottom: 0; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) small { font-size: .85em; }
@media (max-width: 767.98px) {
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h2 { font-size: 26px; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h3,
:is(.blog-details__content, .services-details__content, .project-details__content) > h3:not([class]) { font-size: 22px; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) h4 { font-size: 19px; }
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .blog-details__content, .services-details__content, .project-details__content) p.lead { font-size: 1.1em; }
:is(.cms-rich, .cms-b-text, .cms-b-iconbox-text) blockquote { padding: 18px 20px; font-size: 1.08em; }
}
/* B1 · texto enriquecido: los iconos () nunca van en cursiva; el de un campo con formato
no lleva clases (el saneador las quita), así que esto sólo afecta a iconos de la plantilla */
:is(.cms-rich, .cms-rt-body, .cms-b-text, .cms-b-iconbox-text, .cms-b-quote, .blog-details__content, .services-details__content, .service-details, .project-details__content, .project-details) i[class]:not(#cms-rich-none) { font-style: normal; }
/* ==========================================================
INTEGRACIÓN · cita destacada: el texto no pasa por debajo de las comillas
decorativas de la esquina (línea larga en escritorio, p. ej. Dreams Theater)
========================================================== */
@media (min-width: 768px) {
.cms-body-item.is-quote .cms-body-main,
.cms-rich.cms-quote { padding-right: 104px; }
}
/* ---------- Fondo de sección (imagen editable) ---------- */
.cms-has-bg { position: relative; isolation: isolate; overflow: hidden; }
.cms-has-bg > .container, .cms-has-bg > .auto-container { position: relative; z-index: 2; }
.cms-sec-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cms-sec-bg-img { position: absolute; inset: -12% 0; display: block; background-size: cover; background-repeat: no-repeat;
background-position: center; will-change: transform; }
.cms-sec-bg-img.is-top { background-position: center top; }
.cms-sec-bg-img.is-bottom { background-position: center bottom; }
/* velo para que el texto se lea: degradado desde el fondo del sitio hacia el centro */
.cms-sec-bg::after { content: ''; position: absolute; inset: 0;
background:
radial-gradient(120% 80% at 50% 0%, rgba(var(--theme-color1-rgb), .10), transparent 60%),
linear-gradient(180deg, var(--body-bg, #0D0D0D) 0%, rgba(13, 13, 13, .72) 18%, rgba(13, 13, 13, .72) 82%, var(--body-bg, #0D0D0D) 100%);
}
.cms-sec-bg.is-none::after { background: none; }
.cms-sec-bg.is-soft::after { background: linear-gradient(180deg, var(--body-bg, #0D0D0D) 0%, rgba(13, 13, 13, .45) 20%, rgba(13, 13, 13, .45) 80%, var(--body-bg, #0D0D0D) 100%); }
.cms-sec-bg.is-strong::after { background:
radial-gradient(120% 80% at 50% 0%, rgba(var(--theme-color1-rgb), .12), transparent 55%),
linear-gradient(180deg, var(--body-bg, #0D0D0D) 0%, rgba(13, 13, 13, .88) 16%, rgba(13, 13, 13, .88) 84%, var(--body-bg, #0D0D0D) 100%); }
.cms-sec-bg[data-bg-effect="zoom"] .cms-sec-bg-img { transform: scale(1.06); transition: transform 12s linear; }
.cms-sec-bg[data-bg-effect="zoom"].is-in .cms-sec-bg-img { transform: scale(1.16); }
/* ---------- Animación de entrada (revelado al hacer scroll) ---------- */
.cms-anim.is-anim-ready [data-cms-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); }
.cms-anim.is-anim-ready .cms-tl-item.is-left[data-cms-reveal] { transform: translate3d(-28px, 18px, 0); }
.cms-anim.is-anim-ready .cms-tl-item.is-right[data-cms-reveal] { transform: translate3d(28px, 18px, 0); }
.cms-anim.is-anim-ready [data-cms-reveal].is-in {
opacity: 1; transform: none;
transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
transition-delay: var(--cms-reveal-delay, 0s);
}
/* la línea de tiempo se dibuja de arriba abajo mientras se baja */
.cms-tl-progress { position: absolute; top: 0; left: 50%; width: 2px; transform: translateX(-50%);
height: var(--cms-tl-progress, 0%); z-index: 0;
background: linear-gradient(180deg, rgba(var(--theme-color1-rgb), .25), var(--theme-color1));
box-shadow: 0 0 18px 2px rgba(var(--theme-color1-rgb), .35); transition: height .15s linear; }
.cms-anim .cms-tl::before { opacity: .35; }
.cms-tl-item[data-cms-reveal] .cms-tl-dot { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .12s, box-shadow .5s ease .12s; transform: scale(.7); }
.cms-anim.is-anim-ready .cms-tl-item[data-cms-reveal].is-in .cms-tl-dot { transform: scale(1); box-shadow: 0 0 0 6px rgba(var(--theme-color1-rgb), .10); }
@media (max-width: 991.98px) {
.cms-tl-progress { left: 26px; }
.cms-anim.is-anim-ready .cms-tl-item.is-left[data-cms-reveal],
.cms-anim.is-anim-ready .cms-tl-item.is-right[data-cms-reveal] { transform: translate3d(0, 24px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.cms-anim.is-anim-ready [data-cms-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.cms-tl-progress { transition: none; }
.cms-sec-bg[data-bg-effect] .cms-sec-bg-img { transition: none; transform: none !important; }
}
/* en el editor visual todo se ve siempre */
html.cms-editing .cms-anim [data-cms-reveal] { opacity: 1 !important; transform: none !important; }
/* ------------------------------------------------------------------
Cabecera de los casos de éxito (project-details/details)
La plantilla original fija una banda de 600 px con la imagen a lo ancho,
así que una foto grande se recortaba por abajo y un logo o una captura
salían diminutos entre franjas. Ahora el encaje se elige por sección:
«Llena el ancho» (fotos), «Se ve entera» (logos y capturas) o
«Altura real» (la imagen manda, sin recortar ni dejar franjas).
------------------------------------------------------------------ */
.project-details__img { background: #161616; }
.project-details__img img { display: block; width: 100%; height: 100%; border-radius: 10px; }
.project-details__img.is-fit-cover img { object-fit: cover; object-position: center center; }
.project-details__img.is-fit-contain { display: flex; align-items: center; justify-content: center; padding: 24px; }
.project-details__img.is-fit-contain img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
/* Altura real: la banda desaparece y manda la proporción de la imagen */
.project-details__img.is-fit-natural { height: auto; background: transparent; }
.project-details__img.is-fit-natural img { height: auto; }
.project-details__img.is-h-tall { height: 760px; }
.project-details__img.is-h-short { height: 420px; }
@media (max-width: 991.98px) {
.project-details__img.is-h-tall { height: 560px; }
.project-details__img.is-h-short { height: 380px; }
.project-details__img.is-fit-contain { padding: 18px; }
}
@media (max-width: 767.98px) {
.project-details__img.is-h-tall { height: 420px; }
.project-details__img.is-h-short { height: 280px; }
}
@media (max-width: 575.98px) {
.project-details__img.is-h-tall { height: 300px; }
.project-details__img.is-h-short { height: 220px; }
.project-details__img.is-fit-contain { padding: 12px; }
}
/* ------------------------------------------------------------------
Galería de los casos de éxito: flechas y puntos
Sin ellos sólo se veían dos imágenes y no había manera de saber que
había más: el carrusel sólo respondía arrastrando, sin ninguna pista.
------------------------------------------------------------------ */
.project-image-slider { position: relative; }
.project-image-slider .image { aspect-ratio: 16/10; background: #161616; border-radius: 10px; overflow: hidden; }
.project-image-slider .image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-gal-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.cms-gal-prev, .cms-gal-next {
width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.cms-gal-prev:hover, .cms-gal-next:hover { background: var(--theme-color1); border-color: var(--theme-color1); color: var(--theme-color1-text-color, #fff); }
.cms-gal-prev:focus-visible, .cms-gal-next:focus-visible { outline: 2px solid var(--theme-color1); outline-offset: 3px; }
.cms-gal-prev.swiper-button-disabled, .cms-gal-next.swiper-button-disabled { opacity: .35; cursor: default; }
.cms-gal-dots { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; }
.cms-gal-dots .swiper-pagination-bullet {
width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .28); opacity: 1;
margin: 0; cursor: pointer; transition: background .25s ease, width .25s ease;
}
.cms-gal-dots .swiper-pagination-bullet-active { background: var(--theme-color1); width: 22px; border-radius: 4px; }
.swiper.project-image-slider.swiper-lock + .cms-gal-nav, .project-image-slider .cms-gal-nav:empty { display: none; }
@media (max-width: 575.98px) {
.cms-gal-prev, .cms-gal-next { width: 36px; height: 36px; }
.cms-gal-nav { gap: 12px; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cms-gal-prev, .cms-gal-next, .cms-gal-dots .swiper-pagination-bullet { transition: none; } }