/* ESTILOS GENERALES CSNET */

:root {
    --principal: #009ca3;
    --secundario: #30aab0;
    --negro: #131313;
}

@font-face {
    font-family: "Roboto";
    src: url("/fuentes/Roboto/Roboto-Light.ttf");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src: url("/fuentes/Roboto/Roboto-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url("/fuentes/Roboto/Roboto-Bold.ttf");
    font-style: normal;
    font-weight: 700;
}

.fondo-principal {
    background-color: var(--principal);
}

.color-principal {
    color: var(--principal);
}

.boton-principal {
    color: white;
    background-color: var(--principal);
    border: 1px solid var(--principal);
}

.boton-principal:hover {
    color: white;
    background-color: var(--secundario);
    border: 1px solid var(--secundario);
}

.boton-outline-principal {
    color: var(--principal);
    border: 1px solid var(--principal);
}

.boton-outline-principal:hover {
    color: white;
    background-color: var(--principal);
}

body {
    font-family: "Open sans", sans-serif;
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 1rem;
}

main {
    flex-grow: 1;
}

.boton-clausula {
    width: fit-content;
    border: 1px solid rgb(190, 190, 190);
}

.boton-clausula:focus:not(:focus-visible),
.boton-clausula:not(.collapsed) {
    color: var(--negro);
    box-shadow: none;
    background-color: transparent;
    border: 1px solid rgb(190, 190, 190);
}

.boton-clausula:not(.collapsed)::after {
    background-image: url("/imagenes/iconos/chevron-down.svg"),
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.card-noticia {
    text-decoration: none;
    color: var(--negro);
    transition: all 0.2s;
}

.card-noticia:hover {
    color: var(--negro);
    opacity: 0.7;
}

.noticia a {
    color: var(--principal);
    text-decoration: none;
    transition: all 0.2s;
}

.noticia a:hover {
    opacity: 0.7;
}

ul.pagination {
    justify-content: center;
    margin-bottom: 3em;
}

.pagination .page-item.active .page-link {
    background-color: var(--verde1);
    border-color: var(--verde1);
}

.pagination .page-link {
    color: var(--verde1);
}

.pagination .page-link:focus {
    box-shadow: none;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 0;
}

.pie a {
    color: var(--negro);
    text-decoration: none;
    transition: all 0.2s;
}

.pie a:hover {
    color: var(--principal);
}

/* FIN DE ESTILOS GENERALES CSNET */

.pie {
    background-color: rgb(234, 238, 241);
}

/* Nuevos estilos */

/* ===============================
   HEADER ESTILO IMAGEN
================================ */

#cabecera {
    width: 100%;
}

/* Logo */
.logo-img {
    max-height: 80px;
    width: auto;
    max-width: 100%;
    transition: max-height .3s ease;
}




/* Links menú */
.nav-link {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0.2rem 0;
    color: #006b6f;
    transition: 0.3s ease;
}

.header-small .menu-principal .nav-link {
    font-size: 1.15rem;
    transition: font-size 0.25s ease, padding 0.25s ease;
}

/* Franja superior */
.header-top {
    background-color: #cfe9e5;
}

.header-top-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}

/* Franja inferior */
.header-bottom {
    background-color: #a8ddb5;
    padding: 0;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

/* Menú */
.menu-principal {
    gap: 2.5rem;
}

.nav-link:hover {
    opacity: 0.75;
    color: #006b6f;
}

/* Botón móvil */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Compensación fixed-top */
body {
    padding-top: 180px;
}

/* CONTENIDO */

/* Hero */
.hero-section {
    /* min-height: 40vh; */
    background-image: url(/imagenes/paginas/index/bloque-imagen-1.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 5rem 1rem;
}

/* El contenido por encima del blur */
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Color corporativo */
.text-teal {
    color: #007c78;
}

/* Franja verde inferior */
.clinic-info {
    background-color: #a8ddb8;
    padding: 3rem 1rem;
    color: #006b6f;
}

/* Seccion imagenes */
.image-strip {
    width: 100%;
    max-width: 1100px;
    height: 260px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.image-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Divisor imagen */

.divisor-imagen {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
}

.divisor-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* tratamientos */
.treatment-box {
    background: #a8ddb8;
    color: #000;
    padding: 1.5rem 1rem;
    height: 100%;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-teal {
    color: #007c78;
}

.treatment-box {
    background: #a8ddb8;
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    border-radius: 6px;
    transition: background .2s ease;
}

.treatment-box:hover {
    background: #8fd3b0;
}


/* Capa de sombras por encima */
.divisor-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;

    box-shadow: inset 0 25px 25px -20px rgba(0, 0, 0, 0.35),
        inset 0 -25px 25px -20px rgba(0, 0, 0, 0.35);
}

/* Clinica */
.clinic-thumb {
    border: 1px solid #ccc;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clinic-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* PIE */
.footer-contact {
    background: #007c78;
}

.footer-contact h3 {
    font-weight: 700;
    letter-spacing: 1px;
}

.footer-contact .form-control {
    border-radius: 2px;
    border: none;
}

.footer-contact .btn-dark {
    background: linear-gradient(#444, #000);
    border: none;
}

.footer-contact .btn-dark:hover {
    background: linear-gradient(#000, #222);
}

/* Contacto */
.contact-section {
    background: linear-gradient(135deg, #007c78, #005f5c);
}

.formulario-contacto {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
}
.contact-section h2 {
    color: #fff;
}

.contact-section .card{
    color: white;
}

.formulario-contacto {
    background: rgba(255,255,255,0.95);
    border-radius: 6px;
    padding: 2.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}

.formulario-contacto .form-label {
    color: #000;
}

.formulario-contacto .form-control {
    border-radius: 3px;
    border: 1px solid #ccc;
}

.boton-principal {
    background: linear-gradient(#444,#000);
    color: #fff;
    border: none;
    padding: .6rem 2rem;
}

.boton-outline-principal {
    border: 2px solid #000;
    background: transparent;
    padding: .6rem 2rem;
}




/* Tablet */
@media (max-width: 992px) {
    .logo-img {
        max-height: 60px;
    }
}

/* Móvil */
@media (max-width: 576px) {
    .header-top-inner {

    padding: 0.5rem 0;
}
    .logo-img {
        max-height: 50px;
    }
}

/* Scroll (siempre debe ganar) */
.header-small .logo-img {
    max-height: 40px;
}

.header-small .header-top-inner{
    padding: 0.5rem;
}

/* Scroll en móvil */
@media (max-width: 576px) {
    .header-small .logo-img {
        max-height: 70px;
    }
}
/* Mobile */
@media (max-width: 767px) {
    .menu-principal {
        gap: 0;
    }

    .menu-principal .nav-link {
        padding: 0.75rem 1rem;
    }
}