/* REASCYL — páginas internas (Qué es, Participa). Usa los tokens --rc-* */

#rc-inner .rc-wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }
#rc-inner h1,#rc-inner h2,#rc-inner h3{ font-family:var(--rc-display); }
#rc-inner .rc-kicker{ font-family:var(--rc-mono); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--rc-earth-deep); margin:0 0 12px; }
.rc-h1{ font-size:clamp(2rem,5vw,2.9rem); color:var(--rc-ink); margin:0 0 16px; line-height:1.07; letter-spacing:-.01em; }
#rc-inner .rc-h2{ font-size:clamp(1.5rem,3.2vw,2rem); color:var(--rc-ink); margin:0 0 14px; line-height:1.15; }
#rc-inner .rc-lead{ color:var(--rc-ink-soft); max-width:64ch; font-size:1.12rem; }
#rc-inner p{ color:var(--rc-ink-soft); max-width:70ch; font-size:1.05rem; }
#rc-inner a{ color:var(--rc-green); }

.rc-inner-hero{ padding:74px 0 26px; background:radial-gradient(120% 90% at 88% -10%,var(--rc-green-wash),transparent 55%),var(--rc-cream); }
.rc-section{ padding:46px 0; background:var(--rc-cream); }
.rc-section--alt{ background:var(--rc-white); border-top:1px solid var(--rc-line); border-bottom:1px solid var(--rc-line); }

/*
 * FOTO DE LA PAGINA (imagen destacada)
 *
 * Sale de la "Imagen destacada" de WordPress, no de un <img> pegado en el
 * editor. Motivo: en esta plantilla el contenido del editor se pinta AL FINAL de
 * la pagina, asi que una foto metida ahi acabaria debajo de las preguntas
 * frecuentes. Con la imagen destacada, la plantilla decide donde va — aqui,
 * justo debajo del titular — y quien edita solo tiene que subirla al recuadro de
 * siempre. Ver mu-plugins/reascyl-editor-avisos.php.
 *
 * El pie se lee de la "Leyenda" del archivo en la biblioteca de medios, y el
 * texto alternativo del campo "Texto alternativo". Los dos son opcionales; sin
 * leyenda no se pinta el <figcaption>.
 */
.rc-foto{ margin:0; padding:26px 0 0; background:var(--rc-cream); }
.rc-foto-marco{
  max-width:1000px; margin:0 auto; padding:0 24px;
}
.rc-foto img{
  display:block; width:100%; height:auto;
  border-radius:16px; border:1px solid var(--rc-line);
  /* La sombra la separa del crema del fondo: sin ella una foto clara y de bordes
     claros se queda flotando sin apoyo. */
  box-shadow:0 26px 54px -34px rgba(20,40,30,.55);
}
.rc-foto-pie{
  max-width:70ch; margin:12px auto 0; padding:0 24px;
  font-size:.92rem; line-height:1.45; color:var(--rc-ink-soft); text-align:center;
}

/* Tabla comparativa */
.rc-vs{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--rc-line); border-radius:14px; overflow:hidden; margin-top:18px; }
.rc-vs th,.rc-vs td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--rc-line); font-size:1rem; }
.rc-vs thead th{ background:var(--rc-cream-deep); font-family:var(--rc-display); color:var(--rc-ink); }
.rc-vs thead th.is-sol{ background:var(--rc-green-deep); color:#fff; }
.rc-vs td:first-child{ font-family:var(--rc-mono); font-size:.78rem; color:var(--rc-earth-deep); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.rc-vs td.is-sol{ background:var(--rc-green-wash); color:var(--rc-green-deep); font-weight:600; }
.rc-vs tr:last-child td{ border-bottom:0; }

/* Herramientas */
.rc-tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px; }
.rc-tool{ background:#fff; border:1px solid var(--rc-line); border-radius:14px; padding:22px 24px; }
.rc-tool-t{ font-size:1.2rem; color:var(--rc-green-deep); margin:0 0 6px; }

/* Columnas (Participa) */
.rc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.rc-card2{ background:#fff; border:1px solid var(--rc-line); border-radius:18px; padding:30px 32px; }
.rc-card2--sol{ background:var(--rc-green-wash); border-color:rgba(47,107,79,.25); }
.rc-card2 .rc-h2{ font-size:1.4rem; }
.rc-reqs{ margin:14px 0 0; padding:0; list-style:none; max-width:70ch; }
.rc-reqs li{ position:relative; padding-left:28px; margin-bottom:12px; color:var(--rc-ink-soft); }
.rc-reqs li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--rc-green-bright); box-shadow:0 0 0 3px var(--rc-green-wash); }

/* Botones */
.rc-section-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; align-items:center; }
.rc-btn{ display:inline-block; font-weight:600; font-size:.95rem; padding:.72rem 1.3rem; border-radius:10px; text-decoration:none; font-family:var(--rc-body); transition:background .2s,transform .2s var(--rc-ease),color .2s,border-color .2s; margin-top:14px; }
/* Primary: ahora en estilo outline, mismo fondo que la página (crema/transparente). Hover blanco total. */
.rc-btn--primary{ background:transparent; color:var(--rc-green-deep); border:2px solid var(--rc-green); }
.rc-btn--primary:hover{ background:#ffffff; color:var(--rc-green-deep); border-color:var(--rc-green-deep); transform:translateY(-2px); }
/* Ghost: outline más fino para mantener jerarquía visual respecto al primary. Hover blanco total. */
.rc-btn--ghost{ background:transparent; color:var(--rc-green-deep); border:1.5px solid var(--rc-green); }
.rc-btn--ghost:hover{ background:#ffffff; color:var(--rc-green-deep); border-color:var(--rc-green-deep); }

@media (max-width:760px){
  .rc-tools,.rc-cols{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .rc-btn{ transition:none; } }