/* Ajustes del prototipo sobre el CSS del tema (global.css). */
/* El tema usa un recorte propio (cover-main-desktop) en el carrusel de news; acá la imagen es el original, así que se recorta por CSS al alto del slide. */
.blog-posts-main-carousel .swiper-slide .blog-post-media,
.blog-posts-main-carousel .swiper-slide > a > .blog-post-media { height: 100%; }
.blog-posts-main-carousel .blog-post-main-image { width: 100%; height: 100%; object-fit: cover; }

/* ── Ajustes de diseño de Paradigma sobre el original (desktop) ── */
@media (min-width: 1024px) {
  /* Home, hero: la flecha (algo más chica) frena a 10px del borde inferior de la pantalla, contando su rebote (+35% de su alto). */
  body.home .home-section10 img.up-down-moviment {
    width: 3.6vw;
    bottom: auto;
    top: min(calc(100vh - 10px - 5.8vw), calc(100% - 7vh - 4.3vw));
  }

  /* Home, "Our model is simple": el bloque de texto, centrado en vertical en la pantalla (debajo del header). */
  body.home .brands-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-top: var(--header-real-h, 38px);
    padding-bottom: 3.1vw; /* sube el bloque ~22px (a 1440) respecto del centro exacto: ópticamente quedaba bajo */
  }

  /* Hover del idioma: una línea entra por debajo de izquierda a derecha y, al salir el cursor, se va por la derecha.
     (Las secciones tienen su propio hover: la caja se pinta de naranja, ver «Navbar desktop, hover en caja».) */
  @media (hover: hover) {
    .menu-language .menu-item-label { transition: background-size 300ms ease; }
    .menu-language .menu-language-item a:hover .menu-item-label,
    .menu-language .menu-language-item a:focus-visible .menu-item-label { background-position: left 0 bottom var(--nav-line-y); background-size: 100% 2px; }
  }

  /* "Wanna work with us?": banderas arriba, alineadas con la primera línea, y un poco más grandes. */
  .career-title-wrapper .career-title + div > div:first-child { margin-top: 0; align-items: flex-start; }
  .career-title-wrapper .career-title + div > div:first-child img { width: 4.305vw; height: auto; margin-top: var(--flags-offset, .45vw); }
  /* …sin mover el texto de la derecha: compensa el alto que dejaron de ocupar las banderas (sigue alineado con las olas). */
  .career-title-wrapper .career-text { margin-top: calc(39.5vh + .6vw); }

  /* Home y /careers/, "Wanna work with us?": todo el grupo (título, banderas, párrafo, olas y flecha) centrado en la pantalla debajo de la navbar.
     La flecha y las olas de escritorio viven dentro del bloque (las originales quedan para mobile). */
  body.home .career-title-wrapper, body.page-template-page-careers .career-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-top: var(--header-real-h, 38px);
    padding-bottom: .45vw; /* compensa el interlineado (.8em), que deja aire extra arriba de WANNA */
  }
  body.home .career-title-wrapper > div:first-child, body.page-template-page-careers .career-title-wrapper > div:first-child { position: relative; }
  body.home .career-title-wrapper .career-arrow-desk, body.page-template-page-careers .career-title-wrapper .career-arrow-desk { width: 2.34vw; height: auto; left: 69.8vw; bottom: 0; }
  body.home .career-title-wrapper .career-text, body.page-template-page-careers .career-title-wrapper .career-text { position: relative; }
  body.home .career-title-wrapper .career-waves-desk, body.page-template-page-careers .career-title-wrapper .career-waves-desk { position: absolute; width: 6.25vw; height: auto; left: -8.6vw; top: .55vw; }
  body.page-template-page-careers .career-title-wrapper .career-waves-desk { left: -12.79vw; } /* acá la columna de texto arranca en 69.8vw (en la home, en 65.6vw); las olas quedan en 57vw como en el original */
  /* /careers/ (Nico, 27/10): el título 10px más a la izquierda; la flecha alineada con las banderas y el párrafo (su
     rebote la corre medio ancho a la izquierda: se le devuelve). El párrafo en Clash Regular: ver «Careers, todos los formatos» */
  body.page-template-page-careers .career-title-wrapper .career-title { margin-left: -10px; }
  body.page-template-page-careers .career-title-wrapper .career-arrow-desk { left: calc(69.8vw + 1.17vw); }
  /* lo mismo en la home (Nico, 27/10); acá la columna de banderas y párrafo arranca en 65.6vw */
  body.home .career-title-wrapper .career-title { position: relative; left: -10px; } /* con margen arrastraba la columna de la derecha */
  body.home .career-title-wrapper .career-arrow-desk { left: calc(65.6vw + 1.17vw); }
  /* /careers/: olas, párrafo y flecha más abajo; con un título de tres líneas quedaban pegados a la última (Nico, 27/10) */
  /* y la flecha los acompaña: el margen de abajo del párrafo es su lugar (3.5vw de aire + 2.75vw de flecha), así baja con
     el párrafo aunque el título sea más alto que la columna */
  body.page-template-page-careers .career-title-wrapper .career-text { margin-top: calc(45vh + .6vw); margin-bottom: 6.25vw; }
}

/* ── News (desktop) ── */
@media (min-width: 1024px) {
  /* Flechas del carrusel: 10px entre una y otra (igual que entre las categorías). */
  /* (el círculo ocupa el 90% del botón: se descuenta ese 10% para que el gap visible sea 10px) */
  .blog-posts-main-carousel .swiper-button-prev { right: calc(30px + clamp(30px, 3.125vw, 60px) + 10px - clamp(30px, 3.125vw, 60px) * .1); }
  /* Título, filtros, cards y flechas entran en una pantalla (Nico, 27/10): la card se achica en 16:9
     y el carrusel va con slidesPerView 'auto' (global.js), así se asoma más la siguiente. El carrusel arranca a
     18.33vh + 108px (aire de arriba + título y filtros + 35px); abajo quedan las flechas, 15px y 20px de aire. */
  body .blog-posts-main-carousel { --news-flechas: clamp(30px, 3.125vw, 60px); padding-bottom: calc(var(--news-flechas) + 15px); }
  body .blog-posts-main-carousel .blog-post-slide {
    /* y nunca más ancha que el 67.5% de la ventana (lo que mide a 1440×900): al achicar el ancho, o en ventanas muy
       altas, la card se achica en proporción en vez de tapar a la siguiente (Nico, 28/10) */
    --news-card-h: min(max(400px, calc(81.67vh - 143px - var(--news-flechas))), calc(67.5vw * 9 / 16));
    height: var(--news-card-h); min-height: 0; width: calc(var(--news-card-h) * 16 / 9 + 25px); padding-left: 25px;
  }
  /* 25px entre cards (Nico, 27/10: 5px menos que el tema); la primera sigue a 30px del borde, alineada con el título */
  body .blog-posts-main-carousel .blog-post-slide:first-child { width: calc(var(--news-card-h) * 16 / 9 + 30px); padding-left: 30px; }
  body .blog-posts-main-carousel .blog-post-slide > a { display: block; height: 100%; }
  /* el titular acompaña a la card (el tema lo daba a 5.7vw para la card grande: ~11% de su alto) */
  body .blog-posts-main-carousel .blog-post-info-title { font-size: calc(var(--news-card-h) * .112); }
  /* card de Ad Age: el titular arriba como en las demás, y el logo centrado entre el titular y la categoría */
  body .blog-posts-main-carousel .blog-post-slide.logo-card .logo-card-logos { inset: 50% 25% 20%; }
  body .blog-posts-main-carousel .blog-post-slide .blog-post-media { position: relative; }
  body .blog-posts-main-carousel .blog-post-slide .blog-post-media > .blog-post-main-image { position: absolute; inset: 0; height: 100%; }
  /* Highlights: mismo aire entre el título y la línea que en "NEWS" arriba. */
  .blog-posts-highlights > .blog-page-title { margin-bottom: var(--hl-title-mb, 41px); }
  /* More articles: el mismo blanco debajo del ticker que arriba (13.33vh; el ítem ya trae 30px de padding arriba). */
  .blog-posts-highlights + .marquee-wrapper + .blog-posts-archive { margin-top: calc(13.33vh - 30px); }
  /* Nota, Related articles: lo mismo (el ticker tiene 15vh arriba; la primera relacionada trae 30px propios). */
  .single-post-article + .marquee-wrapper + .blog-related-posts-section { margin-top: calc(15vh - 30px); }
  /* Highlights: al pasar por una nota, el titular se pone naranja. */
  .blog-posts-highlights .blog-post-title { transition: color .2s ease; }
  .blog-posts-highlights .blog-post-article-link:hover .blog-post-title { color: #ff4600; }
}
/* Carruseles de destacadas (News) y de proyectos (servicios): ease suave (sale rápido y frena de a poco) en vez del ease por defecto. */
.blog-posts-main-carousel, .swiper-single-projects { --swiper-wrapper-transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.blog-posts-main-carousel .swiper-wrapper, .swiper-single-projects .swiper-wrapper { transition-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* ── People: cursor de la vista lista (desktop), como el del equipo de paradigma.cc ── */
.isla-islander-cursor {
  position: fixed; top: 0; left: 0; z-index: 9000;
  width: clamp(144px, 12vw, 240px); aspect-ratio: 5 / 7; /* +20% respecto del de paradigma.cc */
  opacity: 0; pointer-events: none;
  transition: opacity .12s cubic-bezier(.87, 0, .13, 1);
}
.isla-islander-cursor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isla-islander-cursor.is-visible { opacity: 1; }
@media (min-width: 1024px) {
  /* en lista, las fotos por fila no se usan: las reemplaza el cursor único */
  .people-members-section #islanders-list-list:checked ~ .people-members-section-list .people-members-islander-item img.swipeimage { display: none !important; }
}
@media (max-width: 1023px) { .isla-islander-cursor { display: none; } }

/* Careers, "Check out our featured positions": en WordPress el subrayado viene como style="text-decoration: underline"
   (sin ";") y la regla del tema que lo vuelve bloque con flecha no lo agarra; Payload lo escribe con ";" y sí.
   Se neutraliza para que quede como en el original: subrayado en línea, sin flecha. */
body.page-template-page-careers .careers-external-link [style="text-decoration: underline;"] { display: inline; position: static; }
body.page-template-page-careers .careers-external-link [style="text-decoration: underline;"]:after { content: none; }
/* Sin subrayado fijo; en hover se subrayan las dos últimas palabras («featured positions» y sus equivalentes), con
   la línea entrando de izquierda a derecha como en el navbar (Nico y Miranda, 29/10) */
body.page-template-page-careers .careers-external-link a { text-decoration: none; }
body.page-template-page-careers .careers-external-link .careers-cta-fin { background: linear-gradient(currentColor, currentColor) no-repeat left 0 bottom .1em / 0 .05em; transition: background-size 700ms cubic-bezier(.65, 0, .35, 1); }
body.page-template-page-careers .careers-external-link a:hover .careers-cta-fin,
body.page-template-page-careers .careers-external-link a:focus-visible .careers-cta-fin { background-size: 100% .05em; }

/* ── Work, "More projects": cursor con el video del case (desktop) ── */
.isla-case-cursor {
  position: fixed; top: 0; left: 0; z-index: 9000;
  width: clamp(240px, 20vw, 400px); aspect-ratio: 16 / 9; background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity .12s cubic-bezier(.87, 0, .13, 1);
}
.isla-case-cursor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.isla-case-cursor.is-visible { opacity: 1; }
@media (max-width: 1023px) { .isla-case-cursor { display: none; } }

/* ── Work (rediseño Paradigma, Figma "Work Index (Desktop)" 2517:24845): "More projects" como archivo compacto.
   Medidas de Figma a 1920 pasadas a vw: filas de 62px, márgenes de 20px, columnas título / cliente (x=720) / año. ── */
@media (min-width: 1024px) {
  body.page-template-page-work-cases-listing .wc-cases-listing { padding: 7.8125vw 1.0417vw 0; max-width: none; margin: 0; }
  body.page-template-page-work-cases-listing .wc-cases-listing-title { font-size: 2.6042vw; line-height: 1; margin: 0; }
  body.page-template-page-work-cases-listing .wc-cases-listing .wc-cases-section-list { margin-top: 1.5625vw !important; gap: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item { padding: 0 !important; border-top: 0 !important; border-bottom: 1px solid #000 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item > a > .work-case-name-info {
    display: flex !important; align-items: center; height: 3.2292vw; min-height: 44px; padding: 0 !important;
  }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name {
    margin: 0 !important; width: 36.4583vw !important; max-width: none !important; flex: none !important; padding: 0 !important; font-size: 1.0417vw !important; line-height: 1 !important;
  }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location {
    flex: 1; display: flex !important; justify-content: space-between; align-items: center; margin: 0 !important;
    font-size: 1.0417vw !important; line-height: 1 !important;
  }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location span { flex: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location span + span { margin-left: auto !important; text-align: right; }
  body.page-template-page-work-cases-listing .wc-cases-listing .btn-go-profile { display: none !important; }
  /* el cursor con video, del tamaño de la media de Figma (536x328 a 1920) */
  .isla-case-cursor { width: 27.9167vw; aspect-ratio: 536 / 328; }
}
/* carrusel de work (hero): ocupa exactamente la pantalla, sea cual sea su proporción; el video la cubre recortando */
@media (min-width: 1024px) {
  .wc-main-carousel, .wc-main-carousel .swiper-slide, .wc-main-carousel .work-case-slide, .wc-main-carousel .work-case-slide > a { height: 100vh; height: 100svh; }
  .wc-main-carousel .work-case-video, .wc-main-carousel .work-case-video video.video-desktop { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* ── Work, mobile (Figma "Work Index (Mobile)" 2601:356, base 400px → vw) ── */
.wc-row-media { display: none; }
@media (max-width: 1023px) {
  /* hero: la pantalla entera, con el video mobile cubriendo */
  body.page-template-page-work-cases-listing .wc-main-carousel,
  body.page-template-page-work-cases-listing .wc-main-carousel .swiper-slide,
  body.page-template-page-work-cases-listing .wc-main-carousel .work-case-slide,
  body.page-template-page-work-cases-listing .wc-main-carousel .work-case-slide > a { height: 100vh; height: 100svh; }
  body.page-template-page-work-cases-listing .wc-main-carousel .work-case-video,
  body.page-template-page-work-cases-listing .wc-main-carousel video.video-mobile { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.page-template-page-work-cases-listing .wc-main-carousel .work-case-brandclient { font-size: 3.25vw; }
  body.page-template-page-work-cases-listing .wc-main-carousel .work-case-title { font-size: 8.5vw; line-height: 1; }
  /* texto y barras del hero como en Figma: título termina a 72px del borde, barras a 41px */
  body.page-template-page-work-cases-listing .wc-main-carousel .work-case-content { bottom: 18vw; }
  body.page-template-page-work-cases-listing .wc-main-carousel .swiper-pagination { bottom: 10.25vw; }

  /* grilla: 4 tarjetas verticales de 400x503 */
  body.page-template-page-work-cases-listing .wc-listing .work-case-item { width: 100%; aspect-ratio: 400 / 503; height: auto; position: relative; overflow: hidden; }
  body.page-template-page-work-cases-listing .wc-listing .work-case-item > a { display: block; height: 100%; }
  body.page-template-page-work-cases-listing .wc-listing .work-case-item video.video-mobile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  body.page-template-page-work-cases-listing .wc-listing .brand-case { position: absolute; left: 5vw; right: 5vw; bottom: 5vw; width: auto; padding: 0; z-index: 10; }
  body.page-template-page-work-cases-listing .wc-listing .brand-case .case,
  body.page-template-page-work-cases-listing .wc-listing .brand-case .brand { font-size: 3.75vw; line-height: 1; margin: 0; }
  body.page-template-page-work-cases-listing .wc-listing .brand-case .brand { margin-top: 1.5vw; }

  /* "More projects": título a 150px del bloque, filas con su video debajo del nombre */
  body.page-template-page-work-cases-listing .wc-cases-listing { padding: 37.5vw 0 0; margin: 0; max-width: none; }
  body.page-template-page-work-cases-listing .wc-cases-listing-title { font-size: 6vw !important; line-height: 1 !important; margin: 0 5vw 3.75vw !important; width: auto; padding: 0 !important; border: 0; height: auto !important; min-height: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .wc-cases-section-list { margin: 0 !important; gap: 0 !important; border: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item { padding: 0 3.75vw 3.75vw !important; border: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item { display: block !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item > a { display: flex !important; flex-direction: column !important; border-top: 1px solid #000; padding-top: 6.25vw; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name-info { padding: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name { margin: 0 !important; font-size: 4vw !important; line-height: 1.125 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location { margin: 1.5vw 0 0 !important; font-size: 4vw !important; line-height: 1.125 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .btn-go-profile { display: none !important; }
  body.page-template-page-work-cases-listing .wc-row-media { display: block; margin-top: 3.75vw; aspect-ratio: 370 / 226; background: #000; overflow: hidden; }
  body.page-template-page-work-cases-listing .wc-row-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* ── Workcase, primer bloque (tags, titular, datos, intro y stills) ── */
@media (min-width: 1024px) {
  /* tags con el mismo padding que las categorías de News */
  .work-case-tags .work-case-tag { padding: 10px 20px; }
  /* la lista de datos (industria, tipo de negocio, tipo de cliente) al mismo tamaño que el párrafo de la intro */
  .work-case-content-details .work-case-content-detail { font-size: clamp(18px, 1.35vw, 26px); line-height: 1.27; }
  /* el bloque ocupa la pantalla contando la navbar: arriba lo de arriba, abajo lo de abajo, y un poco más de aire
     arriba (debajo de la navbar) que abajo */
  .work-case-detail > .work-case-content {
    display: flex; flex-direction: column; box-sizing: border-box; min-height: 100vh; min-height: 100svh;
    padding-top: calc(var(--header-real-h, 38px) + 4vw); padding-bottom: 3vw;
  }
  .work-case-detail > .work-case-content > .container { flex: 1; display: flex; flex-direction: column; }
  .work-case-detail > .work-case-content .work-case-content-cols-top { padding-top: 0; }
  .work-case-detail > .work-case-content .work-case-content-cols-bottom { margin-top: auto; padding-bottom: 0; } /* el tema le sumaba 11vh abajo */
}

/* ── Tablet (768–1023px): el tema usa el layout mobile estirado ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Home, hero: la flecha al ancho de la de "Our model" (34px fijos; alto 40.5px) y frena a 10px del borde de abajo
     contando el rebote (+35% = 54.7px en total) */
  body.home .home-section10 img.up-down-moviment {
    width: 34px; height: auto; bottom: auto;
    top: min(calc(100vh - 10px - 55px), calc(100% - 3.5vh - 41px));
  }
  /* "Wanna work with us?" (home y /careers/): las banderas apiladas, con 13px entre una y otra */
  .career-title-wrapper .career-title + div > div:first-child { display: flex; flex-direction: column; gap: 13px; }

  /* Services (índice): 20px a los lados para todo (antes 10px el título y 14px los ítems, líneas a 10px) */
  body.page-template-page-services .page-services-title { padding-left: 20px; padding-right: 70px; position: relative; }
  body.page-template-page-services .page-services-list { padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; margin-top: 150px; } /* 100px más de aire que el tema (50px) */
  body.page-template-page-services .page-services-item .page-services-item-link { padding-left: 0; padding-right: 0; }
  /* la flecha deja de ir debajo del título: va a la derecha, a la altura de la primera línea del párrafo */
  body.page-template-page-services .page-services-title-icon { position: absolute; left: auto; right: 20px; top: var(--svc-arrow-top, 150px); margin: 0; }

  /* Servicio (detalle), hero: los ítems de la flecha ("Campaigns, Positioning, Impact.") con la misma letra que la
     descripción (DM Sans 500, mismo tamaño e interlineado) */
  .page-service-header-content .col10,
  .page-service-header-content .col30,
  .page-service-header-content .col30 h2,
  .page-service-header-content .col30 p { font-family: 'DM Sans', Arial, sans-serif; font-weight: 500; font-size: clamp(20px, 2.66vw, 26px); line-height: 1.1; }
  /* el ticker con el título, 25px más separado de los textos de abajo */
  .page-service-header .page-service-title { margin-bottom: 25px; }

  /* Servicio, "Brands we've built": textos de las cards en DM Sans (como el resto) y a 20px del borde izquierdo
     y de abajo de la imagen (el slide tiene 10px de padding a la izquierda) */
  .single-service-section20 .brand-case { left: 30px; bottom: 20px; width: calc(100% - 50px); }
  .single-service-section20 .brand-case .brand,
  .single-service-section20 .brand-case .case { font-size: clamp(20px, 2.66vw, 26px); line-height: 1.15; width: auto; }
}

/* ── Menú desplegable (mobile y tablet, <1024px): secciones en Medium (500) y 10% más grandes (Nico, 20/10; probó Semibold y quedaba muy ancho) ──
   El tema: clamp(18px, 6.8vw, 30px) en ClashDisplay Regular. El idioma (EN/PT/ES) no cambia. */
@media (max-width: 1023px) {
  #site-navigation-primary .menu-item a { font-family: ClashDisplay-Medium, Arial, sans-serif; font-size: clamp(19.8px, 7.48vw, 33px); }
  /* sin el tracking del tema (0.05em): con más peso quedaba muy ancho */
  #site-navigation-primary.tracking-50 { letter-spacing: 0; }
}

/* ── Servicio, preguntas frecuentes (todos los anchos) ──
   Abierta = título e ícono naranjas; cerrada = blanca. En pantallas táctiles el :hover del tema quedaba "pegado"
   después de tocar, y la pregunta seguía naranja al cerrarla: ahí el hover no pinta. La animación y el "una sola
   abierta" están en global.js (isla_faq_accordion). */
.single-services-section90 .faq-item.is-open .faq-question-text { color: #ff4600; }
.single-services-section90 .faq-item.is-open .faq-question svg rect,
.single-services-section90 .faq-item.is-open .faq-question svg path { stroke: #ff4600; }
.single-services-section90 .faq-question-text,
.single-services-section90 .faq-question svg rect,
.single-services-section90 .faq-question svg path { transition: color .25s ease, stroke .25s ease; }
@media (hover: none) {
  .single-services-section90 .faq-item:not(.is-open) .faq-question:hover .faq-question-text { color: #fff; }
  .single-services-section90 .faq-item:not(.is-open) .faq-question:hover svg rect,
  .single-services-section90 .faq-item:not(.is-open) .faq-question:hover svg path { stroke: #fff; }
}

/* ── Servicio, tablet (768–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* la tira de video ("ticker" de imágenes) más grande (×1.5 y después ×1.25): se agranda y se recorta a los lados, sin deformar */
  .single-service-section80 { overflow: hidden; }
  .single-service-section80 video { width: 187.5%; max-width: none; margin-left: -43.75%; } /* 150% × 1.25, centrada */
  /* título de "Frequently asked questions" al tamaño de los demás títulos de sección y de las preguntas (24px) */
  .single-services-section90 h2 { font-size: clamp(18px, 5vw, 24px); }
}
/* formulario (mobile y tablet): borde de las cajas más fino (0.5px: en pantallas retina es una línea de un pixel) */
@media (max-width: 1023px) {
  .form-wrapper input:not([type=submit]), .form-wrapper textarea { border-width: .5px; }
}

/* ── About, servicios (Strategy / Creativity) ── */
/* el aire de arriba del texto al abrir acompaña la animación en vez de saltar (todos los anchos) */
.about-services .about-services-item .description-wrapper { transition: padding-top .7s cubic-bezier(.65, 0, .35, 1); }
@media (max-width: 1023px) {
  /* flechas: adentro de la caja (antes se iban 4vw a la derecha y montaban la línea), a la altura del nombre, y con
     el mismo grosor que las líneas divisorias (2px; antes era un trazo de 4px achicado al 40%) */
  .about-services .about-services-item .about-services-item-arrow {
    right: 20px; left: auto; top: calc(2.5vh + 2px); bottom: auto; width: 24px; height: auto;
    transform: rotate(-90deg);
  }
  .about-services .about-services-item.active .about-services-item-arrow { top: auto; bottom: 2.5vh; transform: rotate(180deg); }
  .about-services .about-services-item .about-services-item-arrow path { stroke-width: 2px; vector-effect: non-scaling-stroke; }
  .about-services .about-services-item .about-service-name { padding-right: 60px; }
}

/* Careers, todos los formatos (home y /careers/): el párrafo con el peso del navbar (Clash Regular). Primero fue solo
   desktop (27/10); en tablet y mobile también (Nico, 28/10). */
body .career-title-wrapper .career-text { font-family: ClashDisplay-Regular, Arial, sans-serif; font-weight: 500; }

/* card de pieza gráfica (Ad Age): los logos y el titular como texto solo existen para esa card (ver más abajo) */
.logo-card-logos, .logo-card-title { display: none; }
/* ── News, tablet (768–1023px): cards del carrusel en 4:5 (1.6 por pantalla, ver global.js) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-posts-main-carousel .blog-post-slide { aspect-ratio: 4 / 5; height: auto; overflow: hidden; }
  .blog-posts-main-carousel .blog-post-slide > a { height: 100%; }
  .blog-posts-main-carousel .blog-post-slide .blog-post-media,
  .blog-posts-main-carousel .blog-post-slide .blog-post-main-image,
  .blog-posts-main-carousel .blog-post-slide video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  /* (le gana a «.blog-post-media img[width][height] { height: auto }»: sin esto las fotos verticales estiraban la card) */
  html body .blog-posts-main-carousel .blog-post-slide .blog-post-media img.blog-post-main-image { height: 100%; }
  /* flechas del carrusel: del alto de los botones de categorías (40px), con 10px entre ellas, y el trazo del mismo
     grosor que el borde de esos botones (antes 30px y un trazo de 2 sobre 62 achicado: menos de 1px) */
  .blog-posts-main-carousel .swiper-button-prev,
  .blog-posts-main-carousel .swiper-button-next { width: 40px; height: 40px; }
  .blog-posts-main-carousel .swiper-button-next { right: 10px; }
  .blog-posts-main-carousel .swiper-button-prev { right: 60px; }
  .blog-posts-main-carousel .swiper-button-prev svg,
  .blog-posts-main-carousel .swiper-button-next svg { width: 100%; height: 100%; }
  .blog-posts-main-carousel .swiper-button-prev svg *,
  .blog-posts-main-carousel .swiper-button-next svg * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
}

/* ── News, "More articles" ── */
/* el tag que el tema repite dentro del titular heredaba Clash Display: va en DM Sans como los demás tags */
.blog-posts-archive .blog-post-archive-title .blog-post-category { font-family: 'DM Sans', Arial, sans-serif; font-weight: 500; }
/* "Load more" centrado (mobile y tablet; antes quedaba a la derecha) */
@media (max-width: 1023px) {
  .blog-posts-archive .btn-post-read-more { align-self: center; margin-left: auto; margin-right: auto; }
}

/* ── News y nota, tablet (768–1023px): ticker "More articles" / "Related articles" ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* mismo blanco abajo del ticker que arriba (125px en News, 200px en la nota; la primera nota ya trae 30px) */
  .blog-posts-highlights + .marquee-wrapper + .blog-posts-archive { margin-top: 95px; }
  .single-post-article + .marquee-wrapper + .blog-related-posts-section { margin-top: 200px; }
  /* 25px más de separación entre repeticiones del ticker (16 → 41px) */
  .blog-posts-highlights + .marquee-wrapper .marquee-part:not(.listitem) + .marquee-part:not(.listitem),
  .single-post-article + .marquee-wrapper .marquee-part:not(.listitem) + .marquee-part:not(.listitem) { margin-left: calc(2vw + 25px); }
}

/* ── Nota de News, tablet (768–1023px): aire arriba, copete, cuerpo legible y related = card de "More articles" ── */
.related-archive { display: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  body .single-post-header { padding-top: 100px; }
  body .single-post-content .single-post-content-col.col10 .quote p { line-height: 1.25; }
  /* "Written by" y el cuerpo, al tamaño de los tags y botones (DM Sans 18px) */
  body .single-post-by, body .single-post-by span,
  body .single-post-content .editor-content,
  body .single-post-content .editor-content p,
  body .single-post-content .editor-content li { font-size: 18px; line-height: 1.5; }
  body .blog-related-posts-section .blog-related-posts-swiper,
  body .blog-related-posts-section > .btn-center { display: none; }
  body .blog-related-posts-section .related-archive { display: block; }
}

/* ── Nota de News, tablet (768–1023px): 20px de margen lateral en toda la página (el tema deja 10px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body.single-post .container { padding-left: 20px; padding-right: 20px; }
}

/* ── Brands, tablet (768–1023px): logos más chicos y compensados (BrandsBalance calcula escala y centrado) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body .brands-list .brand-item img { transform: translate(var(--logo-tx, 0), var(--logo-ty, 0)) scale(var(--logo-s, .8)); }
}

/* ── People, tablet (768–1023px): aire arriba y mismos tamaños en grilla y lista ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body .people-members-section:not(.people-members-section + .people-members-section) { padding-top: 100px; }
  /* nombre: 24px, como la sección en la navbar (PEOPLE); rol y oficina: DM Sans 20px (antes 18, como tags y botones).
     La vista lista del tema los baja a 19px con reglas por id: por eso el !important */
  body .people-members-section .people-members-item .people-members-name { font-size: 24px !important; line-height: 1em !important; }
  body .people-members-section .people-members-item .people-members-position-location,
  body .people-members-section .people-members-item .people-members-position-location span { font-size: 20px !important; line-height: 1.25 !important; } /* 18 → 20 (Nico, 29/10) */
}

/* ── Menú desplegable (tablet y mobile): el bloque (secciones + idiomas) centrado en vertical en el naranja ──
   márgenes auto en vez de justify-content:center: si la pantalla es baja no recorta arriba, scrollea */
@media (max-width: 1023px) {
  body .site-header-mobile { padding-top: 0; padding-bottom: 0; overflow-y: auto; }
  body .site-header-mobile > * { flex-shrink: 0; }
  /* el tema le da 56.6% del alto descontando un 10% de padding abajo que acá se saca: 56.6 × 0.9 = mismo espaciado */
  body .site-header-mobile > #site-navigation-primary { margin-top: auto; height: 50.94%; }
  body .site-header-mobile > .menu-language { margin-bottom: auto; padding-bottom: 20px; }
}

/* ── Menú desplegable (tablet y mobile, todas las páginas): idiomas en fila y sin el nombre de la sección arriba ── */
@media (max-width: 1023px) {
  /* EN | PT | ES en una fila; los divisores pasan de horizontales a verticales */
  body .site-header-mobile > .menu-language { display: flex; flex-direction: row; justify-content: center; align-items: center; }
  body .menu-language .menu-language-item { padding: 0 18px; line-height: 1; }
  body .menu-language .menu-language-item:not(:last-child) { border-bottom-width: 0; border-right-width: 2px; }
  body .menu-language .menu-language-item a { display: block; padding-top: 0; padding-bottom: 0; }
  /* el nombre de la sección en la navbar queda debajo del menú (ya está tachado en la lista): se va con el mismo tiempo */
  body .page-title { transition: opacity 350ms ease-in-out, visibility 350ms; }
  body.menu-mobile-open .page-title { opacity: 0; visibility: hidden; }
}

/* ── Careers, tablet (768–1023px): márgenes de 20px, texto de abajo en DM Sans alineado con "Check out", foto completa ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body .career-title-wrapper > div:first-child { padding-left: 20px; padding-right: 20px; }
  /* el párrafo y "Check out…" en la misma columna: de margen a margen */
  body .careers-bottom-text { padding-left: 20px; padding-right: 20px; }
  body .careers-bottom-text > div { font-family: "DM Sans", Arial, sans-serif; font-size: 18px; line-height: 1.5; }
  body .careers-external-link { padding-left: 20px; padding-right: 20px; }
  /* foto del equipo: al ancho de la pantalla, sin el corrimiento a la derecha ni recorte */
  body .career-photo img { margin-left: 0; width: 100%; height: auto; }
}

/* ── Home, mobile (< 768px) ── */
.career-waves-mobile { display: none; }
@media (max-width: 767px) {
  /* flecha del hero al tamaño de la de "Our model" (34px) */
  body.home .up-down-moviment[src$="arrow.svg"] { width: 34px; height: auto; }
  /* "Wanna work with us?" (también en /careers/): olas arriba del título y alineadas a la izquierda */
  body .career-title-wrapper .career-waves-mx { display: none; }
  body .career-title-wrapper .career-waves-mobile { display: block; width: 84px; height: auto; margin-bottom: 40px; } /* 20 → 40px hasta el título (Nico, 21/10) */
  /* banderas con 10px entre sí */
  body .career-title-wrapper .career-title + div > div:first-child { display: flex; flex-direction: column; gap: 10px; }
  /* párrafo con un poco más de interlínea */
  body .career-title-wrapper .career-text { line-height: 1.2; }
}

/* ── Mobile (< 768px), todo el sitio: 15px de margen lateral ──
   El tema mezclaba 10px (.container, con reglas por página de más especificidad: de ahí el !important), 13px
   (secciones mxlg:px-[13px]), 6.11vw / 5vw (home, About) y 20px (Work y workcase, del Figma). */
@media (max-width: 767px) {
  body .container { padding-left: 15px !important; padding-right: 15px !important; }
  body [class~="mxlg:px-[13px]"], body [class~="mxlg:px-[6.11vw]"] { padding-left: 15px; padding-right: 15px; }
  body .about-service-name { padding-left: 15px; }
  body .page-services-title { padding-left: 15px; padding-right: 15px; }
  /* las tarjetas del índice de Services ya traen 4px adentro */
  body .page-services-list { padding-left: 11px; padding-right: 11px; }
  /* Work (índice): textos sobre los videos y lista "More projects" */
  body .wc-main-carousel .work-case-content { padding-left: 15px; padding-right: 15px; }
  body .wc-listing .brand-case { left: 15px !important; right: 15px !important; }
  /* "More projects" ya trae .container: el margen lo ponen las filas, no el contenedor */
  body.page-template-page-work-cases-listing .wc-cases-listing.container { padding-left: 0 !important; padding-right: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing-title { margin-left: 15px !important; margin-right: 15px !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item { padding-left: 15px !important; padding-right: 15px !important; }
  /* carruseles a todo el ancho: las slides traen 10px de cada lado; 5px más en el carrusel deja la primera a 15px */
  body .blog-posts-main-carousel, body .blog-related-posts-swiper { padding-left: 5px; padding-right: 5px; }
  /* "Brands we've built" (servicio): el video llena la card; el texto adentro va a 15px */
  body .swiper-single-projects .swiper-slide { padding-left: 15px; }
  /* footer */
  body .site-footer { padding-left: 15px; padding-right: 15px; }
  /* Careers: como en tablet, el párrafo (DM Sans) y "Check out…" en la misma columna, y la foto completa */
  body .careers-bottom-text, body .careers-external-link { padding-left: 15px; padding-right: 15px; }
  body .careers-bottom-text > div { font-family: "DM Sans", Arial, sans-serif; font-size: 16px; line-height: 1.5; }
  body .career-photo img { margin-left: 0; width: 100%; height: auto; }
}

/* ── Home, hero en mobile (Nico, 28/10): el título iba anclado desde abajo (44vh), el video desde arriba (18.5vh) y el
   texto desde abajo (16vh); en pantallas bajas el título subía hasta pisar el reloj y la barra de bienvenida. Ahora es
   una grilla de arriba hacia abajo: reloj; video y título en la misma celda (el título 6.34vh más abajo que el video,
   encima); el texto 41px debajo de esa celda. A 393×852 todo queda donde estaba. La flecha y las coordenadas siguen
   abajo de la sección, que crece si no entra. ── */
@media (max-width: 767px) {
  body.home .home-section10 .section-content { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: 15px; padding-right: 15px; padding-bottom: calc(3.5vh + 41px + 40px); }
  body.home .home-section10 .section-content > .lg\:hide {
    position: relative; top: auto; right: auto; grid-row: 2; grid-column: 1; justify-self: end; align-self: start;
    margin-top: clamp(14px, 2.5vh, 28px); margin-right: -15px; /* lo mismo que el relleno del contenedor (15px): llega justo al borde derecho, sin pasarse (con -6.11vw se pasaba ~9px y la home scrolleaba de costado) */
  }
  body.home .home-section10 .section-title {
    position: relative; bottom: auto; grid-row: 2; grid-column: 1; align-self: start; z-index: 2;
    margin-top: calc(clamp(14px, 2.5vh, 28px) + 6.34vh);
  }
  body.home .home-section10 .section-subtitle { position: relative; bottom: auto; grid-row: 3; margin-top: 41px; }
}

/* ── iPhone (Safari 26): la página se dibuja también detrás del reloj y la batería, arriba de la navbar, y ahí se veía
   pasar el contenido (Nico, 28/10). Una tapa fija justo por encima del borde de arriba, naranja plena en todas las
   páginas (Nico, 28/10: el blanco del centro no se leía como parte de la barra). ── */
@media (max-width: 1023px) {
  html::before { content: ''; position: fixed; left: 0; right: 0; bottom: 100%; height: 200px; z-index: 10000; pointer-events: none; background: #ff4600; }
}

/* ── Footer en mobile (Nico, 28/10): sin coordenadas; el teléfono y el mail a la derecha de la dirección, todos
   sobre la misma vertical (la columna mide lo que el mail, que es igual en las cuatro oficinas). Así el footer entra
   en una pantalla, y la navbar se va para arriba al llegar a él (HeaderContrast.tsx pone html.navbar-en-footer). ── */
.footer-oficina-m { display: none; }
@media (max-width: 767px) {
  body .site-footer .col { display: block; }
  body .site-footer .footer-oficina, body .site-footer .col-footer { display: none; }
  body .site-footer .footer-oficina-m { display: block; }
  /* la columna del teléfono, del ancho del más largo ((+55) 11-30810091): los cuatro arrancan en la misma vertical */
  body .site-footer .footer-oficina-m-fila { display: grid; grid-template-columns: minmax(0, 1fr) 8.2em; column-gap: 16px; margin-top: 6px; }
  /* aires más cortos (el tema: 6.48vh arriba y entre oficinas, 17.59vh hasta el logo, interlínea 1.76): el footer
     ocupa al menos una pantalla y lo que sobra queda arriba del logo */
  body .site-footer { min-height: 100svh; padding-top: 12px; padding-bottom: 16px; }
  body .site-footer .footer-top { margin-top: 0; }
  body .site-footer .footer-top > .col { margin-top: 15px; }
  body .site-footer .col p:not(.place) { line-height: 1.4em; }
  body .site-footer .footer-bottom { margin-top: auto; padding-top: 22px; }
  /* de las redes a la primera oficina, el triple de aire que entre oficinas (Nico, 28/10) */
  body .site-footer .footer-top > .col10 + .col { margin-top: 46px; }
  /* «Strategic Partnership» más grande y Alexandria más chico, del mismo alto (el logo mide lo que las mayúsculas de
     Clash: .69em) y sobre la misma línea base; uno en cada punta */
  body .site-footer .companies { --comp-fs: clamp(10px, 2.8vw, 16px); font-size: var(--comp-fs); justify-content: space-between; align-items: baseline; }
  body .site-footer .companies img { width: auto; height: calc(var(--comp-fs) * .69); }
}

/* ── Menú desplegable abierto (tablet y mobile): la navbar también va naranja, así el overlay cubre toda la pantalla
   (en las páginas internas el header es transparente y se veía el fondo de la página arriba) ── */
@media (max-width: 1023px) {
  body.menu-mobile-open .site-header { background-color: #ff4600; transition: background-color 350ms ease-in-out; }
}

/* ── Work y workcase ── */
/* Texto de impacto (todos los anchos): lo que se marca en negrita en el panel va en Clash Semibold, como en el Figma */
.work-case-credits-impact strong, .work-case-credits-impact b { font-family: ClashDisplay-Semibold, Arial, sans-serif; font-weight: normal; }
/* Créditos: los cargos subrayados (underlineRoles en WorkPartnerPages.tsx) */
.work-case-credits-footer u { text-decoration: underline; text-underline-offset: 2px; }
/* Cards con video (Work y "más trabajos" del case): el cliente en DM Sans Medium; sobre video, en Mac, el texto
   blanco sin antialias se veía más pesado */
.wc-listing .brand-case { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.wc-listing .brand-case .brand { font-weight: 500; }
@media (max-width: 1023px) {
  /* "More projects": 15px entre el texto (cliente | año) y el video; el tema le sumaba 15px de padding abajo */
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location { padding-bottom: 0 !important; }
}
@media (max-width: 767px) {
  /* datos del case (industria, tipo de negocio, cliente): la letra de los tags de arriba (DM Sans Medium 14px) */
  body .work-case-content-details .work-case-content-detail { font-size: 14px; line-height: 1.2; }
  /* el cuerpo del case, igual que los datos y los tags: 14px */
  body .work-case-content-intro, body .work-case-content-intro p { font-size: 14px; line-height: 1.4; }
}

/* ── Mobile (< 768px), todo el sitio: DM Sans ~1.5px más grande y tags más bajos ──
   La DM Sans se agranda desde la fuente (size-adjust 107%: la H sale ~7% más alta, +1 a +1.3px en los tamaños de 14–18px; la DM Sans es variable con tamaño óptico, por eso no es exactamente proporcional), así vale para todo
   lo que use DM Sans, sin tocar cada regla. Mismos archivos y rangos que el CSS de Google Fonts (latin): al estar
   declarados después, ganan en mobile. */
@media (max-width: 767px) {
  @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: block; size-adjust: 107%;
    src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHTWEBlw.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: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: block; size-adjust: 107%;
    src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4Hz-DJF4e8A.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; }
  /* tags (workcase y News): 2px menos arriba y abajo (10 → 8px) */
  body .work-case-tags .work-case-tag, body .blog-post-category { padding-top: 8px; padding-bottom: 8px; }
}

/* ── Mobile (< 768px), todo el sitio: un solo tamaño de DM Sans: 4.224vw (16.6px en un iPhone 16; arrancó en el de Services, 4.5vw, y Nico lo bajó) ──
   Antes convivían 14, 14.7, 15.7, 16, 17.7 y 18px. Cada párrafo conserva su interlínea (relativa al tamaño).
   Quedan aparte, a propósito: la cita grande de los testimonios y la letra chica de los créditos. */
@media (max-width: 767px) {
  /* la animación MoveUpDown la corre -50% de su ancho (15px): 30px de margen la deja a 15px del borde */
  body.page-template-page-services .page-services-title-icon { left: 0; margin-left: 30px; }

  /* etiquetas, datos y botones (una línea) */
  body .blog-post-category, body .work-case-tags .work-case-tag, body .work-case-content-details .work-case-content-detail,
  body .blog-post-date, body .blog-post-city, body .btn-post-read-more .load, body .btn-works-case-view-all, body .btn-all-projects,
  body .single-post-footer-link, body .people-members-item .people-members-position-location,
  body .people-members-item .people-members-position-location span, body .work-case-position-location,
  body .work-case-position-location span, body .wc-listing .brand-case .brand, body .work-case-credits-top .label,
  body .work-case-credits-top .brand, body .testimonial-author, body .testimonial-author p, body .highlight, body .col.col30 > span
  { font-size: 4.224vw !important; }

  /* textos de lectura: mismo tamaño, cada uno con su interlínea */
  body .work-case-content-intro, body .work-case-content-intro p { font-size: 4.224vw !important; line-height: 1.4 !important; }
  body .single-post-by, body .single-post-by span,
  body .single-post-content .editor-content, body .single-post-content .editor-content p, body .single-post-content .editor-content li,
  body .partner-single-bio-second-text, body .partner-single-bio-second-text p, body .partner-single-bio-second-text strong
  { font-size: 4.224vw !important; line-height: 1.38 !important; }
  body .careers-bottom-text > div { font-size: 4.224vw !important; line-height: 1.5 !important; }
  body .page-service-header-content .col30 p, body .page-service-header-content .col30 h2 span,
  body .page-services-list .col.middle p, body.single-islaservice section:not(.single-service-section40) .editor-content p { font-size: 4.224vw !important; line-height: 1.22 !important; }
}

/* ── Servicio, "Brands we've built" (< 1024px): como en desktop y en Work, arriba el case en Clash Semibold mayúscula
   y abajo el cliente en DM Sans Medium (el tema los mostraba al revés y en otras fuentes) ── */
@media (max-width: 1023px) {
  body .single-service-section20 .brand-case { display: flex; flex-direction: column-reverse; }
  body .single-service-section20 .brand-case .case { font-family: ClashDisplay-Semibold, Arial, sans-serif; font-weight: normal; text-transform: uppercase; }
  body .single-service-section20 .brand-case .brand { font-family: 'DM Sans', Arial, sans-serif; font-weight: 500; text-transform: none; }
  /* testimonios: las flechas, como en desktop, debajo de la cita (el tema las sacaba de pantalla) */
  body .single-service-section40 .swiper-service-testimonials-texts { margin-bottom: 70px; }
  body .single-service-section40 .swiper-button-prev, body .single-service-section40 .swiper-button-next { width: 40px; height: 40px; top: calc(100% + 20px); }
  body .single-service-section40 .swiper-button-prev { left: 0; }
  body .single-service-section40 .swiper-button-next { left: 45px; } /* 5px entre flechas */
}

/* ── Servicio, mobile (< 768px) ── */
@media (max-width: 767px) {
  /* textos de las cards a 20px del borde de la imagen y de abajo (como en tablet); mismo tamaño que el resto */
  body .single-service-section20 .brand-case { left: 35px; bottom: 20px; width: calc(100% - 55px); }
  body .single-service-section20 .brand-case .brand, body .single-service-section20 .brand-case .case { font-size: 4.224vw; line-height: 1.15; }
  /* "See all", inputs del formulario y SEND: el mismo padding que los tags (8px arriba y abajo, 20px a los lados) */
  body .single-service-section20 .btn-all-projects { padding: 8px 20px !important; height: auto; min-width: 0; line-height: 1; }
  /* "See all" siempre en una línea: con un título largo al lado se aplastaba y partía en dos (Nico y Pedro, 26/10) */
  body .single-service-section20 .btn-all-projects { white-space: nowrap; flex-shrink: 0; margin-left: 15px; }
  body.single-islaservice form input:not([type=hidden]):not([type=checkbox]):not([type=radio]), body.single-islaservice form textarea,
  body.single-islaservice form [type=submit], body.single-islaservice form button { padding: 8px 20px !important; font-size: 4.224vw !important; line-height: 1.4 !important; }
  /* testimonios: interlínea más abierta (en 1 las letras se tocaban) */
  body .swiper-service-testimonials-texts .editor-content p { line-height: 1.15; }
  /* tira de video más grande (+50% y después +40%), centrada */
  body .single-service-section80 { overflow: hidden; }
  body .single-service-section80 video { width: 210%; height: auto; max-width: none; margin-left: -55%; } /* 150% × 1.4 */
}

/* ── Servicio, testimonios (desktop): 10px entre las flechas (el tema dejaba 20px) ── */
@media (min-width: 1024px) {
  body .single-service-section40 .swiper-button-next { left: calc(clamp(30px, 3.125vw, 60px) + 10px); }
}
/* ── Servicio, mobile: los inputs de una línea con menos radio (16px en un input de 41px se veía casi redondo;
   8px guarda la proporción que tiene en desktop, 16px sobre 80px). El textarea y el botón no cambian. ── */
@media (max-width: 767px) {
  body.single-islaservice form input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]) { border-radius: 8px !important; }
}

/* ── News: card de pieza gráfica armada como las demás, en todos los anchos (Nico, 27/10: también en desktop) ── */
/* cards de pieza gráfica (Ad Age): en vez de la imagen con el texto adentro, logos al centro y categoría + titular
   como texto, en el mismo lugar que en las demás cards (ver LOGO_CARDS en PostPage.tsx) */
.blog-posts-main-carousel .blog-post-slide.logo-card > a { background: #000; }
.blog-posts-main-carousel .blog-post-slide.logo-card .blog-post-media { visibility: hidden; }
.blog-posts-main-carousel .blog-post-slide.logo-card .logo-card-logos {
  display: flex; position: absolute; inset: 22% 18% 40%; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.blog-posts-main-carousel .blog-post-slide.logo-card .logo-card-logos img { height: auto; max-width: 100%; }
.blog-posts-main-carousel .blog-post-slide.logo-card .logo-card-title { display: inline; }

/* ── Mobile (< 768px): flechas de carruseles (News y testimonios) del alto de los botones de filtro (35px), con el
   trazo de las de tablet (1.5px) y 5px entre ellas ── */
@media (max-width: 767px) {
  body .blog-posts-main-carousel .swiper-button-prev, body .blog-posts-main-carousel .swiper-button-next,
  body .single-service-section40 .swiper-button-prev, body .single-service-section40 .swiper-button-next { width: 35px; height: 35px; }
  body .blog-posts-main-carousel .swiper-button-next { right: 15px; }
  body .blog-posts-main-carousel .swiper-button-prev { right: 55px; }
  body .single-service-section40 .swiper-button-next { left: 40px; }
  body .blog-posts-main-carousel .swiper-button-prev svg, body .blog-posts-main-carousel .swiper-button-next svg,
  body .single-service-section40 .swiper-button-prev svg, body .single-service-section40 .swiper-button-next svg { width: 100%; height: 100%; }
  body .blog-posts-main-carousel .swiper-button-prev svg *, body .blog-posts-main-carousel .swiper-button-next svg *,
  body .single-service-section40 .swiper-button-prev svg *, body .single-service-section40 .swiper-button-next svg * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
}

/* ── Mobile (< 768px): aire arriba del título igual en todas las secciones (75px desde la navbar hasta el título;
   se probó 90 y era mucho)
   y News más compacta ── */
@media (max-width: 767px) {
  /* News, nota, People: el título arrancaba a ~15px de la navbar; perfil de partner a 43; About a 36; Services a 91 */
  body .blog-container-menu { padding-top: 60px; }
  /* News: de 43 a 22px entre el título y los botones (9px de gap + los 13px que trae el carrusel de botones) */
  body .blog-container-menu { row-gap: 9px !important; gap: 9px !important; }
  body .single-post-article .single-post-header { padding-top: 58px; }
  body .people-members-section:not(.people-members-section + .people-members-section) { padding-top: 58px; }
  body .partner-single-banner { padding-top: 132px; }
  /* la foto (fondo) se ancla desde arriba para que la cabeza arranque ~35px debajo del texto en cualquier alto de
     pantalla (anclada abajo, en pantallas bajas se pisaba). Las fotos mobile son todas 800x1840 con la cabeza a ~1/3:
     el texto termina en ~137.6px + 32.4vw y la cabeza está a 77vw del borde de la foto → 172.6px - 44.65vw.
     En un iPhone 16 queda donde pidió Nico (50px más abajo que antes). El texto no se mueve. */
  body .partner-single-banner { background-position: center calc(172.6px - 44.65vw) !important; }
  body .about-title-wrapper { padding-top: 39px; }
  body.page-template-page-services .page-services-title { margin-top: -16px; }
  /* News: 25px entre los botones de filtro y la línea, y 25px entre la línea y las cards (antes 42 y 35) */
  /* (los botones dejan 13px de swiper abajo: 12px de padding pone la línea a 25px de los botones) */
  body .blog-container-menu { padding-bottom: 12px !important; }
  body .blog-posts-main-carousel { margin-top: 25px; }
  /* cards del carrusel: 15px entre una y otra, igual que el margen lateral (7.5px de cada lado de la card + 7.5px
     en el carrusel deja la primera a 15px) */
  body .blog-posts-main-carousel { padding-left: 7.5px; padding-right: 7.5px; }
  body .blog-posts-main-carousel .swiper-slide { padding-left: 7.5px; padding-right: 7.5px; }
}

/* "Buenos Aires" / "Bs As." (City.tsx): la forma corta solo en mobile */
.city-short { display: none; }
/* ── News y nota, mobile (< 768px) ── */
@media (max-width: 767px) {
  .city-long { display: none; }
  .city-short { display: inline; }
  /* tickers ("More articles" y "Related articles"): 125px de blanco arriba y abajo, como arriba del de News */
  body .blog-posts-highlights + .marquee-wrapper + .blog-posts-archive { margin-top: 95px; }
  body .single-post-article + .marquee-wrapper { margin-top: 125px; }
  body .single-post-article + .marquee-wrapper + .blog-related-posts-section { margin-top: 95px; }
  /* cabecera de la nota: el tag arriba y la fecha | ciudad debajo, en su propia línea (en una sola fila se partía) */
  body .single-post-header .blog-post-info-bottom { flex-wrap: wrap; align-items: center; justify-content: flex-start; row-gap: 7.5px; } /* el salto cuenta como fila: 2 × 7.5 = 15px */
  body .single-post-header .blog-post-info-bottom::before { content: ''; flex-basis: 100%; order: 1; }
  body .single-post-header .blog-post-info-bottom .blog-post-category { order: 0; }
  body .single-post-header .blog-post-info-bottom .blog-post-date { order: 2; flex: 0 0 auto; width: auto; padding-left: 0; margin-left: 0 !important; }
  body .single-post-header .blog-post-info-bottom .blog-post-city { order: 3; flex: 0 0 auto; width: auto; }
  /* copete: un poco más de interlínea y más cerca del logo + autor */
  body .single-post-content .single-post-content-col.col10 .quote p { line-height: 1.15; }
  body .single-post-content .quote + .single-post-logo-by { margin-top: 25px; }
}

/* ── Tags (categorías de News y tags de workcase), todos los anchos: siempre como vienen ("Campaigns"), nunca en
   mayúscula (el tema los pasaba a mayúscula en las notas relacionadas) ── */
body .blog-post-category, body .work-case-tags .work-case-tag { text-transform: none !important; }

/* ── Mobile (< 768px): heroes de texto con el título a 75px de la navbar (la regla de todas las secciones) ── */
@media (max-width: 767px) {
  /* Brands: el título iba centrado en la pantalla negra (a 188px); ahora arriba */
  body .brands-title-wrapper { justify-content: flex-start; padding-top: 136px; } /* el título tiene interlínea .8: su texto arranca 11px más arriba */
  /* Careers: a 88px por el padding de la página (13vh); las olas quedan arriba del título */
  body.page-template-page-careers #page { padding-top: 98px; }

  /* Brands: más naranja arriba y abajo de los logos (antes 6px) */
  body .brands-list { padding-top: 60px; padding-bottom: 60px; }
  /* ajustes a ojo de Nico (21/10) */
  body .brands-list img[src*="logo-abinbev"] { transform: scale(.85); }
  body .brands-list img[src*="brands-client-marias"] { transform: scale(.9); }
  body .brands-list img[src*="brands-client-plusdin"] { transform: scale(.9); }
  body .brands-list img[src*="client-metlife"] { transform: scale(.95); }
}

/* Cargos de People (Role.tsx): la forma corta solo en mobile */
.role-short { display: none; }
/* ── People, mobile (< 768px) ── */
@media (max-width: 767px) {
  .role-long { display: none; }
  .role-short { display: inline; }
  /* nombres en Clash con la proporción del Figma (Clash 20 / DM Sans 18) sobre la DM Sans del sitio (4.224vw):
     4.693vw, 18.4px en un iPhone 16; igual en grilla y en lista (la lista los bajaba a 15.7px) */
  body .people-members-section .people-members-item .people-members-name { font-size: 4.693vw !important; line-height: 1 !important; }
}

/* ── People, vista lista (todos los anchos): sin la línea debajo del último islander; el cambio al naranja del footer
   ya marca el corte ── */
.people-members-section #islanders-list-list:checked ~ .people-members-section-list .people-members-item:last-child { border-bottom-width: 0 !important; }

/* ── Perfil de partner, "Partners" (mobile, < 768px): el carrusel llega hasta el borde derecho (se ve que sigue) y
   "See all" como los demás botones (DM Sans, padding de los tags) ── */
@media (max-width: 767px) {
  /* el carrusel ocupa todo el ancho (no lo recorta el margen del contenedor, ni a la derecha ni al arrastrar hacia la
     izquierda) y la primera card arranca a 15px por el padding */
  body .partners-list-related .partners-list-related-items { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }
  /* (el botón es absoluto a 30px de arriba: con su nuevo alto, 15px más abajo queda centrado con el título) */
  body .partners-list-related .btn-see-all { top: 45px !important; font-family: 'DM Sans', Arial, sans-serif !important; font-weight: 500; font-size: 4.224vw !important; line-height: 1 !important; padding: 8px 20px !important; height: auto !important; min-width: 0 !important; border-width: 1px; }
}

/* ── Perfil de partner, tablet (768–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 20px de margen (antes 10) y el nombre en dos líneas, como en desktop y mobile */
  body .partner-single-banner > .container { padding-left: 20px; padding-right: 20px; }
  body .partner-single-banner .partner-single-title { width: min-content; }
  /* la foto 30% más grande (desborda a los lados) y anclada desde arriba: la cabeza (a ~34% del alto de la foto
     tablet, 1620x2160, que a 130% mide 173.3vw) arranca debajo del texto, que termina a 263px; Nico la pidió 30px
     más arriba que la primera versión → 273px - 58.9vw */
  body .partner-single-banner { background-size: 130% auto !important; background-position: center calc(273px - 58.9vw) !important; }
}

/* ── Tablet (768–1023px), todo el sitio: 20px de margen lateral ──
   El tema mezclaba 10px (.container), 13px (mxlg:px-[13px]), 5vw (About, Work) y 3.75vw (lista de Work). */
@media (min-width: 768px) and (max-width: 1023px) {
  body .container { padding-left: 20px !important; padding-right: 20px !important; }
  body [class~="mxlg:px-[13px]"], body [class~="mxlg:px-[6.11vw]"] { padding-left: 20px; padding-right: 20px; }
  body .about-service-name { padding-left: 20px; }
  body .site-footer { padding-left: 20px; padding-right: 20px; }
  /* Work (índice): "More projects" ya trae .container; el margen lo ponen las filas */
  body.page-template-page-work-cases-listing .wc-cases-listing.container { padding-left: 0 !important; padding-right: 0 !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing-title { margin-left: 20px !important; margin-right: 20px !important; }
  body.page-template-page-work-cases-listing .wc-cases-listing .work-case-article-item { padding-left: 20px !important; padding-right: 20px !important; }
  body .wc-listing .brand-case { left: 20px !important; right: 20px !important; }
  /* carruseles a todo el ancho: la primera card a 20px (las slides traen 10px de cada lado) */
  body .blog-posts-main-carousel { padding-left: 10px; padding-right: 10px; }
  body .swiper-single-projects .swiper-slide { padding-left: 20px; }
  body .single-service-section20 .brand-case { left: 40px !important; }
  /* perfil de partner, "Partners": el carrusel de borde a borde (no lo recorta el margen) */
  body .partners-list-related .partners-list-related-items { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  /* "See all" (perfil de partner y servicio) como los demás botones: DM Sans 18px con el padding de los tags (10px 20px) */
  body .single-service-section20 .btn-all-projects { font-family: 'DM Sans', Arial, sans-serif !important; font-weight: 500; font-size: 18px !important; line-height: 1 !important; padding: 10px 20px !important; height: auto !important; min-width: 0 !important; }
  body .partners-list-related .btn-see-all { top: 54px !important; font-family: 'DM Sans', Arial, sans-serif !important; font-weight: 500; font-size: 18px !important; line-height: 1 !important; padding: 10px 20px !important; height: auto !important; min-width: 0 !important; border-width: 1px; }
}

/* ── "Wanna work with us?" y Careers, mobile (< 768px) ── */
@media (max-width: 767px) {
  /* las banderas arrancan a la altura del texto de la izquierda (el texto trae 5vh de padding arriba) */
  body .career-title-wrapper .career-title + div > div:first-child { margin-top: 5vh; align-self: flex-start; }
  /* Careers: 20px más de naranja debajo de la flecha (estaba a 13px del borde) */
  body.page-template-page-careers .career-title-wrapper > div:first-child { padding-bottom: calc(15vh + 20px); }
  body.page-template-page-careers .career-title-wrapper img.arrow-float-bounce[class~="mxlg:bottom-[3vh]"] { bottom: calc(3vh + 20px); }
  /* Careers: 25px menos de blanco arriba de la descripción */
  body.page-template-page-careers .careers-bottom-text { margin-top: -25px; }
}

/* ── Menú desplegable en pantallas bajas (tablet apaisada, ≤ 760px de alto): las secciones toman su alto natural
   (con el alto en % del tema no entraban y CAREERS se pisaba con el globo) y el bloque sigue centrado ── */
@media (max-width: 1023px) and (max-height: 760px) {
  body .site-header-mobile > #site-navigation-primary { height: auto; min-height: 0; margin-bottom: 50px; }
  body .site-header-mobile > #site-navigation-primary .header-menu-primary { height: auto; }
}

/* ── Vista previa del panel (igual que en el panel de Paradigma) ─────────────
   Lo editable se resalta en azul al pasar el mouse y, al clickearlo, el panel lleva a su campo. La clase la pone
   components/EditarEnPanel.tsx, que solo se monta en la preview: el sitio público no ve nada de esto.
   El azul NO existe en la paleta de ISLA a propósito: nunca se confunde con el contenido. */
:root { --azul-editar: #0099ff; }
.modo-preview [data-campo] { cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 140ms ease; }
.modo-preview, .modo-preview a, .modo-preview button, .modo-preview label { cursor: default; }
.modo-preview [data-campo], .modo-preview [data-campo] * { cursor: pointer; }
.modo-preview .editable-anclado { position: relative; }
.modo-preview .editable-activo { outline-color: var(--azul-editar); }
.modo-preview .editable-contenedor { outline-style: dashed; outline-offset: 6px; outline-color: rgba(0, 153, 255, 0.45); }
.modo-preview .preview-apuntado { animation: preview-apuntar 1600ms ease-out; }
@keyframes preview-apuntar {
  0%, 55% { outline-color: var(--azul-editar); outline-offset: 4px; }
  100% { outline-color: transparent; outline-offset: 2px; }
}
.modo-preview .editable-activo::after {
  content: 'Editar'; position: absolute; top: 0; left: 0; z-index: 9999;
  transform: translate(-2px, calc(-100% - 2px)); padding: 3px 7px;
  background: var(--azul-editar); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
/* La tarjeta del work case que se está editando, cuando el panel pasa la preview al índice (toggle «Index»). El outline
   no se ve sobre el video: va un borde interior. */
.modo-preview .preview-caso { position: relative; }
.modo-preview .preview-caso.preview-apuntado::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--azul-editar); pointer-events: none; z-index: 5; }

/* ── Work case, ticker «More work» ── el tema separaba las repeticiones con 7.5vw en mobile; va el mismo gap que todos
   los tickers (2vw). La velocidad la iguala global.js con data-match-home. (Nico, 23/10) */
@media (max-width: 1023px) {
  body.single-islaworkcase .marquee-wrapper .full-marquee-text .marquee-part:not(.listitem) + .marquee-part:not(.listitem) { margin-left: 2vw; }
}

/* ── Auditoría 26/10, tanda 1 ── */
/* Títulos con una palabra más ancha que su columna (otro idioma o un texto nuevo): se achican solo lo necesario para
   que esa palabra entre. `--palabra` lo pone el servidor (Sections.tsx): en About, la más larga. Si entra, queda el
   tamaño de siempre. About en español se cortaba a 360px.
   Careers (home y /careers/, 27/10): el servidor manda el ancho real de las palabras (`--palabra1`, la primera;
   `--palabras`, la más ancha del resto). La primera tiene que entrar en su columna (61.45vw); el resto, terminar
   antes de las olas (57vw, a 1.5vw), y por eso los renglones miden 51.3vw (el título sigue ocupando 61.45vw: el resto
   es padding, para no correr el texto de la derecha en la home): si dos palabras juntas no entran, van en renglones
   distintos (la primera, sola, puede pasarse). Un 2% de margen por el kerning. En inglés queda igual. */
@media (min-width: 1024px) {
  .career-title { padding-right: 10.15vw; font-size: min(clamp(140px, 13.6vw, 340px), calc(60.2vw / var(--palabra1, 4.2)), calc(50.3vw / var(--palabras, 3.3)), 25vh); } /* 25vh: ver «Ventanas anchas y bajas» */
  /* la flechita de abajo va contra el borde inferior del bloque: si el texto de la derecha es lo más alto (texto largo
     o título achicado), este margen la deja debajo del texto en vez de encima de sus últimas líneas */
  .career-title-wrapper .career-text { margin-bottom: 4.2vw; }
}
@media (max-width: 1023px) {
  .about-title { font-size: min(clamp(80px, 20vw, 120px), calc((100vw - 30px) / (var(--palabra, 1) * .76))); }
}
/* las portadas de las notas y tarjetas de News ya traen ancho y alto (para reservar su lugar): el alto lo da el ancho */
.blog-post-media img[width][height] { height: auto; }
/* News: la línea debajo de los filtros, con los márgenes del sitio (el tema la ponía a 10px) */
@media (max-width: 1023px) {
  body.blog .blog-container-menu:after, body.archive .blog-container-menu:after { left: 20px; width: calc(100% - 40px); }
}
@media (max-width: 767px) {
  body.blog .blog-container-menu:after, body.archive .blog-container-menu:after { left: 15px; width: calc(100% - 30px); }
}

/* ── Navbar (todos los anchos): fondo blanco fijo, secciones en naranja y la actual en negro (tachada) ──
   Reemplaza el cambio de color según el fondo de abajo. "body .site-header" para ganarle a las reglas por página del
   tema (Brands y Careers ponían el menú en blanco; la home en mobile, la barra en naranja). */
body .site-header, body.home .site-header { background-color: #fff; }
@media (min-width: 1024px) {
  body .site-header #site-navigation-primary .menu-item a { color: #ff4600; }
  body .site-header #site-navigation-primary .menu-item.current-menu-item a { color: #000; }
}
/* La línea de las secciones (la del hover en desktop) va pegada a las letras; la sección actual la tiene fija, en vez
   del tachado del tema (también en el menú desplegable de tablet y mobile). El selector de idioma, igual: el activo
   subrayado y los otros con la línea en hover. */
#site-navigation-primary .menu-item-label, .menu-language .menu-item-label { --nav-line-y: .1em; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom var(--nav-line-y) / 0 2px; }
body #site-navigation-primary .menu-item.current-menu-item a, body .menu-language .menu-language-item.active { text-decoration: none; }
body #site-navigation-primary .menu-item.current-menu-item .menu-item-label, body .menu-language .menu-language-item.active .menu-item-label { background-size: 100% 2px; }
/* Desplegable de idioma (desktop): el link del tema es inline con 2vh de padding y pisaba al idioma de arriba (el hover
   de la mitad baja de PT subrayaba ES). En bloque y sin padding, cada idioma responde en su fila. */
@media (min-width: 1024px) {
  body .menu-language .menu-language-item a { display: block; padding-top: 0; padding-bottom: 0; }
}
/* Tablet y mobile: con el menú abierto la barra vuelve al naranja (si no, el blanco quedaba como un recuadro entre el
   logo y la X). */
@media (max-width: 1023px) {
  body.menu-mobile-open .site-header { background-color: #ff4600; }
}
/* Tablet y mobile: el nombre de la sección va arriba del fondo blanco de la barra, en naranja (no tapa el botón del menú). */
@media (max-width: 1023px) {
  body .page-title { z-index: 10000; color: #ff4600; pointer-events: none; }
}

/* ── Transición entre páginas: el telón («Curtain Wipe») vive en src/app/(frontend)/layout.tsx, inline en el head ── */

/* ── Tarjetas con video (Services, Work, More projects): el texto en su propia capa. En iPhone, un video que se está
   reproduciendo puede dibujarse encima del texto absoluto y lo «borra» al deslizar el carrusel (Nico y Pedro, 26/10) ── */
@media (max-width: 1023px) {
  .swiper-slide .brand-case { transform: translateZ(0); }
  .swiper-slide a > video { position: relative; z-index: 0; }
}


/* ── Navbar (desktop): las líneas naranjas separadoras de la home (abajo y entre secciones), en todas las páginas (Nico, 27/10) ── */
@media (min-width: 1024px) {
  body #site-navigation-primary { border-bottom: 2px solid #ff4600; }
  body #site-navigation-primary .menu-item:not(:last-child) { border-right: 2px solid #ff4600; }
}

/* ── Mobile: la «altura de pantalla» es la que se ve de verdad, con o sin la barra del navegador (Nico, 27/10).
   100vh en iPhone es la pantalla SIN barra: con la barra a la vista, lo de abajo de los heroes quedaba tapado y sin aire.
   Lo fijo de fondo (el hero de Services, el banner de partner, el menú) usa dvh: se estira o se achica cuando la barra
   aparece o se esconde, y su margen de abajo se mantiene. Lo que está en el flujo usa svh (la pantalla con la barra,
   como se abre la página): si siguiera a la barra, todo lo de abajo saltaría al scrollear. ── */
@media (max-width: 1023px) {
  body.single-islaservice { padding-top: 100svh; }
  body.single-islaservice .page-service-header { height: 100dvh; }
  body.single-islapartner #page { padding-top: 100svh; }
  .partner-single-banner { height: 100dvh; }
  .site-header-mobile { height: calc(100dvh - var(--site-header-h)); }
  body.home .home-section10 { min-height: 100svh; }
  .work-case-detail .work-case-video { height: 100svh; }
  .h-screen { height: 100svh; }
  .min-h-screen { min-height: 100svh; }
}

/* ── Services, «Brands we've built» con un solo case: la tarjeta centrada, sin flechas y sin arrastre (Nico, 27/10).
   La slide trae relleno solo a la izquierda; el mismo a la derecha la deja centrada de verdad ── */
.swiper-single-projects-solo .swiper-wrapper { justify-content: center; transform: none !important; }
.swiper-single-projects-solo .swiper-slide { padding-right: 30px; }
@media (max-width: 1023px) { body .swiper-single-projects-solo .swiper-slide { padding-right: 15px; } }
@media (min-width: 768px) and (max-width: 1023px) { body .swiper-single-projects-solo .swiper-slide { padding-right: 20px; } }

/* ── Tablet → desktop sin salto (Nico, 27/10) ──
   Entre 834px (tablet de referencia) y 1024px (arranca desktop) los títulos que mantienen su lugar van de a poco del
   tamaño de tablet al de desktop, en vez de quedar quietos y saltar en 1024. A 834 y desde 1024 todo mide lo mismo que
   antes. Cada uno: calc(tablet + (desktop a 1024 − tablet) × (100vw − 834px) / 190). Lo que cambia de estructura en
   1024 (menú, lista de Services, grillas, tarjetas) no entra acá: ahí el salto es de diseño, no de tamaño. */
@media (min-width: 834px) and (max-width: 1023px) {
  html body .page-services-title { font-size: calc(44px + 28 * (100vw - 834px) / 190); }
  html body .single-post-article .single-post-title { font-size: calc(36px + 17.248 * (100vw - 834px) / 190); }
  html body .work-case-detail .work-case-video-title { font-size: calc(60px + 14.752 * (100vw - 834px) / 190); }
  html body .work-case-video-loops .work-case-video-text { font-size: calc(48px + 12 * (100vw - 834px) / 190); }
  html body .work-case-headline,
  html body .work-case-credits-impact .editor-content p { font-size: calc(43px + 5 * (100vw - 834px) / 190); }
  html body .partner-single-banner .partner-single-title { font-size: calc(72px + 18 * (100vw - 834px) / 190); }
  html body .brands-title-wrapper h2 { font-size: calc(120px - 12.48 * (100vw - 834px) / 190); }
  html body.page-template-page-work-cases-listing .wc-main-carousel .work-case-title { font-size: calc(70.89px + 3.862 * (100vw - 834px) / 190); }
  html body.page-template-page-work-cases-listing .wc-main-carousel .work-case-brandclient { font-size: calc(27.105px - 9.105 * (100vw - 834px) / 190); }
  html body .blog-page-title { font-size: calc(60px - 12 * (100vw - 834px) / 190); }
  html body .people-members-title { font-size: calc(44px + 4 * (100vw - 834px) / 190); }
  html body .about-services-item h5 { font-size: calc(36px + 4 * (100vw - 834px) / 190); }
  /* Careers: el de desktop depende del idioma (ver «Auditoría 26/10, tanda 1»): se reparte el min() para no
     multiplicar longitudes. 616.448 = 60.2vw a 1024; 515.072 = 50.3vw a 1024; 140 = el clamp a 1024. */
  html body .career-title {
    font-size: calc(108.42px - 108.42 * (100vw - 834px) / 190 + min(140 * (100vw - 834px) / 190, 616.448 * (100vw - 834px) / 190 / var(--palabra1, 4.2), 515.072 * (100vw - 834px) / 190 / var(--palabras, 3.3)));
  }
}

/* ── Ventanas anchas y bajas (Nico, 27/10) ──
   Los títulos grandes de Careers y Brands crecían solo con el ancho: en una ventana ancha y baja (2560×1080, o el
   navegador estirado a lo ancho) el bloque no entraba en la pantalla y el título quedaba pegado a la navbar. Ahora
   tienen además un tope según el alto, elegido para que no cambien en las pantallas ya revisadas (1440×900,
   1512×862, 1440×790, 1920×1080, 2560×1440): Careers 25vh (arriba, en «Auditoría 26/10, tanda 1»), Brands 19.2vh
   (y su bajada en la misma proporción). Y, si igual no entra, 24px de aire mínimo debajo de la navbar: en los bloques
   centrados se suma lo mismo arriba y abajo, así el centro no se mueve cuando el bloque sí entra. */
@media (min-width: 1024px) {
  .brands-title { font-size: min(clamp(80px, 10.5vw, 260px), 19.2vh); }
  .brands-subtitle { font-size: min(clamp(20px, 4.1vw, 80px), 7.5vh); }
  body.page-template-page-brands .brands-title-wrapper { padding-top: max(8vh, calc(var(--header-real-h, 38px) + 24px)); }
  body.home .brands-title-wrapper { padding-top: calc(var(--header-real-h, 38px) + 24px); padding-bottom: calc(3.1vw + 24px); }
  body.home .career-title-wrapper, body.page-template-page-careers .career-title-wrapper { padding-top: calc(var(--header-real-h, 38px) + 24px); padding-bottom: calc(.45vw + 24px); }
}

/* ── Teléfonos muy angostos (Nico, 27/10) ──
   Debajo de ~370px algunas palabras largas no entraban y se cortaban contra el borde (sobre todo en español y
   portugués). Cada título se achica solo lo necesario; a 393px y más todo mide lo mismo que antes.
   · Carreras: la palabra más ancha (anchos reales de Sections.tsx) entra en el ancho de la pantalla menos 40px.
   · Brands y la bajada («nuestros», «clientes»): el mínimo del tema era 58px; baja a 48px (16vw manda desde 362px).
   · Services, nombres de servicio («Planejamento»): mínimo 28px en vez de 30 (9vw manda desde 333px).
   · El «modelo ISLA» de la home ahora recibe `--palabra` como el de About (página). */
@media (max-width: 1023px) {
  .career-title { font-size: min(clamp(50px, 13vw, 120px), calc((100vw - 40px) / var(--palabra1, 4.2)), calc((100vw - 40px) / var(--palabras, 3.3))); }
  .brands-title, .brands-subtitle { font-size: clamp(48px, 16vw, 120px); }
  .page-services-item .page-services-item-link .left h3 { font-size: clamp(28px, 9vw, 44px); }
}

/* ── Home, tablet y mobile: la barra naranja plena (no hay nombre de sección y el blanco del medio quedaba como un
   hueco). El + se corre 5px para quedar a 15px del borde, el mismo margen que el logo a la izquierda (Nico, 28/10) ── */
@media (max-width: 1023px) {
  body.home .site-header { background-color: #ff4600; }
  body.home .btn-toggle-menu-mobile { margin-right: 5px; }
}

/* ── Ticker de bienvenida de la home (todos los anchos): las mayúsculas centradas entre la barra y la línea de abajo.
   La caja de la letra deja más aire abajo que arriba (lugar para los descendentes, que en mayúsculas no hay) y el texto
   se leía corrido hacia arriba (Nico, 28/10) ── */
body.home .home-section10 .ticker-wrapper .listitem span { position: relative; top: .055em; }
/* …y con la misma letra que el navbar (Medium; antes Regular) */
body.home .home-section10 .ticker-wrapper { font-family: ClashDisplay-Medium, Arial, sans-serif; }
@media (max-width: 1023px) { body.home .home-section10 .ticker-wrapper .listitem span { top: .042em; } }
@media (max-width: 767px) { body.home .home-section10 .ticker-wrapper .listitem span { top: .032em; } }
/* …y del mismo tamaño que las secciones del navbar en desktop (Nico, 30/10: se veía más grande): 1.1111vw con piso de
   14px y .5px de espaciado; antes clamp(16px, 1.2vw, 30px) y .03em */
@media (min-width: 1024px) { body.home .home-section10 .ticker-wrapper ul.list { font-size: max(14px, 1.1111vw); letter-spacing: .5px; } }
/* …y la caja del mismo alto que el navbar, en todos los anchos (Nico, 30/10). Con la misma cuenta que el navbar, en CSS
   (antes esperaba a global.js y, en la entrada del home, el ticker se achicaba a los ~500 ms y el texto de abajo daba un
   salto): en desktop, la línea de las secciones clamp(27px, 1.8vw, 45px) + .3vw arriba y abajo + el borde de 2px;
   en tablet y mobile, los 50px de la barra. */
/* el alto del navbar en desktop desde el primer cuadro (el tema arranca en 50px y global.js lo corrige al cargar: todo lo
   que está debajo del navbar —el titular del hero, sobre todo— subía 10 a 25px de golpe al terminar la entrada del home) */
@media (min-width: 1024px) { html { --site-header-h: calc(clamp(27px, 1.8vw, 45px) + .6vw + 2px); } }
body.home .home-section10 .ticker-wrapper { height: 50px; box-sizing: border-box; }
@media (min-width: 1024px) { body.home .home-section10 .ticker-wrapper { height: calc(clamp(27px, 1.8vw, 45px) + .6vw + 2px); } }
body.home .home-section10 .ticker-wrapper ul.list li { padding-top: 0; padding-bottom: 0; height: 100%; display: flex; align-items: center; }
/* el texto centrado en la caja (Nico, 30/10): la línea al alto de la letra, así el centro de la caja es el de la letra */
body.home .home-section10 .ticker-wrapper ul.list li span { line-height: 1; }

/* ── Navbar desktop, hover en caja (Nico, 28/10): sin subrayado; la caja de la sección se pinta de naranja con la
   letra en blanco. La sección actual, en negro, sin línea ni fondo. La letra, la misma del menú de mobile (Medium). ── */
@media (min-width: 1024px) {
  body #site-navigation-primary .menu-item a { font-family: ClashDisplay-Medium, Arial, sans-serif; }
  /* 2 puntos menos (era clamp(18px, 1.2vw, 30px); 4-5 menos quedó diminuto), igual que las listas de Work y People; la interlínea queda la de
     antes para que la barra no cambie de alto (Nico, 28/10) */
  body #site-navigation-primary .menu-item a { font-size: max(14px, 1.1111vw); line-height: clamp(27px, 1.8vw, 45px); }
  body #site-navigation-primary .menu-item.current-menu-item .menu-item-label { background-size: 0 2px; }
  /* el naranja entra de izquierda a derecha y, al salir el cursor, se va por la derecha (como el subrayado de antes) */
  body #site-navigation-primary .menu-item { background: linear-gradient(#ff4600, #ff4600) no-repeat right 0 top 0 / 0 100%; transition: background-size 300ms ease; }
  body #site-navigation-primary .menu-item a { transition: color 300ms ease; }
}
@media (min-width: 1024px) and (hover: hover) {
  body #site-navigation-primary .menu-item:not(.current-menu-item):hover,
  body #site-navigation-primary .menu-item:not(.current-menu-item):focus-within { background-position: left 0 top 0; background-size: 100% 100%; }
  body .site-header #site-navigation-primary .menu-item:not(.current-menu-item):hover a,
  body .site-header #site-navigation-primary .menu-item:not(.current-menu-item):focus-within a { color: #fff; }
}

/* ── Al tocar (iPhone, Android): sin el recuadro gris que el navegador pinta sobre el link o botón tocado; se notaba
   sobre todo en el logo y el + de la navbar (Nico, 28/10). Tampoco el contorno de foco que queda tras un toque o clic;
   con teclado (:focus-visible) se sigue viendo, por accesibilidad. ── */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }

/* ── Listas de Work («More projects») y People (vista lista): un mismo criterio de tamaños (Nico, 28/10) ──
   Desktop: 1.1111vw (16px a 1440, 21.3px a 1920), con piso de 14px; el mismo tamaño que las secciones del navbar.
   (Fue 1.25vw, el intermedio entre People y Work; después .9375vw, que quedó diminuto: 16px es el punto medio.) Nombre/título en Clash y datos en DM Sans,
   del mismo tamaño. Tablet y mobile: Work copia a People (en mobile el título de Work era más chico que el cliente). */
@media (min-width: 1024px) {
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name,
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location,
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location span,
  html body .people-members-section #islanders-list-list:checked ~ .people-members-section-list .people-members-name,
  html body .people-members-section #islanders-list-list:checked ~ .people-members-section-list .people-members-position-location,
  html body .people-members-section #islanders-list-list:checked ~ .people-members-section-list .people-members-position-location span { font-size: max(14px, 1.1111vw) !important; line-height: 1 !important; }
  /* Work con las columnas de People: 30px a los costados (el título «More projects» también) y el nombre en 40.35vw */
  html body.page-template-page-work-cases-listing .wc-cases-listing { padding-left: 30px; padding-right: 30px; }
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name { width: 40.35vw !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name { font-size: 24px !important; line-height: 1em !important; }
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location,
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-position-location span { font-size: 20px !important; line-height: 1.25 !important; } /* 18 → 20 (Nico, 29/10) */
}
@media (max-width: 767px) {
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name { font-size: 4.693vw !important; line-height: 1 !important; }
}

/* ── Tablet y mobile: la barra naranja también arriba del iPhone al scrollear, en todas las secciones (Nico, 28/10) ──
   Safari 26 pinta la franja del reloj con el color de fondo de lo que encuentra a unos 4-8px del borde de arriba, a lo
   ancho de la barra; si no coinciden, hace un degradé translúcido que deja ver el contenido. En la home todo eso es
   naranja. En las secciones, el nombre de la sección era otro elemento fijo encima de la barra y el recuadro blanco
   caía en esa franja. Ahora el nombre es parte de la barra (.site-header-title, en Shell.tsx) y su recuadro blanco
   arranca a los 16px: lo de arriba lo pinta una sombra blanca, que Safari no cuenta. Se ve igual que antes. */
@media (max-width: 1023px) {
  body .site-header { background-color: #ff4600; }
  body .site-header-title {
    position: absolute; top: 16px; bottom: 0; left: 43.9vw; right: var(--site-header-h, 50px); margin: 0;
    display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 -16px 0 0 #fff;
    border-bottom: 2px solid #ff4600; color: #000; pointer-events: none; transition: opacity 350ms ease-in-out;
  }
  /* Como en desktop (Nico, 28/10): el nombre en negro y centrado en el recuadro, y la línea naranja de 2px abajo.
     El texto queda centrado en el blanco (0-48px; la caja arranca a 16 y la línea ocupa los 2 de abajo: -8px), con la
     caja pegada a las letras */
  body .site-header-title > span { position: relative; top: -6.7px; line-height: 1; } /* -8px, y 1.3 más abajo: las mayúsculas al centro */
  body.menu-mobile-open .site-header-title { opacity: 0; }
  /* el h1 que cada página ponía fijo encima de la barra: queda en la página (títulos y lectores de pantalla), oculto a la vista */
  body .page-title { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
}

/* ── Desktop: la Clash del navbar y de las listas de Work y People, .5px más abierta (1px quedó muy abierto; Nico, 28/10) ── */
@media (min-width: 1024px) {
  body #site-navigation-primary .menu-item a,
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name,
  html body .people-members-section #islanders-list-list:checked ~ .people-members-section-list .people-members-name { letter-spacing: .5px; }
}

/* ── Mobile, Work: el título de cada case ~4 puntos más grande (Nico, 28/10). Medía lo mismo que el nombre en People
   (18.4px) pero se sentía más chico: va a lo ancho de la pantalla y no en una columna angosta ── */
@media (max-width: 767px) {
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name { font-size: 5.7vw !important; }
}

/* ── Menú desplegable (tablet y mobile): la sección actual y el idioma activo, solo en negro, sin subrayado (Nico, 28/10) ── */
@media (max-width: 1023px) {
  body #site-navigation-primary .menu-item.current-menu-item .menu-item-label,
  body .menu-language .menu-language-item.active .menu-item-label { background-size: 0 2px; }
}

/* ── Menú desplegable (tablet y mobile): los idiomas con el mismo peso que las secciones, Clash Medium (Nico, 28/10) ── */
@media (max-width: 1023px) {
  body .menu-language .menu-language-item, body .menu-language .menu-language-item a, body .menu-language .menu-item-label { font-family: ClashDisplay-Medium, Arial, sans-serif; }
}
/* ── Idiomas en desktop, como en mobile: el activo solo en negro, sin subrayado, y en Clash Medium (Nico, 29/10) ── */
@media (min-width: 1024px) {
  body .menu-language .menu-language-item.active .menu-item-label { background-size: 0 2px; }
  body .menu-language .menu-language-item, body .menu-language .menu-language-item a, body .menu-language .menu-item-label { font-family: ClashDisplay-Medium, Arial, sans-serif; }
}

/* ── El panel del + y el de idiomas animan solo el desplazamiento (Nico, 29/10). El tema animaba todo: al agrandar la
   ventana el ancho del panel quedaba atrás de la pantalla y el menú se asomaba por la derecha sin tocar el +. ── */
body .site-header-mobile, body .menu-language { transition-property: transform; }

/* ── Mobile: un solo tamaño de Clash para los títulos de cards y nombres (Nico, 28/10) ──
   5.2vw (20.4px en un iPhone 16): 2 puntos menos que el que tenía el archivo de Work («More projects», 22.4px). Lo mismo
   en los cases destacados de arriba (iban a 14.7px, más chicos que el cliente en DM Sans) y en los nombres de People
   (partners e islanders, 18.4px). La DM Sans de abajo (4.224vw) no cambia. */
@media (max-width: 767px) {
  html body.page-template-page-work-cases-listing .wc-cases-listing .work-case-name,
  html body .wc-listing .brand-case .case,
  html body .people-members-section .people-members-item .people-members-name { font-size: 5.2vw !important; line-height: 1 !important; }
}

/* ── Services, tablet y mobile: los títulos de cada servicio con más aire (Nico, 28/10). Iban con interlínea .75 (las
   líneas casi se tocaban) y sin interletra ── */
@media (max-width: 1023px) {
  html body .page-services-list .page-services-item h3 { line-height: .92 !important; letter-spacing: .01em; }
}

/* ── Footer, todos los anchos (Nico, 28/10) ──
   La navbar se va para arriba al llegar al footer (antes solo en mobile; HeaderContrast.tsx pone html.navbar-en-footer),
   así el footer queda como una pantalla completa. 25px a los costados en todos los anchos. */
body .site-header { transition: transform 350ms ease-in-out, background-color 350ms ease-in-out; }
html.navbar-en-footer body .site-header { transform: translateY(-100%); }
body .site-footer { padding-left: 25px; padding-right: 25px; }
/* Desktop: «Strategic Partnership» y el logo de Alexandria, 20% más grandes */
@media (min-width: 1024px) {
  body .site-footer .companies { font-size: 1.2em; }
  body .site-footer .companies img { width: 7.5vw; }
}
/* Tablet: las cuatro oficinas en dos columnas (una abajo de la otra no entraban en la pantalla); los contactos arriba */
@media (min-width: 768px) and (max-width: 1023px) {
  body .site-footer .footer-top { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
  body .site-footer .footer-top > .col10 { grid-column: 1 / -1; }
}

/* ── Footer, todos los anchos: el bloque de arriba (flecha, contactos, oficinas) pegado arriba y el de abajo (logo ISLA
   y partnership) pegado abajo, con 25px de borde; el espacio que sobra queda entre los dos (Nico, 28/10) ── */
html body .site-footer { justify-content: space-between; padding-top: 25px; padding-bottom: 25px; }
html body .site-footer .footer-top { margin-top: 0; }
html body .site-footer .footer-bottom { margin-top: 0; padding-top: 22px; }

/* ── Work, carrusel de arriba: la barra de progreso con las puntas rectas, sin redondeo (todos los anchos; Nico, 28/10) ── */
.wc-main-carousel .swiper-pagination-bullet, .wc-main-carousel .swiper-pagination-bullet::before { border-radius: 0 !important; }

/* ── Footer mobile (Nico, 28/10): la flecha con el círculo de desktop, a la derecha de los contactos y alineada arriba
   con ellos; y el partnership más cerca del logo ISLA (el link del logo era inline y sumaba el aire de la línea) ── */
@media (max-width: 767px) {
  body .site-footer .col10 { display: flex; justify-content: space-between; align-items: flex-start; }
  body .site-footer .col10 > img { display: block; order: 2; width: 64px; height: 64px; flex: none; margin-top: 10px; } /* 10px: el margen de arriba del primer contacto */
  body .site-footer .footer-bottom > a { display: block; }
  body .site-footer .companies { margin-top: 8px; }
}

/* ── Footer, teléfonos (Nico y Miranda, 29/10): en tablet y desktop, al pie de cada columna, a la misma altura (São
   Paulo tiene una línea más de dirección y lo dejaba más arriba); en ningún ancho se parte el número ── */
body .site-footer .footer-oficina a[href^="tel:"], body .site-footer .footer-oficina-m a[href^="tel:"] { white-space: nowrap; }
@media (min-width: 768px) {
  body .site-footer .footer-top > .col { display: flex; flex-direction: column; }
  body .site-footer .footer-oficina { flex: 1; display: flex; flex-direction: column; }
  body .site-footer .footer-oficina .footer-tel { margin-top: auto; padding-top: 1em; }
}
@media (max-width: 767px) {
  body .site-footer .footer-oficina-m-fila { grid-template-columns: minmax(0, 1fr) var(--footer-tel-w, 9.6em); }
}

/* ── Footer desktop, según la referencia de Nico (29/10) ──
   Mismo aire (--footer-gap, 70px a 1440) entre el nombre de la oficina y la dirección, y entre la dirección y el
   teléfono; los contactos de la izquierda bajan hasta la línea de los teléfonos. Logo de ISLA al 70.3% del ancho,
   «Strategic Partnership» y Alexandria 25% más grandes, y los tres apoyados en la misma línea de abajo. */
@media (min-width: 1024px) {
  body .site-footer { --footer-gap: 4.86vw; }
  body .site-footer .footer-oficina .place { margin-bottom: calc(var(--footer-gap) - 3.19vw); }
  body .site-footer .footer-oficina .footer-tel { padding-top: calc(var(--footer-gap) - .9vw); }
  /* el svg del logo trae aire abajo de las letras: se lo baja para que la tinta apoye en la línea de los otros dos */
  body .site-footer .footer-bottom img[alt="ISLA Agency"] { width: 70.35vw; position: relative; top: .35vw; }
  body .site-footer .companies { font-size: .985vw; align-items: flex-end; }
  body .site-footer .companies img { width: 9.24vw; display: block; position: relative; top: .07vw; }
  body .site-footer .companies span { display: block; line-height: 1; position: relative; top: .21em; } /* la base de las mayúsculas, no la del renglón */
}

/* ── Footer mobile, según la referencia de Nico (29/10): alto de pantalla dinámico (100dvh), las oficinas en dos
   columnas (la segunda arranca en el 60% del ancho), cada una con nombre, dirección y teléfono abajo; el logo ISLA
   abajo de todo con el partnership debajo. Medidas de la referencia a 393px, en vw para que escalen con el teléfono;
   los aires grandes en dvh con tope, así en pantallas bajas se achican antes que desbordar. ── */
@media (max-width: 767px) {
  html body .site-footer { min-height: 100dvh; padding-top: 25px; padding-bottom: 14px; }
  body .site-footer .footer-top { display: grid; grid-template-columns: calc(59.8vw - 25px) minmax(0, 1fr); column-gap: 0; align-items: start; }
  body .site-footer .footer-top > .col10 { grid-column: 1 / -1; }
  /* contactos: 3.6vw (14px a 393), uno cada 6vw; la flecha a la par, arriba */
  body .site-footer .col10 > img { width: 15.5vw; height: 15.5vw; margin-top: 0; }
  body .site-footer .col10 .link-social { font-size: 3.6vw; line-height: 1; letter-spacing: .04em; }
  body .site-footer .col10 p.mt-10 { margin-top: 0; }
  body .site-footer .col10 p.mt-10 + p.mt-10 { margin-top: calc(6vw - 3.6vw); }
  /* oficinas: de los contactos a la primera fila 58px y entre filas 60px (a 747 de alto) */
  html body .site-footer .footer-top > .col { margin-top: clamp(18px, 7.1dvh, 60px); }
  html body .site-footer .footer-top > .col10 + .col, html body .site-footer .footer-top > .col10 + .col + .col { margin-top: clamp(22px, 7.7dvh, 58px); }
  body .site-footer .footer-oficina-m .place { font-size: 3.3vw; line-height: 1; margin-bottom: 2.85vw; }
  body .site-footer .footer-oficina-m-fila { display: block; margin-top: 0; }
  body .site-footer .footer-oficina-m-fila p { font-size: 2.95vw; line-height: 1.45; }
  body .site-footer .footer-oficina-m-fila > div + div { margin-top: 2.9vw; }
  /* logo y partnership: 6px más afuera que el resto, como en la referencia; 13px entre los dos */
  body .site-footer .footer-bottom { margin-left: -6px; margin-right: -6px; padding-top: 22px; }
  body .site-footer .companies { margin-top: 2.3vw; }
}

/* ── Careers desktop, todos los idiomas (Nico, 29/10): el bloque de abajo entra en una pantalla. Párrafo e imagen
   arrancan a la misma altura; «Check out our featured positions» abajo, alineado a la izquierda con el párrafo; las
   flechas naranjas a la derecha, debajo de la imagen. La imagen se achica en proporción si no entra (sin recortar),
   siempre pegada a la derecha. ── */
@media (min-width: 1024px) {
  body.page-template-page-careers .careers-bottom {
    display: grid; grid-template-columns: 43.7vw minmax(0, 1fr); /* el párrafo llega hasta el 43.7% (Nico, 29/10; antes 35%) */ grid-template-rows: 1fr auto;
    column-gap: 3vw; row-gap: 4vh; min-height: 100vh; box-sizing: border-box;
    padding: calc(var(--site-header-h, 50px) + 4vh) 0 calc(4vh + 25px) 0; /* abajo, 25px más: el link y las flechas suben juntos (Nico, 29/10) */
  }
  body.page-template-page-careers .careers-bottom .careers-bottom-text { grid-column: 1; grid-row: 1; width: auto; padding-top: 0; margin-top: 0; }
  body.page-template-page-careers .careers-bottom .careers-bottom-text > div { padding-bottom: 0; }
  body.page-template-page-careers .careers-bottom .career-photo { grid-column: 2; grid-row: 1; width: auto; margin-left: 0; min-height: 0; display: flex; justify-content: flex-end; align-items: flex-start; }
  /* el alto que deja la pantalla: menos la navbar, los aires (4vh arriba, entre filas y abajo) y las dos líneas del
     link (1em de interlínea, clamp(60px, 6vw, 180px) del tema); si el párrafo es más largo (PT en pantallas bajas),
     el bloque crece en vez de pisar el link */
  body.page-template-page-careers .careers-bottom .career-photo img { width: auto; height: auto; max-width: 50vw; max-height: calc((100vh - var(--site-header-h, 50px) - 12vh - 25px - 2 * clamp(60px, 6vw, 180px)) * .9); object-fit: contain; }
  body.page-template-page-careers .careers-bottom .careers-external-link { position: static; grid-column: 1 / -1; grid-row: 2; width: 78vw; padding-left: 4.16vw; }
  /* las flechas apoyan en la base de la última línea del link (no en el borde de su renglón) */
  body.page-template-page-careers .careers-bottom .careers-arrows { left: auto; right: 4.16vw; bottom: calc(4vh + 25px + .19 * clamp(60px, 6vw, 180px)); }
}

/* ── Footer tablet (768–1023px), coherente con mobile (Nico, 29/10): contactos y nombres de oficina al tamaño de los
   ítems del menú, un poco más chicos (23px a 834, el menú va a 33px; 12,5% menos que la primera versión); los datos de cada oficina un poco más chicos
   que el nombre; y el partnership como en mobile: debajo del logo, uno en cada punta, texto y Alexandria del mismo
   alto (el logo mide lo que las mayúsculas de Clash, .69em) y en la misma proporción respecto del logo. ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body .site-footer .col10 .link-social, body .site-footer .footer-oficina .place { font-size: 2.73vw; line-height: 1.1; }
  body .site-footer .col10 p.mt-10 + p.mt-10 { margin-top: 1.2vw; }
  body .site-footer .footer-oficina p:not(.place) { font-size: 2.19vw; line-height: 1.45; }
  body .site-footer .footer-oficina .place { margin-bottom: .36vw; } /* + el margen del párrafo: el mismo aire que hasta el teléfono */
  body .site-footer .footer-oficina .footer-tel { padding-top: 2.4vw; }
  body .site-footer .companies { --comp-fs: 2.45vw; font-size: var(--comp-fs); display: flex; justify-content: space-between; align-items: baseline; margin-top: 2vw; }
  body .site-footer .companies img { width: auto; height: calc(var(--comp-fs) * .69); }
}

/* ── Idiomas en desktop (Nico, 29/10): en hover, sin la línea (se pisaba con el separador de abajo); el idioma se pinta
   de negro, como el activo ── */
@media (min-width: 1024px) {
  body .menu-language .menu-language-item a:hover .menu-item-label,
  body .menu-language .menu-language-item a:focus-visible .menu-item-label { background-size: 0 2px; }
  body .menu-language .menu-language-item a:hover, body .menu-language .menu-language-item a:focus-visible { color: #000; }
}

/* ── Home, titular del hero en tablet (Nico, 29/10): más grande y en cuatro renglones («IDEAS / POWERED BY /
   STRATEGY / & DATA.», cortes en page.tsx); en mobile y desktop los cortes no existen ── */
br.br-tablet { display: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  br.br-tablet { display: inline; }
  body.home .home-section10 .section-title { font-size: 11.5vw; line-height: .9em; }
}

/* ── Careers, todos los anchos: «Check out our featured positions» en Clash Semibold (Nico, 29/10: primero solo
   desktop; en tablet y mobile quedaba en Medium) ── */
body.page-template-page-careers .careers-external-link { font-family: ClashDisplay-Semibold, Arial, sans-serif; }

/* ── Footer tablet: la flecha con el círculo, como en mobile, a la derecha de los contactos y alineada arriba con
   ellos (el tema la ocultaba debajo de 1024px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body .site-footer .col10 { display: flex; justify-content: space-between; align-items: flex-start; }
  body .site-footer .col10 > img { display: block; order: 2; width: 10vw; height: 10vw; flex: none; }
  body .site-footer .col10 > div { margin-top: 0; }
}

/* ── About, servicios: la flecha en proporción con el nombre en cada formato (Nico, 29/10). --sn es el tamaño del
   nombre (el mismo cálculo que usa cada formato). Antes la de desktop medía siempre 87px y en ventanas chicas quedaba
   enorme al lado del texto. El giro (hover y al abrir) con la misma curva suave que la apertura del texto, en 500ms (Nico: 700 era lento). ── */
.about-services .about-services-item { --sn: clamp(40px, 3.65vw, 80px); }
@media (max-width: 1023px) { .about-services .about-services-item { --sn: clamp(27px, 7.3vw, 36px); } }
@media (min-width: 834px) and (max-width: 1023px) { .about-services .about-services-item { --sn: calc(36px + 4 * (100vw - 834px) / 190); } }
.about-services .about-services-item .about-services-item-arrow { transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
@media (min-width: 1024px) {
  /* de alto, 1.15 veces el nombre (60px a 1440; antes 87px fijos); centrada con el primer renglón (el svg es 1.2 veces más
     alto que ancho y va girado) */
  .about-services .about-services-item .about-services-item-arrow { width: calc(var(--sn) * 1.15); height: auto; top: calc(4vh + var(--sn) * .48 - var(--sn) * .69); }
}
@media (max-width: 1023px) {
  .about-services .about-services-item .about-services-item-arrow { width: calc(var(--sn) * .84); top: calc(2.5vh + var(--sn) * .48 - var(--sn) * .504); }
}

/* ── Textos de lectura en DM Sans, todo el sitio (Nico, 29/10: se lee mejor que la Clash). Solo los párrafos largos
   en minúscula; los titulares, citas, créditos y textos de impacto en mayúscula siguen en Clash. Cada uno conserva
   su tamaño en desktop y tablet; en mobile pasan al tamaño único de DM Sans (4.224vw). ──
   · Careers: el párrafo de abajo (en tablet y mobile ya estaba en DM Sans)
   · About: el texto centrado sobre naranja y la descripción de cada servicio
   · Cases de Work: la introducción («What was the idea?…») y los párrafos de las tres columnas */
body .careers-bottom-text > div,
body .about-second-text, body .about-second-text p,
body .about-services .about-service-description, body .about-services .about-service-description p,
body .section-introduction-col10 > .editor-content:not(.font-sans-medium), body .section-introduction-col10 > .editor-content:not(.font-sans-medium) p,
body .editor-content.text-3-cols p { font-family: "DM Sans", Arial, sans-serif; font-weight: 400; }
@media (min-width: 1024px) {
  body.page-template-page-careers .careers-bottom .careers-bottom-text > div { line-height: 1.5; }
}
@media (max-width: 767px) {
  body .about-second-text p, body .about-services .about-service-description, body .about-services .about-service-description p,
  body .section-introduction-col10 > .editor-content:not(.font-sans-medium) p, body .editor-content.text-3-cols p { font-size: 4.224vw !important; line-height: 1.4 !important; }
}
/* las negritas dentro de esos párrafos, en DM Sans Bold (quedaban en Clash Semibold en medio de la DM Sans) */
body .section-introduction-col10 > .editor-content:not(.font-sans-medium) strong,
body .section-introduction-col10 > .editor-content:not(.font-sans-medium) b,
body .about-services .about-service-description strong, body .careers-bottom-text > div strong { font-family: "DM Sans", Arial, sans-serif; font-weight: 700; }

/* ── About (Nico, 29/10) ──
   · El texto centrado sobre naranja, al tamaño del párrafo de Careers (DM Sans: 18px a 1440 en desktop, 18px en tablet,
     4.224vw en mobile; antes 24px) y con interlínea 1.5; en desktop, una caja más angosta (42vw; antes 64vw)
   · El texto en mayúscula de arriba con el peso del de Careers (Clash Regular 500; antes Semibold), con su tamaño */
body .about-second-text, body .about-second-text p { font-size: clamp(18px, 1.2vw, 30px); line-height: 1.5; }
@media (min-width: 1024px) { body .about-second-text > div { max-width: 42vw; } }
@media (min-width: 768px) and (max-width: 1023px) { body .about-second-text, body .about-second-text p { font-size: 18px; } }
@media (max-width: 767px) { body .about-second-text p { line-height: 1.5 !important; } }
body .about-text { font-family: ClashDisplay-Regular, Arial, sans-serif; font-weight: 500; } /* (también el de la home) */

/* ── About y Careers, el texto en mayúscula (Nico, 29/10): el mismo tamaño en los dos (el de Careers: 1.2vw en
   desktop, 17px a 1440; 3.75vw en tablet y mobile) y un poco más de interlínea en los dos (1.3; Careers estaba en 1 y 1.2) ── */
@media (min-width: 1024px) { body .about-text { font-size: clamp(16px, 1.2vw, 32px); } }
@media (max-width: 1023px) { body .about-text { font-size: clamp(14px, 3.75vw, 48px); } }
body .about-text, body .career-title-wrapper .career-text { line-height: 1.3; }

/* ── Ajustes de tablet y mobile (Nico, 29/10) ──
   · Tablet: la DM Sans de Careers y del texto centrado del About, un poco más grande (20px; antes 18)
   · Mobile: los textos en mayúscula de Clash (Careers, About y los mismos en la home), un poco más grandes (4.3vw,
     17px a 393; antes 3.75vw)
   · «Wanna work with us?» (Careers y la home), con más interlínea en tablet y mobile (.92em; antes .8em) */
@media (min-width: 768px) and (max-width: 1023px) {
  body .careers-bottom-text > div, body .about-second-text, body .about-second-text p { font-size: 20px; }
}
@media (max-width: 767px) {
  body .about-text, body .career-title-wrapper .career-text { font-size: 4.3vw; }
}
@media (max-width: 1023px) {
  body .career-title-wrapper .career-title { line-height: .92em; }
}

/* ── Tablet (768–1023px), DM Sans más grande (Nico, 29/10) ──
   · Párrafos de lectura, +5px: Careers y el texto centrado del About (20 → 25), el cuerpo de las notas de News (18 → 23),
     la bio de los perfiles de People (16 → 21) y los textos de la lista de Services (22 → 27). Los que ya estaban en 24px
     o más (descripciones de servicios del About, introducción y columnas de los cases) quedan como estaban.
   · Cards de People y Work, +2px (se equiparan con las imágenes y el nombre en Clash): rol y oficina, y el cliente. */
@media (min-width: 768px) and (max-width: 1023px) {
  html body .careers-bottom-text > div, html body .about-second-text, html body .about-second-text p { font-size: 25px !important; }
  html body .single-post-content .editor-content, html body .single-post-content .editor-content p, html body .single-post-content .editor-content li { font-size: 23px !important; }
  html body .partner-single-bio-second-text, html body .partner-single-bio-second-text p, html body .partner-single-bio-second-text strong { font-size: 21px !important; }
  html body .page-services-list .col.middle p { font-size: 27px !important; }
  html body .people-members-item .people-members-position-location, html body .people-members-item .people-members-position-location span,
  html body .work-case-position-location, html body .work-case-position-location span { font-size: 20px !important; }
  html body .wc-listing .brand-case .brand { font-size: calc(3.75vw + 2px) !important; }
}

/* ── About, servicios (Nico, 29/10) ──
   · «Strategy» y «Creativity» (desktop) con la letra de las secciones del navbar: Clash Medium, max(14px, 1.1111vw)
     (16px a 1440) y .5px de interletra
   · Los nombres de cada servicio (Clash), con más interlínea: .96em (antes .84em) en todos los formatos; las flechas
     siguen centradas con el primer renglón (.48 del nombre, ver «About, servicios: la flecha en proporción») */
@media (min-width: 1024px) { body .about-services .about-service-type { font-size: max(14px, 1.1111vw); font-family: ClashDisplay-Medium, Arial, sans-serif; letter-spacing: .5px; } }
body .about-services .about-service-name { line-height: .96em; }

/* ── Tablet y mobile (Nico, 29/10) ──
   · About: las pestañas «Strategy» / «Creativity» al tamaño del nombre de la sección en la barra (clamp(17px, 5.5vw,
     24px), 21.6px a 393); la elegida en Clash Medium, como ese nombre, y la otra en Regular
   · Menú desplegable, solo tablet: las secciones más juntas, a un paso fijo de 2 renglones (66px a 834; antes se
     repartían el 51% del alto de la pantalla: 78px a 834×1120 y más en pantallas altas). Mobile no cambia. */
@media (max-width: 1023px) {
  body .about-services .service-label { font-size: clamp(17px, 5.5vw, 24px); }
  body .about-services #services_strategy:checked + .service-label,
  body .about-services #services_creativity:checked + .service-label { font-family: ClashDisplay-Medium, Arial, sans-serif; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body .site-header-mobile > #site-navigation-primary { height: auto; min-height: 0; }
  body .site-header-mobile > #site-navigation-primary .header-menu-primary { height: auto; }
  body .site-header-mobile > #site-navigation-primary .menu-item { height: auto; }
  body .site-header-mobile > #site-navigation-primary .menu-item a { line-height: 2em; padding-top: 0; padding-bottom: 0; }
}

/* ── Services: la tira de videos del pie con 50px más de negro arriba, en todos los anchos (Nico, 30/10) ── */
body .single-service-section80 { padding-top: 50px; }