/* ============================================================
   RevHost · Identidad «Casa en orden» — 2026-07-18
   Hospitalidad cálida × precisión financiera.
   Paleta: tinta bosque · verde · terracota · algodón · arena.
   Tipos: Fraunces (display) · Instrument Sans (texto) ·
          Spline Sans Mono (cifras).

   Capa PROPIA del sitio público. No sustituye tokens.css ni
   editorial.css (que siguen siendo del producto interno):
   .theme-casa REMAPEA las custom properties que los componentes
   editoriales ya consumen, y añade componentes rh-* para las
   páginas de marketing.
   ============================================================ */

.theme-casa {
  /* -------- Núcleo -------- */
  --ink:              #153B2F;   /* tinta bosque · texto y superficies de peso */
  --ink-deep:         #0D2A20;
  --ink-soft:         #1C4636;
  --ink-warm:         #23503F;
  --ink-surface:      #153B2F;
  --carbon:           #1C4636;
  --on-ink:           #F4EFE6;   /* marfil sobre verde */

  /* -------- Acento (los nombres --mint son herencia del sistema
     anterior; aquí valen VERDE) -------- */
  --mint:             #93C9A8;   /* salvia clara · acento legible sobre tinta */
  --mint-soft:        #DFEDE3;   /* relleno claro */
  --mint-ink:         #1C5A43;   /* verde primario legible sobre algodón */
  --on-mint:          #0D2A20;
  --signal:           #93C9A8;
  --signal-deep:      #1C5A43;
  --signal-bright:    #A9D6BB;
  --signal-soft:      #DFEDE3;
  --on-signal:        #0D2A20;

  /* -------- Superficies cálidas -------- */
  --canvas:           #FBF8F3;   /* algodón */
  --cream:            #FBF8F3;
  --paper:            #FFFDF9;   /* blanco cálido · tarjetas */
  --bone:             #F2ECE1;   /* arena · paneles */
  --mist:             #F2ECE1;
  --fog:              #E9E1D3;

  /* -------- Neutros -------- */
  --slate:            #56675C;   /* gris verdoso cálido */
  --slate-light:      #8B9A8E;
  --steel:            #8B9A8E;
  --graphite:         #56675C;
  --charcoal:         #23503F;
  --hair:             #E7DFD0;   /* lino */
  --hairline:         #E7DFD0;
  --hairline-strong:  #CFC2A9;
  --hair-dark:        #23503F;

  /* -------- Funcionales -------- */
  --down:             #C4552F;   /* terracota */
  --down-soft:        #F5DDCF;
  --loss:             #B14A28;
  --loss-soft:        #F5DDCF;
  --amber:            #C99B3F;
  --amber-soft:       #F1E4C7;
  --warning:          #8F6B22;
  --warning-soft:     #F1E4C7;
  --gain:             #1C5A43;
  --gain-soft:        #DFEDE3;

  --link:             #153B2F;
  --link-pressed:     #1C5A43;

  /* -------- Tipos -------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- Elevación cálida -------- */
  --elev-1: 0 0 0 1px var(--hair);
  --elev-2: 0 1px 2px rgba(21,59,47,0.05), 0 8px 24px rgba(21,59,47,0.07);
  --elev-3: 0 16px 40px rgba(21,59,47,0.16);
  --elev-icon: 0 8px 24px rgba(21,59,47,0.18), 0 2px 6px rgba(21,59,47,0.08);

  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Fraunces respira distinto que un sans apretado: bajo .theme-casa
   los display editoriales sueltan el tracking negativo. */
.theme-casa .display-xxl, .theme-casa .display-xl, .theme-casa .display-lg,
.theme-casa .display-md, .theme-casa .display-sm, .theme-casa .display-xs {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 90;
}
.theme-casa .btn-ed { border-radius: 999px; }
.theme-casa .btn-primary { background: var(--mint-ink); color: #FFFDF9; }
.theme-casa .btn-primary:hover { background: #124534; color: #FFFDF9; }
.theme-casa .text-input-ed:focus { border-color: var(--mint-ink); box-shadow: 0 0 0 3px var(--mint-soft); }

/* ============================================================
   Componentes rh-* · páginas de marketing
   ============================================================ */

/* ---------- Tipografía ---------- */
.rh-display {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 120;
}
.rh-display em {
  font-style: italic;
  font-weight: 480;
  color: var(--mint-ink);
}
.rh-h1 { font-size: clamp(42px, 6.4vw, 76px); }
.rh-h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; }
.rh-h3 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.18; }

.rh-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rh-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--down);
  display: inline-block;
}
.rh-eyebrow.sin-linea::before { display: none; }

.rh-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}
.rh-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Botones ---------- */
.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font: 600 15px/1 var(--font-body);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.rh-btn:active { transform: translateY(1px); }
.rh-btn-primario {
  background: var(--mint-ink);
  color: #FFFDF9;
  box-shadow: 0 10px 26px -10px rgba(28,90,67,0.55);
}
.rh-btn-primario:hover { background: #124534; }
.rh-btn-claro {
  background: var(--on-ink);
  color: var(--ink);
}
.rh-btn-claro:hover { background: #FFFFFF; }
.rh-btn-borde {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
}
.rh-btn-borde:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rh-btn-borde-claro {
  background: transparent;
  color: var(--on-ink);
  box-shadow: inset 0 0 0 1.5px rgba(244,239,230,0.36);
}
.rh-btn-borde-claro:hover { box-shadow: inset 0 0 0 1.5px rgba(244,239,230,0.8); }

/* ---------- Superficies ---------- */
.rh-shell { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.rh-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 18px;
}
.rh-card-tinta {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 22px;
}
.rh-marco-foto {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.rh-marco-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rh-marco-arco {
  border-radius: 260px 260px 22px 22px;   /* arco de patio mexicano */
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.rh-marco-arco img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Screenshot del producto: instrumento oscuro sobre sitio claro */
.rh-instrumento {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(21,59,47,0.14);
  box-shadow: 0 32px 64px -24px rgba(13,42,32,0.4), 0 6px 18px rgba(13,42,32,0.12);
  background: #0D2A20;
}
.rh-instrumento img { display: block; width: 100%; height: auto; }

/* ---------- Texturas ---------- */
.rh-grano { position: relative; }
.rh-grano::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Franja de autoridad (cifras del operador) ---------- */
.rh-franja {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.rh-franja > div {
  flex: 1 1 200px;
  padding: 26px 28px;
  border-left: 1px solid var(--hair);
}
.rh-franja > div:first-child { border-left: 0; }
.rh-franja .cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.rh-franja .cifra .up { color: var(--mint-ink); }
.rh-franja .rotulo {
  font-size: 13px;
  color: var(--slate);
  margin-top: 6px;
  line-height: 1.45;
}

/* ---------- FAQ ---------- */
.rh-faq {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 22px 26px;
}
.rh-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 600 16px/1.35 var(--font-body);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.rh-faq summary .chev { transition: transform .2s ease; color: var(--slate); flex-shrink: 0; }
.rh-faq[open] summary .chev { transform: rotate(180deg); }
.rh-faq p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--slate); }

/* ---------- Animaciones ---------- */
@keyframes rh-sube {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.rh-entra   { animation: rh-sube 0.7s cubic-bezier(.2,.7,.25,1) both; }
.rh-entra-2 { animation: rh-sube 0.7s cubic-bezier(.2,.7,.25,1) 0.12s both; }
.rh-entra-3 { animation: rh-sube 0.7s cubic-bezier(.2,.7,.25,1) 0.24s both; }
.rh-entra-4 { animation: rh-sube 0.7s cubic-bezier(.2,.7,.25,1) 0.36s both; }

.rh-revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.25,1), transform 0.7s cubic-bezier(.2,.7,.25,1);
}
.rh-revela.visto { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .rh-entra, .rh-entra-2, .rh-entra-3, .rh-entra-4 { animation: none; }
  .rh-revela { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rh-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .rh-franja > div { flex: 1 1 45%; border-left: 0; border-top: 1px solid var(--hair); }
  .rh-franja > div:first-child, .rh-franja > div:nth-child(2) { border-top: 0; }
}
@media (max-width: 720px) {
  .rh-shell { padding: 0 20px; }
  .rh-seccion { padding: 64px 0 !important; }
}