/* ============================================
   IMPORTAR TIPOGRAFÍAS ELEGANTES
   ============================================ */
   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

   :root {
     --bg: #f7f5f0;
     --paper: #fffdf8;
     --ink: #171411;
     --muted: #7c756d;
     --line: rgba(23, 20, 17, 0.16);
     --line-soft: rgba(23, 20, 17, 0.08);
     --shadow: 0 18px 50px rgba(23, 20, 17, 0.08);
     --sidebar: 270px;
     --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
     --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
     --font-ui: 'Montserrat', Avenir, 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   }

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

   html {
     scroll-behavior: smooth;
   }

   body {
     min-height: 100vh;
     background: var(--bg);
     color: var(--ink);
     font-family: var(--font-serif);
     font-weight: 400;
     line-height: 1.5;
   }

   a {
     color: inherit;
     text-decoration: none;
   }

   button,
   input,
   textarea {
     font: inherit;
   }

   img,
   video {
     display: block;
     max-width: 100%;
   }

   .container {
     width: min(1120px, 92%);
     margin: 0 auto;
   }

   .home-page {
     background: var(--paper);
   }

   /* ============================================
      MENÚ CON LOGO - VERSIÓN CORREGIDA
      ============================================ */

   /* Logo */
   .brand-block {
     display: block;
   }

   .brand-link {
     display: inline-block;
     transition: opacity 0.3s ease;
   }

   .brand-logo {
     max-width: 180px;
     height: auto;
     display: block;
   }

   .brand-link:hover {
     opacity: 0.85;
   }

   /* Ocultar texto del logo antiguo */
   .brand {
     display: none;
   }

   .tag {
     margin-top: 12px;
     color: var(--ink);
     font-family: var(--font-ui);
     font-size: 0.7rem;
     font-weight: 400;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     opacity: 0.7;
   }

   /* Navegación elegante */
   .site-nav {
     display: grid;
     gap: 12px;
     font-family: var(--font-ui);
     font-size: 0.8rem;
     font-weight: 400;
     letter-spacing: 0.1em;
     text-transform: uppercase;
   }

   .site-nav a {
     color: var(--ink);
     text-decoration: none;
     transition: all 0.25s ease;
     position: relative;
     display: inline-block;
     width: fit-content;
   }

   /* Hover con línea */
   .site-nav a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--ink);
     transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

   .site-nav a:hover::after {
     width: 100%;
   }

   .site-nav a:hover {
     opacity: 0.7;
     transform: translateX(2px);
   }

   .site-nav p {
     margin-top: 20px;
     margin-bottom: 8px;
     color: var(--muted);
     font-family: var(--font-ui);
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.15em;
   }

   /* Redes sociales */
   .social-links {
     display: grid;
     gap: 10px;
     margin-top: auto;
     font-family: var(--font-ui);
     font-size: 0.7rem;
     font-weight: 400;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .social-links a {
     transition: all 0.25s ease;
     position: relative;
     width: fit-content;
   }

   .social-links a::after {
     content: '';
     position: absolute;
     bottom: -3px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--muted);
     transition: width 0.3s ease;
   }

   .social-links a:hover::after {
     width: 100%;
   }

   .social-links a:hover {
     opacity: 0.7;
     transform: translateX(2px);
   }

   /* Header fijo - SOLO EN ESCRITORIO */
   .site-header {
     position: fixed;
     inset: 0 auto 0 0;
     z-index: 20;
     width: var(--sidebar);
     border-right: 1px solid var(--line-soft);
     background: rgba(255, 253, 248, 0.96);
     backdrop-filter: blur(12px);
   }

   .sidebar-inner {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     gap: 32px;
     padding: 40px 28px;
   }

   /* Slim header - se muestra SOLO en móvil/tablet */
   .slim-header {
     display: none;
   }

   .site-main {
     margin-left: var(--sidebar);
   }

   .hero {
     min-height: 100vh;
   }

   /* ============================================
      GALERÍA PROFESIONAL - CUADRADA Y SIMÉTRICA
      ============================================ */
   .editorial-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     padding: 40px 20px;
     max-width: 1200px;
     margin: 0 auto;
   }

   .frame {
     aspect-ratio: 1 / 1;
     width: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 0;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }

   .frame:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
   }

   /* Tus imágenes */
   .photo-wedding {
     background-image: url('/assets/images/front1.jpg');
   }

   .photo-event {
     background-image: url('/assets/images/front2.jpg');
   }

   .photo-portrait {
     background-image: url('/assets/images/front3.jpg');
   }

   .photo-detail {
     background-image: url('/assets/images/front4.jpg');
   }

   .photo-party {
     background-image: url('/assets/images/hero-wedding.png');
   }

   .photo-quinces {
     background-image: url('/assets/images/portrait-session.png');
   }

   /* ============================================
      SECCIONES GENERALES
      ============================================ */
   .section {
     padding: 92px max(34px, 6vw);
   }

   .intro-section {
     display: grid;
     gap: 28px;
     max-width: 980px;
     margin: 0 auto;
     font-family: var(--font-serif);
     font-size: clamp(1.6rem, 3vw, 2.6rem);
     font-weight: 400;
     line-height: 1.2;
   }

   .text-link {
     width: fit-content;
     border-bottom: 1px solid currentColor;
     font-family: var(--font-ui);
     font-size: 0.78rem;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .section-label,
   .eyebrow {
     color: var(--muted);
     font-family: var(--font-ui);
     font-size: 0.72rem;
     font-weight: 500;
     letter-spacing: 0.14em;
     text-transform: uppercase;
   }

   .about-section,
   .film-section {
     display: grid;
     grid-template-columns: 0.72fr 1.28fr;
     gap: 54px;
     border-top: 1px solid var(--line-soft);
   }

   .about-copy {
     display: grid;
     gap: 22px;
     max-width: 840px;
   }

   .about-copy h2,
   .film-section h2 {
     font-family: var(--font-display);
     font-size: clamp(2.1rem, 4.6vw, 5rem);
     font-weight: 500;
     line-height: 0.98;
     letter-spacing: -0.02em;
   }

   .about-copy p,
   .film-section > p {
     font-family: var(--font-serif);
     max-width: 700px;
     color: #38332d;
     font-size: clamp(1.15rem, 1.7vw, 1.55rem);
     font-weight: 400;
   }

   .film-section {
     align-items: end;
     background: #efebe3;
   }

   .category-strip {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
   }

   .category-card {
     position: relative;
     min-height: 62vh;
     display: flex;
     align-items: flex-end;
     padding: 24px;
     overflow: hidden;
   }

   .category-card::before,
   .photo-visual::before,
   .video-thumb::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 58%);
   }

   .category-card span {
     position: relative;
     z-index: 1;
     color: white;
     font-family: var(--font-display);
     font-size: clamp(2rem, 4vw, 4.7rem);
     line-height: 0.95;
   }

   .blog-section {
     border-top: 1px solid var(--line-soft);
   }

   .blog-list {
     display: grid;
     margin-top: 32px;
     border-top: 1px solid var(--line);
   }

   .blog-list a {
     padding: 22px 0;
     border-bottom: 1px solid var(--line);
     font-family: var(--font-serif);
     font-size: clamp(1.55rem, 3vw, 3.25rem);
     line-height: 1.04;
     transition: opacity 0.2s ease;
   }

   .contact-section {
     min-height: 70vh;
     display: grid;
     align-content: center;
     justify-items: center;
     gap: 12px;
     border-top: 1px solid var(--line-soft);
     text-align: center;
   }

   .contact-section h2 {
     font-family: var(--font-display);
     font-size: clamp(2.8rem, 7vw, 7rem);
     font-weight: 500;
     line-height: 0.95;
     letter-spacing: -0.02em;
   }

   .contact-section h3 {
     margin-top: 18px;
     font-size: clamp(1.35rem, 2.4vw, 2.2rem);
     font-weight: 400;
   }

   .contact-actions {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 18px;
     margin-top: 22px;
     font-family: var(--font-ui);
     font-size: 0.76rem;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .site-footer {
     margin-left: var(--sidebar);
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 18px;
     padding: 26px;
     border-top: 1px solid var(--line-soft);
     color: var(--muted);
     font-family: var(--font-ui);
     font-size: 0.68rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .collection-page {
     min-height: 100vh;
     padding: 52px max(28px, 4vw) 76px;
   }

   .collection-hero {
     max-width: 900px;
     margin: 0 auto 42px;
     text-align: center;
   }

   .collection-hero h1 {
     margin: 10px 0 16px;
     font-family: var(--font-display);
     font-size: clamp(3.2rem, 8vw, 8rem);
     font-weight: 500;
     line-height: 0.92;
     letter-spacing: -0.03em;
   }

   .collection-hero p:not(.section-label) {
     max-width: 620px;
     margin: 0 auto;
     color: #38332d;
     font-size: clamp(1.2rem, 2vw, 1.65rem);
     line-height: 1.22;
   }

   .collection-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-flow: dense;
     gap: 18px;
     max-width: 1180px;
     margin: 0 auto;
   }

   .collection-grid figure {
     aspect-ratio: 1;
     overflow: hidden;
     background: var(--bg);
   }

   .collection-grid figure.is-clickable {
     cursor: zoom-in;
   }

   .collection-grid figure:nth-child(1),
   .collection-grid figure:nth-child(6n) {
     grid-column: span 2;
     grid-row: span 2;
   }

   .collection-grid img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.35s ease;
   }

   .collection-grid figure:hover img {
     transform: scale(1.035);
   }

   .lightbox {
     position: fixed;
     inset: 0;
     z-index: 100;
     display: grid;
     place-items: center;
     padding: 34px;
     background: rgba(12, 10, 8, 0.88);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.22s ease;
   }

   .lightbox.is-open {
     opacity: 1;
     pointer-events: auto;
   }

   .lightbox-image {
     max-width: min(1120px, 92vw);
     max-height: 86vh;
     object-fit: contain;
     box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
   }

   .lightbox-close {
     position: absolute;
     top: 20px;
     right: 22px;
     border: 1px solid rgba(255, 255, 255, 0.42);
     background: rgba(255, 253, 248, 0.08);
     color: #fffdf8;
     padding: 10px 14px;
     cursor: pointer;
     font-family: var(--font-ui);
     font-size: 0.68rem;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .lightbox-open {
     overflow: hidden;
   }

   .btn {
     display: inline-flex;
     min-height: 44px;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--ink);
     border-radius: 0;
     padding: 11px 18px;
     background: var(--ink);
     color: var(--paper);
     cursor: pointer;
     font-family: var(--font-ui);
     font-size: 0.74rem;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
   }

   .btn-outline,
   .btn-outline-light {
     background: transparent;
     color: var(--ink);
   }

   .grid {
     display: grid;
     gap: 14px;
   }

   .gallery-grid,
   .private-grid,
   .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
   }

   .photo-card,
   .portfolio-item,
   .video-card,
   .card {
     position: relative;
     overflow: hidden;
     border: 1px solid var(--line-soft);
     background: var(--paper);
     box-shadow: var(--shadow);
   }

   .photo-visual {
     position: relative;
     min-height: 330px;
   }

   .photo-visual span {
     position: absolute;
     left: 18px;
     bottom: 18px;
     z-index: 1;
     color: white;
     font-family: var(--font-ui);
     font-size: 0.72rem;
     font-weight: 500;
     letter-spacing: 0.14em;
     text-transform: uppercase;
   }

   .card {
     padding: 26px;
   }

   .section-head {
     max-width: 760px;
     margin: 0 0 36px;
   }

   .section-head h2,
   .section-head h3 {
     margin-top: 10px;
     font-family: var(--font-display);
     font-size: clamp(2.1rem, 4.2vw, 4rem);
     font-weight: 500;
     line-height: 1;
     letter-spacing: -0.02em;
   }

   .section-head p:not(.eyebrow),
   .muted,
   .message,
   .notice,
   .card p {
     color: var(--muted);
   }

   .auth-page {
     display: grid;
     min-height: 100vh;
     place-items: center;
     background: var(--bg);
   }

   .auth-wrap {
     width: min(520px, 92%);
   }

   .auth-panel h1 {
     margin: 12px 0 18px;
     font-family: var(--font-display);
     font-size: clamp(2.2rem, 7vw, 4rem);
     font-weight: 500;
     line-height: 0.98;
     letter-spacing: -0.02em;
   }

   .back-link {
     display: inline-block;
     margin-bottom: 18px;
     color: var(--muted);
     font-family: var(--font-ui);
     font-size: 0.72rem;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .stack-lg,
   .contact-form {
     display: grid;
     gap: 14px;
     margin-top: 24px;
   }

   .stack-lg label,
   .contact-form label {
     display: grid;
     gap: 8px;
     font-family: var(--font-ui);
     font-size: 0.75rem;
     font-weight: 500;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }

   input,
   textarea {
     width: 100%;
     border: 1px solid var(--line);
     background: white;
     color: var(--ink);
     padding: 13px 14px;
   }

   textarea {
     min-height: 140px;
     resize: vertical;
   }

   .notice {
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid var(--line-soft);
   }

   .client-summary {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 24px;
   }

   .table-wrap {
     overflow: auto;
   }

   table {
     width: 100%;
     border-collapse: collapse;
   }

   th,
   td {
     padding: 14px 12px;
     border-bottom: 1px solid var(--line-soft);
     text-align: left;
   }

   th {
     color: var(--muted);
     font-family: var(--font-ui);
     font-size: 0.7rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }

   .services-grid {
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   }

   .admin-reminders {
     margin-top: 22px;
   }

   /* ============================================
      RESPONSIVE CORREGIDO
      ============================================ */

   /* Tablets y pantallas medianas */
   @media (max-width: 980px) {
     /* Eliminar el margin-left del contenido principal */
     .site-main,
     .site-footer {
       margin-left: 0;
     }

     /* El menú lateral se convierte en menú superior */
     .site-header {
       position: sticky;
       top: 0;
       width: 100%;
       border-right: 0;
       border-bottom: 1px solid var(--line-soft);
     }

     .sidebar-inner {
       min-height: auto;
       padding: 20px 24px;
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
     }

     .brand-logo {
       max-width: 140px;
     }

     /* Navegación horizontal */
     .site-nav {
       display: flex;
       flex-wrap: wrap;
       gap: 12px 20px;
       margin-top: 0;
       justify-content: flex-end;
     }

     .site-nav p {
       display: none;
     }

     /* Ocultar redes sociales en móvil/tablet */
     .social-links {
       display: none;
     }

     .site-nav a::after {
       bottom: -2px;
     }

     /* Ajustes de galería */
     .editorial-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
       padding: 32px 16px;
     }

     .collection-grid {
       grid-template-columns: repeat(3, 1fr);
     }

     .collection-grid figure:nth-child(1),
     .collection-grid figure:nth-child(6n) {
       grid-column: span 2;
       grid-row: span 2;
     }

     /* Ajustes de secciones */
     .about-section,
     .film-section {
       grid-template-columns: 1fr;
     }

     .collection-page {
       padding: 42px 5% 64px;
     }
   }

   /* Móviles grandes */
   @media (max-width: 768px) {
     .section {
       padding: 58px 5%;
     }

     .sidebar-inner {
       display: grid;
       grid-template-columns: 1fr;
       justify-items: center;
       padding: 16px 18px 14px;
       gap: 14px;
     }

     .brand-logo {
       max-width: 118px;
     }

     .tag {
       margin-top: 8px;
       text-align: center;
       font-size: 0.62rem;
       letter-spacing: 0.16em;
     }

     .site-nav {
       width: 100%;
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 9px 12px;
       justify-content: stretch;
       font-size: 0.68rem;
       text-align: center;
     }

     .site-nav a {
       width: 100%;
       padding: 8px 6px;
       border-top: 1px solid var(--line-soft);
       border-bottom: 1px solid var(--line-soft);
     }

     .site-nav a:hover {
       transform: none;
     }

     .site-nav a::after {
       display: none;
     }

     /* Galería en móvil */
     .editorial-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 12px;
       padding: 18px 12px 32px;
     }

     .intro-section {
       font-size: clamp(1.35rem, 8vw, 2rem);
       line-height: 1.18;
     }

     .about-copy h2,
     .film-section h2,
     .collection-hero h1,
     .contact-section h2 {
       letter-spacing: -0.015em;
     }

     .about-copy h2,
     .film-section h2 {
       font-size: clamp(2rem, 12vw, 3.6rem);
     }

     .about-copy p,
     .film-section > p,
     .collection-hero p:not(.section-label) {
       font-size: clamp(1.08rem, 5vw, 1.35rem);
     }

     .collection-page {
       padding: 36px 5% 58px;
     }

     .collection-hero {
       margin-bottom: 28px;
     }

     .collection-hero h1 {
       font-size: clamp(3rem, 18vw, 5.4rem);
     }

     .gallery-grid,
     .private-grid,
     .portfolio-grid,
     .category-strip {
       grid-template-columns: 1fr;
     }

     .collection-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 12px;
     }

     .collection-grid figure:nth-child(1),
     .collection-grid figure:nth-child(6n) {
       grid-column: span 2;
       grid-row: span 2;
     }

     .category-card {
       min-height: 68vw;
     }

     .slim-header .nav,
     .client-summary {
       display: grid;
       grid-template-columns: 1fr;
     }
   }

   /* Móviles pequeños */
   @media (max-width: 480px) {
     .sidebar-inner {
       align-items: center;
       padding-inline: 14px;
     }

     .site-nav {
       gap: 8px;
       font-size: 0.64rem;
       letter-spacing: 0.08em;
     }

     .editorial-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 8px;
       padding: 12px 8px 28px;
     }

     .collection-grid {
       gap: 10px;
     }

     .collection-grid figure:nth-child(1),
     .collection-grid figure:nth-child(6n) {
       grid-column: span 2;
       grid-row: span 2;
     }

     .contact-actions,
     .site-footer {
       gap: 12px;
       font-size: 0.66rem;
     }
   }
/* Elimina márgenes y paddings del body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* La sección principal ocupa toda la ventana */
.hero-video {
  position: relative;
  width: 100vw;      /* 100% del ancho de la ventana */
  height: 100vh;     /* 100% del alto de la ventana */
  overflow: hidden;  /* Oculta cualquier desborde */
}

/* El video se estira para cubrir toda la sección */
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);  /* Centra perfectamente */
  object-fit: cover;  /* Mantiene proporción sin deformar */
  z-index: 1;
}

/* El contenido va ENCIMA del video */
.contenido {
  position: relative;
  z-index: 2;  /* Mayor que el video (z-index:1) */
  color: white; /* Texto blanco para que contraste */
  text-align: center;
  padding: 20px;
  /* Opcional: centrar verticalmente */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  
  /* Si el video es oscuro, mejora la legibilidad */
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparente */
}
/* ============================================
   SECCIÓN DE VIDEO - COMPARTIENDO HISTORIAS
   ============================================ */

/* La sección que contiene el video */
.seccion-video-compartiendo {
  position: relative;
  width: 100%;
  min-height: 100vh;  /* Ocupa al menos toda la pantalla */
  overflow: hidden;
  background-color: #000; /* Fondo negro mientras carga */
}

/* El video de fondo */
.video-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Cubre toda el área sin deformarse */
  z-index: 1;
}

/* Contenedor del contenido que va ENCIMA del video */
.contenido-video {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  
  /* Fondo semi-transparente para mejor legibilidad del texto */
  background-color: rgba(0, 0, 0, 0.4);
  
  /* Color del texto - blanco para contraste */
  color: #ffffff;
}

/* Estilos para el título */
.contenido-video h1 {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Estilos para el párrafo */
.contenido-video p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ============================================
   RESPONSIVE PARA MÓVILES Y TABLETS
   ============================================ */

/* Tablets (pantallas menores a 768px) */
@media (max-width: 768px) {
  .contenido-video h1 {
    font-size: 2.2rem;
  }
  
  .contenido-video p {
    font-size: 1.1rem;
  }
  
  .contenido-video {
    padding: 1.5rem;
  }
}

/* Móviles (pantallas menores a 480px) */
@media (max-width: 480px) {
  .contenido-video h1 {
    font-size: 1.8rem;
  }
  
  .contenido-video p {
    font-size: 1rem;
  }
  
  .contenido-video {
    padding: 1rem;
  }
}

/* Pantallas muy grandes (opcional) */
@media (min-width: 1200px) {
  .contenido-video h1 {
    font-size: 4.5rem;
  }
  
  .contenido-video p {
    font-size: 1.8rem;
  }
}
/* ============================================
   SECCIÓN DE VIDEO - COMPARTIENDO HISTORIAS
   ============================================ */

/* La sección que contiene el video */
.seccion-video-compartiendo {
  position: relative;
  width: 100%;
  min-height: 100vh;  /* Ocupa al menos toda la pantalla */
  overflow: hidden;
  background-color: #000; /* Fondo negro mientras carga */
}

/* El video de fondo */
.video-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Cubre toda el área sin deformarse */
  z-index: 1;
}

/* Contenedor del contenido que va ENCIMA del video */
.contenido-video {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  
  /* Fondo semi-transparente para mejor legibilidad del texto */
  background-color: rgba(0, 0, 0, 0.4);
  
  /* Color del texto - blanco para contraste */
  color: #ffffff;
}

/* Estilos para el título */
.contenido-video h1 {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Estilos para el párrafo */
.contenido-video p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Estilo para la etiqueta "Portfolio" */
.contenido-video .section-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  color: #ffd700; /* Dorado - opcional, cambialo por el color que quieras */
}

/* ============================================
   RESPONSIVE PARA MÓVILES Y TABLETS
   ============================================ */

/* Tablets (pantallas menores a 768px) */
@media (max-width: 768px) {
  .contenido-video h1 {
    font-size: 2.2rem;
  }
  
  .contenido-video p {
    font-size: 1.1rem;
  }
  
  .contenido-video {
    padding: 1.5rem;
  }
}

/* Móviles (pantallas menores a 480px) */
@media (max-width: 480px) {
  .contenido-video h1 {
    font-size: 1.8rem;
  }
  
  .contenido-video p {
    font-size: 1rem;
  }
  
  .contenido-video {
    padding: 1rem;
  }
}

/* Pantallas muy grandes */
@media (min-width: 1200px) {
  .contenido-video h1 {
    font-size: 4.5rem;
  }
  
  .contenido-video p {
    font-size: 1.8rem;
  }
}
/* ============================================
   SECCIÓN DE VIDEO - ANCHO COMPLETO (debajo del texto)
   ============================================ */

   .seccion-video-completo {
    width: 100%;
    height: auto;
    background-color: #000;
    overflow: hidden;
  }
  
  .video-100porciento {
    width: 100%;
    height: auto;
    display: block;
    /* Opcional: altura fija si querés que sea más alto */
    /* max-height: 80vh; */
    /* object-fit: cover; */
  }
  
  /* Si querés que el video tenga una altura específica y se recorte */
  /* Descomentá estas líneas si preferís altura fija */
  /*
  .seccion-video-completo {
    height: 80vh;
  }
  
  .video-100porciento {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  */
  .seccion-video-completo {
    width: 100%;
    height: 80vh;  /* 80% del alto de la pantalla */
    overflow: hidden;
  }
  
  .video-100porciento {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* El video se ajusta sin deformarse */
  }
  /* ============================================
   ELIMINAR ESPACIO BLANCO ENTRE TEXTO Y VIDEO
   ============================================ */

/* Que el main ocupe solo el espacio de su contenido */
.site-main.collection-page {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* La sección del héroe (título) sin márgenes extra */
.collection-hero {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* El video pegado al contenido anterior */
.seccion-video-completo {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

/* El video se ve bien proporcionado */
.video-100porciento {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.contenido-texto {
  min-height: auto;
  padding: 2rem 2rem 0 2rem;  /* Solo espacio arriba y costados */
}

.collection-hero {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}