/* ==========================================================================
   Helados Chino's — página de calificación
   Se abre escaneando el QR del mostrador, casi siempre desde un celular:
   por eso es una pantalla propia y no una sección más del sitio. Pantalla
   completa, una sola decisión a la vez y el pulgar siempre cerca del botón.
   ========================================================================== */

:root {
    --azul:        #000f9f;
    --azul-hondo:  #00084f;
    --azul-noche:  #000733;
    --azul-claro:  #2a3bd4;
    --rojo:        #e22572;
    --turquesa:    #00aad0;
    --blanco:      #ffffff;

    --nieve:       #edeffb;
    --nieve-2:     #dadffa;
    --tinta:       #0e1140;
    --gris:        #676ca0;
    --gris-suave:  #8f94c2;

    --oro:         #f0a500;
    --oro-claro:   #ffd76e;

    --display: "Archivo", system-ui, -apple-system, sans-serif;
    --texto:   "Instrument Sans", system-ui, -apple-system, sans-serif;

    --r-tarjeta: 28px;
    --r-media:   16px;
    --r-pill:    999px;

    /* Sombra en capas: una cercana que define el borde y otra lejana que
       levanta la tarjeta del fondo. Una sola sombra se ve barata. */
    --elevacion:
        0 1px 2px rgba(9, 12, 40, .22),
        0 8px 18px -8px rgba(9, 12, 40, .38),
        0 40px 80px -32px rgba(9, 12, 40, .72);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--azul-noche);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--rojo); color: var(--blanco); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--turquesa);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Fondo: azul profundo con dos luces y los óvalos del logo insinuados
   -------------------------------------------------------------------------- */

.fondo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, #35429c 0%, transparent 60%),
        radial-gradient(90% 70% at 100% 100%, rgba(103, 198, 180, .16) 0%, transparent 55%),
        radial-gradient(70% 60% at 0% 90%, rgba(225, 35, 46, .14) 0%, transparent 60%),
        linear-gradient(180deg, #1b2260 0%, var(--azul-noche) 100%);
}

/* Los óvalos del logo, apenas visibles, para que el fondo no sea plano */
.fondo::before,
.fondo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .06);
}

.fondo::before {
    width: 620px;
    height: 620px;
    top: -280px;
    right: -200px;
}

.fondo::after {
    width: 420px;
    height: 420px;
    bottom: -190px;
    left: -150px;
    border-color: rgba(103, 198, 180, .12);
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.escena {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: 30px 20px 26px;
}

.escena--ancha { max-width: 620px; }

/* Marca arriba de todo */
.sello {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sello img {
    height: 44px;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}

/* El logo ya trae el nombre: el texto al lado lo repetia. */
.sello__texto { display: none; }

.sello__texto {
    font-family: var(--display);
    font-style: italic;
    font-variation-settings: "wght" 800, "wdth" 106;
    font-size: 1.12rem;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--blanco);
}

.sello__texto span {
    display: block;
    font-style: normal;
    font-variation-settings: "wght" 500, "wdth" 100;
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--turquesa);
}

/* --------------------------------------------------------------------------
   La tarjeta: donde vive todo el contenido
   -------------------------------------------------------------------------- */

.tarjeta {
    position: relative;
    width: 100%;
    padding: 40px 36px 34px;
    background: var(--blanco);
    border-radius: var(--r-tarjeta);
    box-shadow: var(--elevacion);
    text-align: center;
}

/* Filete de luz en el borde superior: el detalle que separa lo caro de lo
   hecho a las apuradas */
.tarjeta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.tarjeta--izquierda { text-align: left; }

.eyebrow {
    margin: 0 0 12px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--azul-claro);
}

.titulo {
    margin: 0 0 10px;
    font-family: var(--display);
    font-variation-settings: "wght" 800, "wdth" 102;
    font-size: clamp(1.85rem, 7vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--tinta);
}

.titulo em { font-style: italic; color: var(--azul); }

.bajada {
    margin: 0 auto;
    max-width: 34ch;
    color: var(--gris);
    font-size: 1rem;
}

.tarjeta--izquierda .bajada { margin-inline: 0; max-width: none; }

/* Chapita con el nombre de la sucursal */
.local {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 7px 16px 7px 10px;
    border-radius: var(--r-pill);
    background: var(--nieve);
    color: var(--azul);
    font-weight: 600;
    font-size: .88rem;
}

.local i { color: var(--turquesa); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Las cinco estrellas
   -------------------------------------------------------------------------- */

.estrellas {
    display: flex;
    justify-content: center;
    gap: clamp(2px, 1.5vw, 8px);
    margin: 28px 0 4px;
}

.estrella {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 4px;
    background: none;
    cursor: pointer;
    line-height: 0;
    color: var(--nieve-2);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), color .18s;
}

.estrella svg {
    width: clamp(46px, 14vw, 62px);
    height: auto;
    display: block;
    fill: currentColor;
    transition: filter .2s;
}

/* Pintadas hasta donde apunta el dedo */
.estrella.activa {
    color: var(--oro);
    transform: translateY(-3px) scale(1.06);
}

.estrella.activa svg {
    fill: url(#degradeOro);
    filter: drop-shadow(0 6px 14px rgba(240, 165, 0, .45));
}

.estrella:active { transform: translateY(-1px) scale(.96); }

/* Las estrellas de solo lectura (resumen del paso 2 y del agradecimiento) */
.estrellas--fijas { margin: 0 0 20px; gap: 4px; pointer-events: none; }

.estrellas--fijas svg {
    width: 26px;
    fill: var(--nieve-2);
}

.estrellas--fijas .llena svg {
    fill: url(#degradeOro);
}

.leyenda {
    min-height: 1.7em;
    margin: 10px 0 0;
    font-family: var(--display);
    font-variation-settings: "wght" 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    color: var(--azul);
    transition: color .2s;
}

.leyenda[data-nivel="bajo"]  { color: var(--rojo); }
.leyenda[data-nivel="medio"] { color: #d18700; }
.leyenda[data-nivel="alto"]  { color: #1a9c68; }

.pie-tarjeta {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--nieve);
    font-size: .84rem;
    color: var(--gris-suave);
}

.pie-tarjeta a { color: var(--azul); font-weight: 600; }

/* --------------------------------------------------------------------------
   Elegir sucursal
   -------------------------------------------------------------------------- */

.locales {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    text-align: left;
}

.local-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border: 2px solid var(--nieve);
    border-radius: var(--r-media);
    background: var(--blanco);
    color: var(--tinta);
    text-decoration: none;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}

.local-card:hover {
    border-color: var(--azul);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(0, 15, 159, .7);
}

.local-card__icono {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--blanco);
    font-size: 1.15rem;
}

.local-card__texto { flex: 1; min-width: 0; }

.local-card__texto strong {
    display: block;
    font-family: var(--display);
    font-variation-settings: "wght" 700;
    font-size: 1.05rem;
    letter-spacing: -.015em;
}

.local-card__texto small {
    display: block;
    color: var(--gris);
    font-size: .86rem;
}

.local-card > .bi-chevron-right { color: var(--gris-suave); }

/* --------------------------------------------------------------------------
   Formulario interno (menos del umbral)
   -------------------------------------------------------------------------- */

.campo { margin-bottom: 20px; text-align: left; }

.campo > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--tinta);
}

.campo .opcional {
    font-weight: 400;
    color: var(--gris-suave);
}

.campo input,
.campo textarea {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid var(--nieve-2);
    border-radius: var(--r-media);
    background: var(--blanco);
    color: var(--tinta);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}

.campo textarea { resize: vertical; min-height: 104px; }

.campo input::placeholder,
.campo textarea::placeholder { color: #a4a9c8; }

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(0, 15, 159, .12);
}

.ayuda {
    display: block;
    margin-top: 7px;
    font-size: .82rem;
    color: var(--gris-suave);
}

/* Motivos: chips que se marcan de a varios */
.motivos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.motivo { cursor: pointer; }

.motivo input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.motivo span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 2px solid var(--nieve-2);
    border-radius: var(--r-pill);
    background: var(--blanco);
    font-size: .89rem;
    font-weight: 600;
    color: var(--gris);
    transition: all .15s;
}

.motivo span::before {
    content: "\F4F9";           /* bi-plus-circle */
    font-family: "bootstrap-icons";
    font-size: .85rem;
    opacity: .5;
}

.motivo:hover span { border-color: var(--azul-claro); color: var(--azul); }

.motivo input:checked + span {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--blanco);
}

.motivo input:checked + span::before {
    content: "\F26E";           /* bi-check-circle-fill */
    opacity: 1;
}

.motivo input:focus-visible + span {
    outline: 3px solid var(--turquesa);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 28px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    background: var(--azul);
    color: var(--blanco);
    font-family: var(--display);
    font-variation-settings: "wght" 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s, transform .1s, box-shadow .16s;
    box-shadow: 0 12px 26px -12px rgba(0, 15, 159, .9);
}

.boton:hover { background: var(--azul-claro); }
.boton:active { transform: translateY(1px); }

.boton--bloque { width: 100%; }

.boton--linea {
    background: transparent;
    border-color: var(--nieve-2);
    color: var(--azul);
    box-shadow: none;
}

.boton--linea:hover { background: var(--nieve); border-color: var(--azul); }

.boton--verde { background: #1faa5b; box-shadow: 0 12px 26px -12px rgba(31, 170, 91, .9); }
.boton--verde:hover { background: #178a49; }

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 6px;
}

.acciones .boton { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: var(--r-media);
    background: var(--nieve);
    text-align: left;
    font-size: .9rem;
    color: var(--tinta);
}

.aviso i { font-size: 1.05rem; line-height: 1.4; color: var(--azul); }
.aviso p, .aviso ul { margin: 0; }
.aviso ul { padding-left: 18px; }

.aviso--error {
    background: #ffe9ea;
    border: 1px solid rgba(225, 35, 46, .28);
    color: #8a1219;
}

.aviso--error i { color: var(--rojo); }

/* --------------------------------------------------------------------------
   Agradecimiento
   -------------------------------------------------------------------------- */

.tilde {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(160deg, #25c078, #159257);
    color: var(--blanco);
    font-size: 1.9rem;
    box-shadow: 0 14px 30px -12px rgba(21, 146, 87, .8);
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.pie {
    position: relative;
    z-index: 1;
    padding: 0 20px 26px;
    text-align: center;
    font-size: .82rem;
    color: rgba(255, 255, 255, .4);
}

.pie a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-weight: 600;
}

.pie a:hover { color: var(--blanco); text-decoration: underline; }

.pie__sep { margin: 0 8px; opacity: .4; }

/* Campo trampa para bots: fuera de la vista, pero no display:none */
.trampa {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Entrada en escena
   -------------------------------------------------------------------------- */

@keyframes surgir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.sello, .tarjeta, .pie { animation: surgir .5s cubic-bezier(.22, .8, .3, 1) backwards; }
.sello   { animation-delay: .04s; }
.tarjeta { animation-delay: .12s; }
.pie     { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .escena { padding: 22px 14px 20px; gap: 20px; }
    .tarjeta { padding: 30px 22px 26px; border-radius: 24px; }
    .estrellas { gap: 0; margin-top: 22px; }
    .estrella { padding: 2px; }
    .acciones { flex-direction: column; }
    .acciones .boton { width: 100%; }
}

/* Pantallas altas: dejamos respirar en vez de estirar */
@media (min-height: 860px) and (min-width: 481px) {
    .escena { gap: 34px; }
}