/* ------------------------------------------------------------------
   EL CATÁLOGO DE CURSOS
   ------------------------------------------------------------------
   Antonio, en orden: «estamos vendiendo acá» → «poco refinado, poco
   Apple» → «las píldoras quedaron mal» → «los menús deberían poder ser
   plegables: seguridad, especialización, desarrollo, y dentro de
   desarrollo las áreas».

   Las decisiones que quedaron, y por qué:

   · Sin etiquetas con fondo. Tres recuadros grises al mismo volumen
     que el título hacen que no se lea ninguno. Los datos son una línea
     tranquila; manda el nombre del curso.
   · Un solo naranjo por tarjeta —la franquicia SENCE— y un solo azul
     —la acción—. Cuando todo resalta, nada resalta.
   · La acción va escrita con su flecha, no en un bloque de color:
     37 botones naranjos en una grilla son una alarma.
   · Plegable de verdad, con <details> del navegador: sin JavaScript,
     funciona con teclado y el navegador se encarga de abrir y cerrar.

   Todo cuelga de .curso*, que solo existe en el Catálogo. Los colores
   salen de style.css; acá no hay ninguno inventado.

   Ojo con la especificidad: ficha.css pinta los botones del portal con
   selectores que empiezan en #portal. Por eso la acción de la tarjeta
   también se escribe desde #portal — si no, gana el botón naranjo.
   ------------------------------------------------------------------ */

/* ---------- Las familias y las áreas, plegables ---------- */
.curso-familia{border-bottom:1px solid var(--line)}
.curso-familia:first-of-type{border-top:1px solid var(--line)}

.curso-familia>summary,
.curso-area>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;gap:12px;
  color:var(--ink);
}
.curso-familia>summary::-webkit-details-marker,
.curso-area>summary::-webkit-details-marker{display:none}
.curso-familia>summary:focus-visible,
.curso-area>summary:focus-visible{outline:3px solid #cc9d74;outline-offset:3px;border-radius:8px}

.curso-familia>summary{
  padding:20px 2px;font-size:18px;font-weight:600;letter-spacing:-.3px;
}
.curso-area>summary{
  padding:14px 2px;font-size:15px;font-weight:500;letter-spacing:-.1px;
  color:#3c434e;
}
.curso-familia>summary b,
.curso-area>summary b{font-size:13px;font-weight:400;color:var(--muted)}

/* La flechita: un cuadrado girado, sin imágenes ni tipografías extra. */
.curso-familia>summary::after,
.curso-area>summary::after{
  content:"";margin-left:auto;align-self:center;
  width:7px;height:7px;
  border-right:1.5px solid #9aa2ad;border-bottom:1.5px solid #9aa2ad;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.curso-familia[open]>summary::after,
.curso-area[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

.curso-cuerpo{padding:4px 0 26px}
.curso-area{border-top:1px solid #eef0f3}
.curso-area .grid{padding:2px 0 22px}

/* Tres columnas cuando la pantalla da, una en el teléfono. */
.curso-familia .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ---------- La tarjeta ---------- */
.card.curso{
  display:flex;flex-direction:column;
  padding:24px 24px 20px;margin:0;
  border-radius:16px;border-color:#e7e9ec;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.card.curso:hover{
  border-color:#dadde1;
  box-shadow:0 6px 20px rgba(29,29,31,.06);
}

.card.curso h2{
  margin:0;font-size:19px;line-height:1.3;font-weight:600;
  letter-spacing:-.35px;color:var(--ink);
}

/* Los datos duros: una línea, sin recuadros. */
.curso-meta{
  margin:8px 0 0;font-size:13px;line-height:1.5;
  color:var(--muted);font-weight:400;
}

.curso-letra{
  margin:12px 0 0;font-size:13.5px;line-height:1.55;color:#5d6472;
}

/* La franquicia: el único naranjo de la tarjeta, y en voz baja. */
.curso-sence{
  display:flex;align-items:center;gap:8px;
  margin:14px 0 0;font-size:12.5px;color:#8a6234;
}
.curso-sence::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);flex:none;
}

/* La acción, escrita. Desde #portal para ganarle a ficha.css. */
.curso-pie{margin-top:auto;padding-top:20px}
#portal .card.curso .curso-cta,
.card.curso .curso-cta{
  background:none;background-color:transparent;border:0;padding:0;
  border-radius:0;min-height:0;height:auto;
  color:var(--orange);font-weight:600;font-size:14.5px;line-height:1.5;
  display:inline-flex;align-items:center;gap:7px;
}
/* La flecha en azul: el naranjo llama y el azul indica hacia dónde. */
.card.curso .curso-cta span{
  transition:transform .18s ease;display:inline-block;color:var(--blue);
}
.card.curso .curso-cta:hover{filter:none;color:#c0722f;background:none}
.card.curso:hover .curso-cta span{transform:translateX(3px)}

/* ---------- La tarjeta de cierre ---------- */
.card.curso-ayuda{
  margin-top:38px;padding:34px;
  border-radius:16px;border-color:transparent;
  background:#f0f2f5;text-align:center;
}
.card.curso-ayuda h2{
  margin:0;font-size:21px;font-weight:600;letter-spacing:-.4px;color:var(--ink);
}
.card.curso-ayuda p{margin:8px auto 0;max-width:460px;font-size:14.5px}
.curso-ayuda-botones{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px;
}
.curso-ayuda-botones .button{font-size:14px;padding:10px 20px}
.curso-ayuda .secondary{border-color:#d9dde2}

@media(max-width:700px){
  .card.curso{padding:22px 20px 18px}
  .curso-familia>summary{padding:17px 2px;font-size:17px}
  .card.curso-ayuda{padding:26px 22px}
  .curso-ayuda-botones .button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .card.curso,.card.curso .curso-cta span,
  .curso-familia>summary::after,.curso-area>summary::after{transition:none}
  .card.curso:hover .curso-cta span{transform:none}
}