/* ============================================================
   Sitioideal — Diseño «Aura» (tarot, astrología, reiki, terapias holísticas, limpias energéticas,
   sanación y tiendas esotéricas) · paso 7.z.25
   Va encima de sitio.css. Místico y sereno: cielo de noche con el color del negocio, estrellas que
   titilan despacio (quietas con «reducir movimiento»), las fases de la luna, el nombre en letras
   clásicas (Cinzel), los textos en Jost y los toques en cursiva (Cormorant Garamond). La foto de
   portada va en una carta de tarot con su número romano, los servicios son cartas del mazo con su
   duración y las fotos van en ventanas de arco. Los títulos llevan una luna y una estrella doradas.
   Los colores del negocio son los acentos (aclarados para leerse en lo oscuro) y tiñen la noche.
   HTML propio: app/vistas/sitio/disenos/aura/
   ============================================================ */

.diseno-aura {
    --au-clasica: "Cinzel", "Trajan Pro", Georgia, serif;
    --au-letra: "Jost", "Archivo", system-ui, sans-serif;
    --au-cursiva: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --au-noche: color-mix(in srgb, var(--c-primario) 12%, #0C0A1D);
    --au-noche-2: color-mix(in srgb, var(--c-primario) 16%, #13102A);
    --au-tarjeta: color-mix(in srgb, var(--c-primario) 18%, #1B1738);
    --au-luz: #F2EDE0;
    --au-luz-suave: rgba(242, 237, 224, .78);
    --au-oro: color-mix(in srgb, var(--c-acento) 22%, #E3C47E);
    --au-oro-suave: color-mix(in srgb, var(--au-oro) 38%, transparent);
    --au-oro-tenue: color-mix(in srgb, var(--au-oro) 18%, transparent);
    /* El acento del negocio, aclarado para leerse sobre la noche */
    --au-acento: color-mix(in srgb, var(--c-acento) 68%, #fff);
    --au-tinta: #120F26;
    --au-sombra: 0 30px 50px -30px rgba(0, 0, 0, .85);
    /* Estrellas quietas (un mosaico que se repite) */
    --au-estrellas:
        radial-gradient(1.6px 1.6px at 23px 41px, rgba(255, 255, 255, .85), transparent),
        radial-gradient(1.2px 1.2px at 141px 17px, rgba(255, 255, 255, .6), transparent),
        radial-gradient(2px 2px at 87px 133px, rgba(255, 244, 214, .8), transparent),
        radial-gradient(1.2px 1.2px at 201px 97px, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1.5px 1.5px at 57px 211px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1.1px 1.1px at 173px 187px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.3px 1.3px at 229px 233px, rgba(255, 255, 255, .6), transparent);
    /* Las de las secciones: menos y más tenues, para no estorbarle al texto */
    --au-estrellas-tenue:
        radial-gradient(1.4px 1.4px at 37px 59px, rgba(255, 255, 255, .32), transparent),
        radial-gradient(1.8px 1.8px at 263px 151px, rgba(255, 244, 214, .3), transparent),
        radial-gradient(1.2px 1.2px at 149px 281px, rgba(255, 255, 255, .26), transparent),
        radial-gradient(1.2px 1.2px at 311px 23px, rgba(255, 255, 255, .22), transparent);

    /* Superficies (sitio.css) */
    --s-fondo: var(--au-noche);
    --s-alterna: var(--au-noche-2);
    --s-tarjeta: var(--au-tarjeta);
    --s-tarjeta-alterna: color-mix(in srgb, var(--c-primario) 20%, #211C42);
    --s-encabezado: var(--au-noche);
    --s-claro: rgba(255, 255, 255, .07);
    --s-texto: var(--au-luz);
    --s-titulo: var(--au-acento);
    --s-linea: rgba(242, 237, 224, .12);
    --s-linea-fuerte: rgba(242, 237, 224, .22);
    --s-tinte: var(--au-noche);
    --barra-principal: #1FA855;

    background: var(--au-noche);
    font-family: var(--au-letra);
}

/* Donde el navegador puede, el acento se aclara solo lo necesario */
@supports (color: oklch(from red l c h)) {
    .diseno-aura { --au-acento: oklch(from var(--c-acento) max(l, .8) c h); }
}

/* Letras clásicas: Cinzel (sus minúsculas son versalitas) */
.diseno-aura h1,
.diseno-aura h2,
.diseno-aura h3,
.diseno-aura h4,
.diseno-aura .logo__nombre,
.diseno-aura .especial__titulo,
.diseno-aura .equipo__titulo,
.diseno-aura .persona__nombre,
.diseno-aura .promocion__titulo,
.diseno-aura .servicio__nombre,
.diseno-aura .sucursal__nombre,
.diseno-aura .redes__titulo {
    font-family: var(--au-clasica);
    font-stretch: normal;
    font-weight: 600;
    letter-spacing: .03em;
}

/* Rótulos en Jost, en mayúsculas y separados */
.diseno-aura .menu a,
.diseno-aura .boton,
.diseno-aura .boton-chico,
.diseno-aura .galeria__ver-mas,
.diseno-aura .horario__tabla th {
    font-family: var(--au-letra);
    font-stretch: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- Encabezado: el logo en una placa clara ---------- */
.diseno-aura .encabezado {
    border-bottom: 1px solid var(--au-oro-suave);
    background: color-mix(in srgb, var(--au-noche) 92%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
}

.diseno-aura .logo:has(.logo__imagen),
.diseno-aura .logo:has(svg) {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--au-luz);
    box-shadow: 0 0 0 1px var(--au-oro-suave), 0 0 18px -6px var(--au-oro-suave);
}

.diseno-aura .logo__imagen { height: 40px; }
.diseno-aura .logo__nombre { color: var(--au-luz); }

.diseno-aura .menu { gap: 4px 16px; }
.diseno-aura .menu a { color: var(--au-luz-suave); font-size: .76rem; font-weight: 500; letter-spacing: .08em; }
.diseno-aura .menu a:hover { color: var(--au-oro); }

/* ---------- Botones: redondos, el principal con el acento ---------- */
.diseno-aura .boton {
    padding: 14px 24px;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
}
.diseno-aura .boton--principal {
    border: 0;
    background: var(--au-acento);
    color: var(--au-tinta);
    box-shadow: 0 0 0 1px var(--au-oro-suave), 0 12px 30px -12px color-mix(in srgb, var(--c-acento) 70%, transparent);
}
.diseno-aura .boton--secundario {
    border: 1.5px solid var(--au-oro-suave);
    background: rgba(255, 255, 255, .03);
    color: var(--au-luz);
}
.diseno-aura .boton:hover { transform: translateY(-2px); }
.diseno-aura .boton--secundario:hover { border-color: var(--au-oro); color: var(--au-oro); }

@media (prefers-reduced-motion: reduce) {
    .diseno-aura .boton { transition: none; }
    .diseno-aura .boton:hover { transform: none; }
}

/* ---------- Portada: cielo de noche ---------- */
.au-portada {
    position: relative;
    padding-top: clamp(44px, 6.5vw, 92px);
    overflow: hidden;
    background:
        radial-gradient(48% 62% at 78% 42%, color-mix(in srgb, var(--c-primario) 34%, transparent), transparent 72%),
        radial-gradient(42% 50% at 8% 92%, color-mix(in srgb, var(--c-acento) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-primario) 10%, #07061A), var(--au-noche));
    color: var(--au-luz);
}

/* Las estrellas: una capa quieta y dos que titilan a destiempo (solo adorno) */
.au-cielo,
.au-cielo::before,
.au-cielo::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.au-cielo { background: var(--au-estrellas); background-size: 250px 250px; opacity: .9; }
.au-cielo::before,
.au-cielo::after { content: ""; }
.au-cielo::before {
    background:
        radial-gradient(2.4px 2.4px at 61px 83px, #fff, transparent),
        radial-gradient(1.8px 1.8px at 263px 41px, #FFF4D6, transparent),
        radial-gradient(2.2px 2.2px at 191px 257px, #fff, transparent),
        radial-gradient(1.6px 1.6px at 317px 173px, #fff, transparent);
    background-size: 340px 300px;
    animation: au-titilar 4.6s ease-in-out infinite alternate;
}
.au-cielo::after {
    background:
        radial-gradient(2px 2px at 113px 29px, #fff, transparent),
        radial-gradient(2.6px 2.6px at 37px 221px, #FFF4D6, transparent),
        radial-gradient(1.6px 1.6px at 289px 131px, #fff, transparent);
    background-size: 410px 270px;
    animation: au-titilar 6.2s ease-in-out 2.3s infinite alternate;
}

@keyframes au-titilar {
    from { opacity: .2; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .au-cielo::before,
    .au-cielo::after { animation: none; opacity: .7; }
}

.au-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 40px;
    align-items: center;
    padding-bottom: 36px;
}

@media (min-width: 900px) {
    .au-portada__rejilla { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 60px; }
}

/* El giro entre dos estrellitas de cuatro puntas */
.au-giro {
    display: flex;
    align-items: center;   /* las estrellitas siempre a los lados, aunque el giro ocupe dos renglones */
    gap: 12px;
    max-width: 100%;
    width: fit-content;
    margin: 0 0 18px;
    color: var(--au-oro);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .26em;
    line-height: 1.4;
    text-transform: uppercase;
}
.au-giro > span:not(.au-giro__astro) { min-width: 0; overflow-wrap: anywhere; }
.au-giro__astro {
    flex: none;
    width: 12px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.au-portada__nombre {
    margin: 0 0 18px;
    color: var(--au-luz);
    font-size: clamp(2.3rem, 1.2rem + 4.1vw, 4.4rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: .02em !important;
    text-shadow: 0 0 34px color-mix(in srgb, var(--c-acento) 45%, transparent);
    overflow-wrap: anywhere;
}
.au-portada__nombre--medio { font-size: clamp(2rem, 1.1rem + 3.3vw, 3.7rem); }
.au-portada__nombre--largo { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); }

.au-portada__eslogan {
    max-width: 34ch;
    margin: 0 0 30px;
    color: var(--au-luz-suave);
    font-family: var(--au-cursiva);
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.35;
}

.au-portada__botones { gap: 12px; }
.au-portada__estado { margin-top: 26px; }
.diseno-aura .estado-ahora--claro {
    border-color: var(--au-oro-suave);
    background: rgba(255, 255, 255, .05);
    color: var(--au-luz);
}
.diseno-aura .estado-ahora--claro.estado-ahora--abierto .estado-ahora__punto { background: #3DDC6E; box-shadow: 0 0 10px rgba(61, 220, 110, .7); }
.diseno-aura .estado-ahora--claro.estado-ahora--pronto .estado-ahora__punto { background: #FFB020; }
.diseno-aura .estado-ahora--claro.estado-ahora--cerrado .estado-ahora__punto { background: #FF6B5A; }

/* La carta de tarot, el dorso de otra detrás y las órbitas (adorno) */
.au-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 410px);
    padding: 30px 44px 34px;
}

.au-orbita,
.au-orbita::before {
    position: absolute;
    inset: 12% -4%;
    border: 1px solid var(--au-oro-tenue);
    border-radius: 50%;
    rotate: -16deg;
    pointer-events: none;
}
.au-orbita::before {
    content: "";
    inset: -10% 6%;
    border-style: dashed;
    border-color: var(--au-oro-suave);
    rotate: 52deg;
}
/* Un planeta chiquito en la órbita */
.au-orbita::after {
    content: "";
    position: absolute;
    top: 12%;
    right: 6%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--au-oro);
    box-shadow: 0 0 14px var(--au-oro);
}

.au-dorso,
.au-carta {
    aspect-ratio: 7 / 12;
    border-radius: 18px;
}

.au-dorso {
    position: absolute;
    top: 30px;
    left: 44px;
    width: calc(100% - 88px);
    border: 1.5px solid var(--au-oro-suave);
    background:
        radial-gradient(circle at 50% 50%, var(--au-oro) 0 5%, transparent 5.5% 11%, var(--au-oro-suave) 11.5% 12.5%, transparent 13%),
        repeating-linear-gradient(45deg, var(--au-oro-tenue) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(-45deg, var(--au-oro-tenue) 0 1px, transparent 1px 15px),
        var(--au-tarjeta);
    box-shadow: inset 0 0 0 7px var(--au-tarjeta), inset 0 0 0 8px var(--au-oro-suave), var(--au-sombra);
    rotate: 8deg;
    translate: 16% 1%;
}

.au-carta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border: 1.5px solid var(--au-oro);
    background: linear-gradient(170deg, var(--au-tarjeta), color-mix(in srgb, var(--c-primario) 10%, #0A0818));
    box-shadow:
        inset 0 0 0 6px color-mix(in srgb, var(--c-primario) 12%, #100D24),
        inset 0 0 0 7px var(--au-oro-suave),
        0 40px 70px -34px #000,
        0 0 70px -18px color-mix(in srgb, var(--c-acento) 45%, transparent);
    rotate: -4deg;
}

/* Estrellitas en las cuatro esquinas de la carta */
.au-carta::before,
.au-carta::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--au-oro);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.au-carta::before { top: 14px; left: 14px; }
.au-carta::after { right: 14px; bottom: 14px; }

.au-carta__numero,
.au-carta__nombre {
    flex: none;
    color: var(--au-oro);
    font-family: var(--au-clasica);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}
.au-carta__numero { padding-top: 4px; font-size: 1.15rem; letter-spacing: .3em; }
.au-carta__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    font-size: .82rem;
    letter-spacing: .26em;
}
.au-carta__nombre::before,
.au-carta__nombre::after {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--au-oro-suave);
}

/* La foto en una ventana de arco */
.au-carta__ventana {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--au-oro-suave);
    border-radius: 999px 999px 10px 10px;
    background: var(--au-noche-2);
}
.au-carta__ventana picture,
.au-carta__ventana picture img { width: 100%; height: 100%; }
.au-carta__ventana picture img { object-fit: cover; }

/* Sin foto: una luna creciente entre estrellas */
.au-carta__ventana--luna {
    display: grid;
    place-items: center;
    background:
        var(--au-estrellas),
        radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--c-primario) 40%, #1A1538), color-mix(in srgb, var(--c-primario) 10%, #0A0818));
    background-size: 250px 250px, 100% 100%;
}
.au-luna {
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 40%, #FFF6DC, var(--au-oro) 72%);
    -webkit-mask: radial-gradient(41% 41% at 70% 36%, #0000 97%, #000 100%);
    mask: radial-gradient(41% 41% at 70% 36%, #0000 97%, #000 100%);
}

/* Las fases de la luna, abajo a lo ancho */
.au-fases {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3.2vw, 40px);
    padding: 22px 16px 26px;
    border-top: 1px solid var(--au-oro-tenue);
}

.au-fase {
    --tam: 20px;
    flex: none;
    width: var(--tam);
    height: var(--tam);
    border: 1px solid var(--au-oro-suave);
    border-radius: 50%;
    background: var(--au-oro);
}
.au-fase--nueva { background: transparent; }
.au-fase--creciente { box-shadow: inset calc(var(--tam) * .62) 0 0 0 var(--au-noche); }
.au-fase--cuarto { background: linear-gradient(90deg, transparent 50%, var(--au-oro) 50%); }
.au-fase--gibosa { box-shadow: inset calc(var(--tam) * .26) 0 0 0 var(--au-noche); }
.au-fase--llena { --tam: 26px; box-shadow: 0 0 16px color-mix(in srgb, var(--au-oro) 60%, transparent); }
.au-fase--mengua { scale: -1 1; }

@media (max-width: 599.98px) {
    .au-portada__visual { width: min(100%, 320px); padding: 24px 34px 28px; }
    .au-dorso { top: 24px; left: 34px; width: calc(100% - 68px); }
    .au-carta { padding: 13px 13px 11px; gap: 8px; }
    .au-carta__numero { font-size: 1rem; }
    .au-carta__nombre { font-size: .72rem; letter-spacing: .2em; }
    .au-carta__nombre::before,
    .au-carta__nombre::after { width: 14px; }
    .au-fases { gap: 12px; padding-block: 18px 22px; }
    .au-fase { --tam: 15px; }
    .au-fase--llena { --tam: 20px; }
}

/* ---------- Secciones ---------- */
.diseno-aura .seccion {
    padding-block: clamp(58px, 7vw, 92px);
    background-image: var(--au-estrellas-tenue);
    background-size: 340px 320px;
}

.diseno-aura .seccion h2 {
    color: var(--au-luz);
    font-size: clamp(1.85rem, 1.3rem + 2vw, 2.7rem);
    font-weight: 600;
    line-height: 1.12;
}

/* Una luna y una estrella doradas sobre cada título */
.diseno-aura .seccion h2::before,
.au-cabeza::before {
    content: "";
    display: block;
    width: 72px;
    height: 18px;
    margin-bottom: 14px;
    background: var(--au-oro);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Cpath d='M9.5 1.5a7.5 7.5 0 1 0 6.9 10.4A6 6 0 0 1 9.5 1.5z'/%3E%3Cpath d='M23 9h32' stroke='black' stroke-width='1.3'/%3E%3Cpath d='m64 2.5 1.5 5 5 1.5-5 1.5-1.5 5-1.5-5-5-1.5 5-1.5z'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Cpath d='M9.5 1.5a7.5 7.5 0 1 0 6.9 10.4A6 6 0 0 1 9.5 1.5z'/%3E%3Cpath d='M23 9h32' stroke='black' stroke-width='1.3'/%3E%3Cpath d='m64 2.5 1.5 5 5 1.5-5 1.5-1.5 5-1.5-5-5-1.5 5-1.5z'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}

.au-cabeza { margin-bottom: 28px; }
.au-cabeza h2 { margin: 0 !important; }
/* En las secciones propias la luna va arriba de todo (sobre el antetítulo) */
.diseno-aura .au-cabeza h2::before { content: none; }

.au-antetitulo {
    margin: 0 0 6px;
    color: var(--au-acento);
    font-family: var(--au-cursiva);
    font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
}

/* ---------- Servicios: las cartas del mazo ---------- */
.diseno-aura .catalogo__indice a {
    border: 1.5px solid var(--au-oro-suave);
    border-radius: 999px;
    background: transparent;
    color: var(--au-luz);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.diseno-aura .catalogo__indice a:hover { border-color: var(--au-oro); background: none; color: var(--au-oro); }

.au-grupo + .au-grupo { margin-top: 52px; }

.au-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--au-oro);
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    letter-spacing: .06em !important;
}
.au-grupo__nombre .icono { flex: none; width: 24px; height: 24px; }
.au-grupo__descripcion { max-width: 64ch; margin: 0 0 14px; color: var(--au-luz-suave); }

.au-mazo {
    display: grid;
    gap: 26px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .au-mazo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .au-mazo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
}

.au-naipe {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 0;
    border: 1px solid var(--au-oro-suave);
    border-radius: 16px;
    background: linear-gradient(175deg, var(--s-tarjeta), color-mix(in srgb, var(--c-primario) 8%, #0D0B1F));
    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--c-primario) 10%, #110E26), inset 0 0 0 7px var(--au-oro-tenue), var(--au-sombra);
    text-align: center;
}
.au-naipe--destacado {
    border-color: var(--au-oro);
    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--c-primario) 10%, #110E26), inset 0 0 0 7px var(--au-oro-suave), var(--au-sombra),
        0 0 40px -16px color-mix(in srgb, var(--c-acento) 60%, transparent);
}

/* El número romano entre dos rayitas */
.au-naipe__numero {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    color: var(--au-oro);
    font-family: var(--au-clasica);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .24em;
    line-height: 1;
}
.au-naipe__numero::before,
.au-naipe__numero::after {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--au-oro-suave);
}

.au-naipe__foto {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--au-oro-suave);
    border-radius: 999px 999px 8px 8px;
    background: var(--au-noche-2);
}
.au-naipe__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Sin foto: la ventana lleva una luna, una estrella o un sol dorados (se turnan) */
.au-naipe__foto--simbolo {
    display: grid;
    place-items: center;
    background:
        var(--au-estrellas),
        radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--c-primario) 32%, #1A1538), color-mix(in srgb, var(--c-primario) 8%, #0A0818));
    background-size: 250px 250px, 100% 100%;
}
.au-naipe__foto--simbolo > * { grid-area: 1 / 1; }
.au-naipe__foto--simbolo .au-luna { width: 34%; }
.au-astro,
.au-sol {
    display: block;
    width: 34%;
    aspect-ratio: 1;
}
.au-astro {
    background: radial-gradient(circle at 50% 50%, #FFF6DC, var(--au-oro) 60%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.au-sol {
    width: 44%;
    background: repeating-conic-gradient(var(--au-oro) 0 5deg, transparent 5deg 30deg);
    -webkit-mask: radial-gradient(closest-side, #0000 54%, #000 56% 98%, #0000 100%);
    mask: radial-gradient(closest-side, #0000 54%, #000 56% 98%, #0000 100%);
}
/* El centro del sol, encima de sus rayos */
.au-sol-centro {
    width: 19%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #FFF6DC, var(--au-oro) 70%);
    box-shadow: 0 0 22px color-mix(in srgb, var(--au-oro) 55%, transparent);
}

.au-naipe__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 16px 6px 4px;
}

.au-naipe__sello {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 12px;
    border: 1px solid var(--au-oro-suave);
    border-radius: 999px;
    color: var(--au-oro);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.au-naipe__sello .icono { width: 13px; height: 13px; fill: currentColor; }

.au-naipe__nombre {
    margin: 0;
    color: var(--au-luz);
    font-size: 1.22rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.au-naipe__descripcion { margin: 8px 0 0; color: var(--au-luz-suave); font-size: .98rem; line-height: 1.55; }

.au-naipe__tiempo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 3px 12px 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--au-luz);
    font-size: .9rem;
    font-weight: 500;
}
.au-naipe__tiempo .icono { flex: none; width: 16px; height: 16px; color: var(--au-oro); }

.diseno-aura .au-naipe .ficha-ver { margin: 12px 0 0; color: var(--au-oro); }

.au-naipe__pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    padding: 16px 0 22px;
    border-top: 1px solid var(--au-oro-tenue);
}

.au-naipe__precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    line-height: 1.1;
}
.au-naipe__precio small {
    color: var(--au-luz-suave);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.au-naipe__precio strong {
    color: var(--au-acento);
    font-family: var(--au-clasica);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.au-naipe__precio .au-naipe__unidad {
    margin-top: 2px;
    font-family: var(--au-cursiva);
    font-size: 1.02rem;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}
.au-naipe__precio .au-naipe__sin { font-family: var(--au-cursiva); font-size: 1.25rem; font-style: italic; font-weight: 600; white-space: normal; }

.au-agendar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--au-acento);
    color: var(--au-tinta);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.au-agendar .icono { width: 16px; height: 16px; }
.au-agendar:hover { filter: brightness(1.08); }

/* Servicios y menú con la vista común (por si acaso) */
.diseno-aura .servicio { border-color: var(--s-linea); }
.diseno-aura .servicio__precio strong,
.diseno-aura .platillo__precio { color: var(--au-acento); }

/* ---------- Galería: ventanas de arco ---------- */
.au-ventanas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}
@media (min-width: 700px) {
    .au-ventanas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
}
@media (min-width: 960px) {
    .au-ventanas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria__mas > .au-ventanas { margin-top: 22px; }

.diseno-aura .au-ventana__enlace {
    position: relative;
    display: block;
    overflow: visible;
    border-radius: 0;
    background: none;
    color: var(--au-luz-suave);
    text-decoration: none;
}
.diseno-aura .au-ventana__enlace:focus-visible { outline: 2px solid var(--au-oro); outline-offset: 6px; }

.au-ventana__foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px 6px 6px;
    background: var(--au-noche-2);
    outline: 1px solid var(--au-oro-suave);
    outline-offset: 5px;
    transition: outline-color .2s ease;
}
.au-ventana__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.au-ventana__enlace:hover .au-ventana__foto { outline-color: var(--au-oro); }
.au-ventana__enlace:hover .au-ventana__foto img { scale: 1.04; }

.au-ventana__pie {
    display: block;
    padding: 12px 2px 0;
    overflow: hidden;
    font-family: var(--au-cursiva);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Una de cada cuatro, con una estrellita en la punta del arco */
.au-ventana--estrella .au-ventana__enlace::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -14px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    background: var(--au-oro);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 6px var(--au-oro));
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .au-ventana__foto,
    .au-ventana__foto img { transition: none; }
    .au-ventana__enlace:hover .au-ventana__foto img { scale: none; }
}

@media (max-width: 599.98px) {
    .au-ventana__pie { padding-top: 10px; font-size: .95rem; }
    .au-ventana__foto { outline-offset: 4px; }
}

.diseno-aura .galeria__ver-mas,
.diseno-aura .boton-chico {
    border: 1.5px solid var(--au-oro-suave);
    border-radius: 999px;
    background: transparent;
    color: var(--au-luz);
    font-size: .8rem;
    font-weight: 600;
}
.diseno-aura .galeria__ver-mas:hover,
.diseno-aura .boton-chico:hover { background: rgba(255, 255, 255, .06); }
.diseno-aura .boton-chico--principal { border-color: var(--au-acento); background: var(--au-acento); color: var(--au-tinta); }
.diseno-aura .boton-chico--principal:hover { background: var(--au-acento); filter: brightness(1.08); }

/* ---------- Promociones ---------- */
.diseno-aura .promocion { border-color: var(--au-oro-suave); border-radius: 16px; box-shadow: var(--au-sombra); }
.diseno-aura .promocion__foto { border-radius: 16px 16px 0 0; }
.diseno-aura .promocion__titulo { color: var(--au-luz); }
.diseno-aura .promocion__hoy { background: var(--au-acento); color: var(--au-tinta); }
.diseno-aura .promocion__dias { background: rgba(255, 255, 255, .08); color: var(--au-luz); }

/* ---------- Nosotros ---------- */
.diseno-aura .nosotros__foto img {
    border-radius: 34% 34% 14px 14px / 26% 26% 14px 14px;   /* arco suave: la foto casi no se recorta */
    outline: 1px solid var(--au-oro-suave);
    outline-offset: 7px;
}
.diseno-aura .nosotros__desde { border-radius: 999px; background: rgba(255, 255, 255, .06); }
.diseno-aura .nosotros__desde strong,
.diseno-aura .nosotros__desde .icono { color: var(--au-oro); }
.diseno-aura .especial__marca,
.diseno-aura .persona__foto--iniciales,
.diseno-aura .contacto__icono { background: color-mix(in srgb, var(--au-oro) 16%, transparent); color: var(--au-oro); }
.diseno-aura .persona__foto { border: 2px solid var(--au-oro-suave); }

/* ---------- Tarjetas comunes: redondas y con filo dorado ---------- */
.diseno-aura .testimonio,
.diseno-aura .pregunta,
.diseno-aura .contacto__item,
.diseno-aura .sucursal,
.diseno-aura .especial__punto,
.diseno-aura .persona { border-color: var(--s-linea-fuerte); border-radius: 16px; }

/* ---------- Horario y ubicación ---------- */
.diseno-aura .horario__tabla th { font-size: .82rem; font-weight: 600; }
.diseno-aura .horario__hoy th,
.diseno-aura .horario__hoy td { background: color-mix(in srgb, var(--c-acento) 16%, transparent); color: var(--au-acento); }
.diseno-aura .horario__hoy th { box-shadow: inset 4px 0 0 var(--au-acento); }
.diseno-aura .horario__etiqueta { background: var(--au-acento); color: var(--au-tinta); }
.diseno-aura .mapa { border: 1px solid var(--au-oro-suave); border-radius: 16px; box-shadow: var(--au-sombra); }

/* ---------- Testimonios, preguntas y contacto ---------- */
.diseno-aura .testimonio > .icono { color: var(--au-oro); opacity: .4; }
.diseno-aura .testimonio__texto { font-family: var(--au-cursiva); font-size: 1.2rem; font-style: italic; font-weight: 500; line-height: 1.45; }
.diseno-aura .testimonio__autor { border-top-color: var(--s-linea); }
.diseno-aura .testimonio__iniciales { background: var(--au-acento); color: var(--au-tinta); }
.diseno-aura .estrella { color: rgba(242, 237, 224, .22); }
.diseno-aura .estrella--llena { color: var(--au-oro); }
.diseno-aura .pregunta__titulo:hover { color: var(--au-oro); }
.diseno-aura .pregunta__signo { background: rgba(255, 255, 255, .08); color: var(--au-oro); }
.diseno-aura .red { border-color: var(--au-oro-suave); }

/* ---------- Pie y barra del celular ---------- */
.diseno-aura .pie { border-top: 1px solid var(--au-oro-suave); background: color-mix(in srgb, var(--c-primario) 8%, #07061A); color: var(--au-luz-suave); }
.diseno-aura .barra-acciones { background: color-mix(in srgb, var(--au-noche) 94%, transparent); backdrop-filter: blur(10px); }
.diseno-aura .barra-acciones__boton { letter-spacing: .03em; }
.diseno-aura .barra-acciones__boton--principal { border-radius: 999px; font-weight: 600; }

/* ---------- Imagen generada con IA (7.j) ---------- */
.au-carta__ventana > .marca-ia--foto { bottom: 10px; }