/* =========================================================================
 * Página /dental-implants/ — piezas propias de esta página.
 * Todo lo demás (cabecera, hero, formulario, pasos, pie) viene de estilo.css
 * y usa sus mismos tokens: aquí no se define un color ni una fuente nuevos.
 * ========================================================================= */

/* Migas de pan: visibles, pequeñas, encima del titular */
/* El lado izquierdo del hero es claro (el velo funde la foto a blanco): texto oscuro */
.migas{font-size:.85rem;color:var(--gris);margin:0 0 10px}
.migas a{color:var(--primario);text-decoration:underline;text-underline-offset:2px}
.migas span[aria-hidden]{margin:0 6px;opacity:.7}

/* "Desde" junto al precio: son precios por paso, no el tratamiento completo */
.nota-desde{font-size:.88rem;color:var(--gris);margin:10px 0 0;max-width:520px;line-height:1.5}

/* Respuesta directa: el primer párrafo que leen el paciente y los buscadores */
.respuesta{
  background:var(--papel);border-left:4px solid var(--primario);border-radius:var(--r);
  box-shadow:var(--sombra);padding:22px 24px;margin:0 auto 34px;max-width:860px;
  font-size:1.08rem;line-height:1.6;color:var(--tinta)
}
.respuesta strong{color:var(--primario-osc)}

/* Opciones de tratamiento: cuatro tarjetas, una por situación del paciente */
.opciones{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:28px}
.opcion{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sombra)
}
.opcion h3{font-family:var(--tit);font-size:1.15rem;margin:0;color:var(--primario-osc)}
.opcion .op-quien{font-weight:600;color:var(--tinta);margin:0}
.opcion p{margin:0;color:var(--gris);line-height:1.55}
.opcion .op-precio{margin-top:auto;padding-top:12px;border-top:1px solid var(--linea);font-family:var(--tit);font-weight:700;color:var(--tinta)}
.opcion .op-precio small{display:block;font-family:var(--txt);font-weight:400;color:var(--gris);font-size:.85rem}

/* Tabla de costos sobre fondo claro (la de la portada es para fondo oscuro) */
.tabla-clara{margin:26px 0 10px;background:var(--papel);border:1px solid var(--linea);border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
.tabla-clara table{width:100%;border-collapse:collapse;font-size:.97rem}
.tabla-clara caption{text-align:left;padding:14px 16px 0;font-family:var(--tit);font-weight:700;color:var(--primario-osc)}
.tabla-clara th,.tabla-clara td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-clara thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);background:var(--papel-gris)}
.tabla-clara td:first-child{font-weight:600;color:var(--tinta)}
.tabla-clara td small{display:block;color:var(--gris);font-size:.85em}
.tabla-clara tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  /* Igual que en la portada: en móvil la tabla pasa a tarjetas, sin scroll lateral */
  .tabla-clara table,.tabla-clara thead,.tabla-clara tbody,.tabla-clara tr,.tabla-clara th,.tabla-clara td{display:block}
  .tabla-clara thead{position:absolute;left:-9999px}
  /* Con la tabla en display:block, el caption se encogía a una columna de una palabra */
  .tabla-clara caption{display:block;width:auto;padding:14px 16px 10px;border-bottom:1px solid var(--linea)}
  .tabla-clara tbody tr{padding:12px 16px;border-bottom:1px solid var(--linea)}
  .tabla-clara td{border:0;padding:3px 0}
  .tabla-clara td[data-col]::before{content:attr(data-col) ": ";color:var(--gris);font-size:.85em}
}

/* Preguntas frecuentes con <details>: funcionan sin JavaScript */
.faq{max-width:860px;margin:28px auto 0;display:grid;gap:12px}
.faq details{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-family:var(--tit);font-weight:700;font-size:1.02rem;color:var(--tinta)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.4rem;color:var(--primario);line-height:1
}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid var(--primario-claro);outline-offset:2px;border-radius:var(--r)}
.faq .faq-r{padding:0 22px 18px;color:var(--gris);line-height:1.6}
.faq .faq-r p{margin:0 0 10px}
.faq .faq-r p:last-child{margin:0}

/* Datos de la página: fecha de revisión, para quien cita y para quien decide */
.revision{font-size:.85rem;color:var(--gris);text-align:center;margin-top:22px}