/* ============================================================
   ESCUELA FEP — Layout & páginas (home.css)
   Mobile-first. Extiende branding.css.
   ============================================================ */

/* ---- Reglas de motion / focus ---- */
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px;border-radius:6px}
img{max-width:100%;height:auto;display:block}
ul{padding-left:1.1em}

/* ---- Utilidades ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hide-mobile{display:none}
.show-mobile{display:initial}

/* Botón ancho útil en tarjetas */
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:.55em 1em;font-size:.92rem}
.btn{min-height:44px}     /* tocable */

/* ---- TOPBAR (una sola línea) ---- */
.topbar{background:var(--carbon);color:#e7e9ee;font-size:.85rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 22px;white-space:nowrap;overflow:hidden}
.topbar a{color:#fff}
.topbar .tb-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-right{display:flex;gap:16px;align-items:center;min-width:0;flex-shrink:1;overflow:hidden}
.topbar .tb-sep{color:#5a6070}
@media(max-width:720px){
  .topbar .tb-extra{display:none}
  .topbar .container{font-size:.8rem}
}

/* ---- HEADER ---- */
.site-header{position:sticky;top:0;background:#fff;z-index:30;border-bottom:3px solid var(--rojo)}
.header-row{display:flex;align-items:center;gap:16px;padding:12px 0;flex-wrap:nowrap;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;white-space:nowrap;min-width:0}
.brand img{height:46px;width:auto;flex:none}
.brand .bn{font-family:var(--font-head);font-weight:800;font-size:1.2rem;color:var(--negro);line-height:1.05}
.brand .bn small{display:block;font-family:var(--font-body);font-weight:500;font-size:.7rem;color:var(--gris-500);letter-spacing:.02em;margin-top:2px}

/* Nav escritorio (oculto hasta breakpoint) */
.nav-main{display:none;flex:1 1 auto;justify-content:center;align-items:center;gap:6px;min-width:0}
.nav-main a{font-family:var(--font-head);font-weight:600;color:var(--negro);font-size:.95rem;padding:8px 10px;border-radius:6px;white-space:nowrap;transition:color .15s ease, background .15s ease}
.nav-main a:hover{color:var(--rojo);text-decoration:none;background:var(--rojo-100)}
.nav-main a.active{color:var(--rojo)}

/* Dropdown "Formación" (accesible) */
.nav-main .nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-main .nav-dropdown > .nav-toggle{
  font-family:var(--font-head);font-weight:600;color:var(--negro);font-size:.95rem;
  padding:8px 10px;border-radius:6px;background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;transition:color .15s ease, background .15s ease;
  font:inherit
}
.nav-main .nav-dropdown > .nav-toggle:hover,
.nav-main .nav-dropdown > .nav-toggle[aria-expanded="true"]{color:var(--rojo);background:var(--rojo-100)}
.nav-main .nav-dropdown > .nav-toggle .caret{
  width:.6em;height:.6em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .18s ease
}
.nav-main .nav-dropdown > .nav-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg);margin-top:2px}

.nav-main .nav-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio);
  box-shadow:var(--sombra-lg);padding:8px;margin:0;list-style:none;
  display:none;flex-direction:column;gap:2px;z-index:50
}
.nav-main .nav-dropdown[data-open="true"] .nav-menu{display:flex}
.nav-main .nav-menu a{
  display:block;padding:9px 12px;border-radius:6px;font-size:.92rem;color:var(--negro);
  font-family:var(--font-head);font-weight:600
}
.nav-main .nav-menu a:hover,
.nav-main .nav-menu a:focus-visible{background:var(--rojo-100);color:var(--rojo-700);text-decoration:none}
.nav-main .nav-menu a.active{color:var(--rojo);background:var(--rojo-100)}
.nav-main .nav-dropdown > .nav-toggle.active{color:var(--rojo)}

.header-cta{display:flex;gap:10px;align-items:center;flex:0 0 auto;margin-left:auto}
.header-cta .btn{padding:.6em 1.1em;font-size:.92rem}

/* WhatsApp ICONO compacto en header (sin texto) */
.btn-wsp-icon{
  width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#25D366;color:#06351b;border:0;font-size:1.25rem;line-height:1;
  text-decoration:none;transition:filter .15s ease, transform .15s ease
}
.btn-wsp-icon:hover{filter:brightness(.95);transform:translateY(-1px);text-decoration:none}
.btn-wsp-icon svg{width:22px;height:22px;display:block;fill:currentColor}
/* Teléfono ICONO compacto en header (sin texto) */
.btn-tel-icon{
  width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--negro);color:#fff;border:0;font-size:1.25rem;line-height:1;
  text-decoration:none;transition:filter .15s ease, transform .15s ease
}
.btn-tel-icon:hover{filter:brightness(1.5);transform:translateY(-1px);text-decoration:none}
.btn-tel-icon svg{width:20px;height:20px;display:block;fill:currentColor}

/* Hamburguesa */
.hamb{appearance:none;background:transparent;border:2px solid var(--negro);width:46px;height:44px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--negro)}
.hamb:hover{background:var(--negro);color:#fff}
.hamb span{position:relative;display:block;width:20px;height:2px;background:currentColor}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:.2s}
.hamb span::before{top:-6px}
.hamb span::after{top:6px}
.hamb[aria-expanded="true"] span{background:transparent}
.hamb[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamb[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Panel móvil */
.mobile-panel{
  position:fixed;inset:0 0 0 0;background:rgba(18,18,18,.55);z-index:40;
  display:none;opacity:0;transition:opacity .2s
}
.mobile-panel[aria-hidden="false"]{display:block;opacity:1}
.mobile-panel .panel-inner{
  position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:#fff;padding:22px;overflow-y:auto;
  box-shadow:-12px 0 28px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform .25s ease
}
.mobile-panel[aria-hidden="false"] .panel-inner{transform:translateX(0)}
.mobile-panel .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.mobile-panel .panel-close{appearance:none;background:transparent;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--negro);width:44px;height:44px}
.mobile-panel nav a{display:block;font-family:var(--font-head);font-weight:600;color:var(--negro);padding:14px 4px;border-bottom:1px solid var(--gris-300);font-size:1.05rem}
.mobile-panel nav a:hover{color:var(--rojo);text-decoration:none}
.mobile-panel .panel-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* Breakpoint principal: hamburguesa hasta 1023px, nav escritorio a partir de 1024px.
   Con sólo 4 elementos de nav (3 enlaces + 1 dropdown "Formación") y CTAs compactos
   (icono WhatsApp + botón Inscríbete) el header cabe holgado en el container 1140px. */
@media(min-width:1024px){
  .nav-main{display:flex}
  .hamb{display:none}
  .nav-main a,
  .nav-main .nav-dropdown > .nav-toggle{font-size:.92rem;padding:8px 10px}
  .header-cta{gap:10px}
  .header-cta .btn{padding:.55em .95em;font-size:.88rem;min-height:40px}
  .brand .bn{font-size:1rem}
  .brand .bn small{font-size:.62rem}
  .brand img{height:38px}
  .header-row{padding:10px 0;gap:14px}
}
@media(min-width:1200px){
  .nav-main{gap:10px}
  .nav-main a,
  .nav-main .nav-dropdown > .nav-toggle{font-size:.95rem;padding:8px 12px}
  .header-cta .btn{padding:.58em 1.05em;font-size:.92rem;min-height:42px}
  .brand .bn{font-size:1.15rem}
  .brand .bn small{font-size:.66rem}
  .brand img{height:42px}
}
@media(min-width:1440px){
  .nav-main{gap:14px}
  .nav-main a,
  .nav-main .nav-dropdown > .nav-toggle{font-size:1rem;padding:9px 14px}
  .header-cta .btn{padding:.6em 1.15em;font-size:.95rem;min-height:44px}
  .brand .bn{font-size:1.25rem}
  .brand img{height:46px}
}
@media(max-width:560px){
  .header-cta .btn-primario{display:none}      /* deja sólo el icono WhatsApp en mobile (la barra inferior cubre lo demás) */
  .brand .bn{font-size:1.05rem}
  .brand .bn small{font-size:.62rem}
  .brand img{height:36px}
  .brand{gap:8px}
  .header-row{gap:8px}
}

/* ---- HERO ---- */
.hero{background:linear-gradient(160deg,#fff 55%,#fdecec);padding:30px 0 26px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.hero h1{margin-top:.2em}
.hero .lead{font-size:1.1rem;color:var(--gris-700);max-width:600px}
/* Hero compacto sin imagen (CRO: cursos visibles antes) */
.hero--compact .hero-copy{max-width:760px;margin:0 auto;text-align:center}
.hero--compact .hero-copy .lead{margin-left:auto;margin-right:auto}
.hero--compact .cta-row{justify-content:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.cta-row .btn{min-width:0}

.hero-photo{
  aspect-ratio:4/3;width:100%;border-radius:var(--radio-lg);overflow:hidden;
  background:linear-gradient(160deg,var(--gris-100),#e6e8ee);
  display:flex;align-items:center;justify-content:center;color:var(--gris-500);
  font-family:var(--font-head);font-size:.9rem;text-align:center;padding:18px;border:1px solid var(--gris-300);
  box-shadow:var(--sombra-lg)
}
.hero-photo span{opacity:.75}

/* En movil ocultamos la foto del hero (el texto y los CTA van primero) */
@media(max-width:899px){
  .hero-photo{display:none}
}

@media(min-width:900px){
  .hero{padding:42px 0 36px}
  .hero-grid{grid-template-columns:1.05fr .95fr}
}
.hero-urgencia{margin:.55rem 0 0;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.95rem}
.hero-urgencia .hu-sep{color:var(--gris-700);font-weight:600}

/* ---- TRUST BAR ---- */
.trust{background:var(--negro);color:#fff}
.trust .container{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 22px;text-align:center}
.trust b{font-family:var(--font-head);font-size:1.35rem;display:block;color:#fff;line-height:1.1}
.trust span{font-size:.82rem;color:#c9cdd6;display:block;margin-top:2px}
@media(min-width:760px){
  .trust .container{grid-template-columns:repeat(4,1fr)}
}

/* ---- Sections ---- */
.section-head{text-align:center;max-width:680px;margin:0 auto 28px}
.section-head h2{margin-top:.1em}
.section-alt{background:var(--gris-100)}

/* ---- Grids ---- */
.grid-cards{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid-cards{grid-template-columns:repeat(4,1fr)}}

.grid-serv{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.grid-serv{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-serv{grid-template-columns:repeat(4,1fr)}}

.why-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.why-grid{grid-template-columns:repeat(4,1fr)}}

/* ---- Card de curso ---- */
.card{display:flex;flex-direction:column}
.card-img{
  aspect-ratio:16/10;background:linear-gradient(135deg,var(--gris-100) 0%,#e9eaee 100%);
  display:flex;align-items:center;justify-content:center;color:var(--gris-500);font-size:.85rem;
  font-family:var(--font-head);position:relative
}
.card-img::after{
  content:"foto";position:absolute;right:10px;bottom:8px;background:#fff;color:var(--gris-500);
  border:1px solid var(--gris-300);border-radius:6px;padding:2px 8px;font-size:.72rem;letter-spacing:.04em
}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:1.05rem;margin:.1em 0 .15em}
.card-body p.muted{font-size:.92rem;margin:0 0 .3em}
.card-body .card-meta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding-top:8px}

/* ---- Badges de estado ---- */
.badge{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.72rem;
  padding:.3em .7em;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.badge-gratis{background:var(--rojo-100);color:var(--rojo-700)}
.badge-abierto{background:#e6f4ea;color:#1b5e20}
.badge-ultimas{background:var(--rojo);color:#fff}
.badge-carnet{background:#111;color:#fff}
.badge-neutral{background:var(--gris-100);color:var(--gris-700);border:1px solid var(--gris-300)}

/* ---- Servicios cards ---- */
.serv-card{background:#fff;border-radius:var(--radio-lg);padding:22px;border:1px solid var(--gris-300);box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:6px;transition:.2s}
.serv-card:hover{transform:translateY(-3px);box-shadow:var(--sombra-lg)}
.serv-card .ic{width:46px;height:46px;border-radius:12px;background:var(--rojo-100);color:var(--rojo-700);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;font-family:var(--font-head)}
.serv-card h3{font-size:1.08rem;margin:.4em 0 .2em}
.serv-card p{color:var(--gris-700);font-size:.95rem;margin-bottom:.5em}
.serv-card a.more{font-family:var(--font-head);font-weight:700;color:var(--rojo-700);margin-top:auto}
.serv-card a.more:hover{color:var(--rojo)}

/* ---- Why item ---- */
.why-item{padding:14px}
.why-item .ic{width:44px;height:44px;border-radius:12px;background:var(--negro);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-family:var(--font-head);font-weight:800}
.why-item h4{font-family:var(--font-head);margin:.6em 0 .2em;font-size:1.05rem}
.why-item p{color:var(--gris-700);font-size:.95rem;margin:0}

/* ---- CTA Band ---- */
.cta-band{background:var(--rojo);color:#fff;text-align:center;padding:46px 0}
.cta-band h2{color:#fff}
.cta-band p{max-width:560px;margin:0 auto 22px;color:#fff;opacity:.95}
.cta-band .btn-on-red{background:#fff;color:var(--rojo);border-color:#fff}
.cta-band .btn-on-red:hover{background:var(--negro);color:#fff;border-color:var(--negro)}
.cta-band .btn-outline-on-red{background:transparent;color:#fff;border-color:#fff}
.cta-band .btn-outline-on-red:hover{background:#fff;color:var(--rojo)}

/* ---- Footer ---- */
.site-footer{background:var(--negro);color:#cfd2d8;padding:44px 0 24px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.foot-grid{grid-template-columns:1.3fr 1fr 1.3fr .9fr}}
.site-footer h4{color:#fff;font-family:var(--font-head);margin:0 0 12px;font-size:1rem;letter-spacing:.02em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin:.4em 0}
.site-footer a{color:#fff}
.site-footer a:hover{color:var(--rojo-100)}
.site-footer p{color:#cfd2d8;margin:.3em 0}

.contact-block{display:flex;flex-direction:column;gap:14px}
.contact-block .sede{padding-left:14px;border-left:3px solid var(--rojo)}
.contact-block .sede b{display:block;color:#fff;font-family:var(--font-head);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.contact-block .sede span{color:#cfd2d8;font-size:.92rem;line-height:1.5}
.contact-block .lines a{display:inline-block;margin-right:10px}

.footer-bottom{border-top:1px solid #2a2c33;margin-top:28px;padding-top:16px;color:#9aa0ab;font-size:.84rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---- Barra CTA fija MÓVIL ---- */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--gris-300);
  box-shadow:0 -8px 24px rgba(18,18,18,.12);padding:8px 10px env(safe-area-inset-bottom);
  display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.bottom-bar .btn{padding:.7em 1em;font-size:.95rem}
@media(min-width:1024px){.bottom-bar{display:none}}
body.has-bottom-bar{padding-bottom:74px}
@media(min-width:1080px){body.has-bottom-bar{padding-bottom:0}}

/* ---- Breadcrumb ---- */
.breadcrumb{font-size:.88rem;color:var(--gris-500);padding:14px 0}
.breadcrumb a{color:var(--gris-700);font-weight:500}
.breadcrumb a:hover{color:var(--rojo)}
.breadcrumb .sep{margin:0 8px;color:var(--gris-300)}

/* ---- Page intro ---- */
.page-head{padding:18px 0 8px}
/* Cuando .page-head se aplica al mismo nodo que .container, conservamos el padding
   horizontal del container (22px) para que el contenido NO se pegue al borde
   izquierdo del bloque. */
.container.page-head{padding-left:22px;padding-right:22px;padding-top:18px;padding-bottom:8px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:.2em}
.page-head .lead{color:var(--gris-700);max-width:780px;font-size:1.05rem}

/* ---- Hero de landing de curso: texto a la izquierda, imagen del curso a la derecha ---- */
.page-head.course-hero .ch-img{margin-top:18px}
.page-head.course-hero .ch-img img{width:100%;height:auto;border-radius:18px;object-fit:cover;box-shadow:0 18px 40px -18px rgba(18,18,18,.4);display:block}
@media(min-width:880px){
  .page-head.course-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);column-gap:44px;align-items:start}
  .page-head.course-hero > .ch-img{grid-column:2;grid-row:1 / span 60;align-self:center;margin-top:0}
  .page-head.course-hero > :not(.ch-img){grid-column:1}
  .page-head.course-hero .lead{max-width:none}
}

/* ---- Nombre de curso clicable (tabla y tarjetas) que abre su landing ---- */
.curso-link{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.curso-link:hover,.curso-link:focus-visible{color:var(--rojo);border-bottom-color:var(--rojo)}
td.col-curso .curso-link{font-weight:600}

/* ============================================================
   TABLA RESPONSIVE (desktop tabla, mobile tarjetas)
   ============================================================ */
.table-block{margin:32px 0 40px}
/* Cuando .table-block se aplica al mismo nodo que .container, restauramos
   margin-inline:auto para que el bloque siga centrado (la shorthand previa
   estaba haciendo margin-left:0; margin-right:0). */
.container.table-block{margin-left:auto;margin-right:auto;margin-top:32px;margin-bottom:40px;padding-left:22px;padding-right:22px}
.table-block .table-title{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.table-block h2{font-size:1.3rem;margin:0}
.table-block .table-sub{color:var(--gris-500);font-size:.92rem}

.table-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search-input{
  position:relative;flex:1;min-width:220px;max-width:420px
}
.search-input input{
  width:100%;padding:.7em 1em .7em 2.4em;border:1.5px solid var(--gris-300);border-radius:10px;
  font-family:var(--font-body);font-size:.95rem;background:#fff;transition:.15s
}
.search-input input:focus{border-color:var(--rojo);outline:none;box-shadow:0 0 0 3px var(--rojo-100)}
.search-input::before{content:"\1F50D";position:absolute;left:.7em;top:50%;transform:translateY(-50%);color:var(--gris-500);font-size:1rem}
.table-toolbar .count{color:var(--gris-500);font-size:.88rem;margin-left:auto}

/* Tabla base */
.table-wrap{background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra)}
table.cursos{width:100%;border-collapse:collapse;font-size:.95rem}
table.cursos thead{background:var(--negro);color:#fff}
table.cursos thead th{
  text-align:left;padding:12px 14px;font-family:var(--font-head);font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:0;white-space:nowrap
}
table.cursos thead th.sortable{cursor:pointer;user-select:none}
table.cursos thead th.sortable::after{content:"\2195";margin-left:6px;opacity:.55;font-size:.85rem}
table.cursos thead th.sort-asc::after{content:"\2191";opacity:1}
table.cursos thead th.sort-desc::after{content:"\2193";opacity:1}
table.cursos tbody tr{border-top:1px solid var(--gris-300);transition:background .15s}
table.cursos tbody tr:hover{background:var(--gris-100)}
table.cursos tbody tr.is-hidden{display:none}
table.cursos td{padding:13px 14px;vertical-align:middle;color:var(--negro)}
table.cursos td.col-curso{font-weight:600}
table.cursos td.col-curso .desc{display:block;font-weight:400;color:var(--gris-500);font-size:.85rem;margin-top:2px}
table.cursos td.col-accion{text-align:right;white-space:nowrap}
.table-empty{padding:26px;text-align:center;color:var(--gris-500);font-size:.95rem}
.table-foot{padding:12px 16px;background:var(--gris-100);color:var(--gris-700);font-size:.88rem;border-top:1px solid var(--gris-300)}

/* MÓVIL: cada fila se vuelve tarjeta */
@media(max-width:760px){
  .table-wrap{border:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
  table.cursos{font-size:.94rem;display:block}
  table.cursos thead{display:none}
  table.cursos tbody{display:block}
  table.cursos tbody tr{
    display:block;background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio-lg);
    box-shadow:var(--sombra);padding:14px 16px;margin-bottom:14px
  }
  table.cursos tbody tr:hover{background:#fff}
  table.cursos td{
    display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
    padding:8px 0;border:0;border-bottom:1px dashed var(--gris-300)
  }
  table.cursos td:last-child{border-bottom:0;padding-top:12px}
  table.cursos td::before{
    content:attr(data-label);font-family:var(--font-head);font-weight:700;font-size:.72rem;
    color:var(--gris-500);text-transform:uppercase;letter-spacing:.04em;flex:none;max-width:42%;padding-top:2px
  }
  table.cursos td.col-curso{display:block;border-bottom:1px solid var(--gris-300);padding-bottom:10px;margin-bottom:6px}
  table.cursos td.col-curso::before{display:block;margin-bottom:4px}
  table.cursos td.col-curso .desc{margin-top:4px}
  table.cursos td.col-accion{justify-content:stretch}
  table.cursos td.col-accion .btn{width:100%}
  .table-foot{background:transparent;padding:8px 4px 0}
}

/* ---- Scroll-reveal ---- */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
html.js .reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
  .card:hover,.serv-card:hover{transform:none}
}

/* ---- Mejoras visuales misc ---- */
.cta-band .container{padding-left:22px;padding-right:22px}
.section{padding:46px 0;border-top:1px solid var(--gris-300)}
@media(max-width:560px){.section{padding:38px 0}}

/* Iconos de header (svg fallback con texto si falta) */
.icon{width:1.05em;height:1.05em;display:inline-block;vertical-align:-2px}

/* Toolbar minor */
.btn.w-full{width:100%}

/* ============================================================
   AMPLIACION (paginas internas)
   ============================================================ */

/* ---- Imagen real con fallback (sustituye .card-img placeholder) ---- */
.card-img.has-img{
  background:linear-gradient(135deg,var(--gris-100) 0%,#e9eaee 100%);
  overflow:hidden;position:relative
}
.card-img.has-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block
}
.card-img.has-img::after{content:none}

.hero-photo.has-img{padding:0;background:none}
.hero-photo.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo.has-img span{display:none}

/* ---- Serv-card con foto (home: teleformacion, alquiler, empleo) ---- */
.serv-card .serv-photo{
  aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;
  border:1px solid var(--gris-300);background:linear-gradient(135deg,var(--gris-100),#e9eaee);
  margin-bottom:10px;position:relative
}
.serv-card .serv-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  /* Zoom + reencuadre para recortar la marca/estrella IA de la esquina inferior derecha */
  transform:scale(1.12);
  transform-origin:left top;
  object-position:left top
}
.serv-card .serv-photo img.is-broken{display:none}

/* ---- Bloque texto centrado (quienes-somos sin foto) ---- */
.text-block{max-width:780px;margin-left:auto;margin-right:auto}
.text-block .eyebrow{display:inline-block}
.text-block .norm-list{margin-top:14px}
.text-block .check-list{max-width:none}

/* ---- Lista con icono check (privados, teleformacion, alquiler) ---- */
.check-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.check-list li{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:10px 12px;background:#fff;border:1px solid var(--gris-300);border-radius:10px
}
.check-list li::before{
  content:"\2713";display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--rojo-100);color:var(--rojo-700);
  font-weight:800;font-family:var(--font-head);font-size:.85rem;flex:none
}

/* ---- 2 columnas texto + imagen (quienes-somos, teleformacion intro) ---- */
.split-2{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){.split-2{grid-template-columns:1.05fr .95fr;gap:48px}}
.split-2.alt{grid-template-columns:1fr}
@media(min-width:900px){.split-2.alt{grid-template-columns:.95fr 1.05fr}}
.split-2 .split-photo{
  aspect-ratio:4/3;border-radius:var(--radio-lg);overflow:hidden;border:1px solid var(--gris-300);
  background:linear-gradient(135deg,var(--gris-100),#e9eaee);box-shadow:var(--sombra-lg);
  position:relative
}
.split-2 .split-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.split-2 .split-photo .ph-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--gris-500);font-family:var(--font-head);font-size:.9rem;text-align:center;padding:18px
}

/* ---- Bloques de empleo / programas (3 cards) ---- */
.prog-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
@media(min-width:780px){.prog-grid{grid-template-columns:repeat(3,1fr)}}
.prog-card{
  background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio-lg);
  padding:24px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:8px
}
.prog-card .prog-tag{
  display:inline-block;background:var(--negro);color:#fff;font-family:var(--font-head);
  font-weight:800;font-size:.7rem;padding:.35em .8em;border-radius:6px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:4px;align-self:flex-start
}
.prog-card h3{margin:.1em 0 .2em;font-size:1.1rem}
.prog-card p{color:var(--gris-700);font-size:.95rem;margin:.2em 0}
.prog-card .prog-cta{margin-top:auto;padding-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* ---- Valores (cards pequenas tipo why) ---- */
.values-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.values-grid{grid-template-columns:repeat(3,1fr)}}
.value-item{
  background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio-lg);
  padding:22px;box-shadow:var(--sombra)
}
.value-item .vi-ic{
  width:46px;height:46px;border-radius:12px;background:var(--rojo-100);color:var(--rojo-700);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;
  font-family:var(--font-head);margin-bottom:10px
}
.value-item h4{font-family:var(--font-head);margin:.2em 0 .25em;font-size:1.05rem}
.value-item p{color:var(--gris-700);font-size:.95rem;margin:0}

/* ---- Mapa placeholder + sedes ---- */
.map-placeholder{
  width:100%;aspect-ratio:16/9;background:
    linear-gradient(135deg,#eef0f4,#dfe2e8);
  border:1px solid var(--gris-300);border-radius:var(--radio-lg);
  display:flex;align-items:center;justify-content:center;color:var(--gris-500);
  font-family:var(--font-head);font-size:.95rem;box-shadow:var(--sombra);position:relative;overflow:hidden
}
.map-placeholder::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 2px,transparent 2px 14px),
    repeating-linear-gradient(-45deg,rgba(225,6,0,.05) 0 2px,transparent 2px 16px)
}
.map-placeholder span{position:relative;z-index:1;background:#fff;padding:8px 14px;border-radius:8px;border:1px solid var(--gris-300)}

.sedes-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:780px){.sedes-grid{grid-template-columns:1fr 1fr}}
.sede-card{
  background:#fff;border:1px solid var(--gris-300);border-left:4px solid var(--rojo);
  border-radius:var(--radio-lg);padding:22px;box-shadow:var(--sombra)
}
.sede-card h3{margin:.1em 0 .3em;font-size:1.1rem}
.sede-card p{margin:.2em 0;color:var(--gris-700);font-size:.95rem}
.sede-card .sede-tel{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.sede-card .sede-tel .btn{padding:.55em 1em;font-size:.9rem}

/* ---- Formulario contacto ---- */
.form-block{background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio-lg);box-shadow:var(--sombra);padding:24px}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row.full{grid-column:1/-1}
.form-row label{font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--negro)}
.form-row input,
.form-row textarea{
  width:100%;padding:.75em 1em;border:1.5px solid var(--gris-300);border-radius:10px;
  font-family:var(--font-body);font-size:1rem;background:#fff;transition:.15s;color:var(--negro);min-height:44px
}
.form-row textarea{min-height:140px;resize:vertical}
.form-row input:focus,
.form-row textarea:focus{border-color:var(--rojo);outline:none;box-shadow:0 0 0 3px var(--rojo-100)}
.form-row .help{font-size:.82rem;color:var(--gris-500)}

.form-checkbox{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.92rem;color:var(--gris-700);background:var(--gris-100);padding:12px;border-radius:10px}
.form-checkbox input{margin-top:3px;width:18px;height:18px;accent-color:var(--rojo)}
.form-checkbox a{color:var(--rojo-700);text-decoration:underline}

.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---- Banda CTA en blanco (alternativa a cta-band roja) ---- */
.info-band{
  background:var(--gris-100);border-top:1px solid var(--gris-300);border-bottom:1px solid var(--gris-300);
  padding:34px 0;text-align:center
}
.info-band h2{margin-top:.1em}
.info-band p{max-width:640px;margin:0 auto 18px;color:var(--gris-700)}

/* ---- Pie de tarjeta carnet con 2 botones (inscripcion + WhatsApp) ---- */
.cell-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.cell-actions .btn{min-width:170px;justify-content:center}
@media(max-width:760px){
  .cell-actions{align-items:stretch;width:100%}
  .cell-actions .btn{width:100%;min-width:0}
}

/* === Feedback 2026-05-31: botones de tabla 50/50 en movil === */
@media(max-width:760px){
  table.cursos td.col-accion .cell-actions{width:100%}
  table.cursos td.col-accion .cell-actions > .btn-primario{width:100%}
  table.cursos td.col-accion .btn-split{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;margin-top:6px;max-width:none;margin-left:0}
  table.cursos td.col-accion .btn-split > .btn{width:100%;min-width:0;font-size:.82rem}
}
/* === En movil/tablet (con hamburguesa): logo grande y sin iconos WhatsApp/tel en el header === */
@media(max-width:1023px){
  .header-cta .btn-wsp-icon,
  .header-cta .btn-tel-icon{display:none}
  .brand-logo{height:44px}
}

/* ---- Page-head con icono / variantes ---- */
.page-head.with-bg{background:linear-gradient(160deg,#fff 55%,#fdecec);padding-bottom:24px;border-radius:0 0 24px 24px}

/* ---- Pequeno fix header CTA: mostrar Inscríbete en tablets/mobile-grande ---- */
@media(min-width:560px) and (max-width:1023px){
  .header-cta .btn-primario{display:inline-flex}
}
@media(max-width:420px){
  .btn-wsp-icon,.btn-tel-icon{width:42px;height:42px;font-size:1.15rem}
  .btn-wsp-icon svg,.btn-tel-icon svg{width:20px;height:20px}
}

/* ---- Tabla: que la columna accion en PC no rompa filas y deje espacio ---- */
table.cursos td.col-accion .cell-actions{align-items:flex-end}
table.cursos td.col-accion .cell-actions .btn{width:100%}

/* ---- E5: split [Más información | Llamar] dentro de la celda de acción ---- */
table.cursos td.col-accion{white-space:normal}
table.cursos td.col-accion .btn-split{display:flex;gap:6px;margin-top:6px}
table.cursos td.col-accion .btn-split > .btn,
table.cursos td.col-accion .cell-actions .btn-split > .btn{flex:1 1 0;min-width:0;width:auto;white-space:normal;font-size:.82rem;padding:.7em .5em;line-height:1.15;min-height:48px}
/* Botones split (Información/Llamar) más altos también en las tarjetas */
.btn-split > .btn{min-height:46px;padding-top:.62em;padding-bottom:.62em}
table.cursos td.col-accion .cell-actions{align-items:stretch}
table.cursos td.col-accion .cell-actions .btn-split{width:100%}
@media(min-width:761px){
  table.cursos td.col-accion .btn-split{width:100%;max-width:240px;margin-left:auto}
  table.cursos td.col-accion > .btn-primario{display:flex;width:100%;max-width:240px;margin-left:auto;justify-content:center}
}

/* ---- Texto largo (paginas tipo articulo) ---- */
.prose{max-width:780px}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose ul li{margin:.3em 0}

/* ---- Resaltado bullets normas ---- */
.norm-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.norm-list span{
  display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--gris-300);
  border-radius:999px;padding:.35em .9em;font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--negro)
}
.norm-list span::before{content:"\2713";color:var(--rojo);font-weight:800}

/* ============================================================
   FASE C.2 — Logo SVG / cinta sellos / iconos sociales / institucionales
   ============================================================ */

/* ---- Logo SVG en header/footer ---- */
/* El SVG tiene viewBox ~1758x2432 (portrait). Lo encajamos por altura. */
.brand-logo{
  height:46px;width:auto;display:block;flex:none;
  /* Mejora nitidez en pantallas estandar */
  image-rendering:auto;
  -webkit-user-drag:none
}
@media(max-width:560px){
  .brand-logo{height:36px}
}
@media(min-width:1024px) and (max-width:1199px){
  .brand-logo{height:38px}
}
@media(min-width:1200px) and (max-width:1439px){
  .brand-logo{height:42px}
}
@media(min-width:1440px){
  .brand-logo{height:46px}
}
/* Footer: invertir a blanco (asset fuente es negro/rojo, en footer fondo negro) */
.brand-logo-foot{filter:brightness(0) invert(1)}

/* ============================================================
   CINTA GIRATORIA DE SELLOS (marquee)
   ============================================================ */
.acreditaciones{background:#fff;padding:38px 0 44px;border-top:1px solid var(--gris-300);border-bottom:1px solid var(--gris-300)}
.acreditaciones .section-head{margin-bottom:22px}
.acreditaciones .section-head h2{font-size:clamp(1.35rem,2.6vw,1.9rem)}

.marquee{
  position:relative;overflow:hidden;
  /* Fade lateral para que la entrada/salida sea suave */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)
}
.marquee-track{
  display:flex;gap:22px;width:max-content;
  animation:marquee-scroll 38s linear infinite;
  will-change:transform
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

@keyframes marquee-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
}

/* Logo de sello (sin tarjeta — fila elegante de logos de confianza) */
.marquee-track{align-items:center}
.seal-logo{
  flex:0 0 auto;height:100px;width:auto;max-width:none;
  object-fit:contain;display:block;
  opacity:.92;transition:opacity .2s ease, transform .2s ease;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.06))
}
.seal-logo:hover{opacity:1;transform:scale(1.04)}

@media(min-width:1280px){
  .seal-logo{height:110px}
  .marquee-track{gap:56px}
}
@media(max-width:900px){
  .marquee-track{gap:36px}
  .seal-logo{height:88px}
}
@media(max-width:560px){
  .marquee-track{gap:28px}
  .seal-logo{height:72px}
}

/* ============================================================
   BLOQUE INSTITUCIONAL — Financiado/Acreditado por
   ============================================================ */
.inst-block{
  background:#fff;border:1px solid var(--gris-300);border-radius:var(--radio-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start
}
.inst-block .inst-title{
  font-family:var(--font-head);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gris-500);margin:0
}
.inst-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.inst-logo{
  background:#fff;border:1px solid var(--gris-300);border-radius:8px;
  padding:6px 10px;display:flex;align-items:center;justify-content:center;
  height:48px;min-width:120px
}
.inst-logo img{max-height:36px;width:auto;display:block;object-fit:contain}
.inst-logo img.is-broken{display:none}
.inst-logo .placeholder{
  display:none;
  font-family:var(--font-head);font-weight:700;font-size:.75rem;color:var(--gris-700);letter-spacing:.02em
}
.inst-logo img.is-broken + .placeholder{display:inline-block}

/* En footer (fondo negro): invertir borde y placeholder */
.site-footer .inst-block{background:#1a1c20;border-color:#2a2c33}
.site-footer .inst-block .inst-title{color:#9aa0ab}
.site-footer .inst-logo{background:#fff;border-color:#2a2c33}

/* ============================================================
   ICONOS REDES SOCIALES (topbar + footer)
   ============================================================ */

/* Wrapper compartido */
.social-list{display:inline-flex;align-items:center;gap:8px;list-style:none;padding:0;margin:0}
.social-list li{margin:0}
.social-link{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:transparent;
  text-decoration:none;transition:.15s ease;
  flex:none
}
.social-link svg{width:16px;height:16px;display:block;fill:currentColor}
.social-link:hover{background:var(--rojo);color:#fff;text-decoration:none;transform:translateY(-1px)}
.social-link:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

/* En topbar (fondo carbon): icono blanco */
.topbar .social-list{margin-left:8px}
.topbar .social-link{color:#e7e9ee}
.topbar .social-link:hover{background:var(--rojo);color:#fff}

/* En footer (fondo negro): tamano mayor */
.site-footer .social-block{margin-top:14px}
.site-footer .social-block h4{margin-bottom:10px}
.site-footer .social-list{gap:10px}
.site-footer .social-link{
  width:38px;height:38px;background:#1a1c20;border:1px solid #2a2c33;color:#fff
}
.site-footer .social-link svg{width:18px;height:18px}
.site-footer .social-link:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* En topbar muy estrecho: ocultar iconos secundarios */
@media(max-width:720px){
  .topbar .social-list{display:none}
}

/* Foot grid: dejar que el bloque institucional ocupe ancho razonable */
@media(min-width:980px){
  .foot-grid.has-inst{grid-template-columns:1.3fr 1fr 1.3fr .9fr}
}
.site-footer .col-legal-inst{display:flex;flex-direction:column;gap:18px}

/* ============================================================
   E4 — Footer compacto (E4.F1)
   ============================================================ */
.foot-logo-chip{display:inline-flex;align-items:center;background:#fff;padding:7px 12px;border-radius:12px;margin-bottom:12px}
.foot-logo-chip .brand-logo{height:38px;width:auto;display:block;filter:none}
.foot-about{margin:0 0 14px}
.foot-contact{font-style:normal;display:flex;flex-direction:column;gap:10px}
.foot-sede{display:block;line-height:1.35}
.foot-sede b{display:block;color:#fff;font-weight:600}
.foot-cphones{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.foot-cphones a,.foot-sede{font-size:.92rem}

/* foot-links lista limpia (columnas Cursos / Información legal) */
.site-footer .foot-links{list-style:none;padding:0;margin:0}
.site-footer .foot-links li{margin:.4em 0}

/* foot-grid 4 columnas equilibradas en desktop */
@media(min-width:980px){
  .foot-grid{grid-template-columns:1.4fr .9fr 1fr 1.3fr;gap:30px;align-items:start}
}

/* ============================================================
   E6.F1 — Logos institucionales en cursos gratuitos
   ============================================================ */
/* Logos institucionales a los lados del título "Cursos gratuitos" */
.head-logos{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.head-logos h2{margin:0}
.head-logo{height:44px;width:auto;object-fit:contain;flex:0 0 auto}
.head-logo--left{order:-1}
.head-logo--right{order:1}
@media(max-width:640px){
  .head-logos{gap:12px}
  .head-logos h2{flex-basis:100%;order:-1}
  .head-logo{height:30px}
  .head-logo--left,.head-logo--right{order:0}
}
/* Hero compacto de conversión (sin imagen) — los cursos asoman enseguida */
.hero.hero--compact{padding:26px 0 22px}
.hero--compact .container{text-align:center}
.hero--compact h1{margin:.1em auto .25em}
.hero--compact .lead{margin:0 auto;max-width:620px}
.hero--compact .cta-row{justify-content:center}
@media(min-width:768px){ .hero.hero--compact{padding:40px 0 32px} }

/* ============================================================
   E6.F2 — Buscador de cursos (home)
   ============================================================ */
.course-search-band{background:#fff;padding:26px 0 30px;border-bottom:1px solid var(--gris-300)}
.course-search{
  position:relative;max-width:560px;margin:0 auto;padding:0 16px;
}
.course-search #course-search-input{
  width:100%;min-height:48px;padding:.7em 1em .7em 2.6em;
  border:1.5px solid var(--gris-300);border-radius:12px;
  font-family:var(--font-body);font-size:1rem;background:#fff;color:var(--negro);
  transition:.15s;box-sizing:border-box
}
.course-search #course-search-input:focus{
  border-color:var(--rojo);outline:none;box-shadow:0 0 0 3px var(--rojo-100)
}
.course-search::before{
  content:"\1F50D";position:absolute;left:1.6em;top:24px;transform:translateY(-50%);
  color:var(--gris-500);font-size:1.05rem;pointer-events:none;z-index:1
}
.course-search-results{
  position:absolute;top:calc(100% + 6px);left:16px;right:16px;
  background:#fff;border:1px solid var(--gris-300);border-radius:12px;
  box-shadow:0 12px 28px rgba(18,18,18,.14);
  list-style:none;padding:6px;margin:0;z-index:40;
  max-height:420px;overflow-y:auto
}
.course-search-results[hidden]{display:none}
.course-search-results li{margin:0}
.course-search-results a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:8px;color:var(--negro);
  font-family:var(--font-body);font-size:.95rem;text-decoration:none
}
.course-search-results a:hover,
.course-search-results a:focus-visible,
.course-search-results li.is-active a{background:var(--rojo-100);color:var(--rojo-700);text-decoration:none}
.course-search-results .cs-name{flex:1;min-width:0}
.course-search-results .cs-badge{
  display:inline-block;flex:none;font-family:var(--font-head);font-weight:700;
  font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--gris-100);color:var(--gris-700);
  border:1px solid var(--gris-300);border-radius:999px;padding:.25em .7em
}
.course-search-results li.cs-empty a{color:var(--gris-700);font-style:italic}
@media(max-width:560px){
  .course-search{padding:0 12px}
  .course-search-results{left:12px;right:12px}
}