/* =====================================================================
   CoCoCo España · Sistema de diseño v1 "Tintes + grano"
   Base: dirección C (tintes por servicio) + lo que ya funciona en la web
   (cards con producto dentro, casos con foto, nota manuscrita, animación).
   Firma: campos de color con grano (no degradados lisos) y orbes.
   ===================================================================== */
:root {
  /* Tinta y lienzo */
  --cc-ink: #0B1A2E;
  --cc-ink-2: #56657A;
  --cc-ink-3: #8C97A6;
  --cc-canvas: #FFFFFF;
  --cc-line: rgba(11,26,46,.09);
  /* Tintes por servicio (fondos de bloque) */
  --cc-tint-ai: #E3F5FF;
  --cc-tint-vm: #FFE6F2;
  --cc-tint-ok: #EAFBDD;
  --cc-tint-neutral: #F3F5F8;
  /* Acentos (dentro de UI y datos) */
  --cc-ai: #0A8FE0;
  --cc-ai-ink: #0A6FB0;
  --cc-vm: #E0137F;
  --cc-vm-ink: #B00D63;
  --cc-ok: #3ACC00;
  --cc-ok-ink: #1E7A00;
  /* Tipo */
  --cc-serif: 'Roboto Serif', Georgia, serif;
  --cc-sans: 'Inter', -apple-system, sans-serif;
  --cc-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --cc-hand: 'Caveat', cursive;
  /* Forma */
  --cc-r-ui: 16px;
  --cc-r-card: 24px;
  --cc-r-pill: 999px;
  --cc-shadow: 0 18px 44px rgba(11,26,46,.14), 0 1px 3px rgba(11,26,46,.08);
  /* Movimiento */
  --cc-ease: cubic-bezier(.2,.75,.25,1);
  --cc-grain: url('../assets/brand/grano-fuerte.svg');
}

/* ---------- Campo de grano: color + ruido visible ---------- */
.cc-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--cc-r-card);
  /* Safari iOS no recorta con overflow+radius los hijos con blur/transform */
  clip-path: inset(0 round var(--cc-r-card));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
  background: var(--f-base);
}
.cc-field::before {               /* manchas de color que derivan despacio */
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(28% 34% at 22% 30%, var(--f-1) 0%, transparent 70%),
    radial-gradient(32% 38% at 74% 24%, var(--f-2) 0%, transparent 70%),
    radial-gradient(36% 40% at 58% 78%, var(--f-3) 0%, transparent 72%),
    radial-gradient(30% 34% at 18% 82%, var(--f-4) 0%, transparent 70%);
  filter: blur(28px) saturate(1.1);
  animation: cc-drift 18s ease-in-out infinite alternate;
}
.cc-field::after {                /* grano */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cc-grain) 0 0 / 180px 180px;
  mix-blend-mode: overlay;
  opacity: .85;
  pointer-events: none;
}
@keyframes cc-drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%,-3%,0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-3%,4%,0) rotate(-6deg) scale(1.02); }
}
/* Campos con nombre: uno por significado */
.cc-field--ai   { --f-base:#4F8FE8; --f-1:#9FD8FF; --f-2:#2F5BD8; --f-3:#7FC4F5; --f-4:#1B3C9E; }   /* AI Transformation */
.cc-field--vm   { --f-base:#F25AA6; --f-1:#FFB27A; --f-2:#E0137F; --f-3:#FF8FC4; --f-4:#B3127A; }   /* VentureMode™ */
.cc-field--ok   { --f-base:#7ED957; --f-1:#E2FF9E; --f-2:#3ACC00; --f-3:#9CE7C4; --f-4:#2E9E5B; }   /* Resultados */
.cc-field--deep { --f-base:#22364F; --f-1:#5C7FA8; --f-2:#0E1E33; --f-3:#7E8FB8; --f-4:#14243B; }   /* Destacado / vídeo */

/* ---------- Orbe (vídeo, voz, producto vivo) ---------- */
.cc-orb {
  position: relative;
  isolation: isolate;
  width: var(--orb, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--f-base);
  box-shadow: inset -18px -24px 48px rgba(11,26,46,.22), 0 24px 50px rgba(11,26,46,.18);
}
.cc-orb::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(30% 30% at 30% 30%, var(--f-1), transparent 70%),
    radial-gradient(34% 34% at 70% 40%, var(--f-2), transparent 70%),
    radial-gradient(38% 38% at 45% 78%, var(--f-3), transparent 72%);
  filter: blur(14px);
  animation: cc-spin 14s linear infinite;
}
.cc-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cc-grain) 0 0 / 140px 140px;
  mix-blend-mode: overlay;
  opacity: .85;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}
.cc-play span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(11,26,46,.2);
}
.cc-play span::before { content: ""; margin-left: 4px; border-left: 14px solid var(--cc-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }

/* ---------- Tipografía ---------- */
.cc-label { margin: 0; color: var(--cc-ink-2); font: 500 11px/1.4 var(--cc-mono); letter-spacing: .09em; text-transform: uppercase; }
.cc-hand { color: var(--cc-ink); font-family: var(--cc-hand); font-size: 26px; font-weight: 700; line-height: 1; transform: rotate(-1.5deg); }

/* ---------- UI flotante (lo que va dentro de las cards) ---------- */
.cc-ui { color: var(--cc-ink); background: #FFFFFF; border-radius: var(--cc-r-ui); box-shadow: var(--cc-shadow); }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--cc-r-pill); font: 500 9.5px var(--cc-mono); letter-spacing: .05em; text-transform: uppercase; }
.cc-chip--ai { color: var(--cc-ai-ink); background: #D7EFFF; }
.cc-chip--vm { color: var(--cc-vm-ink); background: #FFE0EF; }
.cc-chip--ok { color: var(--cc-ok-ink); background: #DDF6CC; }
.cc-chip--mute { color: var(--cc-ink-2); background: #EEF1F5; }

/* Burbujas de conversación (agente) */
.cc-chat { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.cc-bubble { max-width: 82%; padding: 11px 16px; color: var(--cc-ink); background: #FFFFFF; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.cc-bubble--in { justify-self: end; color: #FFFFFF; background: transparent; border: 1px solid rgba(255,255,255,.7); }
.cc-bubble--ok { display: inline-flex; align-items: center; gap: 8px; width: max-content; }
.cc-bubble--ok i { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: var(--cc-ok); border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; }

/* ---------- Botones ---------- */
.cc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; color: #FFFFFF; background: var(--cc-vm); border: 0; border-radius: var(--cc-r-pill); font: 600 15px/1 var(--cc-sans); text-decoration: none; transition: transform .2s var(--cc-ease), background .2s; }
.cc-btn:hover { background: var(--cc-vm-ink); transform: translateY(-1px); }
.cc-btn--ink { background: var(--cc-ink); } .cc-btn--ink:hover { background: #1D2E45; }
.cc-btn--light { color: var(--cc-ink); background: #FFFFFF; } .cc-btn--light:hover { background: #F1F4F8; }

/* ---------- Entrada animada (se activa con .is-in) ---------- */
.cc-rise { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--cc-ease); transition-delay: var(--d, 0s); }
.is-in .cc-rise, .cc-rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-field::before, .cc-orb::before { animation: none; }
  .cc-rise { opacity: 1; transform: none; transition: none; }
}