interior, que es inline-block y abraza su texto. */
.oyg-fp-badge{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:22px}
.oyg-fp-badge p{display:inline-block;background:var(--c-mae);border-radius:100px;padding:7px 15px;margin:0;line-height:1.4}
.oyg-fp-hero-sub{font-size:clamp(18px,2vw,23px);color:#e6ebe4;font-weight:500;line-height:1.4;margin:0 0 18px;max-width:26ch}
/* La columna ya reparte 20px de gap entre bloques; los 30px extra de margen
del CTA se sumaban a ese gap y dejaban 50px de aire a cada lado del boton.
Se bajan a 8px (aire total ~28px) para que respire sin separarse tanto. */
.oyg-fp-hero .oyg-hero-actions{margin-top:8px;margin-bottom:8px}
/* Mobile-first: base la tarjeta ocupa todo el ancho; se acota y alinea a la
derecha en escritorio (min-width abajo). */
.oyg-fp-hero-form{position:relative;z-index:2;display:flex;justify-content:stretch}
.oyg-fp-form-card{width:100%;max-width:none;background:#fff;border-radius:20px;padding:30px 28px;box-shadow:0 34px 80px rgba(0,0,0,.34);scroll-margin-top:110px}
.oyg-fp-form-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-tinta);margin-bottom:12px}
.oyg-fp-form-price{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1;color:var(--bosque);margin-bottom:6px}
.oyg-fp-form-note{font-size:13px;color:var(--texto-2);line-height:1.45;margin-bottom:20px}
.oyg-fp-form{display:grid;gap:14px}
.oyg-fp-field label{display:block;font-size:12px;font-weight:600;color:var(--texto-2);margin-bottom:6px}
.oyg-fp-field input{width:100%;border:1px solid var(--linea);border-radius:8px;background:#fff;padding:12px 14px;font-family:var(--font);font-size:15px;color:var(--texto);transition:border-color .18s var(--e-out),box-shadow .18s var(--e-out)}
.oyg-fp-field input::placeholder{color:#8a978c}
.oyg-fp-field input:focus{outline:none;border-color:var(--bosque);box-shadow:0 0 0 3px rgba(33,48,36,.12)}
.oyg-fp-form-cta{width:100%;justify-content:center;margin-top:4px}
.oyg-fp-form-alt{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:var(--bosque);border-bottom:1px solid var(--linea);padding-bottom:2px;transition:border-color .18s var(--e-out)}
.oyg-fp-form-alt:hover{border-color:var(--bosque)}
/* Info del curso: caja horizontal contenida (stroke, sin fondo, no full width) */
.oyg-fp-info{background:var(--crema);padding:clamp(20px,5vw,20px) 0}
/* Mobile-first: base apilada sin divisor; en fila con divisor de tablet arriba. */
.oyg-fp-databox{display:flex;flex-direction:column;flex-wrap:wrap;width:fit-content;max-width:100%;margin:0 auto;border:1px solid var(--linea);border-radius:20px;background:transparent;padding:6px 8px}
.oyg-fp-data{padding:16px 22px;position:relative;min-width:0}
.oyg-fp-data:not(:last-child)::after{content:"";position:absolute;top:22px;bottom:22px;right:0;width:1px;background:var(--linea);display:none}
.oyg-fp-data-v{position:relative;font-family:var(--font-display);font-weight:400;font-size:clamp(18px,1.8vw,23px);color:var(--bosque);line-height:1.15;letter-spacing:.01em;hyphens:auto;overflow-wrap:break-word}
.oyg-fp-desde{position:absolute;bottom:100%;left:0;margin-bottom:4px;font-size:15px;line-height:1;letter-spacing:.04em}
.oyg-fp-unit{font-size:15px;letter-spacing:.02em}
.oyg-fp-data-k{font-size:12px;font-weight:500;color:var(--texto-2);line-height:1.4;margin-top:10px;max-width:22ch}
.oyg-fp-col-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--bosque);border-bottom:1px solid var(--linea);padding-bottom:1px;transition:border-color .18s var(--e-out)}
.oyg-fp-col-link:hover{border-color:var(--bosque)}
.oyg-fp-body{background:var(--crema);padding:clamp(60px,7vw,96px) 0}
.oyg-fp-main{max-width:none}
.oyg-fp-block{scroll-margin-top:100px;margin-bottom:clamp(60px,7vw,96px)}
.oyg-fp-block:last-child{margin-bottom:0}
.oyg-fp-title{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;line-height:1.12;font-size:clamp(30px,4vw,52px);color:var(--bosque);margin-bottom:20px}
.oyg-fp-lead{font-size:18px;line-height:1.55;color:var(--texto);max-width:60ch;margin-bottom:16px}
.oyg-fp-note{font-size:15px;line-height:1.55;color:var(--texto-2);max-width:60ch}
.oyg-fp-sub{font-size:15.5px;color:var(--texto-2);margin-bottom:30px;max-width:58ch;line-height:1.5}
/* Qué vas a lograr: formato "Por qué Ortega", imagen (placeholder) a la izquierda */
/* Mobile-first: base 1 columna; 2 columnas en escritorio (min-width abajo). */
.oyg-fp-logros{grid-template-columns:1fr}
.oyg-fp-ph-img{background:linear-gradient(160deg,#dde1d4,#c6cfbe 55%,#b6c1ac)}
.oyg-fp-ph-img::after{display:none}
.oyg-fp-plan{border-top:1px solid var(--linea);margin-bottom:30px}
.oyg-fp-acc{border-bottom:1px solid var(--linea)}
.oyg-fp-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;font-family:var(--font);font-weight:600;font-size:18px;color:var(--bosque)}
.oyg-fp-acc summary::-webkit-details-marker{display:none}
.oyg-fp-acc-i{position:relative;width:16px;height:16px;flex:0 0 auto}
.oyg-fp-acc-i::before,.oyg-fp-acc-i::after{content:"";position:absolute;background:var(--oro-tinta);transition:transform .28s var(--e-out)}
.oyg-fp-acc-i::before{top:7px;left:0;width:16px;height:2px}
.oyg-fp-acc-i::after{left:7px;top:0;width:2px;height:16px}
.oyg-fp-acc[open] .oyg-fp-acc-i::after{transform:scaleY(0)}
.oyg-fp-acc-b{padding:0 4px 22px}
.oyg-fp-ph{font-size:15px;line-height:1.55;color:var(--texto-2);font-style:italic}
.oyg-fp-microcopy{font-size:12.5px;color:var(--texto-2);margin-top:12px}
/* Profesorado: cards con retrato 4:5, altura reducida */
/* Mobile-first: base 2 columnas (retratos compactos); 3 de tablet hacia arriba. */
.oyg-fp-faculty-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.oyg-fp-teacher{background:var(--papel);border:1px solid var(--linea);border-radius:16px;overflow:hidden}
.oyg-fp-portrait{width:100%;height:clamp(240px,26vw,320px);background:linear-gradient(160deg,#dde1d4,#c6cfbe 55%,#b6c1ac);display:block}
.oyg-fp-teacher-body{padding:20px 20px 24px}
.oyg-fp-teacher h3{font-family:var(--font);font-weight:600;font-size:16px;color:var(--bosque);margin-bottom:7px}
.oyg-fp-teacher p{font-size:13.5px;line-height:1.45;color:var(--texto-2)}
.oyg-fp-degree{background:var(--bosque);color:#fff;border-radius:22px;padding:clamp(36px,5vw,64px);box-shadow:0 26px 60px rgba(33,48,36,.18)}
.oyg-fp-title-light,.oyg-fp-title-light .elementor-heading-title{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;line-height:1.08;font-size:var(--fs-h2);color:#fff;margin-bottom:16px}
.oyg-fp-degree-sub{font-size:18px;color:#e6ebe4;font-weight:500;margin-bottom:16px}
.oyg-fp-degree-body{font-size:16px;line-height:1.6;color:#c1cabd;max-width:56ch;margin-bottom:18px}
.oyg-fp-degree-value{font-size:16px;line-height:1.5;color:var(--oro);max-width:48ch;font-weight:500}
.oyg-fp-tgrid .oyg-ph-ph{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#33452f,#20301f)}
.oyg-fp-centered{text-align:center}
.oyg-fp-centered .oyg-fp-lead,.oyg-fp-centered .oyg-fp-note{margin-left:auto;margin-right:auto}
.oyg-fp-cierre .oyg-enquiry{align-items:start}
.oyg-fp-cierre{padding-bottom:clamp(48px,6vw,72px)}
.oyg-fp-routes{background:var(--crema);padding:clamp(48px,6vw,72px) 0 clamp(72px,9vw,104px)}
/* Mobile-first: base 1 columna; 2 columnas en escritorio (min-width abajo). */
.oyg-fp-routes-grid{display:grid;grid-template-columns:1fr;gap:16px}
.oyg-fp-route-card{min-height:auto;gap:18px;padding:26px 26px}
.oyg-fp-route-card .oyg-cat-top{justify-content:flex-end}
/* Mobile-first: base con la descripción de la ruta ya visible. */
.oyg-fp-route-card p{margin:0}
/* --- Ficha · tablet: 641px en adelante --- */
@media(min-width:641px){
.oyg-fp-databox{flex-direction:row}
.oyg-fp-data{padding:30px 38px 22px}
.oyg-fp-data:not(:last-child)::after{display:block}
.oyg-fp-faculty-grid{grid-template-columns:repeat(3,1fr)}
}
/* --- Ficha · escritorio: 1001px en adelante --- */
@media(min-width:1001px){
.oyg-fp-hero.oyg-hero{min-height:82vh;padding:118px 0 clamp(56px,7vh,90px);align-items:center}
/* Escritorio: la ficha pone el texto a la IZQUIERDA y el formulario (tarjeta
blanca opaca) a la derecha, así que se puede oscurecer fuerte la izquierda
(donde va el antetítulo oro y el título) y dejar la foto asomar a la derecha. */
.oyg-fp-hero.oyg-hero::after{background:linear-gradient(95deg, rgba(15,22,17,.96) 0%, rgba(15,22,17,.93) 42%, rgba(15,22,17,.6) 58%, rgba(15,22,17,.18) 76%, transparent 92%)}
/* Reunion punto 63: la columna del texto al 60 % y el formulario al 40 %.
El intento del 31-ago se revirtio porque al estrechar el formulario se
descuadraba; ahora se le da un ancho minimo para que no se estruje. */
/* Se reparte en proporcion (fr), no en porcentaje: con porcentajes el hueco
entre columnas se sumaba aparte y la proporcion real salia 63/37. */
.oyg-fp-hero-grid{grid-template-columns:6fr minmax(340px,4fr);gap:clamp(32px,3.5vw,56px)}
.oyg-fp-hero-form{justify-content:flex-end}
.oyg-fp-form-card{max-width:420px}
.oyg-fp-logros{grid-template-columns:.95fr 1.05fr}
.oyg-fp-routes-grid{grid-template-columns:1fr 1fr}
/* La descripción de la ruta se colapsa y se revela al hover (solo puntero fino). */
.oyg-fp-route-card p{opacity:0;max-height:0;overflow:hidden;transform:translateY(6px);transition:opacity .35s var(--e-out),max-height .4s var(--e-out),transform .35s var(--e-out),color .35s var(--e-out)}
.oyg-fp-route-card:hover p{max-height:240px;transform:none}
}
/* Puntero grueso (táctil) siempre ve la descripción, aunque sea escritorio ancho. */
@media(hover:none){.oyg-fp-route-card p{opacity:1;max-height:240px;transform:none}}
/* Estructuras de la ficha sobre contenedores de Elementor. Mobile-first: base
apilado; los tiers min-width recomponen. Elementor manda la dirección del
contenedor por variable, así que se fija igual que en cifras y categorías. */
.e-con.oyg-fp-databox{--flex-direction:column;--flex-wrap:wrap;flex-direction:column;flex-wrap:wrap;width:fit-content;max-width:100%;margin-inline:auto}
.e-con.oyg-fp-data{--width:auto;width:auto;flex:0 0 auto}
.e-con.oyg-fp-hero-grid{--flex-direction:column;flex-direction:column}
.e-con.oyg-fp-faculty-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.e-con.oyg-fp-routes-grid{display:grid;grid-template-columns:1fr}
@media(min-width:641px){
.e-con.oyg-fp-databox{--flex-direction:row;flex-direction:row}
.e-con.oyg-fp-faculty-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1001px){
.e-con.oyg-fp-hero-grid{--flex-direction:row;flex-direction:row}
.e-con.oyg-fp-routes-grid{grid-template-columns:1fr 1fr}
}
/* El widget Form dentro de las cajas del sistema (cierre y ficha).
Elementor lo envuelve en columnas propias y estilarlo en rejilla de dos
era fragil: las etiquetas se iban de sitio. Una sola columna, etiqueta
encima del campo. Simple y no se rompe. */
.oyg-enq-form,.oyg-enq-form-widget,
.oyg-enq-form .elementor-widget-container,
.oyg-enq-form .elementor-form{width:100%}
.oyg-enq-form .elementor-form-fields-wrapper{
display:flex !important;flex-direction:column;gap:16px;margin:0;width:100%;
}
.oyg-enq-form .elementor-field-group{
display:flex !important;flex-direction:column;align-items:stretch;
width:100% !important;max-width:100%;flex:1 1 100%;padding:0;margin:0;
}
.oyg-enq-form .elementor-field-label{
display:block;width:100%;order:-1;font-size:12px;font-weight:600;
letter-spacing:.02em;margin:0 0 8px;padding:0;
}
.oyg-enq-form .elementor-field-textual,
.oyg-enq-form input.elementor-field,
.oyg-enq-form select.elementor-field{
width:100% !important;border:1px solid var(--linea);border-radius:8px;background:#fff;
padding:14px 15px;font-family:var(--font);font-size:15px;color:var(--texto);
}
.oyg-enq-form .elementor-field-textual:focus{outline:none;border-color:var(--bosque);box-shadow:0 0 0 3px rgba(33,48,36,.12)}
.oyg-enq-form .elementor-button[type="submit"]{
background:var(--oro);color:var(--bosque);border-radius:100px;padding:15px 28px;
font-family:var(--font);font-weight:700;font-size:14px;border:0;cursor:pointer;width:auto;
}
.oyg-enq-form .elementor-button[type="submit"]:hover{background:#efc85f}
/* Etiquetas claras sobre el verde del cierre, oscuras sobre la tarjeta blanca. */
.oyg-cierre .oyg-enq-form .elementor-field-label{color:rgba(255,255,255,.72)}
.oyg-fp-form-card .oyg-enq-form .elementor-field-label{color:var(--texto-2)}
/* Tabla comparativa montada con contenedores (Elementor free no trae tabla).
Filas en fila, primera celda a la izquierda, columna de Ortega destacada.
Mobile-first: la tabla scrollea DENTRO de su caja (nunca empuja la página);
de 701px hacia arriba se expande completa sin scroll. La contención a
width:100% es lo que evita que maestrías desborde el viewport en móvil. */
.oyg-cmp{border:1px solid var(--linea);border-radius:18px;background:var(--blanco);
width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
/* min-width:0 es CLAVE: como contenedor flex es un ítem con min-width:auto
(= min-content = 640px de las filas), que ignora el max-width:100% y empuja
la página. Con min-width:0 puede encogerse y el overflow-x:auto scrollea. */
.e-con.oyg-cmp{width:100%;max-width:100%;min-width:0}
.oyg-cmp-row{display:flex;border-bottom:1px solid var(--linea);min-width:560px}
.oyg-cmp-row:last-child{border-bottom:0}
.oyg-cmp-row > *{flex:1 1 0;min-width:0;padding:16px 18px;text-align:center;font-size:14px;
display:flex;align-items:center;justify-content:center}
.oyg-cmp-row > *.oyg-cmp-attr{flex:1.4 1 0;justify-content:flex-start;text-align:left;
font-weight:600;color:var(--texto);background:var(--crema)}
.oyg-cmp-headrow{background:var(--papel)}
.oyg-cmp-headrow > *{font-family:var(--font);font-weight:700;color:var(--bosque)}
.oyg-cmp-headrow > .oyg-cmp-us{background:var(--bosque);color:#fff}
.oyg-cmp-us{background:rgba(33,48,36,.05);font-weight:600;color:var(--bosque)}
.oyg-cmp-cell p{margin:0;color:inherit;font:inherit}
.oyg-cmp-note{font-size:13px;font-style:italic;color:var(--texto-2);margin-top:14px}
.oyg-proceso-cmp .oyg-cmp-row > *{padding:14px 16px}
@media(min-width:701px){
.oyg-cmp{overflow:hidden}
.oyg-cmp-row{min-width:0}
}
/* Retrato del profesor: la imagen va en un widget (figure + contenedor), que
hay que estirar para que llene el alto fijo y el nombre caiga debajo, no
encima de la foto. */
.oyg-fp-portrait{position:relative;height:clamp(240px,26vw,320px);overflow:hidden}
.oyg-fp-portrait > .elementor-widget-image,
.oyg-fp-portrait .elementor-widget-container,
.oyg-fp-portrait figure{position:absolute;inset:0;height:100%;width:100%;margin:0}
.oyg-fp-portrait img{width:100%;height:100%;object-fit:cover}
.oyg-fp-teacher{display:flex;flex-direction:column}
.oyg-fp-teacher-body{padding:20px 20px 24px}
/* ===== Arreglos post-migracion (revision cliente, 2026-08-12) ===== */
/* Acordeon del plan/proceso con la piel de la maqueta (.fp-acc): lineas finas,
titulo verde Work Sans, icono +/- dorado, sin cajas grises. Cubre el acordeon
HTML ( ni widget-container), asi que la pildora va
en ese mismo elemento. Maestria=vino, Educacion Continua (diplomado/micro)=
lavanda con letra oscura, Espana=naranja, Acuerdo 286=verde. */
.oyg-fp-badge.oyg-fp-badge{display:inline-block;align-self:flex-start;width:auto;max-width:max-content;background:var(--c-mae);color:#fff;border-radius:100px;padding:7px 15px;line-height:1.4}
.oyg-fp-badge p{margin:0;display:inline;background:none;padding:0}
.oyg-fp-badge.oyg-b-con{background:var(--c-con);color:#1E2A21}
.oyg-fp-badge.oyg-b-esp{background:var(--c-esp);color:#fff}
.oyg-fp-badge.oyg-b-286{background:var(--c-286);color:#fff}
.oyg-fp-badge.oyg-b-mae{background:var(--c-mae);color:#fff}
.oyg-mm .e-n-menu-title:hover .e-n-menu-title-text,.oyg-mm .e-n-menu-title.e-active .e-n-menu-title-text{color:var(--oro)}
.oyg-mm .e-n-menu-dropdown-icon{color:var(--crema)}
.oyg-mm .e-n-menu-dropdown-icon svg,.oyg-mm .e-n-menu-dropdown-icon i{width:11px;height:11px}
/* Panel desplegable: compacto y oscuro, como el menú anterior */
.oyg-mm .e-n-menu-content{box-shadow:none;background:transparent;border:0}
.oyg-mm .oyg-mm-panel{background:rgba(29,42,32,.98);backdrop-filter:blur(12px);border:1px solid var(--linea-clara);border-radius:16px;padding:12px;min-width:326px;box-shadow:0 26px 64px rgba(0,0,0,.4);gap:2px;margin-top:12px}
/* Pagina de error 404 (C10) · rediseno 2026-09-02
Hero de marca con el monograma gigante y tenue de fondo (patron de la casa,
nada de borde grueso) + "404" en oro + buscador; debajo, cuatro tarjetas con
las secciones reales para reorientar a quien llega perdido. */
.oyg-404-hero{position:relative;overflow:hidden;padding:clamp(96px,13vw,150px) 0 clamp(56px,7vw,84px);background:var(--bosque);color:var(--crema);text-align:center}
/* monograma decorativo enorme detras, casi invisible (marca de agua) */
.oyg-404-hero::before{content:"404";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(280px,42vw,560px);line-height:1;color:var(--oro);opacity:.05;pointer-events:none;white-space:nowrap;z-index:0}
.oyg-404-hero .oyg-404-inner{position:relative;z-index:1;align-items:center;gap:0}
.oyg-404-hero .elementor-heading-title{color:var(--crema)}
.oyg-404-hero .oyg-404-code .elementor-heading-title{font-family:var(--font-display);font-size:clamp(72px,11vw,128px);color:var(--oro);line-height:1;letter-spacing:.04em;margin-bottom:6px}
.oyg-404-hero .oyg-404-title .elementor-heading-title{font-size:clamp(30px,4.4vw,50px)}
.oyg-404-hero .oyg-404-lead,.oyg-404-hero .oyg-404-lead p{color:var(--crema);opacity:.9;font-size:var(--fs-lead);max-width:54ch;margin:14px auto 0}
/* buscador nativo: caja clara sobre el verde, redondeada, con boton oro.
El widget de busqueda de WP sale a ancho completo; se acota y se centra en el
propio widget (align-self, porque el hero-inner es flex-column). */
.oyg-404-hero .oyg-404-search{width:min(100%,520px);margin:30px auto 0;align-self:center}
.oyg-404-hero .oyg-404-search .elementor-widget-container,.oyg-404-hero .oyg-404-search .elementor-search-form{width:100%}
.oyg-404-hero .oyg-404-search form{display:flex;gap:8px;width:100%}
.oyg-404-hero .oyg-404-search input[type="search"]{flex:1 1 auto;min-width:0;height:52px;padding:0 20px;border-radius:100px;border:1px solid var(--linea-clara);background:rgba(255,255,255,.06);color:var(--crema);font-family:var(--font);font-size:15px}
.oyg-404-hero .oyg-404-search input[type="search"]::placeholder{color:rgba(250,247,241,.6)}
.oyg-404-hero .oyg-404-search input[type="search"]:focus{outline:2px solid var(--oro);outline-offset:1px;background:rgba(255,255,255,.1)}
.oyg-404-hero .oyg-404-search button{flex:0 0 auto;height:52px;padding:0 24px;border:0;border-radius:100px;background:var(--oro);color:var(--bosque);font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer;transition:background .22s var(--e-out)}
.oyg-404-hero .oyg-404-search button:hover{background:#efc85f}
/* franja de tarjetas de seccion */
.oyg-404-cards{background:var(--crema);padding:clamp(44px,6vw,72px) 0}
.oyg-404-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:601px){.oyg-404-grid{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.oyg-404-grid{grid-template-columns:repeat(4,1fr)}}
.oyg-404-card{position:relative;justify-content:space-between;min-height:150px;padding:22px 22px 24px;gap:18px;background:var(--blanco);border:1px solid var(--linea);border-radius:18px;color:var(--texto);box-shadow:0 2px 10px rgba(33,48,36,.05);transition:transform .4s var(--e-out),background .35s var(--e-out),color .35s var(--e-out),box-shadow .4s var(--e-out)}
.oyg-404-card .oyg-cat-top{align-items:center;justify-content:space-between;width:100%}
.oyg-404-card .oyg-cat-tag .elementor-heading-title{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}
.oyg-404-card .oyg-cat-arrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--linea);display:grid;place-items:center;color:var(--texto);transition:transform .35s var(--e-out),border-color .35s var(--e-out),color .35s var(--e-out)}
.oyg-404-card .oyg-cat-arrow svg{width:16px;height:16px}
.oyg-404-card .oyg-cat-title .elementor-heading-title{font-size:clamp(21px,2.4vw,26px);color:var(--bosque);line-height:1.2}
.oyg-404-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(33,48,36,.14)}
.oyg-404-card:hover .oyg-cat-arrow{transform:translateX(3px)}
/* cada tarjeta toma el color de su tipologia al pasar el raton */
.oyg-404-card.oyg-c-mae:hover{background:var(--c-mae);color:var(--crema)}
.oyg-404-card.oyg-c-con:hover{background:var(--c-con);color:var(--bosque)}
.oyg-404-card.oyg-c-esp:hover{background:var(--c-esp);color:var(--crema)}
.oyg-404-card.oyg-c-ins:hover{background:var(--bosque);color:var(--crema)}
.oyg-404-card.oyg-c-mae:hover .oyg-cat-title .elementor-heading-title,.oyg-404-card.oyg-c-esp:hover .oyg-cat-title .elementor-heading-title,.oyg-404-card.oyg-c-ins:hover .oyg-cat-title .elementor-heading-title{color:var(--crema)}
.oyg-404-card:hover .oyg-cat-tag .elementor-heading-title,.oyg-404-card.oyg-c-mae:hover .oyg-cat-arrow,.oyg-404-card.oyg-c-esp:hover .oyg-cat-arrow,.oyg-404-card.oyg-c-ins:hover .oyg-cat-arrow{color:inherit;border-color:currentColor}
.oyg-404-card.oyg-c-con:hover .oyg-cat-tag .elementor-heading-title{color:var(--bosque)}
/* Acuerdo 286: secciones unificadas (C7) */
.oyg-a286-sec{padding:clamp(48px,6vw,84px) 0}
.oyg-a286-sec .oyg-fp-title{margin-bottom:26px}
.oyg-a286-lic-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:781px){.oyg-a286-lic-grid{grid-template-columns:1fr 1fr}}
.oyg-a286-card{background:var(--papel);border:1px solid var(--linea-gris);border-radius:16px;padding:26px 24px}
.oyg-a286-card .elementor-heading-title{font-size:19px;color:var(--bosque);line-height:1.3;margin-bottom:8px}
.oyg-a286-card .oyg-a286-card-d,.oyg-a286-card .oyg-a286-card-d p{color:var(--texto-2);font-size:15px;line-height:1.55;margin:0}
.oyg-a286-req ul{margin:0 0 18px;padding-left:1.2em}
.oyg-a286-req li{margin:0 0 7px;line-height:1.5}
.oyg-a286-nota,.oyg-a286-nota p{font-size:14px;color:var(--texto-2);font-style:italic;margin:8px 0 0}
.oyg-a286-costos,.oyg-a286-cal{background:var(--papel)}
.oyg-a286-contacto{background:var(--bosque);color:var(--crema)}
.oyg-a286-contacto .elementor-heading-title{color:var(--crema)}
.oyg-a286-contacto .oyg-a286-cont-d,.oyg-a286-contacto .oyg-a286-cont-d p{color:var(--crema);opacity:.9;line-height:1.8;font-size:15.5px}
.oyg-a286-contacto .oyg-a286-cont-d a{color:var(--oro)}
.oyg-mm-entry{padding:10px 14px;border-radius:10px;transition:background .2s var(--e-out)}
.oyg-mm-entry:hover{background:rgba(255,255,255,.07)}
.oyg-mm-t .elementor-heading-title{font-family:var(--font);font-weight:600;font-size:15px;color:var(--crema);text-transform:none;letter-spacing:0;line-height:1.25}
.oyg-mm-t a{color:inherit}
.oyg-mm-d,.oyg-mm-d p{margin:3px 0 0;font-size:12.5px;color:rgba(250,247,241,.62);line-height:1.35}
.oyg-mm-feat .elementor-heading-title{color:var(--oro);font-size:13.5px;font-weight:700}
.oyg-mm-entry.oyg-mm-feat,.oyg-mm-panel .oyg-mm-entry:has(.oyg-mm-feat){margin-top:4px;border-top:1px solid var(--linea-clara);border-radius:0 0 10px 10px}
/* Cabecera: el texto del menu debe leerse sobre el verde. Elementor pinta el
titulo con su propia regla de mucho peso que lee las variables
--n-menu-title-color-*; en vez de pelear con especificidad, les damos el valor
correcto (crema en reposo, oro al pasar y activo). Clase repetida para ganar
la asignacion de la variable a la que hace Elementor por el id del widget. */
.oyg-mm.oyg-mm{
--n-menu-title-color-normal:var(--crema);
--n-menu-title-color-hover:var(--oro);
--n-menu-title-color-active:var(--oro);
}
.oyg-mm.oyg-mm .e-n-menu-title-text{color:var(--crema)}
.oyg-mm.oyg-mm .e-n-menu-title:hover .e-n-menu-title-text,
.oyg-mm.oyg-mm .e-n-menu-title.e-active .e-n-menu-title-text{color:var(--oro)}
.oyg-mm.oyg-mm .e-n-menu-dropdown-icon,
.oyg-mm.oyg-mm .e-n-menu-dropdown-icon svg{color:var(--crema);fill:currentColor}
/* Desplegable mas compacto: el aire de mas venia del gap por defecto de
Elementor dentro de cada entrada (20px entre titulo y descripcion). La
descripcion ya lleva su propio margen de 3px, asi que basta con anular ese
gap y ajustar el relleno vertical. Clase repetida para ganar al gap de Elementor. */
.oyg-mm-entry.oyg-mm-entry{row-gap:0;column-gap:0;padding-top:7px;padding-bottom:7px}
/* Barra de datos rápidos (oyg-fp-databox) al 90% del ancho, con las celdas
repartidas por igual. Antes iba a `fit-content` y quedaba estrecha (~70%).
Solo en escritorio: en móvil la barra sigue apilada a ancho completo. */
@media(min-width:769px){
/* El contenedor que envuelve la barra tiene el tope de ancho del sistema (1280) y
por eso la barra no llegaba al borde en pantallas grandes. Aqui se suelta. */
.oyg-fp-info,.oyg-fp-info .oyg-wrap,.oyg-fp-info .e-con.oyg-wrap,
.oyg-fp-info > .e-con-inner{max-width:none;width:100%;padding-left:0;padding-right:0}
/* OJO: 90vw se calcula sobre la ventana INCLUYENDO la barra de desplazamiento, asi
que la caja se salia unos pixeles por la derecha. Se usa el 90 % del ancho real
del contenido y se acota al ancho maximo del sistema. */
/* La barra va a ANCHO COMPLETO, de lado a lado. Antes iba al 90 % y quedaban dos
franjas vacias a los lados. Ojo: nada de `vw`, que incluye la barra de
desplazamiento y saca la caja unos pixeles fuera. */
/* La barra ocupa el ancho de la página pero SÍ lleva línea a los cuatro lados: sin
las laterales parecía cortada, como si se saliera de la pantalla. El color es el
gris de cajas de información, más oscuro que el de antes, que casi no se veía. */
.oyg-fp-databox.oyg-fp-databox,.e-con.oyg-fp-databox{
width:100%;max-width:100%;margin-inline:0;border-radius:0;
border:1px solid var(--linea-gris)}
/* La barra ocupa todo el ancho, pero el texto se separa de los bordes para que
respire: mismo aire lateral que el resto de la web.
El aire va en la CAJA y no en la primera y la última casilla, porque al ocultarse
la de Créditos cambian cuáles son, y además la regla de relleno de las casillas
va más abajo y pisaba esta. */
.oyg-fp-databox.oyg-fp-databox,.e-con.oyg-fp-databox{
padding-left:clamp(40px,7vw,120px);padding-right:clamp(40px,7vw,120px)}
.oyg-fp-databox .oyg-fp-data,.e-con.oyg-fp-databox > .oyg-fp-data{flex:1 1 0}
}
/* ===== MÓVIL: menú vertical legible + rejilla de profesores + caja de cierre ===== */
@media(max-width:1000px){
/* El menú de la cabecera en móvil es una lista VERTICAL oscura (no la fila
horizontal de escritorio, que se salía). La hamburguesa lo abre y cierra. */
.oyg-mm .e-n-menu,.oyg-mm .e-n-menu-heading{background:var(--bosque)}
/* Cada fila del menu traia fondo BLANCO propio y tapaba el verde (letra crema
ilegible). La ponemos transparente para que se vea el verde de la lista. */
.oyg-mm .e-n-menu-heading .e-n-menu-item,
.oyg-mm .e-n-menu-heading .e-n-menu-title,
.oyg-mm .e-n-menu-heading .e-n-menu-title-container{background:transparent !important}
.oyg-mm .e-n-menu-heading{flex-direction:column;flex-wrap:wrap;align-items:stretch;gap:0;padding:10px 18px 18px;width:100%;border-radius:0 0 16px 16px;margin-top:34px}
/* Con el menu abierto, ocultar el boton flotante de volver arriba (estorba). */
body.oyg-menu-open .oyg-totop{opacity:0;visibility:hidden}
.oyg-mm .e-n-menu-title{width:100%}
.oyg-mm .e-n-menu-title-container{padding:14px 2px;justify-content:space-between;border-bottom:1px solid var(--linea-clara)}
.oyg-mm .e-n-menu-title-text{white-space:normal;font-size:16px;color:#fff}
.oyg-mm .e-n-menu-dropdown-icon{color:#fff}
.oyg-mm .oyg-mm-panel{min-width:0;width:100%;margin-top:6px;position:static;backdrop-filter:none;background:rgba(0,0,0,.22)}
}
@media(max-width:768px){
.oyg-fp-faculty-grid,.e-con.oyg-fp-faculty-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
.oyg-enq-box{padding:26px 22px;border-radius:18px}
}
/* #83 Portadas de paginas legales (Aviso de privacidad #180, Terminos #182)
sobrias: sin imagen de fondo a pantalla completa; cabecera compacta verde lisa. */
.page-id-180 .oyg-hero,.page-id-182 .oyg-hero{
min-height:0 !important;
background-image:none !important;
background:var(--bosque);
padding:clamp(96px,12vw,140px) 0 clamp(40px,5vw,60px);
}
.page-id-180 .oyg-hero-inner,.page-id-182 .oyg-hero-inner{min-height:0}
/* #32 Grosor del borde de los campos: Elementor lo fija a 1px con mucha fuerza,
asi que aqui lo subimos a 1.5px (marca acotada, solo campos de formulario). */
.oyg-fp-form-card .elementor-field-textual,
.oyg-fp-form-card select.elementor-field,
.oyg-fp-form-card textarea.elementor-field,
.oyg-enq-form .elementor-field-textual{border-width:1.5px !important}
/* =========================================================
FIX (2026-09-02): el contenedor de primer nivel del PIE se quedaba sin ocupar el
ancho, asi que su fondo verde solo se pintaba detras de los hijos y las letras
claras quedaban sobre el crema de la pagina (ilegibles) en toda la web.
Solo se corrige el ANCHO. OJO: no tocar el `display` de estos contenedores.
Elementor decide fila o columna con su variable --display; forzar display:flex
los tira a columna y rompe la cabecera (logo, menu y boton apilados). */
[data-elementor-type="footer"] > .e-con,
[data-elementor-type="footer"] > .elementor-section{width:100% !important}
/* =========================================================
Blog · pagina de listado (reconstruida 2026-09-02 desde la maqueta)
========================================================= */
/* En una plantilla de tipo "archive", las secciones de primer nivel no ocupaban el
ancho completo (el hero salia como un cuadrito arriba a la izquierda): se corrige
el ANCHO. NO tocar el `display`: Elementor decide fila o columna con su variable
--display, y forzarlo rompe la disposicion (paso con la cabecera). */
.oyg-bl-hero,.oyg-bl-sec,.oyg-bl-sus{width:100% !important;max-width:100% !important}
.oyg-bl-hero > .e-con-inner,.oyg-bl-sec > .e-con-inner,.oyg-bl-sus > .e-con-inner{width:100%;max-width:var(--ancho);margin-inline:auto}
/* Hero con foto de fondo editorial */
.oyg-bl-hero{position:relative;overflow:hidden;padding:clamp(90px,12vw,150px) 0 clamp(56px,7vw,84px);
background:#1c2a20 url('https://oyg.altarastrategic.com/wp-content/uploads/2026/09/blog-workspace.webp') center/cover no-repeat;color:var(--crema)}
.oyg-bl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(28,42,32,.92) 0%,rgba(28,42,32,.72) 46%,rgba(28,42,32,.30) 100%);z-index:0}
/* El bloque del hero va pegado a la IZQUIERDA (no centrado) y con ancho suficiente
para que el titular no se parta en lineas cortas. */
.oyg-bl-hero-inner{position:relative;z-index:1;align-items:flex-start;text-align:left;gap:0;
width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:22px}
@media(min-width:601px){.oyg-bl-hero-inner{padding-inline:40px}}
.oyg-bl-hero-inner > *{max-width:820px;width:100%}
.oyg-bl-hero .elementor-widget-heading,.oyg-bl-hero .elementor-widget-text-editor{max-width:820px;width:100%}
.oyg-bl-hero h1,.oyg-bl-hero .elementor-heading-title{max-width:820px}
.oyg-bl-hero .oyg-hero-top .elementor-heading-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.oyg-bl-hero h1,.oyg-bl-hero .elementor-heading-title{color:var(--crema)}
.oyg-bl-hero .oyg-hero-desc,.oyg-bl-hero .oyg-hero-desc p{color:rgba(250,247,241,.9);font-size:var(--fs-lead);margin:14px 0 0;max-width:56ch}
.oyg-bl-hero .elementor-widget-button{margin-top:26px}
/* Secciones del blog sobre crema */
.oyg-bl-sec{padding:clamp(44px,6vw,72px) 0;background:var(--crema)}
.oyg-bl-sec:nth-of-type(even){background:var(--papel)}
.oyg-bl-h2 .elementor-heading-title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);color:var(--bosque);margin-bottom:30px}
.oyg-bl-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:601px){.oyg-bl-grid{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.oyg-bl-grid{grid-template-columns:repeat(4,1fr)}}
.oyg-cat-title-b .elementor-heading-title{font-size:var(--fs-titulo-tarjeta);color:var(--bosque);line-height:1.25;font-weight:600}
/* Rejilla automatica de articulos (loop-grid) */
.oyg-bl-loop .elementor-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:601px){.oyg-bl-loop .elementor-grid{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.oyg-bl-loop .elementor-grid{grid-template-columns:repeat(4,1fr)}}
/* Tarjeta de post: color pleno por tema, texto claro encima (como la maqueta).
La imagen destacada va arriba; el cuerpo, sobre el color de la categoria. */
.oyg-bl-card{overflow:hidden;padding:0;background:var(--c-286);color:var(--crema);border:0;border-radius:18px;box-shadow:0 2px 10px rgba(33,48,36,.08);transition:transform .4s var(--e-out),box-shadow .4s var(--e-out)}
.oyg-bl-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(33,48,36,.2)}
.oyg-bl-card .oyg-bl-img img{width:100%;height:170px;object-fit:cover;display:block}
/* imagen destacada como fondo del contenedor (via fiable en el loop) */
.oyg-bl-card .oyg-bl-img{display:none}
.oyg-bl-card .oyg-cat-body{padding:24px 22px 26px;gap:14px;min-height:230px;justify-content:flex-start}
/* textos de la tarjeta en claro sobre el color */
.oyg-bl-card .oyg-cat-tag,.oyg-bl-card .oyg-cat-tag p{color:rgba(250,247,241,.72);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0}
.oyg-bl-card .oyg-cat-title-b .elementor-heading-title{color:var(--crema);font-size:var(--fs-titulo-tarjeta);line-height:1.25;font-weight:700}
.oyg-bl-card .oyg-cat-price,.oyg-bl-card .oyg-cat-price p{font-size:13px;color:rgba(250,247,241,.72);margin-top:4px}
.oyg-bl-card .oyg-cat-arrow{border-color:rgba(250,247,241,.45);color:var(--crema)}
.oyg-bl-card:hover .oyg-cat-arrow{transform:translateX(3px)}
/* un color por tema (mismo sistema de la web) */
/* la clase de categoria la lleva el ENVOLTORIO del elemento del bucle, no la
tarjeta: por eso el color se pide desde el padre. */
.cat-masterclass .oyg-bl-card,.oyg-bl-card.cat-masterclass{background:var(--c-286)}
.cat-presentaciones-de-libro .oyg-bl-card,.oyg-bl-card.cat-presentaciones-de-libro{background:var(--c-mae)}
.cat-foros-y-debates .oyg-bl-card,.oyg-bl-card.cat-foros-y-debates{background:var(--c-esp)}
.cat-mesas-de-analisis .oyg-bl-card,.oyg-bl-card.cat-mesas-de-analisis{background:var(--c-ciruela)}
/* Tarjetas del filtro por tema: tambien a color pleno */
.oyg-bl-tema{color:var(--crema);border:0}
.oyg-bl-tema.c-mae{background:var(--c-286)}
.oyg-bl-tema.c-286{background:var(--c-mae)}
.oyg-bl-tema.c-esp{background:var(--c-esp)}
.oyg-bl-tema.c-con{background:var(--c-ciruela)}
.oyg-bl-tema .oyg-cat-tag .elementor-heading-title{color:rgba(250,247,241,.72)}
.oyg-bl-tema .oyg-cat-title-b .elementor-heading-title{color:var(--crema)}
.oyg-bl-tema .elementor-widget-text-editor,.oyg-bl-tema .elementor-widget-text-editor p{color:rgba(250,247,241,.88)}
.oyg-bl-tema .oyg-cat-arrow{border-color:rgba(250,247,241,.45);color:var(--crema)}
.oyg-bl-tema:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(33,48,36,.2)}
/* Caja de suscripcion, verde bosque a sangre */
.oyg-bl-sus{padding:clamp(50px,7vw,90px) 0;background:var(--bosque);color:var(--crema)}
.oyg-bl-sus-inner{align-items:flex-start;max-width:720px}
.oyg-bl-sus-h .elementor-heading-title{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,4vw,44px);color:var(--crema)}
.oyg-bl-sus-p,.oyg-bl-sus-p p{color:rgba(250,247,241,.88);font-size:var(--fs-lead);margin-top:12px}
/* Blog · seccion DESTACADO (foto grande a la izquierda, copy a la derecha) */
.oyg-bl-dest-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:861px){.oyg-bl-dest-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}
.oyg-bl-dest-foto{min-height:340px;border-radius:0;background-size:cover;background-position:center;background-repeat:no-repeat}
@media(min-width:861px){.oyg-bl-dest-foto{min-height:420px}}
.oyg-bl-dest-copy{gap:10px;justify-content:center}
.oyg-bl-dest-h .elementor-heading-title{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,34px);color:var(--bosque);line-height:1.15;letter-spacing:.02em;text-transform:uppercase}
.oyg-bl-dest-sub,.oyg-bl-dest-sub p{color:var(--texto-2);font-size:15px;margin:0}
.oyg-bl-dest-p,.oyg-bl-dest-p p{color:var(--texto);font-size:16px;line-height:1.6;margin:6px 0 0}
.oyg-bl-dest-lnk{margin-top:10px}
.oyg-bl-dest-lnk .elementor-button{background:transparent;color:var(--bosque);padding:0;font-weight:700;font-size:15px;border:0;border-radius:0}
.oyg-bl-dest-lnk .elementor-button::after{content:" →"}
.oyg-bl-dest-lnk .elementor-button:hover{background:transparent;color:var(--c-mae)}
/* La flecha de las tarjetas de color se queda BLANCA al pasar el raton (el estilo
general la pinta oscura y sobre el color no se veia). */
.oyg-bl-card:hover .oyg-cat-arrow,.oyg-bl-card:focus-within .oyg-cat-arrow,
.oyg-bl-tema:hover .oyg-cat-arrow,.oyg-bl-tema:focus-within .oyg-cat-arrow{
color:var(--crema);border-color:var(--crema);background:transparent}
.oyg-bl-card:hover .oyg-cat-arrow svg,.oyg-bl-tema:hover .oyg-cat-arrow svg{stroke:var(--crema);color:var(--crema)}
/* y los textos de la tarjeta tampoco cambian a oscuro al pasar el raton */
.oyg-bl-card:hover .oyg-cat-title-b .elementor-heading-title,
.oyg-bl-tema:hover .oyg-cat-title-b .elementor-heading-title{color:var(--crema)}
.oyg-bl-card:hover .oyg-cat-tag,.oyg-bl-card:hover .oyg-cat-tag p,
.oyg-bl-tema:hover .oyg-cat-tag .elementor-heading-title{color:rgba(250,247,241,.72)}
/* Blog · ARTICULO: cabecera con la foto del propio articulo de fondo y velo para que
el titulo se lea; y el cuerpo del texto con la medida y el ritmo del sistema. */
.oyg-bs-hero{position:relative;overflow:hidden;background-color:var(--bosque);background-size:cover;background-position:center;
padding:clamp(110px,14vw,190px) 0 clamp(50px,7vw,80px)}
/* velo fuerte: muchas destacadas son carteles CON texto y compiten con el titular */
.oyg-bs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,42,32,.80) 0%,rgba(28,42,32,.93) 100%);z-index:0}
.oyg-bs-hero{background-blend-mode:normal}
.oyg-bs-hero-inner{position:relative;z-index:1;max-width:var(--ancho);margin-inline:auto;padding-inline:22px}
@media(min-width:601px){.oyg-bs-hero-inner{padding-inline:40px}}
.oyg-bs-date,.oyg-bs-date p{color:var(--oro);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.oyg-bs-title .elementor-heading-title{color:var(--crema);font-size:clamp(30px,4.6vw,52px);line-height:1.12;max-width:900px}
/* cuerpo del articulo */
.oyg-bs-body{padding:clamp(40px,6vw,72px) 22px}
@media(min-width:601px){.oyg-bs-body{padding-inline:40px}}
.oyg-bs-body p{font-size:17px;line-height:1.75;color:var(--texto);margin:0 0 1.1em}
.oyg-bs-body h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2-texto);color:var(--bosque);margin:1.6em 0 .5em}
.oyg-bs-body h3{font-size:clamp(19px,2.2vw,23px);color:var(--bosque);margin:1.4em 0 .4em}
/* El redondeo tiene que ir tambien en la caja que envuelve la imagen (la figura de
WordPress) y con recorte, o la esquina cuadrada de fuera tapa la redondeada. */
.oyg-bs-body img{border-radius:14px;margin:1.4em 0;display:block}
.oyg-bs-body figure,.oyg-bs-body .wp-block-image,.oyg-bs-body .wp-caption{border-radius:14px;overflow:hidden;margin:1.4em 0}
.oyg-bs-body figure img,.oyg-bs-body .wp-block-image img{border-radius:14px;width:auto;max-width:100%;height:auto}
/* La imagen NUNCA se estira mas alla de su tamano real (salia borrosa y gigante) y
el cuerpo del articulo tiene una medida de lectura comoda, no toda la pantalla. */
.oyg-bs-body figure,.oyg-bs-body .wp-block-image{max-width:880px;margin-inline:auto}
.oyg-bs-body img{max-width:min(100%,880px);height:auto}
.oyg-bs-body figcaption,.oyg-bs-body .wp-caption-text{font-size:14px;color:var(--texto-2);padding:10px 4px 0;margin:0}
.oyg-bs-body a{color:var(--c-mae);text-decoration:underline;text-underline-offset:3px}
.oyg-bs-body ul,.oyg-bs-body ol{margin:0 0 1.2em 1.2em}
.oyg-bs-body li{margin-bottom:.4em;line-height:1.7}
/* Blog · filtro por tema: el tema elegido se marca, y aviso si no tiene articulos */
.oyg-bl-tema{cursor:pointer;transition:transform .3s var(--e-out),box-shadow .3s var(--e-out),outline-color .2s}
.oyg-bl-tema-activo{outline:3px solid var(--oro);outline-offset:3px;transform:translateY(-3px);box-shadow:0 18px 40px rgba(33,48,36,.22)}
.oyg-bl-vacio{display:none;padding:28px 0;color:var(--texto-2);font-size:16px;text-align:center}
/* Los emojis del texto son imagenes para WordPress: se quedan del tamano de una
letra. Sin esto, la regla de imagenes los estira a pantalla completa (un emoji de
mano salia como una mancha amarilla gigante tapando el articulo). */
.oyg-bs-body img.emoji,.oyg-bs-body img[src*="/svg/"],.oyg-bs-body p img[src$=".svg"]{
display:inline !important;width:1.15em !important;height:1.15em !important;
max-width:1.15em !important;margin:0 .08em !important;border-radius:0 !important;vertical-align:-.12em;box-shadow:none}
/* La cabecera del articulo ya muestra la imagen destacada a toda pantalla, asi que la
PRIMERA imagen del texto (que casi siempre es la misma) sobra y se oculta. 10 de las
26 entradas empiezan con esa imagen repetida. No se borra el contenido del cliente:
solo se oculta en pantalla, asi que sigue en el editor si algun dia se quiere. */
.oyg-bs-body figure.wp-block-image:first-child,
.oyg-bs-body .wp-block-image:first-child,
.oyg-bs-body .elementor-widget-container > figure.wp-block-image:first-child{display:none}
/* =========================================================
Pagina de Podcast (punto 13 de la reunion): conversatorios del canal
========================================================= */
.oyg-pc-hero{position:relative;overflow:hidden;padding:clamp(96px,12vw,150px) 0 clamp(50px,7vw,80px);background:var(--bosque);color:var(--crema)}
.oyg-pc-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 0%,rgba(225,184,78,.14) 0%,transparent 60%);z-index:0}
.oyg-pc-hero-inner{position:relative;z-index:1;align-items:flex-start;text-align:left;width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:22px}
@media(min-width:601px){.oyg-pc-hero-inner{padding-inline:40px}}
.oyg-pc-hero-inner > *{max-width:820px;width:100%}
.oyg-pc-hero .oyg-hero-top .elementor-heading-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.oyg-pc-hero h1,.oyg-pc-hero .elementor-heading-title{color:var(--crema)}
.oyg-pc-hero .oyg-hero-desc,.oyg-pc-hero .oyg-hero-desc p{color:rgba(250,247,241,.9);font-size:var(--fs-lead);margin:14px 0 0;max-width:60ch}
.oyg-pc-hero .elementor-widget-button{margin-top:26px}
/* rejilla de episodios */
.oyg-pc-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:601px){.oyg-pc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.oyg-pc-grid{grid-template-columns:repeat(3,1fr)}}
.oyg-pc-card{min-height:200px;padding:0;background:var(--c-286);color:var(--crema);border:0;border-radius:18px;overflow:hidden;
box-shadow:0 2px 10px rgba(33,48,36,.08);transition:transform .4s var(--e-out),box-shadow .4s var(--e-out)}
.oyg-pc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(33,48,36,.2)}
.oyg-pc-card.c-mae{background:var(--c-mae)}
.oyg-pc-card.c-esp{background:var(--c-esp)}
.oyg-pc-card.c-ciruela{background:var(--c-ciruela)}
.oyg-pc-card.c-con{background:var(--bosque)}
.oyg-pc-card .oyg-cat-body{padding:24px 22px 26px;gap:14px;justify-content:flex-start;min-height:200px}
.oyg-pc-card .oyg-cat-tag .elementor-heading-title{color:rgba(250,247,241,.72);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.oyg-pc-card .oyg-cat-title-b .elementor-heading-title{color:var(--crema);font-size:var(--fs-titulo-tarjeta);line-height:1.3;font-weight:700}
.oyg-pc-card .oyg-cat-price,.oyg-pc-card .oyg-cat-price p{color:rgba(250,247,241,.72);font-size:13px;margin-top:auto}
/* el icono de play, en circulo claro */
.oyg-pc-card .oyg-cat-arrow{width:38px;height:38px;border:1.5px solid rgba(250,247,241,.45);color:var(--crema);border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.oyg-pc-card .oyg-cat-arrow svg{width:14px;height:14px;margin-left:2px}
.oyg-pc-card:hover .oyg-cat-arrow{background:var(--oro);border-color:var(--oro);color:var(--bosque)}
/* =========================================================
Color de marca por categoria (aprobado por Claudia, 2026-09-02)
Los tonos salen del manual de marca. Sobre el naranja PULSO el texto claro se
queda por debajo del minimo legible (3,3 sobre 4,5 exigible), asi que ahi el
texto va oscuro: sube a 4,9 y se lee. Es un ajuste de legibilidad, no de marca.
========================================================= */
.oyg-c-esp{--cctx:var(--tinta-sobre-pulso)}
.oyg-cat.oyg-c-esp:hover,.oyg-cat.oyg-c-esp:hover h3,.oyg-cat.oyg-c-esp:hover p,
.oyg-cat.oyg-c-esp:hover .oyg-cat-tag{color:var(--tinta-sobre-pulso)}
@media(hover:none){
.oyg-cat.oyg-c-esp,.oyg-cat.oyg-c-esp h3,.oyg-cat.oyg-c-esp p,
.oyg-cat.oyg-c-esp .oyg-cat-tag{color:var(--tinta-sobre-pulso)}
}
/* Las tarjetas naranjas llevan letra BLANCA, igual que las granates y las verdes.
Antes usaban un marron muy oscuro que sobre el naranja no se leia. */
.oyg-bl-card.cat-foros-y-debates,.oyg-bl-tema.c-esp,.oyg-pc-card.c-esp{color:var(--crema)}
.oyg-bl-card.cat-foros-y-debates .oyg-cat-title-b .elementor-heading-title,
.oyg-bl-tema.c-esp .oyg-cat-title-b .elementor-heading-title,
.oyg-pc-card.c-esp .oyg-cat-title-b .elementor-heading-title{color:var(--crema)}
.oyg-bl-card.cat-foros-y-debates .oyg-cat-tag,.oyg-bl-card.cat-foros-y-debates .oyg-cat-tag p,
.oyg-bl-card.cat-foros-y-debates .oyg-cat-price,.oyg-bl-card.cat-foros-y-debates .oyg-cat-price p,
.oyg-pc-card.c-esp .oyg-cat-tag .elementor-heading-title,
.oyg-pc-card.c-esp .oyg-cat-price,.oyg-pc-card.c-esp .oyg-cat-price p{color:rgba(250,247,241,.88)}
.oyg-bl-card.cat-foros-y-debates .oyg-cat-arrow,.oyg-pc-card.c-esp .oyg-cat-arrow,
.oyg-bl-tema.c-esp .oyg-cat-arrow{color:var(--crema);border-color:rgba(250,247,241,.5)}
/* Punto 63 de la reunion: en la cabecera de las fichas, las palabras largas se parten
en vez de desbordar la columna. Afecta sobre todo a titulos como "Maestria en
Relaciones Internacionales", que al estrechar la columna al 60 % podrian salirse. */
.oyg-fp-title,.oyg-fp-title .elementor-heading-title,
.oyg-fp-title-light,.oyg-fp-title-light .elementor-heading-title{
overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.oyg-fp-hero-col,.oyg-fp-hero-col *{min-width:0}
/* La celda de "Créditos" ya no se muestra vacía: si el instituto no ha dado el número,
la celda entera desaparece y las demás reparten el espacio. Antes salía una raya
suelta con la etiqueta debajo, que parecía un error de la web.
Cuando alguien escriba el número en el panel, la celda vuelve a aparecer sola.
El dato se rellena desde el campo "Créditos" del formulario del programa. */
.oyg-fp-data-creditos:not(:has(.oyg-fp-data-v .elementor-heading-title:not(:empty))){display:none}
.oyg-fp-data-pendiente{opacity:.45}
.oyg-fp-data-pendiente .oyg-fp-data-v{min-height:1em}
/* La caja pasa de 3 a 5 datos (punto 19 de la reunion), asi que cada celda es mas
estrecha: el texto baja de cuerpo y se prohibe partir palabras, que salian cosas
como "4 CUATRI-MESTRES" u "ONLINE CON CLA-SES". */
@media(min-width:769px){
.oyg-fp-databox .oyg-fp-data{padding:22px 18px}
.oyg-fp-databox .oyg-fp-data-v{font-size:clamp(15px,1.25vw,19px);line-height:1.2;hyphens:none;word-break:normal;overflow-wrap:normal}
.oyg-fp-databox .oyg-fp-data-k{font-size:11.5px;margin-top:8px;max-width:none}
}
/* El RVOE es el dato mas largo: se queda en una linea de cuerpo menor. */
.oyg-fp-databox .oyg-fp-data:last-child .oyg-fp-data-v{font-size:clamp(13px,1.05vw,16px)}
/* ---------------------------------------------------------------------------
CALENDARIO DE LA FICHA DE MAESTRIA (punto 17 de la reunion del 28 de agosto)
Las fechas de la convocatoria, en filas de dos columnas: el tramo a la izquierda
y la fecha a la derecha. La ultima fila (inicio de clases) va destacada, porque
es el dato que el aspirante busca primero.
--------------------------------------------------------------------------- */
.oyg-fp-calendario .oyg-cal-tabla{
display:flex;flex-direction:column;gap:0;
border:1px solid var(--linea-gris);border-radius:14px;overflow:hidden;
/* La tabla ocupa el ancho de la sección, igual que el plan de estudios y las
preguntas frecuentes. Antes tenía un tope de 820px que la dejaba pegada a la
izquierda con un hueco enorme a la derecha. */
margin-top:26px;width:100%}
.oyg-fp-calendario .oyg-cal-fila{
display:flex;flex-direction:row;align-items:baseline;gap:24px;
padding:17px clamp(18px,2.4vw,28px);
border-bottom:1px solid var(--linea-gris)}
.oyg-fp-calendario .oyg-cal-fila:last-child{border-bottom:0}
.oyg-fp-calendario .oyg-cal-act,
.oyg-fp-calendario .oyg-cal-act .elementor-heading-title{
flex:1 1 auto;min-width:0;
font-family:var(--font);font-size:15px;font-weight:600;line-height:1.35;
color:var(--texto);letter-spacing:0}
.oyg-fp-calendario .oyg-cal-fecha{flex:0 0 auto;text-align:right}
.oyg-fp-calendario .oyg-cal-fecha p{
margin:0;font-size:14.5px;line-height:1.35;color:var(--texto-2);font-weight:500}
/* El inicio de clases: fondo suave y letra fuerte, para que se lea de un vistazo. */
.oyg-fp-calendario .oyg-cal-fila-hito{background:rgba(33,48,36,.045)}
.oyg-fp-calendario .oyg-cal-fila-hito .oyg-cal-act,
.oyg-fp-calendario .oyg-cal-fila-hito .oyg-cal-act .elementor-heading-title{
color:var(--bosque);font-weight:700}
.oyg-fp-calendario .oyg-cal-fila-hito .oyg-cal-fecha p{color:var(--bosque);font-weight:700}
/* La nota va a todo el ancho de la sección, en una sola línea: con el tope de 640px
que tenía antes se partía en dos y quedaba descolgada bajo la tabla. */
.oyg-fp-calendario .oyg-cal-nota p{
margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--texto-2);
max-width:none;font-style:italic}
/* En movil la fecha baja debajo del tramo, que si no se aprietan las dos columnas. */
@media(max-width:640px){
.oyg-fp-calendario .oyg-cal-fila{flex-direction:column;align-items:flex-start;gap:5px;padding:15px 18px}
.oyg-fp-calendario .oyg-cal-fecha{text-align:left}
}
/* Si el repetidor del panel no tiene fechas, la seccion entera de calendario
desaparece (titulo, subtitulo y nota incluidos). Asi una maestria sin fechas no
ensena un bloque vacio, y en cuanto se anade una fila desde el panel reaparece. */
.oyg-fp-calendario:not(:has(.oyg-cal-fila)){display:none}
.oyg-cal-wrap{width:100%}
/* Los bloques de Metodología los apila Elementor con su separación por defecto (20px),
que se sumaba al relleno de cada bloque y dejaba el texto flotando muy lejos de la
línea de abajo. El aire lo da el relleno del bloque, así que la separación sobra. */
.oyg-trust .oyg-pillars,.e-con.oyg-pillars{gap:0;row-gap:0}
/* En móvil la barra de datos también necesita aire lateral: la regla de arriba solo
entra a partir de 769px de ancho, así que en el teléfono el texto quedaba pegado
al borde (9px). Aquí se le da el mismo respiro que al resto del contenido. */
@media(max-width:768px){
.oyg-fp-databox.oyg-fp-databox,.e-con.oyg-fp-databox{
padding-left:24px;padding-right:24px}
}
/* ---------------------------------------------------------------------------
BARRA DE DATOS EDITABLE
Las casillas ya no están clavadas en la plantilla: las dibuja el repetidor del
panel dentro de un envoltorio propio. Ese envoltorio hereda el reparto en fila
que antes tenía la caja, para que el aspecto no cambie.
--------------------------------------------------------------------------- */
.oyg-fp-databox .oyg-fp-databox-wrap{width:100%}
/* Punto 20 de la reunión del 28 de agosto, dicho en el minuto 47:53: "si al ponerla
a todo el ancho caben 6, lo dejo así; y si no, lo pongo para que sea 3 y 3".
Medido: con seis casillas en una fila cada una tendría 206 píxeles en una pantalla
de 1440, y el dato más largo (el RVOE con su fecha) necesita 274, así que se
partiría. Por eso la barra reparte sola: mientras quepan en una fila van en una,
y a partir de cinco casillas se ordenan en filas de tres.
El mínimo de 240 píxeles por casilla es lo que necesita el texto más largo sin
partirse; por debajo de eso, la casilla salta a la fila siguiente. */
.oyg-fp-databox .oyg-fp-databox-inner{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{flex:1 1 240px;min-width:0}
/* Con seis casillas, tres arriba y tres abajo. */
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(6)) > .oyg-fp-data{
flex:1 1 calc(33.333% - 1px)}
/* Con CINCO, dos y tres repartidas, para que no quede un hueco muerto al final:
las dos primeras a la mitad y las tres siguientes a un tercio. */
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(5)):not(:has(> .oyg-fp-data:nth-child(6))) > .oyg-fp-data:nth-child(-n+2){
flex:1 1 calc(50% - 1px)}
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(5)):not(:has(> .oyg-fp-data:nth-child(6))) > .oyg-fp-data:nth-child(n+3){
flex:1 1 calc(33.333% - 1px)}
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(5)):not(:has(> .oyg-fp-data:nth-child(6))) > .oyg-fp-data:nth-child(3){
border-top:1px solid var(--linea)}
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(5)):not(:has(> .oyg-fp-data:nth-child(6))) > .oyg-fp-data:nth-child(n+3){
border-top:1px solid var(--linea-gris)}
@media(max-width:768px){
.oyg-fp-databox .oyg-fp-databox-inner{flex-direction:column}
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{flex:1 1 auto}
}
/* Las líneas que separan una casilla de otra dentro de la barra. Las ponía Elementor
con un gris muy claro que apenas se distinguía; ahora usan el gris de cajas de
información, igual que el borde exterior, para que la franja se lea de un vistazo.
La primera casilla de cada fila no lleva línea a la izquierda: ya está la del borde. */
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{
border-left:1px solid var(--linea-gris)}
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data:first-child{border-left:0!important}
/* REGLA RETIRADA (2026-09-03): daba por hecho que con cinco casillas la segunda
fila empieza en la CUARTA, y con el reparto actual (dos arriba, tres abajo)
empieza en la TERCERA. Resultado: la cuarta se quedaba sin linea a la
izquierda y quedaba un hueco sin separar en medio de la fila de abajo.
Que casillas llevan linea lo decide ahora el bloque de mas abajo, uno solo,
que contempla los repartos de cuatro, cinco y seis. */
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(5)) > .oyg-fp-data:nth-child(n+3){
border-top:1px solid var(--linea)}
@media(max-width:768px){
/* Apiladas en móvil: la línea va arriba, no al lado. */
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{
border-left:0;border-top:1px solid var(--linea)}
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data:first-child{border-top:0}
}
/* ---------------------------------------------------------------------------
TESTIMONIO DE EGRESADO EN VÍDEO
Cuando el egresado tiene el formato "vídeo", en vez de la cita escrita aparece
un botón de reproducir que abre el vídeo. La foto sigue siendo el fondo de la
tarjeta, igual que en el testimonio de texto.
--------------------------------------------------------------------------- */
.oyg-egr-video{
display:inline-flex;align-items:center;gap:12px;
color:var(--oro);font-family:var(--font);font-weight:700;font-size:14px;
letter-spacing:.01em;text-decoration:none;margin-bottom:14px;
transition:color .18s var(--e-out), transform .18s var(--e-out)}
.oyg-egr-play{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:50%;flex:0 0 42px;
border:1.5px solid var(--oro);background:rgba(225,184,78,.12)}
.oyg-egr-play svg{width:18px;height:18px;margin-left:2px}
.oyg-egr-video:hover,.oyg-egr-video:focus-visible{color:#fff}
.oyg-egr-video:hover .oyg-egr-play{border-color:#fff;background:rgba(255,255,255,.16)}
/* La cita bajo el botón queda en segundo plano: acompaña, no compite. */
.oyg-egr-cita-corta{
margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* ---------------------------------------------------------------------------
CAJA DE OFERTAS EN LA BARRA DE DATOS (punto 30)
Una casilla especial que en vez de un dato suelto lleva varias líneas con icono,
como en la imagen de la reunión. La última línea es un enlace que baja al
formulario de la misma página.
--------------------------------------------------------------------------- */
.oyg-fp-databox .oyg-fp-oferta{display:flex;align-items:center}
.oyg-oferta-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;width:100%}
.oyg-oferta-lista li{
display:flex;align-items:center;gap:10px;
font-family:var(--font);font-size:14px;font-weight:600;line-height:1.25;
color:var(--bosque);letter-spacing:0}
/* El punto dorado hace de icono: se lee como lista de ventajas sin cargar la caja. */
.oyg-oferta-lista li::before{
content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;
background:var(--oro);display:inline-block}
.oyg-oferta-lista a{
color:var(--bosque);text-decoration:underline;text-underline-offset:3px;
transition:color .18s var(--e-out)}
.oyg-oferta-lista a:hover,.oyg-oferta-lista a:focus-visible{color:var(--oro-tinta)}
@media(max-width:768px){
.oyg-oferta-lista{gap:11px}
.oyg-oferta-lista li{font-size:14.5px}
}
/* ---------------------------------------------------------------------------
FLECHAS DE "¿QUÉ QUIERES CONOCER DEL INSTITUTO?"
Esas cuatro tarjetas parecen llevar a otra página porque su flecha apunta en
diagonal hacia arriba, que es el símbolo de "salgo de aquí". Pero no van a otra
página: bajan a una sección de la misma. La flecha pasa a apuntar hacia abajo,
que es lo que de verdad hace el enlace, y al pasar el ratón baja un poco en vez
de subir. Solo afecta a las tarjetas cuyo enlace empieza por almohadilla, así que
las que sí llevan a otra página conservan su diagonal.
--------------------------------------------------------------------------- */
.oyg-cat:has(a[href^="#"]) .oyg-cat-arrow svg,
.oyg-cat:has(> a[href^="#"]) .oyg-cat-arrow svg{transform:rotate(90deg)}
.oyg-cat:has(a[href^="#"]):hover .oyg-cat-arrow,
.oyg-cat:has(> a[href^="#"]):hover .oyg-cat-arrow{transform:translate(0,3px)}
/* ---------------------------------------------------------------------------
ALTURA DE LA CABECERA (punto 61 de la reunión del 28 de agosto)
Se fija a 90 píxeles en todas las páginas. Medía 103: 82 de contenido más el
relleno que le pone Elementor arriba y abajo. Se fija la caja entera y se anula
ese relleno, para que el número sea exacto y no dependa de lo que haya dentro.
--------------------------------------------------------------------------- */
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-element{
height:90px;min-height:90px;max-height:90px;
padding-top:0;padding-bottom:0;overflow:visible}
/* Lo de dentro se centra en esos 90px y no los empuja. */
.elementor-location-header > .e-con > .e-con-inner{
height:90px;padding-top:0;padding-bottom:0;display:flex;align-items:center}
.oyg-nav-inner{height:90px;padding-top:0;padding-bottom:0}
@media(max-width:768px){
/* En móvil la cabecera puede ser algo más baja: hay menos que colocar. */
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-element{height:72px;min-height:72px;max-height:72px}
.elementor-location-header > .e-con > .e-con-inner{height:72px}
.oyg-nav-inner{height:72px}
}
/* El botón de comprar va junto al de solicitar información, con aire por encima
para que no se peguen. Solo existe si el programa tiene enlace de pago. */
.oyg-compra-wrap{margin-top:14px}
.oyg-btn-compra{display:inline-flex;align-items:center}
/* ---------------------------------------------------------------------------
AIRE EN CURSOS CERTIFICADOS
Sus secciones tenían 80 píxeles arriba y abajo, contra los 120 del resto de
páginas madre, así que todo se veía apretado. Se iguala.
--------------------------------------------------------------------------- */
/* OJO: la cabecera de la web tambien es un ".e-con.e-parent", asi que esta regla la
estiraba a 203px en esta pagina. Se acota al contenido de la pagina, dejando fuera
la cabecera y el pie. */
.page-id-511 .elementor-location-single .e-con.e-parent,
.page-id-511 main .e-con.e-parent{padding-top:clamp(72px,7vw,120px);padding-bottom:clamp(72px,7vw,120px)}
.page-id-511 .oyg-hero{padding-top:0;padding-bottom:0}
.page-id-511 .elementor-location-header > .e-con{padding-top:0;padding-bottom:0}
/* Las tarjetas del catálogo respiran entre sí. */
.page-id-511 .oyg-cats-grid{gap:clamp(18px,2vw,26px)}
/* Objetivos con el componente de pasos numerados: cuatro en fila en ordenador, y
apilados en móvil. Reutiliza el aspecto de "Cuatro pasos hasta tu título". */
.oyg-obj-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,2.4vw,34px);margin-top:26px}
.oyg-obj-steps .oyg-step p{font-size:15px;line-height:1.5;color:var(--texto-2);margin:0}
.oyg-obj-steps .oyg-snum{font-family:var(--font-display);font-size:42px;font-weight:400;color:var(--oro-tinta);line-height:1;display:block;margin-bottom:12px}
/* "Sobre el curso": un párrafo de 1.400 caracteres a todo el ancho no se lee. Se
acota al ancho de lectura cómodo, como el resto de textos largos de la web. */
.oyg-fp-block .oyg-fp-desc,.oyg-fp-descripcion p{max-width:74ch}
/* La foto de la sección de metodología en fichas de diplomado y microcredencial. */
.oyg-trust-photo{min-height:420px;border-radius:18px;background-size:cover;background-position:center}
@media(max-width:900px){.oyg-trust-photo{min-height:280px}}
/* Los objetivos en pasos numerados quedaban encajonados en una columna de 366px,
porque su contenedor hereda el ancho del bloque de texto. Se sacan a todo el ancho
de la sección, que es donde los cuatro pasos respiran. */
.oyg-fp-block .oyg-obj-steps{width:100%;max-width:none}
.oyg-fp-block:has(.oyg-obj-steps) .elementor-widget-text-editor:has(.oyg-obj-steps){width:100%;max-width:none}
.oyg-obj-steps .oyg-step{padding-right:clamp(12px,1.6vw,26px)}
/* Los dos botones de la ficha van en fila, con el precio al lado. El de descargar
es el principal; el de solicitar información acompaña, en versión más discreta. */
/* El segundo botón salía gris azulado, que no es color de la marca: hereda el de
Elementor. Se le fuerza el aspecto de botón secundario del sistema: fondo
transparente, borde y letra en verde bosque. */
.oyg-btn-solicita,.oyg-btn-solicita .elementor-button,
.oyg-btn-solicita a,.oyg-btn-solicita .elementor-button-link{
background:transparent !important;background-color:transparent !important;
border:1.5px solid var(--linea-fuerte) !important;color:var(--bosque) !important;
box-shadow:none !important}
.oyg-btn-solicita:hover,.oyg-btn-solicita:hover .elementor-button,
.oyg-btn-solicita:focus-within,.oyg-btn-solicita:focus-within .elementor-button{
background:var(--bosque) !important;background-color:var(--bosque) !important;
border-color:var(--bosque) !important;color:#fff !important}
.oyg-precio-abajo p{
margin:0;font-family:var(--font);font-size:15px;font-weight:700;color:var(--bosque);
display:flex;align-items:center;min-height:44px}
/* OJO: la clase del botón la lleva su ENVOLTORIO, que ocupa todo el ancho de la
sección. Por eso el borde del botón secundario se estiraba de lado a lado. El
envoltorio se ajusta a su contenido y los tres elementos comparten fila. */
.oyg-btn-solicita,.oyg-btn-descarga{width:auto;display:inline-flex}
.oyg-btn-solicita > a,.oyg-btn-descarga > a{width:auto}
@media(min-width:769px){
.oyg-fp-block .oyg-btn-descarga,
.oyg-fp-block .oyg-btn-solicita,
.oyg-fp-block .oyg-precio-abajo{
display:inline-flex;width:auto;vertical-align:middle;margin-right:16px}
.oyg-precio-abajo p{min-height:0}
}
/* El contenedor de la sección coloca sus hijos en columna y los estira a todo el
ancho: por eso el botón secundario se veía como una barra de lado a lado. Con
`align-self:flex-start` cada botón se ajusta a su texto. Y el bloque que los
contiene pasa a fila, para que los dos botones y el precio vayan juntos. */
.oyg-btn-descarga,.oyg-btn-solicita,.oyg-precio-abajo{align-self:flex-start}
@media(min-width:769px){
/* Los tres, en la misma línea. Se envuelven en móvil. */
.oyg-fp-block:has(> .oyg-btn-solicita){flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
.oyg-fp-block:has(.oyg-btn-solicita) > .oyg-btn-descarga,
.oyg-fp-block:has(.oyg-btn-solicita) > .oyg-btn-solicita,
.oyg-fp-block:has(.oyg-btn-solicita) > .oyg-precio-abajo{margin-right:0}
}
/* ===== Tabla comparativa: las celdas con fondo, redondeadas (2026-09-03) =====
Las celdas eran rectangulos de esquina viva. Al llevar fondo de color (la
columna verde de Ortega, las grises y las beige de la izquierda), esas
esquinas se veian como picos dentro de una caja que si es redondeada.
Se redondea cada celda con fondo y se le da aire, para que la columna
destacada se lea como una pastilla y no como un bloque cortado. */
.oyg-cmp-row{border-bottom:0;align-items:stretch;gap:8px;padding:4px 8px}
.oyg-cmp-row > *{border-radius:12px}
/* La columna de Ortega, la destacada, en una sola pieza vertical. */
.oyg-cmp-headrow > .oyg-cmp-us{border-radius:12px 12px 4px 4px}
.oyg-cmp-row:last-child > .oyg-cmp-us{border-radius:4px 4px 12px 12px}
.oyg-cmp-row:not(:first-child):not(:last-child) > .oyg-cmp-us{border-radius:4px}
/* Las lineas de separacion pasan a ser el hueco entre pastillas, no un borde. */
.oyg-cmp{padding:8px;background:var(--papel)}
.oyg-cmp-row:not(.oyg-cmp-headrow) > *:not(.oyg-cmp-attr):not(.oyg-cmp-us){background:var(--blanco)}
/* La celda de arriba a la izquierda es un hueco (solo lleva un "·" de relleno).
Sin fondo ni punto visible, para que no parezca una pastilla vacia. */
.oyg-cmp-headrow > *:first-child{background:transparent;font-size:0}
/* ===== Acordeon "abierto en ordenador" (#58, reunion del 28 de agosto) =====
La norma acordada: en ordenador los apartados se ven TODOS abiertos, y en
movil solo el primero. Se aplica a los acordeones marcados .oyg-acc-abierto,
hoy la seccion de mitos del Acuerdo 286.
Las preguntas frecuentes NO llevan esta marca: el cliente las quiere cerradas.
Se hace con estilos y no pulsando los titulos porque el acordeon de Elementor
admite un solo apartado abierto y vuelve a cerrar lo que se abra desde fuera.
De 769px hacia arriba se muestra el contenido de todos y se oculta el icono
de mas/menos, que ya no significa nada si no hay nada que desplegar. */
@media(min-width:769px){
.oyg-acc-abierto .elementor-tab-content{display:block!important;height:auto!important}
.oyg-acc-abierto .elementor-tab-title{cursor:default}
/* El icono de mas/menos se oculta con !important porque la hoja de Elementor
se carga despues de esta y gana por orden. Sin nada que desplegar, el icono
solo confunde. */
.oyg-acc-abierto .elementor-accordion-icon,
.oyg-acc-abierto .elementor-tab-title .elementor-accordion-icon{display:none!important}
}
/* ===== "Qué vas a lograr": sin hueco de imagen vacío (2026-09-03) =====
La seccion se copio de la ficha de maestria a las de microcredencial,
diplomado y Espana. En maestria la mitad izquierda es una foto; en las otras
fichas ese hueco queda vacio y se ve un rectangulo de color sin nada.
Si el hueco no tiene imagen de fondo, se oculta y el texto usa todo el ancho. */
/* Cada ficha pone su propia foto de portada en este hueco, leyendo su campo.
NO se puede ocultar mirando el atributo style del elemento: Elementor escribe
la imagen en su propia hoja de estilos, no en el atributo, asi que la regla
ocultaba huecos que SI tenian foto (fallo del 2026-09-03).
Si algun programa se queda sin imagen, el hueco se ve como una banda de color
suave, que es preferible a una columna vacia. */
.oyg-fp-logros .oyg-trust-photo{background-color:var(--papel);min-height:320px}
/* ===== Profesorado con la rejilla de Elementor (#2026-09-03) =====
La seccion paso del atajo del tema al componente de rejilla, para que el
instituto pueda configurarla sin tocar codigo. Estos ajustes le devuelven la
piel de la maqueta.
1) Quien no tiene foto rompia la fila: su tarjeta quedaba a media altura y la
rejilla se veia escalonada. Ahora todas miden lo mismo y el hueco de la
foto se rellena con las iniciales sobre el verde de la casa, como hacia el
montaje anterior. */
.oyg-claustro-loop .e-loop-item{display:flex}
.oyg-claustro-loop .oyg-fp-teacher{display:flex;flex-direction:column;width:100%}
.oyg-claustro-loop .oyg-fp-portrait{aspect-ratio:1/1;flex:0 0 auto}
.oyg-claustro-loop .oyg-fp-teacher-body{flex:1 1 auto}
/* Sin retrato: fondo verde con las iniciales, mismo tamano que una foto. */
.oyg-claustro-loop .oyg-fp-portrait:not(:has(img)){
background:linear-gradient(160deg,var(--bosque),var(--pino) 70%,var(--sage));
display:flex;align-items:center;justify-content:center}
/* 2) El boton "Ver mas profesores" con la piel de la casa, no el gris de serie. */
.oyg-claustro-loop .elementor-button{
display:inline-flex;align-items:center;gap:10px;
background:transparent;color:var(--bosque);
border:1px solid var(--linea);border-radius:999px;
padding:14px 28px;font-family:var(--font);font-weight:600;font-size:14.5px;
letter-spacing:.01em;transition:background .2s var(--e-out),border-color .2s var(--e-out)}
.oyg-claustro-loop .elementor-button:hover{background:var(--papel);border-color:var(--sage)}
.oyg-claustro-loop .elementor-button-content-wrapper{gap:0}
/* La foto llena la tarjeta de borde a borde, SIN marco.
El marco lo pone el contenedor RAIZ de la tarjeta de profesor, que hereda
10px de relleno y 1px de borde de los estilos por defecto de Elementor. Esa
banda de fondo alrededor del retrato se lee como un marco de cuadro.
La tarjeta conserva su fondo, su borde exterior y sus esquinas; lo que cambia
es que la foto llega al filo, como en las tarjetas de programa de la web. */
.oyg-claustro-loop .e-loop-item > .elementor > .e-con,
.oyg-claustro-loop .e-loop-item > .elementor > .e-con-full,
.oyg-claustro-loop .oyg-fp-teacher{padding:0!important;overflow:hidden}
.oyg-claustro-loop .oyg-fp-portrait{padding:0;overflow:hidden}
.oyg-claustro-loop .oyg-fp-portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* El texto recupera su aire con su propio margen, ya que la tarjeta no lo pone. */
.oyg-claustro-loop .oyg-fp-teacher-body{padding:18px 20px 22px}
/* Todas las tarjetas de la fila igualan altura, tambien las que se cargan al
pulsar "ver mas": sin esto la rejilla queda escalonada segun lo largo que sea
cada semblanza. */
.oyg-claustro-loop .elementor-loop-container{align-items:stretch}
.oyg-claustro-loop .e-loop-item{display:flex;height:100%}
.oyg-claustro-loop .e-loop-item > .elementor{display:flex;width:100%}
/* Todas las tarjetas de profesor con la misma altura: la foto siempre cuadrada y
el cuerpo de texto ocupando el resto. Sin esto la fila queda escalonada segun
lo larga que sea cada semblanza. */
.oyg-claustro-loop .oyg-fp-portrait{aspect-ratio:1/1;height:auto;flex:0 0 auto}
.oyg-claustro-loop .oyg-fp-teacher{height:100%}
.oyg-claustro-loop .oyg-fp-teacher-body{flex:1 1 auto}
/* ===== Las lineas que separan las casillas de la barra (2026-09-03) =====
COLOR: el mismo que el borde de los campos del formulario (var(--linea)),
para que toda la ficha use un unico gris de separacion.
Faltaban algunas: en la barra de cinco casillas (dos arriba, tres abajo) la
cuarta no llevaba linea a la izquierda, asi que la fila de abajo se veia con
un hueco sin separar.
La regla anterior era "linea a todas menos a la ultima", que funciona en UNA
fila pero no en dos: la ultima de la fila de arriba tambien necesita quedarse
sin linea a la derecha, y la primera de la fila de abajo tampoco debe llevarla
a la izquierda.
Se resuelve al reves: TODAS llevan linea a la izquierda, y se le quita a la
primera de cada fila. Asi da igual cuantas casillas haya. */
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{
border-left:1px solid var(--linea)!important}
/* La primera de la barra nunca lleva linea. */
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data:first-child{border-left:0}
/* Con CINCO casillas la fila de abajo empieza en la tercera: esa tampoco. */
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(5)):not(:has(> .oyg-fp-data:nth-child(6))) > .oyg-fp-data:nth-child(3){
border-left:0!important}
/* Con SEIS, la fila de abajo empieza en la cuarta. */
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(6)) > .oyg-fp-data:nth-child(4){
border-left:0!important}
/* Con CUATRO, dos y dos: la tercera abre fila. */
.oyg-fp-databox .oyg-fp-databox-inner:has(> .oyg-fp-data:nth-child(4)):not(:has(> .oyg-fp-data:nth-child(5))) > .oyg-fp-data:nth-child(3){
border-left:0}
/* En movil la barra es una columna: las lineas van arriba, no a los lados. */
@media(max-width:768px){
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{
border-left:0;border-top:1px solid var(--linea-gris)}
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data:first-child{border-top:0}
}
/* Y el borde exterior de la barra, del mismo gris que los campos del formulario. */
.oyg-fp-databox.oyg-fp-databox,
.e-con.oyg-fp-databox{border-color:var(--linea)}
/* La linea horizontal entre las dos filas, tambien. */
.oyg-fp-databox .oyg-fp-databox-inner > .oyg-fp-data{border-top-color:var(--linea)}
/* ===== Caja verde: la piel de la caja del formulario, reutilizable (2026-09-03)
El CEO pidio que la seccion de costos del Acuerdo 286 se viera como la caja
del formulario: fondo verde, esquinas redondeadas y aire alrededor. Se saca a
una clase para poder usarla en cualquier seccion que lo necesite, en vez de
maquetarla otra vez. */
.oyg-caja-verde{
background:var(--bosque);border-radius:22px;
padding:clamp(34px,4vw,56px) clamp(26px,4vw,60px);
margin-inline:clamp(16px,4vw,60px)}
.oyg-caja-verde h2,.oyg-caja-verde h3,.oyg-caja-verde .elementor-heading-title{color:#fff}
.oyg-caja-verde p,.oyg-caja-verde .elementor-widget-text-editor{color:rgba(255,255,255,.82)}
.oyg-caja-verde a:not(.elementor-button){color:var(--oro)}
/* El boton dorado, como el "Quiero informacion" de la caja del formulario. */
.oyg-caja-verde .elementor-button,.oyg-caja-verde .oyg-btn{
background:var(--oro);color:var(--bosque);border-color:transparent}
.oyg-caja-verde .elementor-button:hover,.oyg-caja-verde .oyg-btn:hover{background:#efc85f}
/* ===== El renglon destacado del calendario, redondeado (2026-09-03) =====
El renglon marcado como hito llevaba un fondo de esquina viva que llegaba al
filo de la caja y la cortaba. Ahora es una pastilla redondeada con aire a los
lados, como el resto de piezas de la web. */
.oyg-fp-calendario .oyg-cal-fila-hito{
border-radius:12px;
margin-inline:6px;
border-bottom-color:transparent}
/* ===== La barra de datos, sin doble linea en los filos (2026-09-03) =====
La caja ocupa TODO el ancho de la pantalla y ademas lleva 100px de relleno a
los lados, asi que su borde izquierdo y derecho quedaba pegado al filo, a
100px del contenido. Al lado se veia la linea de la primera casilla: dos
lineas verticales juntas, que era lo que se notaba.
Se quitan los bordes laterales de la caja y se dejan solo el de arriba y el de
abajo, que son los que enmarcan la franja. Las lineas verticales que separan
las casillas se quedan como estan. */
.oyg-fp-databox.oyg-fp-databox,
.e-con.oyg-fp-databox{border-left:0;border-right:0}
/* ===== La casilla de aceptar el tratamiento de datos (2026-09-03) =====
El texto estaba en la pagina pero salia partido letra a letra, en vertical,
porque la caja del formulario reparte sus campos en columnas y la casilla
caia en una estrecha. Sin el texto legible, la casilla es una autorizacion en
blanco, que legalmente no vale.
Se resuelve sacandola del reparto en columnas y dejando la casilla y su texto
en una sola linea horizontal. */
.elementor-field-type-acceptance{
grid-column:1 / -1!important;
width:100%!important;
flex:0 0 100%!important;
max-width:100%!important;
display:block!important}
.elementor-field-type-acceptance .elementor-field-subgroup,
.elementor-field-type-acceptance .elementor-field-option{
display:block!important;width:100%!important;max-width:100%!important;flex:none!important}
/* La casilla se coloca a la IZQUIERDA del texto, no encima. El texto la rodea. */
.elementor-field-type-acceptance .elementor-field-option{
display:flex!important;align-items:flex-start;gap:10px}
.elementor-field-type-acceptance input[type="checkbox"]{
flex:0 0 16px;margin:2px 0 0 0;width:16px;height:16px;accent-color:var(--oro)}
.elementor-field-type-acceptance label{
display:block!important;width:auto!important;overflow:visible;
font-size:12.5px;line-height:1.5;font-weight:400;
color:rgba(255,255,255,.72);margin:0;letter-spacing:0;text-align:left}
/* Sobre la tarjeta blanca del formulario, la letra va oscura. */
.oyg-fp-form-card .elementor-field-type-acceptance label{color:var(--texto-2)}
/* ===== La caja de cifras del instituto, a todo el ancho (2026-09-04) =====
Eran seis datos y cada uno ocupaba lo que le pedia su texto, asi que cabian
cinco en la primera fila y el sexto se quedaba solo abajo, descolgado y con
media caja vacia a su derecha.
Ahora van TRES por fila, en dos filas iguales, y la caja usa el ancho de la
pagina en vez de quedarse en 1200 pixeles con aire muerto a los lados. */
@media(min-width:769px){
/* La caja a todo el ancho. El tope de 1280px que la encajonaba esta TRES
niveles por encima, en el contenedor de la seccion: hay que levantarlo ahi,
no en la caja, o no sirve de nada. */
.e-con:has(.oyg-kpis-grid){
max-width:100%!important;width:100%}
.e-con:has(> .oyg-kpis-grid){
width:100%;max-width:100%;
padding-inline:clamp(20px,4vw,60px)}
/* tres por fila, todos del mismo ancho */
.e-con.oyg-kpis-grid,
.oyg-kpis-grid{
flex-direction:row!important;flex-wrap:wrap!important;
width:100%;gap:0}
.e-con.oyg-kpi,
.oyg-kpis-grid > .oyg-kpi{
flex:1 1 33.333%!important;width:33.333%!important;max-width:33.333%;
/* el reparto real lo decide el numero de cifras, mas abajo */
padding:30px 34px;
box-sizing:border-box;
/* La cifra y su etiqueta, alineadas a la izquierda. Antes la cifra salia
pegada a la derecha de su casilla y la etiqueta a la izquierda, asi que
cada pareja se leia partida. */
display:flex!important;flex-direction:column!important;
align-items:flex-start!important;justify-content:center;
text-align:left;gap:6px}
/* CUANTAS CABEN POR FILA: lo decide el numero de cifras, no un tres fijo.
Con tres columnas fijas, una banda de CUATRO deja la ultima sola abajo con
un hueco enorme al lado (medido en la portada el 2026-09-06: cuatro cifras,
dos filas, una sola en la segunda). Es el mismo patron que ya usa la caja de
datos de las fichas unas mil lineas mas arriba.
El selector cuenta los hermanos: :nth-last-child(N):first-child solo
encuentra al primero cuando hay exactamente N. */
.oyg-kpis-grid:has(> .oyg-kpi:nth-last-child(4):first-child) > .oyg-kpi,
.oyg-kpi-box:has(> .oyg-kpi:nth-last-child(4):first-child) > .oyg-kpi{
flex:1 1 25%!important;width:25%!important;max-width:25%}
.oyg-kpis-grid:has(> .oyg-kpi:nth-last-child(2):first-child) > .oyg-kpi,
.oyg-kpi-box:has(> .oyg-kpi:nth-last-child(2):first-child) > .oyg-kpi{
flex:1 1 50%!important;width:50%!important;max-width:50%}
/* las lineas que separan: a la izquierda de cada uno, menos los que abren fila */
.oyg-kpis-grid > .oyg-kpi{border-left:1px solid var(--linea)}
.oyg-kpis-grid > .oyg-kpi:nth-child(3n+1){border-left:0}
/* y una linea horizontal entre las dos filas */
.oyg-kpis-grid > .oyg-kpi:nth-child(n+4){border-top:1px solid var(--linea)}
/* CUANDO SON CUATRO EN UNA SOLA FILA hay que rehacer las lineas: las de arriba
estan escritas contando de tres en tres, asi que al cuarto le ponian una
linea horizontal encima (se veia flotando sobre la caja, sin nada debajo) y
al que abre la fila no le quitaban la vertical. */
.oyg-kpis-grid:has(> .oyg-kpi:nth-last-child(4):first-child) > .oyg-kpi{
border-top:0;border-left:1px solid var(--linea)}
.oyg-kpis-grid:has(> .oyg-kpi:nth-last-child(4):first-child) > .oyg-kpi:first-child{
border-left:0}
/* Y con dos, la misma correccion. */
.oyg-kpis-grid:has(> .oyg-kpi:nth-last-child(2):first-child) > .oyg-kpi{
border-top:0;border-left:1px solid var(--linea)}
.oyg-kpis-grid:has(> .oyg-kpi:nth-last-child(2):first-child) > .oyg-kpi:first-child{
border-left:0}
}
/* En cuatro columnas si la pantalla es muy ancha: dos filas de tres se leen
mejor que una de seis apretadas, asi que se mantienen las tres. */
/* ===== Correcciones del blog y el podcast (2026-09-04) =====
1) TARJETAS DE COLOR: LETRA BLANCA, SIN TRANSPARENCIAS.
El titular se veia apagado porque iba al 78 % de opacidad, y la etiqueta de
arriba salia casi negra sobre el naranja. Ahora todo el texto de una tarjeta
de color es blanco puro, y la etiqueta baja solo un poco para que se
distinga del titular sin dejar de leerse. */
.oyg-pc-card,.oyg-bl-card,
.oyg-pc-card h2,.oyg-pc-card h3,.oyg-pc-card h4,.oyg-pc-card p,
.oyg-pc-card .elementor-heading-title,
.oyg-pc-card .oyg-cat-title-b .elementor-heading-title{color:var(--crema)!important}
.oyg-pc-card .oyg-cat-tag,.oyg-pc-card .oyg-cat-tag p,
.oyg-pc-card .oyg-cat-tag .elementor-heading-title,
.oyg-pc-card .oyg-cat-price,.oyg-pc-card .oyg-cat-price p{
color:rgba(250,247,241,.92)!important}
/* 2) LA FLECHA SE VE SIEMPRE, encima y sin encima.
El circulo tenia el trazo casi negro heredado del texto, asi que sobre el
naranja desaparecia; y al pasar el raton el circulo se ponia amarillo con la
flecha negra dentro. Ahora el trazo es blanco en reposo y verde oscuro sobre
el amarillo, que es donde contrasta. */
.oyg-pc-card .oyg-cat-arrow{
color:var(--crema)!important;
border-color:rgba(250,247,241,.55)!important;
transition:background .2s var(--e-out),border-color .2s var(--e-out),
color .2s var(--e-out),transform .2s var(--e-out)}
.oyg-pc-card .oyg-cat-arrow svg,
.oyg-pc-card .oyg-cat-arrow i,
.oyg-pc-card .oyg-cat-arrow i::before{
color:var(--crema)!important;fill:currentColor!important;stroke:currentColor}
.oyg-pc-card:hover .oyg-cat-arrow{
background:var(--oro)!important;border-color:var(--oro)!important;
color:var(--bosque)!important}
.oyg-pc-card:hover .oyg-cat-arrow svg,
.oyg-pc-card:hover .oyg-cat-arrow i,
.oyg-pc-card:hover .oyg-cat-arrow i::before{
color:var(--bosque)!important;fill:currentColor!important;stroke:currentColor}
/* 3) EL EFECTO AL PASAR EL RATON: solo la flecha.
Antes la tarjeta entera saltaba cuatro pixeles con sombra, y en una rejilla
de dieciocho eso es un temblor. Aclararla tampoco valia: sobre el naranja el
aclarado se lee como si la tarjeta se apagara. Ahora la tarjeta no se mueve
NI cambia de color; lo unico que responde es el circulo de la flecha, que se
llena de amarillo. Se nota que es pulsable y nada se descoloca. */
.oyg-pc-card{transition:none}
.oyg-pc-card:hover,.oyg-pc-card:focus-within{
transform:none!important;filter:none!important;box-shadow:none!important}
/* Y EL FONDO SE QUEDA.
Causa del fallo: todas estas tarjetas llevan tambien la clase generica de
tarjeta de categoria, que al pasar el raton se pinta con un color de acento
guardado en una variable (--cc). Esa variable solo esta definida en las
tarjetas de categoria de verdad. En las del podcast y en las del blog no
existe, asi que el fondo se quedaba VACIO: letra blanca sobre el crema de la
pagina, ilegible.
Se afirma el color propio de cada familia tambien al pasar el raton. */
.oyg-pc-card:hover,.oyg-pc-card:focus-within,
.oyg-bl-card:hover,.oyg-bl-card:focus-within{background:var(--c-286)}
.oyg-pc-card.c-mae:hover,.oyg-pc-card.c-mae:focus-within,
.oyg-bl-card.c-mae:hover,.oyg-bl-card.c-mae:focus-within{background:var(--c-mae)}
.oyg-pc-card.c-esp:hover,.oyg-pc-card.c-esp:focus-within,
.oyg-bl-card.c-esp:hover,.oyg-bl-card.c-esp:focus-within,
.oyg-bl-card.cat-foros-y-debates:hover,
.oyg-bl-card.cat-foros-y-debates:focus-within{background:var(--c-esp)}
.oyg-pc-card.c-ciruela:hover,.oyg-pc-card.c-ciruela:focus-within,
.oyg-bl-card.c-ciruela:hover,.oyg-bl-card.c-ciruela:focus-within{background:var(--c-ciruela)}
.oyg-pc-card.c-con:hover,.oyg-pc-card.c-con:focus-within,
.oyg-bl-card.c-con:hover,.oyg-bl-card.c-con:focus-within{background:var(--bosque)}
/* Y las del blog tampoco se mueven ni pierden la letra clara. */
.oyg-bl-card:hover,.oyg-bl-card:focus-within{
transform:none!important;filter:none!important;box-shadow:none!important}
.oyg-bl-card:hover .oyg-cat-title-b .elementor-heading-title,
.oyg-bl-card:hover h3,.oyg-bl-card:hover p{color:var(--crema)!important}
/* 4) LAS FLECHAS DEL FILTRO DE TEMA, HACIA ABAJO. Esas tarjetas no llevan a otra
pagina: filtran las piezas que hay MAS ABAJO en la misma pagina. Una flecha
en diagonal promete salir de aqui, y no es lo que hace. */
.oyg-bl-tema .oyg-cat-arrow svg{transform:rotate(90deg)}
.oyg-bl-tema:hover{transform:none!important;box-shadow:none!important}
/* El boton de quitar el filtro del blog. Aparece solo cuando hay un tema
seleccionado, porque antes no hace falta. */
.oyg-bl-volver{
display:none;align-items:center;gap:8px;
margin:22px auto 0;
padding:13px 26px;
background:transparent;color:var(--bosque);
border:1px solid var(--linea);border-radius:999px;
font-family:var(--font);font-weight:600;font-size:14.5px;
cursor:pointer;
transition:background .2s var(--e-out),border-color .2s var(--e-out)}
.oyg-bl-volver::before{content:"←";font-size:15px;line-height:1}
/* Al pasar el raton se llena de verde con la letra clara. Antes heredaba una
regla general de la web que pinta de blanco la letra de CUALQUIER boton, y
sobre el fondo claro que tenia el boton se volvia invisible. Se anula aqui y
se le da un fondo oscuro, que es donde el blanco si contrasta. */
.oyg-bl-volver:hover,.oyg-bl-volver:focus-visible{
background:var(--bosque)!important;border-color:var(--bosque)!important;
color:var(--crema)!important}
.oyg-bl-volver:focus{color:var(--crema)}
/* ==========================================================================
FILTRO POR TIPO DE SESIÓN (podcast)
Las tarjetas del filtro heredaban el tamaño de las tarjetas de categoría,
pensadas para ocupar media pantalla. Un filtro tiene que caber de un vistazo
por encima de lo que filtra, así que aquí se compactan.
========================================================================== */
.oyg-cats-grid .oyg-bl-tema{
min-height:0!important;
padding:16px 20px!important;
gap:10px!important;
cursor:pointer;
border:1px solid var(--linea);
border-radius:14px;
transition:background .18s var(--e-out),border-color .18s var(--e-out)}
.oyg-cats-grid .oyg-bl-tema .oyg-cat-body{gap:0!important;padding:0!important}
.oyg-cats-grid .oyg-bl-tema h3,
.oyg-cats-grid .oyg-bl-tema .elementor-heading-title{
font-family:var(--font);font-size:16px;font-weight:600;line-height:1.25;
letter-spacing:0;text-transform:none;color:var(--bosque);margin:0}
/* el contador, legible sobre el crema */
.oyg-cats-grid .oyg-bl-tema .oyg-cat-tag,
.oyg-cats-grid .oyg-bl-tema .oyg-cat-tag p{
font-size:11.5px;letter-spacing:.09em;color:var(--sage);opacity:1;margin:0}
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow{
width:26px;height:26px;border-color:var(--linea);color:var(--sage)}
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow svg{width:11px;height:11px}
.oyg-cats-grid .oyg-bl-tema:hover{background:var(--papel);border-color:var(--sage)}
/* el tipo elegido se marca en verde, para saber qué se está viendo */
.oyg-cats-grid .oyg-bl-tema.oyg-bl-tema-activo{
background:var(--bosque);border-color:var(--bosque)}
.oyg-cats-grid .oyg-bl-tema-activo h3,
.oyg-cats-grid .oyg-bl-tema-activo .elementor-heading-title,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-tag,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-tag p{color:var(--crema)}
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow{
border-color:rgba(250,247,241,.5);color:var(--crema)}
/* seis tarjetas caben en tres filas de dos en móvil y una sola fila ancha arriba */
@media(min-width:900px){
.oyg-cats:has(.oyg-bl-tema) .oyg-cats-grid{
grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
}
/* La flecha de las tarjetas del FILTRO se veia en reposo y desaparecia al pasar
el raton: una regla general la ponia blanca, que funciona sobre una tarjeta de
color pero no sobre el fondo crema de estas. Aqui el circulo se llena de verde
y la flecha se pone clara dentro, que es donde si contrasta. */
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow{
background:transparent;border-color:var(--linea);color:var(--sage)}
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow svg,
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow i,
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow i::before{
color:var(--sage)!important;fill:currentColor!important;stroke:currentColor!important}
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow,
.oyg-cats-grid .oyg-bl-tema:focus-within .oyg-cat-arrow{
background:var(--bosque)!important;border-color:var(--bosque)!important}
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow svg,
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow i,
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow i::before,
.oyg-cats-grid .oyg-bl-tema:focus-within .oyg-cat-arrow svg{
color:var(--crema)!important;fill:currentColor!important;stroke:currentColor!important}
/* y en la tarjeta ya elegida, sobre el verde, la flecha va clara con borde claro */
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow{
background:transparent!important;border-color:rgba(250,247,241,.5)!important}
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow svg,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow i,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow i::before{
color:var(--crema)!important;fill:currentColor!important;stroke:currentColor!important}
/* El dibujo de la flecha lleva el relleno NEGRO fijo en su trazado interior, no
en el contenedor: por eso las reglas anteriores no lo cambiaban. Aqui se pinta
el trazado directamente, que es lo unico que el navegador respeta. */
.oyg-cat-arrow svg,.oyg-cat-arrow svg path,
.oyg-cat-arrow .elementor-icon,.oyg-cat-arrow .elementor-icon svg,
.oyg-cat-arrow .elementor-icon svg path{fill:currentColor!important;color:inherit}
/* filtro en reposo: circulo claro, flecha verde grisacea */
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow,
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow .elementor-icon,
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow svg path{color:var(--sage)!important}
/* con el raton encima: circulo verde, flecha clara dentro */
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow,
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow .elementor-icon,
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow svg,
.oyg-cats-grid .oyg-bl-tema:hover .oyg-cat-arrow svg path,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow .elementor-icon,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow svg,
.oyg-cats-grid .oyg-bl-tema-activo .oyg-cat-arrow svg path{color:var(--crema)!important}
/* tarjetas de color: flecha clara siempre, y verde oscura sobre el circulo amarillo */
.oyg-pc-card .oyg-cat-arrow,.oyg-pc-card .oyg-cat-arrow .elementor-icon,
.oyg-pc-card .oyg-cat-arrow svg,.oyg-pc-card .oyg-cat-arrow svg path{color:var(--crema)!important}
.oyg-pc-card:hover .oyg-cat-arrow,.oyg-pc-card:hover .oyg-cat-arrow .elementor-icon,
.oyg-pc-card:hover .oyg-cat-arrow svg,.oyg-pc-card:hover .oyg-cat-arrow svg path{color:var(--bosque)!important}
/* El circulo del filtro mide 26 px pero Elementor mete dentro su propio
envoltorio de icono a 38 px, que se sale por los cuatro lados. En reposo no se
nota porque es transparente; al pasar el raton, el fondo verde se pintaba en
ese envoltorio desbordado y tapaba media flecha.
Se ajusta el envoltorio al circulo y se centra el dibujo dentro. */
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow{overflow:hidden;padding:0}
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow .elementor-icon-wrapper,
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow .elementor-icon{
width:100%!important;height:100%!important;
display:grid!important;place-items:center!important;
padding:0!important;margin:0!important;background:transparent!important;
transform:none!important}
.oyg-cats-grid .oyg-bl-tema .oyg-cat-arrow svg{
width:11px!important;height:11px!important;display:block}
/* ==========================================================================
LOS ELEMENTOS DEL MENU DESPLEGABLE SE PULSAN ENTEROS
Cada opcion es una tarjeta con titulo y descripcion, pero solo el titulo era
pulsable: entre el 12 % y el 27 % de la tarjeta segun la opcion. Quien
pinchaba en la descripcion o en el hueco de alrededor no iba a ninguna parte.
Se estira el enlace del titulo sobre TODA la tarjeta con una capa invisible,
sin tocar como esta montado el menu en el editor.
========================================================================== */
.e-n-menu-content .oyg-mm-entry{position:relative}
/* La capa invisible del enlace cubre la tarjeta entera y va POR ENCIMA de todo
lo demas. Es lo que recoge la pulsacion en cualquier punto: en el titulo, en
la descripcion o en el hueco de alrededor.
Ojo: el texto sigue viendose porque la capa es transparente. Lo que NO puede
hacerse es poner el texto por encima de ella, porque entonces vuelve a tapar
la zona pulsable, que es justo el fallo que se esta corrigiendo. */
.e-n-menu-content .oyg-mm-entry .oyg-mm-t a::after{
content:"";position:absolute;inset:0;z-index:5}
/* La capa se estira sobre el ancestro posicionado mas cercano. Sin esto, el
titulo y su bloque hacian de referencia y la capa se quedaba del tamano del
titulo. Se anula su posicionado para que la referencia sea la tarjeta. */
.e-n-menu-content .oyg-mm-entry .oyg-mm-t,
.e-n-menu-content .oyg-mm-entry .oyg-mm-t .elementor-heading-title,
.e-n-menu-content .oyg-mm-entry .oyg-mm-t a{position:static}
/* el texto de la descripcion no intercepta la pulsacion: la deja pasar a la capa */
.e-n-menu-content .oyg-mm-entry > *:not(.oyg-mm-t){pointer-events:none}
/* y toda la tarjeta responde al raton como un enlace */
.e-n-menu-content .oyg-mm-entry{cursor:pointer;border-radius:12px;
transition:background .18s var(--e-out)}
.e-n-menu-content .oyg-mm-entry:hover{background:rgba(250,247,241,.08)}
/* ==========================================================================
EL MENU EN MOVIL
Cuatro cosas rotas, medidas en un iPhone de 393 px de ancho:
1. El icono de las tres rayas se pintaba en verde oscuro sobre la barra
verde: invisible. Y llevaba ademas un recuadro verde detras.
2. El panel abria 159 px por debajo de la barra, dejando una franja en
blanco por la que se veia la pagina de fondo.
3. El panel no ocupaba el ancho de la pantalla.
4. El boton del Campus virtual no aparecia.
========================================================================== */
@media(max-width:1024px){
/* 1. las tres rayas, claras y sin recuadro */
.e-n-menu-toggle,
.oyg-nav .e-n-menu-toggle{
background:transparent!important;border:0!important;box-shadow:none!important;
width:auto!important;height:auto!important;padding:6px!important}
.e-n-menu-toggle-icon,
.e-n-menu-toggle-icon svg,
.e-n-menu-toggle-icon svg path,
.e-n-menu-toggle i,.e-n-menu-toggle i::before{
color:var(--crema)!important;fill:currentColor!important;stroke:currentColor}
.e-n-menu-toggle-icon{background:transparent!important;border:0!important}
/* el icono, algo mas grande para que se pulse comodo */
.e-n-menu-toggle-icon svg{width:26px!important;height:26px!important}
/* 2 y 3. EL DESPLEGABLE EMPUJA, NO TAPA.
En movil el submenu se pintaba FLOTANDO sobre la lista, a 72 px del borde y
con 307 px de alto: cubria las tres primeras secciones. En una pantalla de
movil un desplegable tiene que comportarse como un acordeon, abriendose
bajo su titulo y empujando lo de abajo. */
.e-n-menu-content{
position:static!important;
top:auto!important;left:auto!important;right:auto!important;
width:100%!important;max-width:100%!important;
margin:0!important;
max-height:none!important;height:auto!important;
overflow:visible!important;
background:transparent!important;
padding:2px 0 10px 14px!important;
border-radius:0!important;box-shadow:none!important;
transform:none!important}
/* la lista entera es la que se desplaza si no cabe */
.e-n-menu-heading{
max-height:calc(100dvh - var(--oyg-alto-barra,72px))!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch}
/* 4. el boton del Campus virtual, al final del menu y a todo el ancho */
.e-n-menu-content .oyg-nav-cta,
.e-n-menu-content .oyg-btn-campus{display:block!important;width:100%!important;
margin-top:18px!important;text-align:center!important}
}
/* El boton del Campus virtual estaba oculto en movil. Al mostrarlo se salia de
la barra por la derecha y se montaba sobre el logo, porque en una pantalla de
393 px no caben logo, boton y menu a la vez. Asi que NO va en la barra: va
dentro del menu desplegado, al final de la lista, a todo el ancho. */
@media(max-width:1024px){
/* en la barra sigue sin aparecer */
.oyg-nav > .e-con-inner > .oyg-nav-cta,
.oyg-nav .e-con-inner > .elementor-widget-button{display:none!important}
/* pero si dentro del menu abierto */
.e-n-menu-content .oyg-nav-cta,
.e-n-menu-content .elementor-widget-button{display:block!important;
width:100%!important;margin:20px 0 4px!important}
.e-n-menu-content .elementor-button{
display:block!important;width:100%!important;text-align:center!important;
padding:15px 20px!important;box-sizing:border-box}
/* NO se toca la altura del panel ni se recorta.
Aprendido probando: el panel mide solo 52 px y la lista de secciones vive
FUERA de el, en su propio bloque. Forzarle altura o recortarlo dejaba el
menu en blanco. El fondo verde continuo se consigue pintando el bloque que
de verdad envuelve la lista. */
.e-n-menu-content,
.e-n-menu-heading,
.e-n-menu-wrapper{background:var(--bosque)!important}
/* sin salto de tono entre la barra y la lista: el hueco de 17 px que quedaba
entre las dos lo pintaba el bloque de la barra, en un verde ligeramente
distinto. Se le quita el margen de arriba a la lista para que peguen. */
.e-n-menu-wrapper,.e-n-menu{margin-top:0!important;padding-top:0!important}
.e-n-menu-heading{
margin-top:0!important;
padding:20px 20px 30px!important;
min-height:calc(100dvh - var(--oyg-alto-barra,72px) - 40px)}
}
/* El boton de cerrar el menu llevaba un recuadro verde de fondo. Fuera. */
@media(max-width:1024px){
.e-n-menu-toggle-icon.e-close,
.e-n-menu-toggle[aria-expanded="true"],
.e-n-menu-toggle[aria-expanded="true"] .e-n-menu-toggle-icon{
background:transparent!important;border:0!important;box-shadow:none!important}
}
/* Remates del menu en movil, vistos en captura:
- Con el menu abierto, la barra de arriba seguia siendo transparente y por
detras se leia el texto de la pagina, encima del logo.
- El boton de cerrar arrastraba un recuadro verde.
- El boton del Campus virtual no llegaba al final de la lista. */
@media(max-width:1024px){
/* la barra se vuelve opaca mientras el menu esta abierto */
body:has(.e-n-menu-content.e-active) .oyg-nav,
body:has(.e-n-menu-toggle[aria-expanded="true"]) .oyg-nav{
background:var(--bosque)!important}
/* nada de recuadro en el boton, ni abierto ni cerrado */
.e-n-menu-toggle,.e-n-menu-toggle *{
background:transparent!important;border:0!important;box-shadow:none!important;
outline:0!important}
.e-n-menu-toggle svg,.e-n-menu-toggle svg path{
fill:var(--crema)!important;color:var(--crema)!important}
/* el Campus virtual cierra la lista de secciones */
.e-n-menu-heading{display:flex!important;flex-direction:column!important}
.e-n-menu-heading .oyg-nav-cta,
.e-n-menu-heading > .elementor-widget-button{order:99!important}
}
/* El Campus virtual clonado dentro del menu en movil. */
/* El boton NO lleva margen lateral propio: el bloque que lo contiene ya separa
20 px por cada lado. Al ponerselo tambien al boton, el de la izquierda se
sumaba y el de la derecha lo empujaba fuera de la pantalla. Con ancho
automatico se ajusta solo al espacio que le deja su bloque. */
.oyg-mm-campus{
display:none;order:99;margin:22px 0 6px;
width:100%;max-width:100%;align-self:stretch;
padding:15px 22px;border-radius:999px;box-sizing:border-box;
background:var(--oro);color:var(--bosque);
font-family:var(--font);font-weight:700;font-size:15px;
text-align:center;text-decoration:none}
@media(max-width:1024px){ .oyg-mm-campus{display:block} }
.oyg-mm-campus:hover{filter:brightness(1.06);color:var(--bosque)}
/* El recuadro verde del icono de menu NO era del boton, que ya estaba
transparente: era del bloque que lo envuelve (nav.e-n-menu), de 115x38 px con
fondo verde propio. Por eso las reglas dirigidas al boton no lo quitaban. */
@media(max-width:1024px){
.oyg-nav nav.e-n-menu,
.oyg-nav .e-n-menu,
.e-n-menu{background:transparent!important;border:0!important;box-shadow:none!important}
/* y su bloque contenedor, por si tambien lo lleva */
.oyg-nav .e-n-menu-wrapper{background:transparent!important}
}
/* ==========================================================================
EL DISTINTIVO DE LAS TARJETAS
La etiqueta de esquina que dice «Nuevo» o «Últimas plazas». Se escribe desde
el panel de cada programa; si el texto está vacío, no se pinta nada.
========================================================================== */
.oyg-distintivo{
position:absolute;top:14px;right:14px;z-index:6;
padding:6px 13px;border-radius:999px;
font-family:var(--font);font-weight:700;font-size:11px;
letter-spacing:.08em;text-transform:uppercase;
line-height:1;white-space:nowrap;
box-shadow:0 2px 8px rgba(33,48,36,.18);
pointer-events:none}
.oyg-dist-oro{background:var(--oro);color:var(--bosque)}
.oyg-dist-granate{background:var(--c-mae);color:var(--crema)}
.oyg-dist-bosque{background:var(--bosque);color:var(--crema)}
/* en las tarjetas de color, un borde claro lo despega del fondo */
.oyg-cat .oyg-distintivo,.oyg-pc-card .oyg-distintivo{
box-shadow:0 2px 8px rgba(0,0,0,.22)}
/* La sección de contacto pasó de cuatro tarjetas a cinco al añadir la de la
dirección. Con cinco columnas hay menos ancho por tarjeta, así que el titular
se salía. Se ajusta el tamaño y se reparten en una sola fila. */
.page-id-13 .oyg-cats-grid{
grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.page-id-13 .oyg-cat .oyg-cat-body .elementor-heading-title,
.page-id-13 .oyg-cat h3{
font-size:clamp(19px,1.5vw,25px)!important;line-height:1.18;
overflow-wrap:break-word;hyphens:auto}
.page-id-13 .oyg-cat p{font-size:13.5px;line-height:1.5}
/* ==========================================================================
REGLA PERMANENTE: FONDO NARANJA, LETRA BLANCA
Sobre el naranja de marca la letra va SIEMPRE clara. Titulares, párrafos,
etiquetas, precios, iconos y el trazo de las flechas.
Se ha corregido tres veces por partes; esta regla lo cierra de una vez para
cualquier pieza que use ese fondo, incluidas las que se creen mañana.
========================================================================== */
/* OJO: solo donde el fondo ES naranja de verdad. La versión anterior de esta
regla usaba [class*="c-esp"] y pintaba de blanco textos que están sobre fondo
claro, dejándolos invisibles. La clase c-esp también se usa como acento en
piezas de fondo crema, así que hay que nombrar las que sí llevan el naranja. */
.oyg-pc-card.c-esp,.oyg-pc-card.oyg-c-esp,
.oyg-bl-tema.c-esp,.oyg-bl-tema.oyg-c-esp,
.oyg-bl-card.cat-foros-y-debates,
.oyg-mc-card.c-esp,.oyg-mc-card.oyg-c-esp,
.oyg-pc-card.c-esp *,.oyg-pc-card.oyg-c-esp *,
.oyg-bl-tema.c-esp *,.oyg-bl-tema.oyg-c-esp *,
.oyg-bl-card.cat-foros-y-debates *,
.oyg-mc-card.c-esp *,.oyg-mc-card.oyg-c-esp *{color:var(--crema)!important}
/* las etiquetas y datos secundarios, un punto por debajo pero claros */
.oyg-pc-card.c-esp .oyg-cat-tag,.oyg-pc-card.c-esp .oyg-cat-tag *,
.oyg-bl-tema.c-esp .oyg-cat-tag,.oyg-bl-tema.c-esp .oyg-cat-tag *,
.oyg-bl-card.cat-foros-y-debates .oyg-cat-tag,
.oyg-bl-card.cat-foros-y-debates .oyg-cat-tag *,
.oyg-pc-card.c-esp .oyg-cat-price,.oyg-pc-card.c-esp .oyg-cat-price *{
color:rgba(250,247,241,.9)!important}
/* el trazo de los iconos y flechas */
.oyg-pc-card.c-esp svg,.oyg-pc-card.c-esp svg path,
.oyg-bl-tema.c-esp svg,.oyg-bl-tema.c-esp svg path,
.oyg-bl-card.cat-foros-y-debates svg,
.oyg-bl-card.cat-foros-y-debates svg path{
fill:currentColor!important;color:var(--crema)!important}
.oyg-pc-card.c-esp .oyg-cat-arrow,.oyg-bl-card.cat-foros-y-debates .oyg-cat-arrow{
border-color:rgba(250,247,241,.55)!important}
/* con el ratón encima, el círculo se llena y la flecha se oscurece SOLO ahí */
.oyg-pc-card.c-esp:hover .oyg-cat-arrow,
.oyg-bl-card.cat-foros-y-debates:hover .oyg-cat-arrow{
background:var(--oro)!important;border-color:var(--oro)!important}
.oyg-pc-card.c-esp:hover .oyg-cat-arrow svg,
.oyg-pc-card.c-esp:hover .oyg-cat-arrow svg path,
.oyg-bl-card.cat-foros-y-debates:hover .oyg-cat-arrow svg path{
color:var(--bosque)!important}
/* ==========================================================================
FICHAS DE PROGRAMA: SECCIONES QUE NO DEBEN SALIR VACÍAS
========================================================================== */
/* 1. EGRESADOS. Los cuatro testimonios que hay son de maestría y ninguno tiene
foto. En las fichas que no son maestría salían cuatro cajas verdes con letra
verde oscuro encima: medido, 29,49,35 sobre 30,42,33. Ilegible y vacío.
Se oculta la sección donde no aporta. Cuando el instituto asigne egresados a
cada programa y les ponga foto, se quita esta regla. */
/* CORRECCION DE UN FALLO PROPIO. La version anterior de esta regla ocultaba
cualquier bloque de foto sin una imagen dentro, y se llevo por delante las
fotos de las maestrias: esas imagenes se ponen como FONDO del bloque, no como
imagen suelta, asi que la regla no las veia.
Ahora se oculta solo lo que de verdad esta vacio: un bloque sin imagen suelta
Y ADEMAS sin imagen de fondo. */
/* Comprobado mirando el codigo: en las fichas de programa las tarjetas de
egresado NO tienen foto, solo un degradado verde de relleno. En la pagina de
Egresados si hay foto de verdad. Asi que se distingue por eso: se oculta la
tarjeta que no tiene una imagen real dentro. */
/* Las tarjetas de egresado NO tienen foto de la persona, y no la van a tener:
son testimonios sin cara. En vez de ocultarlas, el hueco lleva el búho del
instituto sobre el verde de marca. Decisión del CEO: «pon el logo como si
nada». Así la tarjeta se ve completa sin exponer a nadie ni inventar una foto
de archivo que sugiera que esa es la persona. */
body.single-programa .oyg-tcard .oyg-ph,
.oyg-eg-loop .oyg-tcard .oyg-ph{
/* El búho en su versión clara: la oscura se confundía con el verde del fondo
y parecía una mancha. */
background-image:
url("/wp-content/themes/theme-ortega-2026/assets/img/owl-minerva-green.svg"),
linear-gradient(160deg, #33452F, #20301F)!important;
background-repeat:no-repeat, no-repeat!important;
background-position:center 42%, center center!important;
background-size:32% auto, cover!important;
opacity:1}
/* NOTA: aquí había una capa oscura sobre el búho, y le puse «position:relative»
al bloque de la foto para colocarla. Eso rompió la caja: pasó de 780 px de
alto a cero. El degradado del propio fondo ya hace ese trabajo, así que la
capa sobra. */
/* El nombre y el cargo, en claro sobre el verde: antes eran verde sobre verde. */
body.single-programa .oyg-tcard .oyg-tname,
body.single-programa .oyg-tcard .oyg-tname *,
body.single-programa .oyg-tcard .oyg-trole,
body.single-programa .oyg-tcard .oyg-trole *,
.oyg-eg-loop .oyg-tcard .oyg-tname,
.oyg-eg-loop .oyg-tcard .oyg-tname *{color:var(--crema)!important}
body.single-programa .oyg-tcard .oyg-trole,
body.single-programa .oyg-tcard .oyg-trole *{color:rgba(250,247,241,.86)!important}
body.single-programa .oyg-tcard-base{position:relative;z-index:2}
/* Y con las tarjetas ocultas, la seccion se quedaba con el titular suelto y un
vacio debajo. Se oculta entera. */
body.single-programa .oyg-proof:not(:has(.oyg-tcard img)){display:none!important}
/* OJO: NO ocultar oyg-trust-photo. Es la columna de la foto de la sección de
metodología, y esa foto se pone como imagen de fondo desde el editor, no como
imagen suelta. Al ocultarla se quedó media sección en blanco. */
body.single-programa .oyg-trust-photo{display:block!important}
/* 2. OBJETIVOS. Repetía palabra por palabra lo que dice «Qué vas a lograr»,
porque las dos leen del mismo campo. Antes no se notaba porque «Qué vas a
lograr» estaba vacía. Se oculta la versión en bruto y se queda la presentada,
que es la que el diseño pone primero. */
/* La sección se identifica por su bloque en la plantilla de ficha. No tiene
clase propia, así que se usa el identificador que le pone Elementor, que es
estable mientras no se rehaga la plantilla. */
body.single-programa .elementor-element-oyg068d{display:none!important}
/* 3. PROFESORADO. Las fichas que no son maestría no tienen profesores asignados,
así que la sección sale con su titular, su frase y nada debajo. Se oculta
mientras esté vacía: en cuanto el instituto asigne el claustro de cada
programa, aparece sola. */
body.single-programa .oyg-claustro-loop:not(:has(.e-loop-item)),
body.single-programa .e-con:has(> .e-con-inner > .oyg-claustro-loop:empty){display:none!important}
/* CORRECCION 2026-09-06. La regla de arriba escondia la REJILLA vacia, pero
dejaba a la vista el titular "Profesorado" y su frase de entrada, que viven
fuera de ella. Resultado medido: 25 de las 28 fichas mostraban el titular con
la nada debajo. Solo las maestrias tienen claustro asignado.
Se oculta el bloque entero. Se usa la clase oyg-claustro-loop, que solo lleva
esa rejilla: la clase del bloque (oyg-fp-block) la comparten muchas secciones
y ocultarlas todas seria mucho peor que el fallo.
SE ESCRIBE AL REVES A PROPOSITO: primero se esconde todo bloque que tenga
rejilla de profesorado, y despues se vuelve a mostrar el que SI tiene
profesores dentro. El camino directo, `:has(> .x:not(:has(.y)))`, es
sintaxis INVALIDA (un :not con :has dentro, anidado en otro :has) y el
navegador tira la regla entera sin avisar. Comprobado el 2026-09-06. */
/* Sin el `>`: en la plantilla de los cursos de Espana la rejilla NO es hija
directa del bloque, va un nivel mas abajo, y el selector no la alcanzaba. */
body.single-programa .oyg-fp-block:has(.oyg-claustro-loop){
display:none!important}
body.single-programa .oyg-fp-block:has(.e-loop-item){
display:flex!important}
/* La sección «Egresados de este programa» YA se muestra: los cuatro egresados
están asignados a su maestría y llevan el logo del instituto en el hueco de la
foto. Se mantiene oculta SOLO donde no haya ninguno que mostrar, que son las
fichas que no son maestría. */
/* CORRECCION 2026-09-06. La regla apuntaba al identificador de UNA seccion
concreta (oyg06d8), que es la de la plantilla de maestrias. Las otras tres
plantillas de ficha tienen su propia seccion de egresados con identificador
distinto, asi que la regla no las alcanzaba: el curso de liderazgo y los
cursos de Espana enseñaban el titular "Egresados de este programa" con cero
tarjetas debajo.
Ahora se apunta a la CLASE del bloque (oyg-fp-tgrid), que las cuatro
plantillas comparten. El titular vive DENTRO de ese bloque, comprobado
leyendo el arbol de la pagina, asi que se va con el sin nombrarlo aparte.
AVISO PARA QUIEN TOQUE ESTO. El primer intento incluia una tercera parte,
`.oyg-fp-title:has(+ .oyg-fp-tgrid...)`, que es sintaxis INVALIDA: dentro de
:has() no se puede abrir con un combinador de hermano de esa forma. Y cuando
una parte de un selector agrupado es invalida, el navegador descarta la regla
ENTERA, incluidas las partes correctas. Sintoma: la regla esta en el archivo
servido, el selector encuentra el elemento si lo pruebas suelto, y aun asi no
se aplica nada. */
body.single-programa .oyg-fp-tgrid:not(:has(.oyg-tcard)){
display:none!important}
/* La tarjeta de egresado quedaba demasiado alta para lo que muestra: 780 píxeles
de verde con el nombre arriba y el búho perdido en medio. Se compacta y se
sube el búho de tamaño, que ahora sí acompaña al testimonio. */
body.single-programa .oyg-tcard,
body.single-programa .oyg-tcard .oyg-ph{
min-height:0!important;height:auto!important;aspect-ratio:3/4}
body.single-programa .oyg-tcard .oyg-ph{
background-size:44% auto, cover!important;
background-position:center 55%, center center!important}
/* el nombre y el cargo, con aire alrededor */
body.single-programa .oyg-tcard-base{padding:26px 24px!important}
/* ==========================================================================
EL TITULAR DEL FORMULARIO DE LA CABECERA
«Solicita tu plan de financiamiento»: la palabra «financiamiento» es tan
larga que llegaba justo al borde de la caja blanca y parecía cortada. Se baja
un punto el tamaño y se permite partir la palabra si hiciera falta.
========================================================================== */
.oyg-fp-hero-form .elementor-heading-title,
.oyg-fp-hero-form h2,.oyg-fp-hero-form h3{
font-size:clamp(28px,2.6vw,44px)!important;
line-height:1.08;
overflow-wrap:break-word;word-break:normal;hyphens:auto;
padding-right:6px}
/* ==========================================================================
EL BOTÓN DE VOLVER ARRIBA, SOBRE FONDO VERDE
Era verde sobre verde y no se distinguía. Ahora el círculo va en amarillo y
la flecha en verde dentro, que es como se lee bien sobre cualquier fondo.
========================================================================== */
/* CORRECCION 2026-09-06, y es un fallo mio del dia anterior. Esta regla pintaba
de amarillo TODO lo que se llamara "volver arriba", y en el pie hay un ENLACE
DE TEXTO con la clase oyg-foot-top. Resultado: letra gris clara sobre fondo
amarillo, ilegible, en movil y en escritorio. Se veia en la captura del pie,
no en ninguna medicion.
Ahora solo se pinta el circulo flotante, que es un boton. El enlace del pie
queda excluido y recupera su aspecto de enlace. */
.oyg-totop,
button.oyg-foot-top,
button[class*="totop"]{
background:var(--oro)!important;
border-color:var(--oro)!important;
box-shadow:0 4px 14px rgba(33,48,36,.24)}
/* El enlace de texto del pie: sin fondo, con el color de los demas enlaces. */
a.oyg-foot-top,
.oyg-footer a[class*="totop"]{
background:transparent!important;box-shadow:none!important;
color:var(--oro)!important;border:0!important}
a.oyg-foot-top:hover,
.oyg-footer a[class*="totop"]:hover{
text-decoration:underline;filter:none;transform:none}
/* Y su zona de toque: el texto mide 13px de alto, que a un dedo se le escapa.
OJO AL SELECTOR: el enlace en si NO tiene ninguna clase, la lleva su
envoltorio. Por eso `a.oyg-foot-top` no casa con nada y hay que bajar al
enlace que vive DENTRO. Es el mismo motivo por el que salia amarillo: el
color de fondo venia del padre, no de el.
El aspecto no cambia: sigue siendo un enlace de texto. */
.oyg-foot-top a,
.oyg-foot-top > a{
display:inline-flex!important;align-items:center;
min-height:34px;padding-block:10px}
.oyg-totop svg,.oyg-totop svg path,
.oyg-foot-top svg,.oyg-foot-top svg path,
[class*="totop"] svg,[class*="totop"] svg path,
.oyg-totop i,.oyg-totop i::before{
color:var(--bosque)!important;fill:currentColor!important;stroke:currentColor}
.oyg-totop:hover,button[class*="totop"]:hover{
filter:brightness(1.06);transform:translateY(-2px)}
/* La sección de «Costos del proceso» de Acuerdo 286 medía el ancho completo de
la ventana MÁS 56 píxeles de margen a cada lado, así que sobresalía por la
derecha y la página se podía desplazar de lado. El margen se descuenta del
ancho, que es lo que hace el resto de secciones. */
.oyg-a286-sec,.elementor-element-a286seccost{
width:auto!important;max-width:none!important;
box-sizing:border-box}
/* El botón parecía estirado aunque él mide 171 px: lo que se estiraba era el
BLOQUE que lo envuelve, que llevaba el fondo amarillo a todo el ancho. Se
ajusta el bloque al tamaño del botón. */
.oyg-a286-sec .elementor-widget-button,
.elementor-element-a286seccost .elementor-widget-button{
width:auto!important;align-self:flex-start!important;
background:transparent!important}
.oyg-a286-sec .elementor-button-wrapper,
.elementor-element-a286seccost .elementor-button-wrapper{
display:inline-block!important;width:auto!important}
.oyg-a286-sec .elementor-button,
.elementor-element-a286seccost .elementor-button{
display:inline-flex!important;width:auto!important}
/* ==========================================================================
EL AVISO DE LA PORTADA
Franja para anunciar convocatorias. El instituto la enciende, la apaga y le
cambia el texto desde Ajustes -> Aviso de la portada, sin tocar codigo.
La pieza que la crea vive en inc/aviso-portada.php del tema.
========================================================================== */
/* DONDE SE COLOCA, Y POR QUE ASI.
La franja se imprime al final del cuerpo de la pagina. Es el unico sitio donde
entra sin tocar la maquetacion, porque esta portada no deja huecos: la
cabecera va FIJA sobre el contenido y la primera pantalla y las cifras son
hermanas dentro de un unico bloque de Elementor de casi siete mil pixeles.
Imprimir al principio la dejaba encima del menu, tapandolo.
Asi que se saca del flujo y se ancla justo donde termina la primera pantalla:
846px de alto mas los 57 de la cabecera fija. El valor no se escribe a mano,
se toma del alto real de la primera pantalla con una variable.
Lo que NO se hizo, y es la leccion: buscar un trozo de texto dentro del
montaje para insertar la franja en medio. Esa via rompio la portada el 4 de
septiembre, de diez imagenes a tres. */
La franja se imprime al final del cuerpo y una linea de JavaScript la MUEVE a
su sitio dentro del bloque, justo entre la primera pantalla y las cifras. No
se ancla a una posicion en pixeles: el alto de la primera pantalla cambia con
el ancho de la ventana y la franja acabaria descolocada en movil.
Hasta que se mueve va escondida, para que no aparezca un instante abajo. */
.oyg-aviso:not(.oyg-aviso-lista){visibility:hidden}
.oyg-aviso{
background:var(--bosque);
border-bottom:1px solid rgba(233,182,50,.28);
padding:14px clamp(18px,4vw,56px);
order:2}
.oyg-aviso-in{
max-width:var(--ancho);margin:0 auto;
display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
/* La etiqueta: amarillo de marca sobre el verde, en versalitas. */
.oyg-aviso-tag{
font-family:var(--font);font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:var(--bosque);background:var(--oro);
padding:5px 11px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.oyg-aviso-txt{
margin:0;flex:1 1 auto;min-width:200px;
font-family:var(--font);font-size:15px;line-height:1.4;
color:var(--crema)}
.oyg-aviso-cta{
flex:0 0 auto;font-family:var(--font);font-size:14px;font-weight:600;
color:var(--oro);text-decoration:none;white-space:nowrap;
border-bottom:1px solid transparent;transition:border-color .18s var(--e-out)}
.oyg-aviso-cta:hover,
.oyg-aviso-cta:focus-visible{color:var(--oro);border-bottom-color:var(--oro)}
.oyg-aviso-cta:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
/* En movil el enlace baja a su propia linea y ocupa el ancho: a un dedo le
cuesta acertar en un enlace de texto pegado al final de una frase. */
@media(max-width:600px){
.oyg-aviso{padding:12px 18px}
.oyg-aviso-in{gap:8px}
.oyg-aviso-txt{font-size:14px;flex:1 1 100%}
.oyg-aviso-cta{flex:1 1 100%;padding-top:2px}
}
/* ==========================================================================
NETWORKING EN LAS FICHAS DE MAESTRIA
Lo pide el manual del instituto (cap. 9.2 y 9.3): fotografias reales de
convivencia, y como bloque SEPARADO de los testimonios.
La pieza que lo crea vive en inc/networking.php del tema.
========================================================================== */
/* Va escondido hasta que se coloca en su sitio, para que no aparezca un
instante al final de la pagina. Mismo patron que el aviso de la portada. */
.oyg-net:not(.oyg-net-lista){visibility:hidden;position:absolute}
.oyg-net{
background:var(--papel);
padding:clamp(56px,7vw,96px) clamp(20px,4vw,60px)}
.oyg-net-in{max-width:var(--ancho);margin:0 auto}
.oyg-net-title{
font-family:var(--font-display);font-weight:400;
font-size:var(--fs-h2);line-height:1.05;letter-spacing:.01em;
color:var(--bosque);margin:0 0 14px;text-transform:uppercase}
.oyg-net-sub{
font-family:var(--font);font-size:var(--fs-lead);line-height:1.5;
color:var(--texto-2);margin:0 0 clamp(28px,3.5vw,44px);max-width:62ch}
/* Dos fotos grandes arriba y el resto en tira: el bloque tiene que dar
sensacion de acto lleno, no de galeria de miniaturas. */
.oyg-net-grid{
display:grid;grid-template-columns:1fr;gap:12px}
.oyg-net-foto{
margin:0;overflow:hidden;border-radius:14px;background:var(--linea);
aspect-ratio:3/2}
.oyg-net-foto img{
width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:701px){
.oyg-net-grid{grid-template-columns:repeat(4,1fr);gap:14px}
.oyg-net-ancha{grid-column:span 2}
}
/* ==========================================================================
ZONA DE TOQUE DE LOS ICONOS DE REDES DEL PIE
Medido en movil el 2026-09-06: los cuatro iconos ocupaban 19x19 pixeles y sin
nada de margen alrededor. Un dedo cubre unos 45 pixeles, asi que fallar el
objetivo o pulsar el de al lado era lo normal.
Se agranda la ZONA PULSABLE, no el dibujo: el icono se ve igual, pero
alrededor hay sitio de sobra para el dedo. Es lo que hace un boton de
ascensor, donde el circulo que se pulsa es mayor que el numero dibujado.
========================================================================== */
.oyg-footer .elementor-social-icon,
footer .elementor-social-icon{
position:relative;
display:inline-flex;align-items:center;justify-content:center}
.oyg-footer .elementor-social-icon::after,
footer .elementor-social-icon::after{
content:"";position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%);
/* 34px, no 44: los centros de los iconos estan a 35px unos de otros, asi que
una zona de 44 se comeria la del vecino y el dedo seguiria fallando. 34 deja
cada objetivo bien delimitado y casi duplica el area util. */
width:34px;height:34px;
border-radius:50%}
/* Y para que quepan sin apretarse, un poco mas de aire entre ellos. */
.oyg-footer .elementor-social-icon,
footer .elementor-social-icon{margin-inline:3px}
/* El foco con el teclado tiene que verse: si se agranda la zona de toque y no
se marca el foco, quien navega con tabulador pierde el rastro. */
.oyg-footer .elementor-social-icon:focus-visible,
footer .elementor-social-icon:focus-visible{
outline:2px solid var(--oro);outline-offset:6px;border-radius:4px}
/* ==========================================================================
AJUSTES DE FORMA · 2026-09-07
Cuatro cosas que Alejandro senalo mirando la web, todas medidas antes de
tocar nada.
========================================================================== */
/* 1. LAS TARJETAS DE EGRESADO ERAN ENORMES.
Medido: 779 px de alto en escritorio y 475 en movil, para un nombre y un
cargo de dos lineas. Venian con forma de retrato (3:4) porque se disenaron
para una FOTO de la persona, y esa foto no existe: llevan el buho del
instituto. Sin foto que sostener, esa forma solo produce un rectangulo verde
enorme con el texto arriba y el resto vacio.
Se pasan a una forma ancha y baja, del alto que pide su contenido. */
body.single-programa .oyg-tcard,
body.single-programa .oyg-tcard .oyg-ph{
aspect-ratio:auto!important;
min-height:0!important;height:auto!important}
body.single-programa .oyg-tcard{
min-height:190px!important;
border-radius:16px;overflow:hidden}
body.single-programa .oyg-tcard .oyg-ph{
/* el buho, mas pequeno y a la derecha: acompana sin ocupar la tarjeta */
background-size:112px auto, cover!important;
background-position:right 26px center, center center!important}
body.single-programa .oyg-tcard-base{
position:static!important;padding:26px 150px 26px 26px!important}
/* 2. LA CAJA DEL BLOQUE DE NETWORKING, CON ESQUINAS REDONDEADAS.
El resto de cajas de la web las llevan; esta salia a escuadra. */
.oyg-net{border-radius:20px;margin-inline:clamp(12px,3vw,40px);
padding-inline:clamp(20px,4vw,52px)}
/* 3. AIRE EN LA PRIMERA PANTALLA DE CURSOS CERTIFICADOS.
Medido: 0 px arriba y 0 abajo, cuando el resto de portadas de seccion llevan
82 y 72. El titular salia pegado a la cabecera. */
body.page-template .oyg-hero:not([style*="padding"]),
.oyg-hero.oyg-hero-plano{padding-block:clamp(56px,7vw,86px) clamp(48px,6vw,76px)}
/* 4. LAS TARJETAS DEL CATALOGO DE MICROCREDENCIALES, MENOS APRETADAS.
Diecisiete tarjetas seguidas a 26 px de relleno se leen como un listado
comprimido. Con mas aire cada una respira y la lista deja de agobiar. */
.oyg-mc-card{padding-block:34px!important}
.oyg-mc-section{gap:14px}
/* 5-6. LA REJILLA DE TARJETAS SE ADAPTA A CUANTAS HAYA.
Estaba fijada a cuatro columnas, que es lo que necesita Diplomados. En
Cursos de Especializacion, con un solo curso abierto, la tarjeta salia
estrecha y sola a la izquierda con tres cuartos de fila vacios al lado,
y ademas arrastraba el alto minimo de 340 px pensado para una columna
estrecha, dejando un palmo de fondo vacio debajo.
El reparto se decide por cuantas tarjetas hay, no por el nombre de la
pagina, para que siga valiendo cuando abran el segundo curso.
POR QUE EL SELECTOR SE ESCRIBE ASI: Elementor no siempre envuelve el
contenido en la misma estructura (a veces intercala una capa e-con-inner
entre la rejilla y las tarjetas, a veces no) y ademas cuelga elementos
sueltos como el sello "Nuevo". Contar hijos a secas falla en cuanto
aparece uno de esos. Por eso se cuenta SOLO .oyg-cat, con :has() sobre
la rejilla en sus dos formas posibles. Comprobado en el navegador. */
@media (min-width:900px){
/* Un solo curso: la tarjeta se acota y deja que el alto lo marque su texto. */
.oyg-cats-grid:has(.oyg-cat:only-of-type),
.oyg-cats-grid > .e-con-inner:has(.oyg-cat:only-of-type){
grid-template-columns:minmax(0,560px)!important}
.oyg-cats-grid:has(.oyg-cat:only-of-type) .oyg-cat{
min-height:0!important}
.oyg-cats-grid:has(.oyg-cat:only-of-type) .oyg-cat > .e-con-inner{
justify-content:flex-start;gap:16px}
/* Dos o tres: su propio reparto, sin huecos vacios al final de la fila. */
.oyg-cats-grid:has(.oyg-cat:nth-last-of-type(2):first-of-type),
.oyg-cats-grid > .e-con-inner:has(.oyg-cat:nth-last-of-type(2):first-of-type){
grid-template-columns:repeat(2,minmax(0,1fr))!important}
.oyg-cats-grid:has(.oyg-cat:nth-last-of-type(3):first-of-type),
.oyg-cats-grid > .e-con-inner:has(.oyg-cat:nth-last-of-type(3):first-of-type){
grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* ============================================================
7. CONTRASTE DE LAS TARJETAS DE COLOR (2026-09-08)
EL PROBLEMA, MEDIDO: cuando la tarjeta se tine de su color, el
titular y la linea de precio se quedaban con el color oscuro de
reposo. Sobre el fondo vino daba 1,17 de contraste y sobre el
verde 1,37, cuando el minimo legible es 4,5. Practicamente
invisible. Doce textos por debajo del minimo en /diplomados/.
POR QUE PASABA: el bloque de hover si repinta h3 y p, pero no
alcanza a .oyg-cat-price ni a los textos que Elementor envuelve
en su propio contenedor, que conservan su color heredado.
SE ARREGLA APUNTANDO A TODO LO QUE HAY DENTRO, no elemento por
elemento, porque el constructor visual puede anadir envoltorios
nuevos en cualquier momento.
============================================================ */
/* Estado con el raton encima: todo el contenido toma el color que
corresponde al fondo de esa tarjeta. */
.oyg-cat:hover,
.oyg-cat:hover .oyg-cat-price,
.oyg-cat:hover .oyg-cat-price p,
.oyg-cat:hover .oyg-cat-title-b,
.oyg-cat:hover .elementor-heading-title,
.oyg-cat:hover .elementor-widget-container,
.oyg-cat:hover .elementor-widget-container > *{color:var(--cctx)!important}
/* Estado tactil (movil y tableta), donde la tarjeta ya sale en color. */
@media(hover:none){
.oyg-cat,
.oyg-cat .oyg-cat-price,
.oyg-cat .oyg-cat-price p,
.oyg-cat .oyg-cat-title-b,
.oyg-cat .elementor-heading-title,
.oyg-cat .elementor-widget-container,
.oyg-cat .elementor-widget-container > *{color:var(--cctx)!important}
}
/* EL NARANJA NO LLEGABA AL MINIMO CON NINGUNA LETRA: con letra clara
daba 3,28 y con letra oscura 3,96, y hacen falta 4,5. La regla de
marca manda letra blanca sobre naranja, asi que se oscurece el
propio naranja lo justo (de #DF642B a #B84B18) para llegar a 4,84.
El tono de marca se conserva para todo lo demas: esto solo afecta
al fondo de la tarjeta cuando lleva texto pequeno encima. */
.oyg-cat.oyg-c-esp{--cc:#B84B18}
/* El morado es claro, asi que ahi la letra va OSCURA. Ya estaba bien
declarado (7,16 de contraste); se refuerza para que el precio no se
quede en el gris de reposo, que sobre morado daba 2,72. */
.oyg-cat.oyg-c-con:hover,
.oyg-cat.oyg-c-con:hover *{color:#1E2A21!important}
@media(hover:none){
.oyg-cat.oyg-c-con,
.oyg-cat.oyg-c-con *{color:#1E2A21!important}
}
/* ============================================================
8. EQUILIBRIO DE DOS BLOQUES DE LA FICHA (2026-09-08)
"TU DIPLOMA INSTITUCIONAL" ERA UN MURO. Medido: el texto se
extendia a 1052 px de ancho, lineas de mas de 180 caracteres
en un recuadro verde oscuro. La hoja YA declaraba un tope de
56 caracteres, pero el constructor visual lo pisaba poniendo
100%: por eso no se aplicaba. Se fuerza el tope y se reparte
el bloque en dos columnas en pantalla ancha, para que el
titular no cargue solo con todo el peso.
"SOBRE EL CURSO" SE QUEDABA PEQUENO. Medido: 169 px de alto
frente a los 444 del diploma, con el mismo rango de texto.
Es la primera explicacion de que va el programa, asi que se
le da el aire y el cuerpo de letra que le corresponde.
============================================================ */
/* El texto del diploma, a una anchura que se lee de un vistazo. */
.oyg-fp-degree .oyg-fp-degree-body,
.oyg-fp-degree .oyg-fp-degree-body p,
.oyg-fp-degree .oyg-fp-degree-body .elementor-widget-container{
max-width:62ch!important}
.oyg-fp-degree .oyg-fp-degree-sub{max-width:52ch}
.oyg-fp-degree .oyg-fp-degree-value{max-width:52ch!important}
/* En pantalla ancha el recuadro se reparte: a la izquierda el titular
y la linea de resumen, a la derecha el detalle. Deja de leerse como
un bloque unico de texto corrido. */
@media (min-width:1000px){
.oyg-fp-degree{
display:grid;
/* La izquierda necesita sitio para el titular, que va en cuerpo
grande: con 0.85fr se partia la ultima letra a una linea suelta
("INSTITUCIONA" y la "L" debajo). Medido en la captura. */
grid-template-columns:minmax(300px,1fr) minmax(0,1.2fr);
column-gap:clamp(32px,4vw,64px);
align-items:start}
.oyg-fp-degree > h2,
.oyg-fp-degree > .elementor-widget-heading{
grid-column:1;margin-bottom:14px;text-wrap:balance;hyphens:none;overflow-wrap:normal}
.oyg-fp-degree .oyg-fp-degree-sub{grid-column:1}
.oyg-fp-degree .oyg-fp-degree-body{grid-column:2;grid-row:1 / span 2;margin-bottom:0}
.oyg-fp-degree .oyg-fp-degree-value{grid-column:2;margin-top:18px}
/* Que el recuadro no arrastre el hueco que dejaba el texto largo: el alto
lo marca la columna que mas ocupe, sin fondo vacio de relleno. */
.oyg-fp-degree{align-content:start}
.oyg-fp-degree .oyg-fp-degree-sub{align-self:start;margin-bottom:0}
}
/* "Sobre el curso": el mismo aire que el resto de bloques de la ficha,
y el texto de entrada un punto mayor, que es la primera explicacion
que lee alguien que no conoce el programa. */
.oyg-fp-block:has(> .oyg-fp-title) .oyg-fp-intro,
.oyg-fp-sobre{padding-block:clamp(30px,4vw,52px)}
.oyg-fp-sobre .oyg-fp-intro,
.oyg-fp-sobre p{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.62;max-width:74ch}
/* ============================================================
9. LAS TARJETAS DE EGRESADO SE QUEDARON CORTAS (2026-09-10)
QUE PASABA. La cita salia recortada por arriba: medido, el
texto empezaba 38 px POR ENCIMA del borde de la tarjeta, y el
rotulo "Egresados" a 89 px por encima. Se leian frases
cortadas por la mitad.
POR QUE. El 7 de septiembre les puse un alto minimo de 190 px
porque eran enormes (779 px para un nombre y un cargo). Ese
numero lo calcule mirando SOLO la capa de abajo, la del nombre.
La tarjeta tiene DOS capas superpuestas: esa, y otra encima con
la cita completa, que aparece al pasar el raton. La segunda
necesita mas sitio y, al estar superpuesta, no empuja el alto:
simplemente se sale.
COMO SE ARREGLA. En vez de otro numero a ojo, la tarjeta toma
el alto de su contenido. La capa de la cita deja de estar
superpuesta y pasa a ocupar su sitio, con el mismo aire que
tendria si hubiera foto. El minimo sube a 300 px, que es lo que
ocupa una cita de tres lineas mas el cargo.
============================================================ */
body.single-programa .oyg-tcard{
min-height:300px!important;
height:auto!important;
display:flex!important;
align-items:stretch}
/* Las tarjetas de una misma fila, a la misma altura. Sin esto, la que
tiene la cita mas larga sobresale y la fila se ve desalineada
(medido: una a 300 px y la otra a 332).
OJO CON LA ESTRUCTURA: cada tarjeta va dentro de su propia caja, que
el constructor visual llama e-loop-item. Esa caja SI toma el alto de
la fila; la tarjeta de dentro no la llenaba. Por eso la regla apunta
a la tarjeta y le dice que ocupe el alto de su caja, en vez de tratar
de igualarlas desde arriba. Comprobado en el navegador. */
body.single-programa .e-loop-item:has(> * .oyg-tcard),
body.single-programa .e-loop-item:has(.oyg-tcard){display:flex;align-items:stretch}
body.single-programa .e-loop-item:has(.oyg-tcard) > *{display:flex;flex:1 1 auto;align-items:stretch}
body.single-programa .oyg-tcard{flex:1 1 auto;height:auto!important}
/* La capa de la cita deja de flotar y ocupa su hueco, con el mismo
respiro que el diseno da cuando la tarjeta lleva foto (40 px). */
body.single-programa .oyg-tcard .oyg-tcard-over{
position:relative!important;
inset:auto!important;
opacity:1!important;
width:100%;
padding:34px 150px 34px 34px!important;
justify-content:center;
gap:6px}
/* La capa del nombre se retira: su contenido ya esta dentro de la
cita, y mantener las dos deja el texto duplicado. */
body.single-programa .oyg-tcard .oyg-tcard-base{display:none!important}
/* La cita, a una anchura que se lee de un vistazo y sin tope de
lineas: si el egresado escribe cuatro, caben cuatro. */
body.single-programa .oyg-tcard .oyg-tquote{
max-width:none!important;margin-bottom:14px!important}
/* Sin foto no hace falta el velo oscuro que daba contraste sobre
ella: el fondo ya es verde solido. */
body.single-programa .oyg-tcard .oyg-tcard-over{background:none!important}
body.single-programa .oyg-tcard::before{display:none!important}
/* En movil, el buho estorba menos si no reserva sitio a la derecha. */
@media (max-width:760px){
body.single-programa .oyg-tcard .oyg-tcard-over{
padding:28px 26px 28px 26px!important}
body.single-programa .oyg-tcard .oyg-ph{
background-size:78px auto, cover!important;
background-position:right 16px bottom 16px, center center!important;
opacity:.5}
}
/* ============================================================
10. LAS MARCAS DE LISTA, CENTRADAS CON SU TEXTO (2026-09-10)
EL PROBLEMA, MEDIDO: en el temario de las fichas, la rayita
dorada de cada materia caia 4 px por encima del centro del
texto, en las 20 lineas. Con una raya fina de 1 px de alto ese
desfase se ve, y la lista parece desalineada.
POR QUE: la marca estaba colocada con un numero escrito a mano
(top:12px). Ese numero solo acierta si el texto mide justo lo
previsto; en cuanto cambia el tamano de letra o el relleno, se
descoloca. Y con dos lineas de texto, mas todavia.
COMO SE ARREGLA: en vez de otro numero a ojo, la marca se
coloca calculando el centro de la PRIMERA linea de texto:
el relleno de arriba mas la mitad del interlineado, menos la
mitad del alto de la propia marca. Asi se centra sola aunque
cambie el cuerpo de letra, y en las lineas de dos renglones
sigue alineada con el primero, que es lo correcto.
============================================================ */
SEGUNDA PASADA: el calculo a mano acertaba en las lineas de un
renglon pero se quedaba 2,2 px corto en las de dos, porque la
caja del texto se mide distinto cuando hay mas de un renglon.
La solucion definitiva no calcula nada: se le dice a la marca
que sea una linea de la misma altura que el texto y se alinee
con el, que es lo que hace el propio navegador con el texto.
Temario: la rayita de cada materia. */
.oyg-plan-mat li::before{
top:var(--tope-lista, 5px)!important;
height:1.5em!important;width:7px;
background:none!important;
display:flex;align-items:center}
.oyg-plan-mat li::before{
content:""!important;
border-top:1px solid var(--oro-tinta);
box-sizing:content-box;
height:0!important;
top:calc(5px + 0.75em)!important}
/* Objetivos: el punto redondo, con el mismo criterio. */
.oyg-obj-list li::before{
top:calc(9px + 0.75em - 4.5px)!important}
/* EL PUNTO DORADO DE LOS TITULOS DE MODULO.
Aparecio al revisar el movil: en los titulos que ocupan dos
lineas ("Diplomacia Aplicada y Negociacion Internacional") el
punto quedaba centrado entre las DOS, flotando en medio, en vez
de alineado con la primera. La causa: la fila usa align-items
center, que centra respecto al bloque entero.
Con una linea acertaba; con dos, no. Se alinea al principio y
se baja hasta el centro del primer renglon. */
.oyg-plan-mod-t{align-items:flex-start}
.oyg-plan-mod-t::before{
margin-top:calc(0.65em - 4px)}
/* La flecha de abrir y cerrar, con el mismo criterio. */
.oyg-plan-mod-t::after{margin-top:calc(0.5em - 4px)}
/* ============================================================
11. LOS TITULARES NO SE PARTEN CON GUION (2026-09-10)
"Tu certificado de Madrid" salia como "TU CER-" / "TIFICADO" /
"DE MADRID": tres lineas con una palabra rota por la mitad.
LA CAUSA: los titulares grandes llevaban activado el corte de
palabras (hyphens:auto y word-break:break-word). Eso se puso en
su dia para que los nombres largos de programa no se salieran
de una columna estrecha, pero el efecto secundario es que parte
cualquier palabra en cuanto no cabe.
COMO SE ARREGLA: el titular parte por ESPACIOS, nunca dentro de
una palabra. Si una palabra sola no cabe, se deja que asome en
vez de romperla: es menos feo. Y se equilibran las lineas para
que no quede una suelta con dos letras.
============================================================ */
.oyg-fp-title,.oyg-fp-title .elementor-heading-title,
.oyg-fp-title-light,.oyg-fp-title-light .elementor-heading-title,
.oyg-fp-degree h2,.oyg-fp-degree .elementor-heading-title{
hyphens:none!important;
-webkit-hyphens:none!important;
word-break:normal!important;
overflow-wrap:normal!important;
text-wrap:balance}
/* En pantallas estrechas si dejamos que una palabra muy larga se
parta, porque ahi si puede desbordar de verdad. */
@media (max-width:520px){
.oyg-fp-title,.oyg-fp-title .elementor-heading-title,
.oyg-fp-title-light,.oyg-fp-title-light .elementor-heading-title{
overflow-wrap:break-word!important}
}
/* ============================================================
12. LA GALERIA DE NETWORKING SE ADAPTA AL NUMERO DE FOTOS
(2026-09-10)
El diseno es de cuatro columnas: las dos primeras fotos ocupan
dos huecos cada una (fila de arriba) y las demas van de una
(fila de abajo). Con SEIS fotos cuadra perfecto: 2 grandes y 4
pequenas.
Al retirar la biblioteca de la galeria (porque se usa en "Como
es estudiar" de la misma ficha) quedaron cinco, y la fila de
abajo se quedo con tres y un hueco vacio a la derecha.
Se resuelve por el numero real de fotos, no con un numero fijo:
con cinco, la fila de abajo pasa a TRES columnas y se llena.
Asi vale igual si el instituto anade o quita fotos manana.
============================================================ */
@media(min-width:701px){
/* Cinco fotos: dos grandes arriba, tres abajo repartidas a tercios. */
.oyg-net-grid:has(> :nth-last-child(5):first-child){
grid-template-columns:repeat(6,1fr)}
.oyg-net-grid:has(> :nth-last-child(5):first-child) > .oyg-net-ancha{
grid-column:span 3}
.oyg-net-grid:has(> :nth-last-child(5):first-child) > :not(.oyg-net-ancha){
grid-column:span 2}
/* Tres fotos: una fila de tres. */
.oyg-net-grid:has(> :nth-last-child(3):first-child){
grid-template-columns:repeat(3,1fr)}
.oyg-net-grid:has(> :nth-last-child(3):first-child) > .oyg-net-ancha{
grid-column:span 1}
}
. Quitamos el triangulo del navegador y
ponemos una flecha propia a la derecha que gira al abrir. El punto oro se queda. */
.oyg-plan-mod-t{font-family:var(--font);font-weight:600;font-size:18px;line-height:1.3;color:var(--bosque);margin:0;display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.oyg-plan-mod-t::-webkit-details-marker{display:none}
.oyg-plan-mod-t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oro-tinta);flex:0 0 auto}
.oyg-plan-mod-t::after{content:"";width:9px;height:9px;margin-left:auto;flex:0 0 auto;border-right:2px solid var(--sage,#617869);border-bottom:2px solid var(--sage,#617869);transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--e-out,ease)}
.oyg-plan-mod[open] .oyg-plan-mod-t::after{transform:rotate(-135deg) translateY(-1px)}
.oyg-plan-mod[open] .oyg-plan-mod-t{margin-bottom:12px}
.oyg-plan-mod-t:hover{color:var(--pino,#314B39)}
.oyg-plan-mod-t:focus-visible{outline:2px solid var(--bosque);outline-offset:3px;border-radius:4px}
.oyg-plan-mat{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.oyg-plan-mat li{break-inside:avoid;font-size:15px;line-height:1.5;color:var(--texto-2);padding:5px 0 5px 16px;position:relative}
.oyg-plan-mat li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--oro-tinta)}
@media(max-width:768px){.oyg-plan-mat{columns:1}}
/* Preguntas frecuentes: reusa la piel del acordeon del plan (.oyg-fp-acc). */
.oyg-faq .oyg-faq-list{border-top:1px solid var(--linea)}
/* Objetivos (diplomados y microcredenciales): lista con marca dorada. */
.oyg-obj-list{list-style:none;margin:0;padding:0;text-align:left}
.oyg-obj-list li{position:relative;padding:9px 0 9px 22px;font-size:16px;line-height:1.5;color:var(--texto);border-bottom:1px solid var(--linea);text-align:left}
.oyg-obj-list li:last-child{border-bottom:0}
.oyg-obj-list li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:50%;background:var(--oro-tinta)}
/* Egresados: el nombre y el rol NUNCA se cortan. El overlay se ancla abajo y la
cita se limita a un maximo de lineas; asi pildora + cita + nombre + rol caben
siempre aunque la tarjeta se acorte o el navegador tenga zoom o fuente grande. */
.e-con.oyg-tcard-over,.oyg-tcard-over{justify-content:flex-end}
.oyg-tcard-over .oyg-tquote .elementor-heading-title,
.oyg-tcard-over .oyg-tquote p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
@media(max-width:1000px){
.oyg-tcard-over{padding:30px 26px}
.oyg-tcard-over .oyg-t-pill{margin-bottom:12px}
.oyg-tcard-over .oyg-tquote{margin-bottom:12px}
.oyg-tcard-over .oyg-tquote .elementor-heading-title,
.oyg-tcard-over .oyg-tquote p{-webkit-line-clamp:5}
}
/* Profesorado sin foto: el claustro real (hasta 24 docentes) no tiene retrato en la
fuente, asi que la tarjeta con la caja de imagen vacia se veia como un muro de
rectangulos verdes. Cuando el docente NO tiene foto, se oculta el retrato y la
tarjeta queda como ficha limpia de nombre + credencial, con un punto dorado de
marca. Si el cliente sube una foto al campo ACF, el retrato vuelve solo. */
/* El tratamiento sin retrato (esconder recuadro + punto oro antes del nombre) solo
aplica cuando NO hay imagen NI monograma. El claustro dinamico ya pone un
monograma de iniciales cuando falta la foto, y ahi el punto sobraba (salia el
monograma Y el punto a la vez). */
.oyg-fp-portrait:not(:has(img)):not(:has(.oyg-prof-mono)){display:none}
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body{padding:22px 22px 24px}
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body h1,
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body h2,
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body h3{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body h1::before,
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body h2::before,
.oyg-fp-teacher:not(:has(img)):not(:has(.oyg-prof-mono)) .oyg-fp-teacher-body h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oro);flex:0 0 auto;transform:translateY(-2px)}
/* ============================================================
Claustro dinamico (shortcode [oyg_claustro])
Parrilla de los 45 profesores del CPT: 6 visibles + "ver mas".
Reutiliza .oyg-fp-faculty-grid y .oyg-fp-teacher; anade el
monograma para quien no tiene retrato y el boton desplegable.
============================================================ */
.oyg-claustro{width:100%}
.oyg-claustro .oyg-fp-teacher.is-hidden{display:none}
/* monograma de iniciales cuando no hay foto: portada pareja con las demas */
.oyg-fp-portrait:has(.oyg-prof-mono){display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--bosque),var(--pino) 70%,var(--sage,#617869))}
.oyg-prof-mono{font-family:var(--font);font-weight:700;font-size:clamp(2.4rem,4.5vw,3.4rem);letter-spacing:3px;color:var(--oro)}
.oyg-claustro-actions{display:flex;justify-content:center;margin-top:26px}
/* clase doblada (0,2,0) para ganar al reset de Hello Elementor button:hover/:focus {background:#c36} (0,1,1) sin !important */
.oyg-claustro-more.oyg-claustro-more{cursor:pointer;font-family:var(--font);font-weight:600;font-size:15px;color:var(--bosque);background:transparent;border:1px solid var(--bosque);border-radius:100px;padding:13px 30px;transition:background .18s ease,color .18s ease}
.oyg-claustro-more.oyg-claustro-more:hover,.oyg-claustro-more.oyg-claustro-more:focus{background:var(--bosque);color:var(--oro);border-color:var(--bosque)}
.oyg-claustro-more[hidden]{display:none}
/* ============================================================
Accesibilidad: boton de envio de formularios.
El boton de Elementor Forms salia dorado con letra BLANCA (ilegible).
Letra oscura sobre oro; en hover/foco se mantiene oro (no el rosa del
reset de Hello Elementor, gotcha 199). Especificidad (0,3,0) > (0,1,1).
============================================================ */
/* Elementor fija el color del boton por ID del widget con especificidad (0,5,0)
(.elementor-
, no al envoltorio */
.oyg-sec-title .elementor-heading-title{font-size:var(--fs-h2);line-height:1.12;text-wrap:balance}
.oyg-fp-form-card.oyg-fp-form-card .elementor-field-textual:focus,
.oyg-fp-form-card.oyg-fp-form-card select.elementor-field:focus,
.oyg-fp-form-card.oyg-fp-form-card textarea.elementor-field:focus{border-color:var(--oro);background:#fff;outline:none}
/* ============================================================
Artículo del blog (single.php): portada con la imagen destacada
y el cuerpo con la tipografía de marca. (2026-08-27)
============================================================ */
.oyg-blog-single{background:var(--papel)}
.oyg-bs-hero{position:relative;background-size:cover;background-position:center;padding:130px 0 58px;color:var(--crema)}
.oyg-bs-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,16,.5),rgba(16,18,16,.84))}
.oyg-bs-hero-inner{position:relative;z-index:1}
.oyg-bs-date{font-family:var(--font);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);margin:0 0 14px}
.oyg-bs-title,.oyg-bs-title .elementor-heading-title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.12;margin:0;text-wrap:balance}
.oyg-bs-hero .oyg-bs-title,.oyg-bs-hero .oyg-bs-title .elementor-heading-title{color:var(--crema)}
.oyg-bs-hero .elementor-widget-theme-post-title{margin:0}
.oyg-bs-back .elementor-button{background:transparent;color:var(--bosque);border:1px solid var(--linea-fuerte);border-radius:100px;font-weight:600}
.oyg-bs-back .elementor-button:hover,.oyg-bs-back .elementor-button:focus{background:var(--bosque);color:var(--oro)}
.oyg-bs-head{padding:64px 0 20px}
.oyg-bs-head .oyg-bs-title{color:var(--bosque)}
.oyg-bs-head .oyg-bs-date{color:var(--oro-tinta)}
.oyg-bs-body{padding:46px 0 40px;font-size:17px;line-height:1.75;color:var(--texto)}
.oyg-bs-body img{max-width:100%;height:auto;border-radius:12px;margin:1.2em 0}
.oyg-bs-body h2,.oyg-bs-body h3,.oyg-bs-body h4{font-family:var(--font-display);color:var(--bosque);margin:1.6em 0 .5em;line-height:1.25}
.oyg-bs-body p{margin:0 0 1.1em}
.oyg-bs-body a{color:var(--oro-tinta);border-bottom:1px solid var(--oro-tinta)}
.oyg-bs-body ul,.oyg-bs-body ol{margin:0 0 1.1em;padding-left:1.3em}
.oyg-bs-foot{padding:0 0 76px}
.oyg-bs-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-weight:600;font-size:14px;color:var(--bosque);border-bottom:1px solid var(--linea)}
.oyg-bs-back:hover{color:var(--oro-tinta)}
/* ===== Paginas padre de "Programas en Espana" (Escuela de Verano / Especializacion) ===== */
.oyg-espana-hero{padding:clamp(96px,12vw,148px) 0 clamp(48px,7vw,74px);color:var(--crema)}
.oyg-espana-hero .elementor-heading-title{color:var(--crema)}
.oyg-espana-hero .oyg-espana-lead,.oyg-espana-hero .oyg-espana-lead p{color:var(--crema);max-width:62ch;font-size:var(--fs-lead)}
.oyg-espana-hero--verano{background:var(--c-esp)} /* naranja: texto en blanco (regla de marca) */
.oyg-espana-hero--esp{background:var(--c-286)} /* verde bosque */
.oyg-espana-courses{padding:clamp(48px,7vw,80px) 0}
.oyg-espana-course-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.oyg-espana-course .elementor-button{white-space:normal;text-align:left}
/* Hero generico de pagina-listado (Cursos certificados, etc.) */
.oyg-cat-hero{padding:clamp(96px,12vw,148px) 0 clamp(48px,7vw,74px);color:var(--crema);background:var(--bosque)}
.oyg-cat-hero .elementor-heading-title{color:var(--crema)}
.oyg-cat-hero .oyg-espana-lead,.oyg-cat-hero .oyg-espana-lead p{color:var(--crema);max-width:62ch;font-size:var(--fs-lead)}
/* Catalogo de microcredenciales (cuadricula de bucle) */
.oyg-mc-section{padding:clamp(48px,7vw,80px) 0}
.oyg-mc-section .oyg-fp-title{margin-bottom:28px}
.oyg-mc-card{background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:26px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;transition:transform .35s var(--e-out),background .35s var(--e-out),box-shadow .35s var(--e-out),border-color .35s var(--e-out)}
.oyg-mc-card:hover{background:var(--c-con);border-color:transparent;transform:translateY(-6px);box-shadow:0 22px 44px rgba(33,48,36,.18)}
.oyg-mc-tag,.oyg-mc-tag p{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}
.oyg-mc-title .elementor-heading-title{font-size:19px;line-height:1.3;color:var(--bosque)}
.oyg-mc-title a{color:inherit}
.oyg-mc-card:hover .oyg-mc-tag,.oyg-mc-card:hover .oyg-mc-tag p{color:var(--bosque);opacity:.8}
.oyg-mc-card:hover .oyg-mc-title .elementor-heading-title{color:var(--bosque)}
/* Botón flotante "volver arriba" (C66) */
.oyg-totop{position:fixed;right:24px;bottom:24px;z-index:var(--z-nav);width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--bosque);color:var(--oro);display:grid;place-items:center;box-shadow:0 10px 26px rgba(33,48,36,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s var(--e-out),transform .25s var(--e-out),visibility .25s,background .25s var(--e-out)}
.oyg-totop.is-visible{opacity:1;visibility:visible;transform:none}
.oyg-totop:hover,.oyg-totop:focus-visible{background:var(--pino)}
/* La flecha salía descentrada hacia abajo y pequeña: el botón heredaba del tema base
un relleno desigual (8px arriba y abajo, 16px a los lados), y en un círculo eso
desplaza el icono. Se centra de verdad y la flecha crece un poco. */
.oyg-totop{padding:0;display:flex;align-items:center;justify-content:center;line-height:0}
.oyg-totop svg{width:24px;height:24px;display:block}
@media(max-width:600px){.oyg-totop{right:16px;bottom:16px;width:44px;height:44px}}
/* ===== Egresados en vídeo (carpeta D · testimonios verticales) ===== */
.oyg-egv-sec{background:var(--crema)}
.oyg-egv-sub .elementor-widget-container{color:var(--texto-2);max-width:52ch;margin-inline:auto}
.oyg-egv-player{width:100%;max-width:340px;margin-inline:auto}
.oyg-egv-player .elementor-wrapper{border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(33,48,36,.18)}
.oyg-egv-player video{aspect-ratio:9/16;width:100%;height:auto;display:block;object-fit:cover;background:#000}
.oyg-egv-cap{margin-top:14px}
.oyg-egv-name{font-weight:600;color:var(--bosque);margin:0;line-height:1.25}
.oyg-egv-prog{color:var(--texto-2);font-size:.94rem;margin:2px 0 0}
@media(max-width:600px){.oyg-egv-player{max-width:300px}}
/* ===== Mega Menú nativo de la cabecera (widget mega-menu) ===== */
.oyg-mm .e-n-menu-heading{display:flex;flex-wrap:nowrap;gap:20px;align-items:center;justify-content:flex-start;background:transparent;border:0}
.oyg-mm .e-n-menu-title-text{white-space:nowrap}
.oyg-mm .e-n-menu-title{background:transparent}
.oyg-mm .e-n-menu-title-container{padding:6px 0;gap:6px;background:transparent}
.oyg-mm .e-n-menu-title-text{font-family:var(--font);font-weight:600;font-size:13px;letter-spacing:.01em;color:var(--crema);text-transform:none}
/* Logo de la cabecera un poco mas pequeno, para que el menu quepa holgado.
Clase repetida para ganar al ancho que Elementor pone por el id del widget. */
.oyg-brand img{max-width:190px !important;width:auto !important;height:auto}
/* Badge del hero como PILDORA, con el color de cada tipologia. El texto va
DIRECTO en .oyg-fp-badge (sin