:root{
  --brand: #22D9DA;
  --brand-dark: #178183;
  --text: #0E2A2B;
  --bg: #F7FDFC;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--brand-dark);text-decoration:none}
.container{max-width:1100px;margin:auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:var(--shadow)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:12px;align-items:center;color:var(--text);font-weight:600}
.brand img{width:38px;height:38px;border-radius:50%}
.site-header nav{display:flex;gap:20px;align-items:center}
.site-header nav a{padding:8px 10px;border-radius:10px}
.site-header nav a:hover{background:rgba(0,0,0,.04)}
.site-header .btn{background:var(--brand);color:var(--text);font-weight:600}
.site-header .btn:hover{filter:brightness(.95)}
.nav-toggle{display:none;border:0;background:none;font-size:28px;cursor:pointer}

.hero{padding:72px 0;background:linear-gradient(180deg, rgba(34,217,218,.12), transparent)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(32px,3.5vw,48px);margin:0 0 10px 0;line-height:1.1}
.hero p{font-size:18px;opacity:.9;max-width: 38em;}
@media (max-width: 500px) {
  .hero p {
    font-size: 1.13em;
    max-width: 98vw;
    line-height: 1.18;
    margin-bottom: 0.7em;
  }
}
@media (max-width: 430px) {
  .hero-copy p {
  font-size: 0.98em;
  max-width: 100vw;
  line-height: 1.01;
  margin-bottom: 0.7em;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-clamp: 2;
  }
}
@media (max-width: 400px) {
  .hero-copy p {
    font-size: 1.13em;
    max-width: 100vw;
    line-height: 1.05;
    margin-bottom: 0.7em;
    letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-clamp: 2;
  }
}
@media (max-width: 390px) {
  .hero-copy p {
    font-size: 1.09em;
    max-width: 100vw;
    line-height: 1.03;
    margin-bottom: 0.7em;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 380px) {
  .hero-copy p {
    font-size: 1.01em;
    max-width: 100vw;
    line-height: 1.01;
    margin-bottom: 0.7em;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 360px) {
  .hero-copy p {
    font-size: 0.97em;
    max-width: 100vw;
    line-height: 1.01;
    margin-bottom: 0.7em;
    letter-spacing: -0.01em;
  }
}
.cta-group{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1.5px solid var(--brand);cursor:pointer;transition:.2s}
.btn-primary{background:var(--brand);border-color:var(--brand);}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent}
.badges{display:flex;gap:14px;list-style:none;padding:0;margin:16px 0 0 0;flex-wrap:wrap;opacity:.9}
.hero-media img{border-radius:16px;box-shadow:var(--shadow)}

.section{padding:75px}
.section.alt{background:#ffffff;}

.lead{opacity:.9;margin-top:-6px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card{background:#fff;border:1px solid #e8efef;border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px 0}

.about{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:center}
.about-media img{width:120px;height:120px;border-radius:999px;border:4px solid var(--brand)}
.checklist{list-style:none;padding:0;margin:12px 0 0 0}
.checklist li::before{content:'✔';margin-right:8px;color:var(--brand-dark)}
.checklist li{margin:8px 0;opacity:.95}

.contact .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:start}
.map-wrap iframe{width:100%;min-height:300px;border:0;border-radius:12px;box-shadow:var(--shadow)}

.site-footer{padding:28px 0;background:#fff;border-top:1px solid #e8efef;text-align:center}

@media (max-width: 900px){
  .hero-grid, .cards, .about, .contact .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 620px){
  .site-header nav{display:none;position:absolute;right:12px;top:64px;background:#fff;padding:10px;border:1px solid #eaeaea;border-radius:12px;box-shadow:var(--shadow);flex-direction:column;gap:8px;min-width:180px}
  .site-header nav.open{display:flex}
  .nav-toggle{display:block}
}

.btn-primary {
    background: #22d9da; /* azul */
    border-color: #22d9da;
    color: #000000; /* texto blanco */
}

.btn-primary:hover {
    background: #22D9DA; /* azul más oscuro al pasar el ratón */
    border-color: #22D9DA;
    color: #ffffff;
}

/* Sección Sobre mí */
.about {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;  /* ajusta el reparto si quieres empujarla aún más */
  gap: 70px;                            /* espacio entre foto y texto */
  align-items: center;                   /* centra verticalmente */
}

.about-media { 
  justify-self: end;                     /* pega la imagen al borde derecho de su columna */
}

.about-media img {
  width: 240px;                          /* >>> más grande (prueba 260–280 si quieres) */
  height: 240px;
  object-fit: cover;                     /* recorte elegante dentro del círculo */
  border-radius: 999px;
  border: 6px solid var(--brand);
  box-shadow: var(--shadow);
  margin-top: 30px;
}

/* En móvil, que no quede gigantesca */
@media (max-width: 900px){
  .about { grid-template-columns: 1fr; gap: 18px; }
  .about-media { justify-self: center; }
  .about-media img { width: 180px; height: 180px; }
}
.contact-title {
    border-bottom: 3px solid #00bfa5; /* Color turquesa corporativo */
    padding-bottom: 5px; /* Separación entre texto y línea */
    display: inline-block; /* Línea solo del ancho del texto */
}

/* Reseñas */
.reviews-title{
  border-bottom: 3px solid var(--brand);
  padding-bottom: 6px;
  display: inline-block;
  margin-bottom: 14px;
}

.reviews .reviews-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.review-card{
  background:#fff;
  border:1px solid #e8efef;
  border-radius:14px;
  padding:16px 18px;
  box-shadow: var(--shadow);
}

.review-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.review-name{
  font-weight:700;
  color: var(--text);
}

.review-date{
  font-size: 0.95rem;
  opacity:.75;
}

.review-stars{
  line-height:1;
  margin: 4px 0 10px;
  letter-spacing: 2px;
}
.review-stars span{
  font-size: 18px;
  color: var(--brand);          /* estrellas en turquesa corporativo */
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
}

.review-text{
  margin:0;
  color: var(--text);
  opacity:.95;
}

/* Responsive */
@media (max-width: 900px){
  .reviews .reviews-list{ grid-template-columns:1fr; }
}

/* Ajuste de la sección concretar cita en móviles */
@media (max-width: 600px) {
  #reservar p {
    font-size: 1em; /* Más pequeño */
    white-space: nowrap; /* Evita que se divida */
  }

  #reservar .container {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
}

/* Concretar cita: layout en móvil (apilado) */
@media (max-width: 600px){
  #reservar .container{
    display: flex;
    flex-direction: column;     /* uno debajo del otro */
    align-items: center;        /* centrados */
    justify-content: center;
    gap: 12px;
    text-align: center;
  }
  #reservar p{
    font-size: 1rem;
    margin: 0 !important;
    margin-left: 0 !important;  /* por si quedaba inline */
    white-space: normal;        /* que pueda partir línea */
  }
  #reservar a{
    width: 100%;
    max-width: 320px;           /* botón ancho cómodo */
    text-align: center;
  }
}


/* ---------- MOBILE TUNING (añadir al final) ---------- */

/* Mejor equilibrio de títulos en cualquier tamaño */
h1, h2 { text-wrap: balance; }

/* ≤ 900px: tablet / móviles grandes */
@media (max-width: 900px){
  .section{ padding: 48px 0; }                 /* menos aire entre secciones */
  .hero{ padding: 56px 0; }
  .hero h1{ font-size: clamp(28px, 6vw, 36px); }
  .hero p{ font-size: 16px; line-height: 1.5; }
  .cta-group{ gap: 10px; }

  .cards{ grid-template-columns: 1fr 1fr; }    /* 2 columnas */
  .card{ padding: 14px; }
  .card h3{ font-size: 1.1rem; }
  .card p{ font-size: .98rem; line-height: 1.5; }

  .about{ grid-template-columns: 1fr; gap: 20px; }
  .about-media{ justify-self: center; }
  .about-media img{ width: 180px; height: 180px; margin-top: 8px; }

  .contact .contact-grid{ grid-template-columns: 1fr; gap: 16px; }
  .map-wrap iframe{ min-height: 260px; }

  .reviews .reviews-list{ grid-template-columns: 1fr; }
}

/* ≤ 600px: móvil */
@media (max-width: 600px){
  .container{ padding: 0 16px; }
  .section{ padding: 36px 0; }                 /* aún más compacto */
  .hero{ padding: 44px 0; }
  .hero h1{ font-size: clamp(24px, 8vw, 30px); }
  .hero p, .lead, p{ font-size: 15px; line-height: 1.55; }
  .badges{ gap: 10px; }
  .badges li{ font-size: .95rem; }

  .cards{ grid-template-columns: 1fr; }        /* 1 columna */
  .card h3{ font-size: 1.06rem; }
  .card p{ font-size: .96rem; }

  .about-copy .lead{ font-size: 1rem; }
  .contact-title, .reviews-title{ margin-bottom: 10px; }

  /* Marca / navegación más compacta */
  .site-header .nav{ height: 58px; }
  .brand img{ width: 30px; height: 30px; }
  .brand span{ font-size: 1rem; }
  .btn, a.btn{ padding: 10px 14px; font-size: .95rem; }

  /* Bloque "Concretar cita": texto arriba y botón debajo, centrados */
  #reservar .container{
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:12px; text-align:center;
  }
  #reservar p{
    margin:0 !important; white-space:normal;    /* que pueda partir en 1–2 líneas */
    font-size: 1rem;
  }
  #reservar a{
    width:100%; max-width:320px; text-align:center;
  }
}

/* Menos espacio arriba de servicios */
#servicios {
  margin-top: 20px;
}

/* Icono bajo cada servicio */
.service-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px 0 12px;
  color: var(--brand-dark);              /* color del trazo/relleno */
}
.service-icon svg{
  width:56px; height:56px;
}

/* Ajustes visuales de las tarjetas para que respiren con iconos */
.card h3{ margin:6px 0 6px 0; }
.card p{ margin:0; }

/* Responsive: iconos y columnas */
@media (max-width: 900px){
  .cards{ grid-template-columns: repeat(2,1fr); }
  .service-icon svg{ width:52px; height:52px; }
}
@media (max-width: 620px){
  .cards{ grid-template-columns: 1fr; }
  .service-icon svg{ width:48px; height:48px; }
}

.service-icon img {
  width: 64px; /* Ajusta este valor según tus necesidades */
  height: auto;
}

.contact-grid svg {
  color: var(--brand);
  fill: currentColor;
}

@media (max-width: 320px) {
  .hero-copy p {
    font-size: 1.01em;
    max-width: 95vw;
    line-height: 1.15;
    letter-spacing: -0.01em;
    word-break: break-word;
    margin-bottom: 0.7em;
  }
}

/* iPhone 12 Pro: 390px de ancho, forzar máximo 2 líneas en el párrafo hero */
@media (max-width: 390px) and (min-width: 375px) {
  .hero-copy p {
    font-size: 1.01em;
    max-width: 100vw;
    line-height: 1.05;
    margin-bottom: 0.7em;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* Forzar máximo 2 líneas en el párrafo hero en móviles */
@media (max-width: 600px) {
  .hero-copy p {
    font-size: 0.95rem;              /* tamaño controlado */
    line-height: 1.3;                /* altura justa para 2 líneas */
    margin-bottom: 0.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}