/* ============================================================================
   CREE-A · sitio.css — lo común del sitio. Se carga DESPUÉS de styles.css.
   No redefine .btn, .card, .sec, .pista, .trio, .merc, .tabs, .list ni .datos.

   Encabezado y pie (los rellena sitio.js):   .cab…   .pie…
   Componentes genéricos para cualquier página:
     .port            Portada de página: <section class="sec port"><h1>Título.</h1><p class="bajada">…</p></section>
     .osc             Sección oscura a todo el ancho: <section class="sec osc" data-cab-claro>
     .rej .c2 .c3 .c4 Rejilla de 2, 3 o 4 columnas (baja sola en tablet y celular)
     .tj              Tarjeta grande con imagen que es un enlace:
                      <a class="tj" href="…"><img src="…" alt="…"><b>Título</b><small>Texto corto</small><i class="va"></i></a>
     .duo  (.inv)     Dos columnas, imagen y texto; .inv invierte el orden en PC
     .foto            Imagen con radio de 20 px y sombra suave
     .btns            Grupo de botones del mismo ancho y alto
     .btn.tinto       Botón "Primero un tintico" (ver servicios.html)
     .txt             Párrafo de lectura (color y ancho); con .just queda justificado
     .acc             Acceso grande con ícono (contacto): <a class="acc card">…</a>
   Variables:  --cab-h  alto del encabezado.
   ========================================================================== */
:root{--cab-h:72px}
html.sin-iman{scroll-snap-type:none}
html.menu-abierto{overflow:hidden}
body[data-pagina] main>.sec:first-child{padding-top:calc(var(--cab-h) + 12px)}

/* ---------- Encabezado ---------- */
.cab{position:fixed;left:0;right:0;top:0;z-index:60;height:var(--cab-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(24px,calc(50vw - var(--w) / 2));color:var(--tinta);transition:transform .45s var(--e),color .3s}
.cab::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-36px;z-index:-2;background:linear-gradient(rgba(245,245,243,.97) 30%,rgba(245,245,243,0));opacity:0;transition:opacity .35s;pointer-events:none}
.cab--velo::before{opacity:1}
.cab--oculto{transform:translateY(calc(-100% - 44px))}
.cab--claro{color:var(--crema)}
.cab-logo{position:relative;flex:none;display:block;transition:transform .35s var(--e)}
.cab-logo:hover{transform:translateY(-2px)}
.cab-logo img{height:25px;width:auto;max-width:none;transition:opacity .3s}
.cab-logo .cab-l-cla{position:absolute;left:0;top:0;opacity:0}
.cab--claro .cab-l-osc,.cab--abierto .cab-l-osc{opacity:0}
.cab--claro .cab-l-cla,.cab--abierto .cab-l-cla{opacity:1}
.cab-nav{display:flex;align-items:center;gap:30px;font-family:var(--ft);font-weight:700;font-size:16px;line-height:1}
.cab-nav a:not(.btn){position:relative;padding:10px 0 8px;opacity:.6;transition:opacity .2s}
.cab-nav a:not(.btn):hover{opacity:1}
.cab-nav a:not(.btn)[aria-current]{opacity:1}
.cab-nav a:not(.btn)[aria-current]::after{content:"";position:absolute;left:50%;bottom:-2px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--g)}
.cab .cab-btn{min-height:40px;padding:0 22px}
.cab--claro .cab-btn{background:var(--crema);color:var(--tinta)}
.cab--claro .cab-btn:hover{background:#fff}
.cab-ham{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.cab-ham i{position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .35s var(--e),opacity .2s}
.cab-ham i:nth-child(1){top:14px}.cab-ham i:nth-child(2){top:21px}.cab-ham i:nth-child(3){top:28px}

@media (max-width:900px){
  :root{--cab-h:60px}
  .cab{padding:0 20px}
  .cab-logo img{height:21px}
  .cab-ham{display:block}
  .cab-nav{position:fixed;left:0;top:0;z-index:-1;width:100vw;height:100vh;height:100dvh;flex-direction:column;justify-content:center;gap:6px;padding:var(--cab-h) 24px 32px;background:#202020;color:var(--crema);font-size:30px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;overflow-y:auto}
  .cab-nav a:not(.btn){padding:11px 8px;opacity:.72}
  .cab-nav a:not(.btn)[aria-current]::after{bottom:2px}
  .cab .cab-btn{margin-top:22px;min-height:50px;min-width:210px;background:var(--crema);color:var(--tinta);font-size:13px}
  .cab--abierto{color:var(--crema)}
  .cab--abierto::before{opacity:0}
  .cab--abierto .cab-nav{opacity:1;visibility:visible;transition:opacity .3s}
  .cab--abierto .cab-ham i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .cab--abierto .cab-ham i:nth-child(2){opacity:0}
  .cab--abierto .cab-ham i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:900px) and (max-height:520px){.cab-nav{font-size:22px;justify-content:flex-start}}

/* Pantallas audiovisual y web: su barra de anclas baja un renglón para dejar sitio al encabezado */
body[data-pagina] .hero .top{justify-content:center;padding-top:calc(var(--cab-h) + 4px);padding-bottom:0}

/* ---------- Pie ---------- */
.pie-in{width:100%;max-width:var(--w);margin:0 auto}
.pie-cols{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px 40px;padding:26px 0 18px;border-top:1px solid rgba(241,239,232,.14)}
.pie-logo img{width:170px;height:auto}
.pie-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;font-family:var(--ft);font-weight:700;font-size:16px;line-height:1.2;color:var(--crema2)}
.pie-nav a{opacity:.78;transition:opacity .2s}
.pie-nav a:hover,.pie-nav a[aria-current]{opacity:1;color:#fff}
.pie-con{display:grid;justify-items:end;gap:6px;font-size:15px;color:var(--crema2)}
.pie-con a:hover{color:#fff}
.pie-redes{display:flex;gap:14px;margin-top:6px}
.pie-redes a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(241,239,232,.1);transition:background .2s,transform .35s var(--e)}
.pie-redes a:hover{background:rgba(241,239,232,.2);transform:translateY(-2px)}
.pie-in .legal{margin:0}
.pie-in .legal p{font-size:12px;color:var(--crema3)}
.pie-solo{background:#202020;color:var(--crema);padding:14px 24px 24px;scroll-snap-align:end}
.pie-solo .pie-cols{border-top:0}
/* Pie propio de audiovisual y web con la navegación añadida */
.ft-cols .pie-nav{flex:1;display:flex}
@media (max-width:900px){
  .pie-cols{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding:22px 0 14px}
  .pie-con{justify-items:center}
  .pie-in .legal{text-align:center}
  .pie-nav{gap:6px 20px;font-size:15px}
  .ft-cols .pie-nav{justify-content:flex-start}
}

/* ---------- Componentes genéricos ---------- */
.port{text-align:center;align-items:center}
.port h1{max-width:none;font-size:clamp(52px,9vw,124px);font-weight:800;letter-spacing:-.025em;line-height:.95}
.bajada{max-width:52ch;margin:22px auto 0;font-size:clamp(16px,1.5vw,19px);color:var(--tx2);text-wrap:balance}
.txt{color:var(--tx2);max-width:60ch}
.txt.just{text-align:justify;hyphens:auto}

.osc{position:relative;color:var(--crema);background:#202020;box-shadow:0 0 0 100vmax #202020;clip-path:inset(0 -100vmax)}
.osc .txt,.osc .bajada{color:var(--crema2)}
.osc .pista{color:var(--crema2)}
.js .osc .pista.rv.in{color:var(--crema2)}

.rej{display:grid;gap:18px}
.rej.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rej.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rej.c4{grid-template-columns:repeat(4,minmax(0,1fr))}

.tj{position:relative;display:flex;flex-direction:column;min-width:0;padding:12px 12px 18px;border-radius:20px;background:rgba(255,255,255,.74);box-shadow:var(--sombra);color:var(--tx);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.tj:hover{transform:translateY(-5px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 26px 54px rgba(60,50,30,.2)}
.tj img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#E4E3DF}
.tj b{display:block;margin:16px 8px 0;font-family:var(--ft);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:-.01em}
.tj small{display:block;margin:6px 8px 0;font-size:14.5px;line-height:1.4;color:var(--tx2)}
.tj .va{position:absolute;right:22px;top:22px;width:38px;height:38px;border-radius:50%;background:rgba(32,32,32,.78);transition:background .25s,transform .45s var(--e)}
.tj .va::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-5px 0 0 -7px;border-top:2.5px solid var(--crema);border-right:2.5px solid var(--crema);border-radius:1px;transform:rotate(45deg)}
.tj:hover .va{background:var(--tinta);transform:translateX(4px)}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,64px)}
.duo.inv>:first-child{order:2}
.foto{width:100%;height:auto;border-radius:20px;object-fit:cover;box-shadow:var(--sombra)}

.btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;max-width:100%}
.btns .btn{width:100%;min-height:48px;text-align:center;white-space:nowrap}

/* Botón del tintico: al pasar el cursor el texto se corre y aparece "con pan" */
.btn.tinto{gap:10px;min-width:262px;min-height:50px;padding:0 26px;overflow:hidden}
.btn.tinto svg{flex:none;width:21px;height:21px;transition:transform .5s var(--e)}
.btn.tinto .pan{display:inline-block;max-width:0;margin-left:-10px;overflow:hidden;white-space:nowrap;opacity:0;font-family:var(--fsub);font-weight:400;font-size:15px;letter-spacing:.02em;text-transform:none;color:var(--y);transition:max-width .55s var(--e),opacity .35s,margin .55s var(--e)}
.btn.tinto:hover .pan,.btn.tinto:focus-visible .pan,.btn.tinto.ya .pan{max-width:76px;margin-left:0;opacity:1}
.btn.tinto:hover svg,.btn.tinto:focus-visible svg{transform:rotate(-10deg)}
.btn.tinto .humo{transform-origin:50% 100%;animation:humo 2.6s ease-in-out infinite}
@keyframes humo{0%,100%{opacity:.25;transform:translateY(1px)}50%{opacity:1;transform:translateY(-1px)}}

.acc{display:grid;justify-items:center;align-content:center;gap:10px;min-height:210px;padding:28px 22px;text-align:center;color:var(--tx);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.acc:hover{transform:translateY(-5px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 26px 54px rgba(60,50,30,.2)}
.acc svg{width:44px;height:44px}
.acc b{font-family:var(--ft);font-weight:700;font-size:25px;line-height:1.05}
.acc span{font-size:15px;color:var(--tx2);overflow-wrap:anywhere}

@media (max-width:1000px){
  .rej.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .rej.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:minmax(0,1fr);gap:24px}
  .duo.inv>:first-child{order:0}
  .txt{margin-left:auto;margin-right:auto}
}
@media (max-width:560px){
  .rej.c2,.rej.c3{grid-template-columns:minmax(0,1fr)}
  .rej{gap:12px}
  .btns{display:grid;grid-auto-flow:row;width:100%}
  .tj b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .cab,.tj,.acc,.btn.tinto .pan,.btn.tinto svg{transition:none}
  .btn.tinto .humo{animation:none}
}