/* ==========================================================================
   PRINT'N RUN — Hoja de estilos principal
   Basada en el diseño de Figma: "SITIO WEB PRINT N RUN"
   Paleta, tipografías y medidas extraídas del archivo original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Colores */
  --teal:        #00AEA2;   /* turquesa principal */
  --teal-dark:   #00928C;   /* turquesa oscuro */
  --teal-deep:   #108F8A;   /* turquesa de texto */
  --orange:      #F18705;   /* naranja de acento */
  --pink:        #EA4179;   /* rosa de detalles */
  --pale:        #E9F8F7;   /* fondo claro */
  --mint:        #D9F8F6;   /* chips / tarjetas claras */
  --gray:        #D9D9D9;
  --white:       #FFFFFF;
  --ink:         #0F3B39;

  /* Tipografía */
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Medidas del diseño (lienzo 1440px) */
  --page: 1440;
  --frame: 1367px;          /* ancho del bloque de contenido */
  --gutter: clamp(16px, 2.57vw, 37px);   /* margen lateral del diseño */

  /* Radios */
  --r-hero:  clamp(24px, 4.2vw, 61px);
  --r-box:   clamp(28px, 5.3vw, 77px);
  --r-card:  clamp(20px, 2.3vw, 33px);
  --r-photo: clamp(24px, 5.7vw, 82px);
  --r-pill:  999px;

  /* Ritmo vertical */
  --section-gap: clamp(48px, 7vw, 110px);

  /* Sombras */
  --shadow-soft: 0 18px 45px rgba(0, 87, 82, .14);
  --shadow-card: 0 12px 30px rgba(0, 87, 82, .10);

  /* Transiciones */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: clamp(18px, 6.3vw, 91px);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--teal-deep);
  background: var(--pale);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--orange); color: var(--white); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: min(var(--frame), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.page {
  background: var(--pale);
  overflow: clip;
}

.section { position: relative; }

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */
.display {
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.h-xl { font-size: clamp(46px, 6.4vw, 96px); }
.h-lg { font-size: clamp(38px, 5.8vw, 88px); }
.h-md { font-size: clamp(26px, 3.9vw, 56px); }
.h-sm { font-size: clamp(22px, 2.6vw, 38px); }

.body-lg { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; }
.body    { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; }

.txt-orange { color: var(--orange); }
.txt-teal   { color: var(--teal); }
.txt-dark   { color: var(--teal-dark); }
.txt-white  { color: var(--white); }
.txt-pale   { color: var(--pale); }

/* --------------------------------------------------------------------------
   5. Botones y elementos interactivos
   -------------------------------------------------------------------------- */
.btn-round {
  --size: clamp(42px, 3.7vw, 54px);
  width: var(--size);
  height: var(--size);
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--pink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: transform .35s var(--ease), background .35s var(--ease);
}

.btn-round svg { width: 46%; height: 46%; }

.btn-round:hover { transform: scale(1.09) rotate(8deg); background: #ff9209; }

.btn-round--big { --size: clamp(56px, 6vw, 84px); }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.7em;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.pill-link:hover { background: #ff9209; transform: translateY(-2px); }

.pill-tag {
  display: inline-flex;
  align-items: center;
  padding: .55em 1.6em;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: var(--white);
  font-weight: 700;
  font-size: clamp(26px, 3.9vw, 56px);
  line-height: 1.15;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Cabecera / navegación
   -------------------------------------------------------------------------- */
.site-header {
  position: static;
  top: auto;
  z-index: 60;
  pointer-events: none;
  padding-top: 0;
  padding-inline: clamp(18px, 2.6vw, 37px);
}

.nav-bar {
  pointer-events: auto;
  width: min(961px, calc(100% - clamp(18px, 4vw, 64px)));
  margin: 0 auto;
  background: transparent;
  min-height: 51px;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-logo { flex: none; align-self: flex-end; width: clamp(104px, 9.5vw, 137px); }
.nav-logo svg,
.nav-logo img { width: 100%; height: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(4px, 3.19vw, 46px);
  margin-left: auto;
  background: var(--teal-dark);
  border-radius: var(--r-pill);
  min-height: 51px;
  padding-inline: clamp(10px, 1.39vw, 20px);
  box-shadow: 0 14px 34px rgba(0, 87, 82, .22);
}

.nav-links a {
  display: inline-block;
  color: var(--white);
  font-weight: 600;
  font-size: clamp(11px, 1.11vw, 16px);
  letter-spacing: 0;
  line-height: 1;
  padding: .3125em 1.05em;
  border-radius: var(--r-pill);
  transition: background .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
}

.nav-links a:hover { background: rgba(255, 255, 255, .16); }

.nav-links a.is-active {
  background: var(--orange);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   13. Pie de página — frame 1440 × 458 (contenido 312,8 + cinta 145,2)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: 0;
  background: var(--teal);
  color: var(--white);
  overflow: hidden;
  container-type: inline-size;
  /* Tarjeta del pie: 1440 × 664 · rx 78 (SVG de Figma) */
  border-radius: clamp(28px, 5.417cqw, 78px);
}

/* Frame de Figma: 1440 × 664 (contenido 518,8 + cinta 145,2) */
.footer__top {
  position: relative;
  height: 36.03cqw;                 /* 518,8 px */
}

.footer__brand {
  position: absolute;
  left: 8.333cqw;                   /* x 120 */
  top: 2.722cqw;                    /* 39,2: logo alineado con la tinta del contacto */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__logo { display: block; width: 9.514cqw; }   /* 137 px */
.footer__logo img { display: block; width: 100%; height: auto; }

.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 3.264cqw;             /* 47 px */
  gap: 1.319cqw;                    /* 19 px */
}

.footer__nav a {
  font-weight: 700;
  font-size: 1.111cqw;              /* 16 px */
  line-height: .833cqw;             /* 12 px: caja de 26 con padding 7 */
  padding: .486cqw .556cqw;         /* 7 / 8 */
  border-radius: var(--r-pill);
  transition: background .3s var(--ease);
}

.footer__nav a:hover { background: rgba(255, 255, 255, .16); }

.footer__nav a.is-active {
  background: var(--orange);
  padding-inline: 1.167cqw;         /* pastilla 83 px */
}

.footer__contact {
  position: absolute;
  right: 7.972cqw;                  /* borde derecho 1325,2 */
  top: 2.3cqw;                      /* tinta superior 39,2 */
  text-align: right;
  font-size: 1.111cqw;              /* 16 px */
  font-weight: 700;
  line-height: 1.667cqw;            /* 24 px */
}

.footer__contact a { display: block; }
.footer__contact a:hover { text-decoration: underline; }
.footer__contact p { margin-top: 1.667cqw; }   /* una línea en blanco */

.footer__social {
  position: absolute;
  right: 7.292cqw;                  /* borde derecho 1335 */
  top: 15.972cqw;                   /* centros en y 249 */
  display: flex;
  align-items: center;
  gap: .972cqw;                     /* 14 px entre cajas */
}

.footer__social a {
  display: block;
  line-height: 0;
  border-radius: 50%;
  transition: transform .35s var(--ease);
}

.footer__social a:hover { transform: translateY(-3px) scale(1.06); }
.footer__social img { display: block; height: auto; }

/* cajas del diseño: TikTok 30 · Instagram 38 (tinta 29,7) · WhatsApp 30x29 · Mail 33 (tinta 24,8) */
.footer__social .ico-tiktok    { width: 2.083cqw; }
.footer__social .ico-instagram { width: 2.639cqw; }
.footer__social .ico-whatsapp  { width: 2.083cqw; }
.footer__social .ico-email     { width: 2.292cqw; }

/* Cinta animada: dos bandas de 46 px (-1,392° y -3,585°) con texto de 16,4 px */
.marquee {
  position: relative;
  height: 10.083cqw;                /* 145,2 px */
  overflow: hidden;
  isolation: isolate;
}

.marquee__band {
  position: absolute;
  left: 50%;
  height: 3.194cqw;                 /* 46 px */
}

.marquee__band--teal {
  top: 3.33cqw;                     /* 47,95 */
  width: 108.229cqw;                /* 1558,5 */
  background: var(--teal-dark);
  transform: translateX(-50%) rotate(-1.392deg);
  z-index: 0;
}

.marquee__band--orange {
  top: 3.5cqw;                      /* 50,4 */
  width: 107.965cqw;                /* 1554,7 */
  background: var(--orange);
  transform: translateX(-50%) rotate(-3.585deg);
  z-index: 1;
}

.marquee__track {
  position: absolute;
  left: 50%;
  top: 3.5cqw;
  width: 107.965cqw;
  height: 3.194cqw;
  transform: translateX(-50%) rotate(-3.585deg);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

.marquee__slide {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee:hover .marquee__slide { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__group span {
  font-weight: 700;
  color: var(--white);
  font-size: 1.111cqw;              /* 16 px */
  letter-spacing: 0;
  text-transform: uppercase;
  padding-inline: 1.805cqw;         /* 26 px */
  white-space: nowrap;
}

.marquee__group i {
  width: .347cqw;                   /* 5 px */
  height: .347cqw;
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: var(--white);
  flex: none;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   14. Animaciones (estados iniciales — GSAP los resuelve)
   -------------------------------------------------------------------------- */
.js [data-anim] { will-change: transform, opacity; }

.js [data-anim="fade-up"],
.js [data-anim="fade-in"],
.js [data-anim="zoom-in"],
.js [data-anim="slide-left"],
.js [data-anim="slide-right"] { opacity: 0; }

/* El hero nace oculto: así el texto NO se ve antes de que GSAP lo anime.
   Si GSAP no carga, main.js quita la clase .js y todo queda visible. */
.js [data-hero-line],
.js [data-hero-media] img,
.js [data-hero-cta] { opacity: 0; }


@media (prefers-reduced-motion: reduce) {
  .marquee__slide { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer__top {
    height: auto;
    padding: 36px var(--gutter) 30px;
    display: grid;
    gap: 28px;
  }

  .footer__brand,
  .footer__contact,
  .footer__social { position: static; width: auto; }

  .footer__logo { width: 137px; }

  /* Bloque del pie 1:1 con el SVG: logo 137×47, filas de 26 a paso 45 (gap 19), pastilla 83×26 r13 */
  .footer__nav { margin-top: 47px; gap: 19px; }
  .footer__nav a { font-size: 16px; line-height: 12px; padding: 7px 8px; }
  .footer__nav a.is-active { padding-inline: 16.8px; }

  .footer__contact { text-align: left; font-size: 16px; line-height: 1.6; }
  .footer__contact p { margin-top: 0; max-width: 40ch; }
  .footer__contact br { display: none; }   /* en móvil fluye natural */

  .footer__social { justify-content: flex-start; gap: 14px; margin-top: 22px; }
  .footer__social .ico-tiktok,
  .footer__social .ico-whatsapp { width: 30px; }
  .footer__social .ico-instagram { width: 38px; }
  .footer__social .ico-email { width: 33px; }

  .marquee { height: 96px; }
  .marquee__band { height: 30px; width: 160%; }
  .marquee__band--teal { top: 26px; }
  .marquee__band--orange { top: 32px; }
  .marquee__track { top: 32px; height: 30px; width: 160%; }
  .marquee__group span { font-size: 15px; padding-inline: 18px; }
  .marquee__group i { width: 4px; height: 4px; }
}

@media (max-width: 860px) {
  .nav-bar { padding-inline: 0; }
  .nav-links { gap: 2px; }
  .nav-links a { font-size: 10px; padding: .5em .6em; }
  .nav-logo { width: 96px; }
}

@media (max-width: 480px) {
  .nav-bar { flex-wrap: wrap; padding-block: 8px; }
  .nav-links { width: 100%; justify-content: space-between; margin-left: 0; }
  .nav-links a { font-size: 10px; }

  .footer__top { padding-inline: 20px; }
  .marquee { height: 84px; }
}