/*
Theme Name: Prowess Child
Theme URI: https://colen.es
Description: A child theme of Prowess Theme
Author: Select Themes
Author URI: https://themeforest.net/user/select-themes
Version: 1.0.1
Text Domain: prowess
Template: prowess
*/

/* ==========================================================================
   Color de texto accesible
   El tema pinta todo el texto de contenido en #9C9C9C, que sobre blanco da
   2,8:1 de contraste: por debajo del 4,5:1 que pide la WCAG 2.1 AA y dificil
   de leer en las secciones claras. Primero se subio a #1c1c1c (5:1) y el
   13/10 a #1c1c1c (7,9:1 sobre blanco, 7,4:1 sobre #F8F7F8): con Acumin en
   peso ligero el 6B seguia costando de leer (FAQs sobre fondo claro).
   Sobre fondo oscuro el gris claro si contrasta, asi que ahi se mantiene un
   tono claro en lugar de heredar el nuevo.
   ========================================================================== */
/* "html body" y no "body" a secas: la hoja del tema hijo se encola antes que
   modules.css, asi que con la misma especificidad ganaria el tema. */
html body {
    color: #1c1c1c;
}

/* El dorado de marca sobre blanco da 2,3:1, asi que los enlaces dentro del
   texto usan una version oscurecida del mismo tono (5,2:1 sobre blanco y
   4,9:1 sobre el gris claro). El color va en una variable para que cada
   bloque declare su contexto una sola vez y lo hereden todos sus enlaces. */
:root {
    --colen-enlace: #7F6B24;
    --colen-enlace-hover: #1c1c1c;
}

/* Bloques de fondo oscuro: ahi el dorado de marca contrasta de sobra */
.colen-sec-oscuro,
.colen-hero,
.colen-cta-banda,
.lp-hero,
.lp-social,
.lp-faq,
.lp-pie,
.lp-video {
    --colen-enlace: #C1AA63;
    --colen-enlace-hover: #ffffff;
}

/* Bloques con el dorado de fondo: el enlace va en oscuro */
.lp-reserva,
.lp-cta,
.lp-acc-b {
    --colen-enlace: #1c1c1c;
    --colen-enlace-hover: #ffffff;
}

.qodef-content p a,
.qodef-content li a,
.qodef-content .elementor-widget-text-editor a,
.qodef-accordion-holder .qodef-accordion-content a,
.colen-checks li a,
.colen-clases-mas a,
.colen-formatos a {
    color: var(--colen-enlace);
}

.qodef-content p a:hover,
.qodef-content li a:hover,
.qodef-content .elementor-widget-text-editor a:hover,
.qodef-accordion-holder .qodef-accordion-content a:hover,
.colen-checks li a:hover,
.colen-clases-mas a:hover,
.colen-formatos a:hover {
    color: var(--colen-enlace-hover);
}

/* Pie de la landing de iniciacion: #7A7A7A sobre #141414 da 4,3:1 */
html .lp-pie-links,
html .lp-pie-legal {
    color: #B3B3B3;
}

/* Antetitulos dorados: toman el dorado que corresponda a su contexto */
html .lp-eyebrow {
    color: var(--colen-enlace);
}

/* Letra pequena de apoyo (notas, condiciones): #7A7A7A da 4,3:1 */
html .qodef-content small,
html .colen-nota,
html .lp-nota {
    color: #1c1c1c;
}

/* El tema pinta el texto de los widgets de texto en #7A7A7A (4,3:1). En las
   secciones oscuras manda la regla del sistema, que es mas especifica. */
html .elementor-widget-text-editor,
html .elementor-widget-text-editor p {
    color: #1c1c1c;
}

/* Utilidad para bloques con fondo oscuro propio que no usan el sistema de
   secciones: solo cambia los colores, no el espaciado ni el fondo. */
html .colen-texto-claro,
html .colen-texto-claro p,
html .colen-texto-claro li,
html .colen-texto-claro .qodef-st-text,
html .colen-texto-claro .elementor-widget-text-editor,
html .colen-texto-claro .elementor-widget-text-editor p {
    color: #B3B3B3 !important;
}

html .colen-texto-claro h1,
html .colen-texto-claro h2,
html .colen-texto-claro h3,
html .colen-texto-claro h4,
html .colen-texto-claro .qodef-st-title {
    color: #ffffff;
}

.colen-texto-claro {
    --colen-enlace: #C1AA63;
    --colen-enlace-hover: #ffffff;
}

.qodef-page-footer,
.qodef-side-menu,
.qodef-fullscreen-search-holder,
.qodef-shopping-cart-dropdown {
    color: #B3B3B3;
}

/* Botones con fondo dorado: texto en BLANCO (decisión del 25/09, por
   visibilidad). Ojo: blanco sobre #C1AA63 da 2,3:1, por debajo de WCAG AA. */
html .wpcf7-form input[type="submit"],
html .qodef-fullscreen-search-holder .qodef-btn .qodef-btn-text,
html .qodef-btn.qodef-btn-solid,
html .qodef-btn.qodef-btn-solid .qodef-btn-text,
html .qodef-btn.qodef-btn-solid .qodef-btn-text-inner,
html .qodef-btn.qodef-btn-solid .qodef-btn-icon-elem {
    color: #fff !important;
}

/* Al pasar el ratón el texto vuelve al negro de antes */
html .qodef-btn.qodef-btn-solid:not(.qodef-btn-custom-hover-color):hover,
html .qodef-btn.qodef-btn-solid:hover .qodef-btn-text,
html .qodef-btn.qodef-btn-solid:hover .qodef-btn-text-inner,
html .qodef-btn.qodef-btn-solid:hover .qodef-btn-icon-elem,
html .wpcf7-form input[type="submit"]:hover,
html .wpcf7-form input[type="submit"]:focus,
html .qodef-fullscreen-search-holder .qodef-btn:hover .qodef-btn-text,
.colen-cta-movil .cta-p:hover,
.colen-cta-movil .cta-p:focus {
    color: #1c1c1c !important;
}

/* Las tarjetas de clase alternan fondo oscuro y fondo dorado (nth-child 4n+2
   y 4n+3 del tema); sobre el dorado el texto iba en blanco. */
html .qodef-event-list-holder .qodef-event-list-item-holder:nth-child(4n+2) *,
html .qodef-event-list-holder .qodef-event-list-item-holder:nth-child(4n+3) * {
    color: #1c1c1c !important;
}

/* Los subtitulos de seccion van en #808080: a 19 px y peso 300 no cuentan
   como texto grande, asi que 3,9:1 no basta. En el sitio solo aparecen sobre
   fondo claro; sobre oscuro el tema ya usa blanco o dorado. */
html .qodef-st-text,
html .qodef-il-text {
    color: #1c1c1c !important;
}

/* Los textos secundarios del tema (fechas y autor del blog, extractos,
   widgets, ficha de producto) llevan el gris flojo escrito a mano. */
.qodef-blog-holder article .qodef-post-info-section,
.qodef-blog-holder article .qodef-post-info-section a,
.qodef-blog-holder article .qodef-post-excerpt,
.qodef-post-info-date a,
.qodef-post-info-author a,
.qodef-post-info-category a,
.qodef-post-info-comments a,
.widget .qodef-widget-title-holder ~ *,
.qodef-sidebar .widget,
.woocommerce .price del,
.woocommerce .product_meta {
    color: #1c1c1c;
}

/* En el pie y el menu lateral esos mismos textos van sobre oscuro. El tema
   los pinta en #717274, que sobre el #1c1c1c del pie da 3,2:1. */
/* El "html" delante sube la especificidad: el tema declara estos mismos
   selectores y su hoja se carga despues que la del hijo. */
html .qodef-page-footer p,
html .qodef-page-footer li,
html .qodef-page-footer a,
html .qodef-page-footer .widget,
html .qodef-page-footer .widget a,
html footer .widget ul li a,
html .qodef-side-menu .widget,
html .qodef-side-menu .widget a {
    color: #B3B3B3;
}

html .qodef-page-footer a:hover,
html .qodef-page-footer a:focus,
html .qodef-page-footer .widget a:hover,
html footer .widget ul li a:hover,
html .qodef-side-menu .widget a:hover {
    color: #C1AA63;
}

/* ==========================================================================
   Cabecera de pagina (title area)
   El tema no define background-size, asi que la imagen se pintaba a su tamano
   natural (1400 px) y dejaba franjas laterales en pantallas grandes.
   Se fuerza "cover" y se anade un desenfoque + velo oscuro para que la foto
   no compita con el titulo.
   ========================================================================== */
.qodef-title-holder[style*="background-image"] {
    overflow: hidden;
    background-size: cover !important;
    background-position: center center !important;
}

/* Sin desenfoque: la foto se ve nitida. La legibilidad del titulo la da un
   degradado oscuro desde la izquierda, no un velo sobre toda la imagen. */
.qodef-title-holder[style*="background-image"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(90deg, rgba(18, 18, 18, .82) 0%, rgba(18, 18, 18, .55) 38%, rgba(18, 18, 18, .18) 70%, rgba(18, 18, 18, .10) 100%);
    z-index: 1;
    pointer-events: none;
}

.qodef-title-holder[style*="background-image"] > .qodef-title-wrapper {
    position: relative;
    z-index: 2;
}

/* Con la franja a la mitad de alto el menu se superpone sobre buena parte de
   ella, asi que el titulo se alinea abajo y no choca con el logo ni con el
   menu. El tema lo centra en toda la altura (table-cell / middle). */
.qodef-title-holder .qodef-title-inner,
.qodef-title-holder.qodef-title-va-window-top .qodef-title-inner {
    vertical-align: bottom !important;
    padding-bottom: 22px;
}

/* En movil la cabecera del tema no se superpone a la franja, asi que la altura
   util es la que marca el filtro (74 px) y se queda demasiado corta: se le da
   un minimo propio, tambien la mitad de lo que tenia (240 px). */
@media (max-width: 1024px) {
    .qodef-title-holder {
        height: auto !important;
        min-height: 120px;
    }
}

/* Cabecera baja: un tercio de la altura original */
.qodef-title-holder .qodef-page-title {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: .02em;
}

@media (max-width: 1024px) {
    .qodef-title-holder .qodef-page-title {
        font-size: 26px;
    }
}

@media (max-width: 680px) {
    .qodef-title-holder .qodef-page-title {
        font-size: 21px;
    }
}

/* La imagen tambien se sirve como <img> en el modo responsive del tema. */
.qodef-title-holder.qodef-bg-responsive .qodef-title-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Formulario principal de Colen (CF7 form 7)
   Antes vivia en el CSS de la home; al usarse en todas las landings de clase
   pasa al tema hijo para que se mantenga en un solo sitio.
   ========================================================================== */
.colen-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.colen-form-grid p {
    width: 100%;
    margin: 0;
}

.colen-fecha-hora {
    margin-bottom: 20px;
}

.colen-fecha-hora input[type="date"],
.colen-fecha-hora select {
    width: 100%;
    box-sizing: border-box;
}

.colen-form-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    margin-bottom: 35px;
}

.colen-form-submit input[type="submit"] {
    width: auto;
    margin: 0;
}

@media (max-width: 767px) {
    .colen-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================================================
   Horario semanal de Colen ([colen_horario])
   Estilo global: el mismo widget se usa en la home, en /clases/ y en cada
   landing de clase, asi que un cambio aqui se propaga a toda la web.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.colen-horario-wrap{width:100%}
.colen-horario-wrap .ch{display:block;padding:9px 6px;margin:0 0 1px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.25;text-transform:uppercase;text-decoration:none;border-radius:0;transition:filter .18s ease}
.colen-horario-wrap .ch:last-child{margin-bottom:0}
.colen-horario-wrap .ch:hover,.colen-horario-wrap .ch:focus{filter:brightness(.88);text-decoration:none}
.colen-horario-wrap .ch-t{display:block}

table.colen-horario{width:100%;border-collapse:separate;border-spacing:1px;margin:0;background:transparent;table-layout:fixed}
table.colen-horario th,table.colen-horario td{border:0;padding:0;vertical-align:top}
table.colen-horario thead th{background:#1c1c1c;color:#fff;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:14px 4px}
table.colen-horario thead th.h-hora{background:#1c1c1c}
table.colen-horario tbody th.h-hora{background:#F2EFE7;color:#1c1c1c;font-size:13px;font-weight:700;text-align:center;padding:14px 6px;white-space:nowrap;width:118px}
table.colen-horario tbody td{background:#FBFAF8;padding:1px;text-align:center}
/* Las clases llenan siempre la celda: una sola ocupa todo el alto y, si
   coinciden varias, se reparten el alto a partes iguales (height:1px en la
   celda permite que el 100 % del hijo se resuelva contra la fila) */
table.colen-horario tbody td{height:1px}
table.colen-horario tbody td > .ch{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:32px}
table.colen-horario tbody td > .ch:only-child{height:100%}
table.colen-horario tbody td > .ch:first-child:nth-last-child(2),table.colen-horario tbody td > .ch:first-child:nth-last-child(2) ~ .ch{height:calc(50% - .5px)}
table.colen-horario tbody td > .ch:first-child:nth-last-child(3),table.colen-horario tbody td > .ch:first-child:nth-last-child(3) ~ .ch{height:calc(33.333% - .67px)}
table.colen-horario tbody tr:hover th.h-hora{background:#E6DFCB}

.colen-horario-movil{display:none}
.colen-horario-movil .chm-dia{margin:0 0 1px;border:0;border-radius:0;overflow:hidden;background:#fff}
.colen-horario-movil .chm-dia-t{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;background:#1c1c1c;color:#fff;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;list-style:none}
.colen-horario-movil .chm-dia-t::-webkit-details-marker{display:none}
.colen-horario-movil .chm-dia-t::after{content:"+";font-size:19px;font-weight:400;line-height:1;margin-left:12px}
.colen-horario-movil .chm-dia[open] .chm-dia-t{background:#C1AA63;color:#1c1c1c}
.colen-horario-movil .chm-dia[open] .chm-dia-t::after{content:"\2013"}
.colen-horario-movil .chm-lista{list-style:none;margin:0;padding:0}
.colen-horario-movil .chm-lista li{display:flex;align-items:flex-start;gap:10px;margin:0 0 1px;padding:8px 12px;border-top:0;background:#FBFAF8;list-style:none}
.colen-horario-movil .chm-hora{flex:0 0 96px;padding-top:8px;font-size:13px;font-weight:700;color:#1c1c1c;white-space:nowrap}
.colen-horario-movil .chm-clases{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:1px;min-width:0}
.colen-horario-movil .chm-clases .ch{flex:1 1 auto;margin:0;padding:9px 10px;font-size:12px;text-align:center}

ul.colen-horario-leyenda{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;list-style:none;margin:24px 0 0;padding:0}
ul.colen-horario-leyenda li{margin:0;padding:0;list-style:none}
ul.colen-horario-leyenda .ch{display:inline-block;margin:0;padding:8px 15px;cursor:default;pointer-events:none}
.colen-horario-nota{margin:18px 0 0;font-size:14px;line-height:1.7;color:#1c1c1c;text-align:center}

@media (max-width:1100px){
  table.colen-horario thead th{font-size:12px;letter-spacing:.08em;padding:12px 3px}
  table.colen-horario tbody th.h-hora{width:96px;font-size:12px;padding:12px 4px}
  table.colen-horario .ch{font-size:12px;padding:8px 3px;letter-spacing:.03em}
}
@media (max-width:860px){
  table.colen-horario{display:none}
  .colen-horario-movil{display:block}
  ul.colen-horario-leyenda{margin-top:20px}
  ul.colen-horario-leyenda .ch{padding:7px 12px;font-size:12px}
}
@media (max-width:420px){
  .colen-horario-movil .chm-hora{flex:0 0 84px;font-size:12px}
  .colen-horario-movil .chm-lista li{padding:8px 10px;gap:8px}
  .colen-horario-movil .chm-clases .ch{font-size:12px;padding:9px 6px;letter-spacing:.02em}
}

/* ==========================================================================
   Cabecera propia (bloque hero) — sustituye a la title area del tema
   La foto va a su proporcion real: ancho completo y alto automatico, asi que
   nunca se recorta. El titulo se superpone sobre un degradado desde abajo y
   en movil baja debajo de la imagen, donde hay sitio para leerlo.
   ========================================================================== */
.colen-hero {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    background-color: #1c1c1c;
    /* El contenido de la pagina va en rejilla; el hero se sale a todo el ancho.
       Elementor aplica los margenes del contenedor con propiedades logicas, asi
       que hay que sobrescribir esas y no margin-left / margin-right. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline-start: calc(50% - 50vw) !important;
    margin-inline-end: calc(50% - 50vw) !important;
}

.colen-hero .elementor-widget-image,
.colen-hero .colen-hero-img {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    line-height: 0;
}

.colen-hero .colen-hero-img img {
    display: block;
    width: 100%;
    height: auto;
}

.colen-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 35%, rgba(18, 18, 18, .35) 68%, rgba(18, 18, 18, .82) 100%);
    z-index: 1;
    pointer-events: none;
}

.colen-hero .colen-hero-titulo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0 !important;
    padding: 0 52px 34px !important;
}

.colen-hero .colen-hero-titulo h1 {
    margin: 0;
    color: #fff;
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: .02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

@media (max-width: 1024px) {
    .colen-hero .colen-hero-titulo h1 {
        font-size: 28px;
    }
}

/* En movil la banda es demasiado baja para superponer texto: el titulo pasa
   a una franja oscura justo debajo de la foto. */
@media (max-width: 767px) {
    .colen-hero::after {
        display: none;
    }

    .colen-hero .colen-hero-titulo {
        position: static;
        background-color: #1c1c1c;
        padding: 26px 22px 30px !important;
    }

    .colen-hero .colen-hero-titulo h1 {
        font-size: 24px;
        text-shadow: none;
    }
}

/* ==========================================================================
   Info Box con imagen (bloques de clase de la home)
   El tema ancla la foto arriba a la izquierda (background-position 0 0) y deja
   que la altura de la tarjeta la marque el largo del texto, asi que las fotos
   quedan descuadradas y las tarjetas de una misma fila no casan.
   ========================================================================== */
/* La cadena se hace con flex y no con height:100%: la altura de la columna la
   reparte Elementor con align-items:stretch, no es una altura declarada, asi
   que los porcentajes no resuelven y la tarjeta se quedaba a la altura de su
   texto (27 px menos en las que tienen una linea menos). */
/* Elementor reparte los widgets de la columna con align-content:flex-start, asi
   que una tarjeta suelta se queda a la altura de su contenido en vez de llenar
   la columna. Se fuerza el estiramiento solo en las columnas con info box. */
.elementor-widget-wrap:has(> .elementor-widget-qodef_info_box) {
    align-content: stretch;
}

.elementor-widget-qodef_info_box {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.elementor-widget-qodef_info_box > .elementor-widget-container {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* info-box.js escribe un height inline igual al alto de su propio contenido
   (lo usa para centrar el bloque frontal). Eso es lo que descuadraba las
   tarjetas: se anula con !important y la altura la marca la columna. */
.elementor-widget-qodef_info_box .qodef-info-box-holder {
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.elementor-widget-qodef_info_box .qodef-info-box-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.elementor-widget-qodef_info_box .qodef-ib-top-holder {
    margin-top: 0 !important;
}

/* Sin el height del JS la tarjeta se queda en el alto de su contenido y la foto
   se recorta demasiado. Se le da un alto minimo para que el encuadre respire. */
.elementor-widget-qodef_info_box .qodef-info-box-holder {
    min-height: 520px;
}

/* De tablet para abajo las tarjetas van una por fila, asi que no hay que
   igualarlas: mandan su contenido. Con flex:1 1 auto la tarjeta podia encoger
   por debajo de su contenido y, con overflow:hidden, cortaba el texto y el
   boton. Aqui se le deja crecer. */
@media (max-width: 1024px) {

    .elementor-widget-qodef_info_box,
    .elementor-widget-qodef_info_box > .elementor-widget-container {
        height: auto !important;
    }

    .elementor-widget-qodef_info_box .qodef-info-box-holder {
        flex: 0 0 auto;
        min-height: 430px;
    }

    /* El tema pone height:100% al contenido: dentro de un contenedor de altura
       automatica eso es circular, la tarjeta se quedaba en su min-height y
       overflow:hidden cortaba el texto y el boton. */
    .elementor-widget-qodef_info_box .qodef-info-box-inner {
        height: auto !important;
    }

    /* En el tema el texto y el boton viven en una capa absoluta que solo sube
       al pasar el raton. En movil no hay hover: se dejan siempre a la vista y
       dentro del flujo, con un velo oscuro para que se lean sobre la foto. */
    .elementor-widget-qodef_info_box .qodef-ib-bottom-holder {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 4;
        margin-top: 16px;
    }

    /* El velo va entre la foto (z-index 1) y el contenido (front z-index 3,
       bottom z-index 4). Importante: NO posicionar .qodef-info-box-inner, que
       es quien contiene la foto: si se hace position:relative, la foto se
       posiciona contra el contenido y deja franjas sin imagen arriba y abajo,
       del tamano del padding de la tarjeta. */
    .elementor-widget-qodef_info_box .qodef-info-box-holder::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(18, 18, 18, .55);
        z-index: 2;
        pointer-events: none;
    }
}

@media (max-width: 767px) {
    .elementor-widget-qodef_info_box .qodef-info-box-holder {
        min-height: 360px;
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* ==========================================================================
   Titulos de seccion en movil
   El tema los pinta a 45-65 px tambien en vertical, asi que una palabra larga
   ("ENTRENAMIENTO") no cabe en la pantalla y sale cortada.
   ========================================================================== */
@media (max-width: 767px) {

    .qodef-st-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .qodef-st-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 380px) {
    .qodef-st-title {
        font-size: 25px !important;
    }
}

.qodef-info-box-holder .qodef-ib-overlay {
    background-position: center center !important;
}

/* ==========================================================================
   Acordeon / FAQ: el tema lo pinta a tamano de titular y se come la seccion
   ========================================================================== */
.qodef-accordion-holder .qodef-accordion-title,
.qodef-accordion-holder .qodef-accordion-title .qodef-tab-title {
    font-size: 17px !important;
    line-height: 1.45 !important;
    letter-spacing: .01em;
    text-transform: none;
}

.qodef-accordion-holder .qodef-accordion-content,
.qodef-accordion-holder .qodef-accordion-content p {
    font-size: 15px;
    line-height: 1.75;
}

/* La pestana abierta se pinta con el dorado de marca y el tema le pone el
   texto en blanco: 2,3:1. En oscuro son 7,5:1. */
html .qodef-accordion-holder .ui-state-active .qodef-tab-title,
html .qodef-accordion-holder .ui-state-active .qodef-accordion-mark,
html .qodef-accordion-holder .ui-accordion-header-active,
html .qodef-accordion-holder .ui-accordion-header-active span {
    color: #1c1c1c;
}

@media (max-width: 680px) {

    .qodef-accordion-holder .qodef-accordion-title,
    .qodef-accordion-holder .qodef-accordion-title .qodef-tab-title {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   Horario de una sola clase: rejilla mas compacta y sin leyenda
   ========================================================================== */
.colen-horario-clase .colen-horario td {
    height: auto;
}

.colen-horario-clase table.colen-horario tbody td {
    height: 1px;
}

.colen-horario-clase .ch-marca {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 30px;
    padding: 0;
    margin: 0;
    cursor: default;
}

.colen-horario-clase .colen-horario-movil .chm-clases .ch-marca {
    height: 26px;
}

.colen-horario-clase .colen-horario-nota {
    margin-top: 18px;
}

/* ==========================================================================
   Calendario interactivo [colen_calendario] (01/10/2026)
   Reutiliza la tabla y el acordeon de .colen-horario-wrap para la vista semanal.
   ========================================================================== */
.colen-cal{width:100%;--cc-oro:#C1AA63;--cc-oscuro:#1c1c1c;--cc-crema:#F2EFE7;--cc-hueso:#FBFAF8;--cc-txt:#1c1c1c;--cc-linea:#E6DFCB}
.colen-cal .cc-barra{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:0 0 16px}
.colen-cal .cc-campo{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;min-width:0}
.colen-cal .cc-lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-oscuro)}
.colen-cal .cc-clase,.colen-cal .cc-fecha{width:100%;height:48px;margin:0;padding:0 14px;border:1px solid #cfc8b4;border-radius:0;background:#fff;color:var(--cc-oscuro);font-family:inherit;font-size:16px;line-height:46px;box-shadow:none;appearance:auto;-webkit-appearance:auto}
.colen-cal .cc-clase:focus,.colen-cal .cc-fecha:focus{outline:2px solid var(--cc-oro);outline-offset:1px;border-color:var(--cc-oro)}
.colen-cal .cc-vistas{display:flex;flex:0 0 auto;border:1px solid #cfc8b4;background:#fff}
.colen-cal .cc-vista{min-height:48px;padding:0 22px;border:0;border-radius:0;background:transparent;color:var(--cc-oscuro);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;line-height:1}
.colen-cal .cc-vista[aria-pressed="true"]{background:var(--cc-oscuro);color:#fff}
.colen-cal .cc-nav{display:flex;align-items:stretch;gap:4px;margin:0 0 14px}
.colen-cal .cc-prev,.colen-cal .cc-next{flex:0 0 44px;min-height:60px;border:0;border-radius:0;background:var(--cc-oscuro);color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0}
.colen-cal .cc-prev:disabled,.colen-cal .cc-next:disabled{opacity:.3;cursor:default}
.colen-cal .cc-tira{flex:1 1 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;min-width:0}
.colen-cal .cc-dia{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 2px;border:0;border-radius:0;background:var(--cc-crema);color:var(--cc-oscuro);font-family:inherit;cursor:pointer;position:relative;line-height:1}
.colen-cal .cc-dia-n{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.colen-cal .cc-dia-d{font-size:20px;font-weight:800}
.colen-cal .cc-dia:hover:not(:disabled){background:var(--cc-linea)}
.colen-cal .cc-dia.es-activo{background:var(--cc-oro);color:#1c1c1c}
.colen-cal .cc-dia.es-hoy::after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:currentColor}
.colen-cal .cc-dia.es-cerrado:not(.es-activo){background:#efe9e9;color:#9a8c8c}
.colen-cal .cc-dia.es-cerrado .cc-dia-d{text-decoration:line-through}
.colen-cal .cc-dia:disabled{opacity:.35;cursor:default}
.colen-cal .cc-titulo{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-oscuro)}
.colen-cal .cc-lista{list-style:none;margin:0;padding:0}
.colen-cal .cc-sesion{display:flex;align-items:center;gap:12px;margin:0 0 1px;padding:12px 14px;background:var(--cc-hueso);list-style:none}
.colen-cal .cc-hora{flex:0 0 118px;font-size:14px;font-weight:700;color:var(--cc-oscuro);white-space:nowrap;font-variant-numeric:tabular-nums}
.colen-cal .cc-chip{flex:1 1 auto;display:block;padding:10px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.25;text-align:center;transition:filter .18s ease}
.colen-cal .cc-chip:hover,.colen-cal .cc-chip:focus{filter:brightness(.88);text-decoration:none}
.colen-cal .cc-reservar{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--cc-oscuro);color:var(--cc-oscuro);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.colen-cal .cc-reservar:hover,.colen-cal .cc-reservar:focus{background:var(--cc-oscuro);color:#fff;text-decoration:none}
.colen-cal .cc-vacio{margin:0;padding:22px 16px;background:var(--cc-crema);color:var(--cc-oscuro);font-size:15px;text-align:center}
.colen-cal .cc-vacio-linea{color:var(--cc-txt);font-size:13px;padding-top:8px}
.colen-cal .cc-acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0}
.colen-cal .cc-acciones .colen-btn{margin:0}
/* El botón secundario (.colen-btn-s) está pensado para fondos oscuros (texto y borde blancos):
   sobre el fondo claro del calendario no se veía. En secciones claras va en negro. */
.colen-cal .cc-acciones .colen-btn-s{color:#1c1c1c!important;border-color:#1c1c1c}
.colen-cal .cc-acciones .colen-btn-s:hover,.colen-cal .cc-acciones .colen-btn-s:focus{background:#1c1c1c;border-color:#1c1c1c;color:#fff!important}
.colen-sec-oscuro .colen-cal .cc-acciones .colen-btn-s,.colen-texto-claro .colen-cal .cc-acciones .colen-btn-s{color:#fff!important;border-color:rgba(255,255,255,.55)}
.colen-sec-oscuro .colen-cal .cc-acciones .colen-btn-s:hover,.colen-texto-claro .colen-cal .cc-acciones .colen-btn-s:hover{background:transparent;border-color:#C1AA63;color:#C1AA63!important}
.colen-cal .cc-semana table.colen-horario thead th.es-hoy{background:var(--cc-oro);color:#1c1c1c}
.colen-cal .cc-semana table.colen-horario thead th.es-pasado,.colen-cal .colen-horario-movil .chm-dia.es-pasado .chm-dia-t{opacity:.55}
.colen-cal .cc-th-d{display:block;font-size:16px;letter-spacing:0;margin-top:2px}
.colen-cal .cc-th-cerrado{display:block;font-size:12px;letter-spacing:.04em;text-transform:none;opacity:.8;margin-top:2px}
.colen-cal .colen-horario-movil .chm-dia[open] .chm-dia-t{background:var(--cc-oro)}
.colen-cal.es-activo .cc-cuerpo{min-height:120px}
/* Página /horarios/: tarjetas de clase con icono y bloque de la app con foto (01/10/2026) */
.colen-hor-card{min-width:0}
.colen-hor-card .qodef-iwt-text a{display:inline-block;margin-top:8px;font-weight:700;color:var(--colen-enlace,#7F6B24)}
.colen-hor-app .colen-hor-app-img img{display:block;width:100%;height:auto}
.colen-hor-app .colen-cta-titulo{margin:0 0 12px;color:#fff;font-size:30px;font-weight:600;line-height:1.2;text-align:left}
.colen-hor-app .colen-cta-texto{margin:0 0 24px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.6;text-align:left}
.colen-hor-app .colen-hero-botones{justify-content:flex-start}
@media (max-width:1024px){
.colen-hor-card{width:48%!important}
}
@media (max-width:767px){
.colen-hor-card{width:100%!important}
.colen-hor-app{flex-direction:column!important}
.colen-hor-app-foto,.colen-hor-app-txt{width:100%!important}
.colen-hor-app-txt{padding:0 16px}
.colen-hor-app .colen-cta-titulo,.colen-hor-app .colen-cta-texto{text-align:center}
.colen-hor-app .colen-hero-botones{justify-content:center}
}
.colen-sec-oscuro .colen-cal .cc-lab,.colen-sec-oscuro .colen-cal .cc-titulo,.colen-texto-claro .colen-cal .cc-lab,.colen-texto-claro .colen-cal .cc-titulo{color:#fff}
.colen-sec-oscuro .colen-cal .cc-sesion,.colen-texto-claro .colen-cal .cc-sesion{background:rgba(255,255,255,.08)}
.colen-sec-oscuro .colen-cal .cc-hora,.colen-texto-claro .colen-cal .cc-hora{color:#fff}
.colen-sec-oscuro .colen-cal .cc-reservar,.colen-texto-claro .colen-cal .cc-reservar{border-color:#fff;color:#fff}
.colen-sec-oscuro .colen-cal .cc-reservar:hover,.colen-texto-claro .colen-cal .cc-reservar:hover{background:#fff;color:#1c1c1c}
.colen-sec-oscuro .colen-cal .cc-vacio,.colen-texto-claro .colen-cal .cc-vacio{background:rgba(255,255,255,.08);color:#fff}
@media (max-width: 767px){
.colen-cal .cc-barra{gap:10px}
.colen-cal .cc-campo{flex:1 1 100%}
.colen-cal .cc-vistas{flex:1 1 100%}
.colen-cal .cc-vista{flex:1 1 50%}
.colen-cal .cc-nav{gap:2px}
.colen-cal .cc-prev,.colen-cal .cc-next{flex-basis:28px;min-height:54px;font-size:22px}
.colen-cal .cc-tira{gap:2px}
.colen-cal .cc-dia{min-height:54px;padding:4px 0;gap:3px}
.colen-cal .cc-dia-n{font-size:12px;letter-spacing:0}
.colen-cal .cc-dia-d{font-size:16px}
.colen-cal .cc-sesion{flex-wrap:nowrap;gap:10px;padding:9px 10px}
.colen-cal .cc-hora{flex:0 0 92px;font-size:13px}
.colen-cal .cc-chip{flex:1 1 auto;min-width:0;padding:9px 6px;font-size:12px;letter-spacing:.04em}
.colen-cal .cc-reservar{display:none}
.colen-cal .cc-acciones .colen-btn{flex:1 1 100%;text-align:center}
}
@media (max-width: 380px){
.colen-cal .cc-hora{flex-basis:88px;font-size:12px}
.colen-cal .cc-reservar{flex:1 1 100%;justify-content:center}
}

/* ==========================================================================
   Iconos con texto de las landings de clase
   ========================================================================== */
.colen-paso .qodef-iwt-icon-holder,
.colen-beneficio .qodef-iwt-icon-holder {
    margin-bottom: 6px;
}

.colen-paso .qodef-iwt-title,
.colen-beneficio .qodef-iwt-title {
    font-size: 17px;
    letter-spacing: .04em;
}

.colen-paso .qodef-iwt-text,
.colen-beneficio .qodef-iwt-text {
    font-size: 15px;
    line-height: 1.7;
}

/* ==========================================================================
   Video de YouTube sin marca ([colen_video])
   Portada propia + reproduccion incrustada en el mismo hueco.
   ========================================================================== */
.colen-video {
    position: relative;
    width: 100%;
    padding-top: var(--colen-video-ratio, 56.25%);
    overflow: hidden;
    background-color: #1c1c1c;
}

.colen-video-play {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    appearance: none;
}

/* Mientras carga, la portada sigue tapando el iframe: si no, se ve el titulo,
   el canal y el logo que YouTube pinta sobre el video hasta que arranca. */
.colen-video.esta-activo:not(.esta-reproduciendo) .colen-video-play {
    cursor: default;
    pointer-events: none;
}

.colen-video.esta-activo:not(.esta-reproduciendo) .colen-video-poster {
    filter: brightness(.5);
}

.colen-video.esta-activo:not(.esta-reproduciendo) .colen-video-icono {
    background-color: transparent;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #C1AA63;
    animation: colen-video-girar .9s linear infinite;
}

.colen-video.esta-activo:not(.esta-reproduciendo) .colen-video-icono::after {
    display: none;
}

@keyframes colen-video-girar {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.colen-video.esta-reproduciendo .colen-video-play {
    display: none;
}

.colen-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    /* El tema fuerza height:auto en las imagenes del contenido: sin el
       !important la portada se queda a su proporcion natural y deja una
       franja de fondo cuando la foto es mas apaisada que 16:9. */
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.colen-video-icono {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    margin: 0;
    border-radius: 50%;
    background-color: #C1AA63;
    transform: translate(-50%, -50%);
    transition: transform .25s ease, background-color .25s ease;
}

.colen-video-icono::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #1c1c1c;
    transform: translate(-50%, -50%);
}

.colen-video-play:hover .colen-video-icono,
.colen-video-play:focus-visible .colen-video-icono {
    transform: translate(-50%, -50%) scale(1.08);
}

.colen-video iframe,
.colen-video .colen-video-player {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Mandos propios -------------------------------------------------------
   El reproductor va con controls=0: YouTube no pinta su barra, ni el titulo
   del video, ni el logo. Los mandos los ponemos nosotros. La capa transparente
   sobre el iframe hace de play/pausa y evita que el clic llegue a YouTube (que
   abriria su menu contextual y sus enlaces). */
.colen-video-capa {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 44px;
    left: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

.colen-video.esta-reproduciendo .colen-video-capa {
    opacity: 1;
    pointer-events: auto;
}

.colen-video.esta-reproduciendo .colen-video-barra {
    opacity: 1;
    pointer-events: auto;
}

.colen-video-barra {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    background-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, .85) 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.colen-video-barra .cv-b {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    appearance: none;
}

/* Pausa: dos barras. En estado pausado, triangulo de play */
.colen-video-barra .cv-pp::before,
.colen-video-barra .cv-pp::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 5px;
    height: 16px;
    background-color: #fff;
    transition: background-color .2s ease;
}

.colen-video-barra .cv-pp::before { left: 4px; }
.colen-video-barra .cv-pp::after  { left: 13px; }

.colen-video-barra .cv-pp.esta-pausado::before {
    top: 2px;
    left: 5px;
    width: 0;
    height: 0;
    background: none;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.colen-video-barra .cv-pp.esta-pausado::after { display: none; }

.colen-video-barra .cv-prog {
    flex: 1 1 auto;
    height: 4px;
    background-color: rgba(255, 255, 255, .28);
    cursor: pointer;
}

.colen-video-barra .cv-prog-in {
    display: block;
    width: 0;
    height: 100%;
    background-color: #C1AA63;
}

.colen-video-barra .cv-t {
    flex: 0 0 auto;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

/* Altavoz dibujado en CSS */
.colen-video-barra .cv-son::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 7px 4px 0;
    border-color: transparent #fff transparent transparent;
}

.colen-video-barra .cv-son::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 11px;
    width: 7px;
    height: 12px;
    border: 2px solid #fff;
    border-left: 0;
    border-radius: 0 9px 9px 0;
}

.colen-video-barra .cv-son.esta-mudo::after {
    width: 12px;
    height: 2px;
    top: 10px;
    left: 9px;
    border: 0;
    border-radius: 0;
    background-color: #fff;
    transform: rotate(-45deg);
}

/* Pantalla completa: dos escuadras */
.colen-video-barra .cv-fs::before,
.colen-video-barra .cv-fs::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
}

.colen-video-barra .cv-fs::before {
    top: 4px;
    left: 3px;
    border-right: 0;
    border-bottom: 0;
}

.colen-video-barra .cv-fs::after {
    right: 3px;
    bottom: 4px;
    border-top: 0;
    border-left: 0;
}

.colen-video-barra .cv-b:hover::before,
.colen-video-barra .cv-b:hover::after {
    border-color: #C1AA63;
    background-color: #C1AA63;
}

.colen-video-barra .cv-pp:hover::before,
.colen-video-barra .cv-pp:hover::after {
    background-color: #C1AA63;
}

.colen-video-barra .cv-pp.esta-pausado:hover::before {
    background: none;
    border-color: transparent transparent transparent #C1AA63;
}

.colen-video-barra .cv-son:hover::before {
    background: none;
    border-color: transparent #C1AA63 transparent transparent;
}

.colen-video-barra .cv-fs:hover::before,
.colen-video-barra .cv-fs:hover::after {
    background: none;
}

@media (max-width: 480px) {
    .colen-video-barra {
        gap: 9px;
        padding: 0 10px;
    }

    .colen-video-barra .cv-t {
        font-size: 12px;
    }
}

/* La cabecera de HYROX es muy apaisada (2400x700): al recortarla a 16:9 se
   pierde algo mas de la mitad del ancho. Se desplaza el encuadre para que el
   grupo de la izquierda quede dentro y no entre el brazo cortado del borde. */
/* La portada de HYROX es 4:3 y el hueco del video es 16:9: se muestra la foto
   entera dentro del hueco, sin recortar, sobre el fondo oscuro del bloque.
   La de BUILD (cabecera-build) tiene la misma proporcion: mismo tratamiento. */
.colen-hyrox-video .colen-video-poster,
.colen-build-video .colen-video-poster {
    object-fit: contain;
    object-position: center center;
}

/* ==========================================================================
   BUILD: rejilla de los movimientos que se levantan en clase
   ========================================================================== */
.colen-mov-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 44px;
    margin-top: 32px;
}

.colen-mov {
    border-top: 2px solid #C1AA63;
    padding-top: 15px;
}

html .colen-mov h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
}

html .colen-mov p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .colen-mov-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Galeria vertical: las fotos de los movimientos son 3:4, asi que la tira
   necesita mas alto que la galeria apaisada de las otras paginas. Ademas hay
   que anular el width:100% de .colen-galeria, que aqui apilaria las cuatro. */
.colen-galeria.colen-galeria-v .elementor-widget-image,
.colen-galeria.colen-galeria-v .elementor-widget-image > .elementor-widget-container {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.colen-galeria.colen-galeria-v .elementor-widget-image img {
    height: 400px;
    object-position: center 35%;
}

@media (max-width: 1024px) {
    .colen-galeria.colen-galeria-v .elementor-widget-image {
        flex: 1 1 calc(50% - 7px);
    }

    .colen-galeria.colen-galeria-v .elementor-widget-image img { height: 320px; }
}

@media (max-width: 767px) {
    .colen-galeria.colen-galeria-v .elementor-widget-image img { height: 240px; }
}

html .colen-nota-mov {
    margin: 26px 0 0;
    font-size: 15px;
    line-height: 1.7;
}

/* ==========================================================================
   Secciones a dos columnas: texto + foto
   ========================================================================== */
.colen-dos-col > .e-con-inner {
    flex-direction: row;
    align-items: center;
    gap: 56px;
}

/* El contenedor de Elementor fija flex-direction: row, asi que la version
   invertida (foto a la izquierda) necesita ganarle. */
html .colen-dos-col-inv > .e-con-inner {
    flex-direction: row-reverse !important;
}

.colen-dos-col > .e-con-inner > .elementor-widget {
    flex: 1 1 54%;
    min-width: 0;
}

.colen-dos-col > .e-con-inner > .colen-col-foto {
    flex: 1 1 40%;
    min-width: 0;
}

.colen-col-foto .elementor-widget-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    html .colen-dos-col > .e-con-inner,
    html .colen-dos-col-inv > .e-con-inner {
        flex-direction: column !important;
        gap: 32px;
    }

    .colen-dos-col > .e-con-inner > .elementor-widget,
    .colen-dos-col > .e-con-inner > .colen-col-foto {
        flex: 1 1 100%;
        width: 100%;
    }

    .colen-col-foto .elementor-widget-image img {
        max-height: 420px;
        object-fit: cover;
    }
}

/* Si el bloque cae dentro de un contenedor que ya define su proporcion (por
   ejemplo .lp-video de la landing de iniciacion, que antes envolvia un iframe
   absoluto), se ajusta a ese hueco en lugar de anadir su propia caja debajo. */
.lp-video .colen-video,
.colen-video-ajustado .colen-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
}

@media (max-width: 767px) {
    .colen-video-icono {
        width: 58px;
        height: 58px;
    }

    .colen-video-icono::after {
        border-width: 9px 0 9px 14px;
    }
}

/* ==========================================================================
   Ritmo de secciones de las landings
   Sistema de clases para romper el blanco uniforme y separar bloques. Se
   aplican como clase CSS del contenedor de Elementor:

     colen-sec          seccion completa, con aire arriba y abajo
     colen-sec-top      primera mitad de un bloque (aire solo arriba)
     colen-sec-mid      continuacion (sin aire)
     colen-sec-bot      cierre de un bloque (aire solo abajo)
     colen-sec-ancha    solo saca el fondo a todo el ancho, sin tocar el aire
                        (para bloques que ya traen su padding, como la banda CTA)
     colen-sec-claro    fondo #F8F7F8
     colen-sec-oscuro   fondo #1c1c1c, texto en claro
     colen-sec-rayas    textura diagonal del theme a la izquierda
     colen-sec-rayas-d  la misma textura a la derecha

   El fondo sale a todo el ancho de la ventana aunque el contenido siga en
   rejilla: Elementor aplica los margenes con propiedades logicas, por eso se
   sobrescriben margin-inline y no margin-left / margin-right.
   ========================================================================== */
.colen-sec,
.colen-sec-top,
.colen-sec-mid,
.colen-sec-bot,
.colen-sec-ancha {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline-start: calc(50% - 50vw) !important;
    margin-inline-end: calc(50% - 50vw) !important;
}

/* Pantallas intermedias (tablet y portátil, 768–1380 px): la rejilla de 1300 px
   ya no cabe y Elementor deja el contenido pegado al borde. Aire lateral de
   40 px (28 px en tablet) en los contenedores de primer nivel; en móvil manda
   la regla de 16 px (bloque «Móvil: aprovechar todo el ancho»). 14/10/2026 */
@media (min-width: 768px) and (max-width: 1380px) {
    .elementor > .e-con > .e-con-inner,
    .elementor > .e-con.e-flex:not(:has(> .e-con-inner)),
    .elementor > .e-con.e-grid:not(:has(> .e-con-inner)),
    .qodef-elementor-row-grid-section > .elementor-container,
    .qodef-page-content-holder > .qodef-container-inner {
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box;
    }
    /* Los contenedores propios que ya centran su contenido con max-width no
       necesitan más aire */
    .colen-csel-todas,
    .colen-csel-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor > .e-con > .e-con-inner,
    .elementor > .e-con.e-flex:not(:has(> .e-con-inner)),
    .elementor > .e-con.e-grid:not(:has(> .e-con-inner)),
    .qodef-elementor-row-grid-section > .elementor-container,
    .qodef-page-content-holder > .qodef-container-inner {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Home · bloque de clases (21/10/2026): misma rejilla que /clases/ ([colen_clases
   columnas="2"], el listado del selector) pero sin el selector dinámico; a todo
   el ancho de la ventana, sin aire, como .colen-csel-todas en /clases/ */
.colen-clases-home .colen-clases-listado { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }
.colen-clases-home > .elementor-container { max-width: none; }
.colen-clases-home .elementor-widget-shortcode { margin-bottom: 0; }

.colen-sec        { padding-top: 96px !important; padding-bottom: 96px !important; }
.colen-sec-top    { padding-top: 96px !important; padding-bottom: 34px !important; }
.colen-sec-mid    { padding-top: 0    !important; padding-bottom: 34px !important; }
.colen-sec-bot    { padding-top: 0    !important; padding-bottom: 96px !important; }

.colen-sec-claro  { background-color: #F8F7F8; }
.colen-sec-oscuro { background-color: #1c1c1c; }



.colen-sec-oscuro .qodef-st-title,
.colen-sec-oscuro h2,
.colen-sec-oscuro h3,
.colen-sec-oscuro h4 {
    color: #ffffff;
}

html .colen-sec-oscuro .qodef-st-text {
    color: #b3b3b3 !important;
}

.colen-sec-oscuro p,
.colen-sec-oscuro li,
.colen-sec-oscuro td,
.colen-sec-oscuro .elementor-widget-text-editor {
    color: #b3b3b3;
}

.colen-sec-oscuro .colen-reel-pie {
    color: #8f8f8f;
}

/* Textura del theme: un triangulo de lineas finas horizontales (el mismo
   recurso grafico que la home usa de fondo en sus secciones). Va en un
   pseudoelemento y no como background-image para que el contenedor pueda
   llevar ademas su color de fondo, y se dibuja con un degradado repetido en
   lugar del JPG de la demo, que trae la palabra "time" incrustada. */
.colen-sec-rayas,
.colen-sec-rayas-d {
    position: relative;
    overflow: hidden;
}

.colen-sec-rayas::before,
.colen-sec-rayas-d::before {
    /* Elementor reserva el ::before de los contenedores para la capa de
       superposicion del fondo y le pone content:var(--background-overlay),
       que sin superposicion vale "none" y anula el pseudoelemento. */
    content: "" !important;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    /* Elementor fuerza el ancho del ::before de los contenedores (lo usa para
       la capa de superposicion del fondo), de ahi el !important. */
    width: 30% !important;
    max-width: 30% !important;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, rgba(28, 28, 28, .12) 0 1px, rgba(28, 28, 28, 0) 1px 8px);
}

.colen-sec-rayas::before {
    left: 0 !important;
    right: auto !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.colen-sec-rayas-d::before {
    right: 0 !important;
    left: auto !important;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* Sobre fondo oscuro las lineas van en claro */
.colen-sec-oscuro.colen-sec-rayas::before,
.colen-sec-oscuro.colen-sec-rayas-d::before {
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, rgba(255, 255, 255, 0) 1px 8px);
}

/* ==========================================================================
   Filas de fotos (galeria de seccion)
   El tema deja cada imagen a su tamano natural, asi que fotos de distinta
   proporcion descuadran la fila. Todas al ancho de su columna y a la misma
   altura, recortando por el centro.
   ========================================================================== */
.colen-galeria .elementor-widget-image,
.colen-galeria .elementor-widget-image > .elementor-widget-container {
    width: 100%;
    margin: 0;
}

.colen-galeria .elementor-widget-image img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .colen-galeria .elementor-widget-image img { height: 250px; }
}

@media (max-width: 767px) {
    .colen-galeria .elementor-widget-image img { height: 220px; }
}

/* El contenido va por encima de la textura (contenedores y secciones clásicas) */
.colen-sec-rayas > .e-con-inner,
.colen-sec-rayas-d > .e-con-inner,
.colen-sec-rayas > .elementor-container,
.colen-sec-rayas-d > .elementor-container {
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .colen-sec     { padding-top: 64px !important; padding-bottom: 64px !important; }
    .colen-sec-top { padding-top: 64px !important; padding-bottom: 26px !important; }
    .colen-sec-mid { padding-bottom: 26px !important; }
    .colen-sec-bot { padding-bottom: 64px !important; }

    .colen-sec-rayas::before,
    .colen-sec-rayas-d::before {
        display: none;
    }
}

/* ==========================================================================
   Reel de Instagram incrustado (pagina El Box)
   ========================================================================== */
.colen-reel {
    max-width: 420px;
    margin: 0 auto;
}

/* En escritorio la seccion de comunidad va a dos columnas: titulo y texto a la
   izquierda, reel a la derecha. En tablet y movil se apila y el texto vuelve al
   centro, que es como estaba. */
@media (min-width: 1025px) {
    .colen-comunidad .qodef-section-title,
    .colen-comunidad .qodef-st-title,
    .colen-comunidad .qodef-st-text {
        text-align: left;
    }

    .colen-comunidad .qodef-section-title {
        margin: 0;
    }

}

.colen-reel iframe {
    display: block;
    width: 100%;
    height: 640px;
    border: 0;
    background-color: #1c1c1c;
}

.colen-reel-pie {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #1c1c1c;
    text-align: center;
}

@media (max-width: 480px) {
    .colen-reel iframe {
        height: 560px;
    }
}

/* ==========================================================================
   Footer, columna Contacta: datos de contacto y legales sobre el formulario
   ========================================================================== */
.colen-footer-contacto {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

/* El tema pone padding 15px arriba y abajo a los li del footer (separacion de
   30px entre items). Se reduce a la mitad. */
.colen-footer-contacto li {
    margin: 0 !important;
    padding: 7px 0 !important;
    list-style: none;
}

.colen-footer-contacto li:last-child {
    padding-bottom: 0 !important;
}

.colen-footer-contacto a {
    color: inherit;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: color .2s ease;
}

.colen-footer-contacto a:hover,
.colen-footer-contacto a:focus {
    color: #C1AA63;
    text-decoration: none;
}

/* El formulario del footer pierde su titulo propio: lo pone el widget de texto */
.qodef-footer-top-holder .qodef-contact-form-7-widget {
    margin-top: 0;
}

/* ==========================================================================
   Barra CTA fija en movil (landings de clase)
   ========================================================================== */
.colen-cta-movil {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    gap: 8px;
    padding: 10px 12px;
    /* 21/10: en iPhone la barra se metía bajo el borde inferior de la pantalla
       (indicador de inicio / barra de Safari); se respeta la zona segura */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    background: rgba(28, 28, 28, .96);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .25);
    /* sin saltos al aparecer/desaparecer el toolbar del navegador móvil */
    will-change: transform;
    -webkit-backface-visibility: hidden;
}

.colen-cta-movil a {
    flex: 1 1 0;
    display: flex; /* 14/10: texto centrado en vertical, con o sin borde */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    text-align: center;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border-radius: 2px;
}

.colen-cta-movil .cta-p {
    background: #C1AA63;
    color: #fff;
}

.colen-cta-movil .cta-s {
    flex: 0 0 34%;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}

/* Barra propia de la landing de iniciacion (9611): desde el 15/10 la sustituye
   la barra global de toda la web, asi que se oculta */
body .lp-sticky {
    display: none !important;
}
body .lp-sticky {
    transform: translateY(110%) !important;
    visibility: hidden !important;
    transition: transform .28s ease, visibility 0s linear .28s !important;
}

body .lp-sticky.esta-visible {
    transform: translateY(0) !important;
    visibility: visible !important;
    transition: transform .28s ease, visibility 0s !important;
}

/* Icono de WhatsApp: en móvil acompaña al texto; en escritorio va solo */
.colen-cta-movil .cta-s .fa {
    font-size: 17px;
    margin-right: 8px;
    line-height: 1;
}

/* Oculta mientras haya otro CTA de reserva o un formulario a la vista
   (colen-cta.js, «red de seguridad», 15/10) */
.colen-cta-movil {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
}

.colen-cta-movil.esta-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s;
}

@media (max-width: 1024px) {
    .colen-cta-movil {
        display: flex;
    }

    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* Escritorio (15/10): «Reservar clase de prueba» centrado abajo, solo cuando
   no hay otro CTA a la vista; WhatsApp como icono redondo fijo abajo a la
   derecha, siempre visible (es otra acción y no compite con nada).
   El contenedor no se transforma en escritorio: un ancestro con transform
   rompería el position:fixed del icono. La animación va en .cta-p. */
@media (min-width: 1025px) {
    .colen-cta-movil,
    .colen-cta-movil.esta-visible {
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        bottom: 28px;
        padding: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        visibility: visible;
        transition: none;
        pointer-events: none; /* la franja no bloquea los clics; solo los botones */
    }
    .colen-cta-movil a {
        pointer-events: auto;
        min-height: 50px;
        border-radius: 3px;
        font-size: 13px;
        box-shadow: 0 10px 28px rgba(28, 28, 28, .28);
    }
    .colen-cta-movil .cta-p {
        flex: 0 0 280px;
        width: 280px;
        padding: 0 16px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px);
        transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    }
    .colen-cta-movil.esta-visible .cta-p {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .25s ease, transform .25s ease, visibility 0s;
    }
    .colen-cta-movil .cta-s {
        position: fixed;
        right: 28px;
        bottom: 28px;
        flex: none;
        width: 56px;
        height: 56px;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #1c1c1c;
        color: #fff;
        visibility: visible;
    }
    .colen-cta-movil .cta-s .fa {
        margin: 0;
        font-size: 28px;
    }
    .colen-cta-movil .cta-s .cta-s-txt {
        /* texto solo para lectores de pantalla (el enlace lleva aria-label) */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .colen-cta-movil .cta-s:hover,
    .colen-cta-movil .cta-s:focus {
        background: #C1AA63;
        color: #fff;
    }
}

/* ==========================================================================
   Landing de clase: hero con subtitulo y CTA, banda CTA intermedia,
   tarjetas de otras clases y ajustes mobile first. Patron base: /crossfit-wod/
   ========================================================================== */
/* El video usa padding-top en % para la proporcion: su alto intrinseco cuenta
   como 0 y, en flex, el widget se encogia a 0 px en movil (el video se montaba
   encima del bloque siguiente). */
.elementor-widget:has(.colen-video),
.e-con:has(> .e-con-inner > .elementor-widget .colen-video),
.e-con:has(> .elementor-widget .colen-video) {
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0;
}

/* Con el padding en % el ancho del widget no puede depender del contenido:
   se fija al 100 % del contenedor. */
.elementor-widget:has(.colen-video) {
    width: 100% !important;
    max-width: 100%;
    align-self: stretch;
}

/* ==========================================================================
   Franja de tarifas (home y paginas de clase): logos de los planes sobre el
   qodef_pricing_table del tema. Antes vivia solo en el CSS de la home.
   ========================================================================== */
.qodef-price-table.ct-logo .qodef-pt-inner > ul {
    position: relative;
}

.qodef-price-table.ct-logo .qodef-pt-inner > ul::before {
    content: "";
    display: block;
    width: 92px;
    height: 92px;
    margin: 4px auto 20px;
    border-radius: 12px;
    background-color: #1c1c1c;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    box-shadow: 0 8px 20px rgba(37, 37, 37, .16);
}

.qodef-price-table.ct-base .qodef-pt-inner > ul::before {
    background-image: url(/wp-content/uploads/2026/09/bono-base-crossfit-colen.webp);
}

.qodef-price-table.ct-plus .qodef-pt-inner > ul::before {
    background-image: url(/wp-content/uploads/2026/09/bono-plus-crossfit-colen-1.png);
}

.qodef-price-table.ct-unlimited .qodef-pt-inner > ul::before {
    background-image: url(/wp-content/uploads/2026/09/bono-unlimited-crossfit-colen.webp);
}

@media only screen and (max-width: 768px) {
    .qodef-price-table.ct-logo .qodef-pt-inner > ul::before {
        width: 78px;
        height: 78px;
        margin: 2px auto 16px;
    }
}

/* 14/10 (feedback, punto 2): las cajas de tarifas van SIN logos propios y con
   los textos más grandes. Jerarquía: precio (84 px) > nombre del plan (30 px)
   > lista (18 px) > «al mes» y € de apoyo. Las reglas de los logos de arriba se
   conservan por si el cliente cambia de idea; aquí se anulan en toda la web,
   también en la copia de la home. */
html body .qodef-price-table.ct-logo .qodef-pt-inner > ul::before {
    display: none !important;
    content: none !important;
}
html body .qodef-price-table .qodef-pt-inner > ul > li.qodef-pt-prices {
    padding-top: 36px;
}
/* El tema fija los tamaños con selectores muy largos: hace falta !important */
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-price {
    font-size: 84px !important;
    line-height: 1 !important;
    letter-spacing: 3px !important;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-value {
    font-size: 30px !important;
    line-height: 1 !important;
    top: -0.9em;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-mark {
    font-size: 15px !important;
    line-height: 1.4 !important;
    letter-spacing: 2px !important;
    margin-top: 8px;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-title-holder .qodef-pt-title {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: 1.5px !important;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-content ul li {
    font-size: 18px !important;
    line-height: 1.45 !important;
    letter-spacing: 1.5px !important;
    padding-top: 14px;
    padding-bottom: 14px;
}
html body .qodef-price-table .qodef-pt-button .qodef-btn {
    font-size: 15px;
}
/* 15/10: el € va detrás de la cifra («70 €»), no arriba a la izquierda, y el
   texto dorado («al mes», «1 sesión», «bono de 30 sesiones») sube de 15 a
   20 px para que no se pierda junto a un precio de 84. */
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-price {
    order: 1;
    left: 0;
    vertical-align: baseline;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-value {
    order: 2;
    position: static;
    top: 0;
    left: 0;
    margin-left: 6px;
    font-size: 40px !important;
    vertical-align: baseline;
}
html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-mark {
    order: 3;
    flex: 0 0 100%;
    font-size: 20px !important;
    letter-spacing: 2.5px !important;
    margin-top: 10px;
}
@media only screen and (max-width: 767px) {
    html body .qodef-price-table .qodef-pt-inner > ul > li.qodef-pt-prices {
        padding-top: 28px;
    }
    html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-price {
        font-size: 64px !important;
    }
    html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-value {
        font-size: 30px !important;
        margin-left: 4px;
    }
    html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-prices .qodef-pt-mark {
        font-size: 18px !important;
    }
    html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-title-holder .qodef-pt-title {
        font-size: 26px !important;
    }
    html body .qodef-price-table .qodef-pt-inner ul li.qodef-pt-content ul li {
        font-size: 16px !important;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

.colen-tarifas .colen-tarifas-nota {
    margin: 26px auto 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.colen-tarifas .colen-hero-botones {
    justify-content: center;
    margin-top: 26px;
}

/* Movil: los tres planes en carrusel horizontal con scroll-snap (apilados
   ocupaban unos 2.000 px de alto). Se ve un trozo del siguiente plan como
   pista de que se puede deslizar. */
@media (max-width: 767px) {
    .colen-tarifas.e-con > .e-con-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .colen-tarifas .qodef-pricing-tables .qodef-pt-wrapper {
        display: flex !important;
        gap: 12px;
        margin: 0 !important;
        padding: 6px 0 14px !important;
        scroll-padding: 0 10%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .colen-tarifas .qodef-pricing-tables .qodef-pt-wrapper::-webkit-scrollbar {
        display: none;
    }

    .colen-tarifas .qodef-pricing-tables .qodef-price-table {
        flex: 0 0 80%;
        width: 80% !important;
        max-width: 80% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: center;
    }

    .colen-tarifas .qodef-price-table .qodef-pt-inner {
        padding-top: 28px !important;
        height: 100%;
    }

    .colen-tarifas .qodef-price-table .qodef-pt-title-holder {
        padding-top: 16px !important;
    }

    .colen-tarifas .qodef-price-table .qodef-pt-button {
        padding-bottom: 30px !important;
    }

    .colen-tarifas .qodef-pricing-tables::after {
        content: "Desliza para ver todos los planes \2192";
        display: block;
        margin-top: 6px;
        font-size: 12px;
        letter-spacing: .06em;
        text-align: center;
        color: #8a8a8a;
    }
}

/* ==========================================================================
   Popup "Solicitud de clase de prueba gratuita" (Elementor Pro, ID 10040)
   Replica el popup de produccion: rotulos en serif, campos Arial con borde
   gris, boton negro redondeado. Mobile first: campos de 16 px (iOS no hace
   zoom), alturas tactiles de 44 px y el popup con scroll propio.
   ========================================================================== */
#elementor-popup-modal-10040 .dialog-widget-content {
    border-radius: 14px;
    overflow: hidden;
    max-height: 94vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#elementor-popup-modal-10040 .dialog-close-button {
    top: 18px;
    right: 18px;
    font-size: 22px;
    color: #1c1c1c;
}

#elementor-popup-modal-10040 .dialog-close-button i {
    color: #1c1c1c;
}

.colen-popup-prueba .cpp-logo img {
    display: block;
    margin: 0 auto 26px;
}

.colen-popup-prueba .elementor-form-fields-wrapper {
    margin-left: -6px;
    margin-right: -6px;
}

.colen-popup-prueba .elementor-field-group {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 18px !important;
}

.colen-popup-prueba .elementor-field-label,
.colen-popup-prueba .elementor-field-subgroup label,
.colen-popup-prueba .mensajeform {
    font-family: "Times New Roman", Times, Georgia, serif !important;
    color: #1c1c1c !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.colen-popup-prueba .elementor-field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px !important;
    line-height: 1.3;
}

.colen-popup-prueba .elementor-field-group .elementor-field-textual,
.colen-popup-prueba .elementor-field-group select {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 14px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #1c1c1c !important;
    background: #fff !important;
    border: 1px solid #69727d !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    margin: 0 !important; /* el tema da 25 px de margen inferior a los inputs */
    line-height: normal !important;
}

.colen-popup-prueba .elementor-field-group .elementor-field-textual::placeholder {
    color: #1c1c1c;
    opacity: 1;
}

.colen-popup-prueba .elementor-field-group .elementor-field-textual:focus,
.colen-popup-prueba .elementor-field-group select:focus {
    border-color: #1c1c1c !important;
    outline: none;
}

.colen-popup-prueba .elementor-select-wrapper::before {
    color: #1c1c1c;
    font-size: 14px;
}

.colen-popup-prueba .elementor-field-type-checkbox .elementor-field-subgroup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.colen-popup-prueba .elementor-field-subgroup .elementor-field-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.colen-popup-prueba .elementor-field-subgroup input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 18px;
    accent-color: #1c1c1c;
}

.colen-popup-prueba .elementor-field-subgroup label {
    font-size: 15px !important;
    line-height: 1.35;
    cursor: pointer;
}

.colen-popup-prueba .e-form__buttons {
    margin-top: 8px !important;
    justify-content: center;
}

.colen-popup-prueba .elementor-button[type="submit"] {
    min-height: 44px;
    padding: 12px 26px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: #fff !important;
    background-color: #1c1c1c !important;
    border-radius: 7px !important;
    transition: background-color .2s ease, color .2s ease;
}

.colen-popup-prueba .elementor-button[type="submit"]:hover,
.colen-popup-prueba .elementor-button[type="submit"]:focus {
    background-color: #C1AA63 !important;
    color: #1c1c1c !important;
}

.colen-popup-prueba .mensajeform {
    margin-top: 26px;
    padding: 0 8px;
    font-size: 14px !important;
    line-height: 1.6;
}

.colen-popup-prueba .elementor-message {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
}

@media (max-width: 767px) {
    #elementor-popup-modal-10040 .dialog-widget-content {
        width: 94vw !important;
        max-height: 92vh;
        border-radius: 12px;
    }

    #elementor-popup-modal-10040 .dialog-close-button {
        top: 12px;
        right: 12px;
    }

    .colen-popup-prueba .cpp-logo img {
        margin-bottom: 18px;
    }

    .colen-popup-prueba .elementor-field-group {
        margin-bottom: 14px !important;
    }

    .colen-popup-prueba .elementor-field-group .elementor-field-textual,
    .colen-popup-prueba .elementor-field-group select {
        height: 44px;
        min-height: 44px;
        font-size: 16px !important;
    }

    .colen-popup-prueba .elementor-field-label {
        font-size: 13px !important;
    }

    .colen-popup-prueba .elementor-button[type="submit"] {
        width: 100%;
        font-size: 14px !important;
    }

    .colen-popup-prueba .mensajeform {
        font-size: 13px !important;
        padding: 0;
    }
}

/* ==========================================================================
   Aviso de horario de atencion al cliente (plugin colen-datos)
   Debajo de cada horario, en los formularios de reserva y en el footer.
   ========================================================================== */
.colen-aviso-atencion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* En una línea cuando cabe; si no, el texto se parte solo */
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 22px auto 0 !important;
    padding: 14px 18px;
    background: #FBF7EC;
    border: 1px solid #E6D9B3;
    border-left: 4px solid #C1AA63;
    color: #1c1c1c !important;
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
}

.colen-aviso-atencion strong {
    color: #1c1c1c;
}

.colen-aviso-atencion .caa-i {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 2px solid #9c8745;
    border-radius: 50%;
    position: relative;
}

.colen-aviso-atencion .caa-i::before,
.colen-aviso-atencion .caa-i::after {
    content: "";
    position: absolute;
    left: 7px;
    background: #9c8745;
    width: 2px;
}

.colen-aviso-atencion .caa-i::before {
    top: 3px;
    height: 6px;
}

.colen-aviso-atencion .caa-i::after {
    top: 7px;
    height: 5px;
    transform: rotate(-60deg);
    transform-origin: top;
}

/* 22/10/2026: el aviso lleva fondo crema propio, así que su texto es siempre oscuro,
   aunque la sección herede reglas de texto claro (.colen-texto-claro en la home lo
   dejaba en #B3B3B3 sobre crema, ilegible). Especificidad por encima de
   «html .colen-texto-claro p». */
html .colen-aviso-atencion.colen-aviso-atencion,
html .colen-aviso-atencion.colen-aviso-atencion .caa-t {
    color: #1c1c1c !important;
}
html .colen-aviso-atencion.colen-aviso-atencion strong {
    color: #1c1c1c !important;
    font-weight: 700;
}

/* En secciones oscuras (reserva; y horario de la home, que es oscuro por imagen de
   fondo y lleva .colen-texto-claro) */
html .colen-sec-oscuro .colen-aviso-atencion.colen-aviso-atencion,
html .colen-sec-oscuro .colen-aviso-atencion.colen-aviso-atencion .caa-t,
html .colen-texto-claro .colen-aviso-atencion.colen-aviso-atencion,
html .colen-texto-claro .colen-aviso-atencion.colen-aviso-atencion .caa-t {
    color: #f2efe7 !important;
}
html .colen-sec-oscuro .colen-aviso-atencion.colen-aviso-atencion strong,
html .colen-texto-claro .colen-aviso-atencion.colen-aviso-atencion strong {
    color: #fff !important;
}
.colen-texto-claro .colen-aviso-atencion {
    background: rgba(193, 170, 99, .14);
    border-color: rgba(193, 170, 99, .4);
    border-left-color: #C1AA63;
}
.colen-texto-claro .colen-aviso-atencion .caa-i { border-color: #C1AA63; }
.colen-texto-claro .colen-aviso-atencion .caa-i::before,
.colen-texto-claro .colen-aviso-atencion .caa-i::after { background: #C1AA63; }
.colen-sec-oscuro .colen-aviso-atencion {
    background: rgba(193, 170, 99, .12);
    border-color: rgba(193, 170, 99, .35);
    border-left-color: #C1AA63;
    color: #e8e4d8 !important;
}

.colen-sec-oscuro .colen-aviso-atencion strong {
    color: #fff;
}

.colen-aviso-form {
    margin-top: 16px !important;
    font-size: 14px;
}

.colen-footer-contacto .cfc-atencion span {
    display: block;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C1AA63;
}

@media (max-width: 767px) {
    .colen-aviso-atencion {
        font-size: 14px;
        padding: 12px 14px;
    }
}

/* Marca: "Colen" en negrita (lo envuelve colen_negrita_marca en functions.php) */
strong.colen-marca {
    font-weight: 700;
    color: inherit;
}

/* Mapa de ubicacion (pagina El Box) */
.colen-mapa-box {
    width: 100%;
    max-width: 960px;
    margin: 30px auto 0;
}

.colen-mapa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #E9E6DF;
    border: 1px solid #E8E4DA;
    overflow: hidden;
}

.colen-mapa iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.colen-mapa-datos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #E8E4DA;
    border-top: 0;
    background: #fff;
}

.colen-mapa-datos li {
    margin: 0;
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.5;
    color: #1c1c1c;
    border-left: 1px solid #E8E4DA;
    text-align: left;
}

.colen-mapa-datos li:first-child {
    border-left: 0;
}

.colen-mapa-datos .cm-t {
    display: block;
    margin-bottom: 3px;
    color: #9c8745;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.colen-mapa-botones {
    justify-content: center;
    margin-top: 24px;
}

@media (max-width: 767px) {
    .colen-mapa {
        aspect-ratio: 4 / 3.4;
    }

    .colen-mapa-datos {
        grid-template-columns: 1fr;
    }

    .colen-mapa-datos li {
        border-left: 0;
        border-top: 1px solid #E8E4DA;
        padding: 12px 16px;
    }

    .colen-mapa-datos li:first-child {
        border-top: 0;
    }
}

.elementor-widget.colen-w100 {
    width: 100%;
    max-width: 100%;
}

.colen-ancla {
    display: block;
    position: relative;
    top: 0;
    height: 0;
    visibility: hidden;
}
/* Widget que solo lleva anclas: fuera del flujo para que no sume hueco (gap/margen) */
.elementor-widget-html:has(.colen-ancla):not(:has(:not(.colen-ancla):not(.elementor-widget-container))),
.elementor-widget-html:has(script):not(:has(:not(script):not(.elementor-widget-container))) {
    position: absolute !important;
    margin: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hero: el bloque de titulo agrupa H1 + subtitulo + botones */
.colen-hero .colen-hero-titulo.e-con,
.colen-hero .colen-hero-titulo.e-con > .e-con-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 760px;
}

.colen-hero .colen-hero-titulo .elementor-widget {
    margin: 0 !important;
    width: 100%;
}

.colen-hero .colen-hero-sub,
.colen-hero .colen-hero-sub p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    line-height: 1.55;
}

.colen-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.colen-btn {
    display: inline-block;
    padding: 15px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    border-radius: 2px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.colen-btn-p {
    background: #C1AA63;
    color: #fff !important;
    border: 1px solid #C1AA63;
}

.colen-btn-p:hover,
.colen-btn-p:focus {
    background: #fff;
    border-color: #fff;
    color: #1c1c1c !important;
}

.colen-btn-s {
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .55);
}

.colen-btn-s:hover,
.colen-btn-s:focus {
    border-color: #C1AA63;
    color: #C1AA63 !important;
}

.colen-btn-oscuro {
    background: #1c1c1c;
    color: #fff !important;
    border: 1px solid #1c1c1c;
}

.colen-btn-oscuro:hover,
.colen-btn-oscuro:focus {
    background: #C1AA63;
    border-color: #C1AA63;
    color: #1c1c1c !important;
}

.colen-hero-micro {
    margin: 2px 0 0;
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .75);
}

/* Banda CTA intermedia */
.colen-cta-banda,
.colen-cta-banda .elementor-widget,
.colen-cta-banda .elementor-widget p {
    text-align: center !important;
}

.colen-cta-banda .colen-cta-titulo {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.colen-cta-banda .colen-cta-texto {
    margin: 0 auto 22px;
    max-width: 620px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.6;
}

/* Bloque de formatos de WOD */
.colen-formatos h3 {
    margin: 0 0 14px;
    font-size: 20px;
    letter-spacing: .02em;
}

.colen-formatos ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.colen-formatos li {
    margin: 0;
    padding: 16px 18px;
    background: #F8F7F8;
    border-left: 3px solid #C1AA63;
    font-size: 15px;
    line-height: 1.6;
}

.colen-formatos li strong {
    display: block;
    margin-bottom: 2px;
    color: #1c1c1c;
    letter-spacing: .03em;
}

.colen-formatos .colen-formatos-nota {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.7;
}

/* Lista con checks (a quien va dirigida, reserva) */
.colen-checks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.colen-checks li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.7;
}

.colen-checks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 12px;
    height: 7px;
    border-left: 2px solid #C1AA63;
    border-bottom: 2px solid #C1AA63;
    transform: rotate(-45deg);
}

/* Tarjetas de otras clases */
.colen-clases-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.colen-clase-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid #E8E4DA;
    text-decoration: none !important;
    transition: border-color .2s ease, transform .2s ease;
}

.colen-clase-card:hover,
.colen-clase-card:focus {
    border-color: #C1AA63;
    transform: translateY(-2px);
}

.colen-clase-card .cc-t {
    margin: 0 0 6px;
    color: #1c1c1c;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .03em;
}

.colen-clase-card .cc-d {
    margin: 0 0 14px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    flex: 1 1 auto;
}

.colen-clase-card .cc-l {
    color: #7F6B24;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.colen-clases-mas {
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 1024px) {
    .colen-clases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile first: contenidos de las landings de clase */
@media (max-width: 767px) {
    /* Hero con foto de fondo: la foto se ve arriba y el texto va en la franja
       oscura de debajo (si no, la franja tapa la foto entera). */
    .colen-hero.e-con {
        min-height: 0 !important;
        justify-content: flex-end;
    }

    .colen-hero .colen-hero-titulo.e-con {
        margin-top: 190px !important;
    }

    .colen-hero .colen-hero-titulo.e-con,
    .colen-hero .colen-hero-titulo.e-con > .e-con-inner {
        max-width: none;
        gap: 12px;
    }

    .colen-hero .colen-hero-sub,
    .colen-hero .colen-hero-sub p {
        font-size: 15px;
    }

    .colen-hero-botones {
        width: 100%;
        flex-direction: column;
    }

    .colen-btn {
        display: block;
        width: 100%;
        padding: 15px 18px;
    }

    .colen-cta-banda .colen-cta-titulo {
        font-size: 24px;
    }

    .colen-cta-banda .colen-cta-texto {
        font-size: 15px;
    }

    .colen-formatos ul {
        grid-template-columns: 1fr;
    }

    .colen-clases-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .colen-clase-card {
        padding: 18px;
    }

    /* Pasos de la sesion: rejilla 2x2 en vez de cuatro bloques apilados */
    .colen-pasos.e-con,
    .colen-pasos.e-con > .e-con-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        row-gap: 26px !important;
        column-gap: 14px !important;
    }

    .colen-pasos > .e-con,
    .colen-pasos > .e-con-inner > .e-con {
        --width: calc(50% - 7px) !important;
        width: calc(50% - 7px) !important;
        max-width: calc(50% - 7px) !important;
    }

    .colen-paso .qodef-iwt-text {
        font-size: 14px;
    }

    /* Beneficios: menos aire entre bloques apilados */
    .colen-beneficios.e-con,
    .colen-beneficios.e-con > .e-con-inner {
        row-gap: 22px;
    }
}

/* =========================================================================
   Tienda para socios (plugin colen-tienda.php)
   ========================================================================= */

/* Sin carrito: se oculta el icono del carrito de la cabecera */
.qodef-shopping-cart-holder,
.qodef-shopping-cart-dropdown,
.widget_prowess_select_woocommerce_dropdown_cart {
    display: none !important;
}

/* Etiqueta "Solo socios" / "Agotado" sobre la foto del listado */
.woocommerce ul.products li.product,
.qodef-pl-inner {
    position: relative;
}
.colen-badge-socios {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    display: inline-block;
    padding: 5px 10px;
    background: #1C1C1C;
    color: #C1AA63;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    border-radius: 3px;
    pointer-events: none;
}
.colen-badge-socios.colen-badge-agotado {
    background: #FFFFFF;
    color: #1C1C1C;
    border: 1px solid #1C1C1C;
}
.woocommerce ul.products li.product.outofstock img {
    opacity: .55;
}
/* Las etiquetas del tema (Sold, Sale, New) sobran: la pone Colen */
.qodef-out-of-stock,
.qodef-onsale,
.qodef-new-product {
    display: none !important;
}
/* Tarjetas del listado con la misma altura */
.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
}
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product > .qodef-pl-inner-holder {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product .qodef-pl-text-wrapper {
    flex: 1 1 auto;
}

/* Bloque "Exclusivo para socios" en la ficha */
.colen-socios-box {
    margin: 26px 0 28px;
    padding: 22px 22px 18px;
    background: #F8F7F8;
    border-left: 3px solid #C1AA63;
    border-radius: 4px;
}
.colen-socios-box .csb-eyebrow {
    margin: 0 0 8px;
    color: #1C1C1C;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.colen-socios-box .csb-texto {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
}
.colen-socios-box .csb-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
.colen-socios-box .csb-micro {
    margin: 14px 0 0;
    color: #1c1c1c;
    font-size: 13px;
}
.colen-socios-box.is-agotado {
    border-left-color: #1C1C1C;
}

/* Ficha y categorías: sin cabecera de página, el contenido no debe
   meterse debajo del menú (el tema le da margin-top negativo) */
.single-product .qodef-content,
.colen-sin-hero .qodef-content {
    margin-top: 0 !important;
}

/* Menú principal a 18 px en escritorio (cabecera normal y fija al hacer
   scroll). El tema lo define a 17 px y además lo puede reescribir desde sus
   opciones, por eso el !important. En móvil manda la cabecera móvil. */
@media (min-width: 1025px) {
    .qodef-main-menu > ul > li > a,
    .qodef-main-menu > ul > li > a > span.item_outer .item_text,
    .qodef-sticky-header .qodef-main-menu > ul > li > a,
    .qodef-fixed-wrapper .qodef-main-menu > ul > li > a {
        font-size: 18px !important;
    }
}

/* Páginas sin bloque hero (fichas de producto, entradas, Open Box...):
   el menú (texto claro) necesita una franja oscura detrás para leerse */
.single-product .qodef-page-header,
.single-product .qodef-page-header .qodef-menu-area,
.colen-sin-hero .qodef-page-header,
.colen-sin-hero .qodef-page-header .qodef-menu-area {
    background-color: #1C1C1C !important;
}

/* Migas de pan (Yoast) */
.colen-migas {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .04em;
    color: #1c1c1c;
}
.colen-migas .breadcrumb_last {
    color: #1C1C1C;
}
/* Franja bajo el hero */
.colen-migas-banda {
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid #ECECEC;
}
.colen-migas-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 20px;
}
.colen-migas-banda .colen-migas {
    margin: 0;
}
/* La misma línea gris a todo el ancho bajo las migas en todas las páginas.
   Fuera de la franja (páginas con cabecera del tema, fichas, categorías) la
   línea se dibuja con un ::after de 100vw; .qodef-wrapper-inner ya recorta el
   desbordamiento horizontal */
.colen-migas {
    position: relative;
    padding-bottom: 14px;
}
.colen-migas::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    background: #ECECEC;
    transform: translateX(-50%);
    pointer-events: none;
}
.colen-migas-banda {
    border-bottom: 0 !important;
}
.colen-migas-banda .colen-migas-inner {
    padding-bottom: 0;
}

/* Un único negro (#1c1c1c) también en los estilos inline que imprime el tema:
   separador del Section Title (#29282d por defecto) y fondos/bordes de widgets */
html .qodef-separator[style*="29282d"],
html [style*="border-color: #29282d"] { border-color: #1c1c1c !important; }
html [style*="background-color: #29282d"],
html [style*="background: #29282d"] { background-color: #1c1c1c !important; }
html [style*="color: #29282d"]:not([style*="border-color"]):not([style*="background"]) { color: #1c1c1c !important; }

/* Formulario del pie (cf7_custom_style_1) sobre fondo #1c1c1c: los campos llevaban
   el gris #212121, que ahora es el mismo negro. Se diferencian con un velo claro y
   línea inferior, sin introducir otro negro. */
html .qodef-page-footer .cf7_custom_style_1 .wpcf7-form-control:not(.wpcf7-submit),
html .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text,
html .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number,
html .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date,
html .cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea,
html .cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select {
    background-color: rgba(255, 255, 255, .06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
    color: #e6e6e6 !important;
}
html .cf7_custom_style_1 .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-bottom-color: #c1aa63 !important;
}
html .cf7_custom_style_1 .wpcf7-form-control::placeholder { color: #b3b3b3; }

/* Migas al final de /clases/ y footer: el único negro de la web es #1c1c1c
   (feedback del cliente 01/10, confirmado 05/10) */
html .colen-migas-banda.colen-migas-final {
    background: #1c1c1c;
}
html .colen-migas-final .colen-migas-inner {
    padding-top: 16px;
    padding-bottom: 16px;
}
html .colen-migas-final .colen-migas,
html .colen-migas-final .colen-migas span {
    color: #b3b3b3;
}
html .colen-migas-final .colen-migas a {
    color: #fff;
    text-decoration: none;
}
html .colen-migas-final .colen-migas a:hover,
html .colen-migas-final .colen-migas a:focus {
    color: #c1aa63;
}
.colen-migas-final .colen-migas {
    padding-bottom: 0;
}
.colen-migas-final .colen-migas::after {
    display: none;
}
/* Siempre a todo el ancho de la ventana, esté dentro de la rejilla del tema (1300 px)
   o de un contenedor de Elementor */
html .colen-migas-banda.colen-migas-final {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}
html .qodef-page-footer,
html .qodef-page-footer .qodef-footer-top-holder,
html .qodef-page-footer .qodef-footer-top-holder-inner,
html .qodef-page-footer .qodef-footer-bottom-holder,
html .qodef-page-footer .qodef-footer-bottom-holder-inner {
    background-color: #1c1c1c !important;
}
html .qodef-page-footer .qodef-footer-bottom-holder {
    border-top: 1px solid rgba(255, 255, 255, .08);
}
/* Barra superior de direcciones, en el mismo negro */
html body .qodef-top-bar,
html body .qodef-top-bar .qodef-vertical-align-containers,
html body .qodef-top-bar .qodef-grid,
html body .qodef-top-bar .qodef-position-left,
html body .qodef-top-bar .qodef-position-right {
    background-color: #1c1c1c !important;
}

/* Paginas sin hero: al principio del contenido, dentro de la rejilla */
.colen-migas-inner-top {
    padding-top: 22px;
    padding-bottom: 0;
}
.colen-migas-inner-top .colen-migas {
    margin: 0 0 10px;
}
@media (max-width: 767px) {
    .colen-migas {
        font-size: 12px;
    }
    .colen-migas-inner {
        padding: 12px 16px;
    }
    .colen-migas-inner-top {
        padding: 16px 16px 0;
    }
}
.colen-migas a {
    color: #1c1c1c;
}
.colen-migas a:hover {
    color: #C1AA63;
}
.single-product .qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner {
    padding-top: 50px;
}
@media (max-width: 767px) {
    .single-product .qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner {
        padding-top: 24px;
    }
}

/* Ficha: los H2 del copy (el tema los oculta dentro de la pestaña) */
.woocommerce-Tabs-panel h2 {
    display: block !important;
    margin: 28px 0 12px;
    font-size: 22px;
    line-height: 1.3;
}
.woocommerce-Tabs-panel h2:first-child {
    margin-top: 0;
}
.woocommerce-Tabs-panel ul {
    margin: 0 0 16px 20px;
}
h1.qodef-single-product-title {
    font-size: 30px;
    line-height: 1.25;
}
@media (max-width: 767px) {
    h1.qodef-single-product-title {
        font-size: 24px;
    }
    .woocommerce-Tabs-panel h2 {
        font-size: 19px;
    }
}

/* Ficha: la cantidad y el botón de compra no existen */
.single-product .quantity,
.single-product form.cart {
    display: none !important;
}

/* Página Tienda (landing Elementor) */
.colen-tienda-landing .woocommerce ul.products {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .colen-socios-box {
        padding: 18px 16px 16px;
    }
    .colen-socios-box .csb-botones .colen-btn {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        text-align: center;
        white-space: normal;
    }

    /* La landing de la tienda se pinta fuera del contenedor del tema:
       margen lateral de 16 px en todas las secciones salvo el hero */
    .colen-tienda-landing .elementor > .e-con:not(.colen-hero) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Colección en dos columnas en móvil */
    .colen-tienda-coleccion .woocommerce ul.products,
    .woocommerce ul.products.columns-4 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .colen-tienda-coleccion .woocommerce ul.products li.product,
    .woocommerce ul.products.columns-4 li.product {
        width: auto !important;
        margin: 0 !important;
        float: none !important;
    }
    .colen-tienda-coleccion .woocommerce ul.products::before,
    .colen-tienda-coleccion .woocommerce ul.products::after {
        display: none;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .qodef-product-list-title {
        font-size: 14px !important;
        line-height: 1.35 !important;
        letter-spacing: .02em;
    }
    .woocommerce ul.products li.product .qodef-pl-text-wrapper {
        padding-left: 8px;
        padding-right: 8px;
    }
    .colen-badge-socios {
        top: 8px;
        left: 8px;
        padding: 4px 7px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Primer bloque tras las migas: mismo aire arriba y abajo (centrado en su hueco)
   - con hero: contenedor que sigue a la franja de migas
   - sin hero: primer elemento de la página (empieza 10 px bajo la línea)
   ========================================================================== */
.colen-migas-banda + .e-con {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
.colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .e-con:first-child,
.colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .elementor-section:first-child {
    padding-top: 54px !important;
    padding-bottom: 64px !important;
}
.colen-migas-banda + .e-con > .e-con-inner,
.colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .e-con:first-child > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.colen-migas-banda + .e-con .qodef-st-text:last-child,
.colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > :first-child .qodef-st-text:last-child {
    margin-bottom: 0;
}
/* Tarifas: el número decorativo "01" sobresale 71 px por encima del bloque */
.colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .elementor-element-7e6244f:first-child {
    padding-top: 135px !important;
}
@media (max-width: 767px) {
    /* Plantilla en rejilla del tema: en móvil ya deja 40 px más arriba */
    .colen-migas-inner-top ~ .qodef-container-inner .elementor[data-elementor-type="wp-page"] > .e-con:first-child {
        padding-top: 14px !important;
    }
}

@media (min-width: 768px) {
    .colen-migas-banda + .e-con {
        padding-top: 96px !important;
        padding-bottom: 96px !important;
    }
    .colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .e-con:first-child,
    .colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .elementor-section:first-child {
        padding-top: 86px !important;
        padding-bottom: 96px !important;
    }
    .colen-migas-inner-top ~ * .elementor[data-elementor-type="wp-page"] > .elementor-element-7e6244f:first-child {
        padding-top: 157px !important;
    }

    /* Bloques texto + foto: el texto arranca arriba, no centrado con la foto */
    .colen-dos-col.e-con,
    .colen-dos-col.e-con > .e-con-inner {
        align-items: flex-start !important;
    }

    /* Hero sin imagen: el texto crece hacia abajo y deja aire bajo el logo
       (cabecera transparente de 106 px) */
    .colen-hero.e-con:not(:has(.colen-hero-img)) {
        padding-top: 162px !important;
        justify-content: flex-end;
    }
    .colen-hero.e-con:not(:has(.colen-hero-img)) > .colen-hero-titulo {
        position: relative;
        top: auto;
        bottom: auto;
    }
}

/* Dos columnas con varios widgets de texto agrupados en .colen-col-texto */
.colen-dos-col > .e-con-inner > .colen-col-texto {
    flex: 1 1 54%;
    min-width: 0;
    gap: 0;
}
@media (max-width: 1024px) {
    .colen-dos-col > .e-con-inner > .colen-col-texto {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Footer: títulos sin etiqueta h (functions.php los pasa a div.colen-fh-hN)
   con el mismo diseño que tenían como h2 / h3 / h5 */
.qodef-page-footer .colen-fh {
    display: block;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    word-wrap: break-word;
}
.qodef-page-footer .colen-fh-h1,
.qodef-page-footer .colen-fh-h2,
.qodef-page-footer .colen-fh-h3,
.qodef-page-footer .colen-fh-h4 {
    font-size: 30px;
    letter-spacing: 1.5px;
}
.qodef-page-footer .colen-fh-h2 {
    line-height: 30px;
    margin: 0;
}
.qodef-page-footer .colen-fh-h3 {
    line-height: 35.01px;
    margin: 0 0 11px;
}
.qodef-page-footer .colen-fh-h5,
.qodef-page-footer .colen-fh-h6 {
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 1px;
    margin: 0;
}
.qodef-page-footer .colen-fh a {
    color: #b3b3b3;
    transition: color .2s ease-out;
}

/* BUILD: tarifas y FAQ comparten fondo; se quita el doble relleno entre ambos */
.elementor-element-196398e > .e-con-inner {
    padding-bottom: 0 !important;
}
.elementor-element-326bc4a.e-con {
    padding-top: 0 !important;
}
.elementor-element-326bc4a > .e-con-inner {
    padding-top: 0 !important;
}

/* Dos secciones claras seguidas (p. ej. tarifas y FAQ): se unen en un solo
   fondo sin sumar los dos rellenos */
.e-con.colen-sec.colen-sec-claro:has(+ .e-con.colen-sec.colen-sec-claro) > .e-con-inner {
    padding-bottom: 0 !important;
}
.e-con.colen-sec.colen-sec-claro + .e-con.colen-sec.colen-sec-claro,
.e-con.colen-sec.colen-sec-claro + .e-con.colen-sec.colen-sec-claro > .e-con-inner {
    padding-top: 0 !important;
}

/* Sección blanca seguida del título blanco de "Cómo es una clase": mismo
   criterio, no se suman los rellenos */
.e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda) + .e-con.colen-sec-top:not(.colen-sec-claro),
.e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda) + .e-con.colen-sec-top:not(.colen-sec-claro) > .e-con-inner,
.e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda):not(.colen-dos-col) + .e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda),
.e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda):not(.colen-dos-col) + .e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda) > .e-con-inner,
.e-con.colen-sec-bot:not(.colen-sec-claro):not(.colen-sec-oscuro) + .e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda),
.e-con.colen-sec-bot:not(.colen-sec-claro):not(.colen-sec-oscuro) + .e-con.colen-sec:not(.colen-sec-claro):not(.colen-sec-oscuro):not(.colen-cta-banda) > .e-con-inner {
    padding-top: 0 !important;
}

/* /clases/: la franja final ya es la banda CTA estándar (colen-cta-banda). Reglas antiguas qodef sin efecto. */
.elementor-element-2166645 .qodef-call-to-action-holder {
    padding: 56px 16px;
    background: transparent !important;
}
.elementor-element-2166645 .qodef-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.elementor-element-2166645 .qodef-cta-text-holder,
.elementor-element-2166645 .qodef-cta-button-holder {
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
}
html .elementor-element-2166645 .qodef-cta-text h3 {
    margin: 0 0 10px;
    color: #1c1c1c;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: .04em;
}
html .elementor-element-2166645 .qodef-cta-text h3::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 16px auto 0;
    background: #1c1c1c;
}
html .elementor-element-2166645 .qodef-cta-text p {
    margin: 0;
    color: #1c1c1c;
    font-size: 15px;
    line-height: 26.3px;
}
html .elementor-element-2166645 .qodef-cta-button .qodef-btn {
    background-color: #1c1c1c !important;
    border-color: #1c1c1c !important;
    color: #fff !important;
    padding: 18px 40px !important;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
html .elementor-element-2166645 .qodef-cta-button .qodef-btn .qodef-btn-text,
html .elementor-element-2166645 .qodef-cta-button .qodef-btn .qodef-btn-text-inner {
    color: inherit !important;
}
html .elementor-element-2166645 .qodef-cta-button .qodef-btn:hover {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #1c1c1c !important;
}
@media (min-width: 768px) {
    .elementor-element-2166645 .qodef-call-to-action-holder {
        padding: 80px 20px;
    }
    html .elementor-element-2166645 .qodef-cta-text h3 {
        font-size: 40px;
    }
}

/* El box: foto de cabecera (2400x700) 1/8 más baja, recortada al centro */
.colen-hero .elementor-element-4db0fe5 img {
    aspect-ratio: 2400 / 612.5;
    object-fit: cover;
    object-position: center center;
}

/* Open Box: en móvil la franja de foto es baja; se encuadra la zona de atletas
   y no el techo de la nave */
@media (max-width: 767px) {
    .elementor-element-ob0hero::before {
        background-size: 170% auto !important;
        background-position: center -150px !important;
        background-repeat: no-repeat !important;
    }
    /* Iniciación: la cabecera es muy apaisada (2400x700) */
    .elementor-element-in0hero::before {
        background-size: auto 220px !important;
        background-position: 45% top !important;
        background-repeat: no-repeat !important;
    }
}

/* Iniciación: reseñas de Google (capturas) en rejilla, sin recortar */
.colen-reviews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
}
.colen-reviews img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
@media (min-width: 768px) {
    .colen-reviews {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

/* Equipo: rejilla de coaches */
.colen-equipo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
    margin-top: 36px;
}
.colen-coach-foto {
    overflow: hidden;
    border-radius: 4px;
    background: #1c1c1c;
}
.colen-coach-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .4s ease;
}
.colen-coach:hover .colen-coach-foto img {
    transform: scale(1.04);
}
html .colen-coach-nombre {
    margin: 14px 0 2px;
    font-size: 20px;
    line-height: 1.2;
}
html .colen-coach-rol {
    margin: 0;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #C1AA63;
}
/* 20/10/2026: «Coach de CrossFit · HYROX Coach» con el mismo estilo para los
   dos (sin destacar HYROX sobre CrossFit). Un punto más compacto para que
   quepa en una línea en la tarjeta de escritorio (212 px); en móvil parte
   en dos líneas sin salirse de la tarjeta. */
html .colen-coach-rol {
    font-size: 13px;
    letter-spacing: .03em;
    line-height: 1.5;
}
.colen-coach-lider {
    grid-column: 1 / -1;
}
.colen-coach-lider .colen-coach-foto img {
    aspect-ratio: 4 / 3;
    object-position: center 30%;
}
a.colen-coach,
a.colen-coach:hover {
    display: block;
    color: inherit;
    text-decoration: none;
}
.colen-equipo-cta {
    margin-top: 30px;
    text-align: center;
}
/* Home: la sección del equipo es de ancho completo sin márgenes */
.elementor-element-cc45ad1 .colen-equipo-grid,
.elementor-element-cc45ad1 .colen-equipo-cta {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .colen-equipo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    .colen-coach-lider {
        grid-column: auto;
    }
    .colen-coach-lider .colen-coach-foto img {
        aspect-ratio: 3 / 4;
        object-position: center 20%;
    }
}
@media (min-width: 1024px) {
    .colen-equipo-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Home · «Tu primer día»: el tema solo hace visibles los pasos del proceso
   con las clases .no-touchevents o .touch; en móviles reales (touchevents)
   se quedaban ocultos. Siempre visibles; la animación de entrada sigue en
   escritorio. */
html .qodef-process-holder .qodef-process-item-holder {
    visibility: visible;
}
html.touchevents .qodef-process-holder .qodef-process-item-holder {
    opacity: 1;
    transform: none;
}
@media (max-width: 1024px) {
    html .qodef-process-holder .qodef-process-item-holder {
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (max-width: 767px) {
    html .qodef-process-holder .qodef-process-item-holder {
        width: 100% !important;
        float: none !important;
    }
    html .qodef-process-holder .qodef-pr-item-text-holder {
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Home · bloques de clases (info box): en móvil el texto quedaba en una
   columna estrecha por el padding lateral de 65px del tema */
@media (max-width: 767px) {
    .qodef-info-box-holder,
    .qodef-info-box-holder .qodef-info-box-inner,
    .qodef-info-box-holder .qodef-ib-front-holder {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .qodef-info-box-holder .qodef-ib-front-holder {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    .qodef-info-box-holder .qodef-ib-bottom-holder {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .qodef-info-box-holder .qodef-ib-text-holder {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Home: entradillas sobre fondo oscuro (Comunidad y Horarios) */
html .elementor-element-8577108 .qodef-st-text,
html .elementor-element-1e6e7b3 .qodef-st-text,
html .elementor-element-8577108 .qodef-st-text strong,
html .elementor-element-1e6e7b3 .qodef-st-text strong {
    color: #fff !important;
}
html .elementor-element-1e6e7b3 .qodef-st-text a {
    color: #C1AA63 !important;
}

/* Pie: botón «Enviar» del formulario. El tema dimensionaba el botón con un
   span de texto que ya no existe y el input quedaba cortado («ENV»). */
html .qodef-custom-cf-7-button {
    position: relative;
    display: inline-block;
    width: auto !important;
}
html .qodef-custom-cf-7-button input.wpcf7-submit {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    padding: 15px 50px 15px 26px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: pointer;
}
html .qodef-custom-cf-7-button .qodef-btn-text-inner {
    position: absolute !important;
    top: 0;
    right: 0;
    width: 44px !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
html .qodef-custom-cf-7-button .wpcf7-spinner {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   Blog con el diseño global (listado, categorías y entradas)
   Cabecera .colen-bhero = misma que las clases; tarjetas en rejilla; CTA oscura
   ========================================================================== */
.colen-bhero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    background: #1c1c1c;
    overflow: hidden;
}
.colen-bhero-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
}
.colen-bhero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 18, 18, .82) 0%, rgba(18, 18, 18, .55) 45%, rgba(18, 18, 18, .15) 100%),
                linear-gradient(180deg, rgba(18, 18, 18, .35) 0%, rgba(18, 18, 18, 0) 30%);
    pointer-events: none;
}
.colen-bhero-inner {
    position: relative;
    z-index: 2;
    width: 1100px;
    max-width: calc(100% - 44px);
    margin: 0 auto;
    padding: 162px 0 48px;
}
.colen-bhero-txt {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
html .colen-bhero h1 {
    margin: 0;
    color: #fff !important;
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: .02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.colen-bhero-eyebrow {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
html .colen-bhero-eyebrow a.colen-bhero-cat {
    color: #C1AA63 !important;
    font-weight: 700;
    text-decoration: none;
}
.colen-bhero-sep {
    color: rgba(255, 255, 255, .45);
}
html .colen-bhero-sub {
    margin: 0;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 17px;
    line-height: 1.55;
}
html .colen-bhero-sub strong {
    color: #fff !important;
}

/* El contenedor del tema: sin los 150 px de aire heredados */
body.colen-blog .qodef-content .qodef-container-inner {
    padding-top: 48px !important;
    padding-bottom: 0 !important;
}
body.colen-blog .qodef-content-has-sidebar,
body.colen-blog .qodef-page-content-holder {
    width: 100% !important;
    float: none !important;
    left: auto !important;
}

/* Filtro de categorías (va antes del contenedor interior del tema) */
.colen-blog-cats {
    width: 1100px;
    max-width: calc(100% - 44px);
    margin: 44px auto 0;
}
body.colen-blog-lista .qodef-content .qodef-container-inner {
    padding-top: 0 !important;
}
.colen-blog-cats ul {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
html .colen-blog-cats a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid #d9d6cc;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1c1c1c;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html .colen-blog-cats a:hover,
html .colen-blog-cats a.es-actual {
    background: #1c1c1c;
    border-color: #1c1c1c;
    color: #fff;
}

/* Rejilla de tarjetas del listado */
body.colen-blog-lista .qodef-blog-holder .qodef-blog-holder-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
body.colen-blog-lista .qodef-blog-holder article {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    background: #fff;
    border: 1px solid #ecebe6;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
}
body.colen-blog-lista .qodef-blog-holder article:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
    transform: translateY(-3px);
}
body.colen-blog-lista article .qodef-post-content,
body.colen-blog-lista article .qodef-post-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.colen-blog-lista article .qodef-post-heading {
    margin: 0 !important;
}
body.colen-blog-lista article .qodef-post-image,
body.colen-blog-lista article .qodef-post-image a {
    display: block;
    line-height: 0;
}
body.colen-blog-lista article .qodef-post-image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}
body.colen-blog-lista article .qodef-post-text {
    padding: 22px 24px 24px !important;
    margin: 0 !important;
}
body.colen-blog-lista article .qodef-post-text-inner {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.colen-blog-lista article .qodef-post-info-top {
    margin: 0 0 10px !important;
}
html body.colen-blog-lista article .qodef-post-info-category a {
    color: #7f6b24;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}
html body.colen-blog-lista article .qodef-post-title {
    margin: 0 0 10px !important;
    font-size: 20px !important;
    line-height: 1.28 !important;
}
html body.colen-blog-lista article .qodef-post-title a {
    color: #1c1c1c;
}
body.colen-blog-lista article .qodef-post-excerpt {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 16/10/2026: sin fecha ni autor, la tarjeta no lleva meta inferior: fuera
   la línea del extracto (borde del tema) y su hueco */
body.colen-blog-lista article .qodef-post-excerpt-holder {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}
body.colen-blog-lista article .qodef-post-info-bottom {
    display: none !important;
}
body.colen-blog-lista article .qodef-post-info-author,
body.colen-blog-lista article .qodef-blog-share,
body.colen-blog-lista article .qodef-post-read-more-button {
    display: none !important;
}
body.colen-blog-lista article .qodef-post-info-bottom,
body.colen-blog-lista article .qodef-post-info-date,
body.colen-blog-lista article .qodef-post-info-date a {
    font-size: 12px !important;
    letter-spacing: .06em;
    color: #1c1c1c;
}

/* Paginación */
body.colen-blog .qodef-blog-pagination {
    margin: 44px 0 0 !important;
    text-align: center;
}
body.colen-blog .qodef-blog-pagination ul {
    display: inline-flex;
    gap: 8px;
}
html body.colen-blog .qodef-blog-pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d9d6cc;
    border-radius: 2px;
    color: #1c1c1c;
}
html body.colen-blog .qodef-blog-pagination li a.qodef-pag-active {
    background: #C1AA63;
    border-color: #C1AA63;
    color: #fff;
}

/* Banda CTA oscura a sangre (listados y entradas) */
.colen-bcta {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 72px 0 0;
    padding: 80px 22px;
    background: #1c1c1c;
    text-align: center;
    overflow: hidden;
}
.colen-bcta::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: repeating-linear-gradient(135deg, rgba(193, 170, 99, .16) 0 1px, transparent 1px 11px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}
.colen-bcta-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}
html .colen-bcta .colen-cta-titulo {
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}
html .colen-bcta .colen-cta-texto {
    margin: 0 0 24px;
    color: #b3b3b3;
    font-size: 17px;
}
.colen-bcta .colen-hero-botones {
    justify-content: center;
}

/* Entrada individual: el título va en la cabecera (H1). (16/10: la imagen
   destacada del tema, dentro de .qodef-post-heading, vuelve a mostrarse y
   abre el artículo: ver .colen-post-destacada más abajo) */
body.colen-blog-entrada .qodef-blog-single article > .qodef-post-content > .qodef-post-heading > :not(.qodef-post-image),
body.colen-blog-entrada .qodef-blog-single .qodef-post-info-top,
body.colen-blog-entrada .qodef-blog-single .qodef-post-title,
body.colen-blog-entrada .qodef-blog-single .qodef-post-info-bottom,
body.colen-blog-entrada .qodef-blog-single-navigation,
body.colen-blog-entrada .qodef-related-posts-holder,
body.colen-blog-entrada .qodef-author-description {
    display: none !important;
}
body.colen-blog-entrada .qodef-blog-single,
body.colen-blog-entrada .qodef-blog-single article {
    display: block !important;
    width: 100%;
}
body.colen-blog-entrada .qodef-blog-single article {
    max-width: 960px;
    margin: 0 auto !important;
}
/* Títulos dentro del artículo: escala común (las entradas antiguas traían
   tamaños propios muy grandes) */
html body.colen-blog-entrada .qodef-post-text-main h2,
html body.colen-blog-entrada .qodef-post-text-main h2.elementor-heading-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin: 38px 0 14px !important;
}
html body.colen-blog-entrada .qodef-post-text-main h3,
html body.colen-blog-entrada .qodef-post-text-main h3.elementor-heading-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 28px 0 10px !important;
}
@media (max-width: 767px) {
    html body.colen-blog-entrada .qodef-post-text-main h2,
    html body.colen-blog-entrada .qodef-post-text-main h2.elementor-heading-title {
        font-size: 22px !important;
        margin: 30px 0 12px !important;
    }
    html body.colen-blog-entrada .qodef-post-text-main h3,
    html body.colen-blog-entrada .qodef-post-text-main h3.elementor-heading-title {
        font-size: 19px !important;
    }
}
/* Textos y títulos de las entradas a todo el ancho del artículo (algunas
   entradas antiguas traen un ancho fijo por widget) */
body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor,
body.colen-blog-entrada .qodef-post-text-main .elementor-widget-heading {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Las secciones de Elementor dentro de la entrada no añaden márgenes extra */
body.colen-blog-entrada .qodef-post-text-main .elementor-section > .elementor-container,
body.colen-blog-entrada .qodef-post-text-main .e-con,
body.colen-blog-entrada .qodef-post-text-main .e-con > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
}
body.colen-blog-entrada .qodef-post-text-main .elementor-col-100 > .elementor-widget-wrap {
    margin: 0 !important;
    width: 100% !important;
}
body.colen-blog-entrada .qodef-post-text-main .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
body.colen-blog-entrada .qodef-post-text-main .elementor-section,
body.colen-blog-entrada .qodef-post-text-main .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.colen-blog-entrada .qodef-blog-single .qodef-post-text {
    padding: 0 !important;
    margin: 0 !important;
}
body.colen-blog-entrada .qodef-post-text-main,
body.colen-blog-entrada .qodef-post-text-main p,
body.colen-blog-entrada .qodef-post-text-main li {
    font-size: 15px;
    line-height: 26.3px;
}
/* Las entradas antiguas traen la tipografía de Elementor: misma letra que el resto
   (14/10: norma global de párrafo, 15 px / 26,3 px / #1c1c1c) */
html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor,
html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor p,
html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor li {
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 26.3px !important;
    font-weight: 400;
    letter-spacing: 0;
    color: #1c1c1c;
}
html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor strong {
    color: #1c1c1c;
}
body.colen-blog-entrada .qodef-post-text-main .elementor-section .elementor-container {
    max-width: 100% !important;
}

/* Relacionadas */
.colen-brel {
    max-width: 1100px;
    margin: 72px auto 0;
}
/* Pantallas intermedias: aire lateral como el resto de contenedores (14/10) */
@media (min-width: 768px) and (max-width: 1180px) {
    .colen-brel {
        padding-left: 40px;
        padding-right: 40px;
    }
}
html .colen-brel h2 {
    margin: 0 0 26px;
    font-size: 28px;
}
.colen-brel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.colen-bcard {
    background: #fff;
    border: 1px solid #ecebe6;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.colen-bcard:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
    transform: translateY(-3px);
}
.colen-bcard > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none !important;
}
.colen-bcard-img {
    line-height: 0;
}
.colen-bcard-img img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}
.colen-bcard-txt {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.colen-bcard-cat {
    margin-bottom: 8px;
    color: #7f6b24;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html .colen-bcard h3 {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 1.3;
    color: #1c1c1c;
}
.colen-bcard-mas {
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1c1c1c;
}
.colen-bcard:hover .colen-bcard-mas {
    color: #7f6b24;
}

@media (max-width: 1024px) {
    html .colen-bhero h1 {
        font-size: 30px;
    }
    body.colen-blog-lista .qodef-blog-holder .qodef-blog-holder-inner,
    .colen-brel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.colen-bhero *,
.colen-bcta *,
.colen-blog-cats * {
    box-sizing: border-box;
}

/* Móvil: foto arriba y texto en la franja oscura de debajo, como las clases */
@media (max-width: 767px) {
    body.colen-blog .qodef-content .qodef-container-inner {
        width: calc(100% - 32px) !important;
    }
    .colen-blog-cats {
        width: auto;
        max-width: none;
        margin: 28px 0 0;
    }
    .colen-bhero {
        display: block;
        min-height: 0;
    }
    .colen-bhero::after {
        display: none;
    }
    .colen-bhero-foto {
        position: relative;
        inset: auto;
        height: 220px;
    }
    .colen-bhero-inner {
        max-width: none;
        width: auto;
        padding: 26px 22px 30px;
    }
    .colen-bhero-txt {
        gap: 12px;
    }
    html .colen-bhero h1 {
        font-size: 24px;
        text-shadow: none;
    }
    html .colen-bhero-sub {
        font-size: 15px;
    }
    .colen-blog-cats {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .colen-blog-cats ul {
        flex-wrap: nowrap;
        padding: 0 16px;
        margin-bottom: 26px;
    }
    .colen-blog-cats li {
        flex: 0 0 auto;
    }
    body.colen-blog-lista .qodef-blog-holder .qodef-blog-holder-inner,
    .colen-brel-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    body.colen-blog .qodef-content .qodef-container-inner {
        padding-top: 32px !important;
    }
    .colen-bcta {
        margin-top: 56px;
        padding: 56px 22px;
    }
    .colen-bcta::before {
        display: none;
    }
    html .colen-bcta .colen-cta-titulo {
        font-size: 24px;
    }
    html .colen-bcta .colen-cta-texto {
        font-size: 15px;
    }
    .colen-brel {
        margin-top: 56px;
    }
    html .colen-brel h2 {
        font-size: 24px;
    }
    body.colen-blog-entrada .qodef-post-text-main,
    body.colen-blog-entrada .qodef-post-text-main p,
    body.colen-blog-entrada .qodef-post-text-main li,
    html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor,
    html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor p,
    html body.colen-blog-entrada .qodef-post-text-main .elementor-widget-text-editor li {
        font-size: 16px !important;
    }
    .colen-bhero-sep {
        display: none;
    }
    .colen-bhero-eyebrow {
        gap: 4px 14px;
    }
}

/* H1 de las cabeceras: siempre blanco */
.colen-hero h1,
.colen-hero .elementor-heading-title {
    color: #fff !important;
}

/* ==========================================================================
   Páginas legales y 404: cabecera oscura sin foto + lectura a 800 px
   ========================================================================== */
.colen-bhero--sinfoto {
    min-height: 380px;
    background: #1c1c1c radial-gradient(circle at 85% 20%, rgba(193, 170, 99, .16) 0, rgba(193, 170, 99, 0) 45%);
}
.colen-bhero--sinfoto::after {
    display: none;
}
html .colen-bhero-eyebrow span.colen-bhero-cat {
    color: #C1AA63;
    font-weight: 700;
}
body.colen-legal .qodef-content .qodef-container-inner {
    width: 800px !important;
    max-width: calc(100% - 44px) !important;
    padding-top: 8px !important;
    padding-bottom: 96px !important;
}
body.colen-legal .qodef-page-content-holder {
    width: 100% !important;
    float: none !important;
}
.colen-legal-nav {
    width: 800px;
}
body.colen-legal .qodef-page-content-holder,
body.colen-legal .qodef-page-content-holder p,
body.colen-legal .qodef-page-content-holder li {
    font-size: 17px;
    line-height: 1.75;
    color: #1c1c1c;
}
body.colen-legal .qodef-content h2 {
    margin: 44px 0 12px;
    font-size: 26px;
    line-height: 1.25;
    color: #1c1c1c;
}
body.colen-legal .qodef-content h3 {
    margin: 28px 0 8px;
    font-size: 19px;
    line-height: 1.3;
    color: #1c1c1c;
}
body.colen-legal .qodef-content h2:first-child,
body.colen-legal .qodef-page-content-holder > h2:first-child {
    margin-top: 8px;
}
body.colen-legal .qodef-content ul,
body.colen-legal .qodef-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
body.colen-legal .qodef-content li {
    margin-bottom: 6px;
}
body.colen-legal .qodef-content li::marker {
    color: #C1AA63;
    font-weight: 700;
}
html body.colen-legal .colen-legal-nav a {
    text-decoration: none;
    color: #1c1c1c;
}
html body.colen-legal .colen-legal-nav a.es-actual,
html body.colen-legal .colen-legal-nav a:hover {
    color: #fff;
}
body.colen-legal .colen-migas-banda a {
    text-decoration: none;
}
body.colen-legal .qodef-page-content-holder a,
body.colen-legal .colen-legal-pie a {
    color: #7f6b24;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* 404 */
html body.colen-404 .qodef-content,
html body.colen-404 .qodef-content .qodef-content-inner {
    background: #fff none !important;
    padding-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.colen-404-hero .colen-bhero-inner {
    z-index: 3;
}
.colen-404-num {
    position: absolute;
    right: 4%;
    bottom: -40px;
    z-index: 1;
    font-size: 260px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(193, 170, 99, .35);
    pointer-events: none;
}
body.colen-404 .qodef-content .qodef-container-inner {
    padding-top: 48px !important;
}
.colen-404-wod {
    margin: 0 0 48px;
    padding: 34px 32px 28px;
    background: #1c1c1c;
    border-radius: 6px;
    color: #fff;
}
html body.colen-404 .colen-404-wod h2 {
    margin: 6px 0 8px;
    color: #fff;
}
.colen-404-wod-tag {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C1AA63 !important;
}
html body.colen-404 .colen-404-wod p,
html body.colen-404 .colen-404-wod li {
    color: rgba(255, 255, 255, .88);
}
html body.colen-404 .colen-404-wod strong {
    color: #fff;
}
.colen-404-wod-lista {
    list-style: none;
    margin: 18px 0 22px !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
html body.colen-404 .colen-404-wod-lista li {
    margin: 0;
    padding: 16px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4px;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.colen-404-wod-lista li::marker {
    content: none;
}
.colen-404-wod-lista span {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: #C1AA63;
}
.colen-404-crono {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
}
.colen-404-tiempo {
    font-size: 44px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: #fff;
}
.colen-404-tiempo.es-final {
    color: #C1AA63;
}
.colen-404-go {
    border: 0;
    cursor: pointer;
}
html body.colen-404 .colen-404-wod-nota {
    margin: 18px 0 0 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, .6) !important;
}
.colen-404-botones {
    margin: 26px 0 40px;
}
html body.colen-404 .colen-404-botones a {
    text-decoration: none;
}
html body.colen-404 .colen-404-botones .colen-btn {
    box-sizing: border-box;
    max-width: 100%;
}
html body.colen-404 .colen-404-botones .colen-btn-s {
    color: #1c1c1c !important;
    border-color: #1c1c1c !important;
}
html body.colen-404 .colen-404-botones .colen-btn-s:hover {
    background: #1c1c1c !important;
    color: #fff !important;
}
.colen-404-links {
    list-style: none;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
html body.colen-404 .colen-404-links a {
    display: block;
    padding: 14px 16px;
    border: 1px solid #e3e0d6;
    border-radius: 4px;
    text-decoration: none;
    color: #1c1c1c;
    font-weight: 700;
}
html body.colen-404 .colen-404-links a:hover {
    border-color: #C1AA63;
    color: #7f6b24;
}
@media (max-width: 767px) {
    .colen-404-num {
        font-size: 150px;
        bottom: -26px;
        right: -8px;
    }
    .colen-404-wod {
        padding: 26px 20px 22px;
    }
    .colen-404-wod-lista span {
        font-size: 30px;
    }
    html body.colen-404 .colen-404-wod-lista li {
        font-size: 12px;
        padding: 12px 6px;
    }
    .colen-404-tiempo {
        font-size: 36px;
    }
    .colen-404-links {
        grid-template-columns: 1fr 1fr;
    }
}

.colen-legal-pie {
    margin-top: 48px;
    padding: 22px 24px;
    background: #f6f4ee;
    border-left: 3px solid #C1AA63;
    border-radius: 4px;
}
.colen-legal-pie p {
    margin: 0 !important;
}
@media (max-width: 767px) {
    .colen-bhero--sinfoto {
        min-height: 0;
    }
    body.colen-legal .qodef-content .qodef-container-inner {
        max-width: none !important;
        width: calc(100% - 32px) !important;
        padding-bottom: 64px !important;
    }
    .colen-legal-nav {
        width: auto;
        margin: 24px 0 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .colen-legal-nav ul {
        flex-wrap: nowrap;
        padding: 0 16px;
        margin-bottom: 20px;
    }
    .colen-legal-nav li {
        flex: 0 0 auto;
    }
    body.colen-legal .qodef-content,
    body.colen-legal .qodef-content p,
    body.colen-legal .qodef-content li {
        font-size: 16px;
    }
    body.colen-legal .qodef-content h2 {
        margin-top: 36px;
        font-size: 22px;
    }
    body.colen-legal .qodef-content h3 {
        font-size: 18px;
    }
}

/* ==========================================================================
   Tipografía corporativa de títulos: Blender Pro
   La fuente se sirve desde Elementor > Custom Fonts (familia "Blender Pro",
   pesos 400 / 500 / 500 italic / 700). Nunito Sans queda como respaldo.
   El @font-face se declara también aquí para que la fuente cargue en las
   páginas que pinta el tema sin CSS de Elementor (blog, legales, 404...).
   ========================================================================== */
@font-face {
    font-family: "Blender Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/uploads/2026/09/335787aa6f57d71cabe8eb5dc89c6d6b.woff2") format("woff2"),
         url("/wp-content/uploads/2026/09/335787aa6f57d71cabe8eb5dc89c6d6b.woff") format("woff");
}
@font-face {
    font-family: "Blender Pro";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/wp-content/uploads/2026/09/685030e1abf58bd087a4ee725d9dea6a.woff2") format("woff2"),
         url("/wp-content/uploads/2026/09/685030e1abf58bd087a4ee725d9dea6a.woff") format("woff");
}
@font-face {
    font-family: "Blender Pro";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/wp-content/uploads/2026/09/a2d2da3a89992fef013e3556d29d74bb.woff2") format("woff2"),
         url("/wp-content/uploads/2026/09/a2d2da3a89992fef013e3556d29d74bb.woff") format("woff");
}
@font-face {
    font-family: "Blender Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/uploads/2026/09/5e0837dfd600d3dfd5ccfb8ac6079dc5.woff2") format("woff2"),
         url("/wp-content/uploads/2026/09/5e0837dfd600d3dfd5ccfb8ac6079dc5.woff") format("woff");
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .elementor-heading-title,
html body .qodef-page-footer .colen-fh {
    font-family: "Blender Pro", "Nunito Sans", sans-serif;
}

/* ==========================================================================
   Tipografía corporativa de texto: Acumin (01-10-2026, sustituye a Brockman)
   Archivo subido en Elementor > Custom Fonts como familia "Acumin"
   (Acumin-Variable-Concept.ttf). OJO: el archivo actual no trae ejes
   variables (un solo peso, 400). Se declara para 100-500; por encima
   (negritas) el navegador engrosa de forma sintética. Cuando llegue el
   archivo variable real, cambiar el rango a 100 900.
   ========================================================================== */
@font-face {
    font-family: "Acumin";
    font-style: normal;
    font-weight: 100 500;
    font-display: swap;
    src: url("/wp-content/uploads/2026/10/Acumin-Variable-Concept.ttf") format("truetype");
}
html body,
html body p,
html body li,
html body dd,
html body td,
html body th,
html body blockquote,
html body label,
html body input,
html body textarea,
html body select,
html body .elementor-widget-text-editor {
    font-family: "Acumin", "Nunito Sans", sans-serif;
}
/* Textos corridos de widgets del tema que traían Ubuntu / Teko fijados:
   datos de contacto y horario (icon widget), testimonios y lista de
   características de las tablas de tarifas. Menú, botones y precios se
   mantienen en la tipografía del tema. */
html body .qodef-icon-text,
html body .qodef-testimonial-text,
html body .qodef-testimonials-author-name,
html body .qodef-pt-content li,
html body .qodef-pt-content li .colen-marca {
    font-family: "Acumin", "Nunito Sans", sans-serif !important;
}

/* Submenú (desplegable de Clases): mismo tamaño que los items principales.
   Con Blender Pro el 12px del tema quedaba demasiado pequeño. */
html body .qodef-main-menu .qodef-drop-down .second .inner ul li a,
html body .qodef-main-menu .qodef-drop-down .second .inner ul li a .item_text,
html body .qodef-drop-down .second .inner ul li a .item_text {
    font-size: 17px !important;
    line-height: 23px !important;
    letter-spacing: 1.7px !important;
}
html body .qodef-mobile-nav ul ul li a,
html body .qodef-mobile-nav ul ul li a .item_text,
html body .qodef-mobile-nav ul ul li h6 {
    font-size: 15px !important;
}

/* El tema envuelve toda la página en overflow:hidden, lo que anula cualquier
   position:sticky (menú de clases pegado). overflow:clip recorta igual el
   desbordamiento horizontal pero no crea contenedor de scroll, así que el
   sticky funciona. Navegadores sin soporte ignoran la línea y siguen como antes. */
html body .qodef-wrapper .qodef-wrapper-inner { overflow: clip !important; }
/* El tema también pone overflow-x:hidden en <body>, que lo convierte en contenedor de
   scroll y anula el sticky igualmente. En iOS Safari cualquier overflow distinto de
   visible en body rompe el gesto de scroll (la página rebota y se queda clavada), así que
   body queda en visible y el recorte horizontal se hace en <html>, que es el contenedor
   de scroll real. Los elementos fijos del tema (menú lateral, buscador) no generan
   desbordamiento, y el contenido va dentro de .qodef-wrapper-inner, que ya recorta. */
html body { overflow: visible !important; }
html { overflow-x: hidden; overflow-y: auto; }

/* ==========================================================================
   Móvil: aprovechar todo el ancho (norma del proyecto, 13/10)
   El tema encoge el contenedor de Elementor a 300 px en pantallas de ≤480 px
   (37 px de margen a cada lado en un iPhone) y encima las columnas llevan su
   padding (10 % = 30 px). Quedaban 240 px para el contenido (FAQ, textos…).
   En móvil el contenido ocupa el ancho menos 16 px por lado y las columnas no
   añaden padding lateral. Los contenedores flex (.e-con) también a 16 px.
   ========================================================================== */
@media only screen and (max-width: 767px) {
    html body .qodef-elementor-row-grid-section > .elementor-container,
    html body .elementor-widget-wrap > .elementor-element.qodef-row-grid-section,
    html body .qodef-container-inner {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
    html body .elementor-section > .elementor-container > .elementor-column > .elementor-element-populated {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body .e-con.e-parent.e-con-boxed > .e-con-inner,
    html body .e-con.e-parent:not(.e-con-boxed) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Banda de llamada a la acción del tema (qodef_call_to_action): su rejilla interior
       va a 300 px fijos y descentrada, y el botón grande (351 px) se salía por la derecha */
    html body .qodef-call-to-action-holder { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
    html body .qodef-call-to-action-holder .qodef-cta-inner,
    html body .qodef-call-to-action-holder .qodef-cta-text-holder,
    html body .qodef-call-to-action-holder .qodef-cta-button-holder {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        text-align: center;
    }
    html body .qodef-call-to-action-holder .qodef-cta-button a {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 20px !important;
        padding-right: 20px !important;
        white-space: normal;
        text-align: center;
    }
}

/* Botón «subir arriba» del tema: retirado (functions.php); por si acaso, oculto */
html body #qodef-back-to-top { display: none !important; }

/* Respuestas de las FAQ (acordeón del tema): iban en peso 300, demasiado fino con
   Acumin sobre el fondo claro #F8F7F8. Peso normal. */
html body .qodef-accordion-holder .qodef-accordion-content,
html body .qodef-accordion-holder .qodef-accordion-content p {
    font-weight: 400;
    color: #1c1c1c; /* el único negro de la web; el gris #1c1c1c seguía quedando claro aquí */
}

/* ==========================================================================
   Tarjetas de clase ([colen_clases]): número grande de fondo tras el título,
   el recurso del Section Title de /tarifas/ («01» a 150 px) que gustó al
   cliente (13/10). Es un span (no un H4 como en el tema). Toma el color del
   texto de la tarjeta (blanco en las negras, negro en las doradas) con poca
   opacidad, y el título se le monta encima por la mitad inferior.
   ========================================================================== */
.colen-clases-listado .qodef-event-list-item-content-inner { position: relative; }
/* La palabra de fondo es el nombre corto de la clase (INICIACIÓN, WOD, BUILD…);
   si no cabe, se recorta por el borde de la tarjeta como una marca de agua */
.colen-clases-listado .qodef-event-list-item-content { overflow: hidden; }
.colen-clases-listado .colen-clase-num {
    display: block;
    margin: 0 0 -40px -3px;
    font-family: "Blender Pro", "Nunito Sans", sans-serif;
    font-size: 100px;
    font-weight: 700;
    line-height: .8;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: currentColor;
    opacity: .12;
    pointer-events: none;
    user-select: none;
}
.colen-clases-listado .qodef-event-list-item-title { position: relative; z-index: 1; }
@media (max-width: 1024px) {
    .colen-clases-listado .colen-clase-num { font-size: 84px; margin-bottom: -34px; }
}
@media (max-width: 680px) {
    .colen-clases-listado .colen-clase-num { font-size: 72px; margin-bottom: -30px; }
}

/* ==========================================================================
   Menú móvil (feedback del cliente 13/10): el icono hamburguesa no se veía
   (24 px, dorado sobre blanco) y el desplegable iba en gris #9c9c9c a 13 px.
   Icono negro de 30 px con la palabra MENÚ debajo, y desplegable negro
   (#1c1c1c) con letras blancas, como pide el cliente para todo el menú.
   ========================================================================== */
@media only screen and (max-width: 1024px) {
    html body .qodef-mobile-menu-opener a {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 44px;
        min-height: 44px;
        padding: 0 6px;
        text-decoration: none;
    }
    html body .qodef-mobile-menu-opener .qodef-mobile-menu-icon,
    html body .qodef-mobile-menu-opener .qodef-mobile-menu-icon span {
        color: #1c1c1c !important;
        font-size: 30px !important;
        line-height: 1 !important;
    }
    html body .qodef-mobile-menu-opener .qodef-mobile-menu-icon::after {
        content: "Menú";
        display: block;
        margin-top: 1px;
        font-family: "Blender Pro", "Nunito Sans", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #1c1c1c;
        text-align: center;
    }
    html body .qodef-mobile-menu-opener.qodef-mobile-menu-opened .qodef-mobile-menu-icon,
    html body .qodef-mobile-menu-opener.qodef-mobile-menu-opened .qodef-mobile-menu-icon span,
    html body .qodef-mobile-menu-opener.qodef-mobile-menu-opened .qodef-mobile-menu-icon::after {
        color: #c1aa63 !important;
    }

    html body .qodef-mobile-header .qodef-mobile-nav {
        background-color: #1c1c1c;
        border-top: 2px solid #c1aa63;
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul li {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul li a,
    html body .qodef-mobile-header .qodef-mobile-nav ul li h6,
    html body .qodef-mobile-header .qodef-mobile-nav ul li a span,
    html body .qodef-mobile-header .qodef-mobile-nav ul li .item_text {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase;
        line-height: 1.3 !important;
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul li a {
        padding: 15px 0 !important;
        border-bottom: 0 !important; /* el tema pinta una línea blanca (#e1e1e1) en el enlace */
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul li a.current,
    html body .qodef-mobile-header .qodef-mobile-nav ul li a.current span,
    html body .qodef-mobile-header .qodef-mobile-nav ul li.qodef-active-item > a,
    html body .qodef-mobile-header .qodef-mobile-nav ul li.qodef-active-item > a span {
        color: #c1aa63 !important;
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul ul li a,
    html body .qodef-mobile-header .qodef-mobile-nav ul ul li a span,
    html body .qodef-mobile-header .qodef-mobile-nav ul ul li .item_text {
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: none;
        letter-spacing: .02em !important;
        color: #e6e6e6 !important;
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul ul li a {
        padding: 11px 0 11px 16px !important;
    }
    html body .qodef-mobile-header .qodef-mobile-nav ul ul li:last-child {
        border-bottom: 0;
    }
    html body .qodef-mobile-header .qodef-mobile-nav .mobile_arrow,
    html body .qodef-mobile-header .qodef-mobile-nav .mobile_arrow i {
        color: #fff !important;
        font-size: 20px !important;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
    }
}
/* Submenús en peso 600, como el menú principal */
html body .qodef-main-menu .qodef-drop-down .second .inner ul li a,
html body .qodef-main-menu .qodef-drop-down .second .inner ul li a .item_text,
html body .qodef-drop-down .second .inner ul li a .item_text,
html body .qodef-mobile-nav ul ul li a,
html body .qodef-mobile-nav ul ul li a .item_text,
html body .qodef-mobile-nav ul ul li h6 {
    font-weight: 600 !important;
}

/* Botones: +1 px sobre el tamaño del tema (Blender Pro es más pequeña) */
html body .qodef-btn .qodef-btn-text-inner:not(.qodef-btn-text-inner-icon) {
    font-size: 13px !important;   /* antes 12px */
}
html body .cf7_custom_style_1 .wpcf7-submit,
html body .qodef-btn .wpcf7-submit {
    font-size: 13px !important;   /* antes 12px (Enviar) */
}
html body .cf7_custom_style_2 .wpcf7-submit,
html body .colen-form-submit .wpcf7-submit {
    font-size: 12px !important;   /* antes 11px (Quiero mi clase de prueba) */
}
html body .woocommerce a.button,
html body .woocommerce button.button,
html body a.button.add_to_cart_button,
html body .qodef-pli-add-to-cart a.button {
    font-size: 13px !important;   /* antes 12px */
}
html body .colen-btn {
    font-size: 14px;              /* antes 13px */
}

/* Hover de botones: mismo fondo que en reposo y texto oscuro (#1c1c1c),
   como el resto de botones dorados. El tema ponía fondo casi negro
   (#29282d) en los envíos de Contact Form 7 y en botones de WooCommerce. */
html body input.wpcf7-submit:hover,
html body input.wpcf7-submit:focus {
    background-color: #c1aa63 !important;
    border-color: #c1aa63 !important;
    color: #1c1c1c !important;
}
html body .qodef-btn input.wpcf7-submit:hover,
html body .qodef-btn input.wpcf7-submit:focus {
    background-color: transparent !important;   /* el dorado lo pone el contenedor */
    border-color: transparent !important;
}
html body .woocommerce-page .qodef-content .wc-forward:not(.added_to_cart):not(.checkout-button):hover,
html body .woocommerce-page .qodef-content a.checkout-button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .qodef-pli-add-to-cart a.button:hover,
html body .qodef-product-info .qodef-pi-add-to-cart .qodef-btn.qodef-btn-solid:hover,
html body .qodef-plc-holder .qodef-plc-item .qodef-plc-add-to-cart .added_to_cart:hover,
html body .qodef-plc-holder .qodef-plc-item .qodef-plc-add-to-cart .add_to_cart_button:hover {
    background-color: #c1aa63 !important;
    border-color: #c1aa63 !important;
    color: #1c1c1c !important;
}

/* ==========================================================================
   Flecha animada a la derecha en todos los botones (solo escritorio)
   Replica el icono de los botones del tema (.qodef-btn-icon, Ionicons
   "arrow-right-c"): en hover la flecha sale por la derecha y entra otra.
   Se aplica a los botones que no la traían: .colen-btn (HTML propio),
   botón del formulario de Elementor (popup) y envío de CF7 "Quiero mi clase".
   ========================================================================== */
@media (min-width: 1025px) {
    html body .colen-btn,
    html body .elementor-field-type-submit .elementor-button,
    html body p.colen-form-submit {
        position: relative;
        overflow: hidden;
    }
    html body .colen-btn,
    html body .elementor-field-type-submit .elementor-button {
        padding-right: 58px !important;
    }
    html body p.colen-form-submit .wpcf7-submit {
        padding-right: 58px !important;
    }
    html body p.colen-form-submit {
        width: fit-content;
        max-width: 100%;
    }
    html body .colen-btn::before,
    html body .colen-btn::after,
    html body .elementor-field-type-submit .elementor-button::before,
    html body .elementor-field-type-submit .elementor-button::after,
    html body p.colen-form-submit::before,
    html body p.colen-form-submit::after {
        content: "\f10b";
        font-family: "Ionicons" !important;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        position: absolute;
        top: 50%;
        right: 20px;
        pointer-events: none;
        transition: transform .25s cubic-bezier(.86, .15, .19, .93), opacity .25s cubic-bezier(.86, .15, .19, .93), color .2s ease-in-out;
    }
    /* Flecha visible en reposo */
    html body .colen-btn::before,
    html body .elementor-field-type-submit .elementor-button::before,
    html body p.colen-form-submit::before {
        transform: translate(0, -50%);
        opacity: 1;
    }
    /* Flecha que entra en hover */
    html body .colen-btn::after,
    html body .elementor-field-type-submit .elementor-button::after,
    html body p.colen-form-submit::after {
        transform: translate(-24px, -50%);
        opacity: 0;
    }
    html body .colen-btn:hover::before,
    html body .elementor-field-type-submit .elementor-button:hover::before,
    html body p.colen-form-submit:hover::before {
        transform: translate(50px, -50%);
        opacity: 0;
    }
    html body .colen-btn:hover::after,
    html body .elementor-field-type-submit .elementor-button:hover::after,
    html body p.colen-form-submit:hover::after {
        transform: translate(0, -50%);
        opacity: 1;
    }
    /* En el envío de CF7 la flecha va sobre el input: mismo color que su texto */
    html body p.colen-form-submit::before,
    html body p.colen-form-submit::after {
        color: #fff;
        z-index: 3;   /* el input lleva z-index 2 */
    }
    html body p.colen-form-submit:hover::before,
    html body p.colen-form-submit:hover::after {
        color: #1c1c1c;
    }
}

/* ==========================================================================
   Barra superior (contacto y horario) fija al hacer scroll — solo escritorio.
   La cabecera sticky del tema aparece justo debajo de ella (46px).
   ========================================================================== */
@media (min-width: 1025px) {
    /* sticky no funciona dentro de overflow:hidden; "clip" recorta igual
       sin crear contenedor de scroll */
    html body,
    html body .qodef-wrapper-inner {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    html body .qodef-top-bar {
        position: sticky !important;
        top: 0;
        z-index: 111;
    }
    html body.admin-bar .qodef-top-bar {
        top: 32px;
    }
    html body .qodef-sticky-header,
    html body .qodef-sticky-header.header-appear {
        top: 46px !important;
    }
    html body.admin-bar .qodef-sticky-header,
    html body.admin-bar .qodef-sticky-header.header-appear {
        top: 78px !important;
    }
    /* Oculta del todo la cabecera sticky mientras no toca mostrarla
       (con el nuevo "top" asomaba por debajo de la barra superior) */
    html body .qodef-sticky-header:not(.header-appear) {
        transform: translateY(-250%) !important;
    }
    /* Cabecera sticky: con "Horarios" el menú son 8 items y, junto al logo
       ancho, no cabía en la rejilla de 1300 px; el bloque derecho (flotado)
       caía debajo de la franja blanca. Logo y menú van ahora en una sola
       fila flexible que no parte, con menos aire entre items (01/10/2026). */
    html body .qodef-sticky-header .qodef-vertical-align-containers {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    html body .qodef-sticky-header .qodef-position-left,
    html body .qodef-sticky-header .qodef-position-right {
        float: none !important;
        flex: 0 1 auto;
        min-width: 0;
    }
    html body .qodef-sticky-header .qodef-position-right-inner,
    html body .qodef-sticky-header .qodef-sticky-nav > ul {
        white-space: nowrap;
    }
    html body .qodef-sticky-header .qodef-main-menu > ul > li > a {
        padding: 0 14px !important;
    }
}

/* Portátiles pequeños (1025-1300 px, contenedor de 950 px): con las nuevas
   fuentes el menú bajaba a una segunda línea y los horarios de la barra
   superior se montaban. Se reduce el aire entre elementos, no el tamaño
   del menú. */
@media (min-width: 1025px) and (max-width: 1300px) {
    html body .qodef-page-header .qodef-main-menu > ul > li > a,
    html body .qodef-sticky-header .qodef-main-menu > ul > li > a {
        padding: 0 11px !important;
    }
    html body .qodef-top-bar .qodef-icon-text {
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    html body .qodef-top-bar .qodef-separator-widget {
        width: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
        overflow: hidden;
    }
}

/* Home, hero: texto bajo el H1 "CrossFit en Logroño" (widget 4d63a4a).
   El widget traía 19px / line-height 50px en línea: con Brockman partía en
   dos líneas muy separadas. En escritorio va en una sola línea con un
   tamaño que escala con el ancho; en portátiles pequeños (<1300) puede
   partir, pero con interlineado normal. */
@media (min-width: 1025px) {
    html body .elementor-element-4d63a4a {
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .elementor-element-4d63a4a p.qodef-st-text {
        font-size: clamp(14px, 1.15vw, 18px) !important;
        line-height: 1.5 !important;
        margin-top: 14px !important;
    }
}
@media (min-width: 1300px) {
    html body .elementor-element-4d63a4a p.qodef-st-text {
        white-space: nowrap;
    }
}

/* Restos detectados en la auditoría de fuentes (28-09-2026) */
html body .qodef-pagination a,
html body .qodef-pagination span,
html body .qodef-blog-pagination a,
html body .qodef-blog-pagination span,
html body .woocommerce-pagination a,
html body .woocommerce-pagination span,
html body a.qodef-pag-active,
html body a.qodef-pag-inactive,
html body .woocommerce-tabs ul.tabs li a,
html body .qodef-out-of-stock,
html body .onsale {
    font-family: "Blender Pro", "Nunito Sans", sans-serif !important;
}
html body .product_meta,
html body .product_meta a,
html body .product_meta .posted_in,
html body .product_meta .tagged_as,
html body .qodef-st-text {
    font-family: "Acumin", "Nunito Sans", sans-serif !important;
}

/* Menú (principal, desplegables, móvil, footer) y botones: Blender Pro */
html body .qodef-main-menu a,
html body .qodef-main-menu .item_text,
html body .qodef-drop-down a,
html body .qodef-mobile-nav a,
html body .qodef-mobile-nav .item_text,
html body .qodef-fullscreen-menu a,
html body .qodef-page-footer .menu a,
html body .item_text,
html body .qodef-btn,
html body .qodef-btn-text-inner,
html body .qodef-button,
html body a.button,
html body button,
html body .button,
html body input[type="submit"],
html body input[type="button"],
html body .elementor-button,
html body .elementor-button-text,
html body .colen-btn,
html body .qodef-pt-title,
html body .qodef-pt-prices,
html body .qodef-pt-price,
html body .qodef-pt-value,
html body .qodef-pt-mark,
html body .qodef-pr-item-number {
    font-family: "Blender Pro", "Nunito Sans", sans-serif !important;
}

/* ==========================================================================
   Barra de copyright: © a la izquierda · "Powered by" + LogroSEO en el
   centro · redes a la derecha (14/10/2026). El bloque se imprime dentro de
   la columna 1 (functions.php, colen_powered_by_logroseo) y en escritorio
   se centra en la fila con posición absoluta (las dos columnas del tema
   siguen como están: © a la izquierda, redes a la derecha).
   ========================================================================== */
html .qodef-footer-bottom-holder .qodef-grid-row {
    position: relative;
}
html .qodef-footer-bottom-holder .qodef-grid-row > .qodef-grid-col-6 {
    position: static;
}
.colen-powered {
    text-align: center;
}
@media (min-width: 768px) {
    .colen-powered {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
}
.colen-powered a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #B3B3B3;
    text-decoration: none;
    opacity: .85;
    transition: opacity .2s;
}
.colen-powered a:hover,
.colen-powered a:focus {
    opacity: 1;
    color: #ffffff;
}
.colen-powered-txt {
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
/* Isotipo SẼO de LogroSEO en blanco sobre transparente (adjunto 10296) */
.colen-powered img {
    width: 40px;
    height: auto;
    display: block;
}
@media (max-width: 767px) {
    .colen-powered {
        padding: 6px 0 14px;
    }
    html .qodef-footer-bottom-holder .qodef-grid-row > .qodef-grid-col-6,
    html .qodef-footer-bottom-holder .widget,
    html .qodef-footer-bottom-holder .textwidget p {
        text-align: center !important;
    }
}

/* ==========================================================================
   Letra pequeña de apoyo (notas bajo tarifas, condiciones...) (15/10/2026)
   Se veía demasiado pequeña (12,5 px). En toda la web a 14 px / 1,6.
   ========================================================================== */
html body .qodef-content small,
html body .qodef-content .elementor-widget-text-editor small,
html body .colen-nota,
html body .lp-nota {
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================================
   DISEÑO UNIFICADO: ritmo vertical, ancho de contenido y bandas CTA
   (auditoría de 16 páginas, 15/10/2026). La home la lleva el cliente.

   1) Ritmo vertical. Todo bloque de contenido lleva una clase del sistema de
      secciones (colen-sec / -top / -mid / -bot) y su texto queda SIEMPRE a
      96 px del borde en escritorio y 64 px en ≤1024 px (lo fija colen-sec).
      Se anulan los rellenos sueltos que cada contenedor traía de Elementor
      (10, 40, 60, 70, 80, 90 px) y el margen del último párrafo o elemento de
      lista, que se sumaban: se medían de 96 a 240 px.
   2) Ancho de contenido: 1140 px en toda la web (landings, páginas antiguas
      con secciones clásicas y texto del hero alineado con el contenido).
   3) Bandas CTA: una sola estructura (título + texto + «Reservar clase de
      prueba» + «Pregúntanos por WhatsApp», centrado), ver colen_cta_banda().
   ========================================================================== */
body:not(.home) :is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .e-con-inner,
body:not(.home) :is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .e-con-inner > .e-con:not(.colen-hor-card),
body:not(.home) :is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot).e-con-full > .e-con:not(.colen-hor-card) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:not(.home) :is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) :is(p, ul, ol, li):last-child {
    margin-bottom: 0;
}

/* Secciones clásicas de Elementor (páginas antiguas: Tarifas, Clases,
   Horarios…) con clase del sistema: mismo ancho y mismo ritmo que los
   contenedores de las landings */
body:not(.home) .elementor-section:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:not(.home) .elementor-section:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .elementor-container > .elementor-col-100 > .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (min-width: 768px) {
    body:not(.home) .elementor-section:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .elementor-container {
        width: 100% !important;
        max-width: 1140px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 768px) and (max-width: 1380px) {
    body:not(.home) .elementor-section:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .elementor-container {
        max-width: calc(1140px + 80px) !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body:not(.home) .elementor-section:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .elementor-container {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}
/* Móvil: un solo margen lateral de 16 px para todo el texto (el estándar de
   los contenedores; antes salía 16, 26, 32 o 38 px según el relleno que
   trajera cada contenedor) */
@media (max-width: 767px) {
    body:not(.home) .elementor-section:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .elementor-container {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body:not(.home) .e-con:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot).e-con-boxed {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body:not(.home) .e-con:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot) > .e-con-inner,
    html body:not(.home) .e-con:is(.colen-sec, .colen-sec-top, .colen-sec-mid, .colen-sec-bot).e-con-full:not(.colen-galeria) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Bloques oscuros a dos columnas (reserva, app): sin relleno lateral extra en las columnas */
    html body:not(.home) .e-con.colen-sec-oscuro > .e-con-inner > .e-con {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Texto del hero alineado con la columna de contenido (antes empezaba en
   x = 52 px y el contenido de debajo en x = 135 px a 1440) */
@media (min-width: 1025px) {
    body:not(.home) .colen-hero .colen-hero-titulo {
        padding-left: max(40px, calc((100% - 1140px) / 2)) !important;
        max-width: calc(708px + max(40px, (100% - 1140px) / 2)) !important;
    }
}

/* FAQ (acordeón del tema) a ancho fijo: dentro de un contenedor flex
   centrado el widget tomaba el ancho de su contenido, y al abrir o cerrar
   una pregunta todo el bloque se estrechaba y ensanchaba (725 → 421 px).
   Feedback 01/10, punto 8. */
.e-con > .elementor-widget-qodef_accordion,
.e-con > .e-con-inner > .elementor-widget-qodef_accordion,
.elementor-widget-qodef_accordion {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}
.elementor-widget-qodef_accordion .qodef-accordion-holder,
.elementor-widget-qodef_accordion .qodef-accordion-title,
.elementor-widget-qodef_accordion .qodef-accordion-content {
    width: 100% !important;
    box-sizing: border-box;
}

/* Horarios generales: la columna de la hora heredaba el interlineado de
   párrafo (26,3 px + 14 px de relleno) y cada fila medía al menos 54 px
   aunque la clase ocupara una sola línea (33 px); con una sola clase en la
   celda, la caja se estiraba hasta llenar ese alto. La fila se ajusta ahora
   a su contenido. (16/10/2026) */
table.colen-horario th,
table.colen-horario td {
    line-height: 1.25 !important;
}
table.colen-horario tbody th.h-hora {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: middle;
}

/* Banda CTA estándar */
body:not(.home) .colen-cta-banda .colen-cta-titulo {
    max-width: 760px;
    margin: 0 auto 12px !important;
}
body:not(.home) .colen-cta-banda .colen-cta-texto {
    max-width: 620px;
    margin: 0 auto 26px !important;
}
body:not(.home) .colen-cta-banda .colen-hero-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 12px;
    margin: 0;
}
@media (max-width: 767px) {
    body:not(.home) .colen-cta-banda .colen-hero-botones {
        flex-direction: column;
        align-items: stretch;
    }
    body:not(.home) .colen-cta-banda .colen-hero-botones .colen-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   Nombres de las clases (WOD, BUILD, HYROX, OPEN BOX, YOGA, INICIACIÓN):
   siempre en mayúsculas y enlazados a su página (colen_clases_enlazadas() en
   functions.php). Norma global, 15/10/2026.
   ========================================================================== */
.colen-clase-link,
.colen-clase-nombre {
    text-transform: uppercase;
}
.colen-clase-link {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.colen-clase-link:hover,
.colen-clase-link:focus {
    border-bottom-color: transparent;
}

/* ==========================================================================
   Bloques de testimonios con foto de fondo (parallax del tema) (15/10/2026)
   - La foto no siempre cubre todo el ancho: el hueco queda en el negro de la
     web (#1c1c1c) en lugar de blanco, ya que va entre bloques negros.
   - Velo oscuro sobre la foto para que el texto blanco se lea bien aunque la
     imagen sea clara. Vale para todos los testimonios menos la home (cliente).
   ========================================================================== */
body:not(.home) .qodef-parallax-row-holder:has(.qodef-testimonials-holder) {
    position: relative;
    background-color: #1c1c1c !important;
}
body:not(.home) .qodef-parallax-row-holder:has(.qodef-testimonials-holder)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 28, .55);
    pointer-events: none;
    z-index: 0;
}
body:not(.home) .qodef-parallax-row-holder:has(.qodef-testimonials-holder) > .elementor-container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Pie: más aire entre las tres columnas y un dato por línea en «¿Dónde
   estamos?» (teléfono, dirección y cada horario). Los enlaces con icono del
   tema son inline y se juntaban dos en la misma línea. (15/10/2026)
   ========================================================================== */
@media (min-width: 1025px) {
    html .qodef-page-footer .qodef-footer-top-holder .qodef-grid-row {
        margin-left: -35px;
        margin-right: -35px;
    }
    html .qodef-page-footer .qodef-footer-top-holder .qodef-grid-row > .qodef-column-content {
        padding-left: 35px;
        padding-right: 35px;
    }
}
/* El icono flotante de WhatsApp (escritorio, abajo a la derecha) tapaba los
   iconos de redes de la barra de copyright */
@media (min-width: 1025px) {
    html .qodef-footer-bottom-holder .qodef-grid-row > .qodef-grid-col-6:last-child {
        padding-right: 84px;
    }
}
html .qodef-page-footer .qodef-icon-widget-holder {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 12px !important;
    line-height: 1.5;
}
html .qodef-page-footer .qodef-icon-widget-holder .qodef-icon-element {
    flex: 0 0 20px;
    margin: 3px 0 0 !important;
    text-align: center;
}
html .qodef-page-footer .qodef-icon-widget-holder .qodef-icon-text {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Secciones clásicas de Elementor a dos columnas (50/50) en escritorio:
   más aire entre columnas (de 20 a 80 px) para que el texto de la izquierda
   no se pegue al de la derecha (p. ej. «Qué incluye tu membresía» en
   Tarifas). La home la lleva el cliente y queda fuera. (15/10/2026)
   ========================================================================== */
@media (min-width: 1025px) {
    body:not(.home) .elementor-section > .elementor-container > .elementor-col-50:first-child > .elementor-widget-wrap {
        padding-right: 40px;
    }
    body:not(.home) .elementor-section > .elementor-container > .elementor-col-50 + .elementor-col-50 > .elementor-widget-wrap {
        padding-left: 40px;
    }
}

/* ==========================================================================
   Section Title con dibujo decorativo detrás (15/10/2026)
   Sustituye al «01» grande del tema (que iba ENCIMA del título, no detrás).
   Mismo recurso que las tarjetas de clase: un elemento claro que asoma por
   detrás del título como una sombra. En Elementor, al widget Section Title:
   «colen-st-deco» + el dibujo: colen-deco-pesa (kettlebell), colen-deco-disco
   (disco olímpico) o colen-deco-comba (comba). Dejar vacío «Title Number».
   ========================================================================== */
.colen-st-deco .qodef-section-title-holder {
    position: relative;
    padding-top: 104px;
}
/* Todos los dibujos miden lo mismo: 150 px de alto (cada SVG lleva un viewBox
   ajustado a su dibujo y trazo de grosor fijo). Solo se cruzan con la parte
   alta del título, nunca con la entradilla. */
.colen-st-deco .qodef-section-title-holder::before {
    content: "";
    position: absolute;
    top: 0;
    left: -14px;
    width: 160px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%;
    pointer-events: none;
    z-index: 0;
}
.colen-st-deco .qodef-st-inner {
    position: relative;
    z-index: 1;
}
.colen-st-deco .qodef-st-title-number {
    display: none !important;
}
.colen-deco-pesa .qodef-section-title-holder::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 19 60 78' fill='none' stroke='%23E4E3E3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M30 47C22 13 78 13 70 47'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M36 42C32 24 68 24 64 42'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='50' cy='66' r='28'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M38 94h24'/%3E%3C/svg%3E");
}
.colen-deco-disco .qodef-section-title-holder::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 92 92' fill='none' stroke='%23E4E3E3' stroke-width='3'%3E%3Ccircle vector-effect='non-scaling-stroke' cx='50' cy='50' r='44'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='50' cy='50' r='34'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='50' cy='50' r='9'/%3E%3C/svg%3E");
}
.colen-deco-comba .qodef-section-title-holder::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 10 84 74' fill='none' stroke='%23E4E3E3' stroke-width='3' stroke-linecap='round'%3E%3Crect vector-effect='non-scaling-stroke' x='10' y='12' width='9' height='26' rx='4'/%3E%3Crect vector-effect='non-scaling-stroke' x='81' y='12' width='9' height='26' rx='4'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M14.5 38C14 92 86 92 85.5 38'/%3E%3C/svg%3E");
}
/* El dibujo (150 px) solo pisa los ~40 px de arriba del título.
   El tema pone padding:0 !important al holder por debajo de 768 px. */
html body .colen-st-deco .qodef-section-title-holder {
    padding-top: 110px !important;
}
@media (max-width: 768px) {
    html body .colen-st-deco .qodef-section-title-holder {
        padding-top: 88px !important;
    }
    .colen-st-deco .qodef-section-title-holder::before {
        left: -8px;
        width: 130px;
        height: 120px;
    }
}


/* ==========================================================================
   Párrafos sobre fondo claro (norma del cliente, 14/10/2026)
   Acumin · peso 400 · 15 px · interlineado 26,3 px · espaciado 0 · #1c1c1c.
   El tema pone el cuerpo a peso 300 y el texto de los section title a 16 px;
   aquí se igualan todos los textos corridos. El color #1c1c1c lo fijan las
   reglas de "Color de texto accesible" (arriba); las secciones oscuras
   conservan su color claro porque sus reglas van por clase y pesan más.
   ========================================================================== */
html body,
html body p,
html body dd,
html body td,
html body th,
html body blockquote,
html body label,
html body .qodef-st-text,
html body .qodef-il-text,
html body .qodef-post-excerpt,
html body .qodef-post-text li,
html body .qodef-content .elementor-widget-text-editor,
html body .qodef-content .elementor-widget-text-editor p,
html body .qodef-content .elementor-widget-text-editor li,
html body .qodef-accordion-holder .qodef-accordion-content,
html body .qodef-accordion-holder .qodef-accordion-content p,
html body .qodef-accordion-holder .qodef-accordion-content li,
html body .colen-checks li,
html body .chm-lista li,
html body .colen-formatos li,
html body .cs-destacado li,
html body .cs-destacado p,
html body .colen-mov p,
html body .colen-checks p,
html body .colen-nota,
html body .colen-clases-mas,
html body .qodef-iwt-text,
html body .qodef-cta-text p,
html body .qodef-section-title-holder .qodef-st-text,
html body h5.qodef-st-text,
html body .elementor .e-paragraph-base {
    font-family: "Acumin", "Nunito Sans", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26.3px;
    letter-spacing: 0;
}

/* La entradilla del hero de las landings de clase se mantiene como estaba
   (17 px): es el texto principal sobre el negro del hero, no un párrafo de
   contenido. */
html body .colen-hero .colen-hero-sub {
    font-size: 17px;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Párrafos sobre fondos oscuros que NO son el negro #1c1c1c (14/10/2026):
   fotos con velo (heros, parallax, testimonios), dorado #C1AA63 (tarjetas
   de clase, bandas CTA, bloques de la landing) y grises del tema. Ahí la
   Acumin fina pierde cuerpo, así que sube un punto: 16 px / 27,3 px, mismo
   peso 400 (la fuente actual solo trae un peso; una negrita sería sintética).
   Para cualquier sección nueva de Elementor con fondo de color o foto basta
   con añadirle la clase "colen-fondo-oscuro".
   -------------------------------------------------------------------------- */
html body .lp-hero p,
html body .lp-hero li,
html body .qodef-parallax-row-holder p,
html body .qodef-parallax-row-holder li,
html body .qodef-parallax-row-holder .qodef-st-text,
html body .lp-reserva p,
html body .lp-reserva li,
html body .lp-cta p,
html body .lp-acc-b p,
html body .lp-acc-b li,
html body .qodef-event-list-holder .qodef-event-list-item-holder:nth-child(4n+2) .qodef-event-list-excerpt,
html body .qodef-event-list-holder .qodef-event-list-item-holder:nth-child(4n+3) .qodef-event-list-excerpt,
html .elementor-element-2166645 .qodef-cta-text p,
html body .colen-fondo-oscuro p,
html body .colen-fondo-oscuro li,
html body .colen-fondo-oscuro .qodef-st-text,
html body .colen-fondo-oscuro .elementor-widget-text-editor,
html body .colen-fondo-oscuro .elementor-widget-text-editor p {
    font-size: 16px;
    line-height: 27.3px;
    letter-spacing: 0;
}

/* ==========================================================================
   CABECERAS UNIFICADAS (16/10/2026) · feedback 01/10, punto 4
   A) Franja negra (.colen-franja) en Tarifas, Horarios, Clases, Contacto,
      El Box, Equipo, blog (listado, categorías y entradas) y legales:
      misma altura, etiqueta dorada + H1 + entradilla, menú transparente encima.
   B) Landings de clase (.colen-hero sin imagen): misma altura en escritorio.
   Fuera: home (slider) y tienda.
   ========================================================================== */
.colen-franja {
    /* 21/10: la altura la da el bloque de texto, que es igual en todas las
       páginas (≈ 312 px en escritorio); antes 400 px con el texto abajo */
    min-height: 0;
    display: flex;
    align-items: flex-end;
    background: #1c1c1c radial-gradient(circle at 85% 20%, rgba(193, 170, 99, .16) 0, rgba(193, 170, 99, 0) 45%);
}
/* el mismo rayado diagonal que las secciones oscuras, muy sutil */
.colen-franja::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 18px);
    pointer-events: none;
}
.colen-franja .colen-bhero-inner {
    width: 1140px;
    max-width: calc(100% - 80px);
    /* 21/10: aire bajo el menú (106 px) reducido a una cuarta parte (44 → 11 px) */
    padding: 117px 0 56px;
}
/* 21/10: el bloque de texto mide lo mismo en todas las páginas: etiqueta +
   H1 de una línea + entradilla de dos líneas (los textos se han ajustado a
   esa medida; si alguno se pasara, se recorta en vez de crecer) */
.colen-franja .colen-bhero-txt {
    width: 100%;
    max-width: 760px;
    gap: 12px;
}
html .colen-franja h1 {
    text-shadow: none;
    min-height: 1.12em;
}
html .colen-franja .colen-bhero-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.1em; /* dos líneas a 1.55 */
}
.colen-franja .colen-bhero-eyebrow {
    min-height: 1.3em;
}
@media (max-width: 1024px) {
    .colen-franja {
        min-height: 0;
    }
    /* en tablet y móvil la cabecera del tema no es transparente: la franja empieza debajo */
    body.colen-con-franja .qodef-content {
        margin-top: 0 !important;
    }
    /* en pantallas estrechas la entradilla ocupa las líneas que necesite (no se recorta) */
    html .colen-franja .colen-bhero-sub {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
        min-height: 0;
    }
    .colen-franja .colen-bhero-inner {
        max-width: calc(100% - 56px);
        padding: 56px 0 48px;
    }
}
@media (max-width: 767px) {
    .colen-franja .colen-bhero-inner {
        width: auto;
        max-width: none;
        padding: 44px 16px 40px;
    }
}
/* Tarifas, cabecera de la tabla en móvil: el botón «Ver las clases» se pegaba
   al texto (el widget-wrap lleva margin-bottom -12 px) */
@media (max-width: 767px) {
    .colen-tarifas-cab > .elementor-container > .elementor-column + .elementor-column {
        margin-top: 22px;
    }
}
/* Entradas del blog: la imagen destacada abre el artículo */
body.colen-blog-entrada .qodef-blog-single article > .qodef-post-content > .qodef-post-heading {
    display: block !important;
    margin: 0 0 32px !important;
    line-height: 0;
}
body.colen-blog-entrada .qodef-blog-single .qodef-post-image {
    display: block !important;
    margin: 0 !important;
}
body.colen-blog-entrada .qodef-blog-single .qodef-post-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 2px;
}
/* Landings de clase: misma altura de hero en escritorio (referencia: Iniciación) */
@media (min-width: 1025px) {
    body:not(.home) .colen-hero.e-con:not(:has(.colen-hero-img)) {
        min-height: 510px !important;
    }
}

/* ==========================================================================
   SLIDER DEL HERO DE LA HOME (16/10/2026) · [colen_hero_slider]
   colen-hero-slider.php + colen-hero-slider.js. Código propio, sin plugin.
   A sangre bajo la cabecera transparente (106 px) y la barra superior (46 px).
   ========================================================================== */
.colen-hs {
    --hs-alto: clamp(620px, calc(100svh - 46px), 980px);
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: var(--hs-alto);
    overflow: hidden;
    background: #1c1c1c;
    color: #fff;
    isolation: isolate;
}
.colen-hs-pista,
.colen-hs-slide,
.colen-hs-media,
.colen-hs-velo {
    position: absolute;
    inset: 0;
}
.colen-hs-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.colen-hs-slide.es-activa {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.1s ease, visibility 0s;
    z-index: 1;
}
.colen-hs-media {
    overflow: hidden;
}
.colen-hs .colen-hs-img,
.colen-hs-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}
/* Zoom lento de la foto mientras está activa */
.colen-hs .colen-hs-img {
    transform: scale(1.08);
    transition: transform 9s ease-out, opacity .8s ease;
    z-index: 2;
}
.colen-hs-slide.es-activa .colen-hs-img {
    transform: scale(1);
}
/* Vídeo debajo de la foto; la foto se desvanece cuando el vídeo ya se reproduce */
.colen-hs-video {
    z-index: 1;
    pointer-events: none;
}
.colen-hs-media.con-video .colen-hs-img {
    opacity: 0;
}
.colen-hs-yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, calc(var(--hs-alto) * 16 / 9));
    height: max(100%, calc(100vw * 9 / 16));
    transform: translate(-50%, -50%) scale(1.18); /* recorta los bordes donde YouTube pinta su interfaz */
    border: 0;
    pointer-events: none;
}
.colen-hs-velo {
    z-index: 3;
    background:
        linear-gradient(90deg, rgba(28, 28, 28, .86) 0%, rgba(28, 28, 28, .55) 42%, rgba(28, 28, 28, .12) 78%),
        linear-gradient(0deg, rgba(28, 28, 28, .9) 0%, rgba(28, 28, 28, 0) 38%),
        linear-gradient(180deg, rgba(28, 28, 28, .55) 0%, rgba(28, 28, 28, 0) 26%);
}
.colen-hs-contenido {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 196px; /* deja sitio a la navegación y, debajo, al CTA flotante */
    padding: 0 max(40px, calc((100% - 1140px) / 2));
}
.colen-hs-caja {
    max-width: 760px;
}
html body .colen-hs .colen-hs-ante {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #C1AA63 !important;
}
html body .colen-hs .colen-hs-titulo {
    margin: 0 0 18px !important;
    padding: 0 !important;
    font-family: "Blender Pro", "Nunito Sans", sans-serif !important;
    font-size: clamp(40px, 5.4vw, 78px) !important;
    line-height: .98 !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase;
    color: #fff !important;
    text-wrap: balance;
}
html body .colen-hs .colen-hs-texto {
    max-width: 560px;
    margin: 0 0 26px !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .9) !important;
}
html body .colen-hs .colen-hs-enlace {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid #C1AA63;
    transition: color .2s ease, gap .2s ease;
}
html body .colen-hs .colen-hs-enlace:hover,
html body .colen-hs .colen-hs-enlace:focus-visible {
    color: #C1AA63 !important;
    gap: 18px;
}
.colen-hs-flecha {
    width: 18px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Entrada escalonada del texto */
.colen-hs-caja > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.colen-hs-slide.es-activa .colen-hs-caja > * {
    opacity: 1;
    transform: none;
}
.colen-hs-slide.es-activa .colen-hs-caja > :nth-child(1) { transition-delay: .35s; }
.colen-hs-slide.es-activa .colen-hs-caja > :nth-child(2) { transition-delay: .5s; }
.colen-hs-slide.es-activa .colen-hs-caja > :nth-child(3) { transition-delay: .65s; }
.colen-hs-slide.es-activa .colen-hs-caja > :nth-child(4) { transition-delay: .8s; }

/* Navegación: barras de progreso con número y nombre, flechas y pausa */
.colen-hs-nav {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 96px; /* el CTA flotante de escritorio ocupa de 28 a 78 px del borde */
    padding: 0 max(40px, calc((100% - 1140px) / 2));
}
.colen-hs-nav-in {
    display: flex;
    align-items: flex-end;
    gap: 32px;
}
.colen-hs-puntos {
    flex: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 18px;
}
html body .colen-hs .colen-hs-punto {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 10px;
    padding: 0 !important;
    margin: 0;
    background: none !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .55);
    text-align: left;
    cursor: pointer;
    font-family: "Blender Pro", "Nunito Sans", sans-serif;
    transition: color .2s ease;
}
.colen-hs-punto:hover,
.colen-hs-punto.es-activa {
    color: #fff !important;
}
.colen-hs-punto-n {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #C1AA63;
}
.colen-hs-punto-t {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.colen-hs-barra {
    grid-column: 1 / -1;
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}
.colen-hs-barra-in {
    position: absolute;
    inset: 0;
    background: #C1AA63;
    transform: scaleX(0);
    transform-origin: left center;
}
.colen-hs-mandos {
    display: flex;
    gap: 8px;
}
html body .colen-hs .colen-hs-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 50%;
    background: transparent !important;
    color: #fff;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
html body .colen-hs .colen-hs-btn:hover,
html body .colen-hs .colen-hs-btn:focus-visible {
    border-color: #C1AA63 !important;
    color: #C1AA63;
}
.colen-hs-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background: currentColor;
}
.colen-hs-prev::before,
.colen-hs-next::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 5 8l5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 5 8l5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.colen-hs-next::before {
    transform: scaleX(-1);
}
.colen-hs-pausa::before {
    width: 12px;
    height: 12px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1h3v10H2zM7 1h3v10H7z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1h3v10H2zM7 1h3v10H7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.colen-hs-pausa.esta-pausado::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1l9 5-9 5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1l9 5-9 5z'/%3E%3C/svg%3E");
}

/* Tablet y portátil pequeño */
@media (max-width: 1024px) {
    .colen-hs {
        --hs-alto: clamp(560px, calc(100svh - 70px), 860px);
    }
    .colen-hs-contenido,
    .colen-hs-nav {
        padding: 0 28px;
    }
    /* en tablet y móvil el CTA es la barra inferior fija, fuera del slider */
    .colen-hs-contenido {
        bottom: 150px;
    }
    .colen-hs-nav {
        bottom: 44px;
    }
}
/* Móvil: texto abajo, barras sin nombre, sin flechas (se desliza con el dedo) */
@media (max-width: 767px) {
    .colen-hs {
        --hs-alto: clamp(540px, calc(100svh - 70px), 760px);
    }
    .colen-hs-velo {
        background:
            linear-gradient(0deg, rgba(28, 28, 28, .95) 0%, rgba(28, 28, 28, .6) 45%, rgba(28, 28, 28, .15) 75%),
            linear-gradient(180deg, rgba(28, 28, 28, .5) 0%, rgba(28, 28, 28, 0) 25%);
    }
    .colen-hs-contenido {
        bottom: 96px;
        padding: 0 16px;
    }
    .colen-hs-nav {
        bottom: 28px;
        padding: 0 16px;
    }
    .colen-hs-nav-in {
        gap: 14px;
        align-items: center;
    }
    .colen-hs-puntos {
        gap: 8px;
    }
    .colen-hs-punto-t,
    .colen-hs-prev,
    .colen-hs-next {
        display: none !important;
    }
    html body .colen-hs .colen-hs-punto {
        row-gap: 8px;
        min-height: 44px;
        align-content: center;
    }
    html body .colen-hs .colen-hs-titulo {
        font-size: clamp(34px, 10vw, 46px) !important;
        margin-bottom: 14px !important;
    }
    html body .colen-hs .colen-hs-texto {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }
}
/* Sin animaciones si el usuario lo pide (y el pase arranca en pausa) */
@media (prefers-reduced-motion: reduce) {
    .colen-hs-slide,
    .colen-hs .colen-hs-img,
    .colen-hs-caja > * {
        transition: none !important;
    }
    .colen-hs .colen-hs-img {
        transform: none !important;
    }
}