/* ===== V8 FIX: estilos críticos para páginas individuales ===== */
body .opo-guide{background:#fff;color:#111827}
body .opo-guide-hero{
  min-height:360px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  padding:58px 18px !important;
  color:#fff !important;
  background:linear-gradient(90deg,rgba(17,24,39,.62),rgba(17,24,39,.18)),linear-gradient(135deg,#42633b,#c6db73) !important;
}
body .opo-guide-hero.ss{
  background:linear-gradient(90deg,rgba(17,24,39,.60),rgba(17,24,39,.18)),linear-gradient(135deg,#334155,#7aa1c4) !important;
}
body .opo-guide-hero .mark{
  width:60px !important;height:60px !important;border-radius:18px !important;display:grid !important;place-items:center !important;
  margin:0 auto 18px !important;background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.25) !important;font-size:2rem !important;
}
body .opo-guide-hero h1{
  margin:0 !important;color:#fff !important;font-weight:950 !important;letter-spacing:-.055em !important;
  font-size:clamp(2.4rem,5vw,4.7rem) !important;line-height:1.02 !important;text-shadow:0 2px 18px rgba(0,0,0,.22) !important;
}
body .opo-guide-hero p{max-width:850px !important;margin:18px auto 0 !important;color:rgba(255,255,255,.94) !important;font-size:1.12rem !important}
body .opo-band{background:#81996d !important;color:#fff !important;padding:34px 0 27px !important}
body .opo-band.ss{background:#536b84 !important}
body .opo-wrap,body .opo-section{width:min(1160px,calc(100% - 42px)) !important;margin:0 auto !important}
body .opo-band h2,body .opo-section h2{margin:0 !important;font-size:1.75rem !important;line-height:1.15 !important;font-weight:950 !important;letter-spacing:-.025em !important}
body .opo-band .line{margin-top:18px !important;border-top:1px solid rgba(255,255,255,.38) !important}
body .opo-section{padding:42px 0 !important;border-bottom:3px solid #e5e7eb !important;background:#fff !important}
body .opo-section h2{color:#111827 !important;display:flex !important;align-items:center !important;gap:10px !important}
body .opo-section .line{margin-top:18px !important;border-top:1px solid #d1d5db !important}
body .opo-intro{display:grid !important;grid-template-columns:260px 1fr !important;gap:38px !important;align-items:start !important;margin-top:28px !important}
body .opo-question-card{min-height:165px !important;border:1px solid #d9dee8 !important;background:#f8fafc !important;display:grid !important;place-items:center !important;text-align:center !important;padding:22px !important}
body .opo-question-card .icon{font-size:4rem !important;line-height:1 !important}
body .opo-question-card a{color:#111827 !important;font-weight:950 !important;margin-top:14px !important;display:block !important}
body .opo-bullets{margin:0 !important;padding-left:22px !important;font-size:1.02rem !important}
body .opo-bullets li{margin:8px 0 !important}
body .opo-drive{margin-top:24px !important;border:1px solid #e1e5ec !important;max-width:840px !important;background:#fff !important}
body .opo-drive-row{display:grid !important;grid-template-columns:1fr 260px !important;gap:18px !important;padding:14px 18px !important;border-top:1px solid #e1e5ec !important}
body .opo-drive-row:first-child{border-top:0 !important;color:#ef4444 !important;font-weight:950 !important;text-transform:uppercase !important}
body .opo-drive-row span:last-child{color:#6b7280 !important}
body .opo-add-row{display:grid !important;grid-template-columns:270px 1fr !important;gap:34px !important;align-items:center !important;margin-top:30px !important}
body .opo-form-preview{border:1px solid #e1e5ec !important;background:#f8fafc !important;min-height:170px !important;padding:18px !important}
body .opo-form-preview .top{height:54px !important;border-radius:10px !important;background:linear-gradient(90deg,#b6d06b,#f2d074) !important;margin-bottom:14px !important}
body .opo-form-preview .bar{height:12px !important;background:#e5e7eb !important;border-radius:4px !important;margin:10px 0 !important}
body .opo-rooms{display:grid !important;grid-template-columns:200px repeat(4,minmax(0,1fr)) !important;gap:26px !important;align-items:start !important;margin-top:30px !important}
body .opo-tile{text-align:center !important;color:#111827 !important;font-weight:950 !important}
body .opo-tile a,body .opo-readme a{color:#111827 !important;font-weight:950 !important}
body .opo-tile-box{aspect-ratio:1/1 !important;display:grid !important;place-items:center !important;font-size:clamp(2.7rem,5vw,4.7rem) !important;font-weight:950 !important;color:#fff !important;margin-bottom:12px !important}
body .opo-tile-box.general{background:#e8f2dc !important;color:#28451f !important;font-size:3.8rem !important}
body .opo-tile-box.orange{background:#f97316 !important}
body .opo-tile-box.green{background:#22c55e !important}
body .opo-tile-box.red{background:#ef1b2d !important}
body .opo-tile-box.blue{background:#2379c9 !important}
body .opo-important{margin-top:20px !important;columns:2 !important}
body .opo-important li{break-inside:avoid !important;margin:9px 0 !important}
body .opo-contact{background:#81996d !important;color:#fff !important;padding:42px 0 50px !important}
body .opo-contact.ss{background:#536b84 !important}
body .opo-contact h2{margin:0 !important;font-size:1.8rem !important;font-weight:950 !important}
body .opo-contact .line{border-top:1px solid rgba(255,255,255,.38) !important;margin:18px 0 !important}
body .opo-contact a{color:#fff !important;font-weight:950 !important}
@media(max-width:1000px){body .opo-rooms{grid-template-columns:repeat(2,minmax(0,1fr)) !important}body .opo-readme{grid-column:1/-1 !important}}
@media(max-width:820px){body .opo-intro,body .opo-add-row{grid-template-columns:1fr !important}body .opo-drive-row{grid-template-columns:1fr !important}body .opo-important{columns:1 !important}}
@media(max-width:560px){body .opo-wrap,body .opo-section{width:calc(100% - 26px) !important}body .opo-guide-hero{min-height:270px !important}body .opo-rooms{grid-template-columns:1fr !important}}


/* ===== V9 mejoras solicitadas: desplegable, vista Drive y formulario ===== */
.opo-about-details{
  width:min(1160px,calc(100% - 42px));
  margin:0 auto;
}
.opo-about-details summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#fff;
  font-size:1.75rem;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.025em;
}
.opo-about-details summary::-webkit-details-marker{display:none}
.opo-about-details summary:after{
  content:"⌄";
  font-size:1.4rem;
  opacity:.85;
  transition:.2s;
}
.opo-about-details[open] summary:after{
  transform:rotate(180deg);
}
.opo-about-details .line{
  margin:18px 0;
  border-top:1px solid rgba(255,255,255,.38);
}
.opo-about-text{
  max-width:980px;
  color:rgba(255,255,255,.96);
  font-size:1.04rem;
}
.opo-about-text p{
  margin:0 0 12px;
}
.opo-drive{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:2px;
}
.opo-drive-row{
  min-height:58px;
}
.opo-drive-row .drive-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.opo-drive-row .drive-icon{
  font-size:1.2rem;
}
.opo-form-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  padding:12px 16px;
  border-radius:12px;
  background:#111827;
  color:#fff !important;
  text-decoration:none;
  font-weight:950;
}
.opo-form-link:hover{
  transform:translateY(-1px);
}
.opo-form-preview{
  position:relative;
  overflow:hidden;
}
.opo-form-preview:after{
  content:"Formulario de recursos";
  position:absolute;
  left:18px;
  bottom:18px;
  color:#111827;
  font-weight:950;
}
.form-page{
  width:min(900px,calc(100% - 32px));
  margin:0 auto;
  padding:54px 0;
}
.form-box{
  background:#fff;
  border:1px solid #dbe3ef;
  border-radius:22px;
  box-shadow:0 12px 32px rgba(15,23,42,.07);
  padding:28px;
}
.form-box h1{
  margin:0 0 12px;
  font-size:2.2rem;
  letter-spacing:-.04em;
}
.form-box label{
  display:block;
  margin:14px 0 6px;
  font-weight:900;
  color:#334155;
}
.form-box input,.form-box textarea,.form-box select{
  width:100%;
  min-height:46px;
  border:1px solid #d6dfec;
  border-radius:12px;
  padding:10px 12px;
}
.form-box textarea{min-height:120px}
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
@media(max-width:560px){
  .opo-about-details{width:calc(100% - 26px)}
  .opo-about-details summary{font-size:1.5rem}
}