/* BEARS — compatibilidad de producción (Elementor, Visual Portfolio y CF7). */
@layer bears-production-compat {
/**
* Theme Name:  Norto Child — BEARS 2026
* Description: Child theme de Norto con el design system de Estudio BEARS. Basado en el child original (Merlin WP), ampliado para el rebuild 2026.
* Author:      Estudio BEARS
* Template:    norto
* Version:     2.0.1
*/

/* ==========================================================================
   BEARS DESIGN SYSTEM
   Colores oficiales extraídos de Sello_SVG.svg (Brand Guidelines):
   Paleta oficial Brand Guidelines 2024: Experience Black #1B1D1A · Estrategic White #F5F5F5 · Bold Yellow #F5C001
   Acentos (stickers/detalles, aprox. — verificar vs Brand Guidelines.pdf)
   ========================================================================== */

:root {
  /* Color — paleta oficial Brand Guidelines 2024 (pág. "Paleta cromática") */
  --bears-black: #1b1d1a;    /* Experience Black */
  --bears-black-soft: #262825;
  --bears-white: #f5f5f5;    /* Estrategic White */
  --bears-offwhite: #efefec;
  /* Bold Yellow. El CTA siempre es amarillo, pero el amarillo NO es exclusivo
     del CTA. Jerarquía cromática completa, densidad por sección y distinción
     entre iconos funcionales y stickers expresivos:
     00_DOCUMENTATION/12_WEB_VISUAL_IDENTITY.md (contrato vigente, D-23). */
  --bears-yellow: #f5c001;
  --bears-blue: #3060de;     /* Digital Blue */
  --bears-orange: #ff4b00;   /* Energy Orange */
  --bears-green: #5dc95f;    /* Forest Green */
  --bears-purple: #a43bff;   /* Magic Purple — 404 + cinta del título de #sobre-bears (D-28) */
  --bears-purple-ink: #7a1dc5; /* 6.86:1 con Strategic White; pill de Portfolio */
  --bears-gray: #8a8a86;

  /* Type */
  --bears-font-display: 'BEARS Space Grotesk', 'Arial Black', sans-serif;
  --bears-font-body: 'BEARS Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* Scale (fluid) */
  --bears-h1: clamp(2.5rem, 7vw, 5.5rem);
  --bears-h2: clamp(2rem, 4.5vw, 3.5rem);
  --bears-h3: clamp(1.35rem, 2.5vw, 1.75rem);
  --bears-body: clamp(1rem, 1.1vw, 1.125rem);

  /* Space */
  --bears-section: clamp(4rem, 10vw, 8rem);
  --bears-gap: clamp(1.25rem, 3vw, 2.5rem);

  /* Motion — tres duraciones, dos curvas. Antes había una sola curva y siete
     duraciones ad-hoc repartidas por el archivo (revisión integral 2026-08-28). */
  --bears-ease: cubic-bezier(.22,.61,.36,1);
  --bears-ease-out: cubic-bezier(.16,1,.3,1);
  --bears-dur-fast: .18s;
  --bears-dur: .32s;
  --bears-dur-slow: .62s;

  /* Altura real del header cerrado (padding 1.4rem×2 + 46px de logo). Única
     fuente de verdad para el alto del hero.
     PENDIENTE DE STAGING: en el preview el header móvil mide 87px reales y no
     los 71px declarados, porque el contenedor lleva `gap` y el dropdown forma
     una segunda fila que igual cobra el row-gap (corregido allí con
     `row-gap:0`). El header de producción es el de Norto, no el del preview:
     hay que MEDIR su alto real en móvil sobre staging y declarar aquí el
     override correspondiente. No inventar el valor. */
  --bears-header-h: 91px;

  /* Taxonomía de servicio: Marca / Digital / Contenido. Los acentos dejan de
     repartirse por página y pasan a significar una categoría. Las variantes
     *-ink son las que pasan AA como texto sobre fondo claro. */
  --bears-marca: #ff4b00;     --bears-marca-ink: #c93b00;      /* 4.69:1 sobre #f5f5f5 */
  --bears-digital: #3060de;   --bears-digital-ink: #3060de;    /* 5.00:1 */
  --bears-contenido: #5dc95f; --bears-contenido-ink: #2f7331;  /* 5.32:1 */
  --bears-mute-dark: #9a9a96;  /* 6.01:1 sobre negro */
  --bears-mute-light: #5f605c; /* 5.81:1 sobre blanco */
}

/* ---------- Fuentes locales (woff2 en norto-child/fonts/) ----------
   Tipografías auto-hospedadas. Antes estas reglas apuntaban a
   `fonts/SpaceGrotesk-Variable.woff2` y `fonts/Manrope-Variable.woff2`, dos
   archivos que NUNCA existieron en el repositorio: en producción devolvían 404
   y el navegador caía en silencio a Arial. Resuelto el 2026-09-04 con los
   paquetes @fontsource-variable 5.3.0 (Space Grotesk y Manrope), ambos bajo
   SIL Open Font License 1.1 — copia de cada licencia en `fonts/`.
   Se declaran dos subconjuntos por familia, igual que hace Google Fonts: el
   archivo `latin` NO contiene los glifos de `latin-ext`, así que un solo
   archivo por familia dejaría huecos. El castellano (ñ, á, ü, ¿, ¡) entra
   completo en `latin`; `latin-ext` queda para nombres propios y préstamos.
   Auto-hospedarlas además elimina la dependencia de fonts.googleapis.com. */
@font-face {
  font-family: 'BEARS Space Grotesk';
  src: url('fonts/SpaceGrotesk-Variable-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BEARS Space Grotesk';
  src: url('fonts/SpaceGrotesk-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'BEARS Manrope';
  src: url('fonts/Manrope-Variable-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BEARS Manrope';
  src: url('fonts/Manrope-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Alias que pide la hoja canónica del preview. Conserva el nombre tipográfico
   aprobado y hace que las 19 páginas carguen las fuentes locales reales. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Variable-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Variable-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Base ---------- */
/* Evita que navegadores con dark mode forzado inviertan los fondos de marca (QA 2026-07-28) */
html { color-scheme: only light; }
[hidden] { display: none !important; }

body {
  font-family: var(--bears-font-body);
  font-size: var(--bears-body);
  color: var(--bears-black);
  background-color: var(--bears-white);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--bears-font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
}

h1 { font-size: var(--bears-h1); }
h2 { font-size: var(--bears-h2); }
h3 { font-size: var(--bears-h3); }

::selection { background: var(--bears-yellow); color: var(--bears-black); }

a { transition: color var(--bears-dur) var(--bears-ease); }

/* ---------- Utilidades de sección (clases para Elementor) ---------- */
.bears-section-dark {
  background-color: var(--bears-black);
  color: var(--bears-white);
}
.bears-section-dark .elementor-heading-title { color: var(--bears-white); }

/* 2026-08-27: la imagen de fondo YA NO se fija aquí por CSS — el cliente pidió poder reemplazarla
   él mismo desde Elementor. Cada sección que usa esta clase (heroes de Home/Servicios/Portfolio/
   Contacto/Estudio) trae su propio background_image nativo de Elementor (Style > Fondo). Esta clase
   solo deja el color de respaldo por si alguna sección se queda sin imagen configurada. */
.bears-section-texture {
  background-color: var(--bears-black);
  color: var(--bears-white);
}

.bears-section-yellow {
  background-color: var(--bears-yellow);
  color: var(--bears-black);
}

.bears-uppercase, .bears-uppercase .elementor-heading-title {
  text-transform: uppercase;
}

/* ---------- Botones / CTA ---------- */
.bears-btn a.elementor-button,
a.bears-btn,
.bears-btn button {
  font-family: var(--bears-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background-color: var(--bears-yellow);
  color: var(--bears-black);
  border: 2px solid var(--bears-yellow);
  border-radius: 0;
  padding: 1.1em 2.2em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  transition: background var(--bears-dur) var(--bears-ease),
              color var(--bears-dur) var(--bears-ease),
              transform var(--bears-dur) var(--bears-ease);
}
/* Flecha DIBUJADA (mask SVG). Antes era el glifo Unicode '→', que hereda
   Space Grotesk: si la fuente no cubre U+2192 el navegador cae a una fuente del
   sistema con otro peso y otro tamaño óptico. Revisión integral 2026-08-28. */
:root{--bears-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.bears-btn a.elementor-button::after,
a.bears-btn::after {
  content: '';
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: var(--bears-arrow) center/contain no-repeat;
  mask: var(--bears-arrow) center/contain no-repeat;
  transition: transform var(--bears-dur) var(--bears-ease);
}
.bears-btn a.elementor-button:hover::after,
a.bears-btn:hover::after { transform: translateX(5px); }
.bears-btn-back a.elementor-button::after, a.bears-btn-back::after { transform: scaleX(-1); }
.bears-btn-back a.elementor-button:hover::after, a.bears-btn-back:hover::after { transform: scaleX(-1) translateX(5px); }

/* P0 revisión integral 2026-08-28: el hover pasaba a fondo transparente. Sobre
   las secciones claras eso deja amarillo #f5c001 sobre #f5f5f5 = 1.55:1, con el
   borde del mismo amarillo — el botón desaparecía, incluido el submit de
   Contacto (única conversión del sitio). Ahora invierte a negro: 10.04:1 en
   ambos estados. El vaciado transparente queda solo sobre fondo oscuro. */
.bears-btn a.elementor-button:hover,
a.bears-btn:hover,
.bears-btn a.elementor-button:focus-visible {
  background-color: var(--bears-black);
  color: var(--bears-yellow);
  border-color: var(--bears-black);
  transform: translateY(-2px);
}
.bears-section-dark .bears-btn a.elementor-button:hover,
.bears-section-texture .bears-btn a.elementor-button:hover,
.bears-section-dark a.bears-btn:hover,
.bears-section-texture a.bears-btn:hover {
  background-color: transparent;
  color: var(--bears-yellow);
  border-color: var(--bears-yellow);
}
/* Variante outline sobre fondo oscuro */
.bears-btn-ghost a.elementor-button {
  background: transparent;
  color: var(--bears-white);
  border-color: var(--bears-white);
}
.bears-btn-ghost a.elementor-button:hover {
  background: var(--bears-white);
  color: var(--bears-black);
}
/* Sobre fondo amarillo */
.bears-section-yellow .bears-btn a.elementor-button {
  background: var(--bears-black);
  color: var(--bears-yellow);
  border-color: var(--bears-black);
}

/* ---------- Header ---------- */
.bears-header-cta a {
  background: var(--bears-yellow) !important;
  color: var(--bears-black) !important;
  font-family: var(--bears-font-display);
  text-transform: uppercase;
  font-weight: 700;
  padding: .6em 1.4em !important;
}

/* ---------- Sello (hero) ----------
   CORRECCIÓN 2026-08-28 (4ª iteración): la nota anterior era FALSA. `Sello-_SVG.png`
   y `Sello _SVG.svg` NO son un cluster de stickers: son el sello circular oficial
   y aislado —anillo "ESTUDIO BEARS · CREATIVIDAD Y ESTRATEGIA" con la cabeza de
   oso sobre disco amarillo— tal como aparece en el manual (pág. 13-14, "Versiones
   de logo: Principal / Logotipo / Sello").
   Aun así va ESTÁTICO: el oso interior no es radialmente simétrico, así que rotar
   el sello completo lo deja cabeza abajo. Se elimina `bears-spin`, que estaba
   viva y hacía girar el sello en producción. */

/* ---------- Stickers ---------- */
.bears-sticker {
  display: inline-block;
  font-family: var(--bears-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .05em;
  padding: .45em 1em;
  border-radius: 999px;
  transform: rotate(-3deg);
}
.bears-sticker--orange { background: var(--bears-orange); color: var(--bears-black); }
.bears-sticker--blue   { background: var(--bears-blue);   color: var(--bears-white); }
.bears-sticker--green  { background: var(--bears-green);  color: var(--bears-black); }
.bears-sticker--yellow { background: var(--bears-yellow); color: var(--bears-black); }
.bears-sticker--purple { background: var(--bears-purple); color: var(--bears-white); }

/* ---------- Archive Portfolio: cabecera oscura y retícula sin destacados ----------
   El archive no recibe contenido demo: el shortcode real se conserva como marcador
   hasta contar con su lista de Visual Portfolio en staging. Estas reglas sólo
   preparan el mismo sistema del preview para esa lista real. */
.bears-portfolio-intro{position:relative;overflow:clip;background:var(--bears-offwhite);padding-block:clamp(4rem,7vw,7rem)}
.bears-portfolio-intro .elementor-column-wrap{position:relative;z-index:1}
.bears-portfolio-intro__eyebrow{display:inline-flex;margin:0 0 1rem;padding:.45rem .75rem;background:var(--bears-purple-ink);color:var(--bears-white);font:700 .78rem/1 var(--bears-font-display);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg)}
.bears-portfolio-intro .elementor-heading-title{max-width:13ch;color:var(--bears-black)}
.bears-portfolio-intro__accent{display:inline-block;background:var(--bears-green);color:var(--bears-black);padding:.06em .3em .12em;border-radius:0;transform:rotate(-2deg)}
.bears-portfolio-intro .elementor-widget-text-editor{max-width:44rem;color:var(--bears-mute-light)}
.bears-portfolio-intro__sticker{position:absolute;right:clamp(2rem,8vw,9rem);top:50%;width:clamp(10rem,15vw,14rem);height:auto;transform:translateY(-50%) rotate(5deg);pointer-events:none}
.bears-portfolio-archive{padding-top:clamp(2rem,3.9vw,3.5rem)!important}
.bears-portfolio-filters .pill[aria-pressed="true"]{background:var(--bears-yellow);color:var(--bears-black)}
.bears-portfolio-filters .pill[data-filter="branding"][aria-pressed="true"],
.bears-portfolio-filters .pill[data-filter="diseno-visual"][aria-pressed="true"]{background:var(--bears-orange);color:var(--bears-black)}
.bears-portfolio-filters .pill[data-filter="desarrollo-web"][aria-pressed="true"],
.bears-portfolio-filters .pill[data-filter="ui-ux"][aria-pressed="true"]{background:var(--bears-blue);color:var(--bears-white)}
.bears-portfolio-filters .pill[data-filter="animacion-3d"][aria-pressed="true"],
.bears-portfolio-filters .pill[data-filter="social-media"][aria-pressed="true"]{background:var(--bears-green);color:var(--bears-black)}
.bears-portfolio-archive .vp-portfolio__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.bears-portfolio-archive .vp-portfolio__item{grid-column:auto!important;grid-row:auto!important;display:flex;flex-direction:column}
.bears-portfolio-archive .vp-portfolio__item-img-wrap{position:relative;overflow:hidden;aspect-ratio:3 / 2}
.bears-portfolio-archive .vp-portfolio__item-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--bears-ease)}
.bears-portfolio-archive .vp-portfolio__item-meta{min-height:4.25rem}
@media (hover:hover) and (pointer:fine){.bears-portfolio-archive .vp-portfolio__item:hover .vp-portfolio__item-img img{transform:scale(1.025)}}
@media (max-width:1024px){.bears-portfolio-archive .vp-portfolio__items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.bears-portfolio-intro__sticker{display:none}}
@media (max-width:600px){.bears-portfolio-archive .vp-portfolio__items{grid-template-columns:1fr}.bears-portfolio-archive .vp-portfolio__item-img-wrap{aspect-ratio:2 / 1}}

/* ---------- Portfolio (Visual Portfolio + grids Elementor) ----------
   La metadata YA NO se esconde hasta el hover. El modelo anterior la ponía en
   overlay absoluto con `opacity:0`: en escritorio la grilla era un mosaico de
   imágenes anónimas y en móvil, sin hover, no había forma de leer el nombre del
   proyecto. Pasa al modelo persistente del preview: descriptor pequeño encima,
   nombre dominante debajo de la foto y flecha siempre visible. */

.bears-work-card img {
  filter: grayscale(0); /* trabajo real siempre a color */
  transition: transform .6s var(--bears-ease);
  display: block; width: 100%;
}
.bears-work-card:hover img,
.bears-work-card:focus-within img { transform: scale(1.025); }
.bears-work-card .bears-work-meta {
  position: static; background: none; color: inherit;
  padding: .9rem 0 0; opacity: 1; transform: none;
}

/* ---------- "Things we made happen." — avance de portfolio del Home ----------
   Acotado a `.bears-work-preview` (sección b3a40001). No toca /portfolio/ ni
   las fichas de proyecto, que tienen sus propias plantillas.
   Espejo de `#portfolio-preview.work-preview` del preview.

   ⚠️ ESTADO: PENDIENTE DE STAGING. El widget b3a40004 conserva el marcador
   [REEMPLAZAR]: Visual Portfolio está instalado, pero sus listas guardadas
   viven en el post type `vp_lists` dentro de la BASE DE DATOS y el backup del
   cliente no incluye ningún dump SQL (sólo `public_html`), así que el id real
   de la lista de destacados no se puede conocer y no se inventa. Estas reglas
   se escriben contra los selectores REALES del plugin, verificados leyendo sus
   plantillas en el backup, pero no se han podido comprobar sobre DOM vivo.
   Estilo de item obligatorio: `default` — es el único que pinta la metadata
   debajo de la imagen; `fade` y `fly` la meten en un overlay con opacidad 0.

   La cabecera queda apilada por dirección del cliente (D-34): el lede continúa
   el titular y no funciona como una nota lateral. */
.bears-work-preview .bears-work-preview__title .elementor-heading-title { margin: 0; }
/* Único gesto cromático de la cabecera: color, no objeto. Sin caja, contorno,
   sticker ni rotación. #F5C001 sobre #1B1D1A = 10.04:1. */
.bears-work-preview__accent { color: var(--bears-yellow); }
.bears-work-preview .bears-work-preview__title,
.bears-work-preview .bears-work-preview__grid,
.bears-work-preview .bears-work-preview__cta { flex: 0 0 100%; max-width: 100%; }
.bears-work-preview .bears-work-preview__lede {
  flex: 0 0 100%; width: 100%; max-width: 44rem; margin-top: 1rem;
  color: var(--bears-mute-dark); text-align: left;
}
.bears-work-preview .bears-work-preview__lede p { margin: 0; }

@media (min-width: 841px) {
  .bears-work-preview .bears-work-preview__cta { text-align: left; }
}
@media (max-width: 840px) {
  .bears-work-preview .bears-work-preview__cta .elementor-button { width: 100%; justify-content: center; }
}

/* Selectores reales de Visual Portfolio (leídos de templates/items-list/ en el
   backup): .vp-portfolio__item · -img-wrap · -img · -meta · -meta-categories ·
   -meta-category · -meta-title · -meta-excerpt · -meta-read-more · -meta-date ·
   .vp-portfolio__item-overlay, bajo el modificador
   .vp-portfolio__items-style-default. */
.bears-work-preview .vp-portfolio__items { align-items: start; }
.bears-work-preview .vp-portfolio__item { position: relative; }
/* `overflow:hidden` SÓLO en el contenedor de la imagen: en la tarjeta
   recortaría el anillo de foco. */
/* Avance de Home: seis proyectos equivalentes en una relación horizontal 3:2.
   El archive mantiene el layout `tiles` del plugin; la configuración de
   staging del shortcode debe conservar seis items sin tile destacado. */
.bears-work-preview .vp-portfolio__item-img-wrap {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
}
@media (max-width: 600px) {
  .bears-work-preview .vp-portfolio__item-img-wrap { aspect-ratio: 2 / 1; }
}
.bears-work-preview .vp-portfolio__item-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--bears-ease);
}
.bears-work-preview .vp-portfolio__item:hover .vp-portfolio__item-img img,
.bears-work-preview .vp-portfolio__item:focus-within .vp-portfolio__item-img img { transform: scale(1.025); }
/* Metadata persistente, nunca oculta. El template default envuelve TODO el
   figcaption en `.vp-portfolio__item-overlay`; ocultarlo también ocultaba el
   título y las categorías. Se neutraliza el overlay sin retirar su contenido. */
.bears-work-preview .vp-portfolio__item-overlay {
  position: static; display: block; padding: 0; background: none; color: inherit;
}
.bears-work-preview .vp-portfolio__item-meta {
  position: static; opacity: 1; transform: none; background: none;
  padding: .9rem 0 0; text-align: left; color: inherit;
}
/* Visual Portfolio emite la taxonomía real como enlace. En staging debe
   configurarse categories_count=1 y el término Marca para los tres destacados.
   Aquí sólo se presenta ese dato real como pill; nunca se hardcodea el texto. */
.bears-work-preview .vp-portfolio__item-meta-categories {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-family: var(--bears-font-display); text-transform: uppercase;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  padding: 0; margin: 0; list-style: none; background: none;
}
.bears-work-preview .vp-portfolio__item-meta-category { background: none; padding: 0; margin: 0; }
.bears-work-preview .vp-portfolio__item-meta-category a {
  display: block; padding: .5em 1.1em; border-radius: 999px;
  background: var(--bears-orange); color: var(--bears-black);
  text-decoration: none; transform: rotate(-3deg);
  box-shadow: 0 6px 12px rgba(0,0,0,.22);
}
/* El CSS del plugin elimina outline/box-shadow en sus enlaces con mayor
   especificidad que el foco global. Se restaura el anillo BEARS aquí. */
.bears-work-preview .vp-portfolio__item a:focus-visible {
  outline: 3px solid var(--bears-white); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--bears-yellow);
}
.bears-work-preview .vp-portfolio__item-meta-title {
  display: inline-flex; align-items: center; gap: .45em; margin: .2rem 0 0;
  font-family: var(--bears-font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.1;
  transition: color var(--bears-dur) var(--bears-ease);
}
.bears-work-preview .vp-portfolio__item-meta-title::after {
  content: ''; width: .62em; height: .62em; flex: none; background: currentColor;
  -webkit-mask: var(--bears-arrow) center/contain no-repeat;
  mask: var(--bears-arrow) center/contain no-repeat;
  transition: transform var(--bears-dur) var(--bears-ease-out);
}
.bears-work-preview .vp-portfolio__item:hover .vp-portfolio__item-meta-title,
.bears-work-preview .vp-portfolio__item:focus-within .vp-portfolio__item-meta-title { color: var(--bears-yellow); }
.bears-work-preview .vp-portfolio__item:hover .vp-portfolio__item-meta-title::after,
.bears-work-preview .vp-portfolio__item:focus-within .vp-portfolio__item-meta-title::after { transform: translateX(4px); }

/* Fotografía de estudio/equipo: B&N según manual */
.bears-img-bw img { filter: grayscale(1); }

/* ---------- Servicios numerados ---------- */
.bears-service-block { border-top: 2px solid var(--bears-black); padding-top: var(--bears-gap); }
.bears-section-dark .bears-service-block { border-top-color: rgba(255,255,255,.25); }

/* ---------- Formularios (CF7) ---------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  font-family: var(--bears-font-body);
  border: 2px solid var(--bears-black);
  border-radius: 0;
  padding: .9em 1em;
  width: 100%;
  background: var(--bears-white);
  color: var(--bears-black);
}
.wpcf7 input:focus-visible, .wpcf7 select:focus-visible, .wpcf7 textarea:focus-visible {
  outline: 3px solid var(--bears-yellow);
  outline-offset: 2px;
}
.wpcf7 input[type="submit"] {
  font-family: var(--bears-font-display);
  font-weight: 700; text-transform: uppercase;
  background: var(--bears-yellow); color: var(--bears-black);
  border: 2px solid var(--bears-yellow); border-radius: 0;
  padding: 1.1em 2.4em; cursor: pointer;
  transition: background var(--bears-dur) var(--bears-ease), color var(--bears-dur) var(--bears-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--bears-black); color: var(--bears-yellow); border-color: var(--bears-black); }
.wpcf7 label { font-weight: 600; }

/* ---------- Footer ---------- */
.bears-footer { background: var(--bears-black); color: var(--bears-white); }
.bears-footer a { color: var(--bears-white); }
.bears-footer a:hover { color: var(--bears-yellow); }

/* ---------- Accesibilidad ---------- */
/* P1 revisión integral 2026-08-28: el anillo amarillo daba 1.55:1 sobre las
   secciones claras y 1.24:1 sobre el CTA verde — muy por debajo del 3:1 que
   exige WCAG 1.4.11/2.4.11. Ningún color único contrasta contra las seis
   superficies del sitio, así que el anillo es de dos tonos: negro + halo
   amarillo. Siempre uno de los dos supera 3:1 contra el fondo. */
:focus-visible {
  outline: 3px solid var(--bears-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--bears-yellow);
  border-radius: 2px;
}
.bears-section-dark :focus-visible,
.bears-section-texture :focus-visible,
.bears-section-blue :focus-visible { outline-color: var(--bears-white); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--bears-yellow); color: var(--bears-black);
  padding: .75em 1.5em; z-index: 100000;
  font-family: var(--bears-font-display); font-weight: 700;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .bears-sello img { animation: none; }
}

/* ==========================================================================
   PERSONALIDAD 2026-08-27 — referencia: flamantelab.com (aportada por el cliente,
   estudio de diseño hermano que trabajó la línea gráfica de BEARS).
   Replica exacta del sistema construido y verificado en 04_QA/preview-assets/preview.css.
   Requiere bears-motion.js (cursor + scroll-reveal) enqueued desde functions.php.
   ========================================================================== */

/* ---- Cursor. Rediseñado en la revisión integral 2026-08-28.
   El anterior era un punto de 18px con mix-blend-mode:difference: sobre negro
   renderizaba naranja, sobre blanco azul, sobre azul magenta y sobre amarillo
   negro — nunca el amarillo de marca que declaraba. Además no tenía punta de
   precisión y suprimía el puntero del sistema también sobre los campos de
   texto, donde la barra de inserción sí comunica algo.
   Ahora: anillo definido + punto de precisión, con colores fijos de marca. ---- */
@media (hover:hover) and (pointer:fine) {
  body.bears-cursor-active, body.bears-cursor-active a,
  body.bears-cursor-active button, body.bears-cursor-active .bears-work-card { cursor: none; }
  body.bears-cursor-active input, body.bears-cursor-active textarea,
  body.bears-cursor-active select { cursor: auto; }
}
.bears-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%); transition: opacity .2s var(--bears-ease);
}
.bears-cursor.is-visible { opacity: 1; }
.bears-cursor__ring {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--bears-yellow);
  transition: width .32s var(--bears-ease), height .32s var(--bears-ease),
              background-color .32s var(--bears-ease), border-color .32s var(--bears-ease);
}
.bears-cursor__dot {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--bears-yellow); transform: translate(-50%, -50%);
}
.bears-cursor.is-big .bears-cursor__ring { width: 64px; height: 64px; background: rgba(245,192,1,.16); }
.bears-cursor.is-dark .bears-cursor__ring { border-color: var(--bears-black); }
.bears-cursor.is-dark .bears-cursor__dot { background: var(--bears-black); }

/* ---- Hero como stickers apilados (usar en el H1 del hero de Home) ---- */
/* Revisión integral 2026-08-28: la sombra era `6px 6px 0 rgba(0,0,0,.18)` sobre
   un hero negro — un cambio de luminancia del 2%, invisible, y además un recurso
   neobrutalista que este mundo visual no eligió. Sombra real (offset + blur).
   El titular del Home vuelve a ser el texto más grande del sitio: antes el h1 de
   las páginas interiores renderizaba a 88px contra los 76px de la portada. */
.bears-hero-stack { margin: 1.5rem 0; width: fit-content; max-width: 100%; }
.bears-hero-ribbon {
  display: block; width: fit-content; max-width: 100%;
  font-family: var(--bears-font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(2.4rem, 7.5vw, 5.5rem);
  line-height: 1.02; padding: .14em .4em; position: relative;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
/* El apilado físico de una cinta: la de abajo va encima.
   2026-08-28: tratamiento neutral blanco/negro. Azul, naranja y verde quedan
   reservados a Digital, Marca y Contenido — usarlos aquí como decoración
   vaciaría de significado la taxonomía. El anillo blanco de la cinta negra la
   despega del hero oscuro y marca el solape entre ambas. */
.bears-hero-ribbon--1 {
  background: var(--bears-black); color: var(--bears-white); transform: rotate(-2deg); z-index: 1;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 2px var(--bears-yellow);
}
.bears-hero-ribbon--2 {
  background: var(--bears-yellow); color: var(--bears-black); transform: rotate(1.5deg);
  margin-top: -.12em; z-index: 2; box-shadow: 0 16px 38px rgba(0,0,0,.5);
}
/* Elementor envuelve el título en .elementor-heading-title; las cintas son
   <span> dentro de ese H1 único, así que necesitan ser bloque. */
.bears-hero-stack .elementor-heading-title { display: block; width: fit-content; max-width: 100%; }

/* Etiqueta neutral del hero (antes amarilla). El amarillo queda exclusivamente
   para el CTA principal. */
/* .bears-sticker--outline retirado 2026-08-28: el eyebrow del hero vuelve al
   amarillo sólido de marca (bears-sticker--yellow), 10.04:1, porque el contorno
   transparente no se leía sobre la fotografía. */

/* Fila de CTA del hero: gap y wrap equivalentes al preview. */
.bears-hero-actions > .elementor-container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; }
.bears-hero-actions .elementor-column { width: auto !important; }

/* ---------------------------------------------------------------------------
   Hero de Home — composición de fondo en 4 capas. Espejo exacto de
   .hero--tall en 04_QA/preview-assets/preview.css.

     z0  ::before                        la FOTOGRAFÍA. Hereda con
                                         `background-image: inherit` la imagen
                                         que el cliente pone en Elementor
                                         (Style > Fondo > Imagen), así que sigue
                                         siendo editable desde el editor; el
                                         pseudo-elemento existe solo para poder
                                         animarla con transform, que es lo único
                                         que se puede animar sin jank.
     z1  .elementor-background-overlay   la TEXTURA de concreto. Es el overlay
                                         nativo de la sección, con su propio
                                         control de opacidad en Elementor.
     z2  ::after                         el SCRIM asimétrico.
     z3  .elementor-container            contenido + sello.
   --------------------------------------------------------------------------- */
/* Header + hero ocupan exactamente el primer viewport. svh evita el salto de
   las barras del navegador; vh queda de fallback. Es min-height, no height:
   si el contenido pide más espacio el hero crece en vez de recortarlo. */
.bears-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--bears-header-h));
  min-height: calc(100svh - var(--bears-header-h));
}
.bears-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: inherit; background-size: cover; background-position: 62% 42%; background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .bears-hero::before { animation: bears-hero-depth 18s cubic-bezier(.45,0,.55,1) infinite alternate; }
  @keyframes bears-hero-depth { from { transform: scale(1); } to { transform: scale(1.035); } }
}
.bears-hero > .elementor-background-overlay {
  z-index: 1; pointer-events: none;
  background-image: url('assets/img/hero-textura.webp');
  background-size: cover; background-position: center; mix-blend-mode: multiply;
}
/* Scrim asimétrico: cierra sobre la columna de texto y se abre a la derecha
   para que la fotografía siga siendo reconocible. Vive en CSS y no en el fondo
   editable, para que la legibilidad no dependa de qué imagen suba el cliente. */
.bears-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(27,29,26,.94) 0%, rgba(27,29,26,.88) 34%, rgba(27,29,26,.62) 62%, rgba(27,29,26,.46) 100%),
    linear-gradient(180deg, rgba(27,29,26,.55) 0%, rgba(27,29,26,.35) 45%, rgba(27,29,26,.78) 100%);
}
.bears-hero > .elementor-container { position: relative; z-index: 4; }
.bears-hero .bears-hero__lede { max-width: 44rem; }
.bears-hero-layer, .bears-sticker-x, .bears-sello { z-index: 3; }

/* ---- Capa expresiva del hero (12_WEB_VISUAL_IDENTITY.md §2 y §5) ----
   CORRECCIÓN 2026-08-28: aquí había dos ICONOS FUNCIONALES (magic,
   rule-breakers). Son iconografía conceptual y su sitio es "Cómo pensamos", no
   la decoración de un hero. Se sustituyen por un STICKER EXPRESIVO oficial
   extraído como SVG vectorial de Brand Guidelines.pdf pág. 26.
   Presupuesto de esta sección pico: 2 elementos gráficos (diamante + sello),
   1 color secundario (Energy Orange). El cue verde es un enlace, no adorno.

   IMPORTANTE — capa absoluta: en Elementor el widget HTML se envuelve en
   .elementor-widget-container dentro de .elementor-widget-wrap y
   .elementor-column, todos position:relative por defecto. Si no se neutraliza,
   el sticker se posiciona contra ese wrapper diminuto y no contra el hero.
   Se fuerzan a static SOLO dentro de .bears-hero, de modo que el único
   containing block sea la sección, igual que .hero en el preview. */
.bears-hero .elementor-column,
.bears-hero .elementor-widget-wrap,
.bears-hero .elementor-widget,
.bears-hero .elementor-widget-container { position: static; }
.bears-hero .elementor-container { position: relative; }

.bears-hero-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bears-sticker-x { position: absolute; pointer-events: none; line-height: 0; }
.bears-sticker-x img { display: block; width: 100%; height: auto; }
/* D-38: cinco piezas originales, z3 detrás del H1 z4. Cue verde sólo abajo. */
.bears-sticker-x--cluster { top: calc(50% - 22rem); left: calc(var(--bears-gutter, clamp(1.5rem,6vw,6rem)) + clamp(25rem,8vw + 19rem,25.7rem)); width: clamp(300px,22vw,460px); }
/* Entrada breve, una sola vez. Sin drift ni animaciones por pieza. */
@media (prefers-reduced-motion: no-preference) {
  .bears-sticker-x--cluster { animation: bears-sticker-in .56s var(--bears-ease-out) both; }
  @keyframes bears-sticker-in {
    from { opacity: 0; transform: translateY(-10px) scale(.94); }
    to   { opacity: 1; transform: none; }
  }
}
/* Tablet horizontal: se reduce y desplaza lo justo. */
@media (max-width: 1200px) {
  .bears-sticker-x--cluster { top: 3%; left: auto; right: 5%; width: clamp(280px,26vw,380px); }
}
/* Tablet vertical: a la zona superior derecha. */
@media (max-width: 1024px) {
  .bears-sticker-x--cluster { top: 3%; left: auto; right: 4%; width: clamp(260px,30vw,340px); }
}
/* Móvil y pantallas estrechas: se oculta completo; reducirlo más volvería
   ilegibles los cinco textos. Quedan el cue y el sello. */
@media (max-width: 760px) { .bears-sticker-x--cluster { display: none; } }

/* ---- Indicador de scroll: sticker oficial KEEP SCROLLING (verde) ----
   Sigue siendo un <a> real: clic, teclado, foco visible y 44×44 mínimo.
   El SVG es decorativo; el nombre accesible va en español por aria-label. */

.bears-scroll-cue img { display: block; width: clamp(150px,15vw,205px); height: auto; }
.bears-scroll-cue:hover { transform: translateX(-50%) rotate(-12deg) translateY(3px); }
/* Salto hasta el primer scroll; detenido también durante hover y foco. */
@media (prefers-reduced-motion: no-preference) {
  .bears-scroll-cue.is-bouncing:not(:hover):not(:focus-visible) img { animation: bears-cue-nudge 1.6s var(--bears-ease) infinite; }
  @keyframes bears-cue-nudge {
    0%, 45%, 100% { transform: translateY(0); }
    65% { transform: translateY(8px); }
    82% { transform: translateY(-2px); }
  }
}

@media (max-width: 600px) {
  /* Móvil: scrim parejo (el texto ocupa todo el ancho) y foto más oscura.
     El hero sigue midiendo un viewport completo; solo cambia el padding para
     reservar sitio al indicador de scroll. */
  .bears-hero { padding-bottom: 6rem; }
  /* Presupuesto móvil (§7 del contrato): 1 sticker expresivo + el sello. Ese
     sticker es el cue KEEP SCROLLING, así que el diamante se oculta. */
  .bears-hero::before { background-position: 56% 32%; opacity: .9; }
  .bears-hero > .elementor-background-overlay { opacity: .26 !important; }
  .bears-hero::after {
    background: linear-gradient(180deg, rgba(27,29,26,.9) 0%, rgba(27,29,26,.82) 45%, rgba(27,29,26,.93) 100%);
  }
}

/* Sello: estático, decorativo, proporción 1:1, y sin bloquear los CTA. */
.bears-sello { position: absolute; z-index: 3; right: var(--bears-gutter, clamp(1.5rem,6vw,6rem)); bottom: clamp(2rem,8vh,5rem); pointer-events: none; }
.bears-sello img { width: clamp(90px,10vw,140px); height: auto; aspect-ratio: 1; display: block; }
@media (max-width: 600px) {
  /* Móvil: el sello entra al flujo, después de los CTA y alineado a la derecha.
     En absoluto se superponía a los botones en pantallas cortas. */
  .bears-sello { position: static; inset: auto; margin: 2.25rem 0 0 auto; width: fit-content; }
  .bears-sello img { width: 76px; }
}
/* ≤360px (p. ej. 320×844). Acotado al hero. Medido en el preview: con los
   valores de ≤600px el CTA principal pide ~324px contra 272px disponibles. */
@media (max-width: 360px) {
  .bears-hero .bears-btn a.elementor-button { width: 100%; justify-content: center; text-align: center; padding: 1em 1.2em; }
  .bears-hero .bears-hero-ribbon { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .bears-sello img { width: 64px; }
}
/* Landscape de poca altura: única excepción a "un viewport". Medido a 844×390,
   el hero dispondría de 299px y el contenido pide ~577px, así que forzar la
   altura recortaría. Aquí el hero crece y el indicador vuelve al flujo. */
@media (max-height: 520px) and (orientation: landscape) {
  .bears-hero { min-height: auto; }
  .bears-sello { position: static; inset: auto; margin: 1.75rem 0 0 auto; width: fit-content; }
  .bears-sello img { width: 72px; }
  .bears-scroll-cue { position: static; transform: rotate(-12deg); margin: 1.5rem auto 0; }
  .bears-scroll-cue:hover { transform: rotate(-12deg) translateY(3px); }
}

/* ---- Chips flotantes sobre imágenes ---- */
.bears-img-frame { position: relative; display: block; }

.bears-chip--dark { background: var(--bears-black); color: var(--bears-white); }
.bears-chip--yellow { background: var(--bears-yellow); color: var(--bears-black); }
.bears-chip--green { background: var(--bears-green); color: var(--bears-black); }

/* ---- Scroll-reveal (activado por bears-motion.js) ---- */
/* Revisión integral 2026-08-28. Antes: `.bears-reveal{opacity:0}` era el estado
   por defecto del documento y una sola transición por SECCIÓN — cualquier fallo
   de JS dejaba la página en blanco bajo el hero, y un translate de 18px dentro
   de un bloque de 1000-1500px es imperceptible (lo que se veía era un fade plano
   repetido con la misma duración en cada sección).
   Ahora: el estado oculto solo existe si el JS corrió (html.bears-js) y el
   escalonado es por hijo. */
.bears-js .bears-reveal > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .62s var(--bears-ease-out), transform .62s var(--bears-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.bears-js .bears-reveal.is-in > * { opacity: 1; transform: none; }

/* Deriva continua ligada al scroll: el mecanismo real que da sensación de vida
   en flamantelab.com (allí son ~18 elementos a velocidades distintas). Nativo,
   sin JS, y solo donde el navegador lo soporta. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bears-drift { animation: bears-drift linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
    @keyframes bears-drift { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
    .bears-drift--slow { animation-name: bears-drift-slow; }
    @keyframes bears-drift-slow { from { transform: translateY(14px); } to { transform: translateY(-14px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bears-js .bears-reveal > * { opacity: 1; transform: none; }
}

/* ---- Variantes de color para CTA final (antes solo amarillo) ---- */
.bears-section-green { background-color: var(--bears-green); color: var(--bears-black); }
.bears-section-blue { background-color: var(--bears-blue); color: var(--bears-white); }
.bears-section-blue .bears-btn a.elementor-button { background: var(--bears-white); color: var(--bears-black); border-color: var(--bears-white); }
.bears-section-blue .bears-btn a.elementor-button:hover { background: transparent; color: var(--bears-white); }
.bears-section-green .bears-btn a.elementor-button { background: var(--bears-black); color: var(--bears-yellow); border-color: var(--bears-black); }
.bears-section-green .bears-btn a.elementor-button:hover { background: transparent; color: var(--bears-black); }

/* ---- Footer: frase de cierre grande ---- */

.bears-footer-cta .elementor-heading-title { font-size: clamp(2.5rem,8vw,5rem); margin-bottom: .5rem; color: var(--bears-white); }
.bears-footer-cta p { color: var(--bears-gray); margin-bottom: 0; }

@media (max-width: 767px) {
  .bears-hero-ribbon { font-size: clamp(1.7rem,9vw,3rem); }
  .bears-chip { font-size: .62rem; padding: .4em .8em; }
}

/* ---------- Responsive fino ---------- */
@media (max-width: 1024px) {
  :root { --bears-section: clamp(3rem, 8vw, 5rem); }
}
/* ==========================================================================
   2026-08-28 — Sección "Sobre BEARS" (ref. Norto demo "Digital Agency":
   https://norto-theme.jkdevstudio.com/ — bloque "About Digital Agency", adaptado
   a paleta/tipografía/contenido BEARS). Ver bears-home.json para el markup
   Elementor: 1 columna imagen (bears-about-visual) + 1 columna copy con
   heading, texto, social-icons widget (bears-about-social) y 4 heading widgets
   en grid de 2x2 con clase bears-about-feature (equivalente al "rule" del preview).
   ========================================================================== */
/* Altura tomada de la referencia: en el demo de Norto el bloque "About Digital
   Agency" mide 670px de contenido (770 con padding). Antes la foto iba a
   aspect-ratio 3/4 libre y estiraba la sección muy por encima de eso.
   El filtro grayscale se retiró: la foto de origen ya mide 0.0 de croma — era
   un filtro de GPU que no cambiaba un pixel. */
.bears-about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,4.5rem); align-items: stretch; }
.bears-about-visual { position: relative; min-height: 0; }
.bears-about-visual img { width: 100%; height: 100%; min-height: 420px; max-height: 670px; display: block; object-fit: cover; }
.bears-about-copy { display: flex; flex-direction: column; justify-content: center; }
.bears-about-copy .bears-about-copy__lede { max-width: 44rem; }

/* Los seis servicios viven en esta sección: "Lo que hacemos" se fusionó aquí
   (eran dos bloques consecutivos diciendo lo mismo). Conservan el hover que
   invierte a negro, que es el que deja claro que la ficha entera es clicable. */
.bears-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.bears-svc-tile {
  display: block; text-decoration: none; color: inherit;
  border-top: 2px solid var(--bears-black); padding: 1rem 1rem 1.1rem 0;
  transition: transform var(--bears-dur) var(--bears-ease-out), background-color var(--bears-dur) var(--bears-ease),
              color var(--bears-dur) var(--bears-ease), padding-left var(--bears-dur) var(--bears-ease-out);
}
.bears-svc-tile .bears-cat {
  font-family: var(--bears-font-display); font-weight: 700; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; display: block; margin-bottom: .3rem;
}
.bears-svc-tile[data-cat="marca"] .bears-cat { color: var(--bears-marca-ink); }
.bears-svc-tile[data-cat="digital"] .bears-cat { color: var(--bears-digital-ink); }
.bears-svc-tile[data-cat="contenido"] .bears-cat { color: var(--bears-contenido-ink); }
.bears-svc-tile h3, .bears-svc-tile .elementor-heading-title { font-size: 1.05rem; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .bears-svc-tile:hover { transform: translate(6px,-6px) rotate(-1deg); background: var(--bears-black); color: var(--bears-white); padding-left: 1rem; }
  .bears-svc-tile[data-cat="marca"]:hover .bears-cat { color: var(--bears-marca); }
  .bears-svc-tile[data-cat="digital"]:hover .bears-cat { color: #7d9dfa; }
  .bears-svc-tile[data-cat="contenido"]:hover .bears-cat { color: var(--bears-contenido); }
}
@media (max-width: 600px) { .bears-svc-grid { grid-template-columns: 1fr; } }
/* .bears-eyebrow retirado en la revisión integral 2026-08-28: una etiqueta
   encima de un titular no aporta nada que el titular no cargue ya. */
/* --- Título editorial de #sobre-bears (espejo de .about-title del preview) ---
   Un solo h2 (widget b3a15006, sin duplicar), partido en dos spans dentro del
   propio campo `title`. La segunda frase va en Estrategic White sobre cinta
   Magic Purple.
   Contraste #F5F5F5 sobre #A43BFF = 4.14:1: cumple AA Large (3:1), que es el
   umbral aplicable a Space Grotesk 700 a 32-56px. NO cumple el 4.5:1 de texto
   normal — este tratamiento no se reutiliza en cuerpo ni en titulares chicos.
   Sin rotación, y es una limitación real: `transform` no aplica a cajas inline
   no reemplazadas y `box-decoration-break:clone` sólo actúa sobre cajas inline
   fragmentadas. Con `inline-block` + rotación la frase (que no entra en una
   línea ni a 1440px) estira la caja al ancho disponible y produce una losa
   morada medio vacía. Se conserva la cinta por línea, ajustada al texto.
   El padding vertical 60/60 de la sección vive en `bears-home.json`
   (b3a15001), no aquí: Elementor genera su propia regla para el padding de
   sección y duplicarla en el child theme crearía dos fuentes de verdad. */
.bears-about-title .bears-about-title__lead { display: block; color: var(--bears-black); }
.bears-about-title .bears-about-title__impact {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--bears-purple);
  color: var(--bears-white);
  padding: .06em .3em .12em;
  border-radius: 0;
  margin-left: -.08em;
}

/* --- Redes: navegación textual de marca (espejo de .about-social) -----------
   El widget b3a15008 deja de ser `social-icons` y pasa a `html`: el widget de
   Elementor sólo emite iconos de fuente y aquí hacen falta nombres legibles.
   Las tres URLs son las mismas que tenía, siguen pendientes de confirmación.
   El `@` es el glifo funcional de la marca sobre disco Bold Yellow; no existe
   como asset en `assets/icons/`, así que se construye con la tipografía en vez
   de inventar un archivo. Es `aria-hidden`, decorativo: su 1.55:1 contra el
   fondo claro no cae bajo ningún requisito de contraste.
   Las rotaciones alternan ±1°, el máximo autorizado. */
.bears-about-social { display: flex; align-items: center; gap: .55rem .6rem; flex-wrap: wrap;
  padding: 0; margin: 0 0 2.25rem;
  font-family: var(--bears-font-display); text-transform: uppercase; font-size: .8rem; letter-spacing: .02em; }
.bears-about-social__label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--bears-yellow); color: var(--bears-black);
  font-family: var(--bears-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
  transform: rotate(-3deg);
}
.bears-about-social a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .85rem;
  color: var(--bears-black); text-decoration: none; font-weight: 700;
  background: transparent; border: 2px solid var(--bears-black); border-radius: 0;
  transition: background-color var(--bears-dur) var(--bears-ease),
              color var(--bears-dur) var(--bears-ease),
              transform var(--bears-dur) var(--bears-ease);
}
.bears-about-social a:nth-of-type(odd) { transform: rotate(-1deg); }
.bears-about-social a:nth-of-type(even) { transform: rotate(1deg); }
.bears-about-social a:hover,
.bears-about-social a:focus-visible { background: var(--bears-black); color: var(--bears-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .bears-about-social a:hover,
  .bears-about-social a:focus-visible { transform: rotate(0deg) translateY(-2px); }
}
.bears-about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bears-about-feature { border-top: 2px solid var(--bears-black); padding: 1.1rem 1rem 1.1rem 0;
  transition: transform .35s var(--bears-ease), background-color .35s var(--bears-ease), color .35s var(--bears-ease); }
@media (hover: hover) and (pointer: fine) {
  .bears-about-feature:hover { transform: translate(6px,-6px) rotate(-1deg); background: var(--bears-black); color: var(--bears-white); padding-left: 1rem; }
}
@media (max-width: 1024px) {
  .bears-about-grid { grid-template-columns: 1fr; }
  .bears-about-visual img { min-height: 280px; max-height: 420px; }
}

/* Altura del header (2026-08-28): el logotipo se sentía apretado. Norto controla
   su propio header, así que esto solo sube el aire; si el tema lo ignora, el
   mismo valor está en Elementor > Header > Padding. */
.site-header, .jkd-header, header.header { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.site-header .custom-logo, .jkd-header img.logo, header.header img { height: 46px; width: auto; }

/* ---- "Lo que hacemos" (home): los icon-list de Marca/Digital/Contenido enlazan a su
   sección homónima en /servicios/ (ver bears-home.json — settings.link en icon_list items
   y bears-servicios.json — css_id "marca"/"digital"/"contenido" en las 3 secciones). ---- */
.bears-service-list.elementor-icon-list-items { gap: .5rem; }
.bears-service-list .elementor-icon-list-item { border-top: 2px solid var(--bears-black); padding: .9rem 0; position: relative;
  transition: padding-left .3s var(--bears-ease), border-color .3s var(--bears-ease); }
.bears-section-dark .bears-service-list .elementor-icon-list-item { border-top-color: rgba(245,245,245,.25); }
.bears-service-list .elementor-icon-list-item a { text-decoration: none; color: inherit; display: block; }
@media (hover: hover) and (pointer: fine) {
  .bears-service-list .elementor-icon-list-item:hover { padding-left: .85rem; border-top-color: var(--bears-orange); }
  .bears-section-dark .bears-service-list .elementor-icon-list-item:hover { border-top-color: var(--bears-yellow); }
}
[id="marca"], [id="digital"], [id="contenido"] { scroll-margin-top: 90px; }

/* ========================================================================== 
   2026-09-04 — "How we think": bloque Rule breakers + sticker oficial.
   Los discos son iconos funcionales; NO RISK, NO MAGIC es el único sticker
   expresivo, extraído de la pág. 26 del manual (D-36).
   ========================================================================== */
.bears-think { overflow: clip; }
.bears-think .bears-think__lede { max-width: 44rem; margin-top: 1rem; color: var(--bears-mute-dark); text-transform: none; }
.bears-think .bears-think__lede p { margin: 0; }
.bears-think-grid { margin-top: clamp(3.25rem,6vw,5rem); }
.bears-think-grid > .elementor-container {
  counter-reset: principle; display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(1.25rem,2vw,2rem); align-items: start;
}
.bears-think-grid > .elementor-container > .elementor-column { width: auto; min-width: 0; }
.bears-think .bears-think-card {
  counter-increment: principle; min-width: 0; padding: 1.5rem 0 2rem;
  border-top: 2px solid rgba(245,245,245,.72); position: relative; text-align: left;
}
.bears-think .bears-think-card::before {
  content: '0' counter(principle); position: absolute; top: 1.5rem; left: 0;
  font: 700 clamp(3rem,5vw,5.25rem)/.8 var(--bears-font-display);
  letter-spacing: -.04em; color: var(--bears-white);
}
/* `image-box` emite clases image-box, no icon-box. Los selectores anteriores
   nunca alcanzaban el título ni la descripción reales de Elementor. */
.bears-think .bears-think-card .elementor-image-box-wrapper {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: ". icon" "content content"; column-gap: 1rem; align-items: start;
}
.bears-think .bears-think-card .elementor-image-box-img { grid-area: icon; margin: 0; }
.bears-think .bears-think-card .elementor-image-box-img img {
  width: clamp(76px,6vw,104px); height: auto;
  transition: transform var(--bears-dur-slow) var(--bears-ease-out);
}
.bears-think .bears-think-card .elementor-image-box-content { grid-area: content; min-width: 0; }
.bears-think .bears-think-card .elementor-image-box-title {
  min-width: 0; margin: clamp(1.75rem,3vw,2.75rem) 0 0;
  font-size: clamp(1.7rem,2.6vw,2.75rem); line-height: .94; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--bears-white);
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.bears-think .bears-think-card .elementor-image-box-description {
  margin: 1rem 0 0; max-width: 18rem; font-size: 1rem; line-height: 1.65;
  color: var(--bears-mute-dark); text-transform: none;
}
.bears-think .bears-think-card--break {
  margin-top: calc(clamp(-3.675rem,-4.725vw,-2rem) - 2.6rem - clamp(3.25rem,6vw,5rem)); padding: clamp(1.5rem,2.4vw,2.5rem);
  background: var(--bears-yellow); border-top: 0; color: var(--bears-black);
}
.bears-think .bears-think-card--break::before,
.bears-think .bears-think-card--break .elementor-image-box-title,
.bears-think .bears-think-card--break .elementor-image-box-description { color: var(--bears-black); }
.bears-think .bears-think-card--break .elementor-image-box-img { position: relative; z-index: 0; }
.bears-think .bears-think-card--break .elementor-image-box-img::before {
  content: ''; position: absolute; inset: clamp(-.45rem,-.55vw,-.35rem); border-radius: 50%;
  background: var(--bears-black); z-index: 0;
}
.bears-think .bears-think-card--break .elementor-image-box-img img { position: relative; z-index: 1; }
.bears-think .bears-think-card--break::after {
  content: ''; position: absolute; right: 0; top: calc(100% + clamp(1.375rem,2.2vw,2rem));
  width: clamp(9rem,12vw,12.5rem); aspect-ratio: 307 / 178;
  background: url('assets/stickers/no-risk-no-magic.svg') center / contain no-repeat;
  transform: rotate(-5deg); pointer-events: none; z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .bears-js .bears-think.bears-reveal .bears-think-card { opacity: 0; transform: translateY(20px); }
  .bears-js .bears-think.bears-reveal .bears-think-card--break { transform: translateY(20px) rotate(-6deg); }
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card {
    opacity: 1; transform: none;
    transition: opacity var(--bears-dur-slow) var(--bears-ease-out), transform var(--bears-dur-slow) var(--bears-ease-out);
  }
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card--break { transform: rotate(-6deg); }
  .bears-js .bears-think.bears-reveal.is-in .elementor-column:nth-child(1) .bears-think-card { transition-delay: 120ms; }
  .bears-js .bears-think.bears-reveal.is-in .elementor-column:nth-child(2) .bears-think-card { transition-delay: 190ms; }
  .bears-js .bears-think.bears-reveal.is-in .elementor-column:nth-child(3) .bears-think-card { transition-delay: 260ms; }
  .bears-js .bears-think.bears-reveal.is-in .elementor-column:nth-child(4) .bears-think-card { transition-delay: 330ms; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .bears-think .bears-think-card:hover .elementor-image-box-img img { transform: scale(1.08) rotate(-6deg); }
}
@media (max-width: 1024px) {
  .bears-think-grid > .elementor-container { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bears-think .bears-think-card--break { margin-top: 0; padding-bottom: clamp(8.5rem,19vw,11.5rem); }
  .bears-think .bears-think-card--break::after {
    top: auto; right: clamp(1.25rem,3vw,2rem); bottom: clamp(1.25rem,2.5vw,2rem);
    width: clamp(9rem,22vw,12rem);
  }
}
@media (max-width: 600px) {
  .bears-think-grid > .elementor-container { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .bears-think .bears-think-card--break { margin-top: 0; padding-bottom: clamp(1.5rem,7vw,2.5rem); }
  .bears-think .bears-think-card--break::after { display: none; }
}

@media (max-width: 767px) {
  /* 2026-09-04: aquí había un override que forzaba `opacity:1` en móvil porque
     la metadata estaba oculta hasta el hover. Ya no hace falta: la metadata es
     persistente en todos los anchos. Su `padding: 1.25rem 1rem .9rem` era el de
     un overlay sobre la foto y contradecía el nuevo bloque bajo la imagen. */
  .bears-sticker { font-size: .7rem; }
}

/* D-39 — ajustes finos solicitados por Sergio. Rotación sólo en desktop amplio
   para conservar las esquinas completas en la retícula 2→1. */
@media(min-width:1201px){
  .bears-sello img{width:clamp(135px,15vw,210px);transform:rotate(-12deg)}
  .bears-think 
}
/* D-38 — acabado interior de Rule breakers, aislado de 01–03. */
.bears-think 
.bears-think .bears-think-card--break::before{font-size:clamp(2rem,3vw,2.75rem);line-height:1}
.bears-think .bears-think-card--break .elementor-image-box-img{--bicon-size:clamp(64px,5vw,80px)}
.bears-think .bears-think-card--break .elementor-image-box-img img{width:clamp(64px,5vw,80px)}
.bears-think .bears-think-card--break .elementor-image-box-title{margin-top:clamp(1.5rem,2.5vw,2rem)}
.bears-think .bears-think-card--break .elementor-image-box-description{margin-top:1.1rem;line-height:1.65}
@media(min-width:601px) and (max-width:1024px){.bears-think }
.bears-think .bears-think-card--break::before{top:clamp(1.5rem,2.4vw,2.5rem);left:clamp(1.25rem,2vw,2rem)}
/* Cierre: entrada del contenido y confirmación contenida del botón. */
@media(prefers-reduced-motion:no-preference){
.bears-footer-cta.closing-reveal:not(.is-in) :is(h2,p,.bears-btn){opacity:0;transform:translateY(14px)}
.bears-footer-cta.closing-reveal :is(h2,p,.bears-btn){transition:opacity var(--bears-dur-slow) var(--bears-ease-out),transform var(--bears-dur-slow) var(--bears-ease-out)}
.bears-footer-cta.closing-reveal p{transition-delay:90ms}
.bears-footer-cta.closing-reveal .bears-btn{transition-delay:180ms}
.bears-footer-cta .bears-btn:is(:hover,:focus-visible)::after{transform:translateX(7px)}
.bears-footer-cta .bears-btn:active{transform:translateY(2px)}
}

/* Utilidad accesible: texto disponible para lectores, fuera de la composición. */
.visually-hidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* D-40 — montaje manual pendiente en header-footer-elementor.
   Digital Blue es capa expresiva del cierre, no taxonomía funcional. */

.bears-footer-cta > :not(.bears-footer-cta__sticker){position:relative;z-index:1}
.bears-footer-cta__accent{display:inline;background:var(--bears-digital);color:var(--bears-white);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.035em .14em .09em;line-height:1.08}
.bears-footer-cta__sticker{position:absolute;left:var(--bears-gutter,clamp(1.5rem,6vw,6rem));bottom:clamp(1.5rem,4vw,3rem);
  width:clamp(8rem,10vw,10rem);height:auto;transform:rotate(-5deg);
  pointer-events:none;z-index:0}
.bears-footer .bears-footer-top{min-width:44px;min-height:44px;justify-content:center;white-space:nowrap;
  border-color:var(--bears-digital);color:var(--bears-white)}
.bears-footer .bears-footer-top:is(:hover,:focus-visible){background:var(--bears-digital);border-color:var(--bears-digital);color:var(--bears-white)}
@media(max-width:1024px){.bears-footer-cta__sticker{display:none}}
@media(max-width:600px){.bears-footer .bears-footer-top{width:100%}}

/* Biblioteca oficial 2026-09-05: montaje manual en el footer global. */

.bears-so-we-are img{display:block;width:min(100%,101.125rem);height:auto;margin-inline:auto}

/* Ajustes finales Home: sólo la portada y sus secciones concretas. El padding
   local deja intacto --bears-section, que sigue gobernando el resto del sitio. */
.bears-work-preview{padding-bottom:80px}
.bears-think{padding-top:80px;padding-bottom:88px}


/* Servicios 2026-09-05 — espejo del preview. La referencia Norto es su Type 4
   (contenido directo); los seis discos PNG son iconos funcionales oficiales,
   no stickers. Seis anclas sustituyen los tres macro-bloques. */
.bears-services-index{background:var(--bears-paper-2,#efefec);padding-top:136px}
.bears-services-index .elementor-column-wrap{position:relative}

.bears-services-index__title .elementor-heading-title{max-width:12ch}
.bears-services-index__accent{display:inline-block;background:var(--bears-orange);color:var(--bears-black);padding:.06em .3em .12em;border-radius:0;transform:rotate(-2deg)}

.bears-services-index__sticker{position:absolute;top:clamp(-7.5rem,-8.4vw,-6.5rem);right:50px;width:clamp(19.5rem,27vw,25.5rem);height:auto;transform:rotate(-5deg);pointer-events:none}

.bears-services-index__item{--bears-service-accent:var(--bears-orange);display:grid;grid-template-columns:auto 72px minmax(0,1fr);align-items:center;gap:1rem;min-height:8.5rem;padding:1rem 0;border-top:2px solid var(--bears-black);color:var(--bears-black);text-decoration:none;transition:background-color var(--bears-dur) var(--bears-ease),color var(--bears-dur) var(--bears-ease),padding var(--bears-dur) var(--bears-ease-out)}
.bears-services-index__item--orange{--bears-service-accent:var(--bears-orange)}
.bears-services-index__item--blue{--bears-service-accent:var(--bears-blue)}
.bears-services-index__item--green{--bears-service-accent:var(--bears-green)}
.bears-services-index__item>span{align-self:start;font-family:var(--bears-font-display);font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--bears-service-accent)}
.bears-services-index__item img{width:72px;height:72px;object-fit:contain}
.bears-services-index__item strong{font-family:var(--bears-font-display);font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.05;text-transform:uppercase}
@media(hover:hover) and (pointer:fine){.bears-services-index__item:hover{background:var(--bears-black);color:var(--bears-white);padding-inline:1rem}}
.bears-service-detail{--bears-service-accent:var(--bears-orange)}
.bears-service-detail--orange{--bears-service-accent:var(--bears-orange)}
.bears-service-detail--blue{--bears-service-accent:var(--bears-blue)}
.bears-service-detail--green{--bears-service-accent:var(--bears-green)}
.bears-service-detail .bears-service-num{display:block;margin:0 0 1rem;font:700 clamp(3rem,5vw,5.25rem)/.8 var(--bears-font-display);letter-spacing:-.04em;color:var(--bears-service-accent)}
.bears-service-detail__copy>.elementor-column-wrap>.elementor-widget-wrap{max-width:34rem}
.bears-service-detail__media{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--bears-black)}
.bears-service-detail__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform var(--bears-dur-slow) var(--bears-ease-out)}
@media(hover:hover) and (pointer:fine){.bears-service-detail__media:hover img{transform:scale(1.025)}}
[id="branding"],[id="diseno-visual"],[id="desarrollo-web"],[id="ui-ux"],[id="animacion-3d"],[id="social-media"]{scroll-margin-top:var(--bears-header-h,90px)}
@media(max-width:1024px){.bears-services-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:900px){.bears-services-index__sticker{top:-2.75rem;right:clamp(1.5rem,4vw,3rem);width:clamp(17rem,40vw,19.5rem)}}
@media(max-width:700px){.bears-services-index{padding-top:48px}.bears-services-index__sticker{display:none}.bears-services-index__grid{grid-template-columns:1fr;gap:.5rem;margin-top:1.25rem}.bears-services-index__item{grid-template-columns:auto 48px minmax(0,1fr);min-height:5.625rem;gap:.625rem;padding:.625rem 0}.bears-services-index__item img{width:48px;height:48px}}

/* Montaje manual requerido: añadir `bears-home-header` al header global de
   Norto. WordPress ya aporta `home` al body de la portada, de modo que ninguna
   página interna recibe este comportamiento. */
body.home .bears-home-header{margin-bottom:calc(-1 * var(--bears-header-h));opacity:0;pointer-events:none}
body.home.bears-home-header-visible .bears-home-header,
body.home .bears-home-header:focus-within{opacity:1;pointer-events:auto}
body.home .bears-hero{min-height:100vh;min-height:100svh}
@media(prefers-reduced-motion:no-preference){body.home .bears-home-header{transition:opacity var(--bears-dur) var(--bears-ease-out)}}
@media(max-height:520px) and (orientation:landscape){body.home .bears-hero{min-height:auto}}

}

/* BEARS — fuente canónica del preview, Fase 1. */
/* =============================================================================
   BEARS — design system del preview multipágina
   Paleta oficial Brand Guidelines 2024. Reescrito 2026-08-28 tras la revisión
   integral (ver .impeccable/critique/ y DECISIONS.md D-22).

   Cambios estructurales de esa revisión:
   - COLOR (corregido 2026-08-28, D-23): la fuente de verdad es
     00_DOCUMENTATION/12_WEB_VISUAL_IDENTITY.md. Tres niveles:
       1. Estructura: Experience Black + Estrategic White.
       2. Semántica funcional: naranja=Marca, azul=Digital, verde=Contenido,
          SOLO dentro de componentes funcionales (chips, filtros, anclas).
       3. Capa expresiva: paleta completa disponible (incluidos amarillo y
          morado) dentro de la densidad por sección.
     Las reglas anteriores —"amarillo solo para acción", "morado solo en el
     404", "máx. 1 acento por sección"— contradecían el manual y quedan
     derogadas.
   - Iconos funcionales (discos amarillos) ≠ stickers expresivos (piezas
     tipográficas con forma propia, extraídas del .ai oficial como SVG).
   - Sistema de movimiento (tokens de duración + stagger + drift ligado al
     scroll) en vez de siete adornos con siete duraciones distintas.
   - Los iconos son los 14 dibujados por el diseñador de BEARS (mayo 2024),
     no SVG de trazo genérico.
   ============================================================================= */

:root{
  /* Marca — Brand Guidelines 2024 */
  --bears-black:#1b1d1a;      /* Experience Black */
  --bears-white:#f5f5f5;      /* Strategic White */
  /* Bold Yellow. El CTA siempre es amarillo, pero el amarillo NO es exclusivo
     del CTA: el manual lo usa en el sticker `hi, bye.` y en discos decorativos.
     Jerarquía completa y densidad permitida en 00_DOCUMENTATION/12_WEB_VISUAL_IDENTITY.md */
  --bears-yellow:#f5c001;
  --bears-blue:#3060de;       /* Digital Blue */
  --bears-orange:#ff4b00;     /* Energy Orange */
  --bears-green:#5dc95f;      /* Forest Green */
  --bears-purple:#a43bff;     /* Magic Purple — 404 + bloque del título de #sobre-bears (D-28) */
  --purple-ink:#7a1dc5;       /* 6.86:1 con Estrategic White; pill de Portfolio */

  /* Neutros (antes había 5 grises ad-hoc sin declarar) */
  --ink-2:#262825;            /* superficie elevada sobre negro */
  --ink-3:#1f211e;            /* card sobre negro */
  --paper-2:#efefec;          /* superficie hundida sobre blanco */
  --mute-on-dark:#9a9a96;     /* 6.01:1 sobre negro */
  --mute-on-light:#5f605c;    /* 6.1:1 sobre blanco */

  /* Taxonomía de servicio — un color por categoría, mismo objeto en todo el sitio.
     *-ink son las variantes que pasan AA como texto sobre fondo claro. */
  --marca:#ff4b00;      --marca-ink:#c93b00;      /* 4.69:1 sobre #f5f5f5 */
  --digital:#3060de;    --digital-ink:#3060de;    /* 5.00:1 sobre #f5f5f5 */
  --contenido:#5dc95f;  --contenido-ink:#2f7331;  /* 5.0:1 sobre #f5f5f5 */

  --display:'BEARS Space Grotesk','Space Grotesk',sans-serif;
  --body:'BEARS Manrope','Manrope',sans-serif;

  /* Norto declara body{font-family:var(--jkd-norto-heading-font)!important} y
     nunca define esa variable, así que la declaración es inválida y el cuerpo
     caía a Times. Definirla aquí hace que la propia regla del padre resuelva a
     nuestra fuente en vez de pelearla con !important. */
  --jkd-norto-heading-font:var(--body);

  /* Movimiento — tres duraciones, dos curvas. Nada ad-hoc fuera de aquí. */
  --dur-fast:180ms;
  --dur:320ms;
  --dur-slow:620ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* salida exponencial */

  /* Espacio */
  --gutter:clamp(1.5rem,6vw,6rem);
  --section-y:clamp(4rem,10vw,8rem);
  /* Altura real del header cerrado: padding 1.4rem×2 + 46px de logo = 90.8px.
     Es la única fuente de verdad para el alto del hero y para scroll-margin-top. */
  --header-h:91px;
}

/* Chrome con Auto Dark Mode invertía las secciones claras; la marca define sus modos. */
html{color-scheme:only light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{margin:0;box-sizing:border-box}
[hidden]{display:none!important}

body{
  font-family:var(--body);color:var(--bears-black);background:var(--bears-white);
  font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.6;
  caret-color:var(--marca);
}

/* Norto declara h1..h6{color:var(--jkd-wh-col)} (blanco) sin capa, así que gana
   a nuestro color:inherit de @layer bears-production-compat y dejaba 14 titulares
   ilegibles sobre fondo claro. Esta regla sin capa lo devuelve a heredar del
   contenedor, que es lo que el diseño espera: oscuro en secciones claras y
   blanco en las oscuras. */
h1,h2,h3,h4,h5,h6{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
/* El titular del Home debe ser el texto más grande del sitio; los h1 interiores
   bajan para no competir con él (antes Servicios renderizaba más grande que Home). */
h1{font-size:clamp(2.25rem,5.5vw,4rem)}
h2{font-size:clamp(2rem,4.5vw,3.5rem)}
h3{font-size:clamp(1.35rem,2.5vw,1.75rem)}
p{text-wrap:pretty}

::selection{background:var(--bears-yellow);color:var(--bears-black)}
.bears-dark ::selection{background:var(--bears-yellow);color:var(--bears-black)}

/* Scrollbar tematizada — superficie del navegador que también es del diseño */
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--bears-black) var(--paper-2);scrollbar-width:thin}
}

section{padding:var(--section-y) var(--gutter);scroll-margin-top:var(--header-h)}

/* ---------------------------------------------------------------------------
   Foco: anillo de dos tonos. Ningún color único contrasta contra las seis
   superficies del sitio, así que se combinan negro + halo amarillo — siempre
   uno de los dos supera 3:1 contra el fondo. Reemplaza al anillo amarillo
   que quedaba en 1.55:1 sobre las secciones claras.
   --------------------------------------------------------------------------- */
:focus-visible{
  outline:3px solid var(--bears-black);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--bears-yellow);
  border-radius:2px;
}
.bears-dark :focus-visible{outline-color:var(--bears-white)}

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */
.bears-btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--bears-yellow);color:var(--bears-black);border:2px solid var(--bears-yellow);
  padding:1.1em 2.2em;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
/* Flecha dibujada (mask SVG), no el glifo Unicode → que dependía de la
   cobertura de Space Grotesk y caía a una fuente del sistema. */
.bears-btn::after{
  content:'';width:1em;height:1em;flex:none;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform var(--dur) var(--ease-out);
}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
/* Antes el hover pasaba a fondo transparente: sobre las secciones claras eso
   dejaba amarillo sobre blanco (1.55:1) y el botón desaparecía — incluido el
   submit de Contacto. Ahora invierte a negro (10.04:1 en ambos estados). */
.bears-btn:hover{background:var(--bears-black);color:var(--bears-yellow);border-color:var(--bears-black);transform:translateY(-2px)}
.bears-btn:hover::after{transform:translateX(5px)}
.bears-btn:active{transform:translateY(0)}
/* Sobre negro sí puede vaciarse: amarillo sobre negro es 10:1. */
.bears-dark .bears-btn:hover,.bears-hero .bears-btn:hover{background:transparent;color:var(--bears-yellow);border-color:var(--bears-yellow)}
.bears-btn--ghost{background:transparent;color:var(--bears-white);border-color:var(--bears-white)}
.bears-dark .bears-btn--ghost:hover,.bears-hero .bears-btn--ghost:hover{background:var(--bears-white);color:var(--bears-black);border-color:var(--bears-white)}
.bears-btn--back{flex-direction:row-reverse}
.bears-btn--back::after{transform:scaleX(-1)}
.bears-btn--back:hover::after{transform:scaleX(-1) translateX(5px)}

/* ---------------------------------------------------------------------------
   Píldoras: UNA base (.pill) con dos usos. Antes .sticker y .chip eran dos
   implementaciones del mismo objeto con medidas ligeramente distintas.
   --------------------------------------------------------------------------- */
.bears-pill{
  display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.05em;padding:.5em 1.1em;border-radius:999px;white-space:nowrap;
  background:var(--bears-yellow);color:var(--bears-black);
}
/* Texto negro sobre el naranja de marca: 5.06:1. En blanco quedaba en 3.08:1,
   por debajo de AA para el cuerpo de 12px de la píldora. */
.bears-pill--marca{background:var(--marca);color:var(--bears-black)}
.bears-pill--digital{background:var(--digital);color:var(--bears-white)}
.bears-pill--contenido{background:var(--contenido);color:var(--bears-black)}
.bears-pill--purple-ink{background:var(--purple-ink);color:var(--bears-white)}
.bears-pill--dark{background:var(--bears-black);color:var(--bears-white)}
.bears-pill--light{background:var(--bears-white);color:var(--bears-black)}
/* .pill--outline retirado: el eyebrow del hero vuelve a la base amarilla, que
   da 10.04:1 frente al 1.55:1 efectivo del contorno sobre foto. */
.bears-pill--tilt{transform:rotate(-3deg)}
/* Chip = misma píldora, posicionada sobre una imagen. */
.bears-chip{position:absolute;z-index:2;box-shadow:0 8px 18px rgba(0,0,0,.28)}

/* ---------------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------------- */
/* backdrop-filter en `header` crearía containing block para descendientes
   position:fixed (spec CSS); por eso el blur vive en el pseudo-elemento. */
/* Altura del header: el logotipo se sentía apretado contra los bordes. */
/* La navegación de Norto la pinta el plugin y no se puede interceptar por
   plantilla, así que se retira por CSS. display:none la saca también del árbol
   de accesibilidad, así que no quedan dos landmarks de navegación duplicados. */
.navigation,
.navigation-mobile,
.navigation-type-2{display:none}
header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem var(--gutter);background:transparent;isolation:isolate;gap:1rem}
header::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(27,29,26,.98);backdrop-filter:blur(10px)}
header .bears-logo{flex:none;line-height:0}
header img{height:46px;width:auto}
nav{display:flex;gap:2rem;align-items:center}
nav a{color:var(--bears-white);text-decoration:none;font-weight:600;font-family:var(--display);
  text-transform:uppercase;font-size:.9rem;position:relative;transition:color var(--dur-fast) var(--ease)}
nav a:not(.bears-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--bears-yellow);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out)}
nav a:not(.bears-cta):hover::after{transform:scaleX(1)}
/* "Estás aquí" ahora se distingue del hover: subrayado permanente, no solo color. */
nav a[aria-current]:not(.bears-cta)::after{transform:scaleX(1);background:var(--bears-white)}
nav a:hover{color:var(--bears-yellow)}
nav a.bears-cta{background:var(--bears-yellow);color:var(--bears-black);padding:.7em 1.4em;min-height:44px;display:inline-flex;align-items:center}
nav a.bears-cta:hover{background:var(--bears-white)}
nav a.bears-cta[aria-current]{box-shadow:inset 0 0 0 2px var(--bears-black)}

.bears-menu-toggle{display:none;background:none;border:2px solid var(--bears-white);color:var(--bears-white);
  width:44px;height:44px;padding:9px;cursor:pointer;flex:none;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.bears-menu-toggle svg{width:100%;height:100%;display:block}
.bears-menu-toggle .bears-icon-close{display:none}
.bears-menu-toggle[aria-expanded="true"] .bears-icon-open{display:none}
.bears-menu-toggle[aria-expanded="true"] .bears-icon-close{display:block}
.bears-menu-toggle:hover{border-color:var(--bears-yellow);color:var(--bears-yellow)}

/* Salto al contenido: primer tab de cada página. */
.bears-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bears-yellow);color:var(--bears-black);
  padding:.9em 1.4em;font-family:var(--display);font-weight:700;text-transform:uppercase;text-decoration:none}
.bears-skip:focus{left:var(--gutter);top:.5rem}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.bears-hero{min-height:60vh;display:flex;flex-direction:column;justify-content:center;position:relative;
  color:var(--bears-white);background:var(--bears-black);isolation:isolate;overflow:hidden}
.bears-hero>*{position:relative;z-index:2}
.bears-hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.55}
/* Scrim: el fondo del hero es editable por el cliente desde Elementor (D-19),
   así que el contraste del texto no puede depender de qué imagen suba. */
.bears-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,29,26,.55),rgba(27,29,26,.85))}
/* Header + hero ocupan exactamente el primer viewport. svh evita el salto de
   las barras del navegador en móvil; vh queda como fallback. Es min-height, no
   height: si el contenido pide más espacio el hero crece en vez de recortarlo. */
.bears-hero--tall{
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
}
.bears-hero p{max-width:34rem;margin:1.5rem 0 2.5rem;font-size:1.15rem}
.bears-hero__lede{max-width:44rem!important}
/* CORRECCIÓN (D-24): `Sello-_SVG.png` NO es un cluster. Es el sello circular
   oficial y aislado —anillo "ESTUDIO BEARS · CREATIVIDAD Y ESTRATEGIA" con la
   cabeza de oso sobre disco amarillo (manual pág. 13-14)—. En escritorio recibe
   una rotación editorial por dirección posterior de Sergio; en tablet y móvil no.
   `height:auto` + `aspect-ratio:1` fijan la proporción aunque cambie el asset;
   `pointer-events:none` evita que bloquee los CTA que tiene cerca. */
.bears-hero .bears-sello{position:absolute;right:var(--gutter);bottom:clamp(2rem,8vh,5rem);
  width:clamp(90px,10vw,140px);height:auto;aspect-ratio:1;pointer-events:none;z-index:3}

/* ---------------------------------------------------------------------------
   Hero de Home — composición de fondo en 4 capas. Solo aplica a .hero--tall,
   que existe únicamente en preview-home.html; el resto de heroes del sitio
   conserva el fondo plano anterior.

     z0  .hero-bg      fotografía monocromática (editable; en Elementor es el
                       fondo nativo de la sección). Lleva el movimiento.
     z1  ::before      textura de concreto, baja opacidad, en multiply.
     z2  ::after       scrim asimétrico: cierra a la izquierda, abre a la derecha.
     z3  contenido     titular, copy, CTA y sello.
   --------------------------------------------------------------------------- */
/* El z-index:0 va explícito aquí: `.hero--tall>*` (más abajo) tiene la misma
   especificidad que `.hero-bg` y, al declararse después, le ganaba y subía la
   foto por encima del scrim. Con `.hero--tall .hero-bg` (0,2,0) queda fijado. */
.bears-hero--tall .bears-hero-bg{opacity:1;object-position:62% 42%;z-index:0}
/* Profundidad muy sutil: 1 → 1.035 en 18s, ida y vuelta. Solo transform, que
   es compositor-friendly y no provoca reflow. */
@media (prefers-reduced-motion:no-preference){
  .bears-hero--tall .bears-hero-bg{animation:hero-depth 18s cubic-bezier(.45,0,.55,1) infinite alternate}
  @keyframes hero-depth{from{transform:scale(1)}to{transform:scale(1.035)}}
}
.bears-hero--tall::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("assets/img/hero-textura.webp") center/cover;opacity:.22;mix-blend-mode:multiply}
/* Scrim asimétrico. El eje horizontal cierra sobre la columna de texto y se
   abre hacia la derecha para que la fotografía siga siendo reconocible; el
   vertical asienta el titular y despega el borde inferior. */
.bears-hero--tall::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(27,29,26,.94) 0%,rgba(27,29,26,.88) 34%,rgba(27,29,26,.62) 62%,rgba(27,29,26,.46) 100%),
    linear-gradient(180deg,rgba(27,29,26,.55) 0%,rgba(27,29,26,.35) 45%,rgba(27,29,26,.78) 100%)}
/* z3 = acentos gráficos decorativos · z4 = contenido y enlaces interactivos.
   El indicador de scroll y los CTA quedan siempre por encima de los stickers. */
.bears-hero--tall>*{z-index:4}
.bears-hero--tall .bears-sticker-x,.bears-hero--tall .bears-sello{z-index:3}

/* D-38: cinco piezas originales; KEEP SCROLLING queda únicamente como cue.
   Excepción de Sergio: collage z3 detrás de la cinta/H1 z4. Resto del sitio
   conserva la prohibición de solapar texto. Hero pendiente de revisión visual. */
.bears-sticker-x{position:absolute;pointer-events:none;line-height:0;z-index:3}
.bears-sticker-x img{display:block;width:100%;height:auto}
/* Solape contenido en escritorio; posiciones independientes ≤1200px. */
.bears-sticker-x--cluster{top:calc(50% - 22rem);left:calc(var(--gutter) + clamp(25rem,8vw + 19rem,25.7rem));width:clamp(300px,22vw,460px)}
/* Entrada breve, una sola vez. Sin drift ni animaciones por pieza. */
@media (prefers-reduced-motion:no-preference){
  .bears-sticker-x--cluster{animation:sticker-in .56s var(--ease-out) both}
  @keyframes sticker-in{
    from{opacity:0;transform:translateY(-10px) scale(.94)}
    to{opacity:1;transform:none}
  }
}

/* ---- Indicador de scroll: sticker oficial KEEP SCROLLING (verde) ----
   Sigue siendo un <a> real: clic, teclado, foco visible y 44×44 mínimo.
   El SVG es decorativo; el nombre accesible va en español por aria-label. */
.bears-scroll-cue{position:absolute;left:50%;bottom:clamp(1rem,2.5vh,1.75rem);transform:translateX(-50%) rotate(-12deg);
  z-index:4;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.4rem;text-decoration:none;
  transition:transform var(--dur) var(--ease-out)}
.bears-scroll-cue img{display:block;width:clamp(150px,15vw,205px);height:auto}
.bears-scroll-cue:hover{transform:translateX(-50%) rotate(-12deg) translateY(3px)}
/* Salto hasta el primer scroll; detenido también durante hover y foco. */
@media (prefers-reduced-motion:no-preference){
  .bears-scroll-cue.is-bouncing:not(:hover):not(:focus-visible) img{animation:cue-nudge 1.6s var(--ease) infinite}
  @keyframes cue-nudge{0%,45%,100%{transform:translateY(0)}65%{transform:translateY(8px)}82%{transform:translateY(-2px)}}
}


/* ---------------------------------------------------------------------------
   Titular del Home como cintas apiladas. La sombra es real (offset + blur): la
   anterior era `6px 6px 0` sobre negro, un cambio de luminancia del 2%.
   El amarillo carga la segunda línea, que es donde está la promesa memorable;
   la primera queda en negro con un filo amarillo fino que la enlaza sin robarle
   peso (12_WEB_VISUAL_IDENTITY.md §1, nivel 3).
   --------------------------------------------------------------------------- */
.bears-hero-stack{margin:1.5rem 0;width:fit-content;max-width:100%}
.bears-hero-ribbon{display:block;width:fit-content;max-width:100%;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2.4rem,7.5vw,5.5rem);line-height:1.02;
  padding:.14em .4em;position:relative;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.bears-hero-ribbon--1{background:var(--bears-black);color:var(--bears-white);transform:rotate(-2deg);z-index:1;
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 2px var(--bears-yellow)}
.bears-hero-ribbon--2{background:var(--bears-yellow);color:var(--bears-black);transform:rotate(1.5deg);
  margin-top:-.12em;z-index:2;box-shadow:0 16px 38px rgba(0,0,0,.5)}

.bears-breadcrumb{font-family:var(--display);text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;
  margin-bottom:1rem;color:var(--bears-yellow)}
.bears-breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease)}
.bears-breadcrumb a:hover{border-bottom-color:currentColor}

/* ---------------------------------------------------------------------------
   Superficies y grillas
   --------------------------------------------------------------------------- */
.bears-dark{background:var(--bears-black);color:var(--bears-white)}
.bears-dark p{color:var(--mute-on-dark)}
.bears-dark h1,.bears-dark h2,.bears-dark h3{color:var(--bears-white)}
.bears-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.bears-grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}

/* ---------------------------------------------------------------------------
   Servicios — seis capacidades, no tres categorías. La referencia Norto es el
   Type 4: información directa con icono y texto; se conserva esa claridad,
   pero la página BEARS gana un índice que lleva a seis bloques de trabajo.
   Los discos PNG son iconos funcionales oficiales ya asignados a cada servicio,
   no stickers ni decoración flotante.
   --------------------------------------------------------------------------- */
.bears-services-index{background:var(--paper-2);padding-top:clamp(6.5rem,calc(10vw + 2.5rem),10.5rem);padding-bottom:clamp(2.5rem,3vw,3.5rem)}
.bears-services-index__intro{position:relative;padding-right:clamp(15rem,23vw,25rem);margin-bottom:clamp(2rem,4vw,3.5rem)}
.bears-services-index__eyebrow{margin-bottom:1rem}
.bears-services-index__intro h1{max-width:12ch}
.bears-services-index__accent{
  display:inline-block;
  background:var(--marca);
  color:var(--bears-black);
  padding:.06em .3em .12em;
  border-radius:0;
  transform:rotate(-2deg);
}
.bears-services-index__lede{max-width:44rem;margin-top:1rem}
.bears-services-index__sticker{position:absolute;top:clamp(-7.5rem,-8.4vw,-6.5rem);right:50px;width:clamp(19.5rem,27vw,25.5rem);height:auto;transform:rotate(-5deg);pointer-events:none}
.bears-services-index__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.bears-services-index__item{--service-accent:var(--bears-orange);display:grid;grid-template-columns:auto 72px minmax(0,1fr) 1rem;
  align-items:center;gap:1rem;min-height:8.5rem;padding:1rem 0;border-top:2px solid var(--bears-black);color:var(--bears-black);text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),padding var(--dur) var(--ease-out)}
.bears-services-index__item--orange{--service-accent:var(--bears-orange)}
.bears-services-index__item--blue{--service-accent:var(--bears-blue)}
.bears-services-index__item--green{--service-accent:var(--bears-green)}
.bears-services-index__item>span{align-self:start;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--service-accent)}
.bears-services-index__item img{width:72px;height:72px;object-fit:contain}
.bears-services-index__item strong{font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.05;text-transform:uppercase}
.bears-services-index__item i{width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform var(--dur) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .bears-services-index__item:hover{background:var(--bears-black);color:var(--bears-white);padding-inline:1rem}
  .bears-services-index__item:hover>span{color:var(--service-accent)}
  .bears-services-index__item:hover i{transform:translateX(5px)}
}

.bears-service-detail{--service-accent:var(--bears-orange);display:grid;grid-template-columns:minmax(0,1.17fr) minmax(0,.83fr);
  align-items:center;gap:clamp(2rem,7vw,8rem);padding-block:clamp(3.5rem,5.75vw,5.5rem);background:var(--bears-white)}
.bears-service-detail--orange{--service-accent:var(--bears-orange)}
.bears-service-detail--blue{--service-accent:var(--bears-blue)}
.bears-service-detail--green{--service-accent:var(--bears-green)}
.bears-service-detail--reverse{background:var(--bears-black);color:var(--bears-white)}
.bears-service-detail--reverse p{color:var(--mute-on-dark)}
.bears-service-detail__copy{max-width:34rem}
.bears-service-detail__number{display:block;margin:0 0 1rem;font:700 clamp(3rem,5vw,5.25rem)/.8 var(--display);letter-spacing:-.04em;color:var(--service-accent)}
.bears-service-detail__copy h2{margin-bottom:1rem}
.bears-service-detail__copy p{max-width:34rem;margin-bottom:2rem}
.bears-service-detail__media{margin:0;overflow:hidden;background:var(--ink-2);aspect-ratio:3/2}
.bears-service-detail__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.bears-service-detail__media:hover img{transform:scale(1.025)}}
@media(min-width:701px){
  .bears-service-detail--reverse{grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr)}
  .bears-service-detail--reverse .bears-service-detail__copy{order:2}
  .bears-service-detail--reverse .bears-service-detail__media{order:1}
}
@media(max-width:1024px){.bears-services-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bears-service-detail{gap:clamp(1.5rem,5vw,3rem)}}
@media(min-width:701px) and (max-width:900px){
  .bears-services-index__sticker{top:-2.75rem;right:clamp(1.5rem,4vw,3rem);width:clamp(17rem,40vw,19.5rem)}
}
@media(max-width:700px){
  .bears-services-index__grid,.bears-service-detail{grid-template-columns:minmax(0,1fr)}
  .bears-services-index{padding-top:3rem}
  .bears-services-index__intro{padding-right:0;margin-bottom:1.25rem}
  .bears-services-index__sticker{display:none}
  .bears-services-index__grid{gap:.5rem}
  .bears-services-index__item{grid-template-columns:auto 48px minmax(0,1fr) 1rem;min-height:5.625rem;gap:.625rem;padding:.625rem 0}
  .bears-services-index__item img{width:48px;height:48px}
  .bears-service-detail{gap:2rem;padding-block:3.5rem}
}

/* ---------------------------------------------------------------------------
   Iconos FUNCIONALES de marca — discos amarillos. Etiquetan un concepto
   ("Cómo pensamos", listas de Servicios). No son decoración: ver
   12_WEB_VISUAL_IDENTITY.md §2.
   --------------------------------------------------------------------------- */
.bears-bicon{display:block;width:var(--bicon-size,64px);height:var(--bicon-size,64px);flex:none}
.bears-bicon img{width:100%;height:100%;display:block}

/* ---------------------------------------------------------------------------
   Portfolio / work cards
   --------------------------------------------------------------------------- */
.bears-card{position:relative;display:block;text-decoration:none;color:inherit;background:transparent}
/* `display:block` es obligatorio: .card-media es un <span>, y en un elemento
   inline `aspect-ratio` no aplica y el hijo absoluto (.card-go) se posicionaba
   fuera de la tarjeta, cayendo encima del botón de abajo. */
.bears-card-media{display:block;position:relative;overflow:hidden;background:var(--ink-2);aspect-ratio:4/3}
.bears-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out)}
.bears-card:hover .bears-card-media img{transform:scale(1.05)}
/* Antes el nombre del proyecto vivía en un figcaption con opacity:0 y solo
   aparecía en hover: en desktop la grilla era tres imágenes anónimas. */
.bears-card-meta{padding:1rem 0 0;display:flex;flex-direction:column;gap:.15rem}
.bears-card-meta .bears-cat{font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:var(--marca-ink)}
.bears-dark .bears-card-meta .bears-cat{color:var(--bears-yellow)}
.bears-card-meta .bears-name{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:1.15rem}
.bears-card-go{position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5em;
  background:var(--bears-yellow);color:var(--bears-black);font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;padding:.7em 1.1em;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.bears-card-go::after{content:'';width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.bears-card:hover .bears-card-go,.bears-card:focus-visible .bears-card-go{opacity:1;transform:none}

/* Portfolio: Visual Portfolio tiles `3|1,1|1,1|1,1|2,1|1,1|1,1|1,1|1`.
   El primer valor son columnas; cada par es ancho relativo y ratio de alto.
   `2,1` resulta en un tile cuadrado 2×2: CSS Grid reproduce el ciclo cada 7
   proyectos, con recorte controlado y dimensiones intrínsecas en el HTML. */
.bears-portfolio-intro{position:relative;overflow:clip;background:var(--paper-2);
  padding-block:clamp(4rem,7vw,7rem)}
.bears-portfolio-intro__content{position:relative;z-index:1;max-width:44rem}
.bears-portfolio-intro .bears-pill{margin-bottom:1rem}
.bears-portfolio-intro h1{max-width:13ch;margin:0}
.bears-portfolio-intro__accent{
  display:inline-block;
  background:var(--contenido);
  color:var(--bears-black);
  padding:.06em .3em .12em;
  border-radius:0;
  transform:rotate(-2deg);
}
.bears-portfolio-intro p{max-width:44rem;margin:1rem 0 0;color:var(--mute-on-light)}
.bears-portfolio-intro__sticker{position:absolute;right:clamp(2rem,8vw,9rem);top:50%;width:clamp(10rem,15vw,14rem);height:auto;transform:translateY(-50%) rotate(5deg);pointer-events:none}
/* Contacto: contraparte Azul Digital de los intros de Servicios y Portfolio. */
.bears-contact-intro{position:relative;background:transparent;padding-block:clamp(3rem,6.5vw,6.5rem)}
.bears-contact-intro__content{position:relative;z-index:1;max-width:44rem}
.bears-contact-intro .bears-pill{margin-bottom:1rem}
.bears-contact-intro h1{max-width:13ch;margin:0}
.bears-contact-intro__accent{display:inline-block;background:var(--digital);color:var(--bears-white);padding:.06em .3em .12em;border-radius:0;transform:rotate(-2deg)}
.bears-contact-intro p{max-width:44rem;margin:1rem 0 0;color:var(--mute-on-light)}
.bears-contact-intro__sticker{position:absolute;right:clamp(1rem,4vw,4rem);top:50%;width:clamp(13rem,30vw,26rem);height:auto;transform:translateY(-50%);pointer-events:none}
/* Páginas legales: la variante institucional de los mini heroes claros.
   Magic Purple ink identifica el contenido legal sin competir con colores de servicio. */
.bears-legal-intro{position:relative;overflow:clip;background:var(--paper-2);
  padding-block:clamp(3rem,6vw,6rem)}
.bears-legal-intro__content{position:relative;z-index:1;max-width:44rem}
.bears-legal-intro .bears-pill{margin-bottom:1rem}
.bears-legal-intro h1{max-width:14ch;margin:0}
.bears-legal-intro__accent{display:inline-block;background:var(--purple-ink);
  color:var(--bears-white);padding:.06em .3em .12em;border-radius:0;
  transform:rotate(-2deg)}
.bears-legal-intro p{max-width:44rem;margin:1rem 0 0;color:var(--mute-on-light)}
.bears-legal-intro__sticker{position:absolute;right:clamp(2rem,7vw,7rem);top:50%;
  width:clamp(9rem,14vw,13rem);height:auto;
  transform:translateY(-50%) rotate(4deg);pointer-events:none}
.bears-legal-updated{margin-top:2.5rem;padding-top:1.25rem;
  border-top:2px solid var(--bears-black);font-family:var(--display);
  text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;
  color:var(--mute-on-light)}
/* La 404 conserva un cierre oscuro: el sello se ancla al borde inferior
   derecho en escritorio y entra al flujo sólo cuando el espacio ya no alcanza. */
/* Reglas base de la 404 y de la prosa legal. Estaban en un <style> interno de
   preview-404.html y preview-privacidad.html y se quedaron fuera de la fusión
   de la Fase 1, así que estas dos páginas se publicaban sin maquetar. */
.bears-e404{min-height:78vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:var(--bears-black);color:var(--bears-white);overflow:hidden}
.bears-e404 h1{font-size:clamp(2.5rem,8vw,6rem);max-width:16ch;margin-bottom:1.5rem}
/* Morado de marca aclarado a 6.76:1 sobre negro. El morado vive solo aquí (D-22). */
.bears-e404 .bears-code{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:.85rem;
  color:#c489ff;margin-bottom:1.25rem}
.bears-e404 p{color:var(--mute-on-dark);max-width:38ch;margin-bottom:2.5rem}
.bears-e404 .bears-actions{display:flex;gap:1rem;flex-wrap:wrap}
.bears-prose{max-width:68ch}
.bears-prose h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:2.5rem 0 .75rem}
.bears-prose p{margin-bottom:1rem}
.bears-e404{position:relative}
.bears-e404 .bears-sello{position:absolute;z-index:3;right:var(--gutter);
  bottom:clamp(2rem,8vh,5rem);display:block;margin:0;pointer-events:none}
@media (max-width:600px){
  .bears-e404 .bears-sello{position:static;inset:auto;margin:2.25rem 0 0 auto;
    width:fit-content}
}
/* Entre tablet y el corte móvil, la entradilla reserva el corredor visual del
   sticker para que ambos elementos conserven rectángulos independientes. */
@media (min-width:801px) and (max-width:1023px){
  .bears-legal-intro p{max-width:min(44rem,calc(100% - 10.5rem))}
}
.bears-contact-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(2rem,5vw,5rem);align-items:start;padding-top:1.875rem}
.bears-contact-form{min-width:0}
.bears-contact-form__title{font-size:clamp(1.5rem,2.5vw,2rem);margin:0 0 1.25rem}
.bears-contact-form__submit{margin-top:1.5rem}.bears-contact-form__recaptcha{margin-top:.6rem}
/* El margen compensa el excedente visual de un cuadrado girado 6°; al cambiar
   el clamp de escala se ajusta automáticamente. */
.bears-contact-aside{--seal-size:clamp(15rem,34vw,30rem);min-width:0;align-self:start}
.bears-contact-aside__seal{display:block;width:var(--seal-size);height:auto;margin:calc(var(--seal-size) * .0495) 0 0 calc(var(--seal-size) * .0495);transform:rotate(-6deg);transform-origin:center center}
.grecaptcha-badge{visibility:hidden}
@media (max-width:900px){.bears-contact-body{grid-template-columns:minmax(0,1fr);row-gap:3rem}.bears-contact-aside{display:none}}
@media (max-width:800px){.bears-contact-intro__sticker,.bears-legal-intro__sticker{display:none}}
.bears-portfolio-listing{padding-top:clamp(2rem,3.9vw,3.5rem)}
.bears-portfolio-filters{display:flex;gap:.75rem;margin-bottom:2.5rem;flex-wrap:wrap}
/* ---------------------------------------------------------------------------
   Ficha de proyecto.
   Todo el color de la página lo gobierna UNA clase en <main>:
   .project--marca | .project--digital | .project--contenido.
   En WordPress esa clase saldrá del campo "Servicio" del proyecto, así que el
   editor no elige colores: elige servicio, y el color es consecuencia.
   Contrastes medidos del par fondo/texto de cada pill:
     --marca #ff4b00 sobre negro ....... 5.06:1
     --digital #3060de sobre blanco .... 5.05:1
     --contenido #5dc95f sobre negro ... 8.07:1
   --------------------------------------------------------------------------- */
.bears-project--marca{--project-accent:var(--marca);--project-accent-ink:var(--bears-black)}
.bears-project--digital{--project-accent:var(--digital);--project-accent-ink:var(--bears-white)}
.bears-project--contenido{--project-accent:var(--contenido);--project-accent-ink:var(--bears-black)}

.bears-project-intro{position:relative;overflow:clip;background:var(--paper-2);
  padding-top:clamp(2.5rem,4vw,4rem);padding-bottom:clamp(3.5rem,6vw,6rem)}
/* Dos columnas y dos filas. La fila 1 sólo la ocupa la cabecera (sticker +
   pill); en la fila 2 conviven el título con la descripción y la ficha de
   características, de modo que el borde superior de la ficha cae exactamente
   a la altura del borde superior del <h1>. */
.bears-project-intro__inner{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(2rem,5vw,5rem);align-items:start}
.bears-project-intro__head{grid-column:1;grid-row:1;margin-bottom:1.25rem}
.bears-project-intro__main{grid-column:1;grid-row:2;min-width:0}
.bears-project-intro__spec{grid-column:2;grid-row:2;min-width:0;margin-top:.75rem}
.bears-project-intro__sticker{display:block;width:clamp(9rem,13vw,12.5rem);height:auto;
  margin-bottom:.75rem;transform:rotate(-4deg);transform-origin:left center;pointer-events:none}
.bears-project-intro .bears-pill{background:var(--project-accent);color:var(--project-accent-ink)}
.bears-project-intro h1{margin:.75rem 0 0;max-width:16ch}
.bears-project-intro__desc{margin:1.25rem 0 0;color:var(--mute-on-light);max-width:60ch}
.bears-project-intro__desc p{margin:0 0 1rem}
.bears-project-intro__desc p:last-child{margin-bottom:0}
/* Colapso: sólo la descripción. La ficha de características no se mueve. */
.bears-project-intro__desc[data-collapsed="true"]{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.bears-project-intro__more{display:inline-flex;align-items:center;min-height:24px;margin-top:1rem;background:transparent;border:0;padding:0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.78rem;
  letter-spacing:.06em;color:var(--bears-black);cursor:pointer;
  border-bottom:2px solid var(--project-accent);line-height:1.6}
.bears-project-intro__more:hover{color:var(--project-accent-ink);border-bottom-color:var(--bears-black)}
.bears-project-intro__more:focus-visible{outline:3px solid var(--bears-black);outline-offset:3px}
/* El enlace externo comparte columna con la ficha de características, así que
   necesita posición explícita en el grid: como hermano suelto caería en la
   columna del título. Se trata como enlace de texto y no como botón, para no
   competir con el CTA del cierre. */
.bears-project-intro__link{grid-column:2;grid-row:3;margin:1.25rem 0 0;min-width:0}
.bears-project-intro__link a{display:inline-flex;align-items:center;gap:.4em;
  min-height:24px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.06em;color:var(--bears-black);text-decoration:none;
  border-bottom:2px solid var(--project-accent);line-height:1.6}
.bears-project-intro__link a:hover{border-bottom-color:var(--bears-black)}
.bears-project-intro__link a:focus-visible{outline:3px solid var(--bears-black);outline-offset:3px}

.bears-project-gallery{padding-top:clamp(2.5rem,5vw,4.5rem)}
.bears-project-gallery__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
/* La proporción vive en la figura, no en el <img>. Los atributos HTML
   width/height del <img> son presentation hints de las propiedades CSS
   width y height; si sólo se sobreescribe el width, el height explícito
   anula cualquier aspect-ratio declarado sobre el propio <img>. */
.bears-project-shot{position:relative;margin:0;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.bears-project-shot img{display:block;width:100%;height:100%;object-fit:cover}
/* Recuento impar: la última pieza ocupa las dos columnas. Pasa a 16/9 porque a
   doble de ancho la relación 4:3 se comería la pantalla completa. */
.bears-project-shot:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}
.bears-project-shot__zoom{display:block;width:100%;height:100%;margin:0;padding:0;border:0;
  background:none;cursor:zoom-in;overflow:hidden}
.bears-project-shot__zoom:focus-visible{outline:3px solid var(--bears-black);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .bears-project-shot__zoom img{transition:transform var(--dur-slow) var(--ease-out)}
  .bears-project-shot__zoom:hover img{transform:scale(1.025)}
}
.bears-lightbox{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
  border:0;padding:0;background:transparent;overflow:hidden}
.bears-lightbox:not([open]){display:none}
.bears-lightbox[open]{display:grid;place-items:center}
.bears-lightbox::backdrop{background:rgba(27,29,26,.82)}
.bears-lightbox__figure{position:relative;margin:0;line-height:0}
.bears-lightbox__img{display:block;width:auto;height:auto;max-width:min(92vw,1400px);max-height:88dvh;object-fit:contain}
.bears-lightbox__close{position:absolute;top:.75rem;right:.75rem;z-index:3;width:44px;height:44px;padding:10px;border:0;border-radius:50%;cursor:pointer;background:var(--bears-black);color:var(--bears-white);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.bears-lightbox__close svg{display:block;width:100%;height:100%}
.bears-lightbox__close:hover{background:var(--bears-yellow);color:var(--bears-black)}
.bears-lightbox__close:focus-visible{outline:3px solid var(--bears-yellow);outline-offset:3px}
body.bears-lightbox-open .bears-cursor{display:none}
body.bears-lightbox-open,body.bears-lightbox-open *,
body.bears-cursor-active.bears-lightbox-open,body.bears-cursor-active.bears-lightbox-open *{cursor:auto}
body.bears-lightbox-open .bears-lightbox__close,
body.bears-cursor-active.bears-lightbox-open .bears-lightbox__close{cursor:pointer}
@media (prefers-reduced-motion:no-preference){.bears-lightbox[open] .bears-lightbox__figure{animation:lightbox-in var(--dur) var(--ease-out) both}}
@keyframes lightbox-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.bears-project-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;align-items:center}

@media (max-width:800px){
  .bears-project-gallery__grid{grid-template-columns:minmax(0,1fr)}
  .bears-project-shot:last-child:nth-child(odd){aspect-ratio:4/3}
}
@media (max-width:1024px){
  .bears-project-intro__inner{grid-template-columns:minmax(0,1fr)}
  .bears-project-intro__head{grid-column:1;grid-row:1}
  .bears-project-intro__main{grid-column:1;grid-row:2}
  .bears-project-intro__spec{grid-column:1;grid-row:3;margin-top:2rem}
	.bears-project-intro__link{grid-column:1;grid-row:4;margin-top:1.5rem}
}
@media (max-width:600px){.bears-project-intro__sticker{width:clamp(7rem,26vw,9rem)}}
.bears-portfolio-filters .bears-pill{min-height:44px;border:0;cursor:pointer}
.bears-portfolio-filters .bears-pill[aria-pressed="true"]{background:var(--bears-yellow);color:var(--bears-black)}
.bears-portfolio-filters .bears-pill[data-filter="branding"][aria-pressed="true"],
.bears-portfolio-filters .bears-pill[data-filter="diseno-visual"][aria-pressed="true"]{background:var(--marca);color:var(--bears-black)}
.bears-portfolio-filters .bears-pill[data-filter="desarrollo-web"][aria-pressed="true"],
.bears-portfolio-filters .bears-pill[data-filter="ui-ux"][aria-pressed="true"]{background:var(--digital);color:var(--bears-white)}
.bears-portfolio-filters .bears-pill[data-filter="animacion-3d"][aria-pressed="true"],
.bears-portfolio-filters .bears-pill[data-filter="social-media"][aria-pressed="true"]{background:var(--contenido);color:var(--bears-black)}
.bears-portfolio-pagination{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem)}
.bears-portfolio-pagination .bears-pill{min-width:44px;min-height:44px;padding:.5em .9em;border:0;cursor:pointer}
.bears-portfolio-pagination .bears-pill[aria-current="page"]{background:var(--bears-yellow);color:var(--bears-black)}
.bears-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.bears-portfolio-grid .bears-portfolio-card{display:flex;flex-direction:column}
.bears-portfolio-grid .bears-card-media{aspect-ratio:3 / 2}
.bears-portfolio-grid .bears-card-meta{min-height:4.25rem}
.bears-portfolio-grid .bears-card-media img{object-fit:cover;object-position:var(--portfolio-position,50% 50%)}
.bears-portfolio-card .bears-card-meta .bears-name{display:inline-flex;align-items:center;gap:.45em;transition:color var(--dur) var(--ease)}
.bears-portfolio-card .bears-card-meta .bears-name::after{content:'';width:.62em;height:.62em;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform var(--dur) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.bears-portfolio-card:hover .bears-card-media img{transform:scale(1.025)}.bears-portfolio-card:hover .bears-card-meta .bears-name{color:var(--bears-yellow)}.bears-portfolio-card:hover .bears-card-meta .bears-name::after{transform:translateX(4px)}}
.bears-portfolio-card:focus-visible .bears-card-media img{transform:scale(1.025)}
.bears-portfolio-card:focus-visible .bears-card-meta .bears-name{color:var(--bears-yellow)}
.bears-portfolio-card:focus-visible .bears-card-meta .bears-name::after{transform:translateX(4px)}
.bears-portfolio-card__chip{top:1rem;right:1rem}
.bears-portfolio-card[data-services~="branding"] .bears-portfolio-card__chip,
.bears-portfolio-card[data-services~="diseno-visual"] .bears-portfolio-card__chip{background:var(--marca);color:var(--bears-black)}
.bears-portfolio-card[data-services~="desarrollo-web"] .bears-portfolio-card__chip,
.bears-portfolio-card[data-services~="ui-ux"] .bears-portfolio-card__chip{background:var(--digital);color:var(--bears-white)}
.bears-portfolio-card[data-services~="animacion-3d"] .bears-portfolio-card__chip,
.bears-portfolio-card[data-services~="social-media"] .bears-portfolio-card__chip{background:var(--contenido);color:var(--bears-black)}
@media (max-width:1024px){
  .bears-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){.bears-portfolio-intro__sticker{display:none}}
@media (max-width:600px){.bears-portfolio-grid{grid-template-columns:1fr}.bears-portfolio-grid .bears-card-media{aspect-ratio:2 / 1}.bears-portfolio-filters{gap:.55rem;margin-bottom:2rem}}

/* ---------------------------------------------------------------------------
   "Things we made happen." — SÓLO el avance de portfolio del Home.
   Todo va bajo `#portfolio-preview.work-preview` y usa clases `work-*` propias.
   No reutiliza `.card*`: esas reglas las comparten la página de Portfolio y las
   fichas de proyecto, y este encargo se limita al Home.
   La foto manda. La personalidad viene de la jerarquía, el ritmo y la escala.
   La única pieza sobre cada portada es la pill funcional de categoría que el
   cliente pidió restaurar; no es un sticker expresivo ni decoración libre.
   --------------------------------------------------------------------------- */

/* Cabecera apilada por decisión visual del cliente (D-34): el lede continúa el
   titular en vez de funcionar como nota lateral. */
.bears-work-preview__head{display:block;margin-bottom:clamp(2rem,5vw,3.5rem)}
.bears-work-preview__title{margin:0}
/* Único gesto cromático de la cabecera: la palabra en Bold Yellow. Sin caja,
   sin contorno, sin rotación y sin sticker — es color, no objeto.
   #F5C001 sobre #1B1D1A = 10.04:1. */
.bears-work-preview__accent{color:var(--bears-yellow)}
.bears-work-preview__lede{margin:1rem 0 0;text-align:left;max-width:44rem;color:var(--mute-on-dark)}

/* Avance editorial uniforme: los seis proyectos pesan lo mismo. El archivo de
   Portfolio conserva su propia gramática `tiles`; ésta es sólo la selección
   del Home. */
.bears-work-preview__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);align-items:start}

/* Una relación horizontal 3:2 conserva ritmo editorial y mantiene las seis
   portadas equivalentes; `object-fit:cover` y un encuadre por tarjeta protegen
   el sujeto. */
.bears-work-card{display:block;text-decoration:none;color:inherit}
/* `overflow:hidden` vive SÓLO aquí, en el contenedor de la imagen: si estuviera
   en la tarjeta recortaría el anillo de foco. */
.bears-work-card__media{display:block;position:relative;overflow:hidden;background:var(--ink-2);aspect-ratio:3 / 2}
.bears-work-card__chip{position:absolute;top:1rem;left:1rem;z-index:2;pointer-events:none;
  box-shadow:0 6px 12px rgba(0,0,0,.22)}
.bears-work-card__media img{width:100%;height:100%;object-fit:cover;object-position:var(--work-position,50% 50%);display:block;
  transition:transform var(--dur-slow) var(--ease-out)}

/* Metadata SIEMPRE visible. Descriptor pequeño, nombre dominante y flecha
   mínima al final del nombre — persistente, para que en móvil (sin hover) se
   siga leyendo que cada proyecto es un enlace. */
.bears-work-card__meta{display:flex;flex-direction:column;gap:.2rem;padding-top:.9rem}
.bears-work-card__cat{font-family:var(--display);text-transform:uppercase;font-size:.72rem;
  letter-spacing:.08em;color:var(--mute-on-dark)}
.bears-work-card__name{display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--display);text-transform:uppercase;font-weight:700;
  font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.1;
  transition:color var(--dur) var(--ease)}
/* Flecha dibujada por máscara, no el glifo Unicode. */
.bears-work-card__name::after{content:'';width:.62em;height:.62em;flex:none;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform var(--dur) var(--ease-out)}

/* Interacción contenida: la foto respira, el nombre se enciende y la flecha
   avanza. La tarjeta no se eleva, no gira y no proyecta sombra. */
@media (hover:hover) and (pointer:fine){
  .bears-work-card:hover .bears-work-card__media img{transform:scale(1.025)}
}
.bears-work-card:focus-visible .bears-work-card__media img{transform:scale(1.025)}
.bears-work-card:hover .bears-work-card__name,
.bears-work-card:focus-visible .bears-work-card__name{color:var(--bears-yellow)}
.bears-work-card:hover .bears-work-card__name::after,
.bears-work-card:focus-visible .bears-work-card__name::after{transform:translateX(4px)}

/* CTA a la derecha en escritorio, a 48px del proyecto que baja más (la fila de
   la grilla termina en la tarjeta más alta, que es Candela por ser 1:1). */
.bears-work-preview__cta{display:flex;justify-content:flex-start;margin-top:48px}

@media(max-width:1024px){
  .bears-work-preview__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
}
@media(max-width:600px){
  .bears-work-preview__grid{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .bears-work-card__media{aspect-ratio:2 / 1}
  .bears-work-preview__cta{justify-content:stretch;margin-top:2.5rem}
  .bears-work-preview__cta .bears-btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------------------
   Sobre BEARS — incluye los seis servicios (la sección "Lo que hacemos" se
   fusionó aquí: eran dos bloques consecutivos diciendo lo mismo).
   Altura tomada de la referencia: en el demo de Norto el bloque "About Digital
   Agency" mide 670px de contenido (770 con padding).
   --------------------------------------------------------------------------- */
.bears-about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.bears-about-visual{position:relative;min-height:0}
.bears-about-visual img{width:100%;height:100%;min-height:420px;max-height:670px;display:block;object-fit:cover}
.bears-about-copy{display:flex;flex-direction:column;justify-content:center}
.bears-about-copy>p{max-width:34rem;margin:1.25rem 0 2rem}
.bears-about-copy>.bears-about-copy__lede{max-width:44rem}

/* Padding de la sección: 60px arriba y abajo, sólo aquí. `padding-block` toca
   exclusivamente el eje vertical, así que los laterales siguen viniendo del
   `padding` corto de `section` (`var(--gutter)`) y no se tocan. El selector de
   ID gana por especificidad (1,0,0 contra 0,0,1) sin depender del orden.
   `--section-y` sigue intacto: ninguna otra sección cambia. */
#sobre-bears{padding-block:60px}

/* --- Título editorial -------------------------------------------------------
   Un solo <h2>, copy idéntico, partido en dos spans. La segunda frase va en
   Estrategic White sobre un bloque Magic Purple.
   Contraste #F5F5F5 sobre #A43BFF = 4.14:1. Es texto grande por definición
   (Space Grotesk 700 a 32-56px, muy por encima del umbral de 18.66px en
   negrita), así que el requisito aplicable es AA Large 3:1 y lo pasa. NO pasa
   el 4.5:1 de texto normal: este tratamiento no se puede reutilizar en cuerpo
   de texto ni en titulares pequeños.

   SIN ROTACIÓN, y es una limitación real, no una omisión. `transform` no
   aplica a cajas inline no reemplazadas, y `box-decoration-break:clone` sólo
   hace algo cuando la caja ES inline y se fragmenta. Se probó la alternativa
   `inline-block` + `rotate(-1.2deg)`: como la frase no entra en una línea ni
   siquiera a 1440px (necesita más de los 717px de la columna), el inline-block
   se estira al ancho disponible y el resultado es un panel morado macizo con
   media caja vacía a la derecha — una losa, exactamente lo contrario de la
   pieza editorial pedida. Medido, no supuesto.
   Se conserva entonces el comportamiento correcto: una cinta morada por línea,
   ajustada al texto, igual que las cintas del hero. El carácter editorial lo
   dan el radio cero, el padding asimétrico y la sombra dura desplazada.
   En ningún caso hay `<br>`: los saltos los decide el navegador. */
.bears-about-title{margin:0}
/* La frase principal ocupa su propia línea para que la cinta morada arranque
   limpia. Sin esto, `text-wrap:balance` dejaba "MARCAS." y un "LAS" morado
   huérfano compartiendo renglón, y la cinta se leía como un recorte suelto.
   Esto NO fija saltos dentro de una frase — que es lo prohibido —: separa las
   dos frases, y cada una sigue envolviendo sola donde el navegador decida. */
.bears-about-title__lead{display:block;color:var(--bears-black)}
.bears-about-title__impact{
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background:var(--bears-purple);
  color:var(--bears-white);
  /* Padding asimétrico y radio cero: es un bloque editorial recortado, no una
     píldora. El desplazamiento óptico compensa el padding izquierdo para que
     la primera letra siga alineada con la frase de arriba. */
  padding:.06em .3em .12em;
  border-radius:0;
  margin-left:-.08em;
  /* Sin sombra dura: con `clone` cada fragmento dibuja la suya, y la de una
     línea asoma como una astilla negra por detrás de la siguiente. El hero sí
     la lleva porque allí cada cinta es un bloque de una sola línea. */
}

/* --- Redes: navegación textual de marca ------------------------------------
   Deja de ser una lista de iconos y pasa a ser una nav con nombres legibles.
   El `@` es el glifo funcional de la marca sobre disco Bold Yellow: no existe
   como asset en `icons/` (los 14 exportados son otros), así que se construye
   con la tipografía de marca en lugar de inventar un archivo. Es decorativo y
   `aria-hidden`, de modo que su 1.55:1 contra el fondo claro no aplica a
   ningún requisito de contraste — no transporta información.
   Las rotaciones alternan ±1°, el máximo autorizado: se leen como piezas
   pegadas a mano y no desalinean la fila. */
.bears-about-social{display:flex;align-items:center;gap:.55rem .6rem;flex-wrap:wrap;
  padding:0;margin:0 0 2.25rem;
  font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.02em}
.bears-about-social__label{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--bears-yellow);color:var(--bears-black);
  font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1;
  transform:rotate(-3deg);
}
.bears-about-social a{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:0 .85rem;
  color:var(--bears-black);text-decoration:none;font-weight:700;
  background:transparent;border:2px solid var(--bears-black);border-radius:0;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.bears-about-social a:nth-of-type(odd){transform:rotate(-1deg)}
.bears-about-social a:nth-of-type(even){transform:rotate(1deg)}
.bears-about-social a:hover,
.bears-about-social a:focus-visible{background:var(--bears-black);color:var(--bears-yellow)}
@media (prefers-reduced-motion:no-preference){
  .bears-about-social a:hover,
  .bears-about-social a:focus-visible{transform:rotate(0deg) translateY(-2px)}
}

/* Los seis servicios. Conservan el hover que invierte a negro, que es el que
   deja claro que la ficha entera es clicable. */
.bears-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem}
.bears-svc-tile{display:block;text-decoration:none;color:inherit;
  border-top:2px solid var(--bears-black);padding:1rem 1rem 1.1rem 0;
  transition:transform var(--dur) var(--ease-out),background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),padding-left var(--dur) var(--ease-out)}
.bears-svc-tile .bears-cat{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:.3rem}
.bears-svc-tile[data-cat="marca"] .bears-cat{color:var(--marca-ink)}
.bears-svc-tile[data-cat="digital"] .bears-cat{color:var(--digital-ink)}
.bears-svc-tile[data-cat="contenido"] .bears-cat{color:var(--contenido-ink)}
.bears-svc-tile h3{font-size:1.05rem;text-transform:uppercase}
@media(hover:hover) and (pointer:fine){
  .bears-svc-tile:hover{transform:translate(6px,-6px) rotate(-1deg);background:var(--bears-black);
    color:var(--bears-white);padding-left:1rem}
  .bears-svc-tile[data-cat="marca"]:hover .bears-cat{color:var(--marca)}
  .bears-svc-tile[data-cat="digital"]:hover .bears-cat{color:#7d9dfa}
  .bears-svc-tile[data-cat="contenido"]:hover .bears-cat{color:var(--contenido)}
}

/* ---------------------------------------------------------------------------
   "How we think" — jerarquía editorial + ruptura Rebelde/Mago (D-36)
   Los discos amarillos son iconos funcionales; el arco morado es el único
   sticker expresivo, extraído del manual (pág. 26), nunca redibujado.
   --------------------------------------------------------------------------- */
.bears-think{overflow:clip}
.bears-think__title{margin:0}
.bears-think__lede{max-width:44rem;margin:1rem 0 0;color:var(--mute-on-dark)}
.bears-think-grid{counter-reset:principle;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2vw,2rem);margin-top:clamp(3.25rem,6vw,5rem);align-items:start}
.bears-think-card{counter-increment:principle;min-width:0;padding:1.5rem 0 2rem;
  border-top:2px solid rgba(245,245,245,.72);position:relative;text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"index icon" "title title" "copy copy";align-items:start;column-gap:1rem}
.bears-think-card::before{content:'0' counter(principle);grid-area:index;
  font:700 clamp(3rem,5vw,5.25rem)/.8 var(--display);letter-spacing:-.04em;color:var(--bears-white)}
.bears-think-card .bears-bicon{grid-area:icon;--bicon-size:clamp(76px,6vw,104px);margin:0;
  transition:transform var(--dur-slow) var(--ease-out)}
.bears-think-card h3{grid-area:title;min-width:0;margin:clamp(1.75rem,3vw,2.75rem) 0 0;
  font-size:clamp(1.7rem,2.6vw,2.75rem);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;color:var(--bears-white);overflow-wrap:normal;word-break:normal;hyphens:none}
.bears-think-card p{grid-area:copy;margin:1rem 0 0;max-width:18rem;font-size:1rem;line-height:1.65;
  color:var(--mute-on-dark)}
/* Rule breakers es el único bloque de color de la sección. El círculo negro
   detrás del icono separa el PNG oficial (disco amarillo) del amarillo base
   sin modificar ni recolorear el asset. */
.bears-think-card--break{margin-top:calc(clamp(-3.675rem,-4.725vw,-2rem) - 2.6rem - clamp(3.25rem,6vw,5rem));padding:clamp(1.5rem,2.4vw,2.5rem);
  background:var(--bears-yellow);border-top:0;color:var(--bears-black)}
.bears-think-card--break::before,.bears-think-card--break h3,.bears-think-card--break p{color:var(--bears-black)}
.bears-think-card--break .bears-bicon{position:relative;z-index:0}
.bears-think-card--break .bears-bicon::before{content:'';position:absolute;inset:clamp(-.45rem,-.55vw,-.35rem);
  border-radius:50%;background:var(--bears-black);z-index:0}
.bears-think-card--break .bears-bicon img{position:relative;z-index:1}
.bears-think-card--break .bears-think-sticker{position:absolute;right:0;top:calc(100% + clamp(1.375rem,2.2vw,2rem));
  width:clamp(9rem,12vw,12.5rem);height:auto;display:block;pointer-events:none;
  transform:rotate(-5deg);z-index:1}
.bears-think-card--break .bears-think-sticker img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .bears-js .bears-think.bears-reveal .bears-think-card{opacity:0;transform:translateY(20px)}
  .bears-js .bears-think.bears-reveal .bears-think-card--break{transform:translateY(20px) rotate(-6deg)}
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card{opacity:1;transform:none;
    transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card--break{transform:rotate(-6deg)}
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card:nth-child(1){transition-delay:120ms}
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card:nth-child(2){transition-delay:190ms}
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card:nth-child(3){transition-delay:260ms}
  .bears-js .bears-think.bears-reveal.is-in .bears-think-card:nth-child(4){transition-delay:330ms}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .bears-think-card:hover .bears-bicon{transform:scale(1.08) rotate(-6deg)}
}
@media(max-width:1024px){
  .bears-think-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bears-think-card--break{margin-top:0;padding-bottom:clamp(8.5rem,19vw,11.5rem)}
  .bears-think-card--break .bears-think-sticker{top:auto;right:clamp(1.25rem,3vw,2rem);bottom:clamp(1.25rem,2.5vw,2rem);
    width:clamp(9rem,22vw,12rem)}
}
@media(max-width:600px){
  .bears-think-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .bears-think-card--break{margin-top:0;padding-bottom:clamp(1.5rem,7vw,2.5rem)}
  .bears-think-card--break .bears-think-sticker{display:none}
}

/* ---------------------------------------------------------------------------
   Bloques de servicio (página Servicios)
   --------------------------------------------------------------------------- */
.bears-svc-block .bears-kicker{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.bears-svc-block .bears-kicker::before{content:'';width:2.5rem;height:2px;background:currentColor}
#marca .bears-kicker{color:var(--marca-ink)}
#digital .bears-kicker{color:#7d9dfa}
#contenido .bears-kicker{color:var(--contenido-ink)}
.bears-svc-block ul{margin:0 0 2rem;padding-left:0;list-style:none}
.bears-svc-block ul li{padding:.65rem 0;border-top:1px solid rgba(27,29,26,.15)}
.bears-dark .bears-svc-block ul li{border-top-color:rgba(245,245,245,.18)}
.bears-img-frame{position:relative;display:block}
.bears-img-frame img{width:100%;display:block}

/* ---------------------------------------------------------------------------
   Fichas de datos. Antes eran un `border-left:4px` naranja — el patrón que el
   detector marca como `side-tab`.
   --------------------------------------------------------------------------- */
.bears-factbox{background:var(--paper-2);padding:1.5rem}
.bears-dark .bears-factbox{background:var(--ink-2)}
.bears-spec{list-style:none;padding:0;margin:0;font-family:var(--display);text-transform:uppercase;font-weight:600}
.bears-spec li{border-top:2px solid var(--bears-black);padding:.85rem 0;display:flex;justify-content:space-between;gap:1rem}
.bears-spec .bears-k{color:var(--mute-on-light);font-weight:400}

/* ---------------------------------------------------------------------------
   Formulario
   --------------------------------------------------------------------------- */
input,select,textarea{font-family:var(--body);border:2px solid var(--bears-black);border-radius:0;
  padding:.9em 1em;width:100%;background:#fff;color:var(--bears-black);font-size:1rem;
  transition:border-color var(--dur-fast) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--marca)}
/* Select con chevron dibujado: era el único control sin diseñar del formulario. */
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1d1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1em;padding-right:3rem}
label{font-weight:600;display:block;margin:1.25rem 0 .4rem;font-family:var(--display);text-transform:uppercase;font-size:.85rem}
.bears-field-hint{font-size:.8rem;color:var(--mute-on-light);margin-top:.4rem}
input:user-invalid,textarea:user-invalid{border-color:var(--marca-ink)}
input:user-invalid+.bears-err,textarea:user-invalid+.bears-err{display:block}
.bears-err{display:none;font-size:.8rem;color:var(--marca-ink);margin-top:.4rem;font-weight:600}
.bears-form-status{display:none;background:var(--contenido);color:var(--bears-black);padding:1.25rem 1.5rem;
  font-family:var(--display);text-transform:uppercase;font-weight:700;margin-bottom:1.5rem}
.bears-form-status.is-on{display:block}

/* ---------------------------------------------------------------------------
   Bloques de cierre
   .cta-block / .btn--dark / .sticker se retiraron 2026-08-28: al fusionar el
   cierre de cada página en .footer-cta dejaron de usarse, y .sticker se unificó
   en .pill.
   El cierre grande ahora ES el CTA (antes: 80px de tipografía inerte, sin link,
   justo después de otro CTA — el pico visual de cada página no se podía clicar).
   --------------------------------------------------------------------------- */
.bears-footer-cta{padding:clamp(4rem,9vw,7rem) var(--gutter);background:var(--bears-black);color:var(--bears-white);text-align:center}
.bears-footer-cta h2{font-size:clamp(2.25rem,6.5vw,4.25rem);margin-bottom:.75rem}
.bears-footer-cta p{color:var(--mute-on-dark);margin:0 auto 2.25rem;max-width:34rem}

/* Biblioteca oficial 2026-09-05: placa completa, sin recreación CSS. */
.bears-so-we-are{background:var(--bears-black);padding:clamp(3.5rem,8vw,7rem) var(--gutter)}
.bears-so-we-are img{display:block;width:min(100%,101.125rem);height:auto;margin-inline:auto}

footer{background:var(--bears-black);color:var(--bears-white);padding:2.5rem var(--gutter) 3rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;
  border-top:1px solid rgba(245,245,245,.12)}
footer img{height:48px;width:auto}
.bears-footer-meta{font-size:.8rem;color:var(--mute-on-dark)}
.bears-footer-meta a{color:inherit}

/* =============================================================================
   SISTEMA DE MOVIMIENTO
   Entrada escalonada por hijo + deriva continua ligada al scroll.
   ============================================================================= */

/* El estado oculto SOLO existe si el JS corrió. Antes `.reveal{opacity:0}` era
   el default del documento: cualquier fallo de JS dejaba en blanco todo lo que
   está debajo del hero, en las cinco páginas. */
.bears-js .bears-reveal>*:not(.bears-reveal-exempt){opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
.bears-js .bears-reveal.is-in>*:not(.bears-reveal-exempt){opacity:1;transform:none}

/* Deriva continua: la columna de imagen se mueve a distinta velocidad que el
   texto durante todo el scroll. Nativo, sin JS, y solo donde haya soporte. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bears-drift{animation:drift linear both;animation-timeline:view();animation-range:entry 10% exit 90%}
    @keyframes drift{from{transform:translateY(28px)}to{transform:translateY(-28px)}}
    .bears-drift--slow{animation-name:drift-slow}
    @keyframes drift-slow{from{transform:translateY(14px)}to{transform:translateY(-14px)}}
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .bears-js .bears-reveal>*:not(.bears-reveal-exempt){opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   Cursor: anillo definido + punto de precisión. El anterior era un punto de
   18px con mix-blend-mode:difference — nunca era el amarillo de marca, no tenía
   punta y suprimía el puntero también sobre los campos del formulario.
   --------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  body.bears-cursor-active,body.bears-cursor-active a,body.bears-cursor-active button,body.bears-cursor-active .bears-card{cursor:none}
  body.bears-cursor-active input,body.bears-cursor-active textarea,body.bears-cursor-active select{cursor:auto}
}
.bears-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);transition:opacity var(--dur-fast) var(--ease)}
.bears-cursor.is-visible{opacity:1}
.bears-cursor__ring{display:block;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--bears-yellow);
  transition:width var(--dur) var(--ease-out),height var(--dur) var(--ease-out),
             background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.bears-cursor__dot{position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;
  background:var(--bears-yellow);transform:translate(-50%,-50%)}
.bears-cursor.is-big .bears-cursor__ring{width:64px;height:64px;background:rgba(245,192,1,.16)}
.bears-cursor.is-dark .bears-cursor__ring{border-color:var(--bears-black)}
.bears-cursor.is-dark .bears-cursor__dot{background:var(--bears-black)}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
/* Tablet horizontal: se reduce y desplaza lo justo para no invadir el H1,
   conservando el conjunto íntegro. */
@media(max-width:1200px){
  .bears-sticker-x--cluster{top:3%;left:auto;right:5%;width:clamp(280px,26vw,380px)}
}
/* Tablet vertical: a la zona superior derecha. */
@media(max-width:1024px){
  .bears-sticker-x--cluster{top:3%;left:auto;right:4%;width:clamp(260px,30vw,340px)}
}
/* Móvil y pantallas estrechas: se oculta completo. Reducirlo más volvería
   ilegibles los seis textos. El hero móvil conserva el cue KEEP SCROLLING y el
   sello como expresiones de marca. */
@media(max-width:760px){
  .bears-sticker-x--cluster{display:none}
}

@media(max-width:900px){
  .bears-grid-3{grid-template-columns:1fr 1fr}
  .bears-grid-2{grid-template-columns:1fr}
  .bears-about-grid{grid-template-columns:1fr}
  .bears-about-visual img{min-height:280px;max-height:420px}
  /* Los bloques de servicio alternan imagen/texto en desktop; al apilarse el
     texto debe ir siempre primero, si no la página muestra un wireframe antes
     de decir de qué sección se trata. */
  .bears-svc-block .bears-media-first{order:2}
  .bears-svc-block .bears-copy-first{order:1}
}
@media(max-width:760px){
  /* Header colapsado: padding .85rem×2 + 44px del toggle = 71.2px.
     `row-gap:0` es obligatorio: `header` declara `gap:1rem` y con `flex-wrap`
     el dropdown de navegación forma una segunda fila (de alto 0 cuando está
     cerrado) que igualmente cobraba los 16px de gap. Sin esto el header medía
     87px reales contra los 71px declarados y `header + hero` sumaba 860px en
     un viewport de 844px: 16px de desbordamiento y el cue de scroll pegado al
     borde inferior. Medido en Chromium a 760/600/390/360/320px. */
  :root{--header-h:71px}
  header{padding:.85rem 1.25rem;flex-wrap:wrap;row-gap:0}
  header img{height:30px}
  .bears-menu-toggle{display:block}
  /* Dropdown EN FLUJO (no fixed): evita calcular a mano dónde termina el header.
     `visibility` + `inert` (JS) sacan los enlaces del orden de tabulación
     mientras el panel está cerrado.
     El selector va acotado a `header nav`: sin acotar, el <nav> del footer de
     las cinco páginas también colapsaba a altura cero y quedaba inalcanzable. */
  header nav{flex-basis:100%;order:3;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bears-black);max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height var(--dur) var(--ease),visibility 0s linear var(--dur)}
  header nav.bears-nav-open{max-height:70vh;overflow-y:auto;visibility:visible;
    border-top:1px solid rgba(245,245,245,.15);transition:max-height var(--dur) var(--ease),visibility 0s}
  header nav a{padding:1.1rem 1.5rem;font-size:1rem;border-bottom:1px solid rgba(245,245,245,.1);min-height:44px}
  header nav a:not(.bears-cta)::after{display:none}
  header nav a.bears-cta{margin:1rem 1.5rem;text-align:center;justify-content:center}
  footer{justify-content:flex-start}
}
@media(max-width:600px){
  .bears-grid-3,.bears-svc-grid{grid-template-columns:1fr}
  .bears-hero-ribbon{font-size:clamp(1.9rem,9vw,3rem)}
  .bears-pill{font-size:.68rem}
  /* Móvil: el sello sale del posicionamiento absoluto y entra en el flujo,
     después de los CTA y alineado a la derecha. Absoluto se superponía a los
     botones en pantallas cortas. Es el último hijo del hero, así que el orden
     del DOM ya es el correcto. */
  .bears-hero .bears-sello{position:static;display:block;width:76px;margin:2.25rem 0 0 auto;inset:auto}
  /* El hero sigue midiendo un viewport completo (no se restaura min-height:auto).
     El padding inferior reserva sitio para el indicador de scroll, que va
     absoluto y centrado, sin cruzarse con el sello (que va a la derecha). */
  .bears-hero--tall{padding-top:3.5rem;padding-bottom:6rem}
  /* El cluster ya se oculta desde 760px. */
  /* Móvil: el texto ocupa todo el ancho, así que el scrim deja de ser
     asimétrico y oscurece parejo. object-position sube y centra para que el
     sujeto siga leyéndose en un recorte mucho más estrecho. No se toca la
     altura: sigue siendo automática por padding. */
  .bears-hero--tall .bears-hero-bg{object-position:56% 32%;opacity:.9}
  .bears-hero--tall::before{opacity:.26}
  .bears-hero--tall::after{background:linear-gradient(180deg,rgba(27,29,26,.9) 0%,rgba(27,29,26,.82) 45%,rgba(27,29,26,.93) 100%)}
  .bears-spec li{flex-direction:column;gap:.15rem}
}
/* Landscape de teléfono: el hero no debe reservar 88vh de una pantalla de 375px
   de alto — el sello acababa encima de los botones. */
/* ≤360px (p. ej. 320×844). Acotado al hero. Medido: con los valores de ≤600px,
   "Hablemos de tu proyecto" pide ~324px de ancho contra 272px disponibles
   (desbordaba 52px, y .hero tiene overflow:hidden, así que el botón se
   recortaba); la cinta quedaba en 271/272, al filo. */
@media(max-width:360px){
  .bears-hero .bears-btn{width:100%;justify-content:center;text-align:center;padding:1em 1.2em}
  .bears-hero-ribbon{font-size:clamp(1.6rem,8vw,2.2rem)}
  .bears-hero .bears-sello{width:64px;margin-top:1.75rem}
}

/* Landscape de pantalla corta: el hero no reserva altura de viewport. El sello
   pasa al flujo en vez de ocultarse — antes, en absoluto, acababa encima de
   los botones. */
/* Landscape de poca altura: única excepción a "un viewport". Medido a 844×390,
   el hero dispondría de 299px y el contenido pide ~577px, así que forzar la
   altura recortaría. Aquí el hero crece y el indicador vuelve al flujo. */
@media(max-height:520px) and (orientation:landscape){
  .bears-hero,.bears-hero--tall{min-height:auto;padding-top:3.5rem;padding-bottom:3.5rem}
  .bears-hero .bears-sello{position:static;display:block;width:72px;margin:1.75rem 0 0 auto;inset:auto}
  .bears-sticker-x--cluster{display:none}
  .bears-scroll-cue{position:static;transform:rotate(-12deg);margin:1.5rem auto 0}
  .bears-scroll-cue:hover{transform:rotate(-12deg) translateY(3px)}
}

/* D-39 — ajustes finos solicitados por Sergio. Sólo desktop amplio: la rotación
   evita el clipping de la retícula 2→1 y el reveal conserva su estado final. */
@media(min-width:1201px){
  .bears-hero .bears-sello{width:clamp(135px,15vw,210px);transform:rotate(-12deg)}
  .bears-think-card--break{transform:rotate(-6deg);transform-origin:100% 100%}
}
/* D-38 — acabado interior de Rule breakers, aislado de 01–03. */
.bears-think-card--break{padding:clamp(1.5rem,2.4vw,2.5rem) clamp(1.25rem,2vw,2rem) clamp(2.25rem,3.5vw,3.25rem)}
.bears-think-card--break::before{font-size:clamp(2rem,3vw,2.75rem);line-height:1}
.bears-think-card--break .bears-bicon{--bicon-size:clamp(64px,5vw,80px)}
.bears-think-card--break .bears-bicon img{width:clamp(64px,5vw,80px)}
.bears-think-card--break h3{margin-top:clamp(1.5rem,2.5vw,2rem)}
.bears-think-card--break p{margin-top:1.1rem;line-height:1.65}
@media(min-width:601px) and (max-width:1024px){.bears-think-card--break{padding-bottom:clamp(8.5rem,19vw,11.5rem)}}
/* Cierre: entrada del contenido y confirmación contenida del botón. */
@media(prefers-reduced-motion:no-preference){
.bears-footer-cta.bears-closing-reveal:not(.is-in) :is(h2,p,.bears-btn){opacity:0;transform:translateY(14px)}
.bears-footer-cta.bears-closing-reveal :is(h2,p,.bears-btn){transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.bears-footer-cta.bears-closing-reveal p{transition-delay:90ms}
.bears-footer-cta.bears-closing-reveal .bears-btn{transition-delay:180ms}
.bears-footer-cta .bears-btn:is(:hover,:focus-visible)::after{transform:translateX(7px)}
.bears-footer-cta .bears-btn:active{transform:translateY(2px)}
}

/* Utilidad accesible: texto disponible para lectores, fuera de la composición. */
.bears-visually-hidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* D-40 — cierre expresivo y retorno al inicio, sin recomponer la sección. */
.bears-footer-cta{position:relative;isolation:isolate}
.bears-footer-cta > :not(.bears-footer-cta__sticker){position:relative;z-index:1}
.bears-footer-cta__accent{display:inline;background:var(--digital);color:var(--bears-white);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.035em .14em .09em;line-height:1.08}
.bears-footer-cta__sticker{position:absolute;left:var(--gutter);bottom:clamp(1.5rem,4vw,3rem);
  width:clamp(8rem,10vw,10rem);height:auto;transform:rotate(-5deg);
  pointer-events:none;z-index:0}
footer .bears-footer-top{min-width:44px;min-height:44px;justify-content:center;white-space:nowrap;
  border-color:var(--digital);color:var(--bears-white)}
footer .bears-footer-top:is(:hover,:focus-visible){background:var(--digital);border-color:var(--digital);color:var(--bears-white)}
@media(max-width:1024px){.bears-footer-cta__sticker{display:none}}
@media(max-width:600px){footer .bears-footer-top{width:100%}}

/* Ajustes finales del Home, acotados para no mover el ritmo global. */
#portfolio-preview{padding-bottom:80px}
#como-pensamos{padding-top:80px;padding-bottom:88px}
.bears-so-we-are{padding-top:96px}

/* El header del Home se superpone al hero: oculto en el origen, aparece cuando
   el usuario inicia el recorrido o entra por teclado. `opacity` conserva la
   navegación en el DOM; el skip link revela el header desde el primer Tab. */
.bears-page-home header{margin-bottom:calc(-1 * var(--header-h));opacity:0;pointer-events:none}
.bears-page-home .bears-skip:focus~header,
html.bears-home-header-visible .bears-page-home header,
.bears-page-home header:focus-within{opacity:1;pointer-events:auto}
.bears-page-home .bears-hero--tall{min-height:100vh;min-height:100svh}
@media(prefers-reduced-motion:no-preference){
  .bears-page-home header{transition:opacity var(--dur) var(--ease-out)}
}
@media(max-height:520px) and (orientation:landscape){
  .bears-page-home .bears-hero--tall{min-height:auto}
}

/* =============================================================================
   BEARS — la franja sobre el contenido
   #m-wrp lo pinta el plugin JKD Theme Core, no el tema, y arrastra
   padding-top: var(--navigation-offset) desde main.min.css del padre: 99px en
   escritorio, 75px por debajo de 1024px. Ese hueco reserva sitio a la navegación
   de Norto, que aquí está oculta, así que solo pintaba fondo del body sobre el
   hero. Medido el 2026-09-14: el hero del Home empezaba en 131 en vez de 32.
   Va FUERA de @layer bears-production-compat a propósito. La regla de Norto
   también está sin capa, y una declaración dentro de la capa perdería siempre
   por mucha especificidad que tenga. Ver DECISIONS.md.
   ========================================================================== */
#m-wrp{padding-top:0}

/* =============================================================================
   BEARS — microinteracciones de entrada
   Van al final, o sea fuera de @layer bears-production-compat, por la misma razón
   de siempre: el tema padre declara sin capa y una regla en capa perdería.
   Todo cuelga de `.bears-js` y de `.is-in`, así que nada de esto se ejecuta hasta
   que el bloque entra en pantalla, y nada queda escondido si el JS falla.
   ========================================================================== */

/* Fila de botones fuera del 404, que es donde .bears-actions estaba estilado. */
.bears-gracias-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.5rem}

@media (prefers-reduced-motion:no-preference){
	/* Los stickers se pegan: caen un poco girados, rebotan pasado el destino y
	   se asientan. Los de intro llevan bears-reveal-exempt, así que el reveal no
	   los toca y esta animación es la única que actúa sobre ellos. */
	.bears-js .bears-reveal.is-in :is(
		.bears-legal-intro__sticker,
		.bears-portfolio-intro__sticker,
		.bears-services-index__sticker,
		.bears-contact-intro__sticker,
		.bears-project-intro__sticker,
		.bears-footer-cta__sticker
	){animation:bears-sticker-slap .52s var(--ease-out) both}

	@keyframes bears-sticker-slap{
		0%{opacity:0;transform:translateY(-16px) rotate(-9deg) scale(1.09)}
		62%{opacity:1;transform:translateY(0) rotate(2.5deg) scale(.982)}
		100%{opacity:1;transform:none}
	}

	/* Los pills se estampan. Solo los de cabecera de sección: los chips de las
	   tarjetas y los filtros del portafolio se quedan quietos, porque animar una
	   retícula entera de chips es ruido, no personalidad.
	   El rotate(-3deg) es el estado estático de .bears-pill--tilt y se conserva en
	   los tres fotogramas: si se pierde, el pill acaba derecho. */
	.bears-js .bears-reveal.is-in :is(
		.bears-portfolio-intro,
		.bears-contact-intro,
		.bears-legal-intro,
		.bears-services-index__intro,
		.bears-project-intro__head
	) .bears-pill--tilt{animation:bears-pill-stamp .42s var(--ease-out) both}

	@keyframes bears-pill-stamp{
		0%{opacity:0;transform:rotate(-3deg) scale(.88)}
		58%{opacity:1;transform:rotate(-3deg) scale(1.045)}
		100%{opacity:1;transform:rotate(-3deg)}
	}

	/* Los filtros del portafolio sí son interactivos: se levantan al apuntarlos. */
	@media (hover:hover) and (pointer:fine){
		.bears-portfolio-filters .bears-pill{transition:transform var(--dur-fast) var(--ease-out)}
		.bears-portfolio-filters .bears-pill:hover{transform:rotate(-3deg) translateY(-2px)}
	}
}

/* =============================================================================
   BEARS — la página de gracias, en oscuro
   Va al final por necesidad, no por costumbre: `.bears-legal-intro` declara su
   fondo claro sin capa, después de `.bears-dark`, y con la misma
   especificidad gana la última. Añadir `bears-dark` al marcado no basta.
   ========================================================================== */
.bears-gracias{background:var(--bears-black)}
.bears-gracias h1{color:var(--bears-white);max-width:20ch}
.bears-gracias p{color:var(--mute-on-dark);max-width:40rem}
.bears-gracias .bears-legal-intro__accent{background:var(--bears-yellow);color:var(--bears-black)}
.bears-gracias .bears-pill{background:var(--bears-white);color:var(--bears-black)}

/* El sticker del bloque de cierre se quedó fuera de la animación porque ese
   bloque no lleva `bears-reveal` sino `bears-closing-reveal`. Misma animación,
   selector corregido. Ver D-100. */
@media (prefers-reduced-motion:no-preference){
	.bears-js .bears-footer-cta.is-in .bears-footer-cta__sticker{animation:bears-sticker-slap .52s var(--ease-out) both}
}