/* ============================================================
   LA OBRA — CSS de marca v8
   Estructura: grilla de Odoo/Bootstrap (simetría por construcción).
   COLOR: escala completa derivada de #a34522 (terracota base).
   Cambiar un color = cambiar una variable.
   ============================================================ */

.lo-wrapper {
  /* ESCALA DERIVADA DE #a34522 (HSL 16°,65%,39%) */
  --lo-50: #f8e5dd;   /* tint muy claro  (fondos suaves)     */
  --lo-100: #f2cdc0;  /* tint claro      (detalles, labels)  */
  --lo-200: #e6a289;  /* tint medio      (acentos s/fondo oscuro) */
  --lo-300: #da744e;  /* claro           (hovers, bordes)    */
  --lo-400: #c65429;  /* semiclaro                           */
  --lo-500: #a34522;  /* BASE — primario de marca            */
  --lo-600: #83371b;  /* oscuro          (hovers)            */
  --lo-700: #612914;  /* muy oscuro                          */
  --lo-800: #3f1b0d;  /* sombra del tono                     */

  --lo-cream: #faf6ee;
  --lo-cream-soft: #f3ecdd;
  --lo-charcoal: #241c1c;

  font-family: 'Work Sans', system-ui, sans-serif;
  background: var(--lo-cream);
  color: var(--lo-charcoal);
}
.lo-wrapper h1, .lo-wrapper h2, .lo-wrapper h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.01em;
}

/* ---- Paleta ---- */
.lo-bg-cream { background: var(--lo-cream); }
.lo-bg-cream-soft { background: var(--lo-cream-soft); }
.lo-bg-charcoal { background: var(--lo-charcoal); }
.lo-accent { color: var(--lo-200); }
.lo-accent-dark { color: var(--lo-500); }
.lo-eyebrow {
  color: var(--lo-300);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 13px;
  font-weight: 600;
}
.lo-eyebrow-dark { color: var(--lo-500); text-transform: uppercase; letter-spacing: 0.3em; font-size: 13px; font-weight: 600; }

/* ---- Hero ---- */
.lo-hero-bin { background: var(--lo-charcoal); }
.lo-cover { object-fit: cover; }
.lo-hero-velo {
  background: linear-gradient(to right, rgba(36,28,28,0.92) 0%, rgba(36,28,28,0.6) 55%, rgba(36,28,28,0.3) 100%);
}
.min-vh-75 { min-height: 75vh; }

/* ---- Botones ---- */
.btn-terra {
  background: var(--lo-500);
  color: var(--lo-cream);
  border-radius: 9999px;
  padding: 14px 36px;
  font-weight: 600;
  border: none;
}
.btn-terra:hover { background: var(--lo-600); color: var(--lo-cream); }
.btn-ghost {
  border: 1px solid rgba(250,246,238,0.5);
  color: var(--lo-cream);
  border-radius: 9999px;
  padding: 14px 36px;
  font-weight: 600;
}
.btn-ghost:hover { background: var(--lo-cream); color: var(--lo-charcoal); }

/* ---- Filosofia ---- */
.lo-figura { aspect-ratio: 4/3; }
.lo-badge {
  position: absolute;
  bottom: -20px;
  left: 24px;
  background: var(--lo-charcoal);
  color: var(--lo-cream);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.lo-badge-num { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; }
.lo-badge-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--lo-100); }
.lo-pilar { border: 1px solid transparent; transition: all .3s ease; }
.lo-pilar:hover { border-color: var(--lo-300); background: var(--lo-cream-soft); }
.lo-icono {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 9999px;
  background: var(--lo-50); font-size: 26px;
}

/* ---- Tarjetas / enlaces ---- */
.lo-tarjeta { transition: transform .4s ease, box-shadow .4s ease; }
.lo-tarjeta:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(36,28,28,0.25); }
.lo-tag {
  background: rgba(250,246,238,0.95);
  color: var(--lo-600);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  border-radius: 9999px; padding: 5px 14px;
}
.lo-enlace { color: var(--lo-500); text-decoration: none; }
.lo-enlace:hover { color: var(--lo-600); }

/* ---- Proceso ---- */
.lo-num {
  width: 56px; height: 56px; line-height: 56px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--lo-300);
  box-shadow: 0 6px 20px rgba(36,28,28,0.08);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700; color: var(--lo-500);
}

/* ---- Voces ---- */
.lo-voz {
  background: #fff;
  border: 1px solid var(--lo-100);
  box-shadow: 0 1px 3px rgba(36,28,28,0.05);
}

/* ---- Escala visible (utilidades por si el constructor las necesita) ---- */
.lo-c50 { background: var(--lo-50); } .lo-c100 { background: var(--lo-100); }
.lo-c200 { background: var(--lo-200); } .lo-c300 { background: var(--lo-300); }
.lo-c400 { background: var(--lo-400); } .lo-c500 { background: var(--lo-500); }
.lo-c600 { background: var(--lo-600); } .lo-c700 { background: var(--lo-700); }
.lo-c800 { background: var(--lo-800); }