:root{
  --azul-oscuro:#0076B6;
  --azul-marina:#4AB6A4;
  --azul:#0076B6;
  --azul-hover:#4AB6A4;
  --azul-50:#eff6ff;
  --gris-50:#f8fafc;
  --gris-100:#f1f5f9;
  --gris-200:#e2e8f0;
  --gris-700:#334155;
  --gris-800:#1f2937;
  --blanco:#ffffff;
  --negro:#0f172a;
  --verde:#22c55e;
  --verde-oscuro:#16a34a;
  --sombra:0 10px 20px rgba(2,10,28,.08);
  --sombra-2:0 14px 28px rgba(2,10,28,.14);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:22px;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#1f2937;background:#fff;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Utilities */
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.btn{display:inline-block;padding:.75rem 1.25rem;border-radius:999px;font-weight:600;transition:.2s box-shadow,.2s transform,.2s background}
.btn-primary{background:var(--azul);color:#fff;box-shadow:var(--sombra)}
.btn-primary:hover{background:var(--azul-hover);transform:translateY(-1px)}
.btn-dark{background:var(--azul-oscuro);color:#fff;box-shadow:var(--sombra)}
.btn-dark:hover{background:var(--azul-marina)}
.btn-green{background:var(--verde);color:#fff}
.btn-green:hover{background:var(--verde-oscuro)}

.shadow{box-shadow:var(--sombra)}
.shadow-2{box-shadow:var(--sombra-2)}
.rounded{border-radius:var(--radius)}
.rounded-sm{border-radius:var(--radius-sm)}
.rounded-lg{border-radius:var(--radius-lg)}
.grid{display:grid;gap:2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.grid-3,.grid-2{grid-template-columns:1fr}}


/* ------------------------------------------------------------------------------------------------------ Header */
header{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);z-index:50;transition:all .3s}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;position:relative}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:48px}
.brand .logo-text{font-weight:400;letter-spacing:.2px;font-size:1.8rem;display:flex;gap:.35rem;align-items:center}
.brand .logo-text .odontologia{font-family:'OptiFuturaDemiBold',sans-serif;color:var(--azul-oscuro)}
.brand .logo-text .dental-center{font-family:'RobotoRegular',sans-serif;color:var(--azul-marina)}

.menu{display:flex;gap:2rem;align-items:center}
.menu a{font-weight:500;color:#0f172a;opacity:.9;transition:color .3s}
.menu a:hover{color:var(--azul)}
.menu a.btn{padding:.35rem .75rem;font-size:.85rem;font-weight:600;background:var(--azul);color:#fff;border-radius:4px;transition:background .3s}
.menu a.btn:hover{background:var(--azul-oscuro)}
.menu-btn{display:none;background:none;border:none;color:var(--azul-oscuro);font-size:24px;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .3s;position:absolute;right:1rem;top:1.5rem;z-index:1001}
.menu-btn:hover{background-color:rgba(0,0,0,0.05)}
.menu-btn i{font-size:1.5rem}
/* Boton agendar */
.menu a.btn{
  padding:.35rem .75rem;   /* más pequeño y justo */
  font-size:.85rem;        /* tipografía más compacta */
  font-weight:600;
  background:var(--azul);  /* color institucional */
  color:#fff;
  border-radius:4px;       /* esquinas suaves */
  transition:background .3s;}
.menu a.btn:hover{background:var(--azul-oscuro)}

@media (max-width:900px){
.nav{flex-direction:column;align-items:center}
.brand{flex-direction:column;justify-content:center;align-items:center;text-align:center}
.brand img{height:60px} /* 👈 Logo más grande en móvil */
@media (max-width:900px){
  .brand img{
    height:40px; /* 👈 Logo más grande en móvil */
  }

  .brand .logo-text{
    font-weight:400;
    letter-spacing:.2px;
    font-size:1.8rem;
    display:flex;
    flex-direction:column;   /* 👈 texto en columnas (Odontología arriba, Dental Center abajo) */
    align-items:center;
    text-align:center;
    gap:.2rem;
  }

  .brand .logo-text .odontologia{
    display:block;
    font-size:1rem;
    line-height:0.7;
  }

  .brand .logo-text .dental-center{
    display:block;
    font-size:0.8rem;
    line-height:1.2;
  }
}

.menu{display:none;position:fixed;top:70px;left:0;width:100%;background:#f8fafc;flex-direction:column;padding:20px;gap:15px;box-shadow:0 5px 15px rgba(0,0,0,0.1);clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .4s ease-in-out;z-index:1000}
.menu.active{display:flex;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.menu a{width:100%;text-align:center;padding:12px;color:#1f2937;opacity:1}
.menu a.btn{background:var(--azul);color:#fff;margin-top:10px}
.menu a.btn:hover{background:var(--azul-oscuro)}
.menu-btn{display:block}
#mobile-menu{display:none}
#mobile-menu.open{display:block}
}

#mobile-menu{background:#fff;border-top:1px solid var(--gris-200);box-shadow:0 10px 18px rgba(0,0,0,.06)}
#mobile-menu .stack{display:flex;flex-direction:column;padding:1rem 1.25rem;gap:1rem}
#mobile-menu .stack a{padding:.25rem 0;color:#0f172a}
#mobile-menu .stack .cta{margin-top:.5rem;text-align:center}

.cubo.azul       { border-color: #0076B6; } 
.cubo.aguamarina { border-color: #4AB6A4; }  


/* ------------------------------------------------------------------------------------------------------ Seccion 1 */
/* Hero */
#inicio{min-height:100vh;padding-top:64px;display:flex;align-items:stretch;justify-content:center;background:linear-gradient(180deg,#e4f5ff 0%,#ffffff 95%)}
.hero{display:flex;gap:2rem;align-items:stretch;justify-content:center;padding:2rem 0}
.hero-left{flex:1;backdrop-filter:saturate(120%) blur(6px);padding:0rem;border-radius:var(--radius);border:0px solid var(--gris-200)}
.hero-right{flex:1;display:none;align-items:center;justify-content:center}
@media (min-width:1024px){.hero-right{display:flex}}


/* Chat */
.chat{display:flex;flex-direction:column;height:100%}
.chat-box{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.75rem;
  overflow-y:auto;
  padding:1rem;
  border-radius:var(--radius);
  border:1px solid var(--gris-200);
  background:#fff;
  max-height: 800px; /* Solo añade esta línea */
}
.bubble{max-width:75%;padding:.6rem .9rem;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);font-size:.95rem;line-height:1.4}
.bubble.api{background:#dbeafe;color:#1e3a8a;align-self:flex-start}
.bubble.user{background:var(--azul);color:#fff;align-self:flex-end}

/* Input + botón de enviar */
.chat-input{display:flex;margin-top:1rem}
.chat-input input{
  flex:1;
  padding:.85rem 1rem;
  border:1px solid var(--gris-200);
  border-right:0;
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
  outline:none;
}
.chat-input button{
  padding:.85rem 1.2rem;
  border:0;
  background:var(--azul);
  color:#fff;
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
  cursor:pointer;
  transition:background .2s ease-in-out;
}
.chat-input button:hover{background:var(--azul-hover)}

/* ==== Efecto Escribir ==== */
.bubble.typing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 36px;
  height: 24px;
  padding: 4px 8px;
  background: #f1f1f1;
  border-radius: 16px;
}
.typing span {
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background: #555;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.3s infinite;
}
.typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------------------------------------------ Seccion 1-2 */
/* Lienzo */
.hero-right {
  flex: 1;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;

  /* MISMO DISEÑO DEL CHAT */
  background: #fff;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
  box-shadow: var(--sombra);

  /* La altura se iguala automáticamente por flex */
  overflow: hidden; /* permite que la imagen sangre dentro */
}

@media (min-width:1024px){
  .hero-right {
    display: flex;
  }
}


/* ============================================================= */
/*                    HERO RIGHT - LIENZO SIN BOTÓN              */
/* ============================================================= */

.lienzo-contenido img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  animation: fadeIn .6s ease forwards;
  opacity: 0;
}

.lienzo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 2rem;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.28),
    rgba(0,0,0,0)
  );

  color: #fff;
  text-shadow: 0 4px 14px rgba(0,0,0,0.55);
  animation: fadeIn .7s ease forwards;
}

.lienzo-overlay h3 {
  margin: 0 0 .4rem;
  font-size: 1.8rem;
  font-weight: 800;
}

.lienzo-overlay p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  opacity: .95;
}

@keyframes fadeIn {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

.lienzo-contenido {
  width: 100%;
  height: 100%;
  position: relative;   /* 👈 ESTA ES LA CLAVE */
  overflow: hidden;
}


/* ------------------------------------------------------------------------------------------------------ Seccion 2 */
/* ==== Titulo ==== */
section{scroll-margin-top:96px}
.section{padding:4rem 0} /* Reducir padding de sección */
.title-wrap{text-align:center;margin-bottom:2rem} /* Menos margen inferior */
.title{font-weight:800;color:var(--azul-oscuro);font-size:clamp(1.8rem,2.2vw,2.4rem);margin:0 0 .5rem}
.lead{color:#475569;max-width:700px;margin:0 auto}

/* ==== Tarjetas Compactas ==== */
.card{
  padding:1.5rem; /* Menos padding interno */
  border-radius:var(--radius);
  box-shadow:var(--sombra);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}

.card.dark{
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, #005c89 100%);
  color:#fff;
}
.card.marina{
  background: linear-gradient(135deg, var(--azul-marina) 0%, #379485 100%);
  color:#fff;
}

.card h3{margin:0 0 .4rem;font-size:1.1rem} /* Menos margen, texto más compacto */
.card p{margin:.4rem 0 .8rem; line-height:1.4} /* Menos margen, línea más compacta */
.card .link{display:inline-flex;gap:.5rem;align-items:center;font-weight:600}

/* Grid más pegado */
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; /* Menos espacio entre tarjetas */
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .grid-3 {grid-template-columns: repeat(2, 1fr);gap: 0.8rem;}}
@media (max-width: 768px) {
  .grid-3,.grid-2 {grid-template-columns: 1fr;gap: 0.8rem;}}

/* ------------------------------------------------------------------------------------------------------ Seccion 3 */
/* ==== Prótesis Dentales ==== */
.instagram-post {
  width: 100%;
  max-width: 470px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Contenedor del slider */
.slider-container {
  position: relative;
  width: 100%;
  height: 470px;
  overflow: hidden;
  touch-action: pan-y;
}
.slides-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}
.slides-wrapper.dragging {
  transition: none;
  cursor: grabbing;
}
.slide {
  flex: 0 0 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* Texto debajo del slider */
.instagram-post .p-4 {
  border-top: 1px solid #dbdbdb;
  padding: 14px 16px;
  font-size: 14px;
  color: #262626;
  line-height: 1.5;
}
.instagram-post .p-4 h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}
.instagram-post .p-4 p {
  margin: 0 0 8px;
  font-size: 14px;
  color: #333;
}
.instagram-post .p-4 a {
  font-size: 13px;
  font-weight: 600;
  color: #0076B6;
  text-decoration: none;
}
.instagram-post .p-4 a:hover {
  text-decoration: underline;
}


/* ------------------------------------------------------------------------------------------------------ Seccion 4 */
/* Equipo */
#equipo .instagram-post {
  max-width: 1300px;     /* ancho limitado como el resto */
  margin: 0 auto;        /* centrado */
  border: 1px solid #dbdbdb;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  background: #fff;
}

/* Slider con altura controlable */
#equipo .slider-container {
  position: relative;
  width: 100%;
  height: 650px;         /* 👈 altura manual ajustable */
  overflow: hidden;
}
@media (max-width: 1024px) {
  #equipo .slider-container {
    height: 420px;       /* 👈 más bajo en pantallas medianas */
  }
}
@media (max-width: 768px) {
  #equipo .slider-container {
    height: 300px;       /* 👈 compacto en móvil */
  }
}

#equipo .slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* mantiene proporción tipo banner */
  overflow: hidden;
  border-radius: var(--radius);
}
#equipo .slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
#equipo .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto */
#equipo .banner-text {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  right: 1.2rem;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.5);
  padding: 1rem 1.2rem;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
#equipo .banner-text h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); /* 👈 más pequeño */
  font-weight: 700;
}
#equipo .banner-text p {
  margin-top: .4rem;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem); /* 👈 más compacto */
}



/* ------------------------------------------------------------------------------------------------------ Seccion 5 */
/* Cita */
#cita {
  background: linear-gradient(180deg, var(--azul-oscuro) 0%, #006da8 100%);
  color: #fff;
}
.cita-wrap {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  display: flex;
  flex-direction: column;
}
.cita-left {
  background: linear-gradient(180deg, var(--azul-marina) 0%, #3fa493 100%);
  color: #fff;
  padding: 2.5rem;
}
.cita-left h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.cita-left p {
  margin: 0 0 1rem;
  line-height: 1.5;
}
.cita-left .contact-info {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cita-left .row {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.cita-left .ico {
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.2);
  padding: .5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cita-left strong {
  font-size: 1rem;
  display: block;
}
.cita-left .small {
  font-size: .9rem;
  opacity: .9;
  margin: 0;
}
.cita-right {
  padding: 2.5rem;
}
.form-input {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--gris-200);
  border-radius: 12px;
}
.form-group {
  margin-bottom: 1rem;
}


/* ------------------------------------------------------------------------------------------------------ Seccion 6 */
/* Contacto */
#contacto{background:linear-gradient(90deg,#eff6ff 0%,#ffffff 100%)}
.map-wrap{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--sombra)}
.map-actions{display:flex;justify-content:space-around;padding:.9rem}
.contact-card{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:var(--sombra)}
.row{display:flex;gap:1rem;align-items:flex-start}
.ico{background:#dbeafe;padding:.8rem;border-radius:999px;color:var(--azul)}
.wapp{background:#dcfce7;color:#16a34a}

/* ------------------------------------------------------------------------------------------------------ Seccion 7 */
/* Ubicación */
.btn.btn-green.btn-ws{
  display:inline-flex; align-items:center; gap:8px;
  background:#25D366; border:1px solid #1fb256;
  color:#fff; padding:.4rem .65rem; font-weight:600; font-size:.95rem;
  border-radius:10px; line-height:1; text-decoration:none;
}
.btn.btn-green.btn-ws i{ font-size:18px; line-height:1; }
.btn.btn-green.btn-ws:hover{ filter:brightness(1.05); }


  .contact-card{ 
    background:#fff; 
    border:1px solid var(--gris-200); 
    border-radius:16px; 
    padding:20px 22px; 
    box-shadow:0 6px 18px rgba(2,8,23,.06);
  }
  .contact-title{
    margin:0 0 .75rem 0; 
    color:var(--azul-oscuro);
    font-weight:800; 
    font-size:1.25rem; 
    letter-spacing:.2px;
  }
  .contact-item{ 
    display:flex; 
    align-items:flex-start; 
    gap:12px; 
    padding:12px 0; 
    border-top:1px dashed var(--gris-200);
  }
  .contact-item:first-of-type{ border-top:none; }

  .contact-icon{ 
    flex:0 0 42px; width:42px; height:42px; 
    border-radius:9999px; 
    display:flex; align-items:center; justify-content:center; 
    background:var(--azul-50); 
    color:var(--azul-oscuro);
    font-size:18px; 
  }
  .contact-icon.is-accent{ background:var(--azul-600); color:#ffffff; 
  }
  .contact-body strong{ color:var(--gris-900); display:block; margin-bottom:2px; 
  }
  .contact-body p{ color:var(--gris-700); margin:.125rem 0; 
  }
  .btn{ 
    display:inline-flex; align-items:center; justify-content:center; 
    padding:.55rem .9rem; border-radius:9999px; 
    text-decoration:none; font-weight:600; 
    border:1px solid transparent; transition:.2s ease;
  }
  .btn-green{ 
    background:var(--verde-600); color:#fff; 
    box-shadow:0 6px 14px rgba(22,163,74,.22);
  }
  .btn-green:hover{ filter:brightness(1.05); transform:translateY(-1px); }
  @media (max-width: 640px){
    .contact-card{ padding:16px; border-radius:14px; }
  }


/* ------------------------------------------------------------------------------------------------------ Seccion 8 */
/* footer */
footer{
  position:relative;
  background:var(--azul-oscuro);
  color:#fff;
  text-align:center;
  padding:1.25rem;
}
footer .supersalud-logo{
  position:absolute;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  height:80px;
  width:auto;
}
/* Contador en footer */
  .contador-footer {
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.8); /* discreto en blanco */
    font-weight: 500;
  }
@media (max-width: 640px){
  footer{
    /* sin reserva a la derecha; un poco más de aire abajo */
    padding-right:1.25rem;
    padding-bottom:3.5rem;
  }
  footer .supersalud-logo{
    /* quita absoluto y centra */
    position:static;
    transform:none;
    display:block;
    margin:12px auto 0;
    height:56px; /* más pequeño en móvil */
    width:auto;
  }
}
@media (min-width: 641px) and (max-width: 960px){
  footer .supersalud-logo{ height:68px; }
}


/* ------------------------------------------------------------------------------------------------------ Seccion 9 */
/* Boton Flotante */
#openChatBtn{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:60;
  background:var(--azul);
  color:#fff;
  border:0;
  padding:.85rem 1.1rem;
  border-radius:999px;
  box-shadow:var(--sombra);
  cursor:pointer;
}
#openChatBtn:hover{background:var(--azul-hover)}
@media (max-width: 768px) {

  /* Ajustar héroe */
  .hero {
    flex-direction: column;   /* chat arriba, imagen abajo */
    gap: 1rem;
  }

  .hero-left {
    min-height: 60vh;         /* ocupa buena parte de la pantalla */
    padding: 1rem;
  }

  .hero-right {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  /* Chat */
  .chat-box {
    max-height: 50vh;         /* no más de media pantalla */
    font-size: .9rem;         /* letras más compactas */
  }

  .bubble {
    max-width: 100%;          /* burbujas más anchas */
    font-size: .9rem;
  }

  .chat-input input {
    font-size: .9rem;
  }
  .chat-input button {
    font-size: .9rem;
    padding: .7rem 1rem;
  }

  /* Tarjetas de servicios */
  .grid-3 {
    grid-template-columns: 1fr; /* todas en una columna */
  }

  /* Footer */
  footer {
    font-size: .85rem;
    padding: 1rem;
  }
}