/* ==========================================================================
   RETRO — Hoja de marca 2026
   Basado en Manual de Identidad Visual RETRO 2026
   Paleta: Nogal / Bronce / Marfil / Carbón / Arena
   Tipografía: Poppins (títulos, por preferencia directa del cliente,
   reemplaza la serif Cinzel/Trajan Pro del manual original) + Montserrat.
   Se carga después de main.css para sobrescribir el tema del template.
   ========================================================================== */

:root {
  /* ---- Paleta de marca ---- */
  --retro-nogal: #2B1F17;
  --retro-nogal-light: #3d2c1f;
  --retro-bronce: #B88746;
  --retro-bronce-light: #cd9d5e;
  --retro-bronce-dark: #96702f;
  --retro-marfil: #F7F4EF;
  --retro-carbon: #1A1A1A;
  --retro-arena: #D8D1C3;

  /* ---- Tipografía ---- */
  /* nombre de variable heredado ("serif"); ahora apunta a Poppins */
  --retro-serif: "Poppins", sans-serif;
  --retro-sans: "Montserrat", sans-serif;

  /* ---- Sobrescritura de variables del template ---- */
  --urbanist: var(--retro-sans);
  --galada: var(--retro-serif);
  --black-color: var(--retro-nogal);
  --chy-pr-1: var(--retro-bronce);
  --chy-pr-2: var(--retro-bronce);
  --chy-pr-3: var(--retro-bronce);
  --chy-pr-4: var(--retro-bronce);
  --chy-sd-1: var(--retro-arena);
  --chy-h1-color: var(--retro-nogal);
  --chy-h2-color: var(--retro-nogal);
  --chy-p1-color: #4a3f36;
  --chy-gd-1: linear-gradient(32deg, var(--retro-bronce) 20%, var(--retro-arena) 100%);
  --chy-gd-2: linear-gradient(90deg, var(--retro-bronce-dark) 0%, var(--retro-bronce-light) 100%);
}

/* ==========================================================================
   1. TIPOGRAFÍA
   ========================================================================== */

body {
  font-family: var(--retro-sans);
  color: #4a3f36;
}

h1, h2, h3, h4, h5, h6,
.chy-heading-1, .chy-title-1, .chy-title-2, .chy-title-3,
.chy-subtitle-1, .chy-subtitle-2, .chy-subtitle-3, .chy-subtitle-4 {
  font-family: var(--retro-serif) !important;
  color: var(--retro-nogal);
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 600;
}

/* Titulares principales: mayúsculas + tracking amplio, como en el manual */
h1, h2.chy-title-1, h2.chy-title-2, h2.chy-title-3,
.hero-2-title, .hero-2-title-2, .breadcrumb-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.chy-subtitle-1, .chy-subtitle-2, .chy-subtitle-3, .chy-subtitle-4,
.hero-2-subtitle {
  font-family: var(--retro-sans) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--retro-bronce);
}

p, .chy-para-1, .chy-para-2, .chy-para-3, .chy-section-para-1 {
  font-family: var(--retro-sans);
  color: #55483d;
  line-height: 1.75;
}

/* ==========================================================================
   2. BOTONES — precisos, sobrios, sin exceso de curvas
   ========================================================================== */

.chy-pr-btn-3 {
  font-family: var(--retro-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  background: var(--retro-nogal);
  color: var(--retro-marfil);
  border-radius: 2px;
  padding: 16px 28px;
  border: 1px solid var(--retro-nogal);
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}

/* El template rellenaba el 79% del botón con un segundo color incluso en
   reposo (efecto "cortado" en dos tonos). Se quita: un solo color sólido,
   más simple y directo. */
.chy-pr-btn-3::after {
  display: none !important;
}

.chy-pr-btn-3:hover {
  background: var(--retro-bronce);
  border-color: var(--retro-bronce);
  color: var(--retro-marfil);
  letter-spacing: 1.5px;
}

.chy-pr-btn-3.openPopupBtn,
a.chy-pr-btn-3[href="#."] {
  background: transparent;
  border: 1px solid var(--retro-bronce);
  color: var(--retro-nogal);
}

.chy-pr-btn-3.openPopupBtn:hover,
a.chy-pr-btn-3[href="#."]:hover {
  background: var(--retro-bronce);
  color: var(--retro-marfil);
}

.chy-pr-btn-3.openPopupBtn.botonblanco,
a.chy-pr-btn-3.botonblanco[href="#."] {
  background: transparent;
  border: 1px solid var(--retro-marfil);
  color: var(--retro-marfil);
}

.chy-pr-btn-3.openPopupBtn.botonblanco:hover,
a.chy-pr-btn-3.botonblanco[href="#."]:hover {
  background: var(--retro-bronce);
  color: var(--retro-marfil);
}

/* ==========================================================================
   3. HEADER / NAVEGACIÓN
   ========================================================================== */

.chy-header-1-area {
  padding-top: 24px;
}

/* Menú fijo: se mantiene visible mientras el usuario baja por la página */
.header_sticky.sticky {
  background: var(--retro-marfil);
  box-shadow: 0 4px 18px rgba(43, 31, 23, 0.12);
  z-index: 999;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* El logo es un lockup vertical (ícono + RETRO + lema); reducirlo mucho
   deja el lema ilegible. Se mantiene su tamaño normal también en sticky,
   la barra ya queda compacta solo con el padding reducido de arriba. */

/* Iconos sociales dentro del menú de escritorio */
.chy-header-1-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 18px;
}

.chy-header-1-social a {
  color: var(--retro-nogal);
  font-size: 15px;
  transition: color 200ms ease;
}

.chy-header-1-social a:hover {
  color: var(--retro-bronce);
}

.social-white {
  color: var(--retro-marfil) !important;
}
.social-white:hover {
  color: var(--retro-bronce) !important;
}

.chy-header-1-wrap .chy-logo .inicio {
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
}

/* CRÍTICO: el archivo del logo nuevo tiene mayor resolución nativa (700px)
   que el original (280px). El template no traía un límite de ancho porque
   nunca lo necesitó con el logo viejo: hay que fijarlo explícitamente. */
.chy-header-1-wrap .chy-logo img,
.chy-header-1-wrap .chy-logo.inicio img {
  width: 150px;
  max-width: 150px;
  height: auto;
}

.offcanvas-wrap .logo img,
.offcanvas-logo img,
.fullpage-menu-logo-wrap img {
  width: 130px;
  max-width: 130px;
  height: auto;
}

.chy-footer-1-area .chy-logo img,
.chy-footer-1-widget img.footer-logo,
footer img[src*="logo-white"],
footer img[src*="logo-black"] {
  width: 160px;
  max-width: 160px;
  height: auto;
}

/* Red de seguridad general: cualquier <img> de logo no controlado arriba
   nunca debe superar 180px de ancho dentro de cabeceras/menús/pie. */
header img[src*="/logo/"],
.chy-offcanvas-area img[src*="/logo/"],
.fullpage-menu img[src*="/logo/"],
footer img[src*="/logo/"] {
  width: auto;
  max-width: 170px;
  height: auto;
}

/* Páginas internas: el header flota sobre una foto (necesita logo blanco),
   pero al fijarse (sticky) el fondo pasa a ser claro y ese mismo logo
   blanco se vuelve invisible. Se alterna automáticamente por el oscuro. */
.retro-logo-onsticky {
  display: none;
}

.header_sticky.sticky .retro-logo-onphoto {
  display: none;
}

.header_sticky.sticky .retro-logo-onsticky {
  display: inline-block;
}

/* En páginas internas el template pone el texto del menú en blanco
   (pensado para flotar sobre la foto de fondo). Sobre el fondo claro del
   menú fijo (sticky) ese blanco se pierde: se oscurece solo en ese estado. */
.chy-header-1-area:is(.has-inner-page).header_sticky.sticky .chy-main-menu-1 .main-navigation .navbar-nav li a {
  color: var(--retro-nogal) !important;
}

.chy-header-1-area:is(.has-inner-page).header_sticky.sticky .chy-main-menu-1 .main-navigation .navbar-nav li:hover > a,
.chy-header-1-area:is(.has-inner-page).header_sticky.sticky .chy-main-menu-1 .main-navigation .navbar-nav li a:hover {
  color: var(--retro-bronce) !important;
}

.chy-main-menu-1 .main-navigation .navbar-nav > li > a {
  font-family: var(--retro-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--retro-nogal);
}

.chy-main-menu-1 .main-navigation .navbar-nav .dropdown-menu {
  border-radius: 0;
  background: var(--retro-marfil);
  border: 1px solid var(--retro-arena);
  box-shadow: 0 12px 28px rgba(43, 31, 23, 0.12);
}

.chy-main-menu-1 .main-navigation .navbar-nav .dropdown-menu li a {
  font-family: var(--retro-sans);
  font-size: 13px;
  color: var(--retro-nogal);
}

.chy-main-menu-1 .main-navigation .navbar-nav .dropdown-menu li:hover > a,
.chy-main-menu-1 .main-navigation .navbar-nav .dropdown-menu li a:hover {
  color: var(--retro-bronce);
}

/* ==========================================================================
   3b. BREADCRUMB (cabecera de páginas internas: form-cliente, cliente, etc.)
   ========================================================================== */

/* La regla global de .chy-heading-1 pone el título en nogal oscuro, pero
   este título va sobre una foto con superposición oscura y necesita texto
   claro para leerse. Se restaura el blanco aquí, después de esa regla. */
.breadcrumb-title {
  color: var(--retro-marfil) !important;
}

.breadcrumb-list {
  border-color: var(--retro-bronce);
  background: rgba(43, 31, 23, 0.45);
}

.breadcrumb-list a,
.breadcrumb-list span {
  color: var(--retro-marfil);
  font-family: var(--retro-sans);
}

.breadcrumb-list a::before,
.breadcrumb-list a:hover {
  color: var(--retro-bronce);
}

.breadcrumb-list span::before {
  background-color: var(--retro-bronce);
}

/* ==========================================================================
   4. HERO
   ========================================================================== */

/* Se elimina el bloque de color con clip-path del template original:
   no encaja con una estética sobria de despacho jurídico. Tipografía limpia. */
.chy-hero-2-item-content .hero-2-subtitle {
  background: transparent !important;
  clip-path: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  color: var(--retro-bronce) !important;
  font-family: var(--retro-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase;
}

.chy-hero-2-item-content .hero-2-title,
.chy-hero-2-item-content .hero-2-title-2 {
  background: transparent !important;
  clip-path: none !important;
  padding: 0 !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.5px !important;
  color: var(--retro-nogal) !important;
  font-family: var(--retro-serif) !important;
  font-weight: 600 !important;
}

.chy-hero-2-item-content .hero-2-title-2 {
  color: var(--retro-bronce) !important;
}

.chy-hero-2-item-content .hero-2-disc {
  font-family: var(--retro-sans);
  color: #55483d;
  margin-top: 20px;
}

.chy-hero-2-item-content .hero-2-disc b {
  color: var(--retro-nogal);
}

/* ==========================================================================
   5. BARRA DE CONFIANZA / TRUSTED
   ========================================================================== */

.chy-trusted-1-wrap {
  background: var(--retro-nogal);
  border-radius: 2px;
  position: relative;
  border: 1px solid rgba(184, 135, 70, 0.35);
}

.chy-trusted-1-item .title,
.chy-trusted-1-title {
  font-family: var(--retro-sans) !important;
  color: var(--retro-marfil) !important;
  text-transform: none;
  letter-spacing: 0.2px;
}

.chy-trusted-1-title .retro-stat-number {
  font-family: var(--retro-serif);
  font-size: 1.35em;
  color: var(--retro-bronce);
  font-weight: 700;
  /* el template anima con rotación infinita cualquier <span> dentro de
     este título (pensado para íconos decorativos) — se anula aquí */
  animation: none !important;
  transform: none !important;
}

.chy-trusted-1-item {
  border-radius: 0;
  position: relative;
}

/* Separadores finos entre los 4 datos, para que la barra se lea como
   un solo bloque de estadísticas en vez de piezas sueltas */
.chy-trusted-1-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(184, 135, 70, 0.3);
}

@media (max-width: 991px) {
  .chy-trusted-1-item:not(:first-child)::before {
    display: none;
  }
}

/* La tarjeta de calificación conserva su fondo blanco como acento,
   pero con texto oscuro legible (antes quedaba blanco sobre blanco) */
.chy-trusted-1-reating {
  background: var(--retro-marfil);
  border-left: 3px solid var(--retro-bronce);
}

.chy-trusted-1-reating .text {
  font-family: var(--retro-serif) !important;
  color: var(--retro-nogal) !important;
  font-weight: 600 !important;
}

.chy-trusted-1-reating .icon i {
  color: var(--retro-bronce);
}

.chy-trusted-1-progress.RETRO® {
  background: transparent;
}

/* ==========================================================================
   6. TARJETAS DE PERFIL (Inversionista / Prestatario)
   ========================================================================== */

.chy-testimonial-3-item {
  border-radius: 2px;
  border: 1px solid var(--retro-arena);
  background: var(--retro-marfil);
}

.chy-testimonial-3-item:is(.active) {
  background: var(--retro-nogal);
  border-color: var(--retro-nogal);
}

.chy-testimonial-3-item .number {
  color: var(--retro-arena);
  font-family: var(--retro-serif);
}

.chy-testimonial-3-item .subtitle {
  color: var(--retro-bronce);
  font-family: var(--retro-sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 11px;
}

.chy-testimonial-3-item .title,
.chy-testimonial-3-item .title a {
  color: var(--retro-nogal);
  font-family: var(--retro-serif);
}

.chy-testimonial-3-item:is(.active) .title,
.chy-testimonial-3-item:is(.active) .title a,
.chy-testimonial-3-item:is(.active) .disc,
.chy-testimonial-3-item:is(.active) .bio {
  color: var(--retro-marfil);
}

.chy-testimonial-3-item .disc {
  color: #55483d;
  max-width: 100%;
}

/* Botón flecha del template: no aporta (la tarjeta completa ya es
   clickeable vía el título y "Agenda una llamada"). Se quita. */
.chy-testimonial-3-item .p3-btn {
  display: none;
}

/* Las ilustraciones tipo "caricatura" del template no encajan con una marca
   de despacho jurídico/patrimonial. Se ocultan y se sustituyen por una
   marca de agua del isotipo (columna + R) del manual de marca. */
.chy-testimonial-3-item .main-img {
  display: none;
}

.chy-testimonial-3-item {
  position: relative;
  padding: 40px 32px;
  gap: 24px;
  min-height: 220px;
  background-image: url("../img/logo/isotype-watermark-bronze.png");
  background-repeat: no-repeat;
  background-position: right -20px bottom -20px;
  background-size: 140px auto;
}

.chy-testimonial-3-item:is(.active) {
  background-color: var(--retro-nogal);
  background-image: url("../img/logo/isotype-watermark-cream.png");
}

/* ==========================================================================
   7. SOLUCIONES / BENEFICIOS
   ========================================================================== */

.chy-solutions-1-goals-item .icon,
.chy-solutions-2-list li i {
  color: var(--retro-bronce);
}

.chy-solutions-1-goals {
  border-radius: 2px;
}

.chy-solutions-1-goals-item {
  border-radius: 0;
}

.chy-solutions-2-list li {
  font-family: var(--retro-sans);
  color: #4a3f36;
}

.chy-solutions-2-counter-wrap .chy-solutions-2-counter {
  border-left: 1px solid var(--retro-arena);
}

.chy-solutions-2-counter .number {
  font-family: var(--retro-serif);
  color: var(--retro-bronce);
}

/* ==========================================================================
   8. PROCESO (Cómo funciona)
   ========================================================================== */

.project-page-item {
  border-radius: 2px;
}

.project-page-item .main-img {
  border-radius: 2px;
  overflow: hidden;
}

.project-page-item .main-img img {
  filter: blur(3px) brightness(0.85) saturate(0.85);
  transform: scale(1.06);
  transition: filter 400ms ease;
}

.project-page-item .main-img::after {
  background: linear-gradient(180deg, rgba(26, 19, 13, 0.15) 0%, rgba(26, 19, 13, 0.55) 45%, rgba(26, 19, 13, 0.92) 100%);
}

.project-page-item .content-wrap {
  padding-bottom: 60px;
}

.project-page-item .title,
.project-page-item .title a {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.project-page-item .number {
  font-family: var(--retro-serif);
  color: var(--retro-bronce);
  -webkit-text-stroke: 0;
}

.project-page-item .title,
.project-page-item .title a {
  font-family: var(--retro-serif);
  color: var(--retro-marfil);
}

.project-page-item .pp-btn {
  border-radius: 0;
  background: var(--retro-bronce);
}

/* ==========================================================================
   9. FAQ / ACORDEÓN
   ========================================================================== */

.chy-faq-page-accordion .accordion-item {
  border-radius: 0 !important;
  border: 1px solid var(--retro-arena);
  background: var(--retro-marfil);
}

.chy-faq-page-accordion .accordion-button {
  font-family: var(--retro-serif);
  color: var(--retro-nogal);
  background: transparent;
}

.chy-faq-page-accordion .accordion-button .icon,
.chy-faq-page-accordion .accordion-button .icon-2 i {
  color: var(--retro-bronce);
}

.chy-faq-page-accordion .accordion-body {
  font-family: var(--retro-sans);
  color: #55483d;
}

/* ==========================================================================
   10. FORMULARIOS
   ========================================================================== */

input, select, textarea {
  font-family: var(--retro-sans) !important;
  border-radius: 2px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--retro-bronce) !important;
  box-shadow: 0 0 0 1px var(--retro-bronce) !important;
}

/* ==========================================================================
   11. POPUP / MODAL
   ========================================================================== */

.popup-box {
  border-radius: 2px;
  background: var(--retro-marfil);
  border: 1px solid var(--retro-arena);
}

.popup-box h2 {
  font-family: var(--retro-serif);
  color: var(--retro-nogal);
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.chy-footer-1-area {
  background: var(--retro-nogal) !important;
}

.chy-footer-1-widget-title {
  font-family: var(--retro-serif) !important;
  color: var(--retro-marfil) !important;
}

.chy-footer-1-area a,
.chy-footer-1-area p,
.chy-footer-1-area li {
  font-family: var(--retro-sans);
}

.chy-footer-1-social-link a {
  border-radius: 0;
  border: 1px solid var(--retro-bronce);
}

.chy-footer-1-social-link a:hover {
  background: var(--retro-bronce);
}

/* ==========================================================================
   13. ACENTOS DECORATIVOS — rombo bronce (motivo del manual de marca)
   ========================================================================== */

.section-title-wrap .chy-subtitle-1::before,
.section-title-wrap .chy-subtitle-2::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--retro-bronce);
  transform: rotate(45deg);
  margin-right: 10px;
  vertical-align: middle;
}

/* ==========================================================================
   14. APLANADO GENERAL DE ESQUINAS
   Reduce el radio de las tarjetas/contenedores tipo "burbuja" del template,
   sin tocar los elementos circulares intencionales (avatares, iconos redondos).
   ========================================================================== */

.chy-cart-1 input,
.chy-price-1-slider-item,
.chy-price-1-slider-item-img,
.chy-team-1-member .main-img,
.chy-team-slider-1-item,
.chy-team-slider-1-item .main-img,
.chy-solutions-1-img .main-img,
.chy-hero-2-item-img .main-img,
.chy-testimonial-3-item .main-img,
.full-page-socail-link a {
  border-radius: 2px !important;
}

img {
  border-radius: 0;
}

/* ==========================================================================
   15. BOTÓN FLOTANTE DE CONTACTO
   ========================================================================== */

.retro-float-widget {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 9200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.retro-float-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 2px;
  background: var(--retro-nogal);
  color: var(--retro-marfil) !important;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(43, 31, 23, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.retro-float-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(43, 31, 23, 0.35);
  color: var(--retro-marfil);
}

.retro-float-btn .retro-float-tip {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--retro-nogal);
  color: var(--retro-marfil);
  font-family: var(--retro-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.retro-float-btn:hover .retro-float-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.retro-float-invertir { background: var(--retro-bronce); }
.retro-float-prestamo { background: var(--retro-nogal); }
.retro-float-whatsapp { background: #25D366; }
.retro-float-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.retro-float-facebook { background: #1877F2; }
.retro-float-tiktok { background: #010101; }
.retro-float-call { background: #4a3f36; }
.retro-float-email { background: #4a3f36; }

@media (max-width: 767px) {
  .retro-float-widget {
    right: 10px;
    gap: 8px;
  }
  .retro-float-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .retro-float-btn .retro-float-tip {
    display: none;
  }
}

/* ==========================================================================
   16. HERO — marco dorado sobre la foto (reemplaza el marco/washi tape
   del template original, que no encajaba con la marca)
   ========================================================================== */

.chy-hero-2-item-img .main-img {
  /* Sin il-frame (imagen decorativa eliminada), main-img se quedaba sin
     contenido en flujo normal y colapsaba a 0 de ancho (person-img es
     absolute y no cuenta para su tamaño). Se fija el ancho explícito
     que antes tomaba implícitamente del max-width. */
  width: 480px;
}

.chy-hero-2-item-img .main-img .person-img {
  border: 10px solid var(--retro-bronce);
  box-shadow: 0 20px 45px rgba(43, 31, 23, 0.28);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .chy-hero-2-item-img .main-img {
    width: 329px;
  }

  .chy-hero-2-item-img .main-img .person-img {
    border-width: 7px;
  }
}

/* ==========================================================================
   17. TARJETA DE RENTABILIDAD (sección "¿Por qué RETRO®?")
   Reemplaza la imagen genérica del template ("$468 / +4.2%") por la
   rentabilidad real que RETRO® comunica en el resto del sitio (FAQ, etc.).
   ========================================================================== */

.chy-solutions-1-content .inner-div .retro-stat-card {
  background: var(--retro-marfil);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 16px;
  height: 100%;
}

.retro-stat-card .retro-stat-value {
  font-family: var(--retro-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--retro-nogal);
  line-height: 1;
}

.retro-stat-card .retro-stat-value .dash {
  color: var(--retro-bronce-dark);
  margin: 0 1px;
}

.retro-stat-card .retro-stat-value .unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--retro-bronce-dark);
  margin-left: 3px;
}

.retro-stat-card .retro-stat-badge {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 10px;
  border-radius: 2px;
  background: rgba(184, 135, 70, 0.12);
  color: var(--retro-bronce-dark);
  font-family: var(--retro-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.retro-stat-card .retro-stat-label {
  margin: 10px 0 0;
  font-family: var(--retro-sans);
  font-size: 12px;
  line-height: 1.4;
  color: #6b5c4d;
}

/* ==========================================================================
   18. BENEFICIOS — imagen del celular y separación de estadísticas
   El template posiciona la imagen del celular con un offset fijo en
   píxeles pensado para su tamaño a 100%; al reducirse a 40% en tablet
   sobresalía del contenedor oscuro. Se reescala el offset a esos anchos.
   ========================================================================== */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .chy-solutions-2-wrap .hand-img {
    bottom: -40px;
    right: -8px;
  }
}

.chy-solutions-2-counter:not(:last-child) {
  margin-bottom: 45px !important;
}