/* ==========================================================
   Alimenta 2026 · Sofía 50 años — estilos base y públicos
   Línea gráfica: mosaico negro/carbón del KV + baldosas de color
   ========================================================== */
@font-face { font-family: "Montserrat"; src: url("../../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --black: #000000;
  --char: #2A2A2C;
  --ink: #1C1C1E;
  --muted: #6B6B70;
  --line: #E2E1DE;
  --surface: #FFFFFF;
  --canvas: #EDEBE7;
  --red: #E61F36;      /* Alimenta */
  --sofia: #D0000F;    /* Sofía */
  --gold: #C99154;     /* 50 años */
  --gold-ink: #8E6430;
  --aves: #F1881B; --cerdos: #F2C627; --bovinos: #4CAE33;
  --pet: #907BB6; --rest: #3AA988; --trans: #CB1B1E;
  --accent: var(--red);
  --radius: 4px;
  --font: "Montserrat", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--canvas); line-height: 1.5; font-size: 16px; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* --- Mosaico del KV (bloques negros y carbón) --- */
.mosaic {
  background-color: var(--black);
  background-image:
    linear-gradient(var(--char), var(--char)),
    linear-gradient(var(--char), var(--char)),
    linear-gradient(var(--char), var(--char)),
    linear-gradient(var(--char), var(--char));
  background-size: 18% 46%, 9% 30%, 22% 38%, 12% 52%;
  background-position: 6% 0, 44% 100%, 78% 12%, 100% 100%;
  background-repeat: no-repeat;
}

/* --- Botones y formularios comunes --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 700 .95rem var(--font); padding: .85em 1.4em; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; line-height: 1.1; transition: filter .15s, transform .1s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.dark { background: var(--ink); }
.btn.gold { background: var(--gold); }
.btn.sm { padding: .55em .9em; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

input, select, textarea { font: 500 1rem var(--font); color: var(--ink); width: 100%; padding: .8em .9em; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-weight: 600; }
.alert { padding: .9em 1.1em; border-radius: var(--radius); margin: 0 0 1rem; font-weight: 500; }
.alert.ok { background: #E7F4E2; color: #1F5B12; }
.alert.err { background: #FDE6E8; color: #8C0C1B; }
.alert.info { background: #FBF1E3; color: var(--gold-ink); }

/* ================= Portal público ================= */
.pub-head { color: #fff; padding: 28px 20px 30px; }
.pub-head .wrap { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pub-head img.brand { height: 64px; width: auto; }
.pub-head .date { background: var(--gold); color: #fff; padding: 10px 14px; font-weight: 800; line-height: 1.05; text-align: center; font-size: 1.15rem; }
.pub-head .date small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .02em; margin-bottom: 3px; }

.portal { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.portal h1 { font-size: clamp(1.6rem, 4.6vw, 2.3rem); line-height: 1.12; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.01em; }
.portal p.lead { color: var(--muted); margin: 0 0 1.6rem; max-width: 56ch; }
.tile-main { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; background: var(--red); color: #fff; text-decoration: none; padding: 22px 24px; margin-bottom: 22px; }
.tile-main strong { font-size: 1.35rem; display: block; }
.tile-main span { opacity: .9; font-size: .95rem; }
.tile-main .go { width: 48px; height: 48px; border: 2px solid #fff; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.room { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; text-decoration: none; color: #fff; background: var(--c, var(--char)); }
.room img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.room:hover img { transform: scale(1.04); }
.room b { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.78)); font-size: .95rem; line-height: 1.2; }
.room.closed { filter: grayscale(1); opacity: .5; pointer-events: none; }
@media (max-width: 560px) { .rooms { grid-template-columns: repeat(2, 1fr); } .pub-head img.brand { height: 50px; } }

.pub-foot { text-align: center; padding: 30px 20px 40px; }
.pub-foot img { height: 64px; }

/* Control por CI en el portal */
.ci-box { background: var(--surface); border-top: 6px solid var(--gold); padding: 18px 20px; margin-bottom: 22px; }
.ci-box label { margin-bottom: .6em; }
.ci-box .ci-row { display: flex; gap: 10px; }
.ci-box .ci-row input { flex: 1; font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.ci-box .err-msg { color: var(--red); font-size: .85rem; font-weight: 600; margin-top: .4em; }
.ci-box.who { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ci-box.who small { display: block; color: var(--muted); font-weight: 600; font-size: .78rem; }
.ci-box.who b { font-size: 1.3rem; letter-spacing: .04em; }
.tile-main.done { background: var(--ink); }
.tile-main.done .go { border-color: var(--gold); color: var(--gold); }
.tile-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn.ghost.light { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.room .badge { position: absolute; top: 10px; left: 10px; font-style: normal; font-weight: 800; font-size: .75rem; padding: .35em .6em; background: #fff; color: var(--ink); }
.room .badge.half { background: var(--gold); color: #fff; }
.room.done { filter: grayscale(.7); opacity: .75; }

/* ================= Formulario de encuesta ================= */
.survey-hero { color: #fff; position: relative; }
.survey-hero .wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 34px; display: grid; grid-template-columns: 1fr 120px; gap: 20px; align-items: end; }
.survey-hero .crumb { color: #fff; opacity: .8; text-decoration: none; font-size: .85rem; font-weight: 600; }
.survey-hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; line-height: 1.05; margin: .35em 0 .25em; }
.survey-hero p { margin: 0; opacity: .85; }
.survey-hero .art { width: 120px; aspect-ratio: 2/3; object-fit: cover; display: block; box-shadow: 10px 10px 0 var(--accent); }
.survey-hero .art.logo { aspect-ratio: auto; box-shadow: none; }
.survey-hero::after { content: ""; display: block; height: 8px; background: var(--accent); }
@media (max-width: 520px) { .survey-hero .wrap { grid-template-columns: 1fr 84px; } .survey-hero .art { width: 84px; box-shadow: 6px 6px 0 var(--accent); } }

form.survey { max-width: 760px; margin: 0 auto; padding: 22px 16px 70px; }
.sec { background: var(--surface); padding: 22px 22px 8px; margin-bottom: 16px; border-top: 6px solid var(--accent); }
.sec > h2 { font-size: 1.15rem; margin: 0 0 1rem; font-weight: 800; }
.q { margin-bottom: 22px; }
.q > .qt { font-weight: 700; margin-bottom: .2em; display: block; }
.q > .qt .req { color: var(--accent); }
.q > .help { color: var(--muted); font-size: .88rem; margin: 0 0 .6em; }
.q.invalid input, .q.invalid textarea, .q.invalid .choices, .q.invalid .scale { outline: 2px solid var(--red); outline-offset: 3px; }
.q .err-msg { color: var(--red); font-size: .85rem; font-weight: 600; margin-top: .3em; }
.q input[readonly] { background: var(--canvas); }
.q .ci-who { margin: .5em 0 0; }
.ci-msg { margin-top: .5em; padding: .6em .8em; border-radius: var(--radius); font-size: .88rem; font-weight: 600; }
.ci-msg.ok { background: #E7F4E2; color: #1F5B12; }
.ci-msg.err { background: #FDE6E8; color: #8C0C1B; }
.ci-msg.info { background: #FBF1E3; color: var(--gold-ink); }
form.survey.locked .sec .q:not(:has([data-ci])) { opacity: .45; }
.submit-bar .save-state { font-size: .75rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .submit-bar .save-state { white-space: normal; max-width: 96px; font-size: .68rem; line-height: 1.2; } }

.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.choices label { position: relative; font-weight: 600; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: block; padding: .8em 1em; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, background .12s; }
.choices input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.choices input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Escala 1–5 como baldosas del KV */
.rating .qt { font-size: 1.02rem; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 520px; }
.scale label { position: relative; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale span { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 86px; width: 100%; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 800; font-size: 1.35rem; line-height: 1; transition: background .12s, color .12s, border-color .12s; }
.scale span em { font-style: normal; font-weight: 600; font-size: .62rem; margin-top: .45em; color: var(--muted); text-align: center; }
.scale input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.scale input:checked + span em { color: #fff; }
.scale input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px !important; }

.submit-bar { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); margin: 0 -16px; }
.submit-bar .progress { flex: 1; height: 6px; background: var(--line); }
.submit-bar .progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.submit-bar .btn { padding: .95em 1.8em; }

/* Gracias */
.thanks { max-width: 640px; margin: 0 auto; padding: 40px 20px 60px; text-align: center; }
.thanks .mark { width: 84px; height: 84px; margin: 0 auto 18px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; }
.thanks h1 { font-size: 2rem; margin: 0 0 .3em; font-weight: 800; }
.thanks p { color: var(--muted); }
.thanks .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0; }
.thanks .cert-prev { margin-top: 18px; border: 1px solid var(--line); background: #fff; padding: 8px; }