.elementor-5367 .elementor-element.elementor-element-d7b66c0{--display:flex;--min-height:1065px;--margin-top:-121px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}@media(min-width:768px){.elementor-5367 .elementor-element.elementor-element-d7b66c0{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-4b532b3 */:root{
    --bg:        #050505;
    --red:       #e30613;
    --red-dim:   #6e0409;
    --ink:       #f4f2ee;
    --ink-dim:   #9a9a96;
    --line-w:    2px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html, body{
    width:100%; height:100%;
    background:var(--bg);
    overflow:hidden;
    font-family:'Montserrat', sans-serif;
  }

  .stage{
    position:relative;
    width:100vw; height:100vh;
  }

  /* ---- Paneles diagonales ---- */
  .panel{
    position:absolute; inset:0;
    display:flex;
    text-decoration:none;
    color:var(--ink);
    cursor:pointer;
    -webkit-clip-path: polygon(var(--clip));
    clip-path: polygon(var(--clip));
    transition: clip-path .6s cubic-bezier(.65,0,.35,1);
  }

  /* La franja central ocupa ahora más superficie (~54%) que cada triángulo (~23% cada uno).
     Rectas paralelas a 45º: x + y = 70 y x + y = 130. */
  .panel--1{ --clip: 0% 0%, 70% 0%, 0% 70%; }
  .panel--2{ --clip: 70% 0%, 100% 0%, 100% 30%, 30% 100%, 0% 100%, 0% 70%; }
  .panel--3{ --clip: 100% 30%, 100% 100%, 30% 100%; }

  .panel__media{
    position:absolute; inset:-2vw; /* margen extra para que al escalar no se vean bordes */
    z-index:0;
  }

  .panel__media video,
  .panel__media .fallback{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    filter: grayscale(65%) brightness(.55) contrast(1.05);
    transform: scale(1.06);
    transition: filter .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
  }

  .panel__scrim{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.55));
    transition: background .6s ease;
    z-index:1;
  }

  /* ---- Contenido de cada panel, posicionado en el centroide de su forma ---- */
  .panel__content{
    position:absolute;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
    pointer-events:none;
  }

  /* Los tres anclajes quedan sobre la misma diagonal (paralela a las líneas divisorias
     pero perpendicular a ellas), simétricos respecto al centro: panel 1 y panel 3
     son espejo el uno del otro, y panel 2 cae justo en el medio. */
  .panel--1 .panel__content{ top:15%;  left:11%;  align-items:flex-start; text-align:left; }
  .panel--2 .panel__content{ top:50%;  left:50%;  transform:translate(-50%,-50%); align-items:flex-start; text-align:left; }
  .panel--3 .panel__content{ top:85%;  right:11%; align-items:flex-start;   text-align:left; transform:translateY(-100%);
  margin-top: 60px;}

  .panel__eyebrow{
    font-family:'Anybody', sans-serif;
    font-size:clamp(.65rem, .9vw, .85rem);
    letter-spacing:.35em;
    text-transform:uppercase;
    color:var(--red);
    font-weight:700;
  }

  .panel__title{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    line-height:.92;
    font-size:clamp(1.6rem, 3.6vw, 4rem);
    letter-spacing:.01em;
    color:var(--ink);
  }

  .panel__desc{
    font-family:'Montserrat', sans-serif;
    max-width:22ch;
    font-size:clamp(.75rem, .95vw, .95rem);
    color:var(--red);
    font-weight:400;
  }

  .panel__cta{
    margin-top:.4rem;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.75rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--ink);
    opacity:0;
    transform:translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .panel__cta::after{
    content:"";
    width:26px; height:1px;
    background:var(--red);
    transition:width .4s ease;
  }

  /* ---- Estados hover: zoom + el vídeo se PAUSA (vía JS) y recupera su color real ---- */
  .panel:hover .panel__media video,
  .panel:hover .panel__media .fallback{
    filter: grayscale(0%) brightness(.95) contrast(1.05);
    transform: scale(1.18);
  }
  .panel__media video.is-paused{
    filter: grayscale(0%) brightness(.95) contrast(1.05) !important;
  }
  .panel:hover .panel__scrim{
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05) 40%, rgba(0,0,0,.4));
  }
  .panel:hover .panel__cta{ opacity:1; transform:translateY(0); }
  .panel:hover .panel__cta::after{ width:44px; }

  .panel--1:hover ~ .lines #lineA,
  .panel--3:hover ~ .lines #lineB{ stroke-width: 3.4; filter: drop-shadow(0 0 6px var(--red)); }
  .panel--2:hover ~ .lines #lineA,
  .panel--2:hover ~ .lines #lineB{ stroke-width: 3.4; filter: drop-shadow(0 0 6px var(--red)); }

  /* Cuando cualquier panel tiene hover, atenuar ligeramente los demás */
  .stage:has(.panel--1:hover) .panel--2 .panel__media video,
  .stage:has(.panel--1:hover) .panel--3 .panel__media video,
  .stage:has(.panel--2:hover) .panel--1 .panel__media video,
  .stage:has(.panel--2:hover) .panel--3 .panel__media video,
  .stage:has(.panel--3:hover) .panel--1 .panel__media video,
  .stage:has(.panel--3:hover) .panel--2 .panel__media video{
    filter: grayscale(90%) brightness(.35);
  }

  /* ---- Líneas rojas de separación (SVG superpuesto, no interactivo) ---- */
  .lines{
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:5;
    pointer-events:none;
  }
  .lines line{
    stroke:var(--red);
    stroke-width:1.6;
    vector-effect:non-scaling-stroke;
    transition: stroke-width .4s ease, filter .4s ease;
  }

  @media (max-width: 760px){
    .stage{ overflow:visible; }
    .panel--1 .panel__content{ top:10%; left:8%; }
    .panel--2 .panel__content{ top:48%; left:50%; }
    .panel--3 .panel__content{ top:90%; right:8%; transform:translateY(-100%); }
    .panel__desc{ display:none; }
  }/* End custom CSS */