﻿/* ===== RUCAR — hoja de estilos compartida =====
   Pega este bloque UNA VEZ en: Apariencia > Personalizar > CSS adicional */


:root{
  --ink:#16151d;
  --paper:#faf8f4;
  --muted:#68667a;
  --line:#e8e3da;
  --accent:#d21a63;
  --accent2:#f7941d;
  --gradient:linear-gradient(135deg,var(--accent),var(--accent2));
  --radius:18px;
  --shadow:0 20px 50px -25px rgba(22,21,29,.35);
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#f3f1ec; --paper:#151319; --muted:#a5a2b3; --line:#2b2833; --shadow:0 20px 50px -25px rgba(0,0,0,.6); }
}
:root[data-theme="dark"]{ --ink:#f3f1ec; --paper:#151319; --muted:#a5a2b3; --line:#2b2833; }
:root[data-theme="light"]{ --ink:#16151d; --paper:#faf8f4; --muted:#68667a; --line:#e8e3da; }

.rucar{ color:var(--ink); background:var(--paper); font-family:'Manrope',sans-serif; }
.rucar h1,.rucar h2,.rucar h3{ font-family:'Fraunces',serif; font-weight:600; line-height:1.1; text-wrap:balance; margin:0 0 .5em; }
.rucar p{ color:var(--muted); line-height:1.65; margin:0 0 1em; }
section.rucar{ padding:clamp(48px,8vw,110px) clamp(20px,6vw,60px); }
.rucar .eyebrow{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.rucar .wrap{ max-width:1140px; margin:0 auto; }
.rucar .grid{ display:grid; gap:28px; }
.rucar .g2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.rucar .g3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* Texto con degradado animado, para 1-2 palabras clave por página */
.rucar .shine{ background:linear-gradient(90deg,var(--ink),var(--accent),var(--accent2),var(--ink)); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
@keyframes shine{ to{ background-position:300% center; } }

/* Enlaces con subrayado animado */
.rucar .link-anim{ position:relative; color:var(--ink); text-decoration:none; font-weight:600; }
.rucar .link-anim::after{ content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.rucar .link-anim:hover::after{ transform:scaleX(1); transform-origin:left; }

.rucar .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background-position .5s ease; }
.rucar .btn-primary{ background:var(--gradient); background-size:200% auto; background-position:0 center; color:#fff; box-shadow:0 10px 30px -10px rgba(210,26,99,.5); }
.rucar .btn-primary:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 16px 34px -10px rgba(210,26,99,.6); background-position:100% center; }
.rucar .btn-ghost{ border:1.5px solid var(--line); color:var(--ink); transition:transform .35s ease, border-color .35s ease, color .35s ease; }
.rucar .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
.rucar .btn .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

.rucar .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; will-change:transform; }
.rucar .card:hover{ transform:translateY(-8px) rotate(-.3deg); box-shadow:var(--shadow); border-color:transparent; }
.rucar .icon-badge{ width:52px; height:52px; border-radius:14px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; color:#fff; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.rucar .card:hover .icon-badge{ transform:rotate(10deg) scale(1.1); }

/* Blobs de fondo animados */
.rucar .blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; background:var(--gradient); animation:float 14s ease-in-out infinite; z-index:0; }
.rucar .blob.b2{ animation-duration:18s; animation-delay:-4s; opacity:.25; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(30px,-40px) scale(1.15);} }

/* Reveal on scroll (con variantes de dirección) */
.rucar .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.rucar .reveal.left{ transform:translateX(-32px); }
.rucar .reveal.right{ transform:translateX(32px); }
.rucar .reveal.zoom{ transform:scale(.92); }
.rucar .reveal.in{ opacity:1; transform:translate(0,0) scale(1); }
.rucar .stagger.in > *{ transition-delay:calc(var(--i,0) * 100ms); }

/* Contador */
.rucar .stat b{ font-family:'Fraunces',serif; font-size:clamp(2.2rem,4vw,3rem); display:block; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Acordeón FAQ */
.rucar .faq{ border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; }
.rucar .faq summary{ cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; display:flex; justify-content:space-between; align-items:center; transition:color .3s ease; }
.rucar .faq summary::-webkit-details-marker{ display:none; }
.rucar .faq summary::after{ content:'+'; color:var(--accent); font-size:1.4rem; transition:transform .35s ease; }
.rucar .faq[open] summary::after{ transform:rotate(45deg); }
.rucar .faq[open] summary{ color:var(--accent); }
.rucar .faq p{ padding:0 22px 18px; margin:0; }

@media (prefers-reduced-motion: reduce){
  .rucar *{ animation:none !important; transition:none !important; }
}


/* Marco premium de imagen: sombra flotante + zoom suave + badges superpuestos */
.rucar .img-frame{ position:relative; border-radius:24px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(22,21,29,.45); }
.rucar .img-frame img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.rucar .img-frame:hover img{ transform:scale(1.06); }
.rucar .img-badge{ position:absolute; background:var(--paper); border-radius:16px; padding:14px 18px; box-shadow:0 16px 40px -12px rgba(22,21,29,.35); z-index:2; }
.rucar .img-badge b{ font-family:'Fraunces',serif; font-size:1.4rem; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.rucar .img-badge span{ font-size:.72rem; color:var(--muted); }

/* Tilt 3D al ratón */
.rucar .tilt{ transition:transform .1s ease; will-change:transform; }

/* Halo que sigue al cursor */
.rucar .glow{ position:relative; }
.rucar .glow-spot{ position:absolute; width:480px; height:480px; border-radius:50%; pointer-events:none; z-index:0; opacity:0; transition:opacity .4s ease; background:radial-gradient(circle,rgba(210,26,99,.16),transparent 70%); transform:translate(-50%,-50%); }

/* Avatar circular para testimonios */
.rucar .avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 6px 16px -6px rgba(22,21,29,.4); }

/* Marquee de confianza */
.rucar .marquee-wrap{ overflow:hidden; }
.rucar .marquee-track{ display:flex; gap:24px; width:max-content; animation:marquee 34s linear infinite; }
.rucar .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
