/* PRI5MA · banner de la portada: las tres áreas a la vez; el panel bajo el mouse se amplía. En celular, pestañas. */
.banner{position:relative;height:clamp(680px,100svh,960px);background:var(--negro);color:var(--claro);overflow:hidden;display:flex;flex-direction:column}
.paneles{position:relative;order:1;flex:1 1 auto;min-height:0;display:flex;gap:2px;background:var(--negro)}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow .7s cubic-bezier(.2,.8,.2,1)}
.panel.abierto{flex-grow:2.4}
.panel:focus-visible{outline:2px solid var(--cian);outline-offset:-4px;border-radius:0}
.panel .medio{position:absolute;inset:0}
.panel .medio > img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .7s}
.panel:not(.abierto) .medio > img{filter:saturate(.75) brightness(.8)}
.panel.abierto .medio > img{transform:scale(1)}
.panel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,12,14,.85) 0%,rgba(11,12,14,.45) 10%,rgba(11,12,14,0) 22%,rgba(11,12,14,0) 52%,rgba(11,12,14,.3) 66%,rgba(11,12,14,.92) 100%)}
.panel .texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 32px 34px;display:grid;gap:10px}
.panel .paso{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cian)}
.panel h2{margin:0;font-weight:500;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.035em;line-height:1.02}
.panel .detalle{display:grid;gap:12px;max-height:0;opacity:0;overflow:hidden;transition:opacity .45s .05s,max-height .6s}
.panel.abierto .detalle{max-height:220px;opacity:1}
.panel .detalle p{margin:0;font-size:16px;color:rgba(255,255,255,.84);max-width:42ch}
.panel .entrar{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15.5px;justify-self:start;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}
.panel .entrar:hover{border-color:#fff}
.panel .medio > img.portatil-fondo{filter:blur(22px) brightness(.5);transform:scale(1.15)}
.panel .medio > img.portatil{position:absolute;left:50%;top:118px;width:min(86%,620px);height:auto;object-fit:contain;transform:translateX(-50%);filter:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.panel:not(.abierto) .medio > img.portatil{width:auto;height:300px;max-width:none}
.panel:not(.abierto) .ficha-m{opacity:0}
.panel:not(.abierto) .hoja-manual{left:50%;transform:translateX(-50%);width:min(82%,250px)}
/* Con el lema abajo, la hoja del manual y sus fichas suben */
.panel .hoja-manual{top:118px}
.panel .ficha-m.paleta{top:140px}
.panel .ficha-m.logo-f{top:300px}

/* Cenefa inferior con el lema y los botones: el banner queda limpio arriba */
.b-cab{order:2;position:relative;z-index:10;background:var(--negro);border-top:1px solid var(--linea-o2)}
/* Ceja arriba a la izquierda; el lema (una sola línea) y los botones comparten fila y quedan centrados entre sí */
.b-cab .envol{max-width:1440px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ceja ." "lema acciones";align-items:center;gap:4px 40px;padding-top:14px;padding-bottom:18px}
.b-cab .envol > div:first-child{display:contents}
.b-cab .eyebrow{grid-area:ceja;font-size:11.5px}
.b-cab h1{grid-area:lema;margin:0;font-weight:400;font-size:clamp(26px,2.5vw,38px);line-height:1.1;letter-spacing:-.04em;white-space:nowrap}
.b-cab h1 span{color:var(--cian)}
.b-cab .acciones{grid-area:acciones;display:flex;gap:10px}
.b-cab .btn{height:46px;padding:0 22px;font-size:15.5px}
.pestanas{display:none}

@media (max-width:900px){
  .banner{height:auto;padding-top:70px}
  .b-cab{order:0;border-top:0;background:none}
  .pestanas{order:1}
  .paneles{order:2}
  .b-cab .envol{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-top:18px;padding-bottom:22px}
  .b-cab .envol > div:first-child{display:block}
  .b-cab .eyebrow{font-size:13px}
  .b-cab h1{margin-top:12px;font-size:clamp(34px,9vw,44px);line-height:1;white-space:normal;text-wrap:balance}
  .b-cab .acciones{flex-wrap:wrap;margin-top:20px}
  .b-cab .btn{height:52px}
  .pestanas{display:flex;gap:6px;margin:0 20px 14px;padding:5px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--linea-o2);position:relative;z-index:10}
  .pestanas button{flex:1;border:0;background:transparent;color:rgba(255,255,255,.75);font:500 14.5px/1 Outfit,system-ui,sans-serif;padding:11px 6px;border-radius:99px;cursor:pointer}
  .pestanas button[aria-selected="true"]{background:#fff;color:var(--negro)}
  .paneles{position:relative;inset:auto;display:block;margin:0 20px 24px;border-radius:22px;overflow:hidden;background:var(--negro-2)}
  .panel{position:relative;display:none;cursor:auto}
  .panel.abierto{display:block}
  .panel::before{display:none}
  .panel .medio{position:relative;height:300px}
  .panel .texto{position:relative;padding:22px 22px 26px}
  .panel .detalle{max-height:none;opacity:1}
  .panel .medio > img.portatil,.panel:not(.abierto) .medio > img.portatil{top:16px;width:94%;height:auto}
  .panel .hoja-manual{top:14px;left:50%;transform:translateX(-50%);width:min(74%,250px);padding:10px;gap:6px}
  .hoja-manual .num{font-size:22px}
  .hoja-manual b{font-size:12.5px}
  .hoja-manual small,.hoja-manual .pie-m{display:none}
  .panel .ficha-m{display:none}
}