/*
Theme Name: Brújula Profesional
Theme URI: https://www.brujulaprofesional.cl
Description: Tema hijo de Twenty Twenty-Five con la identidad corporativa de Brújula Profesional: morado #504790 y magenta #b05892. Sustituye a Skudmart y elimina la dependencia de Elementor.
Author: Brújula Profesional
Template: twentytwentyfive
Version: 1.19.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brujula-profesional
*/

/* Los estilos base viven en theme.json. Aqui solo lo que no se puede
   expresar alli: ajustes finos y componentes propios. */

/* Eyebrow: etiqueta de seccion con la barra magenta */
.bp-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--magenta);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.bp-eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  background: var(--wp--preset--color--magenta);
  flex: none;
}

/* Muro de logos de clientes: tarjetas de tamano fijo, como en el diseno
   aprobado. Evita que un logo domine y que la galeria recorte los anchos. */
.bp-logos .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.bp-logos .wp-block-gallery .wp-block-image {
  flex: none;
  width: 118px;
  height: 65px;
  margin: 0;
  padding: 8px;
  background: var(--wp--preset--color--blanco);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.bp-logos .wp-block-gallery .wp-block-image img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 84%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.45) brightness(.86);
  opacity: .95;
}

/* Cifras destacadas */
.bp-stat strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1;
}

/* Tarjetas de linea de servicio */
.bp-linea { height: 100%; }
.bp-linea .wp-block-image img { width: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Ajustes de fidelidad con el diseno aprobado
   --------------------------------------------------------------------------- */

/* Los rotulos y titulos de seccion comparten ancho con las tarjetas que los
   siguen. Por defecto el bloque constrained los deja en la columna de texto,
   que es mas estrecha, y quedan visiblemente desalineados. */
.wp-block-group.has-global-padding > .bp-eyebrow,
.wp-block-group.has-global-padding > .bp-eyebrow ~ h2,
.wp-block-group.has-global-padding > .bp-eyebrow ~ p {
  max-width: var(--wp--style--global--wide-size);
}

/* Cabecera: el boton es quien fija la altura de la fila. */
header .wp-block-button__link {
  padding: .5rem .9rem;
}

/* Muro de logos: el ancho va fijo. El !important es deliberado: la galeria
   del nucleo calcula el ancho por columnas con la misma especificidad y se
   carga despues, y aqui las tarjetas tienen que medir todas lo mismo. */
.bp-logos .wp-block-gallery.has-nested-images figure.wp-block-image {
  width: 118px !important;
  flex-grow: 0;
}

/* Tarjetas de linea de servicio */
.bp-linea {
  position: relative;
  background: var(--wp--preset--color--blanco);
  /* Sin esto la foto, que no tiene radio propio, asoma en cuadrado por encima
     de las esquinas redondeadas de la tarjeta. */
  overflow: hidden;
}
.bp-linea h3 {
  font-size: 1.05rem;
}
.bp-linea p:not(.bp-eyebrow) {
  font-size: .875rem;
}
/* El numero va como pastilla sobre la foto, no como rotulo en el cuerpo. */
.bp-linea .bp-eyebrow {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--wp--preset--color--magenta);
  color: var(--wp--preset--color--blanco);
  font-size: .7rem;
  letter-spacing: .06em;
}
.bp-linea .bp-eyebrow::before {
  display: none;
}

/* Los cuatro diferenciadores */
.bp-diff {
  padding: 1.1rem;
  background: var(--wp--preset--color--blanco);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 10px;
}
.bp-diff .bp-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: .6rem;
  border-radius: 8px;
  background: var(--wp--preset--color--lavanda);
  color: var(--wp--preset--color--morado);
}

/* Hero: el texto ocupa poco mas de la mitad para que se lea la fotografia.
   El parrafo de entrada va en tamano de cuerpo, no en «large»: a 21px su
   limite de 50ch superaba el ancho del contenedor y no recortaba nada. */
.wp-block-cover h1 {
  max-width: 17ch;
}
.wp-block-cover h1 + p {
  max-width: 38ch;
  font-size: var(--wp--preset--font-size--medium);
}

/* El grupo interior de la tarjeta viene con position:relative del nucleo y se
   queda con el ancla de la pastilla. La tarjeta tiene que ser la referencia. */
.bp-linea > .wp-block-group {
  position: static;
}

/* Velo del hero: degradado a 105 grados, opaco donde va el texto y translucido
   sobre la fotografia, para que la imagen se lea igual que en el diseno. */
.wp-block-post-content > .wp-block-cover:first-of-type .wp-block-cover__background {
  /* La clase de color del nucleo pone background-color con !important y
     dejaria la capa opaca, tapando la fotografia. */
  background-color: transparent !important;
  background-image: linear-gradient(105deg, rgba(38, 32, 74, .95) 0%, rgba(48, 42, 92, .88) 46%, rgba(80, 71, 144, .62) 100%);
  opacity: 1;
}

/* Cifras destacadas: separadas por filetes, como en el diseno */
.bp-stat + .bp-stat {
  padding-left: var(--wp--preset--spacing--40);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

/* ---------------------------------------------------------------------------
   Menu principal
   En el diseno va en Outfit 500 sobre #3E3757, y la seccion actual en morado,
   negrita y con un filete magenta pegado al borde inferior de la cabecera.
   --------------------------------------------------------------------------- */
header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--display);
}
/* El nucleo fuerza color:inherit con la clase repetida
   (.wp-block-navigation-item__content.wp-block-navigation-item__content, tres
   clases). Hay que repetirla tambien para ganarle. */
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-weight: 500;
  color: #3E3757;
}
header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
  position: relative;
  color: var(--wp--preset--color--morado);
  font-weight: 700;
}
/* El filete se apoya en el padding del grupo de la cabecera, no en el enlace,
   para que quede a ras del borde inferior. */
header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--wp--preset--spacing--30));
  height: 2.5px;
  background: var(--wp--preset--color--magenta);
}

/* ---------------------------------------------------------------------------
   Pie
   El color global de enlace es morado #504790 y el fondo del pie es
   morado-profundo #302A5C: eran indistinguibles.
   --------------------------------------------------------------------------- */
footer .has-morado-profundo-background-color a {
  color: var(--wp--preset--color--lavanda);
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}
footer .has-morado-profundo-background-color a:hover,
footer .has-morado-profundo-background-color a:focus {
  color: var(--wp--preset--color--magenta-claro);
  text-decoration-color: currentColor;
}
/* Los iconos sociales pintan su propio color y no deben heredar el de enlace. */
footer .wp-block-social-links a {
  text-decoration: none;
}

/* Los enlaces de servicios del pie van en columna limpia, sin viñetas. */
footer .wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

/* El menu desplegable en movil va sobre morado-profundo. La regla de color de
   arriba lo dejaba en gris oscuro sobre fondo oscuro: invisible. */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--blanco);
}
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--magenta-claro);
}
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  display: none;
}


/* Retratos del equipo: son verticales y se recortan a cuadrado. Centrados
   (50% 50%) el recorte se queda con el torso y corta la cabeza, asi que el
   encuadre sube. Las fotos ya cuadradas no se ven afectadas: no hay recorte. */
.wp-block-post-content .wp-block-image img[style*="aspect-ratio:1"] {
  object-position: 50% 18%;
}

/* El «contentPosition» del bloque de portada pone justify-content:flex-start y
   deja el texto del hero pegado al borde izquierdo, fuera de la retícula: la
   cabecera y las secciones empiezan en 140px y el hero empezaba en 17px.
   La caja interior pasa a compartir ancho y márgenes con el resto del sitio. */
/* El relleno propio del bloque se suma al de la caja interior y descuadra el
   margen en pantallas estrechas. El margen lo pone la caja interior. */
.wp-block-cover {
  padding-inline: 0;
}
.wp-block-cover .wp-block-cover__inner-container {
  width: 100%;
  /* content-box: el max-width mide el contenido y el relleno queda fuera. */
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------------
   Píldoras del catálogo
   Se mantiene el marcado de lista (<ul><li>): semánticamente es una lista, y
   así el schema de cursos la sigue leyendo. Solo cambia su aspecto.
   --------------------------------------------------------------------------- */
.bp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.bp-chips li {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #E2DAF3;
  border-radius: 20px;
  background: var(--wp--preset--color--lavanda);
  color: #3E3757;
  font-family: var(--wp--preset--font-family--display);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
}
/* Las dos primeras van destacadas, como en el diseño. */
.bp-chips li.is-destacada {
  background: var(--wp--preset--color--magenta);
  border-color: var(--wp--preset--color--magenta);
  color: var(--wp--preset--color--blanco);
  font-weight: 600;
}

/* Tarjetas de familia: fondo blanco sobre el lavanda de la sección. */
.bp-familia {
  background: var(--wp--preset--color--blanco);
}

/* Las píldoras comparten ancho con el título de su sección. */
.wp-block-group.has-global-padding > .bp-eyebrow ~ ul,
.wp-block-group.has-global-padding > .bp-eyebrow ~ .wp-block-group {
  max-width: var(--wp--style--global--wide-size);
}

/* Acordeón de preguntas frecuentes */
.bp-faq {
  margin-top: 1.5rem;
}
.bp-faq .wp-block-details {
  padding: 1rem 1.2rem;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 10px;
  background: var(--wp--preset--color--blanco);
}
.bp-faq .wp-block-details + .wp-block-details {
  margin-top: .55rem;
}
.bp-faq summary {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  color: var(--wp--preset--color--tinta);
  cursor: pointer;
}
.bp-faq summary::marker {
  color: var(--wp--preset--color--magenta);
}
.bp-faq .wp-block-details[open] summary {
  color: var(--wp--preset--color--morado);
  margin-bottom: .6rem;
}
.bp-faq p {
  font-size: .9375rem;
  color: var(--wp--preset--color--gris);
  margin: 0;
}

/* Fichas del catálogo: mismo acordeón que las preguntas frecuentes. */
.bp-catalogo .wp-block-details ul {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  font-size: .9375rem;
  color: var(--wp--preset--color--gris);
}
.bp-catalogo .bp-relator {
  margin-top: .7rem;
  color: var(--wp--preset--color--gris-suave);
}

/* ---------------------------------------------------------------------------
   Tarjetas de familia del catálogo: la tarjeta entera es clicable.
   El enlace real está en el h3; el ::after lo estira sobre toda la tarjeta, así
   el destino sigue siendo un enlace de verdad para el teclado y los lectores.
   --------------------------------------------------------------------------- */
.bp-familias .bp-familia {
  position: relative;
  background: var(--wp--preset--color--blanco);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bp-familias .bp-familia h3 a {
  color: var(--wp--preset--color--tinta);
  text-decoration: none;
}
.bp-familias .bp-familia h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
}
.bp-familias .bp-familia:hover,
.bp-familias .bp-familia:focus-within {
  border-color: var(--wp--preset--color--magenta) !important;
  box-shadow: 0 10px 26px -18px rgba(48, 42, 92, .55);
  transform: translateY(-2px);
}
.bp-familias .bp-familia:hover h3 a {
  color: var(--wp--preset--color--morado);
}
.bp-familias .bp-ver {
  margin-top: .8rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  color: var(--wp--preset--color--morado);
}
@media (prefers-reduced-motion: reduce) {
  .bp-familias .bp-familia { transition: none; }
  .bp-familias .bp-familia:hover { transform: none; }
}

/* Cabecera de la compra: sin menú a propósito (WooCommerce la deja así para que
   nadie abandone el pago), pero con la marca y el candado a la vista. */
.bp-pago-seguro {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}
.bp-pago-seguro::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zM9 7a3 3 0 0 1 6 0v2H9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zM9 7a3 3 0 0 1 6 0v2H9z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* El botón flotante de Joinchat trae el verde de WhatsApp fijo en su hoja de
   estilos (`background: #25d366 …`), no lo saca de su ajuste de color. Se fuerza
   el magenta de marca, que es lo que pide el diseño. */
.joinchat__button {
  background-color: var(--wp--preset--color--magenta) !important;
}

/* ------------------------------------------------------------------
 * Ecosistema Brújula: las tres empresas hermanas en la portada.
 *
 * Fondo blanco a propósito. La seccion de arriba («Franquicia SENCE»)
 * tambien lo es, asi que lleva un filete superior para separarlas; si
 * fuera lavanda se fundiria con el testimonio, que viene justo debajo
 * y tambien es lavanda.
 * ---------------------------------------------------------------- */

.bp-ecosistema {
	border-top: 1px solid var(--wp--preset--color--linea);
}

.bp-ecosistema .bp-marcas {
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.bp-ecosistema .bp-marca {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 14px;
	padding: 1.75rem;
}

/* El logo va en un mosaico redondeado y no suelto: dos de las tres
   marcas traen icono cuadrado con fondo propio, y mezclarlos con una
   marca transparente descuadra la fila. */
.bp-ecosistema .bp-marca__logo {
	margin: 0 0 0.9rem;
}

.bp-ecosistema .bp-marca__logo img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	display: block;
	border-radius: 11px;
	background: var(--wp--preset--color--lavanda);
}

.bp-ecosistema .bp-marca h3 {
	margin: 0 0 0.2rem;
}

.bp-ecosistema .bp-marca__que {
	margin: 0 0 0.7rem;
	font-weight: 600;
}

.bp-ecosistema .bp-marca p {
	margin-bottom: 0.9rem;
}

/* El distintivo de BrujulApp. No esta lanzada: su web dice «Proximo
   lanzamiento» y tiene lista de espera, asi que la tarjeta no puede
   prometer un servicio que todavia no se puede usar. */
.bp-marca__pronto {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5rem;
	background: var(--wp--preset--color--morado-profundo);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	white-space: nowrap;
}

.bp-ecosistema .bp-marca__ir {
	margin-bottom: 0;
}

.bp-ecosistema .bp-marca__ir a {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--morado);
}

.bp-ecosistema .bp-marca__ir a::after {
	content: " ↗";
}

.bp-ecosistema .bp-marca__ir a:hover {
	text-decoration: underline;
}

/* Columna «Grupo Brújula» del pie: cada marca con su descriptor debajo,
   para que se lea como marca y no como un enlace mas del menu. */
.bp-grupo li {
	margin-bottom: 0.85rem;
}

.bp-grupo li a {
	font-weight: 600;
}

.bp-grupo li span {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--lavanda);
	opacity: 0.75;
}

/* El pie pasó de tres columnas a cuatro al entrar «Grupo Brújula». La
   primera columna lleva su ancho ESCRITO EN EL BLOQUE (flex-basis en línea),
   así que no se corrige desde aquí: una regla de hoja de estilos nunca le
   gana a un estilo en línea. Se bajó de 38% a 28% en parts/footer.html.
   Con 38% las otras tres se quedaban en 159px y «hola@brujulaprofesional.cl»
   se partía a mitad de palabra. */