/* tema-c.css — el estilo «Vitrina C» (carbón y rojo ladrillo) en las pantallas
   que ven el NEGOCIO y el COMPRADOR (Juan, 2026-11-03). La portada ya lo trae
   en vitrina.css; esto lo lleva a la app del negocio y a las páginas públicas
   (su tienda, el catálogo, el directorio, favoritos) SIN tocar su estructura.

   Va DESPUÉS de base.css / luz.css / vender.css y sólo cambia:
     * las variables de color (todo lo demás ya las usa);
     * la letra: DM Sans para leer, Bebas Neue para títulos grandes;
     * el fondo: blanco cálido, sin las luces turquesa;
     * los botones: rojo ladrillo con relieve, como en la portada.
   El panel del equipo (admin.html, entrar.html) NO lo carga: es interno.

   Verde de WhatsApp y de «vendido», ámbar y rojo de aviso: siguen siendo
   señales y no se tiñen (vienen de base.css). */

:root {
  --acento:        #C23A26;   /* ladrillo, para rellenos con letra blanca */
  --acento-claro:  #E8604A;   /* el claro del degradado del botón */
  --acento-hondo:  #8E2A1A;   /* el que se lee en chico sobre blanco */
  --acento-tenue:  #FBE6E1;   /* pastillas y fondos suaves */
  --cian:          #FF8A6E;   /* brillos y señales (el nombre se queda) */

  --luz-sol:    #F4ECE2;
  --luz-tierra: #D9CBB8;
  --luz-campo:  #3A3633;

  --papel:   #FAF8F5;         /* el blanco manda */
  --tinta:   #222120;         /* carbón */
  --suave:   #5E5953;
  --linea:   #E6E0D6;

  --vidrio:        rgba(255,255,255,.80);
  --vidrio-fuerte: rgba(255,255,255,.96);
  --vidrio-borde:  #ECE6DC;

  /* Sombras teñidas de carbón cálido, nunca grises. */
  --sombra-1: 0 2px 8px rgba(34,33,32,.06);
  --sombra-2: 0 12px 30px rgba(34,33,32,.10);
  --sombra-3: 0 28px 70px rgba(34,33,32,.16);
  --brillo:   0 8px 22px -6px rgba(170,43,24,.45);

  --titulo: "Bebas Neue", "DM Sans", sans-serif;
}

body {
  font-family: "DM Sans", system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

/* Títulos grandes en Bebas (mayúsculas condensadas). Los h3 se quedan en DM
   Sans: son etiquetas de bloque y en Bebas chico se lee peor. */
h1, h2 {
  font-family: var(--titulo); font-weight: 400; letter-spacing: .01em; line-height: .98;
}
h1 { font-size: clamp(44px, 7vw, 76px); }

/* ---------- fondo: blanco cálido, una luz apenas ---------- */
.fondo-luz {
  background:
    radial-gradient(900px 520px at 90% -8%, rgba(232,96,74,.07), transparent 62%),
    radial-gradient(800px 520px at 4% -6%, rgba(217,203,184,.30), transparent 60%),
    var(--papel);
}

/* ---------- botones con relieve ---------- */
.btn {
  background: linear-gradient(180deg, var(--acento-claro), #AA2B18);
  border: 1px solid #741A0C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), var(--brillo);
}
.btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 14px 30px -8px rgba(170,43,24,.5); }
.btn.ghost {
  background: #fff; color: var(--tinta); border: 2px solid var(--tinta); box-shadow: none;
}
.btn.wa { border-color: #17803A; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -6px rgba(34,168,76,.45); }
.btn.peligro { border-color: #741A0C; }

/* ---------- la portada de cada tienda (luz.css) ---------- */
.luz .portada .velo {
  background:
    linear-gradient(to top, var(--papel) 0, rgba(250,248,245,0) 130px),
    linear-gradient(185deg, rgba(34,33,32,.12) 0%, rgba(34,33,32,.42) 52%, rgba(34,33,32,.72) 100%);
}
.luz .portada h1 { font-family: var(--titulo); font-weight: 400; letter-spacing: .01em; }
.luz .portada .antetitulo { color: #FFD3C8; }

/* Las cifras y precios se leen como etiqueta de tienda: Bebas. */
.luz .articulo .lana, .guardado .lana, .luz .cifras .cifra b {
  font-family: var(--titulo); font-weight: 400; letter-spacing: .02em;
}
.luz .articulo .lana { font-size: 30px; color: var(--tinta); }
.luz .cifras .cifra b { font-size: 34px; color: var(--acento-hondo); }
.luz .seccion h2 { font-size: clamp(34px, 4.4vw, 50px); }

/* La etiqueta chica encima de cada título, en el acento (como la portada). */
.antetitulo { color: var(--acento-hondo); }

/* ---------- lo que vender.css / base.css traían escrito en turquesa ---------- */
.foto-grande, #btn-foto { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 40px -12px rgba(170,43,24,.45); }
.tiras .tira.vacia { border-color: #E3C7BE; }
.lo-que-dice { border-color: #EBD3CB; }
.tiras .tira .marca-estudio { background: rgba(34,33,32,.82); }
.velo-modal { background: rgba(34,33,32,.55); }
.qr-panel { background: rgba(34,33,32,.80); }
@media (max-width: 640px) {
  .luz .cifras .cifra b { font-size: 26px; line-height: 1.05; }
}

/* ---------- Portada CLARA (catálogo, directorio, favoritos) ----------
   Ahí no hay foto del negocio: antes iba un degradado turquesa con el lobo de
   marca de agua, que en carbón quedaba gris sucio. El blanco manda: fondo
   claro, titular carbón, etiqueta en ladrillo — igual que la portada. */
.luz .portada.portada-clara { min-height: 0; padding: 54px 0 34px; background: #fff; border-bottom: 1px solid var(--linea); }
.luz .portada.portada-clara .foto, .luz .portada.portada-clara .velo { display: none; }
.luz .portada.portada-clara .dentro, .luz .portada.portada-clara h1 { color: var(--tinta); }
.luz .portada.portada-clara .lema { color: var(--suave); }
.luz .portada.portada-clara .antetitulo { color: var(--acento-hondo); }
.luz .portada.portada-clara h1, .luz .portada.portada-clara .lema { text-shadow: none; }