/* ----------------------------------

Template Name: Robok - AI Agency & Technology HTML Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Sora
Main Color   : #0694B9

-------------------------------------

[Typography]

Body copy:    15px 'Sora', sans-serif
Header:     36px 'Sora', sans-serif
Input, textarea:  16px 'Sora', sans-serif
Sidebar heading:  20px 'Sora', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
    02. Preloader
    03. Topbar
	    - Topbar Style One
        - Topbar Style Two
    04 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    05. Banner
        - Banner Fade
        - Banner Slide
        - Banner Zoom
    06. About Us
	    - About Style One
        - About Style Two
    07. Services
        - Tab Version
        - Grid Version
        - Services Single
    08. Features
    09. Work Process
    10. Why Choose Us
    11. Fun Factor
    12. Pricing Table
    12. Partner World Wide
    13. Team
        - Grid Version
        - Carousel Version
        - Team Details
    14. Testimonials
		- Single Slider
        - Center Slider
    15. Projects
		- Grid Version
        - Carousel Version
        - Project Details
    16. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    17. Request Call Back
    18. FAQ
    19. Error 404
    20. Footer
    21. PHP Contact Form
    22. Others

*/

/*
** Write you custom css below
*/

/* El tema define --color-primary: #7476ff en assets/css/style.css; se
   sobreescribe aquí (en vez de editar ese archivo de terceros) para que
   botones, tooltips, etc. usen el nuevo color en toda la página. */
:root {
    --color-primary: #0694B9;
    --color-heading: #0552B4;
}

.navbar-box.white.sticked img.logo.logo-scrolled {
        height: 50px;
    }

/* Acomodar skills en columna */
.search-tags {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* espacio entre elementos */
}

/* Badges de Bootstrap (.badge) en vez de píldoras <a>: ya no son elementos
   interactivos, así que no tienen ningún efecto de hover por defecto. */
.search-tags ul li .badge {
    color: #fff !important;
    background: #0694B9;
    font-size: 16px;
    font-weight: 400;
    padding: 8px 14px;
}

/* Centrar la lista horizontalmente si es necesario */
.search-tags ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.search-tags h5 {
    margin-bottom: 1rem; /* 16px de espacio */
}


.fondo-tecnologias{
    background: url(assets/img/shape/banner-16.jpg);
    background-position: center; 
}

.fondo-tecnologias h4, .fondo-tecnologias p{
    color: #60616c !important;
}


.btn i {
    transform: rotate(0deg);
}

/* El tema le pone margin-top:30px a footer ul.contact y margin-bottom:50px a
   la imagen del logo (pensados para footers con más contenido), lo que
   desalineaba verticalmente el logo y el link "www.quadrato.mx" entre sí. */
.footer-style-two ul.contact {
    margin-top: 0;
}

.footer-style-two .f-item .logo img {
    margin-bottom: 0;
}

/* ===== Cotizador "Sistema de Adquisición de Pacientes" ===== */

.sd-section {
    padding: 60px 0;
}

.sd-section-title {
    text-align: center;
    margin-bottom: 40px;
}

.sd-base-card {
    border: 2px solid #0694B9;
    border-radius: 16px;
    padding: 40px;
    background: #fff;
}

.sd-base-card > p {
    line-height: 1.4;
}

.sd-base-price {
    font-size: 38px;
    font-weight: 700;
    color: #0694B9;
    margin-bottom: 4px;
}

@media (max-width: 767.98px) {
    .sd-base-price {
        font-size: 28px;
    }
}

.sd-base-price-sub {
    font-size: 14px;
    color: #6a6c79;
    margin-bottom: 24px;
}

.sd-base-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sd-base-card ul li {
    padding: 4px 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.3;
}

.sd-base-card ul li i {
    color: #0694B9;
    margin-top: 3px;
}

.sd-module-block-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
}

.sd-module {
    border: 1px solid #e6e6ef;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.2s, background 0.2s;
}

.sd-module:has(input:checked) {
    border-color: #0694B9;
    background: #f7f7ff;
}

.sd-module .form-check {
    flex-shrink: 0;
}

.sd-module .form-check-input {
    margin-top: 4px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    min-height: 0 !important;
    width: 1.5em;
    height: 1.5em;
}

.sd-module .form-check-input:checked {
    background-color: #0694B9;
    border-color: #0694B9;
}

.sd-module-body {
    flex: 1;
}

.sd-module-title-row {
    font-weight: 700;
}

.sd-module-badge {
    display: inline-block;
    background: #0694B9;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.sd-module-price {
    color: #0694B9;
    font-weight: 700;
    margin-top: 4px;
}

.sd-module-desc {
    color: #6a6c79;
    font-size: 14px;
    margin-top: 6px;
}

.sd-summary-box {
    position: sticky;
    bottom: 16px;
    background: #0552B4;
    color: #fff;
    border-radius: 16px;
    padding: 15px 32px;
    margin-top: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.sd-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0px 0;
}

.sd-summary-row .label {
    color: #fff;
}

.sd-summary-renewal-row {
    align-items: center;
    margin-top: 8px;
}

.sd-summary-cta {
    flex-shrink: 0;
}

/* El tema sobreescribe el padding/font-size de .btn-sm de Bootstrap, así que
   forzamos aquí un tamaño chico real. */
.sd-btn-continuar {
    padding: 6px 18px;
    padding-top: 6px;
    font-size: 13px;
}

/* Anula el "barrido de color" grande que .btn-style-one aplica en :hover, y
   lo reemplaza por un cambio de color sutil (oscurece un poco el morado). */
.sd-btn-no-hover {
    transition: filter 0.2s ease;
}

.sd-btn-no-hover:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    filter: brightness(0.9);
}

.sd-btn-no-hover:hover:after {
    height: 0 !important;
}

.sd-summary-row .value {
    font-size: 18px;
    font-weight: 700;
}

.sd-summary-note {
    color: #fff;
    font-size: 13px;
    margin-top: 4px;
}

.sd-form-section {
    background: #f7f7fb;
}

.sd-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

#sd-form-error {
    color: #d33;
}

.sd-field-invalid {
    border-color: #d33 !important;
    box-shadow: 0 0 0 1px rgba(221, 51, 51, 0.25) !important;
}

.sd-field-error {
    display: block;
    color: #d33;
    font-size: 13px;
    margin-top: 4px;
}

.sd-tooltip {
    text-decoration: underline dotted;
    text-decoration-color: #0694B9;
    text-decoration-thickness: 2px;
    cursor: help;
}

.tooltip .tooltip-inner {
    max-width: min(400px, 85vw);
    padding-top: 8px;
    padding-bottom: 8px;
}

.sd-char-count {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #9a9aab;
    margin-top: 4px;
}

#sd-form-success {
    color: #1b8a4c;
}

.banner-style-five-items h2 {
    font-size: 55px;
    line-height: 1.15;
}

/* El tema deja ~100px de espacio entre el nav y el badge ("sub-title") por
   el padding-top:230px de .banner-style-five-area; lo reducimos para que
   ese espacio quede en ~55px. */
.banner-style-five-area {
    padding-top: 185px;
}

@media (max-width: 767.98px) {
    .banner-style-five-area {
        padding-top: 50px;
    }

    .banner-style-five-items h2 {
        font-size: 35px;
    }
}

/* Tamaño de imagen controlado por Swiper (ancho del slide según
   slidesPerView/breakpoint); solo se ajusta el redondeado. */
.infinite-gallery-item img {
    border-radius: 10px;
}

/* El tema pone "bottom: -120px" al carrusel; lo subimos 80px (-120 + 80 =
   -40) respecto a esa posición. */
.infinite-gallery-carousel {
    bottom: -40px;
}

/* El tema pinta de blanco todo el texto dentro de ".text-light" (clase del
   hero); lo forzamos a oscuro. Los títulos usan el mismo color que el resto
   de los h1-h6 del sitio; el texto normal se queda en negro. */
.banner-style-five-items,
.banner-style-five-items p,
.banner-style-five-items span,
.banner-style-five-items a {
    color: #000 !important;
}

.banner-style-five-items h2,
.banner-style-five-items h3,
.banner-style-five-items h4,
.banner-style-five-items h5 {
    color: #0552B4 !important;
}

/* Efecto "mica"/vidrio esmerilado real en el cuadro del nav (antes era solo
   transparente + borde sutil, sin desenfoque). */
nav.navbar.validnavs.navbar-box.white .nav-box {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Mismo efecto "mica" en el badge del hero ("Para médicos y profesionales..."). */
.banner-style-five-items .sub-title {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* El texto sobre el carrusel ("Algunos proyectos...") está fuera de
   .banner-style-five-items, así que no tomaba el override de color negro. */
.infinite-gallery-carousel p,
.infinite-gallery-carousel h4 {
    color: #000 !important;
}

.infinite-gallery-carousel h4.sub-title {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 4px 14px;
}

.sd-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #0694B9;
    border-radius: 50%;
    color: #0694B9;
    font-size: 10px;
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
}

.sd-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

.sd-type-badge--once {
    background: #e8f4f8;
    color: #0552B4;
}

.sd-type-badge--monthly {
    background: #e6f7f5;
    color: #0694B9;
}

/* ===== "¿Por qué Quadrato?" ===== */
.sd-why-section {
    background: #f7f7fb;
}

.sd-why-item {
    text-align: center;
    padding: 0 10px;
}

.sd-why-item i {
    font-size: 36px;
    color: #0694B9;
    margin-bottom: 16px;
}

.sd-why-item h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.sd-why-item p {
    color: #6a6c79;
    font-size: 14px;
    margin-bottom: 0;
}