/* ═══════════════════════════════════════════════════════════
   rosysibadastudio · marca.css · v4 · 28 de octubre 2026
   Hecho por sosprocreaciones

   UN SOLO LUGAR para los colores y las letras de Rosy.
   Lo usan: inicio, catálogo, portafolio, reseña, campañas,
   privacidad y la página de error.
   Va en: rosysibadastudio.com/marca/marca.css
   ═══════════════════════════════════════════════════════════ */
:root{
  /* colores · guía de estilo v1 */
  --rosa:#C4918F;  --rosa-claro:#E3C3BF; --rosa-prof:#905F58; --choco:#5E3F3C;
  --nude:#EBD2CA;  --grafito:#3F3D4A;   --oro:#C9A169;  --oro-claro:#E6D2AE;
  --marfil:#FBF5F3; --blanco:#FFFFFF;   --texto:#3F3D4A; --suave:#7A6A6C; --linea:#EADAD6;
  --grad-rosa:linear-gradient(180deg,#C99A97 0%,#905F58 100%);
  --grad-oro:linear-gradient(180deg,#EBDDBF 0%,#CDA96F 100%);
  --sombra:0 10px 30px rgba(94,63,60,.16);
  /* v2 · BASE BLANCA: fondo blanco/marfil · morado grafito en botones, menú y pie · palo de rosa como acento y degradados */
  --base:#FBF7F6; --base-claro:#F7EEEC;
  --grad-base:linear-gradient(180deg,#FFFFFF 0%,#FBF7F6 100%);
  --grad-rosa-suave:linear-gradient(160deg,#F8E9E6 0%,#EDD2CE 100%);
  --grad-rosa-band:linear-gradient(135deg,#D9AFAB 0%,#C4918F 55%,#B48079 100%);
  --grad-morado:linear-gradient(160deg,#4A4756 0%,#3F3D4A 60%,#34323E 100%);
  --boton:#3F3D4A; --grad-boton:linear-gradient(180deg,#55525F 0%,#3F3D4A 100%);
  --wa:#25D366;
  /* nombres que usan las páginas de campaña y las reseñas (compatibles) */
  --cafe:#3F3D4A; --cafe2:#3F3D4A; --beige:#EBD2CA; --crema:#FBF7F6; --negro:#2E2C36; --gris:#4A3F42; --estrella:#C9A169;
  /* letras (Montserrat se carga en cada página desde Google Fonts) */
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --logo:url('/marca/logo.png');
}
em{font-style:italic}
h1 em{font-style:normal}

/* ── Reseñas (las pinta marca/resenas.js) ──
   Tarjeta chica: foto de la clienta a la izquierda, texto al lado */
.rs-cab{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--sans);font-size:13.5px;color:var(--gris);margin:4px 0 18px}
.rs-cab .rs-prom{font-family:var(--serif);font-size:28px;color:var(--negro);line-height:1}
.rs-cab .rs-est{color:var(--estrella);letter-spacing:2px;font-size:15px}
.rs-riel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 16px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rs-riel::-webkit-scrollbar{display:none}
.rs-card{flex:0 0 min(86%,340px);scroll-snap-align:start;background:#fff;border:1px solid var(--linea);
  border-radius:18px;padding:14px;display:flex;gap:13px;align-items:flex-start;
  box-shadow:0 6px 20px rgba(63,61,74,.06);font-family:var(--sans);color:var(--texto)}
.rs-card .rs-foto{flex:none;width:86px;height:104px;border-radius:12px;background:var(--beige) center/cover no-repeat;cursor:zoom-in}
.rs-card .rs-ini{flex:none;width:48px;height:48px;border-radius:50%;background:var(--beige);color:var(--cafe);
  display:flex;align-items:center;justify-content:center;font:600 18px var(--sans)}
.rs-card .rs-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rs-card .rs-est{color:var(--estrella);letter-spacing:1.5px;font-size:13px}
.rs-card .rs-txt{font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;margin:0}
.rs-card .rs-txt.abierto{-webkit-line-clamp:unset}
.rs-card .rs-mas{background:none;border:0;padding:0;color:var(--cafe2);font:600 12px var(--sans);cursor:pointer;align-self:flex-start}
.rs-card .rs-nom{font-weight:600;color:var(--negro);font-size:12.5px;margin-top:2px}
.rs-card .rs-ver{color:#3E8E5A;font-weight:500;font-size:11px}
.rs-card .rs-svc{color:var(--gris);font-size:11px}
.rs-card.destacada{border-color:var(--oro)}
/* versión más chica (inicio) */
.rs-chico .rs-card{flex-basis:min(80%,290px);padding:12px;gap:11px}
.rs-chico .rs-card .rs-foto{width:70px;height:84px}
.rs-chico .rs-card .rs-txt{font-size:13px}
.rs-flechas{display:flex;justify-content:center;gap:10px;margin-top:2px}
.rs-flechas button{width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);background:#fff;
  color:var(--negro);font-size:15px;cursor:pointer}
@media(hover:none){.rs-flechas{display:none}}
.rs-demo{font:500 11px var(--sans);color:var(--cafe2);text-align:center;margin-top:8px}
.rs-oscuro .rs-cab{color:rgba(255,255,255,.7)}
.rs-oscuro .rs-cab .rs-prom{color:#fff}
.rs-oscuro .rs-flechas button{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.rs-visor{position:fixed;inset:0;background:rgba(10,8,4,.92);z-index:999;display:flex;align-items:center;
  justify-content:center;padding:18px;cursor:zoom-out}
.rs-visor img{max-width:100%;max-height:88vh;border-radius:14px}


/* v4 · zoom .85 (15% más chico; en v3 era .7) · monitores chicos de computador (900 a 1440 px de ancho: los de 1366, también con
   Windows en 125% que el navegador ve como 1093 px): todo se ve 15% más chico, igual que si
   la persona alejara la página. Solo computadores con mouse: teléfonos y tablets no cambian,
   pantallas grandes tampoco. Para ajustar, cambia el número de zoom (1 = tamaño normal). */
@media (min-width:900px) and (max-width:1440px) and (hover:hover) and (pointer:fine){ html{zoom:.85} }

/* FIN · rosysibadastudio · marca.css · v4 · 28-10-2026 · sosprocreaciones */