/* =============================================================
   GRUPO PROMEDIA · custom.css  ·  REPLANTEAMIENTO B/N
   Lenguaje: blanco/negro absoluto, tipografía protagonista,
   mezcla Lab Grotesque (sans) + Instrument Serif (italic),
   revelados por scroll, saltos de contraste.
   ============================================================= */

/* ---------- 0. FUENTES (Lab Grotesque local) ---------- */
@font-face { font-family:'Lab Grotesque'; src:url('font/lab-grotesque/LabGrotesque-Light.woff2') format('woff2'),url('font/lab-grotesque/LabGrotesque-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Lab Grotesque'; src:url('font/lab-grotesque/LabGrotesque-Regular.woff2') format('woff2'),url('font/lab-grotesque/LabGrotesque-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lab Grotesque'; src:url('font/lab-grotesque/LabGrotesque-Medium.woff2') format('woff2'),url('font/lab-grotesque/LabGrotesque-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Lab Grotesque'; src:url('font/lab-grotesque/LabGrotesque-Bold.woff2') format('woff2'),url('font/lab-grotesque/LabGrotesque-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lab Grotesque'; src:url('font/lab-grotesque/LabGrotesque-Black.woff2') format('woff2'),url('font/lab-grotesque/LabGrotesque-Black.woff') format('woff'); font-weight:900; font-style:normal; font-display:swap; }
/* Fuente del contador del preloader (misma que el sitio original) */
@font-face { font-family:'All Round Gothic W03 Demi Obl'; src:url('font/all-round-gothic/all-round-gothic-w03-demi-obl.woff2') format('woff2'),url('font/all-round-gothic/all-round-gothic-w03-demi-obl.woff') format('woff'),url('font/all-round-gothic/all-round-gothic-w03-demi-obl.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- 1. SISTEMA ---------- */
:root {
  /* Blanco / negro absoluto */
  --ink:   #000;
  --paper: #fff;
  --paper-soft: #f4f4f4;     /* gris muy tenue para fondos claros alternos */
  --line:  rgba(0,0,0,.14);
  --line-on-dark: rgba(255,255,255,.18);

  --wrap: 1600px;
  --wrap-text: 1100px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* Display fluido */
  --fs-mega:  clamp(4rem, 19vw, 22rem);     /* nombre monumental, contactar, footer */
  --fs-giant: clamp(3.25rem, 13vw, 13rem);  /* gracias, contador, did */
  --fs-huge:  clamp(2.75rem, 8vw, 8rem);    /* hero, servicio rows */
  --fs-xl:    clamp(2rem, 4.5vw, 4rem);     /* labels de sección */

  --fs-lead: clamp(1.4rem, 2.4vw, 2.5rem);  /* manifiesto */
  --fs-body: clamp(1rem, 1.15vw, 1.2rem);
  --fs-sub:  clamp(1rem, 1.4vw, 1.4rem);
  --fs-meta: .8rem;

  --track-tight:  -0.03em;
  --track-tighter:-0.05em;

  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; border:0 solid; }
html { -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

html, body {
  font-family:'Lab Grotesque', sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* Tipo display brutalista */
.display {
  font-weight:900;
  line-height:.86;
  letter-spacing:var(--track-tighter);
  text-wrap:balance;
}
/* La mezcla: cualquier <em> dentro de un display es serif italic */
.display em, .manifesto-title em {
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:0;
}

/* Utilidades */
.position-relative { position:relative; }
.no-button { background:none; border:0; cursor:pointer; font:inherit; color:inherit; }

/* ---------- 2. SECCIONES + contraste ---------- */
.section { position:relative; min-height:100svh; }
.section-centered { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.section-light { background:var(--paper); color:var(--ink); }
.section-dark  { background:var(--ink);  color:var(--paper); }
.section-no-overflow { overflow:hidden; }

/* ---------- 3. CABECERAS DE SECCIÓN ---------- */
.section-head { display:flex; align-items:baseline; gap:1rem; padding:0 0 clamp(1.5rem,4vw,3rem); }
.section-head--center { justify-content:center; text-align:center; }
.section-num { font-size:var(--fs-meta); letter-spacing:.25em; opacity:.5; font-weight:500; }
.section-label { font-size:var(--fs-xl); }

/* ---------- 4. FLECHA SCROLL ---------- */
.go-next-section {
  position:absolute; bottom:clamp(20px,3.5vh,40px); left:50%;
  transform:translateX(-50%);
  font-size:var(--fs-meta); letter-spacing:.25em; text-transform:uppercase;
  opacity:.55; display:flex; align-items:center; gap:.5rem;
}
.go-next-section span { position:relative; }
/* Enlace discreto "ver vídeo" en el hero (abajo a la derecha) */
.hero-ver-video {
  position:absolute; bottom:clamp(20px,3.5vh,40px); right:clamp(20px,4vw,56px); z-index:16;
  background:none; border:0; cursor:pointer; color:var(--paper);
  font-family:inherit; font-size:var(--fs-meta); letter-spacing:.18em; text-transform:uppercase;
  opacity:.6; display:inline-flex; align-items:center; gap:.55rem; padding:.3rem 0;
  transition:opacity .3s ease;
}
.hero-ver-video:hover { opacity:1; }
.hero-ver-video-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border:1px solid currentColor; border-radius:50%;
  font-size:.65em; padding-left:.15em;
}
@media (max-width:575px){
  .hero-ver-video { right:50%; transform:translateX(50%); bottom:clamp(60px,9vh,90px); }
}
.go-next-section::after { content:"↓"; display:inline-block; animation:bob 1.6s var(--ease) infinite; }
.go-next-section:hover { opacity:1; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* ---------- 5. NAVBAR ---------- */
.main-navbar {
  position:fixed; top:clamp(14px,2.5vw,28px); left:50%; transform:translateX(-50%);
  width:min(calc(100% - 28px), 1600px);
  display:flex; align-items:center; justify-content:space-between;
  z-index:9000; opacity:0; transition:opacity .5s ease, background .45s ease, padding .45s ease, top .45s ease;
}
.main-navbar.navbar-visible { opacity:1; }
/* Banda translúcida fija arriba: SOLO en las secciones que ya muestran el logo.
   Estira el navbar a todo el ancho y le pone un fondo claro semitransparente con
   desenfoque, a modo de prueba (mismo espíritu que la barra de móvil). */
.main-navbar.nav-banda {
  top:0; left:0; transform:none;
  width:100%;
  padding:10px clamp(20px,4vw,40px);
  background:rgba(255,255,255,.62);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
/* Con banda clara, la hamburguesa siempre en tinta oscura (legible sobre el fondo claro),
   incluso si la sección también está marcada como fondo oscuro (caso contacto). */
.main-navbar.nav-banda .menu-toggle span,
.main-navbar.nav-banda.nav-oscuro .menu-toggle span { background:var(--ink); }
/* El logo se oculta en secciones sin logo (hero, contador, portfolio) */
.navbar-logo { transition:opacity .45s ease, transform .45s ease; }
.main-navbar.logo-oculto .navbar-logo { opacity:0; transform:translateY(-12px); pointer-events:none; }
.img-logo { height:clamp(34px,3.6vw,46px); width:auto; display:block; transform-origin:center bottom; will-change:transform,opacity; }
/* Entrada suave: fade + subida progresiva (sin rebote) */
@keyframes logo-entrada-fade {
  0%   { transform:translateY(16px); opacity:0; }
  100% { transform:translateY(0);    opacity:1; }
}
.img-logo.logo-entrada { animation:logo-entrada-fade 1s cubic-bezier(.22,.61,.36,1) both; }
/* Flotación al hover: leve y recta (poca oscilación, sin rotación) */
@keyframes logo-flota {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-4px); }
}
.navbar-logo:hover .img-logo { animation:logo-flota 2.4s ease-in-out infinite; }
.menu-toggle { width:46px; height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:none; cursor:pointer; }
.menu-toggle span { display:block; width:26px; height:2px; background:var(--ink); transition:transform .3s var(--ease), background .4s ease; }
.main-navbar.nav-oscuro .menu-toggle span { background:#fff; }
.menu-toggle:hover span:first-child { transform:translateY(1px); }

/* ---------- 6. MENÚ FULL PAGE ---------- */
.menu-full-page {
  position:fixed; inset:0; background:var(--ink); z-index:9500;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .5s ease, visibility .5s ease;
}
.menu-full-page.open { visibility:visible; opacity:1; }
.bg-menu-full-page { position:absolute; inset:0; }
.bg-menu-full-page .video-menu { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; filter:grayscale(1) contrast(1.05); }
.overlay-video { position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.main-nav { position:relative; z-index:2; }
.menu-full-page ul { list-style:none; }
.menu-full-page li { overflow:hidden; }
.menu-link {
  display:flex; align-items:baseline; gap:1rem;
  color:var(--paper); font-weight:900; letter-spacing:var(--track-tight);
  font-size:clamp(2.2rem,7vw,4.5rem); line-height:1.06;
  transform:translateY(110%); transition:transform .6s var(--ease), opacity .3s ease;
}
.menu-full-page.open .menu-link { transform:translateY(0); }
.menu-index { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; font-size:.4em; opacity:.55; }
.menu-link:hover { opacity:.55; }
.menu-full-page li:nth-child(1) .menu-link{transition-delay:.06s}
.menu-full-page li:nth-child(2) .menu-link{transition-delay:.10s}
.menu-full-page li:nth-child(3) .menu-link{transition-delay:.14s}
.menu-full-page li:nth-child(4) .menu-link{transition-delay:.18s}
.menu-full-page li:nth-child(5) .menu-link{transition-delay:.22s}
.menu-full-page li:nth-child(6) .menu-link{transition-delay:.26s}
.menu-full-page li:nth-child(7) .menu-link{transition-delay:.30s}
.menu-full-page li:nth-child(8) .menu-link{transition-delay:.34s}
.close-menu { position:absolute; top:1.6rem; right:1.6rem; width:46px; height:46px; background:none; cursor:pointer; z-index:3; }
.close-menu span { position:absolute; top:50%; left:50%; width:28px; height:2px; background:#fff; }
.close-menu span:first-child { transform:translate(-50%,-50%) rotate(45deg); }
.close-menu span:last-child  { transform:translate(-50%,-50%) rotate(-45deg); }


/* ---------- 7. PRELOADER (original) ---------- */
.preloader { position:absolute; inset:0; background-color:#000; z-index:10; }
.preloader-inner { position:relative; width:100%; height:100%; }
.preloader-logo, .preloader-texto { width:250px; max-width:80vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; }
.preloader-contador { font-family:'All Round Gothic W03 Demi Obl','Lab Grotesque',sans-serif; color:rgba(155,205,224,.2); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; font-weight:normal; font-style:italic; font-size:200px; opacity:0; }
@keyframes reveal { 0%{opacity:0; transform:translate(-50%,-50%) scale(1);} 70%{opacity:1; transform:translate(-50%,-50%) scale(1.2);} 100%{opacity:1; transform:translate(-50%,-50%) scale(1);} }
@keyframes spin-in { 0%{opacity:0; transform:translate(-50%,-50%) rotate(0deg);} 20%{opacity:1;} 100%{opacity:1; transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes revealContador { 0%{opacity:0;} 100%{opacity:1;} }

/* ---------- 8. HERO (original: texto con degradado + clip:text, vídeo) ---------- */
#header { height:100vh; background:#000; overflow:hidden; }
.header-text { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; overflow:hidden; background-color:#000; }
.header-text.activo { z-index:11; }
.h2-wrapper { will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.h2-wrapper h2 { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.header-text h2 {
    font-size:min(15vw, 22vh); z-index:1; line-height:1; white-space:nowrap;
    -webkit-user-select:none; user-select:none; cursor:initial;
    color:#fff; font-weight:700; letter-spacing:var(--track-tight);
    perspective:800px;
}
.header-text h2 .hero-word { display:inline-block; }
.header-text h2 span { display:inline-block; }
.header-text h2 .hero-word > span { transition:color .25s ease; cursor:default; }
.header-text h2 .hero-word > span:hover { color:#8ab4c4; }
.header-text h2 .amp { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }

.header-video { position:absolute; top:0; left:0; right:0; bottom:0; background:#000; z-index:11; opacity:1 !important; visibility:hidden; }
.header-video .video-player { height:100%; width:100%; object-fit:cover; }

.open-presentacion-full { position:absolute; left:50%; bottom:120px; transform:translateX(-50%); width:64px; height:64px; border:2px solid rgba(255,255,255,.6); border-radius:50%; background:none; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:13; }
.open-presentacion-full svg { width:24px; fill:#fff; margin-left:3px; }

/* La palabra "scroll" abajo, visible */
#header .go-next-section { color:var(--paper); z-index:15; }

/* ---------- 9. SOMOS / MANIFIESTO ---------- */
.manifesto { width:100%; max-width:var(--wrap-text); margin:0 auto; padding:0 var(--gutter); }
#somos .section-head { justify-content:center; margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.manifesto-title { font-size:var(--fs-lead); font-weight:700; line-height:1.08; letter-spacing:var(--track-tight); text-align:center; }
.manifesto-text { margin-top:clamp(2rem,5vw,3.5rem); font-size:var(--fs-body); line-height:1.6; font-weight:300; max-width:60ch; opacity:.85; margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- 10. SERVICIOS (lista índice) ---------- */
#servicios { display:flex; align-items:center; }
.servicios-wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:clamp(6rem,12vh,9rem) var(--gutter); }
.servicios-list { list-style:none; }
.servicio-row {
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(1rem,3vw,3rem); align-items:center;
  padding:clamp(1.1rem,2.5vw,2rem) 0; border-top:1px solid var(--line-on-dark);
  position:relative; cursor:pointer;
}
.servicio-row:last-child { border-bottom:1px solid var(--line-on-dark); }
.servicio-idx { grid-row:1; font-size:var(--fs-meta); letter-spacing:.2em; opacity:.5; align-self:start; padding-top:.6em; }
.servicio-name { grid-row:1; grid-column:2; font-size:var(--fs-huge); transition:opacity .3s ease; }
.servicio-desc {
  grid-column:2; max-width:55ch; font-size:var(--fs-body); line-height:1.5; opacity:0;
  max-height:0; overflow:hidden; transition:max-height .55s var(--ease), opacity .45s ease, margin .55s var(--ease);
}
/* Escritorio (con ratón): abre al pasar por encima */
@media (hover:hover){
  .servicio-row:hover .servicio-name { opacity:1; }
  .servicio-row:not(:hover) .servicio-name { opacity:.6; }
  .servicio-row:hover .servicio-desc { opacity:.75; max-height:12em; margin-top:1rem; }
}
/* Móvil/táctil: abre con clic (clase .open añadida por JS) */
.servicio-row.open .servicio-desc { opacity:.75; max-height:12em; margin-top:1rem; }
.servicio-row.open .servicio-name { opacity:1; }

/* ---------- 11. CONTADOR (original, fondo gris con vídeo) ---------- */
.section.section-gray { background-color:#f8f5f5; }
/* Fondo oscuro de respaldo en el contador: si el vídeo tarda en arrancar (iOS),
   el número y el texto blancos siguen siendo legibles en lugar de verse sobre gris. */
#horas { background:#1a1a1a url('../img/contador-poster.jpg') center/cover no-repeat; }
.bg-contador { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(1); transition:filter .6s ease; }
#horas.color .bg-contador { filter:grayscale(0); }
@media (hover:none){ .bg-contador { filter:grayscale(0); } }
.horas-contador { font-size:15vw; line-height:1; font-weight:bold; color:#fff; z-index:2; position:relative; cursor:default; }
#horas .texto-subtitulo { color:#fff; z-index:2; position:relative; }
.texto-subtitulo { font-weight:300; font-size:clamp(1rem,2vw,1.625rem); letter-spacing:.2em; text-align:center; padding:0 var(--gutter); }
#horas .go-next-section { color:var(--paper); z-index:3; }


/* ---------- 12. CLIENTES (original: fondo blanco, logos a color) ---------- */
.section-clientes { position:relative; z-index:1; min-height:100svh; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(5rem,10vh,8rem) var(--gutter); overflow:hidden; }
/* Espaciador tras clientes: alarga el recorrido hacia portafolio sin descentrar el contenido */
.clientes-spacer { height:45svh; background:var(--paper); }
/* Título 03 Clientes en negro, con las dos fuentes */
.clientes-head { color:var(--ink); margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.clientes-head .section-num { color:var(--ink); opacity:.5; }
.clientes-head .section-label { color:var(--ink); }
#clientes .texto-subtitulo { color:var(--ink); margin-bottom:clamp(2.5rem,6vw,4rem); }
.mb-60 { margin-bottom:clamp(2.5rem,6vw,4rem); }

.logos-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,auto); gap:clamp(1rem,3vw,2rem); }
#swiper-logos { width:100%; max-width:1200px; overflow:hidden; box-sizing:border-box; }
#swiper-logos .swiper-wrapper { width:100%; }
#swiper-logos .swiper-slide { width:100% !important; box-sizing:border-box; }
#swiper-logos img { width:clamp(70px,9vw,100px); display:block; margin:0 auto; transform-origin:center; will-change:transform,opacity; }
#clientes .go-next-section { color:var(--ink); }

/* ---------- 13. PORTFOLIO (estilo works) ---------- */
/* La sección es alta: su altura define cuánto scroll dura el recorrido (14 trabajos).
   El panel interior se fija con el pin de GSAP (no sticky, porque overflow-x del body lo rompe). */
.section-works { position:relative; height:550vh; background:#000; z-index:2; }
.works-sticky { height:100svh; overflow:hidden; background:#000; z-index:2; }

/* Imágenes apiladas, todas a pantalla completa; se funden cambiando opacidad */
.works-media { position:absolute; inset:0; }
.work-img { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.work-img.is-active { opacity:1; }
.work-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .6s ease; }
/* B/N → color cuando el conjunto está "resaltado" (hover sobre el nombre) */
.works-sticky.color .work-img.is-active img { filter:grayscale(0); }

/* Pantalla intro (estilo Hero) sobre fondo negro, antes del primer trabajo */
.works-intro { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter); background:#000; }
.works-intro-title { color:#fff; font-size:clamp(2rem,6.5vw,6rem); line-height:1; font-weight:700; letter-spacing:var(--track-tight); }
.works-intro-title span { display:inline-block; }
/* Cursor parpadeante del efecto máquina de escribir */
.works-caret { width:.06em; margin-left:.04em; background:#fff; color:transparent; animation:works-caret-blink 1s steps(1) infinite; }
@keyframes works-caret-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }

/* Capa de oscurecido para legibilidad del texto */
.works-sticky::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.15) 40%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.45)); z-index:1; pointer-events:none; }

/* Nombre del trabajo (izquierda, centrado vertical) */
.works-title-wrap { position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:3; max-width:55vw; }
.works-title { color:#fff; font-size:clamp(1.25rem,3.5vw,3.5rem); line-height:.95; cursor:default; }

/* Número (derecha, centrado vertical) */
.works-number { position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%); z-index:3; color:#fff; font-size:clamp(2rem,6vw,6rem); line-height:1; cursor:default; transition:color .3s ease; }

/* Índice lateral derecho (lista navegable) */
.works-index { position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%); z-index:4; display:flex; flex-direction:column; gap:.35rem; text-align:right; max-height:80svh; overflow:hidden; }
/* Se coloca a la izquierda del número grande */
.works-index { right:calc(var(--gutter) + clamp(3rem,7vw,7rem)); }
.works-index-item { background:none; border:0; cursor:pointer; color:rgba(255,255,255,.4); display:flex; align-items:baseline; justify-content:flex-end; gap:.5rem; font-family:'Lab Grotesque',sans-serif; transition:color .3s ease; padding:.05rem 0; }
.works-index-item .wi-name { font-size:.82rem; font-weight:500; }
.works-index-item .wi-type { font-size:.62rem; text-transform:uppercase; letter-spacing:.15em; opacity:.7; }
.works-index-item:hover { color:rgba(255,255,255,.85); }
.works-index-item.is-active { color:#fff; }
.works-index-item.is-active .wi-name { font-weight:700; }

/* Enlaces de navegación (volver a clientes / ir a identidad) */
.works-nav-link { font-family:'Lab Grotesque',sans-serif; font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.55); text-decoration:none; transition:color .3s ease; }
.works-nav-link:hover { color:#fff; }
.works-nav-prev { margin-bottom:.85rem; }
.works-nav-next { margin-top:.85rem; }

.works-tag { position:absolute; left:var(--gutter); bottom:clamp(1.5rem,4vh,2.5rem); z-index:3; color:#fff; font-size:var(--fs-meta); letter-spacing:.2em; text-transform:uppercase; opacity:.7; }

/* ---------- 14. IDENTIDAD (bloque negro original con robot) ---------- */
.section-identidad { display:flex; flex-direction:column; overflow:hidden; padding:0; background:var(--paper); position:relative; z-index:3; }
.contenedor-media-pagina { height:50%; }
.contenedor-media-superior { position:relative; overflow:hidden; }
.contenedor-media-inferior { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(2.5rem,6vw,4.5rem); padding:clamp(4rem,9vh,7rem) 0; min-height:50svh; }
.contenedor-media-inferior .swiper-container-flex { width:100%; min-width:0; }

.identidad-forma { background-color:var(--ink); height:100%; min-height:52svh; width:140vw; margin-left:-20vw; border-radius:0 0 50% 50%; position:relative; transform-origin:50% 0%; }
.texto-identidad-pequeño { position:absolute; left:39%; color:#fff; font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(1.4rem,3.2vw,2.5rem); line-height:1.1; width:clamp(140px,16vw,220px); bottom:clamp(120px,22vh,220px); transform:rotate(-5deg); }
.texto-identidad-grande { font-size:clamp(8rem,26vw,25rem); line-height:.75; color:#fff; position:absolute; bottom:clamp(-30px,-2vw,-50px); font-weight:bold; left:43%; transform:rotate(-5deg); font-family:'Lab Grotesque',sans-serif; }

.texto-identidad-grande .letter-point::after { content:""; background-color:#81cee2; display:block; position:absolute; border-radius:100%; width:.15em; height:.15em; top:.03em; left:50%; transform:translateX(-50%); transition:all 1s linear; }
.texto-identidad-grande .letter-point.point-blank::after { background-color:#fff; }
.texto-identidad-grande .letter-point.posicion-1::after { top:-40px; left:94%; }
.position-relative { position:relative; }

img.robot { position:absolute; top:20px; left:74px; transform:rotate(-32deg); transition:all 1s linear; width:clamp(80px,9vw,140px); height:auto; }
img.robot.posicion-1 { top:-39px; left:141px; transform:rotate(0deg) scale(1.5); }

.identidad-sub { font-size:var(--fs-sub); font-weight:300; letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:0 var(--gutter); color:var(--ink); }
.swiper-container-flex { width:100%; }
#carusel-identidad .swiper-slide { width:170px; display:flex; align-items:center; justify-content:center; }
#carusel-identidad .swiper-wrapper { transition-timing-function:linear !important; align-items:center; }
#carusel-identidad img { width:auto; height:clamp(80px,12vw,140px); filter:grayscale(1); opacity:.65; transition:filter .4s ease, opacity .4s ease; }
@media (hover:hover){ #carusel-identidad img:hover { filter:grayscale(0); opacity:1; } }
/* Carrusel pausado al pasar el ratón: todos los logos visibles pasan a color
   (el :hover por imagen no dispara con fiabilidad mientras el carrusel se mueve). */
#carusel-identidad.ident-hover img { filter:grayscale(0) !important; opacity:1 !important; }
#carusel-identidad img.tapped { filter:grayscale(0) !important; opacity:1 !important; }

/* ---------- 16. SOCIAL · secuencia CLIENTES → GRACIAS → vídeo ---------- */
/* La sección es alta para reservar el scroll del vídeo, pero el sticky bloquea
   el avance hasta que el usuario pulsa "clientes" (lo controla el JS). */
.section-social-scroll { position:relative; z-index:3; height:300vh; background:#fff; }
/* Marcador de fase (solo móvil): oculto en escritorio donde social usa pin */
/* Frase única de social (solo móvil): oculta en escritorio donde social usa su dinámica */
.social-movil-frase { display:none; }
/* Bloqueo de scroll nativo (móvil) mientras la sección social espera el toque en "clientes".
   Solo touch-action (no overflow:hidden, que descolocaría el pin de ScrollTrigger). */
body.social-lock { touch-action:none; }
.social-sticky { position:relative; height:100vh; overflow:hidden; background:#fff; }

/* ESCENA 1 · texto sobre blanco */
.social-intro { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter); background:#fff; overflow:hidden; }
/* Vídeo de adorno muy leve detrás del texto (masa de energía rosa).
   Opacidad baja + multiply para integrarse sobre el blanco sin tapar el texto. */
.social-glow-video { display:none !important; }
.social-claim { position:relative; z-index:2; color:#111; font-size:var(--fs-sub); font-weight:300; letter-spacing:.18em; text-transform:lowercase; margin:0 0 .2em; opacity:0; }
.social-big { position:relative; z-index:2; margin:0; font-weight:700; line-height:.9; letter-spacing:var(--track-tight); font-size:min(20vw,30vh); color:#111; text-transform:lowercase; }

/* Botón "clientes": palpita y vira a rojo sangre en hover */
.social-clientes { font:inherit; letter-spacing:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-transform:inherit; line-height:inherit; display:inline-block; transition:color .35s ease; transform-origin:center; }
.social-clientes.palpita { animation:social-pulse 1.15s ease-in-out infinite; }
.social-clientes:hover { color:#8AB4C4; }
@keyframes social-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }

/* Indicación "pulsar" bajo la palabra clientes (visible solo cuando palpita) */
.social-pulsar-hint { position:relative; z-index:2; display:block; margin-top:.6em; font-family:'Lab Grotesque',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.28em; font-size:clamp(.7rem,1.5vw,1rem); color:#8AB4C4; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.social-pulsar-hint.visible { opacity:1; transform:translateY(0); animation:social-hint-blink 1.6s ease-in-out infinite; }
@keyframes social-hint-blink { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* GRACIAS (aparece tras el clic, oculto de inicio) */
.social-gracias-big { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; color:#8AB4C4; z-index:2; }
/* Subtexto que aparece tras GRACIAS (oculto de inicio) */
.social-gracias-sub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(90%,40ch); margin:0; z-index:2; font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(1.2rem,3.2vw,2.2rem); line-height:1.35; color:#111; opacity:0; visibility:hidden; pointer-events:none; }

/* Aviso de scroll (oculto hasta desbloquear) */
.social-scroll-hint { position:absolute; left:50%; bottom:clamp(1.5rem,5vh,3rem); transform:translateX(-50%); color:#111; opacity:0; visibility:hidden; transition:opacity .6s ease; }
.social-scroll-hint.visible { opacity:1; visibility:visible; }

/* ESCENA 2 · vídeo a pantalla completa */
.social-video { position:absolute; inset:0; z-index:4; opacity:0; visibility:hidden; }
.social-video.visible { opacity:1; visibility:visible; z-index:6; }
.social-video-el { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Velo oscuro para legibilidad de los textos sobre el último fotograma */
.social-fund-veil { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .8s ease; pointer-events:none; }
.social-fund-veil.visible { opacity:1; }

/* Bloque de textos de la Fundación: centrado en la pantalla, alineado al centro */
.social-fund { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:7; width:min(60rem,90vw); text-align:center; pointer-events:none; }
.social-fund a { pointer-events:auto; }
.social-fund [data-fund-line] { opacity:0; transform:translateY(28px); }
.fund-titulo { font-family:'Bebas Neue',sans-serif; color:#fff; line-height:.86; font-weight:400; letter-spacing:.01em; margin:0; font-size:clamp(2.6rem,7vw,6rem); }
.fund-titulo-big { font-size:clamp(3.2rem,9.2vw,8rem); margin-bottom:.12em; }
.fund-claim { font-family:'Bebas Neue',sans-serif; color:#fff; font-size:clamp(1.1rem,2.6vw,2.2rem); line-height:1.05; letter-spacing:.03em; margin:.2em auto .55em; max-width:34em; }
.fund-claim b { color:#a9d3e0; font-weight:400; }
.fund-servicios { font-family:'Bebas Neue',sans-serif; color:#fff; font-size:clamp(1.3rem,3.4vw,2.9rem); line-height:1.12; letter-spacing:.02em; margin:.05em 0; }
.fund-dot { color:#a9d3e0; padding:0 .15em; }
.fund-link { display:inline-block; margin-top:1.1rem; font-family:'Lab Grotesque',sans-serif; font-weight:300; font-size:clamp(.95rem,1.7vw,1.4rem); letter-spacing:.16em; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:.15em; transition:color .3s, border-color .3s; }
.fund-link:hover { color:#a9d3e0; border-color:#a9d3e0; }

/* Canvas de confeti: cubre la pantalla, por encima de todo, sin capturar clics */
#social-confetti-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:9500; pointer-events:none; }


/* ---------- 17. NOTICIAS (carrusel de una fila) ---------- */
.section-noticias { display:flex; flex-direction:column; justify-content:center; padding:clamp(6rem,12vh,9rem) 0; overflow:hidden; }
.noticias-wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.section-noticias .section-head { padding-left:0; }

/* Carrusel con flechas a los lados */
.noticias-carousel { display:flex; align-items:stretch; gap:clamp(.75rem,2vw,1.5rem); }
.swiper-noticias { flex:1 1 auto; min-width:0; overflow:hidden; }
.swiper-noticias .swiper-slide { height:auto; display:flex; }

/* Flechas laterales con el estilo de la web (círculo, borde fino) */
.noticias-arrow { flex:0 0 auto; align-self:center; width:clamp(44px,4vw,56px); height:clamp(44px,4vw,56px); border-radius:50%; border:1px solid rgba(0,0,0,.25); background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease; }
.noticias-arrow:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.noticias-arrow.swiper-button-disabled { opacity:.25; cursor:default; }
.noticias-arrow.swiper-button-disabled:hover { background:var(--paper); color:var(--ink); border-color:rgba(0,0,0,.25); }

/* Tarjeta alta, con "Leer más" pegado abajo */
.noticia-card { display:flex; flex-direction:column; width:100%; min-height:clamp(360px,46vh,460px); padding:clamp(1.75rem,3vw,2.5rem); border:1px solid rgba(0,0,0,.14); border-radius:18px; text-decoration:none; color:var(--ink); background:var(--paper); transition:border-color .35s ease, background .35s ease, color .35s ease; }
.noticia-card:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.noticia-card-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.noticia-fecha { font-size:var(--fs-meta); font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.noticia-fecha .noticia-mes { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; opacity:.85; }
.noticia-num { font-family:'Instrument Serif',serif; font-style:italic; font-size:1.4rem; opacity:.35; }

.noticia-titulo { font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.12; letter-spacing:var(--track-tight); margin:0 0 1rem; font-weight:700; }
.noticia-excerpt { font-size:var(--fs-body); line-height:1.5; opacity:.7; margin:0; }

/* "Leer más" anclado a la parte inferior del cuadro */
.noticia-leer { margin-top:auto; padding-top:clamp(1.25rem,3vw,2rem); font-size:var(--fs-meta); font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:.6; transition:opacity .3s ease; }
.noticia-card:hover .noticia-leer { opacity:1; }

/* Botón "todas las noticias": fondo negro, letras blancas, bordes cuadrados */
.noticias-cta { display:flex; justify-content:center; margin-top:clamp(2.5rem,5vw,3.5rem); }
.btn-noticias { display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:var(--paper); text-decoration:none; padding:clamp(.9rem,1.6vw,1.15rem) clamp(2rem,4vw,2.75rem); border-radius:0; font-size:var(--fs-meta); font-weight:500; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink); transition:background .3s ease, color .3s ease; }
.btn-noticias:hover { background:transparent; color:var(--ink); }

/* ---------- 17b. OPINIONES (testimonios) ---------- */
.section-opiniones { background:var(--paper); color:var(--ink); padding:clamp(5rem,12vh,9rem) 0; overflow:hidden; }
.opiniones-wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.section-opiniones .section-head { justify-content:center; }
.opiniones-intro { color:var(--ink); margin:0 0 clamp(2.5rem,6vw,4rem); }
.opiniones-grid { columns:3 280px; column-gap:clamp(1rem,2vw,1.5rem); }
.opinion-card { break-inside:avoid; display:flex; flex-direction:column; gap:1.25rem; margin:0 0 clamp(1rem,2vw,1.5rem); padding:clamp(1.5rem,2.5vw,2rem); border:1px solid rgba(0,0,0,.12); border-radius:16px; background:var(--paper); transition:border-color .35s ease, transform .35s ease; }
.opinion-card:hover { border-color:rgba(0,0,0,.4); transform:translateY(-3px); }
.opinion-card blockquote { margin:0; font-size:clamp(.98rem,1.3vw,1.1rem); line-height:1.55; }
.opinion-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; }
.opinion-autor { font-weight:700; font-size:var(--fs-meta); letter-spacing:.04em; }
.opinion-estrellas { color:#f5b301; font-size:.9rem; letter-spacing:.05em; flex:0 0 auto; }
.opiniones-cta { display:flex; justify-content:center; margin-top:clamp(2.5rem,5vw,3.5rem); }
.btn-opiniones { display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:var(--paper); text-decoration:none; padding:clamp(.9rem,1.6vw,1.15rem) clamp(2rem,4vw,2.75rem); border-radius:0; font-size:var(--fs-meta); font-weight:500; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink); transition:background .3s ease, color .3s ease; }
.btn-opiniones:hover { background:transparent; color:var(--ink); }


.section-contacto { position:relative; height:100svh; min-height:600px; background:#000; z-index:1; overflow:hidden; }
.section-contacto .contacto-sticky { position:relative; height:100svh; min-height:600px; overflow:hidden; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--paper); gap:clamp(1.5rem,4vh,3rem); }
.section-contacto .video-background { position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; }
.section-contacto .video-background video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.85; filter:none; transition:opacity .6s ease; }
/* Velo oscuro sobre el vídeo para que el texto encima se lea bien.
   Combina un oscurecido plano uniforme con un viñeteado suave en los bordes. */
.section-contacto .video-background::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)), radial-gradient(circle at center, transparent, rgba(0,0,0,.7)); }

.contacto-head { position:relative; z-index:2; display:flex; align-items:baseline; gap:1rem; justify-content:center; }
.contacto-head .section-label { color:var(--paper); }

/* Marquesina de letras gigantes en movimiento (estilo seyi.dev) */
.contacto-marquee { position:relative; z-index:2; display:block; width:100%; border:0; background:none; padding:0; margin:0; cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.contacto-marquee-track { display:flex; width:max-content; will-change:transform; }
.contacto-marquee-group { display:inline-block; white-space:nowrap; font-family:'Lab Grotesque',sans-serif; font-weight:900; font-size:min(28vw,42vh); line-height:1; letter-spacing:var(--track-tight); color:var(--paper); text-transform:uppercase; transition:color .25s ease; }
.contacto-marquee-group .cm-hover { display:none; }
.contacto-marquee:hover .contacto-marquee-group { color:#81cee2; }
.contacto-marquee:hover .contacto-marquee-group .cm-default { display:none; }
.contacto-marquee:hover .contacto-marquee-group .cm-hover { display:inline; }

/* Línea de datos (igual que el PSD) */
.contacto-datos-linea { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.55rem clamp(.6rem,1.6vw,1.1rem); text-align:center; padding:0 var(--gutter); color:var(--paper); font-weight:700; font-size:clamp(.85rem,1.6vw,1.25rem); letter-spacing:.01em; }
.contacto-datos-linea .cd-label { color:#81cee2; }
.contacto-datos-linea .cd-sep { color:#81cee2; opacity:.85; }
.contacto-datos-linea a { color:var(--paper); text-decoration:none; position:relative; }
.contacto-datos-linea a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width .4s var(--ease); }
.contacto-datos-linea a:hover::after { width:100%; }

/* Botón directo de presupuesto: solo móvil (se activa en la media query <=768px) */
.contacto-btn-movil { display:none; }


/* ---------- 19. FOOTER (nombre monumental que sube) ---------- */
#footer { background:var(--paper); display:flex; flex-direction:column; min-height:100svh; }
.footer-subvenciones { max-width:var(--wrap); width:100%; margin:0 auto; padding:clamp(4rem,9vh,7rem) var(--gutter) 0; }
.logos-suvenciones { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2rem); margin-bottom:1.5rem; }
.logos-suvenciones img { width:clamp(120px,16vw,200px); height:auto; filter:grayscale(1); }
.texto-suvenciones { font-size:var(--fs-body); line-height:1.55; max-width:90ch; margin:0 auto; text-align:center; opacity:.8; }

/* Barra legal pegada al borde inferior de la pantalla (margin-top:auto la empuja al fondo). */
.footer-bar { position:relative; background:var(--ink); color:var(--paper); margin-top:auto; }

/* "Ya solo nos queda jugar…" + vídeo del isotipo, justo encima de la barra legal */
.footer-robots { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(2rem,6vh,4rem) var(--gutter) clamp(1rem,3vh,2rem); gap:.5rem; }
.footer-robots-text { margin:0; font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(1.3rem,4vw,2.6rem); color:var(--ink); text-align:center; }
.footer-pictos-video { width:clamp(120px,18vw,220px); height:auto; display:block; }
.footer-bar-inner { position:relative; z-index:1; width:100%; max-width:var(--wrap); margin:0 auto; padding:clamp(1rem,2.2vw,1.5rem) var(--gutter); display:flex; justify-content:space-between; align-items:center; gap:1.25rem 2rem; flex-wrap:wrap; }
.paginas-legales { display:flex; flex-wrap:wrap; gap:1.25rem; }
.paginas-legales a, .paginas-legales button { color:var(--paper); font-size:.9rem; font-weight:500; opacity:.7; transition:opacity .3s; }
.paginas-legales a:hover, .paginas-legales button:hover { opacity:1; }
.redes-sociales { display:flex; flex-wrap:wrap; gap:8px; }
.redes-sociales a { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-on-dark); border-radius:50%; transition:background .3s, color .3s; }
.redes-sociales a svg { fill:currentColor; }
.redes-sociales a:hover { background:var(--paper); color:var(--ink); }

/* ---------- 20. POPUPS ---------- */
.popup-overlay, .popup-video { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9999; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity .3s, visibility .3s; padding:1rem; }
.popup-overlay.open, .popup-video.open { visibility:visible; opacity:1; }
.popup-inner { background:var(--paper); color:var(--ink); padding:clamp(1.75rem,4vw,3rem); width:100%; max-width:560px; position:relative; max-height:90svh; overflow-y:auto; }
.popup-inner h3 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1.5rem; }
.popup-close, .popup-video-close { position:absolute; top:1rem; right:1rem; background:none; cursor:pointer; font-size:1.3rem; line-height:1; }
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.form-group label { font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.form-group input, .form-group textarea { border:1px solid var(--line); padding:.7rem .9rem; font:inherit; font-size:1rem; outline:none; transition:border-color .2s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--ink); }
.form-group textarea { resize:vertical; }
.form-check { display:flex; align-items:flex-start; gap:.5rem; margin-bottom:1.5rem; font-size:.85rem; }
.form-check input { margin-top:3px; accent-color:var(--ink); }
.form-check a { text-decoration:underline; }
.btn-enviar { width:100%; background:var(--ink); color:var(--paper); border:0; padding:.9rem 2rem; font:inherit; font-weight:600; cursor:pointer; transition:opacity .2s; }
.btn-enviar:hover { opacity:.85; }
.form-mensaje { margin-bottom:15px; padding:10px; font-size:.85rem; }
.form-mensaje:empty { display:none; }
.form-mensaje--error { background:#fdecea; color:#c0392b; }
.form-mensaje--ok { background:#eafaf1; color:#1e8449; }
.popup-video-inner { position:relative; width:100%; max-width:1000px; }
.popup-video-player { width:100%; display:block; }
.popup-video-frame { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; }
.popup-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.popup-video-close { top:-2.5rem; right:0; color:#fff; }

/* ---------- 21. PÁGINAS LEGALES ---------- */
section.content-inner { max-width:var(--wrap-text); margin:0 auto; padding:clamp(120px,18vh,200px) var(--gutter) 80px; }
section.content-inner h1 { font-size:var(--fs-xl); margin-bottom:.6em; }
section.content-inner h2 { font-size:clamp(1.4rem,2.5vw,2rem); margin:1.4em 0 .5em; }
section.content-inner p { margin-bottom:.8rem; line-height:1.6; }
section.content-inner a { text-decoration:underline; }
section.content-inner ul { padding-left:1.3rem; margin-bottom:1rem; }
table.table { width:100%; border-collapse:collapse; font-size:.95rem; margin-bottom:2rem; }
table.table th { background:var(--ink); color:var(--paper); }
.table > :not(caption) > * > * { padding:.7rem 1rem; border-bottom:1px solid var(--line); }

/* ---------- 22. SCROLLBAR ---------- */
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:var(--paper); }
::-webkit-scrollbar-thumb { background:var(--ink); }
* { scrollbar-width:thin; scrollbar-color:var(--ink) var(--paper); }

/* =============================================================
   23. RESPONSIVE
   La tipografía escala con clamp() y las secciones con svh.
   Aquí solo reflujos de layout. Pocos breakpoints.
   ============================================================= */
@media (max-width:1024px){
  .logos-grid { grid-template-columns:repeat(3,1fr); }
  .servicio-row { grid-template-columns:1fr; }
  .servicio-idx { grid-row:auto; grid-column:1; padding-top:0; margin-bottom:.4rem; margin-left:0; }
  .servicio-name { grid-column:1; margin-left:0; }
  .servicio-desc { grid-column:1; max-width:100%; margin-left:0; padding-right:.5rem; }
}
@media (max-width:768px){
  .main-navbar { mix-blend-mode:normal; top:0; left:0; transform:none; width:100%; padding:10px clamp(14px,4vw,20px); background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px); box-shadow:0 1px 0 rgba(0,0,0,.06); }
  /* Logo y menú SIEMPRE visibles arriba (sin ocultar por sección, evita superposiciones) */
  .main-navbar.logo-oculto .navbar-logo { opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  .main-navbar .menu-toggle span { background:var(--ink) !important; }
  .main-navbar.nav-oscuro .menu-toggle span { background:var(--ink) !important; }
  .footer-bar-inner { flex-direction:column; align-items:flex-start; gap:1.5rem; }

  /* CLIENTES móvil: el collage se ancla arriba (no centrado) para no dejar
     un gran hueco en blanco entre los logos y el siguiente apartado. */
  .section-clientes { min-height:auto !important; justify-content:flex-start; }
  .clientes-spacer { height:12svh; }
  /* Noticias móvil: ocultar la flecha izquierda, mostrar solo la derecha (siguiente)
     anclada al lateral derecho del carrusel. */
  /* Noticias móvil: sin flechas (el carrusel avanza solo cada 4s) */
  .noticias-arrow.noticias-prev, .noticias-arrow.noticias-next { display:none !important; }
  .noticias-carousel { position:relative; }

  /* PORTAFOLIO móvil: lista vertical, sin pin, sin índice lateral ni número grande */
  .section-works { height:auto !important; }
  .works-sticky { height:auto !important; position:relative !important; overflow:visible !important; display:flex; flex-direction:column; gap:1.5rem; padding:clamp(2rem,6vh,3rem) var(--gutter); }
  .works-media { position:relative !important; display:flex; flex-direction:column; gap:1.75rem; inset:auto; }
  .work-img { position:relative !important; inset:auto; border-radius:14px; overflow:hidden; opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
  .work-img.reveal-in { opacity:1 !important; transform:translateY(0); }
  .works-intro { display:none !important; }
  .work-img img { height:auto; aspect-ratio:16/11; filter:grayscale(0) !important; }
  .work-img::after { content:attr(data-nombre); display:block; color:#fff; font-family:'Lab Grotesque',sans-serif; font-weight:700; font-size:1.1rem; padding:.7rem .2rem 0; }
  .works-title-wrap, .works-number, .works-index, .works-tag { display:none !important; }
  .works-sticky::after { display:none; }

  /* SOCIAL móvil · MODELO MÍNIMO. Dos pantallas: 1) frase única en cursiva,
     2) vídeo del barco con la Fundación al terminar. Sin dinámica, sin sticky,
     sin bloqueos, sin nada que pulsar. */
  .section-social-scroll { height:auto !important; position:relative; z-index:3; }
  .social-sticky { position:relative !important; height:auto !important; overflow:visible !important; display:block; }
  /* Intro vieja oculta por completo en móvil (la sustituye la frase única) */
  .social-intro { display:none !important; }
  /* Frase única: pantalla centrada, tipografía del final (Instrument Serif itálica) */
  .social-movil-frase { display:flex; min-height:100svh; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter); background:#fff; }
  .social-movil-frase p { margin:0; max-width:18ch; font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(1.6rem,7vw,2.6rem); line-height:1.3; color:#111; }
  .social-movil-frase .sm-azul { color:#8AB4C4; }
  /* Vídeo: su propia pantalla, como bloque normal */
  .social-video { position:relative !important; inset:auto; height:100svh; opacity:1 !important; visibility:visible !important; }
  .social-video.visible { opacity:1; visibility:visible; }
  .social-fund { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:88%; }

  /* Opiniones: una columna */
  .opiniones-grid { columns:1; }
  /* Contacto en móvil: SIN marquesina de texto en movimiento (se usa el botón) */
  .section-contacto, .section-contacto .contacto-sticky { height:auto; min-height:100svh; }
  .contacto-marquee { display:none !important; }
  .contacto-datos-linea { flex-direction:column; gap:.4rem; font-size:clamp(.9rem,3.4vw,1.05rem); }
  .contacto-datos-linea .cd-sep { display:none; }
  /* Identidad: texto más contenido en móvil */
  .texto-identidad-grande { font-size:clamp(6rem,30vw,11rem); left:50%; transform:translateX(-50%) rotate(-5deg); }
  .texto-identidad-pequeño { left:50%; transform:translateX(-60%) rotate(-5deg); }

  /* HERO móvil */

  /* SERVICIOS móvil: "Diseño de páginas web" en una línea y descripción centrada,
     pegada al servicio sin margen extra por abajo (como en escritorio) */
  .servicio-name { white-space:nowrap; font-size:clamp(1.6rem,7vw,2.4rem); }
  .servicio-row { padding-top:1.1rem; padding-bottom:1.1rem; }
  .servicio-idx { margin-bottom:.1rem; }
  .servicio-row .servicio-desc, .servicio-row.open .servicio-desc { margin-top:.3rem; margin-bottom:0; }

  /* CLIENTES → PORTAFOLIO móvil: reducir el hueco en blanco hasta el primer trabajo
     y mostrar "Algunos de nuestros proyectos…" sobre negro como cabecera. */
  .works-sticky { padding-top:clamp(1rem,3vh,1.5rem); }
  .works-intro { display:block !important; position:relative !important; inset:auto; background:#000; padding:1.4rem var(--gutter) .4rem; text-align:left; }
  /* El título debe caber SIEMPRE en una sola línea (en iPhone SE/mini la última
     palabra se descolgaba a una 2ª fila). Fuente fluida según el ancho + nowrap:
     se encoge lo justo en pantallas estrechas y nunca envuelve. */
  .works-intro-title { color:#fff; font-size:clamp(.85rem,4.6vw,1.5rem); line-height:1.1; white-space:nowrap; }
  .works-intro-title .works-type { white-space:nowrap; }
  .works-caret { display:none; }

  /* IDENTIDAD móvil: menos separación entre logotipos del carrusel */
  #carusel-identidad .swiper-slide { width:110px; }
  #carusel-identidad img { height:clamp(56px,16vw,90px); }
  /* En móvil, identidad SIEMPRE visible (el fade/escala por scroll es inestable con
     el portafolio en lista vertical). La forma se muestra a tamaño completo. */
  #identidad { opacity:1 !important; visibility:visible !important; }
  .identidad-forma { transform:none !important; }
  .texto-identidad-pequeño, .texto-identidad-grande { opacity:1 !important; }

  /* Contacto móvil: botón directo de presupuesto bajo los datos */
  .contacto-btn-movil { display:inline-block; margin:1.4rem auto 0; padding:.9rem 1.9rem; background:#000; color:#fff; border:0; border-radius:0; font-family:'Lab Grotesque',sans-serif; font-weight:700; font-size:clamp(.95rem,3.6vw,1.1rem); letter-spacing:.02em; text-transform:uppercase; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .contacto-btn-movil:active { opacity:.85; }
  /* En móvil la marquesina no necesita el texto de hover (se usa el botón) */
  .contacto-marquee-group .cm-hover { display:none !important; }
  .contacto-marquee-group .cm-default { display:inline !important; }
}
@media (max-width:600px){
  .logos-grid { grid-template-columns:repeat(2,1fr); }
  .hero-meta { font-size:var(--fs-body); }
}

/* Pantallas de escritorio con altura limitada (p.ej. MacBook Pro ~900-1000px):
   compactar la sección clientes para que las 3 filas de logos quepan completas. */
@media (min-width:769px) and (max-height:1050px){
  .section-clientes { padding-top:clamp(2.5rem,6vh,4rem); padding-bottom:clamp(2.5rem,6vh,4rem); justify-content:center; }
  .section-clientes .texto-subtitulo.mb-60 { margin-bottom:1.2rem !important; }
  #swiper-logos img { width:clamp(60px,7vw,86px); }
  .section-clientes .section-head { margin-bottom:.5rem; }
}

/* Altura corta (móvil horizontal): no forzar 100svh en centradas */
@media (max-height:600px) and (max-width:1024px){
  .section-centered { min-height:auto; padding-top:clamp(90px,16vh,120px); padding-bottom:clamp(60px,12vh,90px); }
  .go-next-section { display:none; }
}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}