/* ==========================================================================
   CRITICAL CSS — cerrajerosentarragona.com
   Loaded via <link rel="preload"> + <link rel="stylesheet"> in layout.tsx
   Contains: CSS variables, section backgrounds, hero animations, LCP classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Variables)
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --primary-color:        #c05a0a;   /* main orange */
  --primary-hover:        #a04708;   /* darker orange on hover */
  --primary-light:        #f97316;   /* lighter orange for accents */
  --primary-color-light:  #fff7ed;   /* very light orange tint for bg */
  --text-primary:         #1c1b1b;   /* near-black body text */

  /* Section backgrounds */
  --section-bg-white:     #ffffff;
  --section-bg-light:     #f9f5f0;   /* warm off-white */
  --section-bg-orange-1:  #7c2d12;   /* deep burnt orange */
  --section-bg-orange-2:  #9a3412;   /* mid orange-red */
  --section-bg-orange-3:  #c05a0a;   /* brand orange */

  /* Hero page backgrounds */
  --hero-bg:              #111827;   /* gray-900 */
  --page-bg:              #ffffff;

  /* Button colours */
  --btn-call-bg:        #dc2626;
  --btn-call-hover:     #b91c1c;
  --btn-whatsapp-bg:      #15803d;   /* green-600 */
  --btn-whatsapp-hover:   #166534;
}


/* --------------------------------------------------------------------------
   2. SECTION BACKGROUNDS
   -------------------------------------------------------------------------- */

/* White — clean alternating section */
.section-bg-white {
  background-color: #ffffff;
}

/* Light warm — subtle warm off-white */
.section-bg-light {
  background-color: var(--section-bg-light);
}

/* Dark — deep charcoal for contrast sections */
.section-bg-dark {
  background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
  color: #ffffff;
}

/* Orange — animated warm gradient for CTA / highlight sections */
.section-bg-orange {
  position: relative;
  background: linear-gradient(
    135deg,
    #7c2d12 0%,
    #9a3412 30%,
    #c05a0a 60%,
    #9a3412 100%
  );
  background-size: 300% 300%;
  animation: sectionOrangeShift 10s ease infinite;
  color: #ffffff;
}

@keyframes sectionOrangeShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle shimmer overlay on orange sections */
.section-bg-orange::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 60%
  ),
  radial-gradient(
    ellipse at 80% 50%,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   3. HERO ANIMATED BACKGROUND — inner pages (blog, servicios, zonas, etc.)
      Matches the homepage hero palette: dark with orange undertones
   -------------------------------------------------------------------------- */
.hero-animated-bg-page {
  position: relative;
  background: linear-gradient(
    135deg,
    #111827 0%,
    #1c1917 25%,
    #292524 50%,
    #431407 75%,
    #111827 100%
  );
  background-size: 400% 400%;
  animation: pageHeroShift 14s ease infinite;
  color: #ffffff;
  overflow: hidden;
}

@keyframes pageHeroShift {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

/* Radial glow on inner page heroes */
.hero-animated-bg-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 15% 50%,
      rgba(192, 90, 10, 0.25) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 40% at 85% 50%,
      rgba(124, 45, 18, 0.2) 0%,
      transparent 65%
    );
  pointer-events: none;
  z-index: 0;
}

/* Keep content above the pseudo-element */
.hero-animated-bg-page > * {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   4. LCP TEXT — ensures hero text is styled on first paint before hydration
   -------------------------------------------------------------------------- */
.hero-lcp-text {
  color: #d1d5db;        /* text-gray-300 */
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  /* Note: no mx-auto here — centering handled per-context by parent */
}

.hero-lcp-h1 {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.15;
}


/* --------------------------------------------------------------------------
   5. BUTTON BASE STYLES
   -------------------------------------------------------------------------- */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--btn-call-bg);
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-decoration: none;
}

.btn-call:hover {
  background-color: var(--btn-call-hover);
  transform: translateY(-1px);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--btn-whatsapp-bg);
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-decoration: none;
}

.btn-whatsapp:hover {
  background-color: var(--btn-whatsapp-hover);
  transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   6. ACCESSIBILITY — reduce motion for users who prefer it
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .section-bg-orange,
  .hero-animated-bg-page {
    animation: none;
    background-size: 100% 100%;
  }

  .section-bg-orange {
    background: #9a3412;
  }

  .hero-animated-bg-page {
    background: #111827;
  }
}


/* --------------------------------------------------------------------------
   7. HERO SPLIT — utility for the new split-layout homepage hero
   -------------------------------------------------------------------------- */

/* Ensure the right image column stretches full height */
.hero-split .md\:block {
  min-height: 100%;
}

/* Mobile WhatsApp button — dark outline style */
.hero-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

.hero-wa-btn:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

/* Outline button used in hero "Ver Servicios" */
.hero-outline-btn {
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: transparent;
  text-decoration: none;
}
.hero-outline-btn:hover {
  border-color: rgba(255, 255, 255, 0.85);
}


/* --------------------------------------------------------------------------
   8. HERO BACKGROUND ANIMATIONS — CWV-safe glow orbs
      Uses ONLY transform + opacity — never width/height/position/layout props.
      will-change: transform, opacity declared to allow GPU compositing.
      animation-fill-mode: both prevents flash on load.
      prefers-reduced-motion: disables entirely for accessibility.
   -------------------------------------------------------------------------- */

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  filter: blur(72px);
  animation-fill-mode: both;
}

/* Top-left warm orange orb — slow drift upward */
.hero-orb-1 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(192, 90, 10, 0.35) 0%, transparent 70%);
  top: -100px;
  left: -120px;
  animation: heroOrb1 9s ease-in-out infinite;
}

/* Bottom-right deeper red orb — drifts down-right */
.hero-orb-2 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(124, 45, 18, 0.3) 0%, transparent 70%);
  bottom: 60px;
  right: -60px;
  animation: heroOrb2 13s ease-in-out infinite;
  animation-delay: -5s;
}

/* Mid-left accent — smallest, fastest, most subtle */
.hero-orb-3 {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 70%);
  top: 45%;
  left: 30%;
  animation: heroOrb3 7s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes heroOrb1 {
  0%, 100% { transform: translate(0px, 0px) scale(1);    opacity: 1; }
  33%       { transform: translate(25px, -40px) scale(1.08); opacity: 0.7; }
  66%       { transform: translate(-10px, 20px) scale(0.95); opacity: 0.9; }
}

@keyframes heroOrb2 {
  0%, 100% { transform: translate(0px, 0px) scale(1);     opacity: 1; }
  40%       { transform: translate(-20px, -25px) scale(1.12); opacity: 0.6; }
  70%       { transform: translate(15px, 15px) scale(0.9);  opacity: 0.8; }
}

@keyframes heroOrb3 {
  0%, 100% { transform: translate(0px, 0px) scale(1);   opacity: 1; }
  50%       { transform: translate(18px, -22px) scale(1.15); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; opacity: 0.5; }
}


/* --------------------------------------------------------------------------
   9. HERO V2 — rebuilt architecture, CWV-safe
   -------------------------------------------------------------------------- */

/* Dot-grid decorative background */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(249,115,22,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Badge pulsing availability dot */
.hero-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: heroFeatPulse 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes heroFeatPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.5); opacity: 0.5; }
}

/* Shimmering orange divider line */
.hero-divider {
  height: 3px;
  width: 56px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #c05a0a, #f97316, #c05a0a);
  background-size: 200% 100%;
  animation: heroDividerShimmer 3s ease infinite;
  margin-bottom: 1.5rem;
  will-change: background-position;
}
@keyframes heroDividerShimmer {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

/* Feature chip glassmorphism card */
.hero-feat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.75rem;
  padding: 0.6rem 0.875rem;
  flex: 1;
  min-width: 0;
}

/* Primary CTA — dark red with glow */
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.75rem;
  border-radius: 0.875rem;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 0 0 0 rgba(249,115,22,0);
  will-change: transform;
}
.hero-cta-primary:hover {
  background: #b91c1c;
  box-shadow: 0 4px 24px rgba(249,115,22,0.35);
  transform: translateY(-1px);
}

/* Secondary CTA — outline glass */
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.75rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(255,255,255,0.2);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  will-change: transform;
}
.hero-cta-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-1px);
}

/* Mobile CTA orange */
.hero-cta-mobile-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.75rem;
  border-radius: 0.875rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  will-change: transform;
}
.hero-cta-mobile-call:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

/* Stats bar at bottom of left column */
.hero-stats-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Right image panel overlays */
.hero-img-left-fade {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 140px;
  background: linear-gradient(to right, #0a0f1e 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-img-top-fade {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(10,15,30,0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-img-bottom-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(10,15,30,0.5) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pulse-dot  { animation: none; }
  .hero-divider    { animation: none; }
}


/* --------------------------------------------------------------------------
   10. COOKIE BANNER — slide-up animation (CWV-safe: transform + opacity only)
   -------------------------------------------------------------------------- */
@keyframes cookieSlideUp {
  from { transform: translateX(-50%) translateY(24px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}


/* --------------------------------------------------------------------------
   11. GLOBAL BUTTON UTILITY CLASSES
       Use these instead of repeating long Tailwind chains everywhere.
       All animations: transform + opacity + box-shadow only (CWV-safe).
   -------------------------------------------------------------------------- */

/* Primary — red, for phone/emergency CTAs */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #dc2626;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.875rem 1.625rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  will-change: transform;
  min-height: 44px;
}
.btn-primary:hover {
  background-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220,38,38,0.35);
}
.btn-primary:active { transform: translateY(0) scale(0.97); }

/* Neutral — orange, for navigation/service CTAs */
.btn-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary-color);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.875rem 1.625rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  will-change: transform;
  min-height: 44px;
}
.btn-neutral:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192,90,10,0.3);
}
.btn-neutral:active { transform: translateY(0) scale(0.97); }

/* Outline — bordered, for secondary actions */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8125rem 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid var(--primary-color);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  will-change: transform;
  min-height: 44px;
}
.btn-outline:hover {
  background-color: rgba(192,90,10,0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(192,90,10,0.2);
}
.btn-outline:active { transform: translateY(0) scale(0.97); }

/* Nav chip — white card with orange hover, for quick-link grids */
.btn-nav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #374151;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  will-change: transform;
  min-height: 44px;
}
.btn-nav-chip:hover {
  border-color: #f97316;
  color: #c05a0a;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(249,115,22,0.15);
}
.btn-nav-chip:active { transform: translateY(0) scale(0.98); }

/* WhatsApp green */
.btn-whatsapp-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #15803d;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.875rem 1.625rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  will-change: transform;
  min-height: 44px;
}
.btn-whatsapp-green:hover {
  background-color: #166534;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(21,128,61,0.3);
}
.btn-whatsapp-green:active { transform: translateY(0) scale(0.97); }

/* Disabled state for all btn-* */
.btn-primary:disabled,
.btn-neutral:disabled,
.btn-outline:disabled,
.btn-whatsapp-green:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-neutral, .btn-outline,
  .btn-nav-chip, .btn-whatsapp-green {
    transition: background-color 0.15s ease, color 0.15s ease;
    will-change: auto;
  }
  .btn-primary:hover, .btn-neutral:hover, .btn-outline:hover,
  .btn-nav-chip:hover, .btn-whatsapp-green:hover {
    transform: none;
    box-shadow: none;
  }
}


/* --------------------------------------------------------------------------
   12. STICKY CALL BUTTON animations (CWV-safe: transform + opacity only)
   -------------------------------------------------------------------------- */

/* Accent top line gradient shift */
@keyframes stickyAccentShift {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

/* Pulse ring expanding from behind the phone icon */
@keyframes stickyCallPulse {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.6; }
  70%  { transform: translate(-50%,-50%) scale(2.2); opacity: 0;   }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0;   }
}

/* Shimmer sweep left to right */
@keyframes stickyShimmer {
  0%   { background-position: -100% 0; }
  60%  { background-position: 200% 0;  }
  100% { background-position: 200% 0;  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes stickyCallPulse  { to { opacity: 0; } }
  @keyframes stickyShimmer    { to { } }
  @keyframes stickyAccentShift { to { } }
}