/* ============================================================
   Biosur theme — layout helpers on top of the DS.
   The DS (assets/ds/) owns visual language; this file only adds
   grids/spacing glue for the WordPress templates & bs-* widgets.
   Loaded AFTER the DS so single-class overrides win by order.
   ============================================================ */

/* ---- Accessibility: skip link / SR-only ---- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: 12px; left: 12px; z-index: 100;
  width: auto; height: auto; clip: auto; padding: 10px 16px;
  background: #fff; color: var(--color-azul); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); font-weight: var(--fw-semibold);
}

/* ---- Main + section rhythm ---- */
.bs-main { display: block; }
.bs-section { padding-block: var(--section-y); }
.bs-section--sm { padding-block: var(--section-y-sm); }
.bs-section--tight { padding-block: var(--space-8); }

/* Non-Elementor page/post content gets a readable container. */
.bs-prose { max-width: 46rem; margin-inline: auto; }
.bs-prose img { border-radius: var(--radius-image); }

/* ---- Responsive grid used by all card widgets ---- */
.bs-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .bs-grid--cols-2, .bs-grid--cols-3, .bs-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .bs-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .bs-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Hero: slide visibility toggled by JS ---- */
.bs-hero__content { display: none; }
.bs-hero__content.is-active { display: flex; }

/* ---- Catalog: filter rows + card media ratio ---- */
.bs-catalog__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.bs-catalog__filters--sub { margin-top: calc(var(--space-3) * -1); }
.bs-catalog__filters--sub .bs-chip { min-height: 32px; font-size: var(--fs-caption); }
.bs-catalog__empty { text-align: center; padding: var(--space-10) 0; }
.bs-product__media { aspect-ratio: 4 / 3; }

/* ---- Case study (project) card media ---- */
.bs-project__media { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .bs-project--featured .bs-project__media { aspect-ratio: auto; min-height: 340px; } }

/* ---- FAQ: rotate the plus icon into an × when open ---- */
.bs-faq__icon [class*="bs-ic"], .bs-faq__icon { transition: transform var(--dur-base) var(--ease-standard); }
.bs-faq__item.is-open .bs-faq__icon { transform: rotate(45deg); }

/* ---- Drawer: sub-menus start collapsed (JS expands) ---- */
.bs-drawer__sub { display: none; }

/* ---- Footer column wrapper (grid child; DS styles the parent) ---- */
.bs-footer__col { min-width: 0; }

/* ---- Elementor: let full-width sections breathe with DS container ---- */
.elementor-widget-biosur-hero .elementor-widget-container { margin: 0; }

/* Vertical spacing when several bs-* widgets stack in one Elementor column
   without their own section padding. */
.elementor-widget + .elementor-widget { margin-top: 0; }

/* ============================================================
   Brief 2 — Fase 1: navbar height + card hovers
   ============================================================ */

/* Navbar 100px en desktop (pedido del brief). */
@media (min-width: 992px) {
  .bs-header__bar { min-height: 100px; }
}

/* Menú alineado a la derecha del container.
   .bs-nav tiene flex:1 (ocupa el sobrante) pero su lista se alineaba a la izquierda. */
.bs-nav__list { justify-content: flex-end; }

/* En desktop .bs-header__actions no muestra nada (el burger está oculto y el CTA se
   quitó el 2026-07-15), pero sigue en el flex row: el gap de .bs-header__bar dejaba
   24px muertos a la derecha del menú. Medido: listRight 1288.5 vs containerRight 1312.5.
   OJO: si vuelve un CTA al header, hay que quitar esta regla — el CTA vive aquí dentro. */
@media (min-width: 1024px) {
  .bs-header__bar > .bs-header__actions { display: none; }
}

/* Soluciones/Servicios: efecto "growth" leve al pasar el cursor (el ícono crece). */
.bs-solution .bs-icon-tile { transition: transform var(--dur-base, .2s) var(--ease-standard, ease); }
.bs-solution:hover { transform: translateY(-4px); }
.bs-solution:hover .bs-icon-tile { transform: scale(1.12); }

/* Industrias: la tarjeta cambia de color al pasar el cursor. */
.bs-industry { transition: background var(--dur-base, .2s) var(--ease-standard, ease), border-color var(--dur-base, .2s) var(--ease-standard, ease), transform var(--dur-base, .2s) var(--ease-standard, ease); }
.bs-industry:hover { background: var(--color-azul); border-color: var(--color-azul); }
.bs-industry:hover .bs-icon-tile { background: rgba(255,255,255,.18); color: #fff; }
.bs-industry:hover .bs-industry__title,
.bs-industry:hover .bs-industry__desc { color: #fff; }

/* ============================================================
   Brief 2 — Fase 3: media-text row + team grid
   ============================================================ */

/* Fila imagen + texto (índice de Servicios, Representaciones). */
.bs-mediatext {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .bs-mediatext { grid-template-columns: 1fr 1fr; gap: var(--space-10, 48px); }
  .bs-mediatext--reverse .bs-mediatext__media { order: 2; }
}
.bs-mediatext__media { aspect-ratio: 4 / 3; border-radius: var(--radius-image, 16px); }
.bs-mediatext__media.bs-media--contain { background: var(--color-white); border: var(--bw-hair,1px) solid var(--border-subtle,#E3E7EF); }
.bs-mediatext__media.bs-media--contain .bs-media__img { object-fit: contain; padding: var(--space-8, 32px); }
.bs-mediatext__body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.bs-mediatext__title { font-size: var(--fs-h3); color: var(--color-profundo); margin: 0; }
.bs-mediatext__text { color: var(--color-gray-600); margin: 0; }
.bs-kicker { color: var(--color-azul); font-weight: var(--fw-semibold); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; }

/* Equipo (E-E-A-T). */
.bs-team__media { aspect-ratio: 1 / 1; border-radius: var(--radius-image, 16px) var(--radius-image, 16px) 0 0; }
.bs-team__card { overflow: hidden; }
.bs-team__body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5, 20px); }
.bs-team__name { font-size: var(--fs-h5); color: var(--color-profundo); margin: 0; }
.bs-team__role { color: var(--color-azul); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.bs-team__bio { color: var(--color-gray-600); font-size: var(--fs-body-sm); margin: 6px 0 0; }
.bs-team__link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-700); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); margin-top: 8px; }
.bs-team__link:hover { color: var(--color-azul); text-decoration: none; }

/* Consentimiento (Ley 19.628). */
.bs-field--consent { margin-top: var(--space-2); }
.bs-consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body-sm); color: var(--color-gray-600); cursor: pointer; }
.bs-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-azul); }
.bs-consent a { color: var(--color-azul); text-decoration: underline; }

/* ============================================================
   Brief 2 — Fase 6: ficha de producto (single-producto)
   ============================================================ */
.bs-ficha { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .bs-ficha { grid-template-columns: 1fr 1fr; gap: var(--space-10, 48px); } }
.bs-ficha__media { aspect-ratio: 4 / 3; border-radius: var(--radius-image, 16px); position: relative; }
.bs-ficha__body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.bs-ficha__title { font-size: var(--fs-h2); color: var(--color-profundo); margin: 0; }
.bs-ficha__specs { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--border-subtle, #E3E7EF); }
.bs-ficha__specs li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--border-subtle, #E3E7EF); font-size: var(--fs-body-sm); }
.bs-ficha__specs span { color: var(--color-gray-500); }
.bs-ficha__specs strong { color: var(--color-profundo); text-align: right; }
.bs-ficha__desc { color: var(--color-gray-600); }
.bs-ficha__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.bs-ficha__back { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-600); font-size: var(--fs-body-sm); margin-top: var(--space-2); }
.bs-ficha__back:hover { color: var(--color-azul); text-decoration: none; }

/* ============================================================
   Brief 2 — Fase 7: proyectos (tarjeta, ficha, galería, lightbox)
   ============================================================ */
.bs-project-card { overflow: hidden; }
.bs-project-card__media { display: block; aspect-ratio: 4 / 3; position: relative; }
.bs-project-card__media .bs-media__img { transition: transform var(--dur-base, .3s) var(--ease-standard, ease); }
.bs-project-card:hover .bs-project-card__media .bs-media__img { transform: scale(1.06); }
.bs-product__title a { color: inherit; text-decoration: none; }
.bs-product__title a:hover { color: var(--color-azul); }

/* Ficha de proyecto */
.bs-proyecto__head { max-width: 52rem; margin: 0 auto var(--space-8); text-align: center; }
.bs-proyecto__title { font-size: var(--fs-h1, 2.2rem); color: var(--color-profundo); margin: var(--space-3) 0 var(--space-5); }
.bs-proyecto__facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); padding: var(--space-4) 0 0; margin: 0; border-top: 1px solid var(--border-subtle, #E3E7EF); }
.bs-proyecto__facts li { display: flex; flex-direction: column; gap: 2px; }
.bs-proyecto__facts span { color: var(--color-gray-500); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; }
.bs-proyecto__facts strong { color: var(--color-profundo); }
.bs-proyecto__body { margin-top: var(--space-8); }

/* Galería */
.bs-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
@media (min-width: 720px) { .bs-gallery { grid-template-columns: repeat(3, 1fr); } }
.bs-gallery__item { padding: 0; border: 0; cursor: zoom-in; background: none; border-radius: var(--radius-image, 14px); overflow: hidden; aspect-ratio: 4 / 3; }
.bs-gallery__item--lead { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
@media (min-width: 720px) { .bs-gallery__item--lead { grid-column: 1 / -1; aspect-ratio: 16 / 6; } }
.bs-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base, .3s) var(--ease-standard, ease); }
.bs-gallery__item:hover img { transform: scale(1.05); }

/* Lightbox */
.bs-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(3,10,53,.88); }
.bs-lightbox[hidden] { display: none; }
.bs-lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-image, 14px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.bs-lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; }
.bs-lightbox__close:hover { background: rgba(255,255,255,.28); }

/* Blog archive — botón "Cargar más" */
.bs-blogarchive__more { text-align: center; margin-top: var(--space-8); }
/* El atributo [hidden] debe ganar a `.bs-btn { display:inline-flex }`. */
.bs-btn[hidden] { display: none !important; }

/* ============================================================
   Brief 2 — Fase 9: contacto directo + mapa
   ============================================================ */
.bs-contactinfo { display: flex; flex-direction: column; gap: var(--space-5); }
.bs-contactinfo__title { font-size: var(--fs-h4); color: var(--color-profundo); margin: 0; }
.bs-contactinfo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bs-contactinfo__list li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-gray-700); }
.bs-contactinfo__list a { color: var(--color-gray-700); }
.bs-contactinfo__list a:hover { color: var(--color-azul); }
.bs-contactinfo__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--color-azul-50); color: var(--color-azul); }
.bs-contactinfo__social { display: flex; align-items: center; gap: var(--space-3); color: var(--color-gray-600); font-size: var(--fs-body-sm); }
.bs-contactinfo__map { border-radius: var(--radius-image, 14px); overflow: hidden; border: 1px solid var(--border-subtle, #E3E7EF); }
.bs-contactinfo__map iframe { width: 100%; height: 300px; border: 0; display: block; }

/* ============================================================
   Brief 2 — Fase 10: footer legal + banner de cookies
   ============================================================ */
.bs-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.bs-footer__legal-links a { color: rgba(255,255,255,.7); font-size: var(--fs-body-sm); }
.bs-footer__legal-links a:hover { color: #fff; }

/* ============================================================
   Servicios: tarjeta con imagen (Cambios Biosur2, punto 2)
   El DS deja .bs-solution con ícono, texto a la izquierda y padding propio.
   El diseño nuevo lleva imagen a sangre arriba y el cuerpo centrado, así que
   el modificador anula el padding de la tarjeta y lo devuelve solo al cuerpo.
   ============================================================ */
.bs-solution--media { padding: 0; overflow: hidden; gap: 0; text-align: center; }

.bs-solution__media { aspect-ratio: 4 / 3; width: 100%; }

.bs-solution__body {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
  flex: 1;
}

/* En el mockup el título va en azul de marca, no en el navy del DS. */
.bs-solution--media .bs-solution__title { color: var(--color-azul); font-size: var(--fs-h5, 1.125rem); }
.bs-solution--media .bs-solution__desc  { font-size: var(--fs-body-sm); }

/* El DS ancla el enlace a la izquierda (align-self: flex-start); aquí va centrado
   y al pasar el cursor por la tarjeta pasa de azul a navy, como en la referencia. */
.bs-solution--media .bs-card__link { align-self: center; margin-top: auto; }
.bs-solution--media:hover .bs-card__link { color: var(--color-profundo); }

@media (prefers-reduced-motion: reduce) {
  .bs-solution--media:hover { transform: none; }
}

/* Hover verde de marca en el botón principal de los CTA.
   (Cambios Biosur2: lo piden los puntos 9, 15, 18, 27 y los CTA de las demás páginas;
   se resuelve una vez aquí en lugar de página por página.)
   El texto pasa a navy: blanco sobre #00D692 da 1,90:1 y AA exige 4,5:1; navy da 10,04:1.
   Se conserva el color pedido sin sacrificar legibilidad. */
.bs-cta .bs-btn--primary:hover {
  background: var(--color-verde);
  color: var(--color-profundo);
}

/* Botón al archivo del blog, bajo la grilla (Cambios Biosur2, punto 8). */
.bs-blog__more { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ============================================================
   Industrias: tarjeta circular (Cambios Biosur2, punto 3)
   Inactiva: círculo navy con "Ver más" en verde de marca.
   Hover:    el círculo pasa a azul y el enlace a blanco.
   ============================================================ */
.bs-industry--circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border-color: transparent;
  background: var(--color-profundo);
  align-items: center;
  justify-content: center;
  text-align: center;
  /* En un círculo el texto no puede llegar al borde: el padding lateral generoso
     lo mantiene dentro de la caja inscrita. */
  padding: clamp(var(--space-5), 12%, var(--space-8));
  gap: var(--space-3);
  transition: background var(--dur-base, .2s) var(--ease-standard, ease),
              box-shadow var(--dur-base, .2s) var(--ease-standard, ease);
}

.bs-industry--circle .bs-industry__body { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.bs-industry--circle .bs-industry__title { color: #fff; font-size: var(--fs-h5, 1.125rem); }
.bs-industry--circle .bs-industry__desc  { color: rgba(255,255,255,.78); font-size: var(--fs-body-sm); }

/* La pastilla del ícono va blanca y REDONDA en ambos estados. El hover necesita su
   propia regla porque la de la Fase 1 (`.bs-industry:hover .bs-icon-tile`, que la
   vuelve translúcida) tiene la misma especificidad y ganaría por orden. */
.bs-industry--circle .bs-icon-tile,
.bs-industry--circle:hover .bs-icon-tile {
  background: #fff;
  color: var(--color-azul);
  border-radius: 50%;
  width: 44px; height: 44px;
}

/* --color-verde es el #00D692 que pide el documento; ya existe en los tokens del DS. */
.bs-industry--circle .bs-card__link { align-self: center; color: var(--color-verde); padding-inline: 0; }
.bs-industry--circle:hover { background: var(--color-azul); }
.bs-industry--circle:hover .bs-card__link,
.bs-industry--circle .bs-card__link:hover { color: #fff; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .bs-industry--circle { transition: none; }
}

/* ============================================================
   Flotantes: "Cotizar proyecto" + WhatsApp
   ============================================================ */

/* El contenedor asume el anclaje fijo que antes tenía .bs-wa--fixed (DS), para
   apilar ambos botones desde un único punto. Mismos valores que el DS usaba
   (right/bottom 20px, z-index 60) para no mover el WhatsApp de su sitio. */
/* --bs-floats-offset lo calcula initCookies() en biosur.js: vale la altura del
   banner de cookies cuando este se cruza con los flotantes, y 0px si no. */
.bs-floats {
  position: fixed; right: 20px; bottom: calc(20px + var(--bs-floats-offset, 0px)); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3);
  transition: bottom var(--dur-base, .2s) var(--ease-standard, ease);
}

.bs-floats__quote {
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(6, 105, 234, .38);
}
.bs-floats__quote:hover { transform: scale(1.04); }
.bs-floats__quote:active { transform: translateY(1px) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .bs-floats__quote:hover { transform: none; }
}

.bs-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 720px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-profundo); color: #fff; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md, 14px); box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.35)); }
.bs-cookies[hidden] { display: none; }
.bs-cookies__text { margin: 0; font-size: var(--fs-body-sm); color: rgba(255,255,255,.85); flex: 1 1 260px; }
.bs-cookies__text a { color: #fff; text-decoration: underline; }
.bs-cookies__actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.bs-cookies .bs-btn--ghost { color: #fff; }