/* Core Rehabilitación - One Page */
:root{
  --bg:#f7fbff;
  --surface:#ffffff;
  --surface-2:#eef7ff;
  --text:#12304f;
  --muted:#D9DADB;
  --border:#d7e7f5;
  --primary:#6A8BA4;
  --primary-2:#122D3C;
  --accent:#6a8ba4;
  --dark:#1d1d1d;
  --dark-2: #5b5d5f ;
  --success:#0f8b57;
  --shadow:0 16px 40px rgb(0 0 0 / 22%);
  --radius:20px;
  --radius-sm:14px;
  --container:min(1180px, calc(100% - 32px));
  --header-h:86px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(55,183,255,.08), transparent 26%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
.container{width:var(--container);margin-inline:auto}
.section{padding:96px 0}
h1,h2,h3{
  font-family:"Montserrat",system-ui,sans-serif;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 16px;
}
h1{font-size:clamp(2.5rem, 4vw, 4.75rem)}
h2{font-size:clamp(2rem, 3vw, 3.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 16px}
ul{margin:0;padding-left:20px}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
}
.skip-link:focus{
  left:12px;top:12px;
  background:#fff;
  padding:10px 14px;
  border-radius:10px;
  z-index:10000;
}
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(18px);
  background: #122D3C;
  border-bottom:0px;
}
.header-inner{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand img{height:55px;width:auto}
.site-nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.site-nav a{
  color:var(--muted);
  font-weight:600;
  transition:.2s ease;
}
.site-nav a:hover,.site-nav a.is-active{color:var(--primary)}


.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  margin:5px auto;
  transition:.2s ease;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow:0 14px 28px rgba(15,111,203,.25);
}
.btn-outline{
 border-color: #25d366;
    background: var(--primary-2);
    color: #25d366;
}

.btn-outline:hover{
 border-color: #25d366;
    background: #25d366;;
    color: var(--muted);
}


.btn-whatsapp{
 background: #25d366;
    color: var(--dark);
}

.btn-whatsapp:hover{
 background: #27a556;
    color: var(--muted);
     transform: translateY(-2px);
}


.btn-full{width:100%}
.hero{
  padding:48px 0 72px;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  background: #d9dadb;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:48px;
  align-items:center;
}
.eyebrow,.section-tag,.profile-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--primary);
  margin-bottom:14px;
}
.lead{
  font-size:1.125rem;
  color:var(--dark-2);
  max-width:58ch;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:26px 0;
}
.chips span{
      background: var(--primary);
    color: #d9dadb;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 600;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:28px;
}
.hero-points{
  display:grid;
  gap:8px;
  color:var(--dark-2);
  list-style:none;
  padding:0;
}
.hero-points li::before{
  content:"•";
  color:var(--primary);
  font-weight:800;
  margin-right:10px;
}
.hero-slider{
  background:linear-gradient(180deg, #fff 0%, #eff8ff 100%);
  border:1px solid var(--border);
  border-radius:32px;
  padding:16px;
  box-shadow:var(--shadow);
}

.hero-copy h1 {
  color: var(--primary-2);
}
.slider-track,.testimonial-track{
  position:relative;
 /* overflow:hidden;*/
}
.slide,.testimonial-card{
  display:none;
}
.slide.is-active,.testimonial-card.is-active{
  display:block;
}
.slide img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:24px;
  height: 500px;
}
.slider-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:16px;
}
.slider-btn{
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:var(--dark);
  box-shadow:0 8px 20px rgba(10,50,90,.12);
  font-size:1.7rem;
  cursor:pointer;
}

.slider-btn:hover{
  background:var(--primary);
    color:var(--muted);
     transform: translateY(-2px);
 
}
.slider-dots,.testimonial-dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.slider-dots button,.testimonial-dots button{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:#c2d9ea;
  cursor:pointer;
  padding:0;
}
.slider-dots button.is-active,.testimonial-dots button.is-active{background:var(--primary)}
.section-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:42px;
  align-items:start;
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}
.value-card,.service-card,.profile-card,.testimonial-card,.form-card,.contact-card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.value-card{
  border-radius:18px;
  padding:18px 20px;
  font-weight:700;
}
.profile-card{
  overflow:hidden;
  border-radius:26px;
}
.profile-card img{
  width:100%;
  height:370px;
  object-fit:cover;
}
.profile-content{padding:24px}
.profile-role{
  color:var(--primary);
  font-weight:700;
  margin-bottom:8px;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
      align-items: center;
}
.featured-services{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-bottom:20px;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
.service-card{
  padding:24px;
  border-radius:22px;
}
.service-card.featured{
  background:linear-gradient(180deg, #ffffff, #f2f9ff);
}
.icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
/*background: var(--primary);*/
  font-size:1.6rem;
  margin-bottom:18px;
}
.service-link{
  display:inline-flex;
  margin-top:10px;
  color:var(--primary);
  font-weight:800;
}


.testimonials{
  background:linear-gradient(180deg, rgba(15,111,203,.04), rgba(15,111,203,.01));
}
.instagram-link{
  font-weight:700;
  color:var(--primary);
}
.testimonial-card{
  border-radius:24px;
  padding:32px;
  min-height:210px;
}
.testimonial-card p{
  font-size:1.25rem;
  line-height:1.5;
  max-width:50ch;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr .92fr;
  gap:28px;
  align-items:start;
}
.contact-lead{
  color:var(--muted);
  max-width:56ch;
}
.contact-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:28px 0;
}
.contact-cards > *:last-child {
    grid-column: 1 / -1;
}
.contact-card{
  border-radius:20px;
  padding:20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.contact-card span{font-size:1.4rem}
.map-frame{
  overflow:hidden;
  border-radius:24px;
  min-height:320px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.map-frame iframe{
  width:100%;
  min-height:320px;
  border:0;
}
.form-card{
  border-radius:28px;
  padding:28px;
}
.field{margin-bottom:18px}
.field label{
  display:block;
  font-weight:700;
  margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  background:#fff;
  color:var(--text);
  outline:none;
}
.field input:focus,.field textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(15,111,203,.12);
}
.error-text{
  display:block;
  min-height:18px;
  color:#c62828;
  font-size:.88rem;
  margin-top:6px;
}
.form-message{
  margin-top:16px;
  font-weight:700;
}
.form-message.is-success{color:var(--success)}
.form-message.is-error{color:#c62828}
.captcha-note{
  border:1px dashed var(--border);
  background:var(--surface-2);
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:.95rem;
}
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.float-whatsapp{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 18px;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  font-weight:800;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.float-whatsapp:hover{  
  background:#27a556;
  color:var(--muted);
   transform: translateY(-2px);
 
}
.site-footer{
  padding:26px 0 44px;
  border-top:1px solid rgba(215,231,245,.9);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.footer-inner nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:var(--muted);
}

@media (max-width: 1100px){
  .featured-services{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-grid,.contact-grid,.hero-grid{grid-template-columns:1fr}
}
@media (max-width: 860px){
  :root{--header-h:76px}
  .section{padding:72px 0}
  .nav-toggle{display:inline-block}
  .site-nav{
    position:absolute;
    top:calc(100% + 10px);
    right:16px;
    width:min(340px, calc(100vw - 32px));
    padding:16px;
    border-radius:20px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.97);
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .site-nav.is-open{display:flex}
  .btn-nav{width:100%}
  .contact-cards,.values-grid,.services-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column; align-items:flex-start}
}
@media (max-width: 560px){
  .hero{padding-top:28px}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .contact-card{padding:18px}
  .form-card{padding:22px}
  .testimonial-card p{font-size:1.05rem}
  .float-whatsapp span{display:none}
  .float-whatsapp{width:58px;padding:0}
  .float-whatsapp::before{content:"💬";font-size:1.4rem}
}









section#nosotros {
    background: VAR(--primary);
}



section#nosotros h2 {
    color: var(--primary-2);
}

section#nosotros .section-tag {
  color: #d9dadb;

}

section#nosotros p {
  color: #d9dadb;
}

section#nosotros .value-card {
  background: #d9dadb;
      color: var(--primary-2);
}
 .profile-card {
    background: var(--primary-2);
    border: 0;
    box-shadow: var(--shadow);
}

 .profile-card h3 {
  color: #d9dadb;
}

.profile-kicker {  
    color: var(--primary) !important;
}

.profile-role {  
    color: var(--primary) !important;
}

section#servicios {
    background: var(--primary-2);
}

section#servicios h2 {
  color: #d9dadb;
}

.service-card.featured {
   background: var(--muted);
}

.service-card h3 {
  color: var(--primary-2);
}

.service-card p {
  color: var(--dark-2);
}

.service-card ul li {
  color: var(--primary);
}


.service-card {
    background: var(--muted);
    border: 0;
    box-shadow: var(--shadow);
}


.service-link {
    color: #d9dadb;
    background: var(--primary-2);
    padding: 5px 10px;
    border-radius: var(--radius);
}

.service-link:hover{
  color: #d9dadb;
   transform: translateY(-2px);
}




section#testimonios {
    background: #d9dadb;
}

.testimonial-card {
    background: var(--primary);
    border: 0;
    box-shadow: var(--shadow);
}

.testimonial-card p {
  color: #d9dadb;
}

.testimonial-card p strong {
  color: var(--primary-2);
}

section#contacto {
    background: VAR(--primary);
}


section#contacto h2 {
  color: #d9dadb;
}


section#contacto .section-tag {
  color: var(--primary-2);
}

.contact-card {
    background: #d9dadb;
    border: 0;
    box-shadow: var(--shadow);
}

.form-card {
    background: #d9dadb;
    border: 0;
    box-shadow: var(--shadow);
}

.captcha-note {
    border: 1px dashed var(--primary-2);
    background: var(--primary);
    }
    
    .contact-lead  {
  color: var(--primary-2);
}


.site-footer {
    padding: 26px 0 44px;
    border-top: 0;
    background: var(--primary-2);
}

.site-footer p  {
  color: #d9dadb;
}


.btn-primary {
    background: var(--primary-2);
    color: var(--muted);
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%);
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--primary);
    color: var(--primary-2);
   
}

.site-header .btn-primary {
    background: var(--primary);
    color: var(--muted);
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%);
    cursor: pointer;
}

.site-header .btn-primary:hover {
    background: var(--dark);
    color: var(--muted);
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%);
    cursor: pointer;
}


.section-head div:first-child {
    width: 70%;
}






































.service-card {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  border-radius: 22px;
 /* background: #ffffff;*/
  border: 1px solid rgba(13, 94, 168, 0.12);
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.06),
    0 2px 8px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  z-index: 1;
}

/* brillo superior tipo Uiverse */
.service-card::before {
  content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgb(18 45 60 / 22%), rgba(255, 255, 255, 0) 35%, rgba(106, 139, 164, 0.22) 70%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}

/* halo suave */
.service-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -80px;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(82, 178, 255, 0.18) 0%,
    rgba(82, 178, 255, 0) 70%
  );
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(13, 94, 168, 0.28);
  box-shadow:
    0 18px 45px rgba(38, 78, 116, 0.16),
    0 10px 20px rgba(3, 30, 92, 0.08);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

.service-card__icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #dff4ff, #edf7ff);
  color: #0d5ea8;
  font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.service-card:hover .service-card__icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 20px rgba(13, 94, 168, 0.14);
  background: linear-gradient(135deg, #cdeeff, #e3f4ff);
   transform: translateY(-2px);
}

.service-card h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  line-height: 1.25;
  color: #0f172a;
  transition: color 0.3s ease;
}

.service-card p {
  margin: 0 0 18px;
  color: #475569;
  line-height: 1.65;
  font-size: 0.98rem;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: #0d5ea8;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.service-card__link::after {
  content: "→";
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__link {
  transform: translateX(2px);
}

.service-card:hover .service-card__link::after {
  transform: translateX(4px);
}




.article-fondo {
     border-radius: 25px;
    min-height: 500px;
    /* padding: 50px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;   
    overflow: hidden;
    position: relative;
}

.img-1{
   background: url(/assets/img/rehabilitation.webp);
}

.img-2{
   background: url(/assets/img/fuerza.webp);
}


.img-3{
   background: url(/assets/img/pisada.webp);
}


.article-fondo-color-1 {
  background-color: var(--primary);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .7;
 
}

.article-fondo-color-2 {
  background-color: var(--primary-2);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .7;
}


.article-fondo-color-3 {
  background-color: var(--dark-2);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .7;
}

.article-fondo h3 {
 color: #ffffff;
    font-size: 2rem;
    z-index: 9999;
        padding: 50px 200px 0px 50px;
}

.article-fondo p {
 color: var(--muted);
    font-size: 1rem;
    z-index: 999;
    padding: 0px 50px 0px 50px;
}

.article-fondo a {
width: fit-content;
    z-index: 99999;
    margin: 0px 50px 50px 50px;
}








.profile-carousel {
  position: relative;
  width: 100%;
  max-width: 410px;
  margin: 0 auto;
}

.profile-carousel-track-wrap {
  overflow: hidden;
  border-radius: 28px;
}

.profile-carousel-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.profile-card {
  min-width: 100%;
  background: #0f3348;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(6, 35, 58, 0.22);
}

.profile-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.74;
  object-fit: cover;
  background: #dfe3f0;
}

.profile-content {
  padding: 18px 24px 30px;
  background: #0c3145;
}

.profile-kicker {
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5e8fbe;
}

.profile-content h3 {
  margin: 0 0 14px;
  font-size: 2rem;
  line-height: 1.15;
  color: #ffffff;
}

.profile-role {
  margin: 0 0 12px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #5d95c6;
}

.profile-content p {
  margin: 0 0 6px;
  color: #eef5fb;
  line-height: 1.6;
  font-size: 1rem;
}

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

.profile-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #0c3145;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: all 0.25s ease;
}

.profile-carousel-btn:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.06);
}

.profile-carousel-btn.prev {
  left: -22px;
}

.profile-carousel-btn.next {
  right: -22px;
}

.profile-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.profile-carousel-dots button {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: rgba(12, 49, 69, 0.25);
  cursor: pointer;
  transition: all 0.25s ease;
}

.profile-carousel-dots button.active {
  width: 30px;
  border-radius: 999px;
  background: #0d5ea8;
}

@media (max-width: 768px) {
  .profile-carousel {
    max-width:auto;
  }

  .profile-content {
    padding: 24px 20px 26px;
  }

  .profile-content h3 {
    font-size: 1.55rem;
  }

  .profile-role {
    font-size: 1rem;
  }

  .profile-content p {
    font-size: 0.96rem;
  }

  .profile-carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .profile-carousel-btn.prev {
    left: 10px;
  }

  .profile-carousel-btn.next {
    right: 10px;
  }
}












/* =========================
   MOBILE FIXES < 500px
   ========================= */
@media (max-width: 500px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
    display: block;
  }

  section,
  .section,
  .container,
  .wrapper {
    max-width: 100%;
    /*overflow-x: clip;*/
  }

  /* HEADER */
  .site-header,
  .header,
  .topbar,
  .navbar {
    min-height: 74px;
    padding: 10px 14px;
  }

  .site-logo img,
  .logo img {
    max-width: 170px;
    height: auto;
  }

  .menu-toggle,
  .nav-toggle,
  .hamburger {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  /* evita que el header fijo tape la primera sección */
  body.has-fixed-header main,
  main {
    padding-top: 0;
  }

  .hero,
  .hero-section,
  .intro-hero {
    padding-top: 96px;
  }

  /* HERO */
  .hero-grid,
  .hero-content,
  .hero-layout,
  .intro-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .hero-copy,
  .hero-text,
  .intro-copy {
    width: 100%;
    max-width: 100%;
  }

  .hero-kicker,
  .section-kicker {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }

  .hero-title,
  .intro-title,
  .hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .hero-description,
  .hero p,
  .intro-copy p {
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 100%;
  }

  .hero-actions,
  .hero-buttons,
  .cta-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions .btn,
  .hero-buttons .btn,
  .cta-group .btn,
  .button,
  .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero-badges,
  .hero-tags,
  .hero-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .hero-badge,
  .hero-tag,
  .pill {
    width: fit-content;
    max-width: 100%;
  }

  /* SLIDER / CAROUSEL */
  .hero-slider,
  .swiper,
  .embla,
  .carousel {
    overflow: hidden;
  }

  .hero-slide,
  .swiper-slide,
  .carousel-card {
    min-height: auto !important;
    height: auto !important;
  }

  .hero-slide-content,
  .slide-content {
    padding: 24px 18px 86px;
  }

  .hero-slide h2,
  .slide-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    line-height: 1.05;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-slide p,
  .slide-text {
    font-size: 1rem;
    line-height: 1.55;
  }

  .slider-nav,
  .carousel-nav {
    padding: 0 16px 16px;
  }

  .slider-arrow,
  .carousel-arrow {
    width: 48px;
    height: 48px;
  }

  /* SECCIONES EN UNA COLUMNA */
  .about-grid,
  .services-grid,
  .contact-grid,
  .testimonials-grid,
  .team-grid,
  .cards-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* QUIENES SOMOS */
  .about-content,
  .about-copy {
    max-width: 100%;
  }

  .about-title,
  .section-title,
  .about h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.05;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
  }

  .about-text,
  .about-copy p {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .about-features,
  .feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .feature-item,
  .about-feature {
    padding: 18px 20px;
    border-radius: 18px;
    min-height: auto;
  }

  /* PROFESIONALES */
  .profile-card,
  .professional-card,
  .team-card {
    display: flex;
    flex-direction: column;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 26px;
  }

  .profile-card img,
  .professional-card img,
  .team-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
  }

  .profile-content,
  .professional-content,
  .team-card-content {
    padding: 20px 18px 22px;
  }

  .profile-content h3,
  .professional-content h3,
  .team-card-content h3 {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .profile-role,
  .professional-role {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  /* SERVICIOS */
  .services-header,
  .services-top,
  .section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .services-title,
  .services h2 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.02;
    max-width: 100%;
  }

  .services-cta,
  .whatsapp-inline {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    white-space: normal;
  }

  .service-card {
    padding: 20px 18px;
    min-height: auto;
  }

  .service-card h3 {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .service-card p {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* TESTIMONIOS */
  .testimonials-header,
  .testimonials-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .testimonials-title,
  .testimonials h2 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.02;
    max-width: 100%;
  }

  .testimonials-handle,
  .instagram-handle {
    font-size: 1rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .testimonial-card {
    padding: 22px 20px;
    border-radius: 24px;
    min-height: auto;
  }

  .testimonial-card blockquote,
  .testimonial-card p {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  /* CONTACTO */
  .contact-title,
  .contact h2 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.05;
  }

  .contact-card,
  .info-card {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px 14px;
    align-items: start;
    padding: 18px 16px;
    border-radius: 22px;
  }

  .contact-card__icon,
  .info-card__icon {
    width: 28px;
    height: 28px;
    margin-top: 4px;
  }

  .contact-card h3,
  .info-card h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
  }

  .contact-card p,
  .contact-card a,
  .info-card p,
  .info-card a {
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* evita que mails / handles revienten el ancho */
  a,
  p,
  span,
  li {
    overflow-wrap: anywhere;
  }

  /* BOTON FLOTANTE */
  .floating-whatsapp,
  .floating-chat,
  .whatsapp-float,
  .chat-float {
    width: 58px;
    height: 58px;
    right: 14px;
    bottom: 14px;
  }

  .article-fondo h3 {
        padding: 50px 50px 0px 50px;
}


.profile-carousel {
    max-width: 420px;
}




}

/* =========================
   EXTRA SMALL < 380px
   ========================= */
@media (max-width: 380px) {
  .hero-title,
  .intro-title,
  .hero h1,
  .about-title,
  .section-title,
  .services-title,
  .testimonials-title,
  .contact-title {
    font-size: clamp(1.8rem, 10vw, 2.4rem);
  }

  .hero-description,
  .about-text,
  .service-card p,
  .testimonial-card p,
  .contact-card p {
    font-size: 0.98rem;
  }

  .profile-card img,
  .professional-card img,
  .team-card img {
    height: 220px;
  }

  .contact-card,
  .info-card,
  .feature-item,
  .service-card,
  .testimonial-card {
    padding: 16px 14px;
  }
}



























@media (max-width: 500px) {
  .profile-card,
  .professional-card,
  .team-card,
  .doctor-card,
  .staff-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 28px;
  }

  .profile-card__media,
  .professional-card__media,
  .team-card__media,
  .doctor-card__media,
  .staff-card__media {
    width: 100%;
    height: 260px !important;
    min-height: 260px !important;
    overflow: hidden;
    position: relative;
  }

  .profile-card__media img,
  .professional-card__media img,
  .team-card__media img,
  .doctor-card__media img,
  .staff-card__media img,
  .profile-card img,
  .professional-card img,
  .team-card img,
  .doctor-card img,
  .staff-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  .profile-content,
  .professional-content,
  .team-card-content,
  .doctor-content,
  .staff-content {
    width: 100%;
    padding: 20px 18px 22px;
    box-sizing: border-box;
  }

  .profile-content h3,
  .professional-content h3,
  .team-card-content h3,
  .doctor-content h3,
  .staff-content h3 {
    font-size: 2rem;
    line-height: 1.08;
    margin: 0 0 10px;
    overflow-wrap: anywhere;
  }

  .profile-content p,
  .professional-content p,
  .team-card-content p,
  .doctor-content p,
  .staff-content p {
    overflow-wrap: anywhere;
  }

  /* flechas del carrusel dentro del contenedor */
  .profile-card .swiper-button-prev,
  .profile-card .swiper-button-next,
  .professional-card .swiper-button-prev,
  .professional-card .swiper-button-next,
  .team-card .swiper-button-prev,
  .team-card .swiper-button-next {
    width: 44px;
    height: 44px;
  }
}


@media (max-width: 500px) {
  .profile-card *,
  .professional-card *,
  .team-card * {
    min-height: unset;
  }

  .profile-card img,
  .professional-card img,
  .team-card img {
    position: static !important;
  }
}
































@media (max-width: 500px) {
  .about-section,
  .about,
  .quienes-somos {
    padding: 56px 0;
  }

  .about-grid,
  .about-wrapper,
  .quienes-somos-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  .about-content,
  .about-copy,
  .quienes-somos-content,
  .quienes-somos-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .about-kicker,
  .section-kicker {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }

  .about-title,
  .about h2,
  .quienes-somos h2,
  .section-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2rem, 8.6vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .about p,
  .about-copy p,
  .quienes-somos p {
    width: 100%;
    max-width: 100%;
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
  }

  .about-features,
  .feature-list,
  .quienes-somos-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .feature-item,
  .about-feature,
  .quienes-somos-feature {
    width: 100%;
    padding: 18px 18px;
    border-radius: 20px;
    box-sizing: border-box;
  }
}






@media (max-width: 500px) {
  .swiper-slide {
    height: auto !important;
  }

  .professionals-slider,
  .team-slider,
  .profile-slider {
    overflow: hidden;
  }

  .professionals-slider .swiper-wrapper,
  .team-slider .swiper-wrapper,
  .profile-slider .swiper-wrapper {
    align-items: stretch;
  }
}





.icon-contacto {
  width: 50px;
}





.business-links {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.business-links a {
      display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    border: 1px solid transparent;
      background:  var(--muted);
    color: var(--primary);
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%);
    cursor: pointer;
}

.business-links a:hover {     
      background:  var(--dark);
    color: var(--muted);
    transform: translateY(-2px);
}






















.testimonials {
  background: #f3f6fa;
}

.testimonial-slider {
  position: relative;
  margin-top: 28px;
}

.testimonial-viewport {
  overflow: hidden;
  width: 100%;
}

.testimonial-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s ease;
  will-change: transform;
}

.testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: #ffffff;
  border-radius: 28px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 40px rgba(15, 53, 84, 0.08);
  border: 1px solid rgba(13, 94, 168, 0.08);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    }

.testimonial-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-purple { background: #6b46c1; }
.avatar-blue { background: #2563eb; }
.avatar-green { background: #2f855a; }
.avatar-orange { background: #dd6b20; }
.avatar-red { background: #dc2626; }

.testimonial-meta {
  flex: 1;
  min-width: 0;
}

.testimonial-meta h3 {
  margin: 0 0 2px;
  font-size: 1rem;
  line-height: 1.2;
  color: #163a63;
  font-weight: 700;
  text-transform: uppercase;
}

.testimonial-meta span {
  display: block;
  font-size: 0.92rem;
  color: #667085;
}

.testimonial-more {
  border: none;
  background: transparent;
  color: #425466;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.testimonial-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.stars {
  color: #f4b400;
  letter-spacing: 0.08em;
  font-size: 1rem;
  line-height: 1;
}

.testimonial-time {
  font-size: 0.92rem;
  color: #667085;
}

.testimonial-card p {
  margin: 0;
  color: #243b53;
  line-height: 1.7;
  font-size: 1rem;
}

.testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #163a63;
  box-shadow: 0 12px 28px rgba(15, 53, 84, 0.14);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-arrow:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 16px 32px rgba(15, 53, 84, 0.18);
   transform: translateY(-2px);
}

.testimonial-arrow.prev {
  left: -20px;
}

.testimonial-arrow.next {
  right: -20px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.testimonial-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: rgba(13, 94, 168, 0.18);
  cursor: pointer;
  transition: all 0.25s ease;
}

.testimonial-dots button.active {
  width: 28px;
  border-radius: 999px;
  background: #7ca3c5;
}

@media (max-width: 991px) {
  .testimonial-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }

  .testimonial-arrow.prev {
    left: 8px;
  }

  .testimonial-arrow.next {
    right: 8px;
  }
}

@media (max-width: 640px) {
  .testimonial-card {
    flex: 0 0 100%;
    min-height: auto;
    border-radius: 22px;
    padding: 20px 18px;
  }

  .testimonial-meta h3 {
    font-size: 0.96rem;
  }

  .testimonial-card p {
    font-size: 0.96rem;
  }

  .testimonial-arrow {
    width: 40px;
    height: 40px;
    font-size: 1rem;
        top: 100%;

  }
}