/* Estilos específicos de Iluminación Canchas, aislados al scope de la página */

/* Variables y base de página */
body.canchas-page {
  --brand: #16a34a;
  --brand-600: #16a34a;
  --brand-700: #15803d;
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --ring: rgba(22,163,74,.25);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(2,6,23,.08);
  background: url('/static/img/fondo.png') center center / cover no-repeat fixed;
}

body.canchas-page img { display:block; max-width:100%; height:auto }
body.canchas-page a { text-decoration:none; color:inherit }

/* Utilidades y componentes locales (no tocan navbar/bootstrap) */
body.canchas-page .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.25rem; border-radius:999px; font-weight:600; border:0; cursor:pointer; transition:.2s }
body.canchas-page .btn-primary { background:var(--brand-600); color:#fff }
body.canchas-page .btn-primary:hover { background:var(--brand-700) }
body.canchas-page .btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2) }
body.canchas-page .btn-ghost:hover { background:rgba(255,255,255,.22) }

body.canchas-page .grid { display:grid; gap:24px }
body.canchas-page .card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow) }
body.canchas-page .card-body { padding:24px }
body.canchas-page .section { padding:72px 0 }
body.canchas-page .title { font-size:clamp(28px,3.5vw,40px); line-height:1.15; margin:0 0 16px }
body.canchas-page .subtitle { font-size:clamp(16px,2.5vw,20px); color:#e5e7eb; margin:0 0 24px }
body.canchas-page .muted { color:var(--muted) }
body.canchas-page .center { text-align:center }

/* Hero local */
body.canchas-page .hero { position:relative; min-height:520px; display:flex; align-items:center; isolation:isolate; color:#fff; overflow:hidden }
body.canchas-page .hero::before { content:""; position:absolute; inset:0; background:url('/static/img/canchas/Imagen1.png') center/cover no-repeat; opacity:.6; z-index:-2 }
body.canchas-page .hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35)); z-index:-1 }
body.canchas-page .hero .wrap { max-width:900px }

/* Bloques y grillas */
body.canchas-page .beneficios { grid-template-columns:repeat(1,minmax(0,1fr)) }
@media (min-width:768px) { body.canchas-page .beneficios { grid-template-columns:repeat(4,1fr) } }
body.canchas-page .beneficio h3 { margin:0 0 6px; font-size:18px }
body.canchas-page .beneficio p { margin:0; color:var(--muted); font-size:14px }

body.canchas-page .galeria { grid-template-columns:repeat(1,minmax(0,1fr)) }
@media (min-width:768px) { body.canchas-page .galeria { grid-template-columns:repeat(3,1fr) } }

body.canchas-page .ratio { position:relative; width:100%; padding-top:62% }
body.canchas-page .ratio > img,
body.canchas-page .ratio > .img-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--radius) }

body.canchas-page .tech img { border-radius:var(--radius); box-shadow:var(--shadow) }

/* Details/FAQ locales */
body.canchas-page details { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:0 }
body.canchas-page details + details { margin-top:12px }
body.canchas-page summary { padding:18px 20px; cursor:pointer; font-weight:600; list-style:none }
body.canchas-page summary::-webkit-details-marker { display:none }
body.canchas-page details[open] summary { border-bottom:1px solid #e5e7eb }
body.canchas-page details .content { padding:16px 20px; color:var(--muted) }

/* Proyectos grid */
body.canchas-page .proyectos { display:grid; gap:24px; grid-template-columns:repeat(1,minmax(0,1fr)) }
@media (min-width:900px) { body.canchas-page .proyectos { grid-template-columns:repeat(2,1fr) } }

/* Formularios locales */
body.canchas-page form { display:grid; gap:16px }
@media (min-width:768px) { body.canchas-page form { grid-template-columns:1fr 1fr } }
body.canchas-page label { font-size:14px }
body.canchas-page input,
body.canchas-page select,
body.canchas-page textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; outline:none }
body.canchas-page input:focus,
body.canchas-page select:focus,
body.canchas-page textarea:focus { box-shadow:0 0 0 4px var(--ring); border-color:var(--brand-600) }
body.canchas-page .form-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
body.canchas-page .form-actions .wa { background:#ecfdf5; color:#065f46; border-radius:999px; padding:.75rem 1rem; font-weight:600; border:1px solid #a7f3d0; display:inline-flex; align-items:center; gap:.5rem }

/* Botón flotante WhatsApp */
body.canchas-page .wa-fab { position:fixed; right:18px; bottom:18px; z-index:50; background:var(--brand-600); color:#fff; width:56px; height:56px; border-radius:999px; display:grid; place-items:center; box-shadow:var(--shadow) }
body.canchas-page .wa-fab:hover { background:var(--brand-700) }
body.canchas-page .wa-icon { width:24px; height:24px }

/* Badges, notas */
body.canchas-page .tests summary { color:#64748b }
body.canchas-page .badge { display:inline-block; background:#eef2ff; color:#3730a3; border-radius:999px; padding:.2rem .6rem; font-weight:700; font-size:12px }
body.canchas-page .note { font-size:12px; color:#64748b }

/* Modals locales */
body.canchas-page .modal { position:fixed; inset:0; display:none; padding:24px; background:rgba(0,0,0,.6); z-index:1000 }
body.canchas-page .modal.open { display:block }
body.canchas-page .modal .modal-dialog { max-width:980px; margin:40px auto; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow) }
body.canchas-page .modal .modal-header { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e7eb }
body.canchas-page .modal .modal-body { padding:18px }
body.canchas-page .modal .btn-close { background:none; border:0; font-size:24px; line-height:1; cursor:pointer }

/* Ajustes menores responsivos */
@media (max-width:576px) {
  body.canchas-page .hero { min-height:420px }
}