/* adricoraje.com — Adrián Vico · Coraje Creativo
   Identidad: Rojo Coraje, negro, blanco roto. Helvetica Bold en caja alta,
   Instrument Serif itálica como acento, marcas de edición (tachar / rodear). */

:root{
  --rojo:#FF2A14;
  --rojo-hondo:#6B0A04;
  --negro:#0D0D0D;
  --negro-2:#161615;
  --blanco:#F3F3F1;
  --gris:#9A9A97;
  --linea:#2E2E2C;
  --sans:"Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --pad:clamp(18px, 3.6vw, 56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--negro);color:var(--blanco);font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,.frase-gorda,.bajada,.leyenda h3{text-wrap:balance}
p,dd{text-wrap:pretty}
img,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
::selection{background:var(--rojo);color:var(--negro)}

html[lang="es"] [lang="en"], html[lang="en"] [lang="es"]{display:none !important}

.serif{font-family:var(--serif);font-weight:400;font-style:italic;text-transform:none;letter-spacing:-.01em}
.tachado{text-decoration:line-through;text-decoration-thickness:.09em}
.rojo{color:var(--rojo)}

/* ---------- Cabecera ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad);color:var(--blanco);mix-blend-mode:difference;pointer-events:none}
.top > *{pointer-events:auto}
.marca{font-weight:700;font-size:17px;letter-spacing:-.02em;text-transform:uppercase;line-height:.9}
.nav{display:flex;gap:26px;align-items:center;font-size:15px;font-weight:700}
.nav a:hover{text-decoration:line-through;text-decoration-thickness:2px}
.idioma{background:none;border:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:4px 0}
.idioma span{opacity:.4}.idioma span.on{opacity:1}

/* ---------- Hero de la home ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px var(--pad) var(--pad);overflow:hidden;cursor:crosshair}
.hero h1{position:relative;z-index:2;font-weight:700;text-transform:uppercase;font-size:clamp(52px,12.6vw,236px);line-height:.84;letter-spacing:-.06em;pointer-events:none}
.hero h1 .l{display:block}
.hero h1 .serif{color:var(--rojo);font-size:1.08em;letter-spacing:-.035em;position:relative;display:inline-block;padding:0 .14em 0 .04em;margin-left:.1em;line-height:1}
.rodeo{position:absolute;left:-.16em;top:-.02em;width:calc(100% + .34em);height:calc(100% + .14em);overflow:visible;pointer-events:none}
.rodeo.hecho path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.rodeo path{fill:none;stroke:var(--blanco);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:dibujar 1.1s .7s var(--ease) forwards}
@keyframes dibujar{to{stroke-dashoffset:0}}
.hero-pie{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px;align-items:end;margin-top:clamp(28px,4vw,56px);font-size:16px;line-height:1.35;pointer-events:none}
.hero-pie p{max-width:34ch}
.hero-pie .gris{color:var(--gris)}
.hero-pie a{pointer-events:auto}
.pista{position:absolute;inset:0;z-index:1;pointer-events:none}
.pista img{position:absolute;width:clamp(140px,15vw,240px);height:auto;transform:translate(-50%,-50%);will-change:transform,opacity}
.boton{display:inline-flex;align-items:center;gap:10px;background:var(--rojo);color:var(--negro);font-weight:700;font-size:16px;padding:14px 22px;border-radius:999px;white-space:nowrap}
.boton:hover{background:var(--blanco)}

/* ---------- Secciones comunes ---------- */
.sec{padding:clamp(80px,10vw,150px) var(--pad)}
.cab{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--linea);padding-bottom:18px;margin-bottom:0}
.cab h2{font-size:clamp(15px,1.2vw,17px);font-weight:700;letter-spacing:-.01em}
.cab p{color:var(--gris);font-size:15px}

/* ---------- Índice de trabajo ---------- */
.indice{list-style:none}
.fila{border-bottom:1px solid var(--linea)}
.fila > a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto;gap:24px;align-items:center;padding:clamp(18px,2.4vw,30px) 0}
.fila h3{font-size:clamp(40px,7.4vw,124px);line-height:.88;font-weight:700;letter-spacing:-.055em;text-transform:uppercase;transition:color .25s}
.fila .que{font-size:clamp(16px,1.3vw,19px);line-height:1.3;max-width:34ch}
.fila .que span{display:block;color:var(--gris);font-size:.86em;margin-top:6px}
.fila .ir{font-weight:700;font-size:15px;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s var(--ease)}
.fila:hover h3{color:var(--rojo)}
.fila:hover .ir{opacity:1;transform:none}
.tiras{display:none}
.vista{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .2s,transform .3s var(--ease);overflow:hidden}
.vista.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vista img{display:block;width:auto;height:auto;max-width:clamp(260px,28vw,420px);max-height:clamp(260px,46vh,440px)}

/* ---------- Servicios ---------- */
.servicios{background:var(--rojo);color:var(--negro)}
.servicios .cab{border-color:rgba(13,13,13,.25)}
.servicios .cab p{color:var(--rojo-hondo)}
.serv-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);margin-top:clamp(40px,5vw,72px);align-items:end}
.frase-gorda{font-weight:900;font-size:clamp(42px,5.4vw,96px);line-height:.94;letter-spacing:-.035em;word-spacing:.06em;-webkit-text-stroke:.018em currentColor;paint-order:stroke fill;max-width:14ch}
.serv-txt p{font-size:clamp(19px,1.6vw,23px);line-height:1.38;max-width:40ch}
.serv-txt p + p{margin-top:1em}
.serv-txt strong{font-weight:700}

/* ---------- Caja de juegos ---------- */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cajas{position:relative;background:var(--negro);color:var(--blanco)}
.cajas-stage{position:relative;height:max(620px,100svh);overflow:hidden}
.cajas-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.cajas-stage canvas.cogiendo{cursor:grabbing !important}
.cajas-msg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cajas-btn{position:absolute;right:var(--pad);top:calc(var(--pad) + 52px);z-index:2;background:var(--blanco);color:var(--negro);border:0;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.cajas-btn:hover{background:var(--rojo);color:var(--negro)}
.cajas.abierta .cajas-btn{opacity:1;pointer-events:auto}
.cajas-btn .b-tirar{display:none}
@media (max-width:700px){.cajas-btn{top:auto;bottom:16px;right:50%;transform:translateX(50%)}}


/* ---------- Logos ---------- */
.logos{padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.logos .cab{margin:0 var(--pad)}
.cintas{margin-top:clamp(48px,5vw,80px);display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
.cinta{--h:clamp(44px,5.4vw,88px);--gap:clamp(48px,6vw,96px);overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.cinta.arrastrando{cursor:grabbing}
.cinta-pista{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.cinta-set{display:flex;align-items:center;gap:var(--gap);padding-right:var(--gap);height:calc(var(--h) * 1.15)}
.cinta img{height:calc(var(--h) * var(--k,1));width:calc(var(--h) * var(--k,1) * var(--ar,1));flex:none;pointer-events:none}
.logos .nota{margin:28px var(--pad) 0;color:var(--gris);font-size:15px}

/* ---------- Sobre mí ---------- */
.sobre{background:var(--blanco);color:var(--negro)}
.sobre .cab{border-color:#cfcfcb}
.sobre .cab p{color:#555}
.sobre-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,6vw,96px);margin-top:clamp(40px,5vw,72px);align-items:start}
.sobre-grid h3{font-size:clamp(40px,5.8vw,96px);line-height:.9;font-weight:700;letter-spacing:-.05em}
.circulo{position:relative;display:inline-block;padding:0 .08em}
.circulo svg{position:absolute;left:-.16em;top:-.06em;width:calc(100% + .32em);height:calc(100% + .14em);overflow:visible}
.circulo path{fill:none;stroke:var(--rojo);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sobre-grid p{font-size:clamp(18px,1.5vw,21px);line-height:1.42;max-width:44ch}
.sobre-grid p + p{margin-top:1em}

/* ---------- Contacto ---------- */
.contacto{background:var(--negro);padding-bottom:var(--pad)}
.contacto .grande{display:block;font-weight:700;font-size:clamp(40px,9vw,168px);line-height:.88;letter-spacing:-.06em;margin-top:clamp(40px,5vw,72px);word-break:break-word}
.contacto .grande:hover{color:var(--rojo)}
.redes{display:flex;gap:28px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px);font-weight:700}
.redes a{border-bottom:2px solid currentColor;padding-bottom:2px}
.redes a:hover{color:var(--rojo)}
.pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(80px,10vw,150px);color:var(--gris);font-size:14px}

/* ---------- Páginas de caso ---------- */
.caso-hero{padding:120px var(--pad) clamp(36px,4vw,56px)}
.caso-hero .volver{display:inline-block;color:var(--gris);font-weight:700;font-size:15px;margin-bottom:clamp(28px,4vw,56px)}
.caso-hero .volver:hover{color:var(--blanco)}
.caso-hero h1{font-weight:700;text-transform:uppercase;font-size:clamp(56px,13vw,240px);line-height:.84;letter-spacing:-.06em}
.caso-hero .bajada{font-size:clamp(20px,2vw,30px);line-height:1.2;font-weight:700;letter-spacing:-.02em;margin-top:clamp(18px,2vw,28px);max-width:30ch}
.ficha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:22px var(--pad);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-size:15px;line-height:1.4}
.ficha dt{color:var(--gris);margin-bottom:6px}
.ficha dd a{border-bottom:1.5px solid currentColor}
.ficha dd a:hover{color:var(--rojo)}
.intro{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,80px);padding:clamp(56px,7vw,110px) var(--pad)}
.intro h2{font-size:15px;font-weight:700;color:var(--gris)}
.intro p{font-size:clamp(20px,1.9vw,27px);line-height:1.32;max-width:42ch}
.intro p + p{margin-top:.9em}
.intro .paso + .paso{margin-top:clamp(28px,3vw,44px)}
.intro .paso h3{font-size:15px;font-weight:700;color:var(--rojo);margin-bottom:10px;text-transform:uppercase;letter-spacing:.02em}

.bloque{padding:0 var(--pad)}
.bloque.aire{padding-top:clamp(56px,7vw,110px)}
/* Rejillas justificadas: cada pieza conserva su proporción nativa (--ar) y todas comparten alto */
.rejilla{display:flex;gap:0;align-items:flex-start;max-width:calc(86svh*var(--suma,99));margin-left:auto;margin-right:auto}
.rejilla > figure,.rejilla > .pendiente{flex:var(--ar,1) 1 0;min-width:0;aspect-ratio:var(--ar,1)}
.rejilla img,.rejilla video{width:100%;height:100%;object-fit:cover}
.rejilla figure{overflow:hidden;background:var(--negro-2);margin:0}
.rejilla figure img,.rejilla figure video{display:block;width:calc(100% + 2px);height:calc(100% + 2px);margin:-1px;max-width:none}
.rejilla.logos-fila figure{background:transparent}
.leyenda{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(56px,7vw,100px) var(--pad) 18px;margin-bottom:0}
.leyenda h3{font-size:clamp(30px,4vw,64px);line-height:.92;font-weight:700;letter-spacing:-.045em;text-transform:uppercase}
.leyenda p{color:var(--gris);font-size:15px;max-width:44ch;align-self:end}
.insignias{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.insignia{border:2px solid var(--blanco);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:-.01em}
.insignia.rojo{border-color:var(--rojo);color:var(--rojo)}

/* Debocado: pegatinas sueltas */
.pegatinas{position:relative;background:#4A8FDB center/cover no-repeat;min-height:clamp(520px,64vw,920px);overflow:hidden}
.pegatinas img{position:absolute;width:clamp(110px,17vw,260px);height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));cursor:grab;touch-action:none;transition:transform .2s}
.pegatinas img:active{cursor:grabbing}
.pegatinas .pista-txt{position:absolute;left:18px;bottom:14px;color:#fff;font-size:14px;font-weight:700}
.web-marco{background:#FFE9DA;display:flex;height:min(86svh,clamp(520px,60vw,860px));overflow:hidden}
.web-marco .pantalla{width:100%;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin}
.web-marco .pantalla::-webkit-scrollbar{display:none}
.web-marco img{width:100%;height:auto}
.pendiente{--ar:.5625;border:2px dashed var(--linea);color:var(--gris);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:15px;aspect-ratio:9/16}

.siguiente{display:block;padding:clamp(80px,10vw,150px) var(--pad);border-top:1px solid var(--linea);margin-top:clamp(56px,7vw,110px)}
.siguiente > span{color:var(--gris);font-weight:700;font-size:15px}
.siguiente strong{display:block;font-size:clamp(52px,11vw,200px);line-height:.86;letter-spacing:-.06em;text-transform:uppercase;margin-top:10px;transition:color .25s}
.siguiente:hover strong{color:var(--rojo)}

@media (max-width:700px){.cintas{gap:34px}.cinta{--h:38px;--gap:44px}}

/* Galerías de los casos en móvil vertical: deslizables en horizontal */
@media (max-width:700px) and (orientation:portrait){
  .bloque{padding-left:0;padding-right:0}
  .rejilla.multi{max-width:none;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--pad);scroll-padding:0 var(--pad)}
  .rejilla.multi::-webkit-scrollbar{display:none}
  .rejilla.multi{--h:min(58svh,112vw,calc(88vw / var(--maxar,1)));align-items:stretch}
  .rejilla.multi > *{flex:none;height:var(--h);width:calc(var(--h) * var(--ar,1));aspect-ratio:auto;scroll-snap-align:start}
  .rejilla.mosaico.n4{flex-wrap:wrap}
  .rejilla.mosaico.n4 > figure{flex:0 0 50%}
  .rejilla.columna{flex-direction:column}
  .rejilla.columna > figure{flex:none;width:100%}
  .bloque > .rejilla.r1{margin:0 var(--pad)}
}
/* Visor de fotos */
.bloque figure img,.carrusel img{cursor:zoom-in}
.visor{position:fixed;inset:0;z-index:100;background:rgba(13,13,13,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.visor.on{opacity:1;pointer-events:auto}
.visor img{max-width:92vw;max-height:86svh;width:auto;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none}
.visor button{position:absolute;background:none;border:0;color:var(--blanco);font:inherit;font-weight:700;cursor:pointer;padding:14px}
.visor .cerrar{top:10px;right:calc(var(--pad) - 14px);font-size:15px}
.visor .ant,.visor .sig{top:50%;transform:translateY(-50%);font-size:28px}
.visor .ant{left:calc(var(--pad) - 14px)}.visor .sig{right:calc(var(--pad) - 14px)}
.visor .cuenta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:var(--gris);font-size:14px;font-weight:700}
@media (max-width:700px){.visor .ant,.visor .sig{display:none}}

/* Carrusel de deporte (solo móvil) */
.carrusel{display:none}
@media (max-width:700px){
  .solo-escritorio{display:none}
  .carrusel{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0}
  .carrusel::-webkit-scrollbar{display:none}
  .carrusel-pista{display:flex;gap:0;width:max-content;padding:0 var(--pad)}
  .carrusel img{height:62svh;max-height:520px;width:auto;flex:none;object-fit:cover;-webkit-user-select:none;user-select:none}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav .ancla{display:none}
  .hero-pie{grid-template-columns:1fr}
  .hero{min-height:88svh}
  .hero-pie .boton{justify-self:start}
  .fila > a{grid-template-columns:1fr;gap:10px}
  .fila .ir{display:none}
  .serv-grid,.sobre-grid,.intro{grid-template-columns:1fr}
  .ficha{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (hover:none), (max-width:900px){
  .tiras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:22px}
  .tiras img{aspect-ratio:4/5;object-fit:cover;width:100%}
  .vista{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rodeo path{animation:none;stroke-dashoffset:0}
  .pista{display:none}
}

/* Hablamos (debajo de Siguiente) y página de contacto */
.hablamos{display:block;padding:clamp(56px,7vw,110px) var(--pad);background:var(--rojo);color:var(--negro)}
.hablamos > span{font-weight:700;font-size:15px}
.hablamos strong{display:flex;align-items:baseline;gap:.25em;font-size:clamp(52px,11vw,200px);line-height:.86;letter-spacing:-.06em;text-transform:uppercase;margin-top:10px}
.hablamos i,.canal i{font-style:normal;transition:transform .3s var(--ease)}
.hablamos:hover i,.canal:hover i{transform:translateX(.18em)}
.canales{padding:0 var(--pad) clamp(60px,8vw,120px)}
.canal{display:block;padding:clamp(28px,3.5vw,48px) 0;border-top:1px solid var(--linea)}
.canal:last-child{border-bottom:1px solid var(--linea)}
.canal > span{color:var(--gris);font-weight:700;font-size:15px}
.canal strong{display:flex;align-items:baseline;gap:.25em;font-size:clamp(34px,6.4vw,110px);line-height:.95;letter-spacing:-.05em;margin-top:8px;word-break:break-word;transition:color .25s}
.canal:hover strong{color:var(--rojo)}
.siguiente{margin-bottom:0}

.rejilla figure a.reel{display:block;width:100%;height:100%;position:relative;cursor:pointer}
.rejilla figure a.reel::after{content:"Ver reel ↗";position:absolute;left:12px;bottom:12px;font-weight:700;font-size:13px;color:#fff;background:rgba(13,13,13,.55);padding:6px 10px;border-radius:999px;opacity:0;transition:opacity .2s}
.rejilla figure a.reel:hover::after{opacity:1}
@media (hover:none){.rejilla figure a.reel::after{opacity:1}}