/* Smash King · Valóranos (/valoranos) */
.val{position:relative;background:var(--sk-hormigon);background-image:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.22),rgba(0,0,0,.10) 70%);padding:2.5rem 0 3rem}
.val__in{position:relative;z-index:2;max-width:620px}
.val__cab{text-align:center;margin-bottom:1.25rem}
.val__titulo{font-family:var(--sk-font-display);text-transform:uppercase;letter-spacing:.02em;line-height:1;color:var(--sk-carbon);font-size:clamp(1.8rem,5vw,2.4rem);margin:0 0 .4rem}
.val__titulo--grande{font-size:clamp(2.2rem,7vw,3.2rem);text-shadow:0 3px 0 rgba(26,14,8,.18)}
.val__texto{color:var(--sk-carbon);margin:0 0 .75rem;line-height:1.5}
.val__sub{font-family:var(--sk-font-display);text-transform:uppercase;color:var(--sk-carbon);font-size:1.4rem;margin:2rem 0 .9rem;text-align:center}
.val__ayuda{display:block;font-family:var(--sk-font-body);font-size:.85rem;color:var(--sk-bronce);margin-top:.4rem}
.val__error{background:var(--sk-brasa);color:var(--sk-crema);border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);padding:.7rem .9rem;margin:0 0 1rem;font-weight:600}

/* --- formulario --- */
.val__form{display:flex;flex-direction:column;gap:1.1rem}
.val__campo{display:block;border:0;padding:0;margin:0;font-family:var(--sk-font-util);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--sk-bronce)}
.val__campo legend{padding:0;margin-bottom:.5rem;font:inherit;color:inherit}
.val__campo input[type=text],.val__campo input:not([type]),.val__campo input[name=nombre]{
  display:block;width:100%;margin-top:.35rem;font:500 1.05rem/1.3 var(--sk-font-body);color:var(--sk-carbon);
  background:#fff;border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);padding:.65rem .8rem;text-transform:none;letter-spacing:0}
.val__campo input:focus-visible{outline:3px solid var(--sk-llama);outline-offset:2px}
.val__enviar{align-self:center;font-size:1.15rem;padding:.85em 1.8em}
.val__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Estrellas: radios en orden inverso; al marcar una se pintan ella y las anteriores
   (que van a su izquierda gracias a row-reverse). Sin JavaScript. */
.estrellas{display:flex;flex-direction:row-reverse;justify-content:center;gap:.15rem}
.estrellas input{position:absolute;opacity:0;width:1px;height:1px}
.estrellas label{font-size:2.6rem;line-height:1;color:var(--sk-hormigon-osc,#8A8378);cursor:pointer;padding:0 .1rem;margin:0;transition:color .12s,transform .08s}
.estrellas label:hover,.estrellas label:hover ~ label,
.estrellas input:checked,.estrellas input:checked ~ label{color:var(--sk-oro)}
.estrellas input:checked + label,.estrellas input:checked + label ~ label{color:var(--sk-oro);text-shadow:0 2px 0 var(--sk-tinta)}
.estrellas label:active{transform:translateY(2px)}
.estrellas input:focus-visible + label{outline:3px solid var(--sk-llama);outline-offset:2px;border-radius:4px}

/* --- resultado --- */
.val__panel{text-align:center}
.val__panel--bien{border-color:var(--sk-oro);box-shadow:0 6px 0 var(--sk-oro-oscuro,#B8761F)}
.val__google{margin-top:.5rem;display:inline-block}
.val__acciones{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.5rem}

/* --- reseñas publicadas --- */
.val__tarjetas{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.val__resena{margin:0;text-align:center;padding:.9rem}
.val__foto{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);margin-bottom:.5rem}
.val__quien{font-family:var(--sk-font-util);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sk-carbon);margin-top:.2rem}

.estrellas-ver{display:inline-flex;gap:.1rem;font-size:1.25rem;line-height:1}
.estrellas-ver__on{color:var(--sk-oro);text-shadow:0 1px 0 var(--sk-tinta)}
.estrellas-ver__off{color:var(--sk-hormigon-osc,#8A8378)}
.val__panel .estrellas-ver{font-size:2rem;margin-bottom:.5rem}

/* --- puntuación baja: mensaje del panel + email de contacto --- */
.val__mensaje{white-space:pre-line;text-align:left;background:var(--sk-crema);border:2px dashed var(--sk-bronce);border-radius:var(--sk-radius);padding:.9rem 1rem;margin:.25rem 0 1rem}
.val__contacto{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:flex-end;margin:.25rem 0 .75rem}
.val__contacto .val__campo{flex:1 1 220px;text-align:left}
.val__contacto input[type=email]{display:block;width:100%;margin-top:.35rem;font:500 1.05rem/1.3 var(--sk-font-body);color:var(--sk-carbon);background:#fff;border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);padding:.65rem .8rem;text-transform:none;letter-spacing:0}
.val__contacto .sk-btn{flex:none}
.val__ok{background:#e6f1ea;border:2px solid #3FA26B;border-radius:var(--sk-radius);padding:.7rem .9rem;margin:0 0 1rem;font-weight:600;color:var(--sk-carbon)}
.val__cuenta{font-family:var(--sk-font-util);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--sk-bronce);margin-top:.75rem}

/* --- comentario de la reseña --- */
.val__campo textarea{display:block;width:100%;margin-top:.35rem;font:500 1rem/1.4 var(--sk-font-body);color:var(--sk-carbon);background:#fff;border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);padding:.65rem .8rem;text-transform:none;letter-spacing:0;resize:vertical;min-height:4.5rem}
.val__campo textarea:focus-visible{outline:3px solid var(--sk-llama);outline-offset:2px}
.val__dice{margin:.4rem 0 .2rem;font-size:.95rem;line-height:1.4;color:var(--sk-carbon-2);text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--sk-font-body)}
.val__tarjetas{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* --- foto: control propio con la imagen de marca --- */
.val__campo > label{display:block;margin-bottom:.35rem;cursor:pointer}
.foto{position:relative}
/* sin JavaScript: el control nativo, con el botón en estilo de marca */
.foto__input{display:block;width:100%;font:500 .95rem var(--sk-font-body);text-transform:none;letter-spacing:0;color:var(--sk-carbon)}
.foto__input::file-selector-button{font-family:var(--sk-font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;line-height:1;background:var(--sk-oro);color:var(--sk-carbon);border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);padding:.6em 1.1em;margin-right:.8rem;box-shadow:0 3px 0 var(--sk-tinta);cursor:pointer}
.foto__input::file-selector-button:hover{background:var(--sk-oro-claro)}
/* con JavaScript: el input sigue ahí (accesible y enviable) pero invisible; la zona hace de control */
.foto--js .foto__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foto__zona{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;background:var(--sk-crema);border:2px dashed var(--sk-bronce);border-radius:var(--sk-radius);cursor:pointer;font-family:var(--sk-font-body);font-weight:500;text-transform:none;letter-spacing:0;transition:background .15s,border-color .15s}
.foto__zona:hover,.foto--sobre .foto__zona{background:#fff4e0;border-color:var(--sk-oro-oscuro,#B8761F)}
.foto__input:focus-visible + .foto__zona{outline:3px solid var(--sk-llama);outline-offset:2px}
.foto__icono{flex:none;width:44px;height:44px;color:var(--sk-bronce)}
.foto__previa{flex:none;width:64px;height:64px;border:2px solid var(--sk-tinta);border-radius:var(--sk-radius);overflow:hidden;background:#fff;box-shadow:0 3px 0 var(--sk-tinta)}
.foto__previa img{width:100%;height:100%;object-fit:cover;display:block}
.foto__texto{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;min-width:0}
.foto__btn{font-size:.95rem;padding:.6em 1.1em;box-shadow:0 3px 0 var(--sk-tinta)}
.foto__zona:active .foto__btn{transform:translateY(3px);box-shadow:0 0 0 var(--sk-tinta)}
.foto__nombre{font-size:.9rem;color:var(--sk-bronce);overflow-wrap:anywhere}
.foto--lista .foto__zona{border-style:solid;border-color:var(--sk-tinta);background:#fff}
.foto--lista .foto__nombre{color:var(--sk-carbon)}
.foto--error .foto__zona{border-style:solid;border-color:var(--sk-brasa);background:#fbeee8}
.foto--error .foto__nombre{color:var(--sk-brasa);font-weight:600}
.foto__quitar{margin-top:.45rem;background:none;border:0;padding:0;font-family:var(--sk-font-util);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--sk-brasa);text-decoration:underline;cursor:pointer}
.foto__quitar:focus-visible{outline:3px solid var(--sk-llama);outline-offset:2px}