/* ============================================================
   Patagonia Lacustre · luna.v1.css
   13-ago-2026 — Card de luna del home (estrellas, aviso, concón)
   + estilos de la página /luna.

   Archivo NUEVO a propósito: la caché immutable de un año no se
   toca renombrando, se resuelve con nombre nuevo. Si cambia algo
   acá, el próximo es luna.v2.css (no editar este in situ tras
   desplegar).
   ============================================================ */

/* ============ 1 · CARD DE LUNA EN EL HOME ============ */

/* El bloque necesita contexto para el cielo de estrellas */
#bloque-luna { position: relative; overflow: hidden; }
#bloque-luna .bloque__cont { position: relative; }

/* --- cielo de estrellas de la card completa (JS las genera) --- */
.cielo-fondo { position: absolute; inset: 0; pointer-events: none; }
.cielo-fondo .estrella-b {
    position: absolute;
    border-radius: 50%;
    background: #e9e4d2;
    animation: pl-titilar ease-in-out infinite;
}
@keyframes pl-titilar {
    0%, 100% { opacity: .12; }
    50%      { opacity: .85; }
}

/* --- aviso de luna llena, sobre el eyebrow --- */
.luna-aviso {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 8px 16px;
    border: 1px solid rgba(201, 146, 77, .4);
    border-radius: 99px;
    background: rgba(201, 146, 77, .1);
    font-size: .86rem;
}
.luna-aviso strong { color: var(--dorado, #c9924d); }
.luna-aviso[hidden] { display: none; }

/* --- disco: halo respirando --- */
.luna-disco { position: relative; }
.luna-disco::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 228, 210, .16), transparent 65%);
    filter: blur(14px);
    animation: pl-respirar 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pl-respirar {
    0%, 100% { transform: scale(1);    opacity: .7; }
    50%      { transform: scale(1.12); opacity: 1;  }
}
.luna-disco svg { position: relative; }
.luna-disco__cara { filter: drop-shadow(0 0 18px rgba(233, 228, 210, .25)); }

/* --- el concón, posado en el cielo de la card --- */
.concon {
    position: absolute;
    right: -4%;
    bottom: -6%;
    width: 44%;
    margin: 0;
    pointer-events: none;
    z-index: 2;
}
.concon::before {
    content: "";
    position: absolute;
    inset: -14% -18%;
    background: radial-gradient(ellipse at 50% 35%, rgba(233, 228, 210, .18), transparent 62%);
    filter: blur(11px);
    animation: pl-respirar 7s ease-in-out infinite;
}
.concon img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
}

/* --- calendario: cascada de entrada + pulso en Hoy ---
   Las clases son las que YA genera secciones.v1.js (.luna-item con un <b>
   para el rango). Acá solo se les suma comportamiento, no se reemplazan. */
.luna-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}
.luna-item.vista { opacity: 1; transform: none; }
.luna-item.es-hoy > b::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--dorado, #c9924d);
    animation: pl-pulso 2.2s ease-out infinite;
}
@keyframes pl-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(201, 146, 77, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(201, 146, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 146, 77, 0); }
}

@media (max-width: 719px) {
    .concon { right: -2%; bottom: -2%; width: 40%; }
}

/* ============ 2 · PÁGINA /luna ============ */

/* La página entera es nocturna. styles.css asume fondo claro (texto
   oscuro, header sepia sin variable — mismo bug corregido en el home el
   13-ago pero cuyo fix vive en hero.v1.css, que esta página no carga).
   Acá se sobreescribe todo el lienzo de una vez. */
.luna-pag {
    --noche: #071410;
    background: #0a1c17;
    color: #f3efe4;
}
.luna-pag .header {
    background: rgba(10, 28, 23, .92);
}
.luna-pag h1,
.luna-pag h2,
.luna-pag h3 {
    color: #f3efe4;
}

/* aviso superior de ancho completo.
   El header es fixed (66px de alto): sin este margen el aviso nace en
   y=0 y queda tapado debajo. */
.luna-pag__aviso {
    margin: 66px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: rgba(201, 146, 77, .12);
    border-bottom: 1px solid rgba(201, 146, 77, .3);
    font-size: .88rem;
    text-align: center;
}
.luna-pag__aviso strong { color: var(--dorado, #c9924d); }

/* hero nocturno */
.luna-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(60px, 8vw, 100px) 20px clamp(120px, 16vw, 190px);
    background: linear-gradient(180deg, #040b08 0%, #071410 34%, #0a1f19 68%, #0e2620 100%);
}
.luna-hero__disco {
    position: relative;
    width: min(52vw, 260px);
    margin: 0 auto 26px;
}
.luna-hero__disco svg { width: 100%; height: auto; overflow: visible; position: relative; }
.luna-hero__halo {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 228, 210, .2), transparent 62%);
    filter: blur(16px);
    animation: pl-respirar 7s ease-in-out infinite;
}
.luna-borde { fill: none; stroke: rgba(233, 228, 210, .35); stroke-width: 1.4; }
.luna-cara  { fill: #e9e4d2; filter: drop-shadow(0 0 22px rgba(233, 228, 210, .3)); }

/* cordillera estilizada — NO es perfil real de ningún cerro */
.cordillera { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; pointer-events: none; }
.cordillera svg { width: 100%; height: clamp(90px, 15vw, 180px); display: block; }
.cord-tras   { fill: #0c231c; }
.cord-frente { fill: #081712; }
.cord-filo   { fill: none; stroke: rgba(233, 228, 210, .28); stroke-width: 1.1; }

/* el chuncho, vigía del hero */
.vigia {
    position: absolute;
    right: clamp(8px, 6vw, 90px);
    bottom: clamp(6px, 2vw, 22px);
    width: clamp(120px, 17vw, 210px);
    margin: 0;
    pointer-events: none;
    z-index: 2;
}
.vigia::before {
    content: "";
    position: absolute;
    inset: -18% -22%;
    background: radial-gradient(ellipse at 50% 30%, rgba(233, 228, 210, .22), transparent 62%);
    filter: blur(10px);
    animation: pl-respirar 7s ease-in-out infinite;
}
.vigia img {
    position: relative;
    display: block;
    width: 100%; height: auto;
    filter: drop-shadow(0 -6px 24px rgba(233, 228, 210, .18));
}
.vigia__pie {
    position: absolute;
    left: 50%;
    bottom: -1.9em;
    transform: translateX(-50%);
    width: max-content;
    max-width: 180px;
    font-size: .72rem;
    text-align: center;
    opacity: .7;
}

/* secciones de contenido */
.luna-secc { padding: clamp(52px, 7vw, 88px) 0; border-top: 1px solid rgba(243, 239, 228, .14); }

/* las cuatro fases */
.fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.fase-card {
    padding: 22px;
    border: 1px solid rgba(243, 239, 228, .14);
    border-radius: 18px;
    background: rgba(8, 23, 18, .5);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s, transform .6s;
}
.fase-card.vista { opacity: 1; transform: none; }
.fase-card svg { width: 56px; height: 56px; margin-bottom: 12px; }
.fase-card h3 { font-size: 1.15rem; margin: 0 0 4px; }
.fase-card__cuando {
    display: block;
    margin: 0 0 10px;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dorado, #c9924d);
}
.fase-card p { font-size: .92rem; line-height: 1.6; margin: 0; opacity: .85; }

/* bloque de fauna nocturna */
.nocturna { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; }
.nocturna__fig { position: relative; margin: 0; }
.nocturna__fig::before {
    content: "";
    position: absolute;
    inset: -12% -16%;
    background: radial-gradient(ellipse at 50% 35%, rgba(233, 228, 210, .16), transparent 62%);
    filter: blur(12px);
    animation: pl-respirar 7s ease-in-out infinite;
}
.nocturna__fig img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .5)); }
.nocturna__fig figcaption { margin-top: 10px; font-size: .76rem; text-align: center; opacity: .7; }
.nocturna__fig figcaption em { color: var(--dorado, #c9924d); font-style: italic; }

/* cama caliente */
.cama { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: paso; }
.paso {
    padding: 22px;
    border: 1px solid rgba(243, 239, 228, .14);
    border-radius: 18px;
    background: rgba(8, 23, 18, .5);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s, transform .6s;
}
.paso.vista { opacity: 1; transform: none; }
.paso::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    display: block;
    margin-bottom: 8px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.6rem;
    color: var(--dorado, #c9924d);
}
.paso h3 { font-size: 1.05rem; margin: 0 0 8px; }
.paso p  { font-size: .9rem; line-height: 1.6; margin: 0; opacity: .85; }

@media (max-width: 719px) {
    .vigia { right: 4px; width: 110px; }
    .vigia__pie { display: none; }
    .nocturna { grid-template-columns: 1fr; gap: 18px; }
    .nocturna__fig { width: min(58vw, 220px); margin: 0 auto; }
}

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
    .cielo-fondo .estrella-b,
    .luna-disco::before,
    .luna-hero__halo,
    .concon::before,
    .vigia::before,
    .nocturna__fig::before,
    .luna-item.es-hoy > b::before { animation: none; }
    .luna-item, .fase-card, .paso { opacity: 1; transform: none; transition: none; }
}