/* ==========================================================================
   Clínica de Belleza Culiacán — estilos del sitio
   Los colores y tipografías de la marca están en :root. Para cambiar un
   color en todo el sitio, cámbialo solo aquí.
   ========================================================================== */

:root {
  /* Marca */
  --turquesa: #58dbcb;          /* color del logo */
  --turquesa-profundo: #0f7a70; /* botones y textos sobre fondo claro */
  --turquesa-oscuro: #0b5a53;   /* hover y fondos oscuros */
  --turquesa-claro: #e7f8f5;    /* fondos suaves */
  --turquesa-niebla: #f4fbfa;   /* fondo general alterno */

  /* Neutros */
  --tinta: #1c2b2a;
  --texto: #3a4a49;
  --texto-suave: #647574;
  --linea: #d9e8e6;
  --blanco: #ffffff;

  --whatsapp: #1fa855;
  --whatsapp-oscuro: #178a45;

  /* Tipografía */
  --fuente-titulos: "Poppins", system-ui, sans-serif;
  --fuente-texto: "Inter", system-ui, sans-serif;

  /* Medidas */
  --ancho: 1120px;
  --radio: 18px;
  --radio-chico: 10px;
  --sombra: 0 10px 30px rgba(15, 122, 112, 0.08);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--turquesa-profundo); }
a:hover { color: var(--turquesa-oscuro); }
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--tinta);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.seccion { padding: 80px 0; }
.seccion--suave { background: var(--turquesa-niebla); }
.seccion--oscura { background: var(--turquesa-oscuro); color: #d8f3ef; }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--turquesa-profundo);
  margin-bottom: 12px;
}
.seccion--oscura .etiqueta { color: var(--turquesa); }
.intro { font-size: 1.15rem; color: var(--texto-suave); max-width: 640px; }
.centrado { text-align: center; }
.centrado .intro { margin-left: auto; margin-right: auto; }
.nota { font-size: 0.9rem; color: var(--texto-suave); }
.nota--tabla { margin-top: 16px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  cursor: pointer;
}
.boton:hover { transform: translateY(-1px); }
.boton--whatsapp { background: var(--whatsapp); color: var(--blanco); }
.boton--whatsapp:hover { background: var(--whatsapp-oscuro); color: var(--blanco); }
.boton--principal { background: var(--turquesa-profundo); color: var(--blanco); }
.boton--principal:hover { background: var(--turquesa-oscuro); color: var(--blanco); }
.boton--borde { border-color: var(--turquesa-profundo); color: var(--turquesa-profundo); background: transparent; }
.boton--borde:hover { background: var(--turquesa-claro); }
.boton--claro { border-color: var(--blanco); color: var(--blanco); background: transparent; }
.boton--claro:hover { background: rgba(255, 255, 255, 0.12); color: var(--blanco); }
.boton svg { width: 20px; height: 20px; flex-shrink: 0; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.encabezado .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 44px; height: 44px; clip-path: circle(46%); } /* el archivo del logo trae fondo blanco */
.marca span {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.15;
  font-size: 0.95rem;
}
.marca small { display: block; font-weight: 400; color: var(--turquesa-profundo); font-size: 0.85rem; letter-spacing: 0.08em; }

.menu { display: flex; align-items: center; gap: 26px; }
.menu a {
  text-decoration: none;
  color: var(--texto);
  font-weight: 500;
  font-size: 0.95rem;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--turquesa-profundo); }
.menu .boton { padding: 10px 18px; font-size: 0.9rem; color: var(--blanco); }

.menu-boton {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--tinta);
}
.menu-boton svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .menu-boton { display: block; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    padding: 8px 20px 20px;
    box-shadow: var(--sombra);
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .menu .boton { margin-top: 14px; justify-content: center; border-bottom: 0; padding: 14px; }
}

/* ---------- Portada (hero) ---------- */
.portada { padding: 72px 0 80px; background: linear-gradient(180deg, var(--turquesa-niebla) 0%, var(--blanco) 100%); overflow: hidden; }
.portada .contenedor { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.portada .descriptor {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--turquesa-profundo);
  font-weight: 500;
  margin-bottom: 18px;
}
.portada p.intro { margin-bottom: 0; }
.portada--servicio { padding: 56px 0 64px; }
.portada--servicio h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); }
.miga { font-size: 0.9rem; color: var(--texto-suave); margin-bottom: 16px; }
.miga a { color: var(--texto-suave); }

@media (max-width: 860px) {
  .portada .contenedor { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Fotos pendientes ----------
   Mientras no haya fotos reales se muestra este recuadro. Para poner una
   foto, reemplaza el <div class="foto-pendiente"> por:
   <img class="foto" src="img/archivo.jpg" alt="Descripción" loading="lazy">
*/
.foto, .foto-pendiente {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
  object-fit: cover;
}
.foto-pendiente {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(145deg, var(--turquesa) 0%, var(--turquesa-profundo) 100%);
  overflow: hidden;
  color: var(--blanco);
}
.foto-pendiente::before {
  content: "";
  position: absolute;
  inset: 18% 14% auto auto;
  width: 46%;
  aspect-ratio: 1;
  background: url("../img/logo.webp") center / contain no-repeat;
  opacity: 0.25;
  filter: brightness(2);
  border-radius: 50%;
}
.foto-pendiente span {
  position: relative;
  margin: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
}
.foto--ancha, .foto-pendiente.foto--ancha { aspect-ratio: 16 / 10; }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; gap: 24px; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .rejilla--3, .rejilla--2 { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 30px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}
.tarjeta h3 { margin-bottom: 8px; }
.tarjeta p:last-of-type { margin-bottom: 0; }
.tarjeta .enlace {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--fuente-titulos);
}
.tarjeta .enlace::after { content: " →"; }
.tarjeta--destacada { border: 2px solid var(--turquesa); }
.precio-desde { font-family: var(--fuente-titulos); color: var(--turquesa-profundo); font-weight: 600; margin-bottom: 10px; }

.icono {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--turquesa-claro);
  color: var(--turquesa-profundo);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.icono svg { width: 28px; height: 28px; }

.encabezado-seccion { margin-bottom: 44px; }

/* ---------- Pasos numerados ---------- */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.pasos li { counter-increment: paso; position: relative; padding-top: 64px; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--turquesa);
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } }

/* Lista de protocolo (14 pasos) */
.protocolo { list-style: none; counter-reset: p; padding: 0; margin: 0; columns: 2; column-gap: 40px; }
.protocolo li { counter-increment: p; break-inside: avoid; padding: 10px 0 10px 46px; position: relative; border-bottom: 1px solid var(--linea); }
.protocolo li::before {
  content: counter(p);
  position: absolute;
  left: 0;
  top: 9px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--turquesa-claro);
  color: var(--turquesa-profundo);
  font-weight: 600;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
@media (max-width: 700px) { .protocolo { columns: 1; } }

/* Lista con palomitas */
.palomitas { list-style: none; padding: 0; margin: 0 0 1em; }
.palomitas li { position: relative; padding-left: 32px; margin-bottom: 10px; }
.palomitas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--turquesa-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Dos columnas texto + imagen ---------- */
.dividido { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dividido--invertido > :first-child { order: 2; }
@media (max-width: 860px) {
  .dividido { grid-template-columns: 1fr; gap: 32px; }
  .dividido--invertido > :first-child { order: 0; }
}

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.cifra { background: var(--blanco); border-radius: var(--radio-chico); padding: 20px; border: 1px solid var(--linea); }
.cifra strong { display: block; font-family: var(--fuente-titulos); font-size: 1.6rem; color: var(--turquesa-profundo); line-height: 1.1; }
.cifra span { font-size: 0.9rem; color: var(--texto-suave); }
.cifras--2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (max-width: 860px) { .cifras { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tablas de precios ---------- */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
thead th {
  background: var(--turquesa-claro);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--tinta);
  font-size: 0.9rem;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: var(--turquesa-niebla); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.destacado { font-weight: 600; color: var(--turquesa-profundo); }

.tablas-zonas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .tablas-zonas { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tablas-zonas th, .tablas-zonas td { padding: 11px 9px; font-size: 0.88rem; }
  .tablas-zonas td:first-child, .tablas-zonas th { white-space: normal; }
  .tablas-zonas th:first-child, .tablas-zonas td:first-child { padding-left: 14px; }
}

/* Tabla comparativa de faciales */
.comparativa th:first-child, .comparativa td:first-child {
  position: sticky;
  left: 0;
  background: var(--blanco);
  z-index: 1;
  white-space: normal;
  min-width: 170px;
}
.comparativa thead th:first-child { background: var(--turquesa-claro); }
.comparativa thead th { white-space: normal; text-align: center; min-width: 120px; vertical-align: bottom; }
.comparativa td { text-align: center; }
.comparativa td:first-child { text-align: left; }
.comparativa .si {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--turquesa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
  vertical-align: middle;
}
.comparativa .no { color: #b9c7c5; }
.comparativa tr.fila-precio td { font-family: var(--fuente-titulos); font-weight: 600; color: var(--turquesa-profundo); font-size: 1.05rem; }
.comparativa tr.fila-total td { font-weight: 600; background: var(--turquesa-niebla); }

/* ---------- Combos ---------- */
.combo { text-align: center; }
.combo .zonas { font-family: var(--fuente-titulos); font-size: 1.25rem; color: var(--tinta); font-weight: 600; margin-bottom: 6px; }
.combo .precio { font-family: var(--fuente-titulos); font-size: 2rem; color: var(--turquesa-profundo); font-weight: 600; line-height: 1.2; }
.combo .detalle { color: var(--texto-suave); font-size: 0.92rem; margin-top: 8px; }

/* ---------- Programa (precio grande) ---------- */
.precio-programa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0; }
@media (max-width: 860px) { .precio-programa { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Aviso ---------- */
.aviso {
  border-left: 4px solid var(--turquesa);
  background: var(--turquesa-niebla);
  padding: 20px 24px;
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  margin: 28px 0;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso strong { color: var(--tinta); }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { max-width: 800px; margin: 0 auto; }
.preguntas details {
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  margin-bottom: 12px;
  padding: 0 22px;
}
.preguntas summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 30px 18px 0;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  color: var(--tinta);
  position: relative;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--turquesa-profundo);
  font-weight: 400;
}
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { padding-bottom: 6px; }

/* ---------- Llamado a la acción ---------- */
.llamado { text-align: center; }
.llamado .contenedor { max-width: 760px; }
.llamado .botones { justify-content: center; }
.llamado .marca { justify-content: center; margin-bottom: 32px; }

/* ---------- Contacto ---------- */
.contacto-datos { list-style: none; padding: 0; margin: 0 0 24px; }
.contacto-datos li { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.contacto-datos svg { width: 22px; height: 22px; color: var(--turquesa-profundo); flex-shrink: 0; margin-top: 3px; }
.contacto-datos strong { display: block; color: var(--tinta); font-family: var(--fuente-titulos); font-weight: 500; }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radio); box-shadow: var(--sombra); }

/* ---------- Pie de página ---------- */
.pie { background: var(--tinta); color: #b8c8c6; padding: 56px 0 28px; font-size: 0.95rem; }
.pie a { color: #d8f3ef; text-decoration: none; }
.pie a:hover { color: var(--turquesa); }
.pie .rejilla-pie { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pie h4 { color: var(--blanco); font-size: 1rem; margin-bottom: 14px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 8px; }
.pie .marca span { color: var(--blanco); }
.pie .marca small { color: var(--turquesa); }
.pie-descriptor { margin-top: 16px; }
.pie .legal { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 22px; font-size: 0.85rem; color: #8fa3a1; }
.redes { display: flex; gap: 12px; margin-top: 18px; }
.redes a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); display: grid; place-items: center; }
.redes a:hover { background: var(--turquesa-profundo); }
.redes svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .pie .rejilla-pie { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--blanco);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.whatsapp-flotante:hover { transform: scale(1.06); color: var(--blanco); }
.whatsapp-flotante svg { width: 32px; height: 32px; }

/* Accesibilidad */
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--blanco); padding: 10px 16px; z-index: 100; }
.saltar:focus { left: 10px; top: 10px; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .seccion { padding: 60px 0; }
  .contenedor { padding: 0 16px; }
  .tarjeta { padding: 24px; }
}