/*
Theme Name: Formación IA — Carbon
Theme URI: https://ia.framecore.co
Description: Tema hijo de Twenty Twenty-Five con el lenguaje visual de IBM Carbon Design System en versión tibia: IBM Plex Sans y Fraunces, neutros tibios, índigo interactivo #4F46E5, esquinas de 8-10px y escala de espaciado 8px.
Author: FRAMECORE
Template: twentytwentyfive
Version: 1.0.0
Text Domain: formacion-ia-carbon
*/

/* ============================================================
   IBM Carbon Design System — tema White
   Tokens: https://carbondesignsystem.com/elements/color/tokens
   ============================================================ */

:root {
  /* Neutros tibios: la misma estructura de Carbon, con temperatura */
  --cds-background: #FDFCFB;
  --cds-layer-01: #F5F3F0;
  --cds-layer-hover-01: #EDEAE6;
  --cds-layer-accent-01: #E7E3DE;
  --cds-border-subtle: #E7E3DE;
  --cds-border-strong: #A8A29A;
  --cds-text-primary: #1C1917;
  --cds-text-secondary: #57534E;
  --cds-text-helper: #78716C;
  --cds-text-on-color: #FFFFFF;
  --cds-surface: #FFFFFF;

  /* Acento índigo, más cercano que el azul corporativo */
  --cds-link-primary: #4F46E5;
  --cds-link-primary-hover: #4338CA;
  --cds-interactive: #4F46E5;
  --cds-button-primary: #4F46E5;
  --cds-button-primary-hover: #4338CA;
  --cds-button-primary-active: #3730A3;
  --cds-accent-soft: #EEF0FE;
  --cds-highlight: #B45309;
  --cds-focus: #4F46E5;
  --cds-support-error: #B91C1C;

  /* Formas: esquinas suaves y una sola sombra, muy contenida */
  --cds-radius-card: 10px;
  --cds-radius-field: 8px;
  --cds-radius-pill: 999px;
  --cds-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --cds-shadow-md: 0 10px 30px -18px rgba(28, 25, 23, 0.28);

  /* Escala de espaciado */
  --cds-spacing-03: 0.5rem;
  --cds-spacing-05: 1rem;
  --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;
  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;
  --cds-spacing-12: 6rem;

  --cds-duration-fast-02: 110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-easing-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* --- Base ------------------------------------------------- */

/*
   La barra de desplazamiento se reserva siempre. Sin esto, una página que
   scrollea y otra que no quedan centradas en ejes distintos —unos 7px— y el
   salto se nota al navegar entre ellas.
*/
html {
  scrollbar-gutter: stable;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anillo de foco de Carbon: 2px, recto, sin desplazamiento */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

/* Esquinas suaves: 10px en superficies, 8px en controles */
.wp-block-button__link,
.wp-block-search__button,
input,
select,
textarea {
  border-radius: var(--cds-radius-field);
}

figure,
img {
  border-radius: var(--cds-radius-card);
}

/* --- Cabecera y pie del sitio ----------------------------- */

.wp-block-site-title,
.wp-block-site-title a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16px;
  text-decoration: none;
  color: var(--cds-text-primary);
}

header.wp-block-template-part > .wp-block-group {
  border-bottom: 1px solid var(--cds-border-subtle);
}

footer.wp-block-template-part {
  border-top: 1px solid var(--cds-border-subtle);
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

/* --- Ancho completo en todo el sitio ------------------------ */
/*
   Antes: una sola caja de 76rem (1216px) centrada, con márgenes grandes en
   pantallas anchas. A pedido del propietario, ahora todo -- fondo Y texto,
   no solo el cromo -- usa el 100% del ancho disponible; el único margen que
   queda es el gutter fijo de `--wp--style--root-padding-left` (2rem, de
   theme.json). Se avisó del costo de legibilidad (líneas de texto muy
   largas en monitores anchos) antes de aplicarlo; quedó como decisión suya.

   Si se quiere revertir solo la medida de lectura sin volver a la caja
   completa, el punto de ajuste es `--cds-measure` más abajo.
*/

:root {
  /* Ya sin tope: el texto corrido ocupa el mismo ancho que su bloque
     contenedor. Se conserva la variable (en vez de borrar cada regla que la
     usa) para que revertir sea cambiar un solo valor. */
  --cds-measure: none;
}

.entry-content {
  margin-inline: auto !important;
  padding-inline: var(--wp--style--root-padding-left, 2rem);
  box-sizing: border-box;
}

/* Separadores: dibujan el ancho del contenedor, que es la referencia visual
   del layout. No se les toca el ancho: lo hereda del contenedor. */
.entry-content > .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--cds-border-subtle);
  background: none;
  height: 0;
  margin-block: var(--cds-spacing-10);
  opacity: 1;
}

/* Encabezados y texto: alineados al borde izquierdo del contenedor y con una
   sola medida de lectura. El !important es necesario porque el layout
   «constrained» de WordPress centra los bloques con auto !important. */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .wp-block-buttons {
  max-width: var(--cds-measure);
  margin-left: 0 !important;
  margin-right: auto !important;
}

.entry-content > h1 {
  margin-bottom: var(--cds-spacing-06);
}

.entry-content > h2 {
  margin-top: 0;
  margin-bottom: var(--cds-spacing-06);
}

/* Subtítulo del hero */
.entry-content > h1 + p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--cds-text-secondary);
  margin-bottom: var(--cds-spacing-07);
}

/* Nota bajo el botón principal */
.entry-content > .wp-block-buttons + p {
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

/* Los bloques anchos (columnas, tabla, acordeones, video) se quedan con el
   ancho del contenedor: no se les quita el max-width, para que su borde
   derecho coincida con el de los separadores. */

/* El formulario es un componente estrecho, alineado a la izquierda */
.entry-content .jet-form {
  max-width: var(--cds-measure);
}

/* --- Botones: una sola piel en todo el sitio --------------- */
/*
   Antes cada origen (bloque, JetEngine, WooCommerce, cabecera, cookies)
   traía su propio alto, padding, tipografía y hover. Ahora hay UNA
   definición compartida y dos tamaños:

   - Normal (48px, 1rem): CTA de las landings y formularios.
   - Compacto (40px, 0.9375rem): cabecera fija y banner de cookies.

   Color, radio, flecha, foco y comportamiento de hover son idénticos
   en ambos. Los !important existen porque el banner de cookies y
   WooCommerce pelean con estilos propios.
*/

:root {
  --cds-btn-height: 48px;
  --cds-btn-height-sm: 40px;
  --cds-btn-px: 1.25rem;
}

/* La piel primaria: la comparte TODO botón de acción del sitio */
.wp-block-button__link,
.jet-form__submit,
.jet-form-row--submit .jet-form__submit,
.jet-form__next-page,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.carbon-header__nav p.carbon-header__action > a,
.fc-tarjeta__cta,
#cookie-notice .cn-button:not(.cn-button-custom) {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  min-height: var(--cds-btn-height);
  padding: 0 var(--cds-btn-px);
  background: var(--cds-button-primary) !important;
  color: var(--cds-text-on-color) !important;
  border: 1px solid transparent;
  border-radius: var(--cds-radius-field);
  box-shadow: var(--cds-shadow-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              box-shadow var(--cds-duration-fast-02) var(--cds-easing-productive);
}

/* El mismo hover y el mismo activo para todos, sin excepción */
.wp-block-button__link:hover,
.jet-form__submit:hover,
.jet-form-row--submit .jet-form__submit:hover,
.jet-form__next-page:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.carbon-header__nav p.carbon-header__action > a:hover,
.fc-tarjeta__cta:hover,
#cookie-notice .cn-button:not(.cn-button-custom):hover {
  background: var(--cds-button-primary-hover) !important;
  color: var(--cds-text-on-color) !important;
  box-shadow: var(--cds-shadow-md);
}

.wp-block-button__link:active,
.jet-form__submit:active,
.jet-form-row--submit .jet-form__submit:active,
.jet-form__next-page:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
  background: var(--cds-button-primary-active) !important;
}

/* La piel secundaria: borde y texto, sin relleno */
.jet-form__prev-page,
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  min-height: var(--cds-btn-height);
  padding: 0 var(--cds-btn-px);
  background: transparent;
  color: var(--cds-text-primary);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-field);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              border-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-form__prev-page:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--cds-layer-hover-01);
  border-color: var(--cds-border-strong);
  color: var(--cds-text-primary);
}

/* Tamaño compacto (40px): cabecera fija y banner de cookies.
   La cabecera entra en la lista para heredar la piel completa. */
.carbon-header__nav p.carbon-header__action > a,
#cookie-notice .cn-button:not(.cn-button-custom) {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--cds-btn-height-sm);
  font-size: 0.9375rem;
}

/* Botón deshabilitado (paso incompleto del formulario multipaso) */
.jet-form__next-page:disabled,
.jet-form__next-page[disabled] {
  background: var(--cds-border-strong) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Flecha de Carbon a la derecha del botón */
.wp-block-button__link::after {
  content: "";
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-arrow) center / contain no-repeat;
  mask: var(--cds-arrow) center / contain no-repeat;
}

:root {
  --cds-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E");
}

/* --- Columnas como tiles de Carbon ------------------------ */

.entry-content .wp-block-columns {
  gap: var(--cds-spacing-07);
  margin-block: var(--cds-spacing-07);
}

.entry-content .wp-block-column {
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-card);
  box-shadow: var(--cds-shadow-sm);
  padding: var(--cds-spacing-06);
}

.entry-content .wp-block-column > h2,
.entry-content .wp-block-column > h3 {
  margin-top: 0;
  margin-bottom: var(--cds-spacing-03);
}

.entry-content .wp-block-column > p {
  color: var(--cds-text-secondary);
  margin-top: 0;
}

/* --- Tablas (patrón DataTable) ---------------------------- */

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-card);
  overflow: hidden;
}

.wp-block-table th {
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: left;
  padding: 0.875rem var(--cds-spacing-05);
  border: 0;
}

.wp-block-table td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cds-border-subtle);
  padding: 0.875rem var(--cds-spacing-05);
  color: var(--cds-text-secondary);
}

.wp-block-table tr:hover td {
  background: var(--cds-layer-hover-01);
}

.wp-block-table figcaption {
  margin-top: var(--cds-spacing-05);
}

.wp-block-table {
  overflow-x: auto;
}

/* ============================================================
   Muro del ecosistema — chips de logos monocromos
   ============================================================
   El mensaje: el conocimiento aplica a cualquier capa
   (Arnés / Agente / Modelo / Proveedor). Los logos son SVG
   monocromos autoalojados en /ecosistema/ del tema: cero
   peticiones a terceros y sin marcas de color que peleen con
   la paleta. Son referencia de ecosistema, no de alianza.
*/

.fc-ecosistema {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  margin-block: var(--cds-spacing-05) var(--cds-spacing-06);
}

.fc-ecosistema__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  min-height: 40px;
  padding: 0 var(--cds-spacing-05);
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-field);
  font-size: 0.875rem;
  line-height: 1;
  color: var(--cds-text-secondary);
  transition: border-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.fc-ecosistema__chip:hover {
  border-color: var(--cds-border-strong);
}

.fc-ecosistema__chip img {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  /* Los SVG llegan en negro puro: se atenúan al gris del texto */
  filter: grayscale(1);
  opacity: 0.75;
}

.fc-ecosistema__chip:hover img {
  opacity: 1;
}

@media (max-width: 46.1875rem) {
  .fc-ecosistema__chip { min-height: 36px; padding: 0 0.875rem; }
}

/* --- Acordeón (patrón Accordion) -------------------------- */

.wp-block-details {
  border-top: 1px solid var(--cds-border-subtle);
  padding: 0;
}

.entry-content > .wp-block-details:last-of-type,
.wp-block-details + .wp-block-separator {
  border-bottom: 1px solid var(--cds-border-subtle);
}

.wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) 0;
  cursor: pointer;
  font-weight: 400;
  color: var(--cds-text-primary);
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.wp-block-details summary:hover {
  color: var(--cds-interactive);
}

/* El anillo de foco genérico (línea ~85) se ve mal aquí: un rectángulo
   encima de un `<summary>` de varias líneas, sobre la tarjeta redondeada
   del estado abierto. Sin anillo -- el mismo cambio de color que ya usa
   el hover (línea de arriba) marca el foco por teclado sin dibujar un
   recuadro encima del control. */
.wp-block-details summary:focus-visible {
  outline: none;
  color: var(--cds-interactive);
}

.wp-block-details[open] {
  background: var(--cds-layer-01);
  border-radius: var(--cds-radius-card);
  border-top-color: transparent;
  /* El padding de la tarjeta abierta metía el texto 16px hacia adentro a
     cada lado frente a como se veía cerrado -- el "espacio utilizable"
     se encogía en el momento mismo de expandir. El margen negativo hace
     que el fondo de la tarjeta sangre hacia afuera esos mismos 16px, así
     el texto queda exactamente donde estaba: lo que cambia es el fondo,
     no el ancho de lectura. */
  margin-inline: calc(var(--cds-spacing-05) * -1);
  padding-inline: var(--cds-spacing-05);
}

.wp-block-details summary::marker,
.wp-block-details summary::-webkit-details-marker {
  content: "";
  display: none;
}

.wp-block-details summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: var(--cds-text-primary);
  -webkit-mask: var(--cds-chevron) center / contain no-repeat;
  mask: var(--cds-chevron) center / contain no-repeat;
  transition: transform var(--cds-duration-moderate-01) var(--cds-easing-productive);
}

.wp-block-details[open] summary::after {
  transform: rotate(180deg);
}

:root {
  --cds-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
}

.wp-block-details > *:not(summary) {
  color: var(--cds-text-secondary);
  padding-bottom: var(--cds-spacing-05);
  margin-top: 0;
  max-width: var(--cds-measure);
}

/* --- Listas ----------------------------------------------- */

.entry-content ul {
  list-style: none;
  padding-left: 0;
}

.entry-content ul li {
  position: relative;
  padding-left: var(--cds-spacing-06);
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--cds-border-strong);
}

/* --- Video ------------------------------------------------ */

.wp-block-embed {
  margin-block: var(--cds-spacing-06);
}

.wp-block-embed__wrapper {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  min-height: 12rem;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
  padding-top: 56.25%;
}

/* ============================================================
   Formulario de agendamiento — patrones Text Input, Select,
   Text Area y Button de Carbon
   ============================================================ */

.jet-form-row {
  margin-bottom: var(--cds-spacing-05);
  /* El propio CSS de JetEngine le pone -5px de margen a cada lado (el
     truco típico de un grid de columnas: la fila "sangra" para que el
     padding de cada `.jet-form-col` no duplique el espacio entre
     columnas). Acá siempre hay una sola columna de 12/12 -- nunca hay
     nada al lado que compensar -- así que ese sangrado no sirve para
     nada y solo hacía que el formulario se saliera 10px de su
     contenedor (visible como scroll horizontal en la tarjeta angosta). */
  margin-left: 0;
  margin-right: 0;
}

/* La otra mitad del mismo problema: `.jet-form-col` mide su `width` en
   content-box, así que sus 5px de padding por lado se SUMAN al ancho en
   vez de quedar contenidos en él -- 10px de exceso exactos, la fracción
   que sobrevivía a la corrección de arriba. */
.jet-form-col {
  box-sizing: border-box;
}

/* `.jet-form-col` es un contenedor flex (CSS propio de JetEngine) cuyo
   único hijo -- el <p> que envuelve el input, o el div del calendario --
   tiene flex-grow:0 por defecto y no se estira para llenar la columna.
   Sin esto, el `width:100%` del input se resuelve contra un ancho
   indefinido y el navegador cae a su tamaño intrínseco (~205px, el
   default de un <input> sin atributo size), sin importar cuánto mida
   la columna real. */
.jet-form-col > * {
  flex: 1 1 auto;
  min-width: 0;
}

.jet-form-row--hidden {
  margin-bottom: 0;
}

/* Etiqueta: label-01 de Carbon (12px, gray 70) */
.jet-form__label {
  margin-bottom: var(--cds-spacing-03);
}

.jet-form__label-text {
  display: block;
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  font-weight: 400;
}

.jet-form__required {
  color: var(--cds-support-error);
  margin-left: 0.125rem;
}

/* JetEngine envuelve cada campo en un <p> (`<p><input ...></p>`) que el
   navegador rellena con su margen por defecto (~16px arriba y abajo, a
   veces más según el tamaño de letra heredado) — encima del espaciado
   real de `.jet-form-row` (24px) y de la etiqueta (8px). El resultado:
   casi el doble de espacio entre campos del que se pidió. Sin el <p> no
   hay margen que resetear; con él, esto es obligatorio. */
.jet-form-field-container p {
  margin: 0;
}

/* Campo: fondo blanco (antes --cds-layer-01, el mismo gris que el fondo
   de la tarjeta del sidebar desde U10 -- ahí los campos se volvían
   invisibles contra su propio panel, sin ningún contraste), borde
   inferior, 48px de alto */
.jet-form__field.text-field,
.jet-form__field.select-field,
.jet-form__field.textarea-field,
.jet-form-field-container input[type="text"],
.jet-form-field-container input[type="email"],
.jet-form-field-container input[type="tel"],
.jet-form-field-container select,
.jet-form-field-container textarea {
  width: 100%;
  max-width: 100%;
  background: var(--cds-surface);
  color: var(--cds-text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-field);
  padding: 0 var(--cds-spacing-05);
  height: 48px;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              outline-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-form-field-container textarea,
.jet-form__field.textarea-field {
  height: auto;
  min-height: 6rem;
  padding: 0.6875rem var(--cds-spacing-05);
  resize: vertical;
}

.jet-form-field-container input:hover,
.jet-form-field-container select:hover,
.jet-form-field-container textarea:hover {
  background: var(--cds-layer-hover-01);
}

.jet-form-field-container input:focus,
.jet-form-field-container select:focus,
.jet-form-field-container textarea:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
  background: var(--cds-surface);
  border-color: var(--cds-interactive);
}

.jet-form-field-container input::placeholder,
.jet-form-field-container textarea::placeholder {
  color: var(--cds-text-helper);
}

/* Select con la flecha de Carbon */
.jet-form-field-container select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--cds-spacing-10);
  background-image: var(--cds-chevron);
  background-repeat: no-repeat;
  background-position: right var(--cds-spacing-05) center;
  background-size: 1rem 1rem;
}

/* Texto de ayuda: helper-text-01 */
.jet-form__desc,
.jet-form-field-container .jet-form__field-desc {
  display: block;
  margin-top: var(--cds-spacing-03);
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
}

/* Botón de envío del formulario: piel primaria compartida + flecha.
   Lo único propio es el ancho mínimo, que le da presencia al final del form. */
.jet-form__submit,
.jet-form-row--submit .jet-form__submit {
  min-width: 16rem;
}

.jet-form__submit::after {
  content: "";
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-arrow) center / contain no-repeat;
  mask: var(--cds-arrow) center / contain no-repeat;
}

/* Botones de paso del formulario multipaso */

.jet-form__next-page-wrap,
.jet-form-row--submit .jet-form-col {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  flex-wrap: wrap;
}

/* Avanzar: piel primaria compartida + flecha */
.jet-form__next-page {
  min-width: 12rem;
  justify-content: space-between;
}

.jet-form__next-page::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-arrow) center / contain no-repeat;
  mask: var(--cds-arrow) center / contain no-repeat;
}

/* Retroceder: piel secundaria compartida; va primero en la fila */
.jet-form__prev-page {
  order: -1;
}

/* Mensajes del formulario: patrón Inline Notification */
.jet-form-messages-wrap {
  margin-top: var(--cds-spacing-06);
}

.jet-form-messages-wrap > * {
  padding: var(--cds-spacing-05);
  border-radius: var(--cds-radius-card);
  font-size: 0.875rem;
  line-height: 1.43;
  background: #ECFDF5;
  border-left: 3px solid #059669;
  color: var(--cds-text-primary);
}

.jet-form-messages-wrap .jet-form-message--error,
.jet-form-messages-wrap .error {
  background: #FEF2F2;
  border-left-color: var(--cds-support-error);
}

/* ============================================================
   Calendario y cupos — patrón Date Picker / Tag de Carbon
   ============================================================ */

.jet-apb-calendar-wrapper {
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-card);
  box-shadow: var(--cds-shadow-sm);
  padding: var(--cds-spacing-05);
  background: var(--cds-background);
  /* El calendario del plugin tiene ancho fijo (350px): que desplace dentro
     de su caja en lugar de desbordar la página. */
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.jet-apb-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding-bottom: var(--cds-spacing-05);
}

.jet-apb-calendar-header__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  text-transform: capitalize;
}

.jet-apb-calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--cds-text-primary);
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-apb-calendar-btn:hover {
  background: var(--cds-layer-hover-01);
}

/* Cabecera de días de la semana */
.jet-apb-calendar-week {
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
}

/* Celdas de día: cuadradas, sin radios y con área táctil suficiente.
   El plugin las deja en 50x21px, por debajo del mínimo recomendado. */
.jet-apb-calendar-date {
  border-radius: var(--cds-radius-field);
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-apb-calendar-date-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

@media (pointer: coarse) {
  .jet-apb-calendar-date-body { min-height: 44px; }
}

.jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled):hover {
  background: var(--cds-layer-hover-01);
  cursor: pointer;
}

.jet-apb-calendar-date--disabled {
  color: #c6c6c6;
  cursor: not-allowed;
}

/* Hoy: subrayado azul, como el Date Picker de Carbon */
.jet-apb-calendar-date--today:not(.jet-apb-calendar-date--selected) {
  box-shadow: inset 0 -2px 0 0 var(--cds-interactive);
}

.jet-apb-calendar-date--selected {
  background: var(--cds-interactive) !important;
  color: var(--cds-text-on-color) !important;
}

/* Avisos del calendario: helper text */
.jet-apb-calendar-notification {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
}

/* Botón de cierre del panel de cupos */
.jet-apb-calendar-slots__close {
  cursor: pointer;
  color: var(--cds-text-secondary);
}

/* Cupos horarios como tags rectangulares seleccionables */
.jet-apb-calendar-slots-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-05);
  padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle);
}

.jet-apb-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--cds-spacing-05);
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-field);
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              border-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-apb-slot:hover {
  background: var(--cds-layer-hover-01);
  border-color: var(--cds-border-strong);
}

.jet-apb-slot.selected,
.jet-apb-slot[aria-selected="true"],
.jet-apb-slot.jet-apb-slot--selected {
  background: var(--cds-interactive);
  border-color: var(--cds-interactive);
  color: var(--cds-text-on-color);
}

/* ============================================================
   Adaptación a pantallas pequeñas
   ============================================================ */

@media (max-width: 46.1875rem) {
  .entry-content .wp-block-columns { gap: var(--cds-spacing-06); }
  .wp-block-button__link,
  .jet-form__submit { width: 100%; max-width: none; }
  .entry-content > .wp-block-separator { margin-block: var(--cds-spacing-07); }
  .jet-apb-calendar-wrapper { padding: var(--cds-spacing-03); }
  .jet-form__submit { min-width: 0; }
}

/* ============================================================
   Cabecera y pie — patrón UI Shell de Carbon
   ============================================================ */

/* --- Cabecera: barra clara, fija arriba --------------------- */

/* El sticky va en el envoltorio del template part: la caja de .carbon-header
   mide solo 48px, así que fijarlo ahí lo haría desaparecer con el scroll. */
header.wp-block-template-part:has(.carbon-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Las anclas no deben quedar debajo de la barra fija */
.entry-content [id],
[id] {
  scroll-margin-top: 5rem;
}

.carbon-header {
  min-height: 3.5rem;
  background: rgba(253, 252, 251, 0.85);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--cds-border-subtle);
  /* Antes centraba el contenido a lo ancho de --cds-container; ahora, sin
     caja, es un gutter fijo igual al del resto del sitio. */
  padding-inline: var(--cds-spacing-07);
  margin-block: 0;
  gap: var(--cds-spacing-05);
  flex-wrap: nowrap;
}

.carbon-header p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 3.5rem;
}

.carbon-header a {
  color: var(--cds-text-primary);
  text-decoration: none;
  display: block;
  transition: color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.carbon-header a:hover {
  color: var(--cds-interactive);
}

/* El anillo cuadrado de Carbon queda mal sobre la barra: aquí el foco se marca
   con subrayado y color, que es discreto y sigue siendo visible con teclado. */
.carbon-header a:focus-visible {
  outline: none;
  color: var(--cds-interactive);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.carbon-header__nav p.carbon-header__action > a:focus-visible {
  outline: none;
  text-decoration: none;
  background: var(--cds-button-primary-active);
  color: var(--cds-text-on-color);
}

/* Marca con el punto de color delante */
.carbon-header__brand a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.carbon-header__brand a::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cds-radius-pill);
  background: var(--cds-interactive);
  flex: 0 0 0.5rem;
}

.carbon-header__brand strong { font-weight: 600; }
.carbon-header__brand span { color: var(--cds-text-secondary); font-weight: 400; }

.carbon-header__nav {
  gap: var(--cds-spacing-06);
  align-items: center;
  flex-wrap: nowrap;
}

.carbon-header__nav > p > a {
  font-size: 0.9375rem;
  color: var(--cds-text-secondary);
}

/* Acción principal de la cabecera: misma piel que todos los botones
   primarios, en tamaño compacto (la regla vive en la sección de botones).
   Aquí solo el foco, que sobre la barra no lleva anillo. */
.carbon-header__nav p.carbon-header__action > a:focus-visible {
  outline: none;
  text-decoration: none;
}

/* El contenido no debe quedar pegado a la barra */
.wp-site-blocks > main,
.wp-site-blocks > .entry-content {
  padding-top: var(--cds-spacing-09);
}

/* --- Pie: bloque claro con columnas de enlaces -------------- */

.carbon-footer {
  border-top: 1px solid var(--cds-border-subtle);
  background: var(--cds-layer-01);
  padding-top: var(--cds-spacing-10);
  padding-bottom: var(--cds-spacing-07);
  margin-top: var(--cds-spacing-12);
}

/* El pie es de borde a borde; su contenido ahora también, con el mismo
   gutter fijo que el resto del sitio en vez de un ancho de caja. */
.carbon-footer > * {
  padding-inline: var(--cds-spacing-07);
  box-sizing: border-box;
  margin-inline: auto !important;
}

.carbon-footer .carbon-footer__cols {
  gap: var(--cds-spacing-07);
  margin-bottom: var(--cds-spacing-09);
}

.carbon-footer .wp-block-column {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.carbon-footer p {
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--cds-text-secondary);
  margin-block: 0 var(--cds-spacing-03);
}

.carbon-footer__title {
  font-weight: 600;
  color: var(--cds-text-primary) !important;
  margin-bottom: var(--cds-spacing-05) !important;
}

.carbon-footer a {
  color: var(--cds-link-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.carbon-footer a:hover {
  color: var(--cds-link-primary-hover);
  border-bottom-color: currentColor;
}

.carbon-footer__legal {
  padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle);
  color: var(--cds-text-helper) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32px;
}

/* --- Cabecera y pie en pantallas pequeñas ------------------- */

@media (max-width: 46.1875rem) {
  /* WordPress declara estas variables en `body`, no en `:root`: hay que
     sobrescribirlas ahí o el valor de escritorio sigue ganando. */
  body {
    --wp--style--root-padding-left: var(--cds-spacing-05);
    --wp--style--root-padding-right: var(--cds-spacing-05);
  }
  .carbon-header { padding-inline: var(--cds-spacing-05); }
  .carbon-header__nav > p:not(.carbon-header__action) { display: none; }
  .carbon-header__brand span { display: none; }
  .carbon-footer .carbon-footer__cols { gap: var(--cds-spacing-06); }
}

/* ============================================================
   Páginas de tarea (registro, agendar): columna centrada
   ============================================================
   En las landings el eje a la izquierda organiza bloques de distinto ancho.
   En una página que es solo un formulario no hay nada que alinear y el eje
   izquierdo deja medio ancho vacío. Aquí la columna se estrecha y se centra.
   El texto sigue alineado a la izquierda: centrar párrafos y etiquetas de
   campo los vuelve más difíciles de leer.
*/

.fc-pagina-formulario {
  --cds-columna-tarea: 34rem;
}

/* En las páginas de tarea el segmento «Para profesionales / Para empresas»
   no se muestra: la cabecera queda solo con marca y acción. */
.fc-pagina-formulario .carbon-header__segment {
  display: none;
}

.fc-pagina-formulario .entry-content {
  max-width: calc(var(--cds-columna-tarea) + 2 * var(--wp--style--root-padding-left, 2rem));
}

.fc-pagina-formulario .entry-content > *,
.fc-pagina-formulario .entry-content .jet-form {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* El calendario tiene ancho fijo: se centra dentro de la columna */
.fc-pagina-formulario .jet-apb-calendar-wrapper {
  display: flex;
  justify-content: center;
}

/* ============================================================
   Aviso de cookies
   ============================================================ */

#cookie-notice,
#cookie-notice * {
  font-family: var(--wp--preset--font-family--plex-sans) !important;
}

#cookie-notice .cn-text-container {
  font-size: 0.875rem;
  line-height: 1.43;
}

/* «Solo lo imprescindible»: acción secundaria sobre el fondo oscuro del
   banner. Tamaño y radio ya vienen de la piel compartida; aquí solo el
   color, que no puede ser el secundario claro de la página. */
#cookie-notice .cn-set-cookie.cn-button ~ .cn-button,
#cookie-notice #cn-refuse-cookie {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   Aviso de campo obligatorio
   ============================================================ */

.fc-campo-invalido .jet-form__field,
.fc-campo-invalido .jet-apb-calendar-wrapper {
  border-color: var(--cds-support-error);
  box-shadow: inset 0 0 0 1px var(--cds-support-error);
}

.fc-campo-invalido .jet-form__label-text {
  color: var(--cds-support-error);
}

.fc-aviso-campo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--cds-spacing-03);
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-support-error);
}

.fc-aviso-campo::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-alerta) center / contain no-repeat;
  mask: var(--cds-alerta) center / contain no-repeat;
}

:root {
  --cds-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm-1 8h2v10h-2zm1 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 26z'/%3E%3C/svg%3E");
}

.fc-nota-paso {
  margin-block: var(--cds-spacing-03) 0;
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
}

.fc-nota-paso[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 *  Landing de 2 columnas: contenido + tarjeta del curso (fija)
 *  Solo en las páginas con template page-landing (inicio y empresas).
 *  El grid solo es de 2 columnas cuando el aside tiene contenido
 *  (:has + :not(:empty)); vacío, la página queda a 1 columna igual
 *  que siempre. Navegadores sin :has() quedan a 1 columna (fallback
 *  degradado, nunca roto).
 * ------------------------------------------------------------------ */
/* La columna del curso corre pegada al header por arriba y al footer por
 * abajo: se quitan el margen y el padding superiores del main en las landings
 * (la franja vacía que dejaba la columna sin tocar el header) y el margen
 * superior del footer. El grid ya no tiene ancho de caja propio: ocupa el
 * 100% disponible (ancho completo), la columna del curso se queda en 24rem
 * fija — es una tarjeta de UI, no texto corrido, no le aplica la regla de
 * "todo ancho completo". */
/* WordPress le pone su padding de "root" (2rem) a este <main> por ser
   layout "constrained" -- aparte y ENCIMA del padding propio de
   `.entry-content` (otros 2rem). Resultado real medido: el texto quedaba
   a 64px del borde en vez de 32px, y la columna del curso terminaba 32px
   antes del borde derecho real -- el "margen blanco" que se veía y que
   contradice ancho completo. Se neutraliza aquí; el único gutter que debe
   quedar es el de `.entry-content` (para el texto) y el padding propio
   de la tarjeta del curso (para su contenido). */
main.fc-landing{margin-top:0;padding-top:0;padding-inline:0}
.wp-site-blocks:has(main.fc-landing) > footer{margin-top:0}
.fc-landing__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch}
/* El grid es `is-layout-flow` en el marcado de WordPress: a su segundo hijo
 * (el aside) le cae un margin-block-start de 1.5rem que lo separaba 24px del
 * header. En un grid eso no debe existir: se neutraliza. */
.fc-landing__grid > *{margin-block-start:0;margin-block-end:0}
.fc-landing__grid:has(.fc-landing__aside:not(:empty)){grid-template-columns:minmax(0,1fr) 30rem}
.fc-landing__main{padding-top:var(--cds-spacing-09)}
.fc-landing__aside{position:relative;background:var(--cds-layer-01);border-left:1px solid var(--cds-border-subtle, #e3e3e3);padding:2rem}
/* El selector profesionales/empresas vivía en el header, igual en todas
   las páginas -- pero solo tiene sentido en estas dos (son las únicas con
   ese contraste). Ahora abre el sidebar de cada una: mismo widget, sin
   ancho propio (`display:flex` de `.carbon-header__segment`), así que se
   centra a mano en vez de heredar la alineación del header. */
.fc-landing__aside-segmento{width:fit-content;margin:0 auto var(--cds-spacing-06)}
.fc-landing__aside .fc-tarjeta{position:sticky;top:5.5rem}
/* El formulario es más alto que la pantalla. Pegado (sticky) y sin scroll
   propio (regla de arriba), el final del formulario -- checkbox, botón de
   enviar -- quedaría fuera de la vista y sin manera de llegar a él: sticky
   no se mueve más una vez pegado, y ya no hay scroll interno que lo
   revele. Con el formulario abierto, que fluya normal en la página. */
.fc-landing__aside .fc-tarjeta:has(.fc-tarjeta__formulario:not([hidden])){position:static;top:auto}
.fc-landing__main .entry-content{max-width:100%}

@media (max-width:64rem){
	.fc-landing__grid:has(.fc-landing__aside:not(:empty)){grid-template-columns:minmax(0,1fr)}
	/* El fondo de panel es un recurso de la columna lateral de escritorio;
	   en móvil esto es una tarjeta más en el flujo, no un sidebar aparte. */
	.fc-landing__aside{position:static;background:none;border-left:none;padding:0}
}

/* ------------------------------------------------------------------ *
 *  Columna del curso (aside fijo de las landings) — sin piel de card,
 *  contenido directo sobre el fondo.
 *
 *  Tokens: los colores y radios reutilizan los tokens --cds-* del tema
 *  para no duplicar la paleta: text-secondary (gris de apoyo),
 *  accent-soft (fondo índigo claro del aviso de cohorte),
 *  button-primary/hover (CTA) y radius-card/field (esquinas). Se
 *  conservan literales donde no existe token equivalente: el borde
 *  discontinuo índigo #b9b5f2 y el radio de 6px del aviso de cohorte
 *  (el radio de campo, 8px, queda grande para esa cajita).
 * ------------------------------------------------------------------ */
.fc-tarjeta{display:flex;flex-direction:column;gap:.75rem;max-height:calc(100vh - 6rem);overflow-y:auto}
/* Con el formulario abierto, dos scrollbars verticales muy cerca (la de la
   tarjeta + la de la página) se veían recargadas. Con el formulario, que
   la página entera scrollee -- un solo scrollbar -- como ya pasa en el
   overlay de móvil, donde nunca hubo doble scroll. */
.fc-tarjeta:has(.fc-tarjeta__formulario:not([hidden])){max-height:none;overflow-y:visible}
/* Sin borde, el fondo casi blanco de la portada se pierde contra el
   fondo de la tarjeta (los dos rondan #FDFCFB). El borde sutil es lo
   que la separa; no es una decisión de estilo, es la única forma de
   que se note que ahí hay una imagen. */
.fc-tarjeta__portada{width:100%;height:auto;border:1px solid var(--cds-border-subtle,#e3e3e3);border-radius:var(--cds-radius-field);display:block;box-sizing:border-box}
.fc-tarjeta__nombre{font-size:1.05rem;font-weight:700;line-height:1.3;margin:0}
.fc-tarjeta__nombre small{display:block;font-size:.8rem;font-weight:400;color:var(--cds-text-secondary);margin-top:.2rem}
.fc-tarjeta__precio{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}
.fc-tarjeta__precio small{display:block;font-size:.75rem;font-weight:400;color:var(--cds-text-secondary);margin-top:.2rem}
/* Deslizador de asistentes (solo /empresas/): sustituye al precio estático.
   Rango nativo 4–10 con total en vivo; reutiliza los tokens --cds-* del tema
   (interactive para el control, text-secondary para las notas). */
.fc-tarjeta__asistentes{display:flex;flex-direction:column;gap:.55rem;margin:0}
.fc-tarjeta__asistentes-label{font-size:.85rem;font-weight:600;margin:0}
.fc-tarjeta__asistentes-total{font-size:1.5rem;font-weight:700;line-height:1.2;margin:0}
.fc-tarjeta__asistentes-rango{width:100%;margin:0;accent-color:var(--cds-interactive,#4F46E5)}
.fc-tarjeta__asistentes-escala{display:flex;justify-content:space-between;font-size:.72rem;color:var(--cds-text-secondary);margin:-.1rem 0 0}
.fc-tarjeta__asistentes-nota{font-size:.75rem;color:var(--cds-text-secondary);margin:0}
.fc-tarjeta__asistentes-nota small{display:block;font-size:.7rem;margin-top:.15rem}
.fc-tarjeta__cohorte{font-size:.85rem;color:var(--cds-text-secondary);background:var(--cds-accent-soft);border:1px dashed #b9b5f2;border-radius:6px;padding:.5rem .65rem;margin:0}
/* Color, peso, alto y hover del botón salen de la piel compartida (ver
   ".fc-tarjeta__cta" en la sección de botones) — aquí solo el layout:
   ancho completo en la columna angosta de la tarjeta, que ningún otro
   botón del sitio necesita. */
.fc-tarjeta__cta{width:100%;justify-content:center;box-sizing:border-box}
.fc-tarjeta__nota{font-size:.75rem;color:var(--cds-text-secondary);text-align:center;margin:0}
.fc-tarjeta__incluye{margin:.25rem 0 0;padding-left:1.1rem;font-size:.82rem;color:var(--cds-text-secondary);display:grid;gap:.3rem}

/* ------------------------------------------------------------------ *
 *  Panel del formulario dentro de la tarjeta (agendar sin salir de
 *  la página — ver el toggle en functions.php, "Agendar sin salir
 *  de la página"). Dos estados: en el lugar (desktop sticky o la
 *  tarjeta en el flujo de móvil) y overlay (disparado desde la barra
 *  fija de móvil, que vive lejos de la tarjeta en el documento).
 * ------------------------------------------------------------------ */
/* [hidden] del navegador es display:none, pero un selector de clase pesa
   más que un selector de atributo — sin :not([hidden]) esta regla ganaba
   y el panel quedaba visible aunque tuviera el atributo puesto. Bug real,
   no hipotético: se vio en vivo con la ventana ancha (resumen y formulario
   los dos a la vista al mismo tiempo). Mismo patrón que ya se usa en
   `.carbon-header__menu:not([hidden])`, más arriba. */
.fc-tarjeta__formulario:not([hidden]){display:flex;flex-direction:column;gap:.6rem}
.fc-tarjeta__volver{align-self:flex-start;background:none;border:none;padding:.25rem 0;margin:0;color:var(--cds-text-secondary);font-size:.85rem;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fc-tarjeta__volver:hover{color:var(--cds-text-primary)}
.fc-tarjeta__formulario-titulo{font-size:1.05rem;font-weight:700;margin:0}
.fc-tarjeta__formulario-nota{font-size:.8rem;color:var(--cds-text-secondary);margin:0 0 .25rem}

/* Overlay de móvil: la tarjeta vive al final del contenido, lejos de la
   barra fija — sin esto, "abrir el formulario" significaría saltar de
   golpe al final de una página larga. Cubre la pantalla en el lugar
   donde la persona ya está. */
.fc-tarjeta__formulario.is-overlay-movil{
	position:fixed;
	inset:0;
	z-index:200;
	max-height:none;
	background:var(--cds-surface,#fff);
	overflow-y:auto;
	margin:0;
	padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));
}
body.fc-sin-scroll{overflow:hidden}

/* El calendario de JetAppointments fija `.jet-apb-calendar-content` en
   350px (width, min-width Y flex-basis) — un mínimo pensado para la
   columna ancha de /agendar/. En los ~300px de la tarjeta eso se salía
   por la derecha con scroll horizontal propio del calendario. Las
   celdas de día ya son fluidas (flex-basis:14.28%); el problema era
   solo este contenedor. */
.fc-tarjeta__formulario .jet-apb-calendar-content{width:100%;min-width:0;flex-basis:auto}

/* ------------------------------------------------------------------ *
 *  Navegación segmentada del header (profesionales / empresas)
 *
 *  Tokens: el pill usa --cds-layer-01 (fondo neutro), --cds-radius-pill
 *  (esquinas redondeadas), --cds-text-secondary/primary (tinta) y
 *  --cds-interactive + --cds-text-on-color para la pestaña activa. La
 *  pestaña activa se marca por JS (aria-current), no queda fija en el
 *  template part, que es compartido entre todas las páginas.
 * ------------------------------------------------------------------ */
.carbon-header__segment{display:flex;gap:.25rem;background:var(--cds-layer-01);border-radius:var(--cds-radius-pill);padding:.2rem}
.carbon-header__segment a{font-size:.85rem;font-weight:600;text-decoration:none;color:var(--cds-text-secondary);padding:.3rem .8rem;border-radius:var(--cds-radius-pill)}
.carbon-header__segment a:hover{color:var(--cds-text-primary)}
.carbon-header__segment a[aria-current="page"]{background:var(--cds-interactive);color:var(--cds-text-on-color)}

/* Pestañas del segmento: en pantalla táctil quedan en 30px de alto,
   por debajo del mínimo recomendado de 44px. Mismo criterio que el
   calendario de /agendar/ (línea ~837): solo crece en pointer:coarse,
   el tamaño compacto de escritorio no cambia. */
@media (pointer: coarse) {
  .carbon-header__segment a { padding: .75rem 1rem; }
}

/* En móvil la marca, el segmento y el CTA no caben en una sola fila
   (390px): el header pasa a dos filas. La marca queda arriba y, debajo,
   el segmento a la izquierda y el CTA a la derecha. Sin este wrap, la
   página desborda en horizontal (scrollWidth > viewport). */
@media (max-width: 46.1875rem) {
	.carbon-header { flex-wrap: wrap; row-gap: var(--cds-spacing-03); }
	.carbon-header__nav { flex: 1 1 100%; justify-content: space-between; gap: var(--cds-spacing-03); flex-wrap: wrap; }
}

/* Menú del header (enlaces a inicio/empresas/agendar/contacto).
   Solo existe visualmente en el breakpoint donde el header ya pasa a dos
   filas: en escritorio el segmento de dos pestañas ya es todo el nivel
   superior de navegación que existe, y el resto (agendar, contacto) está
   a un scroll de distancia o en la tarjeta sticky. En móvil, antes de
   esto, la única forma de llegar a /agendar/ o al contacto sin usar un
   CTA en medio del contenido era bajar hasta el footer. El botón abre
   `#fc-menu-movil` en flujo normal (empuja el contenido, no se superpone
   a nada) — comportamiento en functions.php, sección "Menú del header". */
.carbon-header__menu-btn{display:none;background:none;border:none;padding:.5rem;margin:0;color:var(--cds-text-primary);cursor:pointer;border-radius:var(--cds-radius-field)}
.carbon-header__menu-btn:hover{background:var(--cds-layer-01)}
.carbon-header__menu{display:none}

@media (max-width: 46.1875rem) {
	.carbon-header__menu-btn{display:flex;align-items:center;justify-content:center}
	.carbon-header__menu:not([hidden]){display:flex;flex-direction:column;flex-basis:100%;gap:.1rem;margin-top:var(--cds-spacing-03);border-top:1px solid var(--cds-border-subtle,#e3e3e3);padding-top:var(--cds-spacing-03)}
	.carbon-header__menu a{padding:.75rem .25rem;color:var(--cds-text-primary);text-decoration:none;font-size:.9rem}
	.carbon-header__menu a:hover{color:var(--cds-interactive,#4F46E5)}
	/* Agendar asesoría es la única acción del menú, no un enlace más: usa
	   la piel de botón compartida (.carbon-header__action, sección de
	   botones) en vez del estilo de texto plano de sus vecinos. El <p>
	   trae margen de navegador por defecto que hay que anular para que
	   no rompa el gap ajustado (.1rem) del resto de la lista. */
	.carbon-header__menu .carbon-header__action{margin:.35rem 0}
}

/* Botón del menú: mismo criterio de tap target que el segmento y el
   calendario (líneas ~837 y ~1296) — solo crece en pantalla táctil. */
@media (pointer: coarse) {
	.carbon-header__menu-btn{padding:.75rem}
}

/* "Iniciar sesión" del header: botón compacto en escritorio; en móvil vive
   dentro del menú como enlace, así que el botón de escritorio se oculta para
   no llenar la segunda fila (marca + segmento + hamburguesa). */
.carbon-header__login { display: inline-flex; }

@media (max-width: 46.1875rem) {
	.carbon-header__login { display: none; }
}

/* «Salir» del header (solo aparece con sesión abierta, ver functions.php):
   enlace de texto simple junto al botón "Mi aula" -- no la piel de botón
   compartida, que llenaría el header de dos píldoras moradas. Solo vive en
   escritorio; en móvil, la misma sesión ya trae sus tres líneas dentro del
   menú (Mi aula / Instalación / Salir), con el estilo de esa lista. */
.carbon-header__salir{font-size:.85rem;font-weight:600;color:var(--cds-text-secondary);text-decoration:none;margin-left:var(--cds-spacing-03)}
.carbon-header__salir:hover{color:var(--cds-text-primary)}

@media (max-width: 46.1875rem) {
	.carbon-header__nav > a.carbon-header__salir{display:none}
}

/* ------------------------------------------------------------------ *
 *  Lista informativa de próximas semanas (columna del curso)
 * ------------------------------------------------------------------ */
.fc-tarjeta__semanas{margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.fc-tarjeta__semanas-titulo{font-size:.85rem;font-weight:700;margin:0 0 .35rem}
.fc-tarjeta__semanas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
/* Puramente informativas: no se eligen tocando una fila, la fecha se
   elige en el calendario de /agendar/. Sin :hover a propósito — un
   cambio de fondo al pasar el mouse sugiere que se puede seleccionar. */
.fc-tarjeta__semanas li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.4rem .55rem;border:1px solid var(--cds-border-subtle,#e3e3e3);border-radius:var(--cds-radius-field,8px);font-size:.85rem}
.fc-tarjeta__semana-fechas{line-height:1.25}
.fc-tarjeta__semana-libre{font-size:.75rem;color:var(--cds-text-secondary,#666);white-space:nowrap}
.fc-tarjeta__disponibilidad{font-size:.75rem;color:var(--cds-text-secondary,#666);margin:.45rem 0 0;display:flex;align-items:center;gap:.35rem;position:relative}
.fc-tarjeta__info{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid var(--cds-border-subtle,#e3e3e3);border-radius:50%;font-size:.65rem;cursor:help;color:var(--cds-text-secondary,#666)}
.fc-tarjeta__info:focus-visible{outline:2px solid var(--cds-interactive,#4F46E5);outline-offset:1px}
.fc-tarjeta__tooltip{display:none;position:absolute;bottom:calc(100% + 6px);right:0;z-index:60;width:max-content;max-width:14rem;padding:.45rem .65rem;background:var(--cds-text-primary,#292524);color:var(--cds-text-on-color,#fff);font-size:.75rem;line-height:1.35;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fc-tarjeta__tooltip::after{content:"";position:absolute;top:100%;right:.9rem;border:5px solid transparent;border-top-color:var(--cds-text-primary,#292524)}
.fc-tarjeta__info:hover ~ .fc-tarjeta__tooltip,.fc-tarjeta__info:focus-visible ~ .fc-tarjeta__tooltip,.fc-tarjeta__info.fc-abierto ~ .fc-tarjeta__tooltip{display:block}

/* ------------------------------------------------------------------ *
 *  Barra inferior móvil (landings con page-landing): el CTA único
 *  siempre accesible en pantallas angostas.
 * ------------------------------------------------------------------ */
.fc-barra-movil{display:none}
@media (max-width:64rem){
	.fc-barra-movil{display:flex;align-items:center;gap:.75rem;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--cds-surface,#fff);border-top:1px solid var(--cds-border-subtle,#e3e3e3);box-shadow:0 -2px 10px rgba(15,15,15,.08);padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px))}
	body{padding-bottom:4.5rem}  /* que la barra no tape el footer: clearance global al final del documento */
	.fc-barra-movil__precio{font-weight:700;font-size:.95rem;line-height:1.1;white-space:nowrap}
	.fc-barra-movil__precio small{display:block;font-size:.62rem;font-weight:400;color:var(--cds-text-secondary,#666)}
	.fc-barra-movil__semana{flex:1;font-size:.75rem;color:var(--cds-text-secondary,#666);line-height:1.2}
	.fc-barra-movil__cta{background:var(--cds-button-primary,#4F46E5);color:var(--cds-text-on-color,#fff) !important;text-decoration:none;font-weight:600;font-size:.9rem;padding:.7rem 1.1rem;border-radius:var(--cds-radius-field,8px);white-space:nowrap}
	.fc-barra-movil__cta:hover{background:var(--cds-button-primary-hover,#4338ca)}
}

/* ------------------------------------------------------------------ *
 *  Popup de inicio de sesión (header): el mismo [fc_aula] de
 *  /iniciar-sesion/, en una ventana modal en vez de una página aparte.
 *  Vive como hijo directo de <body> (ver functions.php), por encima de
 *  todo lo demás -- la barra fija de móvil (90) y el panel de
 *  agendamiento en overlay (200) incluidos.
 * ------------------------------------------------------------------ */
.fc-login-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.fc-login-overlay[hidden]{display:none}
.fc-login-overlay__fondo{position:absolute;inset:0;background:rgba(28,25,23,.45)}
.fc-login-overlay__caja{position:relative;width:100%;max-width:26rem;max-height:calc(100vh - 2.5rem);overflow-y:auto;overflow-x:hidden;background:var(--cds-surface);border-radius:var(--cds-radius-card);box-shadow:var(--cds-shadow-md);padding:2rem}
.fc-login-overlay__cerrar{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--cds-radius-field);color:var(--cds-text-secondary);font-size:1.25rem;line-height:1;cursor:pointer}
.fc-login-overlay__cerrar:hover{background:var(--cds-layer-hover-01)}
.fc-login-overlay__caja .fca-entrada{max-width:none;margin:0}
.fc-login-overlay__caja .fca-entrada h2{margin-top:0}
.fc-login-overlay__carga{color:var(--cds-text-secondary);font-size:.9rem}