:root{
      --pink:#e62592;     /* principal */
      --purple:#580b5d;   /* acento */
      --blue:#124874;     /* títulos/cta */
      --sky:#8ccbf7;      /* fondos suaves */
      --ink:#1b1f23;
      --muted:#6c757d;
      --radius:1.2rem;
    }
    html{scroll-behavior:smooth; scroll-padding-top: var(--navH, 84px);}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; color:var(--ink); background:#ffffff}

    h1,h2,h3,.brand{font-family:Poppins,system-ui,Segoe UI,Roboto}
    .section-head small{color:var(--pink); font-weight:800; letter-spacing:.12em; text-transform:uppercase}
    .section-head h2{font-weight:800}

    /* Navbar */
    .navbar{
      background:rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      border-bottom:1px solid rgba(18,72,116,.12);
    }
    .navbar .nav-link{font-weight:700; color:var(--blue)}
    .navbar .nav-link:hover{color:var(--pink)}
    .brand{color:var(--blue); font-weight:900}

    /* Hero limpio con burbujas */
    .hero{
      position:relative; overflow:hidden;
      background:
        radial-gradient(800px 300px at 20% -10%, rgba(140,203,247,.35), transparent 60%),
        radial-gradient(900px 400px at 90% 0%, rgba(230,37,146,.12), transparent 60%),
        linear-gradient(180deg, #f7fbff, #ffffff);
      padding-top:9rem; padding-bottom:6rem;
    }
    .bubble{position:absolute; border-radius:50%; background:rgba(140,203,247,.45); filter:blur(0.5px)}
    .bubble.b1{width:120px;height:120px; left:3%; top:6%}
    .bubble.b2{width:80px;height:80px; left:12%; top:38%}
    .bubble.b3{width:160px;height:160px; right:12%; top:8%; background:rgba(230,37,146,.18)}
    .btn-cta{
      background:var(--blue); color:#fff; border:none; border-radius:999px; padding:.9rem 1.4rem; font-weight:800;
      box-shadow:0 10px 20px rgba(18,72,116,.25)
    }
    .btn-cta:hover{filter:brightness(.95); color:#fff}
    .btn-outline-cta{border:2px solid var(--pink); color:var(--pink); border-radius:999px; font-weight:800}
    .btn-outline-cta:hover{background:var(--pink); color:#fff}

    /* Alternos */
    .alt{background:linear-gradient(180deg,#ffffff,#f5fbff)}
    .alt-2{background:linear-gradient(180deg,#fef7fc,#ffffff)}

    /* Cards */
    .card-glass{
      border:1px solid rgba(18,72,116,.1);
      border-radius:var(--radius);
      box-shadow:0 12px 28px rgba(0,0,0,.06);
      overflow:hidden;
    }
    .icon-pill{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-radius:999px; background:#fff; border:2px solid var(--sky); font-weight:700; color:var(--blue)}

    /* Servicios (accordion) */
    .accordion-button{font-weight:700; color:var(--blue)}
    .accordion-button:not(.collapsed){background:#f0f7ff; color:var(--blue)}

    /* Productos */
    /* Mostrar la imagen completa dentro del alto fijo */
    .prod-card .carousel-item{
      background:#fff; /* para que las franjas se vean limpias */
    }
    .prod-card .carousel-item img{
      height: 260px;         /* ajusta el alto que prefieras */
      width: 100%;
      object-fit: contain;   /* << clave */
    }
    @media (max-width: 576px){
      .prod-card .carousel-item img{ height: 200px; } /* un poco más bajo en móvil */
    }

    .prod-badge{position:absolute; top:10px; left:10px; background:var(--pink); color:#fff; font-weight:800; padding:.2rem .6rem; border-radius:999px}

    /* Galería */
    .gallery-thumb{border-radius:var(--radius); overflow:hidden}

    /* Contacto */
    .map-embed{border:0; width:100%; height:300px; border-radius:var(--radius)}

    /* Footer */
    footer{background:#0f1420; color:#dfe7ef}
    footer a{color:#fff}

    /* WhatsApp fancy (obligatorio) */
    .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}
    .whatsapp-fancy:hover{background:#1ebe5d;transform:scale(1.05)}

    .snackbars {
  width: auto;
  max-width: 280px;
  padding: 9px 16px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  text-align: left;
  background-color: #151515;
  border-radius: 0;
  box-shadow: 0 1px 7px 0 rgba(0,0,0,0.09);
}

.snackbars .icon-xxs {
  font-size: 20px;
}

.snackbars p span:last-child {
  padding-left: 14px;
}

.snackbars-left {
  display: inline-block;
  margin-bottom: 0;
}

.snackbars-right {
  display: inline-block;
  float: right;
  text-transform: uppercase;
}

.snackbars-right:hover {
  text-decoration: underline;
}

@media (min-width: 576px) {
  .snackbars {
    max-width: 380px;
    padding: 14px 17px;
  }
}
/* ===== FORMULARIO DE CONTACTO ===== */
.rd-mailform .form-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.rd-mailform .form-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background-color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.rd-mailform .form-input:focus {
  border-color: #e62592; /* color principal Hermol */
  box-shadow: 0 0 0 0.2rem rgba(230, 37, 146, 0.25);
  outline: none;
}

.rd-mailform .form-label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #888;
  background: #fff;
  padding: 0 6px;
  transition: 0.3s ease all;
  pointer-events: none;
}

/* Label flotante al enfocar o con contenido */
.rd-mailform .form-input:focus + .form-label,
.rd-mailform .form-input:not(:placeholder-shown) + .form-label,
.rd-mailform textarea.form-input:focus + .form-label,
.rd-mailform textarea.form-input:not(:placeholder-shown) + .form-label {
  top: -8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #580b5d; /* morado Hermol */
}

/* Textarea */
.rd-mailform textarea.form-input {
  min-height: 120px;
  resize: vertical;
}

/* Botón */
.rd-mailform .btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-weight: bold;
  background: linear-gradient(90deg, #e62592, #580b5d);
  border: none;
  color: #fff;
  transition: 0.3s;
}

.rd-mailform .btn:hover {
  background: linear-gradient(90deg, #580b5d, #e62592);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Responsivo */
@media (max-width: 576px) {
  .rd-mailform .form-input {
    font-size: 0.95rem;
    padding: 10px 12px;
  }
  .rd-mailform .btn {
    font-size: 0.95rem;
  }
}