/* ==========================================================
   R2LAB · Casos de éxito (página interna)
   Usa las variables y componentes de style.css
   ========================================================== */

/* Capa de color que cambia según la historia */
.tint { position: absolute; inset: 0; background: transparent; opacity: .6; }

/* Utilidades compartidas con la guía */
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 22px; }
.back-link span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); transition: transform .3s var(--ease); }
.back-link:hover span { transform: translateX(-3px); }
.scroll-cue { display: block; width: 26px; height: 42px; border: 2px solid rgba(21, 21, 27, .25); border-radius: 14px; margin-top: 30px; position: relative; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--coral); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.btn-ghost-dark { color: var(--white); border: 1px solid rgba(255, 255, 255, .3); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Hero ---------- */
.c-hero { max-width: 1120px; margin: 0 auto; padding: 40px var(--pad) 40px; display: grid; gap: 40px; align-items: center; }
.c-hero .pill-dark { display: flex; width: fit-content; }
.c-hero h1 { max-width: 12ch; }

/* Abanico de fotos */
.fan { position: relative; height: 360px; perspective: 1200px; }
.fan-card {
  position: absolute; left: 50%; top: 50%;
  width: 42%; max-width: 190px; aspect-ratio: 4 / 5;
  margin: 0; border-radius: 22px; overflow: hidden;
  border: 4px solid var(--white);
  box-shadow: 0 30px 60px -20px rgba(21, 21, 27, .4);
  will-change: transform;
}
html:not(.js) .fan-card { transform: translate(-50%, -50%); }
.fan-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fan-card::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px; opacity: .12; mix-blend-mode: overlay; pointer-events: none; }
.fan-card figcaption {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .92); color: var(--text);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.f1 { z-index: 1; }
html:not(.js) .f1 { transform: translate(-98%, -46%) rotate(-10deg); }
.f2 { z-index: 3; }
html:not(.js) .f2 { transform: translate(-50%, -54%) rotate(0deg); }
.f3 { z-index: 2; }
html:not(.js) .f3 { transform: translate(-2%, -46%) rotate(10deg); }

/* ---------- Manifiesto ---------- */
.manifesto { max-width: 1040px; margin: 0 auto; padding: 56px var(--pad) 24px; }
.m-title { font-size: clamp(28px, 7vw, 44px); margin-top: 12px; max-width: 18ch; }
.m-start { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 26px; border-top: 1px solid rgba(21, 21, 27, .12); }
.m-start li { display: flex; align-items: baseline; gap: 10px; padding: 16px 4px; border-bottom: 1px solid rgba(21, 21, 27, .12); font-size: 15px; font-weight: 600; }
.m-start li:nth-child(odd) { border-right: 1px solid rgba(21, 21, 27, .12); }
.m-start li:nth-child(even) { padding-left: 16px; }
.m-start b { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.m-diff { margin-top: 26px; font-size: clamp(20px, 5vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; max-width: 26ch; }
.m-diff em { color: var(--coral); }

/* ---------- Historias ---------- */
.stories { max-width: 1040px; margin: 0 auto; padding: 0 var(--pad); }
.story {
  --tone: var(--teal); --soft: var(--mint);
  display: grid; gap: 26px; padding: 72px 0 24px; scroll-margin-top: 90px;
}
.story[data-tone="coral"] { --tone: var(--coral); --soft: var(--pink); }
.story[data-tone="gold"] { --tone: #D99A14; --soft: var(--cream); }

.photo { position: relative; margin: 0; width: min(220px, 60vw); aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--soft); box-shadow: 0 30px 60px -30px rgba(21, 21, 27, .45); }
.photo img { width: 100%; height: 112%; object-fit: cover; object-position: center top; will-change: transform; }
.photo::after { content: ""; position: absolute; inset: 60% 0 0 0; background: linear-gradient(to top, rgba(21, 21, 27, .5), transparent); pointer-events: none; }
.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px; opacity: .12; mix-blend-mode: overlay; pointer-events: none; }
.ph-tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-size: 12px; font-weight: 600; }
.ph-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: blink 1.4s infinite; }
.ph-num { position: absolute; right: 12px; top: 8px; z-index: 1; font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }

.s-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tone); }
.s-name { white-space: nowrap; font-size: clamp(40px, 11vw, 72px); font-weight: 800; line-height: .95; letter-spacing: -.045em; margin-top: 8px; }
.s-name .ch { display: inline-block; will-change: transform; }
.s-handle { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--tone); }
.s-tag { font-size: 16px; color: var(--muted); margin-top: 10px; max-width: 34ch; line-height: 1.4; }
.s-k { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

.s-stats { display: flex; gap: 32px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(21, 21, 27, .12); }
.s-stats strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
.s-stats span:not(.num) { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

.growth { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid rgba(21, 21, 27, .12); max-width: 440px; }
.g-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.g-x { font-size: 13px; font-weight: 800; color: var(--tone); border: 1px solid currentColor; padding: 2px 10px; border-radius: 999px; }
.g-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; margin-top: 8px; }
.g-lab { font-size: 12px; font-weight: 600; color: var(--muted); }
.g-track { height: 6px; border-radius: 999px; background: rgba(21, 21, 27, .07); overflow: hidden; }
.g-bar { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 999px; transform-origin: left; }
.g-bar.before { background: rgba(21, 21, 27, .3); }
.g-bar.after { background: var(--tone); }
.g-row b { font-size: 14px; font-weight: 700; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.g-row:last-of-type b { color: var(--tone); }
.g-note { display: none; }

.s-quote { position: relative; margin-top: 24px; padding-left: 30px; font-size: 16px; font-weight: 600; line-height: 1.5; max-width: 44ch; }
.s-quote::before { content: "“"; position: absolute; left: 0; top: -8px; font-size: 44px; font-weight: 800; line-height: 1; color: var(--tone); }

.disclaimer { font-size: 12px; color: var(--muted); padding: 10px 0 0; max-width: 70ch; }

/* Estado inicial (solo con JS) */
.js .c-hero h1, .js .fan { visibility: hidden; }

/* ---------- Escritorio ---------- */
@media (min-width: 860px) {
  .c-hero { grid-template-columns: 1fr 1fr; padding-top: 60px; min-height: calc(100vh - 90px); }
  .fan { height: 520px; }
  .fan-card { max-width: 210px; }
  .manifesto { padding-top: 96px; padding-bottom: 40px; }
  .m-start { grid-template-columns: repeat(4, 1fr); }
  .m-start li { padding: 20px 16px; border-right: 1px solid rgba(21, 21, 27, .12); }
  .m-start li:first-child { padding-left: 4px; }
  .m-start li:last-child { border-right: 0; }
  .story { grid-template-columns: 250px 1fr; gap: 64px; align-items: center; padding-top: 110px; }
  .story:nth-of-type(even) { grid-template-columns: 1fr 250px; }
  .story:nth-of-type(even) .story-media { order: 2; }
  .photo { width: 250px; }
}