/* ezequielbossio.com v1. IBM Plex Sans 400 y 500, tokens de brand/tokens.json. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
}

:root {
  --grafito: #22262A;
  --gris-texto: #6B7075;
  --platino: #D5D9DC;
  --platino-claro: #F2F3F4;
  --acero: #4E8F97;
  --acero-texto: #3A6E76;  /* teal mas oscuro, cumple WCAG AA (>=4.5:1) sobre fondo claro, para texto chico */
  --grafito-suave: #343A40;
  --blanco: #FFFFFF;

  --fuente: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --ancho-contenedor: 1120px;
  --margen: 48px;
  --columna-titulo: 288px;
  --hueco: 48px;
  --medida: 38rem;
  --salto-seccion: 112px;
}

* { box-sizing: border-box; }

html {
  background: var(--platino-claro);
  color: var(--grafito);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 26px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--platino-claro);
  color: var(--grafito);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, ol, ul { margin: 0; }

/* Contenedor común */
.cabecera, .portada, .seccion, .pie {
  max-width: var(--ancho-contenedor);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}

/* Cabecera: monograma y la única etiqueta de la página */
.cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 48px;
}
/* Lockup horizontal de la guía: símbolo, línea vertical de acero de 1 px y nombre en Medium.
   Proporciones del lockup oficial (640 × 240) llevadas a una Z de 40 px. La línea es el único acero. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--grafito);
  text-decoration: none;
  padding: 12px;          /* área de protección: 19 % de 40 px, redondeado hacia arriba */
  margin: -12px;
}
.monograma { display: block; flex: none; }
.marca .linea {
  display: block;
  width: 1px;
  height: 37px;
  background: var(--acero);
}
.marca .nombre {
  font-size: 26px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.etiqueta {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-texto);
  padding-top: 12px;
  text-align: right;
}

/* Portada */
.portada {
  padding-top: 112px;
  padding-bottom: 96px;
}
/* Sin línea de acento sobre el titular: pedido de Ezequiel, 8 sep 2026. */
h1 {
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 44ch;
}
.frase { display: block; }   /* una oración por línea en escritorio */
.bajada {
  font-size: 20px;
  line-height: 28px;
  color: var(--gris-texto);
  max-width: var(--medida);
  margin-top: 24px;
}
.accion { margin-top: 40px; }
.boton {
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--grafito);
  text-decoration: none;
  border: 1px solid var(--grafito);
  border-radius: 2px;
  padding: 10px 20px;
}
.boton:hover { background: var(--platino); }

/* Secciones: título al margen, contenido a la derecha */
.seccion {
  border-top: 1px solid var(--platino);
  padding-top: 40px;
  padding-bottom: var(--salto-seccion);
  display: grid;
  grid-template-columns: var(--columna-titulo) minmax(0, 1fr);
  column-gap: var(--hueco);
  align-items: start;
}
.seccion:last-of-type { padding-bottom: 96px; }
h2 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-top: 2px;       /* alinea la altura de x con la primera línea de 20/28 */
}
.contenido { max-width: var(--medida); }
.contenido p + p { margin-top: 16px; }

.lineas, .subtitulo {
  font-size: 20px;
  line-height: 28px;
}
.lineas { max-width: none; }
.lineas p + p { margin-top: 4px; }

/* Qué hago: lista de definiciones separada por línea fina */
.servicios dt {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.servicios dd { margin-top: 8px; }
.servicios dd br { display: block; content: ""; margin-top: 8px; }
.contenido .subtitulo + .servicios { margin-top: 32px; }
.contenido .subtitulo + .preguntas { margin-top: 32px; }
.servicios dd + dt {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--platino);
}

/* Cómo trabajo: la única numeración de la página */
.pasos {
  list-style: none;
  padding: 0;
  counter-reset: paso;
}
.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
}
.pasos li + li { margin-top: 32px; }
.pasos li::before {
  content: counter(paso);
  font-size: 14px;
  line-height: 28px;
  color: var(--gris-texto);
  font-variant-numeric: tabular-nums;
}
.pasos h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  grid-column: 2;
}
.pasos p { grid-column: 2; margin-top: 8px; }

/* Enlace a una página secundaria, debajo de un bloque de texto */
.enlace-pagina { margin-top: 28px; }
.enlace-pagina + .enlace-pagina { margin-top: 10px; }
.accion + .enlace-pagina { margin-top: 32px; }

/* Página de preguntas */
.portada-breve { padding-bottom: 64px; }
.portada-breve h1 { max-width: 30ch; text-wrap: balance; }
.preguntas {
  list-style: none;
  padding: 0;
  counter-reset: pregunta;
}
.preguntas li {
  counter-increment: pregunta;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
}
.preguntas li + li { margin-top: 24px; }
.preguntas li::before {
  content: counter(pregunta);
  font-size: 14px;
  line-height: 28px;
  color: var(--gris-texto);
  font-variant-numeric: tabular-nums;
}
.preguntas p {
  font-size: 20px;
  line-height: 28px;
  grid-column: 2;
}
.contenido .subtitulo + p { margin-top: 24px; }

/* Cierre */
.enlaces {
  list-style: none;
  padding: 0;
  margin-top: 32px;
  font-size: 20px;
  line-height: 28px;
}
.enlaces li + li { margin-top: 12px; }

a {
  color: var(--grafito);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { text-decoration-thickness: 2px; }

/* Formulario de contacto */
.formulario { margin-top: 32px; }
.campo + .campo { margin-top: 20px; }
.campo label {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: var(--gris-texto);
  margin-bottom: 6px;
}
.campo input, .campo textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 26px;
  color: var(--grafito);
  background: var(--blanco);
  border: 1px solid var(--gris-texto);
  border-radius: 2px;
  padding: 8px 12px;
  margin: 0;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--grafito);
  outline-offset: 1px;
  border-color: var(--grafito);
}
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario .accion { margin-top: 24px; }
.boton { cursor: pointer; }
button.boton { font-family: inherit; background: transparent; }
.formulario + .enlaces { margin-top: 40px; }

/* Para leer: índice de las páginas, como en un documento, sin cajas */
.lecturas {
  list-style: none;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.lecturas li {
  border-top: 1px solid var(--platino);
  padding: 20px 0 28px;
}
.lecturas li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.lecturas a {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  text-decoration: none;
}
.lecturas a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lecturas p { margin-top: 8px; color: var(--gris-texto); }

/* Pie: lo único centrado */
.pie {
  border-top: 1px solid var(--platino);
  padding-top: 32px;
  padding-bottom: 48px;
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  color: var(--gris-texto);
}
.pie-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-bottom: 20px;
}
.pie-nav a { color: var(--grafito); text-decoration: none; }
.pie-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.pie-nav a[aria-current="page"] { color: var(--gris-texto); }

/* Pie: linea legal */

.pie-legal { font-size: 14px; line-height: 21px; }
.principal .pie-legal { font-size: 13px; line-height: 20px; }
.pie-legal a { color: var(--grafito); text-decoration: none; }
.pie-legal a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.pie-legal a[aria-current="page"] { color: var(--gris-texto); }

/* Nota debajo de un enlace de contacto */

.enlaces .nota-enlace {
  display: block;
  margin-top: 4px;
  color: var(--gris-texto);
  font-size: 14px;
  line-height: 21px;
}

/* Paginas legales */

.legal .contenido ol { margin: 16px 0 0; padding-left: 22px; }
.legal .contenido li + li { margin-top: 12px; }
.legal .dato { color: var(--gris-texto); }

/* Barra fija con acceso al resumen (10 sep 2026) */
.franja-esencial {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  width: 100%; max-width: 1120px; margin: 0 auto; box-sizing: border-box;
  padding: 10px 64px; background: var(--platino-claro);
  border-bottom: 1px solid var(--rule-soft);
}
.franja-desc { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-esencial { flex: none;
  background: var(--grafito); color: var(--platino-claro); border-color: var(--grafito);
  font-size: 14px; line-height: 20px; padding: 8px 18px;
}
.boton-esencial:hover { background: #16191C; border-color: #16191C; }
@media (max-width: 640px) {
  .franja-esencial { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .franja-desc { white-space: normal; overflow: visible; }
  .franja-esencial .boton-esencial { align-self: stretch; text-align: center; }
}


/* Gráfico integrador de /enfoque: el hilo, flujo compacto de mano alzada (14 sep 2026) */
.enfoque-hilo .hilo { display: flex; align-items: stretch; gap: 4px; margin-top: 20px; max-width: 44rem; }
.hilo-nodo { flex: 1; background: var(--blanco); border: 1.5px solid var(--grafito); border-radius: 14px 9px 13px 10px; padding: 12px 12px; }
.hilo-nodo:nth-of-type(odd) { transform: rotate(-0.4deg); }
.hilo-nodo:nth-of-type(even) { transform: rotate(0.4deg); border-radius: 9px 14px 10px 13px; }
.hilo-n { display: block; font-weight: 600; font-size: 12px; color: var(--acero-texto); margin-bottom: 4px; }
.hilo-t { margin: 0; font-weight: 600; font-size: 14px; line-height: 19px; color: var(--grafito); }
.hilo-flecha { width: 30px; flex: none; align-self: center; }
@media (max-width: 640px) {
  .enfoque-hilo .hilo { flex-direction: column; align-items: stretch; gap: 2px; }
  .hilo-flecha { width: 24px; height: 30px; transform: rotate(90deg); align-self: center; }
}

/* Foco de teclado */
:focus-visible {
  outline: 2px solid var(--grafito);
  outline-offset: 2px;
}
.boton:focus-visible { outline-offset: 3px; }

/* Selección de texto: sin color extra */
::selection { background: var(--platino); color: var(--grafito); }

/* La página no tiene movimiento; esta regla lo garantiza si algo cambia */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Tabletas: una columna, misma escala */
@media (max-width: 899px) {
  .seccion {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    padding-top: 32px;
  }
  h2 { padding-top: 0; }
}

/* Móvil */
@media (max-width: 599px) {
  :root {
    --margen: 20px;
    --salto-seccion: 72px;
  }
  .cabecera {
    flex-direction: column;
    gap: 20px;
    padding-top: 32px;
  }
  .etiqueta { text-align: left; padding-top: 0; }
  .portada { padding-top: 64px; padding-bottom: 64px; }
  .portada::before { margin-bottom: 24px; }
  h1 {
    font-size: 32px;
    line-height: 38px;
    text-wrap: balance;
  }
  .frase { display: inline; }
  .bajada, .lineas, .subtitulo, .servicios dt, .pasos h3, .enlaces {
    font-size: 18px;
    line-height: 26px;
  }
  .pasos li::before { line-height: 26px; }
  .pasos li { grid-template-columns: 32px minmax(0, 1fr); }
  .preguntas li { grid-template-columns: 32px minmax(0, 1fr); }
  .preguntas p { font-size: 18px; line-height: 26px; }
  .preguntas li::before { line-height: 26px; }
  .servicios dd + dt { margin-top: 24px; padding-top: 24px; }
  .seccion:last-of-type { padding-bottom: 64px; }
  .enlaces a { overflow-wrap: anywhere; }
  .lecturas { grid-template-columns: minmax(0, 1fr); }
  .lecturas li:nth-child(2) { border-top: 1px solid var(--platino); padding-top: 20px; }
  .lecturas a { font-size: 18px; line-height: 26px; }
  .pie-nav { gap: 8px 20px; }
  .lineas p + p { margin-top: 12px; }
}


/* ==========================================================================
   Diagrama con columna lateral (dirección B, 9 sep 2026)
   Escritorio: columna fija a la izquierda con la navegación siempre visible.
   Tabletas y teléfonos: la columna pasa a cabecera con la fila de enlaces desplazable.
   ========================================================================== */
.sitio {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}
.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  border-right: 1px solid var(--platino);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow-y: auto;
  scrollbar-width: none;
}
.lateral::-webkit-scrollbar { display: none; }
.lateral .marca { gap: 14px; padding: 8px; margin: -8px; }
.lateral .monograma { width: 33px; height: 32px; }
.lateral .marca .linea { height: 30px; }
.lateral .marca .nombre { font-size: 19px; line-height: 28px; }
.menu { display: flex; flex-direction: column; gap: 6px; }
.menu a {
  position: relative;
  font-size: 16px;
  line-height: 26px;
  color: var(--gris-texto);
  text-decoration: none;
}
.menu a:hover { color: var(--grafito); text-decoration: underline; text-decoration-thickness: 1px; }
.menu a[aria-current="page"] { color: var(--grafito); font-weight: 500; }
.menu a[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grafito);
}
.menu .separador { display: block; height: 1px; background: var(--platino); margin: 8px 0; }
.contacto-lateral {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 21px;
  color: var(--gris-texto);
}
.contacto-lateral a { color: var(--gris-texto); text-decoration: none; overflow-wrap: anywhere; }
.contacto-lateral a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.contacto-lateral .boton { color: var(--grafito); text-align: center; font-size: 15px; padding: 9px 16px; }

/* Área principal: el contenido se centra en el espacio que deja la columna */
.principal { display: flex; flex-direction: column; min-height: 100vh; }
.principal .portada, .principal .seccion {
  width: 100%;
  box-sizing: border-box;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}
.principal .seccion { grid-template-columns: 224px minmax(0, 1fr); column-gap: 40px; }
.principal .portada { padding-top: 96px; padding-bottom: 72px; }
.principal .portada .etiqueta { text-align: left; padding-top: 0; margin-bottom: 24px; }
.principal .pie {
  margin-top: auto;
  max-width: none;
  padding-left: 64px;
  padding-right: 64px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  padding-top: 28px;
  padding-bottom: 32px;
}
.principal .pie-nav { justify-content: flex-start; margin-bottom: 0; }

/* Ventanas bajas: el contacto sigue al menú en vez de pegarse abajo */
@media (max-height: 640px) {
  .lateral { gap: 24px; }
  .contacto-lateral { margin-top: 0; }
}

/* Entre 1000 y 1279 px el título va arriba del contenido */
@media (max-width: 1279px) {
  .principal .seccion {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    padding-top: 32px;
  }
  .principal h2 { padding-top: 0; }
  .principal .portada, .principal .seccion, .principal .pie { padding-left: 56px; padding-right: 56px; }
  .franja-esencial { padding-left: 56px; padding-right: 56px; }
}

/* Tabletas y teléfonos: la columna pasa a cabecera */
@media (max-width: 999px) {
  .sitio { display: block; }
  .lateral {
    position: static;
    height: auto;
    border-right: 0;
    padding: 24px var(--margen) 0;
    gap: 16px;
    overflow: visible;
  }
  .menu {
    flex-direction: row;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { font-size: 15px; line-height: 22px; }
  .menu .separador { display: none; }
  .contacto-lateral { display: none; }
  .principal { min-height: 0; }
  .principal .portada, .principal .seccion, .principal .pie { padding-left: var(--margen); padding-right: var(--margen); }
  .franja-esencial { padding-left: var(--margen); padding-right: var(--margen); }
  .principal .portada { padding-top: 56px; padding-bottom: 56px; }
  .principal .pie { justify-content: center; text-align: center; }
  .principal .pie-nav { justify-content: center; }
}


/* ==========================================================================
   Dirección G (9 sep 2026): mosaico de teselas con portada oscura.
   Regla nueva: sin líneas separadoras en ninguna parte. La separación es aire y fondo.
   Tipografía contenida: titular 34/40, títulos de tesela 18/25, cuerpo 15/23.
   ========================================================================== */
.lateral, .seccion, .pie, .servicios dd + dt, .lecturas li, .lecturas li:nth-child(2), .portada::before { border: 0; }
.lateral { border-right: 0; }
.principal .pie { border-top: 0; }

/* Cuerpo más chico en todo el sitio */
html { font-size: 15px; line-height: 23px; }
.principal p, .principal dd, .principal li { font-size: 15px; line-height: 23px; }
/* La etiqueta es un <p>: sin esta linea, la regla de arriba la agranda a 15px. */
.principal .etiqueta { font-size: 12px; line-height: 16px; }
.principal h2 { font-size: 22px; line-height: 28px; }
.principal .subtitulo, .principal .lineas, .principal .bajada, .principal .servicios dt, .principal .pasos h3, .principal .preguntas p, .principal .enlaces { font-size: 17px; line-height: 25px; }
.principal .portada-breve h1 { font-size: 30px; line-height: 36px; max-width: 34ch; }
.principal .portada-breve { padding-top: 64px; padding-bottom: 40px; }

/* Páginas interiores: cada sección es un bloque blanco */
.principal .seccion {
  background: var(--blanco);
  border-radius: 2px;
  padding: 32px 36px 36px;
  margin-bottom: 16px;
  max-width: 992px;
}
.principal .seccion:last-of-type { padding-bottom: 36px; }
.principal .servicios dd + dt { margin-top: 24px; padding-top: 0; }
.principal .lecturas li { padding: 12px 0 16px; }
.principal .pie { padding-top: 24px; padding-bottom: 32px; font-size: 13px; line-height: 20px; }

/* Mosaico de la portada */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
  grid-auto-flow: dense;
  gap: 16px;
  padding: 40px 64px 24px;
}
.tesela {
  position: relative;
  background: var(--blanco);
  border-radius: 2px;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  color: var(--grafito);
  text-decoration: none;
  min-height: 200px;
}
.tesela.ancha { grid-column: span 2; justify-content: flex-start; }
.tesela.problema { grid-column: span 3; }
.tesela .rotulo {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gris-texto);
}
.tesela.ancha .rotulo { position: static; margin-bottom: 14px; }
.tesela h2 {
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
}
.tesela .resumen, .tesela p { color: var(--gris-texto); }
.tesela.ancha p { color: var(--grafito); }
.tesela.ancha p + p { margin-top: 12px; }
.tesela .resumen a { color: var(--grafito); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tesela.enlace:hover, .tesela.enlace:focus-visible { background: #E9EBED; outline: none; }
.tesela.enlace:focus-visible { box-shadow: 0 0 0 2px var(--grafito); }
.tesela.enlace:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }


/* La tesela de portada, en grafito */
.tesela.oscura, .tesela.oscura:hover, .tesela.oscura:focus-within { background: var(--grafito); color: var(--platino-claro); }
.portada-tesela {
  grid-column: span 3;
  grid-row: span 1;
  background: var(--blanco);
  border-left: 3px solid var(--acero);
  justify-content: center;
  gap: 16px;
  padding: 44px 48px;
}
.portada-tesela .etiqueta { position: static; color: var(--gris-texto); padding: 0; margin: 0; text-align: left; }
.portada-tesela h1 { font-size: 34px; line-height: 40px; max-width: 22ch; color: var(--grafito); margin: 0; }
.portada-tesela .frase { display: inline; }
.portada-tesela .bajada { font-size: 17px; line-height: 26px; color: var(--gris-texto); max-width: 40rem; margin: 0; }
.portada-tesela .accion { margin-top: 8px; }
.portada-tesela .boton { color: var(--platino-claro); border-color: var(--platino); }
.portada-tesela .boton:hover { background: #3B4045; }

/* El problema, dentro de una tesela */
.tesela .lineas p { color: var(--grafito); font-size: 17px; line-height: 25px; margin: 0; }
.tesela .lineas p + p { margin-top: 6px; }

/* Cómo trabajo dentro de una tesela */
.tesela .pasos li { grid-template-columns: 32px minmax(0, 1fr); }
.tesela .pasos li + li { margin-top: 16px; }
.tesela .pasos h3 { font-size: 17px; line-height: 25px; margin: 0; }
.tesela .pasos p { margin-top: 4px; color: var(--grafito); }
.tesela .pasos li::before { line-height: 25px; }

/* Contacto: texto y formulario lado a lado */
.tesela.contacto {
  grid-column: span 4;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 48px;
  justify-content: start;
  padding: 32px 36px 36px;
}
.tesela.contacto .contacto-texto { display: flex; flex-direction: column; gap: 10px; }
.tesela.contacto .rotulo { position: static; }
.tesela.contacto h2 { font-size: 22px; line-height: 28px; }
.tesela.contacto p { color: var(--grafito); }
.tesela.contacto .enlaces { margin-top: 8px; font-size: 15px; line-height: 23px; }
.tesela.contacto .formulario { margin-top: 0; }
.tesela.contacto .campo input, .tesela.contacto .campo textarea { background: var(--platino-claro); border-color: var(--platino); }
.tesela.contacto .campo input:focus-visible, .tesela.contacto .campo textarea:focus-visible { border-color: var(--grafito); }

/* Entre 1000 y 1279 px: dos columnas */
@media (max-width: 1279px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 56px 24px; }
  .portada-tesela { grid-column: span 2; grid-row: span 1; }
  .tesela.problema { grid-column: span 2; }
  .tesela.contacto { grid-column: span 2; grid-template-columns: minmax(0, 1fr); }
  .principal .seccion { padding: 28px 32px 32px; }
}

/* Tabletas chicas y teléfonos: una columna, resumen siempre visible */
@media (max-width: 999px) {
  .mosaico { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; padding: 16px var(--margen) 8px; gap: 12px; }
  .tesela, .tesela.ancha, .tesela.problema, .portada-tesela, .tesela.contacto { grid-column: span 1; grid-row: span 1; min-height: 0; }
  .tesela { justify-content: flex-start; padding: 20px; }
  .tesela .rotulo { position: static; margin-bottom: 8px; }
  .portada-tesela { padding: 28px 22px 26px; gap: 12px; }
  .portada-tesela h1 { font-size: 28px; line-height: 34px; }
  .tesela.contacto { padding: 22px 20px 24px; }
  .principal .seccion { padding: 22px 20px 26px; margin: 0 var(--margen) 12px; max-width: none; }
  .principal .portada-breve { padding-top: 32px; padding-bottom: 24px; }
  .principal .portada-breve h1 { font-size: 26px; line-height: 32px; }
}


/* ==========================================================================
   Hoja limpia (9 sep 2026, tarde): las teselas muestran título y resumen y llevan a
   una página; el menú se puede ocultar y mostrar sin JavaScript; sin líneas.
   ========================================================================== */
.conmutador { position: absolute; left: -10000px; }
.menu .grupo { display: flex; flex-direction: column; gap: 6px; }
.menu .grupo + .grupo { margin-top: 20px; }
.contacto-lateral .ocultar, .barra-oculta .mostrar {
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
  color: var(--gris-texto);
}
.contacto-lateral .ocultar:hover, .barra-oculta .mostrar:hover { color: var(--grafito); text-decoration: underline; text-decoration-thickness: 1px; }
.barra-oculta { display: none; }

/* Menú oculto: la columna desaparece y queda una barra mínima con la Z y "Menú" */
.conmutador:checked ~ .sitio { grid-template-columns: minmax(0, 1fr); }
.conmutador:checked ~ .sitio .lateral { display: none; }
.conmutador:checked ~ .sitio .barra-oculta {
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 24px;
  background: var(--platino-claro);
}
.barra-oculta .marca-chica { color: var(--grafito); display: inline-flex; }
.conmutador:checked ~ .sitio .principal { min-height: calc(100vh - 52px); }

/* Teselas: todo visible, sin revelación */
.tesela .resumen { display: block; color: var(--gris-texto); }
.tesela.enlace { justify-content: flex-end; }
.tesela.enlace h2 { margin-top: 28px; }

/* Páginas interiores: todo el ancho menos el menú */
.principal .portada, .principal .seccion { max-width: none; margin-right: 0; }
.principal .portada { padding-left: 64px; padding-right: 64px; }
.principal .seccion { margin: 0 64px 16px; padding: 32px 36px 36px; }
.principal .seccion .contenido { max-width: 44rem; }
.principal .pie { padding-left: 64px; padding-right: 64px; }

@media (max-width: 1279px) {
  .principal .seccion { margin: 0 56px 16px; }
}
@media (max-width: 999px) {
  .contacto-lateral .ocultar, .barra-oculta { display: none !important; }
  .conmutador:checked ~ .sitio .lateral { display: flex; }
  .menu .grupo { flex-direction: row; gap: 22px; }
  .menu .grupo + .grupo { margin-top: 0; margin-left: 22px; }
  .principal .seccion { margin: 0 var(--margen) 12px; }
  .tesela.enlace h2 { margin-top: 0; }
}


/* ==========================================================================
   Ajuste (9 sep 2026, noche): sin scroll horizontal y menos alto en las páginas
   ========================================================================== */
.sitio { overflow-x: clip; }
.principal { min-width: 0; }
.principal .seccion { width: auto; }
.principal .portada { width: auto; max-width: none; }
.principal .portada-breve { padding-top: 40px; padding-bottom: 24px; }
.principal .portada-breve .etiqueta { margin-bottom: 14px; }
.principal .portada-breve h1 { margin-bottom: 0; }
.principal .portada-breve .bajada { margin-top: 12px; }
.principal .seccion { padding: 24px 32px 28px; margin-bottom: 12px; }
.principal .seccion h2 { margin-bottom: 4px; }
.principal .seccion .contenido { max-width: 52rem; }
.principal .contenido p + p { margin-top: 10px; }
.principal .servicios dd + dt { margin-top: 18px; }
.principal .pasos li + li { margin-top: 14px; }
.principal .preguntas li + li { margin-top: 12px; }
.principal .pie { padding-top: 40px; padding-bottom: 20px; }
.principal .pie-nav { margin-bottom: 0; }
.mosaico { padding-bottom: 8px; }
@media (max-width: 999px) {
  .principal .seccion { padding: 18px 18px 22px; margin-bottom: 10px; }
  .principal .portada-breve { padding-top: 24px; padding-bottom: 16px; }
}


/* ==========================================================================
   Agendar (9 sep 2026, noche): la acción principal del sitio
   ========================================================================== */
.boton.agenda { background: var(--grafito); color: var(--platino-claro); border-color: var(--grafito); }
.boton.agenda:hover { background: #16191C; border-color: #16191C; }
.tesela.oscura .boton.agenda { background: var(--platino-claro); color: var(--grafito); border-color: var(--platino-claro); }
.tesela.oscura .boton.agenda:hover { background: var(--platino); border-color: var(--platino); }
.accion .boton + .boton { margin-left: 10px; }
.contacto-lateral .boton.agenda { color: var(--platino-claro); }
.contacto-lateral .nota { font-size: 12px; line-height: 16px; color: var(--gris-texto); margin-top: -4px; text-align: center; }
.contacto-lateral .secundario { font-size: 14px; line-height: 21px; color: var(--grafito); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-align: center; }
.contacto-lateral .ocultar { text-align: center; margin-top: 6px; }

@media (max-width: 999px) {
  .lateral { position: relative; }
  .contacto-lateral { display: block; position: absolute; top: 22px; right: var(--margen); margin: 0; padding: 0; }
  .contacto-lateral .nota, .contacto-lateral .secundario, .contacto-lateral .ocultar { display: none; }
  .contacto-lateral .boton.agenda { display: inline-block; font-size: 14px; line-height: 20px; padding: 7px 12px; }
  .lateral .marca { max-width: calc(100% - 120px); }
  .lateral .marca .nombre { white-space: normal; line-height: 22px; }
  .accion .boton + .boton { margin-left: 0; margin-top: 10px; }
  .portada-tesela .accion { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
}

.contacto-lateral .boton.agenda .corto { display: none; }
@media (max-width: 999px) {
  .contacto-lateral .boton.agenda .largo { display: none; }
  .contacto-lateral .boton.agenda .corto { display: inline; }
  .lateral .marca { max-width: calc(100% - 96px); }
}


/* Cartelera de capacitaciones (9 sep 2026, noche) */
.cartelera dd { display: flex; flex-direction: column; gap: 4px; }
.cartelera .dato { color: var(--gris-texto); }
.cartelera .descripcion { color: var(--grafito); margin-top: 4px; }
.cartelera .inscripcion { margin-top: 6px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; align-self: flex-start; }
.cartelera-tesela { grid-column: span 4; justify-content: flex-start; }
.cartelera-tesela h2 { margin-top: 0; }
@media (max-width: 1279px) { .cartelera-tesela { grid-column: span 2; } }
@media (max-width: 999px) { .cartelera-tesela { grid-column: span 1; } }


/* Menú fijo de verdad (9 sep 2026, noche): posición fija en vez de pegajosa,
   porque el cerrojo horizontal anulaba el pegado en Chrome */
@media (min-width: 1000px) {
  .lateral { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; }
  .conmutador:checked ~ .sitio .lateral { display: none; }
}

@media (min-width: 1000px) {
  .principal { grid-column: 2; }
  .conmutador:checked ~ .sitio .principal { grid-column: 1; }
}


/* ==========================================================================
   Imágenes en las secciones vivas y panel de gestión (/gestion)
   ========================================================================== */
.cartelera .miniatura { display: block; max-width: 320px; width: 100%; height: auto; border-radius: 2px; margin: 4px 0 8px; }
.cartelera dt .retrato { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 10px; }

body.gestion { background: var(--platino-claro); }
.gestion-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 32px; }
.gestion-cabecera .marca { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--grafito); }
.gestion-cabecera .marca .nombre { font-size: 19px; line-height: 28px; font-weight: 500; }
.gestion-cabecera .etiqueta { text-align: left; padding: 0; }
.gestion-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; line-height: 21px; }
.gestion-nav a { color: var(--gris-texto); text-decoration: none; }
.gestion-nav a:hover { color: var(--grafito); text-decoration: underline; text-decoration-thickness: 1px; }
.gestion-principal { max-width: 960px; padding: 8px 32px 48px; display: flex; flex-direction: column; gap: 16px; }
.gestion-principal h1 { font-size: 26px; line-height: 32px; margin: 0; }
.gestion-principal h2 { font-size: 18px; line-height: 25px; margin: 16px 0 0; }
.gestion-principal p { margin: 0; }
.gestion-aviso, .gestion-error { background: var(--blanco); border-radius: 2px; padding: 12px 16px; font-size: 15px; }
.gestion-error { background: #F5DEDA; }
.gestion-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.gestion-mosaico .tesela { min-height: 140px; }
.gestion-mosaico .tesela h2 { margin-top: 24px; }
.gestion-lista { display: flex; flex-direction: column; gap: 8px; }
.gestion-fila { background: var(--blanco); border-radius: 2px; padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.gestion-fila .dato { color: var(--gris-texto); font-size: 14px; }
.gestion-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gestion-acciones form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.gestion-acciones .boton, .gestion-acciones button, .gestion-acciones select {
  font: inherit; font-size: 13px; line-height: 20px; padding: 5px 10px;
  border: 1px solid var(--grafito); border-radius: 2px; background: transparent; color: var(--grafito); cursor: pointer;
}
.gestion-acciones button.peligro { border-color: #9A3B2E; color: #9A3B2E; }
.gestion-form { background: var(--blanco); border-radius: 2px; padding: 20px 24px 24px; max-width: 640px; }
.gestion-form .campo + .campo { margin-top: 14px; }
.gestion-form .campo select { display: block; width: 100%; font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid var(--gris-texto); border-radius: 2px; background: var(--platino-claro); }
.gestion-form .campo input[type="file"] { display: block; width: 100%; font: inherit; font-size: 14px; }
.gestion-form .campo input, .gestion-form .campo textarea { background: var(--platino-claro); border-color: var(--platino); }
.gestion-form .campo-casilla { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gestion-form .campo-casilla input { width: auto; margin: 0; }
.gestion-form .campo-casilla label { margin: 0; color: var(--grafito); font-size: 15px; }
.gestion-form .ayuda, .gestion-principal .ayuda { display: block; width: 100%; font-size: 13px; line-height: 19px; color: var(--gris-texto); margin-top: 4px; }
.gestion-form .accion { margin-top: 18px; display: flex; align-items: center; gap: 16px; }
.gestion-form .accion a { font-size: 14px; }
.gestion-form .imagen-actual { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--gris-texto); }
.gestion-form .imagen-actual img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; }
.gestion-clave { font-size: 22px; line-height: 30px; letter-spacing: 0.08em; font-weight: 500; background: var(--blanco); border-radius: 2px; padding: 12px 16px; overflow-wrap: anywhere; }
.gestion-principal code { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .gestion-cabecera, .gestion-principal { padding-left: 20px; padding-right: 20px; }
  .gestion-mosaico { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   En palabras simples (9 sep 2026): dos versiones del texto en la misma página
   ========================================================================== */
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--grafito);
  background: var(--blanco);
  border: 0;
  border-radius: 2px;
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  margin-top: -12px;
}
@media (max-width: 999px) {
}

/* Titular simple de la portada: más largo, entra en cuatro o cinco líneas */


/* ==========================================================================
   Ajuste (10 sep 2026): el modo simple no estira las teselas de la portada
   ========================================================================== */
.tesela { min-width: 0; overflow-wrap: break-word; }
.tesela .resumen, .tesela h2, .tesela p { min-width: 0; }
@media (min-width: 1000px) {
}

/* Ajuste (10 sep 2026): bajada mas ancha para que la tesela oscura no estire la segunda fila */
.portada-tesela .bajada { max-width: 42rem; }


/* ==========================================================================
   Orden de lectura (10 sep 2026): filas con título, problema junto al titular,
   menú con dos grupos con nombre, menú en dos líneas en móvil, enlaces Siguiente
   ========================================================================== */
.mosaico { grid-auto-rows: auto; }
.mosaico .fila-titulo {
  grid-column: 1 / -1;
  margin: 12px 0 -6px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.tesela.problema { grid-column: span 1; grid-row: span 2; justify-content: flex-start; }
.tesela.problema .rotulo { position: static; margin-bottom: 14px; }
.tesela.problema .lineas p { font-size: 16px; line-height: 24px; color: var(--grafito); }
.tesela.problema .lineas p + p { margin-top: 10px; }
.cartelera-tesela { grid-column: span 2; }
.menu .grupo-titulo {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.enlace-pagina.siguiente .marca-siguiente {
  display: inline-block;
  margin-right: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
@media (max-width: 1279px) {
  .tesela.problema { grid-column: span 2; grid-row: span 1; }
  .cartelera-tesela { grid-column: span 2; }
}
@media (max-width: 999px) {
  .tesela.problema, .cartelera-tesela { grid-column: span 1; grid-row: span 1; }
  .mosaico .fila-titulo { margin: 8px 0 -4px; }
  .menu { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 10px; padding-bottom: 8px; }
  .menu .grupo { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; column-gap: 20px; }
  .menu .grupo + .grupo { margin-left: 0; }
  .menu .grupo-titulo { width: 100%; margin: 0; }
}


/* ==========================================================================
   Aire parejo en las teselas (10 sep 2026): todo alineado arriba, rótulo en
   flujo, títulos a la misma altura en cada fila; el problema centrado como el titular
   ========================================================================== */
.tesela.enlace { justify-content: flex-start; gap: 0; }
.tesela.enlace .rotulo { position: static; margin: 0 0 18px; }
.tesela.enlace h2 { margin: 0; }
.tesela.enlace .resumen { margin-top: 8px; }
.tesela.ancha .rotulo { margin-bottom: 18px; }
.tesela.problema { justify-content: center; }
.tesela.problema .rotulo { margin-bottom: 18px; }
@media (max-width: 999px) {
  .tesela.enlace .rotulo { margin-bottom: 12px; }
  .tesela.problema { justify-content: flex-start; }
}


/* Flechas de orden en el panel (10 sep 2026) */
.gestion-fila { gap: 10px 16px; align-items: center; }
.gestion-texto { flex: 1 1 240px; min-width: 0; }
.gestion-orden { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.gestion-orden .flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 24px; padding: 0; margin: 0;
  border: 1px solid var(--platino); border-radius: 2px; background: var(--platino-claro); color: var(--grafito); cursor: pointer;
}
.gestion-orden .flecha:hover:not(:disabled) { background: var(--platino); }
.gestion-orden .flecha:disabled { opacity: 0.3; cursor: default; }
.gestion-orden .flecha.ocupado { opacity: 0.5; }
.gestion-fila.movida { background: #E9EBED; transition: background 0.6s; }


/* ==========================================================================
   Menú desplegable en móvil (10 sep 2026): botón Menú junto a Conversemos;
   el menú y el conmutador de lenguaje se muestran solo al abrirlo
   ========================================================================== */
.hamburguesa { display: none; }
@media (max-width: 999px) {
  .contacto-lateral { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; }
  .hamburguesa > span { display: none; }
  .hamburguesa {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--grafito); border-radius: 2px; color: var(--grafito); background: var(--platino-claro);
    cursor: pointer; user-select: none;
  }
  .hamburguesa svg .cerrar { display: none; }
  #menu-movil:checked ~ .sitio .hamburguesa svg .abrir { display: none; }
  #menu-movil:checked ~ .sitio .hamburguesa svg .cerrar { display: inline; }
  .lateral .marca { max-width: calc(100% - 160px); }
  .lateral .marca .nombre { font-size: 17px; }
  .lateral { padding-bottom: 16px; gap: 0; }
  .lateral .menu { display: none; }
  #menu-movil:checked ~ .sitio .lateral .menu { display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding-bottom: 4px; }
  #menu-movil:checked ~ .sitio .lateral .menu .grupo { flex-direction: column; gap: 0; }
  #menu-movil:checked ~ .sitio .lateral .menu .grupo + .grupo { margin-top: 14px; }
  #menu-movil:checked ~ .sitio .lateral .menu a { font-size: 17px; line-height: 26px; padding: 6px 0; }
  #menu-movil:checked ~ .sitio .lateral .menu .grupo-titulo { margin: 0 0 4px; }
}


/* ==========================================================================
   Portada corta (10 sep 2026): cinco cajas y un bloque tranquilo
   ========================================================================== */
.tesela.tercio { grid-column: span 1; }
.mosaico.portada-mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.portada-tesela { grid-column: span 9; }
.tesela.problema { grid-column: span 3; }
.tesela.tercio { grid-column: span 4; }
.tesela.calmo { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px; justify-content: flex-start; min-height: 0; padding: 28px 32px 30px; }
.tesela.calmo .rotulo { position: static; margin: 0 0 10px; }
.tesela.calmo .calmo-col > p + .rotulo,
.tesela.calmo .calmo-col > ul + .rotulo { margin-top: 22px; }
.tesela.calmo p { color: var(--grafito); font-size: 15px; line-height: 23px; margin: 0; }
.tesela.calmo p a, .lista-leer a { color: var(--grafito); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lista-leer { list-style: none; margin: 0; padding: 0; }
.lista-leer li { font-size: 15px; line-height: 23px; color: var(--grafito); }
.lista-leer li + li { margin-top: 12px; }
.lista-leer .frase-lista { color: var(--gris-texto); }
@media (max-width: 1279px) {
  .mosaico.portada-mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .portada-tesela, .tesela.problema, .tesela.calmo { grid-column: 1 / -1; grid-row: span 1; }
  .tesela.tercio { grid-column: span 2; }
}
@media (max-width: 999px) {
  .mosaico.portada-mosaico { grid-template-columns: minmax(0, 1fr); }
  .tesela.tercio, .tesela.calmo { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Retrato en la portada de Sobre mí (9 sep 2026). Usa el mismo riel
   izquierdo que los títulos de sección, así el eje de la página no cambia.
   ========================================================================== */
.portada-retrato {
  display: grid;
  grid-template-columns: var(--columna-titulo) minmax(0, 1fr);
  column-gap: var(--hueco);
  align-items: start;
}
.principal .portada-retrato { grid-template-columns: 224px minmax(0, 1fr); column-gap: 40px; }
.retrato { display: block; width: 160px; height: 160px; border-radius: 2px; }
.oficio { max-width: var(--medida); margin-top: 28px; color: var(--grafito); }

@media (max-width: 1279px) {
  .principal .portada-retrato { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}
@media (max-width: 599px) {
  .retrato { width: 132px; height: 132px; }
}

/* ==========================================================================
   Resumen en una página (10 sep 2026). El enlace de la columna usa la misma
   caja que tenía el botón del modo simple.
   ========================================================================== */
.principal .portada.portada-resumen { padding-top: 56px; padding-bottom: 32px; }
.principal .seccion.resumen { display: block; padding-top: 36px; }
.resumen-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 56px; max-width: 64rem; }
.resumen-grilla h2 { font-size: 18px; line-height: 25px; margin: 0 0 8px; }
.resumen-grilla p, .resumen-grilla dd, .resumen-grilla li { font-size: 15px; line-height: 23px; margin: 0; }
.resumen-grilla dl, .resumen-grilla ol { margin: 0; padding: 0; }
.resumen-grilla ol { padding-left: 20px; }
.resumen-grilla dt { font-weight: 500; }
.resumen-grilla dd + dt, .resumen-grilla li + li { margin-top: 8px; }
.resumen-grilla .accion { margin-top: 14px; }
@media (max-width: 899px) {
  .resumen-grilla { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}


/* ==========================================================================
   Página /diagnostico (9 sep 2026). Tres datos clave en celdas blancas,
   separadas por aire y fondo, sin líneas. La lista de preguntas cierra con
   una frase en el tamaño de subtítulo.
   ========================================================================== */
.contenido .preguntas + .subtitulo { margin-top: 32px; }
.contenido .servicios + .subtitulo { margin-top: 32px; }
.datos-clave {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 48rem;
}
.datos-clave div { background: var(--blanco); border-radius: 2px; padding: 20px 22px; }
.datos-clave dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.datos-clave dd { margin-top: 8px; font-size: 20px; line-height: 28px; font-weight: 500; }
.datos-clave dd small { display: block; margin-top: 4px; font-size: 15px; line-height: 23px; font-weight: 400; color: var(--gris-texto); }
.principal .datos-clave dd { font-size: 17px; line-height: 25px; }
@media (max-width: 899px) {
  .datos-clave { grid-template-columns: minmax(0, 1fr); }
}

/* Los dos alcances del diagnóstico: tarjetas compactas, para leer de un vistazo. */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 48rem; margin-top: 24px; }
.planes > div { background: var(--blanco); border-radius: 2px; padding: 24px 24px 26px; }
.plan-nombre { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto); }
.plan-precio { margin-top: 8px; font-size: 20px; line-height: 28px; font-weight: 500; }
.plan-precio span { font-size: 15px; font-weight: 400; color: var(--gris-texto); }
.planes ul { margin: 16px 0 0; padding: 0; list-style: none; }
.planes li { position: relative; padding-left: 18px; font-size: 16px; line-height: 24px; color: var(--grafito); }
.planes li + li { margin-top: 8px; }
.planes li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--gris-texto); }
.notas-inversion { margin: 28px 0 0; padding: 0; list-style: none; max-width: 46rem; }
.notas-inversion li { font-size: 15px; line-height: 23px; color: var(--gris-texto); }
.notas-inversion li + li { margin-top: 8px; }
@media (max-width: 899px) {
  .planes { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Pedido de Ezequiel (9 sep 2026): los títulos de grupo del menú van en la
   misma letra que los enlaces, en Medium; el pie se ordena en columnas por
   tema, con LinkedIn y correo; el rótulo de la tesela de lectura acompaña.
   ========================================================================== */
.menu .grupo-titulo {
  margin: 0 0 2px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafito);
}
@media (max-width: 999px) {
  .menu .grupo-titulo { font-size: 15px; line-height: 22px; }
}
.tesela.calmo .rotulo { font-size: 15px; line-height: 23px; font-weight: 500; color: var(--grafito); }

.pie-nav, .principal .pie-nav {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: 20px 48px;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 0;
  width: 100%;
}
.pie-grupo { display: flex; flex-direction: column; gap: 4px; }
.pie-titulo { margin: 0 0 4px; font-weight: 500; color: var(--grafito); }
.pie-nav a { overflow-wrap: anywhere; }
.principal .pie { flex-direction: column; align-items: stretch; gap: 24px; }
.pie-legal { text-align: left; }
@media (max-width: 1279px) {
  .pie-nav, .principal .pie-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (max-width: 599px) {
  .pie-nav, .principal .pie-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .principal .pie { text-align: left; }
}


/* Remate de las siete preguntas: se resalta con aire y fondo, sin líneas */
.destacado {
  background: var(--platino);
  border-radius: 2px;
  padding: 18px 22px;
  font-weight: 500;
  max-width: var(--medida);
}


/* ==========================================================================
   Home v2 (15 sep 2026): pagina comercial editorial. Todo el estilo del Home
   nuevo esta namespaced bajo .home-v2 para no alterar el resto del sitio.
   Reutiliza tokens, tipografia y lenguaje visual existentes.
   ========================================================================== */
.home-v2 { color: var(--grafito); }
.home-v2 [id] { scroll-margin-top: 64px; }

.home-v2 .hv-hero,
.home-v2 .hv-sec {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
  box-sizing: border-box;
}

/* Hero: bloque dominante */
.home-v2 .hv-hero { padding-top: 72px; padding-bottom: 56px; }
.home-v2 .hv-h1 {
  margin: 0;
  font-size: 40px; line-height: 46px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--grafito); max-width: 17em;
}
.home-v2 .hv-lead {
  margin: 24px 0 0;
  font-size: 19px; line-height: 28px; color: var(--gris-texto); max-width: 40rem;
}
.home-v2 .hv-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 32px 0 0;
}
.home-v2 .hv-cta .boton { margin: 0; }
.home-v2 .hv-primario {
  background: var(--grafito); color: var(--platino-claro); border-color: var(--grafito);
}
.home-v2 .hv-primario:hover { background: #16191C; border-color: #16191C; }
.home-v2 .hv-nota-precio {
  margin: 18px 0 0;
  font-size: 13px; line-height: 20px; color: var(--gris-texto);
}

/* Secciones: riel de rotulo a la izquierda, contenido a la derecha */
.home-v2 .hv-sec {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
  padding-top: 44px;
  padding-bottom: 44px;
  border-top: 1px solid var(--platino);
}
.home-v2 .hv-kicker {
  margin: 0; padding-top: 4px;
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-texto);
}
.home-v2 .hv-cuerpo { max-width: 46rem; }
.home-v2 .hv-cuerpo h2 {
  margin: 0; padding: 0;
  font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--grafito);
}
.home-v2 .hv-cuerpo p {
  margin: 0;
  font-size: 16px; line-height: 25px; color: var(--grafito);
}
.home-v2 .hv-cuerpo h2 + p { margin-top: 16px; }
.home-v2 .hv-cuerpo p + p { margin-top: 12px; }

/* Declaracion de apertura: una frase sola despues del hero */
.home-v2 .hv-apertura { padding-top: 40px; padding-bottom: 40px; }
.home-v2 .hv-cuerpo p.hv-declaracion {
  margin: 0;
  font-size: 24px; line-height: 33px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--grafito); max-width: 32rem;
}

/* Cinco preguntas: lista numerada editorial */
.home-v2 .hv-preguntas {
  list-style: none; margin: 22px 0 0; padding: 0; counter-reset: hvq;
}
.home-v2 .hv-preguntas li {
  counter-increment: hvq;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--platino);
  font-size: 17px; line-height: 25px; color: var(--grafito);
}
.home-v2 .hv-preguntas li:first-child { border-top: 0; padding-top: 2px; }
.home-v2 .hv-preguntas li::before {
  content: counter(hvq);
  font-size: 14px; line-height: 26px; font-weight: 500; color: var(--acero-texto);
  font-variant-numeric: tabular-nums;
}
.home-v2 .hv-remate {
  margin: 24px 0 0; padding: 12px 0 12px 18px;
  border-left: 3px solid var(--acero);
  font-size: 17px; line-height: 25px; font-weight: 500; color: var(--grafito);
  max-width: 42rem;
}
.home-v2 .hv-idea { margin: 16px 0 0; color: var(--gris-texto); }

/* Del riesgo a la gobernanza: frase destacada sin banner */
.home-v2 .hv-enfasis {
  margin: 18px 0 0; padding-left: 18px;
  border-left: 3px solid var(--acero);
  font-size: 18px; line-height: 27px; font-weight: 500; color: var(--grafito);
}

/* Producto de entrada: contencion en bloque blanco */
.home-v2 .hv-sec--producto .hv-cuerpo { max-width: 52rem; }
.home-v2 .hv-producto {
  background: var(--blanco); border-radius: 2px; padding: 32px 36px 36px;
}
.home-v2 .hv-producto .hv-producto-intro { margin-top: 14px; color: var(--gris-texto); }
.home-v2 .hv-sub {
  margin: 26px 0 0;
  font-size: 13px; line-height: 18px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto);
}
.home-v2 .hv-entregables { margin: 10px 0 0; padding: 0; }
.home-v2 .hv-entregables > div {
  padding: 13px 0; border-top: 1px solid var(--platino);
}
.home-v2 .hv-entregables > div:first-child { border-top: 0; padding-top: 4px; }
.home-v2 .hv-entregables dt { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--grafito); }
.home-v2 .hv-entregables dd { margin: 3px 0 0; font-size: 15px; line-height: 23px; color: var(--gris-texto); }
.home-v2 .hv-datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 24px 0 0; padding: 0;
}
.home-v2 .hv-datos > div { background: var(--platino-claro); border-radius: 2px; padding: 16px 18px; }
.home-v2 .hv-datos dt {
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texto);
}
.home-v2 .hv-datos dd { margin: 6px 0 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--grafito); }
.home-v2 .hv-producto .hv-cta { margin-top: 24px; }

/* Que pasa despues: secuencia numerada conectada, no cuatro servicios sueltos */
.home-v2 .hv-secuencia {
  list-style: none; margin: 22px 0 0; padding: 0; counter-reset: hvs;
}
.home-v2 .hv-secuencia > li {
  counter-increment: hvs;
  position: relative;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 16px;
  padding-bottom: 22px;
}
.home-v2 .hv-secuencia > li:last-child { padding-bottom: 0; }
.home-v2 .hv-secuencia > li::before {
  content: counter(hvs);
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--acero); border-radius: 50%;
  background: var(--platino-claro);
  font-size: 13px; font-weight: 500; color: var(--acero-texto);
  font-variant-numeric: tabular-nums;
}
.home-v2 .hv-secuencia > li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1rem - 0.5px); top: 2rem; bottom: 0;
  width: 1px; background: var(--platino);
}
.home-v2 .hv-secuencia h3 { margin: 0; padding-top: 4px; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--grafito); }
.home-v2 .hv-secuencia p { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--gris-texto); }

/* Consultoras: separado del flujo, en bloque blanco con filete lateral */
.home-v2 .hv-consultoras {
  background: var(--blanco); border-radius: 2px; padding: 28px 32px 30px;
  border-left: 3px solid var(--grafito-suave);
}
.home-v2 .hv-consultoras h2 { font-size: 22px; line-height: 29px; max-width: 34ch; }
.home-v2 .hv-consultoras .hv-cta { margin-top: 20px; }

/* Confianza: compacto, tres senales */
.home-v2 .hv-senales { list-style: none; margin: 18px 0 0; padding: 0; }
.home-v2 .hv-senales li {
  padding: 12px 0; border-top: 1px solid var(--platino);
  font-size: 16px; line-height: 24px; color: var(--grafito);
}
.home-v2 .hv-senales li:first-child { border-top: 0; padding-top: 0; }
.home-v2 .hv-enlaces { margin: 20px 0 0; font-size: 15px; line-height: 23px; color: var(--gris-texto); }
.home-v2 .hv-enlaces a { color: var(--grafito); text-underline-offset: 3px; }

/* Cierre */
.home-v2 .hv-sec--cierre { padding-bottom: 56px; }
.home-v2 .hv-sec--cierre .hv-cuerpo h2 { font-size: 28px; line-height: 34px; max-width: 20ch; }
.home-v2 .hv-enlace-texto {
  color: var(--grafito); font-size: 16px; line-height: 26px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* Entre 1000 y 1279 px: margenes del sitio */
@media (max-width: 1279px) {
  .home-v2 .hv-hero, .home-v2 .hv-sec { padding-left: 56px; padding-right: 56px; }
}

/* Tabletas y telefonos: el riel pasa arriba del contenido */
@media (max-width: 999px) {
  .home-v2 .hv-hero, .home-v2 .hv-sec { padding-left: var(--margen); padding-right: var(--margen); }
  .home-v2 .hv-sec {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding-top: 32px; padding-bottom: 32px;
  }
  .home-v2 .hv-kicker { padding-top: 0; }
}

/* Telefonos */
@media (max-width: 599px) {
  .home-v2 .hv-hero { padding-top: 48px; padding-bottom: 40px; }
  .home-v2 .hv-h1 { font-size: 29px; line-height: 35px; max-width: none; }
  .home-v2 .hv-lead { font-size: 17px; line-height: 25px; }
  .home-v2 .hv-cta .boton { width: 100%; text-align: center; }
  .home-v2 .hv-datos { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-producto { padding: 22px 20px 24px; }
  .home-v2 .hv-consultoras { padding: 22px 20px 24px; }
  .home-v2 .hv-sec--cierre .hv-cuerpo h2 { font-size: 24px; line-height: 30px; }
  .home-v2 .hv-cuerpo p.hv-declaracion { font-size: 20px; line-height: 28px; }
}


/* ==========================================================================
   Encabezado (16 sep 2026): el lockup de la marca vive en .marca-lockup2 (abajo);
   debajo del logo va el enlace "Lo esencial en 1 minuto". Visible tambien en
   movil, arriba de todo, debajo del logo (pedido 18 sep 2026).
   ========================================================================== */
.lateral .lateral-esencial {
  display: inline-block; margin-top: 14px;
  font-size: 13px; line-height: 20px; color: var(--grafito);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.lateral .lateral-esencial:hover { text-decoration-thickness: 2px; }
@media (max-width: 999px) {
  .lateral .lateral-esencial { display: inline-block; margin-top: 10px; }
}

/* Lockup de marca: Z | línea de acero | nombre, con el descriptor como bajada debajo de todo */
.lateral .marca-lockup2 {
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 8px;
  margin: -8px -8px 0;
}
.lateral .marca-lockup2 .marca-fila { display: flex; align-items: center; gap: 12px; }
.lateral .marca-lockup2 .monograma { width: 36px; height: 35px; flex: none; }
.lateral .marca-lockup2 .marca-fila .marca-linea {
  flex: none; width: 1px; align-self: stretch; background: var(--acero);
}
.lateral .marca-lockup2 .nombre {
  font-size: 19px; line-height: 26px; font-weight: 500;
  letter-spacing: -0.01em; white-space: nowrap;
}
.lateral .marca-lockup2 .marca-descriptor {
  font-size: 11px; line-height: 15px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-texto);
  max-width: 15rem;
}
@media (max-width: 999px) {
  .lateral .marca-lockup2 { max-width: calc(100% - 60px); }
}


/* Ficha compacta (16 sep 2026): la descripción va detrás de "Ampliar", con <details> nativo, sin JS */
.cartelera .ampliar { margin-top: 2px; }
.cartelera .ampliar > summary {
  cursor: pointer; list-style: none; width: max-content;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--acero-texto); font-size: 14px; line-height: 21px; font-weight: 500;
}
.cartelera .ampliar > summary::-webkit-details-marker { display: none; }
.cartelera .ampliar > summary::after { content: "+"; font-size: 16px; line-height: 1; }
.cartelera .ampliar[open] > summary::after { content: "\2013"; }
.cartelera .ampliar[open] > summary { margin-bottom: 8px; }
.cartelera .ampliar .descripcion { display: block; }

/* Nota para el directorio (preguntas): mensaje listo para reenviar, en desplegable nativo. */
.nota-directorio { margin-top: 8px; }
.nota-directorio > summary {
  cursor: pointer; list-style: none; width: max-content; max-width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--acero-texto); font-size: 16px; line-height: 24px; font-weight: 500;
}
.nota-directorio > summary::-webkit-details-marker { display: none; }
.nota-directorio > summary::after { content: "+"; font-size: 18px; line-height: 1; }
.nota-directorio[open] > summary::after { content: "\2212"; }
.nota-directorio-intro { margin-top: 12px; color: var(--gris-texto); }
.nota-directorio blockquote {
  margin: 10px 0 0; padding: 16px 20px; background: var(--blanco); border-radius: 2px;
  color: var(--grafito); max-width: var(--medida);
}


/* Lista de puntos sobria (consultoras "Qué aporto"): guion como marcador, sin ornamento */
.contenido .puntos { list-style: none; padding: 0; max-width: var(--medida); }
.contenido .puntos li { position: relative; padding-left: 22px; font-size: 20px; line-height: 28px; }
.contenido .puntos li + li { margin-top: 8px; }
.contenido .puntos li::before { content: "\2013"; position: absolute; left: 0; color: var(--acero); }
@media (max-width: 999px) { .contenido .puntos li { font-size: 17px; line-height: 25px; } }


/* Motivo del contacto: fieldset sin borde de navegador, opciones cómodas de tocar */
.formulario .campo-motivo { border: 0; padding: 0; margin: 0 0 20px; min-inline-size: 0; }
.formulario .campo-motivo legend { padding: 0; font-weight: 500; margin-bottom: 10px; }
.formulario .campo-motivo .opcion { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.formulario .campo-motivo .opcion input { width: auto; margin: 0; flex: none; }


/* Autoevaluación de /preguntas: sin puntaje ni semáforo, sólo aspectos a revisar */
.autoeval { margin-top: 8px; }
.autoeval .pregunta { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.autoeval .pregunta + .pregunta { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--platino); }
.autoeval .pregunta legend { padding: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.autoeval .respuestas { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.autoeval .respuestas .opcion { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.autoeval .respuestas .opcion input { width: auto; margin: 0; flex: none; }
.autoeval .acciones { margin-top: 28px; }
.autoeval-resultado { margin-top: 40px; }
.autoeval-resultado[hidden] { display: none; }
.autoeval-resultado .perfil-falta { color: var(--gris-texto); border-top: 1px solid var(--platino); padding-top: 28px; }
/* Perfil de exposición: la única línea de acero de la página abre el resultado; el resto se separa con aire y platino */
.perfil-apertura { border-top: 2px solid var(--acero); padding-top: 28px; }
.autoeval-resultado h2 { font-size: 24px; line-height: 31px; font-weight: 500; margin: 0; }
.perfil-conteo { margin-top: 12px; }
.perfil-bloque { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--platino); }
.perfil-bloque h3 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0; }
.perfil-simple { margin-top: 8px; }
.perfil-cierre { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--platino); }
.autoeval-resultado .botonera { margin-top: 24px; }
.autoeval-disclaimer { margin-top: 28px; color: var(--gris-texto); font-size: 15px; line-height: 23px; }
.autoeval-ctas, .botonera { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 999px) {
  .autoeval-resultado h2 { font-size: 22px; line-height: 29px; }
  .perfil-bloque h3 { font-size: 18px; line-height: 26px; }
}
@media (max-width: 999px) { .autoeval .pregunta legend { font-size: 17px; line-height: 25px; } }

/* ==========================================================================
   Fase 3 (30 sep 2026): retrato en el hero, lineas de evidencia y
   autoevaluacion paso a paso.
   ========================================================================== */

/* Retrato en la primera pantalla de la home */
.home-v2 .hv-hero { display: flex; gap: 44px; align-items: flex-start; justify-content: space-between; }
.home-v2 .hv-hero-texto { min-width: 0; }
.home-v2 .hv-retrato {
  flex: none; width: 128px; height: 128px; border-radius: 2px;
  filter: grayscale(100%); object-fit: cover;
}
@media (max-width: 899px) {
  .home-v2 .hv-hero { gap: 28px; }
  .home-v2 .hv-retrato { width: 104px; height: 104px; }
}
@media (max-width: 599px) {
  .home-v2 .hv-hero { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .home-v2 .hv-retrato { width: 88px; height: 88px; }
}

/* Linea de evidencia junto a cada afirmacion de metodo */
.contenido .evidencia { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--gris-texto); }
.principal .contenido .evidencia { font-size: 14px; line-height: 21px; }

/* Autoevaluacion paso a paso */
.autoeval-progreso { margin: 0; font-size: 14px; line-height: 20px; color: var(--gris-texto); }
.autoeval-barra { height: 3px; margin-top: 10px; background: var(--platino); border-radius: 2px; overflow: hidden; }
.autoeval-barra span { display: block; height: 100%; background: var(--grafito); transition: width .2s ease; }
.autoeval-paso { margin-top: 24px; }
.autoeval-paso[hidden] { display: none; }
.autoeval-paso:focus { outline: none; }
.autoeval-navegacion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.autoeval-navegacion .boton { margin: 0; }
.boton[hidden] { display: none; }
.boton-suave { border-color: var(--platino); color: var(--gris-texto); }
.boton-suave:hover { background: var(--platino); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* Grupos del informe */
.perfil-grupo { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--platino); }
.perfil-grupo-t { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--gris-texto); }
.perfil-familia { margin-top: 18px; }
.perfil-familia h4 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; }
.perfil-familia p { margin-top: 6px; }

/* Cierre del informe: conexion con el diagnostico, CTA, descarga y correo */
.autoeval-cierre { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--platino); }
.autoeval-cierre[hidden] { display: none; }
.autoeval-conecta { margin: 0; }
.autoeval-cierre .botonera { margin-top: 20px; }
.autoeval-correo { margin-top: 28px; max-width: 34rem; }
.autoeval-correo p { margin: 0 0 12px; }
.autoeval-correo .campo label { display: block; font-size: 15px; margin-bottom: 6px; }
.autoeval-correo .campo input { width: 100%; box-sizing: border-box; }
.autoeval-correo .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Informe imprimible: hoja propia con membrete, datos de contacto y CTA.
   En pantalla no se ve; al imprimir se oculta el sitio y se muestra solo esta hoja. */
#informe-imprimible { display: none; }
@page { margin: 16mm; }
@media print {
  body.imprimir-informe .sitio { display: none !important; }
  body.imprimir-informe #informe-imprimible {
    display: block; color: #1a1a1a; font-size: 12.5px; line-height: 1.5;
  }
  #informe-imprimible .ii-membrete {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; border-bottom: 2px solid var(--acero);
  }
  #informe-imprimible .ii-z { color: var(--grafito); flex: none; }
  #informe-imprimible .ii-marca { display: flex; flex-direction: column; }
  #informe-imprimible .ii-nombre { font-size: 16px; font-weight: 500; color: #000; }
  #informe-imprimible .ii-desc { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #555; }
  #informe-imprimible .ii-titulo { font-size: 19px; font-weight: 500; margin: 22px 0 2px; }
  #informe-imprimible .ii-fecha { font-size: 10.5px; color: #666; margin: 0 0 18px; }
  #informe-imprimible .ii-conteo { font-size: 14px; font-weight: 500; margin: 0; }
  #informe-imprimible .ii-grupo {
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #555;
    margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid #ddd;
  }
  #informe-imprimible .ii-fam { margin: 0 0 8px; break-inside: avoid; }
  #informe-imprimible .ii-fam h3 { font-size: 13px; font-weight: 500; margin: 0; }
  #informe-imprimible .ii-fam p { margin: 1px 0 0; color: #333; }
  #informe-imprimible .ii-texto { margin: 16px 0 0; }
  #informe-imprimible .ii-conecta { margin: 16px 0 0; color: #333; }
  #informe-imprimible .ii-cta { font-weight: 500; margin: 14px 0 0; }
  #informe-imprimible .ii-pie { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ddd; }
  #informe-imprimible .ii-contacto { font-size: 11px; color: #444; margin: 0; }
  #informe-imprimible .ii-disc { font-size: 9.5px; color: #777; margin: 8px 0 0; }
}