/* Círculo Cursos: estilos de los cursos gratuitos.
 * Las tres primeras secciones (listado, filtros y ficha) son el CSS exacto de los fragmentos antiguos de
 * Code Snippets. Al final están los añadidos del plugin. */

/* ===== LISTADO (tarjetas) ===== */

        .cda-cursos-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 22px;
            width: 100%;
        }

        .cda-curso-card {
            background: #fff;
            border: 1px solid #dfe5e9;
            border-radius: 14px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: .2s ease;
        }

        .cda-curso-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(7,27,58,.08);
        }

        .cda-curso-imagen {
            width: 100%;
            height: 170px;
            object-fit: cover;
            display: block;
        }

        .cda-curso-contenido {
            padding: 15px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .cda-curso-badge {
            display: inline-block;
            align-self: flex-start;
            background: #dff4e7;
            color: #0f8f5b;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 9px;
            border-radius: 999px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .cda-curso-titulo {
            color: #071b3a;
            font-size: 18px;
            line-height: 1.15;
            font-weight: 700;
            margin: 0 0 14px;
        }

        .cda-curso-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            color: #566171;
            font-size: 13px;
            margin-bottom: 13px;
        }

        .cda-curso-gratis {
            background: #eaf7ef;
            color: #0f8f5b;
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            border-radius: 7px;
            padding: 8px 10px;
            margin-top: auto;
            margin-bottom: 9px;
        }

        .cda-curso-boton {
            display: block;
            background: #0f8f5b;
            color: #fff !important;
            text-decoration: none !important;
            text-align: center;
            border-radius: 7px;
            padding: 11px;
            font-size: 13px;
            font-weight: 700;
        }

        .cda-curso-boton:hover {
            background: #0b784c;
        }

        @media(max-width: 980px) {
            .cda-cursos-grid {
                grid-template-columns: repeat(2, minmax(0,1fr));
            }
        }

        @media(max-width: 600px) {
            .cda-cursos-grid {
                grid-template-columns: 1fr;
            }
        }
    
/* ===== FILTROS ===== */

        .cda-filtros-wrap {
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin:10px 0 28px;
        }

        .cda-filtro-btn {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:11px 20px;
            border-radius:999px;
            background:#F2F4F7;
            color:#243447 !important;
            text-decoration:none !important;
            font-size:14px;
            font-weight:600;
            transition:.2s ease;
        }

        .cda-filtro-btn:hover {
            background:#E7EAEE;
        }

        .cda-filtro-btn.activo {
            background:#0F8F5B;
            color:#fff !important;
        }

        .cda-filtros-extra {
            display:none;
            width:100%;
            flex-wrap:wrap;
            gap:12px;
            margin-top:2px;
        }

        .cda-filtros-extra.abierto {
            display:flex;
        }

        .cda-mas-btn {
            border:0;
            cursor:pointer;
            font-family:inherit;
        }
    
/* ===== FICHA DEL CURSO ===== */


    /* ======================================
       RESET DEL ESPACIADO AUTOMÁTICO DE DIVI
       SOLO PARA LOS CURSOS GRATUITOS
    ====================================== */

    body.single-curso_gratuito .et-l--body .et_pb_section,
    body.single-curso_gratuito .et-l--body .et_pb_row,
    body.single-curso_gratuito .et-l--body .et_pb_column,
    body.single-curso_gratuito .et-l--body .et_pb_module,
    body.single-curso_gratuito .et-l--body .et_pb_text,
    body.single-curso_gratuito .et-l--body .et_pb_text_inner{
        margin:0 !important;
        padding:0 !important;
        width:100% !important;
        max-width:none !important;
    }


    /* ======================================
       CONTENEDOR GENERAL
    ====================================== */

	.cda-course-page{
		width:100%;
		max-width:1400px;
		margin:0 auto;
		padding:20px 0;
		font-family:inherit;
	}


    /* ======================================
       BREADCRUMB
    ====================================== */

    .cda-breadcrumb{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:7px;
        font-size:13px;
        color:#7d8792;
        margin:0 0 20px;
    }

    .cda-breadcrumb svg{
        width:14px;
        height:14px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
    }


    /* ======================================
       HERO
    ====================================== */

    .cda-course-hero{
        display:grid;
        grid-template-columns:1.55fr 1fr;
        gap:34px;
        align-items:center;
        margin-bottom:28px;
    }

    .cda-course-pill{
        display:inline-block;
        background:#dff4e8;
        color:#0f8f5b;
        font-size:12px;
        line-height:1.2;
        font-weight:700;
        padding:7px 12px;
        border-radius:999px;
        margin-bottom:14px;
        text-transform:uppercase;
    }

    .cda-course-title{
        color:#071b3a;
        font-size:42px;
        line-height:1.08;
        font-weight:800;
        margin:0 0 14px !important;
        padding:0 !important;
    }

    .cda-course-meta{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:0;
        color:#596575;
        font-size:15px;
        margin-bottom:14px;
    }

    .cda-course-meta span{
        position:relative;
        padding-right:16px;
        margin-right:16px;
    }

    .cda-course-meta span:not(:last-child)::after{
        content:"";
        position:absolute;
        width:1px;
        height:18px;
        background:#cfd5db;
        right:0;
        top:50%;
        transform:translateY(-50%);
    }

    .cda-course-desc{
        color:#626d7a;
        font-size:16px;
        line-height:1.5;
        max-width:700px;
    }

    .cda-course-image img{
        width:100%;
        display:block;
        border-radius:14px;
        aspect-ratio:16/10;
        object-fit:cover;
    }


    /* ======================================
       CUERPO A DOS COLUMNAS
    ====================================== */

    .cda-course-main{
        display:grid;
        grid-template-columns:minmax(0,1.65fr) minmax(280px,.95fr);
        gap:26px;
        align-items:start;
    }


    /* ======================================
       SESIONES
    ====================================== */

    .cda-lessons{
        border:1px solid #dfe5ea;
        border-radius:14px;
        overflow:hidden;
        background:#fff;
    }

    .cda-free-header{
        background:#eaf7f0;
        padding:16px 20px;
        display:flex;
        gap:12px;
        align-items:center;
        color:#0f8f5b;
    }

    .cda-free-header-icon{
        width:32px;
        height:32px;
        flex:0 0 32px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#0f8f5b;
    }

    .cda-free-header-icon svg{
        width:26px;
        height:26px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .cda-free-header strong{
        display:block;
        font-size:17px;
        line-height:1.25;
        margin-bottom:2px;
    }

    .cda-free-header small{
        display:block;
        color:#3d6f5a;
        font-size:13px;
    }


    /* ======================================
       SESIONES GRATUITAS
    ====================================== */

    .cda-free-row{
        display:grid;
        grid-template-columns:165px minmax(0,1fr) 140px;
        gap:16px;
        align-items:center;
        padding:10px 18px;
        border-top:1px solid #e6ebef;
    }

    .cda-thumb{
        position:relative;
        height:82px;
        border-radius:8px;
        overflow:hidden;
        background:#edf1f4;
    }

    .cda-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .cda-play{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:42px;
        height:42px;
        border-radius:50%;
        background:rgba(7,27,58,.88);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 3px 12px rgba(0,0,0,.15);
    }

    .cda-play svg{
        width:20px;
        height:20px;
        fill:#fff;
        margin-left:2px;
    }

    .cda-session-label{
        color:#6b7582;
        font-size:12px;
        margin-bottom:3px;
    }

    .cda-session-title{
        color:#071b3a;
        font-weight:700;
        font-size:16px;
        line-height:1.25;
        margin-bottom:5px;
    }

    .cda-session-time{
        display:flex;
        align-items:center;
        gap:5px;
        color:#7c8793;
        font-size:13px;
    }

    .cda-session-time svg{
        width:14px;
        height:14px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }


    /* ======================================
       BOTÓN VER GRATIS
    ====================================== */

    .cda-watch-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        background:#0f8f5b;
        color:#fff !important;
        text-decoration:none !important;
        text-align:center;
        font-size:12px;
        font-weight:700;
        padding:11px 12px;
        border-radius:8px;
        transition:
            background .2s ease,
            transform .2s ease;
    }

    .cda-watch-btn:hover{
        background:#0c774b;
        color:#fff !important;
    }

    .cda-chevron{
        width:15px;
        height:15px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform .25s ease;
    }

    .cda-watch-btn.is-open .cda-chevron{
        transform:rotate(180deg);
    }


    /* ======================================
       VIDEO DESPLEGABLE
    ====================================== */

    .cda-video-panel{
        display:none;
        padding:16px 18px 18px;
        border-top:1px solid #e6ebef;
        background:#f8faf9;
    }

    .cda-video-panel.is-open{
        display:block;
        animation:cdaVideoOpen .22s ease;
    }

    @keyframes cdaVideoOpen{
        from{
            opacity:0;
            transform:translateY(-5px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    .cda-video-panel iframe{
        width:100% !important;
        max-width:none !important;
        aspect-ratio:16/9;
        height:auto;
        border:0;
        border-radius:10px;
        display:block;
    }


    /* ======================================
       SESIONES BLOQUEADAS
    ====================================== */

    .cda-locked-row{
        display:grid;
        grid-template-columns:34px 90px minmax(0,1fr) 90px;
        gap:8px;
        align-items:center;
        padding:9px 18px;
        border-top:1px solid #edf0f2;
        background:#fbfcfd;
        font-size:13px;
    }

    .cda-lock-box{
        width:26px;
        height:26px;
        border-radius:6px;
        background:#eef1f3;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#7b8792;
    }

    .cda-lock-box svg{
        width:16px;
        height:16px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .cda-locked-session{
        color:#697481;
    }

    .cda-locked-title{
        color:#394553;
        font-weight:500;
    }

    .cda-locked-time{
        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:5px;
        color:#8a949d;
        font-size:12px;
    }

    .cda-locked-time svg{
        width:14px;
        height:14px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }


    /* ======================================
       TARJETA DERECHA
    ====================================== */

    /* La columna derecha: la tarjeta del precio y, si hay datos de pago, la de formas de pago. El contenedor es el que
       se queda fijo al bajar (donde el tema lo permite). Con las dos tarjetas es más alto que una pantalla normal, y
       una columna fija más alta que la pantalla deja su parte baja inalcanzable: por eso, con la tarjeta de pago,
       solo se fija en pantallas muy altas. */
    .cda-sidebar{
        display:grid;
        gap:16px;
        position:sticky;
        top:20px;
    }

    .cda-sidebar--con-pago{
        position:static;
    }

    @media (min-height:1150px){
        .cda-sidebar--con-pago{
            position:sticky;
        }
    }

    .cda-sidebar-card{
        border:1px solid #dfe5ea;
        border-radius:14px;
        padding:24px;
        background:#fff;
    }

    .cda-sidebar-card h3{
        color:#071b3a;
        font-size:24px;
        line-height:1.15;
        margin:0 0 12px !important;
        padding:0 !important;
    }

    .cda-sidebar-intro{
        color:#5f6b78;
        font-size:15px;
        line-height:1.45;
        margin-bottom:20px;
    }

    .cda-benefit{
        display:flex;
        align-items:center;
        gap:11px;
        margin-bottom:14px;
        color:#334052;
        font-size:14px;
    }

    .cda-benefit-icon{
        width:25px;
        height:25px;
        flex:0 0 25px;
        color:#071b3a;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .cda-benefit-icon svg{
        width:22px;
        height:22px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .cda-sidebar-separator{
        border:0;
        border-top:1px solid #e2e6ea;
        margin:22px 0;
    }

    .cda-price-label{
        color:#4a5664;
        font-size:13px;
        font-weight:700;
        margin-bottom:4px;
    }

    .cda-price{
        color:#071b3a;
        font-size:44px;
        line-height:1;
        font-weight:800;
        margin-bottom:18px;
    }


    /* ======================================
       BOTÓN WHATSAPP
    ====================================== */

    .cda-full-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:9px;
        background:#0f8f5b;
        color:#fff !important;
        text-decoration:none !important;
        text-align:center;
        padding:15px 12px;
        border-radius:8px;
        font-size:14px;
        font-weight:700;
        transition:background .2s ease;
    }

    .cda-full-btn:hover{
        background:#0b794b;
        color:#fff !important;
    }

    .cda-full-btn svg{
        width:21px;
        height:21px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }


    /* ======================================
       BENEFICIOS INFERIORES
    ====================================== */

    .cda-mini-benefits{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:12px;
        margin-top:22px;
        text-align:center;
        font-size:11px;
        color:#4a5563;
    }

    .cda-mini-icon{
        width:30px;
        height:30px;
        margin:0 auto 5px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#071b3a;
    }

    .cda-mini-icon svg{
        width:26px;
        height:26px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.7;
        stroke-linecap:round;
        stroke-linejoin:round;
    }


    /* ======================================
       RESPONSIVE
    ====================================== */

    @media(max-width:980px){

		.cda-course-page{
			padding:20px 10px;
		}

        .cda-course-hero,
        .cda-course-main{
            grid-template-columns:1fr;
        }

        .cda-sidebar,
        .cda-sidebar--con-pago{
            position:static;
        }
    }

    @media(max-width:700px){

        .cda-course-title{
            font-size:32px;
        }

        .cda-free-row{
            grid-template-columns:105px minmax(0,1fr);
        }

        .cda-watch-btn{
            grid-column:1 / -1;
        }

        .cda-locked-row{
            grid-template-columns:30px 70px minmax(0,1fr);
        }

        .cda-locked-time{
            grid-column:3;
            justify-content:flex-start;
        }
    }

    
/* ======================================================================
   AÑADIDOS DEL PLUGIN (v0.1.0)
   ====================================================================== */

/* Filtros: más aire respecto al encabezado */
.cda-filtros-wrap{
  margin:40px 0 28px;
}

/* Miniatura de la sesión: también abre el video */
.cda-thumb--click{
  cursor:pointer;
}
.cda-thumb--click:hover .cda-play{
  background:#0f8f5b;
}
.cda-thumb--click:focus-visible,
.cda-watch-btn:focus-visible,
.cda-locked-toggle:focus-visible{
  outline:3px solid #0f8f5b;
  outline-offset:2px;
}

/* Sesiones de pago: filas que se despliegan */
.cda-locked-item{
  border-top:1px solid #edf0f2;
}
.cda-locked-item .cda-locked-row{
  border-top:0;
}
.cda-locked-toggle{
  width:100%;
  margin:0;
  border:0;
  border-radius:0;
  text-align:left;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  color:inherit;
  grid-template-columns:34px 90px minmax(0,1fr) auto 20px;
  transition:background .2s ease;
}
.cda-locked-toggle:hover,
.cda-locked-toggle[aria-expanded="true"]{
  background:#f3f6f8;
}
.cda-locked-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7b8792;
}
.cda-locked-toggle .cda-chevron{
  width:15px;
  height:15px;
}
.cda-locked-toggle[aria-expanded="true"] .cda-chevron{
  transform:rotate(180deg);
}
.cda-locked-panel{
  display:none;
  background:#fff;
  border-top:1px solid #edf0f2;
}
.cda-locked-panel.is-open{
  display:block;
  animation:cdaVideoOpen .22s ease;
}
.cda-pago-row{
  border-top:0;
}
.cda-thumb--pago img{
  filter:brightness(.55) saturate(.85);
}
.cda-play--candado svg{
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-left:0;
}

@media(max-width:700px){
  .cda-locked-toggle{
    grid-template-columns:30px 62px minmax(0,1fr) 18px;
  }
  .cda-locked-toggle .cda-locked-time{
    grid-column:3;
    grid-row:2;
  }
  .cda-locked-toggle .cda-locked-arrow{
    grid-column:4;
    grid-row:1;
  }
}

/* ===== FORMAS DE PAGO (columna derecha de la ficha) ===== */

.cda-pago-card{
	border:1px solid #dfe5ea;
	border-radius:14px;
	padding:22px 24px;
	background:#fff;
}

.cda-pago-card h3{
	color:#071b3a;
	font-size:20px;
	line-height:1.2;
	margin:0 0 16px !important;
	padding:0 !important;
}

.cda-pago-metodo{
	display:flex;
	align-items:center;
	gap:14px;
	padding:12px 0;
	border-top:1px solid #e9edf0;
}

.cda-pago-card h3 + .cda-pago-metodo{
	border-top:0;
	padding-top:0;
}

.cda-pago-logo{
	width:44px;
	height:44px;
	flex:0 0 44px;
	border-radius:11px;
	object-fit:cover;
	border:1px solid #e9edf0;
}

.cda-pago-datos{
	flex:1 1 auto;
	min-width:0;
}

.cda-pago-nombre{
	color:#4a5664;
	font-size:12px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.cda-pago-numero{
	color:#071b3a;
	font-size:19px;
	font-weight:800;
	line-height:1.25;
	margin-top:1px;
	word-break:break-word;
}

.cda-pago-numero span{
	color:#6b7785;
	font-size:12px;
	font-weight:600;
	margin-right:4px;
}

.cda-pago-titular{
	color:#5f6b78;
	font-size:13px;
	line-height:1.35;
	margin-top:2px;
}

.cda-copiar{
	display:inline-flex;
	align-items:center;
	gap:6px;
	flex:0 0 auto;
	background:#fff;
	color:#0f8f5b;
	border:1px solid #cfe2d8;
	border-radius:8px;
	padding:7px 10px;
	font-size:12px;
	font-weight:700;
	cursor:pointer;
	transition:background .2s ease, border-color .2s ease;
}

.cda-copiar:hover{
	background:#eef7f2;
	border-color:#0f8f5b;
}

.cda-copiar.is-copied{
	background:#0f8f5b;
	border-color:#0f8f5b;
	color:#fff;
}

.cda-copiar svg{
	width:16px;
	height:16px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.9;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.cda-voucher{
	margin-top:6px;
	padding:16px;
	background:#f2f9f5;
	border:1px solid #d3eadd;
	border-radius:12px;
}

.cda-voucher-cab{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:10px;
}

.cda-voucher-icono{
	width:36px;
	height:36px;
	flex:0 0 36px;
	border-radius:50%;
	background:#fff;
	color:#0f8f5b;
	border:1px solid #cfe2d8;
	display:flex;
	align-items:center;
	justify-content:center;
}

.cda-voucher-icono svg{
	width:20px;
	height:20px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.9;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.cda-voucher-cab strong{
	display:block;
	color:#071b3a;
	font-size:15px;
	line-height:1.25;
}

.cda-voucher-cab small{
	display:block;
	color:#5f6b78;
	font-size:13px;
	line-height:1.3;
	margin-top:1px;
}

.cda-voucher-numero{
	color:#071b3a;
	font-size:20px;
	font-weight:800;
	text-align:center;
	margin-bottom:12px;
	letter-spacing:.01em;
}

/* ===== CANAL DE WHATSAPP (debajo de las formas de pago) ===== */

.cda-canal-card{
	border:1px solid #dfe5ea;
	border-radius:14px;
	padding:20px 24px;
	background:#fff;
}

.cda-canal-cab{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:14px;
}

.cda-canal-icono{
	width:40px;
	height:40px;
	flex:0 0 40px;
	border-radius:50%;
	background:#eef7f2;
	color:#0f8f5b;
	border:1px solid #cfe2d8;
	display:flex;
	align-items:center;
	justify-content:center;
}

.cda-canal-icono svg{
	width:22px;
	height:22px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.9;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.cda-canal-cab strong{
	display:block;
	color:#071b3a;
	font-size:16px;
	line-height:1.25;
}

.cda-canal-cab small{
	display:block;
	color:#5f6b78;
	font-size:13px;
	line-height:1.35;
	margin-top:2px;
}

/* El botón sin enlace se ve igual que el normal pero no se puede pulsar (es un <span>, no un enlace). */
.cda-full-btn--inactivo,
.cda-full-btn--inactivo:hover{
	background:#0f8f5b;
	cursor:default;
}

@media(max-width:700px){
	.cda-pago-card{
		padding:18px;
	}
	.cda-canal-card{
		padding:18px;
	}
	.cda-copiar span{
		display:none;
	}
}