/**
 * Estilos y Micro-Animaciones Premium (Tema Arquitectónico Claro)
 * Hormigón Impreso Alicante - hormigonimpresoalicante.com.es
 */

:root {
  --color-bg-base: #f8fafc;
  --color-bg-surface: #f1f5f9;
  --color-bg-card: #ffffff;
  --color-accent: #ea580c;
  --color-accent-light: #f97316;
  --color-text-main: #0f172a;
  --color-text-body: #334155;
  --color-text-muted: #64748b;
  --border-subtle: #e2e8f0;
  --border-highlight: rgba(234, 88, 12, 0.4);
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-body);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
}

/* Patrón sutil arquitectónico de fondo */
.bg-stone-pattern {
  background-color: #f8fafc;
  background-image: radial-gradient(#cbd5e1 0.85px, transparent 0.85px);
  background-size: 24px 24px;
}

/* Efecto Reveal progresivo al hacer Scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Tarjetas y Paneles Blancos con Bisel y Sombra Suave */
.light-card, .stone-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.light-card:hover, .stone-card:hover {
  border-color: rgba(234, 88, 12, 0.45);
  box-shadow: 0 16px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

/* Insignia / Badge Certificado */
.badge-certified {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

/* Slider Interactivo Antes / Después */
.ba-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  user-select: none;
  cursor: ew-resize;
  border: 2px solid #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

.ba-image-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-image-after-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  border-right: 3px solid #ea580c;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.25);
}

.ba-image-after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ea580c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.6);
  pointer-events: none;
  border: 3px solid #ffffff;
  z-index: 10;
}

/* Pestañas de Trabajos */
.work-tab-btn {
  transition: all 0.2s ease;
}

.work-tab-btn.is-active {
  background-color: #c2410c !important;
  color: #ffffff !important;
  border-color: #c2410c !important;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
}

/* Botón de Acción Principal */
.btn-primary-action {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
  transition: all 0.2s ease;
}

.btn-primary-action:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
  transform: translateY(-2px);
}

/* Scroll Offset Universal: la cabecera fija no tapa secciones ni FAQs */
html {
  scroll-behavior: smooth;
}

section[id], div[id] {
  scroll-margin-top: 5.5rem;
}

/* Submenú Desplegable Servicios Desktop (Blindado contra fallos de Tailwind) */
#servicesDropdownMenu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 18rem !important; /* 288px de ancho fijo, nunca estrecho ni comprimido */
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 50 !important;
}

/* Solo se muestra al pasar el ratón por encima en escritorio o al tener la clase .is-open */
.group:hover > #servicesDropdownMenu,
#servicesDropdownMenu.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Posicionamiento Elevado de Acciones Flotantes (WhatsApp y Flecha por encima de Cookies sin aceptar) */
#waFloatingContainer {
  bottom: 5.5rem !important; /* ~88px: por encima del banner de cookies */
  right: 1.25rem !important;
  z-index: 1000005 !important; /* Estrictamente superior al banner de cookies (999990) */
  gap: 0.75rem !important;
}

@media (max-width: 640px) {
  #waFloatingContainer {
    bottom: 6.25rem !important; /* Altura extra en móviles para no rozar la barra de cookies */
    right: 1rem !important;
  }
}




/* ========================================================================== */
/* BLINDAJE DE CABECERA, LOGOS, ICONOS Y MENÚ PRINCIPAL 100% CENTRADO        */
/* ========================================================================== */

/* Altura y layout de la barra principal */
header .header-row {
  height: 5rem !important; /* 80px */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  header .header-row {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
  }

  .header-brand {
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
  }

  header nav.header-nav {
    justify-self: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important; /* 32px uniforme entre cada elemento */
  }

  .header-actions {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* 1. Proporciones y fondo del Logotipo */
header .w-11 {
  width: 2.75rem !important; /* 44px */
  height: 2.75rem !important;
  background: linear-gradient(135deg, #f97316 0%, #d97706 100%) !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important;
}

header .w-11 svg {
  width: 1.5rem !important; /* 24px */
  height: 1.5rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 2. Control estricto de iconos SVG en cabecera */
header svg.w-4, header button svg.w-4, header a svg.w-4 {
  width: 1rem !important; /* 16px exactos */
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

header svg.w-6, header button svg.w-6 {
  width: 1.5rem !important; /* 24px exactos */
  height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  flex-shrink: 0 !important;
}

/* 3. Botón de Servicios del Menú */
#servicesDropdownBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.5rem 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}

#servicesDropdownBtn:hover {
  color: #c2410c !important;
}

/* Submenú Flotante Centrado bajo "Servicios" */
#servicesDropdownMenu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: 18rem !important; /* 288px */
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 50 !important;
}

.group:hover > #servicesDropdownMenu,
#servicesDropdownMenu.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}