/* ============================================================
   Memoria de Rioverde — sistema visual
   Referencias adaptadas: StoryCorps (tarjetas con retrato + etiquetas),
   Densho (hero de archivo con foto y velo oscuro), archivos comunitarios
   españoles (tono editorial, papel, sepia).
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('/estatico/fuentes/fraunces.woff2') format('woff2-variations'),url('/estatico/fuentes/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/estatico/fuentes/inter.woff2') format('woff2-variations'),url('/estatico/fuentes/inter.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}

:root{
  /* papel y tinta */
  --papel:#f8f4ec;
  --papel-2:#f1eadc;
  --papel-3:#e7dcc7;
  --blanco:#fffdf9;
  --tinta:#221f1b;
  --tinta-2:#4a443c;
  --tinta-3:#7d7468;
  /* acentos */
  --ladrillo:#9c3d24;
  --ladrillo-claro:#c2643f;
  --oliva:#5a6b45;
  --dorado:#b8893c;
  --linea:#ddd1ba;
  --linea-fuerte:#c9b896;
  /* oscuro (hero, pie) */
  --noche:#1e1a16;
  --noche-2:#2c2620;
  /* tipografía */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sombra:0 1px 2px rgba(34,31,27,.04),0 8px 24px rgba(34,31,27,.06);
  --sombra-alta:0 2px 6px rgba(34,31,27,.06),0 18px 44px rgba(34,31,27,.12);
  --radio:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:18px;line-height:1.65;
  /* grano de papel muy sutil */
  background-image:radial-gradient(circle at 25% 15%,rgba(184,137,60,.045),transparent 45%),radial-gradient(circle at 78% 60%,rgba(90,107,69,.04),transparent 40%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:var(--ladrillo);text-underline-offset:3px}
a:hover{color:var(--ladrillo-claro)}
.contenedor{max-width:1120px;margin:0 auto;padding:0 20px}
.angosto{max-width:760px}

/* ---------- cabecera ---------- */
header.cab{position:sticky;top:0;z-index:40;background:rgba(248,244,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
header.cab .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta)}
.marca .sello{width:34px;height:34px;flex:0 0 34px}
.marca .txt{display:block}
.marca .txt b{display:block;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.2px;line-height:1.15}
.marca .txt span{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3);font-weight:500;line-height:1.4}
header.cab nav{display:flex;align-items:center;gap:22px}
header.cab nav a{color:var(--tinta-2);text-decoration:none;font-size:15px;font-weight:500}
header.cab nav a:hover{color:var(--ladrillo)}
header.cab nav a.cta{background:var(--ladrillo);color:#fff;padding:9px 16px;border-radius:999px;font-weight:600}
header.cab nav a.cta:hover{background:var(--ladrillo-claro);color:#fff}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;gap:9px;background:var(--ladrillo);color:#fff;padding:14px 24px;border-radius:999px;
  text-decoration:none;font-size:17px;font-weight:600;border:0;cursor:pointer;font-family:var(--texto);
  box-shadow:0 2px 8px rgba(156,61,36,.28);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.boton:hover{background:var(--ladrillo-claro);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(156,61,36,.3)}
.boton.sec{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.boton.sec:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.boton.oscuro-sec{background:transparent;color:var(--ladrillo);border:1.5px solid var(--linea-fuerte);box-shadow:none}
.boton.oscuro-sec:hover{background:var(--papel-2);color:var(--ladrillo)}
.boton.chico{padding:9px 16px;font-size:14.5px}

/* ---------- hero ---------- */
.heroe{position:relative;background:var(--noche);color:#f4ece0;overflow:hidden;isolation:isolate}
.heroe .lienzo{position:absolute;inset:0;z-index:-2}
.heroe .lienzo svg{width:100%;height:100%;object-fit:cover}
.heroe:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(30,26,22,.94) 0%,rgba(30,26,22,.82) 42%,rgba(30,26,22,.55) 72%,rgba(30,26,22,.42) 100%)}
.heroe .contenedor{position:relative;padding:76px 20px 64px}
.ojillo{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#e2c79a;font-weight:600;margin:0 0 18px}
.ojillo:before{content:"";width:26px;height:1px;background:#b8893c}
.heroe h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px;max-width:15ch}
.heroe h1 em{font-style:italic;color:#e8b877}
.heroe .lema{font-size:clamp(17px,2vw,20px);line-height:1.6;color:#d9cdbd;max-width:56ch;margin:0 0 30px}
.acciones-heroe{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nota-heroe{margin:26px 0 0;font-size:14.5px;color:#a89c8c;display:flex;align-items:center;gap:9px}

/* cifras dentro del hero */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0 0;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
.cifra{padding:0 18px;border-left:1px solid rgba(255,255,255,.12)}
.cifra:first-child{border-left:0;padding-left:0}
.cifra b{display:block;font-family:var(--display);font-weight:600;font-size:38px;line-height:1;color:#f0d9b4}
.cifra span{display:block;margin-top:6px;font-size:13.5px;color:#a89c8c;letter-spacing:.02em}

/* ---------- secciones ---------- */
section{padding:66px 0}
section.claro{background:var(--papel-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.enc{max-width:62ch;margin:0 0 38px}
.enc .ojillo{color:var(--ladrillo)}
.enc .ojillo:before{background:var(--ladrillo-claro)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(27px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;margin:0 0 12px}
.enc p{margin:0;color:var(--tinta-2);font-size:18px}
h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;margin:0}

/* ---------- pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:22px}
.paso{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px 22px;box-shadow:var(--sombra);position:relative}
.paso .num{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;background:var(--ladrillo);width:32px;height:32px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.paso h3{margin-bottom:7px;font-size:19px}
.paso p{margin:0;font-size:15.5px;color:var(--tinta-2);line-height:1.6}
.paso b{color:var(--tinta)}

/* ---------- temas ---------- */
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tema{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:11px;
  font-size:15.5px;color:var(--tinta-2);transition:border-color .15s ease,transform .15s ease}
.tema:hover{border-color:var(--linea-fuerte);transform:translateY(-1px)}
.tema .punto{width:8px;height:8px;border-radius:50%;background:var(--dorado);flex:0 0 8px}
.tema:nth-child(3n+2) .punto{background:var(--oliva)}
.tema:nth-child(3n+3) .punto{background:var(--ladrillo-claro)}

/* ---------- tarjetas de relato ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(315px,1fr));gap:24px}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.tarjeta .comilla{font-family:var(--display);font-size:46px;line-height:.6;color:var(--papel-3);height:22px}
.tarjeta h3{font-size:21px}
.tarjeta .cuerpo{margin:0;color:var(--tinta-2);font-size:16.5px;line-height:1.7}
.tarjeta .quien{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--linea);margin-top:auto}
.tarjeta .quien img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--papel-3);filter:sepia(.18)}
.tarjeta .quien .sinfoto{width:46px;height:46px;border-radius:50%;background:var(--papel-2);border:1px dashed var(--linea-fuerte);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--tinta-3);font-size:17px;flex:0 0 46px}
.tarjeta .quien .dato{font-size:14.5px;color:var(--tinta-3);line-height:1.4}
.tarjeta .quien .dato b{display:block;color:var(--tinta);font-size:15.5px;font-weight:600}
.etiquetas{display:flex;flex-wrap:wrap;gap:7px}
.etq{font-size:12.5px;background:var(--papel-2);border:1px solid var(--linea);border-radius:999px;padding:3px 11px;color:var(--tinta-2);font-weight:500}
.etq.decada{background:#f3e7d2;border-color:#e2cda6;color:#7a5a22}
audio{width:100%;margin-top:4px;height:38px}

/* ---------- aviso ---------- */
.aviso{background:#fbf4e6;border:1px solid #e8d6b0;border-left:4px solid var(--dorado);padding:16px 20px;border-radius:10px;
  font-size:16px;color:var(--tinta-2);display:flex;gap:13px;align-items:flex-start}
.aviso svg{flex:0 0 20px;margin-top:2px;color:var(--dorado)}

/* ---------- lista de entregas ---------- */
.entregas{display:flex;flex-direction:column;gap:2px}
.entrega{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;border-bottom:1px solid var(--linea);
  text-decoration:none;color:var(--tinta);transition:padding-left .15s ease}
.entrega:hover{padding-left:10px;color:var(--ladrillo)}
.entrega .mes{font-family:var(--display);font-size:20px;font-weight:600}
.entrega .cuenta{font-size:14.5px;color:var(--tinta-3)}

/* ---------- cierre / llamado ---------- */
.cierre{background:var(--noche-2);color:#efe4d4;text-align:center;padding:72px 0}
.cierre h2{color:#fff;margin-bottom:14px}
.cierre p{max-width:54ch;margin:0 auto 28px;color:#c3b6a4;font-size:18px}

/* ---------- pie ---------- */
footer{background:var(--noche);color:#a89c8c;padding:44px 0 34px;font-size:14.5px}
footer .contenedor{display:grid;grid-template-columns:1.4fr 1fr;gap:34px}
footer .marca{color:#f0e6d8}
footer .marca .txt b{color:#f0e6d8}
footer .marca .txt span{color:#8d8171}
footer p{margin:14px 0 0;line-height:1.65;max-width:58ch}
footer a{color:#dcc9ab}
footer .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:13px;color:#877b6c}

/* ---------- página del testigo ---------- */
.perfil{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.perfil .retrato{width:122px;height:122px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.14);filter:sepia(.2)}
.perfil .retrato-vacio{width:122px;height:122px;border-radius:50%;background:rgba(255,255,255,.07);border:2px dashed rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:42px;color:#c9b393}
.linea-tiempo{position:relative;padding-left:30px}
.linea-tiempo:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--linea-fuerte),var(--linea))}
.hito{position:relative;margin-bottom:26px}
.hito:before{content:"";position:absolute;left:-26px;top:22px;width:11px;height:11px;border-radius:50%;background:var(--dorado);border:2.5px solid var(--papel)}
.vacio{color:var(--tinta-3);font-style:italic}

/* ============================================================
   PANEL DEL EQUIPO (admin)
   ============================================================ */
body.panel{background:#f4f2ee;background-image:none;font-size:15px}
.panel header.cab{background:var(--noche);border-bottom-color:#332c25}
.panel header.cab .marca{color:#f0e6d8}
.panel header.cab .marca .txt b{color:#f0e6d8}
.panel header.cab .marca .txt span{color:#8d8171}
.panel header.cab nav a{color:#c3b6a4;font-size:14px}
.panel header.cab nav a:hover{color:#fff}
.panel h1{font-family:var(--display);font-size:27px;font-weight:600;margin:26px 0 18px}
.panel h2{font-size:20px}
.panel section{padding:0}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e3ddd3;border-radius:10px;overflow:hidden;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid #eee7dc;text-align:left;vertical-align:top}
th{background:#faf7f1;font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--tinta-2)}
tr:last-child td{border-bottom:0}
.fila{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.caja{background:#fff;border:1px solid #e3ddd3;border-radius:12px;padding:20px;margin:14px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.caja h3{margin:0 0 12px;font-size:17px}
label{display:block;font-size:12.5px;color:var(--tinta-3);margin-top:12px;font-weight:500;letter-spacing:.01em}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #ddd5c8;border-radius:8px;font:inherit;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid #d9b98a;outline-offset:1px;border-color:#c9a978}
textarea{min-height:110px;line-height:1.55}
.estado{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:#eee;letter-spacing:.02em}
.estado.activo,.estado.conectado,.estado.publicado,.estado.publicada{background:#dff0d8;color:#2f5e2a}
.estado.registro,.estado.qr,.estado.recibido,.estado.transcrito{background:#fdf0cd;color:#7a5a00}
.estado.pausado,.estado.clasificado{background:#e4e3f5;color:#3b3f8a}
.estado.cerrado,.estado.desconectado,.estado.reservado{background:#f7d9d2;color:#8a2a17}
.estado.revisado{background:#d8ecf5;color:#1d4d66}
.err{color:#9b2c1c;font-size:13px}
.frag{border-top:2px solid #eee7dc;padding:16px 0}
.frag .q{color:var(--tinta-3);font-size:13px}
.frag .orig{background:#faf7f1;padding:12px;border-radius:8px;white-space:pre-wrap;font-size:14.5px;border:1px solid #efe8dc;line-height:1.6}
.inline{display:inline}
.acciones form{display:inline-block;margin-right:7px}
.qr{text-align:center}
.qr img{border:10px solid #fff;border-radius:12px;box-shadow:var(--sombra)}
.mini{font-size:12.5px;color:var(--tinta-3)}
.panel .boton{box-shadow:none}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  footer .contenedor{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .cifra{padding:0 14px}
  .cifra:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:600px){
  body{font-size:17px}
  .heroe .contenedor{padding:52px 20px 44px}
  section{padding:48px 0}
  header.cab nav{gap:14px}
  header.cab nav a{font-size:14px}
  .marca span{display:none}
  .tarjeta{padding:22px}
  .acciones-heroe .boton{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}