/* =============================================================
   COMPONENTS.CSS — Abanico Multiservicios
   Home page sections · Catalog download CTA
   (Page-specific components that don't belong in base or layout)
   ============================================================= */


/* ---------------------------------------------------------------
   HOME — Services intro section
   --------------------------------------------------------------- */
#servicesIntro {
  padding: 4rem 0;
}
#servicesIntro h1 {
  color: #8B4513;
  margin-bottom: 0.5rem;
}
#servicesIntro .row > div {
  padding: 1rem 1.25rem;
}
#servicesIntro img {
  max-height: 175px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Dark mode home section */
body.dark-mode #servicesIntro h1 { color: #d4845a; }
body.dark-mode #servicesIntro h4 { color: var(--dm-text); }
body.dark-mode #servicesIntro .lead { color: var(--dm-text-muted); }


/* ---------------------------------------------------------------
   CATALOG DOWNLOAD CTA (shared across pages)
   --------------------------------------------------------------- */
.catalog-download {
  text-align: center;
  padding: 2.5rem 1rem;
}
.catalog-download h5 {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  color: var(--gray-dark);
}
.catalog-download .btn-download {
  background: #198754;
  color: var(--white);
  border: 2px solid #198754;
  padding: 0.6rem 1.6rem;
  border-radius: 0.45rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  transition: background var(--transition-std), box-shadow var(--transition-std), transform var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.catalog-download .btn-download:hover {
  background: #146c43;
  border-color: #146c43;
  box-shadow: 0 4px 14px rgba(25, 135, 84, 0.3);
  transform: translateY(-1px);
  color: var(--white);
}

body.dark-mode .catalog-download h5 { color: var(--dm-text); }


/* ---------------------------------------------------------------
   HOME — Instagram reels (#igReels)
   --------------------------------------------------------------- */
#igReels h2 { color: var(--gray-dark); }
#igReels h5 { color: var(--gray-dark); }
#igReels p  { color: var(--gray-body); }

/* Abanico-branded decorative card wrapper */
.social-card {
  width: 100%;
  max-width: 330px;
  border: 3px solid var(--red-primary);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 18px rgba(204, 0, 1, 0.13);
  transition: transform var(--transition-std), box-shadow var(--transition-std);
}
.social-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(204, 0, 1, 0.24);
}
/* Force IG blockquote to fill card cleanly */
.social-card .instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

body.dark-mode #igReels h2,
body.dark-mode #igReels h5    { color: var(--dm-text); }
body.dark-mode #igReels .lead,
body.dark-mode #igReels p     { color: var(--dm-text-muted); }
body.dark-mode .social-card   { background: var(--dm-surface-2); border-color: var(--red-primary); }


/* ---------------------------------------------------------------
   CONTACT — social feed section
   --------------------------------------------------------------- */
.contact-social-section h3 { color: var(--gray-dark); }
.contact-social-section .lead { color: var(--gray-body); }

/* Captioned IG embeds fill their column */
.contact-social-section .instagram-media {
  margin: 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Facebook video wrapper */
.fb-reel-wrapper {
  border-radius: 12px;
  overflow: hidden;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Contact social cards — shared wrapper */
.contact-social-card {
  width: 267px;
  border: 3px solid var(--red-primary);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(204, 0, 1, 0.13);
  transition: transform var(--transition-std), box-shadow var(--transition-std);
  background: var(--white);
}
.contact-social-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(204, 0, 1, 0.24);
}
.contact-social-card__label {
  background: var(--red-primary);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  padding: 0.5rem 1rem;
  text-align: center;
}
.contact-social-card__embed {
  display: block;
  line-height: 0;
}

/* Abanico-branded IG CTA — fills the card embed area */
.abanico-cta-card {
  width: 100%;
  height: 476px;
  background: linear-gradient(150deg, var(--red-primary) 0%, var(--red-dark) 60%, #6b0000 100%);
  gap: 1rem;
  padding: 2rem 1.5rem;
  transition: opacity var(--transition-std);
}
.abanico-cta-card:hover {
  opacity: 0.92;
}
.abanico-cta-logo {
  width: 120px;
  filter: brightness(0) invert(1);
}
.abanico-cta-handle {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.95);
  text-transform: none;
  letter-spacing: 0.02rem;
}
.abanico-cta-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .contact-social-section h3   { color: var(--dm-text); }
body.dark-mode .contact-social-section .lead { color: var(--dm-text-muted); }
body.dark-mode .contact-social-card          { background: var(--dm-surface-2); border-color: var(--red-primary); }


/* ---------------------------------------------------------------
   CONTACT PAGE — Map card
   --------------------------------------------------------------- */
.contact-map-card {
  border: 3px solid var(--red-primary);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(204, 0, 1, 0.13);
  transition: box-shadow var(--transition-std);
}
.contact-map-card:hover {
  box-shadow: 0 8px 24px rgba(204, 0, 1, 0.22);
}
.contact-map-card__title {
  background: var(--red-primary);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  padding: 0.5rem 1rem;
  text-align: center;
}
.contact-map-card__embed {
  position: relative;
  padding-bottom: 60%;
  height: 0;
  overflow: hidden;
}
.contact-map-card__embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

body.dark-mode .contact-map-card {
  border-color: var(--red-primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}