/* Ajustes de marca Zero Absoluto sobre la plantilla */

/* Logo: los SVG traen margen interno, se fija la altura */
header #logo img { height: 72px; width: auto; }
header.smaller #logo img { height: 60px; }
@media (max-width: 767px) { header #logo img { height: 52px; } }
.footer-logo { height: 90px; width: auto; margin-left: -20px; }

/* Íconos en círculos y tarjetas (reemplazan las imágenes de la plantilla) */
.feature-icon { line-height: 80px; z-index: 2; }
.feature-icon i { color: #fff; font-size: 38px; vertical-align: middle; }
.card-icon { z-index: 2; }
.card-icon i { font-size: 40px; line-height: 54px; }
.bg-color-3.card-icon i { color: var(--primary-color); }
.bg-color.card-icon i, .bg-color-2.card-icon i { color: #fff; }

/* Fotos del cliente: recorte uniforme */
.card-photo, .equip-photo { width: 100%; height: 280px; object-fit: cover; }
.photo-tall { width: 100%; height: 440px; object-fit: cover; }
.service-photo { width: 100%; height: 460px; object-fit: cover; }
.faq-photo { width: 100%; height: 480px; object-fit: cover; }
.contact-photo { height: 260px; object-fit: cover; }
.gallery-frame img { width: 100%; height: 340px; object-fit: cover; }
@media (max-width: 767px) {
  .photo-tall, .service-photo, .faq-photo { height: 300px; }
}

/* Slider: fotos reales necesitan más contraste para el texto */
.swiper-inner .sw-overlay { background: linear-gradient(180deg, rgba(0, 47, 95, .55), rgba(0, 20, 40, .75)) !important; opacity: 1 !important; }
.btn-main.btn-outline-white { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-main.btn-outline-white:hover { background: #fff; color: var(--primary-color); }

/* Insignia de seguridad */
.safety-badge {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 30px 20px;
  backdrop-filter: blur(4px);
}
.safety-badge i { font-size: 72px; color: var(--secondary-color); }

/* Correo grande en bloques de llamada a la acción */
.cta-mail a, .footer-mail a { color: #fff; word-break: break-word; }
.cta-mail { font-size: 28px; }
.footer-mail { font-size: 18px; }

/* Teléfonos en el bloque de contacto del inicio */
.cta-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 20px; font-weight: 600; }
.cta-phones a { color: #fff; }
.cta-phones i { color: var(--secondary-color); margin-right: 4px; }

/* Rejilla de servicios numerados */
.svc-grid .p-4 { position: relative; }
.svc-num { position: absolute; top: 18px; right: 22px; font-size: 34px; font-weight: 700; color: rgba(var(--secondary-color-rgb), .15); line-height: 1; }

/* Tarjetas de certificaciones */
.cert-card { background: var(--tertiary-color); border: 1px solid rgba(var(--secondary-color-rgb), .18); transition: transform .2s, box-shadow .2s; }
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 47, 95, .12); }
.cert-card i { font-size: 40px; color: var(--secondary-color); }
.cert-card h4 { font-size: 19px; }
.cert-card p { font-size: 14px; }

/* Listas sobre fondo azul */
.bg-color .ul-check li { color: rgba(255, 255, 255, .9); }

/* ---------- Efectos ---------- */

/* 1. Escarcha sobre el banner */
canvas.escarcha { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; }

/* 2. Zoom lento de las fotos del banner (se reinicia en cada foto) */
.swiper-inner { overflow: hidden; }
.kb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); will-change: transform; }
.swiper-slide-active .kb-bg { animation: zoomLento 9s ease-out forwards; }
@keyframes zoomLento { from { transform: scale(1); } to { transform: scale(1.12); } }

/* 3. Barra superior tipo vidrio al bajar */
header.smaller.scroll-light {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(0, 47, 95, .08);
  box-shadow: 0 6px 24px rgba(0, 47, 95, .08);
}

/* 4. Tarjetas que se levantan y fotos que se acercan */
.soft-shadow, .rounded-20px.overflow-hidden.h-100, .gallery-frame {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.card-photo, .equip-photo, .gallery-frame img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .soft-shadow:hover, .rounded-20px.overflow-hidden.h-100:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 47, 95, .16);
  }
  .rounded-20px.overflow-hidden.h-100:hover .card-photo,
  .rounded-20px.overflow-hidden.h-100:hover .equip-photo { transform: scale(1.06); }
  a:hover .gallery-frame { box-shadow: 0 18px 40px rgba(0, 47, 95, .2); }
}

/* 5. Franja de números */
.cifras { background: linear-gradient(120deg, var(--primary-color), var(--secondary-color)); }
.cifra { text-align: center; color: #fff; padding: 10px; }
.cifra h3 { font-size: 54px; line-height: 1; margin-bottom: 6px; color: #fff; }
.cifra h3 small { font-size: 30px; }
.cifra p { margin: 0; color: rgba(255, 255, 255, .85); font-weight: 500; }
@media (max-width: 767px) { .cifra h3 { font-size: 42px; } }

/* Respeta a quien pidió reducir movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .swiper-slide-active .kb-bg { animation: none; }
  .soft-shadow, .rounded-20px.overflow-hidden.h-100, .card-photo, .equip-photo, .gallery-frame img { transition: none; }
}

/* ---------- Responsive: que el texto quepa en cada cuadro ---------- */

/* La plantilla fuerza una sola línea en algunos párrafos de tarjetas */
.padding40 p, .padding40 h4, .p-4 p, .p-4 h4, .pl-100 p, .pl-80 p, .de-step-s1 h4,
.accordion-section-title, .slider-teaser, .subtitle { white-space: normal; }
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }
.de-step-s1 h4 { hyphens: auto; }

/* Medianiles anchos (gx-5) desbordan en pantallas chicas */
@media (max-width: 991px) {
  .row.gx-5 { --bs-gutter-x: 1.5rem; }
  .padding60 { padding: 40px; }
  .feature-icon { line-height: 64px; }
}

/* Tarjetas: misma altura y botón al fondo */
.padding40.flex-grow-1 { display: flex; flex-direction: column; }
.padding40.flex-grow-1 .btn-main { align-self: flex-start; margin-top: auto; }

/* Tabletas y escritorio chico: 4 tarjetas de equipo más angostas */
@media (min-width: 992px) and (max-width: 1199px) {
  .equip-photo { height: 200px; }
  .p-4 h4, .padding40 h4 { font-size: 20px; }
  .padding40 { padding: 30px; }
}

/* Barra superior en tableta */
@media (max-width: 1199px) {
  #topbar .topbar-widget a { font-size: 13px; }
}

/* Teléfono */
@media (max-width: 767px) {
  .slider-title { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.15 !important; }
  .slider-teaser { font-size: 17px !important; line-height: 1.4 !important; }
  .sw-text-wrapper .btn-main { display: inline-block; margin-left: 0 !important; margin-right: 6px; }
  h1 { font-size: 36px; }
  h2 { font-size: 28px; line-height: 1.25; }
  .cta-mail { font-size: clamp(17px, 5.2vw, 26px); }
  .cta-mail i { display: block; margin-bottom: 6px; }
  .safety-badge { padding: 20px; }
  .safety-badge i { font-size: 54px; }
  .padding40 { padding: 28px; }
  .card-photo, .equip-photo { height: 230px; }
  .gallery-frame img { height: 280px; }
  .de-step-s1 { min-height: 0; }
  .subfooter .de-flex { flex-direction: column; gap: 8px; text-align: center; }
  .footer-logo { margin-left: -14px; }
}

/* Crédito del desarrollador */
.credito-flujia a { color: #fff; }
.credito-flujia .fl-a { color: #fff; letter-spacing: .5px; }
.credito-flujia .fl-b { color: #1fd1c8; }