/* P?gina p?blica Mattfuncional - Estilo referencia RedFit */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

body { font-family: 'Montserrat', sans-serif; margin: 0; }
footer { background-color: #141414; color: #ffffff; margin-top: 3rem; padding: 3rem; }
footer .nav-link { font-size: 0.9rem; font-weight: normal; color: rgba(255,255,255,0.9); }
footer .nav-link:hover { color: #85CB46; }

h2 { font-family: 'Montserrat', sans-serif; color: #86CC47; text-transform: uppercase; font-weight: 700; }
.about { background-color: #333333; padding: 2rem; }
.about h2 { font-weight: bold; text-align: center; margin-bottom: 3rem; }
.about img { max-width: 100%; height: auto; border-radius: 4px; }
.about p { color: #ffffff; padding: 1rem; text-align: center; }
.strong-title { color: #85CB46 !important; font-weight: bold; margin-bottom: 0; text-align: center; text-transform: uppercase; font-size: 1.1rem; }

.btn-custom { background-color: #85CB46; border-radius: 0; color: #ffffff !important; font-size: 1.1rem; font-weight: bold; letter-spacing: 1px; padding: 0.5rem 1.5rem; text-transform: uppercase; border: none; text-decoration: none; display: inline-block; }
.btn-custom:hover { background-color: #6fb038; color: #ffffff !important; transition: background-color .3s; }

.carousel-caption { bottom: 0; left: 0; text-align: center; top: 35%; right: 0; }
.carousel-caption h1 { font-size: 1rem; margin-bottom: 1rem; text-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, .9); text-transform: uppercase; color: #fff; font-weight: 700; }
.carousel-description { background-color: rgba(0,0,0,0.5); border-radius: 5px; font-size: 1rem; list-style: none; margin: 0 auto; margin-bottom: 1.5rem; padding: 1rem; width: 100%; max-width: 90%; }
.carousel-description li { color: #fff; margin-bottom: 0.5rem; }
.carousel-description .strong, .carousel-description i.fa-check { color: #85CB46; }
.carousel-indicators { bottom: 1rem; }
.carousel-indicators [data-bs-target] { border: 2px solid #85CB46; border-radius: 50%; height: 14px; width: 14px; background-color: transparent; }
.carousel-indicators .active { background-color: #85CB46; }
/* Transici?n entre slides m?s lenta (aprox. 1 s m?s que por defecto) */
.carousel-fade .carousel-item { transition: opacity 1.5s ease-in-out; }
/* Hero fijo al viewport: sin scroll, video/imagen recortados con object-fit: cover */
#carouselHome { max-height: 100vh; overflow: hidden; }
.carousel-inner { height: 100vh; }
.carousel-item { position: relative; height: 100vh; }
.carousel-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%); pointer-events: none; z-index: 1; }
.carousel-item img, .carousel-item video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Dos videos hero: escritorio 2:1 (>=768px), m?vil 9:16 (<768px) */
.video-hero-desktop { display: none; }
.video-hero-mobile { display: block; }
@media (min-width: 768px) {
  .video-hero-desktop { display: block; }
  .video-hero-mobile { display: none !important; }
}
@media (max-width: 767px) {
  .video-hero-desktop { display: none !important; }
  .video-hero-mobile { display: block; }
}
.carousel-caption { z-index: 2; }
/* Retraso 4 s del m?dulo del primer slide para que se vea la animaci?n del video */
.hero-caption-delay { transition: opacity 0.6s ease; }
.hero-indicators-delay { transition: opacity 0.6s ease; }
body.hero-delay-pending #carouselHome .carousel-item:first-child .hero-caption-delay { opacity: 0; pointer-events: none; }
body.hero-delay-pending #carouselHome .hero-indicators-delay { opacity: 0; pointer-events: none; }

.copy { background-color: #000000; color: #ffffff; padding: 1rem 0; }
.copy small { font-size: 0.9rem; }
.copy-content { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.copy-copyright { text-align: center; }
.copy-dev { text-align: right; width: 100%; }
.copy-dev-logo { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); }
.copy-dev-logo-img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 575px) {
  .copy-dev { text-align: center; justify-content: center !important; }
}
/* Footer: ubicaci?n y iconos m?s grandes */
footer .footer-link { text-decoration: none; transition: color 0.2s; }
footer .footer-link:hover { color: #85CB46 !important; }
footer .footer-icon { font-size: 1.5rem; transition: transform 0.2s; }
footer .footer-icon:hover { color: #85CB46 !important; transform: scale(1.1); }

.nav-header { background: linear-gradient(to bottom, rgba(0,0,0,0.95) 24%, rgba(0,0,0,0) 100%); height: 15vh; min-height: 80px; padding: 1rem 2rem; position: absolute; top: 0; width: 100%; z-index: 999; }
.nav-header .header-publica { width: 100%; }
.nav-header .nav-link { color: #ffffff !important; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; }
.nav-header .nav-link:hover { color: #85CB46 !important; }
.nav-header .nav-link:focus, .nav-header .nav-link:active { color: #85CB46 !important; }
.nav-header .nav-link i { color: inherit; }
.brand-publica { max-width: 180px; height: auto; }
/* Logo + texto MATTFUNCIONAL siempre visible; en m?vil m?s compacto */
.nav-brand-text { font-size: 1.2rem; white-space: nowrap; }
.logo-nav-circle { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); }
.logo-nav-img { width: 100%; height: 100%; object-fit: cover; }
.small-header { background-color: #141414 !important; border-bottom: none; height: 70px !important; min-height: 70px; opacity: 0.98; position: fixed; top: 0; left: 0; transition: 0.3s; width: 100%; z-index: 1000; }
.small-header .brand-publica { max-width: 140px; }
.small-header .logo-nav-circle { width: 42px; height: 42px; }

.nav-mobile-publica { display: block; position: absolute; top: 1.5rem; right: 1.5rem; }
.nav-mobile-publica .btn { background-color: #85CB46; border: none; color: #fff; padding: 0.4rem 0.7rem; }
.offcanvas-publica .offcanvas-header { background-color: #141414; }
.offcanvas-publica .offcanvas-body .btn-custom { text-align: left; margin-bottom: 0.5rem; }

/* Botones de contacto: flex con wrap para evitar superposici?n en pantallas chicas */
.contacto-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.contacto-botones .btn-custom {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Pantallas muy chicas: botones apilados verticalmente para evitar cualquier superposici?n */
@media (max-width: 380px) {
  .contacto-botones {
    flex-direction: column;
    width: 100%;
  }
  .contacto-botones .btn-custom {
    width: 100%;
    max-width: 280px;
  }
}

.wapp { bottom: 20px; height: 56px; width: 56px; position: fixed; right: 20px; z-index: 999; }
.wapp a { display: block; width: 56px; height: 56px; border-radius: 50%; background-color: #25D366; box-shadow: 0 2px 10px rgba(0,0,0,0.3); align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s; }
.wapp a:hover { transform: scale(1.08); }
.wapp img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

@media (min-width: 768px) {
  footer { margin-top: 6rem; }
  .about { padding: 3rem; }
  .carousel-description { font-size: 1.2rem; width: 55%; max-width: 500px; }
  .carousel-caption h1 { font-size: 2.5rem; }
  .nav-desktop-publica { display: flex !important; }
  .nav-mobile-publica { display: none !important; }
  .nav-header { padding: 1.5rem 4rem; height: 18vh; }
  .nav-header .header-publica { justify-content: flex-start; }
  .nav-header .logo-brand-link { margin-right: auto; }
}

/* P?gina Planes: imagen de fondo detr?s del navbar (estilo RedFit) */
.planes-header { position: relative; min-height: 18vh; }
.planes-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18vh;
  background-image: url('/img/publica/contacto%202%20.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.planes-header .nav-header-planes {
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
  padding: 1.5rem 2rem;
  min-height: 80px;
}
.planes-header .nav-header-planes.small-header { background: rgba(20,20,20,0.98); }
.planes-header main { padding-top: 1rem; }
.plan-card { border: 1px solid #eee; border-radius: 0; }
.plan-card-header { background-color: #333; border-bottom: none; }
.plan-card-header .plan-nombre { color: #86CC47; font-weight: bold; text-transform: uppercase; margin: 0; }
.plan-card-body { background-color: #DEDEDE; }
.plan-precio { color: #86CC47; font-size: 2rem; font-weight: bold; text-align: center; margin-bottom: 0.5rem; }
.plan-card-body .plan-descripcion { color: #000 !important; font-size: 0.9rem; margin-bottom: 0; }
.bg-grey-planes { background-color: #DEDEDE; border-radius: 4px; }
.bg-grey-planes .form-control { border-radius: 0; margin-bottom: 0.5rem; }
.dias-horarios-multilinea { white-space: pre-line; }
/* Días y horarios: alineado a la izquierda con los ítems de Servicios (icono + me-2) */
.dias-horarios-lista { padding-left: 0; }
.dias-horarios-lista li { padding-left: 1.75rem; text-align: left; }
.planes-titulo { color: #86CC47; font-size: 2rem; font-weight: bold; text-align: center; margin-bottom: 2rem; text-transform: uppercase; }

/* Alertas públicas (éxito/error) - estilo Mattfuncional */
.alert-publica { padding: 1rem 1.25rem; border-radius: 0; margin-bottom: 1rem; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; }
/* Éxito: verde brillante para contraste sobre fondo oscuro (#333) */
.alert-publica-success { background-color: rgba(0, 0, 0, 0.5); border-left: 4px solid #4ade80; color: #86efac; }
.alert-publica-success i { color: #86efac; }
/* Error: rojo brillante para contraste sobre fondo oscuro (#333) */
.alert-publica-error { background-color: rgba(0, 0, 0, 0.5); border-left: 4px solid #ff5252; color: #ff6b6b; }
.alert-publica-error i { color: #ff6b6b; }

/* Formulario consulta - estilo consistente */
.form-consulta-box { border: 1px solid #ccc; }
.form-consulta-titulo { color: #333; font-weight: 700; text-transform: uppercase; }
.form-consulta .form-control:focus { border-color: #86CC47; box-shadow: 0 0 0 0.2rem rgba(134, 204, 71, 0.25); }
.form-consulta .form-text { font-size: 0.8rem; margin-top: 0.25rem; }
.btn-consulta-submit { margin-top: 0.25rem; }

@media (max-width: 767px) {
  .nav-desktop-publica { display: none !important; }
  /* Logo + texto a la izquierda en m?vil (sin centrado) */
  .nav-header .header-publica { justify-content: flex-start !important; }
  .nav-header .logo-brand-link { margin-right: 0; max-width: 80%; }
  .nav-brand-text { font-size: 0.95rem; }
  /* Formulario consulta en m?vil: m?s padding, bot?n full-width */
  .form-consulta-box { padding: 1.25rem !important; }
  .btn-consulta-submit { width: 100%; }
}

@media (min-width: 768px) {
  .form-consulta-box { min-height: 280px; }
}