/* El bloque de la oferta de cada página: datos, servicios, quién hace qué y
   preguntas. El HTML lo escribe el backoffice (Oferta → Publicar) y lo coloca
   ~/routes/analisis/oferta.py entre las marcas OFERTA. Aquí solo el aspecto.
   Colores del logo, como lavolta.css. */

.of { --of-rojo: #dd4438; --of-marino: #0c2d52; --of-tinta: #1b2230; --of-gris: #5b6475; --of-linea: #e3e6ec; --of-papel: #faf9f5;
    background: var(--of-papel); color: var(--of-tinta); padding: 64px 0; }
.of-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.of h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; font-weight: 800; color: var(--of-marino); margin: 48px 0 18px; }
.of h2:first-child { margin-top: 0; }
.of h3 { font-size: 1rem; font-weight: 800; color: var(--of-marino); margin: 0 0 10px; }

/* De un vistazo */
.of-datos { margin: 0; background: #fff; border: 1px solid var(--of-linea); border-radius: 12px; overflow: hidden; }
.of-datos > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--of-linea); }
.of-datos > div:first-child { border-top: 0; }
.of-datos dt { font-weight: 700; color: var(--of-marino); }
.of-datos dd { margin: 0; line-height: 1.55; }

/* Servicios: una caja por estado */
.of-servicios { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.of-estado { background: #fff; border: 1px solid var(--of-linea); border-top: 4px solid var(--of-gris); border-radius: 12px; padding: 18px; }
.of-included { border-top-color: #1f9d55; }
.of-optional { border-top-color: var(--of-marino); }
.of-on_request { border-top-color: #d98a00; }
.of-not_included { border-top-color: var(--of-rojo); }
.of-not_available { border-top-color: #9aa3b2; }
.of-ask { border-top-style: dashed; }
.of-estado ul { list-style: none; margin: 0; padding: 0; }
.of-estado li { padding: 7px 0; border-top: 1px solid #f0f1f4; line-height: 1.4; }
.of-estado li:first-child { border-top: 0; padding-top: 0; }
.of-estado small { display: block; color: var(--of-gris); font-size: .86rem; margin-top: 2px; }

/* Cómo se reserva, pago, cancelación, quién hace qué */
.of-textos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 48px; align-items: start; }
.of-textos > div { background: #fff; border: 1px solid var(--of-linea); border-radius: 12px; padding: 18px; }
.of-textos p { margin: 0; line-height: 1.6; }
.of-textos ol { margin: 0; padding-left: 20px; line-height: 1.6; }
.of-textos li { margin-bottom: 4px; }

/* Preguntas */
.of-faq details { background: #fff; border: 1px solid var(--of-linea); border-radius: 10px; margin-bottom: 8px; }
.of-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--of-marino); }
.of-faq details[open] summary { border-bottom: 1px solid #f0f1f4; }
.of-faq details p { margin: 0; padding: 14px 18px 16px; line-height: 1.6; }

@media (max-width: 640px) {
    .of { padding: 44px 0; }
    .of-datos > div { grid-template-columns: 1fr; gap: 2px; }
}