/* ============================================================
   plantilla-excel-heroe.css — visual del héroe de plantilla-excel-gimnasio.html (rediseño 2026-10-26).
   Reemplaza la foto de laptop con manchas de pintura: la hoja "Socios" REAL recreada en HTML/CSS
   (mismos 5 socios de ejemplo, fórmula de Estado y pestañas del .xlsx). Boceto de referencia (solo
   lo visual): ChatGPT, C:\tmp\rediseno\excel\boceto\. Tokens del sistema v2 → claro y oscuro solos.
   ============================================================ */

.pe-hero{overflow:hidden}
@media(min-width:921px){.pe-hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.pe-hero-vis{position:relative;min-width:0}
/* Halo suave de marca detrás de la hoja (sin imágenes) */
.pe-hero-vis::before{content:'';position:absolute;z-index:0;width:min(560px,90%);aspect-ratio:1;right:-4%;top:50%;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(234,88,12,.20) 0,rgba(234,88,12,.08) 45%,transparent 70%)}

.pe-xl{position:relative;z-index:1;margin:0;padding:34px 0 0;perspective:1600px}
.pe-xl-ventana{background:var(--superficie);border:1px solid var(--borde-fuerte);border-radius:var(--r-lg);
  box-shadow:var(--sombra-3);overflow:hidden;font-size:13px;line-height:1.2;
  transform:rotateY(-9deg) rotateX(3deg) rotate(.6deg);transform-origin:left center}

/* Barra de la ventana + barra de fórmulas */
.pe-xl-barra{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:34px;background:var(--superficie-2);border-bottom:1px solid var(--borde)}
.pe-xl-puntos{display:flex;gap:6px}
.pe-xl-puntos i{width:10px;height:10px;border-radius:50%;background:var(--borde-fuerte)}
.pe-xl-puntos i:first-child{background:#EA580C}
.pe-xl-formula{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--borde);font-family:var(--f-mono);font-size:11.5px;min-width:0}
.pe-xl-ref{padding:2px 8px;border:1px solid var(--borde);border-radius:6px;color:var(--tinta-2)}
.pe-xl-fx{font-style:italic;color:var(--marca-txt);font-weight:600}
.pe-xl-formula code{font-family:inherit;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Rejilla de celdas */
.pe-xl-fila{display:grid;grid-template-columns:34px minmax(0,1.5fr) minmax(0,.95fr) minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.05fr);align-items:stretch;border-bottom:1px solid var(--borde)}
.pe-xl-fila > span{padding:9px 10px;border-left:1px solid var(--borde);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:34px;display:flex;align-items:center}
.pe-xl-fila > .pe-xl-n{justify-content:center;border-left:0;background:var(--superficie-2);color:var(--tinta-3);font-family:var(--f-mono);font-size:11px}
.pe-xl-cab > span:not(.pe-xl-n){background:#C2410C;color:#fff;font-weight:700;font-size:12px;white-space:normal;line-height:1.15}
.pe-xl-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--tinta-2)}
.pe-xl-fila > .pe-xl-dias{justify-content:flex-end;background:var(--marca-suave);color:var(--tinta)}
.pe-xl-est{font-style:normal;display:inline-block;padding:3px 9px;border-radius:var(--r-chip);font-size:12px;font-weight:700}
.pe-xl-vacia > span{min-height:30px}

/* Pestañas de hojas, como en Excel */
.pe-xl-pestanas{display:flex;gap:2px;padding:0 10px;background:var(--superficie-2);overflow:hidden}
.pe-xl-pestanas span{padding:9px 13px;font-size:12px;color:var(--tinta-3);white-space:nowrap}
.pe-xl-pestanas .is-on{background:var(--superficie);color:var(--marca-txt);font-weight:700;box-shadow:inset 0 -2px 0 #EA580C}

/* Etiqueta del archivo, montada sobre la esquina de la ventana */
.pe-xl-chip{position:absolute;z-index:2;top:0;right:clamp(8px,4%,40px);display:flex;align-items:center;gap:12px;
  padding:11px 16px 11px 11px;background:var(--superficie);border:1px solid var(--borde);border-radius:14px;
  box-shadow:var(--sombra-3);transform:rotate(-2deg);max-width:calc(100% - 16px)}
.pe-xl-chip-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--marca-suave);color:var(--marca-txt)}
.pe-xl-chip-ic .ic{width:22px;height:22px}
.pe-xl-chip b{display:block;font-size:14px;line-height:1.25;word-break:break-word}
.pe-xl-chip-meta{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--tinta-3)}

@media(max-width:1100px){.pe-xl-ventana{font-size:12px}.pe-xl-fila > span{padding:8px 8px}}
@media(max-width:920px){
  .pe-hero-vis{margin-top:8px;padding-bottom:clamp(32px,8vw,56px)}
  .pe-hero-vis::before{right:auto;left:50%;transform:translate(-50%,-50%);width:min(520px,120%)}
  .pe-xl-ventana{transform:none}
}
@media(max-width:620px){
  /* En el teléfono se quita la columna Plan para que lo importante (vence y estado) se lea sin desplazar */
  .pe-xl-fila{grid-template-columns:26px minmax(0,1.45fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1.05fr)}
  .pe-xl-plan{display:none !important}
  .pe-xl-fila > span{padding:7px 6px;min-height:30px}
  .pe-xl-cab > span:not(.pe-xl-n){font-size:10.5px;white-space:normal;line-height:1.15}
  .pe-xl-num,.pe-xl-est{font-size:10.5px}
  .pe-xl-est{padding:2px 6px}
  .pe-xl-ventana{font-size:11px;border-radius:16px}
  .pe-xl-formula{display:none}
  .pe-xl-pestanas span{padding:8px 9px;font-size:11px}
  .pe-xl-chip{right:6px;padding:8px 12px 8px 8px;gap:9px}
  .pe-xl-chip-ic{width:32px;height:32px}
  .pe-xl-chip b{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.pe-xl-ventana,.pe-xl-chip{transform:none}}