/*=====================================================
   ONCOSUR — MAIN STYLESHEET (OPTIMIZED & CLEAN)
=====================================================*/

/* 1. IMPORTS & FONTS
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* 2. DESIGN SYSTEM & VARIABLES
===================================================== */
:root {
  /* --- Palette Colors --- */
  --clr-primary: #0C5A87;
  --clr-primary-dark: #08486D;
  --clr-primary-light: #EAF6FC;
  --clr-secondary: #2AA7DF;
  --clr-accent: #dc7eab;
  --clr-star: #F7B500;
  
  /* --- Neutral Colors --- */
  --clr-dark: #1F2937;
  --clr-text: #4B5563;
  --clr-light: #F5F8FB;
  --clr-white: #FFFFFF;
  --clr-footer: #112433;
  --clr-border: #E6EDF2;

  /* --- Typography --- */
  --font-main: 'Montserrat', sans-serif;
  --fs-body: 16px;
  --lh-body: 1.7;

  /* --- Spacing & Layout --- */
  --container-width: min(1320px, 92%);
  --section-padding: 90px 0;

  /* --- Effects & Borders --- */
  --radius-sm: 16px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-full: 50px;
  
  --shadow-main: 0 12px 35px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.12);
  --shadow-btn: 0 8px 25px rgba(12, 90, 135, 0.25);
  
  --transition: all 0.35s ease;
}

/* 3. BASE RESET
===================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--clr-white);
  color: var(--clr-text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  transition: var(--transition);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  outline: none;
}

::selection {
  background: var(--clr-primary);
  color: var(--clr-white);
}

/* 4. LAYOUT COMPONENTS & UTILITIES
===================================================== */
.container {
  width: var(--container-width);
  margin: auto;
}

section {
  padding: var(--section-padding);
  position: relative;
}

.text-center { text-align: center; }
.bg-light    { background: var(--clr-light); }
.mt-30        { margin-top: 30px; }
.mt-50        { margin-top: 50px; }
.mb-30        { margin-bottom: 30px; }
.mb-50        { margin-bottom: 50px; }

/* Grid Layouts */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 30px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); align-items: center; gap: 60px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 35px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Typography */
h1, h2, h3, h4 {
  color: var(--clr-dark);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 18px; }
h3 { font-size: 1.3rem; margin-bottom: 15px; }
p  { margin-bottom: 15px; color: var(--clr-text); }

/* Section Header */
.section-title {
  max-width: 900px;
  margin: 0 auto 50px;
  text-align: center;

  span {
    display: inline-block;
    padding: 8px 18px;
    background: #F0C7DB;
    color: #FFFFFF;
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
  }

  h2 {
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    color: var(--clr-dark);
    margin: 8px 0;
  }

  p {
    font-size: 1.05rem;
    color: var(--clr-text);
  }
}

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: var(--transition);
}

.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: var(--shadow-btn);

  &:hover {
    background: #EB78AD;
    transform: translateY(-3px);
  }
}

.btn-secondary {
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);

  &:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
  }
}

/* Base Card & Links */
.card {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
  transition: var(--transition);
  overflow: hidden;
  cursor: pointer;

  &:hover {
    transform: translateY(-10px);
  }
}

.card-link {
  color: #DC7EAB;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  transition: color 0.4s ease, gap 0.3s ease;

  &:hover {
    color: var(--clr-primary-dark);
    gap: 12px;
  }
}
/* ==========================================================================
   FEATURE CARDS COMPACTAS EN MÓVIL
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* Mantiene 2 columnas pero reduce la separación entre tarjetas */
    .hero-features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Reduce el tamaño del contenedor y cambia el flujo a vertical */
    .feature {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 12px 8px !important; /* Margen interno reducido al mínimo cómodo */
        gap: 8px !important;         /* Espacio compacto entre el icono y el texto */
    }

    /* Iconos más compactos */
    .feature i {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }

    /* Texto ajustado y legibilidad optimizada */
    .feature span {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        font-weight: 600;
    }
}

/* ==========================================================================
   ALINEACIÓN A LA IZQUIERDA DEL HERO CONTENT EN MÓVIL
   ========================================================================== */

@media screen and (max-width: 768px) {

    .hero-content,
    .hero-content h1,
    .hero-content p {
        text-align: left !important;
        margin-left: 0 !important; /* Asegura que no haya márgenes automáticos centrando el bloque */
    }
}

/* 5. HEADER & NAVIGATION
===================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--clr-white);
  z-index: 999;
  box-shadow: 0 5px 25px rgba(0,0,0,.05);
  transition: var(--transition);

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
  }
}

.logo img { height: 62px; }

nav ul {
  display: flex;
  gap: 38px;
  align-items: center;

  li a {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-dark);
    position: relative;
    padding: 10px 0;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 3px;
      background: var(--clr-primary);
      transition: var(--transition);
      border-radius: 10px;
    }

    &:hover {
      color: var(--clr-primary);
      &::after { width: 100%; }
    }
  }
}

.header-button {
  display: flex;
  align-items: center;
  gap: 15px;
}

.menu-mobile {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--clr-primary);
}

/* 6. HERO SECTION
===================================================== */
.hero {
  padding-top: 170px;
  padding-bottom: 110px;
  background: linear-gradient(135deg, #F8FCFF, #EDF7FD);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.hero-content {
  h1 { margin-bottom: 25px; }
  p {
    font-size: 1.1rem;
    margin-bottom: 35px;
    max-width: 580px;
  }
}

.hero-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: var(--clr-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-main);

  i {
    font-size: 1.5rem;
    color: var(--clr-primary);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-primary-light);
    border-radius: 50%;
  }
}

.hero-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-slider img {
  width: 100%;
  border-radius: 25px;
  box-shadow: 0 25px 60px rgba(0,0,0,.12);
}

/* 7. STATS & NUMBERS
===================================================== */
.stats {
  background: var(--clr-white);
  padding: 45px 0;
}

.stats .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.stat {
  text-align: center;
  padding: 22px 15px;
  border-radius: var(--radius-md);
  background: var(--clr-white);
  box-shadow: var(--shadow-main);
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-hover);
  }

  .stat-icon {
    font-size: 1.35rem;
    color: var(--clr-primary);
    background: var(--clr-primary-light);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: var(--transition);
  }

  &:hover .stat-icon {
    background: #EB78AD;
    color: var(--clr-white);
  }

  h2 {
    font-size: 1.75rem;
    color: var(--clr-primary);
    margin-bottom: 4px;
    line-height: 1.1;
  }

  p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.3;
  }
}

/* ==========================================================================
   SECCIÓN STATS EN MÓVIL (2 COLUMNAS + ÚLTIMO BLOQUE CENTRADO)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* Cambia la cuadrícula a 2 columnas iguales */
    .stats .container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* La 5ª tarjeta abarca ambas columnas para poder centrarse */
    .stats .container .stat:nth-child(5) {
        grid-column: 1 / -1;       /* Hace que tome el ancho de las 2 columnas */
        justify-self: center;      /* Centra la tarjeta horizontalmente */
        width: 100%;               /* Mantiene el ancho flexible */
        max-width: 280px;          /* Opcional: limita el ancho máximo para que se vea simétrica con las demás */
    }
}

/* 8. SPECIALTIES SECTION
===================================================== */
.especialidades-section {
  padding: 80px 0;
  background-color: var(--clr-light);
  position: relative;
  width: 100%;

  .container {
    width: var(--container-width);
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 15px;
  }
}

/* Carrusel de Especialidades */
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.carousel-track-container {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  width: 100%;
  padding: 15px 0;
  scrollbar-width: none;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.carousel-track {
  display: flex;
  gap: 24px;
  width: 100%;
}

.specialty-card {
  flex: 0 0 calc((100% - (24px * 2)) / 3); 
  scroll-snap-align: start;
  background: var(--clr-white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-main);
  border: 1px solid var(--clr-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
  }

  .icon-box {
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: var(--clr-primary);
  }

  h3 {
    font-size: 1.3rem;
    color: var(--clr-dark);
    margin-bottom: 12px;
  }

  p {
    color: var(--clr-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.8rem;
  color: var(--clr-dark);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: all 0.2s ease;

  &:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
    border-color: var(--clr-primary);
  }
}

.prev-btn { left: -24px; }
.next-btn { right: -24px; }

/* Vista Dual (2 Bloques Especialidades) */
.specialty-dual-grid {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-top: 40px;
}

.specialty-card-block {
  flex: 0 0 calc((100% - 35px) / 2);
  max-width: 520px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  box-shadow: var(--shadow-main);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;

  .icon-box {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #FAEBF2;
    color: var(--clr-primary);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.4s ease;
  }

  h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    transition: color 0.4s ease;
  }

  p {
    font-size: 1rem;
    color: var(--clr-text);
    margin-bottom: 30px;
    line-height: 1.7;
    transition: color 0.4s ease;
  }

  /* Animación Claro -> Oscuro al hacer Hover */
  &:hover {
    background: var(--clr-footer);
    border-color: var(--clr-footer);
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);

    .icon-box {
      background: rgba(220, 126, 171);
      color: #FFFFFF;
      transform: scale(1.08) rotate(4deg);
    }

    h3 { color: var(--clr-white); }
    p  { color: rgba(255, 255, 255, 0.8); }
    .card-link { color: #FFFFFF; }
  }
}
@media (max-width: 768px) {
  .specialty-dual-grid {
    flex-direction: column;
    align-items: center;
  }

  .specialty-card-block {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* 9. ABOUT SECTION
===================================================== */
.about-home {
  padding: 110px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.about-image img {
  border-radius: 25px;
  box-shadow: 0 25px 60px rgba(0,0,0,.15);
}

.about-content {
  span {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    background: #F0C7DB;
    border-radius: 30px;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.9rem;
  }

  h2 { margin-bottom: 25px; }
  p  { margin-bottom: 20px; }
}

.about-list {
  margin: 35px 0;

  li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
    font-size: 1rem;
  }

  i {
    color: var(--clr-accent);
    font-size: 1.2rem;
    margin-top: 2px;
  }
}

/* 10. PROCESS TIMELINE
===================================================== */
.process { background: var(--clr-white); }

.process-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  margin-top: 70px;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 45px;
    left: 8%;
    width: 84%;
    height: 3px;
    background: #DDEAF2;
    z-index: 0;
  }
}

.process-item {
  position: relative;
  z-index: 2;
  text-align: center;

  .process-icon {
    position: relative;
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-white);
    font-size: 1.8rem;
    box-shadow: var(--shadow-btn);
    transition: var(--transition);
  }

  .step-number {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 28px;
    height: 28px;
    background: var(--clr-white);
    color: var(--clr-primary);
    border: 2px solid var(--clr-primary-light);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }

  &:hover .process-icon {
    transform: translateY(-8px) scale(1.03);
  }

  h3 { font-size: 1.15rem; margin-bottom: 15px; }
  p  { font-size: 0.95rem; margin: 0; padding: 0 10px; }
}

/* 11. FEATURED SERVICES
===================================================== */
.featured-services { background: var(--clr-light); }

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
  margin-top: 60px;
}

.service-card {
  flex: 0 0 calc((100% - (35px * 2)) / 3);
  max-width: calc((100% - (35px * 2)) / 3);
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  padding: 45px 35px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
    transition: var(--transition);
  }

  .service-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: #FAEBF2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: var(--clr-primary);
    transition: all 0.4s ease;
  }

  h3 {
    margin-bottom: 18px;
    transition: color 0.4s ease;
  }

  p {
    margin-bottom: 0;
    color: var(--clr-text);
    transition: color 0.4s ease;
  }

  /* Animación Claro -> Oscuro */
  &:hover {
    background: var(--clr-footer);
    border-color: var(--clr-footer);
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);

    .service-icon {
      background: rgba(220, 126, 171);
      color: #FFFFFF;
      transform: scale(1.08) rotate(4deg);
    }

    h3 { color: var(--clr-white); }
    p  { color: rgba(255, 255, 255, 0.8); }
    .card-link { color: var(--clr-secondary); }
  }
}

/* 12. TESTIMONIALS
===================================================== */
.testimonials { background: var(--clr-white); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 60px;
}

.testimonial-card {
  background: var(--clr-white);
  padding: 35px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  transition: var(--transition);
  cursor: pointer;

  &:hover { transform: translateY(-10px); }
}

.testimonial-stars {
  display: flex;
  gap: 6px;
  margin-bottom: 25px;

  i { color: var(--clr-star); font-size: 1rem; }
}

.testimonial-text {
  font-style: italic;
  line-height: 1.9;
  margin-bottom: 35px;
  min-height: 150px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 18px;

  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--clr-primary-light);
  }

  h4 { margin-bottom: 5px; font-size: 1rem; }
  span { font-size: 0.9rem; color: var(--clr-text); }
}

/* 13. FAQ / ACCORDION
===================================================== */
.faq {
  padding: 80px 0;
  background-color: var(--clr-light);

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.faq-item {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  &[open] {
    border-color: var(--clr-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

    .faq-icon { transform: rotate(45deg); }
    .faq-collapse { grid-template-rows: 1fr; }
  }
}

.faq-header {
  padding: 20px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--clr-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;

  &::-webkit-details-marker { display: none; }
}

.faq-icon {
  font-size: 0.9rem;
  color: var(--clr-primary);
  transition: transform 0.3s ease;
}

.faq-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-out;
}

.faq-content {
  overflow: hidden;

  p {
    padding: 0 20px 20px 20px;
    margin: 0;
    color: var(--clr-text);
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* Acordeón Tradicional (Soporte Legacy) */
.accordion {
  max-width: 900px;
  margin: 60px auto 0;
}

.accordion-item {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  box-shadow: var(--shadow-main);
  overflow: hidden;
  transition: var(--transition);

  &.active {
    box-shadow: var(--shadow-hover);
    .accordion-header i { transform: rotate(45deg); }
  }
}

.accordion-header {
  width: 100%;
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--clr-white);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-dark);
  transition: var(--transition);

  &:hover { background: #F7FBFE; }
  i { color: var(--clr-primary); font-size: 1rem; transition: var(--transition); }
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.accordion-content {
  padding: 0 30px 30px;
  line-height: 1.8;
  color: var(--clr-text);
}

/* 14. CTA WHATSAPP HORIZONTAL
===================================================== */
.cta-whatsapp-container {
  background-color: #1a202c;
  width: 100%;
  padding: 40px 24px;
  box-sizing: border-box;
  margin: 0;
}

.cta-whatsapp-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cta-text-group {
  text-align: left;
  flex: 1;
}

.cta-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.cta-description {
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.cta-action-group {
  flex-shrink: 0;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #25d366;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: all 0.3s ease;
  white-space: nowrap;

  &:hover {
    background-color: #20ba5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  }
}

.icon-whatsapp {
  width: 20px;
  height: 20px;
}

/* 15. CONTACT SECTION
===================================================== */
.contact-section { background: var(--clr-white); }

.contact-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 45px;
  margin-top: 60px;
}

.contact-information {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--clr-white);
  box-shadow: var(--shadow-main);
  transition: var(--transition);

  &:hover { transform: translateY(-6px); }

  i {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clr-primary-light);
    color: var(--clr-primary);
    font-size: 1.35rem;
    flex-shrink: 0;
  }

  h3 { margin-bottom: 8px; font-size: 1.05rem; }
  a  { color: var(--clr-primary); font-weight: 600; }
}

.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-main);
  min-height: 620px;

  iframe { width: 100%; height: 100%; border: 0; }
}

/* 16. FOOTER
===================================================== */
footer {
  background: var(--clr-footer);
  color: var(--clr-white);
  padding-top: 70px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
}

.footer-logo {
  width: 220px;
  margin-bottom: 25px;
}

.footer-column {
  p { color: rgba(255, 255, 255, 0.75); line-height: 1.9; }

  h3 {
    color: var(--clr-white);
    margin-bottom: 25px;
    font-size: 1.2rem;

    &::after {
      content: "";
      display: block;
      width: 50px;
      height: 3px;
      margin-top: 12px;
      background: #EB78AD;
      border-radius: 20px;
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 16px;

    li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.75);

      a {
        color: rgba(255, 255, 255, 0.75);
        transition: var(--transition);

        &:hover {
          color: var(--clr-white);
          padding-left: 8px;
        }
      }

      i { margin-top: 4px; color: #DC7EAB; }
    }
  }
}

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 30px;

  a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.1rem;
    transition: var(--transition);

    &:hover {
      background: #DC7EAB;
      transform: translateY(-6px);
    }
  }
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 25px 0;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
  }
}

/* 17. UI UTILITIES (Scroll top & Animations)
===================================================== */
.scroll-top {
  position: fixed;
  right: 35px;
  bottom: 35px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #EB78AD;
  color: var(--clr-white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;

  &.active {
    opacity: 1;
    visibility: visible;
  }

  &:hover {
    background: var(--clr-primary-dark);
    transform: translateY(-5px);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #EDF4F8; }
::-webkit-scrollbar-thumb {
  background: var(--clr-primary);
  border-radius: 20px;
  &:hover { background: var(--clr-primary-dark); }
}

/* Animations */
.fade-up, .fade-left, .fade-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up    { transform: translateY(40px); }
.fade-left  { transform: translateX(-40px); }
.fade-right { transform: translateX(40px); }

.fade-up.active, .fade-left.active, .fade-right.active {
  opacity: 1;
  transform: translate(0);
}

/* 18. RESPONSIVE MEDIA QUERIES
===================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .stats .container, .process-timeline { grid-template-columns: repeat(3, 1fr); }
  .process-timeline::before { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .specialty-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .specialty-card-block {
    flex: 0 0 100%;
  }
  .service-card {
    flex: 0 0 calc((100% - 35px) / 2);
    max-width: calc((100% - 35px) / 2);
  }
}

@media (max-width: 768px) {
  nav ul { display: none; }
  .menu-mobile { display: block; }
  
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-2, .grid-3, .grid-4, .testimonials-grid, .faq-grid { grid-template-columns: 1fr; }
  .stats .container, .process-timeline { grid-template-columns: 1fr; }
  .service-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .cta-whatsapp-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .cta-text-group {
    text-align: center;
  }
  
  .footer-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 350px; }
}

@media (max-width: 640px) {
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  .specialty-card { flex: 0 0 100%; }
  .prev-btn { left: 5px; }
  .next-btn { right: 5px; }
}

/* --- CONTENEDOR PRINCIPAL DEL SLIDER ---
   NOTA: aquí había un bloque de JavaScript (carrusel del hero) pegado dentro
   de la hoja de estilos. Se retiró porque ese código ya existe, corregido, en
   main.js (sección 3). Mientras estuvo aquí, anulaba la regla ".hero" de abajo,
   así que esa regla nunca se aplicó. Se deja desactivada para que el inicio se
   vea igual que hasta ahora; para activarla, quitar este comentario.

.hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    overflow: hidden;
}
*/

.hero-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- CADA SLIDE INDIVIDUAL --- */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
}

/* SLIDE ACTIVO */
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    position: relative; /* Ocupa el flujo de altura para el contenedor */
}

/* --- FONDO DE CADA SLIDE --- */
.hero-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* --- FLECHAS DE NAVEGACIÓN --- */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.prev-arrow { left: 20px; }
.next-arrow { right: 20px; }

/* --- PUNTOS INDICADORES --- */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.slider-dots .dot.active {
    background: #ffffff;
    transform: scale(1.2);
}

/* ====================================================
   PÁGINA SECUNDARIA: QUIÉNES SOMOS
   ==================================================== */

/* 1. Hero Estático */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding-top: 100px;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.page-hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(12, 90, 135, 0.92) 0%, rgba(12, 90, 135, 0.4) 100%);
  z-index: 2;
}

.page-hero-container {
  position: relative;
  z-index: 3;
}

.page-hero-content {
  max-width: 620px;
  color: var(--clr-white);
  text-align: left;
}

.badge-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--clr-white);
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.page-hero-content h1 {
  color: var(--clr-white);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.25;
  margin-bottom: 20px;
}

.page-hero-content p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* 2. Sección Quiénes Somos */
.about-page-section {
  padding: 90px 0;
}

.text-left {
  text-align: left;
  margin-left: 0;
}

.about-page-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  width: 100%;
}

/* 3. Misión y Visión */
.mv-section {
  padding: 90px 0;
}

.mv-grid {
  gap: 40px;
}

.mv-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: 45px 35px;
  box-shadow: var(--shadow-main);
  border-top: 5px solid var(--clr-primary);
  transition: var(--transition);
}

.mv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.mv-icon {
  width: 65px;
  height: 65px;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 22px;
}

.mv-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.mv-card p {
  margin: 0;
  line-height: 1.7;
}

/* 4. Valores */
.values-section {
  padding: 90px 0;
}

.values-grid {
  gap: 25px;
}

.value-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 35px 25px;
  text-align: center;
  box-shadow: var(--shadow-main);
  transition: var(--transition);
}

.value-card:hover {
  transform: translateY(-8px);
  border-color: var(--clr-primary);
}

.value-icon {
  width: 60px;
  height: 60px;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 20px;
}

.value-card h4 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--clr-dark);
}

.value-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* 5. Sucursales */
.branches-section {
  padding: 90px 0;
}

.branches-grid {
  gap: 40px;
}

.branch-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-main);
  border: 1px solid var(--clr-border);
  transition: var(--transition);
}

.branch-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.branch-badge {
  display: inline-block;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.branch-info h3 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.branch-details {
  margin-bottom: 30px;
}

.branch-details li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
  color: var(--clr-text);
  font-size: 0.98rem;
}

.branch-details li i {
  color: var(--clr-primary);
  font-size: 1.2rem;
  width: 20px;
}

/* Ajustes Responsive para Quiénes Somos */
@media (max-width: 992px) {
  .page-hero { min-height: 380px; }
  .mv-grid, .branches-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .values-grid { grid-template-columns: 1fr; }
  .branch-card { padding: 30px 20px; }
}

/* ====================================================
   NUEVO HERO ESTILO MAQUETA
   ==================================================== */
.page-hero-mockup {
  background: linear-gradient(135deg, #f8fafc 0%, #edf4f9 100%);
  padding: 140px 0 70px;
  overflow: hidden;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 50px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #DC7EAB;
  margin-bottom: 25px;
}

.breadcrumb a {
  color: var(--clr-primary);
  text-decoration: none;
  opacity: 0.8;
  transition: var(--transition);
}

.breadcrumb a:hover {
  opacity: 1;
}

.breadcrumb i {
  font-size: 0.75rem;
  opacity: 0.6;
}

.breadcrumb span {
  color: var(--clr-dark);
}

/* Tipografía Hero */
.page-hero-text h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: #0d2840;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 20px;
}

.page-hero-text p {
  font-size: 1.1rem;
  color: var(--clr-text);
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Caja Destacada Inferior */
.hero-info-box {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--clr-white);
  border: 1px solid rgba(12, 90, 135, 0.15);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  max-width: 520px;
}

.info-box-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: 1px solid var(--clr-primary);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.info-box-text {
  display: flex;
  flex-direction: column;
}

.info-box-text strong {
  color: #0d2840;
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.info-box-text span {
  color: var(--clr-text);
  font-size: 0.88rem;
}

/* Imagen Hero Derecha */
.page-hero-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* ====================================================
   MISIÓN Y VISIÓN (EFECTO HOVER CLARO -> OSCURO)
   ==================================================== */
.mv-section {
  padding: 90px 0;
}

.mv-grid {
  gap: 40px;
}

.mv-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: 45px 35px;
  box-shadow: var(--shadow-main);
  border-top: 5px solid var(--clr-primary);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

.mv-icon {
  width: 65px;
  height: 65px;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 22px;
  transition: all 0.4s ease;
}

.mv-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--clr-dark);
  transition: color 0.4s ease;
}

.mv-card p {
  margin: 0;
  line-height: 1.7;
  color: var(--clr-text);
  transition: color 0.4s ease;
}

/* Cambio de Claro a Oscuro al pasar el cursor */
.mv-card:hover {
  background: #0d2840;
  border-top-color: var(--clr-primary-light);
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(13, 40, 64, 0.25);
}

.mv-card:hover .mv-icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--clr-white);
}

.mv-card:hover h3 {
  color: var(--clr-white);
}

.mv-card:hover p {
  color: rgba(255, 255, 255, 0.88);
}


/* ====================================================
   SUCURSALES (CON FOTOGRAFÍA SIN DEFORMACIÓN)
   ==================================================== */
.branches-section {
  padding: 90px 0;
}

.branches-grid {
  gap: 40px;
}

.branch-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden; /* Garantiza los bordes redondeados con la imagen */
  box-shadow: var(--shadow-main);
  border: 1px solid var(--clr-border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.branch-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* Contenedor e Imagen de la Sucursal */
.branch-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.branch-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita que la foto se deforme o estire */
  object-position: center;
  transition: transform 0.5s ease;
}

.branch-card:hover .branch-image-wrapper img {
  transform: scale(1.05); /* Efecto zoom suave al pasar el cursor */
}

/* Badge flotante sobre la imagen */
.branch-image-wrapper .branch-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(12, 90, 135, 0.9);
  color: var(--clr-white);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.branch-info {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.branch-info h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--clr-dark);
}

.branch-details {
  margin-bottom: 25px;
}

.branch-details li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
  color: var(--clr-text);
  font-size: 0.95rem;
}

.branch-details li i {
  color: var(--clr-primary);
  font-size: 1.1rem;
  width: 20px;
}

.branch-info .btn-secondary {
  margin-top: auto;
  align-self: flex-start;
}


/* ====================================================
   RESPONSIVE HERO Y SUCURSALES
   ==================================================== */
@media (max-width: 992px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .breadcrumb {
    justify-content: center;
  }

  .hero-info-box {
    margin: 0 auto;
    text-align: left;
  }

  .page-hero-media {
    max-width: 500px;
    margin: 0 auto;
  }

  .mv-grid, .branches-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .page-hero-mockup {
    padding: 120px 0 50px;
  }

  .hero-info-box {
    flex-direction: column;
    text-align: center;
  }

  .branch-image-wrapper {
    height: 180px;
  }
}

/* Estilos para Sección Descargables */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.download-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.download-icon {
    font-size: 2.5rem;
    color: #e74c3c; /* Color característico de PDF */
    margin-bottom: 15px;
}

.file-badge {
    background-color: #f0f4f8;
    color: #2c3e50;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}

.download-info h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: #2c3e50;
}

.download-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.file-meta {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 20px;
}

.btn-download {
    width: 100%;
    text-align: center;
    display: inline-block;
}

/* ========================================== */
/* SECCIÓN DESCARGABLES - ESTILOS MEJORADOS   */
/* ========================================== */

/* Grilla con tarjetas de la misma altura */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Tarjeta estructurada en Flexbox */
.download-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Forzar altura pareja */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Ícono PDF con estética sobria y elegante */
.download-icon {
    width: 52px;
    height: 52px;
    background-color: #f4f6f9; /* Fondo suave elegante */
    color: #1a2b4c; /* Color oscuro institucional/elegante */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.download-card:hover .download-icon {
    background-color: #1a2b4c;
    color: #ffffff;
}

/* Etiqueta del archivo */
.file-badge {
    background-color: #eef2f7;
    color: #1a2b4c;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 12px;
    align-self: flex-start;
}

/* Título de la tarjeta */
.download-info h3 {
    font-size: 1.2rem;
    color: #1a2b4c;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.35;
}

/* Descripción */
.download-info p {
    font-size: 0.92rem;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Metadatos (peso, formato) alineados abajo */
.file-meta {
    display: flex;
    gap: 15px;
    font-size: 0.82rem;
    color: #777777;
    margin-top: auto; /* Empuja los metadatos y el botón al fondo para alineación perfecta */
    padding-top: 15px;
    margin-bottom: 15px;
    border-top: 1px solid #f0f0f0;
}

/* Botón de descarga: Oscuro por defecto -> Claro al pasar el cursor (Hover) */
.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Estado Base (Oscuro) */
    background-color: #1a2b4c; /* Color oscuro de la marca */
    color: #ffffff;
    border: 2px solid #1a2b4c;
}

/* Estado Hover (Claro con borde y letras oscuras) */
.btn-download:hover {
    background-color: #ffffff;
    color: #1a2b4c;
    border-color: #1a2b4c;
}

.btn-download i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.btn-download:hover i {
    transform: translateY(2px); /* Pequeño efecto visual de descarga */
}

/* =======================================================
   ANIMACIÓN BASE & HOVER (Elevación + Borde Destacado)
   ======================================================= */

/* 1. Caja de información del Hero */
.hero-info-box {
    border: 1px solid #e2e8f0; /* Borde inicial sutil */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-info-box:hover {
    transform: translateY(-6px);
    border-color: #0056b3; /* Cambiar al azul primario de Oncosur */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 2. Tarjetas de Valores (.value-card) */
.value-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Borde inicial */
    border-radius: 8px; /* Ajustar según tu diseño */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    border-color: #0056b3; /* Borde resaltado en hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* 3. Tarjetas de Sucursales (.branch-card) */
.branch-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden; /* Garantiza que la imagen no sobrepase los bordes redondeados */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.branch-card:hover {
    transform: translateY(-8px);
    border-color: #0056b3;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* 4. Tarjetas de Contacto (.contact-card) */
.contact-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #0056b3;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* =======================================================
   ANIMACIÓN BASE & HOVER - DESCARGABLES (Elevación + Borde)
   ======================================================= */

/* 1. Caja informativa del Hero */
.hero-info-box {
    border: 1px solid #e2e8f0; /* Borde inicial sutil */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-info-box:hover {
    transform: translateY(-6px);
    border-color: #0056b3; /* Azul primario de Oncosur */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 2. Tarjetas de descarga PDF (.download-card) */
.download-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Borde de contraste inicial */
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.download-card:hover {
    transform: translateY(-8px);
    border-color: #0056b3; /* Resaltado de borde en hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* 3. Tarjetas de Contacto (.contact-card) */
.contact-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #0056b3;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* =======================================================
   ESTILOS DE ESPECIALIDADES & DESPLEGABLES (ACCORDEON)
   ======================================================= */

.specialty-block {
    margin-bottom: 40px;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.block-header i {
    font-size: 1.8rem;
    color: #0056b3;
}

.block-header h2 {
    font-size: 1.6rem;
    color: #1e293b;
    margin: 0;
}

/* GRILLA EN 2 COLUMNAS HORIZONTALES */
.accordion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .accordion-grid {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
    }
}

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.accordion-item[open] {
    border-color: #0056b3;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.accordion-header {
    padding: 18px 24px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
    background-color: #ffffff;
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.accordion-header i {
    transition: transform 0.3s ease;
    color: #0056b3;
}

.accordion-item[open] .accordion-header i {
    transform: rotate(90deg);
}

.badge-tag {
    background-color: #e0f2fe;
    color: #0369a1;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.badge-dental {
    background-color: #f0fdf4;
    color: #15803d;
}

.accordion-content {
    padding: 0 24px 24px 24px;
    border-top: 1px solid #f1f5f9;
}

.specialty-description {
    color: #475569;
    margin: 16px 0 20px 0;
    line-height: 1.6;
}

/* Tarjeta del Profesional con animación Hover */
.doctor-placeholder h4 {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doctor-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.doctor-card:hover {
    transform: translateY(-2px);
    border-color: #0056b3;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.doctor-avatar {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.doctor-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* EFECTO ZOOM SOLO AL MANTENER PRESIONADO (ACTIVE) */
.doctor-avatar-img:active {
    transform: scale(1.6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.doctor-info h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}

.doctor-title {
    font-size: 0.88rem;
    color: #0056b3;
    font-weight: 500;
    display: block;
}

.doctor-info p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

/* =======================================================
   ESTILOS Y ANIMACIONES - SECCIÓN FAQ PREGUNTAS
   ======================================================= */

/* 1. Estructura general del ítem */
.faq-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Borde sutil inicial */
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    /* Transición suave para elevación, color de fondo, borde y sombra */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 2. Comportamiento HOVER (Efecto elevación + línea de color en borde) */
.faq-item:hover {
    transform: translateY(-5px);
    border-color: #0056b3; /* Color azul institucional */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 3. Encabezado de la pregunta (Summary) */
.faq-header {
    padding: 20px 24px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Oculta la flecha por defecto de HTML <details> */
    user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Quita el triángulo por defecto en Safari */
.faq-header::-webkit-details-marker {
    display: none;
}

/* 4. Icono por defecto (flecha hacia abajo o signo +) */
.faq-icon {
    font-size: 1rem;
    color: #0056b3;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* 5. ESTADO ABIERTO / DESPLEGADO ([open]) */
/* Tono oscuro para la tarjeta cuando está abierta */
.faq-item[open] {
    background-color: #1e293b; /* Tono oscuro elegante */
    border-color: #0056b3;
}

/* Texto claro para la pregunta cuando está desplegado */
.faq-item[open] .faq-header {
    background-color: #1e293b;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador sutil */
}

/* Transición del icono al abrir: Se gira 180° si usas flecha, o 45° si usas el plus */
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: #38bdf8; /* Azul claro brillante para resaltar en fondo oscuro */
}

/* Contenido de la respuesta en fondo oscuro */
.faq-collapse {
    background-color: #1e293b;
}

.faq-content {
    padding: 20px 24px;
    color: #cbd5e1; /* Texto claro legible */
    line-height: 1.6;
}

.faq-content p {
    margin: 0;
}
/* 1. Línea divisoria blanca al estar abierto */
.faq-item[open] .faq-header {
    background-color: #1e293b;
    color: #ffffff;
    /* Línea divisoria blanca (usamos opacidad 0.3 para un acabado más fino y elegante) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
}

/* 2. Texto de la respuesta en blanco puro */
.faq-content {
    padding: 20px 24px;
    color: #ffffff; /* Texto 100% blanco */
    line-height: 1.6;
}

.faq-content p {
    color: #ffffff; /* Asegura que el párrafo herede/mantenga el blanco puro */
    margin: 0;
}

/* ========================================== */
/* HERO BANNER - FULL WIDTH CON DEGRADADO     */
/* ========================================== */

.page-hero-banner {
    position: relative;
    width: 100%;
    min-height: 480px; /* Ajusta la altura general del Hero según prefieras */
    display: flex;
    align-items: center;
    background-color: #ffffff; /* Color de base para que funda el degradado */
    overflow: hidden;
}

/* Imagen posicionada a la derecha cubriendo la sección */
.hero-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* Cubre un 60% del ancho desde la derecha */
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 1;
}

/* Capa Degradada: Blanco sólido a la izquierda -> Transparente a la derecha */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* El degradado pasa de blanco puro (0%) a totalmente transparente (65%) */
    background: linear-gradient(
        to right,
        #ffffff 0%,
        #ffffff 40%,
        rgba(255, 255, 255, 0.85) 55%,
        rgba(255, 255, 255, 0) 75%
    );
}

/* Contenido por encima de las capas */
.hero-content-container {
    position: relative;
    z-index: 3;
    padding-top: 50px;
    padding-bottom: 50px;
}

.page-hero-text {
    max-width: 580px; /* Limita el ancho del texto para no invadir la imagen */
}

/* Espaciado entre bloques de especialidad */
.specialty-block {
  margin-bottom: 40px;
}

/* Grid de 3 columnas iguales */
.accordion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas exactamente de igual ancho */
  gap: 20px;
  align-items: stretch; /* Obliga a que todos los cuadros de una misma fila tengan exactamente la misma altura */
}

/* Asegura el mismo ancho y comportamiento de caja */
.accordion-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Opcional: Si deseas que el contenido interno de las tarjetas también ocupe todo el alto disponible */
.accordion-content {
  flex-grow: 1;
}

/* Adaptación responsive para pantallas pequeñas */
@media (max-width: 992px) {
  .accordion-grid {
    grid-template-columns: 1fr; /* Pasa a 1 columna en celulares para mantener la lectura clara */
  }
}/* Estilo elegante y compacto para las etiquetas de área */
.badge-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;           /* Tamaño de texto más pequeño y fino */
    font-weight: 500;             /* Peso medio para buena legibilidad */
    letter-spacing: 0.4px;         /* Ligero espaciado entre letras */
    text-transform: uppercase;     /* Mayúsculas sutiles */
    padding: 3px 8px;              /* Dimensiones más compactas */
    border-radius: 4px;            /* Bordes suavemente redondeados */
    background-color: #e0f2fe;    /* Fondo azul pastel muy suave */
    color: #0369a1;                /* Texto azul elegante */
    border: 1px solid #bae6fd;    /* Borde muy fino que le da estructura */
    white-space: nowrap;           /* Evita que se rompa en dos líneas */
}

/* Variante para el Área Odontológica */
.badge-tag.badge-dental {
    background-color: #f0fdf4;    /* Fondo verde pastel sutil */
    color: #15803d;                /* Texto verde sobrio */
    border-color: #bbf7d0;
}


/* ========================================== */
/* CARRUSEL CONTINUO DE MARCAS / CONVENIOS    */
/* ========================================== */

/* Variables de sección para control independiente */
.brands-carousel-section {
  --brands-bg: var(--clr-white, #ffffff);
  --brands-padding: 50px 0;
  --brands-speed: 55s; /* Ajusta la velocidad según la cantidad de marcas */

  padding: var(--brands-padding);
  background-color: var(--brands-bg);
  overflow: hidden;
}

.brands-slider {
  position: relative;
  width: 100%;
  margin-top: 30px;
  overflow: hidden;
  /* Mascara de desvanecimiento en bordes laterales */
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
pointer-events: none;
  user-select: none;
}

.brands-track {
  display: flex;
  width: max-content; /* Se calcula automáticamente según la cantidad real de tarjetas */
  animation: scrollBrands var(--brands-speed) linear infinite;
}

/* Opción: Pausar el carrusel al pasar el cursor sobre el slider */
.brands-slider:hover .brands-track {
  animation-play-state: paused;
}

.brand-slide {
  flex-shrink: 0;
  width: 200px; /* Ancho base consistente para cada logo */
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  box-sizing: border-box;
}

.brand-slide img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

/* Efecto hover individual sobre el logo */
.brand-slide:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Animación fluida e infinita (funciona con N elementos) */
@keyframes scrollBrands {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Desplaza exactamente la mitad (el grupo original) */
  }
}

/* Adaptabilidad responsive */
@media (max-width: 768px) {
  .brand-slide {
    width: 160px;
    padding: 0 15px;
  }
  
  .brand-slide img {
    max-height: 50px;
  }
}

@media (max-width: 480px) {
  .brand-slide {
    width: 130px;
    padding: 0 10px;
  }

  .brand-slide img {
    max-height: 40px;
  }
}

/* ==========================================
   PRELOADER PREMIUM: SVG DRAW & SHIMMER
   ========================================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff; /* Fondo blanco impecable */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s ease;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.preloader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* Contenedor del SVG */
.svg-logo-container {
    position: relative;
    width: 280px; /* Ajusta según el aspecto visual deseado */
    height: auto;
}

.oncosur-svg-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Silueta tenue de guía */
.base-path {
    fill: none;
    stroke: rgba(0, 82, 155, 0.08); /* Azul corporativo ultra ligero */
    stroke-width: 2px;
}

/* Animación de Trazo Quirúrgico / Dibujo por Luz */
.animated-path {
    fill: none;
    stroke: #00529b; /* Azul Oncosur */
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    
    /* Propiedad clave para la ilusión del trazado */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLogo 3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Destello / Shimmer al completar el dibujo */
.light-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: shimmerPass 1s ease 2.6s forwards;
}

/* Subtexto y Barra de progreso minimalista */
.brand-subtext {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.brand-subtext span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.70rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInText 1s ease 0.5s forwards;
}

.progress-bar-line {
    width: 0px;
    height: 2px;
    background: linear-gradient(90deg, #00529b, #00a896);
    border-radius: 2px;
    animation: expandLine 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================
   ANIMACIONES (KEYFRAMES)
   ========================================== */

/* 1. Dibuja el trazo del logo progresivamente */
@keyframes drawLogo {
    0% {
        stroke-dashoffset: 1000;
        fill: rgba(0, 82, 155, 0);
    }
    75% {
        stroke-dashoffset: 0;
        fill: rgba(0, 82, 155, 0);
    }
    100% {
        stroke-dashoffset: 0;
        fill: rgba(0, 82, 155, 1); /* Relleno final suave */
    }
}

/* 2. Destello elegante de luz */
@keyframes shimmerPass {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* 3. Expansión de la línea sutil de progreso */
@keyframes expandLine {
    0% { width: 0px; }
    100% { width: 140px; }
}

/* 4. Entrada suave del texto */
@keyframes fadeInText {
    to { opacity: 1; }
}

:root {
    /* Cambia aquí la duración del dibujo o llenado del logo */
    --duracion-animacion-logo: 3s;
}

/* Aplicar la variable a la animación del trazo o llenado */
.animated-path {
    animation: drawLogo var(--duracion-animacion-logo) cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.progress-bar-line {
    animation: expandLine var(--duracion-animacion-logo) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.why-us-timeline {
    padding: 80px 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.process-step {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border-left: 4px solid #00529b;
}

.step-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(0, 82, 155, 0.15);
    margin-bottom: 10px;
    line-height: 1;
}

.process-step h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.process-step p {
    font-size: 0.88rem;
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* ====================================================
   1. HEADER Y NAVEGACIÓN MOBILE
   ==================================================== */

/* Ajustes generales del Header en pantallas medianas y pequeñas */
@media (max-width: 992px) {
  header .container {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo img {
    height: 48px;
    width: auto;
  }

  /* Ocultar botón de reserva del header en móvil para evitar sobrecarga */
  .header-button {
    display: none;
  }

  /* Menú Hamburguesa / Trigger */
  .menu-mobile {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    color: #00529b;
    z-index: 1001;
  }

  /* Contenedor del Menú Lateral Desplegable */
  nav {
    position: fixed;
    top: 75px;
    left: -100%;
    width: 280px;
    height: calc(100vh - 75px);
    background: #ffffff;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.12);
    transition: left 0.35s ease;
    padding: 30px 20px;
    overflow-y: auto;
    z-index: 1000;
  }

  nav.active {
    left: 0;
  }

  nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  nav ul li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }

  nav ul li a {
    display: block;
    padding: 16px 0;
    width: 100%;
    font-size: 1rem;
    color: #333333;
    text-decoration: none;
    font-weight: 500;
  }
}

@media (max-width: 480px) {
  header .container {
    height: 65px;
  }

  .logo img {
    height: 40px;
  }

  nav {
    top: 65px;
    height: calc(100vh - 65px);
    width: 100%; /* Ocupa el ancho completo en teléfonos pequeños */
  }
}

/* --- PUNTOS INDICADORES --- */
.slider-dots {
    display: none !important; /* <--- Agrega esta línea */
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    gap: 10px;
}


.schedule-second-line {
    display: inline-block;
    margin-left: 74px;
}

/* ============================================================
   ÁREAS CLÍNICAS — BLOQUES DESPLEGABLES
   ============================================================ */


/* ------------------------------------------------------------
   BLOQUE PRINCIPAL
   ------------------------------------------------------------ */

.clinical-block {
    width: 100%;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Estado abierto */

.clinical-block[open] {
    border-color: #0056b3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}


/* ------------------------------------------------------------
   CABECERA DEL BLOQUE DESPLEGABLE
   ------------------------------------------------------------ */

.clinical-block-header {
    width: 100%;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #ffffff;
    transition: background-color 0.3s ease;
}


/* Elimina marcador nativo */

.clinical-block-header::-webkit-details-marker {
    display: none;
}

.clinical-block-header::marker {
    display: none;
    content: "";
}


/* Hover */

.clinical-block-header:hover {
    background: #f8fafc;
}


/* ------------------------------------------------------------
   TÍTULO + ICONO
   ------------------------------------------------------------ */

.clinical-block-title {
    display: flex;
    align-items: center;
    gap: 14px;
}


.clinical-block-title > i {
    font-size: 1.8rem;
    color: #0056b3;
    flex-shrink: 0;
}


.clinical-block-title h2 {
    font-size: 1.6rem;
    color: #1e293b;
    margin: 0;
    line-height: 1.25;
}


/* ------------------------------------------------------------
   FLECHA DEL BLOQUE
   ------------------------------------------------------------ */

.clinical-block-arrow {
    color: #0056b3;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}


/* Rotación cuando está abierto */

.clinical-block[open] > 
.clinical-block-header 
.clinical-block-arrow {
    transform: rotate(180deg);
}


/* ------------------------------------------------------------
   CONTENIDO DEL BLOQUE
   ------------------------------------------------------------ */

.clinical-block-body {
    padding: 0 28px 28px;
}


/* ------------------------------------------------------------
   TEXTO DESCRIPTIVO
   ------------------------------------------------------------ */

.clinical-block-description {
    margin: 0 0 24px;
    padding: 18px 20px;
    background: #f8fafc;
    border-left: 4px solid #0056b3;
    border-radius: 0 8px 8px 0;
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.7;
}


/* ------------------------------------------------------------
   GRID DE ESPECIALIDADES
   ------------------------------------------------------------ */

.clinical-specialties-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}


/* ------------------------------------------------------------
   TARJETA DE ESPECIALIDAD
   ------------------------------------------------------------ */

.clinical-specialty-card {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Hover tarjeta */

.clinical-specialty-card:hover {
    transform: translateY(-3px);
    border-color: #0056b3;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}


/* ------------------------------------------------------------
   CABECERA DE ESPECIALIDAD
   ------------------------------------------------------------ */

.clinical-specialty-header {
    width: 100%;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}


.clinical-specialty-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.35;
}


.clinical-specialty-header h3 i {
    color: #0056b3;
    font-size: 0.9rem;
}


/* ------------------------------------------------------------
   ETIQUETA ÁREA MÉDICA
   ------------------------------------------------------------ */

.clinical-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 3px 8px;
    background-color: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   CONTENIDO DE LA TARJETA
   ------------------------------------------------------------ */

.clinical-specialty-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


/* Mantiene descripción en la parte inferior */

.clinical-specialty-content .specialty-description {
    margin: 16px 0 0;
    color: #475569;
    line-height: 1.6;
    font-size: 0.92rem;
}


/* ------------------------------------------------------------
   PROFESIONAL
   Mantiene tu diseño actual de .doctor-card
   ------------------------------------------------------------ */

.clinical-specialty-content .doctor-placeholder h4 {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 992px) {

    .clinical-specialties-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    .clinical-block {
        margin-bottom: 18px;
    }


    .clinical-block-header {
        padding: 20px;
    }


    .clinical-block-title {
        gap: 11px;
    }


    .clinical-block-title > i {
        font-size: 1.4rem;
    }


    .clinical-block-title h2 {
        font-size: 1.25rem;
    }


    .clinical-block-body {
        padding: 0 18px 20px;
    }


    .clinical-block-description {
        padding: 15px 16px;
        margin-bottom: 18px;
        font-size: 0.9rem;
    }


    .clinical-specialties-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .clinical-specialty-header {
        padding: 16px;
    }


    .clinical-specialty-content {
        padding: 16px;
    }

}


/* ============================================================
   RESPONSIVE — MÓVILES PEQUEÑOS
   ============================================================ */

@media (max-width: 480px) {

    .clinical-block-header {
        padding: 18px 16px;
    }


    .clinical-block-title h2 {
        font-size: 1.1rem;
    }


    .clinical-block-title > i {
        font-size: 1.25rem;
    }


    .clinical-block-body {
        padding: 0 14px 16px;
    }


    .clinical-specialty-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

}
/* ============================================================
   ÁREAS CLÍNICAS
   Descripción siempre visible
   Solo profesionales desplegables
   ============================================================ */


/* ============================================================
   1. CONTENEDOR DE CADA ÁREA
   ============================================================ */

.clinical-area {
    width: 100%;
    margin-bottom: 40px;
    box-sizing: border-box;
}


/* ============================================================
   2. TÍTULO DEL ÁREA - SIEMPRE VISIBLE
   ============================================================ */

.clinical-static-header {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    margin-bottom: 16px;

    background: transparent;
}


/* Título + icono */

.clinical-static-header .clinical-block-title {
    display: flex;
    align-items: center;
    gap: 14px;
}


.clinical-static-header .clinical-block-title > i {
    color: #0056b3;
    font-size: 1.8rem;
    flex-shrink: 0;
}


.clinical-static-header .clinical-block-title h2 {
    margin: 0;

    color: #1e293b;

    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}


/* ============================================================
   3. DESCRIPCIÓN GENERAL
   SIEMPRE VISIBLE
   ============================================================ */

.clinical-area > .clinical-block-description {

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

    margin: 0 0 18px 0;
    padding: 18px 20px;

    background: #f8fafc;

    border-left: 4px solid #0056b3;
    border-radius: 0 8px 8px 0;

    color: #475569;

    font-size: 0.96rem;
    line-height: 1.7;
}


/* ============================================================
   4. DESPLEGABLE DE PROFESIONALES
   ============================================================ */

.clinical-professionals {

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

    background: #ffffff;

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

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Cuando está abierto */

.clinical-professionals[open] {

    border-color: #0056b3;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.05);
}


/* ============================================================
   5. BOTÓN DEL DESPLEGABLE
   ============================================================ */

.clinical-professionals-toggle {

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

    padding: 18px 20px;

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

    gap: 20px;

    cursor: pointer;

    list-style: none;
    user-select: none;

    background: #ffffff;

    color: #0056b3;

    font-size: 0.95rem;
    font-weight: 600;

    transition: background-color 0.3s ease;
}


/* Hover */

.clinical-professionals-toggle:hover {
    background: #f8fafc;
}


/* Elimina flecha nativa del navegador */

.clinical-professionals-toggle::-webkit-details-marker {
    display: none;
}


.clinical-professionals-toggle::marker {
    content: "";
}


/* ============================================================
   6. FLECHA
   ============================================================ */

.clinical-professionals-toggle .clinical-block-arrow {

    color: #0056b3;

    font-size: 0.9rem;

    flex-shrink: 0;

    transition: transform 0.3s ease;
}


/* Girar flecha al abrir */

.clinical-professionals[open]
> .clinical-professionals-toggle
.clinical-block-arrow {

    transform: rotate(180deg);
}


/* ============================================================
   7. CONTENIDO DESPLEGABLE
   ============================================================ */

.clinical-professionals-content {

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

    padding: 20px;

    border-top: 1px solid #f1f5f9;

    background: #ffffff;
}


/* ============================================================
   8. GRID DE PROFESIONALES
   ============================================================ */

.clinical-professionals .clinical-specialties-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;

    box-sizing: border-box;
}


/* ============================================================
   9. TARJETAS
   ============================================================ */

.clinical-professionals .clinical-specialty-card {

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    background: #ffffff;

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

    overflow: hidden;
}


/* Contenido de la tarjeta */

.clinical-professionals .clinical-specialty-content {

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 20px;

    display: flex;
    flex-direction: column;

    flex-grow: 1;
}


/* ============================================================
   10. RESPONSIVE TABLET
   ============================================================ */

@media (max-width: 992px) {

    .clinical-professionals .clinical-specialties-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* ============================================================
   11. RESPONSIVE MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    .clinical-area {
        margin-bottom: 32px;
    }


    .clinical-static-header {
        margin-bottom: 14px;
    }


    .clinical-static-header .clinical-block-title {
        gap: 10px;
    }


    .clinical-static-header .clinical-block-title > i {
        font-size: 1.4rem;
    }


    .clinical-static-header .clinical-block-title h2 {
        font-size: 1.25rem;
    }


    .clinical-area > .clinical-block-description {

        padding: 15px 16px;

        font-size: 0.9rem;

        margin-bottom: 15px;
    }


    .clinical-professionals-toggle {
        padding: 16px;
    }


    .clinical-professionals-content {
        padding: 16px;
    }


    .clinical-professionals .clinical-specialties-grid {

        grid-template-columns: 1fr;

        gap: 16px;
    }

}


/* ============================================================
   SERVICIOS DE ENFERMERÍA
   Integración visual sistema ONCOSUR
   ============================================================ */


/* ============================================================
   1. SECCIÓN
   ============================================================ */

.nursing-services-section {
    padding: 80px 0;
    background: var(--clr-white);
}


/* IMPORTANTE:
   No se modifica .container.
   Se utiliza el ancho global existente del sitio.
*/


/* ============================================================
   2. ENCABEZADO
   ============================================================ */

.nursing-header {
    width: 100%;
    margin-bottom: 35px;
}


/* Título principal */

.nursing-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}


/* Icono principal */

.nursing-title-icon {
    width: 64px;
    height: 64px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--clr-primary-light);
    color: var(--clr-primary);

    font-size: 1.6rem;
}


/* Contenedor de textos */

.nursing-title-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Etiqueta APOYO CLÍNICO */

.nursing-eyebrow {
    display: inline-block;

    margin-bottom: 6px;

    color: var(--clr-accent);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* Título */

.nursing-title-text h2 {
    margin: 0;

    color: var(--clr-dark);

    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.2;
}


/* ============================================================
   3. DESCRIPCIÓN GENERAL
   ============================================================ */

.nursing-intro {
    width: 100%;

    margin: 0;
    padding: 20px 24px;

    background: var(--clr-light);

    border-left: 4px solid var(--clr-primary);
    border-radius: 0 8px 8px 0;

    color: var(--clr-text);

    font-size: 0.98rem;
    line-height: 1.7;
}


/* ============================================================
   4. GRID DE SERVICIOS
   ============================================================ */

.nursing-services-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;

    margin-top: 28px;
}


/* ============================================================
   5. TARJETA DE SERVICIO
   ============================================================ */

.nursing-service-card {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 24px;

    background: var(--clr-white);

    border: 1px solid var(--clr-border);
    border-radius: 12px;

    transition: var(--transition);
}


/* Hover */

.nursing-service-card:hover {
    border-color: var(--clr-primary);

    box-shadow:
        0 8px 22px rgba(12, 90, 135, 0.08);

    transform: translateY(-3px);
}


/* ============================================================
   6. ICONO DE CADA SERVICIO
   ============================================================ */

.nursing-service-icon {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    background: var(--clr-primary-light);

    border-radius: 50%;

    color: var(--clr-primary);

    font-size: 1.15rem;

    transition: var(--transition);
}


/* Cambio sutil al hover */

.nursing-service-card:hover
.nursing-service-icon {

    background: var(--clr-primary);
    color: var(--clr-white);
}


/* ============================================================
   7. CONTENIDO DE TARJETA
   ============================================================ */

.nursing-service-content {
    min-width: 0;
    flex: 1;
}


/* Título */

.nursing-service-content h3 {
    margin: 0 0 15px;

    color: var(--clr-dark);

    font-size: 1.05rem;
    line-height: 1.4;
}


/* ============================================================
   8. LISTA
   ============================================================ */

.nursing-service-list {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;

    list-style: none;
}


/* Elemento individual */

.nursing-service-list li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: var(--clr-text);

    font-size: 0.9rem;
    line-height: 1.5;
}


/* Check */

.nursing-service-list li > i {
    margin-top: 5px;

    color: var(--clr-accent);

    font-size: 0.7rem;

    flex-shrink: 0;
}


/* ============================================================
   9. BLOQUE FINAL — DISPONIBILIDAD
   ============================================================ */

.nursing-availability {
    width: 100%;

    margin-top: 28px;
    padding: 24px 28px;

    display: flex;
    align-items: center;

    gap: 20px;

    background: var(--clr-primary-light);

    border: 1px solid rgba(12, 90, 135, 0.12);
    border-radius: 12px;
}


/* Icono */

.nursing-availability-icon {
    width: 52px;
    height: 52px;

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

    flex: 0 0 52px;

    border-radius: 50%;

    background: var(--clr-primary);
    color: var(--clr-white);

    font-size: 1.2rem;
}


/* Texto */

.nursing-availability-content {
    flex: 1;
    min-width: 0;
}


.nursing-availability-content h3 {
    margin: 0 0 6px;

    color: var(--clr-primary-dark);

    font-size: 1.05rem;
}


.nursing-availability-content p {
    margin: 0;

    color: var(--clr-text);

    font-size: 0.92rem;
    line-height: 1.6;
}


/* ============================================================
   10. TABLET
   ============================================================ */

@media (max-width: 992px) {

    .nursing-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   11. MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    .nursing-services-section {
        padding: 60px 0;
    }


    .nursing-header {
        margin-bottom: 25px;
    }


    .nursing-title {
        gap: 14px;
        margin-bottom: 18px;
    }


    .nursing-title-icon {
        width: 52px;
        height: 52px;

        font-size: 1.3rem;
    }


    .nursing-title-text h2 {
        font-size: 1.4rem;
    }


    .nursing-intro {
        padding: 16px 18px;

        font-size: 0.92rem;
    }


    .nursing-services-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 20px;
    }


    .nursing-service-card {
        padding: 20px;

        gap: 15px;
    }


    .nursing-service-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        font-size: 1rem;
    }


    .nursing-availability {
        margin-top: 20px;

        padding: 20px;

        align-items: flex-start;
    }

}


/* ============================================================
   12. MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 480px) {

    .nursing-service-card {
        flex-direction: column;
    }


    .nursing-availability {
        flex-direction: column;
    }

}

/* ============================================================
   CTA WHATSAPP — SERVICIOS DE ENFERMERÍA
   ============================================================ */

.nursing-availability-action {
    flex-shrink: 0;
    margin-left: auto;
}


/* BOTÓN */

.nursing-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 22px;

    background: #25D366;
    color: #FFFFFF;

    border-radius: 50px;

    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 6px 18px rgba(37, 211, 102, 0.22);

    transition: var(--transition);
}


/* ICONO WHATSAPP */

.nursing-whatsapp-btn i {
    font-size: 1.25rem;
    color: #FFFFFF;
}


/* HOVER */

.nursing-whatsapp-btn:hover {
    background: #20BA5A;
    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(37, 211, 102, 0.32);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .nursing-availability {
        flex-wrap: wrap;
    }

    .nursing-availability-action {
        width: 100%;
        margin-left: 72px;
    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    .nursing-availability-action {
        width: 100%;
        margin-left: 0;
    }

    .nursing-whatsapp-btn {
        width: 100%;

        white-space: normal;

        text-align: center;
    }

}


/* ==========================================================================
   ESPECIALIDADES ODONTOLÓGICAS — DIAGNÓSTICO DENTAL (prefijo dx-)
   Página: especialidades-odontologicas.html
   Hero (duración) · Por qué importa + Qué ganas · Diferenciadores ·
   Informe de salud oral interactivo · Plan de tratamiento paso a paso
   ========================================================================== */

/* Colores semánticos solo para escala ICDAS / mapa dental */
:root {
    --dx-sano: #16A34A;
    --dx-sano-soft: #E7F6EC;
    --dx-inicial: #F59E0B;
    --dx-inicial-soft: #FFF4DC;
    --dx-cavidad: #DC2626;
    --dx-cavidad-soft: #FDECEC;
    --dx-rosa: #F0C7DB;
}

/* Sprite SVG oculto (no usar display:none para no romper gradientes) */
.dx-svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================================================
   TARJETA BASE (estilo ONCOSUR: blanca, borde, hover)
   ============================================================ */
.dx-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    transition: var(--transition);
}

.dx-card:hover {
    border-color: var(--clr-primary);
    box-shadow: 0 8px 22px rgba(12, 90, 135, 0.08);
    transform: translateY(-3px);
}

.dx-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clr-primary-light);
    color: var(--clr-primary);
    font-size: 1.25rem;
    transition: var(--transition);
}

.dx-card:hover .dx-icon {
    background: var(--clr-primary);
    color: var(--clr-white);
}

.dx-card h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--clr-dark);
}

.dx-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--clr-text);
}

/* ============================================================
   0. HERO: DURACIÓN DE LA EVALUACIÓN
   (debajo de "Enfoque Multidisciplinario")
   ============================================================ */
.dx-duration {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.dx-duration span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: var(--radius-full);
    background: var(--clr-primary-light);
    border: 1px solid rgba(12, 90, 135, 0.12);
    color: var(--clr-primary-dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
}

.dx-duration i { color: var(--clr-accent); }

.dx-duration--hero {
    justify-content: flex-start;
    margin-top: 18px;
}

.dx-duration--hero span {
    background: rgba(255, 255, 255, 0.96);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    text-align: left;
}

/* ============================================================
   1. POR QUÉ IMPORTA + QUÉ GANAS (sección unificada)
   ============================================================ */
.dx-compare,
.dx-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.dx-compare-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 28px;
    border-left: 4px solid var(--clr-primary);
    border-radius: 0 12px 12px 0;
}

.dx-compare-card.is-late {
    border-left-color: var(--clr-accent);
}

.dx-compare-card.is-late .dx-icon {
    background: #FAEBF2;
    color: var(--clr-accent);
}

.dx-compare-card.is-late:hover {
    border-color: var(--clr-accent);
}

.dx-compare-card.is-late:hover .dx-icon {
    background: var(--clr-accent);
    color: var(--clr-white);
}

.dx-compare-card strong { color: var(--clr-dark); }

/* Segundo título dentro de la misma sección (Qué ganas) */
.dx-why .dx-gains-title {
    margin-top: 64px;
}

.dx-benefit-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 28px;
}

/* ============================================================
   TARJETAS DESTACADAS (color diferente)
   ICDAS · pH salival · Informe de salud oral
   ============================================================ */
.dx-feature {
    position: relative;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--clr-white);
    box-shadow: 0 18px 40px rgba(12, 90, 135, 0.25);
    overflow: hidden;
}

.dx-feature::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.dx-feature > * { position: relative; z-index: 1; }

.dx-feature .dx-icon {
    background: rgba(255, 255, 255, 0.14);
    color: var(--clr-white);
}

.dx-feature h3 {
    margin: 2px 0 0;
    font-size: 1.3rem;
    color: var(--clr-white);
}

.dx-feature p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
}

.dx-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dx-rosa);
}

/* ============================================================
   2. DIFERENCIADORES
   ============================================================ */
.dx-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.dx-tool-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 34px;
}

.dx-tool-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dx-scale {
    margin-top: auto;
    padding-top: 6px;
}

.dx-scale-bar {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dx-sano), var(--dx-inicial), var(--dx-cavidad));
}

.dx-scale-bar.is-ph {
    background: linear-gradient(90deg, var(--dx-cavidad), var(--dx-inicial), var(--dx-sano));
}

.dx-scale-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-white);
}

.dx-scale-labels span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dx-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.dx-dot.ok    { background: var(--dx-sano); }
.dx-dot.amber { background: var(--dx-inicial); }
.dx-dot.warn  { background: var(--dx-cavidad); }

.dx-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--dx-rosa);
    color: var(--clr-white);
    font-size: 0.92rem;
    line-height: 1.55;
}

.dx-note i {
    color: var(--dx-rosa);
    margin-top: 3px;
}

/* ============================================================
   3. LO QUE RECIBES (informe interactivo)
   ============================================================ */
.dx-report {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 50px;
    align-items: center;
}

.dx-report-text .section-title {
    text-align: left;
    margin: 0;
    max-width: none;
}

/* ---------- Selector de vistas (lista de entregables) ---------- */
.dx-deliverables {
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.dx-deliverable {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-align: left;
    color: var(--clr-dark);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.dx-deliverable .dx-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 1rem;
}

.dx-deliverable-text { flex: 1; }

.dx-deliverable-arrow {
    color: var(--clr-primary);
    opacity: 0.4;
    transition: var(--transition);
}

.dx-deliverable.is-active {
    border-color: var(--clr-primary);
    box-shadow: inset 4px 0 0 var(--clr-primary), 0 8px 22px rgba(12, 90, 135, 0.12);
}

.dx-deliverable.is-active .dx-icon {
    background: var(--clr-primary);
    color: var(--clr-white);
}

.dx-deliverable.is-active .dx-deliverable-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.dx-deliverable:focus-visible,
.dx-legend-btn:focus-visible,
.dx-seg button:focus-visible {
    outline: 3px solid var(--clr-accent);
    outline-offset: 2px;
}

.dx-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: var(--clr-text);
}

.dx-hint i { color: var(--clr-accent); }

/* ---------- Tarjeta del informe ---------- */
.dx-report-mock {
    padding: 28px;
}

.dx-mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.dx-mock-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--clr-white);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dx-mock-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--dx-rosa);
    color: var(--clr-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dx-panel[hidden] { display: none; }

.dx-panel { animation: dx-fade 0.35s ease both; }

@keyframes dx-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.dx-mock-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.dx-mock-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
}

.dx-mock-row .dx-mock-label { margin-bottom: 0; }

.dx-mock-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--clr-white);
}

.dx-mock-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.dx-mock-meter {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
    margin-bottom: 24px;
}

.dx-mock-meter span {
    display: block;
    width: 72%;
    height: 100%;
    background: var(--clr-secondary);
    border-radius: 999px;
    transition: width 0.8s ease;
}

/* ---------- Mapa dental por arcadas ---------- */
.dx-map-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.dx-arches svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dx-arch-label {
    fill: rgba(255, 255, 255, 0.75);
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-anchor: middle;
}

.dx-arch-side {
    fill: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-anchor: middle;
}

.dx-tooth {
    cursor: pointer;
    outline: none;
    transition: opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.dx-tooth-inner {
    transition: transform 0.18s ease;
}

.dx-tooth:hover .dx-tooth-inner,
.dx-tooth.is-selected .dx-tooth-inner {
    transform: scale(1.16);
}

.dx-tooth-hit { fill: transparent; }

.dx-tooth-halo {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 5.5;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.dx-tooth.is-selected .dx-tooth-halo,
.dx-tooth:focus-visible .dx-tooth-halo {
    opacity: 0.95;
}

.dx-tooth-shape {
    stroke: var(--dx-sano);
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.dx-tooth[data-state="i"] .dx-tooth-shape {
    fill: var(--dx-inicial-soft);
    stroke: var(--dx-inicial);
}

.dx-tooth[data-state="c"] .dx-tooth-shape {
    fill: var(--dx-cavidad-soft);
    stroke: var(--dx-cavidad);
}

.dx-tooth-groove {
    fill: none;
    stroke: #C9B88F;
    stroke-width: 1;
    stroke-linecap: round;
}

.dx-lesion-i {
    fill: #C7852B;
    stroke: #E8D9B0;
    stroke-width: 1.2;
}

.dx-lesion-c {
    stroke: #8A5A3C;
    stroke-width: 0.8;
}

.dx-arches.is-filtering .dx-tooth:not(.is-match) { opacity: 0.22; }

/* ---------- Detalle de la pieza seleccionada ---------- */
.dx-tooth-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.dx-tooth-figure {
    width: 72px;
    flex: 0 0 72px;
    aspect-ratio: 1 / 1.12;
    padding: 5px;
    border-radius: 12px;
    border: 2px solid var(--dx-sano);
    background: var(--dx-sano-soft);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.dx-tooth-figure[data-state="i"] { background: var(--dx-inicial-soft); border-color: var(--dx-inicial); }
.dx-tooth-figure[data-state="c"] { background: var(--dx-cavidad-soft); border-color: var(--dx-cavidad); }

.dx-tooth-figure svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dx-tooth-num {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dx-rosa);
}

.dx-tooth-name {
    display: block;
    margin: 2px 0 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--clr-white);
}

.dx-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--clr-white);
    color: var(--clr-dark);
    font-size: 0.75rem;
    font-weight: 700;
}

.dx-state-badge .dx-dot { border-color: transparent; }

.dx-feature .dx-tooth-desc {
    margin: 10px 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ---------- Leyenda (filtra las piezas por estado) ---------- */
.dx-mock-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dx-legend-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: var(--clr-white);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dx-legend-btn:hover { background: rgba(255, 255, 255, 0.18); }

.dx-legend-btn[aria-pressed="true"] {
    background: var(--clr-white);
    border-color: var(--clr-white);
    color: var(--clr-primary-dark);
}

.dx-legend-btn b { font-weight: 800; }

/* Mini diente (leyendas) */
.dx-t {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex: 0 0 24px;
    aspect-ratio: 1 / 1.25;
    padding: 2px 1px;
    border-radius: 5px;
    border: 1.5px solid transparent;
}

.dx-t svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dx-t.s { background: var(--dx-sano-soft);    border-color: var(--dx-sano); }
.dx-t.i { background: var(--dx-inicial-soft); border-color: var(--dx-inicial); }
.dx-t.c { background: var(--dx-cavidad-soft); border-color: var(--dx-cavidad); }

/* ---------- Resumen: gráfico de torta ---------- */
.dx-seg {
    display: inline-flex;
    padding: 4px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.dx-seg button {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--clr-white);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.dx-seg button[aria-pressed="true"] {
    background: var(--clr-white);
    color: var(--clr-primary-dark);
}

.dx-pie-wrap {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.dx-pie {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dx-slice {
    stroke: var(--clr-primary-dark);
    stroke-width: 2;
    stroke-linejoin: round;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.dx-slice--iho   { fill: var(--clr-secondary); }
.dx-slice--resto { fill: rgba(255, 255, 255, 0.24); }
.dx-slice--s     { fill: var(--dx-sano); }
.dx-slice--i     { fill: var(--dx-inicial); }
.dx-slice--c     { fill: var(--dx-cavidad); }

.dx-pie.has-hot .dx-slice:not(.is-hot) { opacity: 0.4; }

.dx-pie-hero {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--clr-white);
    font-variant-numeric: tabular-nums;
}

.dx-pie-hero small {
    font-size: 1.1rem;
    font-weight: 700;
}

.dx-pie-hero-label {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.dx-pie-legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.dx-pie-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -10px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-white);
    transition: background 0.2s ease;
}

.dx-pie-legend li.is-hot { background: rgba(255, 255, 255, 0.14); }

.dx-swatch {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 4px;
}

.dx-swatch--iho   { background: var(--clr-secondary); }
.dx-swatch--resto { background: rgba(255, 255, 255, 0.24); }

.dx-pie-legend .dx-v {
    margin-left: auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dx-mock-foot {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   4. PLAN DE TRATAMIENTO (paso a paso)
   ============================================================ */
.dx-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Línea que une los pasos */
.dx-steps::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 10%;
    right: 10%;
    height: 3px;
    border-radius: 3px;
    background: var(--clr-border);
}

.dx-step {
    position: relative;
    padding: 0 6px;
    text-align: center;
}

.dx-step-circle {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
    color: var(--clr-white);
    font-size: 1.6rem;
    box-shadow: 0 12px 24px rgba(12, 90, 135, 0.25);
    transition: var(--transition);
}

.dx-step:hover .dx-step-circle { transform: translateY(-4px); }

.dx-step-num {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clr-white);
    color: var(--clr-primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(12, 90, 135, 0.22);
}

.dx-step h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--clr-dark);
}

.dx-step p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--clr-text);
}

/* Aviso "en paralelo": versión móvil dentro del paso 4 */
.dx-step-par-m {
    display: none;
    color: var(--clr-accent);
    font-weight: 600;
}

/* Aviso "en paralelo": versión escritorio bajo los pasos 3 y 4 */
.dx-steps-par {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.dx-steps-par span {
    grid-column: 3 / 5;
    padding-top: 12px;
    border-top: 2px dashed var(--clr-accent);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--clr-accent);
}

.dx-step-lead {
    margin: 44px 0 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-primary-dark);
}

.dx-step-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.dx-step-detail-card { padding: 24px 26px; }

.dx-step-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--clr-accent);
    color: var(--clr-white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dx-step-detail-card.is-b .dx-step-tag { background: var(--clr-primary-dark); }

/* ============================================================
   5. PROFESIONALES DENTALES SIEMPRE VISIBLES (sin desplegable)
   ============================================================ */
.clinical-professionals--static {
    border-color: var(--clr-border);
}

.clinical-professionals--static .clinical-professionals-content {
    border-top: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .dx-compare,
    .dx-benefits,
    .dx-tools-grid,
    .dx-report,
    .dx-step-detail {
        grid-template-columns: 1fr;
    }

    .dx-report { gap: 32px; }

    /* Pasos en vertical */
    .dx-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* La línea pasa a ser vertical y une cada círculo con el siguiente */
    .dx-steps::before { display: none; }

    .dx-step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 39px;
        left: 37.5px;
        width: 3px;
        height: calc(100% + 24px);
        border-radius: 3px;
        background: var(--clr-border);
    }

    .dx-step {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        padding: 0;
        text-align: left;
    }

    .dx-step-circle { margin: 0; }
    .dx-step-body { padding-top: 6px; }
    .dx-steps-par { display: none; }
    .dx-step-par-m { display: inline; }
}

@media (max-width: 600px) {
    .dx-compare-card,
    .dx-tool-card,
    .dx-benefit-card,
    .dx-report-mock {
        padding: 22px;
    }

    .dx-compare-card,
    .dx-benefit-card {
        flex-direction: column;
    }

    .dx-why .dx-gains-title { margin-top: 48px; }

    .dx-duration span {
        padding: 12px 18px;
        font-size: 0.88rem;
        border-radius: 18px;
    }

    /* Mapa a todo el ancho y detalle debajo */
    .dx-map-body { grid-template-columns: 1fr; }

    .dx-tooth-detail {
        flex-direction: row;
        align-items: flex-start;
    }

    .dx-pie-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dx-pie {
        max-width: 200px;
        margin: 0 auto;
    }

    .dx-mock-hint { display: none; }

    .dx-step {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
    }

    .dx-step-circle {
        width: 64px;
        height: 64px;
        font-size: 1.3rem;
    }

    .dx-step:not(:last-child)::before {
        top: 32px;
        left: 30.5px;
    }

    .dx-scale-labels { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dx-panel { animation: none; }

    .dx-tooth-inner,
    .dx-mock-meter span {
        transition: none;
    }
}