/* =========================
     FUENTES LOCALES
  ==========================*/
  /* Fields Display (títulos) */
  @font-face{
    font-family:"Fields Display";
    src:url("../material/fonts/Fields-Font/fontspring-demo-fieldsdisplay-regular.otf") format("opentype");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{font-family:"Fields Display"; src:url("../material/fonts/Fields-Font/fontspring-demo-fieldsdisplay-medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap;}
  @font-face{font-family:"Fields Display"; src:url("../material/fonts/Fields-Font/fontspring-demo-fieldsdisplay-semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap;}
  @font-face{font-family:"Fields Display"; src:url("../material/fonts/Fields-Font/fontspring-demo-fieldsdisplay-bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap;}
  @font-face{font-family:"Fields Display"; src:url("../material/fonts/Fields-Font/fontspring-demo-fieldsdisplay-extrabold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap;}
  @font-face{font-family:"Fields Display"; src:url("../material/fonts/Fields-Font/fontspring-demo-fieldsdisplay-black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap;}

  /* Input Mono (texto) */
  @font-face{
    font-family:"Input Mono";
    src:url("../material/fonts/InputMono/InputMono-Light.ttf") format("truetype");
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{font-family:"Input Mono"; src:url("../material/fonts/InputMono/InputMono-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap;}
  @font-face{font-family:"Input Mono"; src:url("../material/fonts/InputMono/InputMono-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap;}

  /* =========================
     PALETA (según tu muestra)
     PMS 2725 C → #7155FF
     PMS 236  C → #FFA5FF
     PMS 7672 C → #433298 aprox.
     PMS 351  C → #BEFFC8
     Neutral Black C → #323232
  ==========================*/
  :root{
    --p-2725:#7155ff;   /* violeta principal */
    --p-236:#ffa5ff;    /* rosa */
    --s-7672:#433298;   /* índigo profundo */
    --s-351:#beffc8;    /* menta */
    --ink:#323232;      /* neutro negro C */
    --bg:#fbfbff;       /* fondo suave */
  }

  html{scroll-behavior:smooth}
  section{scroll-margin-top:92px}
  body{background:var(--bg); color:var(--ink); font-family:"Input Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-weight:300}

  /* Titulares con Fields Display */
  h1,h2,h3,h4,.display-title{font-family:"Fields Display", ui-serif, Georgia, serif; letter-spacing:.2px}

  /* NAVBAR */
  .navbar{background:linear-gradient(90deg, var(--bg), var(--bg))}
  .navbar .nav-link{color:var(--p-2725)}
  .navbar .nav-link:hover{color:var(--s-7672)}
  .navbar-brand{color:var(--p-2725)!important; font-weight:800; font-family:"Fields Display", serif}

  .navbar-toggler {
    color: var(--p-2725) !important;
    background-color: var(--s-7672);
}

  /* HERO */
  .hero{
    background:
      radial-gradient(1000px 520px at 110% -10%, rgba(255,165,255,.22), transparent 60%),
      radial-gradient(1000px 520px at -10% 110%, rgba(113,85,255,.20), transparent 60%),
      linear-gradient(135deg, var(--bg) 0%, var(--bg) 58%, var(--bg) 100%);
    color:var(--p-2725); padding-top:120px; padding-bottom:110px; position:relative; overflow:hidden;
  }
  .display-title{font-weight:900; font-size:clamp(34px,5vw,56px); line-height:1.05}
  .lead{color:var(--ink)}
  .tag{display:inline-block; border:1px solid rgba(255,255,255,.35); border-radius:40px; padding:.38rem .8rem; margin:.2rem .2rem 0 0}

  /* Botones */
  .btn-pink{background:var(--p-236); color:var(--s-7672); font-weight:800; border:none}
  .btn-pink:hover{background:#ffd6ff; color:#2a1f68}
  .btn-purple{background:var(--p-2725); color:var(--s-351); font-weight:800; border:none}
  .btn-purple:hover{background:var(--s-7672); color:var(--s-351)}
  .btn-ghost{border:1px solid #fff; color:#fff}
  .btn-ghost:hover{background:#fff; color:var(--s-7672)}

  /* Componentes */
  .card-clean{background:#fff; border:1px solid #eee9ff; border-radius:1.2rem; box-shadow:0 10px 30px rgba(67,50,152,.08)}
  .icon-circle{width:54px;height:54px;border-radius:50%;display:inline-grid;place-items:center;background:#f3edff;color:var(--s-7672);font-size:20px;flex:0 0 54px}
  .badge-soft{background:var(--s-351); color:#104d2e; border:1px solid #9aeeb4}

  /* Secciones */
  .section-head small{letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#7d6aff}
  .section-head h2{font-weight:900; color:var(--s-7672)}
  .service-card .h5{color:var(--s-7672); font-weight:800}

  /* WhatsApp fancy (igual que tu estándar) */
  .whatsapp-fancy{position:fixed;bottom:20px;left:20px;background:#25d366;color:#fff;padding:12px 20px;font-weight:bold;border-radius:50px;box-shadow:0 8px 16px rgba(0,0,0,.3);display:flex;gap:10px;align-items:center;z-index:9999;transition:background .3s,transform .2s;text-decoration:none !important}
  .whatsapp-fancy:hover{background:#1ebe5d;transform:scale(1.05)}

    .object-fit-cover{object-fit:cover; object-position:center}

    .img-principal {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

@media (max-width: 576px) { /* Celulares */
  .img-principal {
    width: 300px;
    height: 300px;
  }
}