*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background: #F5F5F5; color: #111111; overflow-x: hidden; }

/* ══════════════════════════════
   RESET DE LINKS — nunca azul/morado
   ══════════════════════════════ */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.nos-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--nos-badge-text, #C91C52);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.nos-badge::before {
  content: ''; display: block;
  width: 24px; height: 2px;
  background: var(--nos-badge-text, #C91C52); flex-shrink: 0;
}

.nos-btn-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: #ffffff; color: #111111;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 16px 34px;
  text-decoration: none; transition: background 0.2s, transform 0.15s;
}
.nos-btn-white:hover { background: #ebebeb; transform: translateX(2px); color: #111111; }

.nos-btn-pink {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--nos-pink, #C91C52); color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 18px 38px;
  text-decoration: none; transition: background 0.2s, transform 0.15s;
}
.nos-btn-pink:hover { filter: brightness(0.85); transform: translateX(2px); color: #ffffff; }

.nos-link-text {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #111111; text-decoration: none;
  border-bottom: 2px solid #111111; padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.nos-link-text:hover { color: var(--nos-pink, #C91C52); border-color: var(--nos-pink, #C91C52); }

/* ══════════════════════════════
   ICONOS SVG inline + imágenes PNG usadas como icono
   ══════════════════════════════ */
.nos-icon {
  width: 36px;
  height: 36px;
  color: var(--nos-pink, #C91C52);
  margin-bottom: 20px;
  display: block;
  flex-shrink: 0;
}

/*
 * Cuando el icono es una imagen PNG/SVG subida por el usuario,
 * aplicamos un filter CSS para colorearlo con el tono de acento.
 * La cadena de filtros convierte cualquier imagen a negro puro
 * y luego la tinta con sepia+saturate+hue-rotate para obtener
 * el rosa/rojo de la marca (#C91C52 ≈ hue 340°).
 * Si el cliente cambia --nos-pink en el futuro, puede ajustar
 * este filtro en consecuencia; para la gama de rosas/magentas
 * esta combinación es precisa.
 */
.nos-icon-img {
  filter:
    brightness(0) saturate(100%)
    invert(18%) sepia(96%) saturate(2800%) hue-rotate(327deg) brightness(90%) contrast(110%);
}

/* S3 usa los mismos iconos pero un poco más grandes */
.nos-s3-card .nos-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
}

/* ════════════════════════════════
   S1 — HERO
   ════════════════════════════════ */
.nos-s1-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  background-color: #111111;
  overflow: hidden;
}
.nos-s1-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(10,10,10,0.95) 0%,
    rgba(10,10,10,0.80) 45%,
    rgba(10,10,10,0.35) 75%,
    rgba(10,10,10,0.05) 100%);
  z-index: 1;
}
.nos-hero-dot {
  position: absolute; top: 36px; right: 52px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--nos-pink, #C91C52);
  z-index: 3;
  animation: nos-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes nos-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,28,82,0.7); transform: scale(1); }
  50%       { box-shadow: 0 0 0 10px rgba(201,28,82,0); transform: scale(1.15); }
}
.nos-s1-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 90px;
  background: #F5F5F5;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
  z-index: 3;
}
.nos-s1-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 140px 56px 160px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.nos-s1-h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 5.5vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #ffffff;
}
.nos-s1-h1 .nos-pink { color: var(--nos-pink, #C91C52); font-style: italic; }
.nos-s1-sub {
  font-size: 0.97rem; line-height: 1.75;
  color: rgba(255,255,255,0.60);
  max-width: 440px;
  margin: 28px 0 40px;
  font-weight: 400;
}

/* ════════════════════════════════
   S2 — NUESTRA HISTORIA
   ════════════════════════════════ */
.nos-s2-historia {
  background: #F5F5F5;
  padding: 96px 0 104px;
  position: relative; z-index: 2;
}
.nos-s2-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.nos-s2-img-col { position: relative; }
.nos-s2-img-col::after {
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  width: 100%; height: 100%;
  background: #111111;
  z-index: 0;
  transform: rotate(0.8deg);
}
.nos-s2-img-col::before {
  content: '';
  position: absolute;
  top: -14px; left: -14px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 2px solid var(--nos-pink, #C91C52);
  z-index: 2;
  transform: rotate(-1.2deg);
}
.nos-s2-img-frame {
  position: relative; z-index: 1;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.nos-s2-img-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: grayscale(12%);
  transition: filter 0.4s, transform 0.45s;
}
.nos-s2-img-frame:hover img { filter: grayscale(0%); transform: scale(1.03); }
.nos-s2-img-badge {
  position: absolute;
  bottom: -14px; right: -14px;
  z-index: 3;
  background: var(--nos-pink, #C91C52); color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 10px 18px;
}
.nos-s2-text-col { display: flex; flex-direction: column; }
.nos-s2-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  line-height: 0.93;
  text-transform: uppercase;
  color: #111111;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.nos-s2-h2 .nos-pink { color: var(--nos-pink, #C91C52); font-style: italic; display: block; }
.nos-s2-body { font-size: 0.93rem; line-height: 1.80; color: #444444; font-weight: 400; }
.nos-s2-body p + p { margin-top: 16px; }
.nos-s2-cta { margin-top: 32px; }

/* ════════════════════════════════
   S3 — POR QUÉ NOSOTROS
   ════════════════════════════════ */
.nos-s3-porque {
  background: #111111;
  padding: 96px 0 104px;
}
.nos-s3-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 56px;
}
.nos-s3-header { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.nos-s3-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 3.8vw, 4.2rem);
  line-height: 0.93;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.nos-s3-sub { font-size: 0.97rem; line-height: 1.72; color: rgba(255,255,255,0.5); font-weight: 400; }

/*
 * Grid S3: el patrón de divisores se hace con border-right en cada card,
 * eliminando el último de cada fila. Esto evita el fondo gris visible
 * cuando hay menos de 3 cards (o cualquier número no múltiplo de 3).
 *
 * Por defecto 3 columnas; con data-cols="1" o data-cols="2" se ajusta.
 * Con 1 sola card ocupa el 100% sin bordes laterales visibles.
 */
.nos-s3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: transparent; /* sin el background gris de separador */
}
/* 1 card */
.nos-s3-grid[data-cols="1"] { grid-template-columns: 1fr; }
/* 2 cards */
.nos-s3-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; }
/* 4+ cards: siempre 3 cols, la 4ª comienza una nueva fila */

.nos-s3-card {
  background: #111111;
  padding: 44px 38px 48px;
  transition: background 0.25s;
  /* Divisor lateral entre cards */
  border-right: 1px solid rgba(255,255,255,0.08);
}
/* Quitar borde al último de cada fila de 3 */
.nos-s3-grid:not([data-cols="1"]):not([data-cols="2"]) .nos-s3-card:nth-child(3n) {
  border-right: none;
}
/* Quitar borde al último de cada fila de 2 */
.nos-s3-grid[data-cols="2"] .nos-s3-card:nth-child(2n) {
  border-right: none;
}
/* Quitar borde en grid de 1 col */
.nos-s3-grid[data-cols="1"] .nos-s3-card {
  border-right: none;
}
/* Divisor horizontal entre filas */
.nos-s3-card:not(:nth-child(-n+3)) {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nos-s3-card:hover { background: #1a1a1a; }

.nos-s3-card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.nos-s3-card-text { font-size: 0.90rem; line-height: 1.75; color: rgba(255,255,255,0.5); font-weight: 400; }

/* ════════════════════════════════
   S4 — EL EQUIPO
   ════════════════════════════════ */
.nos-s4-equipo {
  background: #F5F5F5;
  padding: 96px 0 104px;
}
.nos-s4-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 56px;
}
.nos-s4-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.nos-s4-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 0.93;
  text-transform: uppercase;
  color: #111111;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.nos-s4-sub { font-size: 0.93rem; line-height: 1.75; color: #555555; font-weight: 400; }
.nos-s4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1040px; margin: 0 auto;
}
.nos-s4-card {
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.nos-s4-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.13);
}
.nos-s4-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1a1a1a;
  display: flex;
  align-items: flex-start;
}
.nos-s4-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,10,10,0) 50%,
    rgba(10,10,10,0.78) 100%);
  z-index: 1;
}
.nos-s4-photo-name {
  position: absolute;
  bottom: 20px; left: 24px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 1.6rem;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.nos-s4-photo-role {
  position: absolute;
  bottom: 20px; right: 20px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nos-pink, #C91C52);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.nos-s4-photo-num {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
}
.nos-s4-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.5s, transform 0.5s;
}
.nos-s4-card:hover .nos-s4-photo img {
  filter: grayscale(0%);
  transform: scale(1.03);
}
.nos-s4-photo-accent {
  position: absolute;
  bottom: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--nos-pink, #C91C52);
  z-index: 2;
  transition: width 0.4s ease;
}
.nos-s4-card:hover .nos-s4-photo-accent { width: 100%; }
.nos-s4-card-body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 0;
}
.nos-s4-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 18px;
}
.nos-s4-tag {
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #666666;
  background: #F5F5F5;
  padding: 5px 10px;
  border: 1px solid rgba(0,0,0,0.07);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nos-s4-card:hover .nos-s4-tag {
  background: rgba(201,28,82,0.06);
  color: var(--nos-pink, #C91C52);
  border-color: rgba(201,28,82,0.2);
}
.nos-s4-desc {
  font-size: 0.86rem; line-height: 1.78; color: #555555;
  flex: 1; font-weight: 400;
}

/* ════════════════════════════════
   S5 — VALORES
   ════════════════════════════════ */
.nos-s5-valores {
  background: #ffffff;
  padding: 96px 0 104px;
}
.nos-s5-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 56px;
}
.nos-s5-header { margin-bottom: 56px; }
.nos-s5-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 4.2vw, 4.6rem);
  line-height: 0.90;
  text-transform: uppercase;
  color: #111111;
  letter-spacing: -0.01em;
}

/*
 * Grid S5: igual que S3 pero en claro.
 * Divisores con border en lugar de background gap.
 * Se adapta al número real de items con data-cols.
 */
.nos-s5-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: transparent;
}
.nos-s5-grid[data-cols="1"] { grid-template-columns: 1fr; }
.nos-s5-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.nos-s5-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

.nos-s5-block {
  background: #ffffff;
  padding: 40px 32px 44px;
  border-top: 2px solid transparent;
  border-right: 1px solid rgba(0,0,0,0.07);
  transition: background 0.25s, border-top-color 0.25s;
}
/* Quitar borde derecho al último de cada fila según columnas */
.nos-s5-grid:not([data-cols="1"]):not([data-cols="2"]):not([data-cols="3"]) .nos-s5-block:nth-child(4n) {
  border-right: none;
}
.nos-s5-grid[data-cols="3"] .nos-s5-block:nth-child(3n) { border-right: none; }
.nos-s5-grid[data-cols="2"] .nos-s5-block:nth-child(2n) { border-right: none; }
.nos-s5-grid[data-cols="1"] .nos-s5-block { border-right: none; }

/* Divisor horizontal entre filas */
.nos-s5-block:not(:nth-child(-n+4)) {
  border-top: 1px solid rgba(0,0,0,0.07);
}
.nos-s5-grid[data-cols="3"] .nos-s5-block:not(:nth-child(-n+3)) {
  border-top: 1px solid rgba(0,0,0,0.07);
}
.nos-s5-grid[data-cols="2"] .nos-s5-block:not(:nth-child(-n+2)) {
  border-top: 1px solid rgba(0,0,0,0.07);
}
.nos-s5-grid[data-cols="1"] .nos-s5-block:not(:first-child) {
  border-top: 1px solid rgba(0,0,0,0.07);
}

.nos-s5-block:hover { background: #f8f8f8; border-top-color: var(--nos-pink, #C91C52); }

.nos-s5-block-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; color: #111111;
  letter-spacing: 0.04em; margin-bottom: 12px;
}
.nos-s5-block-text { font-size: 0.85rem; line-height: 1.75; color: #666666; font-weight: 400; }

/* ════════════════════════════════
   S6 — CTA CIERRE
   ════════════════════════════════ */
.nos-s6-cta {
  position: relative; overflow: hidden;
  min-height: 500px;
  display: flex; align-items: center;
  background-size: cover; background-position: center;
  background-color: #111111;
}
.nos-s6-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(10,10,10,0.94) 0%,
    rgba(10,10,10,0.75) 50%,
    rgba(10,10,10,0.25) 100%);
  z-index: 1;
}
.nos-s6-cta::after {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0;
  height: 110px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
}
.nos-s6-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 120px 56px 80px;
}
.nos-s6-h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 5.2vw, 5.8rem);
  line-height: 0.90;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: -0.02em;
  max-width: 700px;
  margin: 20px 0 22px;
}
.nos-s6-sub {
  font-size: 0.97rem; line-height: 1.75;
  color: rgba(255,255,255,0.5);
  max-width: 420px;
  margin-bottom: 38px;
  font-weight: 400;
}
.nos-s6-legal {
  margin-top: 14px;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

/* ══════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════ */
.nos-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.nos-reveal.nos-visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════
   RESPONSIVE — tablet (≤900px)
   ══════════════════════════════ */
@media (max-width: 900px) {
  .nos-s1-inner { grid-template-columns: 1fr; padding: 120px 24px 110px; }

  .nos-s2-historia { padding: 64px 0 72px; }
  .nos-s2-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
  .nos-s2-img-col { max-width: 380px; margin: 0 auto; }

  .nos-s3-porque { padding: 64px 0 72px; }
  .nos-s3-inner { padding: 0 24px; }
  .nos-s3-grid,
  .nos-s3-grid[data-cols="3"] { grid-template-columns: 1fr; }
  .nos-s3-card { border-right: none; border-top: 1px solid rgba(255,255,255,0.08); }
  .nos-s3-card:first-child { border-top: none; }

  .nos-s4-equipo { padding: 64px 0 72px; }
  .nos-s4-inner { padding: 0 24px; }
  .nos-s4-grid { grid-template-columns: 1fr; gap: 20px; max-width: 480px; }

  .nos-s5-valores { padding: 64px 0 72px; }
  .nos-s5-inner { padding: 0 24px; }
  .nos-s5-grid,
  .nos-s5-grid[data-cols="4"],
  .nos-s5-grid[data-cols="3"] { grid-template-columns: 1fr 1fr; }
  .nos-s5-block { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
  .nos-s5-block:nth-child(odd) { border-right: 1px solid rgba(0,0,0,0.07); }

  .nos-s6-inner { padding: 110px 24px 64px; }
  .nos-s6-cta::before { background: rgba(10,10,10,0.88); }
}

/* ══════════════════════════════
   RESPONSIVE — mobile (≤540px)
   ══════════════════════════════ */
@media (max-width: 540px) {
  .nos-s1-inner { padding: 100px 20px 90px; }
  .nos-s1-h1 { font-size: clamp(2.6rem, 10vw, 3.6rem); }
  .nos-s1-sub { font-size: 0.90rem; }

  .nos-s2-inner { padding: 0 20px; }
  .nos-s2-h2 { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }

  .nos-s3-inner { padding: 0 20px; }
  .nos-s3-card { padding: 32px 24px 36px; }

  .nos-s4-inner { padding: 0 20px; }
  .nos-s4-grid { max-width: 100%; }

  .nos-s5-grid,
  .nos-s5-grid[data-cols="4"],
  .nos-s5-grid[data-cols="3"],
  .nos-s5-grid[data-cols="2"] { grid-template-columns: 1fr; }
  .nos-s5-block { border-right: none; }
  .nos-s5-block:nth-child(odd) { border-right: none; }
  .nos-s5-inner { padding: 0 20px; }
  .nos-s5-block { padding: 30px 22px 34px; }

  .nos-s6-inner { padding: 100px 20px 56px; }
  .nos-s6-h2 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
}