/* ==================== illex.css ==================== */
/* ======================================================
   ILLEX.CSS — VERSIÓN FINAL ESTABLE
   Legacy + Cyberfractal controlado
====================================================== */

/* ======================================================
   RESET BÁSICO
====================================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px; /* legacy: NO tocar */

  background: #111 url('../images/bg.gif') fixed;

  color: #ececec;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  padding-bottom: 80px;
}
/* ======================================================
   CONTENEDOR PRINCIPAL (ÚNICO Y CONSISTENTE)
====================================================== */

.contenedor-600 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
  overflow: hidden;
	
}

.contenedor-600 > table {
  width: 100%;
}


/* ======================================================
   IMÁGENES
====================================================== */

img {
  max-width: 100%;
  height: auto;
}

/* ======================================================
   TABLAS LEGACY
====================================================== */

td {
  font-size: 10px;
  vertical-align: top;
  overflow: hidden;   /* 🔥 CLAVE */
}

table, tr, td {
  height: auto !important;
}


table{
  max-width:100%;
  height:auto;
}

table[width="600"] {
  width: 100% !important;
  max-width: 600px;
}

/* ======================================================
   ENLACES
====================================================== */

a {
  text-decoration: none;
  transition: color 0.3s ease;
}

a:link    { color: #F76B08; }
a:visited { color: #FFAD73; }
a:hover,
a:active  { color: #FFFFFF; }

/* ======================================================
   IMÁGENES FLOTANTES
====================================================== */

img.izquierda {
  float: left;
  margin-right: 20px;
}

img.derecha {
  float: right;
  margin-left: 20px;
}

/* ======================================================
   BORDES IMÁGENES
====================================================== */

img[border],
.img-borde {
  border: 1px solid rgba(255,255,255,0.4);
  margin: 4px 0;
}

.img-borde:hover {
  border-color: #fff;
}

.b1 { border: 1px solid #d4af37; }
.b3 { border: 3px solid #d4af37; }

/* ======================================================
   MENÚ TABLA
====================================================== */

.menu-table {
  width: 100%;
  border-collapse: collapse;
}

.menu-table td {
  padding: 10px;
  text-align: center;
}

.menu-table img {
  display: block;
  margin: 5px auto;
  border: 1px solid #ccc;
}

/* ======================================================
   HEADER CYBERFRACTAL
====================================================== */

#headerbox {
  padding: 14px 0 10px;
  line-height: normal;
}

#headerbox h1 {
  line-height: 1.15;
  padding-top: 4px;
}

.cyberfractal {
  font-size: 40px;
  display: inline-block;
  padding-top: 6px;
}

/* ======================================================
   LISTAS
====================================================== */

ul, ol {
  padding-left: 20px;
}

.lista-semiologia {
  margin: 0 0 20px 20px;
}

.lista-semiologia li {
  margin-bottom: 8px;
}

/* =========================
   BOTON FLOTANTE
========================= */

.btn-flotante{
  position: fixed;
  left: 50%;
  margin-left: 300px;
  transform: translateX(-70px);
  bottom: 40px;

/* alineado al contenedor real */
left:50%;
margin-left:300px;   /* mitad de 600 */
transform:translateX(-70px);

width:55px;
height:55px;

background:rgba(255,255,255,0.35);

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

opacity:0;

transition:all .4s ease;

z-index:999;

box-shadow:
0 0 6px rgba(120,170,255,.4),
0 0 12px rgba(170,120,255,.3);

}

.btn-flotante.visible{
opacity:.8;
}

.btn-flotante img{
width:34px;
opacity:.7;
}

.btn-flotante:hover{
transform:translateX(-70px) scale(1.1);
background:rgba(255,255,255,.6);
}


/* =========================
   ONDA FRACTAL (FIJA AL CENTRO)
========================= */

#onda-fractal{

position:fixed;

bottom:0;

left:50%;
transform:translateX(-50%);

width:600px;
height:4px;

pointer-events:none;

opacity:0;

}

/* línea base */

#onda-fractal::after{

content:"";
position:absolute;
left:0;
top:0;

width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
rgba(120,170,255,.4),
rgba(200,140,255,.4),
transparent
);

opacity:.4;

}

/* pulso */

#onda-fractal::before{

content:"";
position:absolute;

left:-80px;
top:-1px;

width:80px;
height:6px;

opacity:0;

background:linear-gradient(
90deg,
rgba(120,170,255,0),
rgba(120,170,255,1),
rgba(200,140,255,1),
rgba(120,170,255,0)
);

filter:blur(1px);

}


/* animación */

#onda-fractal.activa{
animation:onda-neuronal 1.6s ease-out;
}

@keyframes onda-neuronal{

0%{
opacity:0;
transform:translateX(-50%) scaleX(.4);
}

40%{
opacity:1;
}

100%{
opacity:0;
transform:translateX(-50%) scaleX(1.2);
}

}

#onda-fractal.activa::before{
animation:pulso-fractal 1.8s linear;
}

@keyframes pulso-fractal{

0%{
left:-80px;
opacity:0;
}

10%{opacity:1;}

90%{opacity:1;}

100%{
left:600px;
opacity:0;
}

}

@media (max-width: 600px){
  .btn-flotante{
    right: 20px;
    left: auto;
    margin-left: 0;
    transform: none;
  }
}
/* ??? MEN� ILLEX DISTRIBUIDO EN 600px ??? */
.menu-illex-old {
  width: 600px;
  margin: 0 auto;              /* centra el men� */
  background: #333;
  padding: 4px 0;

  display: flex;               /* ?? distribuci�n horizontal */
}

/* LINKS */
.menu-illex-old a {
  flex: 1;                     /* ?? todos iguales */
  text-align: center;

  color: #e6e6e6;
  text-decoration: none;

  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: 0.8px;

  padding: 4px 0;              /* altura uniforme */

  border-right: 1px solid rgba(255,255,255,0.08);  /* divisi�n sutil */

  transition: all 0.25s ease;
}

/* quita l�nea del �ltimo */
.menu-illex-old a:last-child {
  border-right: none;
}

/* HOVER (dorado suave) */
.menu-illex-old a:hover {
  color: #d6b85c;

  text-shadow:
    0 0 4px rgba(230,208,138,0.6),
    0 0 10px rgba(230,208,138,0.3);
}

/* ==================== bienvenido.css ==================== */
/* ======================================================
   CYBERFRACTAL — BIENVENIDO.CSS
   Versión reconstruida y corregida
   Mantiene la estética original y evita ensanchar columnas
====================================================== */


/* ======================================================
   1. CONTENEDOR DEL HEADER
====================================================== */

#headerbox {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 6px 0 4px 0;
  text-align: left;
  max-width: 100%;
}

#headerbox a {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-decoration: none;
}

#headerbox h1 {
  margin: 0;
  padding: 0;
  line-height: 1.05;
}


/* ======================================================
   2. TÍTULO CYBERFRACTAL
====================================================== */

.cyberfractal {
  box-sizing: border-box;
  max-width: 100%;

  font-family: 'Cinzel Decorative', serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 2px;

  margin: 0;
  padding: 0;
  line-height: 1.05;

  color: #f6e6b5;
  text-shadow:
    0 0 6px rgba(255,230,180,0.6),
    0 0 14px rgba(200,160,90,0.4),
    0 0 18px rgba(255,240,180,0.8);
}


/* ======================================================
   3. TÍTULO BIENVENIDA
====================================================== */

.bienvenido {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0;

  font-family: 'Cinzel Decorative', 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.05;

  color: #f6e6b5;
  text-shadow:
    0 0 4px rgba(255,230,180,0.6),
    0 0 14px rgba(200,160,90,0.4),
    0 0 18px rgba(255,240,180,0.8);

  animation: brilloRespirante 8s ease-in-out infinite;
}


/* ======================================================
   4. SÍMBOLO / OJO
====================================================== */

.bienvenido .simbolo {
  display: block;
  flex: 0 0 auto;

  width: 40px;
  max-width: 100%;
  height: auto;

  opacity: 0;
  transform: scale(0.6);

  animation:
    aparecerSimbolo 1.6s ease-out forwards,
    latidoRespirante 8s ease-in-out infinite;

  animation-delay: 0s, 0.6s;
}


/* ======================================================
   5. TEXTO DE BIENVENIDA
====================================================== */

.bienvenido .texto {
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);

  animation: aparecerTexto 1s ease-out forwards;
  animation-delay: 1s;
}


/* ======================================================
   6. NOMBRE Y BANDERA
====================================================== */

.cyberfractal_26 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  max-width: 100%;
  gap: 16px;
}


/* ======================================================
   7. ANIMACIONES
====================================================== */

@keyframes aparecerSimbolo {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes aparecerTexto {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes brilloRespirante {
  0%, 100% {
    color: #f6e6b5;
    text-shadow: 0 0 6px rgba(255,240,180,0.6);
  }
  50% {
    color: #fff1c9;
    text-shadow: 0 0 22px rgba(255,255,210,1);
  }
}

@keyframes latidoRespirante {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  55% {
    transform: scale(1.06);
    filter: brightness(1.15);
  }
}


/* ======================================================
   8. TEXTO ROJO FOSFORESCENTE
====================================================== */

.rojo-fosfo {
  color: #ff3333;
  font-weight: normal;
  text-shadow: 0 0 5px rgba(255,80,80,0.7);
}


/* ======================================================
   9. TABLAS E IMÁGENES
   No imponer anchos globales a las tablas
====================================================== */

table {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}


/* ======================================================
   10. BARRA DE ACCIONES
====================================================== */

.barra-acciones {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 5px 0;
}

.barra-acciones .fila {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;

  max-width: 100%;
  box-sizing: border-box;
}

.barra-acciones a {
  display: inline-flex;
  align-items: center;
  position: relative;

  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0 5px;

  text-decoration: none;
}

.barra-acciones a::after {
  content: "|";
  margin-left: 5px;
  color: #000;
}

.barra-acciones .fila a:last-child::after {
  content: "";
}

.barra-acciones a img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ======================================================
   11. BOTÓN SALUD MENTAL
   Ancho flexible, centrado y limitado al contenedor
====================================================== */

.boton-salud-mental {
  display: table;

  width: auto;
  max-width: 100%;
  box-sizing: border-box;

  margin: 8px auto;
  padding: 7px 9px;

  background: linear-gradient(
    to bottom,
    #3b3b3b 0%,
    #303030 50%,
    #292929 100%
  );

  border: 1px solid #a8894a;
  border-radius: 6px;

  color: #d6b85c;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;

  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1px;
  vertical-align: middle;

  overflow-wrap: anywhere;
  word-wrap: break-word;

  box-shadow:
    0 1px 3px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.boton-salud-mental:hover {
  background: linear-gradient(
    to bottom,
    #484848 0%,
    #383838 50%,
    #303030 100%
  );

  border-color: #d6b85c;
  color: #f0d98a;

  box-shadow:
    0 0 8px rgba(214,184,92,.28),
    inset 0 1px 0 rgba(255,255,255,.08);

  transform: translateY(-1px);
}

.boton-salud-mental:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.boton-salud-mental:focus {
  outline: 1px dotted #d6b85c;
  outline-offset: 2px;
}


/* ======================================================
   12. ADAPTACIÓN A MÓVILES
====================================================== */

@media screen and (max-width: 600px) {
  #headerbox {
    margin-left: 10px;
    margin-right: 10px;
    padding: 2px 8px;
  }

  .cyberfractal {
    font-size: 2.4rem;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
  }

  .bienvenido {
    font-size: 2.1rem;
    gap: 7px;
  }

  .bienvenido .simbolo {
    width: 32px;
  }

  .cyberfractal_26 {
    gap: 8px;
  }

  .barra-acciones {
    padding: 5px 0;
  }

  .barra-acciones .fila {
    gap: 3px;
  }

  .barra-acciones a {
    padding: 0 3px;
  }

  .boton-salud-mental {
    padding: 7px 8px;
    font-size: 10px;
  }
}


/* ======================================================
   13. REDUCCIÓN DE MOVIMIENTO
====================================================== */

@media (prefers-reduced-motion: reduce) {
  .bienvenido,
  .bienvenido .simbolo,
  .bienvenido .texto {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .boton-salud-mental {
    transition: none;
  }
}

/* ==================== cv_verde_compacto_jpg.css ==================== */
@charset "utf-8";

.titulo-marmol-verde {
  position: relative;
  background-image:
    url('https://www.transparenttextures.com/patterns/marble.png'),
    linear-gradient(135deg, #1a3d22, #2e7d32, #43a047, #2e7d32, #1a3d22);
  background-size: cover, 250% 250%;
  background-blend-mode: overlay;
  color: #f5fff5;
  padding: 18px 30px;
  border-radius: 10px;
  text-align: center;
  font-size: 2rem;
  font-family: 'Georgia', serif;
  letter-spacing: 1.5px;
  box-shadow:
    inset 1px 1px 0 #3b6d4b,
    inset -1px -1px 0 #0f2e1c,
    4px 4px 12px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.4);
  overflow: hidden;
  animation: movimientoMarmol 14s ease-in-out infinite alternate;
}

/* --- SÍMBOLOS CENTRADOS --- */
.titulo-marmol-verde::before,
.titulo-marmol-verde::after,
.titulo-marmol-verde span::before,
.titulo-marmol-verde span::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* centra verticalmente */
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 18px rgba(180,255,200,1),
    0 0 28px rgba(100,255,150,0.9),
    2px 2px 6px rgba(0,0,0,0.5);
  animation: pulsoVerde 6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Posiciones ajustadas: centradas visualmente respecto del texto */
.titulo-marmol-verde::before { content: "α"; left: 6%; }
.titulo-marmol-verde::after { content: "Φ"; left: 16%; }
.titulo-marmol-verde span::before { content: "Ψ"; right: 16%; }
.titulo-marmol-verde span::after { content: "Ω"; right: 6%; }

/* --- animaciones --- */
@keyframes movimientoMarmol {
  0% { background-position: center, 0% 50%; }
  50% { background-position: center, 100% 50%; }
  100% { background-position: center, 0% 50%; }
}

@keyframes pulsoVerde {
  0% {
    text-shadow:
      0 0 6px rgba(255,255,255,0.8),
      0 0 10px rgba(180,255,200,0.9),
      0 0 20px rgba(100,255,150,0.7);
    transform: translateY(-50%) scale(1);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 24px rgba(180,255,200,1),
      0 0 48px rgba(100,255,150,0.9);
    transform: translateY(-50%) scale(1.05);
  }
  100% {
    text-shadow:
      0 0 6px rgba(255,255,255,0.8),
      0 0 10px rgba(180,255,200,0.9),
      0 0 20px rgba(100,255,150,0.7);
    transform: translateY(-50%) scale(1);
  }
}



/* ======================================================
   CV — ITINERARIO COMPACTO + DIPLOMAS JPG
   PC + Android + iPhone
====================================================== */

.itinerario-scroll{
  max-height:420px;
  overflow-y:auto;
  overflow-x:hidden;
  margin:8px 0 14px;
  border:1px solid #b7b7b7;
  background:#fdfdfc;
  scrollbar-width:thin;
  scrollbar-color:#8a8a8a #e7e7e7;
  -webkit-overflow-scrolling:touch;
}

.itinerario-scroll .table-cursos thead th{
  position:sticky;
  top:0;
  z-index:2;
}

.table-cursos td.curso-diploma{
  cursor:zoom-in;
  text-decoration:underline dotted;
  text-underline-offset:3px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Vista previa de diplomas: PC + Android + iPhone */
.diploma-preview {
  display: none; position: fixed; z-index: 99999; left: 12px; top: 12px;
  width: max-content; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  box-sizing: border-box; overflow: auto; padding: 12px; background: #fff;
  border: 1px solid #c8b46a; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.42); color: #222; text-align: center;
}
.diploma-preview.visible { display: block; }
.diploma-preview-image {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh;
  object-fit: contain; margin: 0 auto 10px; background: #fff;
}
.diploma-preview-image[hidden], .diploma-loading[hidden] { display: none !important; }
.diploma-loading { padding: 18px 12px; color: #333; font: 14px Arial, sans-serif; }
#abrir-diploma-pdf {
  display: inline-block; max-width: 100%; box-sizing: border-box; margin: 8px auto 2px;
  padding: 9px 14px; background: #2a3f5f; color: #fff; border: 1px solid #1c2e48;
  border-radius: 4px; text-decoration: none; font: bold 13px Arial, sans-serif;
  text-align: center; white-space: normal;
}
.diploma-close {
  display: block; position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 32px; height: 32px; padding: 0; border: 1px solid #999; border-radius: 50%;
  background: #333; color: #fff; font: bold 25px/28px Arial, sans-serif;
  text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.diploma-close:hover { background: #555; }
.diploma-close:focus-visible { outline: 2px solid #d6b85c; outline-offset: 2px; }
.diploma-preview.mobile-mode {
  inset: 0; left: 0 !important; top: 0 !important; width: 100%; max-width: none;
  height: 100%; max-height: none; display: none; align-items: center; justify-content: center;
  overflow: auto; padding: 56px 12px 78px; border: 0; border-radius: 0;
  background: rgba(0,0,0,.88); box-shadow: none;
}
.diploma-preview.mobile-mode.visible { display: flex; }
.diploma-preview.mobile-mode .diploma-preview-image {
  max-width: calc(100vw - 24px); max-height: calc(100vh - 150px);
  width: auto; height: auto; margin: auto; border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.diploma-preview.mobile-mode .diploma-close {
  top: 12px; right: 12px; width: 40px; height: 40px; font-size: 30px; line-height: 36px;
}
.diploma-preview.mobile-mode #abrir-diploma-pdf {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  margin: 0; padding: 11px 16px; white-space: nowrap;
}
@media screen and (max-width: 600px) {
  .itinerario-scroll { max-height: 360px; }
}

/* ==================== cv.css ==================== */
/* =========================================================
   TABLAS ACADÉMICAS — cursos, formación y antecedentes
   ========================================================= */

.table-cursos {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin-top: 10px;
  color: #2c2c2c;
  background-color: #fdfdfc;
  box-sizing: border-box;
}

.table-cursos *,
.table-cursos *::before,
.table-cursos *::after {
  box-sizing: border-box;
}

/* Celdas */
.table-cursos th,
.table-cursos td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #bbb;
}

/* Encabezado */
.table-cursos th {
  background-color: #2a3f5f;
  color: #f1f1f1;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

/* Hover sobre filas */
.table-cursos tr:hover {
  background-color: #ececec;
}

/* Responsive para móviles */
@media screen and (max-width: 600px) {
  .table-cursos thead {
    display: none;
  }

  .table-cursos,
  .table-cursos tbody,
  .table-cursos tr,
  .table-cursos td {
    display: block;
    width: 100%;
  }

  .table-cursos tr {
    margin-bottom: 20px;
    border-bottom: 2px solid #ccc;
    background-color: #fff;
  }

  .table-cursos td {
    text-align: right;
    padding-left: 55%;
    position: relative;
    color: #2c2c2c;
    font-size: 15px;
  }

  .table-cursos td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
    color: #4a4a4a;
    text-transform: uppercase;
    font-size: 13px;
  }
}

/* =========================================================
   GIF nose.gif — centrado y ampliación
   ========================================================= */
/* GIF nose.gif — centrado y ampliación */

.imagen-nose-contenedor {
  display: block;
  width: 80%;
  max-width: 80%;
  margin: 20px auto;
  text-align: center;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.imagen-nose {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  border: 2px solid red;
  box-sizing: border-box;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Ampliación al pasar el cursor en equipos con mouse */
@media (hover: hover) and (pointer: fine) {
  .imagen-nose:hover {
    transform: scale(1.35);
    z-index: 10;
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25);
  }
}

/* Ampliación al tocar la imagen.
   Requiere que scripts/zoom-nose.js agregue o quite la clase .activa. */
.imagen-nose.activa {
  transform: scale(1.35);
  z-index: 10;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25);
  cursor: zoom-out;
}

/* Accesibilidad con teclado */
.imagen-nose:focus-visible {
  outline: 2px solid #d6b85c;
  outline-offset: 4px;
}

/* Ajuste para teléfonos */
@media (max-width: 480px) {
  .imagen-nose.activa {
    transform: scale(1.15);
  }
}

/* Impresión */
@media print {
  .imagen-nose {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Cursos que permiten abrir el diploma en móviles:
   reduce el resaltado táctil y evita seleccionar el texto */
.table-cursos .curso-diploma {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.table-cursos .curso-diploma:active {
  background-color: transparent;
}

.table-cursos .curso-diploma {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* =========================================================
   VISTA PREVIA DE DIPLOMAS — PC y smartphones
   ========================================================= */
.diploma-preview {
  display: none;
  position: fixed;
  z-index: 99999;
  width: auto;
  max-width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 14px;
  background: #fff;
  border: 1px solid #c8b46a;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  color: #222;
  text-align: center;
}

.diploma-preview.visible {
  display: block;
}

.diploma-preview-image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  margin: 0 auto 12px;
  object-fit: contain;
}

.diploma-preview-image[hidden],
.diploma-loading[hidden] {
  display: none !important;
}

.diploma-loading {
  padding: 18px 12px;
  font: 16px Arial, sans-serif;
  color: #333;
}

#abrir-diploma-pdf {
  display: inline-block;
  margin: 8px 40px 4px 4px;
  padding: 8px 12px;
  background: #2a3f5f;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font: 14px Arial, sans-serif;
}

.diploma-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .diploma-preview.mobile-mode {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: calc(100vw - 24px);
    max-width: 480px;
    max-height: calc(100vh - 24px);
    box-sizing: border-box;
    overflow: auto;
    padding: 42px 12px 14px;
  }

  .diploma-preview.mobile-mode .diploma-preview-image {
    max-width: 100%;
    max-height: 65vh;
  }
}

/* Aviso para mejorar la visualización en smartphones */
.aviso-horizontal {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin: 12px auto;
  padding: 10px 12px;
  border: 1px solid #d6b85c;
  border-radius: 6px;
  background: #333333;
  color: #f1df9a;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

@media screen and (max-width: 600px) and (orientation: portrait) {
  .aviso-horizontal {
    display: block;
  }
}

.aviso-horizontal .icono-giro {
  display: block;
  margin-bottom: 4px;
  font-size: 22px;
}

/* ==================== brillo.css ==================== */
@charset "UTF-8";
/* CSS Document */

/* ======================================================
   BOTONES MANIFIESTO (SISTEMA)
====================================================== */

/* ROJO � pol�tico */
.manifiesto-politico{
  display:inline-block;
  padding:12px 14px;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  text-align:center;
  background:#7a0000;
  border:2px solid #ff3a3a;
  border-radius:6px;
  transition:.35s;
}

.manifiesto-politico:hover{
  background:#b00000;
  transform:scale(1.05);
  box-shadow:
    0 0 12px red,
    0 0 30px red;
}


/* VERDE � retorno */
.manif_pol-verd{
  display:inline-block;
  padding:12px 14px;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  text-align:center;
  background:#004d1f;
  border:2px solid #00ff7a;
  border-radius:6px;
  transition:.35s;

  box-shadow:
    0 0 6px rgba(0,255,120,.5),
    0 0 14px rgba(0,255,120,.35);
}

.manif_pol-verd:hover{
  background:#007a33;
  transform:scale(1.05);

  box-shadow:
    0 0 12px #00ff7a,
    0 0 30px #00ff7a;
}

a:hover .manif_pol-verd{
  color:#e6d08a;
  text-shadow:0 0 8px rgba(214,184,92,0.4);
}

/* DORADO � nivel fractal */
.manif_fractal {
  display:inline-block;
  padding:12px 14px;

  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;

  color:#e6e6e6;
  text-decoration:none;

  background:#1a1a1a;
  border:2px solid #d4a64a;
  border-radius:6px;

  transition: all 0.3s ease;

  box-shadow:
    0 0 6px rgba(212,166,74,0.25),
    0 0 14px rgba(212,166,74,0.12);

  /* PULSACION FRACTAL ULTRA SUTIL */
  animation: pulsoFractalDorado 8s ease-in-out infinite;
}

.manif_fractal:hover {
  color:#fff4c0;
  background:#2a1e0a;
  transform: scale(1.05);

  box-shadow:
    0 0 10px rgba(212,166,74,0.45),
    0 0 30px rgba(212,166,74,0.25);
}


/* ANIMACI�N FRACTAL */

@keyframes pulsoFractalDorado {
  0% {
    box-shadow:
      0 0 5px rgba(212,166,74,0.22),
      0 0 12px rgba(212,166,74,0.10);
  }

  50% {
    box-shadow:
      0 0 7px rgba(212,166,74,0.32),
      0 0 18px rgba(212,166,74,0.16);
  }

  100% {
    box-shadow:
      0 0 5px rgba(212,166,74,0.22),
      0 0 12px rgba(212,166,74,0.10);
  }
}


/* ======================================================
   BLOQUES GENERALES
====================================================== */

.manifiesto-bloque{
  text-align:center;
}

.manifiesto-bloque a{
  display:block;
  margin:18px 0;
}


/* ======================================================
   IM�GENES Y EFECTOS
====================================================== */

.link-balanza img {
  width: 100px;
  transition: all 0.3s ease-in-out;
}

.link-balanza:hover img {
  filter: brightness(1.3) drop-shadow(0px 0px 10px rgba(144, 165, 144, 0.8));
}

.ensobrado-box {
  text-align: center;
}

.ensobrado-box img {
  display: block;
  margin: 0 auto;
}

.ensobrado-texto {
  margin-top: 6px;
  font-weight: bold;
  letter-spacing: 1px;
}


/* ======================================================
   MARCOS Y HALOS
====================================================== */

.marco-luz {
  text-align: center;
  margin: 16px auto;
  max-width: 600px;
}

.luz-suave {
  display: block;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: none;

  box-shadow:
    0 0 14px rgba(230,208,138,0.35),
    0 0 30px rgba(230,208,138,0.18);
}


/* ======================================================
   FIGURA CENTRAL
====================================================== */

.figura-central {
  max-width: 595px;
  display: inline-block;
  overflow: visible;
}

.figura-central img {
  display: block;
  margin: 0 auto;
  max-width: 595px;
  width: 100%;
  height: auto;
}

.imagen-halo {
  border: none;
  box-shadow:
    0 0 12px rgba(230,208,138,0.35),
    0 0 28px rgba(230,208,138,0.18),
    0 0 52px rgba(230,208,138,0.10);
}

.figcaption-central {
  display: block;
  margin: 12px auto 0;
  text-align: center;
  max-width: 560px;
  line-height: 1.35;
}


/* ======================================================
   GALERIA
====================================================== */

.galeria-tv {
  margin: 0 auto;
}

.galeria-tv img {
  width: 145px;
  display: block;
  box-sizing: border-box;

  outline: 2px solid #c9a441;
  outline-offset: -2px;

  box-shadow: 0 0 0 1px #8f6b1f;
}



/* T�TULO FRACTAL */


.luz-suave-ratio {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 32px;

  display: block;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;

  text-align: center;

  overflow-wrap: break-word;
  word-break: break-word;
 white-space: normal; /* evita que el t�tulo se corte */

  letter-spacing: 1px;

  background: linear-gradient(
    180deg,
    #fff6cc 0%,
    #e6c873 25%,
    #b58a2f 50%,
    #e6c873 75%,
    #fff4c0 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 2px rgba(255, 220, 120, 0.6),
    0 0 5px rgba(255, 200, 80, 0.4),
    0 0 10px rgba(255, 180, 60, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.9);
}

.luz-suave-ratio::after {
  content: "";
  display: block;
  width: 60%;
  height: 1px;
  margin: 6px auto 0 auto;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 200, 80, 0.8),
    transparent
  );
}


/* ======================================================
   TEXTO
====================================================== */

.ley-fractal {
  text-align: justify;
  text-align-last: left;
  margin: 0 8px 1.8em 8px;
}

.cita{
  text-align: center;
  font-size: 0.95em;
  color: #ccc;
}

/* ========================= */
/* ZOOM IM�GENES */
/* ========================= */

.zoom-img {
  display: block;
  margin: 0 auto;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;

  position: relative;
  z-index: 1;
}

.zoom-img:hover {
transform: scale(1.05);   /* ?? bajar de 1.1 a 1.05 */
z-index: 999;

  box-shadow: 0 0 12px rgba(214,92,92,0.5);
}

.zoom-img:active {
  transform: scale(1.1);
}

/* ======================================================
   TEXTO A�MBAR + PULSO SUAVE
====================================================== */

.rojo-fosfo {
  color: #ffb347;

  text-shadow:
    0 0 4px rgba(255,180,80,0.35),
    0 0 10px rgba(255,140,60,0.18);

  line-height: 1.5;

  animation: pulsoFractal 6s ease-in-out infinite;
}

.rojo-fosfo strong {
  color: #ffd27a;
  text-shadow: 0 0 6px rgba(255,200,120,0.45);
}

.rojo-fosfo em {
  color: #ffe0a3;
}

@keyframes pulsoFractal {
  0% {
    text-shadow:
      0 0 3px rgba(255,180,80,0.28),
      0 0 8px rgba(255,140,60,0.12);
  }

  50% {
    text-shadow:
      0 0 5px rgba(255,200,100,0.38),
      0 0 14px rgba(255,160,70,0.20);
  }

  100% {
    text-shadow:
      0 0 3px rgba(255,180,80,0.28),
      0 0 8px rgba(255,140,60,0.12);
  }
}

/* ==================== contacto_index.css ==================== */

@charset "utf-8";
/* ======================================================
   BOTÓN CONTACTO CYBERFRACTAL
   Ancho flexible, centrado y adaptable al contenedor
====================================================== */

.boton-contacto-cyber {
    position: relative;
    display: table;

    width: auto;
    max-width: 100%;
    box-sizing: border-box;

    margin: 12px auto;
    padding: 10px 9px;

    background: linear-gradient(
        135deg,
        #55503b 0%,
        #38372f 25%,
        #292929 50%,
        #3c3829 75%,
        #5a5134 100%
    );

    border: 1px solid #d6b85c;
    border-radius: 8px;

    color: #f3d982;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    overflow: hidden;
    overflow-wrap: anywhere;
    word-wrap: break-word;

    box-shadow:
        0 0 0 1px rgba(214,184,92,.18),
        0 3px 7px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(0,0,0,.5);

    transition:
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* ======================================================
   BRILLO QUE ATRAVIESA EL BOTÓN
====================================================== */

.boton-contacto-cyber::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80px;

    width: 45px;
    height: 100%;

    background: rgba(255,255,255,.18);
    transform: skewX(-25deg);

    transition: left .5s ease;
    pointer-events: none;
}


/* ======================================================
   TEXTO POR ENCIMA DEL BRILLO
====================================================== */

.boton-contacto-cyber span {
    position: relative;
    z-index: 2;
}


/* ======================================================
   EFECTO AL PASAR EL CURSOR
====================================================== */

.boton-contacto-cyber:hover {
    color: #fff3b5;
    border-color: #ffe89a;

    background: linear-gradient(
        135deg,
        #625936 0%,
        #46412f 25%,
        #33322d 50%,
        #48402d 75%,
        #665b38 100%
    );

    box-shadow:
        0 0 5px rgba(214,184,92,.55),
        0 0 14px rgba(214,184,92,.35),
        0 0 24px rgba(214,184,92,.18),
        inset 0 1px 0 rgba(255,255,255,.20);

    transform: translateY(-1px);
}


/* ======================================================
   DESPLAZAMIENTO DEL BRILLO
====================================================== */

.boton-contacto-cyber:hover::before {
    left: 180px;
}


/* ======================================================
   EFECTO AL HACER CLIC
====================================================== */

.boton-contacto-cyber:active {
    transform: translateY(0);

    box-shadow:
        0 0 5px rgba(214,184,92,.35),
        inset 0 2px 4px rgba(0,0,0,.45);
}


/* ======================================================
   FOCO DE TECLADO
====================================================== */

.boton-contacto-cyber:focus {
    outline: 1px dotted #d6b85c;
    outline-offset: 2px;
}


/* ======================================================
   MÓVILES
====================================================== */

@media screen and (max-width: 600px) {
    .boton-contacto-cyber {
        max-width: 100%;
        padding: 8px 7px;
        font-size: 10px;
        letter-spacing: .8px;
    }
}


/* ======================================================
   REDUCCIÓN DE MOVIMIENTO
====================================================== */

@media (prefers-reduced-motion: reduce) {
    .boton-contacto-cyber,
    .boton-contacto-cyber::before {
        transition: none;
    }
}

/* BOTÓN GUARDAR CONTACTO: RESPONSIVE */

.guardar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: calc(100% - 32px);
    max-width: 320px;
    min-height: 48px;
    margin: 20px auto;
    padding: 12px 18px;

    border: 1px solid #d6b85c;
    border-radius: 10px;

    background: #081321;
    color: #d6b85c;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    transition: background-color .2s ease,
                color .2s ease;
}

.guardar i {
    flex-shrink: 0;
    font-size: 21px;
}

.guardar:hover {
    background: #14263b;
    color: #f2d982;
}

.guardar:focus-visible {
    outline: 3px solid #d6b85c;
    outline-offset: 3px;
}

.guardar:active {
    background: #20364d;
}

@media (max-width: 480px) {
    .guardar {
        width: calc(100% - 24px);
        min-height: 50px;
        margin: 18px auto;
        padding: 13px 12px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guardar {
        transition: none;
    }
}

/* ======================================================
   CÓDIGO QR — VITAE.HTML
   Columna de 150 px
   QR vertical “Un lugar”
====================================================== */

body#top .qr {
    width: 150px;
    max-width: 150px;
    margin: 12px auto;
    padding: 3px;
    box-sizing: border-box;
    text-align: center;
}

body#top .qr img {
    display: block;
    width: 140px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d6b85c;
    box-sizing: border-box;
    object-fit: contain;
}


/* ======================================================
   CÓDIGO QR — CONTACTO.HTML
   En la tarjeta de contacto puede ser más ancho.
   En vitae.html se conserva el ancho de 150 px.
====================================================== */

.card .qr {
    width: 100%;
    max-width: 360px;
    margin: 20px auto;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.card .qr img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ==================== vitae-margenes.css ==================== */
@charset "utf-8";
/* CSS Document */

/* Menú principal visible y legible en PC y smartphone */
.menu-principal-cv {
  display:flex !important;
  flex-flow:row wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px 7px !important;
  width:600px !important;
  max-width:600px !important;
  min-height:34px;
  margin:0 auto !important;
  padding:5px 6px !important;
  box-sizing:border-box !important;
  background:#333 !important;
  border:1px solid #666 !important;
}
.menu-principal-cv a {
  display:inline-block !important;
  padding:6px 7px !important;
  color:#f3e6b0 !important;
  background:#292929 !important;
  border:1px solid #555 !important;
  border-radius:2px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
.menu-principal-cv a:hover,
.menu-principal-cv a:focus {
  color:#fff !important;
  background:#4b4b4b !important;
  outline:1px solid #d6b85c;
}
@media screen and (max-width:620px) {
  .menu-principal-cv {
    width:600px !important;
    max-width:600px !important;
    min-width:600px !important;
    justify-content:flex-start !important;
    gap:4px !important;
    padding:5px !important;
  }
  .menu-principal-cv a {
    font-size:13px !important;
    padding:6px 7px !important;
  }
}

/* Tabla de diplomas: acotada a la página y desplazable */
.itinerario-scroll {
  display:block!important; position:relative!important;
  width:100%!important; max-width:596px!important; min-width:0!important;
  overflow-x:auto!important; overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important; overscroll-behavior-x:contain;
  box-sizing:border-box!important; border:1px solid #888;
}
.itinerario-scroll > .table-cursos {
  display:table!important; width:900px!important; min-width:900px!important;
  max-width:none!important; table-layout:fixed!important;
  border-collapse:collapse!important; margin:0!important;
}
.itinerario-scroll .table-cursos thead {display:table-header-group!important}
.itinerario-scroll .table-cursos tbody {display:table-row-group!important}
.itinerario-scroll .table-cursos tr {display:table-row!important}
.itinerario-scroll .table-cursos th,
.itinerario-scroll .table-cursos td {
  display:table-cell!important; position:static!important;
  white-space:normal!important; overflow-wrap:break-word!important;
  word-break:normal!important; vertical-align:top!important;
  box-sizing:border-box!important;
}
.itinerario-scroll .table-cursos th:nth-child(1),
.itinerario-scroll .table-cursos td:nth-child(1) {width:105px!important}
.itinerario-scroll .table-cursos th:nth-child(2),
.itinerario-scroll .table-cursos td:nth-child(2) {width:390px!important}
.itinerario-scroll .table-cursos th:nth-child(3),
.itinerario-scroll .table-cursos td:nth-child(3) {width:275px!important}
.itinerario-scroll .table-cursos th:nth-child(4),
.itinerario-scroll .table-cursos td:nth-child(4) {width:130px!important}
.itinerario-scroll .table-cursos td::before,
.itinerario-scroll .table-cursos td::after {content:none!important;display:none!important}

/* Visor de diploma centrado, con imagen contenida en la ventana */
.diploma-preview {
  display:none; position:fixed!important; z-index:2147483000!important;
  top:50%!important; left:50%!important; transform:translate(-50%,-50%)!important;
  width: min(92vw,560px)!important; max-width:560px!important;
  max-height:88vh!important; overflow:auto!important; box-sizing:border-box!important;
  padding:20px 14px 16px!important; background:#fff!important; color:#222!important;
  border:1px solid #d6b85c!important; border-radius:12px!important;
  box-shadow:0 8px 30px rgba(0,0,0,.45)!important; text-align:center!important;
}
.diploma-preview.visible {display:block!important}
.diploma-preview [hidden] {display:none!important}
.diploma-preview .diploma-preview-image {
  display:block; width:auto!important; height:auto!important; max-width:100%!important;
  max-height:62vh!important; object-fit:contain!important; margin:8px auto 12px!important;
}
.diploma-preview .diploma-loading {margin:12px auto;font-size:18px;color:#333}
.diploma-preview #abrir-diploma-pdf {
  display:inline-block!important;margin:8px auto 0!important;padding:10px 14px!important;
  background:#294367!important;color:#fff!important;border-radius:5px!important;
  text-decoration:none!important;font-weight:bold!important;
}
.diploma-preview .diploma-close {
  position:sticky!important;float:right!important;top:0!important;
  margin:-12px -5px 0 0!important;z-index:2!important;width:40px!important;height:40px!important;
  border:0!important;border-radius:50%!important;background:#333!important;color:#fff!important;
  font-size:28px!important;line-height:1!important;cursor:pointer!important;
}
@media (max-width:700px) {
 .diploma-preview {width:94vw!important;max-width:94vw!important;max-height:86vh!important;padding:14px 10px 12px!important}
 .diploma-preview .diploma-preview-image {max-width:100%!important;max-height:62vh!important}
}

/* Smartphone: alinear a la izquierda las leyendas y enlaces de diplomas */
@media screen and (max-width: 700px) {
  .itinerario-scroll,
  .itinerario-scroll table.table-cursos,
  .itinerario-scroll .table-cursos th,
  .itinerario-scroll .table-cursos td {
    text-align: left !important;
  }
  .itinerario-scroll .table-cursos td.curso-diploma,
  .itinerario-scroll .table-cursos td.curso-diploma a,
  .itinerario-scroll .table-cursos td.curso-diploma *,
  .itinerario-scroll .table-cursos a[data-diploma],
  .itinerario-scroll .table-cursos .nombre-curso {
    text-align: left !important;
    direction: ltr !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    float: none !important;
  }
  .itinerario-scroll .table-cursos td {
    vertical-align: top !important;
  }
}

/* Corrección aislada del itinerario: no altera las tablas generales ni el ancho del sitio */
.itinerario-scroll {
  display: block !important;
  position: relative !important;
  width: 596px !important;
  min-width: 0 !important;
  max-width: 596px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: auto !important;
  scrollbar-color: #d6b85c #333333 !important;
  box-sizing: border-box !important;
  border: 1px solid #777 !important;
  padding: 0 0 14px 0 !important;
}
.itinerario-scroll::-webkit-scrollbar {
  height: 14px !important;
}
.itinerario-scroll::-webkit-scrollbar-track {
  background: #333 !important;
  border: 1px solid #666 !important;
}
.itinerario-scroll::-webkit-scrollbar-thumb {
  background: #d6b85c !important;
  border: 2px solid #333 !important;
  border-radius: 8px !important;
}
.itinerario-scroll > table.table-cursos {
  display: table !important;
  width: 900px !important;
  min-width: 900px !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
.itinerario-scroll .table-cursos thead { display: table-header-group !important; }
.itinerario-scroll .table-cursos tbody { display: table-row-group !important; }
.itinerario-scroll .table-cursos tr { display: table-row !important; }
.itinerario-scroll .table-cursos th,
.itinerario-scroll .table-cursos td {
  display: table-cell !important;
  box-sizing: border-box !important;
  position: static !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
.itinerario-scroll .table-cursos th:nth-child(1),
.itinerario-scroll .table-cursos td:nth-child(1) { width: 105px !important; min-width: 105px !important; }
.itinerario-scroll .table-cursos th:nth-child(2),
.itinerario-scroll .table-cursos td:nth-child(2) { width: 390px !important; min-width: 390px !important; }
.itinerario-scroll .table-cursos th:nth-child(3),
.itinerario-scroll .table-cursos td:nth-child(3) { width: 275px !important; min-width: 275px !important; }
.itinerario-scroll .table-cursos th:nth-child(4),
.itinerario-scroll .table-cursos td:nth-child(4) { width: 130px !important; min-width: 130px !important; }
.itinerario-scroll .table-cursos td::before,
.itinerario-scroll .table-cursos td::after { content: none !important; display: none !important; }
@media screen and (min-width: 701px) {
  .itinerario-scroll { overflow-x: scroll !important; }
}

/* Smartphone: leyendas de diplomas legibles y alineadas a la izquierda */
@media screen and (max-width: 700px) {
  .itinerario-scroll {
    width: 596px !important;
    max-width: 596px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  .itinerario-scroll table.table-cursos {
    width: 900px !important;
    min-width: 900px !important;
    table-layout: fixed !important;
  }

  .itinerario-scroll table.table-cursos th,
  .itinerario-scroll table.table-cursos td {
    font-size: 15px !important;
    line-height: 1.45 !important;
    padding: 10px 12px !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    color: #111 !important;
  }

  .itinerario-scroll table.table-cursos th {
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    background: #263e60 !important;
  }

  .itinerario-scroll table.table-cursos td a,
  .itinerario-scroll table.table-cursos td .curso-diploma,
  .itinerario-scroll table.table-cursos td * {
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
  }
}


/* Margen derecho para los párrafos de Vitae */
.section p {
    margin-right: 14px;
    box-sizing: border-box;
}

/* Margen derecho para las listas */
.section ul {
    padding-right: 14px;
    box-sizing: border-box;
}

.section li {
    margin-bottom: 14px;
    padding-right: 4px;
    box-sizing: border-box;
}

/* Evitar que las imágenes excedan el contenedor */
.section img {
    max-width: 100%;
    height: auto;
}


/* Margen derecho para los párrafos de Vitae */
.section p {
    margin-right: 14px;
    box-sizing: border-box;
}

/* Margen derecho para las listas */
.section ul {
    padding-right: 14px;
    box-sizing: border-box;
}

.section li {
    margin-bottom: 14px;
    padding-right: 4px;
    box-sizing: border-box;
}

/* Evitar que las imágenes excedan el contenedor */
.section img {
    max-width: 100%;
    height: auto;
}

/* ==================== nose.css ==================== */
@charset "utf-8";
/* CSS Document */



/* Ajuste local del encabezado: reproduce la segunda captura sin modificar illex.css */
.contenedor-600 { width:600px !important; max-width:600px !important; margin-left:auto !important; margin-right:auto !important; }
#headerbox { display:block !important; width:600px !important; height:64px !important; min-height:64px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; }
h1.cyberfractal { display:block !important; width:600px !important; height:64px !important; line-height:1 !important; margin:0 !important; padding:3px 0 0 4px !important; box-sizing:border-box !important; font-family:'Cormorant Garamond', Georgia, serif !important; font-size:42px !important; font-weight:400 !important; color:#f2e2a8 !important; text-align:left !important; }
h1.cyberfractal .texto { display:block !important; white-space:nowrap !important; }
.menu-principal-cv { display:flex !important; flex-flow:row nowrap !important; align-items:center !important; justify-content:space-between !important; width:600px !important; height:20px !important; min-height:20px !important; margin:0 !important; padding:0 2px !important; box-sizing:border-box !important; overflow:hidden !important; background:#393939 !important; border:1px solid #888 !important; border-bottom:2px solid #777 !important; }
.menu-principal-cv a { display:block !important; flex:0 0 auto !important; margin:0 !important; padding:1px 0 !important; color:#ff7900 !important; font-family:Arial, Helvetica, sans-serif !important; font-size:10px !important; font-weight:400 !important; line-height:16px !important; text-decoration:none !important; white-space:nowrap !important; }
.menu-principal-cv a:hover { color:#ffd08a !important; text-decoration:underline !important; }

/* Imagen nose: tamaño compacto y ampliación clara en PC y smartphone */
.imagen-nose-contenedor {
  display: block; width: 100%; max-width: 600px; margin: 12px auto;
  text-align: center; position: relative; overflow: visible; isolation: isolate;
}
.imagen-nose {
  display: block; width: 100%; max-width: 180px !important; height: auto;
  margin: 0 auto; box-sizing: border-box; cursor: zoom-in;
  transform: scale(1); transform-origin: center center;
  transition: transform .28s ease, box-shadow .28s ease;
  position: relative; z-index: 1; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .imagen-nose:hover, .imagen-nose:focus-visible {
    transform: scale(1.45) !important; z-index: 20;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
  }
}
.imagen-nose.activa {
  transform: scale(1.45) !important; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
@media (hover: none), (pointer: coarse) {
  .imagen-nose.activa { transform: scale(1.65) !important; }
}

/* ==================== vitae-ajustes-movil(8).css ==================== */
/* Ajustes específicos de vitae.html — escritorio 600 px y móvil adaptable */
.contenedor-600 { width:600px; max-width:600px; margin-left:auto; margin-right:auto; }
.vitae-layout { width:600px; max-width:600px; border-collapse:collapse; table-layout:fixed; }
.vitae-columna-principal { width:450px; }
.vitae-columna-lateral { width:150px; }
.vitae-contenido-gris { display:block; width:100%; max-width:600px; margin:0 auto; padding:0; box-sizing:border-box; background:#333333; color:#f1f1f1; overflow:visible; }
.vitae-contenido-gris > table { width:100%; max-width:100%; background:#333333; color:#f1f1f1; box-sizing:border-box; }
.vitae-contenido-gris .section, .vitae-contenido-gris h2, .vitae-contenido-gris p, .vitae-contenido-gris li { color:inherit; }

/* Tabla de cursos: conservar las cuatro columnas y permitir desplazamiento lateral. */
.itinerario-scroll { max-width:100%; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* RESTAURACIÓN EXPLÍCITA DEL DISEÑO DE ESCRITORIO */
@media screen and (min-width:601px) {
  .contenedor-600 { width:600px !important; max-width:600px !important; margin-left:auto !important; margin-right:auto !important; }
  table.vitae-layout { display:table !important; width:600px !important; min-width:600px !important; max-width:600px !important; table-layout:auto !important; border-collapse:collapse !important; }
  table.vitae-layout > tbody { display:table-row-group !important; width:600px !important; }
  table.vitae-layout > tbody > tr { display:table-row !important; }
  table.vitae-layout > tbody > tr > td { display:table-cell !important; box-sizing:border-box; }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal { width:450px !important; min-width:450px !important; max-width:450px !important; }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral { width:150px !important; min-width:150px !important; max-width:150px !important; }
  .vitae-columna-principal > table { width:450px !important; max-width:450px !important; }
  .vitae-columna-lateral > table { width:150px !important; max-width:150px !important; }
}

/* =========================================================
   MÓVIL: una sola secuencia de reglas, sin bloques contradictorios.
   Escritorio (>600 px) conserva el diseño original de 600 px.
   ========================================================= */
@media screen and (max-width:600px) {
  html, body {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin:0 !important; padding:0 !important; overflow-x:hidden !important;
  }
  body { box-sizing:border-box !important; }
  .contenedor-600, table.vitae-layout, .vitae-contenido-gris {
    display:block !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
    box-sizing:border-box !important;
  }
  table.vitae-layout { table-layout:auto !important; border-collapse:collapse !important; }
  table.vitae-layout > tbody { display:block !important; width:100% !important; }
  table.vitae-layout > tbody > tr:not(.vitae-columnas) {
    display:block !important; width:100% !important; max-width:100% !important;
  }
  table.vitae-layout > tbody > tr > td:not(.vitae-columna-principal):not(.vitae-columna-lateral) {
    display:block !important; width:100% !important; max-width:100% !important;
    box-sizing:border-box !important;
  }
  /* Orden vertical: cabecera, menú, contenido principal, lateral, educación y diplomas. */
  table.vitae-layout > tbody > tr.vitae-columnas {
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    width:100% !important; max-width:100% !important; height:auto !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
    display:block !important; order:1 !important; flex:0 0 auto !important;
    float:none !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; height:auto !important; min-height:0 !important;
    padding:0 !important; box-sizing:border-box !important; overflow:visible !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    display:block !important; order:2 !important; flex:0 0 auto !important;
    float:none !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; height:auto !important; min-height:0 !important;
    padding:12px 8px !important; text-align:center !important;
    box-sizing:border-box !important; overflow:visible !important; overflow-wrap:anywhere !important;
  }
  .vitae-columna-principal > table, .vitae-columna-lateral > table {
    display:table !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; height:auto !important; table-layout:auto !important;
    box-sizing:border-box !important;
  }
  .vitae-columna-principal table tr, .vitae-columna-principal table td,
  .vitae-columna-lateral table tr, .vitae-columna-lateral table td {
    max-width:100% !important; height:auto !important; box-sizing:border-box !important;
  }
  #headerbox {
    width:100% !important; max-width:100% !important; height:auto !important;
    min-height:0 !important; margin:0 !important; padding:0 !important;
    box-sizing:border-box !important; overflow:visible !important;
  }
  h1.cyberfractal {
    display:block !important; width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important; margin:0 !important;
    padding:4px 8px 8px !important; font-size:clamp(34px,9.5vw,48px) !important;
    line-height:1.08 !important; text-align:center !important; box-sizing:border-box !important;
  }
  h1.cyberfractal .texto { display:block !important; white-space:normal !important; }
  .menu-principal-cv {
    display:flex !important; flex-flow:row wrap !important; align-items:center !important;
    justify-content:center !important; gap:5px 12px !important; width:100% !important;
    max-width:100% !important; height:auto !important; min-height:0 !important;
    margin:0 !important; padding:10px 8px !important; overflow:visible !important;
    white-space:normal !important; box-sizing:border-box !important;
  }
  .menu-principal-cv a {
    display:inline-block !important; flex:0 1 auto !important; margin:0 !important;
    padding:4px 2px !important; font-size:14px !important; line-height:1.35 !important;
    white-space:normal !important; overflow-wrap:normal !important;
  }
  .vitae-columna-principal img, .vitae-columna-lateral img,
  .vitae-contenido-gris img, .vitae-columna-principal video,
  .vitae-columna-lateral video { max-width:100% !important; height:auto !important; }
  .vitae-columna-principal img[src*="cv.jpg"] {
    display:block !important; width:100% !important; max-width:415px !important;
    height:auto !important; margin:0 auto !important;
  }
  .vitae-columna-lateral [style*="white-space: nowrap"] { white-space:normal !important; }
  .vitae-columna-lateral a { overflow-wrap:anywhere !important; }
  .vitae-columna-lateral .boton-salud-mental,
  .vitae-columna-lateral .boton-contacto-cyber {
    display:inline-block !important; max-width:calc(100% - 16px) !important;
    box-sizing:border-box !important;
  }
  .qr {
    display:block !important; width:100% !important; max-width:100% !important;
    margin:12px auto !important; padding:8px !important; text-align:center !important;
    box-sizing:border-box !important;
  }
  .qr img {
    display:block !important; width:auto !important; max-width:min(240px,72vw) !important;
    height:auto !important; margin:0 auto !important;
  }
  .boton-contacto-cyber { max-width:calc(100% - 24px) !important; }
  .vitae-contenido-gris { display:block !important; overflow:visible !important; }
  .vitae-contenido-gris > table {
    display:table !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; height:auto !important; table-layout:auto !important;
    box-sizing:border-box !important;
  }
  .vitae-contenido-gris > table > tbody,
  .vitae-contenido-gris > table > tbody > tr,
  .vitae-contenido-gris > table > tbody > tr > td {
    height:auto !important; min-width:0 !important; max-width:100% !important;
    box-sizing:border-box !important;
  }
  .section, h2, #iti { min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere !important; }
  .aviso-horizontal {
    width:100% !important; height:auto !important; min-height:0 !important;
    max-height:none !important; box-sizing:border-box !important;
    white-space:normal !important; overflow:visible !important;
  }
  /* Solo el marco de cursos tiene scroll horizontal; conserva las 4 columnas. */
  .itinerario-scroll {
    display:block !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important; overscroll-behavior-x:contain !important;
    box-sizing:border-box !important;
  }
  .itinerario-scroll > table.table-cursos {
    display:table !important; width:900px !important; min-width:900px !important;
    max-width:none !important; table-layout:auto !important; border-collapse:collapse !important;
  }
  .itinerario-scroll .table-cursos thead { display:table-header-group !important; }
  .itinerario-scroll .table-cursos tbody { display:table-row-group !important; }
  .itinerario-scroll .table-cursos tr { display:table-row !important; width:auto !important; }
  .itinerario-scroll .table-cursos th, .itinerario-scroll .table-cursos td {
    display:table-cell !important; width:auto !important; padding:8px 10px !important;
    text-align:left !important; vertical-align:top !important; white-space:normal !important;
  }
  .itinerario-scroll .table-cursos td::before { display:none !important; content:none !important; }
  .btn-flotante { right:10px !important; bottom:18px !important; max-width:48px !important; }
  footer { width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow-wrap:anywhere !important; }
}

/* ==================== vitae-responsive-automatico(1).css ==================== */
/*
  VITAE — corrección de estructura de tabla + adaptación móvil.
  La tabla exterior tiene DOS columnas reales: 450px y 150px.
  No cambiar los estilos globales de illex.css.
*/
* { box-sizing:border-box; }

/* Escritorio: diseño original de 600 px */
@media screen and (min-width:601px) {
  html, body { min-width:0; }
  .contenedor-600 { width:600px !important; max-width:600px !important; margin-left:auto !important; margin-right:auto !important; }
  table.vitae-layout {
    display:table !important; width:600px !important; min-width:600px !important;
    max-width:600px !important; table-layout:fixed !important; border-collapse:collapse !important; margin:0 auto !important;
  }
  table.vitae-layout > tbody { display:table-row-group !important; width:600px !important; }
  table.vitae-layout > tbody > tr { display:table-row !important; }
  table.vitae-layout > tbody > tr > td { display:table-cell !important; }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
    width:450px !important; min-width:450px !important; max-width:450px !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    width:150px !important; min-width:150px !important; max-width:150px !important;
  }
  .vitae-columna-principal > table { width:450px !important; max-width:450px !important; }
  .vitae-columna-lateral > table { width:150px !important; max-width:150px !important; }
  .vitae-contenido-gris { width:596px !important; max-width:596px !important; margin-left:auto !important; margin-right:auto !important; }
}

/* Menú visible en PC y sin desbordar el marco de 600px */
.menu-principal-cv {
  width:100% !important; max-width:600px !important; min-width:0 !important;
  display:flex !important; flex-flow:row nowrap !important;
}
.menu-principal-cv > a { min-width:0 !important; flex:1 1 0 !important; text-align:center !important; }

/* Móvil: ancho automático, sin activar «Sitio de escritorio» */
@media screen and (max-width:600px) {
  html, body {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    margin:0 !important; overflow-x:hidden !important;
  }
  .contenedor-600, table.vitae-layout, .vitae-contenido-gris {
    display:block !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
  }
  table.vitae-layout, table.vitae-layout > tbody { display:block !important; width:100% !important; }
  table.vitae-layout > tbody > tr:not(.vitae-columnas) { display:block !important; width:100% !important; }
  table.vitae-layout > tbody > tr:not(.vitae-columnas) > td {
    display:block !important; width:100% !important; max-width:100% !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas {
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal,
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    display:block !important; float:none !important; width:100% !important;
    min-width:0 !important; max-width:100% !important; height:auto !important;
    padding:8px !important; overflow-wrap:anywhere !important;
  }
  .vitae-columna-principal > table, .vitae-columna-lateral > table,
  .vitae-columna-principal table, .vitae-columna-lateral table {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    table-layout:auto !important;
  }
  img, video, iframe, object, embed { max-width:100% !important; height:auto; }
  #headerbox, h1.cyberfractal { width:100% !important; max-width:100% !important; }
  h1.cyberfractal { font-size:clamp(32px,9vw,46px) !important; text-align:center !important; }
  .menu-principal-cv {
    flex-flow:row wrap !important; justify-content:center !important;
    width:100% !important; max-width:100% !important; overflow:visible !important;
    padding:8px 4px !important; gap:4px 8px !important;
  }
  .menu-principal-cv > a {
    flex:1 1 22% !important; min-width:0 !important; padding:5px 2px !important;
    font-size:clamp(12px,3.4vw,15px) !important; white-space:normal !important;
  }
  .vitae-columna-principal img[src*="cv.jpg"] {
    display:block !important; width:100% !important; max-width:415px !important;
    height:auto !important; margin:0 auto !important;
  }
  .vitae-columna-lateral [style*="white-space: nowrap"] { white-space:normal !important; }
  .vitae-contenido-gris > table {
    display:table !important; width:100% !important; min-width:0 !important;
    max-width:100% !important; table-layout:auto !important;
  }
  .vitae-contenido-gris > table > tbody > tr > td {
    width:auto !important; max-width:100% !important; overflow-wrap:anywhere !important;
  }
  .qr { width:100% !important; max-width:100% !important; text-align:center !important; }
  .qr img { display:block !important; width:auto !important; max-width:72vw !important; height:auto !important; margin:0 auto !important; }

  /* La tabla de cursos conserva cuatro columnas y tiene scroll propio */
  .itinerario-scroll {
    display:block !important; width:100% !important; max-width:100% !important;
    min-width:0 !important; height:360px !important; max-height:360px !important;
    overflow:auto !important; -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important; overscroll-behavior:contain !important;
  }
  .itinerario-scroll > table.table-cursos {
    display:table !important; width:900px !important; min-width:900px !important;
    max-width:none !important; table-layout:auto !important;
  }
  .itinerario-scroll .table-cursos thead { display:table-header-group !important; }
  .itinerario-scroll .table-cursos tbody { display:table-row-group !important; }
  .itinerario-scroll .table-cursos tr { display:table-row !important; }
  .itinerario-scroll .table-cursos th, .itinerario-scroll .table-cursos td {
    display:table-cell !important; white-space:normal !important; vertical-align:top !important;
  }
  .itinerario-scroll .table-cursos td::before { content:none !important; display:none !important; }
  .contenedor-600 p[align="center"], .vitae-contenido-gris p[align="center"] {
    display:flex !important; flex-flow:row nowrap !important; justify-content:center !important;
    gap:4px !important; width:100% !important; max-width:100% !important;
    overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .contenedor-600 p[align="center"] > a, .vitae-contenido-gris p[align="center"] > a {
    flex:0 0 auto !important; display:inline-flex !important;
  }
}
@media print {
  .itinerario-scroll { height:auto !important; max-height:none !important; overflow:visible !important; }
  .itinerario-scroll > table.table-cursos { width:100% !important; min-width:0 !important; }
}


/* Refuerzo de columnas de escritorio: el colgroup define 450 + 150 = 600 px */
@media screen and (min-width:601px) {
  table.vitae-layout > colgroup > col:first-child { width:450px !important; }
  table.vitae-layout > colgroup > col:nth-child(2) { width:150px !important; }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
    box-sizing:border-box !important; width:450px !important; min-width:450px !important;
    max-width:450px !important; padding-left:0 !important; padding-right:0 !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    box-sizing:border-box !important; width:150px !important; min-width:150px !important;
    max-width:150px !important; padding-left:0 !important; padding-right:0 !important;
  }
}


/* Ajuste para el viewport fijo de 601px: centra el lienzo de 600px sin recortarlo. */
@media screen and (min-width:601px) {
  html, body { width:100% !important; min-width:0 !important; }
  .contenedor-600 {
    width:600px !important; min-width:600px !important; max-width:600px !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  table.vitae-layout {
    width:600px !important; min-width:600px !important; max-width:600px !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  /* La tabla de diplomas conserva sus columnas y se desplaza dentro de su propio marco. */
  .itinerario-scroll {
    display:block !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
    height:360px !important; max-height:360px !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-x pan-y !important;
  }
  .itinerario-scroll > table.table-cursos {
    display:table !important;
    width:900px !important; min-width:900px !important; max-width:none !important;
    table-layout:auto !important;
  }
  .itinerario-scroll .table-cursos thead { display:table-header-group !important; }
  .itinerario-scroll .table-cursos tbody { display:table-row-group !important; }
  .itinerario-scroll .table-cursos tr { display:table-row !important; }
  .itinerario-scroll .table-cursos th,
  .itinerario-scroll .table-cursos td { white-space:normal; }
}


/* DIPLOMAS Y CURSOS: recuperar el desplazamiento horizontal completo */
html body .itinerario-scroll {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box !important;
    scrollbar-width: auto;
}

html body .itinerario-scroll table.table-cursos {
    display: table !important;
    width: 100% !important;
    min-width: 900px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse;
}

html body .itinerario-scroll table.table-cursos th,
html body .itinerario-scroll table.table-cursos td {
    white-space: normal !important;
    overflow: visible !important;
}

/* Evitar que un contenedor padre recorte la tabla */
html body .itinerario-scroll,
html body .itinerario-scroll * {
    scrollbar-color: #d6b85c #333333;
}

/* MEJORA DE LECTURA: TABLA DE CURSOS Y DIPLOMAS */
html body .itinerario-scroll table.table-cursos th,
html body .itinerario-scroll table.table-cursos td {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Fechas: mejor separación del borde izquierdo */
html body .itinerario-scroll table.table-cursos th:first-child,
html body .itinerario-scroll table.table-cursos td:first-child {
    padding-left: 12px !important;
}

/* Nombre del curso: lectura más clara */
html body .itinerario-scroll table.table-cursos th:nth-child(2),
html body .itinerario-scroll table.table-cursos td:nth-child(2) {
    padding-left: 14px !important;
    font-weight: 500 !important;
}

/* Institución */
html body .itinerario-scroll table.table-cursos th:nth-child(3),
html body .itinerario-scroll table.table-cursos td:nth-child(3) {
    padding-left: 12px !important;
}



/* CORRECCIÓN DEFINITIVA DEL SCROLL HORIZONTAL DE CURSOS */
html body .vitae-contenido-gris .itinerario-scroll {
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: scroll !important;
  overflow-y: auto !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  direction: ltr !important;
}
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos {
  display: table !important;
  box-sizing: border-box !important;
  width: 1200px !important;
  min-width: 1200px !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(1),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(1) { width: 125px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(2),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(2) { width: 540px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(3),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(3) { width: 350px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(4),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(4) { width: 185px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th,
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td {
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}


/* Refuerzo: scroll horizontal amplio y desplazamiento hasta la cuarta columna. */
html body .vitae-contenido-gris .itinerario-scroll {
  overflow-x: scroll !important; overflow-y: auto !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  touch-action: pan-x pan-y !important; -webkit-overflow-scrolling: touch !important;
  scrollbar-width: auto !important;
}
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos {
  width: 1800px !important; min-width: 1800px !important; max-width: none !important;
  table-layout: fixed !important; margin: 0 !important;
}
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(1),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(1) { width: 140px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(2),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(2) { width: 650px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(3),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(3) { width: 600px !important; }
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos th:nth-child(4),
html body .vitae-contenido-gris .itinerario-scroll > table.table-cursos td:nth-child(4) { width: 410px !important; }

/* ==================== vitae-ajuste-final-revisado(1).css ==================== */
@charset "utf-8";
/* =========================================================
   VITAE — AJUSTE FINAL
   Objetivos:
   - Móvil vertical: contenido principal y lateral apilados.
   - Ancho exterior máximo de 600 px.
   - Menú principal accesible mediante desplazamiento horizontal.
   - Itinerario de diplomas con cuatro columnas y barras de desplazamiento.
   - Escritorio: conservar la distribución 450 px + 150 px.
   ========================================================= */

/* Caja exterior: nunca supera los 600 px */
html, body {
  max-width: 100%;
}
.contenedor-600,
.vitae-contenido-gris {
  width: 600px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
table.vitae-layout {
  width: 600px;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
}
table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
  width: 450px;
  max-width: 450px;
  box-sizing: border-box;
}
table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
  width: 150px;
  max-width: 150px;
  box-sizing: border-box;
}

/* El menú no recorta enlaces: se puede deslizar de lado a lado */
.menu-principal-cv {
  width: 600px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  justify-content: flex-start !important;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #b59a48 #333333;
}
.menu-principal-cv a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* La tabla de cursos conserva sus cuatro columnas.
   El desplazamiento sucede dentro del contenedor, no en toda la página. */
.itinerario-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 420px;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: #8a8a8a #e7e7e7;
  border: 1px solid #b7b7b7;
  box-sizing: border-box;
}
.table-cursos {
  display: table !important;
  width: 760px !important;
  min-width: 760px !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}
.table-cursos thead {
  display: table-header-group !important;
}
.table-cursos tbody {
  display: table-row-group !important;
}
.table-cursos tr {
  display: table-row !important;
  width: auto !important;
  margin: 0 !important;
}
.table-cursos th,
.table-cursos td {
  display: table-cell !important;
  position: static;
  padding: 9px 10px;
  vertical-align: top;
  white-space: normal;
}
.table-cursos td::before {
  content: none !important;
  display: none !important;
}
.table-cursos thead th {
  position: sticky !important;
  top: 0;
  z-index: 3;
}
.table-cursos td.curso-diploma {
  cursor: zoom-in;
}

/* Scrollbars visibles en navegadores basados en WebKit */
.itinerario-scroll::-webkit-scrollbar,
.menu-principal-cv::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
.itinerario-scroll::-webkit-scrollbar-track,
.menu-principal-cv::-webkit-scrollbar-track {
  background: #e7e7e7;
  border-radius: 8px;
}
.itinerario-scroll::-webkit-scrollbar-thumb,
.menu-principal-cv::-webkit-scrollbar-thumb {
  background: #8a8a8a;
  border: 2px solid #e7e7e7;
  border-radius: 8px;
}

/* Visor de diploma: queda dentro de la pantalla y permite desplazarse */
.diploma-preview {
  box-sizing: border-box;
  max-width: min(576px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  overflow: auto !important;
}
.diploma-preview-image {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
#abrir-diploma-pdf {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* MÓVIL: vertical y horizontal, sin desbordamiento lateral de la página */
@media screen and (max-width: 600px) {
  html, body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .contenedor-600,
  .vitae-contenido-gris {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  table.vitae-layout {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 600px !important;
    table-layout: auto !important;
  }
  table.vitae-layout > tbody {
    display: block !important;
    width: 100% !important;
  }
  table.vitae-layout > tbody > tr:not(.vitae-columnas) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  table.vitae-layout > tbody > tr > td:not(.vitae-columna-principal):not(.vitae-columna-lateral) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* La fila con las dos columnas pasa a ser una columna vertical.
     El contenido lateral queda debajo del CV y antes de Educación. */
  table.vitae-layout > tbody > tr.vitae-columnas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
    display: block !important;
    order: 1 !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    display: block !important;
    order: 2 !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 12px 8px !important;
    text-align: center !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
  .vitae-columna-principal > table,
  .vitae-columna-lateral > table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }
  .vitae-columna-principal table tr,
  .vitae-columna-principal table td,
  .vitae-columna-lateral table tr,
  .vitae-columna-lateral table td {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  #headerbox {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  h1.cyberfractal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 8px !important;
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  h1.cyberfractal .texto {
    white-space: normal !important;
  }
  .menu-principal-cv {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .menu-principal-cv a {
    flex: 0 0 auto !important;
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
  }
  .vitae-columna-principal img,
  .vitae-columna-lateral img,
  .vitae-contenido-gris img,
  .vitae-columna-principal video,
  .vitae-columna-lateral video {
    max-width: 100% !important;
    height: auto !important;
  }
  .vitae-columna-principal img[src*="cv.jpg"] {
    display: block !important;
    width: 100% !important;
    max-width: 415px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .vitae-columna-lateral [style*="white-space: nowrap"] {
    white-space: normal !important;
  }
  .vitae-columna-lateral a {
    overflow-wrap: anywhere !important;
  }
  .qr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    padding: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .qr img {
    display: block !important;
    width: auto !important;
    max-width: min(240px, 72vw) !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .itinerario-scroll {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 360px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    touch-action: pan-x pan-y;
  }
  .table-cursos {
    width: 760px !important;
    min-width: 760px !important;
  }
  .diploma-preview.mobile-mode {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: auto !important;
    padding: 56px 12px 82px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.90) !important;
    box-sizing: border-box !important;
  }
  .diploma-preview.mobile-mode.visible {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .diploma-preview.mobile-mode .diploma-preview-image {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 150px) !important;
  }
  .diploma-preview.mobile-mode #abrir-diploma-pdf {
    position: fixed !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px) !important;
    white-space: normal !important;
  }
}


/* =========================================================
   AJUSTE DEFINITIVO — ITINERARIO DE CURSOS Y DIPLOMAS
   Este bloque prevalece sobre las reglas anteriores de la tabla.
   ========================================================= */
html body .itinerario-scroll {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  overflow-x: scroll !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y !important;
  box-sizing: border-box !important;
  scrollbar-width: auto;
  scrollbar-color: #d6b85c #333333;
}

html body .itinerario-scroll > table.table-cursos,
html body .itinerario-scroll table.table-cursos {
  display: table !important;
  width: 900px !important;
  min-width: 900px !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

html body .itinerario-scroll table.table-cursos thead {
  display: table-header-group !important;
}
html body .itinerario-scroll table.table-cursos tbody {
  display: table-row-group !important;
}
html body .itinerario-scroll table.table-cursos tr {
  display: table-row !important;
}
html body .itinerario-scroll table.table-cursos th,
html body .itinerario-scroll table.table-cursos td {
  display: table-cell !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}
html body .itinerario-scroll table.table-cursos td::before {
  content: none !important;
  display: none !important;
}

/* Barras visibles, con acento dorado */
html body .itinerario-scroll::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
html body .itinerario-scroll::-webkit-scrollbar-thumb {
  background: #d6b85c;
  border-radius: 8px;
}
html body .itinerario-scroll::-webkit-scrollbar-track {
  background: #333333;
}

/* Al imprimir, no cortar el contenido por el área desplazable */
@media print {
  html body .itinerario-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .itinerario-scroll table.table-cursos {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ==================== vitae-scroll-final.css ==================== */
/* Corrección aislada del desplazamiento de la tabla de cursos. Cargar al final del <head>. */
html body .contenedor-600 .itinerario-scroll {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  overflow-x: scroll !important;
  overflow-y: scroll !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  scrollbar-width: auto !important;
}
html body .contenedor-600 .itinerario-scroll > table.table-cursos {
  display: table !important;
  width: 1800px !important;
  min-width: 1800px !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
html body .contenedor-600 .itinerario-scroll > table.table-cursos th:nth-child(1),
html body .contenedor-600 .itinerario-scroll > table.table-cursos td:nth-child(1) { width: 160px !important; min-width:160px !important; }
html body .contenedor-600 .itinerario-scroll > table.table-cursos th:nth-child(2),
html body .contenedor-600 .itinerario-scroll > table.table-cursos td:nth-child(2) { width: 800px !important; min-width:800px !important; }
html body .contenedor-600 .itinerario-scroll > table.table-cursos th:nth-child(3),
html body .contenedor-600 .itinerario-scroll > table.table-cursos td:nth-child(3) { width: 600px !important; min-width:600px !important; }
html body .contenedor-600 .itinerario-scroll > table.table-cursos th:nth-child(4),
html body .contenedor-600 .itinerario-scroll > table.table-cursos td:nth-child(4) { width: 240px !important; min-width:240px !important; }
html body .contenedor-600 .itinerario-scroll th,
html body .contenedor-600 .itinerario-scroll td {
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow: visible !important;
  vertical-align: top !important;
}
html body .contenedor-600 .itinerario-scroll:focus-visible { outline: 2px solid #d6b85c !important; outline-offset: 2px; }

/* Corrección de márgenes: todas las secciones quedan dentro de los 600 px */
html body .contenedor-600 .section {
  display: block !important;
  width: 600px !important;
  min-width: 0 !important;
  max-width: 600px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}
html body .contenedor-600 .section > h2,
html body .contenedor-600 .section > ul,
html body .contenedor-600 .section > p,
html body .contenedor-600 .section > div:not(.itinerario-scroll) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body .contenedor-600 .section > h2 {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html body .contenedor-600 .section > ul {
  padding-left: 24px !important;
  padding-right: 4px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body .contenedor-600 .section > ul li {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
/* El itinerario conserva su desplazamiento interno; no se reduce la tabla */
html body .contenedor-600 .section > .itinerario-scroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ==================== vitae-margen-principal(1).css ==================== */
@charset "utf-8";

/* Mantiene el diseño general de 600 px: 450 px + 150 px. */
.vitae-layout {
  width: 600px !important;
  max-width: 600px !important;
  table-layout: fixed;
  border-collapse: collapse;
}

.vitae-layout colgroup col:first-child { width: 450px; }
.vitae-layout colgroup col:nth-child(2) { width: 150px; }

.vitae-layout tr.vitae-columnas > td.vitae-columna-principal {
  width: 450px !important;
  max-width: 450px !important;
  padding: 0 !important;
  box-sizing: border-box;
  vertical-align: top;
}

/* CORRECCIÓN PRINCIPAL:
   la tabla interior queda 15 px más angosta que la columna de 450 px.
   Así se crea un margen derecho real, no solo padding sobre contenido. */
.vitae-layout td.vitae-columna-principal > table {
  width: calc(100% - 15px) !important;
  max-width: calc(100% - 15px) !important;
  box-sizing: border-box;
  table-layout: fixed;
  border-collapse: separate;
}

/* Protege el contenido para que no empuje el ancho disponible. */
.vitae-layout td.vitae-columna-principal > table > tbody > tr > td {
  box-sizing: border-box;
  padding-left: 5px !important;
  padding-right: 10px !important;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.vitae-layout td.vitae-columna-principal .section,
.vitae-layout td.vitae-columna-principal p,
.vitae-layout td.vitae-columna-principal ul,
.vitae-layout td.vitae-columna-principal h1,
.vitae-layout td.vitae-columna-principal h2,
.vitae-layout td.vitae-columna-principal .titulo-marmol-verde {
  max-width: 100%;
  box-sizing: border-box;
}

.vitae-layout td.vitae-columna-principal img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Margen uniforme de lectura en los bloques de texto de la columna. */
.vitae-layout td.vitae-columna-principal .section {
  margin-right: 10px;
  box-sizing: border-box;
}

/* El bloque inferior también queda dentro de los 600 px. */
.vitae-contenido-gris {
  width: 600px;
  max-width: 600px;
  box-sizing: border-box;
}

.vitae-contenido-gris > table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

.vitae-contenido-gris > table > tbody > tr > td {
  box-sizing: border-box;
  padding-right: 15px !important;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* ==================== vitae-solapamiento-columnas.css ==================== */
@charset "utf-8";
/* CSS Document */


/* CORRECCIÓN DEL SOLAPAMIENTO DE COLUMNAS — VITAE */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Mantener la estructura general de 600 px */
.contenedor-600 {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    overflow: visible !important;
}

table.vitae-layout {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Columna principal: 450 px */
table.vitae-layout td.vitae-columna-principal {
    position: relative !important;
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
    padding-right: 15px !important;
    vertical-align: top !important;
    overflow: hidden !important;
}

/* Evitar que las tablas interiores excedan la columna */
.vitae-columna-principal > table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.vitae-columna-principal p,
.vitae-columna-principal li,
.vitae-columna-principal h2,
.vitae-columna-principal h3,
.vitae-columna-principal .section {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Columna derecha: 150 px, sin invadir la principal */
table.vitae-layout td.vitae-columna-lateral {
    position: relative !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: top !important;
}

/* No desplazar las columnas en pantallas pequeñas */
@media screen and (max-width: 600px) {
    .contenedor-600,
    table.vitae-layout {
        width: 600px !important;
        min-width: 600px !important;
        max-width: 600px !important;
    }
}

/* ==========================================================
   CYBERFRACTAL — AJUSTE FINAL DE VITAE
   Escritorio y paisaje: conserva el comportamiento heredado.
   Solo retrabaja móvil estrecho en orientación vertical.
   ========================================================== */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

@media screen and (max-width: 600px) and (orientation: portrait) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  *, *::before, *::after { box-sizing: border-box; }

  .contenedor-600 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    overflow-x: clip !important;
  }

  table.vitae-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  table.vitae-layout > colgroup { display: none !important; }
  table.vitae-layout > tbody,
  table.vitae-layout > tbody > tr,
  table.vitae-layout > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  table.vitae-layout td,
  table.vitae-layout th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-wrap: anywhere !important;
  }

  #headerbox,
  h1.cyberfractal,
  nav.menu-principal-cv,
  .vitae-contenido-gris,
  .vitae-contenido-gris > table,
  .vitae-contenido-gris > table > tbody,
  .vitae-contenido-gris > table > tbody > tr,
  .vitae-contenido-gris > table > tbody > tr > td,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  nav.menu-principal-cv {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 6px !important;
    overflow: visible !important;
  }
  nav.menu-principal-cv a {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  .vitae-columnas,
  .vitae-columna-principal,
  .vitae-columna-lateral {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .vitae-columna-principal > table,
  .vitae-columna-principal > table > tbody,
  .vitae-columna-principal > table > tbody > tr,
  .vitae-columna-principal > table > tbody > tr > td,
  .vitae-columna-lateral > table,
  .vitae-columna-lateral > table > tbody,
  .vitae-columna-lateral > table > tbody > tr,
  .vitae-columna-lateral > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .vitae-columna-principal img,
  .vitae-columna-lateral img,
  .qr img,
  .imagen-nose,
  .luz-suave {
    max-width: 100% !important;
    height: auto !important;
  }

  .vitae-columna-lateral [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .vitae-contenido-gris {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .section {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-wrap: anywhere !important;
  }

  .itinerario-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
  }
  .itinerario-scroll > table.table-cursos,
  table.table-cursos {
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  .itinerario-scroll th,
  .itinerario-scroll td {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .aviso-horizontal {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn-flotante {
    max-width: 42px !important;
    right: 8px !important;
    bottom: 10px !important;
  }

  footer, footer p, .qr, .boton-contacto-cyber {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}


/* ==========================================================
   CORRECCIÓN AISLADA: móvil vertical (hasta 600 px)
   No altera escritorio ni móvil horizontal.
   ========================================================== */
@media screen and (max-width: 600px) and (orientation: portrait) {
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  body { min-width: 0 !important; }
  .contenedor-600,
  .vitae-contenido-gris,
  .vitae-contenido-gris > table,
  .vitae-contenido-gris > table > tbody,
  .vitae-contenido-gris > table > tbody > tr,
  .vitae-contenido-gris > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .vitae-layout {
    display: block !important;
    table-layout: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .vitae-layout > colgroup { display: none !important; }
  .vitae-layout > tbody,
  .vitae-layout > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .vitae-layout td,
  .vitae-layout .vitae-columna-principal,
  .vitae-layout .vitae-columna-lateral {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-wrap: anywhere !important;
  }
  .vitae-layout table,
  .vitae-layout table[width],
  .vitae-contenido-gris table,
  .vitae-contenido-gris table[width] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  .vitae-layout td[width],
  .vitae-contenido-gris td[width],
  .vitae-layout table[width],
  .vitae-contenido-gris table[width] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section, .section p, .section li, .vitae-contenido-gris p,
  .vitae-contenido-gris li, h1, h2, h3 {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .menu-principal-cv {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .menu-principal-cv a {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }
  .vitae-columna-lateral > table,
  .vitae-columna-lateral table,
  .vitae-columna-lateral td,
  .vitae-columna-lateral div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .vitae-columna-lateral img {
    display: block !important;
    max-width: min(100%, 280px) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .itinerario-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .itinerario-scroll > table,
  .itinerario-scroll > table.table-cursos {
    display: table !important;
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  .qr { width: 100% !important; max-width: 100% !important; }
  .qr img { max-width: min(100%, 280px) !important; }
  .btn-flotante { max-width: 56px !important; }
}


/* =========================================================
   CORRECCION FINAL: SOLO TELEFONO EN ORIENTACION VERTICAL
   No modifica escritorio ni telefono en horizontal.
   ========================================================= */
@media screen and (max-width: 600px) and (orientation: portrait) {
  html, body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  *, *::before, *::after { box-sizing: border-box !important; }
  .contenedor-600 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    overflow-x: clip !important;
  }
  table.vitae-layout {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  table.vitae-layout colgroup { display: none !important; }
  table.vitae-layout > tbody,
  table.vitae-layout > tbody > tr,
  table.vitae-layout > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  table.vitae-layout > tbody > tr { display: block !important; }
  table.vitae-layout > tbody > tr > td {
    display: block !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    height: auto !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal,
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
  }
  .vitae-layout td table,
  .vitae-layout td table[width],
  .vitae-contenido-gris,
  .vitae-contenido-gris > table,
  .vitae-contenido-gris table[width],
  .vitae-contenido-gris td[width],
  .vitae-layout td[width] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  .vitae-layout img,
  .vitae-contenido-gris img,
  .contenedor-600 img,
  img {
    height: auto;
    max-width: 100% !important;
  }
  .vitae-layout td *,
  .vitae-contenido-gris td *,
  .section,
  .section p,
  .section li,
  .section ul,
  .section h1,
  .section h2,
  .section h3 {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .vitae-layout td.vitae-columna-principal > table {
    height: auto !important;
  }
  .vitae-layout td.vitae-columna-principal > table > tbody > tr > td {
    width: 100% !important;
    height: auto !important;
  }
  .vitae-columna-lateral > table,
  .vitae-columna-lateral > table > tbody,
  .vitae-columna-lateral > table > tbody > tr,
  .vitae-columna-lateral > table > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .vitae-columna-lateral img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .vitae-contenido-gris > table > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .itinerario-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .itinerario-scroll > table.table-cursos,
  .itinerario-scroll table.table-cursos {
    width: 1500px !important;
    min-width: 1500px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
  .itinerario-scroll table.table-cursos th,
  .itinerario-scroll table.table-cursos td {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .aviso-horizontal {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .btn-flotante {
    right: 8px !important;
    bottom: 12px !important;
  }
  footer, footer p, .qr, .qr small {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}



/* CORRECCIÓN PUNTUAL: barra de navegación horizontal en móvil vertical.
   No modifica la distribución del escritorio ni del móvil horizontal. */
@media screen and (max-width: 600px) and (orientation: portrait) {
  nav.menu-principal-cv {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  nav.menu-principal-cv::-webkit-scrollbar { display: none !important; }
  nav.menu-principal-cv > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}


/* =========================================================
   CYBERFRACTAL — AJUSTE FINAL PARA MÓVIL VERTICAL
   Mantiene el escritorio en 600 px; adapta el contenido al ancho
   real del teléfono sin deformar texto ni imágenes.
   ========================================================= */
@media screen and (max-width: 600px) and (orientation: portrait) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  .contenedor-600 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  table.vitae-layout {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    table-layout: fixed !important;
  }
  table.vitae-layout colgroup { display: none !important; }
  table.vitae-layout > tbody,
  table.vitae-layout > tbody > tr,
  table.vitae-layout > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal,
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
  }
  table.vitae-layout td table,
  table.vitae-layout td table[width],
  table.vitae-layout td[width],
  .vitae-contenido-gris,
  .vitae-contenido-gris table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  table.vitae-layout img,
  .contenedor-600 img,
  .vitae-contenido-gris img {
    display: inline-block;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  table.vitae-layout td,
  table.vitae-layout td *,
  .vitae-contenido-gris td,
  .vitae-contenido-gris td * {
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .vitae-layout td.vitae-columna-principal > table,
  .vitae-layout td.vitae-columna-principal > table > tbody,
  .vitae-layout td.vitae-columna-principal > table > tbody > tr,
  .vitae-layout td.vitae-columna-principal > table > tbody > tr > td,
  .vitae-columna-lateral > table,
  .vitae-columna-lateral > table > tbody,
  .vitae-columna-lateral > table > tbody > tr,
  .vitae-columna-lateral > table > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .itinerario-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .itinerario-scroll table.table-cursos {
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
  }
  nav.menu-principal-cv {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  nav.menu-principal-cv > a {
    flex: 0 0 auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
  .btn-flotante { right: 8px !important; bottom: 12px !important; }
  footer { width: 100% !important; max-width: 100% !important; }
}

/* Escritorio: conserva la caja clásica de 600 px y las columnas 450 + 150. */
@media screen and (min-width: 601px) {
  .contenedor-600 { width: 600px !important; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; }
  table.vitae-layout { display: table !important; width: 600px !important; min-width: 600px !important; max-width: 600px !important; table-layout: fixed !important; margin: 0 auto !important; }
  table.vitae-layout > tbody > tr { display: table-row !important; }
  table.vitae-layout > tbody > tr > td { display: table-cell !important; }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal { width: 450px !important; min-width: 450px !important; max-width: 450px !important; }
  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral { width: 150px !important; min-width: 150px !important; max-width: 150px !important; }
}



/* ==========================================================
   CYBERFRACTAL — CORRECCIÓN MÓVIL VERTICAL
   Itinerario legible sin recortar columnas y nose.gif adaptable.
   Escritorio: conserva tabla y distribución originales.
   ========================================================== */
@media screen and (max-width: 600px) and (orientation: portrait) {
  html body .contenedor-600,
  html body .vitae-contenido-gris {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip !important;
  }

  /* El itinerario deja de ser una tabla de 900/1500 px en móvil.
     Cada fila se convierte en una tarjeta con sus cuatro leyendas. */
  html body .itinerario-scroll {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html body .itinerario-scroll table.table-cursos,
  html body .itinerario-scroll > table.table-cursos {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
  }

  html body .itinerario-scroll .table-cursos colgroup,
  html body .itinerario-scroll .table-cursos thead {
    display: none !important;
  }

  html body .itinerario-scroll .table-cursos tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .itinerario-scroll .table-cursos tbody tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 7px 10px !important;
    background: #f7f7f7 !important;
    color: #222 !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  html body .itinerario-scroll .table-cursos tbody td,
  html body .itinerario-scroll .table-cursos tbody td[data-label] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 7px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dedede !important;
    background: transparent !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html body .itinerario-scroll .table-cursos tbody td:last-child {
    border-bottom: 0 !important;
  }

  html body .itinerario-scroll .table-cursos tbody td::before {
    content: attr(data-label) !important;
    display: block !important;
    margin: 0 0 3px 0 !important;
    color: #67521b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
  }

  html body .itinerario-scroll .table-cursos tbody td.curso-diploma {
    cursor: zoom-in !important;
  }

  /* Vista ampliada del diploma: usa el área útil del teléfono y permite
     leer la imagen sin que se salga de los bordes. */
  html body .diploma-preview.mobile-mode {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: 54px 10px 82px !important;
    overflow: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body .diploma-preview.mobile-mode .diploma-preview-image {
    display: block !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: calc(100dvh - 150px) !important;
    object-fit: contain !important;
    margin: auto !important;
  }

  html body .diploma-preview.mobile-mode #abrir-diploma-pdf {
    max-width: calc(100vw - 20px) !important;
    white-space: normal !important;
  }

  /* Ilustración nose.gif: nunca fuerza el ancho de la página.
     Al tocarla, no usa escalados que la recorten fuera de pantalla. */
  html body .imagen-nose-contenedor {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    padding: 0 8px !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body img.imagen-nose {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 300px) !important;
    max-height: 70vh !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
    position: relative !important;
  }

  html body img.imagen-nose.activa,
  html body img.imagen-nose:focus-visible {
    width: auto !important;
    max-width: min(100%, 340px) !important;
    max-height: 75vh !important;
    transform: none !important;
    z-index: 20 !important;
  }
}

/* En escritorio se conserva la tabla tradicional y el ancho original. */
@media screen and (min-width: 601px) {
  html body .itinerario-scroll table.table-cursos {
    display: table;
    width: 900px;
    min-width: 900px;
    max-width: none;
  }
}



/* ============================================================
   AJUSTE FINAL — MÓVIL VERTICAL
   Caja centrada hasta 600 px; no recorta texto ni superpone celdas.
   En pantallas pequeñas se apilan las columnas principales.
   ============================================================ */
@media screen and (max-width: 600px) {
  html, body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .contenedor-600 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  /* Desactiva los anchos fijos de la tabla exterior 450 + 150
     en móvil; el contenido se presenta en una sola columna. */
  table.vitae-layout,
  table.vitae-layout > tbody,
  table.vitae-layout > tbody > tr,
  table.vitae-layout > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }

  table.vitae-layout {
    border-collapse: collapse !important;
    overflow: visible !important;
  }

  table.vitae-layout > colgroup {
    display: none !important;
  }

  table.vitae-layout td,
  table.vitae-layout td > table,
  table.vitae-layout td > table > tbody,
  table.vitae-layout td > table > tbody > tr,
  table.vitae-layout td > table > tbody > tr > td {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  table.vitae-layout td > table,
  table.vitae-layout td > table[width],
  table.vitae-layout td[width],
  .vitae-contenido-gris,
  .vitae-contenido-gris > table {
    width: 100% !important;
    table-layout: auto !important;
  }

  .vitae-columna-principal,
  .vitae-columna-lateral {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: visible !important;
  }

  .section,
  .section > p,
  .section > ul,
  .section > h1,
  .section > h2,
  .section > div,
  p, li, h1, h2, h3 {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  img {
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* Tarjetas de cursos: cada celda en su propia línea.
     Restablece también pseudoelementos antiguos que estaban absolutos. */
  .itinerario-scroll {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 8px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  .itinerario-scroll table.table-cursos,
  .itinerario-scroll > table.table-cursos {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-sizing: border-box !important;
  }

  .itinerario-scroll .table-cursos colgroup,
  .itinerario-scroll .table-cursos thead {
    display: none !important;
  }

  .itinerario-scroll .table-cursos tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .itinerario-scroll .table-cursos tbody tr {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 4px !important;
    background: #f7f7f7 !important;
    color: #222 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .itinerario-scroll .table-cursos tbody td,
  .itinerario-scroll .table-cursos tbody td[data-label] {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dedede !important;
    background: transparent !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .itinerario-scroll .table-cursos tbody td:last-child {
    border-bottom: 0 !important;
  }

  .itinerario-scroll .table-cursos tbody td::before {
    content: attr(data-label) !important;
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #67521b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    white-space: normal !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .itinerario-scroll .table-cursos tbody td.curso-diploma {
    cursor: zoom-in !important;
  }

  /* Mensaje de orientación horizontal: no debe empujar el ancho de página. */
  .aviso-horizontal,
  .orientacion-horizontal,
  [class*="horizontal"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  .imagen-nose-contenedor {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    padding: 0 8px !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  img.imagen-nose,
  img.imagen-nose.activa,
  img.imagen-nose:focus-visible {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 300px) !important;
    max-height: 72vh !important;
    margin: 0 auto !important;
    transform: none !important;
    object-fit: contain !important;
    position: relative !important;
  }

  .btn-flotante {
    left: auto !important;
    right: 10px !important;
    margin-left: 0 !important;
    transform: none !important;
    bottom: 12px !important;
  }

  #onda-fractal {
    width: min(600px, 100vw) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }
}

/* Escritorio: conservar exactamente el marco de 600 px. */
@media screen and (min-width: 601px) {
  .contenedor-600 {
    width: 600px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  table.vitae-layout {
    display: table !important;
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    table-layout: fixed !important;
  }

  table.vitae-layout > tbody > tr {
    display: table-row !important;
  }

  table.vitae-layout > tbody > tr > td {
    display: table-cell !important;
  }

  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
  }

  table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}


/* ==========================================================
   V2 — FIX DEFINITIVO PARA MÓVIL VERTICAL
   Corrige reglas anteriores más específicas que mantenían 600/900 px.
   ========================================================== */
@media screen and (max-width: 600px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  html body .contenedor-600 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  /* En móvil, la estructura 450 + 150 pasa a una sola columna.
     El ancho de 600 px se conserva solo en escritorio. */
  html body .contenedor-600 table.vitae-layout,
  html body .contenedor-600 table.vitae-layout > tbody,
  html body .contenedor-600 table.vitae-layout > tbody > tr,
  html body .contenedor-600 table.vitae-layout > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 table.vitae-layout {
    table-layout: auto !important;
    border-collapse: collapse !important;
  }

  html body .contenedor-600 table.vitae-layout colgroup,
  html body .contenedor-600 table.vitae-layout col {
    display: none !important;
    width: 0 !important;
  }

  html body .contenedor-600 table.vitae-layout td.vitae-columna-principal,
  html body .contenedor-600 table.vitae-layout td.vitae-columna-lateral {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }

  /* Las tablas internas heredadas de 450 px se ajustan al teléfono. */
  html body .contenedor-600 table.vitae-layout table:not(.table-cursos) {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 table.vitae-layout table:not(.table-cursos) > tbody,
  html body .contenedor-600 table.vitae-layout table:not(.table-cursos) > tbody > tr {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .contenedor-600 table.vitae-layout table:not(.table-cursos) td,
  html body .contenedor-600 table.vitae-layout table:not(.table-cursos) th {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .contenedor-600 .section,
  html body .contenedor-600 .section > p,
  html body .contenedor-600 .section > ul,
  html body .contenedor-600 .section > h1,
  html body .contenedor-600 .section > h2,
  html body .contenedor-600 .section > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  html body .contenedor-600 img,
  html body .contenedor-600 video,
  html body .contenedor-600 iframe {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box !important;
  }

  /* Itinerario: fuerza la tabla a ocupar el ancho real disponible,
     incluso frente a reglas antiguas que le asignaban 900 px. */
  html body .contenedor-600 .section .itinerario-scroll,
  html body .contenedor-600 .section .itinerario-scroll[role="region"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: visible !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll > table.table-cursos,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos colgroup,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos thead {
    display: none !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    background: #f7f7f7 !important;
    color: #222 !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr td,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr td[data-label] {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dedede !important;
    background: transparent !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr td:last-child {
    border-bottom: 0 !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr td::before {
    content: attr(data-label) !important;
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #67521b !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    white-space: normal !important;
  }

  /* El aviso de girar el teléfono no corresponde a la vista vertical. */
  html body .contenedor-600 .aviso-horizontal {
    display: none !important;
  }

  html body .imagen-nose-contenedor {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    padding: 0 8px !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body img.imagen-nose {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 300px) !important;
    max-height: 70vh !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

@media screen and (min-width: 601px) {
  html body .contenedor-600 {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .contenedor-600 table.vitae-layout {
    display: table !important;
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    table-layout: fixed !important;
  }

  html body .contenedor-600 table.vitae-layout > tbody > tr > td {
    display: table-cell !important;
  }
}


/* ==========================================================
   V3 — RESTAURAR DISEÑO ORIGINAL CYBERFRACTAL
   No convertir el itinerario en tarjetas. Mantener tabla y columnas.
   En móvil solo se habilita desplazamiento horizontal dentro del itinerario.
   ========================================================== */
@media screen and (max-width: 600px) {
  html body .contenedor-600 .section .itinerario-scroll,
  html body .contenedor-600 .section .itinerario-scroll[role="region"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border: 1px solid #bdbdbd !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll > table.table-cursos,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos {
    display: table !important;
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
    margin: 0 !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos colgroup {
    display: table-column-group !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos thead {
    display: table-header-group !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody {
    display: table-row-group !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tr,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr {
    display: table-row !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos th,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos td,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr td,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos tbody tr td[data-label] {
    display: table-cell !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos td::before,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos td[data-label]::before {
    content: none !important;
    display: none !important;
  }
}


/* ==========================================================
   V4 — AVISO DE ORIENTACIÓN + BARRA DE DESPLAZAMIENTO VISIBLE
   Conserva la tabla original y la identidad visual Cyberfractal.
   ========================================================== */

/* Aviso oculto en escritorio: solo aparece en teléfonos/tabletas estrechas. */
.aviso-vista-movil {
  display: none;
}

@media screen and (max-width: 600px) {
  .aviso-vista-movil {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 576px !important;
    margin: 12px auto 18px !important;
    padding: 13px 14px !important;
    color: #f0e2a0 !important;
    background: #333333 !important;
    border: 1px solid #bca45a !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.28) !important;
    box-sizing: border-box !important;
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 1.45 !important;
  }

  .aviso-vista-movil .aviso-vista-icono {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    color: #d6b85c !important;
    border: 1px solid #bca45a !important;
    border-radius: 50% !important;
    font-size: 23px !important;
    line-height: 1 !important;
  }

  .aviso-vista-movil strong {
    display: block !important;
    margin: 0 0 4px !important;
    color: #8ef0d2 !important;
    font-size: 15px !important;
  }

  .aviso-vista-movil p {
    margin: 0 0 5px !important;
    color: #f0e2a0 !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  .aviso-vista-movil small {
    display: block !important;
    color: #eeeeee !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Tabla original intacta: scroll táctil más cómodo y barra visible. */
  html body .contenedor-600 .section .itinerario-scroll,
  html body .contenedor-600 .section .itinerario-scroll[role="region"] {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 72vh !important;
    scrollbar-width: auto !important;
    scrollbar-color: #d6b85c #4a4a4a !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    scroll-behavior: smooth !important;
    border: 1px solid #bca45a !important;
    border-radius: 4px !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll::-webkit-scrollbar {
    height: 13px !important;
    width: 13px !important;
  }

  html body .contenedor-600 .section .itinerario-scroll::-webkit-scrollbar-track {
    background: #4a4a4a !important;
    border-radius: 10px !important;
    border: 1px solid #686868 !important;
  }

  html body .contenedor-600 .section .itinerario-scroll::-webkit-scrollbar-thumb {
    background: #d6b85c !important;
    border: 2px solid #4a4a4a !important;
    border-radius: 10px !important;
    min-height: 36px !important;
  }

  html body .contenedor-600 .section .itinerario-scroll::-webkit-scrollbar-thumb:active {
    background: #f0dc8b !important;
  }
}

@media screen and (min-width: 601px) {
  .aviso-vista-movil {
    display: none !important;
  }
}


/* ==========================================================
   V7 — MÁRGENES DE LECTURA + TÍTULOS DEL ITINERARIO
   Conserva el diseño de dos columnas de Cyberfractal.
   ========================================================== */

/* Evita que el texto de la columna principal invada la columna lateral
   o se corte antes de llegar al margen derecho. */
html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal {
  width: 450px !important;
  min-width: 450px !important;
  max-width: 450px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table {
  width: 436px !important;
  min-width: 0 !important;
  max-width: 436px !important;
  table-layout: fixed !important;
  box-sizing: border-box !important;
}

html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table > tbody > tr > td {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 8px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

html body .contenedor-600 .vitae-columna-principal p,
html body .contenedor-600 .vitae-columna-principal .section,
html body .contenedor-600 .vitae-columna-principal .section p,
html body .contenedor-600 .vitae-columna-principal li,
html body .contenedor-600 .vitae-columna-principal h1,
html body .contenedor-600 .vitae-columna-principal h2,
html body .contenedor-600 .vitae-columna-principal h3 {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Evita que elementos gráficos amplios creen una franja que tape texto. */
html body .contenedor-600 .vitae-columna-principal img,
html body .contenedor-600 .vitae-columna-principal iframe,
html body .contenedor-600 .vitae-columna-principal video {
  max-width: 100% !important;
  height: auto;
  box-sizing: border-box !important;
}

/* En escritorio, el contenido principal conserva la columna de 450 px
   y la columna lateral conserva sus 150 px. */
@media screen and (min-width: 601px) {
  html body .contenedor-600 table.vitae-layout {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    table-layout: fixed !important;
  }

  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* Itinerario: se mantiene la tabla y el scroll horizontal.
   Se reduce el ancho de Fecha y Horas para dar más espacio al título.
   Anchos totales: 130 + 465 + 225 + 120 = 940 px. */
html body .contenedor-600 .section .itinerario-scroll > table.table-cursos,
html body .contenedor-600 .section .itinerario-scroll table.table-cursos {
  width: 940px !important;
  min-width: 940px !important;
  max-width: none !important;
  table-layout: fixed !important;
}

html body .contenedor-600 .section .itinerario-scroll > table.table-cursos th:nth-child(1),
html body .contenedor-600 .section .itinerario-scroll > table.table-cursos td:nth-child(1) {
  width: 130px !important;
  min-width: 130px !important;
}

html body .contenedor-600 .section .itinerario-scroll > table.table-cursos th:nth-child(2),
html body .contenedor-600 .section .itinerario-scroll > table.table-cursos td:nth-child(2) {
  width: 465px !important;
  min-width: 465px !important;
}

html body .contenedor-600 .section .itinerario-scroll > table.table-cursos th:nth-child(3),
html body .contenedor-600 .section .itinerario-scroll > table.table-cursos td:nth-child(3) {
  width: 225px !important;
  min-width: 225px !important;
}

html body .contenedor-600 .section .itinerario-scroll > table.table-cursos th:nth-child(4),
html body .contenedor-600 .section .itinerario-scroll > table.table-cursos td:nth-child(4) {
  width: 120px !important;
  min-width: 120px !important;
}

html body .contenedor-600 .section .itinerario-scroll table.table-cursos th,
html body .contenedor-600 .section .itinerario-scroll table.table-cursos td {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* Móvil: el texto de la biografía se ajusta al ancho del teléfono.
   No se modifica el diseño tabular de diplomas ni la estructura general. */
@media screen and (max-width: 600px) {
  html body .contenedor-600 .vitae-columna-principal,
  html body .contenedor-600 .vitae-columna-principal > table,
  html body .contenedor-600 .vitae-columna-principal > table > tbody > tr,
  html body .contenedor-600 .vitae-columna-principal > table > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .vitae-columna-principal p,
  html body .contenedor-600 .vitae-columna-principal .section,
  html body .contenedor-600 .vitae-columna-principal li {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 12px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll > table.table-cursos,
  html body .contenedor-600 .section .itinerario-scroll table.table-cursos {
    width: 940px !important;
    min-width: 940px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
}


/* ==========================================================
   V8 — MÓVIL VERTICAL SIN RECORTES + ZOOM MANUAL
   El texto fluye dentro de la pantalla; las imágenes mantienen
   su proporción y pueden ampliarse mediante el zoom del navegador.
   ========================================================== */
@media screen and (max-width: 600px) {
  html {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  html body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  html body .contenedor-600 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* La tabla exterior de 600 px se adapta al ancho real del teléfono. */
  html body .contenedor-600 > table.vitae-layout,
  html body .contenedor-600 > table.vitae-layout > tbody,
  html body .contenedor-600 > table.vitae-layout > tbody > tr,
  html body .contenedor-600 > table.vitae-layout > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 > table.vitae-layout {
    display: block !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }

  html body .contenedor-600 > table.vitae-layout > colgroup,
  html body .contenedor-600 > table.vitae-layout > colgroup > col {
    display: none !important;
    width: 0 !important;
  }

  html body .contenedor-600 > table.vitae-layout > tbody,
  html body .contenedor-600 > table.vitae-layout > tbody > tr,
  html body .contenedor-600 > table.vitae-layout > tbody > tr > td {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
  }

  html body .contenedor-600 table.vitae-layout > tbody > tr > td[colspan="2"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Columna principal: texto completo, margen interior y ajuste de línea. */
  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal,
  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-lateral {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table,
  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table > tbody,
  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table > tbody > tr,
  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table > tbody > tr > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 table.vitae-layout > tbody > tr.vitae-columnas > td.vitae-columna-principal > table {
    display: table !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  html body .contenedor-600 .vitae-columna-principal p,
  html body .contenedor-600 .vitae-columna-principal li,
  html body .contenedor-600 .vitae-columna-principal .section,
  html body .contenedor-600 .vitae-columna-principal .section p,
  html body .contenedor-600 .vitae-columna-principal h1,
  html body .contenedor-600 .vitae-columna-principal h2,
  html body .contenedor-600 .vitae-columna-principal h3,
  html body .contenedor-600 .vitae-columna-principal div[align="justify"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* No recortar imágenes: se ajustan proporcionalmente al ancho disponible. */
  html body .contenedor-600 img,
  html body .contenedor-600 .vitae-columna-principal img,
  html body img.luz-suave,
  html body img.imagen-nose {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 img[width="415"],
  html body .contenedor-600 img[width="450"],
  html body .contenedor-600 img[width="600"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* El menú puede desplazarse en horizontal, sin empujar toda la página. */
  html body nav.menu-principal-cv {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  html body nav.menu-principal-cv a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* El itinerario conserva su tabla y permite desplazamiento lateral. */
  html body .contenedor-600 .section .itinerario-scroll,
  html body .contenedor-600 .section .itinerario-scroll[role="region"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    box-sizing: border-box !important;
  }

  html body .contenedor-600 .section .itinerario-scroll table.table-cursos {
    width: 940px !important;
    min-width: 940px !important;
    max-width: none !important;
  }

  /* Aviso ajustado a pantalla: el usuario puede ampliar con gesto de pinza. */
  html body .aviso-vista-movil {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Escritorio: mantiene el ancho y las columnas originales. */
@media screen and (min-width: 601px) {
  html body .contenedor-600 {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .contenedor-600 > table.vitae-layout {
    display: table !important;
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    table-layout: fixed !important;
  }

  html body .contenedor-600 > table.vitae-layout > tbody > tr > td {
    display: table-cell !important;
  }
}