/* ==========================================================================
   TEMA: Editorial
   Serif de revista, mucho aire y la foto al frente.

   Carga DESPUÉS de sitio.css y del color del cliente, así que lo que toca acá
   gana. A propósito NO pisa --marca: cada negocio tiene su color y este tema
   se lleva bien con cualquiera (solo lo usa para acentos, nunca para fondos
   grandes, que es donde un color feo se nota).

   Casi todo es tokens: el esqueleto ya está en sitio.css y no hace falta
   repetirlo. Lo que sí hay abajo son tres o cuatro reglas propias, y cada una
   dice por qué existe.
   ========================================================================== */

:root {
  /* --- Tipografía ------------------------------------------------------- */
  /* Fraunces tiene eje óptico (opsz): el navegador le ajusta el contraste y el
     dibujo según el tamaño, así que el título grande se ve dibujado y el chico
     no se empasta. Es lo que hace que un serif no parezca Word. */
  --font-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --font-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 600;
  --titulo-espaciado: -.02em;
  --titulo-alto: 1.06;

  /* Los títulos más grandes que la base: en una página de venta el nombre no
     es un dato, es la primera impresión. */
  --t-h1: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --t-h2: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  --t-h3: 1.15rem;
  --t-lema: clamp(1.05rem, 1rem + .45vw, 1.35rem);
  --t-precio: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);

  /* --- Ritmo ------------------------------------------------------------ */
  /* El aire es la mitad del asunto: lo que respira se lee caro. */
  --sec-py: clamp(3.5rem, 8vw, 7rem);
  --sec-px: clamp(1.25rem, 5vw, 3rem);
  --hero-py: clamp(5rem, 14vw, 9rem);
  --gap: clamp(1.25rem, 2.5vw, 2rem);

  /* --- Formas ----------------------------------------------------------- */
  /* Esquinas casi rectas: el redondeo grande es de app, y esto quiere ser
     papel. El botón sí queda redondo, que es lo que se toca. */
  --radio: 5px;
  --radio-lg: 8px;
  --btn-radio: 999px;
  --card-foto: 4 / 5;           /* vertical: la foto de un producto luce parada */
  --card-zoom: 1.05;            /* la foto crece apenas al pasar por encima */

  /* --- Color ------------------------------------------------------------ */
  /* Crema en vez de blanco puro: el blanco de pantalla al lado de una foto
     cálida se ve azul y barato. */
  --papel: #faf7f2;
  --papel-2: #f2ece2;
  --linea: #e4dbcd;
  --tinta: #2a2723;
  --tinta-2: #6f665b;
  --sombra-tinte: 60 44 28;     /* la sombra también tira a cálida */

  /* El oscuro: solo los valores. Cuándo entran lo decide sitio.css, que ya
     sabe distinguir «lo pide el celular» de «lo eligió el visitante». */
  --o-papel: #17140f;
  --o-papel-2: #201c16;
  --o-linea: #322c23;
  --o-tinta: #f2ece2;
  --o-tinta-2: #a89c8c;
  --o-sombra-tinte: 0 0 0;

  --sec-title-linea: transparent;  /* el título se sostiene solo */

  /* Mismo velo de dos capas que la base (ver sitio.css), pero tibio: un negro
     puro sobre una foto cálida la vuelve gris. */
  --hero-velo:
    radial-gradient(78% 62% at 50% 48%, rgb(26 18 10 / .58), transparent 76%),
    linear-gradient(180deg, rgb(26 18 10 / .42), rgb(26 18 10 / .24) 45%, rgb(26 18 10 / .55));
}

/* --- Encabezado ---------------------------------------------------------- */
/* En versalitas chicas y espaciadas: el menú acompaña, no compite con el
   título. El color y la rayita del hover salen de la base. */
.s-nav a { text-transform: uppercase; }
.s-brand-name {
  font-family: var(--font-titulo); font-size: clamp(17px, 4.4vw, 21px);
  letter-spacing: .01em;
}
/* En el cajón del celular no son versalitas apretadas: son renglones para
   tocar con el dedo. */
@media (max-width: 720px) {
  .con-js .s-nav a { text-transform: none; letter-spacing: 0; font-size: 16px; }
}

/* --- Portada ------------------------------------------------------------- */
/* Sin foto, el degradado de la base se ve lavado con estos cremas. Un lavado
   del color del cliente, apenas, y el peso lo lleva la tipografía. */
.s-hero:not(.s-hero-foto) {
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--marca) 14%, var(--papel)), var(--papel));
  border-bottom: 1px solid var(--linea);
}

/* --- Secciones ----------------------------------------------------------- */
/* El título de sección va como el de una nota: centrado y con aire abajo. */
.s-sec-title { justify-content: center; text-align: center; margin-bottom: calc(var(--gap) * 1.5); }
.s-sec-title::after, .s-sec-title::before {
  content: ""; flex: 0 0 auto; width: 28px; height: 1px; background: var(--linea);
}

/* --- Tarjeta ------------------------------------------------------------- */
/* Sin caja: la foto ya recorta contra el fondo y el borde solo la ensucia.
   Lo que separa una tarjeta de la otra es el aire, no una línea. */
.s-card { border: 0; background: transparent; border-radius: 0; }
.s-card:hover { transform: translateY(-4px); box-shadow: none; }
.s-card-foto { border-radius: var(--radio); box-shadow: var(--sombra); }
.s-card-body { padding: 14px 2px 0; }
.s-card-body h3 { letter-spacing: -.01em; }
.s-card-precio { font-family: var(--font-texto); font-weight: 600; }