.cc{ overflow:hidden; background-image:radial-gradient(ellipse 70% 55% at 50% 62%, rgba(255,255,255,.75), transparent 70%); }
.cc .section__inner{ position:relative; }
.cc__cabecera{ text-align:center; }
.cc__cabecera .tz-titulo{ margin-inline:auto; margin-bottom:18px; text-align:center; }
.cc__pista{ margin:0 auto; max-width:40ch; font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.45; opacity:.75; }

.cc__escenario{ --h:clamp(130px,13vw,200px); position:relative; display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(70px,7vw,100px); margin-top:0; }
.cc__escenario::after{ content:''; position:absolute; left:6%; right:6%; bottom:-14px; height:46px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(60,45,30,.16), transparent); pointer-events:none; }
.cc__fila{ position:relative; display:flex; align-items:flex-end; justify-content:center; transform:translateX(var(--mx,0px)); transition:transform .9s cubic-bezier(.22,1,.36,1); }
.cc__fila--atras{ z-index:1; --h2:calc(var(--h) * .82); margin-bottom:clamp(64px,5.5vw,84px); gap:clamp(14px,2vw,34px); }
.cc__fila--delante{ z-index:2; }

.cc__persona{ --i:0; position:relative; flex:none; margin:0 clamp(8px,1.2vw,20px); cursor:pointer; outline:none;
  opacity:0; transform:translateY(46px); transition:opacity .7s ease calc(var(--i) * .11s), transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i) * .11s); }
.cc.is-visto .cc__persona{ opacity:1; transform:none; }
.cc__cuerpo{ position:relative; display:block; height:var(--h); transition:transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease; transform-origin:50% 100%; }
.cc__fila--atras .cc__cuerpo{ height:var(--h2); }
.cc__img{ display:block; height:100%; width:auto; user-select:none; -webkit-user-drag:none; }
.cc__img--alt, .cc__img--pose{ position:absolute; left:0; bottom:0; opacity:0; transition:opacity .25s ease; pointer-events:none; }

.cc__escenario.is-foco .cc__persona .cc__cuerpo{ filter:saturate(.55) brightness(1.04); opacity:.6; }
.cc__escenario.is-foco .cc__persona.is-on .cc__cuerpo{ filter:none; opacity:1; transform:translateY(-10px) scale(1.04); }
.cc__persona.is-on{ z-index:6; }

.cc__bocadillo{ position:absolute; left:50%; bottom:calc(100% + 4px); z-index:4; width:max-content; max-width:190px; padding:8px 16px; border-radius:18px;
  background:#fff; color:#241C17; box-shadow:0 12px 26px -16px rgba(36,28,23,.55); font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.2; text-align:center;
  transform:translateX(-50%); pointer-events:none; transition:opacity .3s ease, box-shadow .3s ease; }
.cc__bocadillo::after{ content:''; position:absolute; left:50%; top:calc(100% - 1px); width:14px; height:9px; margin-left:-7px; background:#fff; clip-path:polygon(0 0,100% 0,50% 100%); }
.cc__bocadillo strong{ display:block; font-weight:800; letter-spacing:-.01em; }
.cc__frase-base, .cc__frase-alt{ display:none; }
.cc__escenario.is-foco .cc__persona:not(.is-on) .cc__bocadillo{ opacity:.4; }
.cc__persona.is-on .cc__bocadillo{ z-index:7; padding:14px 18px 15px; border-radius:20px; line-height:1.38; text-align:center; width:270px; max-width:270px;
  box-shadow:0 18px 40px -20px rgba(36,28,23,.55); animation:cc-abre .38s cubic-bezier(.22,1,.36,1) both; }
.cc__persona.is-on .cc__bocadillo strong{ margin-bottom:6px; font-size:1.25em; letter-spacing:-.02em; color:#1A1410; }
.cc__persona.is-on .cc__frase-base{ display:block; }
@keyframes cc-abre{ from{ opacity:.6; transform:translateX(-50%) scale(.9); } to{ opacity:1; transform:translateX(-50%) scale(1); } }
.cc__bocadillo{ transform-origin:50% 100%; }

.cc__persona--perro.is-ladra .cc__img--alt{ opacity:1; }
.cc__persona--perro.is-ladra .cc__img--base{ opacity:0; }
.cc__persona--perro.is-ladra .cc__frase-base{ display:none; }
.cc__persona--perro.is-ladra .cc__frase-alt{ display:block; }
.cc__persona--perro.is-ladra .cc__bocadillo{ background:#C1121F; color:#fff; }
.cc__persona--perro.is-ladra .cc__bocadillo::after{ background:#C1121F; }
.cc__persona--perro.is-ladra .cc__bocadillo strong{ color:#FFCB1F; }

.cc__acciones{ display:flex; justify-content:center; margin-top:clamp(50px,6vw,80px); }
.cc__boton{ display:inline-flex; align-items:center; gap:12px; padding:18px 30px; border:0; border-radius:999px; cursor:pointer;
  background:#1A1410; color:#fff; font:inherit; font-size:clamp(1.05rem,1.3vw,1.2rem); font-weight:800;
  box-shadow:0 18px 36px -18px rgba(26,20,16,.6); transition:transform .35s cubic-bezier(.22,1,.36,1), background-color .25s ease; }
.cc__boton:hover{ transform:translateY(-3px); background:#C1121F; }
.cc__boton:focus-visible{ outline:3px solid #FFCB1F; outline-offset:4px; }
.cc__boton svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cc__boton[disabled]{ opacity:.5; pointer-events:none; }

.cc__cuenta{ position:absolute; left:50%; top:46%; z-index:40; padding:.12em .5em .18em; border-radius:.3em; background:rgba(255,255,255,.92); box-shadow:0 30px 60px -30px rgba(26,20,16,.45); line-height:1; font-size:clamp(4rem,11vw,9rem); font-weight:800; letter-spacing:-.05em; color:#1A1410;
  transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none; white-space:nowrap; }
.cc__cuenta.is-on{ animation:cc-cuenta .62s cubic-bezier(.22,1,.36,1) both; }
.cc__cuenta.is-patata{ color:#1A1410; }
@keyframes cc-cuenta{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); } 25%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.08); } }

.cc__flash{ position:fixed; inset:0; z-index:9999; background:#fff; opacity:0; pointer-events:none; }
.cc__flash.is-on{ animation:cc-flash .7s ease-out both; }
@keyframes cc-flash{ 0%{ opacity:0; } 8%{ opacity:.95; } 100%{ opacity:0; } }

.cc__escenario.is-pose .cc__cuerpo{ animation:cc-salto .8s ease-in-out both; animation-delay:calc(var(--i) * .05s); }
@keyframes cc-salto{ 0%{ transform:none; } 45%{ transform:translateY(-22px); } 100%{ transform:none; } }
.cc__escenario.is-pose .cc__img--pose{ opacity:1; }
.cc__escenario.is-pose .cc__persona--perro .cc__img--base, .cc__escenario.is-pose .cc__persona--perro .cc__img--alt{ opacity:0; }

.cc__polaroid{ position:absolute; left:50%; top:52%; z-index:30; width:min(94%,820px); padding:18px 18px 22px; background:#fff; border-radius:4px;
  box-shadow:0 50px 90px -40px rgba(26,20,16,.65), 0 2px 8px rgba(26,20,16,.12);
  transform:translate(-50%,-38%) rotate(-7deg) scale(.9); opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform 1s cubic-bezier(.22,1,.36,1); }
.cc__polaroid.is-on{ opacity:1; transform:translate(-50%,-50%) rotate(-3deg); pointer-events:auto; }
.cc__polaroid-foto{ position:relative; overflow:hidden; aspect-ratio:1600 / 661; background:radial-gradient(ellipse at 50% 70%, #fffaf2, #efe7da); filter:sepia(.18) saturate(1.1); }
.cc__polaroid-foto.is-revela{ animation:cc-revela 1.6s ease-out both; }
@keyframes cc-revela{ 0%{ filter:sepia(.18) brightness(2.2) contrast(.4); } 100%{ filter:sepia(.18) saturate(1.1); } }
.cc__copia{ --h:236px; position:absolute; left:50%; bottom:6%; margin:0; width:max-content; transform-origin:50% 100%; pointer-events:none; }
.cc__copia .cc__bocadillo, .cc__copia::after{ display:none; }
.cc__copia .cc__persona{ opacity:1; transform:none; transition:none; }
.cc__copia .cc__cuerpo{ animation:none !important; filter:none !important; opacity:1 !important; transform:none !important; }
.cc__polaroid-pie{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:16px 4px 0; }
.cc__polaroid-texto{ font-size:clamp(1.1rem,1.6vw,1.4rem); font-weight:300; font-style:italic; color:#241C17; }
.cc__polaroid-texto strong{ font-weight:800; font-style:normal; }
.cc__polaroid-otra{ flex:none; padding:10px 18px; border:1px solid rgba(36,28,23,.25); border-radius:999px; background:none; cursor:pointer; font:inherit; font-weight:700; color:#241C17; }
.cc__polaroid-otra:hover{ background:#241C17; color:#fff; }
.cc.is-foto .cc__escenario:not(.cc__copia){ filter:blur(2px); opacity:.45; transition:filter .6s ease, opacity .6s ease; }

@media (max-width:1240px){
  .cc__escenario{ --h:160px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 10px; padding-top:20px; align-items:end; }
  .cc__escenario::after{ display:none; }
  .cc__fila{ display:contents; }
  .cc__persona{ margin:0; display:flex; flex-direction:column; align-items:center; }
  .cc__fila--atras .cc__cuerpo{ height:var(--h); }
  .cc__cuerpo{ max-width:100%; }
  .cc__img{ max-width:100%; height:100%; object-fit:contain; object-position:50% 100%; }
  .cc__bocadillo, .cc__persona.is-on .cc__bocadillo{ position:relative; left:auto; bottom:auto; order:2; margin-top:10px; width:auto; max-width:none; opacity:1; transform:none; animation:none; white-space:normal; border-radius:18px; font-size:.95rem; padding:12px 14px; }
  .cc__bocadillo strong, .cc__persona.is-on .cc__bocadillo strong{ margin-bottom:4px; font-size:1.15em; letter-spacing:-.02em; color:#1A1410; }
  .cc__frase-base{ display:block; }
  .cc__escenario.is-foco .cc__persona:not(.is-on) .cc__bocadillo{ opacity:1; }
  .cc__bocadillo::after{ top:auto; bottom:100%; clip-path:polygon(50% 0,100% 100%,0 100%); }
  .cc__escenario.is-foco .cc__persona .cc__cuerpo{ filter:none; opacity:1; }
  .cc__polaroid{ position:fixed; top:50%; width:92vw; }
  .cc.is-foto .cc__escenario:not(.cc__copia){ filter:none; opacity:1; }
  .cc__escenario.cc__copia{ display:flex; gap:0; }
  .cc__copia .cc__fila{ display:flex; }
  .cc__copia .cc__persona{ display:block; margin:0 calc(var(--h) * -.045); }
  .cc__copia .cc__img{ max-width:none; }
}
@media (max-width:760px){
  .cc__escenario{ --h:145px; grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .cc__persona{ opacity:1; transform:none; transition:none; }
  .cc__escenario.is-pose .cc__cuerpo{ animation:none; }
  .cc__polaroid-foto.is-revela{ animation:none; }
}

.cc__polaroid-foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.cc__cerebro{ position:absolute; left:80%; top:-16%; width:30%; height:auto; filter:drop-shadow(0 10px 14px rgba(120,10,20,.3)); animation:cc-flota 4s ease-in-out infinite; pointer-events:none; }
@keyframes cc-flota{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-8px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce){ .cc__cerebro{ animation:none; } }
.cc__cabecera .tz-titulo{ max-width:none; }
.cc__cabecera .tz-titulo .accent{ display:inline; }
body[data-caso] main#smooth-wrapper #smooth-content .cc__cabecera .tz-titulo{ margin-bottom:8px !important; }
.cc__pista{ margin-top:0; }
@media (min-width:1241px){ .cc__persona{ margin:0 clamp(18px,2.1vw,36px); } .cc__fila--atras{ gap:clamp(30px,3.4vw,58px); margin-bottom:clamp(96px,8vw,128px); } }
.cc__cuerpo::before{ content:''; position:absolute; z-index:-1; left:8%; right:8%; bottom:-7px; height:16px; border-radius:50%; background:radial-gradient(closest-side, rgba(70,48,10,.34), rgba(70,48,10,.12) 60%, transparent); pointer-events:none; }
.cc__copia .cc__cuerpo::before{ display:none; }
:is(.cc__fila--atras .cc__persona:nth-child(2), .cc__fila--delante .cc__persona:nth-child(5)) .cc__img{ transform:translateY(6px); }
:is(.cc__fila--atras .cc__persona:nth-child(2), .cc__fila--delante .cc__persona:nth-child(5)) .cc__cuerpo::before{ bottom:2px; }
.cc__escenario::after{ opacity:0; transition:opacity .9s ease .2s; }
.cc.is-visto .cc__escenario::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .cc__escenario::after{ opacity:1; transition:none; } }
.cc .cc__bocadillo strong{ line-height:1.25em; }