/* Tarjeta de presentación digital — Karla Bernal
   Mobile-first, ancho máximo 480px. Paleta y contraste verificados en README. */

:root {
  --crema: #f5efe3;
  --blanco-tarjeta: #fdfbf7;
  --dorado: #b08d3f;
  --dorado-oscuro: #6b4f1d;
  --texto: #2b2620;
  --borde: #e3d9c4;
  --sombra: 0 1px 3px rgba(43, 38, 32, 0.08);

  --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --toque-min: 44px;
  --radio: 14px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--crema);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--texto);
  font-family: var(--font-sans);
  line-height: 1.5;
  padding-bottom: 84px; /* espacio para el botón fijo de WhatsApp */
}

.contenedor {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Superficie de la tarjeta ---
   En móvil, idéntica a antes (sin fondo ni sombra propios: el "nivel uno"
   sigue viéndose exactamente igual, sin riesgo de desplazamiento). A partir
   de cierto ancho hay espacio real alrededor, así que la tarjeta se separa
   visualmente de la textura de fondo, como una tarjeta física sobre una
   superficie. */
.tarjeta-superficie {
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 700px) {
  body {
    padding-top: 40px;
  }
  .tarjeta-superficie {
    background: var(--blanco-tarjeta);
    border-radius: 24px;
    box-shadow: 0 24px 48px -16px rgba(107, 79, 29, 0.22), 0 4px 14px rgba(43, 38, 32, 0.08);
    overflow: hidden;
    padding-bottom: 8px;
  }
}

a {
  color: var(--dorado-oscuro);
}

/* --- Banner con foto real (recorte de la tarjeta física de referencia) ---
   Vive dentro de la tarjeta, arriba de todo, visible en cualquier ancho
   (a diferencia de la versión anterior, que solo se veía en escritorio).
   Zoom lento tipo "Ken Burns" como único efecto de movimiento: sutil,
   no distrae, se apaga con prefers-reduced-motion. El botón de salida
   flota encima para no sumar altura aparte. */
.banner-foto {
  position: relative;
  width: 100%;
  height: 72px;
  overflow: hidden;
  background: var(--borde);
}

.banner-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

@media (prefers-reduced-motion: no-preference) {
  .banner-foto img {
    animation: zoom-suave 22s ease-in-out infinite alternate;
  }
}

@keyframes zoom-suave {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}

@media (min-width: 700px) {
  .banner-foto {
    height: 120px;
  }
}

/* --- Salida rápida --- */

.btn-salida {
  position: absolute;
  top: 8px;
  right: 12px;
  min-height: var(--toque-min);
  min-width: var(--toque-min);
  padding: 8px 16px;
  background: var(--texto);
  color: var(--blanco-tarjeta);
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-salida:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
}

/* --- Encabezado --- */

.encabezado {
  text-align: center;
  padding: 2px 0 8px;
}

.logo {
  width: 50px;
  height: 50px;
  margin: 0 auto 5px;
  display: block;
}

.nombre {
  font-family: var(--font-serif);
  color: var(--dorado-oscuro);
  font-size: clamp(1.25rem, 6.5vw, 1.6rem);
  margin: 0 0 4px;
  text-shadow: 0 1px 0 rgba(253, 251, 247, 0.7), 0 -1px 0 rgba(43, 38, 32, 0.06);
}

.titulo-profesional {
  margin: 0 0 2px;
  font-weight: 600;
}

.especialidad {
  margin: 0 0 4px;
  color: var(--texto);
  opacity: 0.85;
  font-size: 0.95rem;
}

.cedula {
  font-size: 0.85rem;
  color: var(--texto);
  opacity: 0.75;
  margin: 0;
}

/* --- Acciones principales --- */

.acciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: var(--radio);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--borde);
  background: var(--blanco-tarjeta);
  color: var(--texto);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, transform 100ms ease;
}

.btn:hover {
  border-color: var(--dorado);
  box-shadow: 0 4px 14px rgba(107, 79, 29, 0.14);
}

.btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(107, 79, 29, 0.12);
}

.btn:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
}

.btn-principal {
  background: var(--dorado);
  color: var(--texto);
  border-color: var(--dorado);
}

.btn-principal:hover {
  background: #a17f38;
  border-color: #a17f38;
  box-shadow: 0 6px 18px rgba(107, 79, 29, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  }
  .btn:active {
    transform: none;
  }
}

.icono-btn {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-direccion {
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  text-align: center;
}

.direccion-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-direccion .direccion-texto {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* --- Bloque de emergencia --- */

.emergencia {
  border: 1px solid var(--dorado-oscuro);
  background: var(--blanco-tarjeta);
  border-radius: var(--radio);
  padding: 8px 12px;
  margin-bottom: 10px;
}

.emergencia p {
  margin: 0 0 6px;
  font-size: 0.85rem;
}

.emergencia ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.emergencia a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: var(--toque-min);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--crema);
  text-decoration: none;
  color: var(--texto);
  font-size: 0.9rem;
}

.emergencia a > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.emergencia-numero {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.icono-tel {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.emergencia a strong {
  color: var(--dorado-oscuro);
}

/* --- Acordeones --- */

.acordeones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

details {
  background: var(--blanco-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

summary {
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.titulo-acordeon {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--texto);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--dorado);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

details[open] summary::after {
  transform: rotate(45deg);
}

summary:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: -3px;
}

summary:hover {
  background: rgba(176, 141, 63, 0.07);
}

@media (prefers-reduced-motion: no-preference) {
  summary {
    transition: background-color 150ms ease;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: none;
}

.detalle-contenido {
  padding: 0 16px 16px;
  font-size: 0.95rem;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .detalle-contenido {
    transition: max-height 300ms ease;
  }
}

.detalle-contenido p {
  margin: 0 0 10px;
}

.detalle-contenido p:last-child {
  margin-bottom: 0;
}

.servicio-item {
  margin-bottom: 12px;
}

.servicio-item h3 {
  margin: 0 0 2px;
  font-size: 0.95rem;
  color: var(--dorado-oscuro);
}

.servicio-item p {
  margin: 0;
}

.foto-perfil {
  width: 100%;
  max-width: 200px;
  border-radius: var(--radio);
  display: block;
  margin: 0 auto 12px;
}

.qr-imagen {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 8px;
  border-radius: 10px;
  border: 1px solid var(--borde);
}

.qr-leyenda {
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 12px;
}

.qr-descarga {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

/* --- Pie de página --- */

footer {
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.75;
  padding: 0 16px 24px;
}

/* --- Botón fijo de WhatsApp --- */

.whatsapp-fijo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--crema);
  border-top: 1px solid var(--borde);
  z-index: 20;
}

.whatsapp-fijo .btn {
  max-width: 448px;
  margin: 0 auto;
}

/* --- Accesibilidad de movimiento --- */

@media (prefers-reduced-motion: reduce) {
  summary::after {
    transition: none;
  }
}