/* ============================================================
   Página Estudio (estudio.html). Familia Cocuyo, acabado ligero (dueño,
   29-sep-2026): titulares Geist 500, cuerpo 400, superficies sin bordes,
   sin sombras ni brillos, mucho aire y la lima SOLO en la acción
   principal («Empieza a crear», «Ver planes»), en el punto de las
   etiquetas y en el filtro activo del catálogo.
   Colores con var(): tokens.css y los --f-* de familia.css.
   ============================================================ */
.pagina-estudio{--in-verde:var(--verde-cocuyo);--in-borde:var(--escarcha-borde);margin:0;background:var(--negro-abismo);color:var(--blanco-luz);font-family:var(--fuente);font-weight:var(--f-peso-cuerpo);line-height:1.6}
html:has(.pagina-estudio){background:var(--negro-abismo)}
.pagina-estudio *, .pagina-estudio *::before,.pagina-estudio *::after{box-sizing:border-box}
.pagina-estudio .oculto{display:none!important}
.pagina-estudio main a{color:inherit;text-decoration:none}
.pagina-estudio main button{font:inherit;cursor:pointer}
.pagina-estudio main img{display:block;max-width:100%}
.pagina-estudio main :is(h1,h2,h3,p){margin:0}
.pagina-estudio main{min-width:0}
.pe-wrap{width:min(var(--f-ancho),calc(100% - 2 * var(--f-gutter)));margin-inline:auto}
.pe-skip{position:fixed;z-index:var(--z-modal);top:8px;left:16px;transform:translateY(-160%);padding:10px 16px;background:var(--verde-cocuyo);color:var(--tinta-sobre-verde)!important;border-radius:var(--f-r-pill)}
.pe-skip:focus{transform:none}
.pagina-estudio main :is(a,button,summary):focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:4px}

/* ---------- Héroe con vídeo ---------- */
.pe-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:100svh;padding:calc(var(--cn-top,72px) + 90px) 0 120px;text-align:center}
.pe-hero-media,.pe-hero-shade{position:absolute;inset:0;z-index:-1}
.pe-hero-media{background:var(--negro-elevado);overflow:hidden}
.pe-hero-media video{width:100%;height:100%;object-fit:cover;object-position:center}
.pe-hero-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--negro-abismo) 55%,transparent),color-mix(in srgb,var(--negro-abismo) 18%,transparent) 30%,color-mix(in srgb,var(--negro-abismo) 62%,transparent) 65%,var(--negro-abismo));pointer-events:none}
.pe-hero-copy{max-width:1000px;text-shadow:0 1px 16px color-mix(in srgb,var(--negro-abismo) 70%,transparent)}
/* Etiqueta: gris con el punto lima de la familia. */
.pe-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--f-t-xs);font-weight:var(--f-peso-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--f-texto-3);margin-bottom:20px!important}
.pe-eyebrow::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--f-lima)}
.pe-hero .pe-eyebrow{color:var(--f-texto-2)}
.pe-hero h1{font-size:clamp(48px,6.8vw,88px);font-weight:var(--f-peso-display);line-height:1.02;letter-spacing:-.045em;text-wrap:balance;max-width:950px;margin:auto}
.pe-lead{font-size:clamp(17px,1.6vw,21px);max-width:610px;margin:24px auto 32px!important;line-height:1.55;text-wrap:balance;color:var(--f-texto-2)}
.pe-hero .pe-lead{color:var(--f-texto)}
/* Botones: píldora; la principal en lima (f-btn--primario). */
.pe-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;border-radius:var(--f-r-pill);background:var(--f-sup-3);color:var(--f-texto);font-size:.9375rem;font-weight:var(--f-peso-ui);line-height:1.2;letter-spacing:-.005em;transition:background var(--f-rapido),box-shadow var(--f-rapido),transform var(--f-rapido);text-shadow:none;text-align:center}
.pe-primary{background:var(--verde-cocuyo);color:var(--tinta-sobre-verde)!important}
.pe-primary:hover{background:var(--lima-clara);box-shadow:var(--f-luz)}
.pe-btn:active{transform:scale(.98)}
.pe-small{font-size:var(--f-t-sm);line-height:1.6;color:var(--f-texto-3)}
.pe-hero .pe-small{margin-top:20px;color:var(--f-texto-2)}
.pe-video-toggle{position:absolute;right:20px;bottom:20px;display:flex;gap:8px;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:var(--radio-pill);background:var(--f-vidrio);backdrop-filter:var(--vidrio-fino);-webkit-backdrop-filter:var(--vidrio-fino);color:var(--blanco-luz);font-size:var(--f-t-xs);font-weight:var(--f-peso-ui);z-index:1}
.pe-scroll{position:absolute;bottom:26px;left:calc(50% - 22px);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--f-vidrio);backdrop-filter:var(--vidrio-fino);-webkit-backdrop-filter:var(--vidrio-fino);color:var(--f-texto)!important;font-size:20px}

/* ---------- Secciones ---------- */
.pe-section{padding-block:clamp(88px,5rem + 3vw,136px) 0;scroll-margin-top:calc(var(--cn-top,72px) + 20px)}
.pe-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px}
.pe-section-head>div{max-width:720px;min-width:0}
.pe-section-head>p{max-width:360px;flex:0 0 30%;font-size:.9375rem;color:var(--f-texto-3)}
.pe-section h2{font-size:var(--f-t-1);font-weight:var(--f-peso-display);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.pe-section .pe-eyebrow{margin-bottom:16px!important}

/* ---------- Tarjetas (como .f-tarjeta: superficie, imagen redondeada dentro) ---------- */
.pe-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pe-result,.pe-app{position:relative;min-width:0;display:flex;flex-direction:column;padding:6px 6px 0;border:0;border-radius:calc(var(--f-r-tarjeta) + 6px);background:var(--f-sup-1);overflow:hidden;transition:background var(--f-rapido)}
.pe-result:hover,.pe-app:hover{background:var(--f-sup-2)}
.pe-result>img,.pe-await,.pe-app img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;border-radius:var(--f-r-tarjeta);background:var(--f-sup-2);transition:transform 700ms var(--f-curva)}
.pe-result:hover>img,.pe-app:hover img{transform:scale(1.02)}
.pe-await{display:grid;place-items:center;color:var(--f-texto-3);font-size:12px}
.pe-result>div:not(.pe-await){position:relative;padding:16px 10px 18px}
.pe-result h3{font-size:var(--f-t-4);font-weight:var(--f-peso-titulo);line-height:1.3;letter-spacing:-.01em;margin-bottom:4px}
.pe-result div>span:not([aria-hidden]){font-size:var(--f-t-sm);color:var(--f-texto-3)}
.pe-result [aria-hidden],.pe-app [aria-hidden]{position:absolute;right:12px;color:var(--f-texto-3);transition:color var(--f-rapido),transform var(--f-rapido)}
.pe-result [aria-hidden]{bottom:18px}
.pe-result:hover [aria-hidden],.pe-app:hover [aria-hidden]{color:var(--f-texto);transform:translate(2px,-2px)}
.pe-prompt{margin:24px 0 12px;box-shadow:0 -1px 0 var(--f-linea);padding-top:16px;font-size:var(--f-t-sm)}
.pe-prompt summary{cursor:pointer;color:var(--f-texto-2);min-height:44px;display:flex;align-items:center}
.pe-prompt p{max-width:960px;overflow-wrap:anywhere;color:var(--f-texto-3);font-size:13px;padding:12px 0 16px}
.pe-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pe-apps-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pe-app>div{padding:16px 10px 18px;position:relative}
.pe-app h3{font-size:var(--f-t-4);font-weight:var(--f-peso-titulo);line-height:1.3;letter-spacing:-.01em;margin-bottom:4px;padding-right:20px}
.pe-app p{font-size:var(--f-t-sm);color:var(--f-texto-3);padding-right:16px}
.pe-app [aria-hidden]{top:16px}
.pe-actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}
/* Enlace secundario: texto claro subrayado fino (la lima queda para la acción). */
.pe-link{font-size:.9375rem;font-weight:var(--f-peso-ui);line-height:1.6;color:var(--f-texto)!important;text-decoration:underline!important;text-decoration-color:var(--f-linea-fuerte)!important;text-underline-offset:5px;transition:text-decoration-color var(--f-rapido)}
.pe-link:hover{text-decoration-color:var(--f-lima)!important}
.pe-motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pe-motion{padding:6px;border:0;border-radius:calc(var(--f-r-media) + 6px);overflow:hidden;background:var(--f-sup-1)}
.pe-motion-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--f-r-media);background:var(--f-sup-2)}
.pe-motion-media video{width:100%;height:100%;object-fit:cover}
.pe-motion-caption{display:flex;align-items:center;gap:18px;padding:18px 14px 14px}
.pe-motion-caption>img{width:72px;height:72px;object-fit:cover;border-radius:var(--f-r-control);flex-shrink:0}
.pe-motion-caption>div{min-width:0}
.pe-motion-caption h3{font-size:var(--f-t-4);font-weight:var(--f-peso-titulo);line-height:1.35;margin-bottom:4px}
.pe-motion-caption .pe-link{display:inline-block;margin-top:8px}

/* ---------- Catálogo de modelos ---------- */
.pe-models-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px}
/* Filtros como segmento de la familia: el activo en blanco. */
.pe-filters{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--f-r-pill);background:var(--f-sup-1)}
.pe-filters button{min-height:40px;padding:0 18px;border:0;border-radius:var(--radio-pill);background:transparent;color:var(--f-texto-3);font-size:var(--f-t-sm);font-weight:var(--f-peso-ui);transition:color var(--f-rapido),background var(--f-rapido)}
.pe-filters button:hover{color:var(--f-texto)}
.pe-filters button[aria-pressed=true]{background:var(--f-texto);color:var(--negro-abismo)}
.pe-models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.pe-modelo{display:block;min-width:0;position:relative;padding:24px 20px;border:0;border-radius:var(--f-r-tarjeta);background:var(--f-sup-1);transition:background var(--f-rapido)}
a.pe-modelo:hover{background:var(--f-sup-2)}
.pe-modelo-marca{display:block;width:36px;height:36px;margin-bottom:20px}
.pe-modelo-marca>svg,.pe-modelo-marca>span,.pe-modelo-marca img{width:36px;height:36px}
.pe-modelo h3{font-size:var(--f-t-4);line-height:1.35;font-weight:var(--f-peso-titulo);letter-spacing:-.01em;overflow-wrap:anywhere}
.pe-modelo p{color:var(--f-texto-3);font-size:13px;margin-top:6px;line-height:1.5}
.pe-modelo>small{display:block;color:var(--f-texto-2);font-size:12px;margin-top:14px;font-variant-numeric:tabular-nums}
.pe-modelo-pendiente{opacity:.55}
.pe-plantillas-grid:empty{display:none}
/* Plantillas disponibles como pastillas: las 46 entradas caben en pocas filas
   en vez de una lista larga (29-sep-2026). */
.pe-plantillas-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;padding-top:28px;box-shadow:0 -1px 0 var(--f-linea)}
.pe-plantilla{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:0;border-radius:var(--radio-pill);background:var(--f-sup-1);color:var(--f-texto-2)!important;font-size:13px;line-height:1.35;transition:color var(--f-rapido),background var(--f-rapido)}
.pe-plantilla:hover{color:var(--blanco-luz)!important;background:var(--f-sup-2)}

/* ---------- Precios ---------- */
.pe-price-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
.pe-comparison{min-width:0;border:0;border-radius:calc(var(--f-r-media) + 6px);background:var(--f-sup-1);padding:32px}
.pe-comparison table{width:100%;border-collapse:collapse;font-size:.9375rem;text-align:left;table-layout:fixed}
.pe-comparison caption{text-align:left;font-size:var(--f-t-4);font-weight:var(--f-peso-titulo);margin-bottom:20px;line-height:1.4}
.pe-comparison th,.pe-comparison td{padding:16px 8px 16px 0;border-bottom:0;box-shadow:0 1px 0 var(--f-linea);overflow-wrap:anywhere}
.pe-comparison th{font-weight:var(--f-peso-cuerpo)}
.pe-comparison th:last-child,.pe-comparison td:last-child{text-align:right;width:28%;padding-right:0;font-variant-numeric:tabular-nums}
.pe-comparison thead{font-size:12px;color:var(--f-texto-3)}
.pe-comparison tbody a{text-decoration:underline;text-decoration-color:var(--f-linea-fuerte);text-underline-offset:4px}
.pe-comparison tbody a:hover{text-decoration-color:currentColor}
.pe-comparison tfoot th,.pe-comparison tfoot td{font-weight:var(--f-peso-titulo);border:0;box-shadow:none;font-size:17px}
.pe-comparison>.pe-small{margin-top:20px}
/* Tarjeta de Cocuyo: como el plan destacado de la familia (línea lima fina). */
.pe-credit-card{border:0;border-radius:calc(var(--f-r-media) + 6px);background:var(--f-sup-1);box-shadow:inset 0 0 0 1px var(--f-lima-linea);padding:32px;display:flex;align-items:flex-start;flex-direction:column;gap:18px}
.pe-credit-card .pe-eyebrow{margin:0!important}
.pe-price{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.pe-price>span:first-child{font-size:clamp(2.4rem,2rem + 1.4vw,3.1rem);letter-spacing:-.04em;font-weight:var(--f-peso-display);line-height:1.1;font-variant-numeric:tabular-nums}
.pe-price>span:last-child{font-size:13px;color:var(--f-texto-3)}
.pe-credit-card>p:not(.pe-small):not(.pe-eyebrow){font-size:.9375rem;color:var(--f-texto-2)}
.pe-credit-card h3{font-size:var(--f-t-3);line-height:1.25;letter-spacing:-.02em;font-weight:var(--f-peso-titulo)}
.pe-price-note{margin-top:22px!important;max-width:1000px}

/* ---------- Cierre y preguntas ---------- */
.pe-final{padding-bottom:clamp(88px,5rem + 3vw,136px)}
.pe-final-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:0;padding:clamp(40px,2rem + 3vw,72px);border-radius:calc(var(--f-r-media) + 8px);background:var(--f-sup-1)}
.pe-final-cta p:not(.pe-eyebrow){max-width:550px;font-size:1rem;color:var(--f-texto-3);margin-top:16px}
.pe-final-cta>.pe-btn{flex-shrink:0}
.pe-faq{margin-top:clamp(64px,4rem + 2vw,112px);max-width:900px}
.pe-faq>h3{font-size:var(--f-t-2);font-weight:var(--f-peso-display);letter-spacing:-.03em;margin-bottom:24px}
.pe-faq details{border-top:0;padding:0;box-shadow:0 1px 0 var(--f-linea)}
.pe-faq details:first-of-type{box-shadow:0 -1px 0 var(--f-linea),0 1px 0 var(--f-linea)}
.pe-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 0;list-style:none;font-size:var(--f-t-4);font-weight:var(--f-peso-ui);cursor:pointer;line-height:1.4;letter-spacing:-.01em}
.pe-faq summary::-webkit-details-marker{display:none}
.pe-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--f-texto-3);border-bottom:1.5px solid var(--f-texto-3);transform:rotate(45deg) translateY(-3px);transition:transform var(--f-medio)}
.pe-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pe-faq details>p{font-size:1rem;color:var(--f-texto-2);padding:0 0 24px;max-width:720px}
@media(max-width:1000px){.pe-wrap{width:calc(100% - 48px)}.pe-section-head{gap:24px}.pe-models{grid-template-columns:repeat(3,minmax(0,1fr))}.pe-result>div:not(.pe-await){padding:16px 13px}.pe-result h3{font-size:14px}.pe-apps-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.pe-wrap{width:calc(100% - 32px)}.pe-hero{padding:calc(var(--cn-top,116px) + 70px) 0 110px;min-height:100svh}.pe-hero h1{font-size:47px;letter-spacing:-.05em;line-height:1.06}.pe-hero-copy{width:calc(100% - 40px)}.pe-lead{font-size:16px;margin:22px auto 27px!important}.pe-eyebrow{font-size:10px}.pe-hero .pe-small{font-size:11px;max-width:280px;margin-inline:auto}.pe-hero .pe-video-toggle{right:16px;bottom:24px;padding:10px 12px}.pe-scroll{left:16px;bottom:24px}.pe-section{padding-top:64px}.pe-section-head{display:block;margin-bottom:24px}.pe-section-head>p{max-width:100%;font-size:13px}.pagina-estudio main .pe-section-head>p{margin-top:12px}.pe-section h2{font-size:33px;line-height:1.12}.pe-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pe-result>div:not(.pe-await){padding:15px 12px}.pe-result h3{font-size:14px;max-width:calc(100% - 12px)}.pe-result div>span:not([aria-hidden]){font-size:10px}.pe-result [aria-hidden]{right:12px;bottom:13px}.pe-apps,.pe-apps-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pe-app>div{padding:16px 12px}.pe-app h3{font-size:14px;padding-right:14px}.pe-app p{font-size:11px;padding-right:0}.pe-app [aria-hidden]{top:14px;right:12px;font-size:12px}.pe-motion-grid{grid-template-columns:minmax(0,1fr);gap:20px}.pe-motion-caption{padding:18px 14px;gap:14px}.pe-motion-caption>img{width:65px;height:65px}.pe-motion-caption h3{font-size:16px}.pe-motion-caption .pe-small{font-size:10px}.pe-motion .pe-video-toggle{bottom:12px;right:12px;min-height:38px;font-size:11px}.pe-models-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.pe-filters{gap:6px}.pe-filters button{font-size:12px;padding:9px 14px}.pe-models{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pe-modelo{padding:20px 13px}.pe-modelo h3{font-size:14px}.pe-modelo p{font-size:11px}.pe-modelo-marca{margin-bottom:17px}.pe-price-layout{grid-template-columns:minmax(0,1fr);gap:18px}.pe-comparison{padding:22px 16px}.pe-comparison table{font-size:12px}.pe-comparison th,.pe-comparison td{padding:16px 3px}.pe-comparison caption{font-size:14px;margin-bottom:18px}.pe-comparison tfoot th,.pe-comparison tfoot td{font-size:14px}.pe-credit-card{padding:26px 22px}.pe-price>span:first-child{font-size:40px}.pe-credit-card h3{font-size:25px}.pe-final{padding-bottom:60px}.pe-final-cta{display:block;padding-top:45px}.pe-final-cta>.pe-btn{margin-top:25px}.pe-faq{margin-top:45px}.pe-plantillas-grid{grid-template-columns:minmax(0,1fr)}.pe-actions{gap:18px}}
/* Móvil, acabado ligero: tarjetas y cierre con la misma medida de la familia. */
@media(max-width:700px){.pe-section{padding-top:72px}.pe-section h2{font-size:clamp(2rem,1.6rem + 2vw,2.25rem);line-height:1.08}.pe-result>div:not(.pe-await),.pe-app>div{padding:12px 6px 14px}.pe-result [aria-hidden]{right:8px;bottom:14px}.pe-app [aria-hidden]{top:12px;right:8px}.pe-filters{border-radius:var(--f-r-tarjeta)}.pe-final-cta{padding:32px 22px}.pe-faq summary{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.pagina-estudio *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.pe-result:hover>img,.pe-app:hover img{transform:none}}