/* ================================================================
   TAGOMATE — Estilos personalizados
   Sobreescribe/define los colores custom de Nicepage
   ================================================================ */

:root {
  --color-dark:    #1c1c1e;
  --color-dark2:   #2a2a2a;
  --color-red:     #a80210;
  --color-red2:    #c0021a;
  --color-white:   #ffffff;
  --color-light:   #f5f5f5;
  --color-grey:    #888888;
}

/* ── COLORES CUSTOM DE NICEPAGE ───────────────────────────────── */
.u-custom-color-1  { background-color: var(--color-dark) !important; }
.u-custom-color-2  { background-color: var(--color-red)  !important; }
.u-text-custom-color-3 { color: var(--color-red) !important; }
.u-border-custom-color-3 { border-color: var(--color-red) !important; }

/* Paletas */
.u-palette-1-base        { background-color: var(--color-red) !important; color: #fff !important; }
.u-hover-palette-1-light-1:hover { background-color: var(--color-red2) !important; }
.u-text-palette-1-base   { color: var(--color-red) !important; }
.u-text-palette-2-base   { color: var(--color-red) !important; }
.u-border-palette-2-base { border-color: var(--color-red) !important; }
.u-text-custom-color-3   { color: var(--color-red) !important; }
.u-text-hover-custom-color-3:hover { color: var(--color-red) !important; }
.u-text-active-palette-3-base.u-active { color: var(--color-red) !important; }

/* ── HEADER ───────────────────────────────────────────────────── */
#header {
  background-color: var(--color-dark) !important;
  border-bottom: 2px solid var(--color-red);
}
.u-nav-link-2 { color: #fff !important; }
.u-nav-link-2:hover,
.u-nav-link-2.u-active { color: var(--color-red) !important; }
.u-nav-link-2.u-active { border-bottom-color: var(--color-red) !important; }

/* Logo */
.u-logo-image-1 { max-height: 50px; }

/* Idiomas */
.u-language-url { opacity: 0.7; transition: opacity .2s; }
.u-language-url:hover,
.u-language-url.u-active { opacity: 1; }

/* ── HERO CAROUSEL ────────────────────────────────────────────── */
.u-section-1-1,
.u-section-1-2 {
  min-height: 600px !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative;
}

.u-section-1-1 { background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('../images/b4831adcf5c0574b2e1a0afea7416dae_PicsArt_011006.27.59.png') !important; }
.u-section-1-2 { background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('../images/59b319d3abd99be5decffd610979ca9c_18698127_374861579583488_8380496328661183797_n.jpg') !important; }

.u-section-1-1 .u-sheet-1,
.u-section-1-2 .u-sheet-1 {
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.u-section-1-1 .u-image-1,
.u-section-1-2 .u-image-1 {
  width: 320px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

.u-section-1-1 .u-image-2,
.u-section-1-2 .u-image-2 {
  width: 260px !important;
  height: auto !important;
  margin: 10px auto 40px !important;
  display: block !important;
}

/* ── SECCIÓN SEMBLANZA ────────────────────────────────────────── */
.u-section-2 { background: #fff; }
.u-group-1 {
  background: #fff !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  padding: 40px !important;
  max-width: 860px !important;
  margin: 40px auto !important;
}
.u-section-2 .u-image-1 {
  width: 180px !important;
  height: 180px !important;
  margin: 0 auto 20px !important;
  display: block !important;
  object-fit: cover;
  border-radius: 50% !important;
}
.u-section-2 .u-text-1 {
  font-family: 'Bad Script', cursive !important;
  font-size: 2.2rem !important;
  color: var(--color-red) !important;
  margin: 10px 0 6px !important;
}
.u-section-2 .u-text-2 {
  font-size: 1rem !important;
  color: #555 !important;
  margin-bottom: 20px !important;
}
.u-section-2 .u-text-3 {
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  color: #333 !important;
  text-align: left !important;
  max-width: 700px !important;
  margin: 0 auto 24px !important;
}
.u-btn-1 {
  background-color: #2196F3 !important;
  color: #fff !important;
  padding: 10px 28px !important;
  border-radius: 50px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.u-btn-1:hover { background-color: #1565C0 !important; }

/* ── SECCIÓN GALERÍA ──────────────────────────────────────────── */
.u-section-3 { background: #fff; padding: 40px 0 60px; }
.u-section-3 .u-text-1 {
  font-family: 'Bad Script', cursive !important;
  font-size: 1.8rem !important;
  color: #222 !important;
  padding: 20px 0 10px !important;
}
.u-shape-1 {
  background-color: var(--color-dark) !important;
  height: 4px !important;
  margin-bottom: 30px !important;
}
.u-gallery-1 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}
.u-gallery-item {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4/3 !important;
  cursor: pointer !important;
}
.u-back-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s !important;
}
.u-gallery-item:hover .u-back-image { transform: scale(1.05) !important; }
.u-over-slide {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.2) !important;
  opacity: 0 !important;
  transition: opacity .25s !important;
}
.u-gallery-item:hover .u-over-slide { opacity: 1 !important; }

/* ── SECCIÓN VÍDEO ────────────────────────────────────────────── */
.u-section-4 {
  background-color: var(--color-dark2) !important;
  padding: 50px 0 !important;
}
.u-section-4 .u-text-1 {
  font-family: 'Bad Script', cursive !important;
  color: #fff !important;
  font-size: 1.8rem !important;
  margin: 20px 0 10px !important;
}
.u-section-4 .u-text-2 { color: rgba(255,255,255,.75) !important; }
.u-video-1 { max-width: 860px !important; margin: 0 auto !important; }
.embed-responsive-1 {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
}
.embed-responsive-1 iframe {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
}

/* ── SECCIÓN CONTACTO ─────────────────────────────────────────── */
.u-section-5 {
  background-color: var(--color-dark) !important;
  padding: 50px 0 !important;
}
.u-list-item-1,
.u-list-item-2,
.u-list-item-3 { background: #fff !important; border-radius: 8px !important; }

.u-icon-circle {
  background-color: var(--color-red) !important;
  border-radius: 50% !important;
  width: 54px !important; height: 54px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 12px !important;
  color: #fff !important;
}
.u-icon-circle svg { width: 26px !important; height: 26px !important; }

.u-text-1, .u-text-3, .u-text-5 { font-weight: 700 !important; color: #222 !important; }
.u-text-2, .u-text-4, .u-text-6 { color: #555 !important; }
.u-text-6 span { font-size: 1.4rem !important; font-weight: 700 !important; }

.u-layout-cell-1,
.u-layout-cell-2 {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 28px !important;
}
.u-text-7 { font-weight: 700 !important; color: #222 !important; font-size: 1.1rem !important; }
.u-text-8, .u-text-9, .u-text-10 { color: #555 !important; font-size: 0.9rem !important; }
.u-text-11 { font-weight: 700 !important; font-size: 1.1rem !important; color: #222 !important; }

/* Formulario */
.u-input {
  border-bottom: 2px solid #ddd !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
  border-radius: 0 !important;
  font-size: 0.95rem !important;
  padding: 8px 4px !important;
  width: 100% !important;
  background: transparent !important;
  transition: border-color .2s !important;
}
.u-input:focus { border-bottom-color: var(--color-red) !important; outline: none !important; }

.u-btn-3 {
  background-color: var(--color-red) !important;
  color: #fff !important;
  width: 100% !important;
  padding: 14px !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: .05em !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.u-btn-3:hover { background-color: var(--color-red2) !important; }

.u-agree-label { font-size: 0.85rem !important; color: #555 !important; }
.u-agree-checkbox { accent-color: var(--color-red); }

/* ── FOOTER ───────────────────────────────────────────────────── */
#footer { background-color: #111 !important; }
#footer .u-text-1 { color: rgba(255,255,255,.5) !important; font-size: 0.8rem !important; }
#footer .u-text-palette-1-base { color: var(--color-red) !important; }

/* ── SHEET ────────────────────────────────────────────────────── */
.u-sheet { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ── STICKY HEADER FIX ────────────────────────────────────────── */
.u-sticky { position: sticky; top: 0; z-index: 100; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .u-section-1-1,
  .u-section-1-2 { min-height: 380px !important; }
  .u-section-1-1 .u-image-1,
  .u-section-1-2 .u-image-1 { width: 200px !important; }
  .u-section-1-1 .u-image-2,
  .u-section-1-2 .u-image-2 { width: 180px !important; }
  .u-gallery-1 { grid-template-columns: repeat(2, 1fr) !important; }
}