:root {
  --primary: #0284C7;
  --primary-dark: #0369A1;
  --primary-soft: #FFE4E6;
  --dark: #0F172A;
  --surface: #F8FAFC;
  --secondary: #F8BBD0;
}

* { 
  box-sizing: border-box; 
}

body {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--dark);
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display { 
  font-family: 'Cormorant Garamond', sans-serif; 
}

::selection {
  background: rgba(2, 132, 199, .22);
  color: var(--dark);
}

/* Efectos de fondo */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
#header{
  background: url('img/header.svg') no-repeat center top;
  background-size: cover;
}
.organic {
  border-radius: 58% 42% 54% 46% / 46% 54% 44% 56%;
}

.organic-2 {
  border-radius: 42% 58% 50% 50% / 55% 43% 57% 45%;
}

.scribble {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dot-grid {
  background-image: radial-gradient(rgba(2, 132, 199, .26) 1.4px, transparent 1.4px);
  background-size: 13px 13px;
}

.line-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Componentes */
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  right: -70px;
  top: -70px;
  background: var(--primary-soft);
  opacity: .45;
  z-index: -1;
  transition: transform .45s ease;
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 50px rgba(15, 23, 42, .10);
  border-color: rgba(2, 132, 199, .35);
}

.service-card:hover::before { 
  transform: scale(1.45); 
}

.nav-link { 
  position: relative; 
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 99px;
  transition: width .25s ease;
}

.nav-link:hover::after,
.nav-link.active::after { 
  width: 100%; 
}

/* Animaciones GSAP */
.reveal { 
  opacity: 0; 
  transform: translateY(30px); 
}

.reveal-left { 
  opacity: 0; 
  transform: translateX(-35px); 
}

.reveal-right { 
  opacity: 0; 
  transform: translateX(35px); 
}

/* Imágenes */
.photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.photo-filter {
  filter: saturate(.95) contrast(.98);
}

/* Keyframes */
.float-a { animation: floatA 5s ease-in-out infinite; }
.float-b { animation: floatB 6s ease-in-out infinite; }

@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(8px) rotate(-2deg); }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.faq-item.open .faq-content { grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; }
.faq-item.open .faq-plus { transform: rotate(45deg); }

.whatsapp-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25D366;
  animation: ring 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes ring {
  0% { transform: scale(1); opacity: .35; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}