/* Landing de bodas y eventos — Soft UI Evolution sobre el brandbook de Floranova.
   Se apoya en variables.css, base.css, layout.css y components.css: aca va solo lo
   propio de esta pagina.

   PALETA: la del brandbook medido de los assets reales, NO la rosa fuerte que sugieren
   los patrones genericos de landing de bodas, que rompe la marca. */

.ev {
  --ev-crema: #F7EFE6;
  --ev-marfil: #FBF7F2;
  --ev-dorado: #C9A227;
  --ev-carbon: #1A1A1A;
  --ev-verde: #1B7A3E;          /* unico color de accion secundaria: WhatsApp */
  --ev-blush: #E8C4C4;
  --ev-eucalipto: #8A9A83;
  --ev-coral: #E2603C;          /* tomado de las gerberas de las fotos */
  --ev-durazno: #F2C9A8;
  --ev-texto-suave: #5A5148;

  /* Soft UI: sombras suaves y difusas, nunca duras */
  --ev-sombra: 0 2px 8px rgba(26, 26, 26, 0.05), 0 12px 28px rgba(26, 26, 26, 0.07);
  --ev-sombra-alta: 0 4px 12px rgba(26, 26, 26, 0.07), 0 20px 44px rgba(26, 26, 26, 0.1);
  --ev-radio: 18px;
  --ev-transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  background: var(--ev-crema);
}

.ev h1, .ev h2, .ev h3, .ev .ev-precio {
  font-family: "Cormorant Infant", "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- HERO ---------- */
.ev-hero { position: relative; overflow: hidden; }

.ev-hero picture,
.ev-hero img {
  display: block;
  width: 100%;
  height: clamp(380px, 62vh, 620px);
  object-fit: cover;
  object-position: center 42%;
}

/* Degradado desde abajo: el texto necesita 4.5:1 sobre una foto clara y contrastada. */
.ev-hero-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(56px, 12vh, 120px) 0 clamp(22px, 4vw, 40px);
  background: linear-gradient(to top,
    rgba(20, 16, 13, 0.9) 0%, rgba(20, 16, 13, 0.7) 38%, rgba(20, 16, 13, 0) 100%);
  color: #fff;
}

.ev-eyebrow {
  display: inline-block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ev-durazno);
  margin-bottom: 10px;
}

/* El durazno de arriba es para el HERO, donde el fondo es la foto oscurecida por el
   degradado. En las secciones de fondo claro el eyebrow va DORADO.
   Esto vivia como style="color:var(--ev-dorado)" repetido en los cinco eyebrows del
   HTML, y la CSP del sitio (style-src 'self', sin unsafe-inline) bloqueaba el atributo:
   los cinco terminaban en durazno #F2C9A8 sobre crema #F7EFE6, o sea casi invisibles
   (contraste 1.3:1). Como regla de hoja pasa la CSP y ademas queda en un solo lugar. */
.ev-seccion .ev-eyebrow { color: var(--ev-dorado); }

.ev-hero-copy h1 {
  font-size: clamp(2.1rem, 6.4vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 10px;
  color: #fff;
}

.ev-hero-copy p {
  max-width: 48ch;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.94);
}

/* ---------- Botones ---------- */
.ev-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ev-transicion), box-shadow var(--ev-transicion),
              background-color var(--ev-transicion);
}

.ev-btn-primario { background: var(--ev-carbon); color: #fff; box-shadow: var(--ev-sombra); }
.ev-btn-primario:hover { background: #000; transform: translateY(-2px); box-shadow: var(--ev-sombra-alta); }

.ev-btn-wsp { background: var(--ev-verde); color: #fff; box-shadow: var(--ev-sombra); }
.ev-btn-wsp:hover { background: #166433; transform: translateY(-2px); box-shadow: var(--ev-sombra-alta); }

.ev-btn-borde {
  background: transparent;
  color: var(--ev-carbon);
  border: 1.5px solid var(--ev-dorado);
}
.ev-btn-borde:hover { background: rgba(201, 162, 39, 0.12); transform: translateY(-2px); }

.ev a:focus-visible,
.ev button:focus-visible,
.ev input:focus-visible,
.ev select:focus-visible,
.ev textarea:focus-visible {
  outline: 3px solid var(--ev-dorado);
  outline-offset: 2px;
}

/* ---------- Secciones ---------- */
.ev-seccion { padding: clamp(38px, 7vw, 76px) 0; }
.ev-seccion--marfil { background: var(--ev-marfil); }

.ev-titulo { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 6px 0 10px; color: var(--ev-carbon); }
.ev-bajada { max-width: 62ch; margin: 0 0 26px; color: var(--ev-texto-suave); }

/* ---------- Prueba social: los novios reales ---------- */
/*
 * Tres fotos iguales, en columnas iguales.
 *
 * Antes era 1.25fr/1fr con align-items:stretch: una foto grande a la izquierda y una
 * columna de dos a la derecha. El stretch estiraba la grande hasta el alto de la columna
 * vecina, asi que una foto de 960x1200 (proporcion 0.80) se mostraba en 0.44. El alto lo
 * decidia la foto de al lado, no la foto misma.
 *
 * align-items: start es deliberado: impide que una celda crezca para calzar con otra.
 */
.ev-novios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}

.ev-novios figure { margin: 0; position: relative; border-radius: var(--ev-radio); overflow: hidden; box-shadow: var(--ev-sombra); }
.ev-novios .ev-foto { aspect-ratio: 4 / 5; }

.ev-novios figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(20, 16, 13, 0.82), rgba(20, 16, 13, 0));
  color: #fff;
  font-size: 0.86rem;
}

/* ============================================================================
   COMO SE MUESTRAN LAS FOTOS EN ESTA LANDING

   REGLA SUPREMA DEL PROYECTO: ninguna foto se estira, se aplasta ni se recorta
   hasta volverse irreconocible. Nunca.

   El sistema anterior la violaba asi:

     .ev-ramo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

   y el markup emitia <img width="1200" height="1600">. El atributo height del
   HTML se traduce a una ALTURA CSS ESPECIFICADA, y una altura especificada le
   gana a aspect-ratio. Resultado: el ancho se encogia al de la columna (187px)
   pero el alto quedaba clavado en 1600px. Una tira de 187x1600 -donde el ratio
   real deberia ser 0.80 y terminaba en 0.12- con object-fit:cover recortando una
   franja vertical del centro de la foto. En las fotos de montaje eso dejaba a la
   vista las patas de las sillas y el piso, y el arreglo floral quedaba fuera.

   EL SISTEMA NUEVO NO PUEDE FALLAR ASI, por construccion:

   1. La proporcion vive en el CONTENEDOR (.ev-foto), no en la <img>.
   2. La <img> usa height: 100%, que es una altura DEFINIDA y por lo tanto gana
      sobre cualquier atributo del HTML.
   3. El markup ya no emite atributos width/height: el contenedor reserva el
      espacio con su aspect-ratio, asi que tampoco hace falta para evitar el
      salto de layout.

   Con esas tres, aunque alguien agregue mañana un width/height al markup, la
   foto sigue saliendo bien.

   PUNTO FOCAL: una foto puede correr su encuadre cuando el sujeto no esta al
   centro. Se declara con un atributo data-foco en el markup:
       <div class="ev-foto" data-foco="alto">
   y el valor concreto vive mas abajo, en este archivo.

   NO se usa style="--foco: 50% 20%" aunque seria mas corto: la CSP del sitio
   declara style-src 'self' sin 'unsafe-inline', asi que el navegador DESCARTA
   todo atributo style en linea. Se probo y el encuadre no se aplicaba, sin
   ningun aviso: la foto salia centrada y nadie se enteraba de que el ajuste
   estaba muerto. Un atributo data-* si sobrevive a la CSP.
   ============================================================================ */

.ev-foto {
  /* Proporcion por defecto: 4/5. Cada bloque la ajusta a sus propias fotos. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ev-marfil);
}

.ev-foto img {
  display: block;
  width: 100%;
  height: 100%;          /* NO tocar: es lo que neutraliza el atributo height */
  object-fit: cover;     /* cover preserva la proporcion; nunca deforma */
  object-position: var(--foco, 50% 50%);
}


/* ---------- Bloques por tipo de montaje ---------- */
.ev-montajes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.ev-montaje {
  background: #fff;
  border-radius: var(--ev-radio);
  overflow: hidden;
  box-shadow: var(--ev-sombra);
  display: flex;
  flex-direction: column;
  transition: transform var(--ev-transicion), box-shadow var(--ev-transicion);
}
.ev-montaje:hover { transform: translateY(-3px); box-shadow: var(--ev-sombra-alta); }

/* Las fotos de montaje son casi todas verticales (0.75-0.80). 4/5 les calza sin
   recortar casi nada. El encuadre sube al 38% porque en los arcos las flores
   estan en la parte alta: centrado se veria el piso. */
.ev-montaje .ev-foto { aspect-ratio: 4 / 5; --foco: 50% 38%; }

/* Tarjeta destacada para las fotos HORIZONTALES. Ocupa dos columnas y usa 4/3, que es
   la forma que esas fotos ya tienen: asi no se les recorta el ancho. Meter una foto
   de 1400x1160 en un marco 4/5 le cortaba un 34% por los lados, justo los costados
   del arco, que es lo mas colorido y lo que se quiere mostrar. */
.ev-montaje--ancha { grid-column: span 2; }
.ev-montaje--ancha .ev-foto { aspect-ratio: 4 / 3; --foco: 50% 50%; }

/*
 * Cuando la grilla queda en UNA sola columna hay que soltar el span.
 *
 * No es cosmetico: un 'grid-column: span 2' dentro de una grilla de una columna crea una
 * segunda columna implicita y descuadra toda la seccion.
 *
 * El corte se ata al ancho de la GRILLA, no al de la ventana, con una container query.
 * Asi el numero sale de la propia regla de columnas -minmax(268px, 1fr) con gap 18px, o
 * sea que dos columnas necesitan 268*2+18 = 554px- y no de un breakpoint adivinado. El
 * primer intento uso 620px de ventana y se equivoco: a 620px la grilla todavia tenia dos
 * columnas, asi que la tarjeta destacada dejaba de destacarse antes de tiempo.
 */
.ev-montajes { container-type: inline-size; }

@container (max-width: 553px) {
  .ev-montaje--ancha { grid-column: auto; }
}

/* Respaldo para navegadores sin container queries: se ata al ancho de ventana en el que
   la grilla colapsa, contando el padding del contenedor. */
@supports not (container-type: inline-size) {
  @media (max-width: 585px) {
    .ev-montaje--ancha { grid-column: auto; }
  }
}
.ev-montaje-cuerpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ev-montaje-cuerpo h3 { margin: 0; font-size: 1.14rem; }
.ev-montaje-cuerpo p { margin: 0; font-size: 0.9rem; color: var(--ev-texto-suave); flex: 1; }

.ev-precio { font-size: 1.32rem; color: var(--ev-carbon); }
.ev-precio small { display: block; font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 500; color: var(--ev-texto-suave); }

/*
 * La foto de un montaje es un boton: abre la ficha completa del producto.
 *
 * Se usa <button> y no un <div> con onclick para que llegue por teclado y lo anuncie el
 * lector de pantalla. Los resets de boton son necesarios porque el navegador le pone
 * borde, fondo y padding propios.
 */
.ev-foto--boton {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ev-marfil);
  cursor: pointer;
}

.ev-foto--boton:focus-visible {
  outline: 3px solid var(--ev-dorado);
  outline-offset: 2px;
}

.ev-foto--boton img { transition: transform var(--ev-transicion); }
.ev-montaje:hover .ev-foto--boton img { transform: scale(1.03); }

/* La escala del hover se anula para quien pidio menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .ev-foto--boton img,
  .ev-montaje:hover .ev-foto--boton img { transition: none; transform: none; }
}

.ev-montaje-acciones {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Los dos botones reparten el ancho, con un minimo para que el texto no se parta. */
.ev-montaje-acciones .ev-btn {
  flex: 1 1 132px;
  min-height: 46px;   /* area tactil comoda */
  justify-content: center;
  font-size: 0.9rem;
}

/* ---------- Ramos ---------- */
.ev-ramos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.ev-ramo { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--ev-sombra); }
/* Los ramos estan fotografiados casi todos en 3/4 exacto (1200x1600). Usando esa
   misma proporcion el recorte es practicamente cero: se ve el ramo completo. */
.ev-ramo .ev-foto { aspect-ratio: 3 / 4; }
.ev-ramo figcaption { padding: 9px 12px 12px; font-size: 0.82rem; }
.ev-ramo figcaption strong { display: block; font-size: 0.98rem; }
.ev-ramo figcaption span { color: var(--ev-texto-suave); }

/* Enlace "Ver todos los ramos" bajo la grilla. Era style="margin-top:18px". */
.ev-mas { margin-top: 18px; }

/* ---------- Incluye ---------- */
.ev-incluye { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }
.ev-item {
  background: #fff; border-radius: var(--ev-radio); padding: 20px;
  box-shadow: var(--ev-sombra); display: flex; gap: 13px; align-items: flex-start;
}
/* Iconos en SVG, nunca emojis: un emoji cambia de forma en cada sistema y los
   lectores de pantalla lo leen como texto. */
.ev-item svg { flex: 0 0 26px; width: 26px; height: 26px; color: var(--ev-dorado); }
.ev-item h3 { margin: 0 0 4px; font-size: 1.02rem; }
.ev-item p { margin: 0; font-size: 0.89rem; color: var(--ev-texto-suave); }

/* ---------- Formulario ---------- */
.ev-form-wrap {
  max-width: 780px; background: #fff; border-radius: var(--ev-radio);
  padding: clamp(20px, 4vw, 36px); box-shadow: var(--ev-sombra-alta);
}
.ev-grid-2 { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
/* Campos que van a ancho completo bajo la grilla de dos columnas, y la fila del boton.
   Eran style="margin-top:15px" y style="margin-top:18px" en el HTML: los bloqueaba la
   CSP, asi que el formulario se veia con los ultimos tres bloques pegados. */
.ev-campo { margin-top: 15px; }
.ev-form-acciones { margin-top: 18px; }
.ev-form-wrap label { display: block; }
.ev-form-wrap label > span { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 5px; }
.ev-input {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1.5px solid #E3DAD0; border-radius: 12px;
  background: var(--ev-marfil); font: inherit; color: var(--ev-carbon);
  transition: border-color var(--ev-transicion), box-shadow var(--ev-transicion);
}
.ev-input:hover { border-color: #cdbfae; }
.ev-input:focus { border-color: var(--ev-dorado); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16); outline: none; }
textarea.ev-input { min-height: 104px; resize: vertical; }

/* Honeypot: fuera de pantalla pero sin display:none, que algunos bots detectan. */
.ev-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ev-feedback { margin: 14px 0 0; min-height: 1.4em; font-size: 0.92rem; color: var(--ev-texto-suave); }
.ev-feedback.is-error { color: #A8321C; }
.ev-feedback.is-ok { color: var(--ev-verde); font-weight: 600; }

/* ---------- Franja de cierre ---------- */
.ev-cierre { background: var(--ev-carbon); color: #fff; text-align: center; }
.ev-cierre h2 { color: #fff; }
.ev-cierre p { color: rgba(255, 255, 255, 0.86); max-width: 52ch; margin: 0 auto 20px; }

@media (max-width: 760px) {
  /* A 375px el degradado empujaba el eyebrow fuera del hero: se acorta el relleno
     superior y se sube un poco el alto minimo para que quepa la pieza completa. */
  .ev-hero picture, .ev-hero img { height: clamp(440px, 68vh, 560px); }
  .ev-hero-copy { padding-top: 40px; }
  .ev-novios { grid-template-columns: 1fr; }
  /* La proporcion la lleva .ev-foto, no el <figure>: el figure ademas contiene el
     figcaption, y forzarle una proporcion aplastaria la foto para hacerle sitio. */
  .ev-ramos { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
}

/* Quien pidio menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  .ev * { transition: none !important; animation: none !important; }
  .ev-btn:hover, .ev-montaje:hover { transform: none; }
}


/* ============================================================================
   ENCUADRES CON NOMBRE

   Van AL FINAL del archivo a proposito. Cada bloque (.ev-montaje, .ev-ramo,
   .ev-novios) fija su propio --foco por defecto, y esas reglas tienen la misma
   especificidad que estas: si estuvieran mas arriba perderian por orden de
   aparicion y el encuadre pedido en el markup no se aplicaria. Ya paso: un
   data-foco="alto" quedaba en 50% 38%, que es el valor por defecto de los
   montajes, en vez del 50% 20% que pedia.

   Los nombres describen QUE se quiere conservar y no coordenadas, para que
   quien edite contenido no tenga que pensar en porcentajes.
   ============================================================================ */
.ev-foto[data-foco="alto"] { --foco: 50% 20%; }   /* conserva la parte superior */
.ev-foto[data-foco="bajo"] { --foco: 50% 80%; }   /* conserva la parte inferior */
.ev-foto[data-foco="izq"]  { --foco: 20% 50%; }
.ev-foto[data-foco="der"]  { --foco: 80% 50%; }