/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/
    .header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
        color: #7d7d7d;
}

.ficha.ficha-autor.columna-3 {
    width: 49.5%;
    display: inline-block;
    position: relative;
    vertical-align: top;
    text-align: center
}



.autor-campos-ocultos {
    
                    display: none;
                    margin-bottom: 25px;
    
}

.ficha-container img {
                    
                    border-radius: 50px;
    
}
#top .fullsize .template-blog .post .entry-content-wrapper {
    
            text-align: inherit;
}

.acf libros{
 
}

.isbnlibros{
    
    
}
.paginaslibros {
    
}
.preciolibros
{}
.compralibros
{}

.descargalibros 
{
    
}



.portadalibros{
    float: left;
    display: block;
    width: 250px;
    margin-right: 10px
    
}

.donacionlibros {
  display: inline-block;
  border-radius: 4px;
  background-color: #d63e2d;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 25px;
  padding: 15px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.donacionlibros span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.donacionlibros span:after {
  content: '\2661';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.donacionlibros:hover span {
  padding-right: 25px;
}

.donacionlibros:hover span:after {
  opacity: 1;
  right: 0;
}

.conteinerboton {
    text-align: inherit;
    padding-top: 15px;
    
}

#top.single-libros .fullsize .template-blog .post .entry-content-wrapper > *{
max-width: none;
}

#top.single-libros .fullsize .template-blog .post .entry-content-wrapper{
 max-width: 960px;
}

#top.single-capitulos .fullsize .template-blog .post .entry-content-wrapper > *{
	max-width: none !important;
}
#top.single-capitulos .fullsize .template-blog .post .entry-content-wrapper{
 max-width: 960px;
}

/* ficha de libros */
	.acf.libros {
		border: 1px solid #dedede;
		padding: 20px;
		margin-top: 20px;
		border-bottom-right-radius: 30px;
		border-left: 5px solid #d63e2d;
	}
	/* foto libro container */
	.portadalibros {
		float: none;
		display: block;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	/* foto libro */
	.portadalibros .attachment-masonry.size-masonry.wp-post-image {
	text-align: center;
	margin: 0 auto;
	display: block;
	}

.donacionlibros{
						background-color: transparent;
						border: 2px solid rgb(214, 62, 45) !important;
						border-bottom: 2px solid rgb(214, 62, 45) !important;
						color: rgb(214, 62, 45);
						font-weight: bold;
					}

.donacionlibros span {
    
    font-size: medium;
    font-weight: bold;
}


/*
 *   ========== WooCommerce Styles ==========
*/

:root {
    --rgc-green: #54954b;
    --rgc-green-dark: #355a32;
    --rgc-red: #bf111d;
    --rgc-purple:#99487d;
    --rgc-middle-gray:#8d8d8d;
    --rgc-rounded-md: 8px;
    /* Distancia desde el borde superior de la ventana a la que se frena la ficha
       del curso al scrollear. Este valor es solo el de reserva (sin JS): el
       header de Enfold es fijo y además se encoge al scrollear, así que
       rgc_course_aside_sticky_offset() mide su alto real y reescribe la
       variable. Ver includes/woocommerce-tweaks.php. */
    --rgc-course-aside-top: 152px;
}

/* Enlarge the product title in the catalog */
.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title, 
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 24px !important; /* Adjust this value to your liking */
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 12px;
}

/* Style the custom short description we injected via PHP */
.course-summary-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.course-short-description {
    font-size: 15px;
    line-height: 1.6;
    color: #555555; /* A softer gray for body text */
    margin-bottom: 0;
    text-align: center;
}

/* El centrado de arriba es para la tarjeta a todo el ancho. Enfold arma el
   catálogo en 3 columnas hasta 768px, 2 hasta 480px y recién abajo de eso una
   sola (config-woocommerce/woocommerce-mod.css), así que de 480px para arriba
   siempre hay más de una tarjeta por fila: en una columna angosta el texto
   centrado deja los renglones desparejos de los dos lados y rompe el borde
   izquierdo que ya traen el título, el estado y la cinta de datos. */
@media (min-width: 480px) {
    .course-short-description {
        text-align: left;
    }
}

/* Force strong tags within the short description to remain inline */
.course-short-description strong {
    display: inline !important;
    color: unset !important; /* Keep the default color for strong text */
}

.course-enroll-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 170px;
    padding: 8px 16px;
    border: 1px solid var(--rgc-green) !important;
    border-radius: var(--rgc-rounded-md) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rgc-green) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* El botón es un <span> dentro del enlace de la tarjeta (ver
   rgc_show_more_info_button_in_loop()): el foco del teclado lo recibe el
   enlace, así que el estado de foco se toma de ahí. */
.course-enroll-button:hover,
.woocommerce-LoopProduct-link:focus-visible .course-enroll-button {
    background: var(--rgc-green);
    color: #ffffff !important;
}

.course-enroll-button.is-closed {
    border-color: #8d8d8d !important;
    color: #8d8d8d!important;
}

.course-enroll-button.is-closed:hover,
.woocommerce-LoopProduct-link:focus-visible .course-enroll-button.is-closed {
    background: #ebebeb;
    color: #aaa!important;
}

/* --- Top Sorting Buttons: Remove gray background --- */
.avia-product-sorting,
.product-sorting .sort-param,
.av-woo-sorting .sort-param {
  display:none;
    background-color: transparent !important;
    /* Uncomment the line below if you also want to remove the borders from these buttons */
    /* border: none !important; */ 
}

/* 1. Agrandar el título H2 del producto */
.avia-product-slider-container ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 22px !important; /* Ajusta este valor según prefieras */
    font-weight: bold;
    /* letter-spacing: 1px; Puedes descomentar esto si quieres separar un poco las letras, queda bien con mayúsculas */
    margin-bottom: 10px;
}

/* 2. Añadir sombra y bordes redondeados al contenedor del producto */
.avia-product-slider-container ul.products li.product .inner_product {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* Sombra base suave */
    transition: all 0.3s ease !important; /* Asegura que la animación al pasar el mouse sea fluida */
    background-color: #ffffff;
    border-radius: var(--rgc-rounded-md);
}

/* 3. Efecto Hover: Levantar la tarjeta y acentuar la sombra al pasar el mouse */
.avia-product-slider-container ul.products li.product:hover .inner_product {
    
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.10) !important; /* Oscurece y expande la sombra */
}

/* La grilla de productos reutiliza el CSS del post slider de Enfold, que pone
   overflow: hidden en .avia-content-slider y .avia-content-slider-inner. En un
   slider eso esconde las diapositivas que quedan afuera, pero en modo grilla
   (avia-content-grid-active) solo recorta la sombra de las tarjetas pegadas al
   borde: la de las columnas de los costados, la de arriba de la primera fila y
   la de abajo de la última. Los sliders de productos siguen como estaban.

   flow-root reemplaza lo otro que hacía el overflow: hidden, que era contener los
   floats de la grilla de Enfold. La grilla de cursos no usa floats, pero las de
   libros sí: sin flow-root, el contenedor queda de alto cero y el contenido que
   sigue se superpone a las tarjetas. */
.avia-product-slider-container.avia-content-grid-active,
.avia-product-slider-container.avia-content-grid-active .avia-content-slider-inner {
    display: flow-root;
    overflow: visible;
}

/* --- Badge de descuento en cuarto de circulo (esquina superior derecha) --- */
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product {
    position: relative;
    overflow: hidden; /* Asegura que la cinta no se salga del contenedor del producto */
}

.avia-product-slider-container ul.products li.product .thumbnail_container{
    position: relative; /* Necesario para posicionar la cinta dentro de este contenedor */
    background-color: #DADADA;
    z-index: 9; /* Asegura que la imagen del producto esté debajo de la cinta */
}

.product_on_sale .inner_product_header {
    padding-right: 15px !important;
}

/* --- Grilla de cursos ([av_productgrid] con cursos) ---
   Grilla alineada: las tarjetas de una misma fila tienen el mismo alto, todas
   las imágenes la misma proporción, y la cinta de datos y el botón quedan al
   pie de cada tarjeta, a la misma altura en toda la fila.

   :has() la limita a las grillas que listan cursos. Las de libros siguen con la
   grilla de floats de Enfold: las tapas son verticales y no admiten el recorte
   a 3:2. Los #top #main son para ganarle a ".responsive #top #main .products
   .product" de Enfold, que les da a las tarjetas el ancho y los márgenes de la
   grilla de floats en cada breakpoint. Los float y los clear de
   li.first/:nth-child no hace falta tocarlos: en un ítem de grid no tienen
   efecto. */
/* align-items: start deja cada tarjeta con el alto de su contenido, alineada
   arriba, en lugar de estirarla al alto de la más alta de la fila. */
#top #main .avia-content-grid-active ul.products:has(> li.product_cat-escuela) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

/* Por si la lista hereda el clearfix de WooCommerce (::before/::after con
   content): en una grilla serían dos celdas más, y la primera tarjeta se
   correría un lugar. */
#top #main .avia-content-grid-active ul.products:has(> li.product_cat-escuela)::before,
#top #main .avia-content-grid-active ul.products:has(> li.product_cat-escuela)::after {
    display: none;
}

#top #main .avia-content-grid-active ul.products:has(> li.product_cat-escuela) > li.product {
    width: auto;
    margin: 0;
}

/* Cada nivel de la tarjeta es una columna flex que ocupa todo el alto
   disponible, desde el ítem de la grilla hasta la celda del texto. Mientras la
   grilla alinee las tarjetas arriba no sobra alto y estas reglas no cambian
   nada; si se vuelve a estirarlas (align-items: stretch), permiten que el
   margin-top: auto de la cinta de datos la lleve al pie de la tarjeta. */
#top #main .avia-content-grid-active li.product_cat-escuela,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product,
#top #main .avia-content-grid-active li.product_cat-escuela .woocommerce-LoopProduct-link,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product_header,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product_header_table,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product_header_cell {
    display: flex;
    flex-direction: column;
}

#top #main .avia-content-grid-active li.product_cat-escuela .inner_product,
#top #main .avia-content-grid-active li.product_cat-escuela .woocommerce-LoopProduct-link,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product_header,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product_header_table,
#top #main .avia-content-grid-active li.product_cat-escuela .inner_product_header_cell {
    flex: 1 1 auto;
}

/* Todas las imágenes en 3:2. object-fit: cover recorta lo que sobra, centrado
   y sin deformar la foto: las verticales pierden algo de arriba y de abajo, las
   muy apaisadas, de los costados. */
#top #main .avia-content-grid-active li.product_cat-escuela .thumbnail_container {
    flex: none;
    aspect-ratio: 3 / 2;
}

#top #main .avia-content-grid-active li.product_cat-escuela .thumbnail_container img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* El título reserva dos renglones: así la descripción empieza a la misma altura
   en toda la fila aunque algún título ocupe uno solo. */
#top #main .avia-content-grid-active li.product_cat-escuela h2.woocommerce-loop-product__title {
    line-height: 1.3;
    min-height: 2.6em;
}

/* Descripción corta: hasta 3 renglones, con puntos suspensivos si el texto
   sigue. Los <p> que agrega wpautop pasan a inline para que el recorte cuente
   los renglones de corrido y no queden márgenes entre párrafos. */
#top #main .avia-content-grid-active li.product_cat-escuela .course-short-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

#top #main .avia-content-grid-active li.product_cat-escuela .course-short-description p {
    display: inline;
    margin: 0;
}

/* El padding-top separa la cinta de datos de la descripción. Los margin-top:
   auto solo actúan si las tarjetas se estiran al alto de la fila: en ese caso
   llevan la cinta y el botón al pie, y si un curso no tiene ningún dato
   cargado, el que baja al pie es el botón. */
#top #main .avia-content-grid-active li.product_cat-escuela .course-meta-info {
    margin-top: auto;
    padding-top: 16px;
}

#top #main .avia-content-grid-active li.product_cat-escuela .course-summary-actions {
    margin-top: auto;
}

#top #main .avia-content-grid-active li.product_cat-escuela .course-meta-info + .course-summary-actions {
    margin-top: 0;
}

/* Mismos cortes que la grilla de Enfold (config-woocommerce/woocommerce-mod.css):
   2 columnas hasta 767px, 1 hasta 479px. Con una sola columna no hay fila con
   la que alinear, así que el título deja de reservar el segundo renglón. */
@media only screen and (max-width: 767px) {
    #top #main .avia-content-grid-active ul.products:has(> li.product_cat-escuela) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 479px) {
    #top #main .avia-content-grid-active ul.products:has(> li.product_cat-escuela) {
        grid-template-columns: minmax(0, 1fr);
    }

    #top #main .avia-content-grid-active li.product_cat-escuela h2.woocommerce-loop-product__title {
        min-height: 0;
    }
}

/* Grupos de cursos por estado: cada grupo es una columna del builder con la
   clase rgc-curso-grupo, que contiene el título y un Product Grid filtrado por
   estado (ver rgc_filter_course_grid_by_status()). Si el estado no tiene
   cursos, la grilla queda sin tarjetas y se oculta el grupo entero, título
   incluido. */
#top .rgc-curso-grupo:not(:has(li.product)) {
    display: none;
}

/* --- Course Meta Info (ACF Fields) Styling --- */
.course-meta-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    font-size: 14px;
    color: #666666;
    margin: 16px 0;
    width: 100%;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.course-meta-info strong {
    color: #2b2f38;
    font-weight: 700;
    display: block;
    font-size: 16px;
    line-height: 1.25;
}

.course-meta-info > span {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    padding: 8px 8px 8px 64px;
    border: 1px solid #e7dfd6;
    border-radius: var(--rgc-rounded-md);
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(33, 23, 12, 0.04);
}

.course-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.course-enrollment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    line-height: 1;
    border-radius: var(--rgc-rounded-md);
    background: linear-gradient(180deg, #edf8f0 0%, #dff1e6 100%);
    color: var(--rgc-green);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    width: auto;
    text-align: center;
}

.course-enrollment-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rgc-green);
    flex: 0 0 8px;
}

.course-enrollment-status.is-closed {
    background: #fafafa;
    color: #666666;
}

.course-enrollment-status.is-closed::before {
    background-color: var(--rgc-red);
}

/* Próximamente: el curso sigue activo (el botón se puede tocar), pero está
   anunciado y todavía no abrió, así que se separa del verde de "abiertas"
   con el violeta de la marca en vez de apagarse como el cerrado. */
.course-enrollment-status.is-upcoming {
    background: linear-gradient(180deg, #f7eff4 0%, #f0e2ea 100%);
    color: var(--rgc-purple);
}

.course-enrollment-status.is-upcoming::before {
    background-color: var(--rgc-purple);
}

.course-status-row .custom-onsale-ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: var(--rgc-rounded-md);
    background-color: var(--rgc-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    position: unset;
}

/* 2. Position your custom badge in the top right corner */
.custom-onsale-badge {
    position: absolute;
    top: 15px;      /* Adjust distance from the top */
    right: 15px;    /* Adjust distance from the right */
    z-index: 99;    /* Forces the badge to sit on top of the image */
    background-color: var(--rgc-red); /* Replace with your exact red/pink hex code */
    color: #fff;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 6px; /* Gives it the rounded rectangle look */
    font-size: 14px;
}

.course-meta-label {
    display: block;
    margin-bottom: 4px;
    color: #5a5f69;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.course-start-date::before,
.course-duration::before,
.course-timing::before,
.course-certification::before,
.course-price::before,
.single-product .product_cat-escuela .course-coordination::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.course-start-date::before {
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8e57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='11' x2='21' y2='11'/%3E%3C/svg%3E");*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h1v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3C/svg%3E");    
}

.course-duration::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' x2='14' y1='2' y2='2'/%3E%3Cline x1='12' x2='15' y1='14' y2='11'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E");*/
}
.course-timing::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' x2='14' y1='2' y2='2'/%3E%3Cline x1='12' x2='15' y1='14' y2='11'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E");*/
}
.course-certification::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
}

.single-product .product_cat-escuela .course-coordination::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Modalidad de cursado: segunda línea de la celda "Cursada", en tono
   secundario para que no compita con los días y el horario. */
.course-mode {
    display: block;
    margin-top: 4px;
    color: #5a5f69;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
}

.course-price::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E");
}

.course-meta-info.is-closed .course-start-date,
.course-meta-info.is-closed .course-duration,
.course-meta-info.is-closed .course-coordination,
.course-meta-info.is-closed .course-timing,
.course-meta-info.is-closed .course-certification,
.course-meta-info.is-closed .course-price {
    color: #b8bcc3;
    border-color: #ececec;
    box-shadow: none;
}

.course-meta-info.is-closed .course-start-date .course-meta-label,
.course-meta-info.is-closed .course-duration .course-meta-label,
.course-meta-info.is-closed .course-coordination .course-meta-label,
.course-meta-info.is-closed .course-timing .course-meta-label,
.course-meta-info.is-closed .course-certification .course-meta-label,
.course-meta-info.is-closed .course-price .course-meta-label,
.course-meta-info.is-closed .course-start-date strong,
.course-meta-info.is-closed .course-duration strong,
.course-meta-info.is-closed .course-coordination strong,
.course-meta-info.is-closed .course-timing strong,
.course-meta-info.is-closed .course-certification strong,
.course-meta-info.is-closed .course-price strong,
.course-meta-info.is-closed .course-mode {
    color: #b8bcc3;
}

.course-meta-info.is-closed .course-price::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ccd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E");
}

.course-meta-info.is-closed .course-start-date::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ccd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='11' x2='21' y2='11'/%3E%3C/svg%3E");
}

.course-meta-info.is-closed .course-duration::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ccd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
}

.course-meta-info.is-closed .course-coordination::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ccd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
}

.course-meta-info.is-closed .course-certification::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ccd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
}
.course-meta-info.is-closed .course-timing::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8ccd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354954b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' x2='14' y1='2' y2='2'/%3E%3Cline x1='12' x2='15' y1='14' y2='11'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E");*/
}

/* Ocupa sola el ancho de las dos columnas, debajo de "Comienza" y "Duración".
   Alineada a la izquierda como todo lo demás de la tarjeta: el título, el badge
   de estado, la descripción corta y las etiquetas de los dos datos de arriba
   arrancan en ese borde, y centrada era lo único que se salía. En un curso
   cerrado, además, es el único dato que queda (ver custom_show_course_meta_in_loop)
   y centrarla la dejaba flotando.

   Los 24px la alinean con el borde visible de los iconos de arriba: la caja del
   icono arranca en left: 22px, y el trazo del SVG queda unos 2px más adentro. */
.course-coordination{
    grid-column: 1 / -1;
    padding-left: 24px!important;
    text-align: left;
}

@media (max-width: 767px) {
    .course-meta-info {
        grid-template-columns: 1fr;
    }

    .course-meta-info > span {
        min-height: 84px;
    }
}

/*
 ## Ajustes de la página de producto individual, categoría escuela
*/

.single-product.product_cat-escuela .quantity {
    display: none;
}

.single-product.product_cat-escuela .single_add_to_cart_button {
    display: block;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: var(--rgc-rounded-md);
    border: 1px solid var(--rgc-green);
    background-color: var(--rgc-green) !important;
    color: #fff !important;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.single-product.product_cat-escuela .single_add_to_cart_button:hover {
    background-color: var(--rgc-green-dark) !important;
}

.single-product.product_cat-escuela .woocommerce-product-details__short-description{
    font-size: 16px;
    line-height: 1.5;
}

.single-product.product_cat-escuela .woocommerce-product-details__short-description strong{
    color: inherit !important;
}

.single-product.product_cat-escuela .course-meta-info-single {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e7dfd6;
    padding: 12px 12px 12px 0;
    border-radius: var(--rgc-rounded-md);
}
.single-product.product_cat-escuela .course-meta-info-single span {
    border: none;
    box-shadow: none;
}
.single-product.product_cat-escuela .course-coordination {
    text-align: left;
    padding: 0 0 0 64px!important;
}

/* --- Layout de dos columnas: descripción + ficha del curso ---
   Por debajo del breakpoint el bloque se comporta como antes (cinta
   horizontal arriba de la descripción). A partir de 1100px la ficha pasa
   a una columna lateral vertical, pegajosa mientras se scrollea el texto. */
.single-product.product_cat-escuela .rgc-course-layout {
    clear: both;

    /* Mismo valor que el padding inferior de la columna de la foto, para que el
       hueco sobre el bloque sea igual lo gobierne la foto o la descripción corta
       (la más alta de las dos manda, y cambia según el curso y el ancho). En px
       y no en em porque Enfold achica la tipografía base en pantallas medianas y
       ahí el 2.5em anterior caía a 32px, desparejando los dos lados. */
    margin-top: 40px;
}

/* Aire entre el resumen del producto (foto + descripción corta) y el bloque de
   dos columnas. Enfold lo dejaba en 90px por dos motivos acumulados:

   1. La barra lateral del tema se imprime aunque no tenga widgets, y ese <aside>
      vacío ocupa 40px debajo de la foto. Enfold ya intenta taparlo —en
      config-woocommerce/woocommerce-mod.css declara
      «.responsive .single-product-main-image .sidebar { display: none }»— pero
      esa regla pierde contra «#top #main .sidebar { display: block }» de
      css/layout.css, que trae dos ids. Repetirla con los ids adelante le da la
      especificidad que le falta; no es una decisión de diseño nueva, es la del
      propio tema.
   2. .single-product-main-image trae 50px de padding inferior.

   Quedan 40px, el mismo margen superior que ya tenía .rgc-course-layout: así el
   hueco es parejo lo gobierne la foto (la columna más alta acá) o la descripción
   corta, que es lo que cambia de curso a curso. Abajo de 768px no se toca:
   Enfold ya baja ese padding a 20px cuando las columnas se apilan. */
@media (min-width: 768px) {
    .single-product.product_cat-escuela .single-product-main-image {
        padding-bottom: 40px;
    }

    body#top.single-product.product_cat-escuela #main .single-product-main-image .sidebar {
        display: none;
    }
}

/* El botón de la ficha es el único de la página (el del resumen se quita en
   conditional_escuela_plain_description_layout), así que se muestra siempre. */
.single-product.product_cat-escuela .rgc-course-card__cta {
    max-width: 330px;
    margin: 0 0 2em;
}

/* Debajo del layout de dos columnas el botón sube por encima de la cinta de
   datos, en vez de quedar colgado al final del bloque. */
@media (max-width: 1099px) {
    .single-product.product_cat-escuela .rgc-course-card {
        display: flex;
        flex-direction: column;
    }

    .single-product.product_cat-escuela .rgc-course-card__cta {
        order: -1;
    }

    /* Icono y texto anclados arriba, como ya lo hace la ficha lateral a partir
       de 1100px: las celdas de la cinta se estiran a la altura de la más alta
       (la inversión, que puede llevar precio tachado y vigencia), y centrar
       dejaba cada dato a una altura distinta. */
    .single-product.product_cat-escuela .course-meta-info-single > span {
        justify-content: flex-start;
        padding: 8px 8px 8px 64px !important;
    }

    .single-product.product_cat-escuela .course-meta-info-single > span::before {
        top: 8px;
        transform: none;
    }
}

/* Entre 768 y 1099px la imagen del producto sigue flotando a la izquierda
   (Enfold: .single-product-main-image, 33% + 50px de margen) y la descripción
   corta ocupa la columna de la derecha. El botón se corre hasta ese mismo borde
   para leerse como continuación de la descripción, no como pie de la imagen. */
@media (min-width: 768px) and (max-width: 1099px) {
    .single-product.product_cat-escuela .rgc-course-card__cta {
        margin-left: calc(33% + 50px);
    }
}

/* --- Inversión en un renglón: etiqueta, selector e importe ---
   En la cinta la celda se mide por su contenido, así que en cuanto hay ancho
   los tres bloques van uno al lado del otro y arrancan a la misma altura, en
   vez de apilarse y convertir la inversión en la celda más alta de la fila.

   El corte es 560px y no el de la cinta lateral (768px) porque lo que manda acá
   es lo que mide la fila: 64px de sangría del icono + ~80px de etiqueta + ~125px
   de selector + ~140px del importe más largo ≈ 445px, y a 560px de ventana la
   celda dispone de unos 500px. Debajo de eso vuelve a apilarse, que es lo único
   que entra en un teléfono.

   El orden —selector antes que importe— es el mismo del HTML, así que lo que se
   ve y lo que recorre el teclado coinciden; de paso el importe queda último y
   puede cambiar de ancho al pasar a dólares sin correr de lugar al selector que
   se acaba de tocar. */
@media (min-width: 560px) and (max-width: 1099px) {
    .single-product.product_cat-escuela .course-price {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "switch amount"
            "switch end";
        align-items: start;
        column-gap: 14px;
    }

    /* El envoltorio de etiqueta + selector deja de generar caja para que sus dos
       hijos entren en la grilla de la celda, cada uno en su columna. Es un <span>
       sin semántica propia: no hay rol que perder en el árbol de accesibilidad
       —el role="group" vive en el selector— y a partir de 1100px vuelve a ser el
       renglón de siempre. */
    .single-product.product_cat-escuela .course-price-head {
        display: contents;
    }

    /* Etiqueta y selector son excluyentes —si hay selector, la etiqueta está
       oculta— así que comparten celda sin pisarse. */
    .single-product.product_cat-escuela .course-price-head .course-meta-label,
    .single-product.product_cat-escuela .course-price .rgc-currency-switch {
        grid-area: switch;
    }

    /* Los dos importes comparten celda: el que no corresponde va con [hidden],
       que lo saca de la grilla, así que nunca se pisan. */
    .single-product.product_cat-escuela .course-price-amount {
        grid-area: amount;
    }

    .single-product.product_cat-escuela .course-price-sale-end {
        grid-area: end;
    }
}

/* Por debajo de 768px Enfold apila imagen y resumen a todo el ancho: no queda
   columna a la que alinearse, y el botón (que mide 330px como máximo) colgando
   del margen izquierdo debajo de una foto a todo lo ancho se lee torcido.
   Centrado acompaña a la imagen. */
@media (max-width: 767px) {
    .single-product.product_cat-escuela .rgc-course-card__cta {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1100px) {
    /* Enfold crea DOS contenedores de scroll por encima de la ficha: el body
       (css/base.css, overflow-x:hidden) y #wrap_all (css/grid.css, overflow:
       hidden). Cualquiera de los dos alcanza para anular el position:sticky de
       adentro, así que hay que neutralizar los dos.
       'clip' recorta igual pero no crea contenedor de scroll; 'flow-root'
       mantiene el bloque de formato que antes daba overflow:hidden. */
    .responsive body.single-product.product_cat-escuela {
        overflow-x: clip;
    }

    body#top.single-product.product_cat-escuela #wrap_all {
        display: flow-root;
        overflow: clip;
    }

    /* La línea gris separa el resumen del producto (foto + descripción corta)
       del bloque de dos columnas: marca dónde cambia la lectura. Solo existe a
       partir de acá, porque solo acá hay una transición que señalar: en pantallas
       angostas el bloque sigue en una sola columna y la línea quedaba pegada
       al botón de inscripción, sin separar nada. */
    .single-product.product_cat-escuela .rgc-course-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
        column-gap: 3rem;
        align-items: start;
        border-top: 1px solid #e1e1e1;
    }

    .single-product.product_cat-escuela .rgc-course-layout__main {
        grid-row: 1;
        grid-column: 1;
        min-width: 0;
    }

    /* 48px = el margen superior de .rgc-course-description (3em sobre 16px), para
       que ambas columnas arranquen a la misma altura. Se descuenta del offset
       sticky para que la ficha quede justo debajo del header al scrollear. */
    .single-product.product_cat-escuela .rgc-course-layout__aside {
        grid-row: 1;
        grid-column: 2;
        padding-top: 48px;
        position: sticky;
        top: calc(var(--rgc-course-aside-top) - 48px);

        /* Freno de abajo. El recorrido de un sticky termina donde termina su
           bloque contenedor —acá el área de grilla, que baja hasta el final de
           .rgc-course-layout— y justo ahí arranca "Equipo docente", así que la
           ficha bajaba hasta quedar pegada a las flechas del carrusel. El margen
           achica ese rectángulo por abajo: la tarjeta se suelta 4rem antes y el
           encabezado de la sección siguiente entra despejado. */
        margin-bottom: 4rem;
    }

    /* La tarjeta pasa a ser el contenedor con borde: badge + datos + botón. */
    .single-product.product_cat-escuela .rgc-course-card {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 22px 20px;
        border: 1px solid #e7dfd6;
        border-radius: var(--rgc-rounded-md);
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(33, 23, 12, 0.04);
    }

    .single-product.product_cat-escuela .rgc-course-card__cta {
        max-width: none;
        margin: 0;
    }

    /* La cinta horizontal se vuelve una lista vertical, sin borde propio ni
       separadores: la separación la da el gap. */
    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 22px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
    }

    /* Icono y texto alineados arriba: si el dato ocupa dos líneas (el precio con
       dos monedas, por ejemplo) la etiqueta no se despega del icono. */
    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single > span {
        width: 100%;
        min-height: 0;
        padding: 0 0 0 56px !important;
        justify-content: flex-start;
    }

    /* Etiqueta destacada arriba, dato en gris debajo. */
    .single-product.product_cat-escuela .rgc-course-card .course-meta-label {
        margin-bottom: 5px;
        color: #2b2f38;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single strong {
        color: #666666;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
    }

    /* Acá aparece la columna lateral y sobra ancho: el selector pasa a renglón.
       Medido en la ficha: horizontal pide 171px y la celda deja 232. */
    .single-product.product_cat-escuela .rgc-course-card .rgc-currency-switch {
        --rgc-switch-radius: 999px;
        --rgc-switch-option-radius: 999px;

        flex-direction: row;
    }

    /* La inversión es el dato que cierra la ficha: va más grande y en oscuro. */
    .single-product.product_cat-escuela .rgc-course-card .course-price strong {
        color: #2b2f38;
        font-size: 18px;
        font-weight: 700;
    }

    /* --- Inversión: selector e importe en el mismo renglón ---
       La etiqueta se queda con la primera línea y debajo van selector e importe,
       uno al lado del otro, como en la cinta. Medido sobre la ficha real: quedan
       232px de ancho útil y el par ocupa 108 + 8 + 105 = 221px. Por eso el
       renglón va con wrap y el importe no se encoge (flex: 0 0 auto): un curso
       más caro —"AR$ 1.250.000,00" pide 123px— manda el importe a su propia línea
       en lugar de partirlo o desbordar la tarjeta. Con seis cifras entra al lado;
       con siete, baja. */
    .single-product.product_cat-escuela .rgc-course-card .course-price {
        display: flex;
        /* La celda viene en columna de .course-meta-info > span: sin volverla
           fila, el wrap no tiene nada que envolver y align-items centra. */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
    }

    /* Con el padding que usa el selector en la cinta el par entraba por 1px, y un
       margen de 1px no es un margen: cualquier redondeo de fuente lo tumba. Acá
       las opciones van más ajustadas —el selector pasa de 116 a 108px— sin que se
       note. El id de Enfold va pegado a las clases porque las tres viven en el
       <body>: separado por espacio pediría un descendiente y no aplicaría. */
    body#top.single-product.product_cat-escuela .rgc-course-card .rgc-currency-switch__option {
        padding: 6px;
    }

    /* Igual que en la cinta: el envoltorio deja de generar caja para que etiqueta
       y selector se acomoden por separado. Ver el bloque de 560px. */
    .single-product.product_cat-escuela .rgc-course-card .course-price-head {
        display: contents;
    }

    /* La etiqueta se lleva la primera línea entera. Acá no necesita el ajuste de
       línea de base que sí lleva cuando comparte renglón con el selector. */
    .single-product.product_cat-escuela .rgc-course-card .course-price-head .course-meta-label {
        flex: 0 0 100%;
        padding-top: 0;
        margin-bottom: 2px;
    }

    .single-product.product_cat-escuela .rgc-course-card .course-price-amount {
        flex: 0 0 auto;
    }

    /* La vigencia va sola abajo y centrada bajo el par: es una nota al pie de los
       dos, no del importe solo. */
    .single-product.product_cat-escuela .rgc-course-card .course-price-sale-end {
        flex: 0 0 100%;
        margin-top: 0;
        text-align: start;
    }

    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single.is-closed .course-meta-label,
    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single.is-closed strong {
        color: #b8bcc3;
    }

    /* Mismo SVG de siempre, ahora sobre una placa redondeada y anclada arriba
       (el resto del sitio lo centra con top:50% + translateY). */
    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single > span::before {
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        border-radius: var(--rgc-rounded-md);
        background-color: #eef4ec;
        background-size: 20px 20px;
        transform: none;
    }

    .single-product.product_cat-escuela .rgc-course-card .course-meta-info-single.is-closed > span::before {
        background-color: #f4f4f4;
    }
}

/* Precio en oferta: WooCommerce imprime <del> precio viejo + <ins> precio nuevo.
   Van apilados —el tachado, más chico, justo encima del vigente— en lugar de uno
   al lado del otro: en la columna angosta de la ficha el par entraba partido a
   mitad de renglón.

   Los selectores llevan #top / #wrap_all porque Enfold estila del/ins con esos
   ids (config-woocommerce/woocommerce-mod.css: display, font-size, line-height y
   el bullet separador); sin ellos gana el tema padre por especificidad. */
body#top.single-product.product_cat-escuela .course-price del,
body#top.single-product.product_cat-escuela .course-price ins {
    display: block;
}

body#top.single-product.product_cat-escuela .course-price del {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.1;
    opacity: 0.6;
}

body#top.single-product.product_cat-escuela .course-price ins {
    text-decoration: none;
    background: transparent;
    line-height: 1.25;
}

/* El bullet que Enfold intercala entre los dos importes sobra cuando quedan uno
   debajo del otro. */
body#top.single-product.product_cat-escuela #wrap_all .course-price ins::before {
    content: none;
}

/* --- Selector de precio ---
   Los dos importes vienen impresos del servidor y esto solo cambia cuál se ve.
   El control vuelve al renglón de "Inversión:", contra el margen derecho, pero
   apilado: rotuladas por región ("Argentina" / "Resto del mundo") las dos
   opciones no entran una al lado de la otra.

   Entra justo. En la ficha lateral la columna mide 330px, menos 40px de padding
   de la tarjeta y 56px de la sangría del icono: quedan 234px para la etiqueta
   (~80px) más el control (~125px). Por eso el renglón va con wrap: si la
   tipografía rinde más ancha de lo previsto, el control baja a su propia línea
   en vez de desbordar o de aplastarse. Debajo de 1100px sobra lugar —la cinta
   es de dos columnas— y el renglón nunca se parte. */
.course-price-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 8px;
}

/* La etiqueta ya no comparte renglón con el selector, así que no necesita su
   margen ni el ajuste de línea de base. */
.course-price-head .course-meta-label {
    margin-bottom: 0;
}

/* Con selector, "Inversión" se oculta a la vista pero sigue estando para
   lectores de pantalla: el importe es el único dato de la ficha que si no
   quedaría sin nombre. Sin selector —un curso con una sola moneda— la etiqueta
   se ve normalmente y ocupa el lugar del control. */
.course-price-head .course-meta-label.rgc-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Apilado por defecto: es la forma que entra en cualquier ancho, incluida la
   cinta de un teléfono. Se pone en renglón solo donde sobra lugar —la ficha
   lateral, a partir de 1100px, y el checkout—.

   Con la dirección cambia la forma, y por eso va en variables: en renglón es una
   pastilla; apilado, un rectángulo redondeado, porque una pastilla de dos pisos
   queda con las curvas cortadas. Los 11px son los 3 del padding más el radio de
   la opción, para que la curva de adentro acompañe a la de afuera.

   El flex-shrink en 0 evita que se angoste y parta los rótulos en dos. */
.rgc-currency-switch {
    --rgc-switch-radius: 11px;
    --rgc-switch-option-radius: var(--rgc-rounded-md);

    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 3px;
    border-radius: var(--rgc-switch-radius);
    background-color: #eceff1;
    line-height: 1;
}

/* El #top es de Enfold, que pinta los enlaces con su propia paleta. */
/* La variante en renglón, para donde hay ancho de sobra. */
.rgc-checkout-currency .rgc-currency-switch {
    --rgc-switch-radius: 999px;
    --rgc-switch-option-radius: 999px;

    flex-direction: row;
}

#top .rgc-currency-switch__option {
    display: block;
    padding: 6px 12px;
    border-radius: var(--rgc-switch-option-radius);
    color: #5a5f69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#top .rgc-currency-switch__option:hover,
#top .rgc-currency-switch__option:focus {
    color: #2b2f38;
}

#top .rgc-currency-switch__option.is-active,
#top .rgc-currency-switch__option.is-active:hover {
    background-color: var(--rgc-green);
    color: #ffffff;
}

/* Importe: solo se ve el de la moneda elegida. El [hidden] necesita regla propia
   porque este display:block le gana al del navegador. */
.course-price-amount {
    display: block;
}

.course-price-amount[hidden] {
    display: none;
}

/* Vigencia de la oferta: solo aparece si la promo tiene fecha de fin cargada. */
.course-price-sale-end {
    display: block;
    margin-top: 4px;
    color: #5a5f69;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.course-meta-info.is-closed .course-price-sale-end {
    color: #b8bcc3;
}

/* Botón de inscripción de la ficha (espeja el estilo del botón de WooCommerce
   que antes estaba en el resumen del producto). */
.single-product.product_cat-escuela .rgc-course-card__button {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--rgc-green);
    border-radius: var(--rgc-rounded-md);
    background-color: var(--rgc-green) !important;
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.single-product.product_cat-escuela .rgc-course-card__button:hover {
    border-color: var(--rgc-green-dark);
    background-color: var(--rgc-green-dark) !important;
}

.single-product.product_cat-escuela .rgc-course-card__button.is-disabled {
    border-color: #9aa0a6;
    background-color: #9aa0a6 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Un click ya en viaje: no se apaga como .is-disabled (ese es "no se puede",
   este es "un momento"), pero sí deja de leerse como un botón a la espera de
   otro toque. Lo pone course-enroll-guard.js apenas se sigue el enlace. */
.single-product.product_cat-escuela .rgc-course-card__button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.single-product.product_cat-escuela .entry-summary p.price {
    display:block!important;
    font-size: 20px;
    margin-bottom: 24px!important;
}

.rgc-course-description {
    clear:both;
    font-size: 16px;
    line-height: 1.5;
    color: #555555; /* A softer gray for body text */
    text-align: left;
    max-width: 70ch;
   /* border: 1px solid #797979;*/
   border-bottom: 1px solid #797979;
   padding-bottom: 2.4rem;
   margin: 3em 0;
}

.rgc-course-description p{
    
}

.rgc-course-description ul{
    list-style-type: disc;
    margin-left: 2rem;
    line-height: 1.4;
}

.rgc-course-description li{
    margin-bottom: 0.75rem;
}

.rgc-course-description .avia-testimonial{
    border:none!important;
}

/* =================== Team Members Section =================== */

/* Encabezado de la sección: el título y, cuando hay de sobra para deslizar, las
   flechas a la derecha. El contenedor se imprime siempre (con una sola tarjeta
   también) para que el título quede a la misma altura en todas las fichas. */
.single-product.product_cat-escuela .rgc-team-slider__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    clear: both;
}

.single-product.product_cat-escuela .rgc-team-members-title {
    margin: 0;
}

.single-product.product_cat-escuela .rgc-team-slider__controls {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

/* El atributo hidden lo maneja el JS según el desborde real; sin esta regla el
   display:flex de arriba lo pisaría. */
.single-product.product_cat-escuela .rgc-team-slider__controls[hidden] {
    display: none;
}

.single-product.product_cat-escuela .rgc-team-slider__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e7dfd6;
    border-radius: 50%;
    background: #ffffff;
    color: var(--rgc-green);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.single-product.product_cat-escuela .rgc-team-slider__nav:hover:not(:disabled) {
    background: #eef4ec;
}

.single-product.product_cat-escuela .rgc-team-slider__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.single-product.product_cat-escuela .rgc-team-slider__nav svg {
    width: 20px;
    height: 20px;
}

/* La pista: antes era una grilla de dos columnas, ahora es una fila que se
   desliza. El corte de 960px y el gap se mantienen, así que el reparto visual no
   cambia; lo único nuevo es que a partir de la tercera tarjeta (o de la segunda
   en pantallas chicas) el sobrante sale del alto de la página y pasa al costado.

   Con una sola tarjeta el flex-basis la deja ocupando media columna, igual que
   hacía la grilla: queda pegada a la izquierda y no se estira. */
.single-product.product_cat-escuela .rgc-team-members {
    clear: both;
    display: flex;
    gap: 2rem;
    margin: 2rem 0 3rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* La barra nativa se oculta: la navegación va por las flechas y el arrastre
       táctil sigue igual. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.single-product.product_cat-escuela .rgc-team-members::-webkit-scrollbar {
    display: none;
}

.single-product.product_cat-escuela .rgc-team-member {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    border-radius: var(--rgc-rounded-md);
    padding: 1.5rem;
    background: #f7f7f7;
}

@media (min-width: 960px) {
    /* Dos por vista: la mitad del ancho menos el gap que va entre ambas. */
    .single-product.product_cat-escuela .rgc-team-member {
        flex-basis: calc((100% - 2rem) / 2);
    }
}

/* Sin desplazamiento suave para quien lo pidió apagado en el sistema: el salto
   entre tarjetas se hace de una. */
@media (prefers-reduced-motion: reduce) {
    .single-product.product_cat-escuela .rgc-team-members {
        scroll-behavior: auto;
    }
}

.single-product.product_cat-escuela .rgc-team-member-header {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.single-product.product_cat-escuela .rgc-team-member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.single-product.product_cat-escuela .rgc-team-member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-product.product_cat-escuela .rgc-team-member-name {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
    width:max-content;
    color: #1f2937;
}

.single-product.product_cat-escuela .rgc-team-member-position {
    margin: 0.25rem 0 0;
    font-size: 1.2rem;
    line-height: 1.1;
    color: #1f2937;
}

.single-product.product_cat-escuela .rgc-team-member-description {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.65;
}

.single-product.product_cat-escuela .rgc-team-member-description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .single-product.product_cat-escuela .rgc-team-member-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .single-product.product_cat-escuela .rgc-team-member-avatar {
        width: 140px;
        height: 140px;
    }
}

/* Testimonial Section */

.rgc-opiniones .avia-testimonial-wrapper {
    padding-bottom: 2rem;
}

.rgc-opiniones .avia-testimonial_inner {
    background: white;
    padding: 2rem!important;
    border-radius: var(--rgc-rounded-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.rgc-opiniones .avia-testimonial-meta-mini{
    text-align: center;
    border-top:#bbb 1px solid;
}
.rgc-opiniones .avia-testimonial-name{
    text-align: center;
}

.rgc-opiniones .avia-testimonial-content::before {
    /* 1. Insertamos el carácter de las comillas */
    content: '\201C'; 
    
    /* 2. Lo hacemos bloque para que quede en su propia línea arriba del texto */
    display: block; 
    
    /* 3. Lo centramos */
    text-align: center; 
    
    /* 4. Estilo de la comilla (tamaño, tipografía y color) */
    font-family: Georgia, serif; /* Georgia suele tener comillas curvas muy estéticas */
    font-size: 72px;             /* Ajusta el tamaño según necesites */
    color: #0f61b4;              /* Reemplaza con tu código de color azul exacto */
    
    /* 5. Ajustes de espacio y alineación */
    line-height: 1; 
    margin-bottom: -24px;         /* Separación entre las comillas y el texto */
    margin-top: 8px;
}

@media screen and (min-width: 960px){
    .rgc-opiniones .avia-testimonial_inner {
        padding: 2rem 6rem!important;
    }   
}

/* Checkout: tipografia de valores ingresados y seleccionados (classic + block). */
form.woocommerce-checkout .input-text,
form.woocommerce-checkout select,
.wc-block-checkout__main .wc-block-components-text-input input,
.wc-block-checkout__main .wc-block-components-text-input textarea,
.wc-block-checkout__main .wc-block-components-combobox .components-input-control__input,
.wc-block-checkout__main .wc-block-components-select select,
.wc-block-checkout__main .wc-block-components-select .wc-block-components-select__select,
.wc-block-checkout__main .wc-block-components-country-input select,
.wc-block-checkout__main .wc-block-components-state-input select {
    font-size: 17px !important;
    line-height: 1.35 !important;
}

/* Checkout Block: separar mejor etiqueta flotante y valor para evitar superposicion. */
.wc-block-checkout__main .wc-block-components-text-input input,
.wc-block-checkout__main .wc-block-components-text-input textarea,
.wc-block-checkout__main .wc-block-components-combobox .components-input-control__input,
.wc-block-checkout__main .wc-block-components-select select,
.wc-block-checkout__main .wc-block-components-select .wc-block-components-select__select,
.wc-block-checkout__main .wc-block-components-country-input select,
.wc-block-checkout__main .wc-block-components-state-input select {
    min-height: 54px !important;
    padding-top: 1.25em !important;
    padding-bottom: 0.4em !important;
}

/* Selects del checkout block (país, provincia): a todo el ancho y con una sola
   flecha. Enfold les da 95% de ancho y su propia flecha de fondo; la flecha del
   bloque va posicionada contra el borde del recuadro, así que quedaba en ese 5%
   sobrante, afuera del select, y al lado de la de Enfold. */
.wc-block-checkout__main .wc-blocks-components-select .wc-blocks-components-select__select {
    width: 100% !important;
    background-image: none !important;
}

/* --- Página de "gracias" (order-received) ---
   Todo alineado a la izquierda y con los recursos que el sitio ya usa: los
   títulos de sección con el estilo de los pasos del checkout ("DATOS PARA
   INSCRIPCIÓN"), y los recuadros con el borde, las esquinas y el fondo de las
   tablas de WooCommerce en Enfold (#e1e1e1, 2px, #f8f8f8). */
.woocommerce-order p.woocommerce-thankyou-order-received {
    margin: 8px 0 32px;
    color: #2b2f38;
    font-size: 26px;
    line-height: 1.3;
}

.woocommerce-order .woocommerce-order-overview {
    margin-bottom: 0;
}

/* Un mismo aire entre secciones. Las instrucciones de la transferencia no son
   una sección aparte: son el segundo paso de "pagar", así que van más cerca de
   los datos bancarios que del bloque siguiente. */
.woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
    margin-top: 56px;
}

.woocommerce-order .wc-block-order-confirmation-additional-fields-wrapper {
    margin-top: 40px;
}

/* Los cuatro títulos (datos bancarios, detalles del pedido, inscripción y
   facturación) con un solo estilo: el del título de paso del checkout block. */
.woocommerce-order .woocommerce-bacs-bank-details h2,
.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-customer-details h2 {
    margin: 0 0 16px;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* El nombre de la cuenta es la razón social del titular, y ya va dentro del
   recuadro como un dato más (rgc_bacs_account_field_labels()). El título que
   WooCommerce arma con ese mismo nombre lo repetiría. */
.woocommerce-order .woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
    display: none;
}

.woocommerce-order .woocommerce-customer-details address {
    margin-bottom: 0;
}

/* Botón de copiar junto al CBU y al alias (lo agrega js/bacs-copy.js): solo el
   ícono, en gris para no competir con el dato, y verde un momento al copiar. */
.woocommerce-order .woocommerce-bacs-bank-details .rgc-copy-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.woocommerce-order .woocommerce-bacs-bank-details .rgc-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* El margen negativo compensa el padding: el área para tocar crece, pero
       la fila no, y el valor queda a la misma altura que los demás datos. */
    margin: -4px 0;
    padding: 4px;
    border: 0;
    border-radius: 2px;
    background: none;
    color: #8d8d8d;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}

.woocommerce-order .woocommerce-bacs-bank-details .rgc-copy:hover,
.woocommerce-order .woocommerce-bacs-bank-details .rgc-copy:focus-visible {
    color: #2b2f38;
}

.woocommerce-order .woocommerce-bacs-bank-details .rgc-copy:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.woocommerce-order .woocommerce-bacs-bank-details .rgc-copy.is-done {
    color: var(--rgc-green);
}

/* Datos de inscripción y de facturación lado a lado cuando hay ancho: son dos
   listas cortas que se leen como un par. La plantilla no las envuelve en
   columnas (sin envío no lo hace), así que se ubican con grilla: el título y
   la dirección a la izquierda, la sección de facturación a la derecha. */
@media (min-width: 768px) {
    .woocommerce-order .woocommerce-customer-details {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 48px;
    }

    .woocommerce-order .woocommerce-customer-details > h2 {
        grid-column: 1;
        grid-row: 1;
    }

    .woocommerce-order .woocommerce-customer-details > address {
        grid-column: 1;
        grid-row: 2;
    }

    .woocommerce-order .woocommerce-customer-details > .wc-block-order-confirmation-additional-fields-wrapper {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
}

/* Instrucciones de la transferencia (las arma rgc_bacs_thankyou_layout(),
   debajo de los datos bancarios). El recuadro va a todo el ancho, como los
   demás bloques; el que se acota a 70 caracteres es el texto, centrado
   adentro. */
.rgc-bacs-instructions {
    margin: 24px 0 0;
    padding: 20px 24px;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    background-color: #f8f8f8;
    color: #2b2f38;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}

.rgc-bacs-instructions p {
    max-width: 70ch;
    margin: 0 auto;
    font-size: inherit;
    line-height: inherit;
}

.rgc-bacs-instructions p + p {
    margin-top: 1em;
}

/* Campos adicionales en el detalle del pedido (DNI, datos de facturación).
   WooCommerce los imprime como <dt>etiqueta</dt><dd>valor</dd> y trae su
   estilo solo para los bloques; con la plantilla clásica quedaban pegados
   ("Nombre o razón socialJarilla"). Etiqueta y valor en dos columnas. */
.woocommerce-customer-details .wc-block-components-additional-fields-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 12px 0 0;
}

.woocommerce-customer-details .wc-block-components-additional-fields-list dt,
.woocommerce-customer-details .wc-block-components-additional-fields-list dd {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.woocommerce-customer-details .wc-block-components-additional-fields-list dt {
    color: #2b2f38;
    font-weight: 600;
}

.woocommerce-customer-details .wc-block-components-additional-fields-list dt::after {
    content: ":";
}

/* Mantener placeholders legibles sin competir con el valor escrito. */
.wc-block-checkout__main input::placeholder,
.wc-block-checkout__main textarea::placeholder {
    font-size: 14px !important;
}

/* --- Resumen del pedido del checkout ---
   El bloque imprime el importe dos veces: el unitario debajo del título y el
   total del renglón a la derecha. Con un curso —siempre cantidad 1— son el mismo
   número y se lee como un error. Se esconde el unitario y queda el de la
   derecha, que es donde se busca el importe y donde va la chapa de "Ahorra".

   Ojo si algún día se venden libros por cantidad: ahí el unitario sí aporta
   (tres libros a AR$ 20.000 no son AR$ 60.000 a simple vista). Para esos casos
   habría que acotar esta regla a los pedidos de un solo curso. */
.wc-block-components-order-summary-item .wc-block-cart-item__prices {
    display: none;
}

/* La columna del importe se llevaba media caja: la chapa "Ahorra AR$ 35.000,00"
   entra en un solo renglón y empuja, dejando la descripción en un hilo de dos
   palabras por línea. Dejándola partir en dos renglones, la columna se achica al
   ancho del importe y el texto recupera lugar. */
.wc-block-components-order-summary-item__description {
    flex: 1 1 auto;
    min-width: 0;
}

.wc-block-components-order-summary-item__total-price {
    /* Medido: la caja son 310px, la imagen 48 y la chapa pide 148 en un renglón,
       con lo que a la descripción le quedaban 114. Con el tope, la chapa parte en
       dos y la columna baja al ancho del importe (~105). El flex tiene que poder
       encoger —0 1, no 0 0— o el tope no sirve de nada. */
    flex: 0 1 auto;
    max-width: 120px;
}

.wc-block-components-order-summary .wc-block-components-sale-badge {
    white-space: normal;
    text-align: right;
}

/* --- Paso 1: fuera el título "Opciones de pago" ---
   Con la inscripción en dos pasos ahí no hay opciones: hay un único medio
   interno que registra los datos, y los medios de verdad aparecen recién en el
   paso 2. El título prometía una elección que no existe.

   Se esconde solo el encabezado visible. El <fieldset> del bloque trae además un
   <legend class="screen-reader-text"> con el mismo texto, así que la sección
   sigue teniendo nombre para un lector de pantalla. */
.wp-block-woocommerce-checkout-payment-block > .wc-block-components-checkout-step__heading-container {
    display: none;
}

/* --- Paso 1: sin radio button ---
   Con un solo medio no hay nada que elegir y el punto es ruido. El :has() ata la
   regla a ese caso: si algún día el paso 1 ofrece dos opciones, el radio vuelve
   solo. Donde :has() no exista, el punto sigue ahí, que es la degradación buena.

   Los 48px de padding izquierdo del bloque eran el hueco del radio; sin él, se
   igualan a los 16px de los otros lados y el título queda alineado con su propia
   descripción, que ya venía a 16.

   El aire vertical va en los dos hijos del recuadro y no en la caja con borde:
   el título vive en el <label> .__option y el texto en .rgc-reserva-descripcion
   (lo arma checkout-reserva-block.js), y son hermanos. Puesto en el padre se
   sumaría al que el bloque ya le da al label. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control:has(.wc-block-components-radio-control-accordion-option:only-child) .wc-block-components-radio-control__input {
    display: none;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control:has(.wc-block-components-radio-control-accordion-option:only-child) .wc-block-components-radio-control__option {
    padding: 14px 16px 8px;
}

/* La descripción del paso 1. Sin regla propia salía pegada al borde izquierdo y
   al de abajo: el bloque no le pone nada porque este contenedor es nuestro. */
.rgc-reserva-descripcion {
    padding: 0 16px 14px;
}

/* --- Resumen del pedido cuando la barra queda angosta ---
   Entre los 800 y los 1100px el checkout sigue en dos columnas —WooCommerce le
   pone .is-large al bloque— pero la barra del resumen se queda sin ancho, y al
   lado de la miniatura el título del curso termina partido letra por letra
   ("Medi / ación / Cultu / ral").

   Debajo de 800px no hace falta: ahí el bloque pasa a .is-medium, el resumen
   ocupa todo el ancho y el problema no existe. Por eso la regla pide la clase
   además del media query; la clase es la que distingue "barra angosta" de
   "resumen a todo lo ancho", porque WooCommerce la calcula por el ancho del
   contenedor y no por el de la ventana.

   Arriba quedan los dos datos cortos, miniatura e importe; el título y su
   descripción bajan a un renglón propio, a todo el ancho de la barra. */
@media (max-width: 1100px) {
    .wc-block-checkout.is-large .wc-block-components-order-summary-item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "miniatura importe"
            "detalle   detalle";
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
    }

    .wc-block-checkout.is-large .wc-block-components-order-summary-item__image {
        grid-area: miniatura;
    }

    .wc-block-checkout.is-large .wc-block-components-order-summary-item__total-price {
        grid-area: importe;
        justify-self: end;
        text-align: right;
    }

    .wc-block-checkout.is-large .wc-block-components-order-summary-item__description {
        grid-area: detalle;
    }

    /* El bloque cuelga un <span class="screen-reader-text"> del mismo padre. Si
       no se le asigna celda, la grilla le abre una fila implícita —invisible,
       pero con su row-gap—. Se lo manda a la celda de la miniatura: mide 1px y
       está recortado, así que ahí no molesta a nadie. */
    .wc-block-checkout.is-large .wc-block-components-order-summary-item > .screen-reader-text {
        grid-area: miniatura;
    }
}

/* --- Selector de moneda del checkout ---
   Va arriba de todo el bloque y contra el margen derecho, del lado del resumen,
   que es lo que cambia al tocarlo. Acá el switch vuelve a ser horizontal: el
   apilado existe por los 232px de la ficha del curso, y en el checkout sobra
   ancho. */
.rgc-checkout-currency {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 24px;
}

.rgc-checkout-currency__label {
    color: #5a5f69;
    font-size: 14px;
}

/* Mientras el bloque rehace los totales, el control se apaga: evita el segundo
   clic impaciente que dejaría dos pedidos de carrito cruzados. */
.rgc-checkout-currency.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* En dos columnas el selector va arriba del resumen del pedido, contra el borde
   derecho: es el bloque cuyos importes cambia, así que se lee como parte de él.

   Para que quede ahí sin empujar el formulario, se hacen dos cosas a la vez: el
   margen negativo sube el bloque entero —entre mis 24px y los 24 de padding
   propio del bloque, arrancaba 76px más abajo— y el margen del resumen lo baja
   de vuelta, solo a él. Resultado: el formulario empieza a la altura del
   selector y el resumen justo debajo, con 24px de aire.

   Debajo de 900px la ficha se apila, el resumen pasa arriba de todo y el
   selector vuelve a su propio renglón: ahí no hay dos columnas que escalonar. */
@media (min-width: 900px) {
    .rgc-checkout-currency {
        position: relative;
        z-index: 2;
        margin-bottom: -52px;
    }

    .wc-block-checkout__sidebar {
        margin-top: 52px;
    }
}

/* --- Paso 2: la pantalla de pago ---
   Es una página de un solo trámite —mirar el importe y elegir cómo pagar— y a
   todo el ancho la tabla queda desierta, con los totales a un metro del nombre
   del curso. Se angosta y se centra.

   El body.woocommerce-order-pay lo pone WooCommerce solo en este endpoint, así
   que nada de esto toca el checkout del paso 1. */
.woocommerce-order-pay .entry-content > .woocommerce {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Los botones, centrados y a un ancho de botón. Los de PayPal los dibuja su SDK
   dentro de .ppc-button-wrapper y salen al 100% del contenedor; el tope es lo
   que los vuelve un botón y no una banda. */
.woocommerce-order-pay #payment .ppc-button-wrapper,
.woocommerce-order-pay #payment #ppc-button-ppcp-gateway,
.woocommerce-order-pay #payment #ppc-button-ppcp-applepay,
.woocommerce-order-pay #payment #ppc-button-ppcp-googlepay {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* El botón clásico (transferencia, Mercado Pago) no es de PayPal y va aparte. */
.woocommerce-order-pay #payment #place_order {
    display: block;
    float: none;
    min-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Botón del carrito vacío ---
   Enfold lo pinta con su botón por defecto —negro con el texto en rojo— y en una
   página que ya es un callejón sin salida eso se lee como un error. Toma el
   mismo verde y el mismo blanco del botón de inscripción de la ficha.

   Los #top y los !important son para ganarle a Enfold, que estila sus botones
   con esos ids; es la misma receta que usa .rgc-course-card__button. */
#top .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
    padding: 14px 24px;
    border: 1px solid var(--rgc-green);
    border-radius: var(--rgc-rounded-md);
    background-color: var(--rgc-green) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

#top .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
#top .wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus {
    border-color: var(--rgc-green-dark);
    background-color: var(--rgc-green-dark) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Listado de cursos — shortcode [rgc_cursos]
   ========================================================================== */

.rgc-course-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 24px 0;
}

.rgc-course-list--cols-1 { grid-template-columns: repeat(1, 1fr); }
.rgc-course-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.rgc-course-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.rgc-course-list--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) and (max-width: 991px) {
    .rgc-course-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .rgc-course-list {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.rgc-course-list__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: var(--rgc-rounded-md);
    background: #ffffff;
}

.rgc-course-list__image-link {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.rgc-course-list__image-link img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.rgc-course-list__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
}

.rgc-course-list__body .course-status-row {
    margin: 0;
}

.rgc-course-list__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.rgc-course-list__title a {
    color: inherit;
    text-decoration: none;
}

.rgc-course-list__title a:hover,
.rgc-course-list__title a:focus {
    text-decoration: underline;
}

.rgc-course-list__meta {
    margin: 0;
    color: var(--rgc-middle-gray);
    font-size: 14px;
}

.rgc-course-list__link {
    margin-top: auto;
    padding-top: 8px;
    color: var(--rgc-green);
    font-weight: 700;
    text-decoration: none;
}

.rgc-course-list__link:hover,
.rgc-course-list__link:focus {
    text-decoration: underline;
}

.rgc-course-list__empty {
    color: var(--rgc-middle-gray);
}