/* =========================================================
   BERAW — Hoja de estilos
   Colores, tipografía y layout del sitio.
   Para cambiar un color en todo el sitio, edita las variables de :root.
   ========================================================= */

/* ---------- Tipografías (locales, en /fonts) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Paleta de marca ---------- */
:root {
  --onyx: #091016;        /* negro principal */
  --onyx-hover: #151d24;  /* negro al pasar el mouse */
  --hueso: #F2F1EE;       /* fondo claro */
  --arena: #E5D8C3;       /* claro al pasar el mouse */
  --granate: #630000;     /* rojo oscuro de marca */
  --rojo: #c9463b;        /* rojo acento (palabras en serif) */
  --grafito: #3B4247;     /* texto secundario sobre claro */

  --gris-calido: #8b857c;
  --gris-tab: #8a8377;
  --gris-sobre-oscuro: #a9a39a;
  --gris-legal: #77716a;
  --linea-clara: rgba(9,16,22,.15);
  --linea-oscura: rgba(242,241,238,.15);

  --ancho-max: 1200px;
  --margen: 26px;

  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--onyx);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--sans); background: none; border: none; padding: 0; cursor: pointer; color: inherit; }
::selection { background: var(--granate); color: var(--hueso); }

/* Titulares grandes y palabras en serif itálica */
.titular { font-weight: 900; line-height: .87; letter-spacing: -.03em; text-wrap: balance; margin: 0; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.acento { color: var(--rojo); }
.acento-granate { color: var(--granate); }

/* Link con subrayado de color */
.link-linea { font-weight: 700; border-bottom: 2px solid var(--granate); padding-bottom: 4px; }
.link-linea--rojo { border-bottom-color: var(--rojo); }
.link-linea--hueso { border-bottom-color: var(--hueso); }

/* Contenedores */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }

/* Animaciones */
@keyframes subir { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
[data-reveal] { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal]:not(.visible) { opacity: 0; transform: translateY(34px); }

/* Tira de película (decorativa) */
.tira { height: 13px; background: repeating-linear-gradient(90deg, rgba(9,16,22,.12) 0 9px, transparent 9px 14px); }
.tira--chica { height: 9px; background: repeating-linear-gradient(90deg, rgba(242,239,232,.18) 0 6px, transparent 6px 10px); }

/* Marca de visor (las 4 esquinas + punto) */
.visor { position: relative; flex: 0 0 auto; display: inline-block; }
.visor i { position: absolute; width: 30%; height: 30%; border: 0 solid var(--granate); transition: top .3s, right .3s, bottom .3s, left .3s; }
.visor i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.visor i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.visor i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.visor i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.visor b { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--granate); transform: translate(-50%,-50%); }

/* =========================================================
   CURSOR PERSONALIZADO (solo en computadores con mouse)
   ========================================================= */
.cursor {
  position: fixed; top: 0; left: 0; width: 38px; height: 38px; z-index: 9999;
  pointer-events: none; opacity: 0; will-change: transform;
  transition: width .18s ease, height .18s ease, opacity .2s ease;
}
.cursor i { position: absolute; width: 9px; height: 9px; border: 0 solid var(--granate); }
.cursor i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.cursor i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.cursor i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.cursor i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.cursor b { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--granate); transform: translate(-50%,-50%); }
.cursor.foco { width: 56px; height: 56px; }
.cursor.play { width: 80px; height: 80px; }
@media (pointer: fine) {
  .con-cursor, .con-cursor * { cursor: none !important; }
}

/* =========================================================
   RIEL DE NAVEGACIÓN (puntos a la derecha)
   ========================================================= */
.riel { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 16px; }
.riel a { width: 6px; height: 6px; border-radius: 50%; background: rgba(9,16,22,.25); display: block; transition: transform .3s, background .3s; }
.riel a.activo { background: var(--granate); transform: scale(1.7); }

/* =========================================================
   NAVEGACIÓN SUPERIOR
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--margen);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(9,16,22,.55), rgba(9,16,22,0));
}
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; gap: 30px; align-items: center; font-size: 14px; font-weight: 600; }
.nav__links a { color: var(--hueso); opacity: .85; }
.nav__links a.actual { opacity: 1; font-weight: 800; }
.nav__links a.nav__cta { opacity: 1; border-bottom: 1px solid var(--granate); padding-bottom: 2px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 150px max(var(--margen), calc((100% - 1500px) / 2 + var(--margen))) 90px;
  background: var(--onyx); color: var(--hueso); overflow: hidden;
}
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; opacity: .7; filter: grayscale(.15) contrast(1.05); pointer-events: none;
  transition: opacity 1.2s ease;
}
.hero__foto.oculto { opacity: 0; }
.hero__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(9,16,22,.94) 26%, rgba(9,16,22,.55) 55%, rgba(9,16,22,.12) 100%); }
.hero__contenido { position: relative; z-index: 1; max-width: 920px; }
.hero h1 { font-size: clamp(34px, 6.2vw, 74px); line-height: 1.1; animation: subir .9s .12s both; }
.hero__acciones { display: flex; gap: 40px; margin-top: 44px; align-items: baseline; flex-wrap: wrap; animation: subir 1s .28s both; }
.hero__acciones .link-linea { font-size: 16px; }
.hero__acciones .secundario { font-size: 14px; color: var(--gris-calido); }

/* =========================================================
   ENCABEZADO DE PÁGINAS INTERNAS (Producción / Rental)
   ========================================================= */
.pagina-hero {
  position: relative; overflow: hidden; background: var(--onyx); color: var(--hueso);
  padding: 116px max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen))) 64px;
}
.pagina-hero--granate { background: var(--granate); }
.pagina-hero__foto { position: absolute; right: 0; bottom: 0; width: min(40vw, 460px); height: 100%; object-fit: cover; opacity: .35; filter: grayscale(.2); pointer-events: none; }
.pagina-hero__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--onyx) 50%, rgba(9,16,22,0)); }
.pagina-hero--granate .pagina-hero__velo { background: linear-gradient(90deg, var(--granate) 50%, rgba(99,0,0,0)); }
.pagina-hero__contenido { position: relative; z-index: 1; max-width: 820px; }
.pagina-hero__volver { display: inline-block; font-size: 14px; font-weight: 600; color: var(--gris-sobre-oscuro); margin-bottom: 20px; }
.pagina-hero--granate .pagina-hero__volver { color: #e6c9c6; }
.pagina-hero h1 { font-size: clamp(48px, 9vw, 120px); line-height: .95; animation: subir .9s .1s both; }
.pagina-hero__bajada { max-width: 560px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--gris-sobre-oscuro); margin: 28px 0 0; animation: subir 1s .25s both; }
.pagina-hero--granate .pagina-hero__bajada { color: #e6c9c6; }
.pagina-hero + .produccion { padding-top: 30px; }

/* =========================================================
   PANTALLAS DIVIDIDAS (Producción / Rental, cierre, diferencial)
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.zona { position: relative; overflow: hidden; transition: background .4s; }
.zona > a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 60px 44px; }
.zona__etiqueta { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.zona__cta { font-size: 15px; font-weight: 600; opacity: .55; transition: opacity .3s; }
.zona:hover .zona__cta { opacity: 1; }

.mundos { min-height: 0; }
.mundos .zona > a { padding: 64px 44px 60px; }
.mundos .titular { font-size: clamp(30px, 5.5vw, 68px); margin-bottom: 22px; }
.zona--oscura { background: var(--onyx); color: var(--hueso); }
.zona--oscura:hover { background: var(--onyx-hover); }
.zona--clara { background: var(--hueso); color: var(--onyx); }
.zona--clara:hover { background: var(--arena); }

/* =========================================================
   PORTAFOLIO
   ========================================================= */
.portafolio { max-width: 1500px; margin: 0 auto; padding: 120px var(--margen) 60px; }
.portafolio h2 { font-size: clamp(40px, 7vw, 96px); }
.portafolio__bajada { font-size: clamp(18px, 2.4vw, 26px); color: var(--grafito); margin: 10px 0 0; }
.portafolio__tabs { display: flex; gap: 28px; flex-wrap: wrap; margin: 36px 0 50px; }
.portafolio__tab { text-align: left; }
.portafolio__tab span { font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--onyx); }
.portafolio__tab::after { content: ''; display: block; margin-top: 8px; width: 85px; height: 8px; background: repeating-linear-gradient(90deg, rgba(9,16,22,.18) 0 5px, transparent 5px 8px); }
.portafolio__tab.activo span { color: var(--granate); }
.portafolio__tab.activo::after { background: repeating-linear-gradient(90deg, var(--granate) 0 5px, transparent 5px 8px); }

.portafolio__grilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.portafolio__visor {
  grid-column: 1 / 8; position: relative; display: block; min-height: 560px;
  background: var(--onyx) center / cover no-repeat; transition: background-image .3s ease;
}
/* Video del portafolio: cubre todo el recuadro como si fuera una imagen */
.portafolio__visor { overflow: hidden; }
.portafolio__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.portafolio__video iframe {
  position: absolute; top: 50%; left: 50%; border: 0;
  width: max(100%, calc(100cqh * 16 / 9)); height: max(100%, calc(100cqw * 9 / 16));
  transform: translate(-50%, -50%);
}
.portafolio__visor { container-type: size; }
.portafolio__lista { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.trabajo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--linea-clara); color: var(--gris-calido);
  transition: color .2s, padding-left .2s;
}
.trabajo:hover { padding-left: 8px; color: var(--onyx); }
.trabajo.activo { color: var(--onyx); }
.trabajo__titulo { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.trabajo__cliente { font-size: 11px; color: var(--grafito); font-weight: 700; }
.portafolio__behance { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--granate); }

/* =========================================================
   CLIENTES (cinta en movimiento)
   ========================================================= */
.tira-seccion { padding: 20px var(--margen) 6px; overflow: hidden; }
.clientes { padding: 26px 0 44px; overflow: hidden; }
.clientes__titulo { font-size: 13px; font-weight: 700; color: var(--grafito); text-align: center; margin-bottom: 26px; }
.clientes__cinta { display: flex; width: max-content; will-change: transform; }
.clientes__grupo { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.cliente-logo { width: auto; opacity: .88; filter: brightness(0); transition: filter .3s, opacity .3s; }
.cliente-logo:hover { filter: none; opacity: 1; }
.cliente-texto { font-weight: 900; font-size: 38px; letter-spacing: -.01em; color: #dcd4c2; white-space: nowrap; }
.clientes__sep { font-weight: 900; font-size: 38px; color: #dcd4c2; }

/* =========================================================
   DIFERENCIAL (Imagen / Interpretación + equipo)
   ========================================================= */
.diferencial { background: var(--onyx); color: var(--hueso); position: relative; overflow: hidden; }
.diferencial__intro { max-width: 1000px; margin: 0 auto; padding: 110px var(--margen) 70px; text-align: center; }
.diferencial__intro h2 { font-size: clamp(30px, 5.5vw, 62px); }
.diferencial__sub { font-size: clamp(20px, 2.6vw, 30px); color: #e3ddd3; margin: 22px 0 0; }
.diferencial__frase { max-width: 520px; margin: 18px auto 0; font-size: 16px; line-height: 1.55; color: var(--gris-sobre-oscuro); }
.diferencial__persona { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(242,241,238,.2); max-width: 340px; }
.diferencial__persona strong { display: block; font-weight: 800; font-size: 18px; }
.diferencial__persona span { display: block; font-size: 13px; color: #e79086; font-weight: 700; margin-top: 4px; }
.diferencial__split { min-height: 72vh; position: relative; }
.diferencial__zona { position: relative; overflow: hidden; }
.diferencial__zona--imagen { background: #0b0f13; }
.diferencial__zona--interp { background: #171012; }
.diferencial__zona img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; transition: opacity .45s; }
.diferencial__zona::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,16,22,0) 40%, rgba(9,16,22,.75)); pointer-events: none; }
.diferencial__zona--imagen img { object-position: center 20%; }
.diferencial__zona--interp img { object-position: center 25%; }
.diferencial__zona:hover img { opacity: .7; }
.diferencial__split:has(.diferencial__zona:hover) .diferencial__zona:not(:hover) img { opacity: .16; }
.diferencial__texto { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 50px 44px; }
.diferencial__palabras { display: flex; flex-direction: column; gap: 6px; font-size: clamp(18px, 2.6vw, 26px); font-weight: 800; }
/* =========================================================
   FRANJA GRANATE (mirada semiótica)
   ========================================================= */
.franja { background: var(--granate); color: var(--hueso); padding: 100px var(--margen); text-align: center; }
.franja__in { max-width: 760px; margin: 0 auto; }
.franja h3 { font-size: clamp(28px, 5vw, 50px); margin-bottom: 26px; }
.franja p { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: #e6c9c6; max-width: 560px; margin: 0 auto; text-wrap: balance; }
.franja p.franja__lineas { max-width: none; }
.franja__lineas span { display: block; }
@media (min-width: 600px) { .franja__lineas span { white-space: nowrap; } }

/* =========================================================
   PRODUCCIÓN (planes)
   ========================================================= */
.produccion { background: var(--onyx); color: var(--hueso); padding: 110px 0 40px; position: relative; overflow: hidden; }
.produccion__foto { position: absolute; left: 0; top: 0; width: min(30vw, 360px); height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.2); }
.produccion__velo { position: absolute; inset: 0; background: linear-gradient(90deg, var(--onyx) 22%, rgba(9,16,22,.4) 40%, rgba(9,16,22,0) 55%); }
.produccion .contenedor { position: relative; }
.produccion h2 { font-size: clamp(40px, 7vw, 96px); margin-bottom: 20px; }
.produccion__p { max-width: 480px; color: var(--gris-sobre-oscuro); font-size: 16px; line-height: 1.5; margin: 0 0 12px; }
.produccion__p:last-of-type { margin-bottom: 50px; }

.planes { border-top: 1px solid var(--linea-oscura); }
.plan { border-bottom: 1px solid var(--linea-oscura); }
.plan__boton {
  width: 100%; text-align: left; padding: 26px 0; display: flex; align-items: baseline; justify-content: space-between;
  color: rgba(242,241,238,.5); font-weight: 900; font-size: clamp(24px, 4.6vw, 50px); letter-spacing: -.02em; transition: color .2s;
}
.plan__boton::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(242,241,238,.3); flex: 0 0 auto; }
.plan.abierto .plan__boton { color: var(--hueso); }
.plan.abierto .plan__boton::after { background: var(--rojo); }
.plan__detalle { display: none; padding: 0 0 46px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; }
.plan.abierto .plan__detalle { display: grid; }
.plan__frase { margin: 0; font-size: clamp(18px, 2vw, 23px); line-height: 1.4; color: #e3ddd3; max-width: 360px; }
.plan__item { padding: 10px 0; border-bottom: 1px solid rgba(242,241,238,.08); font-size: 15px; color: #cdc7bd; }
.plan__detalle .link-linea { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--hueso); }
.produccion__condiciones { font-size: 12.5px; color: var(--gris-legal); margin: 26px 0 0; line-height: 1.7; }

.proceso { padding-top: 80px; padding-bottom: 60px; }
.proceso__fila { display: flex; align-items: center; }
.proceso__paso { font-weight: 900; font-size: clamp(16px, 2.6vw, 24px); }
.proceso__fila .tira--chica { flex: 1; margin: 0 16px; }

/* =========================================================
   RENTAL
   ========================================================= */
.rental { background: var(--hueso); color: var(--onyx); }
.rental .contenedor { padding-top: 100px; padding-bottom: 90px; position: relative; }
.rental__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--granate); }
.rental__marca .visor { width: 16px; height: 16px; }
.rental h2 { font-size: clamp(40px, 7vw, 96px); margin-bottom: 16px; }
.rental__nota { font-size: 13px; color: var(--grafito); margin-bottom: 50px; }
.rental__subtitulo { font-size: 13px; font-weight: 700; color: var(--grafito); margin-bottom: 6px; }

.destacados { border-top: 1px solid var(--linea-clara); }
.destacado { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--linea-clara); transition: padding-left .25s; }
.destacado:hover { padding-left: 10px; }
.destacado__nombre { font-weight: 800; font-size: clamp(19px, 2.8vw, 30px); letter-spacing: -.01em; }
.destacado__precio { text-align: right; white-space: nowrap; line-height: 1.1; }
.destacado__precio strong { font-weight: 800; font-size: 22px; }
.iva { font-size: 12px; font-weight: 600; color: var(--granate); }

.kits { margin: 70px 0 20px; }
.kits .rental__subtitulo { margin-bottom: 18px; }
.kits__tabs { display: flex; gap: 28px; margin-bottom: 34px; }
.kits__tab { font-size: 14px; font-weight: 700; color: var(--gris-tab); border-bottom: 2px solid transparent; padding-bottom: 6px; }
.kits__tab.activo { color: var(--onyx); border-bottom-color: var(--granate); }
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; align-items: end; padding: 36px 0 0; }
.kit h3 { font-size: clamp(32px, 6vw, 76px); }
.kit__item { padding: 10px 0; border-bottom: 1px solid rgba(9,16,22,.1); font-size: 15px; color: #3d3833; }
.kit__pie { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.kit__precio strong { font-size: 26px; font-weight: 800; }
.kit__pie .link-linea { font-size: 14px; }

.catalogo__toggle { font-weight: 800; font-size: 22px; border-bottom: 2px solid var(--granate); }
.catalogo { margin-top: 90px; }
.catalogo__titulo { font-size: clamp(32px, 5vw, 60px); margin-bottom: 28px; }
.catalogo[hidden] { display: none; }
.catalogo__filtros { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.catalogo__filtro { color: var(--gris-tab); padding: 6px 0; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; }
.catalogo__filtro.activo { color: var(--onyx); border-bottom-color: var(--granate); }
.catalogo__lista { border-top: 1px solid rgba(9,16,22,.12); }
.equipo { padding: 15px 2px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid rgba(9,16,22,.1); }
.equipo__info { display: flex; flex-direction: column; gap: 2px; }
.equipo__nombre { font-weight: 700; font-size: 15px; }
.equipo__cat { font-size: 11px; color: var(--grafito); font-weight: 600; }
.equipo__acciones { display: flex; align-items: baseline; gap: 20px; }
.equipo__precio { font-size: 14.5px; font-weight: 800; }
.equipo__precio .iva { font-size: 11.5px; }
.equipo__reservar { font-size: 12.5px; font-weight: 700; border-bottom: 1px solid rgba(9,16,22,.35); color: var(--granate); }

/* =========================================================
   ARMAR KIT / CROSS SELL
   ========================================================= */
.armar { background: var(--granate); padding: 110px var(--margen); position: relative; overflow: hidden; }
.armar__foto { position: absolute; right: -30px; bottom: -30px; width: min(34vw, 380px); opacity: .22; filter: grayscale(.3); object-fit: cover; }
.armar__in { max-width: var(--ancho-max); margin: 0 auto; text-align: center; position: relative; color: var(--hueso); }
.armar h3 { font-size: clamp(34px, 7vw, 88px); margin-bottom: 18px; }
.armar p { color: #e6c9c6; font-size: 16px; margin: 0 0 24px; }
.armar .link-linea { font-size: 16px; padding-bottom: 6px; }

.cruce { background: var(--onyx); padding: 100px var(--margen); text-align: center; }
.cruce a { font-size: clamp(24px, 4.4vw, 54px); display: block; color: var(--hueso); }

/* =========================================================
   NOSOTROS
   ========================================================= */
.nosotros { max-width: 1400px; margin: 0 auto; padding: 120px var(--margen) 80px; }
.nosotros__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.nosotros__texto { font-size: clamp(22px, 3vw, 38px); line-height: 1.3; font-weight: 500; margin: 0; letter-spacing: -.01em; text-wrap: pretty; }
.nosotros__equipo { display: flex; flex-direction: column; gap: 22px; }
.nosotros__persona { border-top: 1px solid var(--linea-clara); padding-top: 18px; }
.nosotros__persona strong { display: block; font-weight: 800; font-size: 20px; }
.nosotros__persona span { display: block; font-size: 13px; color: var(--granate); font-weight: 700; margin-top: 4px; }

/* =========================================================
   CIERRE
   ========================================================= */
.cierre { min-height: 0; }
.cierre .zona > a { justify-content: center; padding: 56px 44px; }
.cierre .titular { font-size: clamp(26px, 3.6vw, 44px); margin-bottom: 10px; }
.cierre p { font-size: 15px; margin: 0; max-width: 320px; }
.cierre .zona--oscura p { color: var(--gris-sobre-oscuro); }
.cierre .zona--clara p { color: var(--grafito); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--onyx); color: var(--hueso); padding: 90px var(--margen) 50px; }
.footer__in { max-width: 1400px; margin: 0 auto; }
.footer__marca { display: flex; align-items: center; gap: 16px; margin-bottom: 60px; }
.footer__marca .visor { width: 22px; height: 22px; }
.footer__marca .visor i { border-color: var(--rojo); width: 6px; height: 6px; }
.footer__marca .visor i:nth-child(1) { top: 2px; left: 2px; }
.footer__marca .visor i:nth-child(2) { top: 2px; right: 2px; }
.footer__marca .visor i:nth-child(3) { bottom: 2px; left: 2px; }
.footer__marca .visor i:nth-child(4) { bottom: 2px; right: 2px; }
.footer__marca .visor:hover i:nth-child(1) { top: -2px; left: -2px; }
.footer__marca .visor:hover i:nth-child(2) { top: -2px; right: -2px; }
.footer__marca .visor:hover i:nth-child(3) { bottom: -2px; left: -2px; }
.footer__marca .visor:hover i:nth-child(4) { bottom: -2px; right: -2px; }
.footer__marca .visor b { width: 4px; height: 4px; background: var(--rojo); }
.footer__marca h2 { font-size: clamp(40px, 8vw, 110px); }
.footer__redes { display: flex; flex-wrap: wrap; gap: 40px 60px; font-size: 18px; font-weight: 700; margin-bottom: 70px; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--gris-legal); font-weight: 600; border-top: 1px solid rgba(242,239,232,.12); padding-top: 24px; }

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================= */
.wa-flotante {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; align-items: center; gap: 0;
  color: var(--hueso);
}
.wa-flotante__icono {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rojo);
  box-shadow: 0 10px 28px rgba(9,16,22,.35);
  transition: transform .25s ease, background .25s ease;
}
.wa-flotante__icono svg { width: 27px; height: 27px; fill: currentColor; }
/* Pulso suave para llamar la atención */
.wa-flotante__icono::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--rojo); animation: wa-pulso 2.6s ease-out infinite;
}
@keyframes wa-pulso { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.wa-flotante__texto {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-size: 14px; font-weight: 700; background: var(--onyx); color: var(--hueso);
  padding: 10px 0; border-radius: 999px; margin-right: 10px;
  border: 1px solid rgba(242,241,238,.15);
  transition: max-width .35s ease, opacity .25s ease, padding .35s ease;
}
.wa-flotante:hover .wa-flotante__icono, .wa-flotante:focus-visible .wa-flotante__icono { transform: scale(1.06); background: var(--granate); }
.wa-flotante:hover .wa-flotante__texto, .wa-flotante:focus-visible .wa-flotante__texto { max-width: 140px; opacity: 1; padding: 10px 16px; }

/* =========================================================
   RESPONSIVE (celular y tablet)
   ========================================================= */
@media (max-width: 900px) {
  .riel, .nav__links { display: none; }
  .split { grid-template-columns: 1fr; }
  .split > div { min-height: 60vh; }
  .cierre.split > div, .mundos.split > div { min-height: 0; }
  .portafolio__visor, .portafolio__lista { grid-column: 1 / -1; }
  .portafolio__visor { min-height: 60vw; }
  /* En celular no hay hover: las fotos se ven un poco más */
  .diferencial__zona img { opacity: .45; }
  .clientes__grupo { gap: 44px; padding-right: 44px; }
  .cliente-texto, .clientes__sep { font-size: 28px; }
}
@media (max-width: 560px) {
  .zona > a, .cierre .zona > a { padding: 44px var(--margen); }
  .diferencial__texto { padding: 36px var(--margen); }
  .proceso__fila .tira--chica { margin: 0 8px; }
  .wa-flotante { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .wa-flotante__icono { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal]:not(.visible) { opacity: 1; transform: none; }
}