/* Simulador de crecimiento (public/js/crecimiento.js): lo usan la landing y la app. */
.crecimiento { display: flex; flex-direction: column; gap: 12px; }
.cr-dibujo svg { display: block; width: 100%; max-width: 300px; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(126, 44, 73, .18)); }
.cr-bebe, .cr-giro, .cr-cabeza, .cr-embrion, .cr-feto, .cr-cordon { transition: transform .45s ease, opacity .35s ease; }
.cr-bebe { transform-box: view-box; transform-origin: 0 0; }
.cr-giro { transform-box: view-box; transform-origin: 100px 100px; }
.cr-cabeza, .cr-ojo { transform-box: fill-box; transform-origin: center; }
.cr-ojo { transition: transform .45s ease; }
.cr-latido { transform-box: fill-box; transform-origin: center; animation: cr-latido 1s ease-in-out infinite; }
@keyframes cr-latido { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
.cr-datos { text-align: center; display: flex; flex-direction: column; gap: 4px; min-height: 132px; }
.cr-semana { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #B5583A; }
.cr-tamano { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: #3A2433; }
.cr-medida { color: #6E5866; font-weight: 700; }
.cr-hito { color: #3A2433; }
.cr-control { display: flex; align-items: center; gap: 12px; }
.cr-play { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: #A63D61; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.reproduciendo .cr-play { background: #F4A988; color: #3A2433; }
.cr-barra { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #A63D61 var(--avance, 40%), #F6E1D8 var(--avance, 40%)); outline-offset: 6px; }
.cr-barra::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; border: 4px solid #A63D61; box-shadow: 0 2px 8px rgba(58, 36, 51, .25); cursor: grab; }
.cr-barra::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 4px solid #A63D61; cursor: grab; }
.cr-nota { text-align: center; font-size: 12px; color: #6E5866; }
@media (prefers-reduced-motion: reduce) { .cr-latido { animation: none; } .cr-bebe, .cr-giro, .cr-cabeza { transition: none; } }

/* Tira de semanas (app) */
.tira-semanas { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -16px; padding-left: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.tira-semanas::-webkit-scrollbar { display: none; }
.tira-semanas button { flex: none; width: 50px; height: 58px; border-radius: 16px; border: 1.5px solid #EED8CF; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #3A2433; cursor: pointer; scroll-snap-align: center; }
.tira-semanas button small { font-size: 10px; font-weight: 700; color: #6E5866; letter-spacing: .04em; }
.tira-semanas button.activa { background: #A63D61; border-color: #A63D61; color: #FFFFFF; }
.tira-semanas button.activa small { color: #F3D7E0; }
.tira-semanas button.hoy:not(.activa) { border-color: #F4A988; border-width: 2.5px; }

/* La foto de su ecografía dentro del dibujo */
.cr-dibujo { position: relative; }
.cr-eco { position: absolute; right: 4%; bottom: 2%; margin: 0; width: 34%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cr-eco img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid #FFFFFF; box-shadow: 0 8px 20px rgba(58, 36, 51, .3); background: #111; }
.cr-eco figcaption { font-size: 11px; font-weight: 800; color: #A63D61; background: #FFFFFF; border-radius: 999px; padding: 2px 8px; box-shadow: 0 2px 6px rgba(58, 36, 51, .15); }
/* Versión chica (pantalla Hoy) */
.cr-compacto { gap: 6px; }
.cr-compacto .cr-dibujo svg { max-width: 200px; }
.cr-compacto .cr-semana, .cr-compacto .cr-hito { display: none; }
.cr-compacto .cr-datos { min-height: 0; }
.cr-compacto .cr-tamano { font-size: 22px; }

/* Gráfico de crecimiento */
.grafico { width: 100%; display: block; }
.grafico text { font: 700 11px "Nunito Sans", sans-serif; fill: #6E5866; }
.grafico text.dato { font-size: 13px; font-weight: 800; fill: #A63D61; }
.grafico text.eje { font-weight: 600; }
.grafico-leyenda { display: flex; gap: 16px; justify-content: center; font-size: 13px; font-weight: 700; color: #6E5866; }
.grafico-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ley-tipico::before { content: ""; width: 18px; border-top: 3px dashed #E8A0B4; }
.ley-suyo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #A63D61; }

/* Fotos realistas (cuando existen, reemplazan el dibujo) */
.cr-fotos { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 36px rgba(126, 44, 73, .25); background: radial-gradient(circle at 50% 42%, #F4CABF 0%, #E6A9A4 62%, #D18F90 100%); }
.cr-fotos-in { position: absolute; inset: 0; transition: transform .45s ease; }
.cr-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 70%); }
.cr-fotos img { opacity: 0; transition: opacity .3s ease; }
.cr-fotos img.activa { opacity: 1; }
.con-fotos .cr-svg { display: none; }
.cr-compacto .cr-fotos { max-width: 200px; }