/* ============================================
   OTRO ROLLO — tokens
   Nota: "Helvetica Now Display" es de pago (Monotype).
   Sustituye --font-display/--font-body por la real cuando
   esté licenciada y self-hosteada. Archivo/Archivo Black
   son el sustituto libre más cercano en peso y anchura.
   ============================================ */
:root {
  --rojo: #FF3131;
  --rojo-quemado: #B81F1F;
  --negro: #111111;
  --crudo: #FFF8F4;
  --blanco: #FFFFFF;

  --font-display: "Archivo Black", "Archivo", "Helvetica Now Display", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Now Display", Arial, sans-serif;
  --font-anton: "Anton", sans-serif;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 2px;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--negro);
  background: var(--crudo);
  -webkit-font-smoothing: antialiased;
}

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

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

ul, ol { list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--negro);
  color: var(--blanco);
  padding: .75rem 1rem;
  z-index: 200;
}
.skip-link:focus {
  left: var(--gap);
  top: var(--gap);
}

:focus-visible {
  outline: 3px solid var(--negro);
  outline-offset: 3px;
}
.panel--negro :focus-visible,
.panel--rojo :focus-visible {
  outline-color: var(--blanco);
}

/* ============================================
   Panels — alternancia rojo / crudo / negro
   ============================================ */
.panel {
  position: relative;
  --panel-pad-y: clamp(3.5rem, 9vw, 7rem);
  padding: var(--panel-pad-y) 0;
}
.panel--rojo { background: var(--rojo); color: var(--blanco); }
.panel--negro { background: var(--negro); color: var(--blanco); }
.panel--crudo { background: var(--crudo); color: var(--negro); }

.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(.65rem, 1vw, .78rem);
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .6;
  margin-bottom: .55rem;
  text-align: center;
}
.section-title {
  font-family: var(--font-anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: .97;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* Compensación de nav fijo para anchors de navegación */
[id] { scroll-margin-top: 80px; }

/* Botón de contacto que cierra casi todas las secciones — mismo
   componente, copy distinto cada vez, siempre centrado. */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.section-cta--start { justify-content: flex-start; margin-top: 1.75rem; }

/* ============================================
   Iconos
   ============================================ */
.btn-icon {
  width: 1.4em;
  height: 1.4em;
  fill: currentColor;
  flex-shrink: 0;
}

.wink-bullet {
  width: 2rem;
  height: 2rem;
  color: var(--rojo);
  margin-bottom: 1rem;
}

.logo { display: inline-flex; align-items: center; }

.brand { height: 1.5rem; width: auto; }
/* Footer logo: misma altura visual que el logo del nav */
.brand--footer { fill: var(--blanco); height: 2.4rem; }

.logo--nav {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.logo__mark {
  height: 2.4rem;
  width: auto;
  fill: var(--negro);
  flex-shrink: 0;
  transition: fill .2s linear;
}
.nav--scrolled .logo__mark { fill: var(--rojo); }
.logo__word {
  height: 2.1rem;
  width: auto;
  fill: var(--blanco);
}

/* ============================================
   Nav
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(17,17,17,0);
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: background-color .2s linear, border-color .2s linear;
}
.nav.nav--scrolled {
  background: var(--negro);
  border-bottom-color: rgba(255,255,255,.08);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem var(--gap);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-weight: 700;
  font-size: .92rem;
}
.nav__links a { position: relative; padding: .25rem 0; color: var(--blanco); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--rojo);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: .5rem;
}
.nav__burger span {
  height: 3px;
  background: var(--blanco);
  border-radius: 1px;
}

.nav__cta { transition: background-color .2s linear; }
.nav--scrolled .nav__cta { background: var(--rojo); }

.nav__social {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.nav__social-link {
  display: flex;
  align-items: center;
  color: var(--blanco);
  opacity: .65;
  transition: opacity .2s;
}
.nav__social-link:hover { opacity: 1; }

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem var(--gap) 2rem;
  background: var(--negro);
  color: var(--blanco);
  border-top: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
}
.mobile-menu a { color: var(--blanco); }
.mobile-menu[hidden] { display: none; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-radius: var(--radius);
  padding: .85rem 1.5rem;
  font-size: .9rem;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn--small { padding: .6rem 1.25rem; font-size: .82rem; }
.btn--big { padding: 1.1rem 2.25rem; font-size: 1.05rem; }
.btn--ink { background: var(--negro); color: var(--blanco); }
.btn--ink:hover { background: var(--rojo-quemado); }
.btn--rojo { background: var(--rojo); color: var(--blanco); }
.btn--rojo:hover { background: var(--blanco); color: var(--rojo); }
.btn:hover { transform: translateY(-2px); }

/* ============================================
   Rollo-line — la firma: tachón de rotulador
   ============================================ */
.rollo-line {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -.01em;
  display: block;
}
.rollo-line--xl { font-size: clamp(2.1rem, 6.5vw, 5.2rem); margin-bottom: 1.5rem; max-width: 24ch; }
.rollo-line--lg { font-size: clamp(1.8rem, 5vw, 3.4rem); margin-bottom: 2.25rem; max-width: 18ch; }
.rollo-line--sm { font-size: clamp(1.15rem, 2.3vw, 1.6rem); margin-bottom: 3rem; max-width: 22ch; }

.rollo-line .weak {
  display: block;
  opacity: 1;
  text-decoration-line: line-through;
  text-decoration-thickness: .1em;
  text-decoration-color: transparent;
  transition: opacity .4s var(--ease), text-decoration-color .4s var(--ease);
}
.rollo-line.in-view .weak {
  opacity: .55;
  text-decoration-color: currentColor;
}

.rollo-line .strong {
  display: block;
  color: var(--rojo);
  opacity: 0;
  transform: scale(1.12) rotate(-2deg);
  transition: opacity .35s var(--ease) .45s, transform .35s var(--ease) .45s;
}
.rollo-line.in-view .strong { opacity: 1; transform: scale(1) rotate(0deg); }

.panel--negro .rollo-line .strong,
.panel--rojo .rollo-line .strong { color: var(--blanco); }
.rollo-line--oninv .strong { color: var(--negro); }
.rollo-line__accent { color: var(--negro); }

/* ============================================
   Hero
   ============================================ */
.hero {
  padding-top: clamp(5rem, 6vw + 2rem, 8rem);
  padding-bottom: 0;
  min-height: 896px;
  position: relative;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: left;
}
/* --- Hero tipografía --- */
.hero__text {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  position: relative; /* para el arrow absoluto */
}
.hero__claim {
  font-family: 'Anton', var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .97;
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  margin-bottom: 1.5rem;
}
/* Líneas débiles (tachadas visualmente con SVG) */
.hero__weak-line {
  display: block;
  position: relative;
  color: rgba(255,255,255,.45);
  margin-bottom: .05em;
}
.hero__weak-txt { display: block; }
.hero__strike {
  position: absolute;
  left: 0;
  top: 48%; /* centrado sobre el texto */
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* Escala uniforme k=0.28: 2180.9*0.28=611px, 1214.52*0.28=340px */
.hero__strike--13 { width: 611px; }
.hero__strike--11 { width: 340px; }
/* Líneas fuertes */
.hero__strong-line {
  display: block;
  color: var(--blanco);
  margin-top: .05em;
}
/* "OTRO ROLLO." 14%×14% más grande que la línea fuerte, en negro */
.hero__accent-line {
  display: block;
  color: var(--negro);
}
.hero__accent-txt {
  display: block;
  font-size: 1.3em; /* 1.14 × 1.14 ≈ 1.3 */
  color: var(--negro);
}
/* Arrow (10): escala uniforme k=0.28 → viewBox 214.41×211.61 → 60×59px
   Posición: izquierda del texto a la altura del inicio de "FACTURAR" */
.hero__arrow {
  position: absolute;
  width: 60px;
  height: 59px;
  left: -72px;  /* fuera del borde izquierdo del bloque de texto */
  top: 161px;   /* medido: strong-line.top - hero__text.top */
  pointer-events: none;
}
.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 44ch;
  margin: 0 0 2.25rem;
  opacity: .92;
}
.hero__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.hero__ctas-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__cta-ghost {
  background: var(--rojo);
  color: var(--negro);
  border: 2px solid var(--negro);
}
.hero__cta-ghost:hover { background: var(--negro); color: var(--blanco); }
.hero__fineprint { font-size: .85rem; opacity: .8; }
/* Subrayado "Eso sí que no" */
.hero__fineprint-under {
  display: block;
  font-size: .85rem;
  opacity: .8;
}
/* Underline (12): escala k=0.28 → viewBox 276.6×32.98 → 77px×9px */
.hero__underline {
  display: block;
  width: 77px;
  height: auto;
  margin-top: 3px;
  pointer-events: none;
}

/* --- Hero scroll indicator --- */
.hero__scroll {
  position: absolute;
  bottom: calc(2rem + 50px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 28px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .3s;
}
.hero__scroll:hover { border-color: var(--blanco); }
.hero__scroll-dot {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--blanco);
  border-radius: 50%;
  margin-top: 6px;
  animation: scroll-dot 1.6s var(--ease) infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  71%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot { animation: none; }
}

/* --- Hero ilustraciones (escala uniforme k≈0.28 sobre viewBox de cada SVG) ---
   ViewBoxes originales (u=unidades SVG):
   01:1138×985  02:1098×940  03:519×639  04:1885×1049
   05:847×678   06:277×309   07:795×745  08:535×556   09:289×437
   Posiciones absolutas dentro de .hero__visual (bottom:0, anchored a base sección)
*/
.hero__visual {
  position: absolute;
  top: auto !important;
  bottom: 0;
  right: -2%;
  width: 56%;
  height: 780px;
  z-index: 0;
  pointer-events: none;
}
/* Todos los .hv con posición absoluta en px, escala k≈0.28 */
.hv { position: absolute; display: block; height: auto; }
/* 01 draw guy: w=319h=276, top del grupo = 0 (= 45px bajo nav en el .hero) */
.hv--draw      { width: 319px; left: 88px;  top: 0; }
/* 07 note/window: w=223h=209 */
.hv--note      { width: 223px; left: 460px; top: 22px; }
/* 06 star: w=78h=87 */
.hv--star      { width: 78px;  left: 10px;  top: 12px; }
/* 03 white blob: w=145h=179 */
.hv--blob-white{ width: 145px; left: 0;     top: 268px; }
/* 08 yellow blob: w=150h=156 */
.hv--blob-yellow{ width: 150px; left: 598px; top: 248px; }
/* 09 ribbon: w=81h=122 */
.hv--ribbon    { width: 81px;  left: 690px; top: 330px; }
/* 02 laptop: w=307h=263 */
.hv--laptop    { width: 307px; left: 220px; top: 210px; z-index: 2; }
/* mug isotipo */
.hv--mug       { width: 44px;  height: 44px; left: 130px; top: 490px; fill: var(--negro); z-index: 3; }
/* 04 megaphone: w=528h=294, bottom del grupo = 780, top=780-294=486 */
.hv--megaphone { width: 528px; left: 0;     top: 486px; z-index: 1; }
/* 05 camera: w=237h=190, bottom aprox 720 */
.hv--camera    { width: 237px; left: 520px; top: 530px; z-index: 1; }

/* ============================================
   Sectores — chips
   ============================================ */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}
.chip {
  font-weight: 700;
  font-size: .9rem;
  border: 2px solid var(--negro);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  background: var(--blanco);
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.chip:nth-child(odd) { transform: rotate(-1.5deg); }
.chip:nth-child(even) { transform: rotate(1.5deg); }
.chip:hover {
  background: var(--rojo);
  color: var(--blanco);
  border-color: var(--rojo);
  transform: rotate(0deg) translateY(-3px);
}

/* ============================================
   Principios
   ============================================ */
.section-title--inv { color: var(--blanco); }
.principios__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.principio__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--rojo);
  margin-bottom: .75rem;
}
.principio h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin-bottom: .6rem;
  letter-spacing: -.01em;
}
.principio p { opacity: .85; line-height: 1.5; }

/* ============================================
   Cómo trabajamos — zigzag con hilo central
   ============================================ */
/* Cada paso es una fila de 2 columnas (contenido / icono). En las filas
   impares el contenido va a la izquierda y el icono a la derecha; en
   las pares se invierte con `order`, sin tocar el HTML. El hilo punteado
   va siempre por el centro exacto del hueco entre columnas (left:50%),
   y cada icono se pega a ese hueco por su lado interior (justify-self),
   así que el hilo queda tocando cada icono aunque cambien de lado. */
.proceso__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.proceso__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.25rem;
}
.proceso__icon-wrap {
  width: auto;
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
.proceso__icon { width: auto; height: 12rem; display: block; }
.proceso__step-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  margin-bottom: .6rem;
  color: var(--negro);
}
.proceso__step-text {
  font-size: .9rem;
  line-height: 1.6;
  opacity: .8;
  color: var(--negro);
}
.proceso__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: 2.5rem;
  align-self: flex-start;
}

/* ============================================
   Servicios — cabecera centrada + grid de 4 columnas
   (4 fichas arriba, 2 abajo) que van apareciendo al
   entrar en el viewport
   ============================================ */
.servicios__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.servicios__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  row-gap: 1.5rem;
}
.showcase-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.showcase-card.in-view { opacity: 1; transform: none; }
.showcase-card:nth-child(2) { transition-delay: .08s; }
.showcase-card:nth-child(3) { transition-delay: .16s; }
.showcase-card:nth-child(4) { transition-delay: .04s; }
.showcase-card:nth-child(5) { transition-delay: .12s; }
.showcase-card:nth-child(6) { transition-delay: .20s; }
.showcase-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-card__visual-icon {
  width: auto;
  height: 8rem;
  object-fit: contain;
}
.showcase-card__caption h4 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: .4rem;
}
.showcase-card__caption p { font-size: .9rem; line-height: 1.5; opacity: .85; }

/* ============================================
   Por qué importa
   ============================================ */
.porque__claim {
  font-family: var(--font-anton);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.05;
  max-width: 34rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.porque__title { line-height: .92; }
.porque__title-accent {
  display: block;
  color: var(--rojo);
  font-size: clamp(2.8rem, 5.2vw, 4.8rem);
}
.porque__ilustracion {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.porque__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.porque__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--rojo);
  margin-bottom: .75rem;
}
.porque__card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: .6rem;
}
.porque__card p { line-height: 1.55; opacity: .85; }

/* ============================================
   FAQ
   ============================================ */
.faq__list {
  max-width: 48rem;
  margin: 0 auto;
  border-top: 2px solid var(--negro);
}
.faq__item {
  position: relative;
  border-bottom: 2px solid var(--negro);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  padding: 1.4rem 2.75rem 1.4rem 0;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-align: left;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  flex-shrink: 0;
  color: var(--rojo);
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p {
  max-width: 58ch;
  padding-bottom: 1.5rem;
  line-height: 1.55;
  text-align: left;
  opacity: .85;
}

/* ============================================
   Síntesis de marca
   ============================================ */
.sintesis {
  background-image: url('assets/banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sintesis__intro {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--blanco);
  max-width: 44rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.sintesis__intro strong { color: var(--rojo); }
.sintesis__mid {
  font-family: var(--font-anton);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--blanco);
  text-align: center;
  line-height: .97;
  margin-bottom: .2rem;
}
.sintesis__big {
  font-family: var(--font-anton);
  font-size: clamp(2.8rem, 5.2vw, 4.8rem);
  text-transform: uppercase;
  color: var(--rojo);
  text-align: center;
  line-height: .95;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ============================================
   Números
   ============================================ */
.numeros .wrap { max-width: 1440px; }
.numeros__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  text-align: center;
  margin-bottom: 1.5rem;
}
.numero {
  min-width: 0;
  border: 1px solid rgba(17,17,17,.15);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--gap);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.numero.in-view { opacity: 1; transform: none; }
.numero:nth-child(2) { transition-delay: .12s; }
.numero:nth-child(3) { transition-delay: .24s; }
.numero:nth-child(4) { transition-delay: .36s; }
.numero__cifra {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--rojo);
  line-height: 1;
  margin-bottom: .4rem;
}
.numero p { font-weight: 700; }
.numeros__caption {
  text-align: center;
  font-size: .85rem;
  opacity: .65;
}

/* ============================================
   Equipo
   ============================================ */
.equipo {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}
/* Texto en flujo normal, foto absolutamente posicionada para no estrechar la columna */
.equipo__inner {
  display: block;
  position: relative;
  z-index: 1;
}
.equipo__texto {
  max-width: 36rem;
  padding-top: var(--panel-pad-y);
  padding-bottom: var(--panel-pad-y);
}
.equipo__texto .section-eyebrow { text-align: left; }
.equipo__texto .section-title {
  text-align: left;
  margin-bottom: 1.75rem;
  font-family: 'Anton', var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: .97;
}
.equipo__texto p { max-width: 44ch; opacity: .92; line-height: 1.55; margin-bottom: 1rem; }
.equipo__foto {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 68%;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.equipo__foto-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* ============================================
   Formulario de contacto
   ============================================ */
.form-contacto__title { color: var(--negro); text-align: left; }
.form-contacto__title-accent { color: var(--rojo); }
.section-eyebrow--left { text-align: left; }
.form-contacto__submit { border: none; }
.form-contacto__sub {
  color: rgba(0,0,0,.6);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  margin-top: -1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 42rem;
}
.section-eyebrow--light { color: rgba(0,0,0,.45); }

.form-contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-bottom: 2rem;
}
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(0,0,0,.5);
}
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--blanco);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: var(--radius);
  color: var(--negro);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: .85rem 1rem;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(0,0,0,.3); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--rojo);
  background: var(--blanco);
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(0,0,0,.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-field select option { background: var(--blanco); color: var(--negro); }
.form-field textarea { resize: vertical; min-height: 130px; }
.form-contacto__submit { margin-top: .5rem; }
.form-msg { margin-top: 1rem; font-weight: 700; font-size: .95rem; }
.form-msg--ok { color: #1a7a3a; }
.form-msg--error { color: var(--rojo); }

/* ============================================
   CTA final
   ============================================ */
.cta-final {
  background-image: url('assets/banner2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-final .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(5rem, 9vw, 8rem); }
.cta-final__claim {
  font-family: 'Anton', var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.0;
  max-width: 22ch;
  margin-bottom: 1.25rem;
  color: var(--blanco);
}
.cta-final__highlight { color: var(--rojo); }
/* "EMPEZAMOS / A FACTURAR MÁS" negro y un 20% más grande */
.cta-final__highlight--dark {
  color: var(--negro);
  font-size: 1.2em;
}
.cta-final__sub {
  max-width: 64ch;
  line-height: 1.55;
  opacity: .85;
  margin-bottom: 2.25rem;
}

/* ============================================
   Footer
   ============================================ */
/* ============================================
   Botones flotantes fijos
   ============================================ */
.float-btns {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 220px; /* ancho fijo: ambos botones iguales */
}
.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 2rem;
  padding: .75rem 1.35rem;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.float-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.float-btn--cta { background: var(--rojo); color: var(--blanco); }
.float-btn--wa  { background: #25d366; color: #fff; }
@media (max-width: 500px) {
  .float-btns { bottom: 1rem; right: 1rem; width: 190px; }
  .float-btn { font-size: .85rem; padding: .65rem 1.1rem; }
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--negro);
  color: var(--blanco);
  padding: 2.5rem 0 1.5rem;
}
.footer__top {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer__sep-v {
  flex-shrink: 0;
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,.2);
  align-self: center;
}
.footer__tagline {
  font-size: .88rem;
  line-height: 1.5;
  opacity: .7;
  flex: 1;
}
.footer__services {
  font-size: .8rem;
  line-height: 1.55;
  opacity: .4;
  flex: 1;
}
.footer__nav-row {
  padding-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer__links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  font-size: .88rem;
  opacity: .65;
}
.footer__links a:hover { opacity: 1; color: var(--rojo); }

.footer__social {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-shrink: 0;
}
.footer__social-link {
  display: flex;
  align-items: center;
  color: var(--blanco);
  opacity: .5;
  transition: opacity .2s;
}
.footer__social-link:hover { opacity: 1; }

.social-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.footer__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 0;
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
}
.footer__legal-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .8rem;
  opacity: .5;
}
.footer__legal-links a:hover { opacity: 1; color: var(--rojo); }
.footer__legal {
  font-size: .8rem;
  opacity: .5;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .principios__list,
  .porque__grid,
  .numeros__grid { grid-template-columns: repeat(2, 1fr); }
  .equipo__foto { position: static; width: 100%; }
  .equipo__texto { padding-bottom: 0; }
  .servicios__cards { grid-template-columns: repeat(2, 1fr); }
  .proceso__steps { flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
  .proceso__step { flex: 0 0 calc(50% - 3rem); min-width: 140px; }
  .proceso__arrow { display: none; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav .btn--small { display: none; }
  .nav__burger { display: flex; }
  .principios__list,
  .porque__grid,
  .numeros__grid { grid-template-columns: 1fr; }
  .proceso__step { flex: 0 0 100%; }
  .servicios__cards { grid-template-columns: 1fr; }
}

/* Por debajo de este ancho, 6.5vw cae por debajo del mínimo del clamp
   (2.1rem) y la palabra más larga ("PUBLICIDAD") ya no cabe junto a la
   siguiente en una línea, partiendo la frase en 3. Se reduce el tamaño
   fijo aquí para recuperar las 2 líneas. */
@media (max-width: 500px) {
  .rollo-line--xl { font-size: 1.7rem; }
  .hero { min-height: auto; }
  .hero__inner { padding-left: .75rem; padding-right: .75rem; max-width: 100%; }
  .hero__text { max-width: none; }
  .hero__visual { display: none; }
  .hero__claim { max-width: none; }
}

/* ============================================
   Páginas legales
   ============================================ */
.page--legal .nav { background: var(--negro); border-bottom-color: rgba(255,255,255,.08); }
.page--legal .logo__mark { fill: var(--rojo); }

.legal-hero {
  background: var(--negro);
  color: var(--blanco);
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}
.legal-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  margin-top: .5rem;
}
.legal-hero__date {
  font-size: .82rem;
  opacity: .45;
  margin-top: .75rem;
  letter-spacing: .04em;
}

.legal-body { background: var(--crudo); }
.legal-content {
  max-width: 52rem;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.legal-content h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 2.5rem 0 .6rem;
  color: var(--negro);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 1.75rem 0 .4rem;
  color: var(--negro);
}
.legal-content p {
  line-height: 1.65;
  margin-bottom: .9rem;
  opacity: .82;
}
.legal-content ul, .legal-content ol {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.legal-content li {
  line-height: 1.65;
  margin-bottom: .35rem;
  opacity: .82;
}
.legal-content strong { font-weight: 700; color: var(--negro); opacity: 1; }
.legal-content a { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { opacity: .75; }

.legal-datos {
  background: var(--blanco);
  border-left: 3px solid var(--rojo);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-datos p { margin-bottom: .25rem; opacity: 1; font-size: .9rem; }

.legal-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  min-width: 540px;
}
.legal-content th {
  background: var(--negro);
  color: var(--blanco);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .75rem;
  padding: .6rem .75rem;
  text-align: left;
}
.legal-content td {
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: .6rem .75rem;
  vertical-align: top;
  opacity: 1;
  line-height: 1.5;
}
.legal-content tr:nth-child(even) td { background: rgba(0,0,0,.03); }
.legal-content code {
  font-family: monospace;
  font-size: .85em;
  background: rgba(0,0,0,.07);
  padding: .1em .35em;
  border-radius: 3px;
}

/* ============================================
   Banner de cookies
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--negro);
  color: var(--blanco);

  padding: 1.25rem var(--gap);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  animation: cookie-slide-up .35s var(--ease) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1;
  min-width: 200px;
  font-size: .875rem;
  line-height: 1.55;
  opacity: .9;
}
.cookie-banner__link {
  color: var(--rojo);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__link:hover { opacity: .8; }
.cookie-banner__actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-banner__btn {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--radius);
  padding: .65rem 1.35rem;
  border: 2px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
  white-space: nowrap;
}
.cookie-banner__btn:hover { transform: translateY(-2px); }
.cookie-banner__btn--accept {
  background: var(--rojo);
  color: var(--blanco);
  border-color: var(--rojo);
}
.cookie-banner__btn--accept:hover { background: var(--rojo-quemado); border-color: var(--rojo-quemado); }
.cookie-banner__btn--reject {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255,255,255,.35);
}
.cookie-banner__btn--reject:hover { border-color: var(--blanco); }

@media (max-width: 600px) {
  .cookie-banner__inner { gap: 1rem; }
  .cookie-banner__actions { width: 100%; justify-content: flex-end; }
  .cookie-banner__btn { padding: .6rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rollo-line .weak,
  .rollo-line .strong,
  .btn,
  .chip,
  .showcase-card {
    transition: none !important;
  }
  .rollo-line .weak { opacity: .55; text-decoration-color: currentColor; }
  .rollo-line .strong { opacity: 1; transform: none; }
  .ticker__track { animation: none !important; }
  .showcase-card { opacity: 1; transform: none; }
  .numero { opacity: 1; transform: none; }
}

/* ============================================
   Ticker — cinta de claims, inclinada como una
   pegatina cruzando la costura entre dos secciones
   ============================================ */
/* ticker-wrap ocupa CERO altura en el flujo: la sección anterior y la
   siguiente quedan a ras, tocándose directamente, sin ningún cálculo de
   solape de por medio — si la banda no existiera, ya no habría costura
   que ver.

   La forma diagonal (.ticker, rojo, y .ticker__panel, negro, anidada y
   más pequeña con el mismo ángulo) se recorta con clip-path en vez de
   rotarse: un transform:rotate() sobre un fondo con cortes de color
   duros se rasteriza primero y se rota después, y eso es lo que produce
   el borde dentado/serrado en vez de una línea continua. clip-path
   define el borde como una trayectoria vectorial que el navegador
   antialiasa de forma nativa, sin ese paso de rasterizado-y-giro.

   A diferencia de transform:rotate(), un recorte con clip-path no
   desplaza esquinas por girar — son, literalmente, las esquinas del
   propio cuadro. Por eso esta banda no necesita ser más ancha que la
   pantalla: con width:100% sus vértices caen justo en los bordes del
   viewport, sin generar overflow horizontal en la página (lo cual,
   a su vez, evita tener que poner overflow-x:hidden en html/body, algo
   que rompe position:sticky en cualquier otro punto de la página por
   una regla de la spec de CSS: un eje "visible" junto a un eje que no
   lo es se promociona automáticamente a "auto").

   Fuera de la forma recortada todo es transparente: si en algún borde
   no llega a cubrir del todo, lo que se asoma es el color real de la
   sección de al lado, nunca uno equivocado.

   El texto (.ticker__panel-text) NO va recortado a la diagonal — es una
   franja horizontal simple centrada en la banda. Atarlo exactamente a
   la forma diagonal exigía una banda absurdamente alta para que el
   texto no tocara nunca el borde; aquí se acepta el margen tal cual,
   bien holgado, en vez de perseguir un ajuste milimétrico. */
.ticker-wrap {
  position: relative;
  height: 0;
  z-index: 5;
}
.ticker {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(9.5rem, 12vw, 11.5rem);
  transform: translateY(-50%);
  clip-path: polygon(0 26%, 100% 5%, 100% 74%, 0% 95%);
  background: transparent;
  pointer-events: none;
}
.ticker__panel {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 31%, 100% 10.5%, 100% 68.5%, 0% 90%);
  background: var(--negro);
}
.ticker__panel-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  bottom: 32%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  /* Mismo sentido de giro que el borde diagonal de la banda (que sube
     hacia la derecha), para que el texto seguido se vea inclinado con
     ella en vez de plano dentro de un marco torcido. */
  transform: rotate(-1.4deg);
}
.ticker__track {
  display: inline-flex;
  width: max-content;
  animation: ticker-scroll 36s linear infinite;
}
.ticker__seq { display: inline-flex; align-items: center; flex-shrink: 0; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  padding: .85rem 2rem;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: rgba(255,255,255,.6);
}
.ticker__item strong { color: var(--blanco); margin-left: .45em; }
.ticker__accent { color: var(--rojo); }
.ticker__icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  fill: var(--rojo);
}
.ticker--light .ticker__panel { background: var(--blanco); }
.ticker--light .ticker__item { color: rgba(0,0,0,.45); }
.ticker--light .ticker__item strong { color: var(--negro); }
.ticker--light .ticker__icon { fill: var(--rojo); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .ticker { height: clamp(6.5rem, 20vw, 8rem); }
  .ticker__panel-text { transform: rotate(-2.5deg); }
  .ticker__item { padding: .55rem 1.1rem; font-size: .85rem; }
  .ticker__icon { width: 1.3rem; height: 1.3rem; }
}

/* ============================================
   Página 404
   ============================================ */
body.page--404 { background: var(--rojo); }

.error404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 3rem;
  overflow: hidden;
}
.error404__inner {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.error404__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.error404__num {
  font-family: var(--font-anton);
  font-size: clamp(7rem, 22vw, 20rem);
  line-height: .82;
  color: var(--negro);
  display: block;
  margin-bottom: .08em;
}
.error404__claim {
  font-family: 'Anton', var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .97;
  color: var(--blanco);
  margin-bottom: 1.25rem;
}
.error404__sub {
  color: var(--blanco);
  opacity: .88;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  margin-bottom: 2.25rem;
}
.error404__visual {
  position: relative;
}
.error404__visual img {
  position: absolute;
  top: 0;
  left: -5%;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}
.error404__text .btn { align-self: flex-start; }
.error404__btn-icon {
  width: 1.4rem;
  height: 1.4rem;
  fill: var(--blanco);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .error404__inner {
    grid-template-columns: 1fr;
  }
  .error404__visual {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
  .error404__num { font-size: clamp(5.5rem, 28vw, 9rem); }
}

/* ============================================
   TESTIMONIOS
   ============================================ */
.testimonios { overflow: hidden; }

.testimonios__title {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  line-height: .92;
  color: var(--blanco);
}
.testimonios__title-accent {
  display: block;
  color: var(--rojo);
  font-size: clamp(2.8rem, 5.2vw, 4.8rem);
}

/* Belt = overflow mask + track container */
.testimonios__belt {
  overflow: hidden;
}

.testimonios__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: reviews-left 55s linear infinite;
}

.testimonios__track:hover { animation-play-state: paused; }

.testimonios__seq {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
  padding-bottom: .5rem; /* room for card shadow */
}

@keyframes reviews-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonios__track { animation: none; }
}

/* Card */
.testi-card {
  flex-shrink: 0;
  width: clamp(280px, 28vw, 360px);
  background: var(--blanco);
  border-radius: 4px;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  cursor: default;
}

.testi-card__quote {
  font-family: var(--font-anton);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--rojo);
  display: block;
  margin-bottom: -.5rem;
}

.testi-card__text {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--negro);
  opacity: .85;
  flex: 1;
}

.testi-card__author {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.testi-card__author strong {
  font-size: .9rem;
  font-weight: 700;
  color: var(--negro);
}

.testi-card__author span {
  font-size: .78rem;
  color: var(--negro);
  opacity: .5;
  font-weight: 500;
}