/* ==========================================================
   CONÓCENOS · GRUPO 8 BJ · V15
   Base compartida: assets/css/styles.css
   ========================================================== */

.conocenos-page{
  --about-h2-size:clamp(2.55rem,3.7vw,3.8rem);
  overflow-x:hidden;
  background:#fff;
  color:var(--text);
}
.conocenos-page main{overflow:hidden}
.conocenos-page .story-section{position:relative;padding:78px 0}
.conocenos-page .story-copy h2{
  margin:0 0 14px;
  color:var(--ink);
  font-size:var(--about-h2-size);
  line-height:.94;
  letter-spacing:-.045em;
}
.conocenos-page .story-copy h2 span{color:var(--blue-bright)}
.conocenos-page .story-copy p{max-width:570px;margin:0 0 16px;color:#53698E;font-size:1.03rem;line-height:1.6}
.conocenos-page .compact-copy{max-width:520px}
.conocenos-page .story-emphasis{color:var(--ink)!important;font-weight:800}
.conocenos-page .eyebrow{margin-bottom:12px}

/* Header: misma base de Home; permanece visible y se reduce al hacer scroll. */
.conocenos-page .hero-header.header-hidden{transform:translateX(-50%)!important;opacity:1!important}

/* ==========================================================
   HERO SECUNDARIO
   ========================================================== */
.about-hero{position:relative;min-height:560px;overflow:hidden;border-radius:0 0 28px 28px;background:#176ED6}
.about-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 43%}
.about-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,89,188,.98) 0%,rgba(23,102,201,.92) 31%,rgba(23,102,201,.69) 43%,rgba(23,102,201,.28) 56%,rgba(23,102,201,0) 70%)}
.about-hero-inner{position:relative;z-index:3;min-height:560px;display:flex;align-items:center;padding-top:122px;padding-bottom:54px}
.about-hero-copy{max-width:560px;color:#fff}
.about-hero-copy h1{margin:10px 0 22px;color:#fff;font-size:clamp(3.45rem,4.25vw,4.75rem);line-height:.94;letter-spacing:-.055em}
.about-hero-copy h1 span{color:var(--yellow)}
.about-hero-copy p{max-width:545px;margin:0;color:#fff;font-size:1.08rem;line-height:1.55}
.hero-handnote{position:absolute;top:130px;right:5%;margin:0;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-size:1.32rem;font-weight:750;line-height:1.06;text-align:center;transform:rotate(-5deg);text-shadow:0 2px 9px rgba(0,0,0,.16)}

/* ==========================================================
   EXPERIENCIA
   ========================================================== */
.adventure-section{background:#fff}
.adventure-grid{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(0,1.42fr);gap:72px;align-items:center}
.adventure-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:center;padding:8px 0 16px}
.mini-photo{position:relative;margin:0;padding:8px 8px 48px;border-radius:20px;background:#fff;box-shadow:0 18px 36px rgba(24,53,108,.13);transform-origin:center}
.mini-photo img{width:100%;height:255px;object-fit:cover;border-radius:14px}
.mini-photo figcaption{position:absolute;left:12px;right:12px;bottom:10px;padding:8px 10px;border-radius:10px;color:#173A8C;font-family:"Bricolage Grotesque",sans-serif;font-size:.92rem;font-weight:800;text-align:center}
.mini-a{transform:rotate(-2.6deg) translateY(7px)}.mini-b{transform:rotate(1.8deg) translateY(-3px)}.mini-c{transform:rotate(-1.3deg) translateY(9px)}.mini-d{transform:rotate(2.4deg)}
.mini-a figcaption{background:#FFE06D}.mini-b figcaption{background:#DCEBFF}.mini-c figcaption{background:#FFD2E2}.mini-d figcaption{background:#C8F2E6}

/* ==========================================================
   AMISTAD
   ========================================================== */
.friends-section{background:#F3F9FF}
.friends-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:78px;align-items:center}
.friends-visual{position:relative}
.friends-visual>img{width:100%;height:455px;object-fit:cover;border-radius:26px;box-shadow:0 22px 46px rgba(24,53,108,.13)}
.friends-visual>.tape{position:absolute;z-index:3;top:-15px;left:50%;width:106px;height:30px;transform:translateX(-50%) rotate(-4deg);clip-path:polygon(3% 8%,96% 0,100% 88%,5% 100%)}
.tape-yellow{background:var(--yellow)}
.photo-note{position:absolute;z-index:4;top:34px;right:-36px;padding:18px 20px;border-radius:23px;background:#fff;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-size:1.08rem;font-weight:800;line-height:1.08;box-shadow:0 16px 30px rgba(24,53,108,.13);transform:rotate(4deg)}
.friends-copy p{max-width:640px}
.presence-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.presence-card{position:relative;display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;min-height:118px;padding:16px;border:1px solid rgba(29,91,179,.08);border-radius:20px;background:#fff;box-shadow:0 13px 28px rgba(24,53,108,.08);overflow:hidden}
.presence-card::after{content:"";position:absolute;inset:auto 0 0;height:5px}
.presence-card h3{margin:0 0 4px;color:var(--ink);font-size:.98rem;line-height:1.13}
.presence-card p{margin:0!important;color:#607398!important;font-size:.79rem!important;line-height:1.35!important}
.presence-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:#173A8C;background:#EDF5FF;font-size:1.2rem;font-weight:900}
.pc-one::after{background:#2D7FF9}.pc-two::after{background:#14A57A}.pc-three::after{background:#F9CA32}.pc-four::after{background:#7E63E8}
.pc-two .presence-icon{background:#E7F8F1}.pc-three .presence-icon{background:#FFF3C8}.pc-four .presence-icon{background:#F0EBFF}

/* ==========================================================
   ACTIVIDADES / PROYECTOS / EVENTOS
   ========================================================== */
.ideas-section{background:#fff}
.ideas-layout{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:76px;align-items:center}
.idea-polaroids{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end;padding:34px 12px 18px 18px}
.idea-polaroid{position:relative;margin:0;padding:8px 8px 16px;border-radius:22px;background:#fff;box-shadow:0 18px 38px rgba(24,53,108,.13)}
.idea-polaroid img{width:100%;height:245px;object-fit:cover;border-radius:15px}
.idea-polaroid p{margin:14px 10px 2px;color:#51658B;font-size:.84rem;line-height:1.35}
.idea-label{position:absolute;z-index:3;top:-18px;left:15px;padding:10px 17px;border-radius:8px 8px 10px 10px;color:#173A8C;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1rem;transform:rotate(-4deg);box-shadow:0 7px 16px rgba(24,53,108,.08)}
.label-blue{color:#fff;background:#2876DD}.label-yellow{background:#FFD23F}.label-pink{background:#F36C9A}
.idea-one{transform:rotate(-3deg) translateY(16px)}.idea-two{transform:rotate(1.5deg) translateY(-5px)}.idea-three{transform:rotate(3deg) translateY(12px)}
.idea-rays{position:absolute;z-index:0;top:2px;left:31%;width:64px;height:62px;background:linear-gradient(66deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 0 0/22px 46px no-repeat,linear-gradient(89deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 24px 0/22px 50px no-repeat,linear-gradient(112deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 47px 7px/20px 43px no-repeat}

/* ==========================================================
   HABILIDADES · BANDA DE DESCANSO VISUAL
   ========================================================== */
.capability-band{position:relative;min-height:545px;overflow:hidden;background:#102F64}
.capability-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.capability-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,31,70,.93) 0%,rgba(11,42,88,.81) 43%,rgba(9,38,78,.42) 68%,rgba(9,38,78,.20) 100%)}
.capability-layout{position:relative;z-index:2;min-height:545px;display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);gap:58px;align-items:center;padding-top:60px;padding-bottom:60px}
.capability-copy{max-width:560px}
.capability-copy .eyebrow{color:var(--yellow)}
.capability-copy h2{
  margin:0 0 22px;
  color:#fff;
  font-size:clamp(3rem,4vw,4.2rem);
  line-height:.93;
  letter-spacing:-.05em;
}
.capability-copy h2 span{color:#2C93FF}
.capability-copy p{max-width:555px;margin:0;color:#F4F8FF;font-size:1.05rem;line-height:1.62}
.capability-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.skill-card{min-width:0;min-height:142px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(72px,.85fr);overflow:hidden;border:1px solid rgba(255,255,255,.5);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 16px 34px rgba(4,24,57,.24);backdrop-filter:blur(10px)}
.skill-text{padding:16px 10px 14px 16px;display:flex;flex-direction:column;justify-content:center}
.skill-icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:9px;border-radius:14px;font-size:1.2rem;font-weight:900;color:#1752A2;background:#E1EFFF}
.skill-card h3{margin:0 0 4px;color:#0D2A6B;font-size:1rem;line-height:1.08}
.skill-card p{margin:0;color:#5D6F91;font-size:.76rem;line-height:1.25}
.skill-card img{width:100%;height:100%;min-height:142px;object-fit:cover}
.skill-pink .skill-icon{color:#C12B80;background:#FFE3F1}.skill-yellow .skill-icon{color:#B67A00;background:#FFF0BA}.skill-green .skill-icon{color:#138765;background:#DCF5EA}.skill-purple .skill-icon{color:#6A46C9;background:#EFE8FF}.skill-sky .skill-icon{color:#1E6BAF;background:#DFF1FF}

/* ==========================================================
   INTERNACIONAL
   ========================================================== */
.borders-section{background:#fff}
.borders-grid{display:grid;grid-template-columns:minmax(320px,.76fr) minmax(0,1.24fr);gap:78px;align-items:center}
.travel-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.travel-tags span{padding:9px 14px;border-radius:10px;color:#173A8C;font-size:.75rem;font-weight:800}.travel-tags span:nth-child(1){background:#FFD6EF}.travel-tags span:nth-child(2){background:#FFF0B8}.travel-tags span:nth-child(3){background:#DCEBFF}.travel-tags span:nth-child(4){background:#D9F5E9}
.travel-stage{position:relative;padding:18px 30px 28px 20px}
.travel-stage figure{margin:0;overflow:hidden;border-radius:26px;box-shadow:0 22px 46px rgba(24,53,108,.13);transform:rotate(-1.4deg)}
.travel-stage img{width:100%;height:405px;object-fit:cover}
.travel-note{top:-6px;right:4px;background:#EAF6FF;color:#173A8C;transform:rotate(4deg)}
.travel-doodle{position:absolute;z-index:4;right:-14px;bottom:14px;color:#176ED6;font-family:"Bricolage Grotesque",sans-serif;font-size:4.4rem;font-weight:900;transform:rotate(-18deg)}

/* ==========================================================
   SERVICIO · COLLAGE
   ========================================================== */
.footprint-section{background:#F3F9FF}
.footprint-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:82px;align-items:center}
.footprint-collage{position:relative;min-height:420px;padding:14px 76px 28px 0}
.footprint-main,.footprint-detail{margin:0;overflow:hidden;background:#fff;box-shadow:0 20px 40px rgba(24,53,108,.12)}
.footprint-main{width:82%;height:370px;border:8px solid #fff;border-radius:25px;transform:rotate(-2.2deg)}
.footprint-detail{position:absolute;right:10px;bottom:16px;width:34%;height:205px;border:8px solid #fff;border-radius:22px;transform:rotate(4deg)}
.footprint-main img,.footprint-detail img{width:100%;height:100%;object-fit:cover}.footprint-main img{object-position:46% 50%}.footprint-detail img{object-position:78% 74%;transform:scale(1.38)}
.sticky-note{position:absolute;z-index:5;right:16px;top:6px;padding:15px 18px;border-radius:10px;background:#FFE46A;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;line-height:1.12;transform:rotate(4deg);box-shadow:0 14px 28px rgba(24,53,108,.10)}
.leaf-doodle{position:absolute;left:-16px;bottom:30px;color:#1B9B72;font-size:5rem;font-weight:900;transform:rotate(-20deg)}

/* ==========================================================
   INSIGNIAS · COMPOSICIÓN SIMBÓLICA
   ========================================================== */
.badge-section{background:#fff}
.badge-grid{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:82px;align-items:center}
.badge-stage{position:relative;min-height:420px;padding:32px 92px 42px 40px}
.badge-blob{position:absolute;inset:26px 80px 30px 24px;border-radius:48% 52% 46% 54%/56% 44% 56% 44%;background:#EAF4FF;transform:rotate(-4deg)}
.badge-main-photo{position:relative;z-index:2;width:82%;height:335px;margin:0 0 0 18px;overflow:hidden;border:8px solid #fff;border-radius:26px;box-shadow:0 20px 42px rgba(24,53,108,.13);transform:rotate(-2deg)}
.badge-main-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.badge-detail-photo{position:absolute;z-index:3;right:12px;top:38px;width:170px;height:232px;margin:0;overflow:hidden;border:8px solid #fff;border-radius:24px;box-shadow:0 18px 34px rgba(24,53,108,.13);transform:rotate(5deg)}
.badge-detail-photo img{width:100%;height:100%;object-fit:cover;object-position:86% 52%;transform:scale(1.8)}
.badge-ribbon{position:absolute;z-index:5;right:0;bottom:24px;max-width:330px;padding:14px 18px;border-radius:10px;background:#FFE46A;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-size:.92rem;font-weight:800;transform:rotate(-3deg);box-shadow:0 12px 24px rgba(24,53,108,.09)}
.floating-badge{position:absolute;z-index:4;width:62px;height:62px;display:grid;place-items:center;border:6px solid #fff;border-radius:50%;box-shadow:0 12px 24px rgba(24,53,108,.12);font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem;font-weight:900}.badge-a{left:8px;bottom:64px;background:#4A68C7;color:#fff}.badge-b{right:70px;top:4px;background:#FFF0AE;color:#173A8C}

/* ==========================================================
   ADULTOS
   ========================================================== */
.mentors-section{background:#F7FBFF}
.mentors-grid{display:grid;grid-template-columns:minmax(330px,.76fr) minmax(0,1.24fr);gap:82px;align-items:center}
.mentor-stage{position:relative;padding:18px 184px 18px 18px}
.mentor-blob{overflow:hidden;border-radius:46% 54% 43% 57%/55% 43% 57% 45%;box-shadow:0 22px 46px rgba(24,53,108,.13)}
.mentor-blob img{width:100%;height:380px;object-fit:cover;object-position:52% 50%}
.mentor-pills{position:absolute;right:0;top:50%;width:236px;display:grid;gap:11px;transform:translateY(-50%)}
.mentor-pills span{position:relative;padding:14px 17px 14px 44px;border:1px solid #EAF1FA;border-radius:14px;background:#fff;color:var(--ink);font-size:.82rem;font-weight:800;box-shadow:0 10px 24px rgba(24,53,108,.09)}
.mentor-pills span::before{content:"";position:absolute;left:15px;top:50%;width:16px;height:16px;border-radius:50%;background:#DDEEFF;transform:translateY(-50%);box-shadow:inset 0 0 0 4px #2E7BE5}.mentor-pills span:nth-child(2)::before{background:#E8F8EF;box-shadow:inset 0 0 0 4px #22A06B}.mentor-pills span:nth-child(3)::before{background:#FFDDEA;box-shadow:inset 0 0 0 4px #E34F7B}.mentor-pills span:nth-child(4)::before{background:#F2ECFF;box-shadow:inset 0 0 0 4px #7C5CFF}

/* ==========================================================
   CIERRE
   ========================================================== */
.closing-section{position:relative;min-height:610px;overflow:hidden}
.closing-section>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.closing-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,31,67,.91) 0%,rgba(11,31,67,.62) 49%,rgba(11,31,67,.24) 76%,rgba(11,31,67,.08) 100%)}
.closing-inner{position:relative;z-index:2;min-height:610px;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:86px;align-items:center}
.closing-copy{max-width:620px}.closing-copy h2{margin:8px 0 20px;color:#fff;font-size:clamp(3.1rem,4.2vw,4.7rem);line-height:.95;letter-spacing:-.05em}.closing-copy p{max-width:600px;margin:0;color:#fff;font-size:1.05rem;line-height:1.58}
.closing-card{padding:30px;border-radius:24px;background:#fff;box-shadow:0 20px 44px rgba(8,34,77,.24)}.closing-card h3{margin:0 0 10px;color:var(--ink);font-size:1.72rem}.closing-card p{margin:0 0 22px;color:#5B6F95;line-height:1.52}

/* ==========================================================
   TABLET
   ========================================================== */
@media(max-width:1100px){
  .adventure-grid,.friends-grid,.ideas-layout,.borders-grid,.footprint-grid,.badge-grid,.mentors-grid{grid-template-columns:1fr;gap:44px}
  .adventure-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.mini-photo img{height:290px}
  .friends-visual>img{height:430px}.idea-polaroids{max-width:900px}
  .capability-layout{grid-template-columns:1fr;gap:32px}.capability-cards{max-width:900px}.capability-copy{max-width:680px}
  .travel-stage{max-width:900px}.travel-stage img{height:410px}.footprint-collage{max-width:850px}.badge-stage{max-width:900px}.mentor-stage{max-width:900px;padding-right:160px}
  .closing-inner{grid-template-columns:1fr;gap:32px;padding:80px 0}.closing-card{max-width:440px}
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media(max-width:720px){
  .conocenos-page .story-section{padding:60px 0}.conocenos-page .container{width:min(calc(100% - 30px),var(--container))}
  .about-hero{min-height:690px;border-radius:0 0 20px 20px}.about-hero-photo{height:350px;object-position:58% 40%}.about-hero-overlay{background:linear-gradient(180deg,rgba(23,110,214,.03) 0 28%,rgba(23,110,214,.84) 48%,rgba(23,110,214,1) 69%)}.about-hero-inner{min-height:690px;align-items:flex-end;padding:380px 0 58px}.about-hero-copy h1{font-size:clamp(2.8rem,12vw,3.7rem)}.about-hero-copy p{font-size:.98rem}.hero-handnote{display:none}
  .adventure-cards{grid-template-columns:1fr 1fr;gap:12px}.mini-photo{padding:6px 6px 42px}.mini-photo img{height:195px}.mini-photo figcaption{font-size:.8rem}
  .friends-visual>img{height:315px}.photo-note{right:8px;top:14px;font-size:.9rem}.presence-cards{grid-template-columns:1fr;gap:12px}.presence-card{grid-template-columns:54px 1fr;min-height:106px;padding:14px}.presence-icon{width:48px;height:48px}
  .idea-polaroids{grid-template-columns:1fr;gap:30px;padding:30px 6px 10px}.idea-polaroid,.idea-one,.idea-two,.idea-three{transform:none}.idea-polaroid img{height:235px}.idea-rays{display:none}
  .capability-band{min-height:auto}.capability-layout{min-height:auto;padding-top:62px;padding-bottom:62px}.capability-copy h2{font-size:clamp(2.7rem,12vw,3.6rem)}.capability-cards{grid-template-columns:1fr}.skill-card{min-height:132px}.skill-card img{min-height:132px}
  .travel-stage{padding:8px 0 16px}.travel-stage figure{transform:none}.travel-stage img{height:300px}.travel-note{right:8px;top:-8px}.travel-doodle{display:none}
  .footprint-collage{min-height:340px;padding:8px 48px 28px 0}.footprint-main{width:88%;height:300px;transform:none}.footprint-detail{right:0;width:39%;height:170px;border-width:6px}.sticky-note{right:8px;top:-4px;font-size:.86rem}.leaf-doodle{display:none}
  .badge-stage{min-height:350px;padding:18px 46px 30px 12px}.badge-blob{inset:24px 50px 28px 12px}.badge-main-photo{width:90%;height:280px;margin-left:4px;border-width:6px;transform:none}.badge-detail-photo{right:0;top:34px;width:120px;height:175px;border-width:6px}.badge-ribbon{right:0;bottom:8px;max-width:245px;font-size:.8rem}.floating-badge{display:none}
  .mentor-stage{padding:8px 0}.mentor-blob{border-radius:28px}.mentor-blob img{height:300px}.mentor-pills{position:static;width:100%;grid-template-columns:1fr 1fr;margin-top:14px;transform:none}.mentor-pills span{padding:13px 12px 13px 38px;font-size:.76rem}.mentor-pills span::before{left:12px;width:14px;height:14px}
  .closing-section,.closing-inner{min-height:700px}.closing-inner{grid-template-columns:1fr;align-content:end;padding:90px 0 50px}.closing-copy h2{font-size:clamp(2.8rem,12vw,3.8rem)}
}

@media(max-width:460px){
  .skill-card{grid-template-columns:minmax(0,1.2fr) 92px}.skill-text{padding:14px 8px 12px 14px}.skill-card h3{font-size:.95rem}.skill-card p{font-size:.72rem}.mentor-pills{grid-template-columns:1fr}
}

/* ==========================================================
   INSIGNIAS · GALERÍA CUADRADA
   Una sola fila visual, sin copy dentro de las fotos.
   ========================================================== */
.badge-gallery-section{
  position:relative;
  overflow:hidden;
  padding:78px 0 86px;
  background:#fff;
}

.badge-gallery-wrap{
  position:relative;
  z-index:2;
}

.badge-gallery-heading{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
  align-items:end;
  gap:72px;
  margin-bottom:44px;
}

.badge-gallery-title h2{
  max-width:620px;
  margin:0 0 14px;
  font-size:var(--about-h2-size);
  line-height:.94;
  letter-spacing:-.045em;
}

.badge-highlight{
  position:relative;
  display:inline-block;
  color:var(--blue-bright);
}

.badge-highlight::after{
  content:"";
  position:absolute;
  left:50%;
  right:auto;
  bottom:-10px;
  width:92%;
  height:6px;
  border-radius:999px;
  background:var(--yellow);
  transform:translateX(-50%) rotate(1.5deg);
  transform-origin:center;
}

.badge-gallery-heading>p{
  max-width:570px;
  margin:0 0 5px auto;
  color:#5D6E91;
  font-size:1.05rem;
  line-height:1.55;
}

.badge-photo-row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  align-items:center;
  padding:18px 4px 24px;
}

.badge-square{
  position:relative;
  z-index:2;
  margin:0;
  overflow:visible;
}

.badge-photo-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:7px solid #fff;
  border-radius:24px;
  background:#EAF3FC;
  box-shadow:0 16px 34px rgba(24,53,108,.12);
}

.badge-square img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.badge-square-1{transform:rotate(-3deg) translateY(8px)}
.badge-square-2{transform:rotate(2deg) translateY(22px)}
.badge-square-3{transform:rotate(-1.5deg) translateY(0)}
.badge-square-4{transform:rotate(2.5deg) translateY(20px)}
.badge-square-5{transform:rotate(-2deg) translateY(6px)}

.badge-square-1 img{object-position:52% 48%}
.badge-square-2 img{object-position:52% 52%}
.badge-square-3 img{object-position:50% 48%}
.badge-square-4 img{object-position:48% 52%}
.badge-square-5 img{object-position:center 42%}

@media(hover:hover){
  .badge-square:hover img{transform:scale(1.035)}
}

.badge-tape{
  position:absolute;
  z-index:6;
  top:-24px;
  left:50%;
  width:88px;
  height:28px;
  opacity:.94;
  transform:translateX(-50%) rotate(-4deg);
  clip-path:polygon(3% 10%,97% 0,100% 88%,5% 100%);
  box-shadow:0 3px 5px rgba(24,53,108,.05);
}

.badge-tape-yellow{background:rgba(249,202,50,.96)}
.badge-tape-blue{background:rgba(45,127,249,.84)}

.badge-square-1 .badge-tape{transform:translateX(-50%) rotate(-6deg)}
.badge-square-2 .badge-tape{transform:translateX(-50%) rotate(3deg)}
.badge-square-3 .badge-tape{transform:translateX(-50%) rotate(-3deg)}
.badge-square-4 .badge-tape{transform:translateX(-50%) rotate(4deg)}
.badge-square-5 .badge-tape{transform:translateX(-50%) rotate(-5deg)}

.badge-doodle{
  position:absolute;
  z-index:1;
  pointer-events:none;
}

.badge-doodle-rays{
  left:-20px;
  top:-4px;
  width:74px;
  height:74px;
  background:
    linear-gradient(68deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 0 12px/28px 48px no-repeat,
    linear-gradient(88deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 28px 0/24px 52px no-repeat,
    linear-gradient(108deg,transparent 45%,#F9CA32 46% 51%,transparent 52%) 50px 12px/22px 44px no-repeat;
}

.badge-doodle-route{
  right:-8px;
  top:-8px;
  width:92px;
  height:68px;
  border-top:4px dashed #2D7FF9;
  border-radius:50%;
  transform:rotate(14deg);
}

@media(max-width:1100px){
  .badge-gallery-section{padding:70px 0 78px}
  .badge-gallery-heading{grid-template-columns:1fr;gap:16px;margin-bottom:34px}
  .badge-gallery-heading>p{max-width:650px;margin-left:0}
.badge-highlight::after{left:50%;right:auto;width:92%;transform:translateX(-50%) rotate(1.5deg)}
  .badge-photo-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px}
  .badge-square-1,.badge-square-2,.badge-square-3,.badge-square-4,.badge-square-5{transform:none}
  .badge-square-4{grid-column:1 / 2}
  .badge-square-5{grid-column:2 / 3}
}

@media(max-width:720px){
  .badge-gallery-section{padding:58px 0 64px}
.badge-highlight::after{left:50%;right:auto;width:90%;height:5px;bottom:-8px;transform:translateX(-50%) rotate(1.5deg)}
  .badge-gallery-heading>p{font-size:.96rem;line-height:1.5}
  .badge-photo-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-top:8px}
  .badge-photo-frame{border-width:5px;border-radius:18px}
  .badge-square-5{grid-column:1 / 3;width:calc(50% - 7px);justify-self:center}
  .badge-tape{width:70px;height:22px;top:-19px}
  .badge-doodle{display:none}
}

/* V11 · ajuste fino insignias: diurex exterior + subrayado centrado */
.badge-photo-row{padding-top:30px}
.badge-square{isolation:isolate}
.badge-tape{pointer-events:none}
.badge-photo-frame{z-index:2}
.badge-tape{z-index:5}
.badge-highlight{padding-bottom:2px}

@media(max-width:720px){
  .badge-photo-row{padding-top:24px}
}

/* ==========================================================
   V12 · TAPE COMPARTIDO + HABILIDADES CON MAYOR CARACTER
   ========================================================== */

/* En Conócenos, el tape de la foto de amistad conserva su escala propia.
   El resto reutiliza el elemento .tape del styles.css de Home. */
.friends-visual > .tape{
  top:-26px;
  width:150px;
  height:40px;
}

/* Galería de insignias: el diurex vuelve a tocar y montar el marco,
   exactamente como los polaroids de Home. */
.badge-photo-row{padding-top:24px}
.badge-square > .tape{
  top:-13px;
  left:50%;
  width:86px;
  height:27px;
  z-index:7;
  opacity:.94;
  pointer-events:none;
}
.badge-square-1 > .tape{transform:translateX(-50%) rotate(-6deg)}
.badge-square-2 > .tape{transform:translateX(-50%) rotate(3deg)}
.badge-square-3 > .tape{transform:translateX(-50%) rotate(-3deg)}
.badge-square-4 > .tape{transform:translateX(-50%) rotate(4deg)}
.badge-square-5 > .tape{transform:translateX(-50%) rotate(-5deg)}

/* Banda de habilidades: cards más visuales, sin apariencia de botón/link. */
.capability-cards{
  position:relative;
  gap:16px;
}
.capability-cards::before{
  content:"";
  position:absolute;
  z-index:3;
  top:-28px;
  right:8px;
  width:56px;
  height:44px;
  pointer-events:none;
  background:
    linear-gradient(64deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 0 5px/18px 34px no-repeat,
    linear-gradient(90deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 19px 0/18px 38px no-repeat,
    linear-gradient(116deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 38px 6px/18px 32px no-repeat;
  transform:rotate(5deg);
}

.skill-card{
  --skill-accent:#2D7FF9;
  position:relative;
  isolation:isolate;
  min-height:154px;
  grid-template-columns:minmax(0,1.05fr) minmax(92px,.95fr);
  gap:0;
  padding:7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 34px rgba(4,24,57,.22);
  backdrop-filter:blur(12px);
}
.skill-card::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  top:26px;
  bottom:26px;
  width:4px;
  border-radius:0 999px 999px 0;
  background:var(--skill-accent);
  opacity:.95;
}
.skill-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-26px;
  top:-34px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,127,249,.09),rgba(45,127,249,0) 68%);
  pointer-events:none;
}
.skill-text{
  position:relative;
  z-index:2;
  padding:14px 10px 14px 15px;
  justify-content:center;
}
.skill-icon{
  position:relative;
  width:48px;
  height:48px;
  margin-bottom:10px;
  border-radius:17px;
  color:var(--skill-accent);
  background:#EAF3FF;
  box-shadow:inset 0 0 0 1px rgba(15,66,140,.05);
}
.skill-icon::after{
  content:"";
  position:absolute;
  right:-9px;
  top:-7px;
  width:18px;
  height:18px;
  opacity:.9;
  background:
    linear-gradient(62deg,transparent 46%,var(--skill-accent) 47% 53%,transparent 54%) 0 5px/7px 12px no-repeat,
    linear-gradient(90deg,transparent 46%,var(--skill-accent) 47% 53%,transparent 54%) 7px 0/6px 13px no-repeat,
    linear-gradient(118deg,transparent 46%,var(--skill-accent) 47% 53%,transparent 54%) 12px 5px/6px 11px no-repeat;
}
.skill-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.skill-card h3{
  margin:0 0 5px;
  color:#0D2A6B;
  font-size:1.04rem;
  line-height:1.04;
  letter-spacing:-.015em;
}
.skill-card p{
  margin:0;
  color:#5B7095;
  font-size:.78rem;
  line-height:1.28;
}
.skill-photo{
  position:relative;
  z-index:2;
  display:block;
  min-width:0;
  height:100%;
  min-height:140px;
  overflow:hidden;
  border-radius:18px;
  background:#DCEBFA;
}
.skill-photo img{
  width:100%;
  height:100%;
  min-height:140px;
  object-fit:cover;
  transition:none;
}

.skill-blue{--skill-accent:#2D7FF9}
.skill-pink{--skill-accent:#D7348C}
.skill-yellow{--skill-accent:#E9AA00}
.skill-green{--skill-accent:#169A73}
.skill-purple{--skill-accent:#7555DF}
.skill-sky{--skill-accent:#2188C8}
.skill-pink .skill-icon{color:var(--skill-accent);background:#FFE9F4}
.skill-yellow .skill-icon{color:var(--skill-accent);background:#FFF1BE}
.skill-green .skill-icon{color:var(--skill-accent);background:#DFF6ED}
.skill-purple .skill-icon{color:var(--skill-accent);background:#EFEAFF}
.skill-sky .skill-icon{color:var(--skill-accent);background:#E2F3FF}

@media(max-width:1100px){
  .skill-card{min-height:150px}
  .skill-photo,.skill-photo img{min-height:136px}
}

@media(max-width:720px){
  .badge-photo-row{padding-top:20px}
  .badge-square > .tape{top:-13px;width:76px;height:24px}
  .capability-cards::before{display:none}
  .skill-card{grid-template-columns:minmax(0,1fr) 124px;min-height:142px}
  .skill-text{padding:14px 10px 14px 15px}
  .skill-photo,.skill-photo img{min-height:128px}
}

/* ==========================================================
   HABILIDADES · V13 · PANEL ÚNICO / DESCANSO VISUAL
   Sustituye visualmente las seis tarjetas con fotografía.
   ========================================================== */
.capability-band{
  min-height:520px;
}

.capability-layout{
  min-height:520px;
  grid-template-columns:minmax(360px,.88fr) minmax(500px,1.12fr);
  gap:72px;
}

.capability-copy{
  max-width:570px;
}

.capability-copy h2{
  max-width:590px;
}

.capability-panel{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:visible;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  background:rgba(255,255,255,.965);
  box-shadow:0 22px 50px rgba(4,24,57,.22);
  backdrop-filter:blur(14px);
}

.capability-panel::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:0;
  border:1px solid rgba(31,83,156,.04);
  border-radius:21px;
  pointer-events:none;
}

.capability-doodle{
  position:absolute;
  z-index:3;
  top:-28px;
  right:30px;
  width:60px;
  height:44px;
  pointer-events:none;
  background:
    linear-gradient(63deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 0 8px/18px 32px no-repeat,
    linear-gradient(90deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 21px 0/18px 38px no-repeat,
    linear-gradient(117deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 42px 8px/18px 30px no-repeat;
  transform:rotate(6deg);
}

.capability-item{
  --capability-color:#2D7FF9;
  position:relative;
  z-index:1;
  min-width:0;
  min-height:104px;
  display:grid;
  grid-template-columns:50px 1fr;
  align-items:center;
  gap:14px;
  padding:18px 20px;
}

.capability-item:nth-of-type(2n){
  border-left:1px solid #E7EDF6;
}

.capability-item:nth-of-type(-n+4){
  border-bottom:1px solid #E7EDF6;
}

.capability-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:var(--capability-color);
  background:color-mix(in srgb,var(--capability-color) 11%,#fff);
}

.capability-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.capability-item h3{
  margin:0 0 4px;
  color:#0D2A6B;
  font-size:1.02rem;
  line-height:1.08;
  letter-spacing:-.018em;
}

.capability-item p{
  margin:0;
  color:#667A9D;
  font-size:.79rem;
  line-height:1.35;
}

.capability-item-blue{--capability-color:#2D7FF9}
.capability-item-pink{--capability-color:#D7348C}
.capability-item-yellow{--capability-color:#E2A500}
.capability-item-green{--capability-color:#169A73}
.capability-item-purple{--capability-color:#7555DF}
.capability-item-sky{--capability-color:#2188C8}

/* Anula la versión anterior de tarjetas individuales */
.capability-cards,
.skill-card{
  display:none!important;
}

@media(max-width:1100px){
  .capability-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .capability-panel{
    width:min(100%,820px);
  }
}

@media(max-width:720px){
  .capability-band{min-height:auto}
  .capability-layout{min-height:auto;padding-top:58px;padding-bottom:58px}
  .capability-panel{
    grid-template-columns:1fr;
    padding:8px 16px;
    border-radius:24px;
  }
  .capability-doodle{display:none}
  .capability-item{
    min-height:86px;
    grid-template-columns:44px 1fr;
    gap:12px;
    padding:15px 6px;
    border-left:0!important;
    border-bottom:1px solid #E7EDF6;
  }
  .capability-item:last-child{border-bottom:0}
  .capability-icon{width:42px;height:42px;border-radius:14px}
  .capability-icon svg{width:23px;height:23px}
  .capability-item h3{font-size:1rem}
  .capability-item p{font-size:.78rem}
}

/* Fallback si color-mix no está disponible */
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .capability-item-blue .capability-icon{background:#EAF3FF}
  .capability-item-pink .capability-icon{background:#FFE9F4}
  .capability-item-yellow .capability-icon{background:#FFF1BE}
  .capability-item-green .capability-icon{background:#DFF6ED}
  .capability-item-purple .capability-icon{background:#EFEAFF}
  .capability-item-sky .capability-icon{background:#E2F3FF}
}


/* ==========================================================
   V15 · JERARQUÍA TIPOGRÁFICA HOMOLOGADA CON HOME
   Los H2 editoriales toman la escala de .scout-title-block h2.
   ========================================================== */
.conocenos-page .story-copy h2,
.conocenos-page .badge-gallery-title h2{
  font-size:clamp(2.55rem,3.7vw,3.8rem);
  line-height:.94;
  letter-spacing:-.045em;
}

.conocenos-page .capability-copy h2{
  font-size:clamp(3rem,4vw,4.2rem);
  line-height:.93;
}

@media(max-width:720px){
  .conocenos-page .story-copy h2,
  .conocenos-page .badge-gallery-title h2{
    font-size:clamp(2.45rem,12vw,3.4rem);
    line-height:.94;
  }

  .conocenos-page .capability-copy h2{
    font-size:clamp(2.7rem,12vw,3.6rem);
    line-height:.93;
  }
}

/* ==========================================================
   V16 · HABILIDADES · MOSAICO EDITORIAL / MENOS CORPORATIVO
   Mantiene el descanso visual pero elimina el efecto "tabla".
   ========================================================== */
.conocenos-page .capability-band{
  min-height:540px;
}

.conocenos-page .capability-layout{
  min-height:540px;
  grid-template-columns:minmax(360px,.86fr) minmax(590px,1.14fr);
  gap:58px;
}

.conocenos-page .capability-copy h2{
  max-width:610px;
  font-size:clamp(3.15rem,4.15vw,4.35rem);
  line-height:.92;
}

.conocenos-page .capability-copy h2 span{
  position:relative;
  display:inline-block;
}

.conocenos-page .capability-copy h2 span::after{
  content:"";
  position:absolute;
  left:4%;
  bottom:-10px;
  width:62%;
  height:5px;
  border-radius:99px;
  background:var(--yellow);
  transform:rotate(-2deg);
}

.conocenos-page .capability-mosaic{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  overflow:visible;
  padding:18px 10px 28px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  isolation:isolate;
}

.conocenos-page .capability-mosaic::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:7% 0 8% 3%;
  border-radius:44% 56% 49% 51% / 46% 42% 58% 54%;
  background:rgba(223,239,255,.13);
  transform:rotate(-2deg);
  pointer-events:none;
}

.conocenos-page .capability-mosaic::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:9%;
  right:5%;
  bottom:2px;
  height:42px;
  opacity:.82;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 42' preserveAspectRatio='none'%3E%3Cpath d='M4 20c70-14 98 15 158 10 68-6 73-24 140-13 64 11 94 24 158 8 78-20 130-4 236 4' fill='none' stroke='%232D7FF9' stroke-width='3' stroke-linecap='round' stroke-dasharray='10 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
}

.conocenos-page .capability-mosaic .capability-panel::before{
  display:none;
}

.conocenos-page .capability-mosaic .capability-item{
  --capability-color:#2D7FF9;
  position:relative;
  z-index:2;
  min-width:0;
  min-height:142px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:0;
  padding:19px 18px 17px;
  border:1px solid rgba(255,255,255,.76)!important;
  border-radius:22px;
  background:rgba(255,255,255,.965);
  box-shadow:0 14px 30px rgba(3,27,65,.16);
  backdrop-filter:blur(8px);
  transform-origin:center;
}

.conocenos-page .capability-mosaic .capability-item:nth-of-type(1){transform:rotate(-1.2deg) translateY(5px)}
.conocenos-page .capability-mosaic .capability-item:nth-of-type(2){transform:rotate(.7deg) translateY(-3px)}
.conocenos-page .capability-mosaic .capability-item:nth-of-type(3){transform:rotate(-.45deg) translateY(7px)}
.conocenos-page .capability-mosaic .capability-item:nth-of-type(4){transform:rotate(.55deg) translateY(-1px)}
.conocenos-page .capability-mosaic .capability-item:nth-of-type(5){transform:rotate(-.8deg) translateY(5px)}
.conocenos-page .capability-mosaic .capability-item:nth-of-type(6){transform:rotate(.9deg) translateY(-2px)}

.conocenos-page .capability-mosaic .capability-item::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:4px;
  border-radius:99px 99px 20px 20px;
  background:var(--capability-color);
  opacity:.92;
}

.conocenos-page .capability-mosaic .capability-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin:0 0 13px;
  border-radius:14px 18px 13px 17px;
  color:var(--capability-color);
  background:color-mix(in srgb,var(--capability-color) 11%,#fff);
  transform:rotate(-2deg);
}

.conocenos-page .capability-mosaic .capability-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.conocenos-page .capability-mosaic .capability-item h3{
  margin:0 0 6px;
  color:#0D2A6B;
  font-size:1.05rem;
  line-height:1.04;
  letter-spacing:-.02em;
}

.conocenos-page .capability-mosaic .capability-item p{
  margin:0;
  color:#64789C;
  font-size:.79rem;
  line-height:1.36;
}

.conocenos-page .capability-doodle-rays{
  top:-4px;
  right:5%;
  width:62px;
  height:46px;
  background:
    linear-gradient(61deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 0 8px/18px 32px no-repeat,
    linear-gradient(90deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 22px 0/18px 38px no-repeat,
    linear-gradient(118deg,transparent 46%,#F9CA32 47% 53%,transparent 54%) 44px 8px/18px 30px no-repeat;
  transform:rotate(5deg);
}

.conocenos-page .capability-doodle-route{
  display:none;
}

.conocenos-page .capability-doodle-tree{
  position:absolute;
  z-index:0;
  left:-34px;
  bottom:18px;
  width:78px;
  height:90px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 90'%3E%3Cpath d='M27 82V57M27 57 12 68M27 57 16 52M27 57 37 68M27 57 39 49M56 84V65M56 65 45 73M56 65 48 59M56 65 66 74M56 65 67 56' fill='none' stroke='%23149A72' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27 11 12 39h9L9 56h36L33 39h9L27 11ZM56 28 45 49h7l-8 14h25l-8-14h7L56 28Z' fill='none' stroke='%23149A72' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  opacity:.92;
}

@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .conocenos-page .capability-mosaic .capability-item-blue .capability-icon{background:#EAF3FF}
  .conocenos-page .capability-mosaic .capability-item-pink .capability-icon{background:#FFE9F4}
  .conocenos-page .capability-mosaic .capability-item-yellow .capability-icon{background:#FFF1BE}
  .conocenos-page .capability-mosaic .capability-item-green .capability-icon{background:#DFF6ED}
  .conocenos-page .capability-mosaic .capability-item-purple .capability-icon{background:#EFEAFF}
  .conocenos-page .capability-mosaic .capability-item-sky .capability-icon{background:#E2F3FF}
}

@media(max-width:1100px){
  .conocenos-page .capability-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .conocenos-page .capability-mosaic{
    width:min(100%,900px);
  }
}

@media(max-width:720px){
  .conocenos-page .capability-copy h2{
    font-size:clamp(2.85rem,12.5vw,3.75rem);
  }
  .conocenos-page .capability-mosaic{
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:12px 0 18px;
  }
  .conocenos-page .capability-mosaic .capability-item,
  .conocenos-page .capability-mosaic .capability-item:nth-of-type(n){
    min-height:128px;
    padding:16px 14px;
    transform:none;
  }
  .conocenos-page .capability-mosaic .capability-icon{width:38px;height:38px;margin-bottom:10px}
  .conocenos-page .capability-doodle-rays,
  .conocenos-page .capability-doodle-tree{display:none}
}

@media(max-width:460px){
  .conocenos-page .capability-mosaic{grid-template-columns:1fr}
  .conocenos-page .capability-mosaic .capability-item{min-height:106px}
}

/* ==========================================================
   V17 · HABILIDADES · LUMINOSO / JUVENIL / MENOS CORPORATIVO
   Reduce el contraste azul profundo + blanco y usa fondos pastel.
   ========================================================== */
.conocenos-page .capability-band{
  min-height:540px;
  background:#F7FBFF;
}

.conocenos-page .capability-bg{
  filter:saturate(.92) brightness(1.1);
  object-position:center 48%;
}

.conocenos-page .capability-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.88) 32%,
      rgba(247,252,255,.66) 48%,
      rgba(247,252,255,.34) 68%,
      rgba(247,252,255,.16) 100%
    );
}

.conocenos-page .capability-layout{
  min-height:540px;
  grid-template-columns:minmax(380px,.9fr) minmax(590px,1.1fr);
  gap:54px;
}

.conocenos-page .capability-copy{
  max-width:600px;
}

.conocenos-page .capability-copy .eyebrow{
  color:#E2A500;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.conocenos-page .capability-copy h2{
  max-width:620px;
  margin:0 0 22px;
  color:var(--ink);
  font-size:clamp(3.15rem,4.15vw,4.35rem);
  line-height:.92;
  letter-spacing:-.05em;
}

.conocenos-page .capability-copy h2 span{
  color:var(--blue-bright);
}

.conocenos-page .capability-copy p{
  max-width:575px;
  margin:0;
  color:#274A7D;
  font-size:1.04rem;
  line-height:1.62;
}

/* Mosaico sin panel blanco general */
.conocenos-page .capability-mosaic{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding:18px 10px 30px;
  background:transparent;
  box-shadow:none;
}

.conocenos-page .capability-mosaic::before{
  inset:8% 2% 7% 2%;
  background:rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 22px 56px rgba(50,91,130,.06);
}

/* Ruta suave, secundaria */
.conocenos-page .capability-mosaic::after{
  left:12%;
  right:2%;
  bottom:0;
  height:38px;
  opacity:.72;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 42' preserveAspectRatio='none'%3E%3Cpath d='M4 20c70-14 98 15 158 10 68-6 73-24 140-13 64 11 94 24 158 8 78-20 130-4 236 4' fill='none' stroke='%232D7FF9' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='9 11'/%3E%3C/svg%3E");
}

.conocenos-page .capability-mosaic .capability-item{
  --capability-color:#2D7FF9;
  --capability-card:#EEF6FF;
  min-height:145px;
  padding:19px 18px 17px;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:24px;
  background:var(--capability-card);
  box-shadow:
    0 16px 30px rgba(39,76,116,.11),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(5px);
}

.conocenos-page .capability-mosaic .capability-item::after{
  left:18px;
  right:18px;
  height:4px;
  background:var(--capability-color);
  opacity:.72;
}

.conocenos-page .capability-mosaic .capability-icon{
  width:42px;
  height:42px;
  margin-bottom:12px;
  border:1px solid color-mix(in srgb,var(--capability-color) 14%,transparent);
  border-radius:15px 18px 14px 17px;
  color:var(--capability-color);
  background:color-mix(in srgb,var(--capability-color) 10%,#fff);
  box-shadow:0 5px 14px color-mix(in srgb,var(--capability-color) 9%,transparent);
}

.conocenos-page .capability-mosaic .capability-item h3{
  margin:0 0 5px;
  color:#14346F;
  font-size:1.06rem;
  line-height:1.06;
}

.conocenos-page .capability-mosaic .capability-item p{
  color:#61769B;
  font-size:.79rem;
  line-height:1.36;
}

/* Cada habilidad tiene su propio tono pastel */
.conocenos-page .capability-mosaic .capability-item-blue{
  --capability-color:#2D7FF9;
  --capability-card:linear-gradient(165deg,rgba(241,248,255,.97),rgba(230,243,255,.93));
}
.conocenos-page .capability-mosaic .capability-item-pink{
  --capability-color:#E43C8A;
  --capability-card:linear-gradient(165deg,rgba(255,245,250,.97),rgba(255,232,243,.93));
}
.conocenos-page .capability-mosaic .capability-item-yellow{
  --capability-color:#E7A800;
  --capability-card:linear-gradient(165deg,rgba(255,252,238,.98),rgba(255,244,203,.94));
}
.conocenos-page .capability-mosaic .capability-item-green{
  --capability-color:#18A078;
  --capability-card:linear-gradient(165deg,rgba(242,253,248,.98),rgba(222,247,237,.94));
}
.conocenos-page .capability-mosaic .capability-item-purple{
  --capability-color:#7957E7;
  --capability-card:linear-gradient(165deg,rgba(249,246,255,.98),rgba(237,230,255,.94));
}
.conocenos-page .capability-mosaic .capability-item-sky{
  --capability-color:#1E9BDA;
  --capability-card:linear-gradient(165deg,rgba(242,251,255,.98),rgba(221,242,255,.94));
}

/* Doodles más ligeros para acompañar, no competir */
.conocenos-page .capability-doodle-rays{
  opacity:.78;
}
.conocenos-page .capability-doodle-tree{
  left:-24px;
  bottom:22px;
  opacity:.72;
}

@media(max-width:1100px){
  .conocenos-page .capability-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .conocenos-page .capability-copy{
    max-width:690px;
  }
  .conocenos-page .capability-mosaic{
    width:min(100%,900px);
  }
}

@media(max-width:720px){
  .conocenos-page .capability-overlay{
    background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(247,252,255,.80) 54%,rgba(247,252,255,.52) 100%);
  }
  .conocenos-page .capability-copy h2{
    font-size:clamp(2.85rem,12.5vw,3.75rem);
  }
  .conocenos-page .capability-copy p{
    color:#365A88;
  }
  .conocenos-page .capability-mosaic{
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:12px 0 18px;
  }
  .conocenos-page .capability-mosaic .capability-item,
  .conocenos-page .capability-mosaic .capability-item:nth-of-type(n){
    min-height:128px;
    padding:16px 14px;
    transform:none;
  }
}

@media(max-width:460px){
  .conocenos-page .capability-mosaic{grid-template-columns:1fr}
  .conocenos-page .capability-mosaic .capability-item{min-height:106px}
}

/* ==========================================================
   V19 · CIERRE COMPACTO
   Solo mensaje final sobre fotografía. Sin CTA secundario.
   ========================================================== */
.closing-section{
  min-height:460px;
}
.closing-section>img{
  object-position:center 48%;
}
.closing-overlay{
  background:linear-gradient(90deg,rgba(11,31,67,.88) 0%,rgba(11,31,67,.64) 44%,rgba(11,31,67,.28) 72%,rgba(11,31,67,.08) 100%);
}
.closing-inner{
  min-height:460px;
  display:flex;
  align-items:center;
  padding:58px 0;
}
.closing-copy{
  max-width:760px;
}
.closing-copy h2{
  margin:8px 0 18px;
}
.closing-copy p{
  max-width:720px;
}
.closing-copy p strong{
  display:block;
  margin-top:10px;
  color:#fff;
  font-weight:800;
}
.closing-card,
.closing-cta{
  display:none!important;
}

@media(max-width:1100px){
  .closing-section,
  .closing-inner{min-height:430px}
  .closing-inner{padding:54px 0}
}

@media(max-width:720px){
  .closing-section,
  .closing-inner{min-height:500px}
  .closing-inner{padding:70px 0 80px;align-items:flex-end}
  .closing-copy{max-width:100%}
}

/* ==========================================================
   CONOCENOS · MOBILE 2026 · LIMPIEZA DE CTA Y GALERIA
   ========================================================== */
@media (max-width:720px){
  /* "Hazlo realidad": en mobile la lectura continua directo a las tarjetas. */
  .conocenos-page .ideas-section .btn{
    display:none !important;
  }

  /* Corrige la herencia tablet que forzaba la cuarta foto a la columna 1. */
  .conocenos-page .badge-photo-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:start !important;
  }

  .conocenos-page .badge-square-1,
  .conocenos-page .badge-square-2,
  .conocenos-page .badge-square-3,
  .conocenos-page .badge-square-4{
    grid-column:auto !important;
    width:auto !important;
    justify-self:stretch !important;
    transform:none !important;
  }

  .conocenos-page .badge-square-5{
    grid-column:1 / -1 !important;
    width:calc(50% - 7px) !important;
    justify-self:center !important;
    transform:none !important;
  }

  /* Evita desplazamientos laterales residuales en composiciones mobile. */
  .conocenos-page .adventure-cards,
  .conocenos-page .idea-polaroids,
  .conocenos-page .travel-stage,
  .conocenos-page .footprint-collage,
  .conocenos-page .badge-stage,
  .conocenos-page .mentor-stage{
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .conocenos-page .idea-polaroid,
  .conocenos-page .idea-one,
  .conocenos-page .idea-two,
  .conocenos-page .idea-three{
    transform:none !important;
  }
}