/* ============================================================
   Mavive Creativo — estilos globales
   Dirección visual A: Verde protagonista (Bold Block Color)
   Verde #48B850 · Grafito #1C1C1C · Verde profundo #1F7A2E
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: #1C1C1C; color: #48B850; }
input::placeholder, textarea::placeholder { color: rgba(0,0,0,0.4); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #48B850; outline-offset: 3px; border-radius: 2px;
}
section[id] { scroll-margin-top: 76px; }

/* ── Enlace "saltar al contenido" ── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #1C1C1C; color: #fff; padding: 12px 20px; font-weight: 600; text-decoration: none; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; }

/* ── Servicios (filas hover) ── */
.svc-row { cursor: pointer; }
.svc-row:hover { background: #48B850 !important; }
.svc-row:hover .svc-num { color: #1C1C1C !important; opacity: 1 !important; }
.svc-row:hover .svc-desc { color: #143C18 !important; }
.svc-row:hover .svc-arrow { transform: translateX(6px); color: #1C1C1C !important; }

/* ── Animaciones ── */
@keyframes heroCardIn { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes heroRowIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes heroLineIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cardFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cardFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes dotPulse   { 0%,100% { box-shadow: 0 0 0 0 rgba(72,184,80,0.55); } 50% { box-shadow: 0 0 0 7px rgba(72,184,80,0); } }
@keyframes floatA     { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-18px,16px); } }
@keyframes floatB     { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-12px); } }
@keyframes pop        { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes draw       { to { stroke-dashoffset: 0; } }

.pre-reveal { opacity: 0; transform: translateY(24px);
  transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1), opacity 0.7s cubic-bezier(0.2,0.7,0.2,1);
  will-change: transform; }
.pre-reveal.is-revealed { opacity: 1; transform: none; }

[data-hero-aside] { will-change: transform; }
[data-parallax] { will-change: transform; }
[data-magnetic] { transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1), background 0.2s ease, color 0.2s ease; will-change: transform; }

/* ── Enlaces de la tarjeta del hero ── */
.hero-link { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 12px; border-top: 1px solid #2C2C2C; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 16.5px; color: #fff; text-decoration: none; border-radius: 10px;
  transition: background 0.28s ease, padding 0.28s ease, color 0.2s ease; }
.hero-link:hover { background: #48B850; color: #1C1C1C; padding-left: 18px; }
.hero-link .ar { color: #48B850; transition: transform 0.28s ease, color 0.2s ease; }
.hero-link:hover .ar { transform: translate(5px,-5px); color: #1C1C1C; }

/* ── Estados hover / focus (convertidos desde style-hover / style-focus) ── */
.nav-link { transition: background 0.2s ease; }
.nav-link:hover { background: #F2F2F2; }

.nav-cta { transition: background 0.2s ease, color 0.2s ease; }
.nav-cta:hover { background: #1F7A2E; color: #fff; }

.btn-ink { transition: background 0.2s ease; }
.btn-ink:hover { background: #000; }

.link-ul { transition: border-color 0.2s ease; }
.link-ul:hover { border-bottom-color: #1C1C1C !important; }

.btn-green-white { transition: background 0.2s ease; }
.btn-green-white:hover { background: #fff; }

.link-deepgreen { transition: color 0.2s ease; }
.link-deepgreen:hover { color: #1F7A2E; }

.contact-link { transition: color 0.2s ease; }
.contact-link:hover { color: #48B850; }

.social-btn { transition: background 0.2s ease; }
.social-btn:hover { background: #48B850; }

.footer-link { transition: color 0.2s ease; }
.footer-link:hover { color: #48B850; }

.field { transition: border-color 0.2s ease, background 0.2s ease; }
.field:focus { border-color: #48B850; background: #fff; outline: none; }

.btn-submit { transition: background 0.2s ease, color 0.2s ease; }
.btn-submit:hover { background: #1F7A2E; color: #fff; }

.btn-outline { transition: background 0.2s ease, color 0.2s ease; }
.btn-outline:hover { background: #1C1C1C; color: #fff; }

/* ── FAQ ── */
.faq-icon { flex-shrink: 0; display: inline-flex; transition: transform 0.25s ease; transform: rotate(0deg); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-panel { overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease; max-height: 0; opacity: 0; }
.faq-item.open .faq-panel { max-height: 340px; opacity: 1; }

/* ── Menú móvil ── */
.mobile-menu { overflow: hidden; background: #fff; transition: max-height 0.3s ease; max-height: 0; }
.mobile-menu.open { max-height: 360px; }

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .pre-reveal { opacity: 1; transform: none; }
  #check-path { stroke-dashoffset: 0 !important; }
}

/* ── Responsive ── */
@media (max-width: 980px) {
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-hero-aside] { margin-top: 36px !important; }
  [data-stats-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-problem-grid], [data-why-grid], [data-contact-grid], [data-faq-grid] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-results-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-steps-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
  [data-testi-grid] { grid-template-columns: 1fr !important; }
  [data-footer-grid] { grid-template-columns: 1.4fr 1fr !important; }
}
@media (max-width: 680px) {
  [data-desktop-nav] { display: none !important; }
  [data-mobile-toggle] { display: flex !important; }
  [data-stats-grid] { grid-template-columns: 1fr !important; }
  [data-results-grid] { grid-template-columns: 1fr !important; }
  [data-steps-grid] { grid-template-columns: 1fr !important; }
  [data-form-row] { grid-template-columns: 1fr !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-svc-row] { grid-template-columns: auto 1fr !important; gap: 8px 16px !important; }
  [data-svc-desc-cell] { grid-column: 1 / -1 !important; }
  [data-svc-arrow-cell] { display: none !important; }
}