/* Página de ideas de detalles (/detalles/): tarjetas con ilustraciones de emojis sobre fondos pastel */
.det { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 64px; }
.det-portada { text-align: center; padding: 56px 0 28px; }
.det-portada__pre { font-family: var(--script); font-size: 2rem; color: var(--albero-osc); margin: 0; }
.det-portada h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
.det-portada__sub { max-width: 640px; margin: 0 auto; color: var(--suave); }

.det-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 18px; }
.det-chip { font: inherit; font-size: .95rem; padding: .5em 1em; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.det-chip:hover { border-color: var(--albero); transform: translateY(-1px); }
.det-chip.activo { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.det-chip__n { display: inline-block; min-width: 1.5em; margin-left: .2em; padding: 0 .4em; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: .85em; }
.det-chip.activo .det-chip__n { background: rgba(255, 255, 255, .2); }

.det-intro { text-align: center; color: var(--suave); font-style: italic; margin: 0 0 22px; }
.det-vacio { text-align: center; color: var(--suave); padding: 30px 0; }

.det-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.det-tarjeta { position: relative; background: var(--blanco); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(79, 28, 38, .08); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.det-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(79, 28, 38, .13); }

/* La «foto»: emojis grandes sobre un fondo pastel con lunares */
.det-dibujo { position: relative; height: 170px; display: grid; place-items: center; background:
    radial-gradient(circle, rgba(255, 255, 255, .55) 2px, transparent 2.5px) 0 0 / 22px 22px,
    radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .7), transparent 62%),
    var(--fondo-dibujo); }
.det-dibujo__grande { font-size: 76px; line-height: 1; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .12)); transition: transform .3s; }
.det-tarjeta:hover .det-dibujo__grande { transform: scale(1.08) rotate(-4deg); }
.det-dibujo__peque { position: absolute; font-size: 32px; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .1)); }
.det-dibujo__peque--1 { top: 22px; left: 24%; transform: rotate(-12deg); }
.det-dibujo__peque--2 { bottom: 20px; right: 22%; transform: rotate(10deg); }

.det-tarjeta__cuerpo { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.det-tarjeta__para { margin: 0 0 .3em; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--albero-osc); }
.det-tarjeta h3 { font-size: 1.45rem; margin-bottom: .3em; }
.det-tarjeta__cuerpo > p { margin: 0 0 .8em; font-size: .97rem; }
.det-tarjeta__pie { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: 6px; }
.det-precio, .det-diy { font-size: .82rem; padding: .25em .7em; border-radius: 999px; background: var(--crema); color: var(--tinta); }
.det-diy { background: #e9f1e4; }
.det-tarjeta__enlaces { font-size: .9rem; }

.det-corazon { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); font-size: 20px; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); transition: transform .15s; }
.det-corazon:hover { transform: scale(1.1); }
.det-corazon.late { animation: det-late .45s ease; }
@keyframes det-late { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }

.det-cierre { text-align: center; margin-top: 56px; padding: 40px 20px; border-radius: 24px; background: var(--blanco); }
.det-cierre__nota { font-size: .9rem; color: var(--suave); margin-top: 1.2em; }
@media (prefers-reduced-motion: reduce) { .det-tarjeta, .det-dibujo__grande, .det-corazon { transition: none; animation: none !important; } }
@media (max-width: 560px) { .det-dibujo { height: 140px; } .det-dibujo__grande { font-size: 64px; } .det-portada { padding-top: 32px; } }