/* =====================================================================
   KETIN 2.0 — PERSON DETAIL HERO (kem2-person-hero.css) · v1.0.0
   2026-07-20 · Default fiel a la sección "Founder" de la maqueta ZIHT
   (section.navy + grid cols-2 + stamp, style.css v3).
   Sin !important: los controles de Divi ganan siempre.
   ===================================================================== */

.kem2-ph{
  position:relative; overflow:hidden;
  padding:80px 0;
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65;
}

/* ---------- fondos por identidad ---------- */
.kem2-ph-bg-ziht{ background:#080b26; color:#fff; }
.kem2-ph-bg-ptf{ background:#0e2015; color:#fff; }
.kem2-ph-bg-none{ background:transparent; color:#12131c; }
.kem2-ph-id-ptf{ font-family:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }

/* ---------- contenedor y grid ---------- */
.kem2-ph-container{
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto; padding:0 40px;
}
.kem2-ph-grid{ display:grid; gap:56px; align-items:center; }
.kem2-ph-cols-50{ grid-template-columns:1fr 1fr; }
.kem2-ph-cols-45{ grid-template-columns:45fr 55fr; }
.kem2-ph-cols-40{ grid-template-columns:40fr 60fr; }
.kem2-ph-media-right .kem2-ph-media{ order:2; }
.kem2-ph-media-right .kem2-ph-inner{ order:1; }

/* ---------- eyebrow ---------- */
.kem2-ph-eye{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#b9b0ff; margin:0 0 14px;
}
.kem2-ph-bg-ptf .kem2-ph-eye{ color:#d9c896; }
.kem2-ph-bg-none .kem2-ph-eye{ color:#4800fe; }
.kem2-ph-eye-line{
  width:22px; height:1px; display:inline-block; flex:none;
  background:var(--kem2ph-eyeline,currentColor);
}

/* ---------- nombre / cargo / bio ---------- */
.kem2-ph-name{
  font-family:'Source Serif 4','Iowan Old Style',ui-serif,Georgia,serif;
  font-size:31px; font-weight:600; line-height:1.16; letter-spacing:-.008em;
  color:#fff; margin:0 0 .5em;
}
.kem2-ph-bg-none .kem2-ph-name{ color:#080b26; }
.kem2-ph-id-ptf .kem2-ph-name{ font-family:'Newsreader',ui-serif,Georgia,serif; font-weight:500; }

.kem2-ph-role{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#b9b0ff; margin:0 0 14px;
}
.kem2-ph-bg-ptf .kem2-ph-role{ color:#d9c896; }
.kem2-ph-bg-none .kem2-ph-role{ color:#4800fe; }

.kem2-ph-bio{
  color:#c9cbe8; margin:0 0 1.15em;
  max-width:var(--kem2ph-text-max,none);
}
.kem2-ph-bg-ptf .kem2-ph-bio{ color:#d7e6d5; }
.kem2-ph-bg-none .kem2-ph-bio{ color:#40424f; }

/* ---------- botones ---------- */
.kem2-ph-actions{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; }
.kem2-ph-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:13.5px; letter-spacing:.02em;
  padding:13px 24px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; text-decoration:none;
}
.kem2-ph-btn-primary{ background:#4800fe; color:#fff; }
.kem2-ph-btn-primary:hover{ background:#3800d1; color:#fff; }
.kem2-ph-bg-ptf .kem2-ph-btn-primary{ background:#a9781f; color:#1c1c10; }
.kem2-ph-bg-ptf .kem2-ph-btn-primary:hover{ background:#cfa955; }
.kem2-ph-btn-outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.kem2-ph-btn-outline:hover{ border-color:#fff; color:#fff; }
.kem2-ph-bg-none .kem2-ph-btn-outline{ border-color:#0b1140; color:#0b1140; }
.kem2-ph-btn-arrow{ display:inline-block; }
/* .kem2-ph-btn-native no declara nada: hereda el estilo de botón de Divi. */

/* ---------- labels ---------- */
.kem2-ph-labels{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.kem2-ph-label{
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:700;
  color:#c9cbe8;
  border:1px var(--kem2ph-label-style,solid) var(--kem2ph-label-border,#2a3080);
  padding:5px 11px; border-radius:var(--kem2ph-label-radius,20px);
  text-decoration:none;
}
.kem2-ph-bg-ptf .kem2-ph-label{ color:#cfe0cf; border-color:var(--kem2ph-label-border,#3a5a3a); }
.kem2-ph-bg-none .kem2-ph-label{ color:#40424f; border-color:var(--kem2ph-label-border,#dbdde6); }
a.kem2-ph-label:hover{ color:#fff; }
.kem2-ph-bg-none a.kem2-ph-label:hover{ color:#080b26; }

/* ---------- stamp ---------- */
.kem2-ph-stamp{
  display:inline-flex; align-items:center; gap:18px;
  margin-top:24px;
  padding:var(--kem2ph-stamp-pad,16px 22px);
  background:var(--kem2ph-stamp-bg,#0e1550);
  border:1px var(--kem2ph-stamp-style,solid) var(--kem2ph-stamp-border,#262c66);
  border-radius:var(--kem2ph-stamp-radius,0);
}
.kem2-ph-bg-ptf .kem2-ph-stamp{
  background:var(--kem2ph-stamp-bg,#16301f);
  border-color:var(--kem2ph-stamp-border,#3a5a3a);
}
.kem2-ph-bg-none .kem2-ph-stamp{
  background:var(--kem2ph-stamp-bg,#f4f4f8);
  border-color:var(--kem2ph-stamp-border,#dbdde6);
}
.kem2-ph-stamp-media{ flex:none; }
.kem2-ph-stamp-media img,
.kem2-ph-stamp-media .kem2-ph-ph-fallback{
  width:var(--kem2ph-stamp-img,74px);
  height:var(--kem2ph-stamp-img,74px);
  object-fit:contain; display:block;
}
.kem2-ph-stamp-body{ display:flex; flex-direction:column; }
.kem2-ph-stamp-title{
  display:block; font-size:12.5px; color:#fff; font-weight:700;
}
.kem2-ph-bg-none .kem2-ph-stamp-title{ color:#0b1140; }
.kem2-ph-stamp-text{
  font-size:11px; color:#9ba0d1; line-height:1.4;
}
.kem2-ph-bg-ptf .kem2-ph-stamp-text{ color:#a9c2a9; }
.kem2-ph-bg-none .kem2-ph-stamp-text{ color:#797c8c; }

/* ---------- media ---------- */
.kem2-ph-media{ position:relative; }
.kem2-ph-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.kem2-ph-ratio-portrait .kem2-ph-carousel,
.kem2-ph-ratio-portrait > img,
.kem2-ph-ratio-portrait > .kem2-ph-bgimg,
.kem2-ph-ratio-portrait > .kem2-ph-ph-fallback{ aspect-ratio:3/4; }
.kem2-ph-ratio-square .kem2-ph-carousel,
.kem2-ph-ratio-square > img,
.kem2-ph-ratio-square > .kem2-ph-bgimg,
.kem2-ph-ratio-square > .kem2-ph-ph-fallback{ aspect-ratio:1/1; }
.kem2-ph-ratio-wide .kem2-ph-carousel,
.kem2-ph-ratio-wide > img,
.kem2-ph-ratio-wide > .kem2-ph-bgimg,
.kem2-ph-ratio-wide > .kem2-ph-ph-fallback{ aspect-ratio:16/9; }
.kem2-ph-ratio-free .kem2-ph-media img{ height:auto; object-fit:unset; }
.kem2-ph-frame-solid > img,
.kem2-ph-frame-solid > .kem2-ph-bgimg,
.kem2-ph-frame-solid .kem2-ph-carousel{ border:1px solid var(--kem2ph-frame-color,rgba(255,255,255,.25)); }
.kem2-ph-frame-dashed > img,
.kem2-ph-frame-dashed > .kem2-ph-bgimg,
.kem2-ph-frame-dashed .kem2-ph-carousel{ border:1px dashed var(--kem2ph-frame-color,rgba(255,255,255,.25)); }
.kem2-ph-ph-fallback{ width:100%; background:#eceef4; }

/* imagen como fondo (cover / contain) */
.kem2-ph-bgimg{
  width:100%;
  background-repeat:no-repeat;
  background-position:var(--kem2ph-focal,center);
}
.kem2-ph-bgimg-cover{ background-size:cover; }
.kem2-ph-bgimg-contain{ background-size:contain; }

/* ---------- carrusel ---------- */
.kem2-ph-carousel{ position:relative; overflow:hidden; outline:none; }
.kem2-ph-slide{ position:absolute; inset:0; }
.kem2-ph-slide:first-child{ position:relative; }
.kem2-ph-slide img{ width:100%; height:100%; object-fit:cover; }

.kem2-ph-t-fade .kem2-ph-slide{ opacity:0; transition:opacity .6s ease; }
.kem2-ph-t-fade .kem2-ph-slide.is-active{ opacity:1; }
.kem2-ph-t-slide .kem2-ph-slide{ transform:translateX(100%); transition:transform .6s ease; }
.kem2-ph-t-slide .kem2-ph-slide.is-active{ transform:translateX(0); }
.kem2-ph-t-slide .kem2-ph-slide.is-prev{ transform:translateX(-100%); }
@media (prefers-reduced-motion:reduce){
  .kem2-ph-t-fade .kem2-ph-slide,
  .kem2-ph-t-slide .kem2-ph-slide{ transition:none; }
}

.kem2-ph-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:var(--kem2ph-arrow-size,38px); height:var(--kem2ph-arrow-size,38px);
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,11,38,.45); color:var(--kem2ph-arrow-color,#fff);
  border:none; border-radius:50%; cursor:pointer;
  font-size:calc(var(--kem2ph-arrow-size,38px) * .45); line-height:1;
}
.kem2-ph-arrow:hover{ background:rgba(8,11,38,.7); }
.kem2-ph-prev{ left:12px; }
.kem2-ph-next{ right:12px; }

.kem2-ph-dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.kem2-ph-dot{
  width:9px; height:9px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background:rgba(255,255,255,.35);
}
.kem2-ph-dot.is-active{ background:var(--kem2ph-arrow-color,#fff); }
.kem2-ph-bg-none .kem2-ph-dot{ background:#dbdde6; }
.kem2-ph-bg-none .kem2-ph-dot.is-active{ background:var(--kem2ph-arrow-color,#4800fe); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .kem2-ph-grid{ grid-template-columns:1fr; }
  .kem2-ph-media-right .kem2-ph-media{ order:1; }
  .kem2-ph-media-right .kem2-ph-inner{ order:2; }
}
@media (max-width:760px){
  .kem2-ph{ padding:56px 0; }
  .kem2-ph-container{ padding:0 24px; }
  .kem2-ph-name{ font-size:25px; }
  .kem2-ph-stamp{ gap:12px; }
}