/* Bloque «Instaladas en casas de nuestros clientes» (components/fotos-reales.php) */
.fr { max-width: 1100px; margin: 3rem auto; padding: 0 1rem; }
.fr h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-align: center; color: var(--text-dark, #2d2a26); margin: 0 0 .6rem; }
.fr-intro { text-align: center; color: var(--text-medium, #5c554d); max-width: 680px; margin: 0 auto 1.6rem; line-height: 1.6; }
.fr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fr-grid li { margin: 0; }
.fr-foto { display: block; width: 100%; padding: 0; border: 0; background: #eee; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.fr-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.fr-foto:hover img, .fr-foto:focus-visible img { transform: scale(1.04); }
.fr-foto:focus-visible { outline: 3px solid var(--primary, #8b5a2b); outline-offset: 2px; }
.fr-pie { margin: .45rem 0 0; font-size: .88rem; color: var(--text-medium, #5c554d); }
.fr-mas { text-align: center; margin: 1.4rem 0 0; }
.fr-mas a { font-weight: 700; color: var(--primary, #8b5a2b); text-decoration: none; }
.fr-mas a:hover { text-decoration: underline; }

.fr-visor { width: min(1000px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 14px; background: #fff; overflow: auto; }
.fr-visor::backdrop { background: rgba(20, 16, 12, .8); }
.fr-visor img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #111; }
.fr-visor-texto { padding: 1rem 1.25rem 1.25rem; }
.fr-visor h3 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--text-dark, #2d2a26); }
.fr-visor-pie { margin: 0 0 .5rem; font-size: .88rem; color: var(--text-medium, #5c554d); }
.fr-visor-com { margin: 0 0 .8rem; line-height: 1.6; color: var(--text-dark, #2d2a26); }
.fr-visor-enlace { font-weight: 700; color: var(--primary, #8b5a2b); text-decoration: none; }
.fr-cerrar { position: sticky; top: .5rem; float: right; margin: .5rem .5rem -3rem 0; z-index: 1; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 1.5rem; line-height: 1; cursor: pointer; }

@media (max-width: 900px) { .fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fr-grid { gap: .6rem; } .fr-pie { font-size: .8rem; } }
.fr-desc { margin: .5rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--text-dark, #2d2a26); }
.fr-desc + .fr-pie { margin-top: .2rem; }
.fr-enlace { display: inline-block; margin-top: .3rem; font-size: .88rem; font-weight: 700; color: var(--primary, #8b5a2b); text-decoration: none; }
.fr-enlace:hover { text-decoration: underline; }
.fr-cita { margin: .35rem 0 0; padding-left: .7rem; border-left: 3px solid var(--primary, #8b5a2b); font-size: .88rem; font-style: italic; line-height: 1.45; color: var(--text-dark, #2d2a26); }
.fr-visor-cita { margin: 0 0 .8rem; padding-left: .8rem; border-left: 3px solid var(--primary, #8b5a2b); font-style: italic; color: var(--text-dark, #2d2a26); }
.fr-visor-cita:empty { display: none; }

/* Opiniones de Google (components/opiniones-google.php) */
.og-resumen { text-align: center; margin: 0 0 1.4rem; color: var(--text-medium, #5c554d); }
.fr .og-resumen { margin: 1.2rem 0 0; }
.og-resumen a { color: var(--primary, #8b5a2b); font-weight: 700; text-decoration: none; }
.og-resumen a:hover { text-decoration: underline; }
.og-estrellas { color: #f5a623; letter-spacing: .05em; }
.og { max-width: 1100px; margin: 3rem auto; padding: 0 1rem; }
.og h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-align: center; color: var(--text-dark, #2d2a26); margin: 0 0 .6rem; }
.og-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.og-lista blockquote { margin: 0; height: 100%; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--border-light, #e7e1d8); border-radius: 12px; }
.og-lista p { margin: .4rem 0 .6rem; line-height: 1.6; color: var(--text-dark, #2d2a26); }
.og-lista footer { font-size: .88rem; color: var(--text-medium, #5c554d); }
.og-lista footer a { color: var(--primary, #8b5a2b); }
@media (max-width: 700px) { .og-lista { grid-template-columns: 1fr; } }

/* Preguntas frecuentes de categoría (sección visible que coincide con el marcado FAQPage) */
.faq-cat { max-width: 900px; margin: 3rem auto; padding: 0 1rem; }
.faq-cat h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-align: center; color: var(--text-dark, #2d2a26); margin: 0 0 1.2rem; }
.faq-cat details { background: #fff; border: 1px solid var(--border-light, #e7e1d8); border-radius: 10px; margin-bottom: .6rem; }
.faq-cat summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; color: var(--text-dark, #2d2a26); list-style: none; }
.faq-cat summary::-webkit-details-marker { display: none; }
.faq-cat summary::after { content: '+'; float: right; font-weight: 400; color: var(--primary, #8b5a2b); }
.faq-cat details[open] summary::after { content: '−'; }
.faq-cat details p { margin: 0; padding: 0 1.1rem 1rem; line-height: 1.65; color: var(--text-medium, #5c554d); }
.faq-cat-mas { text-align: center; margin-top: 1rem; color: var(--text-medium, #5c554d); }
.faq-cat-mas a { color: var(--primary, #8b5a2b); font-weight: 700; }