/* ═══════════════════════════════════════
   PENAGOS MENDOZA — Styles v8 FINAL
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
.font-brand { font-family: Arial, Helvetica, sans-serif !important; }

body {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main {
  animation: pageFadeIn 0.35s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}



/* ══ SCROLL REVEAL ══ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-line {
  height: 2px;
  background: linear-gradient(90deg, #00502e, rgba(0,80,46,0));
  width: 0; transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
}
.reveal-line.visible { width: 100%; }

/* ══ NAV ══ */
#site-header { transition: box-shadow 0.3s ease; }
#site-header.scrolled { box-shadow: 0 2px 40px rgba(0,80,46,0.08); }
#mobile-menu {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
}
#mobile-menu.open { max-height: 480px; opacity: 1; }
.nav-active { color: #00502e !important; font-weight: 700; position: relative; }
.nav-active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: #8a004b; border-radius: 9999px;
}

/* ══ WATERMARK — CSS only via data-watermark ══ */
.has-watermark { position: relative; overflow: hidden; }
.has-watermark::before {
  content: attr(data-watermark);
  position: absolute;
  font-family: 'Newsreader', serif; font-style: italic; font-weight: 700;
  font-size: clamp(5rem,16vw,13rem); line-height: 1;
  color: #00502e; opacity: 0.032;
  right: -1rem; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}

/* ══ HERO TYPOGRAPHIC BG ══ */
.hero-typo-bg {
  position: absolute; inset: 0;
  pointer-events: none; user-select: none; z-index: 0; overflow: hidden;
}
.hero-typo-bg span {
  position: absolute;
  font-family: 'Newsreader', serif; font-style: italic; font-weight: 700;
  color: #00502e; opacity: 0.032; white-space: nowrap; line-height: 1;
}

/* ══ ROTATING TEXT — CSS translateY with mask clip ══ */
.rotating-wrapper {
  display: block;
  overflow: hidden;
  /* Mask fades the very top and bottom edges — hides any peeking text */
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 96%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    black 0%,
    black 96%,
    transparent 100%);
}
.rotating-inner {
  display: flex;
  flex-direction: column;
  -webkit-animation: rotateWords 7s cubic-bezier(0.76,0,0.24,1) infinite;
          animation: rotateWords 7s cubic-bezier(0.76,0,0.24,1) infinite;
  will-change: transform;
}
.rotating-inner span {
  display: block;
  flex-shrink: 0;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 400;
  color: #8a004b;
  line-height: 1;
  padding-bottom: 1.4em; /* generous gap — next word far below visible area */
}
@-webkit-keyframes rotateWords {
  0%,  28% { -webkit-transform: translateY(0);         transform: translateY(0); }
  33%, 61% { -webkit-transform: translateY(-33.333%);  transform: translateY(-33.333%); }
  66%, 94% { -webkit-transform: translateY(-66.666%);  transform: translateY(-66.666%); }
  100%     { -webkit-transform: translateY(0);         transform: translateY(0); }
}
@keyframes rotateWords {
  0%,  28% { transform: translateY(0); }
  33%, 61% { transform: translateY(-33.333%); }
  66%, 94% { transform: translateY(-66.666%); }
  100%     { transform: translateY(0); }
}

/* ══ MARQUEE ══ */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-inner { display:flex; width:max-content; animation:marquee 36s linear infinite; }
.marquee-inner:hover { animation-play-state:paused; }

/* ══ PAGE EXIT ══ */
.page-exit { opacity:0; transform:translateY(-4px); transition:opacity 0.22s ease, transform 0.22s ease; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(135deg, #00502e 0%, #006b3f 100%);
  color: #fff; padding: 0.85rem 1.75rem; border-radius: 9999px;
  font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 700;
  text-decoration: none; border: none;
  box-shadow: 0 4px 20px rgba(0,80,46,0.28), 0 1px 3px rgba(0,80,46,0.2);
  position: relative; overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
}
/* Shimmer sweep */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.15) 70%,
    transparent 100%
  );
  animation: shimmer-sweep 2.4s ease-in-out infinite;
  border-radius: 9999px;
  transform: skewX(-15deg);
}
@keyframes shimmer-sweep {
  0%   { left: -100%; }
  60%  { left: 160%; }
  100% { left: 160%; }
}
.btn-primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 32px rgba(0,80,46,0.36); }
.btn-primary:active { transform:scale(0.97); }
.btn-primary .btn-icon { transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.btn-primary:hover .btn-icon { transform:translateX(3px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  -webkit-appearance: none; appearance: none;
  background: transparent; color: #00502e;
  padding: 0.85rem 1.75rem; border-radius: 9999px;
  font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid rgba(0,80,46,0.3);
  transition: all 0.2s ease;
}
.btn-secondary:hover { border-color:#00502e; background:rgba(0,80,46,0.04); transform:translateY(-1px); }
.btn-secondary .btn-icon { transition:transform 0.2s ease; }
.btn-secondary:hover .btn-icon { transform:translateX(3px); }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #1a1c1b; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  background: rgba(37,211,102,0.12);
  border: 1.5px solid rgba(37,211,102,0.55);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  position: relative; overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 2px 12px rgba(37,211,102,0.15);
}
.btn-whatsapp::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(37,211,102,0.2) 30%,
    rgba(37,211,102,0.45) 50%,
    rgba(37,211,102,0.2) 70%,
    transparent 100%
  );
  animation: shimmer-sweep 2.6s ease-in-out infinite;
  border-radius: 9999px;
  transform: skewX(-15deg);
}
.btn-whatsapp:hover {
  color: #1a1c1b;
  background: rgba(37,211,102,0.2);
  border-color: rgba(37,211,102,0.7);
  gap: 0.75rem;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(37,211,102,0.25);
}

/* ══ SOCIAL BUTTONS ══ */
.social-btn {
  width:2.25rem; height:2.25rem; border-radius:50%;
  border:1.5px solid rgba(190,201,191,0.5);
  display:inline-flex; align-items:center; justify-content:center;
  color:#6f7a71; background:white; text-decoration:none;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.social-btn:hover { border-color:#00502e; color:#00502e; transform:translateY(-3px) scale(1.1); box-shadow:0 6px 20px rgba(0,80,46,0.15); }
.social-btn.magenta:hover { border-color:#8a004b; color:#8a004b; box-shadow:0 6px 20px rgba(138,0,75,0.15); }
.social-btn-dark {
  width:2.25rem; height:2.25rem; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4); text-decoration:none;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.social-btn-dark:hover { border-color:rgba(255,255,255,0.4); color:white; transform:translateY(-3px) scale(1.1); }

/* ══ GOOGLE BADGE ══ */
.google-badge {
  display:inline-flex; align-items:center; gap:0.625rem;
  background:white; border:1px solid rgba(190,201,191,0.4); border-radius:9999px;
  padding:0.5rem 1rem; text-decoration:none;
  box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:all 0.25s ease;
}
.google-badge:hover { box-shadow:0 4px 20px rgba(0,0,0,0.1); transform:translateY(-1px); }

/* ══ SERVICE CARDS SPOTLIGHT ══ */
.service-card { position:relative; overflow:hidden; transition:background-color 0.3s ease; }
.service-card::before {
  content:''; position:absolute; width:350px; height:350px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,80,46,0.07) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  left:var(--mx,-999px); top:var(--my,-999px);
  pointer-events:none; opacity:0; transition:opacity 0.3s;
}
.service-card:hover::before { opacity:1; }
.service-card:hover { background-color:#ffffff !important; }

/* ══ STAT CARDS ══ */
.stat-card { position:relative; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,80,46,0.1); }
.stat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:linear-gradient(90deg,#00502e,#8a004b);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.stat-card:hover::after { transform:scaleX(1); }

/* ══ FLOATING WHATSAPP ══ */
@keyframes wa-pulse {
  0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.4)}
  50%{box-shadow:0 4px 32px rgba(37,211,102,0.65)}
}
.wa-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9000;
  width:3.25rem; height:3.25rem; border-radius:9999px;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  text-decoration:none; animation:wa-pulse 2.5s ease-in-out infinite;
  transition:transform 0.2s ease;
}
.wa-float:hover { transform:scale(1.1); }
.wa-float svg { width:1.75rem; height:1.75rem; fill:white; }

/* ══ FORMS ══ */
.form-input {
  width:100%; background:transparent; border:none;
  border-bottom:1.5px solid rgba(190,201,191,0.5);
  outline:none; padding:0.6rem 0; color:#1a1c1b;
  font-family:'Inter',sans-serif; font-size:1rem;
  transition:border-color 0.25s;
  -webkit-appearance: none; appearance: none;
  border-radius: 0;
}
.form-input:focus { border-bottom:2px solid #00502e; }
.form-input::placeholder { color:#bec9bf; }
/* Form on dark green background — explicit white text */
.bg-dark-form .form-label { color: rgba(255,255,255,0.5); }
.bg-dark-form .form-input {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,0.25);
  -webkit-text-fill-color: #ffffff; /* Safari fix */
  background: rgba(255,255,255,0.06);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.bg-dark-form .form-input:focus {
  border-bottom-color: rgba(255,255,255,0.7);
}
.bg-dark-form .form-input::placeholder {
  color: rgba(255,255,255,0.3);
  -webkit-text-fill-color: rgba(255,255,255,0.3);
}
.form-label {
  display:block; font-size:0.65rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:#3f4941; margin-bottom:0.4rem;
}

/* ══ TEAM CARDS ══ */
.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,80,46,0.1); }

/* ══ LEGAL ══ */
.legal-content h3 { font-size:1.1rem; font-weight:700; color:#1a1c1b; margin-top:3rem; margin-bottom:1rem; }
.legal-content p { color:#3f4941; font-size:1rem; line-height:1.8; margin-bottom:1.25rem; }
.legal-content li { color:#3f4941; display:flex; align-items:flex-start; gap:0.5rem; margin-bottom:0.5rem; line-height:1.65; }
.legal-content li::before { content:"✦"; color:#00502e; font-size:0.5rem; margin-top:0.45rem; flex-shrink:0; }


/* ══ MISC ══ */
.eslogan-line { font-family:'Newsreader',serif; font-style:italic; color:rgba(255,255,255,0.25); font-size:0.875rem; letter-spacing:0.05em; }
.placeholder-photo { background:linear-gradient(135deg,#f4f4f1,#e8e8e6); display:flex; align-items:center; justify-content:center; }

/* ══ HEADER CTA — ocultar en móvil ══ */
@media (max-width: 767px) {
  #header-cta { display: none !important; }
}