/*
 Theme Name:   Edubin Child
 Theme URI:    https://themeforest.net/item/edubin-education-lms-wordpress-theme/24037792
 Description:  Education LMS WordPress Theme Edubin Child Theme
 Author:       Pixelcurve
 Author URI:   https://themeforest.net/user/pixelcurve
 Template:     edubin
 Version:      1.0.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Tags:          custom-header, custom-logo, blog, theme-options
 Text Domain:  edubin-child

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
*/

/* =====================================================================
   Sensei course cards — uniform 16:9 image height
   Overrides the theme's fixed height: 200px/250px on .course__media img.
   Applies only to the Edubin Sensei widget wrapper (.tpc-sensei-archive-courses).
   ===================================================================== */
.tpc-sensei-archive-courses a.course-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.tpc-sensei-archive-courses a.course-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Misma proporción 16:9 para las tarjetas SIN video previo en cualquier
   contexto (home rows, carruseles .dr-path-track): iguala su altura a la
   de las tarjetas con video, cuyo wrapper .droneando-course-video-card
   (MU plugin) ya impone 16:9. El hijo directo (>) excluye justamente esas
   tarjetas con video, donde a.course-thumb va anidado más adentro. */
.edubin-course .course__media > a.course-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.edubin-course .course__media > a.course-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* =====================================================================
   Course category badge — move from top-left to bottom-right
   Parent rule (global-courses.css) anchors .cat_badge_level at
   top:25px / left:30px. Re-anchor to the bottom-right corner, mirroring
   the original offsets. The wishlist heart stays at top-right, so the
   two never collide.

   !important is required here: WP Rocket's CSS delivery optimization
   re-injects global-courses.css AFTER this stylesheet in the rendered
   page, so without it top/left (parent, loaded later) and bottom/right
   (child, never overridden) all end up set at once — an over-constrained
   absolute box that stretches to fill top..bottom/left..right instead of
   sizing to content.
   ===================================================================== */
.edubin-course .cat_badge_level {
    top: auto !important;
    bottom: 25px !important;
    left: auto !important;
    right: 30px !important;
}

/* =====================================================================
   Course cards — equal height in a row, regardless of title length.
   Parent flex/grid rows (.edubin-row, or our own home flex rows) already
   stretch each column wrapper to the tallest sibling (flex default
   align-items:stretch). What was missing: the card itself never filled
   that stretched wrapper height, so a longer title just made ITS card
   taller while siblings kept their natural (shorter) height — uneven
   card bottoms in the same row.

   height:100% on .edubin-course only takes effect when an ancestor in the
   chain has a definite height (the stretched flex/grid wrapper) — a no-op
   elsewhere, so this is safe wherever this card renders (home rows,
   /cursos/ archive grid).
   ===================================================================== */
.edubin-course {
    height: 100%;
}

.edubin-course .course__container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.edubin-course .course__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.edubin-course .course__content--info {
    flex: 1 1 auto;
}

/* =====================================================================
   Curso single en móvil — contenido a ancho casi completo (10px/lado)
   El temario (.wp-block-sensei-lms-course-outline) quedaba a ~60px de
   cada borde: 15px netos del grid (main.css: container 15 − row 15 +
   col 15) + 45px de .post-wrapper (global-courses.css:1699, sin
   override móvil) + 15px de padding-right en .edubin-course-single-wrap
   (sensei.css:37).

   Grid a 10px por lado (container 15 − row 15 + col 10 = 10px del
   viewport); .post-wrapper conserva 15px internos para que el texto no
   toque el borde de la tarjeta (texto a 25px de pantalla), y el temario
   añade 5px de margen propio para quedar a 30px de pantalla.
   Para ajustar el aire del bloque, tocar SOLO ese margen:
   −15px = 10px de gap · −10px = 15px · 0 = 25px · 5px = 30px.

   !important solo donde el selector empata en especificidad con el del
   padre (WP Rocket re-inyecta el CSS del padre después de este archivo,
   ver nota del badge más arriba).
   ===================================================================== */
@media (max-width: 991.98px) {
    .single-course-layout-01 .edubin-col-lg-8,
    .single-course-layout-01 .edubin-col-lg-4 {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.single.sensei .edubin-course-single-wrap {
        padding-right: 0 !important;
    }

    .single-course-layout-01 .post-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .single-course-layout-01 .post-wrapper .wp-block-sensei-lms-course-outline {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/* =====================================================================
   Fix: módulos del temario recortados tras redimensionar/rotar
   El JS de Sensei (blocks/frontend.js) mide la altura del módulo UNA
   vez en window.load y la fija como max-height inline (y la re-aplica
   al expandir desde una closure). No recalcula en resize: si la ventana
   se estrecha, los títulos hacen wrap, el contenido crece y el
   max-height viejo lo recorta (overflow:hidden).

   Cuando el módulo está expandido (sin .sensei-collapsed) imponemos un
   tope holgado que nunca recorta. !important es imprescindible aquí:
   debe ganar al style inline que pone el JS. Al colapsar, la clase
   .sensei-collapsed desactiva esta regla y el max-height:0 del JS
   vuelve a mandar, así la animación de plegado sigue funcionando.
   ===================================================================== */
.wp-block-sensei-lms-course-outline .sensei-collapsible__content:not(.sensei-collapsed) {
    max-height: 3000px !important;
}

/* =====================================================================
   Footer copyright: mantener el menú legal visible en móvil
   Edubin oculta la columna derecha del footer-bottom (ubicación
   footer_menu, clases .text-right.text-ml-left) con display:none en
   <=576px (main.css del padre). El toggle del Customizer "Show
   Copyright Menu On Small Device?" no hace nada: el setting
   show_copyright_menu no se lee en ninguna parte del tema. Este
   override es la única vía sin tocar el padre; el !important debe
   ganar a su display:none dentro del mismo breakpoint.
   ===================================================================== */
@media (max-width: 576px) {
    .footer-bottom .site-info .text-right.text-ml-left {
        display: block !important;
        text-align: center !important;
        margin-top: 12px;
    }
    /* el ul trae text-align:right propio; no basta con centrar la columna */
    .footer-bottom .site-info .social-navigation ul {
        text-align: center;
    }
}

/* Marca en el copyright: logo Droneando + año, alineados a la izquierda.
   El logo del widget es logo-droneando-blanco.png (texto blanco + barra
   azul sobre transparente), generado a partir del logo oficial porque
   este es gris oscuro con fondo blanco OPACO: sobre el navy #021d3a
   quedaba un rectángulo blanco. */
.footer-bottom .site-info .dr-footer-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.footer-bottom .site-info .dr-footer-brand img {
    height: 24px;
    width: auto;
}
@media (max-width: 1199.98px) {
    /* Las columnas .edubin-col-md-6 (tema padre) pasan a 50/50 recién a
       partir de 768px, y el contenedor .edubin-container es fluido (100%
       del viewport) hasta que Elementor lo topea en un ancho fijo a partir
       de 1200px (breakpoint "xl" de Bootstrap, que este tema reutiliza).
       Resultado: entre 768px y ~1190px cada mitad mide bastante menos de lo
       necesario para el menú legal (4 links) en una sola línea, así que
       quedaba partido en 2 renglones dentro de su columna — y el logo,
       sin este override, se queda a la izquierda en vez de centrado.
       Medido en el sitio real: a 1100px seguía roto, recién a 1200px (con
       el contenedor ya topeado) el menú entra cómodo — de ahí el corte acá,
       no en 768/992px como el resto de los breakpoints del sitio.
       Se fuerzan ambas columnas a 100% (apiladas) y se centra todo —
       mismo patrón que ya se usaba solo para mobile angosto. */
    .footer-bottom .edubin-col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .footer-bottom .site-info {
        text-align: center;
    }
    /* flex ignora el text-align:center de arriba, hace falta explícito. */
    .footer-bottom .site-info .dr-footer-brand {
        justify-content: center;
    }
    /* El menú legal seguía pegado a la derecha pese a lo anterior: el tema
       padre pone `.social-navigation ul { text-align:right }` DIRECTO sobre
       el <ul> (main.css). Un text-align heredado desde un ancestro (.site-info
       de arriba) nunca gana contra una regla que apunta directo al elemento,
       sin importar cuán específica sea la del ancestro — hay que pisarlo acá,
       en el mismo elemento. */
    .footer-bottom .social-navigation ul {
        text-align: center !important;
    }
}

/* =====================================================================
   Complianz: aviso de consentimiento sobre vídeos bloqueados (YouTube)
   El botón "Estoy de acuerdo" hereda el reset global de Edubin
   (main.css:703-712): fondo transparente, borde 1px y texto oscuro
   rgba(0,0,0,.8) — ilegible sobre el recuadro negro translúcido del
   placeholder de Complianz. Se restiliza recuadro y botón con la marca.
   El prefijo body sube la especificidad (0,2,1) por encima del CSS del
   plugin (0,2,0) y del reset del tema (0,0,1) sin depender del orden en
   que WP Rocket inyecte las hojas.
   ===================================================================== */
body .cmplz-blocked-content-container .cmplz-blocked-content-notice,
body .cmplz-wp-video .cmplz-blocked-content-notice {
    max-width: min(360px, calc(100% - 24px));
    padding: 20px 22px;
    background-color: rgba(2, 29, 58, 0.92);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
}

body .cmplz-blocked-content-notice .cmplz-links {
    margin-top: 4px;
}

body .cmplz-blocked-content-notice .cmplz-links a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

body .cmplz-blocked-content-notice button.cmplz-accept-service {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 26px;
    background: var(--edubin-primary-color, #0296db);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

body .cmplz-blocked-content-notice button.cmplz-accept-service:hover {
    opacity: 0.85;
}

/* =====================================================================
   RCP — Formulario de registro (/registrar/ y donde renderice .rcp_form)
   Alineado con el diseño actual de home y /cursos/: tarjeta blanca de
   radio 18px con línea #e6e8ec (como el hero del catálogo), tinta
   #0E1622 / gris #3D4757, CTA ámbar #F6B100 → hover #E0A100 (mismo botón
   que la home) y foco azul #2A6FE4. Selectores con prefijo body (y IDs
   propios de RCP) para ganar al reset global de botones de Edubin sin
   depender del orden de inyección de WP Rocket.
   ===================================================================== */

body.page-id-639 .entry-content > h2.wp-block-heading {
    max-width: 640px;
    margin: 8px auto 26px;
    text-align: center;
    font-size: 26px;
    line-height: 1.35;
    color: #0E1622;
}

body .rcp_form {
    max-width: 640px;
    margin: 0 auto 44px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    padding: 34px 32px;
    box-shadow: 0 10px 30px rgba(14, 22, 34, 0.06);
    color: #0E1622;
}

body .rcp_form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

body .rcp_form legend {
    font-size: 15px;
    font-weight: 700;
    color: #0E1622;
    padding: 0;
    margin: 20px 0 12px;
}

body .rcp_form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #3D4757;
    margin: 0 0 6px;
}

body .rcp_form input[type="text"],
body .rcp_form input[type="email"],
body .rcp_form input[type="password"] {
    width: 100%;
    height: 46px;
    border: 1.5px solid #e6e8ec;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    color: #0E1622;
    background: #fff;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body .rcp_form input[type="text"]:focus,
body .rcp_form input[type="email"]:focus,
body .rcp_form input[type="password"]:focus {
    border-color: #2A6FE4;
    box-shadow: 0 0 0 3px rgba(42, 111, 228, 0.13);
    outline: 0;
}

/* Usuario/email a ancho completo; nombre/apellido y las dos contraseñas
   en parejas de dos columnas. */
body .rcp_form .rcp_user_fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
}

body .rcp_form .rcp_user_fieldset p {
    margin: 0;
}

body .rcp_form #rcp_user_login_wrap,
body .rcp_form #rcp_user_email_wrap {
    grid-column: 1 / -1;
}

/* Código de descuento: input + botón en línea. */
body .rcp_form .rcp_discounts_fieldset {
    margin-top: 18px;
}

body .rcp_form #rcp_discount_code_wrap {
    margin: 0;
}

body .rcp_form .rcp_discount_code_field_wrap {
    display: flex;
    gap: 10px;
}

body .rcp_form #rcp_discount_code {
    flex: 1;
    min-width: 0;
}

body .rcp_form #rcp_apply_discount {
    height: 46px;
    padding: 0 22px;
    border: 1.5px solid #0E1622;
    border-radius: 10px;
    background: #fff;
    color: #0E1622;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

body .rcp_form #rcp_apply_discount:hover {
    background: #0E1622;
    color: #fff;
}

/* Pasarelas de pago como tarjetas seleccionables. */
body .rcp_form #rcp_payment_gateways {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

body .rcp_form label.rcp_gateway_option_label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #e6e8ec;
    border-radius: 10px;
    padding: 13px 18px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0E1622;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body .rcp_form label.rcp_gateway_option_label:has(input:checked) {
    border-color: #2A6FE4;
    box-shadow: 0 0 0 3px rgba(42, 111, 228, 0.12);
}

body .rcp_form .rcp_gateway_option_input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2A6FE4;
}

/* Términos y condiciones. */
body .rcp_form #rcp_agree_to_terms_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 4px;
}

body .rcp_form #rcp_agree_to_terms {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #2A6FE4;
}

body .rcp_form #rcp_agree_to_terms_wrap label {
    margin: 0;
    font-weight: 500;
}

body .rcp_form #rcp_agree_to_terms_wrap label a {
    color: #2A6FE4;
    text-decoration: underline;
}

/* Enlace "inicia sesión" superior. */
body .rcp_form .rcp_login_link p {
    margin: 0 0 20px;
    font-size: 14px;
    color: #7b8694;
}

body .rcp_form .rcp_login_link a {
    color: #2A6FE4;
    font-weight: 600;
}

/* Total de la inscripción (lo rellena el JS de RCP; oculto si vacío). */
body .rcp_form .rcp_registration_total:empty {
    display: none;
}

body .rcp_form .rcp_registration_total {
    margin: 18px 0 0;
    padding: 14px 16px;
    background: #f4f5f7;
    border-radius: 10px;
    font-weight: 700;
}

/* Botón principal: mismo CTA ámbar de la home. */
body .rcp_form #rcp_submit_wrap {
    margin: 22px 0 0;
}

body .rcp_form #rcp_submit,
body .rcp_form #rcp_login_submit,
body .rcp_form input[type="submit"].rcp-button,
body .rcp_form input[type="submit"] {
    width: 100%;
    height: 52px;
    background: #F6B100;
    color: #0E1622;
    font-size: 16px;
    font-weight: 700;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s ease;
}

body .rcp_form #rcp_submit:hover,
body .rcp_form #rcp_login_submit:hover,
body .rcp_form input[type="submit"]:hover {
    background: #E0A100;
}

body .rcp_form #rcp_submit:focus-visible,
body .rcp_form #rcp_login_submit:focus-visible,
body .rcp_form input[type="submit"]:focus-visible {
    outline: 2px solid #2A6FE4;
    outline-offset: 2px;
}

/* Mensajes de validación de RCP (errores / éxito). */
body .rcp_message {
    max-width: 640px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

body .rcp_message.error {
    background: #fdf3f3;
    border: 1px solid #f0c9c9;
    color: #8a2323;
}

body .rcp_message.success {
    background: #f0f9f1;
    border: 1px solid #bfe4c4;
    color: #1f6b2a;
}

@media (max-width: 560px) {
    body .rcp_form {
        padding: 24px 18px;
        border-radius: 14px;
    }

    body .rcp_form .rcp_user_fieldset {
        grid-template-columns: 1fr;
    }

    body.page-id-639 .entry-content > h2.wp-block-heading {
        font-size: 21px;
    }
}

/* Título "Registrar nueva cuenta" que RCP imprime antes del form. */
body .rcp_header {
    max-width: 640px;
    margin: 0 auto 18px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #0E1622;
}

/* Campos de tarjeta que inyecta el JS de Stripe/RCP al elegir "Tarjeta". */
body .rcp_form .rcp_card_fieldset p {
    margin: 0 0 14px;
}

body .rcp_form #rcp-card-element,
body .rcp_form .StripeElement {
    box-sizing: border-box;
    padding: 14px;
    border: 1.5px solid #e6e8ec;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body .rcp_form .StripeElement--focus {
    border-color: #2A6FE4;
    box-shadow: 0 0 0 3px rgba(42, 111, 228, 0.13);
}

/* Tabla "Detalles de Membresía" (la rellena el JS de RCP). */
body .rcp_form .rcp_registration_total table.rcp_registration_total_details {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    font-weight: 500;
}

body .rcp_form .rcp_registration_total table.rcp_registration_total_details caption {
    text-align: left;
    font-weight: 700;
    font-size: 15px;
    color: #0E1622;
    margin-bottom: 8px;
}

body .rcp_form .rcp_registration_total table.rcp_registration_total_details th,
body .rcp_form .rcp_registration_total table.rcp_registration_total_details td {
    border: 0;
    border-bottom: 1px solid #e6e8ec;
    padding: 9px 6px;
    text-align: left;
    background: transparent;
    color: #3D4757;
}

body .rcp_form .rcp_registration_total table.rcp_registration_total_details tr:last-child th,
body .rcp_form .rcp_registration_total table.rcp_registration_total_details tr:last-child td {
    border-bottom: 0;
}

/* Aviso de modo de pruebas de Stripe (solo visible en sandbox). */
body .rcp_form .rcp-stripe-test-mode-notice,
body .rcp_form .rcp_gateway_fields p {
    font-size: 14px;
    color: #3D4757;
}

/* =====================================================================
   Documentos legales (Términos 8229, Cookies 7964, Aviso Legal 7958, Privacidad 7754)
   Documento legal en columna de lectura: tarjeta blanca centrada con los
   mismos tokens que /registrar/ y /cursos/ (línea #e6e8ec, radio 18px,
   tinta #0E1622 / gris #3D4757, links azul #2A6FE4). El contenido son
   párrafos cuyo "título" es un <strong> inicial — se estilan como
   encabezados de sección.
   ===================================================================== */

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content {
    max-width: 840px;
    margin: 8px auto 44px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 10px 30px rgba(14, 22, 34, 0.06);
}

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
    margin: 0 0 14px;
}

/* El <strong> que abre cada párrafo actúa de título de sección. */
body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content p > strong:first-child {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #0E1622;
    margin: 26px 0 8px;
}

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content p:first-child > strong:first-child {
    margin-top: 0;
}

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content li {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
    margin-bottom: 6px;
}

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content a {
    color: #2A6FE4;
    text-decoration: underline;
    word-break: break-word;
}

body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content a:hover {
    color: #0E1622;
}

@media (max-width: 560px) {
    body:is(.page-id-8229, .page-id-7964, .page-id-7958, .page-id-7754) .entry-content {
        padding: 26px 20px;
        border-radius: 14px;
    }
}

/* =====================================================================
   Itinerarios (hub 3937 + 7 páginas de ruta 19763-19769)
   Misma tarjeta de lectura que las páginas legales, con reglas propias:
   aquí sí hay headings reales (h2 con emojis) y listas numeradas de
   cursos enlazados.
   ===================================================================== */

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content {
    max-width: 840px;
    margin: 8px auto 44px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 10px 30px rgba(14, 22, 34, 0.06);
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
    margin: 0 0 14px;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content h2 {
    font-size: 24px;
    line-height: 1.3;
    color: #0E1622;
    margin: 34px 0 14px;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content h2:first-child {
    margin-top: 0;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content ol {
    margin: 0 0 10px;
    padding-left: 26px;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content ol li {
    font-size: 15.5px;
    line-height: 1.65;
    color: #3D4757;
    margin-bottom: 7px;
    padding-left: 4px;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content ol li::marker {
    color: #7b8694;
    font-weight: 600;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content a {
    color: #2A6FE4;
    text-decoration: none;
}

body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content a:hover {
    text-decoration: underline;
    color: #0E1622;
}

@media (max-width: 560px) {
    body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content {
        padding: 26px 20px;
        border-radius: 14px;
    }

    body:is(.page-id-3937, .page-id-19763, .page-id-19764, .page-id-19765, .page-id-19766, .page-id-19767, .page-id-19768, .page-id-19769) .entry-content h2 {
        font-size: 21px;
    }
}

/* =====================================================================
   Itinerarios — velo del banner de título (páginas de ruta)
   La imagen destacada de cada ruta pasó a ser el fondo del Page Title. Son
   fotos claras, y el título y el breadcrumb van en blanco encima: medido con
   Playwright, 2 de 7 no llegaban ni a 3:1 y el breadcrumb (texto pequeño,
   umbral 4.5) fallaba en 4 de 7. El velo lleva las 7 por encima de AA.

   Se engancha a .dro-ruta, clase que añade dro_ruta_body_class() resolviendo
   por slug — no a parent-pageid-3937, que ataría el CSS a un ID de entorno.
   ===================================================================== */

body.dro-ruta .edubin-page-title-area {
    position: relative;
}

body.dro-ruta .edubin-page-title-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, .42);
    pointer-events: none;
}

/* El contenido del banner por encima del velo. */
body.dro-ruta .edubin-page-title-area > * {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   Itinerarios — rejilla de cursos (páginas de ruta)
   La <ol> de cursos de cada ruta se renderiza como tarjetas mediante el
   filtro dro_ruta_courses_as_cards() de functions.php. El contenido en BD
   sigue siendo la lista; esto solo la presenta.

   A diferencia del bloque de arriba, este se engancha POR CLASE y no por
   page-id: los IDs cambian entre entornos y hay que mantenerlos a mano cada
   vez que se añade una ruta. El markup lo emite el propio filtro, así que la
   clase siempre está donde tiene que estar.

   La especificidad arranca en .entry-content a propósito: las reglas de
   arriba pintan CUALQUIER enlace del contenido de azul y lo subrayan al
   pasar por encima — (0,2,2) — y una tarjeta no debe heredar eso.
   ===================================================================== */

.entry-content .drc-ruta-cursos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 4px 0 26px;
}

.entry-content .drc-ruta-cursos .drc-ruta-card {
    position: relative;
    display: block;
    min-height: 290px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    background-color: #0F1722;
    transition: transform .25s ease, box-shadow .25s ease;
}

.entry-content .drc-ruta-cursos .drc-ruta-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(14, 22, 34, .18);
}

.entry-content .drc-ruta-cursos .drc-ruta-card:focus-visible {
    outline: 3px solid #2A6FE4;
    outline-offset: 3px;
}

.drc-ruta-card__bg {
    position: absolute;
    inset: 0;
    display: block;
    background-color: #0F1722;
    background-size: cover;
    background-position: center;
    transition: transform .35s ease;
}

.drc-ruta-card:hover .drc-ruta-card__bg {
    transform: scale(1.04);
}

/* Mismo degradado que las tarjetas de ruta de la home: garantiza contraste
   de texto blanco sea cual sea la miniatura del curso. */
.drc-ruta-card__veil {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(to top, rgba(8, 12, 20, .94) 4%, rgba(8, 12, 20, .55) 42%, rgba(8, 12, 20, .32) 100%);
}

.drc-ruta-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 18px;
}

.drc-ruta-card__title {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.28;
    color: #fff;
    margin: 0 0 7px;
}

.drc-ruta-card__excerpt {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .74);
    margin: 0 0 14px;
}

.drc-ruta-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 12px;
}

.drc-ruta-card__meta {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.drc-ruta-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .entry-content .drc-ruta-cursos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .entry-content .drc-ruta-cursos {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-content .drc-ruta-cursos .drc-ruta-card {
        min-height: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .entry-content .drc-ruta-cursos .drc-ruta-card,
    .drc-ruta-card__bg {
        transition: none;
    }

    .entry-content .drc-ruta-cursos .drc-ruta-card:hover {
        transform: none;
    }

    .drc-ruta-card:hover .drc-ruta-card__bg {
        transform: none;
    }
}

/* =====================================================================
   Columna de lectura — TODAS las páginas con plantilla por defecto
   Se aplica por PLANTILLA (page-template-default), no por page-id: cualquier
   página nueva hereda el estilo sin tocar CSS. Se excluyen las construidas
   con Elementor (.elementor-page), que traen su propia maquetación; la home
   y /cursos/ quedan fuera por usar plantilla propia, y las landings tienen
   su bloque aparte (page_landing.php, columna más ancha).
   Incluye los estilos del aviso de nivel de RCP.
   Tarjeta de lectura de marca + estilo de Gravity Forms alineado con el
   formulario de /registrar/ (inputs 46px, foco azul #2A6FE4, CTA ámbar
   #F6B100) y el aviso de nivel RCP como chip informativo.
   ===================================================================== */

body.page-template-default:not(.elementor-page) .entry-content {
    max-width: 840px;
    margin: 8px auto 44px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 10px 30px rgba(14, 22, 34, 0.06);
}

body.page-template-default:not(.elementor-page) .entry-content p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
    margin: 0 0 14px;
}

body.page-template-default:not(.elementor-page) .entry-content h2 {
    font-size: 24px;
    line-height: 1.3;
    color: #0E1622;
    margin: 30px 0 12px;
}

body.page-template-default:not(.elementor-page) .entry-content h2:first-child {
    margin-top: 0;
}

body.page-template-default:not(.elementor-page) .entry-content ul,
body.page-template-default:not(.elementor-page) .entry-content ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

body.page-template-default:not(.elementor-page) .entry-content li:not(.responsive-tabs__list__item) {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
    margin-bottom: 8px;
}

/* Los componentes propios traen su propio color (títulos oscuros, CTA amarillo con
   texto oscuro): se excluyen para que esta regla genérica no los pise. Sin la
   exclusión gana por especificidad (0,3,2 frente a 0,1,0) y deja el botón de alta
   en azul sobre amarillo — 2,5:1 de contraste, por debajo del mínimo WCAG AA. */
body.page-template-default:not(.elementor-page) .entry-content a:not(.dro-desc__link):not(.dro-descargas__btn) {
    color: #2A6FE4;
}

body.page-template-default:not(.elementor-page) .entry-content a:not(.dro-desc__link):not(.dro-descargas__btn):hover {
    color: #0E1622;
}

/* Aviso de nivel RCP ("Tienes un nivel N"): de banda celeste plana a chip
   de marca. El !important es necesario porque el color viene inline en el
   contenido (style="background-color:#c4e1f4"). */
body.page-template-default:not(.elementor-page) .entry-content p.has-background {
    background: #eef4fd !important;
    border: 1px solid #c7d9f4;
    border-radius: 10px;
    padding: 13px 18px;
    font-size: 15px;
    color: #0E1622;
    margin: 6px 0 20px;
}

/* ---------------------------------------------------------------------
   Gravity Forms — estilo de marca en TODO el sitio (27 páginas publicadas
   llevan formulario). Se cubren los DOS markups que convive en Droneando:
     · moderno  → .gform_wrapper.gravity-theme  (rejilla de 12 columnas)
     · legacy   → .gform_wrapper.gform_legacy_markup_wrapper
   Mismo lenguaje visual que el formulario de alta de /registrar/.
   Nota de especificidad: GF fija los anchos con selectores de 4 clases
   (p. ej. .gform_wrapper.gravity-theme .gfield input.medium = 0,4,1), así
   que las reglas de ancho llevan el prefijo completo + `body` para ganar
   por una décima sin recurrir a !important.
   --------------------------------------------------------------------- */

body .gform_wrapper .gfield_label,
body .gform_wrapper .gfield_label_before_complex {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0E1622;
    margin: 0 0 6px;
}

body .gform_wrapper .gfield_required {
    color: #b3261e;
    font-size: 12px;
    font-style: normal;
}

body .gform_wrapper .gfield {
    margin-bottom: 18px;
}

/* Campos de texto: mismo alto, borde y foco que en /registrar/. */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="password"],
body .gform_wrapper select,
body .gform_wrapper textarea {
    border: 1.5px solid #e6e8ec;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    color: #0E1622;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body .gform_wrapper input:focus,
body .gform_wrapper select:focus,
body .gform_wrapper textarea:focus {
    border-color: #2A6FE4;
    box-shadow: 0 0 0 3px rgba(42, 111, 228, 0.13);
    outline: 0;
}

/* Igualar el ancho de TODOS los campos al de su celda: GF los fija por clase
   de tamaño (.small/.medium/.large) y dejaba filas descuadradas — en
   /servicios/ el campo Email medía 364px y Nombre 174px en la misma fila. */
body .gform_wrapper.gravity-theme .gfield input.small,
body .gform_wrapper.gravity-theme .gfield input.medium,
body .gform_wrapper.gravity-theme .gfield input.large,
body .gform_wrapper.gravity-theme .gfield select.small,
body .gform_wrapper.gravity-theme .gfield select.medium,
body .gform_wrapper.gravity-theme .gfield select.large,
body .gform_wrapper.gravity-theme .gfield textarea.small,
body .gform_wrapper.gravity-theme .gfield textarea.medium,
body .gform_wrapper.gravity-theme .gfield textarea.large,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield input.small,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield input.medium,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield input.large,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield select.small,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield select.medium,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield select.large,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield textarea.small,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield textarea.medium,
body .gform_wrapper.gform_legacy_markup_wrapper .gfield textarea.large {
    width: 100%;
}

/* Caja de texto libre: alto compacto, ampliable por el usuario. */
body .gform_wrapper .gfield textarea {
    height: 110px;
    min-height: 110px;
    resize: vertical;
}

/* Importe calculado de solo lectura ("Total"): se lee como resumen, no como
   un campo vacío, manteniendo la alineación con el resto. */
body .gform_wrapper .gfield input[readonly] {
    background: #f4f5f7;
    border-color: #e6e8ec;
    font-weight: 700;
    color: #0E1622;
}

body .gform_wrapper .ginput_total,
body .gform_wrapper .ginput_product_price {
    font-size: 18px;
    font-weight: 700;
    color: #0E1622;
}

/* Opciones (radio y casillas). */
body .gform_wrapper input[type="radio"],
body .gform_wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2A6FE4;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

body .gform_wrapper .gchoice,
body .gform_wrapper .gfield_radio li,
body .gform_wrapper .gfield_checkbox li {
    margin-bottom: 8px;
}

body .gform_wrapper .gchoice label,
body .gform_wrapper .gfield_radio label,
body .gform_wrapper .gfield_checkbox label {
    font-size: 15px;
    color: #3D4757;
    font-weight: 500;
}

/* CONVENCIÓN DEL SITIO: el botón de envío ocupa todo el ancho del formulario,
   igual que el "Registrar" del alta de membresía. Aplica a los formularios de
   todo el sitio, en ambos markups. */
body .gform_wrapper .gform_footer {
    display: block;
    margin-top: 22px;
    padding: 0;
    text-align: left;
}

body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer .gform_button,
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer .gform_button {
    display: block;
    float: none;
    width: 100%;
    height: 52px;
    background: #F6B100;
    color: #0E1622;
    font-size: 16px;
    font-weight: 700;
    border: 0;
    border-radius: 9px;
    padding: 0 24px;
    margin: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer .gform_button:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer .gform_button:hover {
    background: #E0A100;
}

body .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
body .gform_wrapper .gform_footer .gform_button:focus-visible {
    outline: 2px solid #2A6FE4;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    body.page-template-default:not(.elementor-page) .entry-content {
        padding: 26px 20px;
        border-radius: 14px;
    }
}

/* ---------------------------------------------------------------------
   Imagen de portada de las páginas de ruta (.drc-ruta-hero)
   Va a sangre dentro de la tarjeta: los márgenes negativos cancelan el
   padding de .entry-content y las esquinas superiores acompañan al radio
   de la tarjeta (18px menos 1px de borde). Diseñada para vivir DENTRO de
   la tarjeta de lectura — si se usa fuera, quitar los márgenes negativos.
   --------------------------------------------------------------------- */

body .entry-content > figure.drc-ruta-hero {
    margin: -44px -48px 30px;
    border-radius: 17px 17px 0 0;
    overflow: hidden;
}

body .entry-content > figure.drc-ruta-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 560px) {
    body .entry-content > figure.drc-ruta-hero {
        margin: -26px -20px 22px;
        border-radius: 13px 13px 0 0;
    }
}

/* =====================================================================
   Plantilla "landing" (page_landing.php) — 5 páginas: /villas/, /video/,
   /fiesta10k/, /curso-dji-mini-2/ y /nexafm/.
   Se aplica POR PLANTILLA, no por page-id: cualquier landing futura hereda
   el estilo sin tocar CSS. Columna algo más ancha que las páginas de texto
   (940px) porque estas llevan vídeo, y los medios van a sangre para que no
   pierdan presencia dentro de la tarjeta.
   ===================================================================== */

body.page-template-page_landing .entry-content {
    max-width: 940px;
    margin: 8px auto 44px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 10px 30px rgba(14, 22, 34, 0.06);
}

body.page-template-page_landing .entry-content p,
body.page-template-page_landing .entry-content li {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
}

body.page-template-page_landing .entry-content p { margin: 0 0 14px; }

body.page-template-page_landing .entry-content h1,
body.page-template-page_landing .entry-content h2 {
    color: #0E1622;
    line-height: 1.25;
    margin: 30px 0 14px;
}

body.page-template-page_landing .entry-content h1 { font-size: 30px; }
body.page-template-page_landing .entry-content h2 { font-size: 24px; }

body.page-template-page_landing .entry-content > *:first-child { margin-top: 0; }

body.page-template-page_landing .entry-content ul,
body.page-template-page_landing .entry-content ol { margin: 0 0 16px; padding-left: 22px; }
body.page-template-page_landing .entry-content li { margin-bottom: 8px; }

body.page-template-page_landing .entry-content a { color: #2A6FE4; }
body.page-template-page_landing .entry-content a:hover { color: #0E1622; }

body.page-template-page_landing .entry-content blockquote {
    margin: 20px 0; padding: 16px 20px; background: #f4f5f7;
    border-left: 4px solid #F6B100; border-radius: 0 10px 10px 0;
}

/* Vídeos e imágenes a sangre dentro de la tarjeta: los márgenes negativos
   cancelan el padding, así el medio conserva presencia. */
body.page-template-page_landing .entry-content > figure,
body.page-template-page_landing .entry-content > .wp-block-embed,
body.page-template-page_landing .entry-content > .fluid-width-video-wrapper {
    margin-left: -48px;
    margin-right: -48px;
    border-radius: 0;
    overflow: hidden;
}

body.page-template-page_landing .entry-content > figure img,
body.page-template-page_landing .entry-content > figure iframe { display: block; width: 100%; }

@media (max-width: 560px) {
    body.page-template-page_landing .entry-content { padding: 26px 20px; border-radius: 14px; }
    body.page-template-page_landing .entry-content h1 { font-size: 24px; }
    body.page-template-page_landing .entry-content h2 { font-size: 21px; }
    body.page-template-page_landing .entry-content > figure,
    body.page-template-page_landing .entry-content > .wp-block-embed { margin-left: -20px; margin-right: -20px; }
}

/* =====================================================================
   Pestañas de Tabby Responsive Tabs — estética de marca
   Se usan en /contenido-premium/ (Soporte / Descargas). Reutilizan el
   lenguaje de los chips de filtro del catálogo: píldora con borde en
   reposo y tinta sólida al estar activa.
   Nota de especificidad: el CSS del plugin usa `.responsive-tabs
   .responsive-tabs__list__item--active` (0,2,0) y define los bordes por
   lado, así que aquí se antepone el contenedor (0,2,1) y se declaran las
   propiedades por lado — un shorthand `border` no gana a `border-top-color`.
   Además, los items son <li> y la regla de lista de la tarjeta
   (body:is(...) .entry-content li, 0,2,2) pisaba el color de la pestaña
   activa: por eso el prefijo incluye .entry-content y cualifica li (0,3,2).
   ===================================================================== */

body .entry-content .responsive-tabs .responsive-tabs__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 0;
}

body .entry-content .responsive-tabs li.responsive-tabs__list__item {
    display: inline-flex;
    align-items: center;
    border-width: 1.5px;
    border-style: solid;
    border-color: #e6e8ec;
    border-radius: 999px;
    background: #fff;
    color: #3D4757;
    padding: 10px 22px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

body .entry-content .responsive-tabs li.responsive-tabs__list__item:hover {
    border-color: #c7ccd4;
    color: #0E1622;
}

body .entry-content .responsive-tabs li.responsive-tabs__list__item--active,
body .entry-content .responsive-tabs li.responsive-tabs__list__item--active:hover {
    background: #0E1622;
    border-color: #0E1622;
    color: #fff;
}

body .entry-content .responsive-tabs .responsive-tabs__panel {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Acordeón (móvil): mismo criterio visual. */
body .entry-content .responsive-tabs .responsive-tabs__heading {
    border: 1.5px solid #e6e8ec;
    background: #fff;
    color: #0E1622;
    border-radius: 12px;
    padding: 13px 18px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body .entry-content .responsive-tabs .responsive-tabs__heading--active {
    background: #0E1622;
    border-color: #0E1622;
    color: #fff;
}

/* Filas de casilla dentro de los formularios de RCP (p. ej. "Recuérdame" en
   el acceso): la regla general de etiquetas las pone en bloque y el texto
   caía debajo de la casilla. Aquí se alinean en una sola línea. */
body .rcp_form p:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
}

body .rcp_form p:has(> input[type="checkbox"]) label {
    margin: 0;
    font-weight: 500;
}

body .rcp_form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #2A6FE4;
}

body .rcp_form .rcp_lost_password {
    margin: 14px 0 0;
    font-size: 14px;
}

body .rcp_form .rcp_lost_password a { color: #2A6FE4; font-weight: 600; }

/* ---------------------------------------------------------------------
   Dos ajustes de convivencia entre la tarjeta de página y los formularios
   --------------------------------------------------------------------- */

/* 1. Gravity Forms con markup legacy maqueta los campos con <ul>/<li>. La
   regla de listas de la tarjeta (padding-left: 22px) los desplazaba: los
   campos quedaban 22px a la derecha del texto de la página (medido en
   /danos-tu-opinion/: texto en 269px, campos en 291px). Se anula solo para
   las listas del formulario. Especificidad 0,3,2 para ganar a la regla de
   la tarjeta (0,3,1) sin !important. */
body .entry-content .gform_wrapper ul.gform_fields,
body .entry-content .gform_wrapper ul.gfield_radio,
body .entry-content .gform_wrapper ul.gfield_checkbox {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

body .entry-content .gform_wrapper ul.gform_fields > li {
    list-style: none;
    margin-left: 0;
}

/* 2. Los formularios de RCP traen su propia tarjeta (necesaria en /registrar/,
   que se maqueta con Elementor y no tiene la tarjeta de página). Dentro de una
   página que YA tiene tarjeta, ese marco quedaba anidado dentro de otro. Aquí
   se le quita el marco y hereda el de la página. */
body.page-template-default:not(.elementor-page) .entry-content .rcp_form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* =====================================================================
   Pie de la página de alta (/registrar/) — sellos de pago y ayuda
   Antes eran una <table> con bordes visibles y dos imágenes de tamaños muy
   dispares (una tira clara de tarjetas y un sello oscuro de Stripe), más un
   enlace suelto de privacidad. Se presentan como una tira discreta, con la
   misma anchura que la ficha del formulario para que el conjunto se lea
   como una sola pieza.
   ===================================================================== */

.dro-registro-pie {
    max-width: 640px;
    margin: 26px auto 44px;
    text-align: center;
}

.dro-registro-pie__pagos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: #f7f8fa;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
}

/* Altura común para que los dos sellos pesen visualmente lo mismo, pese a
   venir con proporciones distintas. */
.dro-registro-pie__pagos img {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
    border: 0;
    border-radius: 4px;
}

.dro-registro-pie__ayuda {
    margin: 14px 0 0;
    font-size: 14px;
    color: #7b8694;
}

.dro-registro-pie__ayuda a {
    color: #2A6FE4;
    font-weight: 600;
}

@media (max-width: 560px) {
    .dro-registro-pie__pagos { gap: 14px; padding: 14px; }
    .dro-registro-pie__pagos img { height: 30px; }
}

/* ---------------------------------------------------------------------
   Gravity Forms — campos compuestos, casillas y botón "Seleccionar todos"
   Detectado en /baja/ (formulario 24), aplica a todos los formularios.
   --------------------------------------------------------------------- */

/* 1. El markup de GF llega con <br> inyectados entre la casilla y su etiqueta
   (y dentro de los campos compuestos), lo que tiraba el texto DEBAJO de la
   casilla y separaba los subcampos. Se ocultan: no aportan nada, el layout
   lo dan flex y la rejilla del propio formulario. */
body .gform_wrapper br {
    display: none;
}

/* Salvedad: en las descripciones de campo un salto de línea puede ser
   intencional del propio formulario, así que ahí se respeta. */
body .gform_wrapper .gfield_description br,
body .gform_wrapper .gform_description br {
    display: inline;
}

/* wpautop deja además párrafos que solo contienen campos ocultos: sin texto ni
   controles visibles, pero ocupando alto (en /baja/ inflaban el pie del
   formulario hasta 162px para un botón de 52). */
body .gform_wrapper .gform_footer > p:not(:has(input:not([type=hidden]))),
body .gform_wrapper .gform_page_footer > p:not(:has(input:not([type=hidden]))) {
    display: none;
}

/* 2. Casilla/radio y su texto en la misma línea. */
body .gform_wrapper .gchoice {
    display: flex;
    align-items: center;
    gap: 10px;
}

body .gform_wrapper .gchoice label {
    margin: 0;
    display: inline-block;
}

/* 3. Campos compuestos (Nombre + Apellidos): sus inputs no llevan clase de
   tamaño, así que las reglas de ancho por .small/.medium/.large no los
   alcanzaban y se quedaban en el ancho por defecto del navegador (184px de
   742 disponibles). Aquí ocupan su columna completa. */
body .gform_wrapper .ginput_complex {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

body .gform_wrapper .ginput_complex > p,
body .gform_wrapper .ginput_complex .gform-grid-col {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
}

body .gform_wrapper .ginput_complex input[type="text"],
body .gform_wrapper .ginput_complex input[type="email"],
body .gform_wrapper .ginput_complex input[type="tel"],
body .gform_wrapper .ginput_complex select {
    width: 100%;
}

/* wpautop parte el campo compuesto en un <p> por subcampo (uno para Nombre y
   otro para Apellidos). Con ancho completo se apilaban; con base flexible se
   reparten en la misma fila y bajan a una columna cuando no caben. */
body .gform_wrapper .ginput_complex > p {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex: 1 1 200px;
    min-width: 0;
}

body .gform_wrapper .ginput_complex .gform-field-label--type-sub {
    font-size: 13px;
    font-weight: 500;
    color: #7b8694;
    margin-top: 5px;
}

/* 4. Botón "Seleccionar todos": secundario, con el lenguaje del sitio. */
body .gform_wrapper .gfield_choice_all_toggle {
    margin-top: 10px;
    height: 38px;
    padding: 0 18px;
    border: 1.5px solid #0E1622;
    border-radius: 9px;
    background: #fff;
    color: #0E1622;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

body .gform_wrapper .gfield_choice_all_toggle:hover {
    background: #0E1622;
    color: #fff;
}

/* =====================================================================
   /registrar/ — aviso para quien ya tiene suscripción activa
   RCP devuelve ese texto SIN contenedor (shortcodes.php: `$output =
   wp_kses_post($atts['registered_message'])`), así que se queda pegado al
   borde izquierdo. Se le da markup propio con el atributo del shortcode y
   aquí el estilo, alineado con la ficha del formulario (640px).
   ===================================================================== */

.dro-ya-suscrito {
    max-width: 640px;
    margin: 0 auto 30px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    padding: 30px 32px;
    box-shadow: 0 10px 30px rgba(14, 22, 34, 0.06);
    text-align: center;
}

.dro-ya-suscrito p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3D4757;
    margin: 0 0 12px;
}

.dro-ya-suscrito__tit {
    font-size: 19px;
    font-weight: 800;
    color: #0E1622;
    margin-bottom: 8px;
}

.dro-ya-suscrito__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 20px 0 0;
}

.dro-ya-suscrito__btn {
    display: inline-block;
    background: #F6B100;
    color: #0E1622;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 9px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dro-ya-suscrito__btn:hover { background: #E0A100; color: #0E1622; }

.dro-ya-suscrito__link { color: #2A6FE4; font-weight: 600; }

/* =====================================================================
   "Mis cursos" (page-id-620) — listado del alumno (Sensei)
   La página se veía distinta al resto: contenido de borde a borde, pestañas
   con el estilo por defecto del plugin y, sobre todo, la vista previa en
   vídeo del primer curso ocupando 713px de alto y descuadrando la lista
   (las tarjetas sin vídeo sí se maquetaban bien, con la imagen a la
   izquierda). Aquí se unifica todo con el lenguaje del sitio.
   ===================================================================== */

/* Pestañas Todo / Activo / Completado → mismas píldoras del catálogo. */
body.page-id-620 #user-course-status-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    border: 0;
    padding: 0;
}

body.page-id-620 #user-course-status-toggle a {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e6e8ec;
    border-radius: 999px;
    padding: 9px 20px;
    background: #fff;
    color: #3D4757;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

body.page-id-620 #user-course-status-toggle a:hover {
    border-color: #c7ccd4;
    color: #0E1622;
}

body.page-id-620 #user-course-status-toggle a.active {
    background: #0E1622;
    border-color: #0E1622;
    color: #fff;
}

/* Cada curso, una tarjeta. */
body.page-id-620 ul.course-container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

body.page-id-620 ul.course-container > li.course {
    list-style: none;
    margin: 0;
    padding: 16px;
    border: 1.5px solid #e6e8ec;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

body.page-id-620 ul.course-container > li.course:hover {
    border-color: #c7ccd4;
    box-shadow: 0 6px 18px rgba(14, 22, 34, .06);
}

/* Media (miniatura o vista previa en vídeo) a la izquierda, en 16:9 y con
   ancho fijo. Sin esto, la tarjeta con vídeo se comía la fila entera. */
body.page-id-620 li.course .droneando-course-video-card,
body.page-id-620 li.course a.course-thumb,
body.page-id-620 li.course img.woo-image {
    float: left;
    width: 240px;
    max-width: 42%;
    margin: 0 20px 12px 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Excepción necesaria: la miniatura que va DENTRO de la tarjeta de vídeo lleva
   también la clase `woo-image`, así que la regla de arriba le aplicaba
   `width:240px; max-width:42%` — y 42% de 240px = 101px, justo el ancho
   descuadrado que aparecía. Aquí se le devuelve el 100% de su contenedor. */
body.page-id-620 li.course .droneando-course-video-card img.woo-image {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
}
body.page-id-620 li.course .droneando-course-video-card img,
body.page-id-620 li.course .droneando-course-video-card video,
body.page-id-620 li.course a.course-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Cierre del float para que la tarjeta envuelva su contenido. */
body.page-id-620 li.course > section.course-content::after {
    content: "";
    display: block;
    clear: both;
}

/* Tipografía del curso. */
body.page-id-620 li.course h2,
body.page-id-620 li.course h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 6px;
}

body.page-id-620 li.course h2 a,
body.page-id-620 li.course h3 a {
    color: #0E1622;
    text-decoration: none;
}

body.page-id-620 li.course h2 a:hover,
body.page-id-620 li.course h3 a:hover { color: #2A6FE4; }

body.page-id-620 li.course .course-meta,
body.page-id-620 li.course p.sensei-course-meta,
body.page-id-620 li.course em {
    font-size: 13px;
    color: #7b8694;
    font-style: normal;
}

body.page-id-620 li.course p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #3D4757;
    margin: 8px 0 0;
}

/* Barra de progreso de Sensei con el color de marca. */
body.page-id-620 .sensei-course-progress .progress-bar,
body.page-id-620 .sensei-progress-bar__bar {
    background: #F6B100;
}

@media (max-width: 640px) {
    /* Mismos selectores que la regla de escritorio: si aquí se listan otros,
       las tarjetas sin vídeo se quedan con la miniatura pequeña flotando. */
    body.page-id-620 li.course .droneando-course-video-card,
    body.page-id-620 li.course a.course-thumb,
    body.page-id-620 li.course img.woo-image {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 14px;
    }
}

/* La tarjeta de vídeo sí medía 240px, pero sus envoltorios interiores
   (.droneando-course-video-hover y .droneando-course-video-thumb) conservaban
   el ancho natural de la imagen: la miniatura salía a 101px en vez de llenar
   los 240. Se expanden para que la fila quede pareja con las tarjetas sin vídeo. */
body.page-id-620 li.course .droneando-course-video-hover,
body.page-id-620 li.course .droneando-course-video-thumb {
    display: block;
    width: 100%;
    height: 100%;
}

/* El texto es hermano de la miniatura flotante, así que las líneas largas se
   derramaban por debajo de la imagen. Con overflow oculto cada bloque forma su
   propio contexto y el texto se queda en columna, a la derecha de la miniatura. */
body.page-id-620 li.course h2,
body.page-id-620 li.course h3,
body.page-id-620 li.course p,
body.page-id-620 li.course .course-meta,
body.page-id-620 li.course .sensei-course-meta {
    overflow: hidden;
}

@media (max-width: 640px) {
    body.page-id-620 li.course h2,
    body.page-id-620 li.course h3,
    body.page-id-620 li.course p,
    body.page-id-620 li.course .course-meta,
    body.page-id-620 li.course .sensei-course-meta {
        overflow: visible;
    }
}