/* ==========================================================================
   ÍNDICE — assets/css/extras.css
   ==========================================================================
   Todo el CSS "a medida" del sitio (fuera del tema Mobirise/Bootstrap) vive
   acá, con excepción de assets/css/legacy-sections.css (estilos de
   secciones propias de diagnostico.html/PrivacyPolicyTerms.html que el
   tema no trae). Reglas sin prefijo "cid-" son genéricas y se reutilizan
   en varias páginas; las que empiezan por ".cid-XXXXXXXX" apuntan a un id
   de sección específico de Mobirise (ver comentario de cada bloque para
   saber en qué página vive).

   1. Variables de marca (:root)                    — todo el sitio
   2. Botón flotante de WhatsApp                     — todo el sitio
   3. Popup de diagnóstico (encuesta)                — index.html
   4. Footer: contraste de los links sociales        — todo el sitio
   5. Banner de cookies                              — todo el sitio
   6. Scroll reveal (.dr-reveal-up / .dr-reveal-group) — index/servicios/diagnóstico
      (JS: assets/js/scroll-reveal.js — IntersectionObserver)
   7. Botones: glow, relleno de vidrio en outline     — todo el sitio
   8. Tarjetas "¿Por qué hacerlo?" y "Proyectos"      — index.html
   9. Tarjetas "Lo que recibes" (incl. Fractional CMO) — index.html
   10. Fondo ambiente sutil tras tarjetas             — index.html
   11. Fondo "liquid glass" (blobs) en servicios/sobre mí/diagnóstico
   12. Carrusel "¿Cómo lo hacemos?"                   — servicios.html
   13. Acordeón de servicios                          — servicios.html
   14. Texto progresivo (.dr-reveal-line)             — sobremi.html
      (JS inline en sobremi.html, distinto del scroll-reveal genérico)
   15. Hero: entrada animada + fondo "liquid glass"   — index.html
   16. Pantalla de carga inicial (#dr-loader)         — todo el sitio
   17. Navbar: compacta en desktop + pill de vidrio   — todo el sitio
   ========================================================================== */

/* -- Variables de marca ------------------------------------------------------ */
/* Único lugar para tocar el verde de marca y los tonos oscuros reutilizados
   en botones, tarjetas, carrusel y navbar. --dr-green-rgb existe para poder
   usar el verde con distintas opacidades dentro de rgba(). */

:root {
  --dr-green: #9fe870;
  --dr-green-rgb: 159, 232, 112;
  --dr-green-hover: #bcef9c;
  --dr-green-dark: #264d0c;
  --dr-near-black: #1a1a1a;
  --dr-text-on-dark: #d4d4d4;
  --dr-glow: 0 0 16px 2px rgba(var(--dr-green-rgb), 0.55), 0 0 40px 10px rgba(var(--dr-green-rgb), 0.25);
}

/* -- Botón flotante de WhatsApp ------------------------------------------- */

.whatsapp-wrapper {
  position: fixed;
  bottom: 250px;
  right: 23px;
  z-index: 9999;
}

.whatsapp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease;
  width: auto;
  height: auto;
  min-width: 58px;
  min-height: 58px;
}

.whatsapp-button:hover {
  transform: scale(1.1);
}

.whatsapp-button::after {
  content: attr(data-tooltip);
  position: absolute;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: 'Roboto-Thin', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.whatsapp-button:hover::after {
  opacity: 1;
}

.tooltip-top::after {
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-bottom::after {
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-left::after {
  top: 50%;
  right: 120%;
  transform: translateY(-50%);
}

.tooltip-right::after {
  top: 50%;
  left: 120%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .whatsapp-button::after {
    display: none;
  }
}

/* -- Popup de diagnóstico (encuesta) --------------------------------------- */

#dr-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

#dr-popup-overlay.dr-show {
  display: flex;
  animation: drFadeIn 0.3s ease;
}

@keyframes drFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dr-popup-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 460px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  animation: drSlideUp 0.35s ease;
  position: relative;
  font-family: 'Roboto-Thin', sans-serif;
  color: #232323;
}

@keyframes drSlideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.dr-popup-header {
  background: linear-gradient(135deg, #000000 0%, #002411 100%);
  padding: 30px 28px 22px;
  text-align: center;
  color: #fff;
}

.dr-popup-header .dr-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.dr-popup-header h2 {
  font-family: 'SaansCollectionVF-TRIAL', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #fff;
}

.dr-popup-header p {
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.5;
  margin: 0;
}

.dr-popup-body {
  padding: 22px 28px 26px;
  background: #ffffff;
}

.dr-benefit-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dr-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'SaansCollectionVF-TRIAL', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #232323;
  line-height: 1.4;
}

.dr-benefit-list li .dr-check {
  color: var(--dr-green);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.dr-btn-primary {
  display: block;
  width: 100%;
  background: var(--dr-green) !important;
  color: var(--dr-green-dark) !important;
  border: none;
  border-radius: 999px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Roboto-Thin', sans-serif;
  transition: background 0.2s, transform 0.1s;
  text-align: center;
  text-decoration: none !important;
}

.dr-btn-primary:hover {
  background: var(--dr-green-hover) !important;
  transform: translateY(-1px);
}

.dr-btn-skip {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #9a9a9a;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Roboto-Thin', sans-serif;
  width: 100%;
}

.dr-btn-skip:hover {
  color: #6b7280;
}

.dr-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}

.dr-popup-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* -- Footer: contraste de los links sociales ------------------------------ */
/* El footer nuevo (cid-vud3N6XY5U) tiene fondo negro, pero sus links de
   LinkedIn/Instagram/Política de privacidad heredan .text-primary, que en
   este tema es negro (#000 !important) — texto invisible sobre fondo negro.
   Se fuerza blanco con hover en el verde de marca, sin tocar la clase
   .text-primary (usada en otras partes del sitio sobre fondos claros). */

.cid-vud3N6XY5U .row-links-soc a {
  color: #ffffff !important;
}

.cid-vud3N6XY5U .row-links-soc a:hover {
  color: var(--dr-green) !important;
}

/* -- Banner de cookies ------------------------------------------------------ */
/* Reemplaza el plugin de terceros (cookies-alert-plugin), que guardaba el
   consentimiento en una cookie de document.cookie: poco confiable si el
   sitio se abre desde archivo local o el navegador restringe cookies.
   Se guarda en localStorage en su lugar, igual que el popup de diagnóstico. */

#dr-cookie-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  background: #ffffff;
  color: #424a4d;
  padding: 16px 24px;
  font-family: 'Roboto-Thin', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

#dr-cookie-banner.dr-show {
  display: flex;
}

#dr-cookie-banner a {
  color: #424a4d;
  text-decoration: underline;
}

#dr-cookie-banner p {
  margin: 0;
  max-width: 640px;
}

.dr-cookie-btn {
  background: var(--dr-green);
  color: var(--dr-green-dark);
  border: none;
  border-radius: 999px;
  padding: 9px 24px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Roboto-Thin', sans-serif;
  transition: background 0.2s;
  flex-shrink: 0;
}

.dr-cookie-btn:hover {
  background: var(--dr-green-hover);
}

/* -- Scroll reveal: fade + slide al entrar en viewport ---------------------- */
/* .dr-reveal-up es para un bloque suelto (un título, una tarjeta de CTA).
   .dr-reveal-group es para una fila de varios elementos: se le agrega la
   clase a la fila y .dr-reveal-item a cada hijo, y entran en cascada como
   ya hacían las líneas de texto de "Sobre mí" (ver dr-reveal-line). Ambas
   las activa assets/js/scroll-reveal.js agregando .dr-in-view vía
   IntersectionObserver, una sola vez por elemento.
   Va ANTES que las reglas de hover con transform (tarjetas, acordeón) a
   propósito: .dr-reveal-group.dr-in-view .dr-reveal-item también fija
   "transform", y con la misma especificidad que ":hover { transform: scale
   (...) }" gana quien esté más abajo en el archivo — si este bloque
   quedara después, el "transform: translateY(0)" del reveal ya asentado
   le ganaría para siempre al scale del hover. */

.dr-reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dr-reveal-up.dr-in-view {
  opacity: 1;
  transform: translateY(0);
}

.dr-reveal-group .dr-reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.dr-reveal-group.dr-in-view .dr-reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(1) { transition-delay: 0.05s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(2) { transition-delay: 0.12s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(3) { transition-delay: 0.19s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(4) { transition-delay: 0.26s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(5) { transition-delay: 0.33s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(6) { transition-delay: 0.4s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(7) { transition-delay: 0.47s; }
.dr-reveal-group.dr-in-view .dr-reveal-item:nth-child(8) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .dr-reveal-up,
  .dr-reveal-group .dr-reveal-item {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Interacciones — glow en botones, hover en tarjetas, texto progresivo
   ========================================================================== */

/* -- Botones: glow al pasar el mouse -------------------------------------- */
/* .btn ya trae "transition: all .2s ease-in-out" del tema, así que el
   box-shadow anima solo. Se repiten los selectores de variante con
   !important porque mbr-additional.css fija "box-shadow: none" en sus
   propios estados :hover con la misma especificidad. */

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary-outline:hover,
.btn-secondary-outline:focus,
.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-info-outline:hover,
.btn-info-outline:focus,
.btn-black-outline:hover,
.btn-black-outline:focus,
.btn-white-outline:hover,
.btn-white-outline:focus,
.dr-cookie-btn:hover,
.dr-btn-primary:hover {
  box-shadow: var(--dr-glow) !important;
}

/* -- Botón "Conversemos" (diagnostico.html): verde sobre blanco ------------ */
/* .btn-primary solo se usa en esta página; el tema lo trae negro con texto
   blanco por defecto. Se cambia al mismo verde de marca + verde oscuro que
   ya usan los demás botones sobre fondo blanco (popup, banner de cookies). */

.btn-primary,
.btn-primary:active {
  background-color: var(--dr-green) !important;
  border-color: var(--dr-green) !important;
  color: var(--dr-green-dark) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary.active {
  background-color: var(--dr-green-hover) !important;
  border-color: var(--dr-green-hover) !important;
  color: var(--dr-green-dark) !important;
}

/* -- Botones: relleno translúcido en los outline al hover ------------------ */
/* Los outline (fondo transparente por diseño) ganan un relleno translúcido
   con blur al hover, para leerse como vidrio y no solo como un borde con
   glow. */

.btn-secondary-outline,
.btn-primary-outline,
.btn-info-outline,
.btn-black-outline,
.btn-white-outline {
  transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-secondary-outline:hover,
.btn-primary-outline:hover,
.btn-info-outline:hover,
.btn-black-outline:hover,
.btn-white-outline:hover {
  background-color: rgba(var(--dr-green-rgb), 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn-primary:active,
.btn-secondary:active,
.btn-secondary-outline:active,
.btn-primary-outline:active,
.btn-info-outline:active,
.btn-black-outline:active,
.btn-white-outline:active {
  transform: scale(0.97);
}

/* -- Tarjetas: "¿Por qué hacerlo?" y "Proyectos" (index) -------------------- */

.features5 .item-wrapper,
.clients04 .item-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.features5 .item-wrapper:hover,
.clients04 .item-wrapper:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 34px rgba(var(--dr-green-rgb), 0.22), 0 6px 18px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
}

.features5 .item-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* -- "Lo que recibes" (index): solo título en reposo ------------------------ */
/* El tamaño de la tarjeta en reposo (min-height) se conserva igual aunque
   solo se vea el título — es el tamaño que ya estaba bien. La tarjeta de
   imagen "Fractional CMO" comparte estas mismas reglas (mismas clases
   .item-content/.card-title/.card-text); su único código aparte (más abajo)
   es el necesario para la foto de fondo. */

.features036 .item-wrapper {
  min-height: 260px;
  justify-content: center;
  background-color: #000000;
  border: 1px solid rgba(var(--dr-green-rgb), 0.5);
  transition: background-color 0.4s ease, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.25s ease;
}

.features036 .item-wrapper .item-content {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.features036 .item-wrapper .card-title,
.features036 .item-wrapper .card-text {
  text-align: center;
}

.features036 .item-wrapper .card-title {
  color: var(--dr-green);
  transition: color 0.4s ease;
}

.features036 .item-wrapper .card-text {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  color: var(--dr-text-on-dark);
  transition: max-height 0.5s ease, opacity 0.35s ease, margin-top 0.5s ease, color 0.4s ease;
}

/* -- "Lo que recibes" (index): al hover crece un poco y revela el párrafo -- */
/* Fondo pasa de negro a blanco, título y párrafo a negro, se agrega el
   mismo glow de los botones y un scale leve (igual que "¿Por qué hacerlo?"
   y "Proyectos"), todo junto con que el párrafo se despliega. */

.features036 .item-wrapper:hover {
  transform: scale(1.04);
  background-color: #ffffff;
  border-color: rgba(var(--dr-green-rgb), 0.85);
  box-shadow: var(--dr-glow);
  position: relative;
  z-index: 2;
}

.features036 .item-wrapper:hover .card-title,
.features036 .item-wrapper:hover .card-text {
  color: var(--dr-near-black);
}

.features036 .item-wrapper:hover .card-text {
  max-height: 200px;
  opacity: 1;
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .features036 .item-wrapper,
  .features036 .item-wrapper .card-title,
  .features036 .item-wrapper .card-text {
    transition: none;
  }
}

/* -- "Lo que recibes" (index): capa de imagen de "Fractional CMO" --------- */
/* Única diferencia real frente a sus 5 hermanas: tiene una foto de fondo.
   El color del título/texto, el centrado y el glow al hover salen de las
   reglas compartidas de arriba. Acá solo se resuelve la imagen en sí —
   position:absolute + object-fit:cover para que no dicte la altura de la
   tarjeta — y taparla de blanco al hover con una capa ::before, ya que el
   fondo blanco compartido queda debajo de la foto y por sí solo no se ve. */

.features036 .item-wrapper.image-wrapper {
  position: relative;
  overflow: hidden;
}

.features036 .item-wrapper.image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.features036 .item-wrapper.image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.features036 .item-wrapper.image-wrapper:hover::before {
  opacity: 1;
}

.dr-cmo-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.75rem;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.4s ease;
}

.features036 .item-wrapper.image-wrapper:hover .dr-cmo-overlay {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .features036 .item-wrapper.image-wrapper::before,
  .dr-cmo-overlay {
    transition: none;
  }
}

/* -- Fondo ambiente "liquid glass" detrás de las secciones con tarjetas ---- */
/* .list1 (servicios) ya no está acá — tiene su propio bloque más abajo,
   con el mismo look del hero de index en vez de este tinte sutil. */

.cid-vucAQxh6Ct,
.cid-vud27ihrSW {
  position: relative;
  overflow: hidden;
}

.cid-vucAQxh6Ct::before,
.cid-vud27ihrSW::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--dr-green);
  opacity: 0.08;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: dr-blob-a 20s ease-in-out infinite;
}

.cid-vucAQxh6Ct > .container,
.cid-vud27ihrSW > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cid-vucAQxh6Ct::before,
  .cid-vud27ihrSW::before {
    animation: none;
  }
}

/* -- Fondo "liquid glass" arriba de servicios / sobre mí / diagnóstico ----- */
/* Mismo recurso del hero de index (manchas verdes desenfocadas y animadas,
   ver dr-blob-a/dr-blob-b), pero conservando el color de fondo propio de
   cada sección en vez de forzarlo a negro. La opacidad del verde se ajusta
   según ese fondo: los mismos valores del hero sobre el negro de "Sobre mí",
   más sutil sobre los fondos claros de "Servicios" y "Diagnóstico" para no
   restarle contraste al texto. */

.cid-vudb97baoL,
.cid-vudffu74zp,
.cid-vdCEAE4mSR {
  position: relative;
  overflow: hidden;
}

.cid-vudb97baoL::before,
.cid-vudb97baoL::after,
.cid-vudffu74zp::before,
.cid-vudffu74zp::after,
.cid-vdCEAE4mSR::before,
.cid-vdCEAE4mSR::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}

.cid-vudb97baoL::before,
.cid-vudffu74zp::before,
.cid-vdCEAE4mSR::before {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -100px;
  background: var(--dr-green);
  animation: dr-blob-a 18s ease-in-out infinite;
}

.cid-vudb97baoL::after,
.cid-vudffu74zp::after,
.cid-vdCEAE4mSR::after {
  width: 340px;
  height: 340px;
  bottom: -120px;
  right: -80px;
  animation: dr-blob-b 22s ease-in-out infinite;
}

.cid-vudffu74zp::before {
  opacity: 0.28;
}

.cid-vudffu74zp::after {
  background: #ffffff;
  opacity: 0.06;
}

.cid-vudb97baoL::before,
.cid-vdCEAE4mSR::before {
  opacity: 0.18;
}

.cid-vudb97baoL::after,
.cid-vdCEAE4mSR::after {
  background: var(--dr-green);
  opacity: 0.12;
}

.cid-vudb97baoL > .container,
.cid-vudffu74zp > .container,
.cid-vdCEAE4mSR > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cid-vudb97baoL::before,
  .cid-vudb97baoL::after,
  .cid-vudffu74zp::before,
  .cid-vudffu74zp::after,
  .cid-vdCEAE4mSR::before,
  .cid-vdCEAE4mSR::after {
    animation: none;
  }
}

/* -- "¿Cómo lo hacemos?" (servicios.html) — carrusel de pasos -------------- */
/* Fondo oscuro + verde de marca a propósito: marca jerarquía y secuencia
   (01 Diagnóstico -> 02 Estrategia -> 03 Crecimiento) frente al catálogo
   de servicios en acordeón (fondo claro) que va debajo. */

.dr-how-carousel {
  padding-bottom: 56px;
}

.dr-how-card {
  background: var(--dr-near-black);
  border-radius: 2rem;
  padding: 3rem 2.75rem;
  min-height: 240px;
  text-align: left;
}

.dr-how-card .dr-how-number {
  display: block;
  color: var(--dr-green);
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 0.4em;
}

.dr-how-card .card-title {
  color: #ffffff;
  margin-bottom: 0.6em;
}

.dr-how-card .card-text {
  color: var(--dr-text-on-dark);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .dr-how-card {
    /* padding lateral amplio a propósito: deja espacio para que las flechas
       (ver abajo) no queden encima del texto en mobile */
    padding: 2.25rem 3.25rem;
    min-height: 0;
  }
}

.dr-how-carousel-frame {
  position: relative;
}

.dr-how-carousel .carousel-control-prev,
.dr-how-carousel .carousel-control-next {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--dr-green);
  color: var(--dr-green-dark);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}

.dr-how-carousel .carousel-control-prev { left: -14px; }
.dr-how-carousel .carousel-control-next { right: -14px; }

.dr-how-carousel .carousel-control-prev:hover,
.dr-how-carousel .carousel-control-next:hover {
  background-color: var(--dr-green-hover);
}

.dr-how-carousel .carousel-control-prev:hover { transform: translateY(-50%) scale(1.08); }
.dr-how-carousel .carousel-control-next:hover { transform: translateY(-50%) scale(1.08); }

.dr-how-arrow-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .dr-how-carousel .carousel-control-prev,
  .dr-how-carousel .carousel-control-next {
    width: 32px;
    height: 32px;
    opacity: 0.8;
  }

  .dr-how-carousel .carousel-control-prev { left: 8px; }
  .dr-how-carousel .carousel-control-next { right: 8px; }

  .dr-how-arrow-icon {
    width: 13px;
    height: 13px;
  }
}

.dr-how-indicators {
  position: static;
  margin: 24px 0 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dr-how-indicators [data-bs-target] {
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  padding: 6px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 999px;
  background-color: transparent !important;
  color: #9a9a9a;
  font-family: 'SaansCollectionVF-TRIAL', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-indent: 0 !important;
  opacity: 1 !important;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.dr-how-indicators [data-bs-target].active {
  background-color: var(--dr-near-black) !important;
  border-color: var(--dr-near-black) !important;
  color: var(--dr-green);
}

/* -- Lista de servicios (acordeón, servicios.html) -------------------------- */

.accordionStyles .card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.accordionStyles .card:hover {
  transform: scale(1.015);
  box-shadow: 0 10px 30px rgba(var(--dr-green-rgb), 0.18), 0 6px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
}

/* -- Texto progresivo (Sobre mí) -------------------------------------------- */
/* .dr-reveal-line arranca invisible y se revela renglón por renglón cuando
   el contenedor .dr-reveal recibe la clase .dr-in (ver script en sobremi.html) */

.dr-reveal-line {
  display: block;
  margin-bottom: 1em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.dr-reveal-line:last-child {
  margin-bottom: 0;
}

.dr-reveal.dr-in .dr-reveal-line:nth-child(1) { transition-delay: 0.05s; }
.dr-reveal.dr-in .dr-reveal-line:nth-child(2) { transition-delay: 0.35s; }
.dr-reveal.dr-in .dr-reveal-line:nth-child(3) { transition-delay: 0.65s; }
.dr-reveal.dr-in .dr-reveal-line:nth-child(4) { transition-delay: 0.95s; }
.dr-reveal.dr-in .dr-reveal-line:nth-child(5) { transition-delay: 1.25s; }
.dr-reveal.dr-in .dr-reveal-line:nth-child(6) { transition-delay: 1.55s; }

.dr-reveal.dr-in .dr-reveal-line {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dr-reveal-line {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* -- Hero (index): entrada animada por tiempo, no por scroll --------------- */
/* Corre sola al cargar la página (animation, no IntersectionObserver): el
   título, el texto y el botón aparecen en cascada con fade + escala. */

@keyframes dr-hero-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Arranca invisible y en espera: la anima el loader (ver script en
   index.html) agregando .dr-hero-play a <html> justo cuando el overlay
   empieza a desvanecerse, para que el hero se revele animado en vez de
   aparecer ya completo debajo del loader. */
.header19 .content-wrap > h1,
.header19 .content-wrap > p,
.header19 .content-wrap > .mbr-section-btn {
  opacity: 0;
}

html.dr-hero-play .header19 .content-wrap > h1,
html.dr-hero-play .header19 .content-wrap > p,
html.dr-hero-play .header19 .content-wrap > .mbr-section-btn {
  animation: dr-hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.dr-hero-play .header19 .content-wrap > h1 {
  animation-delay: 0.15s;
}

html.dr-hero-play .header19 .content-wrap > p {
  animation-delay: 0.4s;
}

html.dr-hero-play .header19 .content-wrap > .mbr-section-btn {
  animation-delay: 0.65s;
}

@media (prefers-reduced-motion: reduce) {
  .header19 .content-wrap > h1,
  .header19 .content-wrap > p,
  .header19 .content-wrap > .mbr-section-btn {
    animation: none;
    opacity: 1;
  }
}

/* -- Hero (index): fondo "liquid glass" — blobs animados + panel de vidrio - */
/* Dos manchas de color desenfocadas (verde de marca + un realce blanco muy
   sutil) flotan lentamente detrás del texto sobre el fondo negro del hero.
   El texto vive dentro de un panel translúcido con blur, para que se lea
   como vidrio esmerilado sobre ese fondo en movimiento. */

.cid-vuch6xFLVS {
  position: relative;
  overflow: hidden;
}

.cid-vuch6xFLVS::before,
.cid-vuch6xFLVS::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}

.cid-vuch6xFLVS::before {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -100px;
  background: var(--dr-green);
  opacity: 0.28;
  animation: dr-blob-a 18s ease-in-out infinite;
}

.cid-vuch6xFLVS::after {
  width: 340px;
  height: 340px;
  bottom: -120px;
  right: -80px;
  background: #ffffff;
  opacity: 0.06;
  animation: dr-blob-b 22s ease-in-out infinite;
}

.cid-vuch6xFLVS .container {
  position: relative;
  z-index: 1;
}

@keyframes dr-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
}

@keyframes dr-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -30px) scale(1.15); }
}

.header19 .content-wrap {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
}

@media (max-width: 767px) {
  .header19 .content-wrap {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cid-vuch6xFLVS::before,
  .cid-vuch6xFLVS::after {
    animation: none;
  }
}

/* -- Pantalla de carga inicial ---------------------------------------------- */
/* Aparece una sola vez por sesión de navegación (sessionStorage, ver script
   al inicio del <body>): overlay a pantalla completa con el isotipo entrando
   con fade + escala + pulso sobre dos blobs verdes desenfocados (mismo
   lenguaje visual del hero, pero con una animación más corta porque el
   loader solo se ve ~2.6s — con el ciclo lento del hero, 18-22s, el
   movimiento no alcanzaría a notarse en ese tiempo). Luego todo el overlay
   se desvanece revelando la página real. Tiempo total ~1.8s. */

html.dr-loading,
html.dr-loading body {
  overflow: hidden;
}

#dr-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  transition: opacity 1s ease;
}

#dr-loader.dr-loader-hide {
  opacity: 0;
  pointer-events: none;
}

#dr-loader::before,
#dr-loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--dr-green);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

#dr-loader::before {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -90px;
  opacity: 0.35;
  animation: dr-loader-blob-a 6s ease-in-out infinite;
}

#dr-loader::after {
  width: 360px;
  height: 360px;
  bottom: -130px;
  right: -70px;
  opacity: 0.25;
  animation: dr-loader-blob-b 7s ease-in-out infinite;
}

.dr-loader-mark {
  position: relative;
  z-index: 1;
  width: min(78vw, 460px);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  animation:
    dr-loader-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both,
    dr-loader-pulse 1.8s ease-in-out 1s infinite;
}

.dr-loader-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes dr-loader-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dr-loader-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}

@keyframes dr-loader-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.12); }
}

@keyframes dr-loader-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-35px, -25px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .dr-loader-mark {
    animation: none;
    opacity: 1;
    transform: none;
  }

  #dr-loader {
    transition: none;
  }

  #dr-loader::before,
  #dr-loader::after {
    animation: none;
  }
}

/* -- Navbar: más compacta en desktop + pill de vidrio (liquid glass) ------- */
/* Al tope de la página el pill es más opaco (se lee mejor sobre el hero
   oscuro en movimiento); al hacer scroll se aligera y se vuelve más
   translúcido. .dr-scrolled lo agrega assets/js/navbar-scroll.js al hacer
   scroll; el !important es necesario para ganarle al "background:#fff
   !important" que trae el tema base en mbr-additional.css. */

.cid-vucJpCJtcQ .container {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 40px rgba(27, 31, 10, 0.14);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cid-vucJpCJtcQ .navbar.dr-scrolled .container {
  background-color: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(27, 31, 10, 0.06);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cid-vucJpCJtcQ .container {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}

@media (min-width: 992px) {
  .cid-vucJpCJtcQ .navbar {
    min-height: 58px;
  }

  .cid-vucJpCJtcQ .container {
    height: 58px;
    padding: 5px 8px;
  }

  .cid-vucJpCJtcQ .navbar-brand img {
    height: 2rem !important;
  }

  .cid-vucJpCJtcQ .navbar-nav .nav-item .nav-link {
    padding: 10px !important;
    font-size: 1.25rem;
  }
}