:root {
  /* =========================================================
     PALETA CORPORATIVA - CLÍNICA DEL DOLOR ECUADOR
     Colores principales tomados del logo oficial.
     Para futuros cambios de identidad, editar aquí.
     ========================================================= */
  --brand-primary: #295E2A;
  --brand-primary-dark: #1B421D;
  --brand-secondary: #C67F31;
  --brand-secondary-dark: #A76527;
  --brand-accent: #E8F2E8;
  --brand-soft: #F7FAF6;
  --brand-dark: #18351C;
  --text-main: #263329;
  --text-muted: #66736A;
  --white: #FFFFFF;
  --border: #E1E9E1;
  --shadow: 0 18px 50px rgba(41, 94, 42, .12);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text-main); background: var(--white); }
a { text-decoration: none; }
section { scroll-margin-top: 85px; }


/* =========================================================
   LOGOTIPO
   El PNG oficial ya tiene fondo transparente.
   ========================================================= */
.logo-clinica {
    max-height: 75px;
    width: auto;
}

.footer-logo-wrap {
  display: inline-block;
  background: #fff;
  padding: 9px 13px;
  border-radius: 14px;
}

.footer-logo {
    width: 70px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

.text-brand-secondary { color: var(--brand-secondary) !important; }

.btn-brand-secondary {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: #fff;
  font-weight: 600;
}
.btn-brand-secondary:hover,
.btn-brand-secondary:focus {
  background: var(--brand-secondary-dark);
  border-color: var(--brand-secondary-dark);
  color: #fff;
}

::selection {
  background: var(--brand-primary);
  color: #fff;
}

.topbar { background: var(--brand-dark); color: rgba(255,255,255,.82); }
.topbar a { color: rgba(255,255,255,.82); transition: .2s; }
.topbar a:hover { color: #fff; }
.social-links, .footer-social { display:flex; gap:14px; }
.social-links a, .footer-social a { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; }

.navbar {padding-top: 8px;padding-bottom: 8px;}
.navbar .container {display: flex;align-items: center;}
.navbar-brand { color: var(--brand-dark); line-height: 1.05; }
.navbar-brand strong { font-size: 1.15rem; }
.navbar-brand small { color: var(--text-muted); font-size:.7rem; margin-top:4px; font-weight:500; }
.brand-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--brand-accent); color:var(--brand-primary); font-size:1.45rem; }
.nav-link { font-weight:600; color:var(--text-main); }
.nav-link:hover, .nav-link.active { color:var(--brand-primary); }

.btn-brand { background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; font-weight:600; }
.btn-brand:hover { background:var(--brand-primary-dark); border-color:var(--brand-primary-dark); color:#fff; transform: translateY(-1px); }
.btn-outline-brand { border:1px solid var(--brand-primary); color:var(--brand-primary); font-weight:600; }
.btn-outline-brand:hover { background:var(--brand-primary); color:#fff; }

.hero-slide { min-height: 76vh; background-size:cover; background-position:center; position:relative; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,55,22,.86) 0%, rgba(18,55,22,.66) 48%, rgba(18,55,22,.20) 100%); }
.hero-content { position:relative; z-index:2; }
.min-vh-75 { min-height:76vh; }
.hero-slide h1 { font-size:clamp(2.6rem,5vw,4.6rem); line-height:1.04; font-weight:800; letter-spacing:-.04em; max-width:900px; }
.hero-slide .lead { max-width:720px; font-size:1.15rem; color:rgba(255,255,255,.9); }
.eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:800; margin-bottom:16px; }
.carousel-control-prev, .carousel-control-next { width:6%; }

.quick-benefits { margin-top:-46px; z-index:5; }
.benefit-item { padding:28px 30px; display:flex; align-items:center; gap:18px; border-right:1px solid var(--border); }
.benefit-item:last-child { border-right:0; }
.benefit-item i { font-size:2rem; color:var(--brand-primary); }
.benefit-item strong, .benefit-item span { display:block; }
.benefit-item span { font-size:.85rem; color:var(--text-muted); margin-top:3px; }

.section-space { padding:96px 0; }
.bg-soft { background:var(--brand-soft); }
.section-kicker { color:var(--brand-secondary); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.76rem; }
.section-title { font-size:clamp(2rem,4vw,3rem); line-height:1.12; letter-spacing:-.03em; font-weight:800; margin-top:10px; color:var(--brand-dark); }
.section-heading { max-width:760px; }
.text-brand { color:var(--brand-primary) !important; }

.image-stack { position:relative; padding:18px 50px 45px 0; }
.main-image { width:100%; height:560px; object-fit:cover; border-radius:28px; box-shadow:var(--shadow); }
.experience-card { position:absolute; right:0; bottom:0; width:190px; padding:24px; border-radius:20px; background:var(--brand-primary); color:#fff; box-shadow:var(--shadow); }
.experience-card strong, .experience-card span { display:block; }
.experience-card strong { font-size:2.7rem; }
.experience-card span { font-size:.82rem; opacity:.86; }
.check-line { display:flex; align-items:center; gap:9px; font-weight:600; }
.check-line i { color:var(--brand-primary); }

.service-card { background:#fff; border:1px solid var(--border); border-radius:22px; padding:30px; transition:.25s; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.icon-box { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; color:var(--brand-primary); background:var(--brand-accent); font-size:1.65rem; margin-bottom:22px; }
.service-card h3, .product-card h3, .team-card h3 { font-size:1.15rem; font-weight:750; color:var(--brand-dark); }
.service-card p, .product-card p { color:var(--text-muted); font-size:.92rem; }
.service-card a, .product-card a { color:var(--brand-primary); font-weight:700; font-size:.9rem; }

.cta-band { background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary)); }

.team-card, .product-card { background:#fff; border:1px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:0 8px 30px rgba(41,94,42,.06); }
.team-photo {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* =========================================
   CARRUSEL DE PROFESIONALES
   ========================================= */

#teamCarousel {
    position: relative;
    padding: 0 65px;
}


/* Botones laterales */
#teamCarousel .team-carousel-control {
    width: 48px;
    height: 48px;

    top: 50%;
    transform: translateY(-50%);

    background-color: var(--brand-primary);
    border-radius: 50%;

    opacity: 1;

    box-shadow: 0 4px 15px rgba(0, 0, 0, .20);
}


/* Posición izquierda */
#teamCarousel .carousel-control-prev {
    left: 5px;
}


/* Posición derecha */
#teamCarousel .carousel-control-next {
    right: 5px;
}


/* Tamaño del icono */
#teamCarousel .carousel-control-prev-icon,
#teamCarousel .carousel-control-next-icon {
    width: 22px;
    height: 22px;
}


/* Hover */
#teamCarousel .team-carousel-control:hover {
    background-color: var(--brand-secondary);
}
.team-placeholder { display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-accent),#fff); color:var(--brand-primary); font-size:5rem; }
.product-image { height:180px; display:grid; place-items:center; background:linear-gradient(135deg,#fff,var(--brand-accent)); color:var(--brand-primary); font-size:4rem; }
.product-tag { display:inline-block; color:var(--brand-primary); background:var(--brand-accent); border-radius:999px; padding:5px 10px; font-size:.7rem; font-weight:800; text-transform:uppercase; margin-bottom:10px; }

.testimonial-card { max-width:780px; text-align:center; padding:44px; border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); background:#fff; }
.quote-icon { font-size:3rem; color:var(--brand-accent); }
.stars { color:#f2b01e; letter-spacing:.1em; margin-bottom:18px; }
.testimonial-card > p { font-size:1.2rem; line-height:1.8; color:#526368; }
.testimonial-person { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:25px; }
.avatar { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--brand-primary); color:#fff; font-weight:800; }
.testimonial-person strong, .testimonial-person span { display:block; text-align:left; }
.testimonial-person span { font-size:.8rem; color:var(--text-muted); }

.accordion-item { border:0; border-bottom:1px solid var(--border); background:transparent; }
.accordion-button { background:transparent; font-weight:700; color:var(--brand-dark); padding:22px 0; }
.accordion-button:not(.collapsed) { color:var(--brand-primary); background:transparent; box-shadow:none; }
.accordion-button:focus { box-shadow:none; }
.accordion-body { padding:0 0 22px; color:var(--text-muted); }

.contact-list > div { display:flex; gap:16px; margin-bottom:22px; }
.contact-list i { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--brand-accent); color:var(--brand-primary); font-size:1.2rem; }
.contact-list strong, .contact-list small { display:block; }
.contact-list small { color:var(--text-muted); margin-top:4px; }
.contact-form-card { padding:36px; border-radius:26px; box-shadow:var(--shadow); border:1px solid var(--border); }
.form-control, .form-select { min-height:50px; border-color:var(--border); border-radius:12px; }
textarea.form-control { min-height:130px; }
.form-control:focus, .form-select:focus { border-color:var(--brand-secondary); box-shadow:0 0 0 .2rem rgba(41,94,42,.14); }
.map-placeholder { min-height:300px; border-radius:24px; background:var(--brand-soft); border:1px dashed #B8CDB9; display:grid; place-items:center; text-align:center; color:var(--text-muted); }
.map-placeholder div { display:flex; flex-direction:column; gap:7px; align-items:center; }

.footer { background:#17391B; color:#adc0c3; }
.footer a { color:#adc0c3; }
.footer a:hover { color:#fff; }
.footer-brand { color:#fff !important; }
.footer h5 { color:#fff; font-size:.95rem; margin-bottom:18px; }
.footer ul { list-style:none; padding:0; margin:0; }
.footer li { margin-bottom:10px; font-size:.88rem; }
.footer-social a { background:rgba(255,255,255,.08); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); font-size:.78rem; }

.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:1050; display:flex; align-items:center; gap:9px; padding:12px 17px; border-radius:999px; background:#25D366; color:#fff; font-weight:700; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.whatsapp-float i { font-size:1.45rem; }
.whatsapp-float:hover { color:#fff; transform:translateY(-2px); }

@media (max-width:991.98px){
  .hero-slide, .min-vh-75 { min-height:68vh; }
  .hero-overlay { background:rgba(18,55,22,.70); }
  .quick-benefits { margin-top:0; padding-top:20px; }
  .section-space { padding:72px 0; }
  .image-stack { padding-right:25px; }
  .main-image { height:460px; }
}
@media (max-width:767.98px){
  .benefit-item { border-right:0; border-bottom:1px solid var(--border); }
  .benefit-item:last-child { border-bottom:0; }
  .hero-slide h1 { font-size:2.55rem; }
  .hero-slide .lead { font-size:1rem; }
  .section-space { padding:62px 0; }
  .image-stack { padding:0 0 35px; }
  .main-image { height:390px; }
  .experience-card { right:15px; }
  .contact-form-card { padding:24px; }
  .whatsapp-float span { display:none; }
  .whatsapp-float { width:54px; height:54px; padding:0; justify-content:center; }
}


/* ===== PÁGINAS DE DETALLE ===== */
.detail-hero { background:linear-gradient(135deg,var(--brand-soft),#fff); border-bottom:1px solid var(--border); }
.detail-title { font-size:clamp(2.5rem,5vw,4rem); line-height:1.06; letter-spacing:-.04em; font-weight:800; color:var(--brand-dark); }
.detail-main-image { width:100%; height:460px; object-fit:cover; border-radius:28px; box-shadow:var(--shadow); }
.breadcrumb a { color:var(--brand-primary); }
.detail-subtitle { font-size:1.45rem; font-weight:800; color:var(--brand-dark); }
.detail-check { padding:15px 17px; border:1px solid var(--border); border-radius:14px; background:#fff; font-weight:600; }
.detail-check i { color:var(--brand-primary); margin-right:8px; }
.process-list { margin-top:22px; }
.process-list > div { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--border); }
.process-list > div > span { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--brand-accent); color:var(--brand-primary); font-weight:800; }
.process-list strong { display:block; color:var(--brand-dark); margin-bottom:5px; }
.process-list p { margin:0; color:var(--text-muted); }
.detail-side-card { position:sticky; top:110px; padding:28px; border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.detail-side-card h3 { font-size:1.15rem; font-weight:800; color:var(--brand-dark); margin-bottom:20px; }
.detail-side-card ul { list-style:none; padding:0; margin:0 0 24px; }
.detail-side-card li { display:flex; gap:13px; padding:15px 0; border-bottom:1px solid var(--border); }
.detail-side-card li i { color:var(--brand-primary); font-size:1.2rem; }
.detail-side-card strong, .detail-side-card small { display:block; }
.detail-side-card small { color:var(--text-muted); margin-top:3px; }
.product-detail-visual, .professional-photo { min-height:450px; border-radius:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:linear-gradient(135deg,#fff,var(--brand-accent)); border:1px solid var(--border); color:var(--brand-primary); box-shadow:var(--shadow); }
.product-detail-visual i { font-size:8rem; }
.professional-photo i { font-size:9rem; }
.product-detail-visual span, .professional-photo span { color:var(--text-muted); font-weight:600; }
.product-price { font-size:2rem; font-weight:800; color:var(--brand-dark); margin:25px 0; }
.product-price small { display:block; font-size:.8rem; font-weight:500; color:var(--text-muted); margin-top:6px; }
.feature-box { height:100%; padding:25px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.feature-box i { font-size:1.7rem; color:var(--brand-primary); }
.feature-box h3 { font-size:1.05rem; font-weight:800; margin:14px 0 7px; color:var(--brand-dark); }
.feature-box p { margin:0; color:var(--text-muted); font-size:.9rem; }
.timeline-simple > div { padding:18px 0 18px 22px; border-left:3px solid var(--brand-accent); position:relative; }
.timeline-simple > div:before { content:''; position:absolute; width:11px; height:11px; border-radius:50%; background:var(--brand-primary); left:-7px; top:24px; }
.timeline-simple strong,.timeline-simple span { display:block; }
.timeline-simple span { color:var(--text-muted); margin-top:4px; }
@media(max-width:991.98px){ .detail-side-card{position:static}.detail-main-image,.product-detail-visual,.professional-photo{min-height:380px;height:380px} }


@media (max-width: 991.98px) {

    .logo-clinica {
        max-height: 65px;
    }

    .navbar {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* ==========================================
   PRODUCTOS
========================================== */

.product-image {
    height: 230px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   DETALLE PRODUCTO
========================================== */

.product-detail-image {
    width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    padding: 25px;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-description p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   CARACTERÍSTICAS PRODUCTO
========================================== */

.product-features-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.product-features-content li {
    position: relative;
    padding: 18px 18px 18px 48px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
}

.product-features-content li::before {
    content: "\F26B";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 18px;
    top: 18px;
    font-size: 20px;
}

.product-features-content p:last-child {
    margin-bottom: 0;
}


@media (max-width: 767.98px) {

    .product-detail-image {
        height: 350px;
    }

    .product-features-content ul {
        grid-template-columns: 1fr;
    }

}

/* ==========================================
   FILTROS PRODUCTOS
========================================== */

.product-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-filter {
    border-radius: 50px;
    padding-left: 18px;
    padding-right: 18px;
}


/* ==========================================
   TARJETAS PRODUCTO
========================================== */

.product-card {
    display: flex;
    flex-direction: column;
}

.product-card .p-4 {
    flex: 1;
}

.product-card-price {
    font-size: 1.15rem;
    font-weight: 700;
}


/* ==========================================
   PAGINACIÓN PRODUCTOS
========================================== */

#productsPagination .page-link {
    border-radius: 8px;
    margin: 0 3px;
    min-width: 40px;
    text-align: center;
}

#productsPagination .page-item:first-child .page-link,
#productsPagination .page-item:last-child .page-link {
    border-radius: 8px;
}