/* Skin Care: escenas con el color de cada etiqueta, zoom y rutina (25-oct-2026) · se carga desde skin-care.php y skin-care-ficha.php
 * Los frascos son negros con fondo transparente: se colocan sobre un halo del color de su etiqueta (--sc-a luz, --sc-b base). */
.sc-escena{background:radial-gradient(ellipse 62% 54% at 50% 58%,var(--sc-a,#6b3a5e) 0%,var(--sc-b,#2a1730) 66%,var(--mx-noche-2,#0b1f18) 100%)}
.galeria__marco.sc-escena .galeria__img{aspect-ratio:4/5;object-fit:contain;padding:4% 6%}
.fichagal--sc .fichagal__marco{border-radius:26px 26px 90px 26px}
.fichagal--sc .fichagal__img{aspect-ratio:4/5;object-fit:contain;padding:3% 6%;cursor:zoom-in}
.fichagal--sc .fichagal__mini{inline-size:64px;block-size:80px;background:radial-gradient(ellipse 70% 60% at 50% 58%,var(--sc-a,#6b3a5e),var(--sc-b,#2a1730))}
.fichagal--sc .fichagal__mini img{object-fit:contain}
.sc-zoom{position:absolute;inset-block-end:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(221,232,226,.4);border-radius:999px;background:rgba(7,20,16,.66);color:var(--mx-bruma);font:inherit;font-size:var(--text-small);cursor:pointer;transition:border-color .2s,color .2s}
.sc-zoom[hidden]{display:none}
.sc-zoom:hover{border-color:var(--mx-oro-hilo);color:var(--mx-oro-hilo)}
.sc-zoom:focus-visible,.sc-dialog__cerrar:focus-visible,.sc-dialog__lienzo:focus-visible,.sc-enlace:focus-visible{outline:3px solid var(--mx-oro-hilo);outline-offset:2px}
.otras--sc{grid-template-columns:repeat(5,minmax(0,1fr))}
.otras__foto{display:block;border-radius:16px;overflow:hidden;margin-block-end:12px}
.otras--sc .otras__img{margin:0;border-radius:0;object-fit:contain;padding:4% 6%}
@media (max-width:1100px){.otras--sc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.otras--sc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-nota{margin:0 0 6px;color:var(--text-secondary)}
.sc-aviso{margin:36px 0 0;max-inline-size:62ch;color:var(--text-secondary);font-size:var(--text-small)}
.sc-enlace{color:inherit;text-decoration:none;border-block-end:1px solid rgba(224,188,76,.5)}
.sc-enlace:hover{color:var(--mx-oro-hilo)}
/* Zoom: el diálogo muestra la foto de 1200 px dentro de un lienzo que se recorre con el dedo o las barras */
.sc-dialog{inline-size:100%;max-inline-size:100vw;block-size:100%;max-block-size:100dvh;margin:0;padding:0;border:0;background:rgba(7,20,16,.97);color:var(--mx-bruma)}
.sc-dialog::backdrop{background:rgba(7,20,16,.9)}
.sc-dialog[open]{display:grid;grid-template-rows:1fr auto}
.sc-dialog__lienzo{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid}
.sc-dialog__img{display:block;inline-size:max(min(100%,1200px),900px);max-inline-size:none;block-size:auto;margin-inline:auto}
.sc-dialog__cerrar{position:fixed;inset-block-start:14px;inset-inline-end:14px;z-index:2;display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;border:1px solid rgba(221,232,226,.5);background:rgba(7,20,16,.8);color:var(--mx-bruma);cursor:pointer}
.sc-dialog__ayuda{margin:0;padding:10px 16px 14px;text-align:center;font-size:var(--text-small);color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){.sc-zoom{transition:none}}
/* Skin Care en la portada: rejilla de los 6 frascos */
.sc-grid{list-style:none;margin:36px 0 34px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.sc-grid__item{min-inline-size:0}
.sc-grid__enlace{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.sc-grid__foto{display:block;border-radius:20px;overflow:hidden;box-shadow:0 14px 22px rgba(0,0,0,.4);transition:transform var(--duration-base,.3s) var(--ease-standard,ease)}
.sc-grid__foto img{display:block;inline-size:100%;block-size:auto;aspect-ratio:4/5;object-fit:contain;padding:4% 6%}
.sc-grid__enlace:hover .sc-grid__foto{transform:translateY(-6px)}
.sc-grid__enlace:focus-visible{outline:3px solid var(--mx-oro-hilo);outline-offset:4px;border-radius:12px}
.sc-grid__nombre{font-family:var(--font-display);font-size:var(--text-h3);color:var(--text-primary)}
.site-footer__heading--sub{margin-block-start:22px}
@media (max-width:1100px){.sc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (prefers-reduced-motion:reduce){.sc-grid__foto{transition:none}.sc-grid__enlace:hover .sc-grid__foto{transform:none}}