/* ============================================================
   Eventos y bodas — page-specific additions on top of style.css
   ============================================================ */

/* ---- Hero (full-bleed photo, unlike the product-photo hero on home) ---- */
.ev-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding-top: 8.5rem; }
.ev-hero-media { position: absolute; inset: 0; z-index: -2; }
.ev-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ev-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,10,8,.25) 0%, rgba(17,10,8,.55) 55%, rgba(17,10,8,.92) 100%); }
.ev-hero-inner { position: relative; z-index: 1; max-width: 820px; padding: 0 var(--gutter) 6.5rem; color: var(--parchment); }
.ev-hero-title { --ch-fill: var(--parchment); --ch-stroke: var(--onyx); --ch-shadow: var(--mahogany-dark); margin-bottom: 1.5rem; }
.ev-hero-sub { max-width: 52ch; font-size: 1.15rem; color: color-mix(in srgb, var(--parchment) 88%, transparent); margin-bottom: 1.75rem; }

/* ---- Shared body copy ---- */
.ev-body { font-size: 1.08rem; line-height: 1.65; max-width: 60ch; }
.block-onyx .ev-body, .block-red .ev-body { color: color-mix(in srgb, var(--parchment) 85%, transparent); }
.block-cream .ev-body { color: color-mix(in srgb, var(--onyx) 75%, transparent); }

/* ---- Qué es un resopón / mesa temática ---- */
.ev-explainer-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: var(--container); margin: 0 auto; }
.ev-explainer-grid + .ev-explainer-grid { margin-top: clamp(3rem, 6vw, 5rem); }
.ev-explainer-grid-reverse { grid-template-columns: .85fr 1.15fr; }
.ev-explainer-photo { aspect-ratio: 4/5; rotate: -3deg; justify-self: center; width: min(100%, 380px); }
@media (max-width: 860px) { .ev-explainer-grid, .ev-explainer-grid-reverse { grid-template-columns: 1fr; } }

/* ---- Qué incluye ---- */
.ev-includes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; max-width: var(--container); margin: 3rem auto 0; }
.ev-include-card { background: var(--bg-elev, rgba(245,243,239,.06)); border: 2px solid color-mix(in srgb, var(--parchment) 20%, transparent); border-radius: 16px; padding: 1.75rem 1.5rem; }
.ev-include-num { font-family: var(--font-mono); font-size: .85rem; color: var(--mahogany-bright); }
.ev-include-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; margin: .6rem 0 .5rem; color: var(--parchment); }
.ev-include-card p { font-size: .92rem; color: color-mix(in srgb, var(--parchment) 78%, transparent); }
.ev-includes-sticker { display: block; margin: 3rem auto 0; rotate: -4deg; }
@media (max-width: 980px) { .ev-includes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ev-includes { grid-template-columns: 1fr; } }

/* ---- Lo que hacemos: Bodas / Eventos privados ---- */
.ev-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 900px; margin: 3rem auto 0; }
.ev-pillar { background: var(--parchment); color: var(--onyx); border: 3px solid var(--onyx); border-radius: 18px; padding: 2rem; box-shadow: 6px 6px 0 var(--onyx); }
.ev-pillar h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.8rem; margin-bottom: .6rem; }
.ev-pillar p { font-size: .95rem; color: color-mix(in srgb, var(--onyx) 70%, transparent); margin-bottom: 1.2rem; }
.ev-pillar-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
/* .sticker-tag is `position: absolute` globally (used elsewhere for scattered
   decorative tags) — override back to normal flow for this inline pair. */
.ev-pillar-tags .sticker-tag { position: static; }
.ev-pillar-tags .sticker { font-size: .8rem; padding: .45rem 1rem; rotate: 0deg; }
@media (max-width: 700px) { .ev-pillars { grid-template-columns: 1fr; } }

/* ---- Zona de cobertura ---- */
.ev-area-intro { margin-top: -.5rem; }
.ev-towns {
  display: flex; flex-wrap: wrap; gap: .75rem; max-width: var(--container); margin: 1.75rem 0 1.25rem; padding: 0; list-style: none;
}
.ev-towns li {
  font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
  background: var(--onyx); color: var(--parchment); padding: .55rem 1.1rem; border-radius: 999px;
}
.ev-area-note { font-size: .9rem; color: color-mix(in srgb, var(--onyx) 60%, transparent); max-width: 60ch; }
.ev-area-sticker { position: relative; display: block; width: 160px; margin: 2.5rem auto 0; rotate: -6deg; }

/* ---- Cómo funciona ---- */
.ev-steps { list-style: none; padding: 0; max-width: 760px; margin: 3rem auto 0; display: flex; flex-direction: column; gap: 2rem; }
.ev-steps li { display: flex; gap: 1.5rem; align-items: flex-start; }
.ev-step-num {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem; background: var(--mahogany); color: var(--parchment);
  box-shadow: 4px 4px 0 var(--mahogany-dark);
}
.ev-steps h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; color: var(--parchment); margin-bottom: .3rem; }
.ev-steps p { font-size: .95rem; color: color-mix(in srgb, var(--parchment) 78%, transparent); }

/* ---- Testimonios ---- */
.ev-reviews-grid { max-width: var(--container); margin: 3rem auto 0 !important; }
.ev-reviews-grid .review { background: var(--parchment); }

/* ---- FAQ ---- */
.ev-faq-list { max-width: 820px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.ev-faq-item {
  background: var(--bg-elev, #fff); border: 3px solid var(--onyx); border-radius: 16px;
  padding: 1.1rem 1.4rem; box-shadow: 4px 4px 0 var(--onyx);
}
.ev-faq-item summary {
  cursor: pointer; font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.ev-faq-item summary::-webkit-details-marker { display: none; }
.ev-faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.4rem; flex-shrink: 0; transition: transform .25s var(--ease); }
.ev-faq-item[open] summary::after { transform: rotate(45deg); }
.ev-faq-item p { margin-top: .85rem; font-size: .95rem; color: color-mix(in srgb, var(--onyx) 72%, transparent); }

/* ---- Contacto ---- */
.ev-contact-intro { margin-top: -.5rem; }
.ev-contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 4vw, 3.5rem); max-width: var(--container); margin: 3rem auto 0; align-items: start; }
.ev-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ev-form label { display: flex; flex-direction: column; gap: .4rem; font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--parchment) 70%, transparent); }
.ev-form input, .ev-form select, .ev-form textarea {
  font-family: var(--font-body); font-size: 1rem; padding: .8rem 1rem; border-radius: 10px;
  border: 2px solid color-mix(in srgb, var(--parchment) 25%, transparent); background: rgba(245,243,239,.06); color: var(--parchment);
  resize: vertical;
}
.ev-form input::placeholder, .ev-form textarea::placeholder { color: color-mix(in srgb, var(--parchment) 45%, transparent); }
.ev-form button { align-self: flex-start; margin-top: .5rem; }
.ev-contact-side { display: flex; flex-direction: column; gap: 1.5rem; }
.ev-contact-side .info-list li strong { color: var(--parchment); }
.ev-contact-side .info-list span { color: color-mix(in srgb, var(--parchment) 55%, transparent); }
@media (max-width: 860px) { .ev-contact-grid { grid-template-columns: 1fr; } }

/* ---- Contact page (contacto.html) ---- */
.ev-hero-compact { padding-top: 9.5rem; min-height: auto; }
.ev-hero-compact-sub { max-width: 56ch; margin-top: 1rem; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); max-width: var(--container); margin: 0 auto; align-items: start; }
.contact-h2 { --ch-fill: var(--mahogany); --ch-stroke: var(--parchment); --ch-shadow: var(--onyx); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 1.5rem; }
.contact-optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }

.ev-form textarea { font-family: var(--font-body); }
.block-cream .ev-form input, .block-cream .ev-form select, .block-cream .ev-form textarea {
  border-color: color-mix(in srgb, var(--onyx) 20%, transparent); background: var(--parchment); color: var(--onyx);
}
.block-cream .ev-form label { color: color-mix(in srgb, var(--onyx) 65%, transparent); }

.contact-map { border-radius: 18px; overflow: hidden; border: 3px solid var(--onyx); box-shadow: 6px 6px 0 var(--onyx); line-height: 0; }
.contact-info-list { margin: 1.75rem 0; }
.block-cream .contact-info-list li strong { color: var(--onyx); }
.block-cream .contact-info-list span { color: color-mix(in srgb, var(--onyx) 55%, transparent); }
.contact-info-list a { color: var(--mahogany); border-bottom: 1px solid currentColor; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-outline-dark { background: transparent; color: var(--onyx); border-color: var(--onyx); }
.btn-outline-dark:hover { background: var(--onyx); color: var(--parchment); }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- Legal pages (aviso-legal / privacidad / cookies) ---- */
.legal-hero { padding-top: 9.5rem; padding-bottom: 4rem; min-height: auto; }
.legal-content { max-width: 760px; margin: 0 auto; padding-bottom: 2rem; }
.legal-content h2 {
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem;
  margin: 2.5rem 0 .75rem; color: var(--mahogany);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { font-size: 1rem; line-height: 1.7; color: color-mix(in srgb, var(--onyx) 75%, transparent); margin-bottom: 1rem; }
.legal-content ul { padding-left: 1.4rem; list-style: disc; }
.legal-content a { color: var(--mahogany); border-bottom: 1px solid currentColor; }
.legal-note {
  margin-top: 3rem; padding: 1.25rem 1.5rem; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--onyx) 30%, transparent);
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.6; color: color-mix(in srgb, var(--onyx) 65%, transparent);
}