* { box-sizing: border-box; }

/* =========================
   BACKGROUND
   ========================= */
body{
  background:
    radial-gradient(1100px 650px at 82% 8%, rgba(0, 255, 240, 0.25), transparent 58%),
    radial-gradient(900px 520px at 12% 0%, rgba(255, 0, 170, 0.22), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(120, 90, 255, 0.10), transparent 60%),
    linear-gradient(#0f1115, #15171c);
  position:relative;
  color:#eaeaea;
  margin:0;
  font-family: "Oswald", system-ui, sans-serif;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 18%, black 0%, transparent 70%);
  opacity:.55;
  pointer-events:none;
  z-index:-1;
}

body::after{
  content:"";
  position:fixed; inset:-20%;
  background:
    radial-gradient(700px 420px at 75% 5%, rgba(0,255,240,0.12), transparent 65%),
    radial-gradient(600px 360px at 20% 8%, rgba(255,0,170,0.10), transparent 60%);
  filter: blur(30px);
  opacity:.8;
  pointer-events:none;
  z-index:-1;
}

/* =========================
   GALERÍA (CONTENEDOR GENERAL)
   ========================= */
.case-study-gallery{
  width: 90%;
  margin: 48px auto;
  max-width: 1100px;
  text-align: center; /* centra logo, título, brief y slogan */
}

/* =========================
   LOGO
   ========================= */
.site-logo{
  display:block;
  width:120px;
  max-width:35vw;
  height:auto;
  margin:0 auto -10px;
}
@media (min-width:768px){
  .site-logo{ width:160px; margin-bottom:-8px; }
}

/* =========================
   TÍTULO
   ========================= */
.title{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:0 auto 2px;
  text-align:center;
  font-weight:200;
  font-size:2.4rem;
  letter-spacing:4px;
  background: linear-gradient(rgba(255,255,255,0), #d9d9d9, rgba(255,255,255,0));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-transform:lowercase;
}
@media (min-width:600px){
  .title{ font-size:3rem; }
}

/* =========================
   BLOQUE TEXTO (BRIEF)
   ========================= */
.studio-brief{
  width: min(90%, 920px);
  margin: 1rem auto 2.5rem;
  padding: 1.4rem 1.6rem;

  text-align:left;
  font-size:1.05rem;
  line-height:1.65;
  color:rgba(255,255,255,0.9);

  /* marco/back sutil */
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter: blur(6px);
}

.studio-brief p{
  width:100%;
  margin:0 0 1.2rem;
  color:inherit;
}
.studio-brief p:last-child{ margin-bottom:0; }

/* 2 columnas SOLO cuando hay espacio real (desktop) */
@media (min-width:900px){
  .studio-brief{
    column-count:2;
    column-gap:2.5rem;
  }
  .studio-brief p{
    break-inside:avoid;
    margin-bottom:1.6rem;
  }
}

/* =========================
   SLOGAN
   ========================= */
.case-study-gallery > p{
  margin: 0 auto 2rem;
  max-width: 520px;
  font-size:1.05rem;
  color: rgba(255,255,255,0.80);
  font-weight:300;
  text-align:center;
}

/* =========================
   GRID DE CASES (NUEVO)
   ========================= */
.cases-grid{
  width:100%;
  margin: 0 auto;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
}

/* =========================
   CARDS
   ========================= */
.case-study{
  position:relative;
  display:block;
  width:90%;
  height:250px;

  border-radius:12px;
  overflow:hidden;
  background:#000;
  cursor:pointer;

  box-shadow:
    0 25px 50px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.05) inset;

  transition: all 0.4s ease;
}

/* altura un poco mayor en pantallas medianas+ */
@media (min-width:600px){
  .case-study{ height:300px; }
}

/* 2 columnas reales en desktop */
@media (min-width:720px){
  .case-study{
    width: calc(50% - 2rem);
    margin:0;
  }
}

/* =========================
   BADGES
   ========================= */
.case-study__badge{
  position:absolute;
  top:14px; left:14px;
  z-index:50;

  padding:7px 12px;
  border-radius:999px;

  font-size:.9rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#fff;

  background:rgba(5,6,8,0.85);
  border:1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 0 10px rgba(255,255,255,0.12),
    0 0 26px rgba(0,190,255,0.28);

  backdrop-filter: blur(6px);
}

.case-study[data-type="pelicula"] .case-study__badge{
  border-color: rgba(255,0,170,1);
  box-shadow:
    0 0 14px rgba(255,0,170,0.65),
    0 0 34px rgba(255,0,170,0.55);
}

.case-study[data-type="videoclip"] .case-study__badge{
  border-color: rgba(0,170,255,1);
  box-shadow:
    0 0 14px rgba(0,170,255,0.70),
    0 0 36px rgba(0,170,255,0.55);
}

.case-study[data-type="publicidad"] .case-study__badge{
  border-color: rgba(255,190,0,1);
  box-shadow:
    0 0 14px rgba(255,190,0,0.6),
    0 0 34px rgba(255,190,0,0.5);
}

.case-study[data-type="documental"] .case-study__badge{
  border-color: rgba(255,255,255,1);
  background: rgba(10,10,12,0.8);
  box-shadow:
    0 0 10px rgba(255,255,255,0.65),
    0 0 26px rgba(255,255,255,0.35);
}

/* =========================
   PLACEHOLDER
   ========================= */
.case-study__placeholder{
  position:absolute; inset:0;
  background:#000;
}
.case-study__placeholder::after{
  content:"▶";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:52px;
  color:rgba(255,255,255,0.12);
}

/* =========================
   OVERLAY / HOVER
   ========================= */
.case-study__overlay{
  width:100%; height:100%;
  position:absolute; top:0;
  z-index:10;
}

.case-study__overlay:after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  background:
    radial-gradient(400px 260px at 50% 0%, rgba(0,255,240,0.18), transparent 60%),
    rgba(0,0,0,0.85);
  opacity:0;
  z-index:-10;
  transition:all .3s ease;
}

/* título hover */
.case-study__title{
  position:relative;
  top:-200px;
  margin:4rem 0 2rem;

  font-size:2.15rem;
  font-weight:200;
  color:#fff;
  text-align:center;
  letter-spacing:5px;
  text-shadow:0 0 12px rgba(0,255,240,0.35);

  transition:all .3s cubic-bezier(.3,0,0,1.3);
}

/* tamaños especiales para títulos largos */
.case-study__title--sm{
  font-size:1.55rem;
  letter-spacing:3px;
  margin-top:3.2rem;
}
@media (min-width:768px){
  .case-study__title--sm{ font-size:1.8rem; }
}

.case-study__title--xs{
  font-size:1.35rem;
  letter-spacing:2px;
  margin-top:3rem;
}
@media (min-width:768px){
  .case-study__title--xs{ font-size:1.55rem; }
}

/* botón hover */
.case-study__link{
  position:relative;
  display:block;
  width:60%;
  top:200px;

  padding:10px;
  margin:0 auto;

  font-family:"Oswald";
  color:#fff;
  letter-spacing:3px;
  text-align:center;

  border:2px solid rgba(255,255,255,0.9);
  border-radius:4px;
  font-size:1.2em;

  background:transparent;
  cursor:pointer;
  transition:all .3s cubic-bezier(.3,0,0,1.3);
}

.case-study__link:hover{
  background:#fff;
  color:#0b0c0f;
  box-shadow:0 0 18px rgba(0,255,240,0.55);
}

/* hover */
.case-study:hover .case-study__title{ top:0; }
.case-study:hover .case-study__link{ top:0; }
.case-study:hover .case-study__overlay:after{ opacity:1; }

/* =========================
   MODAL
   ========================= */
.video-modal{
  position:fixed; inset:0;
  z-index:9999;
  display:none;
  pointer-events:none;
}
.video-modal.is-open{
  display:block;
  pointer-events:auto;
}

.video-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(2px);
}

.video-modal__content{
  position:relative;
  width:min(1000px, 92vw);
  height:min(560px, 52vw);
  max-height:80vh;
  margin:6vh auto 0;
  background:#000;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.8);
  overflow:hidden;
}

.video-modal__frame-wrap{ position:absolute; inset:0; }
.video-modal__frame-wrap iframe{
  width:100%; height:100%; border:0;
}

.video-modal__close{
  position:absolute; top:10px; right:14px;
  z-index:2;
  width:40px; height:40px;
  border:0; border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff; font-size:26px; line-height:40px;
  cursor:pointer;
}
.video-modal__close:hover{ background:rgba(255,255,255,0.22); }

/* =========================
   FONDOS STUDY 1–18
   ========================= */
.study1{ background: radial-gradient(600px 320px at 20% 10%, rgba(0,170,255,0.35), transparent 60%), linear-gradient(180deg, #05070a, #0b0e14); }
.study2{ background: radial-gradient(520px 300px at 80% 15%, rgba(255,0,170,0.30), transparent 60%), linear-gradient(180deg, #05070a, #0b0e14); }
.study3{ background: radial-gradient(540px 320px at 50% 0%, rgba(0,255,240,0.28), transparent 60%), linear-gradient(180deg, #05070a, #0b0e14); }
.study4{ background: radial-gradient(560px 340px at 10% 90%, rgba(120,90,255,0.25), transparent 60%), linear-gradient(180deg, #05070a, #0b0e14); }
.study5{ background: radial-gradient(560px 340px at 85% 80%, rgba(255,0,170,0.35), transparent 60%), linear-gradient(180deg, #05070a, #0b0e14); }
.study6{ background: radial-gradient(560px 340px at 50% 50%, rgba(0,170,255,0.30), transparent 60%), linear-gradient(180deg, #05070a, #0b0e14); }
.study7{ background: radial-gradient(700px 380px at 70% 10%, rgba(255,190,0,0.35), transparent 60%), radial-gradient(500px 280px at 10% 80%, rgba(0,170,255,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study8{ background: radial-gradient(700px 380px at 30% 5%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(520px 300px at 90% 70%, rgba(120,90,255,0.20), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study9{ background: radial-gradient(700px 380px at 20% 10%, rgba(255,0,170,0.35), transparent 60%), radial-gradient(520px 300px at 80% 80%, rgba(0,170,255,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study10{ background: radial-gradient(700px 380px at 80% 12%, rgba(255,190,0,0.35), transparent 60%), radial-gradient(520px 300px at 15% 85%, rgba(255,0,170,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study11{ background: radial-gradient(650px 360px at 35% 12%, rgba(0,255,240,0.32), transparent 60%), radial-gradient(520px 300px at 80% 85%, rgba(255,0,170,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study12{ background: radial-gradient(650px 360px at 70% 15%, rgba(255,0,170,0.32), transparent 60%), radial-gradient(520px 300px at 20% 85%, rgba(120,90,255,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study13{ background: radial-gradient(620px 340px at 50% 8%, rgba(255,190,0,0.28), transparent 60%), radial-gradient(520px 300px at 15% 80%, rgba(0,170,255,0.20), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study14{ background: radial-gradient(700px 380px at 20% 5%, rgba(0,255,240,0.24), transparent 60%), radial-gradient(520px 300px at 85% 70%, rgba(255,255,255,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study15{ background: radial-gradient(700px 380px at 80% 15%, rgba(0,170,255,0.32), transparent 60%), radial-gradient(520px 300px at 25% 80%, rgba(255,0,170,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study16{ background: radial-gradient(650px 360px at 15% 10%, rgba(255,255,255,0.26), transparent 60%), radial-gradient(520px 300px at 85% 80%, rgba(255,190,0,0.20), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study17{ background: radial-gradient(700px 380px at 30% 12%, rgba(120,90,255,0.30), transparent 60%), radial-gradient(520px 300px at 80% 85%, rgba(0,255,240,0.18), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
.study18{ background: radial-gradient(700px 380px at 75% 15%, rgba(255,0,170,0.32), transparent 60%), radial-gradient(520px 300px at 20% 80%, rgba(255,255,255,0.16), transparent 65%), linear-gradient(180deg, #05070a, #0b0e14); }
/* ===== STUDIO BRIEF ===== */
.studio-brief{
  width: min(90%, 920px);
  margin: 1rem auto 2.5rem;
  padding: 1.25rem 1.5rem;
  font-family: "Oswald";
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  text-align: left;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset;
}

/* párrafos base */
.studio-brief p{
  width: 100%;
  margin: 0 0 1.2rem;
  color: inherit;

  position: relative;
  padding-left: 26px; /* espacio ícono */
}

/* ícono para todos */
.studio-brief p::before{
  content:"▶";
  position:absolute;
  left:0;
  top:0.9em;              /* mismo alto para todos */
  transform:translateY(-50%);
  font-size:.9em;
  opacity:.75;
  color:rgba(0,170,255,0.9);
  text-shadow:0 0 8px rgba(0,170,255,0.6);
}

/* ==== 2 columnas REALES (no column-count) ==== */
@media (min-width: 900px){
  .studio-brief{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 0.2rem;
  }

  .studio-brief p{
    margin-bottom: 1.2rem;
  }
}

/* párrafo final a todo el ancho */
.studio-brief p.brief-wide{
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  padding-left: 0; /* no necesita sangría */
}

/* ícono centrado/acomodado solo en el wide */
.studio-brief p.brief-wide::before{
  left: 0;
  top: 1.1em;
  transform: translateY(-50%);
  opacity: .9;
}