/* =====================================================================
   ESTILO B · ROJO, tela cheia
   La foto ocupa toda la pantalla. El rojo del moño sube desde abajo y
   sostiene el texto sobre el piso oscuro del render.

   Sobre "no estallar" la foto: el original mide 1092px. En pantalla
   apaisada se sirve una versión re-muestreada a 1600/2200px con
   enfoque (ver img/), y el recorte es mínimo porque las proporciones
   se parecen. En celular vertical, cubrir la pantalla obligaría a
   ampliar ~3,5× y eso se ve roto: ahí la foto va de borde a borde a lo
   ancho y se funde con el rojo. Pantalla llena sin agrandarla.
   ===================================================================== */

:root {
  --vino-alto:   #9B2417;
  --vino:        #5E1009;
  --vino-hondo:  #1C0604;
  --tinta:       #FBF4EE;
  --tinta-media: rgba(251, 244, 238, 0.78);
  --tinta-suave: rgba(251, 244, 238, 0.56);
  --linea:       rgba(251, 244, 238, 0.26);
  --titular-sz:  clamp(2.75rem, 5.4vw, 5rem);
}

body {
  background: var(--vino-hondo);
  color: var(--tinta);
}

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.fondo { display: none; }

/* ---------------------------------------------------------------------
   La foto, a sangre
   --------------------------------------------------------------------- */
/* z-index negativo: la foto queda dentro de la hoja pero detrás de todo
   el texto. Con 0 tapaba los elementos no posicionados. */
.figura {
  position: fixed;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centrado apenas alto: el cartel y el moño quedan enteros; lo que se
     pierde es piso, que es justo donde va el texto. */
  object-position: 50% 30%;
}

/* El rojo sube desde abajo para sostener el texto. Arriba no se toca:
   ahí están el cartel y el moño. */
.figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(28, 6, 4, 0.96) 0%,
      rgba(62, 11, 7, 0.86) 20%,
      rgba(94, 16, 9, 0.48) 38%,
      rgba(94, 16, 9, 0) 58%);
}

/* ---------------------------------------------------------------------
   Hoja: el texto encima de la foto
   --------------------------------------------------------------------- */
.hoja {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
}

/* --- Encabezado: arriba el render es crema, así que va el logo oscuro. */
.encabezado {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.marca--clara  { display: none; }
.marca--oscura { width: clamp(3.5rem, 5.5vw, 5rem); filter: drop-shadow(0 1px 8px rgba(255, 248, 240, 0.7)); }

/* Arriba a la derecha está el moño: cualquier texto ahí se pierde. */
.ubicacion { display: none; }

/* --- Convite: el bloque de texto apoyado abajo ----------------------- */
.convite {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.texto {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  grid-template-rows: auto auto auto auto auto;
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.antetitulo { grid-column: 1; grid-row: 1; }
.titular    { grid-column: 1; grid-row: 2; }
.bajada     { grid-column: 1; grid-row: 3; }
.datos      { grid-column: 2; grid-row: 1 / 5; align-self: end; }
/* El CTA va debajo del texto de invitación, en la misma columna: se lee
   título → invitación → botón, de un tirón. */
.btn        { grid-column: 1; grid-row: 4; justify-self: start; min-width: 18rem; }
.sello      { grid-column: 1; grid-row: 5; }

.antetitulo {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.titular {
  margin: var(--e-2) 0 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: var(--titular-sz);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--tinta);
  text-shadow: 0 2px 30px rgba(28, 6, 4, 0.5);
}

.bajada {
  margin: var(--e-3) 0 0;
  max-width: 44ch;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta-media);
  text-wrap: pretty;
}

.datos { margin: 0; border-top: 1px solid var(--linea); }

.datos__fila {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
}

.datos dt {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-top: 0.15em;
}

.datos dd {
  margin: 0;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.datos dd a { color: inherit; text-underline-offset: 3px; }

/* Sobre rojo, un botón rojo desaparece: acá el CTA se invierte a claro. */
.btn {
  --btn-fondo: var(--tinta);
  --btn-borde: var(--tinta);
  margin-top: var(--e-5);
  color: var(--vino-hondo);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
}
.btn:hover  { --btn-fondo: #FFFFFF; --btn-borde: #FFFFFF; }
.btn:active { --btn-fondo: #E8DCD2; --btn-borde: #E8DCD2; }
.btn[data-estado="hecho"] {
  --btn-fondo: transparent;
  --btn-borde: var(--linea);
  color: var(--tinta-media);
  box-shadow: none;
}
.btn[data-estado="hecho"]:hover { --btn-fondo: rgba(251,244,238,.12); --btn-borde: var(--tinta-media); color: var(--tinta); }

.sello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin: var(--e-3) 0 0;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.sello strong { color: var(--tinta); font-weight: 600; }
.sello__codigo {
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea);
  letter-spacing: 0.2em;
  color: var(--tinta);
}

/* ---------------------------------------------------------------------
   Pantalla vertical · la foto de borde a borde a lo ancho, sin ampliar,
   fundida con el rojo. El texto sigue abajo.
   --------------------------------------------------------------------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  body {
    background: linear-gradient(to bottom, var(--vino) 0%, var(--vino-hondo) 100%);
    background-attachment: fixed;
  }

  .figura {
    position: absolute;
    inset: 0 0 auto 0;
  }

  .foto {
    height: auto;
    aspect-ratio: 1092 / 709;
    object-fit: cover;
  }

  /* La base de la foto se disuelve en el rojo de la página. */
  /* La base de la foto nítida se disuelve en la desenfocada: sin corte seco. */
  .figura {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  .figura::after { background: none; }

  /* Detrás y debajo de la foto nítida, la misma foto desenfocada llena el
     resto de la pantalla: el blur esconde la falta de resolución, y la
     pantalla se lee llena de imagen sin ampliar la foto real. */
  /* La capa desenfocada va adentro y más grande (inset negativo) para que el
     borde del blur no se vea; el bloque la recorta. Antes se agrandaba con
     transform: scale y se salía de la pantalla: la página medía 413px en un
     celular de 390, se movía de costado y el popup quedaba corrido. */
  .fondo {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    height: 78dvh;
    z-index: -2;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  .fondo::before {
    content: "";
    position: absolute;
    inset: -6%;
    background: url("/img/fachada-hd-720.webp") center 30% / cover no-repeat;
    filter: blur(22px) saturate(1.1) brightness(0.62);
  }

  /* En vertical el cartel de la foto ya dice DV SHOP arriba a la izquierda:
     un segundo logo ahí choca con él. */
  .encabezado { display: none; }

  .hoja { padding-top: 0; }

  /* El texto se apoya abajo; entre la foto y el texto queda la foto
     desenfocada fundiéndose en el rojo. */
  .convite {
    align-items: flex-end;
    padding-top: calc(100vw * 709 / 1092 + 1.5rem);
  }

  .texto {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .antetitulo, .titular, .bajada, .datos, .btn, .sello { grid-column: 1; grid-row: auto; }
  .btn { justify-self: stretch; margin-top: var(--e-4); }
  .datos { margin-top: var(--e-5); }
  .titular { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}