/* ==========================================================================
   MCT PAGE STYLES (ProfesionalesMCT.html) - Complete Section Styles
   ========================================================================== */

/* ==========================================================================
   ESTILOS HOMOGÉNEOS PARA TÍTULOS Y SUBTÍTULOS
   Referencia: Profesionales.html - Sección 3 (LA TRIADA DE LA PRECISIÓN BIOLÓGICA)
   ========================================================================== */

.mct-page .section-title {
  font-family: var(--font-main);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  margin-bottom: clamp(2.5rem, 4vw, 4rem) !important;
  background: linear-gradient(90deg, #00FFFF 0%, #EA2BA1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


.mct-page .section-subtitle {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 4px;
  margin-top: -2.5rem;
  margin-bottom: 5rem !important;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.9;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   REFINED HERO SECTION (V3) - HUD DESIGN
   ========================================================================== */

.mct-hero-v3 {
  background: #000;
  padding: 4rem 0 6rem;
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mct-hero-v3 .container {
  max-width: min(100%, 1400px);
  position: relative;
  z-index: 10;
}

/* HUD Title Box */
.mct-hud-container {
  position: absolute;
  top: -30px;
  left: 40px;
  z-index: 20;
  max-width: min(100%, 1100px);
}

.mct-hud-box {
  background: transparent;
  backdrop-filter: none;
  padding: 2.5rem 3rem;
  border: none;
  position: relative;
  border-radius: 4px;
}

/* Tecnology Circuit Decorations */
.mct-hud-box::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100px;
  height: 100px;
  border-top: 2px solid #00FFFF;
  border-left: 2px solid #00FFFF;
  pointer-events: none;
}

.mct-hud-box::after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-top: 2px solid #EA2BA1;
  border-right: 2px solid #EA2BA1;
}

/* Dots / Lights on corners */
.mct-hud-box .mct-hud-title::before {
  content: '';
  position: absolute;
  top: -13px;
  left: -13px;
  width: 8px;
  height: 8px;
  background: #00FFFF;
  border-radius: 50%;
  box-shadow: 0 0 10px #00FFFF;
}

.mct-hud-box .mct-hud-title::after {
  content: '';
  position: absolute;
  top: -13px;
  right: -13px;
  width: 8px;
  height: 8px;
  background: #EA2BA1;
  border-radius: 50%;
  box-shadow: 0 0 10px #EA2BA1;
}

.mct-hud-title {
  font-family: var(--font-main);
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00FFFF 0%, #EA2BA1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: 1px;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.mct-hud-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: #FFFFFF;
  font-weight: 500;
  text-transform: none;
  margin: 0;
  opacity: 1;
}

/* Main Central Image */
.mct-hero-main-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4rem 0;
  position: relative;
}

.mct-hero-main-image img {
  width: 100%;
  max-width: min(100%, 1100px);
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 0 40px rgba(24, 99, 220, 0.2));
  transition: transform 0.3s ease;
}

/* Footer Note - Concepto Central Style */
.mct-hero-footer-note {
  margin: 4rem auto 0;
  max-width: min(100%, 1100px);
  width: 100%;
}

.mct-hero-footer-note .prp-subtitle {
  text-align: left;
  margin-bottom: 0 !important;
  width: 100%;
}

@media (max-width: 1150px) {
  .mct-hud-container {
    position: relative;
    left: 0;
    margin-bottom: 3rem;
    max-width: 100%;
  }

  .mct-hero-v3 {
    padding-top: 8rem;
  }
}



/* Section 2: Paradigm Section */
.mct-page .mct-paradigm-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-page .mct-paradigm-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: min(100%, 1200px);
  margin: 4rem auto 0;
}

.mct-page .mct-paradigm-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 15px;
  /* Pequeño brillo */
  filter: drop-shadow(0 0 20px rgba(24, 99, 220, 0.3));
  transition: filter 0.3s ease;
  justify-self: center;
}

.mct-page .mct-paradigm-img:hover {
  filter: drop-shadow(0 0 30px rgba(24, 99, 220, 0.5));
}

/* Section 3: Molecular Section */
.mct-page .mct-molecular-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
  position: relative;
}

.mct-molecular-layout {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin: 4rem auto;
  max-width: min(100%, 1400px);
}

.mct-molecular-visual {
  flex: 1.2;
  position: relative;
}

.mct-vesicle-image-v2 {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.2));
}

.mct-molecular-info {
  flex: 1;
}

.mct-hud-info-box {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid #00FFFF;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
  position: relative;
}

.mct-hud-info-title {
  font-family: var(--font-main);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.4;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.mct-hud-info-desc {
  font-size: 0.9em;
  font-weight: 400;
  opacity: 0.9;
  text-transform: none;
  display: block;
  margin-top: 0.5rem;
}

.mct-hud-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mct-hud-info-list li {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  position: relative;
  padding-left: 1.5rem;
}

.mct-hud-info-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #00FFFF;
  font-weight: bold;
}

.mct-hud-info-list li:last-child {
  margin-bottom: 0;
}

.mct-hud-info-list strong {
  color: #00FFFF;
}



@media (max-width: 1024px) {
  .mct-molecular-layout {
    flex-direction: column;
    gap: 3rem;
  }
}

/* Section 4: Leap Section */
.mct-page .mct-leap-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-page .mct-leap-comparison {
  max-width: min(100%, 1200px);
  margin: 0 auto;
}

.mct-page .mct-leap-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}

.mct-page .mct-leap-image img {
  width: 100%;
  max-width: 450px;
  height: 240px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

.mct-page .mct-leap-subtitle {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.mct-page .mct-leap-box {
  background: rgba(33, 33, 33, 0.8);
  border-radius: 15px;
  padding: 1.5rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.mct-page .mct-leap-box.prp-box {
  border-color: rgba(234, 43, 161, 0.5);
  box-shadow: 0 0 20px rgba(234, 43, 161, 0.2);
}

.mct-page .mct-leap-box.mct-box {
  border-color: rgba(24, 99, 220, 0.5);
  box-shadow: 0 0 20px rgba(24, 99, 220, 0.2);
}

.mct-page .mct-leap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mct-page .mct-leap-list li {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.mct-page .mct-leap-list li:last-child {
  margin-bottom: 0;
}

.mct-page .mct-leap-list strong {
  color: #fff;
  font-weight: 600;
}

.mct-page .mct-leap-vs {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-accent-magenta);
  text-align: center;
  margin: 2rem 0;
  text-shadow: 0 0 20px rgba(234, 43, 161, 0.6);
}



.mct-title-condensed {
  font-size: clamp(1.8rem, 4vw, 3.8rem) !important;
}

/* Section 5: Phototransduction Section */
.mct-page .mct-phototransduction-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-photo-layout {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 4rem auto;
  max-width: min(100%, 1400px);
}

.mct-photo-visual {
  flex: 1.5;
  background: rgba(10, 10, 10, 0.4);
  padding: 3rem 2rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.mct-process-grid-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mct-page .mct-process-step {
  flex: 1;
  text-align: center;
}

.mct-page .mct-process-icon img {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));
}

.mct-page .mct-process-description {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  color: #FFFFFF;
  line-height: 1.4;
}

.mct-page .mct-process-arrow {
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: #00FFFF;
  font-weight: 900;
  opacity: 0.6;
}

.mct-photo-info {
  flex: 1;
}

.mct-hud-info-box.border-blue {
  border-color: #00FFFF;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
}

.mct-hud-info-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.text-magenta {
  color: #EA2BA1 !important;
}

@media (max-width: 1200px) {
  .mct-photo-layout {
    flex-direction: column;
  }
}

.mct-page .mct-section-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: min(100%, 1000px);
  margin: 3rem auto 0;
  font-style: italic;
  border-left: 3px solid var(--color-accent-blue);
  padding-left: 2rem;
}

/* Section 6: Thermodynamics Section */
.mct-page .mct-thermodynamics-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-thermo-layout-v2 {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  margin: 4rem auto;
  max-width: min(100%, 1400px);
}

.mct-thermo-visual {
  flex: 1;
}

.mct-vision-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.mct-page .mct-mito-img {
  width: 100%;
  max-width: 400px;
  height: 450px;
  object-fit: contain;
  border-radius: 15px;
  filter: drop-shadow(0 0 30px rgba(234, 43, 161, 0.4));
}

.mct-thermo-info {
  flex: 1.5;
}

.mct-thermo-content-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.mct-thermo-item {
  margin-bottom: 2rem;
}

.mct-thermo-item:last-child {
  margin-bottom: 0;
}

.mct-thermo-item h4 {
  font-family: var(--font-main);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.mct-thermo-item p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.mct-thermo-graph-block img {
  width: 100%;
  border-radius: 15px;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.2));
}

.border-magenta {
  border-color: #EA2BA1 !important;
  box-shadow: 0 0 30px rgba(234, 43, 161, 0.15) !important;
}

@media (max-width: 1100px) {
  .mct-thermo-layout-v2 {
    flex-direction: column;
  }

  .mct-thermo-content-grid {
    grid-template-columns: 1fr;
  }
}



/* Section 7: Molecular Profile Section */
.mct-page .mct-molecular-profile-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-page .mct-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: min(100%, 1400px);
  margin: 4rem auto 3rem;
}

.mct-evidence-card {
  text-align: center;
  padding: 2.5rem 1.5rem !important;
  background: rgba(10, 10, 10, 0.4) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.mct-page .mct-evidence-subtitle {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: #fff;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.mct-page .mct-evidence-image img {
  width: 100%;
  max-width: 280px;
  height: 200px;
  object-fit: contain;
  margin: 0 auto 2rem;
  display: block;
}

.mct-page .mct-evidence-description {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-top: auto;
}

@media (max-width: 1024px) {
  .mct-page .mct-evidence-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

/* Section 8: Exo-Tech Section */
.mct-page .mct-exotech-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

/* Technical Branding Highlights */
.mct-page .mct-highlight {
  color: var(--color-accent-magenta);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(234, 43, 161, 0.3);
}

.mct-page .mct-hero-footer-note .prp-subtitle {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .mct-page .mct-hero-footer-note .prp-subtitle {
    font-size: 1rem;
    text-align: center;
  }
}

.mct-summary-content strong {
  color: #EA2BA1;
  font-weight: 700;
}

.mct-summary-content .solucion-title {
  color: #00C2FF;
}

@media (max-width: 900px) {
  .mct-gel-split-view {
    flex-direction: column;
  }
}

/* Section 9: Safety Matrix Section */
.mct-page .mct-safety-matrix-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-safety-table {
  max-width: min(100%, 1200px);
  margin: 4rem auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mct-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(10, 10, 10, 0.4);
}

.mct-comparison-table th {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-main);
  text-transform: uppercase;
  color: #fff;
  font-size: 1.25rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.mct-comparison-table td {
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
}

.mct-comparison-table tr:last-child td {
  border-bottom: none;
}

.mct-comparison-table th:first-child,
.mct-comparison-table td:first-child {
  text-align: center;
  font-weight: 700;
  color: #fff;
}

.mct-comparison-table .mct-cell,
.mct-comparison-table .heterologo-cell {
  position: relative;
  padding-right: 3.5rem;
}

.mct-cell {
  background: rgba(0, 255, 255, 0.03);
  border-left: 1px solid rgba(0, 255, 255, 0.1);
  border-right: 1px solid rgba(0, 255, 255, 0.1);
  color: #fff;
}

.heterologo-cell {
  color: rgba(255, 255, 255, 0.6);
}

.safety-icon-svg {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: currentColor;
  flex-shrink: 0;
}

.icon-check {
  color: #4ade80;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
  filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5));
}

.icon-cross {
  color: #f87171;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
  filter: drop-shadow(0 0 5px rgba(248, 113, 113, 0.5));
}

.text-ce {
  color: #fff;
  font-weight: 900;
  margin-left: 0.5rem;
  letter-spacing: 1px;
}

.mct-page .mct-safety-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: min(100%, 1000px);
  margin: 0 auto;
  font-style: italic;
  border-left: 3px solid var(--color-accent-magenta);
  padding-left: 2rem;
}

/* Section 10: Workflow Section */
.mct-page .mct-workflow-section {
  padding: clamp(6rem, 12vw, 10rem) 0;
  background: #000;
  background-image: radial-gradient(circle at 50% 50%, rgba(24, 99, 220, 0.05) 0%, transparent 70%);
  position: relative;
  overflow: hidden;
}

.mct-workflow-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: min(100%, 1400px);
  margin: 5rem auto 0;
  position: relative;
  padding: 0 2rem;
}

.mct-workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 300px;
  position: relative;
  z-index: 2;
}

/* Nivelación correctiva para el primer paso */
.step-1 {
  transform: translateY(12px);
}

.mct-workflow-label {
  font-family: var(--font-condensed);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: 3px;
  text-align: center;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.mct-workflow-card {
  width: 100%;
  aspect-ratio: 0.85;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2rem;
}

.mct-workflow-card:hover {
  transform: translateY(-8px) scale(1.05);
}

.mct-workflow-visual {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mct-workflow-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.5));
}

.mct-workflow-description {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.5;
  max-width: 240px;
  min-height: 4rem;
}

.mct-workflow-arrow {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-3rem);
}

.mct-workflow-arrow img {
  width: 55px;
  opacity: 0.8;
  filter: drop-shadow(0 0 15px cyan);
}


/* Section 11: Selection Criteria Section */
.mct-page .mct-selection-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

.mct-selection-diagram {
  max-width: min(100%, 1200px);
  margin: 4rem auto 0;
}

.mct-selection-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.mct-flow-item {
  flex: 1;
  max-width: 320px;
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mct-flow-item.prp-image {
  border-color: rgba(24, 99, 220, 0.3);
  box-shadow: 0 0 30px rgba(24, 99, 220, 0.1);
}

.mct-flow-item.mct-image {
  border-color: rgba(234, 43, 161, 0.3);
  box-shadow: 0 0 30px rgba(234, 43, 161, 0.1);
}

.mct-flow-center {
  flex: 0.8;
  max-width: 280px;
}

.mct-flow-item img,
.mct-flow-center img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.mct-flow-connector {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 700;
  color: #fff;
  border: 2px solid;
  font-size: 1.2rem;
  position: relative;
  z-index: 2;
}

.mct-flow-connector.A {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 15px var(--color-accent-blue);
  background: rgba(24, 99, 220, 0.2);
}

.mct-flow-connector.B {
  border-color: var(--color-accent-magenta);
  box-shadow: 0 0 15px var(--color-accent-magenta);
  background: rgba(234, 43, 161, 0.2);
}

.mct-selection-columns {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 2rem;
  align-items: flex-start;
}

.mct-page .mct-therapy-column {
  background: rgba(33, 33, 33, 0.8);
  border: 2px solid;
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.mct-page .mct-therapy-column.prp {
  border-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
}

.mct-page .mct-therapy-column.mct {
  border-color: rgba(234, 43, 161, 0.5);
  box-shadow: 0 0 25px rgba(234, 43, 161, 0.2);
}

.mct-therapy-title {
  font-family: var(--font-main);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.mct-therapy-column.prp .mct-therapy-title {
  color: var(--color-accent-blue);
}

.mct-therapy-column.mct .mct-therapy-title {
  color: var(--color-accent-magenta);
  text-align: right;
}

.mct-therapy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mct-page .mct-therapy-list li {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.mct-page .mct-therapy-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-accent-magenta);
  font-size: 1.2rem;
}

.mct-page .mct-therapy-column.prp .mct-therapy-list li::before {
  color: #00FFFF;
}

/* Caja central explicativa */
.mct-page .mct-therapy-separator-box {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(234, 43, 161, 0.1));
  border: 2px solid;
  border-image: linear-gradient(135deg, #00FFFF, #EA2BA1) 1;
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mct-page .mct-therapy-separator-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.mct-page .highlight-prp {
  color: #00FFFF;
  font-weight: 700;
}

.mct-page .highlight-mct {
  color: #EA2BA1;
  font-weight: 700;
}

.mct-page .mct-therapy-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.mct-page .mct-therapy-option-content {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
}

.mct-page .mct-therapy-separator img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  margin: 2rem 0;
}

/* Section 12: Standard Section */
.mct-page .mct-standard-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: #000;
}

/* Section 12: Pillars Grid */
.mct-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem;
  margin-top: 5rem;

  max-width: min(100%, 1350px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}


.mct-pillar {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 3rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

/* Glow Effects based on 12.jpg pattern */
.mct-pillar:nth-child(1),
.mct-pillar:nth-child(4) {
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.25), inset 0 0 15px rgba(0, 255, 255, 0.1);
}

.mct-pillar:nth-child(2),
.mct-pillar:nth-child(3) {
  border-color: rgba(234, 43, 161, 0.6);
  box-shadow: 0 0 25px rgba(234, 43, 161, 0.25), inset 0 0 15px rgba(234, 43, 161, 0.1);
}

.mct-pillar:hover {
  transform: translateY(-8px) scale(1.02);
}

.mct-pillar-icon {
  flex: 0 0 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mct-pillar-icon img {
  width: 130%;
  height: 130%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
}


.mct-pillar-info {
  flex: 1;
  text-align: left;
}

.mct-pillar-title {
  font-family: var(--font-main);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
}

.mct-pillar-subtitle {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: #FFFFFF;
  line-height: 1.25;
  font-weight: 500;
}

/* Highlight colors inside cards */
.mct-pillar:nth-child(1) .prp-highlight,
.mct-pillar:nth-child(1) .mct-subtitle-accent,
.mct-pillar:nth-child(4) .prp-highlight,
.mct-pillar:nth-child(4) .mct-subtitle-accent {
  color: #00FFFF !important;
}

.mct-pillar:nth-child(2) .mct-highlight,
.mct-pillar:nth-child(2) .mct-subtitle-accent,
.mct-pillar:nth-child(3) .mct-highlight,
.mct-pillar:nth-child(3) .mct-subtitle-accent {
  color: #EA2BA1 !important;
}

.mct-page .mct-hero-footer-note .prp-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  text-align: center;
  color: #FFFFFF !important;
  margin-top: 5rem;
  width: 100%;
  border-left: none !important;
  padding-left: 0 !important;
  line-height: 1.4;
}




.mct-page .mct-hero-footer-note .prp-highlight-magenta {
  color: #EA2BA1 !important;
}


/* Section 8: Exo-Tech Gel Comparison Graphic */
.mct-gel-comparison-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem auto;
  max-width: min(100%, 1200px);
  width: 100%;
}

.mct-gel-main-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.1));
  transition: transform 0.3s ease;
}

.mct-gel-main-img:hover {
  transform: scale(1.02);
}

.mct-page .mct-standard-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: min(100%, 1000px);
  margin: 0 auto;
  font-style: italic;
}

/* Responsive Styles for MCT Page */
@media (max-width: 1024px) {

  /* Grid to Flex Column Stacking - REFORZADO MÁXIMO */
  .mct-page .mct-leap-row,
  .mct-page .mct-process-grid-v2,
  .mct-page .mct-selection-flow,
  .mct-page .mct-selection-columns,
  .mct-page .mct-pillars-grid,
  .mct-page .mct-comparison-grid,
  .mct-page .mct-thermo-content-grid,
  .mct-page .mct-evidence-grid,
  .mct-page .mct-gel-comparison,
  .mct-page .mct-selection-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    align-items: center !important;
  }

  /* Specific tweaks for Leap Section */
  .mct-page .mct-leap-content {
    width: 100% !important;
    text-align: center;
  }

  .mct-page .mct-leap-image {
    width: 100% !important;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .mct-page .mct-leap-image img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    max-height: 250px;
    object-fit: contain;
  }

  .mct-page .mct-leap-vs {
    margin: 2rem 0 !important;
    font-size: 2.5rem !important;
  }

  /* Arrows and Connectors Rotation */
  .mct-page .mct-process-arrow,
  .mct-page .mct-workflow-arrow,
  .mct-page .mct-flow-connector {
    transform: rotate(90deg) !important;
    margin: 2rem auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-height: 40px;
  }

  .mct-page .mct-therapy-separator-box {
    margin: 2.5rem 0;
    width: 100%;
    text-align: center;
  }

  .mct-page .mct-workflow-steps,
  .mct-page .mct-process-grid,
  .mct-page .mct-process-grid-v2 {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .mct-page .mct-flow-item,
  .mct-page .mct-flow-center,
  .mct-page .mct-therapy-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

@media (max-width: 768px) {


  .mct-page .mct-section-title {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  .mct-page .mct-comparison-item,
  .mct-page .mct-tech-card,
  .mct-page .mct-workflow-step,
  .mct-page .mct-pillar {
    padding: 1.5rem;
  }

  .mct-page .mct-safety-table {
    overflow-x: scroll;
  }

  .mct-page .mct-comparison-table {
    min-width: 600px;
  }

  /* Force stack leap items even smaller */
  .mct-page .mct-leap-comparison {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ==========================================================================
   PROFESIONALES.CSS - EXTRACTED FROM STYLE.CSS
   ========================================================================== */
/* ==========================================
   PROFESIONALES PAGE (Namespace: .profesionales-page)
   ========================================== */

.profesionales-page {
  color: #ffffff !important;
  background-color: #000 !important;
  overflow-x: hidden;
}

.profesionales-page img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
}

.section-padding {
  padding: clamp(60px, 10vw, 120px) 0;
}

.centered {
  text-align: center;
}

.section-subtitle {
  font-family: var(--font-sec);
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  color: #FFFFFF !important;
  text-align: center;
  margin: 0 auto 4rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.9;
  line-height: 1.4;
}

/* 1. Hero Section */
.profesionales-page .pro-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: clamp(60px, 12vw, 120px);
  background: #000000 !important;
  overflow: hidden;
  /* Asegurar que el fondo no se salga */
}

.profesionales-page .pro-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../fondos/21.webp') center center / cover no-repeat;
  z-index: 0;
  opacity: 0.6;
  /* Opacidad inicial prudente para legibilidad */
}

.profesionales-page .pro-hero-content {
  position: relative;
  max-width: min(100%, 1200px);
  z-index: 1000 !important;
  color: #ffffff !important;
}

.profesionales-page .pro-logo-metal {
  width: clamp(200px, 40vw, 500px);
  height: auto;
  margin: 0 auto 3rem;
  display: block;
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.15));
}

.profesionales-page .pro-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: #ffffff !important;
}

.profesionales-page .hero-subtitle {
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  color: #1863DC !important;
  margin-bottom: 2rem;
  font-weight: 700;
}

.profesionales-page .hero-manifesto {
  font-size: clamp(1rem, 2vw, 1.3rem);
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid #EA2BA1 !important;
}

/* 2. Paradigma Grid */
.profesionales-page .paradigma-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
  max-width: min(100%, 1100px);
  margin: 4rem auto 0;
}

.profesionales-page .paradigma-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2rem;
}

.profesionales-page .paradigma-card h3 {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  margin-bottom: 2rem;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.profesionales-page .paradigma-card.traditional h3 {
  color: rgba(255, 255, 255, 0.8);
}

.profesionales-page .paradigma-card.regenerative h3 {
  color: #00FFFF;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.profesionales-page .paradigma-card h3 .subtitle {
  font-size: 1em;
  color: inherit;
  /* Hereda el color del título correspondiente */
  font-weight: 500;
  text-transform: none;
  opacity: 0.8;
  /* Mantenemos una ligera transparencia para jerarquía si se desea, o quitar para color puro */
}

.profesionales-page .divider-vertical {
  width: 4px;
  background: linear-gradient(to bottom, #00FFFF, #1863DC, #EA2BA1);
  border-radius: 10px;
}

.profesionales-page .card-img {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 2.5rem;
  display: block;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Listas de verificación */
.profesionales-page .check-list {
  list-style: none;
  padding: 0;
}

.profesionales-page .check-list li {
  position: relative;
  padding-left: clamp(12px, 3vw, 25px);
  margin-bottom: 1.2rem;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.profesionales-page .check-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -2px;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  line-height: 1;
  color: #888;
}

.profesionales-page .check-list.accent-blue li {
  color: rgba(255, 255, 255, 0.85);
}

.profesionales-page .check-list.accent-blue li::before {
  color: #00FFFF;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

.profesionales-page .check-list strong {
  color: #ffffff;
  font-weight: 700;
}

.profesionales-page .check-list.accent-blue strong {
  color: #00FFFF;
}

@media (max-width: 1024px) {
  .profesionales-page .paradigma-grid {
    grid-template-columns: 1fr;
  }

  .profesionales-page .divider-vertical {
    display: none;
  }
}

/* 3. Triada */
.profesionales-page .pro-triada {
  background-color: #000;
  margin-top: -60px;
  /* Sube la sección */
  position: relative;
  z-index: 2;
}

.profesionales-page .pro-algorithm .section-title,
.profesionales-page .pro-sbl-engineering .section-title,
.profesionales-page .pro-sbl-performance .section-title {
  white-space: nowrap;
  /* Eliminado !important para permitir la personalización por sección */
  display: block;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  letter-spacing: 0.5px;
  width: 100%;
  margin-bottom: 1rem !important;
}

.profesionales-page .pro-triada .section-title {
  font-size: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: 0.2rem;
  background: linear-gradient(90deg, #00FFFF 0%, #EA2BA1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.profesionales-page .pro-synergy .section-title {
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  white-space: nowrap;
  display: block;
  text-align: center;
  margin-bottom: 0.2rem !important;
  /* Reduced further for tighter spacing */
}

.profesionales-page .synergy-quote-container {
  margin-top: 0 !important;
}


.profesionales-page .pro-triada .section-subtitle {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: #00FFFF;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 5rem;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.9;
}

.profesionales-page .triada-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.profesionales-page .triada-item {
  background: #0a0a0a;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
}

.profesionales-page .triada-item:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-8px);
  background: #111111;
}

.profesionales-page .triada-item h3 {
  font-family: var(--font-main);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  color: #00FFFF;
  font-weight: 500;
  /* Más fina */
  margin-bottom: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profesionales-page .triada-item h3 .tech-tag {
  color: #EA2BA1;
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  font-weight: 500;
  /* Coherencia con el título */
}

.profesionales-page .triada-img-container {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin: 0 auto 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.profesionales-page .triada-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.profesionales-page .triada-item:hover .triada-img {
  transform: scale(1.05);
}

.profesionales-page .triada-clave {
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
}

.profesionales-page .triada-clave span {
  color: #ffffff;
  font-weight: 400;
}

.profesionales-page .triada-divider {
  border: 0;
  height: 2px;
  background: #EA2BA1;
  margin: 1.2rem auto;
  width: 40px;
  border-radius: 2px;
}

.profesionales-page .triada-funcion {
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: 0;
}

.profesionales-page .triada-funcion strong {
  color: #ffffff;
  display: inline;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------------------------------------------------------
   VACIADO TEMPORAL PARA REDISEÑO (SECCIONES 4 - 12)
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   8. Security & Regulatory Frame (Ref. 8.jpg)
   --------------------------------------------------------- */
.pro-security {
  background-color: #000;
  overflow: hidden;
}

.tech-frame-container {
  position: relative;
  border: 1px solid rgba(24, 99, 220, 0.3);
  padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 4px;
  margin-top: 3rem;
}

.tech-frame-container::before,
.tech-frame-container::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
}

.tech-frame-container::before {
  top: -2px;
  left: -2px;
  border-top: 2px solid var(--color-accent-blue);
  border-left: 2px solid var(--color-accent-blue);
  box-shadow: -5px -5px 15px rgba(24, 99, 220, 0.5);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 20% 20%, 20% 100%, 0 100%);
}

.tech-frame-container::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid var(--color-accent-magenta);
  border-right: 2px solid var(--color-accent-magenta);
  box-shadow: 5px 5px 15px rgba(234, 43, 161, 0.5);
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%, 0 80%, 80% 80%);
}

.security-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(10px, 2vw, 20px);
  align-items: center;
}

.ce-cert-icon {
  width: 160px;
  height: 220px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 8px 30px 8px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.ce-cert-icon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 255, 255, 0.2) 50%);
  border-bottom: 1px solid rgba(0, 255, 255, 0.4);
  border-left: 1px solid rgba(0, 255, 255, 0.4);
}

.ce-text {
  font-family: var(--font-main);
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  margin-bottom: 15px;
}

.cert-lines {
  width: 70%;
}

.cert-lines span {
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.cert-seal {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 35px;
  height: 35px;
  background: radial-gradient(circle, var(--color-accent-magenta) 20%, transparent 70%);
  border: 2px dashed var(--color-accent-magenta);
  border-radius: 50%;
  opacity: 0.6;
}

.security-table {
  width: 100%;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-border-subtle);
}

.col-title {
  padding: clamp(12px, 3vw, 25px) clamp(10px, 2vw, 20px);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.1vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.col-title.magenta {
  color: var(--color-accent-magenta);
}

.col-title.cyan {
  color: #00FFFF;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-border-subtle);
}

.table-row:last-child {
  border-bottom: none;
}

.row-content {
  padding: clamp(15px, 3vw, 30px) clamp(12px, 3vw, 25px);
}

.row-content p {
  margin-bottom: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  color: var(--color-text-main);
  font-weight: 300;
  font-family: var(--font-main);
  line-height: 1.5;
}

.row-content strong {
  color: #fff;
  font-weight: 700;
  display: inline;
  margin-right: 12px;
  text-transform: none;
}

.grad-text-vivid {
  background: var(--grad-vivid-cyan-purple);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

@media (max-width: 992px) {
  .security-grid {
    grid-template-columns: 1fr;
  }

  .side-icon-panel {
    margin-bottom: 2rem;
  }
}

@media (max-width: 600px) {

  .table-header,
  .table-row {
    grid-template-columns: 1fr;
  }

  .col-title {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
  }
}

/* ---------------------------------------------------------
   9. Algorithm Table (Ref. 9.jpg)
   --------------------------------------------------------- */
.algorithm-frame {
  padding: clamp(10px, 2vw, 20px);
  margin-top: 2rem;
}

.profesionales-page .pro-algorithm .section-title {
  white-space: nowrap !important;
  display: block;
  font-size: clamp(2rem, 5vw, 4.5rem);
  text-align: center;
  margin-bottom: 0.5rem;
}

.pro-algorithm .section-subtitle {
  color: #fff;
  font-family: var(--font-sec);
  /* Questrial */
  letter-spacing: 4px;
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  text-align: center;
  margin-bottom: 3rem;
  opacity: 1;
  text-transform: uppercase;
  margin-top: 0;
}

.algorithm-table-wrapper {
  overflow-x: auto;
  border-radius: 4px;
}

.algorithm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.algorithm-table th,
.algorithm-table td {
  padding: clamp(10px, 2vw, 20px);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.algorithm-table th {
  font-family: var(--font-main);
  color: var(--color-accent-magenta);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: 1.5px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.algorithm-table td {
  color: var(--color-text-main);
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  vertical-align: middle;
  font-family: var(--font-main);
}

.algorithm-table th:nth-child(3),
.algorithm-table td:nth-child(3) {
  text-align: center;
}

.algorithm-table td strong {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  color: #fff;
  line-height: 1.2;
}

/* Badges with Neon Glow */
.badge {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 4px;
  font-family: var(--font-main);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  width: 100%;
  max-width: 220px;
  letter-spacing: 1px;
}

.badge-cyan {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid #00FFFF;
  color: #00FFFF;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
}

.badge-purple {
  background: rgba(160, 32, 240, 0.1);
  border: 1px solid #A020F0;
  color: #A020F0;
  box-shadow: 0 0 25px rgba(160, 32, 240, 0.5);
}

.badge-magenta {
  background: rgba(234, 43, 161, 0.1);
  border: 1px solid var(--color-accent-magenta);
  color: var(--color-accent-magenta);
  box-shadow: 0 0 25px rgba(234, 43, 161, 0.5);
}

.badge-white {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {

  .algorithm-table th,
  .algorithm-table td {
    padding: 12px;
    font-size: 0.85rem;
  }
}

/* ---------------------------------------------------------
   10. Synergy: Combined Protocols (Ref. 10.jpg)
   --------------------------------------------------------- */
.pro-synergy {
  background-color: #000;
  overflow: hidden;
}

.synergy-quote-container {
  margin-bottom: 2rem;
  text-align: center;
}

.synergy-quote {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  font-style: italic;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.synergy-quote .accent-purple {
  color: #a020f0;
  text-shadow: 0 0 20px rgba(160, 32, 240, 0.6);
}

.synergy-frame {
  padding: 4rem 3rem !important;
  background: rgba(5, 5, 5, 0.4) !important;
}

.synergy-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
  margin-bottom: 1.5rem;
  position: relative;
}

.synergy-box {
  flex: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2.2rem 2.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Efecto de haz de luz diagonal (fondo atractivo) */
.synergy-box::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 400%;
  background: linear-gradient(45deg,
      transparent 45%,
      rgba(255, 255, 255, 0.04) 48%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.04) 52%,
      transparent 55%);
  transform: rotate(-15deg);
  pointer-events: none;
  z-index: 1;
}

/* Acentuación Tech: Línea de resplandor superior */
.synergy-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  border-radius: 0 0 10px 10px;
  z-index: 3;
}

.synergy-box:hover {
  transform: translateY(-8px);
}

.fase-1 {
  border: 1px solid rgba(0, 242, 254, 0.35);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(0, 242, 254, 0.08),
    0 0 15px rgba(0, 242, 254, 0.15);
}

.fase-1::after {
  background: linear-gradient(90deg, transparent, #00f2fe, transparent);
  box-shadow: 0 0 12px #00f2fe;
}

.fase-2 {
  border: 1px solid rgba(191, 0, 255, 0.35);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(191, 0, 255, 0.08),
    0 0 15px rgba(191, 0, 255, 0.15);
}

.fase-2::after {
  background: linear-gradient(90deg, transparent, #bf00ff, transparent);
  box-shadow: 0 0 12px #bf00ff;
}

.box-header h3 {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 2.1vw, 1.6rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
}

.fase-1 .box-header h3,
.fase-2 .box-header h3 {
  color: #00FFFF;
}

.phase-highlight {
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  margin-left: 5px;
}

/* Conservamos sub-label por si se usa en otras partes, pero aqui usamos phase-highlight */
.sub-label {
  font-weight: 300;
  font-size: 0.85em;
  color: #fff;
  margin-left: 10px;
  vertical-align: middle;
}

.box-content p {
  font-family: var(--font-main);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.5;
  margin-bottom: 0.8rem;
  color: #E0E0E0;
  position: relative;
  z-index: 2;
}

.box-content strong {
  color: #fff;
  font-weight: 700;
}

/* Conector */
.synergy-connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 120px;
  justify-content: center;
}

.connector-line {
  height: 2px;
  flex: 1;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(160, 32, 240, 0.5));
}

.connector-arrow {
  display: flex;
  gap: 5px;
  position: relative;
}

.connector-arrow span {
  display: block;
  width: 25px;
  height: 25px;
  border-top: 5px solid #00FFFF;
  border-right: 5px solid #A020F0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8));
}

.synergy-footer {
  text-align: center;
  margin-top: 0;
  padding-top: 1.5rem;
  position: relative;
}

.glow-dots-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 1.5rem;
}

.glow-dots-line .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #A020F0;
  box-shadow: 0 0 15px #A020F0;
}

.glow-dots-line .line {
  width: min(300px, 40vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, #A020F0, transparent);
}

.footer-note {
  font-family: var(--font-main);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: #fff;
  max-width: min(100%, 1000px);
  margin: 0 auto;
}

.footer-note strong {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 992px) {
  .synergy-timeline {
    flex-direction: column;
    gap: clamp(20px, 4vw, 40px);
  }

  .synergy-connector {
    transform: rotate(90deg);
    margin: 20px 0;
  }

  .synergy-box {
    width: 100%;
  }
}

/* Nota: Las secciones 1, 2, 3, 8, 9 y 10 estan COMPLETADAS y VALIDADAS. */


@media (max-width: 992px) {
  .security-grid {
    grid-template-columns: 1fr;
  }

  .side-icon-panel {
    margin-bottom: 2rem;
  }
}

@media (max-width: 600px) {

  .table-header,
  .table-row {
    grid-template-columns: 1fr;
  }

  .col-title {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
  }
}

/* ---------------------------------------------------------
   11. Workflow: Clinical Implementation (Ref. 11.jpg)
   --------------------------------------------------------- */
.pro-workflow {
  background-color: #000;
  position: relative;
  overflow: hidden;
  padding-bottom: 5rem !important;
  /* Extra padding for footer breathing room */
}

.workflow-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 8rem;
  /* Increased to 8rem for maximum separation */
  position: relative;
  padding: 0 2rem;
}

.workflow-step {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 220px;
}

.step-image-wrapper {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.8);
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.9;
}

/* Neon Glow Effects */
.step-image-wrapper.cyan-glow {
  border: 2px solid rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 255, 255, 0.1);
}

.step-image-wrapper.purple-glow {
  border: 2px solid rgba(160, 32, 240, 0.5);
  box-shadow: 0 0 25px rgba(160, 32, 240, 0.3), inset 0 0 15px rgba(160, 32, 240, 0.1);
}

.workflow-step:hover .step-image-wrapper {
  transform: scale(1.05);
}

.workflow-step:hover .cyan-glow {
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.2);
}

.workflow-step:hover .purple-glow {
  box-shadow: 0 0 40px rgba(160, 32, 240, 0.5), inset 0 0 20px rgba(160, 32, 240, 0.2);
}

/* Step Number Badge */
.step-number {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background: #000;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-sec);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.cyan-glow .step-number {
  border-color: #00FFFF;
  color: #00FFFF;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.purple-glow .step-number {
  border-color: #A020F0;
  color: #A020F0;
  box-shadow: 0 0 10px rgba(160, 32, 240, 0.4);
}

/* Content Styling */
.step-content {
  text-align: center;
}

.step-title {
  font-family: var(--font-main);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%), rgba(20, 20, 20, 0.9);
  padding: 10px 28px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-block;
  white-space: nowrap;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.workflow-step:hover .step-title {
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(160, 32, 240, 0.1) 100%), rgba(30, 30, 30, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 255, 255, 0.1);
}

.step-meta {
  font-size: 0.85em;
  color: #00FFFF;
  font-weight: 500;
  text-transform: none;
  margin-left: 6px;
}

.step-desc {
  font-family: var(--font-main);
  font-size: 1.4rem;
  /* Aumentado sustancialmente para legibilidad profesional */
  color: #e0e0e0;
  line-height: 1.5;
  margin-top: 1rem;
  font-weight: 400;
  max-width: 240px;
  /* Ajustado para el nuevo tamaño */
  margin-left: auto;
  margin-right: auto;
}

/* Connectors */
.workflow-connector {
  flex-grow: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.3), rgba(160, 32, 240, 0.3));
  margin-top: clamp(32px, 7vw, 65px);
  /* Aligns with center of image (130px / 2) */
  position: relative;
  min-width: 40px;
}

.workflow-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(160, 32, 240, 0.6);
}

/* Footer Section */
.workflow-footer {
  margin-top: 4rem;
  text-align: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.workflow-footer .footer-note {
  display: inline-block;
  font-family: var(--font-main);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  letter-spacing: 0.5px;
  white-space: nowrap;
  /* Force single line on desktop */
}

/* Footer Colors */
.note-cyan {
  color: #00FFFF;
  font-weight: 700;
}

.note-purple {
  color: #A020F0;
  font-weight: 700;
}

.note-white {
  color: #fff;
  font-weight: 400;
}

/* Responsive adjustment for footer */
@media (max-width: 992px) {
  .workflow-footer .footer-note {
    white-space: normal;
    /* Allow wrap on mobile */
    line-height: 1.6;
    padding: 0 1rem;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .workflow-container {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .workflow-step {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0 1rem;
  }

  .step-image-wrapper {
    margin-bottom: 0;
    margin-right: 1.5rem;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .workflow-connector {
    display: none;
    /* Hide horizontal connectors on mobile */
  }

  /* Vertical connector line for mobile */
  .workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(1rem + 50px);
    /* Center of image (100px/2) + padding */
    top: 100px;
    /* Start below image */
    height: calc(3rem + 10px);
    /* Gap height */
    width: 2px;
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.3), rgba(160, 32, 240, 0.3));
    transform: translateX(-50%);
  }

  .step-content {
    text-align: left;
  }
}

.profesionales-page .pro-technical,
.profesionales-page .pro-inmuno,
.profesionales-page .pro-mct,
.profesionales-page .pro-exo-tech,
.profesionales-page .pro-algorithm,
.profesionales-page .pro-conclusion {
  background-color: transparent;
  min-height: auto;
}

/* ---------------------------------------------------------
   SBL.PRP.3 Technical Content (Ref. 1.jpg / I_1.json)
   --------------------------------------------------------- */
/* [REGLAS DUPLICADAS ELIMINADAS] */

.pro-sbl-intro {
  padding: 6rem 2rem 6rem 2rem;
  /* Restaurado padding estándar para aire */
  background: radial-gradient(circle at 10% 10%, rgba(234, 43, 161, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(24, 99, 220, 0.05) 0%, transparent 40%);
  background-color: #000;
  /* Fallback explícito */
  position: relative;
}

.pro-sbl-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.sbl-hero-header .section-title {
  text-align: left !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  white-space: normal;
  line-height: 1.1;
  margin-bottom: 0.5rem !important;
  display: block;
}


.sbl-hero-header {
  margin-bottom: 4rem;
  position: relative;
  z-index: 5;
  max-width: min(100%, 1200px);
  /* Restricción de ancho para mayor enfoque visual */
  margin-left: auto;
  /* Centrado */
  margin-right: auto;
  /* Centrado */
  width: 100%;
}

.sbl-hero-header .hero-subtitle-tech {
  font-family: var(--font-sec);
  font-size: clamp(0.9rem, 1.1vw, 1.25rem);
  color: #FFFFFF !important;
  max-width: 100%;
  margin: 0;
  opacity: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 400;
  /* Regular weight */
}

.sbl-intro-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 3rem;
  align-items: center;
  /* Centrado vertical respecto al contenido de la izquierda */
  max-width: min(100%, 1200px);
  /* Estrechado para simetría con el resto del capítulo SBL */
  margin: 0 auto;
  padding: 0;
}

.sbl-image-main {
  position: relative;
  text-align: right;
  z-index: 2;
  /* Eliminado padding-top para permitir centrado perfecto */
}

.sbl-image-main img {
  width: 85%;
  /* Ligeramente más pequeña como solicitó el usuario */
  height: auto;
  display: block;
  margin-left: auto;
  /* Mantener alineación a la derecha */
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.9));
  border-radius: 0;
  border: none;
}

.sbl-info-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sbl-info-item {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  transition: all 0.3s ease;
}

/* Responsive SBL Intro */
@media (max-width: 1024px) {
  .sbl-intro-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    text-align: center;
  }

  .sbl-image-main {
    text-align: center;
    order: -1;
    /* Imagen primero en móvil */
    margin-bottom: 2rem;
    width: 100%;
  }

  .sbl-image-main img {
    max-width: min(100%, 600px);
    /* Restricción para que no sea gigante en móvil */
    margin: 0 auto;
    /* Centrado */
  }

  .sbl-info-container {
    align-items: center;
    /* Centrar items */
  }

  .sbl-info-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .sbl-info-item .step-desc {
    text-align: center;
    max-width: 100%;
  }
}

.card-icon {
  width: 140px;
  /* Tamaño aumentado significativamente */
  height: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  position: relative;
  border: none;
}

.svg-icon-sbl {
  width: 100px;
  /* Icono interno mucho más grande */
  height: 100px;
  stroke: #1863DC;
  /* Azul corporativo limpio */
  transition: all 0.3s ease;
  filter: none !important;
}

.sbl-info-item:hover .svg-icon-sbl {
  stroke: #EA2BA1;
  /* Cambio a Magenta al hover para feedback profesional */
  transform: scale(1.1);
}

.profesionales-page .sbl-info-item .step-title {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-main) !important;
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
  font-weight: 700 !important;
  margin-bottom: 0.8rem !important;
  color: #00FFFF !important;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
  letter-spacing: 1px !important;
  border-radius: 0 !important;
  display: block !important;
  text-transform: uppercase !important;
  width: fit-content !important;
}

.sbl-info-item .step-desc {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 95%;
  font-size: 1.25rem;
  /* Legibilidad mejorada */
  line-height: 1.5;
  color: #ececec;
  font-weight: 300;
}

.sbl-info-item .step-desc strong {
  color: #fff;
  font-weight: 700;
}

/* Engineering Section Refinements */
.pro-sbl-engineering {
  background-color: #000000;
  margin-top: -1px;
  padding: 6rem 2rem 6rem 2rem;
  /* Restaurado padding estándar */
  overflow: hidden;
}

/* Ajuste de Layout: Grid equilibrado para evitar cortes */
.engineering-layout {
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  /* Columna central ajustada al ancho real del tubo */
  align-items: center;
  gap: 2rem;
  max-width: min(100%, 1200px);
  margin: 4rem auto 0;
  position: relative;
}

/* Columna Izquierda y Derecha */
.engineering-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrado vertical para compactar */
  gap: 2rem;
  /* Gap más pequeño para acercar items */
}

/* Items de ingeniería */
.eng-item {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  text-align: left;
  overflow: visible;
  position: relative;
  z-index: 5;
  /* Asegurar que el texto esté sobre cualquier superposición */
}

/* Títulos de los pasos (1, 2, 3...) */
.eng-item .step-title {
  font-family: var(--font-main);
  font-size: clamp(1.1rem, 1.3vw, 1.5rem);
  /* Ligeramente más pequeño */
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1rem;
  position: relative;
  padding-top: 1.5rem;
  border: none;
  background: none;
  line-height: 1.2;
  letter-spacing: 0.5px;

  /* IMPORTANTE: Wrap para textos largos */
  white-space: normal;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Título de la Sección de Ingeniería (Match Visual EXACTO con H1 Hero) */
.pro-sbl-engineering .section-title {
  /* Usamos la misma regla específica que .sbl-hero-header .section-title */
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  text-align: center;
  white-space: normal;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  font-family: var(--font-main);
  font-weight: 700;
}

/* Subtítulo de la Sección de Ingeniería (Match exacto con Hero Subtitle Tech) */
.pro-sbl-engineering .section-subtitle {
  font-family: var(--font-sec);
  /* Questrial */
  font-size: clamp(0.9rem, 1.1vw, 1.25rem);
  color: #FFFFFF !important;
  text-align: center;
  margin: 0 auto 3rem;
  opacity: 1;
  letter-spacing: 2px;
  white-space: normal;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 400;
  max-width: 100%;
}

/* Barra de gradiente superior */
.eng-item .grad-bar {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 320px;
  height: 6px;
  /* Ligeramente más fina */
  background: linear-gradient(90deg, #00FFFF 0%, #7000FF 100%);
  border-radius: 2px;
}

.eng-item .step-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #dddddd;
  line-height: 1.6;
  max-width: 100%;
  margin-left: 0;
}

/* Visual Container */
.engineering-visual {
  position: relative;
  width: 100%;
  height: auto;
  /* Altura automática ajustada a la imagen */
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.tubo-render {
  height: auto;
  width: 100%;
  max-width: 320px;
  /* Ancho máximo controlado */
  position: relative;
  /* Posición relativa para flujo normal */
  left: auto;
  transform: none;
  z-index: 10;
  object-fit: contain;
  animation: none;
  border: none;
}

/* Etiquetas del Tubo - Eliminadas (integradas en imagen) */


/* Responsive Engineering */
@media (max-width: 1200px) {
  .engineering-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .engineering-visual {
    order: -1;
    /* Visual primero en mobile */
    height: 500px;
  }

  .engineering-grid {
    height: auto;
    gap: 3rem;
  }

  /* Ajustar etiquetas en mobile */
  .label-right-top {
    right: 15%;
    top: 5%;
  }

  .label-right-mid {
    right: 15%;
    top: 35%;
  }

  .label-right-low {
    right: 15%;
    bottom: 30%;
  }

  .label-left {
    left: 15%;
    bottom: 20%;
  }
}

/* Mantener Performance Styles intactos, solo update margin */
.pro-sbl-performance {
  background-color: #000000;
  position: relative;
  padding: 6rem 2rem 6rem 2rem;
  /* Restaurado padding estándar */
  overflow: hidden;
  margin-top: -1px;
}

/* Titulos Generales */
.pro-sbl-performance .section-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  text-align: center;
  white-space: normal;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  font-family: var(--font-main);
  font-weight: 700;
}

.pro-sbl-performance .section-subtitle {
  font-family: var(--font-sec);
  font-size: clamp(0.9rem, 1.1vw, 1.25rem);
  color: #FFFFFF !important;
  text-align: center;
  margin: 0 auto 4rem;
  padding: 0 1rem;
  opacity: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
  max-width: 100%;
}

/* Grid de 3 Columnas Simétrico */
.performance-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 2rem;
  max-width: min(100%, 1200px);
  margin: 0 auto;
  align-items: center;
}

/* --- COLUMNA IZQUIERDA: DETALLES --- */
.perf-tech-info {
  text-align: left;
  /* Alineado a la izquierda */
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-right: 0;
}

.tech-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Alinear contenido a la derecha */
}

/* Títulos de Items */
.tech-box .step-title {
  font-family: var(--font-main);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Barras de Gradiente (Izq) */
.grad-bar-tech {
  width: 60px;
  height: 3px;
  background: var(--grad-premium);
  margin-bottom: 1rem;
  border-radius: 2px;
}

.tech-box .step-desc {
  font-size: 1rem;
  color: #ccc;
  line-height: 1.5;
  max-width: 400px;
}

.tech-box .step-desc strong {
  color: #fff;
  font-weight: 600;
}


/* --- COLUMNA CENTRAL: IMAGEN --- */
.performance-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

.componentes-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(24, 99, 220, 0.1));
}


/* --- COLUMNA DERECHA: DASHBOARD --- */
.perf-dashboard {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-left: 1rem;
  text-align: left;
  /* Alineado a la lectura natural */
  justify-content: center;
}

.data-card-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.data-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* Números Gigantes */
.data-val-big {
  font-family: var(--font-main);
  font-size: clamp(3rem, 4vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
}

/* Iconos de Tendencia */
.trend-icon {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #00f2ff, #9d00ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

/* Colores Específicos */
.color-cyan-purple {
  background: linear-gradient(135deg, #00f2ff, #9d00ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-cyan {
  background: linear-gradient(135deg, #00f2ff, #00ffaa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-purple {
  background: linear-gradient(135deg, #9d00ff, #ea2ba1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.data-title {
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(1.1rem, 1.3vw, 1.4rem);
  /* Aumentado */
  letter-spacing: 0.5px;
  margin-top: 0.3rem;
}

.data-sub {
  font-family: var(--font-sec);
  font-size: 1rem;
  /* Aumentado */
  color: #aaa;
  /* Más legible */
  line-height: 1.4;
  max-width: 300px;
  /* Evitar líneas muy largas */
}

/* Barra de Progreso */
.progress-bar-bg {
  width: 100%;
  max-width: 250px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 0.5rem 0;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f2ff, #9d00ff);
  border-radius: 3px;
}


/* Responsive */
@media (max-width: 1024px) {
  .performance-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 4rem;
  }

  .perf-tech-info {
    text-align: center;
    align-items: center;
    /* Centrar Flex items */
    padding-right: 0;
    order: 2;
  }

  .tech-box {
    align-items: center;
  }

  /* Forzar centro */

  .performance-visual {
    order: 1;
    margin-bottom: 2rem;
  }

  .perf-dashboard {
    text-align: center;
    padding-left: 0;
    align-items: center;
    order: 3;
  }

  .data-main {
    justify-content: center;
  }

  .progress-bar-bg {
    margin: 0.5rem auto;
  }
}

@keyframes floatTub {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-25px) rotate(2deg);
  }
}

/* Nota: Secciones técnicas de SBL completadas bajo demanda del usuario. */

/* Nota: Las secciones 1, 2, 3, 8, 9 y 10 estan COMPLETADAS y VALIDADAS. */


/* Nota: Las secciones 1, 2 y 3 (Hero, Manifiesto, Tríada) 
   se mantienen intactas por validación del usuario. */

/* ==========================================================================
   12. MCT UNIT & EXOSOMES STYLES (Profesionales_TMP.html)
   ========================================================================== */

.mct-page {
  background-color: var(--color-bg-primary);
}

.mct-section {
  padding: 8rem 0;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mct-page .section-title {
  margin-bottom: 1rem;
}

.mct-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}




.mct-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.mct-item-title {
  color: #00FFFF;
  font-family: var(--font-main);
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-transform: uppercase;
}

.mct-item-title::before {
  content: "»";
  color: var(--color-accent-magenta);
}

.mct-item p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  line-height: 1.6;
}

.mct-visual {
  position: relative;
}

/* Base para imágenes técnicas MCT */
.mct-visual-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.2));
}

.mct-unit-img,
.mct-exos-img {
  max-width: 350px;
}

.mct-kit-img {
  max-width: 420px;
}

/* Marco Tech UI */
.tech-marco {
  position: relative;
  padding: 2px;
  background: linear-gradient(135deg, #00FFFF 0%, transparent 40%, transparent 60%, #EA2BA1 100%);
  border-radius: 20px;
}

.tech-marco-inner {
  background: #000;
  border-radius: 18px;
  padding: clamp(10px, 2vw, 20px);
}

/* Banners de Texto (Literales) */
.mct-literal-banner,
.mct-footer-banner,
.exos-neon-box {
  margin-top: 4rem;
  text-align: center;
}

.mct-literal-banner p,
.mct-footer-banner p,
.exos-neon-box p {
  font-family: var(--font-main);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
  color: #FFF;
  font-style: italic;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.text-cyan {
  color: #00FFFF !important;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.text-purple {
  color: #BF5AF2 !important;
  text-shadow: 0 0 15px rgba(191, 90, 242, 0.4);
}

.text-white {
  color: #FFFFFF !important;
}

/* Specific for Kit section with Nebula */
.mct-kit-section {
  background: radial-gradient(circle at 70% 50%, rgba(155, 81, 224, 0.15) 0%, #000 70%);
}

/* Specific for Exosomes with Neon Box */
/* (Estilos heredados de .mct-literal-banner) */

@media (max-width: 1150px) {
  .mct-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mct-item-title {
    justify-content: center;
  }

  .mct-section {
    padding: 5rem 0;
  }
}

/* ==========================================================================
   4. PRP PAGE SPECIFIC STYLES (ProfesionalesPRP.html)
   ========================================================================== */

/* Hero Section (Page 1) */
.prp-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(24, 99, 220, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
}

/* ==========================================================================
   4.1 PROTOCOL SECTION - OPTIMIZED STYLES
   ========================================================================== */

.prp-protocol-section {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
  padding: 6rem 0;
}

.prp-protocol-section .protocol-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 5rem;
}

.prp-protocol-section .protocol-step {
  text-align: center;
  flex: 1;
  min-width: 150px;
}

.prp-protocol-section .protocol-icon-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.prp-protocol-section .protocol-icon-wrapper img {
  width: 100%;
  height: auto;
}

.prp-protocol-section .protocol-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prp-protocol-section .protocol-sublabel {
  font-size: 0.9rem;
  color: #888;
}

.prp-protocol-section .protocol-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Resuspension Wrapper */
.prp-protocol-section .resuspension-wrapper {
  flex: 2.8;
  min-width: 320px;
  background: none;
  border: none;
  padding: 1.5rem;
  position: relative;
}

.prp-protocol-section .resuspension-header {
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.8rem;
}

.prp-protocol-section .resuspension-header h4 {
  color: var(--color-accent-blue);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  margin: 0;
  display: inline-block;
}

.prp-protocol-section .resuspension-header span {
  color: #ccc;
  font-size: 1rem;
  margin-left: 0.8rem;
  font-style: italic;
}

.prp-protocol-section .resuspension-box {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.prp-protocol-section .resuspension-image {
  flex-shrink: 0;
  width: 130px;
}

.prp-protocol-section .resuspension-image img {
  width: 100%;
  height: auto;
}

.prp-protocol-section .resuspension-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #ccc;
}

.prp-protocol-section .resuspension-text p {
  margin: 0 0 1rem 0;
}

.prp-protocol-section .resuspension-text strong {
  color: #fff;
  text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   4.2 HUD GRID - MODULACIÓN MICROAMBIENTE
   ========================================================================== */

.prp-section .hud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: min(100%, 1200px);
  margin-bottom: 2rem;
}

.prp-section .hud-card {
  background: rgba(0, 242, 255, 0.02);
  border-color: rgba(0, 242, 255, 0.1);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.prp-section .hud-card.magenta {
  background: rgba(234, 43, 161, 0.02);
  border-color: rgba(234, 43, 161, 0.1);
}

.prp-section .hud-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.prp-section .hud-image-wrapper img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 15px rgba(0, 242, 255, 0.2));
}

.prp-section .hud-card.magenta .hud-image-wrapper img {
  filter: drop-shadow(0 0 15px rgba(234, 43, 161, 0.2));
}

.prp-section .hud-title {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
  font-family: var(--font-main);
  color: #fff;
  text-transform: uppercase;
}

.prp-section .hud-desc {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: #fff;
  white-space: nowrap;
}

/* ==========================================================================
   4.3 ALGORITHM SECTION - SELECCIÓN TERAPÉUTICA
   ========================================================================== */

.algorithm-section {
  padding: 6rem 0;
  background: #000;
}

.algorithm-section .algorithm-table-container {
  max-width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.03) 0%, rgba(234, 43, 161, 0.03) 100%), rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 242, 255, 0.05);
}

@media (max-width: 900px) {
  .algorithm-section .algorithm-table-container {
    grid-template-columns: 1fr;
  }

  .algorithm-section .algo-column.left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.algorithm-section .algo-column {
  position: relative;
}

.algorithm-section .algo-column.left {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.algorithm-section .algo-table-header {
  padding: 1.2rem;
  border-bottom: 2px solid #00f2ff;
  text-align: center;
}

.algorithm-section .algo-column.left .algo-table-header {
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.15) 0%, transparent 100%);
  border-bottom-color: #00f2ff;
}

.algorithm-section .algo-column.right .algo-table-header {
  background: linear-gradient(270deg, rgba(234, 43, 161, 0.15) 0%, transparent 100%);
  border-bottom-color: #ea2ba1;
}

.algorithm-section .algo-table-header h3 {
  color: #00f2ff;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  margin-bottom: 0.2rem;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
  font-family: var(--font-main);
}

.algorithm-section .algo-column.right .algo-table-header h3 {
  color: #ea2ba1;
  text-shadow: 0 0 10px rgba(234, 43, 161, 0.5);
}

.algorithm-section .algo-table-header p {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 300;
  opacity: 0.9;
}

.algorithm-section .algo-table-body {
  padding: 1.2rem;
}

.algorithm-section .algo-row {
  text-align: center;
}

.algorithm-section .algo-row h4 {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
  font-family: var(--font-main);
}

.algorithm-section .algo-row p {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.4;
  opacity: 0.8;
}

.algorithm-section .algo-row-arrow {
  text-align: center;
  color: #00f2ff;
  font-size: 1.8rem;
  margin: 0.4rem 0;
  filter: drop-shadow(0 0 5px #00f2ff);
}

.algorithm-section .algo-column.right .algo-row-arrow {
  color: #ea2ba1;
  filter: drop-shadow(0 0 5px #ea2ba1);
}

.algorithm-section .algo-footer-text {
  text-align: center;
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-top: 1.5rem;
}

.algorithm-section .algo-footer-text p {
  margin: 0;
}

/* Datasheet section title centering */
.datasheet-section .prp-title-main,
.datasheet-section .prp-title-main#ficha-tecnica-title {
  text-align: center !important;
  width: 100%;
  display: block;
  margin-bottom: 3rem;
}

/* ==========================================================================
   4.4 DATASHEET SECTION - FICHA TÉCNICA
   ========================================================================== */

.datasheet-section {
  background: #000;
  padding: 6rem 0;
}

.datasheet-section .datasheet-container {
  max-width: min(100%, 800px);
  margin: 0 auto;
  border: 1px solid #00f2ff;
  border-radius: 4px;
  overflow: hidden;
}

.datasheet-section .manual-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.6);
}

.datasheet-section .manual-table thead tr {
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.15) 0%, transparent 100%);
  border-bottom: 2px solid #00f2ff;
}

.datasheet-section .manual-table th {
  padding: 1.5rem;
  text-align: center;
  border-right: 1px solid #00f2ff;
}

.datasheet-section .manual-table th h3 {
  color: #00f2ff;
  font-size: clamp(1.6rem, 2.2vw, 1.85rem);
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(0, 242, 255, 0.6);
  text-transform: uppercase;
  font-family: var(--font-header);
}

.datasheet-section .manual-table tbody tr {
  border-bottom: 1px solid rgba(0, 242, 255, 0.3);
}

.datasheet-section .manual-table tbody td {
  padding: 0.8rem 1.5rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  border-right: 1px solid rgba(0, 242, 255, 0.3);
}

.datasheet-section .manual-table tbody tr:last-child {
  border-bottom: none;
}

.datasheet-section .manual-table .val-check {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.datasheet-section .manual-table .check-icon {
  width: 20px;
  height: 20px;
}

/* Datasheet Footer Box */
.datasheet-section .prp-evidence-box {
  max-width: min(100%, 800px);
  margin: 2.5rem auto 0;
  padding: 2.5rem;
  background: rgba(234, 43, 161, 0.05);
  border-left: 4px solid var(--color-accent-magenta);
  border-radius: 8px;
}

.datasheet-section .prp-evidence-box .prp-text {
  color: #fff;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  text-align: left;
  font-weight: 400;
  margin: 0;
}

/* Responsive Datasheet */
@media (max-width: 768px) {
  .datasheet-section .manual-table {
    font-size: 0.9rem;
  }

  .datasheet-section .manual-table th,
  .datasheet-section .manual-table td {
    padding: 0.8rem 1rem;
  }

  .datasheet-section .manual-table th h3 {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   4.5 MECH FLOW CONTAINER - MECANISMO DE ACCIÓN
   ========================================================================== */

.prp-section .mech-flow-container {
  max-width: min(100%, 1100px);
  margin: 0 auto 2rem;
}

.prp-section .mech-flow-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(0 0 20px rgba(0, 242, 255, 0.15));
}

/* ==========================================================================
   4.6 ALGO HEADER - ALGORITMO HEADER
   ========================================================================== */

.algorithm-section .algo-header {
  text-align: center;
  margin-bottom: 2rem;
}

.algorithm-section .algo-header .prp-title-main {
  text-align: center;
  width: 100%;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   4.7 PRP SECTION BASE STYLES
   ========================================================================== */

.prp-main-content {
  min-height: 70vh;
}

.prp-section {
  padding: 6rem 0;
}

.prp-section .prp-title-main {
  text-align: center;
  margin-bottom: 2rem;
}

.prp-section .full-width-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* Section dividers */
.page-3,
.page-4,
.page-7,
.page-9,
.page-10 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero section specific padding */
.prp-hero {
  padding-top: 4rem;
}

.prp-hero .prp-content-wrapper {
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .prp-hero .prp-content-wrapper {
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-areas:
      "text image"
      "specs image"
      "footer image";
  }

  .prp-title-main {
    grid-area: text;
    text-align: left;
  }

  .prp-subtitle {
    text-align: left;
  }

  .prp-image-container {
    grid-area: image;
    align-self: start;
    position: sticky;
    top: 120px;
  }

  .prp-feature-list {
    grid-area: specs;
  }

  .prp-footer-note {
    grid-area: footer;
  }
}

.prp-title-main {
  font-family: var(--font-main);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--grad-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  text-shadow: 0 0 30px rgba(234, 43, 161, 0.3);
}

.prp-subtitle {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  color: #888888;
  /* Gris medio sólido para el texto general */
  margin-bottom: 3rem;
  font-weight: 500;
  border-left: 5px solid var(--color-accent-blue);
  padding-left: 2rem;
  text-transform: none;

  letter-spacing: 1px;
  line-height: 1.3;
}

.prp-highlight {
  color: #dbdbdb;
  /* Blanco suavizado */
  font-weight: 600;
  text-shadow: none !important;
}

.prp-image-container img {
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(24, 99, 220, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.prp-image-container img:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(24, 99, 220, 0.4);
}

/* Technical Specs List */
.prp-feature-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.prp-feature-item {
  background: rgba(33, 33, 33, 0.4);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-left: none !important;
  /* Override inline styles */
}

.prp-feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--grad-premium);
}

.prp-feature-item:hover {
  background: rgba(33, 33, 33, 0.7);
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.prp-feature-text {
  font-family: var(--font-body);
  color: #fff;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.prp-feature-highlight {
  color: var(--color-accent-blue);
  font-weight: 700;
}

/* Technical Data List (No boxes) */
.prp-data-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.prp-data-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.prp-data-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.2;
}

.data-label {
  display: block;
  font-family: var(--font-main);
  font-weight: 700;
  color: #fff;
  font-size: 1.4rem;
  text-transform: none;
  margin-bottom: 0.2rem;
}

.data-value {
  display: block;
  font-family: var(--font-body);
  color: #888;
  font-size: 1.1rem;
}

.prp-footer-note {
  font-family: var(--font-body);
  font-size: 0.9rem !important;
  color: #888 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: 3rem !important;
  padding-top: 1.5rem !important;
  font-style: italic;
}

/* Comparison Section (Page 2) */
.prp-comparison-section {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  .comparison-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.comparison-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-card.conventional {
  border-top: 4px solid #666;
}

.comparison-card.sbl {
  border-top: 4px solid var(--color-accent-magenta);
  background: linear-gradient(180deg, rgba(234, 43, 161, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0 0 30px rgba(234, 43, 161, 0.1);
}

.comparison-card:hover {
  transform: translateY(-5px);
}

.comparison-title {
  font-family: var(--font-main);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.comparison-card.conventional .comparison-title {
  color: #888;
}

.comparison-card.sbl .comparison-title {
  color: #fff;
  text-shadow: 0 0 10px rgba(234, 43, 161, 0.5);
}

.comparison-list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-top: 1.5rem;
}

.comparison-list li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 1.1rem;
  color: #aaa;
}

.comparison-card.sbl .comparison-list li {
  color: #fff;
  border-bottom-color: rgba(234, 43, 161, 0.2);
}

.comparison-icon {
  height: 80px;
  width: auto;
  margin-bottom: 1.5rem;
  filter: grayscale(1);
  opacity: 0.7;
}

.comparison-card.sbl .comparison-icon {
  filter: none;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(234, 43, 161, 0.4));
}

.central-concept-box {
  grid-column: 1 / -1;
  background: rgba(24, 99, 220, 0.1);
  border: 1px solid var(--color-accent-blue);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 3rem;
  text-align: center;
}

.central-concept-text {
  font-family: var(--font-sec);
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
}

/* Split Layout (General for PRP Sections) */
.prp-split-layout .prp-content-wrapper {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .prp-split-layout .prp-content-wrapper {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .prp-split-layout .full-width-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2rem;
  }
}

/* Metrics (Page 4) */
.page-4 .prp-content-wrapper {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .page-4 .prp-content-wrapper {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: flex-start;
  }
}

/* New SBL Specifications List Style */
.sbl-specs-container {
  margin-top: 1rem;
}

.sbl-spec-title {
  font-family: var(--font-main);
  font-size: 1.8rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.sbl-spec-underline {
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, #EA2BA1, #1863DC);
  margin-bottom: 2.5rem;
}

.sbl-specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sbl-spec-item {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.4;
}

.sbl-spec-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-accent-blue);
  font-size: 1.8rem;
  line-height: 1;
  top: -2px;
}

.sbl-spec-value {
  color: var(--color-accent-blue);
  font-weight: 700;
}

.prp-metrics-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.metric-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-card.highlight {
  background: linear-gradient(90deg, rgba(24, 99, 220, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  border-left: 4px solid var(--color-accent-blue);
}

.metric-label {
  font-family: var(--font-body);
  color: #aaa;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.metric-value {
  font-family: var(--font-main);
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin: 0.5rem 0;
}

.metric-card.highlight .metric-value {
  background: var(--grad-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Page 7: Standardization Steps */
.prp-steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.prp-step-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.prp-step-image {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 8px;
  max-height: 300px;
  object-fit: contain;
}

.prp-step-title {
  font-family: var(--font-main);
  color: var(--color-accent-blue);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.prp-step-desc {
  font-family: var(--font-body);
  color: #888;
  font-size: 0.9rem;
}

.prp-mechanism-box {
  background: rgba(24, 99, 220, 0.05);
  border-left: 4px solid var(--color-accent-blue);
  padding: 2rem;
  margin-top: 3rem;
  border-radius: 0 12px 12px 0;
}

/* Page 8: Process Timeline */
.prp-timeline-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}

@media (min-width: 900px) {
  .prp-timeline-container {
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
  }
}

.prp-timeline-step {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 2;
}

.prp-timeline-arrow {
  display: none;
}

@media (min-width: 900px) {
  .prp-timeline-arrow {
    display: block;
    font-size: 2rem;
    color: var(--color-accent-blue);
    align-self: center;
  }
}

.prp-timeline-highlight {
  border: 1px solid var(--color-accent-magenta);
  background: linear-gradient(135deg, rgba(234, 43, 161, 0.05), rgba(0, 0, 0, 0));
}

.prp-timeline-title {
  font-family: var(--font-main);
  color: #fff;
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
}

.prp-timeline-desc {
  font-size: 0.9rem;
  color: #888;
}

/* Page 9: Info Cards */
.prp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.prp-info-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.prp-info-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.04);
}

.prp-info-title {
  font-family: var(--font-main);
  color: var(--color-accent-blue);
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.prp-info-text {
  font-family: var(--font-body);
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Page 10: Mechanism of Action */
.prp-mechanism-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0;
}

.prp-mechanism-diagram {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 900px) {
  .prp-mechanism-diagram {
    flex-direction: row;
    gap: 3rem;
  }
}

.prp-mechanism-card {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-accent-blue);
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  max-width: 300px;
}

.prp-mechanism-arrow {
  color: var(--color-accent-magenta);
  font-size: 2rem;
  transform: rotate(90deg);
}

@media (min-width: 900px) {
  .prp-mechanism-arrow {
    transform: rotate(0deg);
  }
}

.prp-evidence-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(24, 99, 220, 0.05) 100%);
  border-left: 4px solid var(--color-accent-magenta);
  padding: 1.5rem;
  margin-top: 2rem;
  border-radius: 0 8px 8px 0;
  max-width: min(100%, 800px);
  margin-left: auto;
  margin-right: auto;
}

/* Page 12: Technical Specs Table */
.prp-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  overflow: hidden;
}

.prp-specs-table th,
.prp-specs-table td {
  padding: 1.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.prp-specs-table th {
  background: rgba(24, 99, 220, 0.1);
  color: var(--color-accent-blue);
  font-family: var(--font-main);
  text-transform: uppercase;
  width: 40%;
}

.prp-specs-table td {
  color: #ddd;
  font-family: var(--font-body);
}

.prp-specs-table tr:last-child td {
  border-bottom: none;
}

.prp-specs-highlight {
  color: var(--color-accent-magenta);
  font-weight: 700;
}

@media (max-width: 600px) {

  .prp-specs-table th,
  .prp-specs-table td {
    padding: 0.8rem;
    font-size: 0.85rem;
  }

  .prp-specs-highlight {
    font-size: 0.9rem;
  }
}

/* Comparison Grid (P9, P11) */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.comparison-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comparison-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.comparison-card.conventional {
  border-top: 4px solid var(--color-accent-blue);
}

.comparison-card.sbl {
  border-top: 4px solid var(--color-accent-magenta);
}

.comparison-title {
  font-family: var(--font-header);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.comparison-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
}

.comparison-image-container {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.comparison-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.comparison-card:hover .comparison-image {
  transform: scale(1.05);
}

/* --- SECTION 5: PURITY PROFILE --- */
.purity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* Tablet & Desktop: Force 3 columns in one row using Flexbox - OVERRIDES */
@media (min-width: 900px) {
  .purity-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    /* Vertically centered as requested */
    gap: 2.5rem !important;
  }

  .purity-pie-chart-container {
    flex: 0 0 220px !important;
    max-width: 220px !important;
    justify-content: flex-start !important;
  }

  .purity-legend {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .purity-info-box {
    flex: 0 1 600px !important;
    width: 100% !important;
    max-width: 600px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 1200px) {
  .purity-grid {
    gap: 3.5rem !important;
  }
}

/* Pie Chart Styling */
.purity-pie-chart-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  margin-top: 0.5rem;
}

.purity-pie-chart {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(#1863dc 0% 95%,
      #00ffff 95% 99.2%,
      #ea2ba1 99.2% 99.7%,
      #aeaeae 99.7% 100%);
  box-shadow: 0 0 40px rgba(24, 99, 220, 0.25),
    0 0 80px rgba(0, 255, 255, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(24, 99, 220, 0.3);
}

/* Decorative Outer Ring */
.purity-pie-chart::before {
  content: '';
  position: absolute;
  width: 112%;
  height: 112%;
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.05);
  animation: pulse-ring 4s infinite ease-in-out;
}

/* Decorative Inner Ring (Hole) */
.purity-pie-chart::after {
  content: '';
  position: absolute;
  width: 150px;
  /* Thicker ring requested */
  height: 150px;
  background: #000;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 255, 0.1);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

.purity-pie-chart-inner {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px dashed rgba(24, 99, 220, 0.2);
  border-radius: 50%;
  z-index: -1;
  animation: spin-slow 60s linear infinite;
}

.purity-info-box {
  max-width: 450px;
  /* Ensure it doesn't force a wrap */
  width: 100%;
  justify-self: end;
}

/* Labels Legend Styling (Middle Column) */
.purity-legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 0 1rem;
  position: relative;
}

.legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding-left: 1.5rem;
  transition: transform 0.3s ease;
}

.legend-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.legend-item:hover {
  transform: translateX(5px);
}

.legend-item strong {
  font-family: var(--font-main);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.legend-item span.sub-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
}

/* Colors for specific legend items */
.legend-blue {
  color: #00ffff;
}

.legend-blue::before {
  background: #00ffff;
  box-shadow: 0 0 10px #00ffff;
}

.legend-magenta {
  color: #ea2ba1;
}

.legend-magenta::before {
  background: #ea2ba1;
  box-shadow: 0 0 10px #ea2ba1;
}

.legend-grey {
  color: #aeaeae;
}

.legend-grey::before {
  background: #aeaeae;
  box-shadow: 0 0 10px #aeaeae;
}

/* Original legend-item styles that are now superseded by the new .legend-item and color classes */
/*
.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: #fff;
  font-family: var(--font-text);
}

.legend-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .purity-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ==========================================================================
   OBSOLETE: SECTION 11 - Using new algorithm-section styles from 4.3
   ========================================================================== */

/* --- SECTION 8: PROTOCOLO OPERATIVO (Redesign) --- */
.prp-protocol-section {
  background: radial-gradient(circle at center, #111a22 0%, #000000 100%);
  padding: 6rem 0;
  overflow: hidden;
}

.prp-protocol-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 242, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 242, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

.protocol-title {
  text-align: center;
  font-family: var(--font-header);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 5rem;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
  position: relative;
  z-index: 2;
}

.protocol-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  max-width: min(100%, 1300px);
  margin: 0 auto;
}

.protocol-step {
  text-align: center;
  flex: 0 0 auto;
  width: 180px;
}

.protocol-step img {
  height: 120px;
  width: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.protocol-label {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
}

.protocol-sublabel {
  color: #8899a6;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.protocol-arrow {
  color: #333;
  font-size: 2rem;
  font-weight: 300;
  margin: 0 0.5rem;
}

/* Resuspension Highlight Box */
.resuspension-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 380px;
}

.resuspension-header {
  text-align: center;
  margin-bottom: 1rem;
}

.resuspension-header h4 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.resuspension-header p {
  color: var(--color-cyan-neon, #00f2ff);
  font-size: 1.1rem;
  margin: 0.2rem 0 0 0;
}

.resuspension-box {
  background: rgba(10, 16, 20, 0.9);
  border: 2px solid var(--color-cyan-neon, #00f2ff);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 0 30px rgba(0, 242, 255, 0.15), inset 0 0 20px rgba(0, 242, 255, 0.05);
  position: relative;
}

.resuspension-box img {
  height: 160px;
  width: auto;
  display: block;
  margin: 0 auto 1.5rem auto;
}

.resuspension-text p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #cbd5e0;
  margin-bottom: 0.8rem;
  text-align: left;
}

.resuspension-text strong {
  color: var(--color-cyan-neon, #00f2ff);
  text-transform: uppercase;
  font-weight: 700;
}

/* Cyan 3D Arrow */
.arrow-cyan-container {
  display: flex;
  align-items: center;
  margin: 0 0.5rem;
}

/* Footer Logo */
.protocol-logo {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 0.9;
  z-index: 2;
}

.protocol-logo svg {
  width: 40px;
  height: 40px;
}

.protocol-logo-text p {
  margin: 0;
  line-height: 1;
}

.protocol-logo-brand {
  color: #fff;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.protocol-logo-sub {
  color: var(--color-cyan-neon, #00f2ff);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

@media (max-width: 992px) {
  .protocol-timeline {
    flex-direction: column;
    gap: 3rem;
  }

  .protocol-arrow {
    transform: rotate(90deg);
  }

  .arrow-cyan-container {
    transform: rotate(90deg);
  }
}

/* --- SECTION 9: MODULACIÓN MICROAMBIENTE (Redesign) --- */
.hud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: min(100%, 1000px);
  margin: 0 auto 4rem;
}

.hud-card {
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid #222;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hud-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #333;
}

.hud-card.cyan::before {
  background: var(--color-cyan-neon, #00f2ff);
}

.hud-card.magenta::before {
  background: var(--color-accent-magenta, #ff0080);
}

.hud-circle-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  animation: spin-slow 20s linear infinite;
}

.hud-card.cyan .hud-circle {
  border-color: rgba(0, 242, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
}

.hud-card.magenta .hud-circle {
  border-color: rgba(234, 43, 161, 0.2);
  box-shadow: 0 0 20px rgba(234, 43, 161, 0.1);
}

.hud-icon-inner {
  position: relative;
  z-index: 2;
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.hud-title {
  font-family: var(--font-header);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #fff;
}

.hud-desc {
  font-family: var(--font-text);
  color: #aaa;
  font-size: 1rem;
  line-height: 1.5;
}

.hud-card.cyan .hud-title {
  color: var(--color-cyan-neon, #00f2ff);
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

.hud-card.magenta .hud-title {
  color: var(--color-accent-magenta, #ff0080);
  text-shadow: 0 0 10px rgba(234, 43, 161, 0.3);
}

/* --- SECTION 10: MECANISMO DE ACCIÓN (Redesign) --- */
.mech-flow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  max-width: min(100%, 1000px);
  margin: 0 auto;
}

.mech-main-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.mech-node {
  background: #000;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  min-width: 200px;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.mech-node.monocyte {
  border-color: rgba(0, 242, 255, 0.3);
}

.mech-node.macrophage {
  border-color: rgba(234, 43, 161, 0.3);
  box-shadow: 0 0 30px rgba(234, 43, 161, 0.1);
}

.mech-icon-box {
  margin-bottom: 1rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mech-title {
  font-family: var(--font-header);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.3rem;
}

.mech-subtitle {
  font-size: 0.85rem;
  color: #888;
}

.mech-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  gap: 0.5rem;
}

.mech-arrow-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #333, #666, #333);
}

.mech-arrow-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mech-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.effect-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s;
}

.effect-card:hover {
  transform: translateY(-5px);
  border-color: #444;
}

.effect-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  color: #aaa;
}

.effect-label {
  color: #ddd;
  font-size: 0.9rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .hud-grid {
    grid-template-columns: 1fr;
  }

  .mech-main-stage {
    flex-direction: column;
  }

  .mech-arrow {
    transform: rotate(90deg);
    padding: 1rem 0;
  }

  .mech-arrow-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #333, #666, #333);
  }
}

/* --- SECTION 8 ICON STYLES (SVG Replacement) --- */
.protocol-icon-wrapper {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.3));
}

.resuspension-icon {
  height: 120px;
  /* Adjusted to fit better than old img */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

.resuspension-box {
  text-align: center;
  /* Helper to center text inside */
}

/* --- SECTION 7: SOLID BARRIER TUBE (CSS Component) --- */
.solid-barrier-tube {
  width: 50px;
  height: 140px;
  background: linear-gradient(to bottom,
      rgba(255, 215, 0, 0.1) 0%,
      rgba(255, 215, 0, 0.3) 45%,
      /* Plasma */
      rgba(240, 248, 255, 0.9) 45%,
      rgba(240, 248, 255, 0.9) 48%,
      /* Gel Barrier */
      rgba(139, 0, 0, 0.6) 48%,
      rgba(139, 0, 0, 0.8) 100%
      /* RBCs */
    );
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  margin: 0 auto 1rem;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), inset 3px 0 5px rgba(255, 255, 255, 0.05);
}

.solid-barrier-tube::after {
  /* Shine */
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 6px;
  height: 110px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}


.prp-hero .prp-content-wrapper {
  display: grid;
  gap: 2rem;
  /* Mobile First: 1 column */
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .prp-hero .prp-content-wrapper {
    grid-template-columns: 1.2fr 0.8fr;
    /* Re-affirm desktop layout */
  }
}

/* 3. Section 5: Purity Grid */
.purity-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile default */
  gap: 3rem;
  align-items: center;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  .purity-grid {
    grid-template-columns: 1fr 1fr;
    /* Desktop 2 col */
    gap: 4rem;
  }
}

.purity-chart-column,
.purity-info-box {
  width: 100%;
}

/* 4. Section 8: Protocol Resuspension Fix */
@media (max-width: 600px) {
  .resuspension-wrapper {
    width: 100% !important;
    max-width: 100%;
  }

  .resuspension-box {
    padding: 1.5rem 1rem;
  }

  .resuspension-icon svg {
    width: 60px;
    height: 60px;
  }

  .protocol-step {
    width: 100% !important;
  }

  .arrow-cyan-container {
    margin: 1rem 0;
  }
}

/* 5. Section 9: HUD Grid Spacing */
@media (max-width: 768px) {
  .hud-grid {
    grid-template-columns: 1fr !important;
    margin-bottom: 3rem;
  }

  .prp-info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 6. Section 10: Mechanism Stack */
@media (max-width: 768px) {
  .mech-main-stage {
    flex-direction: column !important;
  }

  .mech-arrow {
    transform: rotate(90deg);
    padding: 1rem 0;
  }

  .mech-arrow-line {
    width: 2px !important;
    height: 60px !important;
    background: linear-gradient(180deg, #333, #666, #333);
  }

  .mech-effects-grid {
    grid-template-columns: 1fr;
    /* Stack effects on very small screens if needed */
  }
}

/* 7. Section 11: Algorithm Stack */
@media (max-width: 900px) {
  .algorithm-container {
    grid-template-columns: 1fr !important;
  }

  .algo-col {
    border-right: none !important;
    border-bottom: 1px solid #333;
    padding: 2rem 1rem;
  }

  .algo-col:last-child {
    border-bottom: none;
  }
}

/* 8. Section 12: Datasheet Scroll */
@media (max-width: 768px) {
  .datasheet-container {
    overflow-x: auto;
  }

  .manual-table {
    min-width: 600px;
    /* Force scroll */
  }

  .manual-table th,
  .manual-table td {
    white-space: normal;
    padding: 1rem;
  }
}

/* 9. Profesionales.html Stacking (Safety Nets) */
@media (max-width: 900px) {

  .paradigma-grid,
  .triada-grid {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 3rem;
  }

  .divider-vertical {
    display: none;
  }
}



/* ==========================================================================
   SCIENTIFIC EVIDENCE PAGE (ProfesionalesEC.html) 
   ========================================================================== */

.document-list {
  max-width: min(100%, 1200px);
  width: 100%;
  margin: 4rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 0 1rem;
  /* Margen de seguridad en móviles */
}

.doc-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.doc-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(24, 99, 220, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.doc-title-link {
  text-decoration: none;
  display: block;
  margin-bottom: 1.5rem;
}

.doc-item h3 {
  font-family: var(--font-main);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: #fff;
  line-height: 1.25;
  text-transform: uppercase;
  transition: color 0.3s ease;
  margin: 0;
}

.doc-title-link:hover h3 {
  color: var(--color-accent-magenta);
}

.doc-description p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0;
}

.doc-footer-link {
  text-decoration: none;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.doc-footer-link svg {
  transition: transform 0.3s ease;
}

.doc-footer-link span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent-blue);
  font-weight: 700;
  transition: all 0.3s ease;
}

.doc-footer-link .line-grow {
  height: 1px;
  flex-grow: 1;
  background: rgba(24, 99, 220, 0.2);
  transition: background 0.3s ease;
}

.doc-footer-link:hover span {
  color: var(--color-accent-magenta);
}

.doc-footer-link:hover svg {
  transform: translateX(5px) scale(1.1);
  stroke: var(--color-accent-magenta);
}

.doc-footer-link:hover .line-grow {
  background: rgba(234, 43, 161, 0.4);
}

/* Ajustes Responsive Específicos */
@media (max-width: 768px) {
  .document-list {
    margin-top: 3rem;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .doc-item {
    border-radius: 15px;
  }

  .doc-footer-link span {
    letter-spacing: 1px;
    font-size: 0.75rem;
  }
}