/* ============================================================================
   Agenda de Orissa — sistema visual.

   La ESTRUCTURA sigue siendo la de Calendly (probada y pedida por el cliente).
   Lo que cambia es la piel, y no está inventada: sale del «Manual de marca ·
   Orissa Claver».

     Colores (del manual, tal cual):
       #ffffff · #f5f4f3 · #efebe2 · #efe4d7 · #302621

   La página va sobre el BEIGE (#efe4d7) y lo resaltado en el café (#302621).
   Detrás del beige hay un dibujo muy leve —arcos y hojas de palma— para que el
   fondo no sea sólo un color plano.

     Tipografías (del manual, con sus usos):
       CINZEL   → titulares          («INVITACIÓN EXCLUSIVA»)
       Elagern  → itálica de acento  («Almuerzo para inversionistas»)
       Raleway  → cuerpo y controles

   El dorado no viene escrito como hexadecimal en el manual, así que se muestreó
   del ARCHIVO del logo que él trae: el tono medio del metal es #B08D53 y el
   brillo #F8E7AF. Se usa para filos y detalles, nunca para texto pequeño sobre
   blanco ni sobre el beige — a ese tamaño no da contraste suficiente.

   Elagern es una tipografía comercial; el archivo salió de las guidelines de
   Frida Kahlo que ya estaban en la máquina.
   ========================================================================= */

@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Elagern";
  src: url("/fonts/elagern.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Superficies. El fondo es el BEIGE del manual (#efe4d7) y lo resaltado va en
     su café (#302621), que es lo que pidió Jean. Encima del beige, las tarjetas
     suben a blanco para que se despeguen. */
  --papel: #efe4d7;
  --carta: #ffffff;
  --sutil: #f5f4f3;
  --sutil-mas: #efebe2;

  /* tinta: el marrón oscuro de la marca, nunca negro puro */
  --titulo: #302621;
  --tinta: #302621;
  --tinta-suave: #56463c;
  /* Sobre beige los medios tonos tienen que bajar: el #8a7a6d de antes servía
     sobre blanco pero aquí se queda en 3,3:1. */
  --gris: #6d5d50;
  /* Los días no disponibles y el botón apagado usan este tono: a #8a7a6d se
     quedaban en 4,1:1 sobre la tarjeta blanca. */
  --gris-claro: #7f6f61;
  --nombre: #6d5d50;

  /* líneas cálidas, no grises */
  --linea: #e0d3c2;
  --linea-fuerte: #cdbca6;

  /* «Las cosas resaltadas en el café»: el acento es el marrón de la marca. */
  --acento: #302621;
  --acento-fuerte: #1d1713;
  --acento-texto: #ffffff;
  --acento-suave: #efe4d7;
  --acento-borde: #cdbca6;

  /* El dorado del manual sirve para FILOS, no para texto: sobre el beige se
     queda en 2,5:1. Lo que va escrito en dorado usa el tono profundo. */
  --oro: #b08d53;
  --oro-claro: #7a5c20;

  /* Los eventos de la semana: ocupan la hora, así que tienen que distinguirse
     de un horario libre sin salirse de la marca. */
  --evento: #7a5c20;
  --evento-fondo: #efebe2;

  --peligro: #96400f;

  --display: "Cinzel", "Times New Roman", serif;
  --acentoFuente: "Elagern", "Cinzel", serif;
  --ui: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r: 4px;
  --r-boton: 3px;
  --sombra: 0 1px 2px rgba(48, 38, 33, 0.04), 0 16px 38px -22px rgba(48, 38, 33, 0.22);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  /* «Que el fondo no sea sólo el color»: encima del beige van los motivos de
     marca de los dos proyectos —la hoja de ginkgo de 26&2 y la línea enroscada
     de Frida Kahlo— dibujados muy leves. */
  background-color: var(--papel);
  background-image: url("/img/fondo.svg");
  background-repeat: repeat;
  background-size: 620px 620px;
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Los titulares en Cinzel y en versalitas con tracking, como los usa su
   manual («INVITACIÓN EXCLUSIVA»). */
h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--titulo);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}

/* La itálica de la marca, para las frases que acompañan a un titular. */
.acento-italica {
  font-family: var(--acentoFuente);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.cifras,
.celda-num,
.slot b,
.slot span,
.resumen-txt b,
.listo-ficha dd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.etiqueta {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

.envoltura {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* -------------------------------------------------------------- controles */

.boton {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-texto);
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: var(--r-boton);
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.boton:hover:not(:disabled) {
  background: var(--acento-fuerte);
  border-color: var(--oro);
}
.boton:disabled {
  background: transparent;
  border-color: var(--linea-fuerte);
  color: var(--gris-claro);
  cursor: not-allowed;
}

.boton-liso {
  background: transparent;
  border: 1px solid var(--acento);
  color: var(--acento);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-boton);
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.boton-liso:hover {
  background: var(--acento);
  color: var(--acento-texto);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 1px solid var(--oro);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- utiles */

.oculto {
  display: none !important;
}

.aviso {
  font-size: 15px;
  color: var(--tinta-suave);
  background: var(--sutil);
  border-left: 2px solid var(--oro);
  padding: 14px 16px;
}

.cargando {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gris);
  padding: 26px 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}