:root {
      --brand: #5a6b5a;
      --brand-soft: #8a9b88;
      --site-text: #333333;
      --site-bg: #f9f8f3;
    }
    body { background: var(--site-bg); font-family: var(--site-font, Arial, sans-serif); }
    .site-header { text-align: center; padding: 40px 20px; background: #e5ece3; }
    .site-header .logo { width: var(--logo-size, 100px); max-width: 40%; height: auto; margin-bottom: 20px; border-radius: var(--logo-radius, 20%); display: inline-block; object-fit: cover; }
    .site-header h1 { font-size: var(--site-title-size, 24px); margin-bottom: 10px; }
    .site-header p { font-size: var(--site-tagline-size, 24px); color: var(--site-text, #555); }
    .site-header p.site-description { font-size: var(--site-description-size, 15px); max-width: 720px; margin: 0 auto; }
    .servicio { opacity: 1; }
    .servicio.layout-stacked { flex-direction: column; }
    .servicio.layout-stacked .texto,
    .servicio.layout-stacked .img-wrap { width: 100%; max-width: 100%; }
    .servicio.layout-centered { justify-content: center; text-align: center; }
    .servicio.layout-centered .texto { text-align: center; }
    .servicio .img-wrap { flex: 0 0 var(--image-width, 40%); max-width: var(--image-width, 40%); }
    .texto { color: var(--site-text); }
    .texto h2 { color: #5a6b5a; font-family: var(--section-font, Arial, sans-serif); font-size: var(--heading-size, 32px); }
    .texto p { font-family: var(--section-font, Arial, sans-serif); font-size: var(--body-size, 18px); }
    .servicio .texto { transform: translate(var(--text-x, 0%), var(--text-y, 0%)); }
    .servicio .img-wrap { transform: translate(var(--image-x, 0%), var(--image-y, 0%)); }
    .boton { background: #5a6b5a; }
    .boton:hover { background: #3e4e3e; color: #fff; }
    @media (max-width: 760px) {
      .servicio,
      .servicio.invertido { flex-direction: column; align-items: stretch; }
      .servicio .texto { width: 100%; max-width: 100%; flex: 0 1 auto; }
      .servicio .img-wrap {
        width: 100%;
        max-width: var(--mobile-image-width, 100%);
        flex: 0 1 auto;
        align-self: center;
      }
      .servicio .texto { transform: translate(var(--mobile-text-x, 0%), var(--mobile-text-y, 0%)); }
      .servicio .img-wrap { transform: translate(var(--mobile-image-x, 0%), var(--mobile-image-y, 0%)); }
      .servicio .texto h2 { font-size: var(--mobile-heading-size, 26px); }
      .servicio .texto p { font-size: var(--mobile-body-size, 16px); }
    }