/* Colores y fuentes del manual de marca */
:root {
  --principal: #1B2F4B;   /* Azul noche */
  --secundario: #17A589;  /* Verde salud */
  --acento: #FF7A59;      /* Coral cariño */
  --fondo: #EEF2F5;       /* Gris niebla */
  --texto: #2E3440;       /* Grafito */
}

body { font-family: 'Open Sans', sans-serif; color: var(--texto); }
h1, h2, h3, .navbar .nav-link { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--principal); }
.navbar .nav-link { font-weight: 600; }

/* Botones */
.btn-marca { background: var(--acento); color: #fff; border-radius: 40px; font-weight: 600; }
.btn-marca:hover { background: var(--principal); color: #fff; }
.btn-outline-marca { border: 2px solid var(--principal); color: var(--principal); border-radius: 40px; font-weight: 600; }

/* Portada con carrusel */
.carousel-item img { height: 520px; object-fit: cover; object-position: right center; }
.texto-slider { position: absolute; top: 50%; left: 11%; transform: translateY(-50%); max-width: 540px; z-index: 2; }
.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-indicators [data-bs-target] { background-color: var(--principal); }

/* Secciones */
.etiqueta { color: var(--secundario); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.card { border-radius: 16px; }
.precio { color: var(--secundario); font-weight: 600; margin: 0; }
.fondo-suave { background: var(--fondo); }
.pie { background: var(--principal); color: #fff; }

/* Botón flotante de WhatsApp */
.whatsapp { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); text-decoration: none; z-index: 1000; }
.whatsapp:hover { color: #fff; background: #1EBE5A; }

/* Celular: la imagen muestra solo el fondo y el texto ocupa todo el ancho */
@media (max-width: 767px) {
  .carousel-item img { height: 560px; object-position: left center; }
  .texto-slider { left: 12%; right: 12%; }
  .texto-slider .btn { margin-bottom: 8px; }
}