/* CSS real de las páginas institucionales portadas en la "Fase 2" del
   cierre del bloque web (§ auditoría de gaps 2026-09-10) — sobre-nosotros,
   qué-es-urban-fisio, contacto, empresas (espalda/fisioterapia/pilates),
   guía de consulta online, programas terapéuticos adicionales. Cada bloque
   citado con su línea real de origen en style.css del tema legacy, portado
   literal salvo la URL de assets. Se carga siempre junto a
   pagina-empresas.css (mismo `extraCss` del controlador `Pagina`, todas las
   páginas LEGAL/INSTITUCIONAL lo comparten). */

/* style.css:8071-8135 — Icontext (usado por Decálogo y otras secciones). */
.icontext {
    margin-bottom: 58px;
    text-align: center;
}
.icontext__icon {
    display: block;
    height: 116px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    width: 105px;
}
.icontext__b {
    color: #979797;
    display: inline-block;
    font-size: 1em;
    line-height: 1.1875em;
    max-width: 212px;
}
@media screen and (min-width: 768px) {
    .icontexts {
        display: flex;
        margin-bottom: 60px;
    }
    .icontext {
        flex-grow: 1;
        margin-bottom: 0;
    }
}
@media screen and (min-width: 1280px) {
    .icontexts {
        margin-left: auto;
        margin-right: auto;
        max-width: 1000px;
    }
    .icontext__icon {
        display: block;
        height: 116px;
        margin-bottom: 24px;
        margin-left: auto;
        margin-right: auto;
        width: 105px;
    }
}

/* style.css:9383-9492 — Employee (Sobre nosotros). */
.employees {
    padding: 50px 20px 20px;
}
.employees__h,
.employees__h strong {
    color: #50687B;
    font-size: 1.125em;
    line-height: 1.22em;
}
.employees__h {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.employees__list {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 60px;
}
.employee {
    margin-bottom: 40px;
    text-align: center;
}
.employee__divavatar {
    background-size: 155px 155px !important;
    background: #D3D3D3;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    margin: 0 auto 13px auto;
}
.employee__divavatar a img {
    transition: opacity .3s ease-in-out;
}
.employee__divavatar a img:hover {
    opacity: 0;
}
.employee__avatar {
    border-radius: 50%;
    height: auto;
    margin-bottom: 13px;
    width: 155px;
}
.employee__name {
    color: #50687B;
    font-size: 1em;
    font-weight: normal;
}
@media screen and (min-width: 768px) {
    .employees {
        margin-left: auto;
        margin-right: auto;
        max-width: 96%;
    }
    .employee {
        flex: 1 1 33%;
    }
    .employees__list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
@media screen and (min-width: 1024px) {
    .employees__h {
        text-align: center;
        width: 50%;
    }
    .employees__list {
        margin-right: auto;
        margin-left: auto;
        width: 57%;
    }
}

/* style.css:9498-9577 — Decalogue (Sobre nosotros). */
.decalogue__h {
    color: #60C4B8;
    font-family: "GalanoGrotesque", sans-serif;
    font-size: 2.8125em;
    margin: 0 auto 15px;
    text-align: center;
}
.decalogue__b {
    color: #979797;
    font-size: 1.3125em;
    line-height: 1.2em;
    margin: 0 auto 66px;
    text-align: center;
    width: 50%;
}
.decalogue .icontext__icon {
    height: 45px;
    margin-bottom: 18px;
}
@media screen and (min-width: 768px) {
    .decalogue {
        margin-left: auto;
        margin-right: auto;
        max-width: 96%;
    }
    .decalogue__h {
        font-size: 3.375em;
        width: 50%;
    }
    .decalogue__b {
        font-size: 1.5em;
        width: auto;
    }
    .decalogue .icontexts {
        flex-wrap: wrap;
    }
    .decalogue .icontext {
        flex: 1 1 50%;
        margin-bottom: 32px;
    }
    .decalogue .icontext__icon {
        height: 47px;
    }
}
@media screen and (min-width: 1280px) {
    .decalogue__h {
        font-size: 4.125em;
        width: 35%;
    }
}

/* style.css:8141-8421 — What Is Urban. */
.whatisurban__intro {
    background-color: #60C4B8;
    padding: 42px 15px;
    text-align: center;
}
.whatisurban__intro__h {
    color: #ffffff;
    font-family: "GalanoGrotesque", sans-serif;
    font-size: 1.875em;
    line-height: 1.0666666667em;
}
.whatis-section-phrases {
    padding: 56px 53px;
}
.whatis-section-how__icontexts {
    margin-top: 68px;
}
.whatisurban__title {
    color: #50687B;
    display: block;
    font-size: 1.5em;
    line-height: 1.2083333333em;
    margin-left: auto;
    margin-right: auto;
    min-width: 239px;
    text-align: center;
    width: 74.6875%;
}
.whatisurban__desc {
    background-image: url('../img/whatis-background.svg');
    background-position: top center;
    background-repeat: repeat-x;
    margin-bottom: 50px;
}
.whatisurban__desc__wrapper {
    background-color: #ffffff;
    margin-left: 17px;
    margin-right: 17px;
    padding: 10px 17px;
}
.whatisurban__desc__b {
    background-color: #ffffff;
    border: 2px solid #69D4C4;
    color: #9B9B9B;
    font-size: 0.875em;
    line-height: 1.4285714286em;
    padding: 18px 15px;
    text-align: center;
}
.whatisurban__desc__b p { margin-bottom: 30px; }
.whatisurban__desc__b p:last-child { margin-bottom: 0; }
.whatis-section-ours {
    text-align: center;
}
.whatis-section-ours__h {
    color: #60C4B8;
    font-size: 2.8125em;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 270px;
    line-height: 1em;
}
.whatis-section-ours__sh {
    color: #979797;
    font-size: 1.3125em;
    line-height: 1.1904761905em;
    font-weight: 300;
}
.whatis-section-ours__bckg {
    background-image: url('../img/what-is-urban.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    height: 520px;
    margin-bottom: 80px;
    position: relative;
}
.whatis-section-ours__desc {
    position: absolute;
    bottom: -40px;
}
.whatis-section-trust {
    margin-bottom: 100px;
    text-align: center;
}
.whatis-section-ours__b {
    color: #9B9B9B;
    font-size: 0.875em;
    line-height: 1.4285714286em;
    margin: 23px auto 0;
    max-width: 280px;
}
.whatis-section-ours_icontexts {
    margin-top: 65px;
}
.whatis-section-trust__btn {
    display: inline-block;
    width: 225px;
}
.whatis-section-faqs {
    background-color: #F8F8F8;
    padding: 58px 30px;
    text-align: center;
}
.whatis-section-faqs__h {
    color: #E73571;
    font-family: "GalanoGrotesque", sans-serif;
    font-size: 1.6875em;
    line-height: 1em;
    margin: 0 auto;
    max-width: 266px;
}
.whatis-section-faqs__b {
    color: #50687B;
    font-family: "GalanoGrotesque", sans-serif;
    font-size: 1.6875em;
    line-height: 1em;
    margin: 0 auto 33px;
    max-width: 266px;
}
@media screen and (min-width: 768px) {
    .whatis-section-phrases {
        padding-bottom: 95px;
        padding-top: 90px;
    }
    .whatisurban__intro {
        padding-top: 88px;
    }
    .whatisurban__intro__h {
        display: inline-block;
        font-size: 2.5em;
        line-height: 1em;
        max-width: 632px;
    }
    .whatisurban__title {
        font-size: 1.5em;
        line-height: 1.2083333333em;
        max-width: 586px;
    }
    .whatisurban__desc__wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 708px;
    }
    .whatisurban__desc__b {
        font-size: 1em;
        line-height: 1.5625em;
        padding: 39px 20px;
    }
    .whatis-section-ours__h {
        font-size: 3.375em;
        max-width: 582px;
    }
    .whatis-section-ours__b {
        font-size: 1em;
        max-width: 557px;
        line-height: 1.5625em;
    }
    .whatis-section-ours__bckg {
        align-items: center;
        display: flex;
        margin-bottom: 90px;
    }
    .whatis-section-ours__desc {
        position: relative;
        bottom: auto;
    }
    .whatis-section-faqs {
        padding-top: 69px;
    }
    .whatis-section-faqs__h,
    .whatis-section-faqs__b {
        font-size: 2.0625em;
        max-width: none;
    }
}
@media screen and (min-width: 1024px) {
    .whatisurban__intro__h {
        font-size: 2.875em;
        max-width: 883px;
    }
    .whatis-section-ours { padding-top: 20px; }
    .whatis-section-ours__h { font-size: 4.125em; }
    .whatisurban__desc__b {
        max-width: 726px;
    }
    .whatis-section-faqs__h,
    .whatis-section-faqs__b {
        font-size: 2.625em;
    }
    .whatis-section-faqs__b { margin-bottom: 42px; }
}
@media screen and (min-width: 1280px) {
    .whatis-section-ours__bckg {
        background-size: cover;
    }
}

/* `<style>` inline idéntico en las 3 páginas "empresas-*" (espalda/
   fisioterapia/pilates) — nunca vivió en style.css, solo dentro de cada
   plantilla PHP; portado aquí una sola vez porque las 3 lo comparten letra
   por letra (`.bottomsectiondiv{width:100%}` es real en la de espalda y no
   en las otras 2, pero no tiene efecto visible distinto — se deja para las
   3 sin problema). */
.topsectioncontent { margin-top: 40px; }
.topsectioncoltext { width: 36%; }
.topsectioncolimg { width: 50%; }
.bottomsectioncontent { margin-bottom: 60px; }
.bottomsectiondiv { padding: 0 34px; width: 100%; }
.bottomsectiondiv h2 {
    width: 100%;
    margin-bottom: 30px;
}
.topsectioncontent ul, .bottomsectiondiv ul {
    list-style-type: disc;
    margin-left: 20px;
    color: #979797;
    line-height: 1.375em;
}
/* page-urbanconnect-guide.php:29-40 — misma familia de `<style>` inline,
   con estas 3 reglas extra de lista numerada que las páginas "empresas-*"
   no tenían. */
.topsectioncontent ol {
    list-style-type: decimal;
    margin-left: 20px;
    color: #979797;
    line-height: 1.375em;
}
.topsectioncontent ol ol {
    list-style-type: lower-alpha;
}
.topsectioncontent ol li {
    margin-bottom: 20px;
}
.buttondiv {
    overflow: hidden;
    margin-top: 40px;
}
.buttondiv button { float: right; }
@media (max-width: 1023px) {
    .topsectioncontent {
        display: flex;
        justify-content: space-around;
        margin: 40px auto 30px;
    }
    .topsectioncontent p, .bottomsectiondiv p { width: 100%; }
}
@media (max-width: 624px) {
    .topsectioncolimg {
        padding: 0 34px;
        width: 100%;
    }
    .topsectioncontent { display: block; }
    .topsectioncoltext {
        margin-bottom: 30px;
        padding: 0 34px;
        width: 100%;
    }
    .buttondiv button {
        float: none;
        margin: auto;
    }
    /* Las 4 páginas "programa-terapeutico-*" adicionales usan esta clase en
       vez de `.buttondiv` para el botón de reserva — sin ninguna regla base
       propia (solo esta, en móvil), a diferencia de `.buttondiv` que sí
       flota a la derecha en escritorio. */
    .buttondivright button {
        margin: auto;
    }
}

/* `<style>` inline de `page-residencias.php` — formulario de contacto real
   (mismo criterio ya usado en `fisioterapia-para-empresas`: campos reales
   pero `disabled`, sin backend de envío todavía). `.empresacolform{width:
   60%}` es más específico en la práctica que el `max-width:940px` genérico
   de frontend.css porque este fichero se carga después (mismo orden real
   de `extraCss`). */
.empresasectionsuperior {
    margin-top: 34px;
    margin-bottom: 30px;
}
.empresadivsuperior { padding: 0 34px; width: 100%; }
.empresadivsuperior h2 {
    width: 100%;
    margin-bottom: 30px;
}
.empresadivsuperior ul {
    list-style-type: disc;
    margin-left: 20px;
    color: #979797;
    line-height: 1.375em;
}
/* `margin: 0` explícito (no solo `margin-bottom`): sin esto, el
   `margin:0 auto` genérico de `.empresacolform` en frontend.css (pensado
   para el formulario Gutenberg de fisioterapia-para-empresas, centrado de
   verdad ahí) sobrevive para left/right — encontrado real comparando
   contra el original, que no lo centra, lo deja pegado al borde
   izquierdo de `.empresadivsuperior`. */
.empresacolform {
    margin: 0 0 20px 0;
    width: 60%;
}
.empresacolform label { padding-left: 0; }
.empresaimgrow {
    width: 100%;
    margin-bottom: 30px;
}
.empresahablamos { margin-top: 40px; }
.empresaformdesc { margin-bottom: 50px; }
@media (max-width: 1023px) {
    .empresadivsuperior p { width: 100%; }
}
@media (max-width: 624px) {
    .empresacolform { width: 85%; text-align: center; margin: auto; }
    .empresahablamos { text-align: center; }
    .empresaformdesc { text-align: center; }
    .empresasubmitbutton { margin: auto; }
}

/* page-consulta-online.php:50-58 — tabla real de checkboxes/radios del
   formulario clínico (sin backend, campos `disabled` — mismo criterio de
   siempre). Los 3 contenedores de "detalle si procede" empiezan ocultos en
   el original (JS los muestra solo si el select asociado vale "si"); como
   aquí los selects están deshabilitados y nunca cambian, se quedan
   ocultos siempre — mismo estado inicial real, sin necesidad de replicar
   el JS condicional. */
.checkstablelayout {
    border: 0;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 34px;
}
.checkstablelayout th { padding-right: 10px; }
#pacactividadcualcontainer, #pacmedicacioncualcontainer, #pacocurridoantessolucioncontainer { display: none; }

/* page-landingpage.php — landing de campañas de ads (Fase 5, § gaps
   2026-09-10). El resto del formulario ya reutiliza `.formV3`/`.botonv3`
   (v3-comun.css, mismo sistema real del asistente de reserva) — solo
   faltaban estas 2 reglas reales, no encontradas en `style.css` sino en el
   CSS combinado real que sirve esta página en concreto (Autoptimize),
   confirmado ahí. */
.campana.fondo { height: 100vh; }
.campana-textos { background: rgba(255, 255, 255, .7); padding: 10px 20px; border-radius: 10px; margin-top: 20px; }
/* `.container-pagina` ya estaba portada, pero SOLO como `.especialidad
   .container-pagina` (pagina-especialidad.css) — encontrado real
   comparando el layout contra el original (columnas de texto/formulario
   aplastadas en la esquina en vez de a 66%/33% del ancho real, medido con
   getBoundingClientRect contra el original: 1140px de ancho total,
   760px/380px las 2 columnas) — esta página no tiene ningún ancestro
   `.especialidad`, así que la regla scoped nunca llegaba a aplicar. El
   resto (`.row`/`.col-md-8`/`.col-md-4`) ya lo resuelve Bootstrap, cargado
   sitewide — no hace falta nada más. */
.container-pagina { max-width: 1140px; margin: 0 auto; padding: 60px 15px; }