/*
 Theme Name:   Hello Elementor Child — Rodríguez Cons
 Theme URI:    https://rodriguez-cons.com
 Description:  Child theme de Hello Elementor con sistema de diseño Rodríguez Cons Abogados
 Author:       [Tu nombre]
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ------------------------------------------------------------
   NOTA: Todos los tokens (--rc-*) viven en assets/css/rc-tokens.css,
   que se encola ANTES que este archivo (ver functions.php).
   Aquí solo van la base global, el contenedor, las utilidades y
   los componentes que consumen esos tokens.
   ------------------------------------------------------------ */

/* ============================================================
   BASE GLOBAL
   ============================================================ */
body {
  font-family: var(--rc-font-sans);
  font-size: var(--rc-fs-body);
  line-height: 1.65;
  color: var(--rc-ink);
  background-color: var(--rc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rc-font-sans);
  font-weight: 800;
  color: var(--rc-navy-900);
  line-height: 1.08;
}

h1 { font-size: var(--rc-fs-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--rc-fs-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }
h3 { font-size: var(--rc-fs-h3); font-weight: 700; line-height: 1.2; }
h4 { font-size: var(--rc-fs-h4); font-weight: 700; line-height: 1.3; }

p   { line-height: 1.65; }
a   { color: var(--rc-navy); transition: color var(--rc-dur) var(--rc-ease); }
a:hover { color: var(--rc-burgundy); }

::selection {
  background: var(--rc-gold-300);
  color: var(--rc-navy-900);
}

/* ============================================================
   CONTENEDOR
   ============================================================ */
.e-container,
.elementor-section > .elementor-container {
  max-width: var(--rc-container);
}

/* ============================================================
   CLASES DE UTILIDAD (disponibles en Elementor → CSS class)
   ============================================================ */

/* Superficies */
.rc-bg-paper    { background-color: var(--rc-paper) !important; }
.rc-bg-surface  { background-color: var(--rc-surface) !important; }
.rc-bg-surface2 { background-color: var(--rc-surface-2) !important; }
.rc-bg-navy     { background-color: var(--rc-navy-800) !important; }
.rc-bg-navy-deep{ background-color: var(--rc-navy-900) !important; }
.rc-bg-burgundy { background-color: var(--rc-burgundy-700) !important; }

/* Texto sobre fondos oscuros */
.rc-bg-navy *,
.rc-bg-navy-deep *,
.rc-bg-burgundy * { color: var(--rc-on-dark); }

/* Kicker / label */
.rc-label {
  font-size: var(--rc-fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-gold-700);
}

/* Acento serif (cifras y citas) */
.rc-serif {
  font-family: var(--rc-font-serif);
  font-style: italic;
}

/* Métrica destacada */
.rc-metric-num {
  font-family: var(--rc-font-serif);
  font-weight: 600;
  color: var(--rc-navy-900);
}

/* Cita / testimonio */
.rc-quote {
  font-family: var(--rc-font-serif);
  font-style: italic;
  color: var(--rc-ink-2);
}

/* ============================================================
   BOTONES
   ============================================================ */
.rc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--rc-r-md);
  font-family: var(--rc-font-sans);
  font-size: var(--rc-fs-small);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rc-dur) var(--rc-ease),
              transform 0.15s var(--rc-ease),
              box-shadow var(--rc-dur) var(--rc-ease);
  border: none;
  text-decoration: none;
}

/* Primario — navy */
.rc-btn,
.elementor-button.rc-btn-primary,
.wp-block-button__link {
  background-color: var(--rc-navy);
  color: var(--rc-on-dark);
}
.rc-btn:hover {
  background-color: var(--rc-navy-900);
  transform: translateY(-1px);
  box-shadow: var(--rc-sh-md);
}

/* Acento — burdeos */
.rc-btn-accent {
  background-color: var(--rc-burgundy-700);
  color: var(--rc-on-dark);
}
.rc-btn-accent:hover {
  background-color: var(--rc-burgundy-900);
}

/* Ghost */
.rc-btn-ghost {
  background-color: transparent;
  color: var(--rc-navy);
  border: 1.5px solid var(--rc-border-2);
}
.rc-btn-ghost:hover {
  border-color: var(--rc-navy);
}

/* Ghost sobre oscuro */
.rc-btn-ghost-dark {
  background-color: transparent;
  color: var(--rc-on-dark);
  border: 1.5px solid var(--rc-border-dark);
}

/* ============================================================
   ACCESIBILIDAD — focus ring dorado
   ============================================================ */
a:focus-visible,
button:focus-visible,
.rc-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2.5px solid var(--rc-gold);
  outline-offset: 3px;
}

/* ============================================================
   RESPONSIVE (reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}