/*
Theme Name: NA'AT Clínica Dental
Theme URI: https://naat.com/
Author: NA'AT
Description: Tema custom para NA'AT Clínica Dental.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: naat-dental
*/

/* ============================================================
   IMPORTS
   ============================================================ */
@import url('css/reset.css?t=1');
@import url('css/colors.css?t=1');

::-webkit-scrollbar { width: 13px; }
::-webkit-scrollbar-track { background: var(--gray-200); }
::-webkit-scrollbar-thumb { background: var(--text-nav-active); border-radius: 9999px; }


/* ============================================================
   BUTTON SYSTEM — primarios rellenos
   ============================================================ */
:root {
    --btn-primary-h: 48px;
    --btn-primary-px: 24px;
    --btn-primary-radius: 999px;
    --btn-primary-fs: var(--fs-body);
    --btn-primary-fw: 500;
    --btn-primary-bg: #3D7AB6;
    --btn-primary-bg-hover: var(--azul-hover);
    --btn-primary-color: #FFFFFF;
}

@media (max-width: 1125px) {
    :root {
        --btn-primary-h: 44px;
        --btn-primary-px: 20px;
    }
}

@media (max-width: 630px) {
    :root {
        --btn-primary-h: 40px;
        --btn-primary-px: 16px;
        --btn-primary-fs: var(--fs-body);
    }
}

#header .header-cta,
#hero .hero-cta,
.slide-cta,
#porque .porque-cta,
#galeria .galeria-cta,
.a04-frame159__cta,
.about-porque__cta,
.laboratorio__cta,
.laboratorio__cta--blue,
#footer .footer-form__btn,
.formulario__btn {
    min-height: var(--btn-primary-h);
    padding-left: var(--btn-primary-px);
    padding-right: var(--btn-primary-px);
    border-radius: var(--btn-primary-radius);
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--btn-primary-fw);
    font-size: var(--fs-body);
    line-height: 1;
    white-space: nowrap;
}


/* ============================================================
   BASE — desktop first (sin media query)
   ============================================================ */

/* ── UTILIDADES ────────────────────────────────────────────── */
.container {
    max-width: calc( var(--max-width) - var(--px) - var(--px) );
    padding-left: var(--px);
    padding-right: var(--px);
    margin-left: auto;
    margin-right: auto;
}

/* ── HEADER ────────────────────────────────────────────────── */
#header {
    background-color: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

#header .header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 153px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

#header .header-brand {
    flex-shrink: 0;
}

#header .header-logo {
    display: block;
    width: 195px;
    height: 90px;
}

#header .header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#header .header-nav {
    flex: 1;
    display: flex;
    justify-content: end;
}

#header .nav-list {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

#header .nav-list li a {
    font-size: var(--fs-body);         /* Figma: fontSize:20 */
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #868788;          /* Figma: fills #868788 */
    line-height: 24px;
    letter-spacing: 0;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    background: none;
    transition: color var(--transition);
    text-decoration: none;
    font-size: 1.2rem;
}

#header .nav-list li a:hover,
#header .nav-list li.current-menu-item a,
#header .nav-list li.current-menu-ancestor a,
#header .nav-list li.current_page_parent a,
#header .nav-list li.current_page_ancestor a,
#header .nav-list li.current_page_item a {
    color: #439CC4;
    background: none;
}

#header .header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

#header .header-cta {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color var(--transition);
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

#header .header-cta:hover {
    background-color: var(--azul-hover);
}

/* Hamburguesa — oculta en desktop */
#header .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 4px;
    cursor: pointer;
    background: none;
    border: none;
}

#header .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-dark);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

#header .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#header .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
#header .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── FOOTER ────────────────────────────────────────────────── */
#footer {
    background-color: var(--fondo-dark);
}

/* =============================================================
   FOOTER — FORMULARIO + CONTÁCTANOS
   Figma: Frame 81 — 1922×764px
   fills:#373F49 + IMAGE  pad L/R:289  gap:270  HORIZONTAL  counterAxis:CENTER
   Izq Frame 149: 521×594  gap:59  VERTICAL
     Campo: gap:14  label Montserrat 400 24px #DDD  input 521×50 #D9D9D9 r:5
     Textarea: 521×113
     Botón: 209×58  #3D7AB6  r:25  Montserrat 500 24px #fff
   Der Frame 78: 553×391  gap:33  VERTICAL
     Título: Montserrat 400 48px lh:58 #DDD
     Párrafos: Montserrat 400 20px lh:30 #DDD  gap:29
   ============================================================= */

#footer .footer-contact {
    background-color: #373F49;
    background-image: url('images/background-hero-consultoriodentallujo.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding: 0;
    min-height: 764px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#footer .footer-contact-inner {
    width: 100%;
    max-width: var(--max-width);
    padding: 0px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    gap: var(--section-gap);
    margin: 0 auto;
}

/* ── Columna formulario (Frame 149 — 521×594) ───────────────── */
#footer .footer-form-col {
    flex: 1 1 50%;
    min-width: 0;
}

#footer .footer-form {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* Campo individual: gap:14 VERTICAL */
#footer .footer-form__campo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Label: Montserrat 400 24px lh:29 #DDDDDD */
#footer .footer-form__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 29px;
    color: #DDDDDD;
}

/* Input: 521×50 #D9D9D9 r:5 */
#footer .footer-form__input {
    width: 100%;
    height: 50px;
    background: #D9D9D9;
    border: none;
    border-radius: 5px;
    padding: 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-md);
    color: #1A3A5C;
    box-sizing: border-box;
    outline: none;
    transition: background 0.2s;
}

#footer .footer-form__input:focus {
    background: #FFFFFF;
}
.wpcf7-not-valid-tip{
    font-size: var(--fs-body);
}
.wpcf7-response-output{
    font-size: var(--fs-body);
    color: #fff;
}
/* Textarea: 521×113 */
#footer .footer-form__textarea {
    width: 100%;
    height: 113px;
    background: #D9D9D9;
    border: none;
    border-radius: 5px;
    padding: 12px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-md);
    color: #1A3A5C;
    box-sizing: border-box;
    outline: none;
    resize: none;
    transition: background 0.2s;
}

#footer .footer-form__textarea:focus {
    background: #FFFFFF;
}

/* Botón Enviar: 209×58  #3D7AB6  r:25  Montserrat 500 24px */
#footer .footer-form__btn {
    width: auto;
    background: var(--btn-primary-bg);
    border: none;
    color: var(--btn-primary-color);
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s;
}

#footer .footer-form__btn:hover {
    background: var(--azul-dark, #1a3a5c);
}

/* ── Columna info (Frame 78 — 553×391  gap:33) ──────────────── */
#footer .footer-info-col {
    flex: 0 0 553px;
    width: 553px;
    display: flex;
    flex-direction: column;
    gap: 33px;
}

/* Título: Montserrat 400 48px lh:58 #DDDDDD */
#footer .footer-info-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 58px;
    color: #DDDDDD;
    margin: 0;
}

/* Párrafos wrapper: gap:29 */
#footer .footer-info-desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 29px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #DDDDDD;
}

/* Párrafo: Montserrat 400 20px lh:30 #DDDDDD */
#footer .footer-info-desc{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #DDDDDD;
    margin: 0;
}

/* -- Barra de cierre -- */
#footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: var(--max-width);
    padding: 0px 15px;
    margin: 0 auto;
}

#footer .footer-bottom-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer .footer-copy {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 1);
    text-align: center;
}

/* ── WHATSAPP CHICKLET ─────────────────────────────────────── */
#wa-chicklet {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background-color: var(--green-500);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-title-md);
    z-index: 200;
    box-shadow: var(--shadow-lg);
    transition: background-color var(--transition), transform var(--transition);
}

#wa-chicklet:hover {
    background-color: var(--green-600);
    transform: scale(1.08);
}

/* ── BREADCRUMB ────────────────────────────────────────────── */
.breadcrumb {
    padding: 0.75rem var(--px);
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: var(--fs-caption-sm);
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb a {
    color: var(--gray-400);
    transition: color var(--transition);
}

.breadcrumb a:hover {
    color: var(--azul);
}

.breadcrumb .breadcrumb-sep {
    color: var(--gray-300);
    font-size: var(--fs-overline);
}

.breadcrumb .breadcrumb-current {
    color: var(--azul);
    font-weight: 500;
}

/* ── HERO ──────────────────────────────────────────────────── */
#hero {
    position: relative;
    height: 598px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Imagen de fondo al 54% de opacidad */
#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.54;
    filter: blur(4px);
    transform: scale(1.02);
    z-index: 0;
    background-image: url(images/background-hero-consultoriodentallujo.png);
}

/* Overlay blanco suave encima del fondo */
#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.18) 100%);
    z-index: 1;
}

#hero .hero-inner {
    position: relative;
    z-index: 2;
    width: calc( 100%);
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    height: 100%;
}

#hero .hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

#hero .hero-title {
    font-size: var(--fs-hero);
    font-weight: 700;
    color: #375EA9;
    line-height: 44.33px;
    letter-spacing: 0;
    font-family: 'Montserrat', sans-serif;
}

#hero .hero-desc {
    font-size: var(--fs-body);
    font-weight: 400;
    color: #2C2C2C;
    line-height: 30px;
    letter-spacing: 0;
    max-width: 589px;
}

#hero .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    width: fit-content;
    transition: background-color var(--transition);
}

#hero .hero-cta:hover {
    background-color: var(--azul-hover);
}

#hero .hero-image-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    overflow: hidden;
}

#hero .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Hero médicos — imagen absoluta sobre el fondo
   Figma: Group left:925px (48%) top:51px w:724 h:547 */
#hero.hero--medicos {
    overflow: hidden;
}

#hero.hero--medicos .hero-inner {
    grid-template-columns: 0.8fr 1fr;
    position: relative;
}

.medicos-hero-img {
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

.medicos-hero-img__img {
    height: 95%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

/* ── PORQUE ────────────────────────────────────────────────── */
#porque {
    background-color: var(--white);
}

#porque .porque-inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 731px;
    gap: var(--col-gap);
}

#porque .porque-image-wrap {
    overflow: hidden;
    height: 90%;
    align-self: end;
}

#porque .porque-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

#porque .porque-content {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding-bottom: 15px;
}

#porque .porque-text-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 15px;
}

#porque .porque-titulo {
    font-size: var(--fs-title-lg);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #375EA9;
    line-height: 1.2em;
    letter-spacing: 0;
}

#porque .porque-desc {
    font-size: var(--fs-body);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #2C2C2C;
    line-height: 1.3em;
    letter-spacing: 0;
}

#porque .porque-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#porque .porque-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #2C2C2C;
    line-height: 1.3em;
    letter-spacing: 0;
    font-size: var(--fs-body);
}

#porque .porque-bullet {
    color: #375EA9;
    font-size: var(--fs-title-md);
    line-height: 45px;
    flex-shrink: 0;
}

#porque .porque-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    width: fit-content;
    gap: 10px;
    transition: background-color var(--transition);
}

#porque .porque-cta:hover {
    background-color: var(--azul-hover);
}

/* ── SLIDER BANNER ─────────────────────────────────────────── */
#slider-banner {
    position: relative;
    overflow: hidden;
}

/* Track */
.slider-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Slide base */
.slider-slide {
    position: relative;
    min-width: 100%;
    min-height: 600px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fondo oscuro */
.slide--oscuro {
    background-color: #373F49;
}

/* Fondo claro — imagen de consultorio via custom property global */
.slide--claro {
    background-image: url('images/background-hero-consultoriodentallujo.png');
    background-size: cover;
    background-position: center;
}

/* Overlay para slide claro — opacidad sobre imagen de fondo */
.slide-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

/* Inner — layout texto + imagen */
.slide-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    align-items: center;
    height: 100%;
    padding-top: var(--section-pad-top);
    padding-bottom: var(--section-pad-bottom);
    gap: 10px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: calc(100% - 160px);
}

/* Columna texto */
.slide-content {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.slide-titulo {
    font-size: var(--fs-title-lg);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    line-height: 44.33px;
    letter-spacing: 0;
}

.slide--claro .slide-titulo { color: #375EA9; }
.slide--oscuro .slide-titulo { color: #FFFFFF; }

.slide-desc {
    font-size: var(--fs-body);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    line-height: 30px;
    letter-spacing: 0;
    max-width: 681px;
}

.slide--claro .slide-desc { color: #2C2C2C; }
.slide--oscuro .slide-desc { color: #FFFFFF; }

.slide-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    width: fit-content;
    gap: 10px;
    transition: background-color var(--transition);
    white-space: nowrap;
}

.slide-cta:hover {
    background-color: var(--azul-hover);
}

/* Imagen — default: contain para piezas dentales */
.slide-image-wrap {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    overflow: hidden;
    align-items: center;
}

.slide-image {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Imagen tipo persona (busto/cuerpo) — cover pegado al borde derecho */
.slide--persona .slide-image-wrap {
    
}

.slide--persona .slide-image {
    width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: top center;
}

/* Flechas */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.20);
    border: 1.5px solid rgba(255, 255, 255, 0.50);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.slider-arrow:hover {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.80);
}

.slide--claro .slider-arrow,
.slide--claro ~ .slider-arrow {
    color: #375EA9;
    background-color: rgba(55, 94, 169, 0.10);
    border-color: rgba(55, 94, 169, 0.30);
}

.slider-arrow--prev { left: 24px; }
.slider-arrow--next { right: 24px; }

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 31.71px;
    z-index: 10;
}

.slider-dot {
    width: 19.82px;
    height: 19.82px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition);
}

.slider-dot.is-active {
    background-color: #4CBFD5;
}

.slide--claro .slider-dot {
    background-color: rgba(0, 0, 0, 0.2);
}

.slide--claro .slider-dot.is-active {
    background-color: #4CBFD5;
}

/* ── SERVICIOS ─────────────────────────────────────────────── */
#servicios {
    background-color: var(--white);
    padding-top: var(--section-pad-top);
    padding-bottom: var(--section-pad-bottom);
}

#servicios .servicios-inner {
    max-width: var(--max-width);
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* Encabezado */
#servicios .servicios-header {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

#servicios .servicios-titulo {
    font-size: var(--fs-title-lg);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #375EA9;
    line-height: 44.33px;
    letter-spacing: 0;
}

#servicios .servicios-desc {
    font-size: var(--fs-body);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #2C2C2C;
    line-height: 30px;
    letter-spacing: 0;
}

/* Grid 2x2 */
#servicios .servicios-grid {
    padding-left: 283px;
    padding-right: 283px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-gap);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Card */
#servicios .servicio-card {
    display: flex;
    align-items: center;
    gap: 19px;
    border-radius: 100px;
    border: 4px solid #3167D9;
    padding: 13px 15px var(--section-pad-bottom);
    background-color: var(--white);
    transition: box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
}

#servicios .servicio-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Imagen circular */
#servicios .servicio-img-wrap {
    width: 134px;
    height: 134px;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

#servicios .servicio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Nombre del servicio */
#servicios .servicio-nombre {
    font-size: var(--fs-title-md-lg);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #375EA9;
    line-height: 36px;
    letter-spacing: 0;
}

/* CTA */
#servicios .servicios-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #3167D9;
    font-size: var(--fs-body);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid #3167D9;
    border-radius: 100px;
    padding: 8px 20px;
    width: 390px;
    height: 46px;
    background-color: transparent;
    transition: background-color var(--transition), color var(--transition);
}

#servicios .servicios-cta:hover {
    background-color: #3167D9;
    color: var(--white);
}

#servicios .servicios-cta svg {
    flex-shrink: 0;
    width: 8.06px;
    height: 14px;
}


/* Lista contenedora */
#servicios .servicios-list {
    list-style: none;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Card */
#servicios .servicio-card {
    display: flex;
    width: calc(50% - 15px);
    align-items: center;
    gap: 32px;
    padding: 28px 32px;
    border: 2px solid rgba(49, 103, 217, 0.35);
    border-radius: 20px;
    background-color: var(--white);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    list-style: none;
}

#servicios .servicio-card:hover {
    border-color: #3167D9;
    box-shadow: var(--shadow-md);
}

/* Imagen — estado expand */
#servicios .servicio-card .servicio-card__image {
    flex: 0 0 220px;
    margin: 0;
}
#servicios .servicio-card .servicio-card__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
    border-radius: 16px;
}

/* Imagen — estado minimize (circular) */
#servicios .servicio-card.minimize .servicio-card__image {
    flex: 0 0 134px;
}
#servicios .servicio-card.minimize .servicio-card__image img {
    width: 134px;
    height: 134px;
    border-radius: 100px;
    aspect-ratio: auto;
}

/* Contenido */
#servicios .servicio-card__content {
    flex: 1;
    min-width: 0;
}

/* Título */
#servicios .servicio-card__titulo {
    font-size: var(--fs-title-md-lg);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #375EA9;
    line-height: 1.25;
    margin-bottom: 12px;
}

/* Descripción */
#servicios .servicio-card__desc {
    font-size: var(--fs-body);
    font-family: 'Montserrat', sans-serif;
    color: #2C2C2C;
    line-height: 1.6;
    margin-bottom: 16px;
}
#servicios .servicio-card__desc p { margin: 0 0 8px; }
#servicios .servicio-card__desc p:last-child { margin-bottom: 0; }

/* Botón toggle */
#servicios .servicio-card__btn-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #3167D9;
    background: none;
    border: 1px solid #3167D9;
    border-radius: 100px;
    padding: 6px 18px;
    cursor: pointer;
    margin-bottom: 0;
    transition: background-color var(--transition), color var(--transition);
}
#servicios .servicio-card__btn-toggle:hover,
#servicios .servicio-card__btn-toggle:focus-visible {
    background-color: #3167D9;
    color: var(--white);
}

/* Procedimientos — animados por JS (height: 0 → scrollHeight) */
#servicios .servicio-card__procedimientos {
    margin-top: 16px;
    border: 1px solid rgba(49, 103, 217, 0.4);
    border-radius: 12px;
    background-color: #f5f8ff;
    padding: 16px 20px;
    overflow: hidden; /* reforzado por JS */
}

#servicios .servicio-card.minimize .servicio-card__procedimientos {
    height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    border-width: 0 !important;
}

#servicios .servicio-card__proc-titulo {
    font-size: var(--fs-body-sm);
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #375EA9;
    margin-bottom: 10px;
}

#servicios .servicio-card__proc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#servicios .servicio-card__proc-list li {
    border-bottom: 1px solid rgba(49, 103, 217, 0.15);
}
#servicios .servicio-card__proc-list li:last-child {
    border-bottom: none;
}
#servicios .servicio-card__proc-list a {
    display: block;
    padding: 8px 4px;
    font-size: var(--fs-body-sm);
    font-family: 'Montserrat', sans-serif;
    color: #2C2C2C;
    text-decoration: none;
    transition: color var(--transition);
}
#servicios .servicio-card__proc-list a:hover {
    color: #3167D9;
}

/* Link "Ver más" */
#servicios .servicio-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #3167D9;
    text-decoration: none;
    border: 0;
    background: none;
    cursor: pointer;
    transition: gap var(--transition), color var(--transition);
}
#servicios .servicio-card__link:hover {
    gap: 10px;
    color: #1a4db5;
}


/* ── EQUIPO DE DOCTORES ────────────────────────────────────── */
#equipo {
    background-color: var(--white);
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

#equipo .equipo-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: flex-end;
    min-height: 560px;
    padding-top: var(--section-pad-top);
    padding-bottom: 0;
    gap: var(--section-gap);
}

#equipo .equipo-image-wrap {
    width: 635px;
    height: 490px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

#equipo .equipo-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

#equipo .equipo-content {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding-bottom: var(--section-pad-top);
}

#equipo .equipo-text-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#equipo .equipo-titulo {
    font-size: var(--fs-title-xl);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #375EA9;
    line-height: 36px;
    letter-spacing: 0;
}

#equipo .equipo-desc {
    font-size: var(--fs-body);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #2C2C2C;
    line-height: 30px;
    letter-spacing: 0;
}

#equipo .equipo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #3167D9;
    font-size: var(--fs-body);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid #3167D9;
    border-radius: 100px;
    padding: 8px 20px;
    width: 390px;
    height: 46px;
    background-color: transparent;
    transition: background-color var(--transition), color var(--transition);
}

#equipo .equipo-cta:hover {
    background-color: #3167D9;
    color: var(--white);
}

#equipo .equipo-cta svg {
    flex-shrink: 0;
    width: 8.06px;
    height: 14px;
}

/* ── GALERÍA ───────────────────────────────────────────────── */
#galeria {
    position: relative;
    background-color: #373F49;
    padding-top: var(--section-pad-top);
    padding-bottom: var(--section-pad-top);
}

#galeria .galeria-inner {
    max-width: calc( var(--max-width) - 100px);
    padding: 0px 50px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#galeria .galeria-titulo {
    font-size: var(--fs-title-lg);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #4CBFD5;
    line-height: 36px;
    letter-spacing: 0;
}

/* Content: track + info */
/* Flechas */
#galeria .galeria-slider-wrap {
    
    overflow: hidden;
    width: 100%;
}

#galeria .galeria-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.20);
    border: 1.5px solid rgba(255, 255, 255, 0.50);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#galeria .galeria-arrow:hover {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.80);
}

#galeria .galeria-arrow--prev { left: 24px; }
#galeria .galeria-arrow--next { right: 24px; }

#galeria .galeria-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Cada slide = imágenes + info juntos */
#galeria .galeria-slide {
    min-width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

#galeria .galeria-par {
    display: flex;
    gap: 15px;
    flex: 0 0 700px;
}

#galeria .galeria-foto-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

#galeria .galeria-foto {
    width: 100%;
    height: 389px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

#galeria .galeria-label {
    font-size: var(--fs-subtitle);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
}

/* Info lateral */
#galeria .galeria-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

#galeria .galeria-card {
    display: flex;
    flex-direction: column;
    gap: 31px;
}

#galeria .galeria-card-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#galeria .galeria-card-titulo {
    font-size: var(--fs-title-xl);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #4CBFD5;
    line-height: 36px;
}

#galeria .galeria-card-servicio {
    font-size: var(--fs-subtitle);
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    line-height: 36px;
}

#galeria .galeria-card-desc {
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    line-height: 1.3em;
    font-size: var(--fs-body);
}

#galeria .galeria-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    width: fit-content;
    transition: background-color var(--transition);
}

#galeria .galeria-cta:hover {
    background-color: var(--azul-hover);
}

/* Dots */
#galeria .galeria-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 31.71px;
}

#galeria .galeria-dot {
    width: 19.82px;
    height: 19.82px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition);
}

#galeria .galeria-dot.is-active {
    background-color: #4CBFD5;
}


/* =============================================================
   TESTIMONIALES
   ============================================================= */

/* ── Sección wrapper ────────────────────────────────────────── */
.testimoniales {
    width: 100%;
    background: #F1F2F5;
    padding: var(--section-pad-top) 0 0;   /* Igual que otras secciones: 280px laterales */
    box-sizing: border-box;
    overflow-x: hidden
}

.testimoniales__inner {
    max-width: var(--max-width);
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 19px;
}

/* ── Bloque texto ───────────────────────────────────────────── */
.testimoniales__texto {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.testimoniales__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-xl);
    line-height: 36px;
    color: var(--azul-titulo, #375EA9);
    margin: 0;
}

.testimoniales__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* ── Slider wrapper ─────────────────────────────────────────── */
.testimoniales__slider-wrap {
    position: relative;
}

/* ── Flechas desktop ────────────────────────────────────────── */
.testimoniales__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(55, 94, 169, 0.4);
    background: rgba(255, 255, 255, 0.85);
    color: var(--azul-titulo, #375EA9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.testimoniales__arrow:hover {
    background: #fff;
    border-color: var(--azul-titulo, #375EA9);
}

/* Flechas justo fuera del track, dentro de la sección */
.testimoniales__arrow--prev { left: 12px; }
.testimoniales__arrow--next { right: 12px; }

/* ── Track — scroll horizontal, cards fijas 441.6px ─────────── */
/* Figma: 1922 - 280*2 = 1362px disponibles                      */
/* 3 cards × 441.6px + 2 gaps × 19px = 1362.8px ✓               */
.testimoniales__track {
    display: flex;
    flex-direction: row;
    gap: 19px;
    width: 100%;
    height: auto;
    aspect-ratio: 1362 / 740;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.testimoniales__track::-webkit-scrollbar {
    display: none;
}

/* ── Card individual (ancho fijo Figma 441.6px) ─────────────── */
.testimoniales__card {
    flex: 0 0 33%;
    width: 33%;
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    background: #F3EAE0;
}

.testimoniales__card:focus-visible {
    outline: 3px solid var(--azul-borde, #3167D9);
    outline-offset: -3px;
}

/* ── Imagen persona ─────────────────────────────────────────── */
.testimoniales__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.35s ease;
}

.testimoniales__card:hover .testimoniales__img {
    transform: scale(1.03);
}

/* ── Overlay ────────────────────────────────────────────────── */
.testimoniales__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    transition: background 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimoniales__card:hover .testimoniales__overlay {
    background: rgba(0, 0, 0, 0.28);
}

/* ── Botón play ─────────────────────────────────────────────── */
.testimoniales__play {
    width: 71px;
    height: 71px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.testimoniales__card:hover .testimoniales__play {
    transform: scale(1.12);
}

.testimoniales__play svg {
    width: 71px;
    height: 71px;
}

/* ── Dots ───────────────────────────────────────────────────── */
.testimoniales__dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 20px 0 var(--section-pad-bottom) 0;
}

.testimoniales__dot {
    width: 19.82px;
    height: 19.82px;
    border-radius: 50%;
    border: none;
    background: #D9D9D9;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.testimoniales__dot.is-active {
    background: var(--azul-titulo, #375EA9);
    transform: scale(1.1);
}

/* ============================================================
   MODAL DE VIDEO — tv-modal
   (Estilos compartidos con modal-video.js)
   ============================================================ */

.tv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tv-modal[hidden] {
    display: none !important;
}

/* La clase is-open la agrega modal-video.js */
.tv-modal.is-open {
    display: flex;
}

.tv-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}

.tv-modal-box {
    position: relative;
    z-index: 1;
    width: min(900px, 90vw);
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.tv-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.2s;
}

.tv-modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.tv-modal-close svg {
    width: 20px;
    height: 20px;
}

/* Ratio 16:9 */
.tv-modal-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.tv-modal-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* =============================================================
   BLOG
   Figma: Frame 184 (fondo #F1F2F5, padBottom 68px, gap 29px)
   Frame 160 header: pad L/R 278px
   Frame 191 cards:  pad T/B 38px L/R 284px, gap 28px
   Card: 432×680px | imagen 432×331 | cuerpo 432×338 radius 10
   ============================================================= */

.blog {
    width: 100%;
    background: #F1F2F5;
    padding: 0 0 var(--section-pad-bottom) 0;        /* padBottom:68 del Frame 184 */
    box-sizing: border-box;
}

.blog__inner {
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    gap: 29px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.blog__header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

.blog__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* ── Grid de cards ───────────────────────────────────────────── */
/* Frame 191: w:1644 pad T:38 R:284 B:38 L:284 gap:28 layout:HORIZONTAL */
.blog__grid {
    display: flex;
    flex-direction: row;
    gap: 28px;
    padding: var(--section-pad-top) 0;
    box-sizing: border-box;
    width: 100%;
}

/* ── Card ────────────────────────────────────────────────────── */
/* Figma: 432×680px */
.blog-card {
    flex: 0 0 432px;
    width: 432px;
    height: 680px;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* ── Imagen ──────────────────────────────────────────────────── */
/* Frame 186: 432×331px */
.blog-card__img-wrap {
    width: 432px;
    height: 331px;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.35s ease;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.04);
}

/* ── Cuerpo (Service 4) ─────────────────────────────────────── */
/* fills:#fff radius:10 pad T:48 R:32 B:48 L:32 gap:26 */
.blog-card__body {
    flex: 1;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    padding: var(--section-pad-top) 32px var(--section-pad-bottom);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ── Meta: categoría + título (Frame 185, gap:-1) ─────────────── */
.blog-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-card__cat {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: var(--fs-overline);
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--azul-cta, #3D7AB6);
}

.blog-card__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 26px;
    color: var(--azul-cta, #3D7AB6);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Extracto ────────────────────────────────────────────────── */
/* font:18 fw:400 lh:30 fills:#291b00 */
.blog-card__excerpt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #291B00;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ── CTA (CAll) ─────────────────────────────────────────────── */
/* w:368 h:46 radius:100 pad T:8 R:20 B:8 L:20 gap:10 space-between */
/* font:20 fw:500 fills:#3167D9 */
.blog-card__cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 8px 20px;
    box-sizing: border-box;
    border-radius: 100px;
    border: 1px solid var(--azul-borde, #3167D9);
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1;
    color: var(--azul-borde, #3167D9);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.blog-card__cta svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--azul-borde, #3167D9);
    transition: color 0.2s ease;
}

.blog-card__cta:hover {
    background: var(--azul-borde, #3167D9);
    color: #fff;
}

.blog-card__cta:hover svg {
    color: #fff;
}


/* =============================================================
   CONTACTO INFO
   Figma: Frame 28:315 — 1922×682px  fills:#fff
   HORIZONTAL  gap:48  pad:70/279  counterAxis:CENTER
   Izq: mapa 712×542 r:10
   Der: col 604px  gap:47  VERTICAL
        Bloque contacto:  pad L/R:41  gap:12
        Bloque ubicacion: pad L/R:41  gap:12
   Sin bordes ni decoraciones
   ============================================================= */

.contacto-info {
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
}

.contacto-info__inner {
    display: flex;
    flex-direction: row;
    gap: var(--section-gap);
    align-items: center;
    max-width: var(--max-width);
    padding: 0px 15px;
    margin: 0 auto;
}

/* ── Mapa ────────────────────────────────────────────────────── */
.contacto-info__mapa-wrap {
    flex: 0 0 712px;
    width: 712px;
    height: 542px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/* Figma fills: #ffffff + GRADIENT_LINEAR — suaviza bordes del mapa */
.contacto-info__mapa-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    border-radius: 10px;
}

.contacto-info__mapa {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Columna datos ───────────────────────────────────────────── */
/* Frame contacto: 604px  gap:47  VERTICAL */
.contacto-info__datos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* ── Bloque (Contacto / Ubicación) ──────────────────────────── */
/* pad L/R:41  gap:12  VERTICAL — sin bordes */
.contacto-info__bloque {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 41px;
    box-sizing: border-box;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.contacto-info__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Items de contacto — texto plano */
.contacto-info__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacto-info__item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 28px;
    color: #2C2C2C;
}

.contacto-info__link {
    color: #2C2C2C;
    text-decoration: none;
}

.contacto-info__link:hover {
    color: #375EA9;
}

/* Dirección */
.contacto-info__address {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 28px;
    color: #2C2C2C;
    font-style: normal;
    margin: 0;
}

/* =============================================================
   FORMULARIO DE CONTACTO
   Figma: Frame 81 — 1922×764px
   fills:#373F49 + IMAGE   pad L/R:289   gap:270   HORIZONTAL   counterAxis:CENTER
   Izq Frame 149: 521×594  gap:59  VERTICAL
     Campo: 521×93  gap:14  VERTICAL
       Label: Montserrat 400 24px lh:29 #DDDDDD
       Input: 521×50 #D9D9D9 r:5
     Textarea: 521×113
     Botón: 209×58 #3D7AB6 r:25 Montserrat 500 24px #fff
   Der Frame 78: 553×391  gap:33  VERTICAL
     Título: Montserrat 400 48px lh:58 #DDDDDD
     Párrafos: Montserrat 400 20px lh:30 #DDDDDD  gap:29
   ============================================================= */

.formulario {
    width: 100%;
    background-color: #373F49;
    background-image: url('images/background-hero-consultoriodentallujo.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    box-sizing: border-box;
    min-height: 764px;
    display: flex;
    align-items: center;
}

.formulario__inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--footer-gap);
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0px 15px;
    box-sizing: border-box;
}

/* ── Form wrap (Frame 149 — 521×594) ────────────────────────── */
.formulario__form-wrap {
    flex: 0 0 521px;
    width: 521px;
}

/* Form — gap:59 entre campos y botón */
.formulario__form {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    width: 100%;
}

/* ── Campo individual (Frame 96/97/98/99 — gap:14 VERTICAL) ─── */
.formulario__campo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Label: Montserrat 400 24px lh:29 #DDDDDD */
.formulario__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-subtitle);
    line-height: 29px;
    color: #DDDDDD;
}

/* Input: 521×50 #D9D9D9 r:5 */
.formulario__input {
    width: 521px;
    height: 50px;
    background: #D9D9D9;
    border: none;
    border-radius: 5px;
    padding: 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-md);
    color: #1A3A5C;
    box-sizing: border-box;
    outline: none;
    transition: background 0.2s;
}

.formulario__input:focus {
    background: #FFFFFF;
}

/* Textarea: 521×113 */
.formulario__textarea {
    width: 521px;
    height: 113px;
    background: #D9D9D9;
    border: none;
    border-radius: 5px;
    padding: 12px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-md);
    color: #1A3A5C;
    box-sizing: border-box;
    outline: none;
    resize: none;
    transition: background 0.2s;
}

.formulario__textarea:focus {
    background: #FFFFFF;
}

/* Botón Enviar: 209×58 #3D7AB6 r:25 Montserrat 500 24px #fff */
.formulario__btn {
    width: auto;
    background: var(--btn-primary-bg);
    border: none;
    color: var(--btn-primary-color);
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-start;
}

.formulario__btn:hover {
    background: var(--azul-dark, #1a3a5c);
}

/* ── Texto derecha (Frame 78 — 553×391  gap:33) ─────────────── */
.formulario__texto {
    flex: 0 0 553px;
    width: 553px;
    display: flex;
    flex-direction: column;
    gap: 33px;
}

/* Título: Montserrat 400 48px lh:58 #DDDDDD */
.formulario__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 58px;
    color: #DDDDDD;
    margin: 0;
}

/* Párrafos wrapper (Frame 100 — gap:29) */
.formulario__parrafos {
    display: flex;
    flex-direction: column;
    gap: 29px;
}

/* Párrafo: Montserrat 400 20px lh:30 #DDDDDD */
.formulario__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #DDDDDD;
    margin: 0;
}

/* =============================================================
   PREGUNTAS FRECUENTES (FAQs)
   Figma: Frame 28:286 galería — 1922×1209px
   fills:#373F49  pad T/B:70  padLeft:280  gap:60  VERTICAL
   Frame 182 header: 1282×175  gap:19
     Título: Montserrat 500 36px lh:36 #4CBFD5
     Desc:   Montserrat 400 20px lh:30 #ffffff  max-w:1282px
   Frame 194 grid: 1364×834  HORIZONTAL gap:60 → 2 cols × 4 items
     Cada item: gap:19 VERTICAL
     Pregunta: Montserrat 400 24px lh:32 #ffffff
     Respuesta: Montserrat 400 20px lh:30 #ffffff
   SIN accordion — todo visible
   ============================================================= */

.faqs {
    width: 100%;
    background: #373F49;
    padding: var(--section-pad-top) 0;
    box-sizing: border-box;
}

.faqs__inner {
    width: calc( 100% - 30px);
    max-width: var(--max-width);
    padding: 0 15px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* ── Header (Frame 182 — 1282×175  gap:19) ──────────────────── */
.faqs__header {
    display: flex;
    flex-direction: column;
    gap: 19px;
    max-width: var(--max-width);
}

/* Título: Montserrat 500 36px lh:36 #4CBFD5 */
.faqs__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-xl);
    line-height: 36px;
    color: #4CBFD5;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #ffffff */
.faqs__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
}

/* ── Grid (Frame 194 — 1364×834  HORIZONTAL gap:60) ─────────── */
/* 8 items layout HORIZONTAL en Figma = orden columna por columna */
/* grid-auto-flow: column para respetar ese orden visual           */
.faqs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    column-gap: var(--section-gap);
    row-gap: var(--section-gap);
}

/* ── Item ────────────────────────────────────────────────────── */
.faq-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Botón trigger (pregunta + icono) */
.faq-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-item__trigger:focus-visible {
    outline: 2px solid #4CBFD5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pregunta: Montserrat 400 24px lh:32 #ffffff */
.faq-item__pregunta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 32px;
    color: #FFFFFF;
    margin: 0;
    flex: 1;
}

/* Icono +/- */
.faq-item__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4CBFD5;
    transition: border-color var(--transition), background-color var(--transition);
}

.faq-item__trigger:hover .faq-item__icon,
.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    border-color: #4CBFD5;
    background-color: rgba(76, 191, 213, 0.12);
}

/* Mostrar/ocultar los SVGs según estado */
.faq-icon-minus { display: none; }

.faq-item__trigger[aria-expanded="true"] .faq-icon-plus  { display: none; }
.faq-item__trigger[aria-expanded="true"] .faq-icon-minus { display: block; }

/* Respuesta: animada por JS (height: 0 → scrollHeight) */
.faq-item__respuesta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #FFFFFF;
    overflow: hidden; /* reforzado por JS */
    padding-bottom: 0;
    transition: height 0.35s ease, padding-bottom 0.35s ease;
}

.faq-item__trigger[aria-expanded="true"] ~ .faq-item__respuesta {
    padding-bottom: 20px;
}

.faq-item__respuesta p { margin: 0 0 8px; }
.faq-item__respuesta p:last-child { margin-bottom: 0; }

.faq-item__respuesta a {
    color: #4CBFD5;
    text-decoration: none;
}
.faq-item__respuesta a:hover {
    text-decoration: underline;
}

/* Span palabras clave en #4CBFD5 — Figma mixed style */
.faq-link,
.faq-item__respuesta span,
.faq-item__respuesta .faq-link {
    color: #4CBFD5;
}

/* =============================================================
   CONTACTO INFO
   Figma: Frame 28:315 — 1922×682px  fills:#fff
   HORIZONTAL  gap:48  pad:70/279  counterAxis:CENTER
   Izq: mapa 712×542 r:10
   Der: col 604px  gap:47  VERTICAL
        Bloque contacto:  pad L/R:41  gap:12
        Bloque ubicacion: pad L/R:41  gap:12
   Sin bordes ni decoraciones
   ============================================================= */

.contacto-info {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-pad-top) 0;
    box-sizing: border-box;
}

.contacto-info__inner {
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    gap: var(--section-gap);
    align-items: center;
    max-width: var(-max-width);
    margin: 0 auto;
}

/* ── Mapa ────────────────────────────────────────────────────── */
.contacto-info__mapa-wrap {
    flex: 0 0 712px;
    width: 712px;
    height: 542px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/* Figma fills: #ffffff + GRADIENT_LINEAR — suaviza bordes del mapa */
.contacto-info__mapa-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    border-radius: 10px;
}

.contacto-info__mapa {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Columna datos ───────────────────────────────────────────── */
/* Frame contacto: 604px  gap:47  VERTICAL */
.contacto-info__datos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* ── Bloque (Contacto / Ubicación) ──────────────────────────── */
/* pad L/R:41  gap:12  VERTICAL — sin bordes */
.contacto-info__bloque {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 41px;
    box-sizing: border-box;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.contacto-info__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Items de contacto — texto plano */
.contacto-info__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacto-info__item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 28px;
    color: #2C2C2C;
}

.contacto-info__link {
    color: #2C2C2C;
    text-decoration: none;
}

.contacto-info__link:hover {
    color: #375EA9;
}

/* Dirección */
.contacto-info__address {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 28px;
    color: #2C2C2C;
    font-style: normal;
    margin: 0;
}

/* =============================================================
   FORMULARIO DE CONTACTO
   Figma: Frame 81 — 1922×764px
   fills:#373F49 + IMAGE   pad L/R:289   gap:270   HORIZONTAL   counterAxis:CENTER
   Izq Frame 149: 521×594  gap:59  VERTICAL
     Campo: 521×93  gap:14  VERTICAL
       Label: Montserrat 400 24px lh:29 #DDDDDD
       Input: 521×50 #D9D9D9 r:5
     Textarea: 521×113
     Botón: 209×58 #3D7AB6 r:25 Montserrat 500 24px #fff
   Der Frame 78: 553×391  gap:33  VERTICAL
     Título: Montserrat 400 48px lh:58 #DDDDDD
     Párrafos: Montserrat 400 20px lh:30 #DDDDDD  gap:29
   ============================================================= */

.formulario {
    width: 100%;
    background-color: #373F49;
    background-image: url('images/background-hero-consultoriodentallujo.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    box-sizing: border-box;
    min-height: 764px;
    display: flex;
    align-items: center;
}

.formulario__inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--footer-gap);
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0px 15px;
    box-sizing: border-box;
}

/* ── Form wrap (Frame 149 — 521×594) ────────────────────────── */
.formulario__form-wrap {
    flex: 0 0 521px;
    width: 521px;
}

/* Form — gap:59 entre campos y botón */
.formulario__form {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    width: 100%;
}

/* ── Campo individual (Frame 96/97/98/99 — gap:14 VERTICAL) ─── */
.formulario__campo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Label: Montserrat 400 24px lh:29 #DDDDDD */
.formulario__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-subtitle);
    line-height: 29px;
    color: #DDDDDD;
}

/* Input: 521×50 #D9D9D9 r:5 */
.formulario__input {
    width: 521px;
    height: 50px;
    background: #D9D9D9;
    border: none;
    border-radius: 5px;
    padding: 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-md);
    color: #1A3A5C;
    box-sizing: border-box;
    outline: none;
    transition: background 0.2s;
}

.formulario__input:focus {
    background: #FFFFFF;
}

/* Textarea: 521×113 */
.formulario__textarea {
    width: 521px;
    height: 113px;
    background: #D9D9D9;
    border: none;
    border-radius: 5px;
    padding: 12px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-md);
    color: #1A3A5C;
    box-sizing: border-box;
    outline: none;
    resize: none;
    transition: background 0.2s;
}

.formulario__textarea:focus {
    background: #FFFFFF;
}

/* Botón Enviar: 209×58 #3D7AB6 r:25 Montserrat 500 24px #fff */
.formulario__btn {
    width: auto;
    background: var(--btn-primary-bg);
    border: none;
    color: var(--btn-primary-color);
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-start;
}

.formulario__btn:hover {
    background: var(--azul-dark, #1a3a5c);
}

/* ── Texto derecha (Frame 78 — 553×391  gap:33) ─────────────── */
.formulario__texto {
    flex: 0 0 553px;
    width: 553px;
    display: flex;
    flex-direction: column;
    gap: 33px;
}

/* Título: Montserrat 400 48px lh:58 #DDDDDD */
.formulario__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 58px;
    color: #DDDDDD;
    margin: 0;
}

/* Párrafos wrapper (Frame 100 — gap:29) */
.formulario__parrafos {
    display: flex;
    flex-direction: column;
    gap: 29px;
}

/* Párrafo: Montserrat 400 20px lh:30 #DDDDDD */
.formulario__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #DDDDDD;
    margin: 0;
}



/* =============================================================
   ABOUT US — HISTORIA
   Figma: Frame 48:237 — 1922×590px
   fills:#fff  pad:64/278/64/285  gap:32  HORIZONTAL  counterAxis:CENTER
   Izq: 664×440 imagen
   Der: 663×462  gap:69  título Montserrat 500 32px #375EA9
                         desc  Montserrat 400 20px lh:30 #2C2C2C
   ============================================================= */

.about-historia {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-pad-top) 0;
    box-sizing: border-box;
}

.about-historia__inner {
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin: 0 auto;
}

/* ── Imagen izquierda (Frame 197 — 664×440) ──────────────────── */
.about-historia__img-wrap {
    flex: 0 0 664px;
    width: 664px;
    height: 440px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.about-historia__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Contenido derecha (Frame 199 — 663×462  gap:69) ────────── */
.about-historia__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.about-historia__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.about-historia__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}


/* =============================================================
   ABOUT US — MISIÓN Y VISIÓN
   Figma: Frame 48:755 — 1922×590px
   fills:#fff  pad:64/278/64/285  gap:32  HORIZONTAL
   Frame 199: 1359×462  HORIZONTAL gap:69
     Cada bloque: 645px  gap:27  VERTICAL
     Título: Montserrat 500 32px lh:44 #375EA9
     Desc:   Montserrat 400 20px lh:30 #2C2C2C
   ============================================================= */

.about-mision-vision {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-pad-top) 0;
    box-sizing: border-box;
}

.about-mision-vision__inner {
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    gap: var(--section-gap);
    align-items: flex-start;
    max-width: var(-max-width);
    margin: 0 auto;
}

/* ── Bloque (Misión / Visión) — 645px  gap:27 ───────────────── */
.about-mv__bloque {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.about-mv__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}
.about-mv__titulo a:hover{
    color: #439CC4;
}
/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.about-mv__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}


/* =============================================================
   ABOUT US — VALORES
   Figma: Frame 48:764 — 1922×568px
   fills:#fff  pad:64/278/64/285  gap:32  HORIZONTAL  counterAxis:CENTER
   Izq Frame 197: 626×432  gap:27  VERTICAL
     Título: Montserrat 500 32px lh:44 #375EA9
     Desc:   Montserrat 400 20px lh:30 #2C2C2C
   Der Frame 199: 664×440  IMAGE
   ============================================================= */

.about-valores {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-pad-top) 0;
    box-sizing: border-box;
}

.about-valores__inner {
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    margin: 0 auto;
}

/* ── Texto izquierda (Frame 197 — 626×432  gap:27) ───────────── */
.about-valores__content {
    display: flex;
    flex-direction: column;
    gap: 27px;
    width: 50%;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.about-valores__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.about-valores__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* ── Imagen derecha (Frame 199 — 664×440) ────────────────────── */
.about-valores__img-wrap {
    width: 50%;
    height: 440px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.about-valores__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* =============================================================
   ABOUT US — ¿POR QUÉ NOSOTROS?
   Figma: Frame 48:723 — 1922×731px
   fills:#fff  padLeft:171  padRight:278  HORIZONTAL  counterAxis:CENTER
   Izq: 821×731 imagen full height
   Der Frame 198: 652×566  gap:69  VERTICAL
     Frame 197: gap:27  Título 32px #375EA9  Desc 20px #2C2C2C
     Botón: 209×58  #3D7AB6  r:25  Montserrat 500 24px #fff
   ============================================================= */

.about-porque {
    width: 100%;
    background: #FFFFFF;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.about-porque__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: var(--max-width);
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

/* ── Imagen izquierda (821×731 full height) ──────────────────── */
.about-porque__img-wrap {
    width: 50%;
    overflow: hidden;
    flex-shrink: 0;
    align-self: end;
}

.about-porque__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Contenido derecha (Frame 198 — 652×566  gap:69) ────────── */
.about-porque__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding-left: 48px;
}

/* Texto (Frame 197 — gap:27) */
.about-porque__texto {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.about-porque__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.about-porque__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* Botón: 209×58  #3D7AB6  r:25  Montserrat 500 24px #fff */
.about-porque__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    text-decoration: none;
    transition: background 0.2s;
    flex-shrink: 0;
}

.about-porque__cta:hover {
    background: var(--azul-dark, #1a3a5c);
}


/* =============================================================
   ABOUT US — LABORATORIO DENTAL
   Figma: LABORATORIO (49:601) — 1922×1204px  layout:VERTICAL
   ============================================================= */

.laboratorio {
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: var(--section-pad-top) 0 0;
}

/* ── Frame 189: Logo + Texto ─────────────────────────────────── */
/* pad:64/278/64/285  gap:52  HORIZONTAL  counterAxis:CENTER      */
.laboratorio__intro {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    box-sizing: border-box;
    background: #FFFFFF;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Logo wrap: 476×342  pad:16/110 */
.laboratorio__logo-wrap {
    flex: 0 0 476px;
    width: 476px;
    height: 342px;
    padding: 16px 110px var(--section-pad-bottom);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.laboratorio__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Texto: Frame 199 831×432  gap:69 VERTICAL */
.laboratorio__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

/* Título: Montserrat 500 32px lh:44 #15949A */
.laboratorio__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #15949A;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.laboratorio__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* ── Frame 190: 3 fotos ──────────────────────────────────────── */
/* pad L/R:286  gap:12  HORIZONTAL                                */
.laboratorio__fotos {
    width: 100%;
    max-width: var(--max-width);
    margin: 25px auto 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 0 15px;
    box-sizing: border-box;
    background: #FFFFFF;
}

.laboratorio__foto-wrap {
    flex: 1;
    height: 294px;
    overflow: hidden;
}

.laboratorio__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Frame 191: Botón + Ubicación ───────────────────────────── */
/* pad:64/278/64/285  gap:52  HORIZONTAL  counterAxis:CENTER     */
.laboratorio__footer {
    display: flex;
    flex-direction: row;
    gap: 52px;
    align-items: center;
    box-sizing: border-box;
    background: #FFFFFF;
}

/* Botón wrap: 479×58 */
.laboratorio__btn-wrap {
    flex: 0 0 479px;
    width: 479px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Botón: 233×58  #15949A  r:25  Montserrat 500 24px #fff */
.laboratorio__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background: #15949A;
    color: #FFFFFF;
    text-decoration: none;
    transition: background 0.2s;
}

.laboratorio__cta:hover {
    background: #0d7075;
}

/* Ubicación: 796×222  gap:69 VERTICAL */
.laboratorio__ubicacion {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

/* Título Ubicación: Montserrat 500 32px lh:44 #15949A */
.laboratorio__ubicacion-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #15949A;
    margin: 0;
}

/* Texto: Montserrat 400 20px lh:30 #2C2C2C */
.laboratorio__ubicacion-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}


/* =============================================================
   ABOUT US — LABORATORIO 2 (DEPÓSITO DENTAL)
   Variante azul #5596BF — misma estructura que laboratorio 1
   Diferencias: orden invertido en intro y footer, color #5596BF
   ============================================================= */

/* Intro invertida: texto izq, logo der */
.laboratorio__intro--reverse {
    flex-direction: row-reverse;
}

/* Footer gap variante lab2 */
.laboratorio__footer--gap82 {
    gap: 82px;
}

/* Color azul para títulos */
.laboratorio__titulo--blue {
    color: #5596BF;
}

.laboratorio__ubicacion-titulo--blue {
    color: #5596BF;
}

/* Botón azul */
.laboratorio__cta--blue {
    background: #5596BF;
}

.laboratorio__cta--blue:hover {
    background: #3d7ab6;
}



/* =============================================================
   NUESTROS MÉDICOS — HEADER EQUIPO
   Figma: 56:1620 — 1922×337px
   pad T:70 B:66  Frame 160 pad L/R:278  gap:36  VERTICAL
   Título: Montserrat 500 32px #375EA9
   Desc:   Montserrat 400 20px lh:30 #2C2C2C
   ============================================================= */

.medicos-equipo-header {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-pad-top) 0 var(--section-pad-bottom) 0;
    box-sizing: border-box;
}

.medicos-equipo-header__inner {
    /* padding: 0 278px; */
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.medicos-equipo-header__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

.medicos-equipo-header__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* =============================================================
   NUESTROS MÉDICOS — GRID
   Figma: Frame 159 — 1922×1361px
   pad T:54 R:278 L:171
   Frame 198: 1472×1307  HORIZONTAL  gap:34
   ============================================================= */

.medicos-grid {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-pad-top) 0 var(--section-pad-bottom) var0;
    box-sizing: border-box;
}

.medicos-grid__inner {
    width: 100%;
    max-width: var(--max-width);
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 34px;
}

/* ── Card ────────────────────────────────────────────────────── */
/* Figma: imagen posada en el TOP del body (no flotando)           */
/* Hover: card entera se vuelve azul #3D7AB6                       */
.medico-card {
    flex: 0 0 calc((100% - 34px * 2) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Imagen posada encima, tocando el top del body */
.medico-card__img {
    display: block;
    width: auto;
    height: 320px;
    max-width: 85%;
    object-fit: contain;
    object-position: bottom center;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}

/* Body: r:14  border:1px solid #3167D9  bg:#FFF  pad:22/24  gap:28 */
.medico-card__body {
    width: 100%;
    min-height: 450px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #3167D9;
    padding: 22px 24px var(--section-pad-bottom);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    transition: background 0.2s, border-color 0.2s;
    justify-content: space-between;
}

/* Hover en la card completa → body azul */
.medico-card:hover .medico-card__body {
    background: #3D7AB6;
    border-color: #3D7AB6;
}

/* Nombre: font:24  fw:500  #375EA9 — blanco en hover */
.medico-card__nombre {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-subtitle);
    line-height: 30px;
    color: #375EA9;
    margin: 0;
    transition: color 0.2s;
}

.medico-card:hover .medico-card__nombre {
    color: #FFFFFF;
}

/* Desc: font:18  fw:400  #2C2C2C — blanco en hover */
.medico-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 26px;
    color: #2C2C2C;
    margin: 0;
    transition: color 0.2s;
}

.medico-card:hover .medico-card__desc {
    color: #FFFFFF;
}

/* Frame 205: gap:13  VERTICAL */
.medico-card__info {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* CAll: 291x43  r:100  pad:8/20  border:#3167D9  bg:#FFF — borde blanco en hover */
.medico-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 291px;
    height: 43px;
    padding: 8px 20px;
    box-sizing: border-box;
    border-radius: 100px;
    border: 1px solid #3167D9;
    background: #FFFFFF;
    gap: 10px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.medico-card:hover .medico-card__cta {
    border-color: #FFFFFF;
    background: transparent;
}

.medico-card__cta-txt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    color: #3167D9;
    transition: color 0.2s;
}

.medico-card:hover .medico-card__cta-txt {
    color: #FFFFFF;
}

.medico-card__cta-icon path {
    stroke: #3167D9;
    transition: stroke 0.2s;
}

.medico-card:hover .medico-card__cta-icon path {
    stroke: #FFFFFF;
}



/* =============================================================
   DETALLE BÍO — HERO
   Figma: Banner 145:728 — 1922×598px
   Imagen Group x:993px (51.7%) center:65.6% del banner
   Imagen: 536×588px dentro de frame 872px padL/R:68
   ============================================================= */

/* Imagen del doctor individual — centrada en la mitad derecha */
#hero.hero--bio .medicos-hero-img {
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

#hero.hero--bio .medicos-hero-img__img {
    height: 95%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}


/* =============================================================
   DETALLE BÍO — CONTENIDO
   Figma: "Servicios" 145:743 — VERTICAL  gap:113  pad T:70 B:66
   ============================================================= */

.bio-contenido {
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding: var(--section-pad-top) 0 var(--section-pad-bottom) 0;
    box-sizing: border-box;
}

/* ── 1. Bio intro (Frame 160) ───────────────────────────────── */
/* pad L/R:278  gap:36  VERTICAL                                 */
.bio-intro {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Párrafos: Montserrat 400 20px lh:30 #2C2C2C */
.bio-intro__parrafo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
    max-width: var(--max-width);
}

/* ── 2 & 3. Logros (Frame 162 / Frame 233) ──────────────────── */
/* pad L/R:278  gap:56  VERTICAL                                 */
.bio-logros {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* Header: gap:36  VERTICAL */
.bio-logros__header {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.bio-logros__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.bio-logros__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* Grid: Frame 238 → 2 filas × 3 cols  gap:56 VERTICAL */
.bio-logros__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Card (Frame 235): 418×350  border azul  r:20 */
.bio-logro-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    padding: 24px 24px var(--section-pad-bottom);
    box-sizing: border-box;
    border: 1px solid #3167D9;
    border-radius: 20px;
    background: #FFFFFF;
    min-height: 280px;
}

/* Título card: Montserrat 500 24px #375EA9 */
.bio-logro-card__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-subtitle);
    line-height: 30px;
    color: #375EA9;
    margin: 0;
}

/* Desc card: Montserrat 400 20px lh:30 #2C2C2C */
.bio-logro-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* ── 4. Bio personal (Frame 231) ────────────────────────────── */
/* pad L/R:278  gap:56  VERTICAL                                 */
.bio-personal {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* Bloque: gap:36  VERTICAL */
.bio-personal__bloque {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.bio-personal__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.bio-personal__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* Foto grande: 1366×857 */
.bio-personal__foto-wrap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    height: 600px;
    overflow: hidden;
    border-radius: 14px;
    padding-left: 15px;
    padding-right: 15px;
}

.bio-personal__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 5. También puedes conocer a (Frame 232) ────────────────── */
/* pad L/R:278  gap:36  VERTICAL                                 */
.bio-conoce {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* Header: gap:36 */
.bio-conoce__header {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Título: Montserrat 500 32px lh:44 #375EA9 */
.bio-conoce__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

/* Desc: Montserrat 400 20px lh:30 #2C2C2C */
.bio-conoce__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* =============================================================
   SERVICIOS — BREADCRUMB + HEADER
   Figma: 122:1291 — 1922×474  VERTICAL  gap:113  pad T:70 B:66
   ============================================================= */

.svc-header {
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    box-sizing: border-box;
}

/* Breadcrumb standalone — padding lateral via el wrapper, no el svc-breadcrumb interno */
.svc-header__breadcrumb-only {
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
}

/* Breadcrumb: pad L/R:277  HORIZONTAL  gap:23 */
.svc-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 23px;
    /* padding: 0 277px; */
    box-sizing: border-box;
    width: 100%;
    max-width: var(--max-width);
    margin: 20px auto 0;
    padding-left: 15px;
    padding-right: 15px;
}

.svc-breadcrumb__item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 24px;
    text-decoration: none;
}

.svc-breadcrumb__item--inactive {
    color: #A5A5A5;
}

.svc-breadcrumb__item--active {
    color: #3D7AB6;
}

.svc-breadcrumb__sep {
    flex-shrink: 0;
}

/* Header: pad L/R:278  gap:36  VERTICAL */
.svc-header__content {
    /* padding: 0 278px; */
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.svc-header__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
    margin: 0;
}

.svc-header__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
    max-width: var(--max-width);
}


/* =============================================================
   SERVICIOS — GRID DE CARDS
   Figma: 122:1295 Frame 159 — 1922×1006
   pad R:278 B:44 L:171
   Frame 198: HORIZONTAL  gap:34  2×2
   Card: 618×464  VERTICAL  gap:38  pad:32  r:14  #fff
   ============================================================= */

.svc-grid {
    width: 100%;
    max-width: var(--max-width);
    padding: 30px 15px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
}

.svc-grid__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 34px;
    max-width: var(--max-width);
}

/* Card: 618×464  VERTICAL  gap:38  pad:32  r:14 */
.svc-card {
    flex: 0 0 calc((100% - 34px) / 2);
    display: flex;
    flex-direction: column;
    gap: 38px;
    padding: 32px 32px var(--section-pad-bottom);
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E0E0E0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* Frame 252: HORIZONTAL  gap:62 — texto izq + imagen der */
.svc-card__top {
    display: flex;
    flex-direction: row;
    gap: 62px;
    align-items: flex-start;
}

/* Texto izq */
.svc-card__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Título: 30px fw:500 #375EA9 */
.svc-card__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-md-lg);
    line-height: 38px;
    color: #375EA9;
    margin: 0;
}

/* Desc: 18px fw:400 #2C2C2C */
.svc-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 28px;
    color: #2C2C2C;
    margin: 0;
}

/* Imagen der: 130×130  r:14 */
.svc-card__img-wrap {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    border-radius: 14px;
    overflow: hidden;
}

.svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Frame 226: pills  HORIZONTAL  gap:18  flex-wrap */
.svc-card__pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}

/* Pill: r:100  border:#3167D9  16px #3167D9 */
.svc-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid #3167D9;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body-md);
    color: #3167D9;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.svc-card__pill svg path {
    stroke: #3167D9;
    transition: stroke 0.2s;
}

.svc-card__pill:hover {
    background: #3167D9;
    color: #FFFFFF;
}

.svc-card__pill:hover svg path {
    stroke: #FFFFFF;
}


/* =============================================================
   IMPLANTES DENTALES — HEADER (override breadcrumb 3 niveles)
   Figma: 155:1639 — pad T:31 B:66  gap:61
   ============================================================= */

.implantes-header {
    padding-top: 10x;
    gap: 61px;
}


/* =============================================================
   IMPLANTES DENTALES — SLIDER CARDS
   Figma: 157:1999 — 1922×920
   HORIZONTAL  gap:34  padBottom:44  padLeft:175
   Card: 431×876  r:16  pad T:40 R:34 B:71 L:34  gap:68
   Imagen: 363×363  r:246  bg:#F4F4F4
   ============================================================= */
.implantes-slider {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto 30px;
    padding: 0 15px;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    position: relative;
}

/* Flechas: absolutas, centradas verticalmente en el área de imagen */
.implantes-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}

.implantes-slider__arrow:hover { opacity: 0.6; }
.implantes-slider__arrow--prev { left: 0; }
.implantes-slider__arrow--next { right: 0; }

/* Track */
.implantes-slider__track {
    width: 90%;
    display: flex;
    flex-direction: row;
    gap: 34px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1;
}

.implantes-slider__track::-webkit-scrollbar { display: none; }

/* Card: 431×876  VERTICAL  gap:68  pad T:40 R:34 B:71 L:34  r:16 */
.implantes-card {
    flex: 0 0 calc((100% - 68px) / 3);  /* (track - 2 gaps) / 3 columnas */
    width: calc((100% - 68px) / 3);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: var(--section-pad-top) 20px var(--section-pad-bottom) 20px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    scroll-snap-align: start;
    justify-content: space-between;
}

/* Imagen circular: 363×363  r:246  bg:#F4F4F4 */
.implantes-card__img-wrap {
    width: 100%;
    max-width: 280px;
    border-radius: 100%;
    background: #F4F4F4;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}

.implantes-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Texto: gap:20 VERTICAL */
.implantes-card__texto {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Título: 28px fw:500 #375EA9 */
.implantes-card__titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-md);
    line-height: 36px;
    color: #375EA9;
    margin: 0;
}

/* Desc: 20px fw:400 #2C2C2C */
.implantes-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
    margin: 0;
}

/* Botones: VERTICAL gap:13 */
.implantes-card__botones {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Botón base: 291×43  r:100  pad:8/20  SPACE_BETWEEN */
.implantes-card__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 291px;
    height: 43px;
    padding: 8px 20px;
    box-sizing: border-box;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    text-decoration: none;
    gap: 10px;
    transition: opacity 0.2s;
}

.implantes-card__btn:hover { opacity: 0.85; }

/* Outline: border #3167D9  bg:#fff  texto:#3167D9 */
.implantes-card__btn--outline {
    border: 1px solid #3167D9;
    background: #FFFFFF;
    color: #3167D9;
}

/* Filled: bg:#3D7AB6  texto:#fff */
.implantes-card__btn--filled {
    border: none;
    background: #3D7AB6;
    color: #FFFFFF;
}

/* Dots */
.implantes-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.implantes-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #3167D9;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.implantes-slider__dot.is-active {
    background: #3167D9;
    transform: scale(1.25);
}

/* =============================================================
   ALL ON 4 — SERVICIOS STRIP + FRAME 159
   ============================================================= */
.a04-servicios-strip {
    width: 100%;
    background: #F1F2F5;
    box-sizing: border-box;
}

.a04-servicios-strip__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 50px 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--section-gap);
    align-items: start;
}

.a04-servicios-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.a04-servicios-strip__icon {
    width: 56px;
    height: 56px;
    color: #3D7AB6;
}

.a04-servicios-strip__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.a04-servicios-strip__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1.2;
    color: #375EA9;
}

.a04-servicios-strip__desc {
    max-width: 290px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
}

.a04-frame159 {
    width: 100%;
    background: #FFFFFF;
    padding: 30px 0 0;
}

.a04-frame159__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px 0px;
    display: grid;
    grid-template-columns: minmax(0, 821px) minmax(0, 652px);
    align-items: center;
    gap: 34px;
    box-sizing: border-box;
}

.a04-frame159__image-wrap {
    height: 731px;
    overflow: hidden;
    align-self: end;
}

.a04-frame159__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.a04-frame159__content {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding-bottom: 30px;
}

.a04-frame159__text-block {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.a04-frame159__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44.33px;
    color: #375EA9;
}

.a04-frame159__desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
}

.a04-frame159__list {
    margin: 0;
    padding-left: 30px;
    display: flex;
    flex-direction: column;

    list-style: disc;
}

.a04-frame159__list-item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1.3em;
    color: #2C2C2C;
    margin-bottom: 15px;
}

.a04-frame159__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    text-decoration: none;
}

/* ============================================================
   ALL ON 4 — PASO A PASO
   ============================================================ */
.ao4-steps {
    width: 100%;
    background: #FFFFFF;
}

.ao4-steps__intro,
.ao4-steps__content,
.ao4-steps__cta-row {
    width: 100%;
    box-sizing: border-box;
}

.ao4-steps__content {
    margin: 30px 0;
}
.ao4-steps__cta-row{
    margin: 0px 0px 30px;
}

.ao4-steps__intro-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.ao4-steps__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
}

.ao4-steps__desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
}

.ao4-steps__content {
    
}

.ao4-steps__grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1fr 664px;
    gap: var(--section-gap);
    align-items: start;
}

.ao4-steps__col--text {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.ao4-step-card {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.ao4-step-card__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
}

.ao4-step-card__desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
}

.ao4-steps__image-box {
    width: 664px;
    height: 440px;
    background: #C8C8C8;
    overflow: hidden;
}

.ao4-steps__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ao4-steps__cta-row {
    
}

.ao4-steps__cta-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}

.ao4-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 20px;
    border-radius: 100px;
    background: #FFFFFF;
    border: 1px solid #3167D9;
    color: #3167D9;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 30px;
    transition: opacity .2s ease;
}

.ao4-pill-link:hover {
    opacity: .85;
}


/* =============================================================
   BLOG PAGE — SECCIÓN 1
   Breadcrumb + intro card
   ============================================================= */
.blog-page-hero {
    width: 100%;
    background: #F1F2F5;
    box-sizing: border-box;
}

.blog-page-hero__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

.blog-page-hero__card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.blog-page-hero__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 44px;
    color: #375EA9;
}

.blog-page-hero__desc {
    margin: 0;
    max-width: var(--max-width);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 30px;
    color: #2C2C2C;
}


/* =============================================================
   BLOG PAGE — SECCIÓN 2
   Sidebar + listado de notas
   ============================================================= */
.blog-layout {
    width: 100%;
    background: #F1F2F5;
    box-sizing: border-box;
}

.blog-layout__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 307px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.blog-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-sidecard,
.blog-whatsapp-box,
.blog-copy-link,
.blog-toolbar,
.blog-pagination,
.blog-post-card {
    background: #FFFFFF;
    border-radius: 12px;
}

.blog-sidecard {
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-sidecard__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title-lg);
    line-height: 1.2;
    color: #375EA9;
}

.blog-sidecard__desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: #2C2C2C;
}

.blog-sidecard__list {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style:disc;
}

.blog-sidecard__list a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body-md);
    line-height: 1.1em;
    color: #375EA9;
    text-decoration: none;
}

.blog-whatsapp-box {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-whatsapp-box__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: 1.4;
    color: #2C2C2C;
}

.blog-whatsapp-box__title span {
    color: #375EA9;
}

.blog-whatsapp-box__input {
    min-height: 46px;
    border: 1px solid #B8B8B8;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-sm);
    color: #B0B0B0;
}

.blog-copy-link {
    min-height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #3D7AB6;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
}

.blog-copy-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.blog-layout__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-toolbar {
    min-height: 48px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.blog-search {
    width: min(100%, 430px);
    position: relative;
}

.blog-search__input {
    width: 100%;
    height: 34px;
    border: 1px solid #CFCFCF;
    border-radius: 100px;
    padding: 0 42px 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-sm);
    color: #2C2C2C;
    background: #FFFFFF;
    box-sizing: border-box;
}

.blog-search__button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #8C8C8C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.blog-search__button svg {
    width: 18px;
    height: 18px;
}

.blog-toolbar__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-sm);
    color: #8A8A8A;
    white-space: nowrap;
}

.blog-toolbar__page-current {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    color: #999999;
}

.blog-toolbar__page-total {
    color: #3D7AB6;
    font-weight: 500;
}

.blog-post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.blog-post-card {
    overflow: hidden;
    border: 1px solid #E5E5E5;
}

.blog-post-card__image-wrap {
    width: 100%;
    aspect-ratio: 1.13 / 1;
    overflow: hidden;
}

.blog-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-post-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-post-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-post-card__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body-lg);
    line-height: 1.2;
    color: #375EA9;
}

.blog-post-card__category {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-caption-sm);
    line-height: 1.2;
    color: #375EA9;
}

.blog-post-card__excerpt {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #2C2C2C;
}

.blog-post-card__cta {
    min-height: 46px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #3167D9;
    border-radius: 100px;
    color: #3167D9;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
}

.blog-post-card__cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.blog-pagination {
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.blog-pagination__page,
.blog-pagination__arrow,
.blog-pagination__dots {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body-sm);
    line-height: 1;
    color: #9B9B9B;
    text-decoration: none;
}

.blog-pagination__page {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
}

.blog-pagination__page.is-active {
    border-color: #3167D9;
    color: #3167D9;
}

/* =============================================================
   SINGLE POST PAGE
   Reutiliza header/blog sidebar/footer
   ============================================================= */
.post-page-hero .blog-page-hero__card {
    gap: 10px;
}

.post-layout {
    width: 100%;
    background: #F1F2F5;
    padding: 0 var(--section-pad-right) var(--section-pad-bottom) var(--section-pad-left);
    box-sizing: border-box;
}

.post-layout__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 307px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.post-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-layout__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-toolbar__back {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    color: #8A8A8A;
    text-decoration: none;
    white-space: nowrap;
}

.post-article-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-sizing: border-box;
}

.post-article-card__hero-media,
.post-article-card__media,
.post-article-card__gallery-item {
    background: #D1D1D1;
    border-radius: 4px;
}

.post-article-card__hero-media {
    width: 100%;
    height: 260px;
}

.post-article-card__section,
.post-article-card__copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.post-article-card__section--intro {
    gap: 12px;
}

.post-article-card__title,
.post-article-card__subtitle {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #375EA9;
}

.post-article-card__title {
    font-size: var(--fs-title-lg);
    line-height: 1.25;
}

.post-article-card__subtitle {
    font-size: var(--fs-title-sm);
    line-height: 1.25;
}

.post-article-card__richtext,
.post-article-card__copy p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.8;
    color: #2C2C2C;
}

.post-article-card__richtext p,
.post-article-card__copy p {
    margin: 0;
}

.post-article-card__split,
.post-article-card__cols-two {
    display: grid;
    gap: 24px;
}

.post-article-card__split--right-media {
    grid-template-columns: minmax(0, 1fr) 237px;
    align-items: start;
}

.post-article-card__split--left-media {
    grid-template-columns: 242px minmax(0, 1fr);
    align-items: start;
}

.post-article-card__cols-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-article-card__copy--narrow {
    max-width: 320px;
}

.post-article-card__media--portrait {
    width: 100%;
    min-height: 238px;
}

.post-article-card__media--square {
    width: 100%;
    min-height: 245px;
}

.post-article-card__media--wide {
    width: 100%;
    height: 190px;
}

.post-article-card__gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.post-article-card__gallery-item {
    aspect-ratio: 1 / 1;
}


#footer .footer-form__intro { margin-bottom: 24px; }
#footer .footer-form__intro .footer-info-desc { margin: 0; }