/* ==========================================================================
   La Casita del Arte — contact.css
   Pagina de contacto y paginas internas (about, legales).
   ========================================================================== */

.page-hero {
  padding-top: calc(var(--space-2xl) + var(--space-sm));
  padding-bottom: var(--space-lg);
  background: linear-gradient(180deg, var(--color-teal-050), var(--color-paper));
  text-align: left;
}
.page-hero .eyebrow { margin-bottom: var(--space-sm); }
.page-hero p { font-size: var(--fs-md); color: var(--color-ink-soft); margin-top: var(--space-sm); max-width: 50ch; }

.contact-section { padding-block: var(--space-2xl); }
.contact-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 992px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-card {
  background: var(--color-teal-900);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  height: fit-content;
}
.contact-card h3 { color: var(--color-white); margin-bottom: var(--space-sm); }
.contact-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-list li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.contact-list svg { width: 22px; height: 22px; color: var(--color-rose-300); flex-shrink: 0; margin-top: 0.15em; }
.contact-list a, .contact-list span { color: var(--color-teal-100); }
.contact-list a:hover { color: var(--color-white); }
.contact-hours { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,0.16); font-size: var(--fs-sm); color: var(--color-teal-100); }
.contact-map { margin-top: var(--space-md); border-radius: var(--radius-md); overflow: hidden; border: var(--border-hairline); }
.contact-map iframe { width: 100%; height: 220px; border: 0; filter: grayscale(0.15) sepia(0.08); }

.contact-form-wrap { background: var(--color-white); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-lg); }

/* -------------------------------- Paginas legales / about -------------------------------- */
.prose-section { padding-block: var(--space-xl) var(--space-2xl); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-lg); margin-bottom: var(--space-xs); font-size: var(--fs-md); }
.prose p, .prose li { color: var(--color-ink-soft); margin-bottom: var(--space-xs); max-width: 68ch; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose li { display: list-item; }
.prose strong { color: var(--color-ink); }
.updated-note { font-size: var(--fs-xs); color: var(--color-ink-soft); margin-bottom: var(--space-md); }

/* -------------------------------- Pagina Somos -------------------------------- */
.founder-section { padding-block: var(--space-2xl); }
.founder-grid { display: grid; gap: var(--space-xl); align-items: center; }
.founder-portrait img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
@media (min-width: 992px) { .founder-grid { grid-template-columns: 0.9fr 1.1fr; } }

.values-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, 1fr); margin-top: var(--space-lg); }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }
.value-item { padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-teal-050); }
.value-item strong { display: block; font-family: var(--font-display); color: var(--color-teal-900); font-size: 1.15rem; margin-bottom: 0.25em; }
.value-item span { font-size: var(--fs-sm); color: var(--color-ink-soft); }