/* Alex Brush */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

:root {
    --border-angle: 0turn;
    --bg: transparent;
}

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0turn;
    inherits: false;
}

.video { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; background-color: var(--color-bg); }
.video__container { width: 100%; max-width: 1920px; height: fit-content; padding: var(--spacing-s); }
@media only screen and (min-width: 768px) { .video__container { padding: var(--spacing-l); } }
.video__container .title { margin: auto; text-align: center; font-family: var(--font-primary); font-weight: 500; font-size: clamp(1.8rem, 0.943rem + 4.286vw, 3rem); margin: 0 0 var(--spacing-s) 0; }

/* ────────── GRID (vídeo + cita) ──────────*/
.video__grid { display: grid; gap: var(--spacing-m); align-items: center; }
@media (min-width: 1024px) { .video__grid { grid-template-columns: 1fr 1fr; } } /* Dos columnas en desktop */

/* ────────── VIDEO (BLOQUE IZQUIERDO) ──────────*/
.frame__container { aspect-ratio: 16/9; width: 100%; position: relative; border-radius: 15px; overflow: hidden; background: var(--bg); }
.frame__container::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 4px; background: conic-gradient(from var(--border-angle), var(--color-text) 0%, var(--color-text) 25%, var(--color-accent) 50%, var(--color-text) 50%, var(--color-text) 75%, var(--color-accent)); animation: border-angle-rotate 16s infinite linear; opacity: 1; pointer-events: none; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.video-frame { 
  position: absolute; 
  inset: 3px; 
  width: calc(100% - 6px); 
  height: calc(100% - 6px); 
  border-radius: 12px; 
  overflow: hidden; 
  z-index: 1;
  object-fit: cover;
  display: block;
}

/* Estilo específico para la sección de video principal */
.video .frame__container .video-frame {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 12px;
  object-fit: cover;
  z-index: 1;
}
@keyframes border-angle-rotate { 0% { --border-angle: 0turn; } 100% { --border-angle: 1turn; } }

/* ────────── CITA (BLOQUE DERECHO) ──────────*/
.video__quote { margin: 0; padding: 0; }
.video__quote blockquote { margin: 0; padding: 0; border-left: 3px solid var(--color-accent); padding-left: var(--spacing-m); }
.quote--lead { font-family: var(--font-primary); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.6rem); font-weight: 500; color: var(--color-accent); margin: 0 0 var(--spacing-s) 0; }
.quote--parraph { font-family: var(--font-secondary); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.2rem); line-height: 1.7; margin: 0; }
.quote--signature {
    display: block;
    margin-top: var(--spacing-m);
    padding-right: var(--spacing-m);
    text-align: right;
    font-family: 'Alex Brush', cursive;
    font-size: 3rem;
    color: var(--color-accent);
}

/* ========================================
   NEW VIDEO COMPONENT
   ======================================== */

.new-video__section {
    padding: var(--spacing-l) var(--spacing-s);
    background-color: var(--color-bg);
}

@media only screen and (min-width: 768px) {
    .new-video__section {
        padding: var(--spacing-l);
    }
}

.new-video__title-container {
    text-align: center;
    margin-bottom: var(--spacing-l);
}

.new-video--title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: clamp(1.8rem, 0.943rem + 4.286vw, 3rem);
    color: var(--color-text);
    margin: 0 0 var(--spacing-s) 0;
}

.new-video__video-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.new-video__video-animated-border {
    aspect-ratio: 16/9;
    width: 100%;
    position: relative;
    border-radius: 16px; /* Radio del borde exterior */
    overflow: hidden;
    background: var(--bg);
}

.new-video__video-animated-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px; /* Grosor del borde */
    background: conic-gradient(from var(--border-angle), var(--color-text) 0%, var(--color-text) 25%, var(--color-accent) 50%, var(--color-text) 50%, var(--color-text) 75%, var(--color-accent));
    animation: border-angle-rotate 16s infinite linear;
    opacity: 1;
    pointer-events: none;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.new-video__video {
    position: absolute;
    /* inset: 4px; */ /* Igual que el padding del borde */
    /* width: calc(100% - 8px); */ /* Contenedor - (padding * 2) */
    /* height: calc(100% - 8px); */ /* Contenedor - (padding * 2) */
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(0.99);
    border-radius: 12px; /* Radio exterior (16px) - grosor del borde (4px) */
    object-fit: cover;
    overflow: hidden;
    z-index: 1;
}