/* VARIABLES DE DISEÑO */
    :root {
      --bg: #FDFBF8;
      --text: #000000;
      --muted: #4b5563;
      --card: #fff;
      --primary: #cc99cc;
      --primary-600: #b080b0;
      --ring: rgba(204, 153, 204, .25);
      --shadow: 0 10px 30px rgba(0, 0, 0, .08);
      --radius: 14px;
      --container: 1200px;
      --bg-secondary: #f6f8fa
    }

    /* RESET BASICO */
    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      max-width: 100%;
      display: block
    }

    /* LAYOUT Y UTILIDADES */
    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding: 0 20px
    }

    .center {
      text-align: center
    }

    .lead {
      font-size: 1.05rem
    }

    .split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 26px
    }

    .spacer {
      height: 12px
    }

    .visually-hidden {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap
    }

    /* HEADER / NAVIGATION */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: saturate(180%) blur(10px);
      background: rgba(255, 255, 255, .9);
      border-bottom: 1px solid #e5e7eb
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0
    }

    .brand {
      font-weight: 900;
      font-size: 1.35rem;
      letter-spacing: .3px
    }

    .brand b {
      color: var(--primary)
    }

    .nav-links {
      display: flex;
      gap: 22px;
      align-items: center
    }

    .nav-links a {
      color: #374151;
      font-weight: 700
    }

    .nav-links a:hover {
      color: var(--primary)
    }

    .mobile-toggle {
      display: none;
      border: 0;
      background: none;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      font-size: 22px
    }

    .mobile-menu {
      display: none;
      padding: 0 0 16px
    }

    .mobile-menu a {
      display: block;
      padding: 10px 0;
      color: #374151;
      font-weight: 700
    }

    .mobile-menu .btn {
      width: 100%
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 26px;
      border-radius: 12px;
      background: var(--primary);
      color: #fff;
      font-weight: 900;
      letter-spacing: .3px;
      box-shadow: var(--shadow);
      transition: transform .2s, background .2s, box-shadow .2s;
      border: none
    }

    .btn:hover {
      background: var(--primary-600);
      transform: translateY(-1px);
      box-shadow: 0 14px 34px rgba(11, 92, 255, .18)
    }

    .btn:focus-visible {
      outline: 3px solid var(--ring);
      outline-offset: 2px
    }

    .btn:visited {
      color: #fff
    }

    /* SECTIONS */
    section {
      padding: 72px 0
    }

    #services,
    #coverage {
      background: var(--bg-secondary)
    }

    #hero {
      padding: 96px 0
    }

    .hero h1 {
      font-size: clamp(2rem, 4vw + 1rem, 3.2rem);
      line-height: 1.12;
      margin: 0;
      font-weight: 900
    }

    .hero p {
      max-width: 780px;
      margin: 18px auto 0;
      color: var(--muted);
      font-size: 1.075rem
    }

    .media-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin: 28px auto;
      max-width: 920px
    }

    .media img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform .25s, filter .25s
    }

    .media img:hover {
      transform: scale(1.015);
      filter: saturate(1.05)
    }

    /* CARDS */
    .card {
      background: var(--card);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      border: 1px solid #eef2ff;
      transition: all .3s cubic-bezier(.4, 0, .2, 1);
      cursor: pointer
    }

    .card h3 {
      margin: 0 0 6px;
      font-weight: 900
    }

    .muted {
      color: var(--muted)
    }

    .grid {
      display: grid;
      gap: 24px
    }

    .cards-3,
    .cards-4 {
      grid-template-columns: repeat(1, 1fr)
    }

    /* CAROUSEL */
    /* *** MODIFICACIÓN DE TAMAÑO AJUSTADA (MÁS PEQUEÑA Y RECTANGULAR) *** */
    .carousel-container {
      max-width: 380px;
      margin: 30px auto 40px;
      overflow: hidden;
      position: relative;
      border-radius: var(--radius);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .15);
      aspect-ratio: 4/5;
      background: #333
    }

    /* Reducido a 480px de ancho, manteniendo el ratio rectangular de las fotos */
    /* *** MODIFICACIÓN DE TAMAÑO FIN *** */
    .carousel-track {
      display: flex;
      transition: transform .5s cubic-bezier(.25, .46, .45, .94);
      width: 600%;
      height: 100%
    }

    .carousel-slide {
      width: calc(100%/6);
      flex-shrink: 0;
      height: 100%
    }

    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .carousel-dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10
    }

    .dot {
      width: 10px;
      height: 10px;
      background: rgba(255, 255, 255, .5);
      border-radius: 50%;
      cursor: pointer;
      transition: .3s
    }

    .dot.active {
      background: var(--primary);
      transform: scale(1.2);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .8)
    }

    /* TABS */
    .tabs {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      border-bottom: 1px solid #e5e7eb;
      margin-bottom: 18px
    }

    .tab {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 12px 16px;
      font-weight: 900;
      color: #6b7280;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      border-radius: 10px 10px 0 0
    }

    .tab[aria-selected="true"] {
      color: var(--primary);
      border-color: var(--primary);
      background: #f6f9ff
    }

    .tab-panel {
      display: none
    }

    .tab-panel[data-active="true"] {
      display: block
    }

    /* KPI AND CASE STUDY */
    .kpi-grid {
      display: grid;
      gap: 16px;
      margin: 6px 0 26px;
      grid-template-columns: repeat(2, 1fr)
    }

    .kpi {
      background: var(--card);
      border: 1px solid #eef2ff;
      border-radius: var(--radius);
      padding: 16px 18px;
      box-shadow: var(--shadow);
      transition: .2s
    }

    .kpi:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(11, 92, 255, .10)
    }

    .kpi-title {
      color: #64748b;
      font-weight: 700;
      font-size: .9rem
    }

    .kpi-value {
      font-weight: 900;
      font-size: 1.9rem;
      line-height: 1.1;
      margin-top: 4px;
      color: #cc99cc
    }

    .kpi-note {
      color: #64748b;
      font-size: .9rem;
      margin-top: 2px
    }

    .case-card {
      background: var(--card);
      border: 1px solid #eef2ff;
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow)
    }

    .case-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px
    }

    .case-title {
      margin: 0;
      font-size: 1.05rem
    }

    .case-badge {
      background: #eaf1ff;
      color: #cc99cc;
      border: 1px solid #cfe0ff;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: .8rem;
      font-weight: 800
    }

    .case-table-wrap {
      overflow: auto;
      border-radius: 12px;
      border: 1px solid #eef2ff
    }

    .case-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff
    }

    .case-table th,
    .case-table td {
      padding: 12px 14px;
      text-align: left;
      white-space: nowrap
    }

    .case-table thead th {
      background: #f6f9ff;
      color: #334155;
      font-weight: 900;
      border-bottom: 1px solid #e5efff
    }

    .case-table tbody tr:not(:last-child) td {
      border-bottom: 1px solid #f1f5f9
    }

    .case-table tbody tr:hover td {
      background: #fafcff
    }

    .small-note {
      font-size: .9rem;
      margin-top: 10px
    }

    .guarantee {
      margin-top: 16px;
      background: #f8fff3;
      border: 1px solid #daf0c7;
      color: #265d13;
      padding: 12px 14px;
      border-radius: 12px;
      font-weight: 600
    }

    /* FOOTER */
    footer {
      background: #111827;
      color: #e5e7eb;
      padding: 30px 0;
      text-align: center
    }

    footer p {
      margin: 4px 0
    }

    footer .small {
      color: #94a3b8;
      font-size: .9rem
    }

    /* MEDIA QUERIES */
    @media (max-width:720px) {
      .nav-links {
        display: none
      }

      .mobile-toggle {
        display: inline-flex
      }

      .carousel-container {
        max-width: 90%
      }
    }

    @media (min-width:720px) {
      .cards-3,
      .cards-4 {
        grid-template-columns: repeat(2, 1fr)
      }

      .split {
        grid-template-columns: 1fr 1fr
      }

      .media-row {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (min-width:1024px) {
      .cards-3 {
        grid-template-columns: repeat(3, 1fr)
      }

      .cards-4 {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .btn,
      .media img,
      .carousel-track {
        transition: none
      }
    }
  
    /* Scoped form styles */
    #contacto {
      padding: 72px 0;
      background: var(--bg-secondary, #f6f8fa);
    }

    .form-wrapper {
      width: clamp(320px, 60vw, 800px);
      margin: 0 auto;
      background: #fff;
      border: 1px solid #eef2ff;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
      padding: 30px
    }

    .form-wrapper h2 {
      text-align: center;
      font-weight: 900;
      color: #cc99cc;
      margin-bottom: 10px
    }

    .form-wrapper p.lead {
      text-align: center;
      color: #4b5563;
      margin-bottom: 30px
    }

    .form-wrapper .field {
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .form-wrapper label {
      font-weight: 700
    }

    .form-wrapper input,
    .form-wrapper textarea {
      padding: 14px 15px;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      font-size: 1rem;
      font-family: inherit;
      background: #f8fafc
    }

    .form-wrapper input:focus,
    .form-wrapper textarea:focus {
      border-color: #cc99cc;
      outline: none;
      box-shadow: 0 0 0 3px rgba(11, 92, 255, .25)
    }

    .form-wrapper .btn {
      display: block;
      width: 100%;
      padding: 16px;
      border: none;
      border-radius: 12px;
      background: #cc99cc;
      color: #fff;
      font-weight: 900;
      font-size: 1rem;
      cursor: pointer;
      transition: .2s
    }

    .form-wrapper .btn:hover {
      background: #b080b0;
      transform: translateY(-1px)
    }

    .form-wrapper .message-box {
      margin-top: 16px;
      padding: 14px;
      border-radius: 10px;
      text-align: center;
      display: none;
      font-weight: 700
    }

    .form-wrapper .success {
      background: #dcfce7;
      color: #16a34a;
      border: 1px solid #34d399
    }

    .form-wrapper .error {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #f87171
    }

    .form-wrapper small.error-msg {
      color: #ef4444;
      display: none;
      font-size: .85rem
    }
  
    /* --- Compact Services Panel styles --- */
    .services-compact .mini-cards {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr
    }

    .services-compact .mini {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: #fff;
      border: 1px solid #eef2ff;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
    }

    .services-compact .mini h4 {
      margin: 0 0 4px;
      font-size: 1rem;
      font-weight: 900
    }

    .services-compact .mini p {
      margin: 0;
      color: #64748b;
      font-size: .95rem
    }

    .services-compact .mini .emoji {
      font-size: 1.25rem;
      line-height: 1.2
    }

    .services-compact .two-col {
      display: grid;
      gap: 16px;
      margin-top: 10px
    }

    .services-compact .two-col .card {
      margin: 0
    }

    .services-compact ul {
      margin: 8px 0 0 18px
    }

    .services-compact li {
      margin: 4px 0
    }

    .services-compact .kpi-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 12px
    }

    .services-compact .kpi-item {
      background: #f6f9ff;
      border: 1px solid #e5efff;
      border-radius: 12px;
      padding: 10px 12px;
      text-align: center
    }

    .services-compact .kpi-item .v {
      font-weight: 900;
      color: #cc99cc;
      font-size: 1.15rem
    }

    .services-compact .kpi-item .t {
      color: #64748b;
      font-size: .85rem
    }

    .services-compact details {
      margin-top: 14px;
      background: #fff;
      border: 1px solid #eef2ff;
      border-radius: 12px;
      overflow: hidden
    }

    .services-compact summary {
      cursor: pointer;
      font-weight: 900;
      padding: 12px 14px;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .services-compact summary::-webkit-details-marker {
      display: none
    }

    .services-compact summary span {
      color: #cc99cc
    }

    .services-compact .case-table-wrap {
      border: 0;
      border-top: 1px solid #eef2ff;
      border-radius: 0
    }

    @media (min-width:720px) {
      .services-compact .mini-cards {
        grid-template-columns: repeat(3, 1fr)
      }

      .services-compact .two-col {
        grid-template-columns: 1fr 1fr
      }
    }
  
    /* Brand logo sizing */
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      font-size: 1.35rem;
      letter-spacing: .3px;
    }

    .brand-logo {
      height: 36px;
      width: auto;
      display: block;
    }

    @media (max-width:720px) {
      .brand-logo {
        height: 30px;
      }
    }

    /* Ensure buttons use new palette (already via --primary), improve focus ring for contrast */
    .btn:focus-visible {
      outline: 3px solid var(--ring);
      outline-offset: 2px;
    }
  
    /* ==== Violet brand reinforcement ==== */
    header {
      border-bottom: 3px solid var(--primary, #cc99cc);
    }

    #hero {
      background:
        linear-gradient(180deg, rgba(204, 153, 204, 0.22) 0%, rgba(204, 153, 204, 0.08) 40%, rgba(204, 153, 204, 0.00) 100%);
    }

    h2#servicesTitle,
    h2#benefitsTitle,
    h2#coverageTitle {
      position: relative;
      padding-bottom: 10px;
    }

    h2#servicesTitle:after,
    h2#benefitsTitle:after,
    h2#coverageTitle:after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 110px;
      height: 4px;
      border-radius: 999px;
      background: var(--primary, #cc99cc);
      box-shadow: 0 6px 18px rgba(204, 153, 204, .45);
    }

    .btn {
      background: var(--primary-600, #995c99);
      box-shadow: 0 12px 26px rgba(204, 153, 204, .35);
    }

    .btn:hover {
      background: #7a4f7a;
      box-shadow: 0 16px 36px rgba(204, 153, 204, .45);
      transform: translateY(-1px);
    }

    .tab[aria-selected="true"] {
      color: #000;
      border-color: var(--primary, #cc99cc);
      background: rgba(204, 153, 204, .15);
    }

    .dot.active {
      background: var(--primary, #cc99cc);
      box-shadow: 0 0 0 3px rgba(204, 153, 204, .65);
    }

    .kpi .kpi-value {
      color: var(--primary, #cc99cc);
    }

    .case-badge {
      background: #f2e6f2;
      color: #7a4f7a;
      border-color: #e1cfe1;
    }

    .guarantee {
      background: #f7f0f7;
      border-color: #e1cfe1;
      color: #3f2b3f;
    }
  
    :root {
      --accent: #7a4f7a;
      --bg-alt: #f7f0f7;
    }

    /* alternate background for services section to pop */
    section#services {
      background: var(--bg-alt);
      border-top: 1px solid #e7dceb;
      border-bottom: 1px solid #e7dceb;
    }

    /* links hover accent */
    a:hover {
      color: var(--accent);
    }

    /* headings subtle accent */
    h2 span,
    h3 span {
      color: var(--accent);
    }

    /* badges and pills */
    .badge,
    .pill {
      background: #efe2ef;
      color: #3f2b3f;
      border: 1px solid #e1cfe1;
    }