/* ============================================
    ÁRITCO MARKETING — shared.css
    Estilos comunes a todas las páginas.
    ✏️ Aquí cambias colores, fuente y nav
    para que afecte a toda la web de una vez.
   ============================================ */

/* FUENTE (Poppins autoalojada — evita depender de fonts.googleapis.com
   y que el navegador del visitante mande su IP a Google en cada carga) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/poppins-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/poppins-900.woff2') format('woff2');
}

/* VARIABLES */
:root {
  --dark: #1E1A2D;
  --red: #CA4B5D;
  --orange: #D98430;
  --orange-text: #D37522;  /* naranja para texto sobre fondos claros (~5:1 sobre --bg2/--card-bg) */
  --orange-light: #F0A868; /* naranja para texto grande sobre el fondo azul oscuro del hero legal (~3.6:1) */
  --blue: #3D5A73;
  --blue-dark: #263C4C; /* tono oscuro de --blue para gradientes de botones */
  --light: #F7F7F7;
  --bg: #F2F0EB;
  --bg2: #F6FBFE;
  --text: #1E1A2D;
  --text-light: #F7F7F7;
  --text-muted: rgba(30,26,45,.65);
  --text-soft: rgba(30,26,45,.7);
  --border: rgba(30,26,45,.1);
  --card-bg: #FFFFFF;
}

/* RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg2);
  color: var(--text);
  overflow-x: clip;
  cursor: none;
}

/* CURSOR */
.cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .1s, width .2s, height .2s;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform .18s ease, width .25s, height .25s;
}

/* Dispositivos táctiles: sin cursor personalizado (no hay ratón que seguir) */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}

/* ACCESIBILIDAD */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* NOISE OVERLAY */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: .2;
}

/* NAV */
nav {
  position: fixed; top: 1.2rem; left: 6vw; right: 6vw;
  z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.8rem;
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: var(--light);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(30,26,45,.06);
  transition: background .3s, box-shadow .3s;
}
nav.scrolled { box-shadow: 0 10px 30px rgba(30,26,45,.12); }
.nav-logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
}
.nav-links { display: flex; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-size: .82rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  text-decoration: none; position: relative;
  transition: color .25s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.nav-links a:hover { color: var(--dark); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff !important;
  padding: .45rem 1.2rem; border-radius: 100px;
  font-weight: 600 !important; font-size: .8rem !important;
  transition: opacity .25s, transform .2s !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { opacity: .85; transform: scale(1.04); }

/* Legal pages back link */
.nav-back {
  font-size: .8rem; font-weight: 500; color: var(--text-muted);
  text-decoration: none; display: flex; align-items: center; gap: .4rem;
  transition: color .2s;
}
.nav-back:hover { color: var(--orange-text); }

/* Mobile nav */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--dark); transition: all .3s; }
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(247,247,247,.98);
  z-index: 850; flex-direction: column;
  align-items: center; justify-content: center; gap: 2rem;
}
.mobile-menu a { font-size: 1.4rem; font-weight: 700; color: var(--dark); text-decoration: none; }
@media(max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
}

/* FOOTER */
.footer-frame {
  background: var(--bg2);
  padding: 3rem 6vw;
}
footer {
  display: block;
  padding: 3.5rem 3.5vw 2rem;
  background: var(--light);
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(30,26,45,.06);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.footer-logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; margin-bottom: 1rem;
}
.footer-logo-mark { display: block; }
.footer-logo-img {
  height: 72px; width: auto;
  object-fit: contain;
  display: block;
}
.footer-brand p { font-size: .85rem; color:var(--text); line-height: 1.6; max-width: 260px; }
.footer-col-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1.1rem;
}
.footer-col-links { display: flex; flex-direction: column; gap: .7rem; }
.footer-col-links a, .footer-col-links span {
  font-size: .88rem; color: var(--text); text-decoration: none; transition: color .2s;
}
.footer-col-links a:hover { color: var(--orange-text); }
.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: 3rem; padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
footer p { font-size: .78rem; color:var(--text) }
.footer-links { display: flex; gap: 1.5rem; list-style: none; }
.footer-links a { font-size: .78rem; color:var(--text); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--orange-text); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .footer-logo { justify-content: center; }
  .footer-brand p { max-width: none; }
  .footer-col-links { align-items: center; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
  .footer-links { justify-content: center; }
}

/* REVEAL ANIMATION */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal.visible { animation: revealUp .7s ease forwards; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* SHARED HEADINGS */
h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
  color: var(--dark);
}
h2 span { 
  color: var(--blue); 
}
.section-label {
  display: inline-flex; 
  align-items: center; 
  gap: .5rem;
  font-size: .8rem; 
  font-weight: 700; 
  letter-spacing: .15em;
  text-transform: uppercase; 
  color: var(--blue); 
  margin-bottom: 1rem;
}
.section-label::before {
  content: ''; display: inline-block;
  width: 24px; height: 1.5px; background: var(--blue);
}

/* TOAST */
.toast {
  position: fixed; bottom: 2rem; right: 2rem;
  background: linear-gradient(135deg, var(--orange), var(--red));
  color: #fff; padding: 1rem 1.5rem; border-radius: 12px;
  font-size: .88rem; font-weight: 600;
  transform: translateY(120px);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index: 9000;
}
.toast.show { transform: translateY(0); }

/* COOKIE BANNER */
#cookie-banner {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  width: min(920px, calc(100vw - 2rem));
  background: var(--blue);
  border: 1px solid rgba(217,132,48,.25);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  z-index: 9500;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
#cookie-banner.visible { transform: translateX(-50%) translateY(0); }
.cookie-banner-icon {
  font-size: 2rem; flex-shrink: 0;
  animation: cookieWiggle 2s ease-in-out infinite;
}
@keyframes cookieWiggle {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
.cookie-banner-text { flex: 1; min-width: 200px; }
.cookie-banner-text p { font-size: .82rem; line-height: 1.6; color: var(--light); margin: 0; }
.cookie-banner-text p strong { color: #fff; }
.cookie-banner-text a { color: var(--orange); text-decoration: none; font-weight: 500; }
.cookie-banner-text a:hover { text-decoration: underline; }
.cookie-banner-btns { display: flex; gap: .6rem; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn-accept {
  background: linear-gradient(135deg, var(--orange), var(--red));
  color: #fff; border: none;
  padding: .6rem 1.3rem; border-radius: 100px;
  font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(217,132,48,.35);
}
.cookie-btn-accept:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(217,132,48,.45); }
.cookie-btn-reject {
  background: transparent; color: var(--light);
  border: 1px solid rgba(247,247,247,.15);
  padding: .6rem 1.3rem; border-radius: 100px;
  font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.cookie-btn-reject:hover { border-color: rgba(247,247,247,.35); color: rgba(247,247,247,.7); }
@media(max-width: 480px) {
  #cookie-banner { flex-direction: column; align-items: flex-start; padding: 1.2rem; }
  .cookie-banner-btns { width: 100%; }
  .cookie-btn-accept, .cookie-btn-reject { flex: 1; text-align: center; }
}

/* WHATSAPP FLOTANTE */
.whatsapp-fab {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--orange), var(--red));
  box-shadow: 0 8px 24px rgba(217,132,48,.4);
  z-index: 8500;
  transition: transform .2s, box-shadow .2s;
}
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(217,132,48,.5);
}
.whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; }
@media (max-width: 480px) {
  .whatsapp-fab { bottom: 1.2rem; right: 1.2rem; width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 25px; height: 25px; }
}