/* ============================================================
   GOOD LIFE PEPS · Conócenos (conocenos.html)
   Ajustes propios de esta página. Todo va acotado a .pagina-conocenos
   para no tocar el resto del sitio. Usa los tokens de styles.css.
   ============================================================ */

/* Texto solo para lectores de pantalla */
.pagina-conocenos .visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Apertura: h1 primero, foto nueva a la derecha en escritorio ---------- */
.pagina-conocenos .conocenos-apertura { padding-top: clamp(32px, 6vw, 96px); padding-bottom: 0; }
.pagina-conocenos .conocenos-apertura h1 { margin-top: 0.9rem; }
.pagina-conocenos .conocenos-apertura__media img {
  width: 100%;
  height: auto; /* respeta width/height del HTML sin deformar la foto */
  border-radius: var(--radio-lg);
}

/* ---------- Confianza: sigue al mensaje destacado, sin encabezado visible ---------- */
.pagina-conocenos .conocenos-confianza { padding-top: 0; }
.pagina-conocenos .conocenos-confianza .confianza { margin-top: 0; }

/* ---------- Banners de categoría ---------- */
#categorias { scroll-margin-top: 80px; }

/* Velo más denso: los videos tienen ventanas y sol muy claros detrás del texto blanco */
.pagina-conocenos .cat-banner::before {
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.64), rgba(10, 12, 16, 0.5) 45%, rgba(10, 12, 16, 0.64));
}

/* El número de sección es texto pequeño: a opacidad completa para no quedar al filo de 4.5:1 */
.pagina-conocenos .cat-banner__num { opacity: 1; }

/* «Anti-envejecimiento» es una sola palabra larga: debe caber completa también a 320 px (sin partirse a media palabra) */
.pagina-conocenos .cat-banner h2 { font-size: clamp(1.75rem, 9.4vw, 7.5rem); }

/* Acento miel igual que en bienestar-diario.html: botones, «Rx» y título usan --miel-fuerte (#8A5C17) con texto blanco */
.pagina-conocenos .conocenos-miel { --acento: var(--miel); --acento-osc: var(--miel-fuerte-osc); --acento-fuerte: var(--miel-fuerte); }

/* ---------- Tarjetas de los carruseles: misma regla que en categorias.css ---------- */
/* Todas miden lo mismo (la pista las estira). Nombre y tipo van juntos arriba; foto y botones van al fondo,
   así el espacio que sobra en una tarjeta queda entre el tipo y la foto, y las fotos y los botones de todas
   las tarjetas quedan a la misma altura. */
.pagina-conocenos .carrusel .prod { flex-basis: clamp(272px, 24vw, 330px); }
.pagina-conocenos .carrusel .prod__tipo { margin-bottom: 16px; }
.pagina-conocenos .carrusel .prod__media { margin-top: auto; }
.pagina-conocenos .carrusel .prod__acciones { margin-top: 0; }
.pagina-conocenos .prod__acciones .btn { white-space: nowrap; }

/* Aviso de RTA+B6 FM rx debajo del carrusel, sobre el video del banner (componente .aviso-investigacion de styles.css) */
.pagina-conocenos .cat-banner__inner > .aviso-investigacion { max-width: 62ch; margin: 22px auto 0; }

/* Nota de receta bajo cada carrusel */
.pagina-conocenos .conocenos-nota-rx {
  margin: 18px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.88rem;
}

/* ---------- Bloques «Alcanza tus metas»: abajo de 384 px el título baja con la pantalla para que
   «anti-envejecimiento,» no se parta a media palabra; de 384 px en adelante no cambia nada ---------- */
.pagina-conocenos .meta-bloque h2.display-lg { font-size: min(clamp(2.4rem, 6.5vw, 4.4rem), 10vw); }

/* ---------- Cómo funciona: velo más denso por la caja blanca del video ---------- */
.pagina-conocenos .como::before { background: rgba(10, 12, 16, 0.7); }
/* El texto de los pasos a opacidad completa: al 85% bajaba de 4.5:1 en algunos cuadros del video */
.pagina-conocenos .paso p, .pagina-conocenos .paso .num { opacity: 1; }

/* ---------- Soporte médico: la etiqueta mono de las tarjetas de cristal al 70% quedaba en 3.6:1 ---------- */
.pagina-conocenos .tarjeta-glass .mono { opacity: 1; }

/* ---------- Objetivos táctiles de al menos 44 px ---------- */
.pagina-conocenos .carrusel__flecha { width: 48px; height: 44px; }
.pagina-conocenos .prod__acciones .btn { min-height: 44px; }
.pagina-conocenos main .enlace-flecha { min-height: 44px; }

/* ---------- Foco visible ---------- */
.pagina-conocenos main a:focus-visible,
.pagina-conocenos main button:focus-visible,
.pagina-conocenos main summary:focus-visible {
  outline: 2px solid var(--acento-fuerte, var(--acento));
  outline-offset: 3px;
}
/* Las flechas del carrusel están sobre video oscuro: ahí el anillo va en blanco */
.pagina-conocenos .carrusel__flecha:focus-visible { outline-color: #fff; }