/* ============================================================
   EVENTOS PAGE — eventos.html
   Paleta: blanco cálido #FAFAF7 · casi negro #1C1815 · rosa #C4978A
   ============================================================ */

body {
  background: var(--eventos-bg);
  color: var(--eventos-text);
}

.section__eyebrow { color: var(--eventos-rose); }

/* ── Hero eventos ───────────────────────────────────────── */
.hero { background-color: #0d0d0c; }
.hero__bg {
  background-image: url('../assets/images/evento-6.webp');
  background-position: center center;
}

/* ── Tipos de eventos ───────────────────────────────────── */
.section--tipos { background: white; }

.tipos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.06);
  margin-top: 3rem;
}
.tipo-card {
  background: white;
  padding: 2.5rem 2rem;
  transition: background var(--transition);
  cursor: default;
}
.tipo-card:hover { background: #fdf9f7; }

.tipo-card__icon {
  margin-bottom: 1.25rem;
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--eventos-rose);
  line-height: 1;
}
.tipo-card h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--eventos-text);
}
.tipo-card p {
  font-size: 0.85rem;
  line-height: 1.65;
  opacity: 0.65;
}

@media (max-width: 720px) {
  .tipos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .tipos-grid { grid-template-columns: 1fr; }
}

/* ── Sobre Diana (eventos) ──────────────────────────────── */
.about {
  background: var(--eventos-bg);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.about__text { order: -1; }
.about__image img {
  width: 100%;
  height: clamp(400px, 55vh, 620px);
  object-fit: cover;
  object-position: center 60%;
}
.about__text .section__title { margin-bottom: 1.5rem; }
.about__text p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.8;
  margin-bottom: 1rem;
}
.about__text blockquote {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--eventos-rose);
  margin: 1.5rem 0;
  line-height: 1.2;
}
.about__text .btn { margin-top: 1rem; }

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about__text { order: 0; }
  .about__image img { height: clamp(280px, 50vw, 420px); }
}

/* ── Filosofía eventos ──────────────────────────────────── */
.section--filosofia { background: white; }

/* ── Portfolio eventos ──────────────────────────────────── */
.section--portfolio {
  background: var(--eventos-bg);
  padding-bottom: 0;
}
.section--portfolio .section__title,
.section--portfolio .section__lead {
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}
.section--portfolio .section__lead { margin-bottom: 3rem; }

/* ── Proceso eventos (3 pasos) ──────────────────────────── */
.section--process { background: white; }

.process--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  counter-reset: step;
}
.process--3 .process__step { background: white; }
.process--3 .process__step::before {
  color: var(--eventos-rose);
}

@media (max-width: 640px) {
  .process--3 { grid-template-columns: 1fr; }
}

/* ── Contacto eventos ───────────────────────────────────── */
.section--contact { background: var(--eventos-bg); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-cta {
  padding: 2.5rem;
  border: 1px solid rgba(196, 151, 138, 0.25);
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.contact-cta .script {
  font-size: 2.4rem;
  color: var(--eventos-rose);
}
.contact-cta p {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.7;
}
.contact-cta .btn-wa {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #25D366;
  color: white;
  padding: 0.85rem 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background 0.3s, transform 0.3s;
}
.contact-cta .btn-wa:hover {
  background: #1ebe5c;
  transform: translateY(-1px);
}
.contact-cta .btn-wa svg {
  width: 20px; height: 20px; fill: white;
}
.contact-cta__divider {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.35;
}

/* Formulario eventos */
.form { display: flex; flex-direction: column; gap: 1.1rem; }

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form__field label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eventos-rose);
  font-weight: 500;
}
.form__field input,
.form__field select,
.form__field textarea {
  background: white;
  border: 1px solid rgba(196, 151, 138, 0.2);
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--eventos-text);
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--eventos-rose);
}
.form__field input::placeholder,
.form__field textarea::placeholder {
  color: rgba(28, 24, 21, 0.3);
  font-style: italic;
}
.form__field textarea {
  resize: vertical;
  min-height: 100px;
}
.form__submit .btn {
  width: 100%;
  text-align: center;
  padding: 1rem;
}
.form__note {
  font-size: 0.72rem;
  opacity: 0.4;
  text-align: center;
  font-style: italic;
}

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

/* ── Footer eventos ─────────────────────────────────────── */
.footer {
  background: var(--eventos-bg);
  color: var(--eventos-text);
  border-top-color: rgba(196, 151, 138, 0.2);
}
.footer__brand .script { color: var(--eventos-text); }

/* ── Nav scrolled override para eventos ─────────────────── */
.nav.scrolled {
  background: rgba(250, 250, 247, 0.94);
}
.nav.scrolled .nav__back { color: var(--eventos-text); }
.nav.scrolled .nav__brand .script { color: var(--eventos-text); }
.nav.scrolled .nav__brand .sub { color: var(--eventos-rose); }
.nav.scrolled .nav__links a { color: var(--eventos-text); }
.nav.scrolled .nav__toggle { color: var(--eventos-text); }