/* styles.css - estilos base y carrusel */

/* Variables */
:root {
  --primary: #0d6efd;
--carousel-max-width: 1100px;   /* ancho máximo del carrusel (ajusta aquí) */
  --carousel-height-desktop: 320px; /* altura en pantallas grandes */
  --carousel-height-tablet: 260px;  /* altura en tablets */
  --carousel-height-mobile: 200px;  /* altura en móviles */
}

/* base */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  color: #222;
  background: #ffffff;
}

/* logo */
.site-logo {
  width: 150px;
  /* <-- nuevo ancho solicitado */
  height: auto;
  display: inline-block;
  max-width: 100%;
}

/* Contenedor centrado del carrusel */
#galeria,
#galeria .carousel,
#serviciosCarousel {
  max-width: var(--carousel-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Forzamos la altura del inner/item solo dentro de #galeria (más específico que regla global) */
#galeria .carousel-inner,
#galeria .carousel-item {
  height: var(--carousel-height-desktop);
}

/* Ajuste de imágenes: que llenen el área sin deformar y respeten la altura */
#galeria .gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  max-height: 100%;
}

/* Ajustes responsive */
@media (max-width: 992px) {
  #galeria .carousel-inner,
  #galeria .carousel-item {
    height: var(--carousel-height-tablet);
  }
}

@media (max-width: 768px) {
  #galeria .carousel-inner,
  #galeria .carousel-item {
    height: var(--carousel-height-mobile);
  }

  /* indicadores y captions no se vean demasiado grandes en móvil */
  #galeria .carousel-caption { font-size: .9rem; padding: .4rem .6rem; }
}


/* WhatsApp floating */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  background: transparent;
  padding: 6px;
}

/* Smooth movement for WhatsApp floating button */
.whatsapp-float {
  transition: bottom 0.25s ease;
}


.whatsapp-icon {
  width: 56px;
  height: 56px;
  display: block;
}

/* small accessibility styles */
a:focus,
button:focus {
  outline: 3px solid rgba(13, 110, 253, 0.18);
  outline-offset: 2px;
}

/* Servicios - cards */
.service-card {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

#servicios h2 {
  font-weight: 600;
}

#servicios p {
  font-size: 0.95rem;
}

/* Contact form */
.contact-form .form-label {
  font-weight: 600;
}

.contact-form .form-control {
  border-radius: .4rem;
}

.contact-form .btn {
  min-width: 160px;
}

.contact-form .invalid-feedback {
  display: block;
}

/* Small screens: compact spacing */
@media (max-width: 576px) {
  .contact-form .form-text {
    font-size: .85rem;
  }
}

/* Status text */
#formStatus {
  min-height: 1.2rem;
}

.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #333;
  color: #fff;
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.toast.success {
  background-color: #198754;
}

.toast.error {
  background-color: #dc3545;
}

.site-footer {
  background-color: #0f172a;
  /* gris oscuro elegante */
  color: #cbd5e1;
  font-size: 14px;
  padding: 20px 0;
}

.site-footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Texto legal */
.footer-left {
  opacity: 0.85;
}

/* Bloque derecho */
.footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-follow {
  font-weight: 500;
  white-space: nowrap;
}

/* Íconos */
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  color: #cbd5e1;
  font-size: 18px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
  color: #38bdf8;
  /* azul sutil */
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .site-footer .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================
   Misión & Visión - Feature Cards
   ========================= */

/* Sección con fondo sutil para separar visualmente */
.section-gap {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  padding-top: 20px;
  padding-bottom: 20px;
  background: linear-gradient(180deg, rgba(245, 247, 250, 1), rgba(255, 255, 255, 1));
}

/* Container interior más estrecho para legibilidad */
.features-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px;
}

/* Card base: más contraste, border-left accent y sombra */
.feature-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(18, 24, 38, 0.06);
  box-shadow: 0 10px 30px rgba(12, 17, 43, 0.06);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: visible;
  min-height: 140px;
}

/* Left accent bar (thin) — visible en desktop */
.feature-card::before {
  content: "";
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--brand-blue, #0e8efb), #0a6fe0);
  margin-right: 14px;
  display: inline-block;
}

/* Variant for orange card */
.feature-card.feature-orange::before {
  background: linear-gradient(180deg, var(--brand-orange, #ff8a00), #ff6a00);
}

/* Icon badge (floating square) */
.feature-badge {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(12, 17, 43, 0.08);
  flex-shrink: 0;
}

/* Badge colors */
.feature-badge.blue {
  background: linear-gradient(180deg, var(--brand-blue, #0e8efb), #0a6fe0);
}

.feature-badge.orange {
  background: linear-gradient(180deg, var(--brand-orange, #ff8a00), #ff6a00);
}

/* Card content: control de ancho y lectura */
.feature-card .card-content {
  flex: 1 1 auto;
  min-width: 0;
  /* importante para texto truncado en flex */
}

.feature-card h3 {
  margin: 0 0 .5rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.feature-card p {
  margin: 0;
  color: #374151;
  line-height: 1.6;
  word-break: break-word;
}

/* Hover effect */
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(12, 17, 43, 0.09);
}

/* Responsive: apilar badge arriba en móvil, quitar border-left pseudo */
@media (max-width: 767.98px) {
  .feature-card {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .feature-card::before {
    display: none;
  }

  .feature-badge {
    width: 64px;
    height: 64px;
    font-size: 24px;
    margin: 0 auto;
  }

  .feature-card .card-content {
    text-align: left;
  }
}

/* Mantiene cards con la misma altura (opcional en desktop) */
@media (min-width: 768px) {
  .feature-card {
    align-items: stretch;
  }

  .feature-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Espaciado entre las columnas en la grid de features */
.features-grid {
  gap: 1.4rem;
}

/*** Servicios ***/
.services-summary {
  background-color: #f8fafc;
  /* suavemente destacado */
  border-radius: 8px;
  border: 1px solid rgba(12, 17, 43, 0.03);
  color: #334155;
  box-sizing: border-box;
  /* importante para padding en móviles */
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* text sizing */
.services-summary .lead-block {
  font-size: 0.98rem;
  line-height: 1.6;
}

/* spacing tweaks */
@media (max-width: 575.98px) {
  .services-summary {
    padding: 14px;
    /* menos padding en móviles */
  }

  .services-summary h3.h4 {
    font-size: 1.05rem;
    /* evitar texto muy grande en móviles */
  }

  .brand-logo {
    width: 46%;
  }
}

/* medium screens */
@media (min-width: 576px) and (max-width: 991.98px) {
  .services-summary {
    padding: 18px;
  }
}

/* desktop */
@media (min-width: 992px) {
  .services-summary {
    padding: 22px 28px;
  }
}

/* small accessibility: ensure headings don't overflow */
.services-summary h3 {
  word-break: break-word;
  hyphens: auto;
}

/* optional: subtle shadow to separate from page */
.services-summary {
  box-shadow: 0 8px 20px rgba(12, 17, 43, 0.04);
}

/* Lista de servicios con iconos */
.services-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.services-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #334155;
}


/* Mobile tweaks */
@media (max-width: 575.98px) {
  .services-list li {
    font-size: 0.92rem;
  }
}

/* ===========================
   Menu (header) - look & UX
   Pegar al final de styles.css
   =========================== */

/* Variables fallback si no existen */
:root{
  --brand-blue: #0e8efb;
  --muted-nav: #556075;
  --nav-bg: #ffffff;
  --nav-border: rgba(0,0,0,0.04);
}

/* Nav base */
.navbar {
  /*background: var(--nav-bg);*/
  background: #ffffff;
  border-bottom: 1px solid var(--nav-border);
  transition: box-shadow .18s ease, background .18s ease;
}

/* Nav links: larger hit area, neutral color */
.navbar .nav-link {
  color: var(--muted-nav);
  padding: .6rem .9rem;
  border-radius: .5rem;
  transition: background .14s ease, color .14s ease, transform .08s ease;
  font-weight: 500;
}

/* Hover: subtle colored background + accent text */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: rgba(14,142,251,0.07); /* faint brand tint */
  color: var(--brand-blue);
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
}

/* Active / current page: underline accent (non-invasive) */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--brand-blue);
  position: relative;
}
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -10px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,var(--brand-blue), #0666c8);
  box-shadow: 0 6px 14px rgba(6,22,200,0.06);
  transform-origin: center;
}

/* Dropdown menu: white card with soft shadow and rounded corners */
.dropdown-menu {
  border-radius: 10px;
  border: 1px solid rgba(12,17,43,0.06);
  box-shadow: 0 12px 38px rgba(6,22,64,0.08);
  padding: .35rem 0;
  min-width: 210px;
}

/* Dropdown items: clear spacing, hover highlight */
.dropdown-item {
  padding: .55rem 1.1rem;
  color: #1f2937;
  transition: background .12s ease, color .12s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(14,142,251,0.06);
  color: var(--brand-blue);
}

/* Make caret slightly more visible */
.dropdown-toggle::after {
  margin-left: .4rem;
  vertical-align: middle;
  transition: transform .18s ease;
}
.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Mobile: expand hit areas inside collapsed menu */
@media (max-width: 991.98px) {
  .navbar .nav-link {
    padding: .85rem 1rem;
  }
  .dropdown-menu {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

/* Toggler (hamburger) color */
.navbar-toggler { border: 0; }
.navbar-light .navbar-toggler-icon {
  filter: invert(35%) sepia(5%) saturate(300%) hue-rotate(170deg) brightness(95%) contrast(95%);
}

/* Focus visible for keyboard users (high contrast outline) */
.navbar .nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 3px solid rgba(14,142,251,0.18);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Small polish: keep nav compact visually */
.navbar .navbar-nav { gap: .25rem; }

.left-text {
  text-align: left;
}

/* ===========================
   OVERRIDE – Misión & Visión
   Cards más anchas + centradas
   =========================== */

/* Contenedor: más ancho y centrado */
.features-inner {
  max-width: 1280px;   /* aumenta el ancho para ~85 caracteres */
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* Cards ocupan todo el ancho disponible de su columna */
.feature-card {
  width: 100%;
  max-width: 100%;
}

/* Mejora la legibilidad del texto largo */
.feature-card p {
  max-width: 85ch;     /* CLAVE: límite óptimo de caracteres */
}

/* En desktop: centra el contenido visualmente */
@media (min-width: 768px) {
  .features-grid {
    justify-content: center;
  }

  .features-grid > .col-md-6 {
    display: flex;
    justify-content: center;
  }

  .feature-card {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet: evita que se vea apretado */
@media (min-width: 768px) and (max-width: 991.98px) {
  .feature-card p {
    max-width: 75ch;
  }
}

/* Móvil: mantiene legibilidad sin forzar ancho */
@media (max-width: 767.98px) {
  .feature-card p {
    max-width: 100%;
  }
}



/* ---------------------------
   Iconos de servicios en cards
   --------------------------- */

.service-icon-wrap {
  /* ancho responsivo: mínimo 72px, preferido 18vw, máximo 160px */
  width: clamp(72px, 18vw, 160px);
  height: auto;
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* centra el wrapper dentro de la tarjeta */
  align-self: center;

  /* imagen sola, sin fondo ni padding */
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;

  margin: 0 auto 14px; /* separa la imagen del título */
  transition: transform .12s ease; /* transición ligera (no hover activo) */
}

.service-icon {
  display: block;
  width: 100%;          /* llena horizontalmente el wrapper */
  height: auto;
  max-height: 220px;    /* evita que imágenes panorámicas suban demasiado */
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  transition: transform .12s ease;
}

/* Mobile: más compacto */
@media (max-width: 575.98px) {
  .service-icon-wrap {
    width: clamp(60px, 24vw, 120px); /* más pequeño en móviles */
    margin-bottom: 10px;
  }
  .service-icon {
    max-height: 120px;
  }
}

/* Asegura que las tarjetas mantengan consistencia */
.row.g-4 > .col-md-4 { display: flex; }
.row.g-4 > .col-md-4 > .service-card { flex: 1 1 auto; display:flex; flex-direction:column; }
.service-card .card-body { display:flex; flex-direction:column; align-items:flex-start; height:100%; }
.service-card .btn { margin-top: auto; width:100%; justify-content:center; }

/* texto alineado a la izquierda */
.left-text { text-align: left !important; width: 100%; }

/* =========================
   OVERRIDE FINAL - Reparaciones / Servicios / Layouts
   Pegar al final de styles.css
   ========================= */

/* Asegura padding consistente en services-summary (desktop/tablet/mobile) */
.services-summary {
  padding: 22px 28px;
  box-sizing: border-box;
  background-color: #f8fafc; /* ya tenías esto; lo reafirmamos */
  border-radius: 8px;
  border: 1px solid rgba(12,17,43,0.03);
  color: #334155;
  margin: 0 auto;
}

/* Reduce padding en móviles (mantener legibilidad) */
@media (max-width: 575.98px) {
  .services-summary { padding: 14px; }
}

/* Lista de servicios: comportamiento normal (cada li con su check + texto) */
.services-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: block; /* forzar bloque para evitar columnas automáticas */
}

/* Cada item: check + texto alineados en la misma línea (o multi-línea natural) */
.services-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #334155;
}

/* Estilo del check (o icono) dentro del li */
.services-list li .service-icon {
  /* pequeño bloque para icono/✓ */
  flex: 0 0 22px;
  width: 22px;
  height: auto;
  color: var(--primary);
  font-weight: 600;
  display: inline-block;
  line-height: 1;
  margin-top: 3px;
}

/* Si usas un sprite o imagen: mantener tamaño controlado */
.services-list li img.service-icon {
  width: 22px;
  height: auto;
  object-fit: contain;
}

/* Asegura que el bloque derecho con títulos (si existe) no se desplace */
.services-summary .right-block,
.services-summary .services-column {
  display: block;
}

/* Restaurar anchos y centrado de features (misión/visión) si se rompió */
.features-inner { max-width: 1100px; margin-left:auto; margin-right:auto; padding: 6px; }
.features-grid { gap: 1.4rem; display: flex; flex-wrap: wrap; }

/* Forzar que las columnas de misión/visión mantengan el centrado y ancho deseado */
.features-grid > .col-12,
.features-grid > .col-md-6 {
  display: flex;
  justify-content: center;
}

/* Cards de features: que ocupen más ancho pero centradas */
.feature-card {
  width: 100%;
  max-width: 720px; /* ajustable: ancho cómodo para ~85 chars */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Limitar la longitud de línea para legibilidad */
.feature-card p { max-width: 85ch; }

/* Si quieres una versión de 1 columna en desktop (opcional)
   - Descomenta las reglas siguientes para forzar 1 columna en >=768px */
/*
@media (min-width: 768px) {
  .features-grid { flex-direction: column; align-items: center; }
  .features-grid > [class*="col-"] { max-width: 100%; flex: 0 0 100%; }
}
*/

/* =========================
   Servicios cards consistency
   ========================= */

/* Forzar que cada tarjeta mantenga la misma altura y botón abajo */
.row.g-4 > .col-md-4 { display: flex; }
.row.g-4 > .col-md-4 > .service-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* card body full height, contenido alineado a la izquierda por defecto */
.service-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  gap: 12px;
  padding: 20px;
}

/* Botón siempre abajo y ancho completo */
.service-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Ajustes para las imágenes de servicio: tratarlas como imágenes (no "iconos") */
/* Wrapper centrado */
.service-icon-wrap {
  width: 100%;          /* dejamos que la imagen controle el ancho, pero centrado */
  display: block;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 0;
  background: transparent; /* sin fondo */
  border-radius: 0;
  overflow: hidden;
}

/* Imagen dentro: tamaño responsivo, ancho máximo fijo en desktop */
.service-icon {
  display: inline-block;
  width: 100%;
  max-width: 160px;    /* el ancho que pediste para desktop */
  height: auto;
  object-fit: contain;
  object-position: center;
  transition: none !important; /* sin hover/zoom */
}

/* En pantallas pequeñas reducir el max-width para que quepa */
@media (max-width: 575.98px) {
  .service-icon { max-width: 120px; }
}

/* Si prefieres que la imagen sea exactamente el ancho de la tarjeta (sin padding),
   puedes cambiar .service-icon { width: 100%; max-width: none; } — ahora lo dejamos controlado. */

/* Asegurar alineación de títulos y párrafos */
.left-text { text-align: left !important; width: 100%; }

/* Pequeña mejora: evitar que elementos flotantes (ej. WhatsApp) oculten contenido al final */
.site-footer { position: relative; z-index: 1; }
.whatsapp-float { z-index: 9998; }

/* Última comprobación: reset de comportamiento accidental */
.row.g-4 > .col-md-4 > .service-card img { display: inline-block; }

/* Fin del override */

/* ---- Sticky footer (flex layout) ----
   Hace que el footer quede siempre al pie de la ventana
   cuando el contenido es corto. No fija el footer sobre
   la UI cuando la página es larga (no tapa contenido).
*/
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* El main existente debe crecer para empujar al footer */
main {
  flex: 1 0 auto; /* crecer y tomar el espacio disponible */
}

/* Asegurar que el footer no se encoja y se muestre completo */
.site-footer {
  flex-shrink: 0;
}

/* Si tu footer partial está envuelto en otro div (ej: data-include),
   asegúrate que .site-footer esté dentro de ese partial y tenga la clase .site-footer */

/* ---------- Menú móvil: permitir wrapping y scroll en dropdown ---------- */

/* En móviles, el dropdown debe ocupar todo el ancho y permitir varias líneas */
@media (max-width: 991.98px) {
  /* Hace que el dropdown sea un panel ancho dentro del menú colapsado */
  .navbar .dropdown-menu {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 8px 30px rgba(6,22,64,0.08);
    border-radius: 10px;
    max-height: 60vh;            /* evita que se desborde fuera de la pantalla */
    overflow-y: auto;            /* permite scroll si hay muchos items */
    padding: .25rem 0;
  }

  /* Permite que los textos se envuelvan en varias líneas */
  .navbar .dropdown-item,
  .navbar .dropdown-menu .dropdown-item {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: .7rem 1.1rem;
  }

  /* Aumenta el área clicable del botón del dropdown (hit target) */
  .navbar .nav-link {
    padding: .85rem 1rem;
  }
}