/* ===== G&G Formación — estilos de la parte pública ===== */

:root {
  --azul: #123f6d;
  --azul-osc: #0c2b4c;
  --azul-claro: #1b5b96;
  --verde: #1eb583;
  --verde-osc: #157a74;
  --fondo: #f4f8fb;
  --texto: #1e2a38;
  --gris: #5c6b7c;
  --linea: #e2e9f0;
  --rojo: #d9534f;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(12, 43, 76, 0.08);
  --sombra-hover: 0 10px 32px rgba(12, 43, 76, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El atributo hidden debe poder ocultar cualquier elemento: si no, una
   regla de autor con display (flex, grid…) lo deja visible igualmente. */
[hidden] { display: none !important; }


html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: var(--azul-claro); }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Barra superior ---------- */
.topbar {
  background: var(--azul-osc);
  color: #cfe0ef;
  font-size: 0.85rem;
  padding: 6px 0;
}
.topbar .contenedor {
  display: flex; justify-content: center; align-items: center; gap: 28px;
  flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { text-decoration: underline; }
.ico { vertical-align: -2px; flex: 0 0 auto; }

/* ---------- Cabecera ---------- */
.cabecera {
  background: #fff;
  box-shadow: 0 2px 12px rgba(12, 43, 76, 0.07);
  position: sticky; top: 0; z-index: 50;
}
.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.cabecera .logo img { height: 78px; width: auto; max-width: 100%; }
.cabecera .logo { flex: 0 0 auto; }

/* Logos de Vértice y UCAV con su frase debajo: junto al propio, separados por una
   línea y algo más pequeños para que el logotipo de G&G siga siendo el protagonista */
.colaboradores {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
  margin-right: auto; padding-left: 22px; border-left: 1px solid var(--linea);
}
.colaboradores-logos { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* Cada entidad lleva su propia altura: las marcas apaisadas más bajas y el sello
   de la Comisión de Formación Continuada más alto, para que pesen lo mismo */
.colaboradores img { width: auto; height: 40px; }
.colaboradores .ent-cfc { height: 54px; }
.colaboradores .ent-agrupacion img { height: 33px; }
.colaboradores-frase {
  margin: 0; max-width: 250px; text-align: center;
  font-size: 0.7rem; line-height: 1.25; color: var(--gris); letter-spacing: 0.1px;
}

/* «Miembro de:» encima del logotipo de Agrupación Vértice, como en el original */
.ent-agrupacion { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ent-miembro {
  font-size: 0.7rem; font-weight: 800; line-height: 1;
  color: var(--azul-osc); letter-spacing: 0.2px;
}

.cab-acciones { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.btn-campus {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--azul); color: #fff; border: 2px solid var(--azul);
  padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: background 0.15s ease, transform 0.05s ease;
}
.btn-campus:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
.btn-campus:active { transform: translateY(1px); }
.btn-carrito {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde); color: #fff; border: none; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: background 0.15s ease;
}
.btn-carrito:hover { background: var(--verde-osc); }
.btn-carrito .num {
  background: #fff; color: var(--verde-osc); border-radius: 999px;
  min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; padding: 0 6px;
}

/* ---------- Héroe ---------- */
.heroe {
  background: linear-gradient(120deg, var(--azul-osc) 0%, var(--azul) 55%, var(--verde-osc) 100%);
  color: #fff;
  padding: 72px 0 130px;
  text-align: center;
}
/* Cuando el administrador sube una imagen principal */
.heroe.con-imagen {
  background-size: cover;
  background-position: center;
  padding: 110px 0 150px;
}
/* Sin bloques destacados debajo no hace falta reservar sitio para el solape */
.heroe.sin-bloques { padding-bottom: 72px; }
.heroe.con-imagen.sin-bloques { padding-bottom: 110px; }
.heroe h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.2; margin-bottom: 18px; letter-spacing: -0.5px;
}
.heroe p {
  max-width: 820px; margin: 0 auto 30px; font-size: 1.08rem; color: #dbe8f3;
}
.btn-principal {
  display: inline-block; background: var(--verde); color: #fff;
  padding: 14px 34px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.btn-principal:hover { background: #17a375; transform: translateY(-2px); }

/* ---------- Bloques destacados ---------- */
/* Los bloques se reparten SIEMPRE a todo el ancho, sean los que sean: la portada
   indica cuántos van por fila en --n y cada uno ocupa su parte exacta. Si en la
   última fila sobra alguno, se estira para no dejar hueco. */
.pilares { margin-top: -70px; padding-bottom: 10px; }
.pilares .contenedor, .rejilla-bloques {
  display: flex; flex-wrap: wrap; gap: 22px;
}
.pilar {
  flex: 1 1 calc((100% - 22px * (var(--n, 4) - 1)) / var(--n, 4) - 1px); min-width: 0;
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 28px 24px; text-align: center; overflow: hidden;
  display: flex; flex-direction: column;
}
/* Con foto: rejilla de 2 columnas × 2 filas; normalmente la foto ocupa toda la
   fila de arriba y el texto la de abajo (vertical) */
.pilar.con-foto {
  padding: 0; text-align: left; container-type: inline-size;
  display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr;
}
.pilar.con-foto .pilar-foto { grid-column: 1 / -1; grid-row: 1; }
.pilar.con-foto .pilar-texto { grid-column: 1 / -1; grid-row: 2; padding: 20px 22px 26px; }
/* max-height: si un bloque se estira a lo ancho, la foto se recorta en vez de crecer */
.pilar-foto { margin: 0; aspect-ratio: 4 / 3; max-height: 280px; overflow: hidden; background: #eef2f6; }
/* Un bloque muy ancho (pocos bloques, o el que sobra en la última fila) pasa a
   horizontal: foto a la izquierda y texto a la derecha */
@container (min-width: 560px) {
  .pilar.con-foto .pilar-foto { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; max-height: none; min-height: 200px; }
  .pilar.con-foto .pilar-texto {
    grid-column: 2; grid-row: 1 / -1;
    display: flex; flex-direction: column; justify-content: center; padding: 24px 28px;
  }
  /* En horizontal el botón del banner va junto al texto, no pegado abajo */
  .banner-bloque .pilar-texto .cat-boton { margin-top: 4px; }
}
.pilar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pilar.con-foto:hover .pilar-foto img { transform: scale(1.05); }
.pilar .icono {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-osc) 100%);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.pilar h3, .pilar h2 { color: var(--azul); margin-bottom: 8px; font-size: 1.1rem; }
.pilar p { color: var(--gris); font-size: 0.93rem; }

/* ---------- Tarjetas de categoría (áreas de formación) ---------- */
.rejilla-categorias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px;
}
.tarjeta-categoria {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta-categoria:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(12,43,76,0.16); }
.cat-foto { aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f6; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.tarjeta-categoria:hover .cat-foto img { transform: scale(1.06); }
.cat-cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cat-cuerpo h3 { color: var(--azul); font-size: 1.15rem; line-height: 1.3; }
.cat-num { color: var(--gris); font-size: 0.85rem; margin-bottom: 8px; }
/* Botón «Ver cursos», con el mismo aspecto que el de Campus Virtual; margin-top
   auto lo pega abajo para que quede alineado en todas las tarjetas de la fila */
.cat-boton {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul); color: #fff; border: 2px solid var(--azul);
  padding: 9px 20px; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  transition: background .15s ease, border-color .15s ease;
}
.tarjeta-categoria:hover .cat-boton { background: var(--azul-osc); border-color: var(--azul-osc); }

/* ---------- Cabecera de una categoría ---------- */
.cabecera-categoria {
  background-size: cover; background-position: center; color: #fff;
  padding: 60px 0 54px; text-align: center;
}
.cabecera-categoria h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 12px; }
.cabecera-categoria .cat-desc { max-width: 760px; margin: 0 auto; color: #dbe8f3; }
.cabecera-categoria .cat-cuenta { margin-top: 14px; color: #bcd2e6; font-size: 0.92rem; }
.migas.claro, .migas.claro a { color: #cfe0ef; }
.otras-areas { margin-top: 60px; }
.otras-areas h2 { text-align: center; color: var(--azul); margin-bottom: 24px; font-size: 1.5rem; }

/* ---------- Presentación ---------- */
.presentacion { padding: 64px 0 30px; text-align: center; }
.presentacion h2 {
  color: var(--azul); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px;
}
.presentacion .cuerpo {
  max-width: 860px; margin: 0 auto; color: var(--gris); font-size: 1.02rem;
}
.presentacion .cuerpo p + p { margin-top: 14px; }

/* ---------- Sección cursos ---------- */
.cursos { padding: 40px 0 80px; }
.cursos h2 {
  text-align: center; color: var(--azul);
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px;
}
.cursos .sub { text-align: center; color: var(--gris); margin-bottom: 30px; }

.pestanas {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px;
}
.pestana {
  background: #fff; border: 1.5px solid var(--linea); color: var(--gris);
  padding: 9px 20px; border-radius: 999px; cursor: pointer; font-size: 0.92rem; font-weight: 600;
  transition: all 0.15s ease;
}
.pestana:hover { border-color: var(--verde); color: var(--verde-osc); }
.pestana.activa { background: var(--azul); border-color: var(--azul); color: #fff; }

.rejilla-cursos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px;
}

/* ---------- Tarjeta de curso ---------- */
.tarjeta {
  background: #fff; border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.tarjeta .foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tarjeta .foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta .foto a { display: block; height: 100%; }
.insignia-oferta {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--rojo); color: #fff; font-size: 0.78rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tarjeta .cuerpo-tarjeta { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tarjeta .categoria {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--verde-osc); margin-bottom: 6px;
}
.tarjeta h3 { font-size: 1.02rem; line-height: 1.35; margin-bottom: 10px; flex: 0 0 auto; }
.tarjeta h3 a { color: var(--texto); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--azul-claro); }
.precios { margin-top: auto; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.precio-antes { color: var(--gris); text-decoration: line-through; font-size: 0.95rem; }
.precio { color: var(--azul); font-size: 1.35rem; font-weight: 800; }
.precio.oferta { color: var(--rojo); }
.tarjeta .acciones { display: flex; gap: 10px; }
.btn-secundario {
  flex: 1; text-align: center; text-decoration: none;
  border: 1.5px solid var(--azul); color: var(--azul); background: #fff;
  padding: 9px 10px; border-radius: 10px; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; transition: all 0.15s ease;
}
.btn-secundario:hover { background: var(--azul); color: #fff; }
.btn-anadir {
  flex: 1.4; border: none; background: var(--verde); color: #fff;
  padding: 10px; border-radius: 10px; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  transition: background 0.15s ease;
}
.btn-anadir:hover { background: var(--verde-osc); }
.form-anadir { flex: 1.4; display: flex; }
.form-anadir .btn-anadir { width: 100%; }

/* ---------- Página de detalle ---------- */
.detalle { padding: 50px 0 80px; }
.migas { font-size: 0.85rem; color: var(--gris); margin-bottom: 24px; }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--azul-claro); text-decoration: underline; }
.detalle-caja {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px;
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 34px;
}
.detalle-foto { position: relative; border-radius: 10px; overflow: hidden; align-self: start; }
.detalle-foto img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.detalle-info .categoria {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--verde-osc);
}
.detalle-info h1 { color: var(--azul); font-size: 1.7rem; line-height: 1.3; margin: 8px 0 16px; }
.detalle-info .precios { margin: 0 0 20px; }
.detalle-info .precio { font-size: 1.9rem; }
.descripcion { color: var(--texto); margin-bottom: 26px; }
.descripcion p + p { margin-top: 12px; }
.compra-linea { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.compra-linea input[type="number"] {
  width: 76px; padding: 10px; border: 1.5px solid var(--linea); border-radius: 10px;
  font-size: 1rem; text-align: center;
}
.compra-linea .btn-principal { padding: 12px 30px; }

.relacionados { margin-top: 56px; }
.relacionados h2 { color: var(--azul); font-size: 1.4rem; margin-bottom: 22px; }

.horas-tarjeta {
  display: inline-block; margin-left: 8px; color: var(--gris);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.creditos-tarjeta { color: var(--verde-osc); }
.precios { flex-wrap: wrap; }

/* ---------- Banners por tipo de formación en la página de categoría ---------- */
/* Mismo aspecto que los bloques destacados de la portada (clase .pilar), solapando
   la cabecera de la categoría igual que en la portada. Al pulsar uno, el listado
   de abajo muestra solo sus cursos. */
.cabecera-categoria.con-bloques { padding-bottom: 110px; }
.bloques-categoria { margin-top: -70px; padding-bottom: 6px; }
.banner-bloque { text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.banner-bloque:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.banner-bloque.activo { box-shadow: 0 0 0 3px var(--verde), var(--sombra-hover); }
.banner-bloque .pilar-texto { display: flex; flex-direction: column; gap: 4px; }
.banner-bloque .banner-num { color: var(--gris); font-size: 0.95rem; margin: 0 0 10px; }
.banner-bloque .banner-num strong { color: var(--verde-osc); font-size: 1.25rem; }
.banner-bloque.activo .cat-boton { background: var(--verde); border-color: var(--verde); }
/* Listado de cursos de la categoría, con su título y el botón de quitar el filtro */
.lista-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px; padding-bottom: 12px; border-bottom: 3px solid var(--verde);
}
.cursos .lista-titulo { text-align: left; font-size: 1.45rem; margin: 0; }
.lista-titulo .lista-num { color: var(--gris); font-weight: 600; font-size: 1.05rem; }
.lista-cabecera .ver-todos { padding: 9px 20px; font-size: 0.9rem; }
.lista-cabecera .ver-todos[hidden] { display: none; }
.tarjeta.oculta { display: none; }
/* Los anclas dejan sitio a la cabecera fija */
.con-ancla { scroll-margin-top: 130px; }

/* ---------- Ficha de curso: horas, botones e índice ---------- */
.precio-horas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.precio-horas .precios { margin: 0; }
.horas-curso {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: #eaf4ff; color: var(--azul); border: 1px solid #cfe3f7;
  padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 1.35rem;
}
.horas-curso .horas-etiqueta {
  font-size: 1rem; font-weight: 800; letter-spacing: 0.6px; color: var(--azul-osc);
}
/* Créditos: mismo cuadro que las horas, en verde */
.creditos-curso { background: #e7f7f0; color: var(--verde-osc); border-color: #bfe8d6; }
.creditos-curso .horas-etiqueta { color: #10614a; }
.detalle-lateral { display: flex; flex-direction: column; gap: 14px; }
.botones-curso { display: flex; flex-direction: column; gap: 10px; }
/* Mismo aspecto que el botón de Campus Virtual: fondo azul y letras blancas */
.btn-curso {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--azul); color: #fff; border: 2px solid var(--azul);
  padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.btn-curso:hover, .btn-curso.abierto { background: var(--azul-osc); border-color: var(--azul-osc); color: #fff; }
/* «Solicita información» en el mismo verde que «Añadir al carrito» */
.btn-curso.verde { background: var(--verde); border-color: var(--verde); }
.btn-curso.verde:hover { background: #17a375; border-color: #17a375; }
/* Se despliega entre los dos botones, pegado al de ÍNDICE */
.indice-curso {
  background: #f6f9fc; border: 1px solid var(--linea); border-radius: 12px;
  padding: 18px 20px; margin: -4px 0 2px;
}
.indice-curso h2 { color: var(--azul); font-size: 1.1rem; margin-bottom: 12px; }
.indice-cuerpo { color: var(--texto); line-height: 1.7; }
.indice-cuerpo ul, .indice-cuerpo ol { margin: 0 0 12px 22px; }
.indice-cuerpo li { margin-bottom: 6px; }
.indice-cuerpo h2, .indice-cuerpo h3, .indice-cuerpo h4 { color: var(--azul); margin: 16px 0 8px; }

/* ---------- Formas de pago ---------- */
.metodos-pago { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.metodos-pago .mp-titulo { font-size: 0.82rem; color: var(--gris); }
.metodos-pago .mp-iconos { display: inline-flex; gap: 8px; align-items: center; }
.metodos-pago .mp-icono { width: 46px; height: 29px; display: block; }
/* Junto al botón «Añadir al carrito», en la misma línea */
.metodos-pago.en-linea { margin: 0; }
.metodos-pago.en-linea .mp-icono { width: 42px; height: 26px; }

/* Elegir forma de pago desde el carrito */
.botones-pago { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.btn-principal.bizum { background: #00b0ae; }
.btn-principal.bizum:hover { background: #009a98; }
@media (max-width: 560px) {
  .botones-pago { width: 100%; }
  .botones-pago .btn-principal { flex: 1 1 100%; text-align: center; }
}
.pie-pagos {
  display: flex; justify-content: center; padding: 6px 20px 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pie-pagos .mp-titulo { color: #b9cbdd; }

/* ---------- Página de contacto / solicitar información ---------- */
.sub-pagina { color: var(--gris); max-width: 760px; margin: -12px 0 28px; line-height: 1.65; }
.rejilla-contacto .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .rejilla-contacto .fila-2 { grid-template-columns: 1fr; } }
.rejilla-contacto { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: start; }
.caja-contacto { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; }
.caja-contacto h2 { color: var(--azul); font-size: 1.3rem; margin-bottom: 18px; }
.caja-contacto h3 { color: var(--azul); font-size: 1rem; margin: 22px 0 8px; }
.lista-contacto { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lista-contacto li { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.lista-contacto a { color: var(--texto); text-decoration: none; }
.lista-contacto a:hover { color: var(--verde-osc); }
.dato-fiscal { color: var(--gris); font-size: 0.9rem; line-height: 1.6; }
.caja-contacto .btn-borde { margin-top: 18px; display: inline-block; }

/* ---------- Carrito y checkout ---------- */
.pagina-simple { padding: 50px 0 80px; }
.pagina-simple h1 { color: var(--azul); margin-bottom: 26px; font-size: 1.8rem; }
.caja {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px;
}
.tabla-carrito { width: 100%; border-collapse: collapse; }
.tabla-carrito th {
  text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--gris); padding: 10px 12px; border-bottom: 2px solid var(--linea);
}
.tabla-carrito td { padding: 14px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-carrito .mini { width: 74px; height: 52px; object-fit: cover; border-radius: 8px; }
.tabla-carrito .nombre a { color: var(--texto); text-decoration: none; font-weight: 600; }
.tabla-carrito .nombre a:hover { color: var(--azul-claro); }
.tabla-carrito input[type="number"] {
  width: 68px; padding: 8px; border: 1.5px solid var(--linea); border-radius: 8px; text-align: center;
}
.btn-quitar {
  background: none; border: none; color: var(--rojo); cursor: pointer; font-size: 1.05rem;
  padding: 4px 8px; border-radius: 6px;
}
.btn-quitar:hover { background: #fdecea; }
.carrito-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 22px; flex-wrap: wrap;
}
.total-linea { font-size: 1.25rem; }
.total-linea strong { color: var(--azul); font-size: 1.5rem; }
.acciones-carrito { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-borde {
  display: inline-block; border: 1.5px solid var(--azul); color: var(--azul); background: #fff;
  padding: 11px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer;
  font-size: 0.95rem; transition: all 0.15s ease;
}
.btn-borde:hover { background: var(--azul); color: #fff; }

.rejilla-checkout { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: start; }
.formulario label { display: block; font-weight: 600; font-size: 0.9rem; margin: 16px 0 6px; color: var(--texto); }
.formulario label:first-child { margin-top: 0; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"],
.formulario input[type="password"], .formulario input[type="number"],
.formulario select, .formulario textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--linea); border-radius: 10px;
  font-size: 0.97rem; font-family: inherit; background: #fff; color: var(--texto);
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus {
  outline: none; border-color: var(--verde);
}
.formulario .ayuda { font-size: 0.82rem; color: var(--gris); margin-top: 4px; }
.resumen-pedido .linea {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--linea); font-size: 0.93rem;
}
.resumen-pedido .linea.total { border-bottom: none; font-weight: 800; font-size: 1.1rem; color: var(--azul); padding-top: 14px; }

/* ---------- Aviso / resultado de pago ---------- */
.aviso {
  border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; font-size: 0.95rem;
}
.aviso.ok { background: #e7f7f0; color: #10614a; border: 1px solid #b7e4d2; }
.aviso.error { background: #fdecea; color: #8a2622; border: 1px solid #f3c2bf; }
.aviso.info { background: #e8f1fb; color: #174a7c; border: 1px solid #c3d9ef; }
.resultado { text-align: center; padding: 30px 20px; }
.resultado .icono-grande { font-size: 3.4rem; margin-bottom: 12px; }
.resultado h1 { margin-bottom: 12px; }
.resultado p { color: var(--gris); max-width: 560px; margin: 0 auto 10px; }
.resultado .btn-principal { margin-top: 18px; }

/* ---------- Notificación flotante ---------- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  background: var(--azul-osc); color: #fff; padding: 14px 22px; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); font-size: 0.95rem;
  opacity: 0; transform: translateY(12px); transition: all 0.3s ease;
}
.toast.visible { opacity: 1; transform: translateY(0); }

/* ---------- Pie ---------- */
.pie { background: var(--azul-osc); color: #b9cbdd; margin-top: 40px; }
.pie .contenedor {
  padding: 44px 20px 30px;
  display: grid; grid-template-columns: 2fr 1.3fr 1.3fr 1.3fr; gap: 30px;
}
/* Banda de logotipos (G&G + Vértice + UCAV) sobre fondo blanco, al inicio del pie */
.pie-colaboradores .contenedor { display: block; padding: 30px 20px 0; }
.banda-logos {
  background: #fff; border-radius: 14px; padding: 16px 26px;
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
}
.banda-logos img { height: 40px; width: auto; }
.banda-logos .logo-propio img { height: 60px; }
.banda-logos .ent-cfc { height: 56px; }
.banda-logos .ent-agrupacion img { height: 34px; }
.banda-logos .sep { width: 1px; height: 44px; background: var(--linea); }
.banda-logos p { color: var(--gris); font-size: 0.88rem; margin: 0; flex-basis: 100%; text-align: center; }
/* Solo cuando la banda entera cabe en una línea la frase se pone al lado de los
   logotipos con su borde; por debajo va centrada debajo, sin borde */
@media (min-width: 1160px) {
  .banda-logos p { flex-basis: auto; margin-left: 10px; padding-left: 22px; border-left: 1px solid var(--linea); text-align: left; max-width: 300px; line-height: 1.4; }
}
.pie h4 { color: #fff; margin-bottom: 12px; font-size: 1rem; }
.pie p, .pie li { font-size: 0.9rem; }
.pie ul { list-style: none; }
.pie li { margin-bottom: 6px; }
.pie a { color: #dfe9f2; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center; padding: 16px 20px; font-size: 0.82rem; color: #8fa6ba;
}

/* ---------- Responsive ---------- */
/* La cabecera pasa a dos filas (logotipos arriba, botones debajo) antes de que el
   contenido deje de caber. Repartida en varias filas es demasiado alta para ir
   fija, así que solo se queda fija en pantallas anchas, donde ocupa una sola fila. */
@media (max-width: 1240px) {
  .cabecera .contenedor { flex-wrap: wrap; justify-content: center; }
  .colaboradores { margin-right: 0; }
  .cabecera { position: static; }
  .con-ancla { scroll-margin-top: 16px; }
}
@media (max-width: 1000px) {
  .pilar { flex-basis: calc(50% - 12px); }
}
@media (max-width: 900px) {
  .cabecera .logo img { height: 66px; }
  .detalle-caja { grid-template-columns: 1fr; padding: 24px; }
  .rejilla-checkout { grid-template-columns: 1fr; }
  .rejilla-contacto { grid-template-columns: 1fr; }
  .pie .contenedor { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pilar { flex-basis: 100%; }
  .cabecera .logo img { height: 62px; }
  .heroe.con-imagen { padding: 70px 0 100px; }
}

/* ---------- Páginas legales ---------- */
.pagina-legal { padding: 40px 0 56px; }
.pagina-legal .contenedor { max-width: 820px; }
.pagina-legal h1 { font-size: 1.9rem; color: var(--azul-osc); margin-bottom: 18px; }
.pagina-legal h2 { font-size: 1.15rem; color: var(--azul); margin: 26px 0 8px; }
.pagina-legal p, .pagina-legal li { line-height: 1.7; color: var(--texto); }
.pagina-legal ul { margin: 8px 0 8px 22px; }
.pagina-legal li { margin-bottom: 6px; }
.pagina-legal .legal-meta { margin-top: 28px; font-size: 0.85rem; color: var(--gris); }
.tabla-cookies { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.9rem; }
.tabla-cookies th, .tabla-cookies td { border: 1px solid #e2e8ef; padding: 9px 12px; text-align: left; }
.tabla-cookies th { background: #f2f6fa; color: var(--azul-osc); }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 3px solid var(--verde);
  box-shadow: 0 -6px 24px rgba(12, 43, 76, 0.16);
  transform: translateY(100%); transition: transform 0.3s ease;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 22px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cookie-texto { flex: 1 1 340px; font-size: 0.9rem; line-height: 1.55; color: var(--texto); margin: 0; }
.cookie-texto a { color: var(--verde-osc); font-weight: 600; }
.cookie-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-botones .btn-principal, .cookie-botones .btn-borde { padding: 10px 22px; cursor: pointer; }
@media (max-width: 640px) {
  .cookie-inner { justify-content: center; text-align: center; }
  .cookie-botones { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .cabecera .contenedor { flex-direction: column; gap: 10px; }
  .colaboradores { border-left: none; padding-left: 0; }
  /* Tamaños y hueco ajustados para que los cuatro quepan en una sola fila
     incluso en las pantallas más estrechas (~308 px de los 335 disponibles) */
  .colaboradores-logos { gap: 12px; }
  .colaboradores img { height: 30px; }
  .colaboradores .ent-cfc { height: 42px; }
  .colaboradores .ent-agrupacion img { height: 25px; }
  .ent-miembro { font-size: 0.65rem; }
  .banda-logos { padding: 14px 16px; gap: 14px 18px; }
  .banda-logos img { height: 34px; }
  .banda-logos .logo-propio img { height: 48px; }
  .banda-logos .ent-cfc { height: 46px; }
  .banda-logos .ent-agrupacion img { height: 28px; }
  .banda-logos .sep { display: none; }
  .cab-acciones { flex-wrap: wrap; justify-content: center; }
  .heroe { padding: 48px 0 110px; }
  .tabla-carrito .col-foto { display: none; }
}

/* ---------- Modelos de diploma acreditado (Certificados Oficiales → CFC) ---------- */
.cat-desc-simple { color: #dbe8f3; font-size: 1.05rem; margin-top: 4px; }
/* Desplegable con <details>: funciona aunque no haya JavaScript */
.modelos-diploma { margin-bottom: 28px; }
.modelos-diploma > summary {
  padding: 13px 26px; font-size: 0.95rem; cursor: pointer;
  list-style: none; /* sin el triangulito del navegador */
}
.modelos-diploma > summary::-webkit-details-marker { display: none; }
.modelos-diploma > summary::marker { content: ''; }
.modelos-diploma[open] > summary { background: var(--azul-osc); border-color: var(--azul-osc); }
.modelos-diploma .indice-curso { margin-top: 8px; }
.diplomas-intro { color: var(--gris); margin-bottom: 16px; line-height: 1.6; }
.rejilla-diplomas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.tarjeta-diploma {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 20px 16px;
  text-decoration: none; color: var(--texto);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tarjeta-diploma:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--verde); }
.diploma-icono { font-size: 2rem; line-height: 1; }
.diploma-titulo { font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--azul); }
.diploma-ver {
  margin-top: auto; font-size: 0.82rem; font-weight: 700; color: #fff;
  background: var(--verde); border-radius: 999px; padding: 6px 16px;
}
.tarjeta-diploma:hover .diploma-ver { background: var(--verde-osc); }