/*
Theme Name:   Hello Elementor Child — David Griso
Theme URI:    https://new.davidgriso.com
Description:  Tema hijo de Hello Elementor. Aloja el CSS reutilizable de galerías (.dg-*) para las plantillas de fila de Elementor V4 atómico. Las páginas estáticas siguen en HTML; WordPress solo se usa para galerías.
Author:       David Griso
Template:     hello-elementor
Version:      0.7.1
Text Domain:  hello-elementor-child
*/

/* ============================================================
   SISTEMA DE GALERÍA — medido sobre la galería antigua
   https://new.davidgriso.com/weddings/wedding-in-barcelona-xalet-del-nin/
   (.custom-gallery / .griso-gallery-1..17, medido a 1280 y 1440 px)

   Lo que hace esa galería, y que replicamos aquí:
   · TODO va en `vw`: la composición escala con la ventana, nunca en px.
   · Gutter entre fotos: 0.5vw. Separación entre filas: 0.5vw (casi se tocan).
   · La página va a sangre (sin gutter lateral): cada fila lleva su propio
     sangrado (0, 9vw o 17vw) y cada foto su ancho exacto en vw.
   · Los anchos vienen de una paleta corta: 15,16,23,24,25,31,32,33,40,48,49.
     Un vertical 2/3 "normal" mide 32vw → 48vw de alto: entra en pantalla.
   · Los escalonados son márgenes superiores en vw (1 a 23).
   ============================================================ */

/* ============================================================
   FUENTES — autoalojadas, las mismas del sitio estático
   (fonts/ copiado de la web en HTML; no dependemos de plugins)
   ============================================================ */
@font-face{
  font-family:'Wulkan Regular';
  src:url('fonts/Wulkan-Regular.woff2') format('woff2'),
      url('fonts/Wulkan-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Arges Heavy';
  src:url('fonts/Arges-NormalHeavy.woff2') format('woff2'),
      url('fonts/Arges-NormalHeavy.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Tokens del sitio estático (no inventados) */
  --dg-black:#0e0c0c;          /* --custom-black */
  --dg-cream:#e1ded7;          /* --cream */
  --dg-page-bg:#fff;           /* --page-bg */

  /* Mismos nombres que en las páginas .html, para que la cabecera y el
     menú de abajo sean copia literal y no haya dos versiones que mantener. */
  --custom-black:#0e0c0c;
  --cream:#e1ded7;

  /* Métrica de la galería antigua */
  --dg-gap:      .5vw;   /* gutter entre fotos de una misma fila   */
  --dg-gap-fine: .5vw;   /* (mismo valor: la galería usa uno solo)  */
  --dg-rhythm:   .5vw;   /* separación vertical entre filas         */
  --dg-pad:      0;      /* gutter lateral de la página: a sangre    */
  --dg-air:      10vw;   /* respiro extra de las filas con .dg-air   */

  --dg-bp-mobile: 767px; /* punto de ruptura móvil */
}

/* ============================================================
   RESET DE LA BASE ATÓMICA DE ELEMENTOR
   Todo e-flexbox nace con `display:flex; flex-direction:row; padding:10px`
   (base style del widget, especificidad = 1 clase). Repetimos la clase
   (.dg-row.dg-row = 2 clases) para ganar SIEMPRE, sin depender del orden
   en que se carguen las hojas de estilo.
   ============================================================ */
.dg-row.dg-row.dg-row,
.dg-solo.dg-solo.dg-solo,
.dg-grid.dg-grid.dg-grid{
  padding: var(--dg-inset-block, 0) var(--dg-inset, 0);
}

/* ============================================================
   RITMO VERTICAL — el margen lo lleva CADA FILA, no la página
   Igual que la web antigua (`.custom-gallery{margin-bottom:.5vw}`).
   Así una entrada nueva tiene el mismo ritmo aunque no exista ningún
   contenedor de página: la fila se lo trae puesto.
   ============================================================ */
.dg-cover.dg-cover.dg-cover,
.dg-intro.dg-intro.dg-intro,
.dg-row.dg-row.dg-row,
.dg-solo.dg-solo.dg-solo,
.dg-grid.dg-grid.dg-grid,
.dg-gal.dg-gal.dg-gal{
  margin-bottom:var(--dg-rhythm);
}

/* Ajustes puntuales de una fila (se aplican a la FILA, no a la foto) */
.dg-up-2.dg-up-2  { margin-top:-2vw;  }   /* sube la fila, se come el ritmo */
.dg-up-5.dg-up-5  { margin-top:-5vw;  }
.dg-up-10.dg-up-10 { margin-top:-10vw; }
.dg-sep-5.dg-sep-5 { margin-bottom:calc(var(--dg-rhythm) + 5vw);  }   /* más aire debajo */
.dg-sep-10.dg-sep-10{ margin-bottom:calc(var(--dg-rhythm) + 10vw); }
.dg-sep-20.dg-sep-20{ margin-bottom:calc(var(--dg-rhythm) + 20vw); }

/* ============================================================
   PÁGINA — contenedor opcional. NO añade separación entre filas
   (ya la traen ellas); solo fija el ancho y el gutter lateral.
   ============================================================ */
.dg-page.dg-page.dg-page{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;                        /* el ritmo lo ponen las filas */
  padding:var(--dg-rhythm) var(--dg-pad);
  width:100%;
  max-width:100%;
}

/* Rompe el gutter de la página (si algún día --dg-pad deja de ser 0). */
.dg-bleed{
  width:calc(100% + 2 * var(--dg-pad));
  margin-left: calc(-1 * var(--dg-pad));
  margin-right:calc(-1 * var(--dg-pad));
}

/* ============================================================
   FILA — contenedor flex (se asigna al e-flexbox vía clase)
   ============================================================ */
.dg-row.dg-row.dg-row{
  display:flex;
  flex-direction:row;
  align-items:flex-start;   /* borde SUPERIOR alineado; el escalonado es explícito */
  gap:var(--dg-row-gap, var(--dg-gap));
  justify-content:var(--dg-justify, flex-start);
  width:100%;
}

/* Los modificadores tocan VARIABLES, no propiedades: si tocaran la propiedad
   perderían contra la regla de arriba, que necesita 3 clases para ganar a
   `.elementor .e-flexbox-base`. */
.dg-row--fine { --dg-row-gap: var(--dg-gap-fine); }
.dg-row--flush{ --dg-row-gap: 0; }            /* borde con borde */

/* Sangrado lateral de la fila (la galería antigua usa 9.5vw y 17vw) */
.dg-in-9 { --dg-inset: 9.5vw; }
.dg-in-17{ --dg-inset: 17vw;  }
/* Respiro vertical extra (filas "de descanso") */
.dg-air  { --dg-inset-block: var(--dg-air); }

/* Reparto horizontal */
.dg-row--center { --dg-justify: center; }
.dg-row--between{ --dg-justify: space-between; }
.dg-row--end    { --dg-justify: flex-end; }

/* Sin clase de ancho, los hijos se reparten la fila a partes iguales
   (compatibilidad con lo ya construido). Con .dg-w-* manda el ancho. */
.dg-row > *{ flex:1 1 0; min-width:0; }
.dg-row > [class*="dg-w-"]{ flex:0 0 auto; }

/* Pesos de columna (heredado; sigue valiendo si no hay .dg-w-*) */
.dg-row > .dg-g2{ flex-grow:2; }
.dg-row > .dg-g3{ flex-grow:3; }
.dg-row > .dg-g4{ flex-grow:4; }

/* ============================================================
   FOTO SUELTA
   ============================================================ */
.dg-solo.dg-solo.dg-solo{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:var(--dg-justify, center);   /* centrada por defecto */
  gap:var(--dg-gap);
  width:100%;
}
.dg-solo--right{ --dg-justify: flex-end;   }
.dg-solo--left { --dg-justify: flex-start; }
.dg-solo > *{ flex:0 0 auto; }

/* ============================================================
   IMAGEN — proporción fija + recorte
   El widget Imagen atómico pinta las clases directamente en el <img>,
   así que aspect-ratio + object-fit actúan sobre la propia foto.
   ============================================================ */
.dg-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;          /* recorta sin deformar */
}

/* Proporciones. OJO: manda la FORMA, no la etiqueta del mockup.
   aspect-ratio = ancho/alto */
.dg-3-2 { aspect-ratio:3/2; }   /* APAISADA */
.dg-2-3 { aspect-ratio:2/3; }   /* VERTICAL */
.dg-1-1 { aspect-ratio:1/1; }   /* cuadrada */
.dg-16-9{ aspect-ratio:16/9; }  /* panorámica */

/* ============================================================
   ANCHOS — en vw, paleta de la galería antigua.
   Un vertical 2/3 a 32vw mide 48vw de alto (≈ 690 px en 1440):
   entra en pantalla. Ese es el tamaño "normal" de la galería.
   ============================================================ */
.dg-w-15 { width:15vw;  }
.dg-w-16 { width:16vw;  }
.dg-w-23 { width:23vw;  }
.dg-w-24 { width:24vw;  }
.dg-w-25 { width:25vw;  }
.dg-w-27 { width:27vw;  }
.dg-w-31 { width:31vw;  }
.dg-w-32 { width:32vw;  }
.dg-w-33 { width:33vw;  }
.dg-w-40 { width:40vw;  }
.dg-w-45 { width:45vw;  }
.dg-w-48 { width:48vw;  }
.dg-w-49 { width:49vw;  }
.dg-w-55 { width:55vw;  }
.dg-w-57 { width:57vw;  }
.dg-w-66 { width:66vw;  }
.dg-w-70 { width:70vw;  }
.dg-w-85 { width:85vw;  }
.dg-w-100{ width:100vw; }

/* ============================================================
   ESCALONADO VERTICAL — margen superior en vw (.dg-t-N = N vw)
   ============================================================ */
.dg-t-1 { margin-top:1vw;  }
.dg-t-3 { margin-top:3vw;  }
.dg-t-5 { margin-top:5vw;  }
.dg-t-7 { margin-top:7vw;  }
.dg-t-9 { margin-top:9vw;  }
.dg-t-11{ margin-top:11vw; }
.dg-t-13{ margin-top:13vw; }
.dg-t-15{ margin-top:15vw; }
.dg-t-17{ margin-top:17vw; }
.dg-t-19{ margin-top:19vw; }
.dg-t-21{ margin-top:21vw; }
.dg-t-23{ margin-top:23vw; }

/* Alias heredados (equivalencias en la nueva escala) */
.dg-down   { margin-top:9vw;  }
.dg-down-sm{ margin-top:5vw;  }
.dg-down-lg{ margin-top:15vw; }

/* ============================================================
   SANGRADO POR FOTO — margen izquierdo en vw (.dg-i-N = N vw)
   Es lo que abre los huecos asimétricos de la galería antigua.
   ============================================================ */
.dg-i-3 { margin-left:3vw;  }
.dg-i-5 { margin-left:5vw;  }
.dg-i-7 { margin-left:7vw;  }
.dg-i-9 { margin-left:9vw;  }
.dg-i-13{ margin-left:13vw; }
.dg-i-17{ margin-left:17vw; }
.dg-i-25{ margin-left:25vw; }

/* ============================================================
   CUADRÍCULAS (grids)
   Flexbox con flex-wrap (en 4.0.6 NO existe el elemento e-grid).
   ============================================================ */
.dg-grid.dg-grid.dg-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--dg-gap);
  width:100%;
}
.dg-grid > *{ flex:0 0 auto; }
.dg-grid-5 > *{ width:calc((100% - 4 * var(--dg-gap)) / 5); }
.dg-grid-4 > *{ width:calc((100% - 3 * var(--dg-gap)) / 4); }

@media (max-width:1024px){
  .dg-grid-5 > *,
  .dg-grid-4 > *{ width:calc((100% - 2 * var(--dg-gap)) / 3); }
}

/* ============================================================
   PORTADA DE HISTORIA — foto + título encima, e intro debajo
   Medido sobre la galería antigua (1440×900):
   · foto a sangre, alto 70vh, recorte cover
   · título Wulkan Regular 8vw (11vw en tablet/móvil), MAYÚSCULAS,
     interlineado .9, letter-spacing -.04em, blanco, centrado, pegado abajo
   · intro Wulkan Regular 3.1vw, interlineado 1.22, centrada, 56vw de ancho
   El título va en un e-heading (h1) y la intro en un e-paragraph: ambos
   editables desde el panel, sin widget HTML.
   ============================================================ */
.dg-cover.dg-cover.dg-cover{
  position:relative;
  display:flex;
  width:100%;
}
.dg-cover.dg-cover.dg-cover{ padding:0; }

/* La foto es más alta que la fila y se desplaza más despacio que el scroll:
   el texto y las filas de abajo suben POR ENCIMA de ella. Es el mismo efecto
   que el `.row-bg.translate` de la web antigua (allí la foto mide 838px en una
   sección de 631 → 207px de recorrido, factor ≈ .33; aquí 12vh y el mismo factor).
   El desplazamiento lo escribe assets/dg-cover.js en --dg-cover-shift. */
.dg-cover.dg-cover.dg-cover{ height:70vh; overflow:hidden; }

.dg-cover > .dg-cover-img{
  position:absolute;
  top:-12vh; left:0;
  display:block;
  width:100%;
  height:94vh;                 /* 70vh visibles + 12vh de recorrido arriba y abajo */
  object-fit:cover;
  transform:translate3d(0, var(--dg-cover-shift, 0px), 0);
  will-change:transform;
}

.dg-cover > .dg-cover-title{
  position:absolute;
  left:0; right:0;
  /* El original deja 72px libres bajo el título (el padding-bottom de su
     fila hero, 8vh de 900): el título queda a ~72% de alto, no pegado abajo. */
  bottom:8vh;
  margin:0;
  padding:0 2vw;
  font-family:'Wulkan Regular', Georgia, serif;
  font-size:8vw;
  font-weight:400;            /* Wulkan solo tiene una grosor: sin esto el h1
                                 hereda la negrita del navegador y se sintetiza */
  line-height:.9;
  letter-spacing:-.04em;
  text-transform:uppercase;   /* el original lo lleva; sin esto el nombre sale en minúsculas */
  color:#fff;
  text-align:center;
}

.dg-intro.dg-intro.dg-intro{
  display:flex;
  justify-content:center;
  width:100%;
}
.dg-intro.dg-intro.dg-intro{ padding:4vw 22vw; }   /* deja 56vw de ancho de texto */

.dg-intro-text{
  width:100%;
  margin:0;
  font-family:'Wulkan Regular', Georgia, serif;
  font-size:3.125vw;
  line-height:1.222;
  letter-spacing:-.03em;
  color:var(--dg-black);
  text-align:center;
}

@media (max-width:1024px){
  .dg-cover > .dg-cover-title{ font-size:11vw; }
}

/* ============================================================
   RECETAS DE FILA DE LA GALERÍA ANTIGUA — .dg-gal-1 … .dg-gal-17
   Portadas LITERALMENTE de las reglas .griso-gallery-* del sitio
   antiguo (autoptimize_a6c47325…css). Única adaptación: allí la
   proporción iba en un div `.gallery-image` que envolvía al <img>;
   aquí va en el propio <img>, que es el hijo directo de la fila.
   Se usan tal cual para replicar una galería existente; para
   componer filas nuevas, mejor .dg-row + .dg-w-* / .dg-t-* / .dg-i-*.
   ============================================================ */
.dg-gal.dg-gal.dg-gal{
  display:flex;
  width:100%;
  gap:.5vw;
  flex-wrap:wrap;
}
.dg-gal.dg-gal.dg-gal{ padding:0; }
.dg-gal > .dg-img{ object-fit:cover; height:auto; }

.dg-gal-1  > .dg-img{ width:100%; aspect-ratio:16/9; }

.dg-gal-2.dg-gal-2.dg-gal-2, .dg-gal-3.dg-gal-3.dg-gal-3{ justify-content:center; flex-flow:column; align-items:center; }
.dg-gal-2  > .dg-img{ width:49vw; aspect-ratio:3/2; margin:10vh .5vw; }
.dg-gal-3  > .dg-img{ width:32vw; aspect-ratio:2/3; margin:10vh 0; }

.dg-gal-4  > .dg-img:nth-child(odd) { width:57vw; aspect-ratio:1/1; }
.dg-gal-4  > .dg-img:nth-child(even){ width:27vw; aspect-ratio:1/1; margin:auto; align-self:center; }

.dg-gal-5  > .dg-img:nth-child(odd) { width:32vw; aspect-ratio:1/1; margin:9vw; }
.dg-gal-5  > .dg-img:nth-child(even){ width:32vw; aspect-ratio:2/3; margin:auto; }

.dg-gal-6.dg-gal-6.dg-gal-6{ justify-content:space-around; padding:0 17vw; }
.dg-gal-6  > .dg-img{ width:32.7vw; aspect-ratio:2/3; }

.dg-gal-7.dg-gal-7.dg-gal-7,
.dg-gal-9.dg-gal-9.dg-gal-9,
.dg-gal-9b.dg-gal-9b.dg-gal-9b,
.dg-gal-10.dg-gal-10.dg-gal-10{ padding:0 9.5vw; }

.dg-gal-7  > .dg-img:nth-child(odd) { width:48vw; aspect-ratio:3/2; }
.dg-gal-7  > .dg-img:nth-child(even){ width:32vw; aspect-ratio:1/1; }

.dg-gal-8.dg-gal-8.dg-gal-8{ justify-content:space-between; padding:10% 0; }
.dg-gal-8  > .dg-img:nth-child(odd) { width:48vw; aspect-ratio:3/2; }
.dg-gal-8  > .dg-img:nth-child(even){ width:32vw; aspect-ratio:3/2; margin:5vw 1vw; }

.dg-gal-9  > .dg-img:nth-child(odd),
.dg-gal-9b > .dg-img:nth-child(even){ width:31vw; aspect-ratio:2/3; margin:10vh 0; }
.dg-gal-9  > .dg-img:nth-child(even){ width:32vw; aspect-ratio:3/2; margin:auto 0 auto 17vw; }
.dg-gal-9b > .dg-img:nth-child(odd) { width:32vw; aspect-ratio:3/2; margin:auto 17vw auto 0; }

.dg-gal-10 > .dg-img:nth-child(odd) { width:40vw; aspect-ratio:3/2; margin:0; align-self:flex-end; }
.dg-gal-10 > .dg-img:nth-child(even){ width:23vw; aspect-ratio:2/3; margin:0 0 21vw auto; align-self:flex-start; }

.dg-gal-11 > .dg-img{ width:calc(33% - .01vw); aspect-ratio:2/3; }

.dg-gal-12 > .dg-img:nth-child(3n+1){ width:24vw; aspect-ratio:2/3; margin:0 0 19vw 9vw; }
.dg-gal-12 > .dg-img:nth-child(3n+2){ width:15vw; aspect-ratio:2/3; margin:auto; }
.dg-gal-12 > .dg-img:nth-child(3n)  { width:24vw; aspect-ratio:2/3; margin:19vw 9vw 0 0; }

.dg-gal-13 > .dg-img:nth-child(3n+1){ width:16vw; aspect-ratio:2/3; margin:0 0 auto 9vw; }
.dg-gal-13 > .dg-img:nth-child(3n+2){ width:32vw; aspect-ratio:2/3; margin:8vw 0 9vw 8vw; }
.dg-gal-13 > .dg-img:nth-child(3n)  { width:15vw; aspect-ratio:2/3; margin:auto; }

.dg-gal-14 > .dg-img:nth-child(3n+1){ width:32vw; aspect-ratio:2/3; margin:10vw 0; }
.dg-gal-14 > .dg-img:nth-child(3n+2){ width:24vw; aspect-ratio:1/1; margin:auto; }
.dg-gal-14 > .dg-img:nth-child(3n)  { width:25vw; aspect-ratio:2/3; margin:0 0 31vw; }

.dg-gal-15 > .dg-img:nth-child(3n+1){ width:24vw; aspect-ratio:1/1; margin:11vw 0; }
.dg-gal-15 > .dg-img:nth-child(3n+2){ width:32vw; aspect-ratio:1/1; margin:auto; }
.dg-gal-15 > .dg-img:nth-child(3n)  { width:25vw; aspect-ratio:1/1; margin:11vw 0; }

.dg-gal-16 > .dg-img:nth-child(3n+1){ width:32vw; aspect-ratio:3/2; margin:13vw 0 auto 9vw; }
.dg-gal-16 > .dg-img:nth-child(3n+2){ width:23vw; aspect-ratio:3/2; margin:2px 10vw 19vw 24vw; }
.dg-gal-16 > .dg-img:nth-child(3n)  { width:31vw; aspect-ratio:3/2; margin:0 0 0 49vw; }

.dg-gal-17 > .dg-img:nth-child(3n+1){ width:32vw; aspect-ratio:3/2; margin:0 0 0 25vw; }
.dg-gal-17 > .dg-img:nth-child(3n+2){ width:40vw; aspect-ratio:3/2; margin:7vw 10vw auto 9vw; }
.dg-gal-17 > .dg-img:nth-child(3n)  { width:23vw; aspect-ratio:1/1; margin:3vw 0 auto 7vw; }

/* ============================================================
   MÓVIL — 1 columna apilada, manteniendo la proporción.
   (La galería antigua NO apila: mantiene los vw y las fotos quedan
   a 32vw ≈ 125 px, ilegibles. Aquí sí apilamos: es la única
   diferencia deliberada respecto al original.)
   ============================================================ */
@media (max-width:767px){
  .dg-row.dg-row.dg-row,
  .dg-row--fine.dg-row--fine.dg-row--fine{
    flex-direction:column;
    gap:var(--dg-gap-mobile, 2vw);
    --dg-inset:0;
    --dg-inset-block:0;
    margin:0;
  }
  .dg-solo.dg-solo.dg-solo{ --dg-inset:0; }

  /* Anchos, escalonados y sangrados se anulan al apilar */
  .dg-row > *,
  .dg-row > [class*="dg-w-"],
  .dg-solo > [class*="dg-w-"]{ width:100%; }
  .dg-row > [class*="dg-t-"],
  .dg-row > .dg-down,
  .dg-row > .dg-down-sm,
  .dg-row > .dg-down-lg{ margin-top:0; }
  .dg-row > [class*="dg-i-"]{ margin-left:0; }
  .dg-row > .dg-g2,
  .dg-row > .dg-g3,
  .dg-row > .dg-g4{ flex-grow:1; }
  .dg-row--flush{ --dg-row-gap: var(--dg-gap-mobile, 2vw); }

  .dg-grid-5 > *,
  .dg-grid-4 > *{ width:calc((100% - 1 * var(--dg-gap)) / 2); }

  /* Portada: la foto se hace algo más alta y el texto crece */
  .dg-cover.dg-cover.dg-cover{ height:60vh; }
  .dg-cover > .dg-cover-img{ height:80vh; top:-10vh; }
  .dg-cover > .dg-cover-title{ font-size:11vw; bottom:6vh; padding:0 5vw; }
  .dg-intro.dg-intro.dg-intro{ padding:8vw 8vw; }
  .dg-intro-text{ font-size:5.5vw; }

  /* Recetas .dg-gal-*: también apilan (la especificidad de las reglas
     nth-child es 0,3,0; por eso aquí hacen falta 3-4 clases). */
  .dg-gal.dg-gal.dg-gal{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:0;
    gap:var(--dg-gap-mobile, 2vw);
  }
  .dg-gal.dg-gal > .dg-img.dg-img{ width:100%; margin:0; align-self:auto; }

  :root{ --dg-rhythm: 2vw; }
}

/* ============================================================
   CABECERA + MENÚ FULLSCREEN (mismo que las páginas .html)
   El marcado lo imprime inc/dg-menu.php en `wp_body_open`, así que
   TODA página de WordPress (galerías incluidas) lleva la misma
   navegación que el sitio estático. Enlaces absolutos: las galerías
   cuelgan de /weddings/<slug>/ y un href relativo se rompería.
   ============================================================ */
  /* Clase repetida: `.site-header` es también la cabecera de Hello Elementor,
     que la limita a 1140px y la centra. Aquí hay que anular ese ancho y esos
     márgenes o el logo aparece flotando a 150px del borde. */
  .site-header.site-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    width:100%;
    max-width:none;
    margin:0;
    padding:24px 2vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    pointer-events:none;
  }
  .site-header a, .site-header button{pointer-events:auto}
  .site-logo{
    font-family:'Playfair Display',serif;
    font-weight:400;
    font-size:40px;
    line-height:40px;
    text-transform:uppercase;
    color:var(--custom-black);
    letter-spacing:-.04em;
  }
  .menu-toggle{
    background:transparent;
    border:0;
    cursor:pointer;
    width:36px;
    height:36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:6px;
    padding:0;
  }
  .menu-toggle span{
    display:block;
    height:1.5px;
    background:var(--custom-black);
    transition:width .3s ease;
  }
  .menu-toggle span:nth-child(1){width:28px}
  .menu-toggle span:nth-child(2){width:20px}
  .menu-toggle:hover span:nth-child(2){width:28px}

  /* Velo superior: en WordPress una galería puede empezar por una foto
     clara y el logo (blanco/negro fijo) se perdería. */
  .site-header::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0));
    pointer-events:none;
    z-index:-1;
  }
  /* Crema, igual que el original (rgb(225,222,215) medido en su cabecera),
     no blanco puro. Playfair Display 400, 40px/40px, -.04em, mayúsculas. */
  .site-logo{ color:var(--cream); font-weight:400; }
  .menu-toggle span{ background:var(--cream); }

  /* ════════ FULLSCREEN MENU OVERLAY (original David Griso menu) ════════ */
  body.menu-open{overflow:hidden}
  .dg-menu{
    position:fixed;
    inset:0;
    z-index:9999;
    background:var(--custom-black);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .6s ease, visibility 0s linear .6s;
  }
  .dg-menu.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity .6s ease;
  }
  .dg-menu__bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    filter:grayscale(1);
  }
  .dg-menu__bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(14,12,12,.62);
  }
  /* top bar */
  .dg-menu__logo{
    position:absolute;
    top:24px;
    left:2vw;
    z-index:3;
    font-family:'Playfair Display',serif;
    font-weight:400;
    font-size:40px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:-.04em;
    color:var(--cream);
  }
  .dg-menu__close{
    position:absolute;
    top:24px;
    right:2vw;
    z-index:3;
    width:42px;
    height:42px;
    background:transparent;
    border:0;
    cursor:pointer;
  }
  .dg-menu__close span{
    position:absolute;
    top:50%;left:50%;
    width:30px;height:1.5px;
    background:var(--cream);
    transition:background .25s ease;
  }
  .dg-menu__close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
  .dg-menu__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
  .dg-menu__close:hover span{background:#fff}
  /* items */
  .dg-menu__list{
    position:relative;
    z-index:2;
    height:100%;
    list-style:none;
    margin:0;
    padding:0 2vw;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:flex-end;
    align-items:flex-start;
    gap:.6em 3vw;
  }
  .dg-menu__item{position:relative}
  .dg-menu__break{flex-basis:100%;height:0;margin:0;padding:0;list-style:none}
  .dg-menu__item a{
    position:relative;
    display:inline-block;
    font-family:'Arges Heavy','Playfair Display',serif;
    font-weight:400;
    font-size:15vw;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.015em;
    color:var(--cream);
    opacity:.82;
    transition:color .35s ease,opacity .35s ease;
  }
  /* masked slide-up reveal */
  .dg-menu__mask{
    display:inline-block;
    overflow:hidden;
    vertical-align:bottom;
    padding:0 .03em .04em;
  }
  .dg-menu__txt{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
    transition:transform .9s cubic-bezier(.52,.01,.16,1), opacity .6s ease;
  }
  .dg-menu.is-open .dg-menu__txt{transform:translateY(0);opacity:1}
  .dg-menu.is-open .dg-menu__item:nth-child(1) .dg-menu__txt{transition-delay:.45s}
  .dg-menu.is-open .dg-menu__item:nth-child(2) .dg-menu__txt{transition-delay:.50s}
  .dg-menu.is-open .dg-menu__item:nth-child(4) .dg-menu__txt{transition-delay:.55s}
  .dg-menu.is-open .dg-menu__item:nth-child(5) .dg-menu__txt{transition-delay:.60s}
  .dg-menu.is-open .dg-menu__item:nth-child(6) .dg-menu__txt{transition-delay:.65s}
  /* numbers */
  .dg-menu__num{
    position:absolute;
    top:-.62em;
    left:0;
    z-index:3;
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(13px,1.2vw,20px);
    letter-spacing:.22em;
    color:#e0d862;
    opacity:0;
    transition:opacity .8s ease;
  }
  .dg-menu.is-open .dg-menu__num{opacity:.95;transition-delay:.95s}
  /* underline (current / hover) */
  .dg-menu__item a::after{
    content:'';
    position:absolute;
    left:.03em;right:.03em;
    bottom:-.04em;
    height:1.5px;
    background:var(--cream);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .5s cubic-bezier(.2,1,.25,1);
  }
  .dg-menu__item a:hover,
  .dg-menu__item.is-current a{
    opacity:1;
    color:#fff;
  }
  .dg-menu__item a:hover::after,
  .dg-menu__item.is-current a::after{transform:scaleX(1)}
  .dg-menu.is-open .dg-menu__item.is-current a::after{transition-delay:1.05s}

  @media (max-width: 1000px){
    .dg-menu__list{flex-direction:column;align-items:center;gap:.45em 0}
    .dg-menu__break{display:none}
    .dg-menu__item a{font-size:20vw}
    .dg-menu__num{left:50%;transform:translateX(-50%)}
    .dg-menu__logo{font-size:30px}
  }

/* ============================================================
   A SANGRE PASE LO QUE PASE  —  va al final a propósito
   Las medidas van en `vw`, así que CUALQUIER padding de un contenedor
   antecesor rompe la composición: en WordPress el contenedor atómico de
   Elementor trae `padding:10px` y deja el contenido en 98.6vw. Con eso,
   una fila que necesita 65.9vw dentro de 64.6vw se parte en dos líneas
   (es lo que pasaba con el Tipo 6).

   Cada fila se sale de su contenedor y ocupa exactamente la ventana,
   esté donde esté. Clase repetida + última regla del archivo para ganar
   a las declaraciones de ancho de más arriba.
   ============================================================ */
.dg-page.dg-page.dg-page,
.dg-cover.dg-cover.dg-cover,
.dg-intro.dg-intro.dg-intro,
.dg-row.dg-row.dg-row,
.dg-solo.dg-solo.dg-solo,
.dg-grid.dg-grid.dg-grid,
.dg-gal.dg-gal.dg-gal{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* 100vw incluye la barra de scroll: sin esto asomaría scroll horizontal. */
html,body{ overflow-x:hidden; }

/* ============================================================
   ENTRADA DE LA PÁGINA — copiada de la galería antigua
   (new.davidgriso.com/weddings/wedding-in-barcelona-xalet-del-nin/)

   1) TELÓN: un panel a pantalla completa con la foto dos veces; encima,
      una copia en negativo que se desvanece en 2.2s (la foto "se revela").
      A los 2.4s el panel sube: su alto pasa de 100vh a 0 en 1.4s.
      Allí lo hace GSAP con Expo.easeInOut; aquí, CSS con la misma curva.

   2) TÍTULO letra a letra: cada letra baja desde -1.3em en 1.2s con
      cubicBezier(.25,1,.5,1) y un desfase de 400/nLetras ms acotado a
      [20,35] — los mismos valores que usa su `anime()`:
        translateY:["-1.3em","0em"], duration:1200,
        easing:"cubicBezier(0.25,1,0.5,1)", delay:anime.stagger(a)
      Diferencia deliberada: allí el título se anima DETRÁS del telón y no
      se ve; aquí arranca a los 2.4s, cuando el telón empieza a subir.
      El marcado por letras lo genera assets/dg-intro.js.
   ============================================================ */
#dg-intro-telon{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width:100%;
  z-index:9999998;
  pointer-events:none;
  overflow:hidden;
}
#dg-intro-panel{
  position:absolute;
  top:0; left:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:#0a0a0a;
  will-change:transform,height;
  animation:dg-telon-sube 1.4s linear 2.4s forwards;   /* la curva va en los keyframes */
}
#dg-intro-foto,
#dg-intro-foto-final{
  position:absolute;
  top:0; left:0;
  height:100vh;
  width:100%;
  background-position:center center;
  background-size:cover;
  pointer-events:none;
}
#dg-intro-foto{            /* la copia en negativo que se desvanece */
  z-index:2;
  filter:grayscale(1) invert(1);
  opacity:0;
  animation:dg-revela-foto 2.2s cubic-bezier(.87,.01,.8,1);
}
#dg-intro-foto-final{
  z-index:1;
  filter:grayscale(1);
}
@keyframes dg-revela-foto{ 0%{opacity:1} 100%{opacity:0} }
/* Expo.easeInOut tal cual: valores leídos de su tween de GSAP avanzándolo
   a mano de 5% en 5% (t=0.49s todavía va por el 93.8%: ese es el "amago").
   Con una curva bezier aproximada no salía igual; así es exacto. */
@keyframes dg-telon-sube{
    0%{ height:100vh  }
    5%{ height:99.9vh }
   10%{ height:99.8vh }
   15%{ height:99.6vh }
   20%{ height:99.2vh }
   25%{ height:98.4vh }
   30%{ height:96.9vh }
   35%{ height:93.8vh }
   40%{ height:87.5vh }
   45%{ height:75vh   }
   50%{ height:50vh   }
   55%{ height:25vh   }
   60%{ height:12.5vh }
   65%{ height:6.3vh  }
   70%{ height:3.1vh  }
   75%{ height:1.6vh  }
   80%{ height:0.8vh  }
   85%{ height:0.4vh  }
   90%{ height:0.2vh  }
   95%{ height:0.1vh  }
  100%{ height:0      }
}

body.dg-cargando{ overflow:hidden; }

/* Título letra a letra */
.dg-cover-title .dg-palabra{
  display:inline-block;
  overflow:hidden;               /* la máscara: recorta la letra que entra */
  vertical-align:bottom;
  /* Hueco para que la máscara no corte comas y descendentes; el margen
     negativo lo descuenta del alto para que el bloque mida igual que
     el título sin partir (207px en escritorio, medido). */
  padding:0 .02em .06em;
  margin-bottom:-.06em;
}
.dg-cover-title .dg-letra{
  display:inline-block;
  transform:translateY(-1.3em);
  transition:transform 1.2s cubic-bezier(.25,1,.5,1);
}
.dg-cover-title.dg-en-escena .dg-letra{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  #dg-intro-telon{ display:none }
  body.dg-cargando{ overflow:auto }
  .dg-cover-title .dg-letra{ transform:none; transition:none }
}