/* =========================================================================
   Sobre nosotros — estilos de page-centro-oncologico-sobre-nosotros.php.
   Fuente: prototipo/Sobre Nosotros - Propuesta.dc.html (§15, propuesta
   visual aprobada; valores 1:1). Hero sin cifras, línea de tiempo, franja
   del propósito luminosa con panel de vidrio claro, valores con iconos,
   dúo Acerey + equipo y trabaje-con-nosotros en vidrio oscuro.
   ========================================================================= */

@keyframes oc-flujo {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* --- Encabezado ------------------------------------------------------- */
.pg-sobre-nosotros .sobre-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--neutral-0); }
.pg-sobre-nosotros .oc-corriente { position: absolute; top: -35%; bottom: -35%; left: 0; width: 200%; background: radial-gradient(ellipse 26% 55% at 14% 32%, rgba(255, 232, 214, 0.8) 0%, rgba(255, 232, 214, 0) 70%), radial-gradient(ellipse 20% 45% at 38% 62%, rgba(255, 244, 234, 0.95) 0%, rgba(255, 244, 234, 0) 70%), radial-gradient(ellipse 26% 55% at 64% 32%, rgba(255, 232, 214, 0.8) 0%, rgba(255, 232, 214, 0) 70%), radial-gradient(ellipse 20% 45% at 88% 62%, rgba(255, 244, 234, 0.95) 0%, rgba(255, 244, 234, 0) 70%); pointer-events: none; animation: oc-flujo 55s linear infinite; }
.pg-sobre-nosotros .sobre-hero__inner { position: relative; max-width: 1272px; margin: 0 auto; display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; padding: 64px 64px 56px; }
.pg-sobre-nosotros .sobre-hero__texto { display: flex; flex-direction: column; gap: 16px; }
.pg-sobre-nosotros .sobre-hero__eyebrow { margin: 0; color: var(--oc-orange-600); }
.pg-sobre-nosotros .sobre-hero__titulo { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.02em; }
.pg-sobre-nosotros .sobre-hero__bajada { font-size: 17px; line-height: 1.65; color: var(--fg-2); margin: 0; max-width: 56ch; }
.pg-sobre-nosotros .sobre-hero__media { height: 340px; position: relative; }
.pg-sobre-nosotros .sobre-hero__media img { width: 100%; height: 340px; object-fit: cover; border-radius: 20px; display: block; }
/* Leyenda en pill de vidrio (§15) */
.pg-sobre-nosotros .sobre-hero__leyenda { position: absolute; left: 14px; bottom: 14px; max-width: 70%; color: #fff; background: linear-gradient(160deg, rgba(32, 46, 71, 0.55), rgba(32, 46, 71, 0.75)); border: 1px solid rgba(255, 255, 255, 0.35); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(12px) saturate(1.6); }

/* --- Línea de tiempo «Nuestra historia» -------------------------------- */
.pg-sobre-nosotros .sobre-hitos { padding: 56px 64px; }
.pg-sobre-nosotros .sobre-hitos__inner { max-width: 1272px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.pg-sobre-nosotros .sobre-hitos__eyebrow { margin: 0; }
.pg-sobre-nosotros .sobre-hitos__titulo { font-size: 30px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.02em; }
.pg-sobre-nosotros .sobre-hitos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pg-sobre-nosotros .sobre-hito { position: relative; padding-top: 26px; display: flex; flex-direction: column; gap: 6px; }
/* Línea conectora: continúa hacia el hito siguiente (right:-32px cruza el gap)
   y se desvanece tras el último nodo. */
.pg-sobre-nosotros .sobre-hito__linea { position: absolute; top: 5px; left: 14px; right: -32px; height: 2px; background: linear-gradient(90deg, var(--oc-orange) 0%, var(--oc-orange-100) 100%); }
.pg-sobre-nosotros .sobre-hito--ultimo .sobre-hito__linea { right: 0; background: linear-gradient(90deg, var(--oc-orange) 0%, rgba(255, 133, 51, 0) 92%); }
.pg-sobre-nosotros .sobre-hito__pre { position: absolute; top: 5px; left: -32px; width: 32px; height: 2px; background: var(--oc-orange-100); }
.pg-sobre-nosotros .sobre-hito__nodo { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--oc-orange); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--oc-orange), 0 0 0 6px var(--oc-orange-50); }
.pg-sobre-nosotros .sobre-hito__anio { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--navy); }
.pg-sobre-nosotros .sobre-hito__hecho { font-size: 15px; font-weight: 600; color: var(--navy); }
.pg-sobre-nosotros .sobre-hito p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.pg-sobre-nosotros .sobre-hito p a { font-weight: 600; color: var(--oc-orange-600); }

/* --- Franja del propósito luminosa (§15) -------------------------------- */
.pg-sobre-nosotros .sobre-proposito { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFF6EE 0%, #FFEDDC 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 64px; }
.pg-sobre-nosotros .oc-corriente--calida { top: -40%; bottom: -40%; background: radial-gradient(ellipse 24% 60% at 12% 30%, rgba(255, 196, 150, 0.55) 0%, rgba(255, 196, 150, 0) 70%), radial-gradient(ellipse 20% 50% at 36% 68%, rgba(255, 224, 196, 0.7) 0%, rgba(255, 224, 196, 0) 70%), radial-gradient(ellipse 24% 60% at 62% 30%, rgba(255, 196, 150, 0.55) 0%, rgba(255, 196, 150, 0) 70%), radial-gradient(ellipse 20% 50% at 86% 68%, rgba(255, 224, 196, 0.7) 0%, rgba(255, 224, 196, 0) 70%); }
.pg-sobre-nosotros .sobre-proposito__arcos { position: absolute; right: -90px; top: -110px; width: 420px; height: 420px; opacity: 0.35; pointer-events: none; }
.pg-sobre-nosotros .sobre-proposito__inner { position: relative; max-width: 1272px; margin: 0 auto; }
/* Panel de vidrio claro (receta §15) */
.pg-sobre-nosotros .sobre-proposito__panel { max-width: 980px; margin: 0 auto; padding: 44px 52px; border-radius: 20px; background: linear-gradient(165deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 20px 50px -24px rgba(255, 133, 51, 0.35); display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.pg-sobre-nosotros .sobre-proposito__panel { backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); }
}
.pg-sobre-nosotros .sobre-proposito__eyebrow { margin: 0; color: var(--oc-orange-600); }
.pg-sobre-nosotros .sobre-proposito__titulo { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--navy); margin: 0; letter-spacing: -0.02em; }
.pg-sobre-nosotros .sobre-proposito__texto { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.6; color: var(--navy); max-width: 52ch; }
.pg-sobre-nosotros .sobre-proposito__subrayado { display: block; width: 56px; height: 3px; border-radius: 999px; background: var(--oc-orange); margin-top: 6px; }
/* Respaldo institucional (sin firma manuscrita) */
.pg-sobre-nosotros .sobre-proposito__firma { align-self: stretch; margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(32, 46, 71, 0.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.pg-sobre-nosotros .sobre-proposito__foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--oc-orange), 0 8px 20px -10px rgba(32, 46, 71, 0.4); }
.pg-sobre-nosotros .sobre-proposito__firmante { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.pg-sobre-nosotros .sobre-proposito__nombre { font-size: 15px; font-weight: 700; color: var(--navy); }
.pg-sobre-nosotros .sobre-proposito__cargo { font-size: 13px; color: var(--fg-3); }
.pg-sobre-nosotros .sobre-proposito__logos { margin-left: auto; display: flex; align-items: center; gap: 18px; padding-left: 18px; border-left: 1px solid rgba(32, 46, 71, 0.12); }
.pg-sobre-nosotros .sobre-proposito__logos img:first-child { height: 30px; width: auto; }
.pg-sobre-nosotros .sobre-proposito__logos img:last-child { height: 26px; width: auto; }

/* --- Valores (banda bg-subtle, tarjetas blancas con iconos) -------------- */
.pg-sobre-nosotros .sobre-valores { padding: 64px; background: var(--bg-subtle); border-bottom: 1px solid var(--divider); }
.pg-sobre-nosotros .sobre-valores__inner { max-width: 1272px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.pg-sobre-nosotros .sobre-valores__titulo { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy); }
.pg-sobre-nosotros .sobre-valores__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-sobre-nosotros .sobre-tarjeta { background: var(--neutral-0); border: 1px solid var(--border); border-top: 3px solid var(--oc-orange); border-radius: var(--radius-lg); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.pg-sobre-nosotros .sobre-tarjeta svg { flex: none; }
.pg-sobre-nosotros .sobre-tarjeta h3 { font-size: 19px; font-weight: 600; color: var(--navy); margin: 0; }
.pg-sobre-nosotros .sobre-tarjeta p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }

@media (min-width: 901px) {
	.pg-sobre-nosotros .sobre-valores__grid { grid-template-columns: repeat(6, 1fr); }
	.pg-sobre-nosotros .sobre-tarjeta { grid-column: span 2; }
	.pg-sobre-nosotros .sobre-tarjeta:nth-child(4) { grid-column: 2 / span 2; }
	.pg-sobre-nosotros .sobre-tarjeta:nth-child(5) { grid-column: 4 / span 2; }
}

/* --- Dúo: Acerey + equipo (§15) ----------------------------------------- */
.pg-sobre-nosotros .sobre-duo { padding: 64px; }
.pg-sobre-nosotros .sobre-duo__inner { max-width: 1272px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.pg-sobre-nosotros .sobre-acerey { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; }
.pg-sobre-nosotros .sobre-acerey h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0; }
.pg-sobre-nosotros .sobre-acerey p { font-size: 15px; line-height: 1.65; color: var(--fg-2); margin: 0; }
.pg-sobre-nosotros .sobre-acerey__logo { height: 40px; width: auto; align-self: flex-start; }
.pg-sobre-nosotros .sobre-acerey__enlace { font-size: 14.5px; font-weight: 600; color: var(--ac-teal-700); margin-top: auto; }
.pg-sobre-nosotros .sobre-equipo-tarjeta { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); display: flex; flex-direction: column; overflow: hidden; }
.pg-sobre-nosotros .sobre-equipo-tarjeta__foto { flex: 1; min-height: 200px; width: 100%; object-fit: cover; display: block; }
.pg-sobre-nosotros .sobre-equipo-tarjeta__franja { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pg-sobre-nosotros .sobre-equipo-tarjeta__texto { display: flex; flex-direction: column; gap: 4px; }
.pg-sobre-nosotros .sobre-equipo-tarjeta__texto h2 { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; }
.pg-sobre-nosotros .sobre-equipo-tarjeta__texto p { font-size: 14.5px; color: var(--fg-2); margin: 0; }
.pg-sobre-nosotros .sobre-equipo__boton { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--navy); padding: 11px 18px; border-radius: var(--radius-md); white-space: nowrap; }
.pg-sobre-nosotros .sobre-equipo__boton:hover { background: var(--navy-700); color: #fff; }

/* --- Trabaje con nosotros (entrada institucional canónica, #trabaje) ------ */
.pg-sobre-nosotros .sobre-trabaje { padding: 0 64px 64px; scroll-margin-top: 98px; }
.pg-sobre-nosotros .sobre-trabaje__inner { position: relative; overflow: hidden; max-width: 1272px; margin: 0 auto; padding: 38px 40px; border-radius: 20px; background: var(--navy); display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.35fr; gap: 36px; align-items: center; }
.pg-sobre-nosotros .sobre-trabaje__deco { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 70% at 90% 10%, rgba(24, 147, 177, 0.18) 0%, rgba(24, 147, 177, 0) 70%); pointer-events: none; }
.pg-sobre-nosotros .sobre-trabaje__intro { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pg-sobre-nosotros .sobre-trabaje__eyebrow { margin: 0; color: var(--oc-orange); }
.pg-sobre-nosotros .sobre-trabaje__intro h2 { margin: 0; color: #fff; font-size: 27px; line-height: 1.25; letter-spacing: -0.02em; }
.pg-sobre-nosotros .sobre-trabaje__intro > p:last-child { margin: 0; color: var(--neutral-300); font-size: 15px; line-height: 1.65; }
.pg-sobre-nosotros .sobre-trabaje__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Tarjetas en vidrio oscuro (receta glass oficial §7) */
.pg-sobre-nosotros .sobre-trabaje-tarjeta { min-height: 238px; padding: 26px 28px; border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); display: flex; flex-direction: column; gap: 10px; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.pg-sobre-nosotros .sobre-trabaje-tarjeta { backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); }
}
.pg-sobre-nosotros .sobre-trabaje-tarjeta svg { flex: none; color: var(--oc-orange); }
.pg-sobre-nosotros .sobre-trabaje-tarjeta--acerey svg { color: #6FCADF; }
.pg-sobre-nosotros .sobre-trabaje-tarjeta h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 600; }
.pg-sobre-nosotros .sobre-trabaje-tarjeta p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 14.5px; line-height: 1.6; }
.pg-sobre-nosotros .sobre-trabaje-tarjeta a { margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--oc-orange); }
.pg-sobre-nosotros .sobre-trabaje-tarjeta a:hover { color: #FFB27E; }
.pg-sobre-nosotros .sobre-trabaje-tarjeta--acerey a { color: #6FCADF; }
.pg-sobre-nosotros .sobre-trabaje-tarjeta--acerey a:hover { color: #9ADCEC; }
/* Respaldo D-039: dirección visible + «Copiar correo» bajo el enlace mailto. */
.pg-sobre-nosotros .sobre-trabaje-tarjeta__correo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pg-sobre-nosotros .sobre-trabaje-tarjeta__direccion { font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, 0.62); }

@media (prefers-reduced-motion: reduce) {
	.pg-sobre-nosotros .oc-corriente { animation: none; }
}

/* Responsive (V2 §6 + §15) */
@media (max-width: 900px) {
	.pg-sobre-nosotros .sobre-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 36px; }
	.pg-sobre-nosotros .sobre-hero__titulo { font-size: 32px; }
	.pg-sobre-nosotros .sobre-hitos { padding: 40px 20px; }
	.pg-sobre-nosotros .sobre-hitos__titulo { font-size: 25px; }
	.pg-sobre-nosotros .sobre-hitos__grid { grid-template-columns: 1fr; gap: 22px; }
	.pg-sobre-nosotros .sobre-hito { border-left: 2px solid var(--oc-orange); padding: 0 0 0 16px; }
	.pg-sobre-nosotros .sobre-hito__linea,
	.pg-sobre-nosotros .sobre-hito__pre,
	.pg-sobre-nosotros .sobre-hito__nodo { display: none; }
	.pg-sobre-nosotros .sobre-proposito { padding: 48px 20px; }
	.pg-sobre-nosotros .sobre-proposito__panel { padding: 28px 24px; }
	.pg-sobre-nosotros .sobre-proposito__texto { font-size: 18px; }
	.pg-sobre-nosotros .sobre-proposito__logos { margin-left: 0; padding-left: 0; border-left: none; }
	.pg-sobre-nosotros .sobre-valores { padding: 40px 20px; }
	.pg-sobre-nosotros .sobre-valores__grid { grid-template-columns: 1fr; }
	.pg-sobre-nosotros .sobre-duo { padding: 40px 20px; }
	.pg-sobre-nosotros .sobre-duo__inner { grid-template-columns: 1fr; }
	.pg-sobre-nosotros .sobre-equipo-tarjeta__franja { flex-direction: column; align-items: flex-start; gap: 18px; }
	.pg-sobre-nosotros .sobre-trabaje { padding: 0 20px 40px; }
	.pg-sobre-nosotros .sobre-trabaje__inner { padding: 30px 24px; grid-template-columns: 1fr; gap: 24px; }
	.pg-sobre-nosotros .sobre-trabaje__grid { grid-template-columns: 1fr; }
	.pg-sobre-nosotros .sobre-trabaje-tarjeta { min-height: 0; }
}