/* ============================================================
   plantilla-excel.css — maquetación propia de landing/plantilla-excel-gimnasio.html (2026-10-22)
   Reutiliza el sistema v2 (tokens, componentes) y arcg.css (nav, menú móvil, pie, aviso de cookies).
   Aquí SOLO lo propio de esta página. Prefijo .pe- para no chocar con mitic-*.css.
   ============================================================ */

/* ───────── Héroe ───────── */
.pe-hero{position:relative;padding:calc(84px + clamp(28px,5vw,64px)) 0 clamp(40px,6vw,72px);overflow:hidden}
.pe-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
/* El visual del héroe (hoja recreada en HTML/CSS) vive en plantilla-excel-heroe.css (2026-10-26). */
.pe-hero h1{font-size:clamp(34px,2.6vw + 22px,64px);margin-bottom:20px}
.pe-hero .lead{margin-bottom:28px}
.pe-hero .eyebrow{margin-bottom:18px}

/* ───────── Hojas ───────── */
.pe-hoja{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-card);padding:clamp(16px,2.2vw,28px);box-shadow:var(--sombra-1);min-width:0}
.pe-hoja h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pe-hoja h3 .ic{width:22px;height:22px;color:var(--marca-txt);flex:0 0 auto}
.pe-hoja p{color:var(--tinta-2);font-size:15px;margin-bottom:16px}
.pe-hoja--ancha{margin-bottom:clamp(16px,2vw,24px)}
.pe-hoja--ancha{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:center;padding:clamp(20px,3vw,40px)}
.pe-hoja--ancha h3{font-size:clamp(24px,2vw,30px);margin-bottom:14px}
.pe-hoja--ancha p{font-size:16px;line-height:1.65}
.pe-hojas{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:start}

/* La captura es una imagen ancha: en pantallas chicas se desplaza, no se aplasta */
.pe-captura{margin:0;border:1px solid var(--borde-fuerte);border-radius:10px;overflow-x:auto;background:#fff;-webkit-overflow-scrolling:touch}
.pe-captura img{display:block;max-width:none;height:auto}
.pe-hoja--ancha .pe-captura img{width:100%;min-width:680px}
.pe-hoja--ancha .pe-captura{box-shadow:var(--sombra-2)}
.pe-captura--chica img{width:100%;max-width:100%}
.pe-captura:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.pe-aviso{font-size:var(--t-small);color:var(--tinta-3);margin:16px 0 0;max-width:80ch}

@media(min-width:1100px){.pe-estados{white-space:nowrap}}
/* Pastillas de estado: mismos colores del semáforo de la app (contrato) */
.pe-pill{display:inline-block;padding:1px 9px;border-radius:var(--r-chip);font-size:13.5px;font-weight:700;white-space:nowrap}
.pe-ok{background:var(--chip-al-dia);color:var(--al-dia-txt)}
.pe-pv{background:var(--chip-por-vencer);color:var(--por-vencer-txt)}
.pe-vc{background:var(--chip-vencido);color:var(--vencido-txt)}

/* Pasos */
.pe-pasos{position:relative;margin-top:clamp(36px,5vw,64px)}
.pe-pasos h3{margin-bottom:20px;font-size:clamp(24px,2.2vw,32px)}
.pe-barra{position:absolute;top:-56px;right:calc(var(--gutter)*-1 + 8px);width:min(420px,40%);pointer-events:none}
.pe-barra img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.pe-barra svg{position:absolute;left:-150px;top:28px;width:140px;height:auto}
html[data-theme="dark"] .pe-barra img{filter:invert(.82) contrast(.95)}

.pe-pasos ol,.pe-imp{list-style:none;display:grid;gap:16px}
.pe-pasos ol{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.pe-pasos li,.pe-imp li{display:flex;gap:14px;align-items:flex-start;color:var(--tinta-2);font-size:15.5px}
.pe-pasos li b,.pe-imp li b{color:var(--tinta)}
.pe-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--marca-fuerte);color:#fff;font-family:var(--f-mono);font-weight:600;font-size:15px}

/* ───────── Importar ───────── */
.pe-dos{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.pe-dueno{margin:0;position:relative;min-height:420px;overflow:hidden}
.pe-dueno img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pe-dos-der{display:grid;gap:clamp(20px,3vw,32px);align-content:center;padding:clamp(32px,5vw,72px) var(--gutter) clamp(32px,5vw,72px) clamp(24px,4vw,64px);max-width:calc(var(--wrap)*.62)}
@media(min-width:1280px){.pe-dos-der{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;max-width:none}}
.pe-dos h2{margin-bottom:16px;font-size:clamp(28px,2.4vw,40px)}
.pe-imp li{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r-card);padding:16px 18px}

/* ───────── El Excel se queda corto ───────── */
.pe-corto{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(24px,4vw,56px)}
.pe-corto li{display:flex;gap:16px;align-items:flex-start}
.pe-corto .card-ic{flex:0 0 auto;background:var(--marca-fuerte);color:#fff;--ic-acc:#fff;margin:0;border-radius:12px}
.pe-corto h3{color:#F2EFE9;font-size:19px;margin-bottom:6px}
.pe-corto p{color:rgba(242,239,233,.8);font-size:15px;max-width:44ch}
.pe-corto p b{color:#F2EFE9}
.pe-cta{margin-top:clamp(32px,5vw,56px);padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.14)}
.pe-cta-nota{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--t-small);color:rgba(242,239,233,.84)}
.pe-cta-nota .ic{width:18px;height:18px;color:var(--marca-claro)}
.pe-limites{position:relative;overflow:hidden}
.pe-limites>.wrap{position:relative;z-index:1}
.pe-limites-bg{position:absolute;top:0;right:0;width:62%;height:100%;object-fit:cover;object-position:right center;opacity:.45;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 65%);mask-image:linear-gradient(90deg,transparent,#000 65%)}
.sec-hierro .sec-head h2{color:#F2EFE9}
.sec-hierro .sec-head .lead{color:rgba(242,239,233,.82)}

/* ───────── Preguntas ───────── */
.pe-faq{max-width:calc(880px + var(--gutter)*2)}
.pe-faq-i{border-bottom:1px solid var(--borde-fuerte)}
.pe-faq-i:first-child{border-top:1px solid var(--borde-fuerte)}
.pe-faq-i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 4px;font-weight:700;font-size:17px;font-variation-settings:'wdth' 104}
.pe-faq-i summary::-webkit-details-marker{display:none}
.pe-faq-i summary::after{content:'+';flex:0 0 auto;font-family:var(--f-mono);font-size:24px;line-height:1;color:var(--marca-txt);transition:transform var(--d-2) var(--ease-out)}
.pe-faq-i[open] summary::after{transform:rotate(45deg)}
.pe-faq-i summary:hover{color:var(--marca-txt)}
.pe-faq-i p{padding:0 4px 22px;color:var(--tinta-2);max-width:68ch}

/* ───────── Móvil ───────── */
@media(max-width:920px){
  .pe-hero-grid,.pe-dos,.pe-hoja--ancha{grid-template-columns:minmax(0,1fr)}
  .pe-dueno{min-height:0;aspect-ratio:4/3}
  .pe-dos-der{max-width:none;padding:32px var(--gutter)}
  .pe-limites-bg{width:100%;opacity:.3}
  .pe-barra{position:relative;top:auto;right:auto;width:70%;margin:0 0 14px auto}
  .pe-barra svg{display:none}
  .pe-hojas{grid-template-columns:minmax(0,1fr)}
  .pe-hojas .pe-captura--chica:has(img[width="659"]) img{min-width:520px}
  .pe-pasos ol{grid-template-columns:minmax(0,1fr)}
  .pe-corto{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .pe-hero{padding-top:calc(72px + 20px)}
  .pe-hero .ctas .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.pe-faq-i summary::after{transition:none}}