/* ============================================================
   GUÍAS DE PROMPTS · juliotalledo.ai
   Componentes de las guías tipo "Prompts" del Centro de Conocimiento
   (20 comandos de ChatGPT, Claude + Google Maps). Se carga después de
   brand.css y usa sus tokens, .h-sec, .eyebrow, .crumbs, nav y footer.
   Titulares Anton: letter-spacing 0 y line-height 1.12, como todo el sitio.
   ============================================================ */

/* ---------- Hero: titular, bajada y foto ---------- */
.gp-hero{position:relative;padding:176px var(--mx) 100px;overflow:hidden;}
.gp-hero-in{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;}
.gp-hero .eyebrow{margin-bottom:22px;}
.gp-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,4.9vw,78px);line-height:1.12;letter-spacing:0;color:#fff;text-transform:uppercase;}
.gp-hero h1 .y{color:var(--yellow);}
.gp-hero .sub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2vw,28px);line-height:1.24;letter-spacing:-.5px;color:rgba(255,255,255,.9);margin-top:22px;max-width:580px;}
.gp-photo{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:var(--navy-2);box-shadow:0 44px 90px -44px rgba(0,0,0,.8);}
.gp-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* Demo de escritura del comando */
.gp-type{margin-top:30px;max-width:600px;background:#050C1D;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 20px;min-height:calc(1.55em * 3 + 36px);font-family:var(--body);font-size:17px;line-height:1.55;color:#fff;overflow-wrap:anywhere;}
.gp-type .cmd{color:var(--yellow);font-weight:700;}
.gp-type .caret{display:inline-block;width:2px;height:1.15em;background:var(--yellow);vertical-align:text-bottom;margin-left:2px;animation:gp-blink 1.05s steps(1) infinite;}
@keyframes gp-blink{50%{opacity:0;}}
.gp-typecap{margin-top:12px;font-family:var(--cond);font-size:15px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.58);}

/* ---------- Secciones ---------- */
.gp-sec{padding:100px var(--mx);}
.gp-sec .h-sec{margin-bottom:18px;}
.gp-intro{font-family:var(--body);font-size:18px;line-height:1.6;color:rgba(10,10,10,.72);max-width:62ch;margin-bottom:36px;}
.gp-tip{font-family:var(--body);font-size:15px;line-height:1.6;color:rgba(10,10,10,.62);margin-top:16px;max-width:72ch;}

/* Cómo usarlo: flujo de tres pasos */
.gp-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.gp-flow li{position:relative;background:#fff;border:1px solid rgba(8,20,46,.1);border-radius:20px;padding:30px 28px 32px;box-shadow:0 26px 60px -40px rgba(8,20,46,.4);}
.gp-flow li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-20px;width:13px;height:13px;border-top:3px solid var(--yellow);border-right:3px solid var(--yellow);transform:translateY(-50%) rotate(45deg);}
.gp-n{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--navy);color:var(--yellow);font-family:var(--display);font-size:26px;line-height:1;margin-bottom:18px;}
.gp-flow strong{display:block;font-family:var(--body);font-weight:700;font-size:18px;line-height:1.35;color:var(--navy);margin-bottom:6px;}
.gp-flow p{font-family:var(--body);font-size:16px;line-height:1.55;color:rgba(10,10,10,.72);}
.gp-flow a{color:var(--blue-mid);text-decoration:underline;text-underline-offset:3px;}

.gp-note{margin-top:30px;max-width:860px;background:#fff;border:1px solid rgba(8,20,46,.1);border-radius:16px;box-shadow:inset 5px 0 0 var(--yellow);padding:22px 26px 22px 30px;}
.gp-note p{font-family:var(--body);font-size:16.5px;line-height:1.6;color:var(--navy);}
.gp-note p+p{margin-top:8px;color:rgba(10,10,10,.66);}

/* ---------- Botón copiar y campo editable ---------- */
.gp-copy{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:0;border-radius:100px;background:var(--navy);color:#fff;font-family:var(--cond);font-size:18px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;}
.gp-copy:hover{background:var(--blue-mid);}
.gp-copy.done{background:var(--yellow);color:var(--navy);}
.gp-copy:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.gp-copy--y{background:var(--yellow);color:var(--navy);}
.gp-copy--y:hover{background:var(--yellow-2);}
.gp-copy--y.done{background:#fff;color:var(--navy);}
.gp-ta{width:100%;display:block;font-family:var(--body);font-size:16px;line-height:1.5;padding:14px 16px;background:var(--cream);color:var(--ink);border:1px solid rgba(8,20,46,.14);border-radius:12px;resize:none;overflow:hidden;}
.gp-ta:focus{outline:2px solid var(--navy);outline-offset:1px;}

/* ---------- Biblioteca de comandos ---------- */
.gp-filters{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 14px;}
.gp-chip{font-family:var(--cond);font-size:16px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(8,20,46,.74);background:rgba(8,20,46,.045);border:1.5px solid transparent;border-radius:100px;padding:10px 18px;cursor:pointer;transition:.18s;}
.gp-chip:hover{background:rgba(8,20,46,.09);color:var(--navy);}
.gp-chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 8px 20px -10px rgba(8,20,46,.6);}
.gp-chip .count{opacity:.6;margin-left:5px;}
.gp-status{font-family:var(--cond);font-size:14px;letter-spacing:2px;text-transform:uppercase;color:rgba(8,20,46,.55);margin-bottom:26px;min-height:1.2em;}
.gp-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));}
.gp-card{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid rgba(8,20,46,.1);border-radius:20px;padding:24px;box-shadow:0 26px 60px -44px rgba(8,20,46,.45);}
.gp-card[hidden]{display:none;}
.gp-card-head{display:flex;gap:16px;align-items:center;}
.gp-num{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:12px;background:var(--yellow);color:var(--navy);font-family:var(--display);font-size:28px;line-height:1;}
.gp-meta{min-width:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.gp-rubro{font-family:var(--cond);font-size:15px;letter-spacing:2px;text-transform:uppercase;color:rgba(8,20,46,.55);}
.gp-pill{background:var(--navy);color:#fff;font-family:var(--body);font-weight:700;font-size:16.5px;line-height:1.3;padding:6px 13px;border-radius:9px;overflow-wrap:anywhere;}
.gp-pill .slash{color:var(--yellow);}
.gp-desc{font-family:var(--body);font-size:16px;line-height:1.55;color:rgba(10,10,10,.76);}
.gp-try{display:flex;flex-direction:column;gap:7px;}
.gp-try label{font-family:var(--cond);font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);}
.gp-card .gp-copy{align-self:flex-start;margin-top:auto;}

/* ---------- Banda amarilla: método ROACEF ---------- */
.gp-yellow{background:var(--yellow);color:var(--navy);}
.gp-yellow .h-sec{color:var(--navy);}
.gp-yellow .gp-intro{color:rgba(8,20,46,.86);}
.gp-letters{list-style:none;padding:0;margin:0 0 44px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr);}
.gp-letters li{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:16px;background:rgba(255,255,255,.42);}
.gp-l{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:12px;background:var(--navy);color:var(--yellow);font-family:var(--display);font-size:30px;line-height:1;}
.gp-letters strong{display:block;font-family:var(--body);font-weight:700;font-size:18px;line-height:1.3;margin-bottom:4px;}
.gp-letters p{font-family:var(--body);font-size:15.5px;line-height:1.5;color:rgba(8,20,46,.82);}
.gp-template{max-width:880px;background:var(--navy);color:#fff;border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 70px -40px rgba(8,20,46,.7);}
.gp-template h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.12;letter-spacing:0;text-transform:uppercase;}
.gp-template p{font-family:var(--body);font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.75);}
.gp-template .gp-ta{background:#050C1D;color:#fff;border-color:rgba(255,255,255,.18);}
.gp-template .gp-ta:focus{outline-color:var(--yellow);}
.gp-template .gp-copy{align-self:flex-start;}

/* ---------- Prompt listo para copiar ---------- */
.gp-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px;}
.gp-bar .h-sec{margin:0;}
.gp-prompt{background:var(--navy);color:#fff;border-radius:18px;box-shadow:inset 6px 0 0 var(--yellow),0 30px 70px -40px rgba(8,20,46,.7);padding:32px 34px 32px 42px;font-family:var(--body);font-size:18.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;}
.gp-ph{background:var(--yellow);color:var(--navy);padding:1px 7px;border-radius:5px;font-weight:600;}

/* ---------- Cierre navy, CTA y guías relacionadas ---------- */
.gp-close{padding:100px var(--mx) 40px;}
.gp-close .h-sec{color:#fff;margin-bottom:16px;}
.gp-ask{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.4px;color:rgba(255,255,255,.9);max-width:44ch;}
.gp-sign{font-family:var(--cond);font-size:28px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);margin-top:18px;}
.gp-src{margin-top:40px;font-family:var(--body);font-size:14px;line-height:1.6;color:rgba(255,255,255,.62);}
.gp-src a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;}
.gp-close .guia-cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;border-top:1px solid rgba(255,255,255,.12);margin-top:56px;padding:44px 0 56px;}
.gp-close .guia-cta h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:0;color:#fff;}
.gp-close .guia-cta h3 .y{color:var(--yellow);}
.gp-close .guia-cta p{font-family:var(--body);font-size:16px;line-height:1.55;color:rgba(255,255,255,.72);margin-top:10px;max-width:46ch;}
/* cierre que solo lleva el CTA (sin bloque previo): sin línea ni aire extra arriba */
.gp-close--solo{padding-top:72px;}
.gp-close--solo .guia-cta{margin-top:0;border-top:0;padding-top:0;}
.guia-cta-btn{font-family:var(--cond);font-size:21px;letter-spacing:2px;text-transform:uppercase;background:var(--yellow);color:var(--navy);padding:15px 30px;border-radius:100px;white-space:nowrap;display:inline-block;transition:transform .2s;}
.guia-cta-btn:hover{transform:translateY(-2px);}

.gp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .gp-hero-in{grid-template-columns:1fr;gap:44px;}
  .gp-photo{max-width:760px;}
  .gp-letters{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .gp-hero{padding:104px var(--mx) 64px;}
  .gp-hero .crumbs{position:static;flex-wrap:wrap;row-gap:4px;line-height:1.35;margin-bottom:26px;}
  .gp-sec{padding:68px var(--mx);}
  .gp-close{padding:68px var(--mx) 24px;}
  .gp-flow{grid-template-columns:1fr;gap:30px;}
  .gp-flow li:not(:last-child)::after{top:auto;bottom:-22px;right:50%;transform:translateX(50%) rotate(135deg);}
  .gp-letters{grid-template-columns:1fr;}
  .gp-type{min-height:calc(1.55em * 6 + 36px);font-size:16px;}
  .gp-prompt{font-size:16.5px;padding:24px 22px 24px 30px;}
  .gp-card .gp-copy,.gp-template .gp-copy{width:100%;}
  .gp-close .guia-cta{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){.gp-type .caret{animation:none;}}