/* RH México · Experience layer v5 */
:root{--ex-green:#22b88f;--ex-navy:#071a2c;--ex-soft:#f4f7f8;--ex-line:#dce6ea}

/* Ocultar mensajes internos de producción en la experiencia pública */
.media-card:after,.gallery-item:after{display:none!important;content:none!important}

/* Entrada progresiva */
[data-motion]{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
[data-motion].is-visible{opacity:1;transform:none}
[data-motion="left"]{transform:translateX(-28px)}
[data-motion="right"]{transform:translateX(28px)}
[data-motion="scale"]{transform:scale(.965)}

/* Métricas: convertir la información existente en módulos visuales */
.stat-row{gap:14px!important}
.stat{position:relative;overflow:hidden;border:1px solid var(--ex-line)!important;border-radius:18px;padding:22px 20px 20px!important;background:rgba(255,255,255,.82);min-height:128px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.stat:before{content:"";position:absolute;width:88px;height:88px;border:1px solid rgba(34,184,143,.28);border-radius:50%;right:-30px;top:-34px;transition:.35s ease}
.stat:after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--ex-green),transparent);transform:scaleX(.25);transform-origin:left;transition:.35s ease}
.stat:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(7,26,44,.1);border-color:rgba(34,184,143,.4)!important}
.stat:hover:before{transform:scale(1.2)}
.stat:hover:after{transform:scaleX(1)}
.stat b{font-size:clamp(34px,5vw,52px)!important;line-height:1!important;letter-spacing:-.055em}
.stat span{margin-top:12px;display:block;line-height:1.45}
.dark .stat{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)!important}
.dark .stat:hover{border-color:rgba(120,217,189,.45)!important;box-shadow:0 18px 44px rgba(0,0,0,.18)}

/* Proceso: cards conectadas, reactivas y animadas */
.process{gap:14px!important;position:relative}
.process:before{content:"";position:absolute;left:4%;right:4%;top:22px;height:1px;background:linear-gradient(90deg,transparent,var(--ex-green),var(--ex-green),transparent);opacity:.28;pointer-events:none}
.step{position:relative;z-index:1;border:1px solid var(--ex-line)!important;border-radius:20px;padding:26px 22px!important;background:#fff;min-height:190px;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.step:before{content:"";position:absolute;inset:auto -45px -70px auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(34,184,143,.14),transparent 68%);transition:.35s ease}
.step b{display:grid!important;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ex-navy);color:#fff!important;margin:0 0 26px!important;box-shadow:0 0 0 7px rgba(34,184,143,.1);font-size:11px!important}
.step strong{display:block;font-size:20px!important;letter-spacing:-.025em;margin-bottom:10px}
.step p{font-size:13px!important;margin:0;line-height:1.65!important}
.step:hover,.step.is-active{transform:translateY(-7px);border-color:rgba(34,184,143,.55)!important;box-shadow:0 20px 48px rgba(7,26,44,.1)}
.step:hover:before,.step.is-active:before{transform:scale(1.35)}
.step:hover b,.step.is-active b{background:var(--ex-green);color:var(--ex-navy)!important}
.dark .step{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.13)!important}
.dark .step strong{color:#fff!important}.dark .step p{color:#b9c7cf!important}.dark .step b{background:var(--ex-green);color:var(--ex-navy)!important}

/* Los procesos que viven dentro de una columna de .grid2 no deben intentar mostrar 4 cards en una sola fila. */
.grid2 .process{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;min-width:0}
.grid2 .process:before{display:none!important}
.grid2 .process .step{min-width:0!important;min-height:190px;padding:24px 20px!important}
.grid2 .process .step strong{display:block!important;font-size:clamp(17px,1.45vw,20px)!important;line-height:1.18!important;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.grid2 .process .step p{overflow-wrap:anywhere;word-break:normal}

/* Carrusel de organizaciones */
.client-section{position:relative;overflow:hidden;background:#fff;border-top:1px solid var(--ex-line);border-bottom:1px solid var(--ex-line)}
.client-section.dark-clients{background:var(--ex-navy);border-color:rgba(255,255,255,.1);color:#fff}
.client-heading{display:grid;grid-template-columns:1fr .8fr;gap:44px;align-items:end;margin-bottom:34px}
.client-heading .lead{justify-self:end;max-width:560px}
.client-marquee{position:relative;overflow:hidden;padding:10px 0 8px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.client-track{display:flex;width:max-content;gap:12px;animation:clientLoop 34s linear infinite;will-change:transform}
.client-marquee:hover .client-track{animation-play-state:paused}
.client-card{position:relative;display:flex;align-items:center;justify-content:center;min-width:220px;height:108px;padding:18px 22px;border:1px solid var(--ex-line);border-radius:18px;background:#fff;color:var(--ex-navy);font-size:15px;font-weight:800;letter-spacing:.02em;text-align:center;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.client-card:before{content:"";position:absolute;top:14px;left:14px;width:7px;height:7px;border-radius:50%;background:var(--ex-green);opacity:.8}
.client-card:hover{transform:translateY(-4px);border-color:rgba(34,184,143,.55);box-shadow:0 14px 34px rgba(7,26,44,.08)}
.dark-clients .client-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);color:#fff}
.dark-clients .client-card:hover{border-color:rgba(120,217,189,.5);box-shadow:0 16px 36px rgba(0,0,0,.2)}
@keyframes clientLoop{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}

/* Tarjetas de storytelling */
.story-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.story-kicker{position:sticky;top:120px}
.story-kicker .story-index{font-size:clamp(86px,14vw,180px);line-height:.72;font-weight:800;letter-spacing:-.08em;color:rgba(34,184,143,.18);margin-bottom:28px}
.story-chapters{display:grid;gap:18px}
.story-card{position:relative;border:1px solid var(--ex-line);border-radius:24px;padding:30px 30px 30px 84px;background:#fff;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.story-card:hover{transform:translateX(8px);border-color:rgba(34,184,143,.5);box-shadow:0 20px 48px rgba(7,26,44,.08)}
.story-card .story-num{position:absolute;left:24px;top:29px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ex-navy);color:#fff;font-size:10px;font-weight:800;transition:.3s ease}
.story-card:hover .story-num{background:var(--ex-green);color:var(--ex-navy);transform:rotate(-8deg) scale(1.08)}
.story-card h3{margin:0 0 8px;color:var(--ex-navy);font-size:24px;letter-spacing:-.035em}
.story-card p{margin:0;color:#687783;line-height:1.7;font-size:14px}

/* Story mosaic */
.story-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:130px;gap:14px;margin-top:42px}
.story-panel{position:relative;overflow:hidden;border-radius:24px;background:var(--ex-navy);min-height:260px}
.story-panel:nth-child(1){grid-column:span 7;grid-row:span 4}.story-panel:nth-child(2){grid-column:span 5;grid-row:span 3}.story-panel:nth-child(3){grid-column:span 5;grid-row:span 3}.story-panel:nth-child(4){grid-column:span 7;grid-row:span 4}
.story-panel img{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:saturate(.9)}
.story-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,26,44,.9))}
.story-panel:hover img{transform:scale(1.055)}
.story-caption{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}
.story-caption span{display:block;color:var(--ex-green2,#78d9bd);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.story-caption h3{margin:0;font-size:clamp(21px,3vw,34px);line-height:1.04;letter-spacing:-.045em}
.story-caption p{margin:8px 0 0;color:#d2dde2;max-width:520px;font-size:12px;line-height:1.55}

/* Feature cards para añadir profundidad visual */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.feature-card{position:relative;border-radius:22px;padding:28px;background:var(--ex-soft);border:1px solid var(--ex-line);overflow:hidden;transition:.3s ease}
.feature-card:before{content:"";position:absolute;right:-35px;top:-35px;width:110px;height:110px;border-radius:50%;border:1px solid rgba(34,184,143,.3);transition:.35s ease}
.feature-card:hover{transform:translateY(-6px);background:#fff;box-shadow:0 18px 44px rgba(7,26,44,.08)}
.feature-card:hover:before{transform:scale(1.3)}
.feature-card b{display:block;color:var(--ex-green);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.feature-card h3{margin:0 0 9px;color:var(--ex-navy);font-size:23px;letter-spacing:-.035em}
.feature-card p{margin:0;color:#687783;font-size:13px;line-height:1.65}

/* Video placeholders menos 'vacíos': composición editorial */
.video-slot{background:radial-gradient(circle at 20% 15%,rgba(34,184,143,.16),transparent 30%),linear-gradient(145deg,#edf3f4,#fff)!important;box-shadow:inset 0 0 0 1px rgba(7,26,44,.035)}
.video-slot:after{content:"RH MÉXICO · EXPERIENCIA";position:absolute;left:22px;top:20px;color:#6c7d87;font-size:8px;font-weight:800;letter-spacing:.14em}
.video-slot:before{transition:transform .3s ease,background .3s ease!important}
.video-slot:hover:before{transform:scale(1.08);background:var(--ex-green)!important;color:var(--ex-navy)!important}

/* Mejorar galería clásica en caso de mantenerse */
.gallery{gap:16px!important}.gallery-item{border-radius:22px!important}.gallery-item img{filter:saturate(.92)}

@media(max-width:980px){
  .client-heading,.story-intro{grid-template-columns:1fr;gap:28px}
  .client-heading .lead{justify-self:start}
  .story-kicker{position:static}
  .story-kicker .story-index{font-size:110px}
  .feature-grid{grid-template-columns:1fr 1fr}
  .story-mosaic{grid-auto-rows:110px}
  .grid2 .process{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  [data-motion]{opacity:1;transform:none}
  .stat-row{grid-template-columns:1fr!important}
  .stat{min-height:112px}
  .process,.grid2 .process{grid-template-columns:1fr!important;gap:14px!important}
  .process:before,.grid2 .process:before{display:none!important}
  .step,.grid2 .process .step{min-height:0!important;padding:24px!important}
  .step b{margin-bottom:20px!important}
  .client-section{padding-top:72px!important;padding-bottom:72px!important}
  .client-card{min-width:178px;height:94px;font-size:13px}
  .client-track{animation-duration:28s}
  .feature-grid{grid-template-columns:1fr}
  .story-card{padding:26px 22px 26px 72px}.story-card .story-num{left:18px;top:25px}
  .story-mosaic{display:grid;grid-template-columns:1fr;grid-auto-rows:auto}
  .story-panel,.story-panel:nth-child(n){grid-column:auto;grid-row:auto;min-height:360px}
  .story-caption{left:20px;right:20px;bottom:20px}
}
@media(prefers-reduced-motion:reduce){
  [data-motion]{opacity:1!important;transform:none!important;transition:none!important}
  .client-track{animation:none!important}
}