/* ============================================================
   DULCE TULLI — sistema de diseño
   Paleta y tipografía tomadas del catálogo impreso: fondo seda,
   panel agua, chocolate profundo y el rosa del batidor.
   ============================================================ */

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fuentes/cormorant.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('/fuentes/cormorant-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fuentes/jost.woff2') format('woff2');
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/great-vibes.woff2') format('woff2');
}

:root {
  /* --- tinta --- */
  --chocolate:      #43221A;   /* los círculos y los títulos del catálogo */
  --chocolate-med:  #5E3729;
  --cacao:          #7A6559;   /* sesgado a marrón; oscurecido para que se lea */
  --cacao-tenue:    #BFAEA4;

  /* --- grounds ---
     Blanco de base. El color entra como acento, nunca como superficie grande:
     un bloque de agua a página completa pesa demasiado. */
  --seda:           #FFFFFF;
  --surface:        #FFFFFF;
  --surface-2:      #F8F6F4;   /* gris cálido apenas perceptible */

  /* --- agua --- */
  --agua:           #B4D3CE;   /* el del catálogo, solo para detalles */
  --agua-claro:     #EEF5F4;   /* lavado, para fondos amplios */
  --agua-oscuro:    #5F938A;

  /* --- rosa del batidor --- */
  --rosa:           #E7B3C0;
  --rosa-tenue:     #FBF2F4;
  --rosa-fuerte:    #BE6579;

  --linea:          #EFEAE5;
  --linea-media:    #DDD5CD;

  --ok:             #4E8A6B;
  --alerta:         #B5822F;
  --stop:           #A94A3F;

  /* Sombras muy contenidas: la elegancia viene del aire, no del relieve. */
  --sombra-sm: 0 1px 2px rgba(67,34,26,.04);
  --sombra-md: 0 2px 10px rgba(67,34,26,.06), 0 12px 36px rgba(67,34,26,.05);
  --sombra-lg: 0 10px 30px rgba(67,34,26,.10), 0 40px 80px rgba(67,34,26,.10);

  /* --- tipografía ---
     titulo → Cormorant Garamond, serif de alto contraste, en peso liviano
     texto  → Jost, geométrica de líneas puras
     firma  → Great Vibes, solo para el nombre de la marca */
  --titulo: 'Cormorant', 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --texto: 'Jost', 'Futura', 'Century Gothic', 'Segoe UI', sans-serif;
  --firma: 'Great Vibes', 'Snell Roundhand', cursive;
  --mono: 'Consolas', ui-monospace, monospace;

  /* El sitio es blanco siempre, tenga el celular el tema que tenga: una
     pastelería no se lee en modo oscuro. color-scheme evita además que el
     navegador invierta los controles de formulario por su cuenta. */
  color-scheme: light;

  --radio: 10px;
  --radio-lg: 20px;
  --radio-panel: 34px;      /* el panel agua del catálogo va bien redondeado */
  --max: 1180px;
}

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

body {
  margin: 0;
  background: var(--seda);
  color: var(--chocolate);
  font-family: var(--texto);
  font-size: 16px;
  font-weight: 400;          /* Jost en 300 se lee lavada sobre blanco */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Cormorant rinde chico y luce mejor en pesos livianos y tamaños grandes. */
h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .004em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; font-family: var(--texto); color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; }

:focus-visible { outline: 1.5px solid var(--rosa-fuerte); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* El rótulo en versalitas espaciadas es el gesto de elegancia más barato
   que existe, y el que más rinde. */
.eyebrow {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cacao);
}

/* Los precios en la serif, como en una carta de restaurante. */
.precio, .item .imp, .totales .fila span:last-child, .kpi .val {
  font-family: var(--titulo);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================ botones */
.btn {
  font-family: var(--texto);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 12px 24px;
  background: var(--chocolate);
  color: var(--seda);
  transition: background .25s, color .25s, border-color .25s, opacity .2s;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.btn:hover:not(:disabled) { background: var(--chocolate-med); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn.ghost {
  background: transparent;
  color: var(--chocolate);
  border: 1px solid var(--linea-media);
}
.btn.ghost:hover:not(:disabled) { background: transparent; border-color: var(--chocolate); }

.btn.rosa { background: var(--rosa-fuerte); color: #FFF; }
.btn.rosa:hover:not(:disabled) { background: var(--chocolate); }
.btn.wa { background: #2E7D53; color: #FFF; }
.btn.wa:hover:not(:disabled) { background: #24603F; }
.btn.ancho { width: 100%; padding: 15px 26px; }
.btn.chico { padding: 9px 18px; font-size: .68rem; letter-spacing: .14em; }

/* ============================================================ formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label {
  font-size: .65rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cacao);
}

.form { display: flex; flex-direction: column; gap: 14px; }
.form .par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Campos con una sola línea abajo: pesa mucho menos que una caja completa. */
.form input, .form select, .form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linea-media);
  border-radius: 0;
  padding: 9px 2px;
  font-size: .95rem;
  font-weight: 400;
  transition: border-color .25s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-bottom-color: var(--chocolate);
}
.form textarea { resize: vertical; min-height: 58px; }
.form .ayuda { font-size: .78rem; color: var(--cacao); line-height: 1.6; }
.form .err { font-size: .82rem; color: var(--stop); }

/* ============================================================ avisos */
.aviso {
  position: fixed; bottom: 26px; left: 50%; z-index: 950;
  transform: translate(-50%, 20px);
  background: var(--chocolate); color: var(--seda);
  border-radius: 100px; padding: 13px 26px;
  font-size: .8rem; letter-spacing: .04em;
  box-shadow: var(--sombra-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  max-width: min(92vw, 560px);
}
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.aviso.mal { background: var(--stop); color: #FFF; }

.cargando {
  padding: 60px 20px; text-align: center;
  color: var(--cacao); font-style: italic;
  font-family: var(--titulo); font-size: 1.2rem;
}