:root {
      --bg-lino: #eae6e3;
      --bg-blanco: #ffffff;
      --oliva: #93957d;
      --rosa-empolvado: #d4afa7;
      --negro: #0c0d0c;
      --texto-muted: #555c57;
      
      
      --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

/* ==========================================
       BLOQUE 1B — VIDEO DE PRESENTACIÓN
       ========================================== */

       .bg-hero{
        min-height: 700px;
       }
       .imagen-banner picture {
    top: 0px;
    position: absolute;
}

.imagen-banner-yo {
    position: absolute;
}

@media(max-width:812px){

  .imagen-banner-yo {
    position: absolute;
    display: none;
}

.section-sobre-mi-bg {
    background: #f8e8e2;
}

  .bg-hero{
        min-height: 800px;
        padding-top: 40px;
       }

.imagen-banner picture {
    top: inherit;
    position: relative;
}
}
    .video-section {
      padding: 40px 0 80px 0;
      max-width: 90%;
      margin: 0 auto;
    }
    .video-wrapper {
      background-color: var(--bg-lino);
      position: relative;
      width: 100%;
      max-width: 900px;
      margin: 0 auto 24px auto;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    }
    .video-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
    .video-wrapper:hover .video-thumbnail { transform: scale(1.02); }
    
    .play-btn {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 54px; height: 54px; background-color: var(--rosa-empolvado);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      color: white; font-size: 16px; transition: var(--transition); z-index: 2;
    }
    .video-wrapper:hover .play-btn { background-color: var(--negro); }
    
    .video-transcript {
      max-width: 680px;
      margin: 0 auto;
      color: var(--texto-muted);
      text-align: center;
    }
    .video-support-text {
      display: block; text-align: center; margin-top: 20px;
    }

    /* ==========================================================
     ESTILOS COMPLEMENTARIOS DE ALTA GAMA (LOGOS)
     ========================================================== */
  .osmu-brand-card {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.8);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, filter 0.4s ease;
    
    /* Efecto de desvanecimiento / escala de grises inicial */
    filter: grayscale(100%);
    opacity: 0.65;
    box-sizing: border-box;
    max-width: 150px;
    /* Inyección sutil del reflejo inferior que se ve en la captura */
    -webkit-box-reflect: bottom 2px linear-gradient(transparent, transparent 70%, rgba(255,255,255,0.15));
  }

    .osmu-brand-card img{
      width: 100%;
      height: auto;
    }

  /* Animación fluida al pasar el mouse */
  .osmu-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(24, 42, 33, 0.05);
    filter: grayscale(0%);
    opacity: 1;
  }
  
  /* Sobreescritura temporal de color para el framework de WhatsApp */
  .bg-vio { background-color: #93957d !important; }
  .t-vio { color: #d4afa7 !important; }

  /* ==========================================================
     HOJA DE CLASES CENTRALIZADA (DOCTORA SKINCARE COMPONENT)
     ========================================================== */
  
  /* Variables de Color y Layout */
  .bg-lino-seccion { background-color: #eae6e3; width: 100%; box-sizing: border-box; }
  .t-rosa-decorativo { color: #d4afa7; }
  .t-oliva-cifra { color: #93957d;  font-size: 40px; font-weight: 400;}
  .m-0 { margin: 0; }
  .m-bot-8 { margin-bottom: 8px; }
  .m-top-8 { margin-top: 8px; }
  .gap-30-sk { gap: 30px; }
  .letter-spacing-stat { letter-spacing: 0.05em; margin-top: 4px; font-size: 10px; color: #0c0d0c; }
  
  .cifra-x {
    padding: 40px 0px;
}

  /* Círculos con trazo y color fino orgánico */
  .osmu-icon-circle-thin {
    width: 44px;
    height: 44px;
    background-color: #f5ede9;
    border-radius: 50%;
    color: #cbb4af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .osmu-icon-circle-thin.large {
    width: 52px;
    height: 52px;
  }

  /* Control de tamaño de vectores */
  .fa-svg-icon { width: 20px; height: 20px; }
  .fa-svg-icon-large { width: 22px; height: 22px; }

  /* Filas de la lista izquierda */
  .osmu-cred-row {
    padding: 16px 0;
    border-bottom: 1px solid rgba(12, 13, 12, 0.08) !important;
  }
  .osmu-cred-row.no-border {
    border-bottom: none !important;
  }

  /* Filas internas de la tarjeta de cifras */
  .osmu-stat-row {
    padding: 20px 0;
    border-top: 1px solid rgba(12, 13, 12, 0.06);
  }

  /* Tarjeta blanca de cifras contenida */
  .osmu-authority-card-exact {
    width: 100%;
    border-radius: 20px;
    padding: 32px 40px;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  /* Responsive acoplado al framework */
  @media (max-width: 1024px) {
    .osmu-authority-card-exact {
      max-width: 100%;
      margin-top: 24px;
    }
  }

      /* ==========================================
       BLOQUE 7 — CTA DE CIERRE
       ========================================== */
    .cta-closing { padding: 100px 0; text-align: center; }
    .cta-closing h2 { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px); font-weight: 400; margin-bottom: 12px; }
    .cta-closing p { font-size: 15px; color: var(--texto-muted); margin-bottom: 32px; }
    .cta-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

       /* BOTONES EXACTOS A TU GRÁFICA (Píldoras redondeadas) */
    .btn-osmu {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 28px;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      border-radius: 50px; /* Estilo píldora idéntico a tu web de referencia */
      transition: var(--transition);
      cursor: pointer;
    }
    .btn-oliva { background-color: var(--oliva); color: white; border: 1px solid var(--oliva); }
    .btn-oliva:hover { background-color: var(--negro); border-color: var(--negro); }
    
    .btn-outline-rosa { background-color: transparent; color: var(--rosa-empolvado); border: 1px solid var(--rosa-empolvado); }
    .btn-outline-rosa:hover { background-color: var(--rosa-empolvado); color: white; }


    /* ==========================================================
     HOJA DE SOPORTE PARA ANIMACIÓN MARQUEE INFINITA
     ========================================================== */
  
  /* Contenedor principal con tu color Oliva de marca de fondo */
  .osmu-ticker-wrapper {
    background-color: #93957d; /* Fondo Oliva oficial */
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }

  .osmu-ticker-container {
    display: flex;
    width: 100%;
  }

  .osmu-ticker-track {
    display: flex;
    width: max-content;
    animation: osmuMarqueeContinuous 25s linear infinite; /* Velocidad lenta y fluida */
  }

  /* El truco del duplicado para mantener la distancia uniforme */
  .osmu-ticker-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-right: 40px; /* Sincronizado con tu utilidad gap-40 */
  }

  /* Color exacto de la estrella decorativa */
  .t-rosa-estrella {
    color: #d4afa7;
  }

  /* Evitar saltos de línea del texto */
  .whitespace-nowrap {
    white-space: nowrap;
  }

  /* DETENER ANIMACIÓN EN HOVER (Requerimiento de desarrollo) */
  .osmu-ticker-wrapper:hover .osmu-ticker-track {
    animation-play-state: paused;
  }

  /* KEYFRAMES DE CÁLCULO TRADICIONAL PARA LOOP PERFECTO */
  @keyframes osmuMarqueeContinuous {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0); /* Mueve exactamente la mitad del ancho total */
    }
  }
  .c-editor{
    max-width: 1050px;
    overflow: hidden;
  }

  .el-list {
    margin-bottom: 20px;
    padding-bottom: 20px;
    line-height: 35px;
    font-size: 14px;
}

  .hero-video-section {
  position: relative;
  min-height: 700px;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: rgb(250 246 240 / 84%);
    pointer-events: none;
}

.hero-video-section > .contenedor-seccion {
  position: relative;
  z-index: 2;
}