/* ============================================================
   Campaña Eres #1 — customerestu.css
   Personalización de la plantilla: tipografía del distintivo
   y paleta de color propia de la campaña.

   Paleta:
     coral   #F29199
     magenta #D95585
     rosa    #F2D8EB
     verde   #B8D9D9
     crema   #F2E3B3
   ============================================================ */

@font-face {
  font-family: "Campus MN";
  src: url("/themes/udacomunica/fonts/Campus-MN-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* El distintivo de la campaña en las secciones phrase y connect */
.phrase-highlight,
.connect-highlight {
  font-family: "Campus MN", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: normal; /* la fuente solo tiene el peso regular */
  letter-spacing: 0.02em;
  padding: 0.08em 0.25em;
}

/* El "#1" gigante de la sección figures */
.figures-number {
  font-family: "Campus MN", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: normal; /* la fuente solo tiene el peso regular */
  letter-spacing: 0.02em;
}

/* Etiqueta "Líder" bajo el texto de liderazgo en la sección figures:
   tag con fondo de color de la campaña y contorno */
.figures-tag {
  display: inline-block;
  align-self: flex-start; /* no se estira dentro de la columna flex */
  padding: 0.4em 1.1em;
  background: #f7ecc9; /* crema en tono medio suave */
  border: 1.5px solid var(--brand-gold); /* el mismo tono, más oscuro */
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.25rem 0 1.5rem;
}

/* Variante dentro de los logros de la lista: sin margen inferior extra */
.figures-tag-sm {
  margin: 0.35rem 0 0;
}

/* Cada etiqueta con su color de la paleta (fondo suave, contorno intenso) */
.figures-highlight:nth-child(1) .figures-tag {
  background: #ddecec; /* verde agua suave */
  border-color: var(--brand-teal-deep);
}

.figures-highlight:nth-child(2) .figures-tag {
  background: #f8e6f1; /* rosa suave */
  border-color: var(--brand-magenta);
}

/* ============================================================
   Paleta de color
   ============================================================ */

:root {
  /* Colores de la campaña */
  --brand-coral: #f29199;
  --brand-magenta: #d95585;
  --brand-rose: #f2d8eb;
  --brand-teal: #b8d9d9;
  --brand-cream: #f2e3b3;

  /* Tonos de apoyo derivados de la paleta (para iconos y acentos
     con contraste, como en la gráfica de la campaña) */
  --brand-teal-deep: #4e9a9a;
  --brand-gold: #dfb43f;

  /* Remapa la escala monocroma de la plantilla a neutros "berry"
     derivados del magenta, para que todo el sitio entone. */
  --color-ink: #414d72;
  --color-ink-soft: #414d72;
  --color-gray: #6e6e73;
  --color-gray-light: #b795a6;
  --color-border: #ecd2e1;
  --color-surface: #e88e96;
  --color-gray-light-light: #a84a66;
}

::selection {
  background: var(--brand-magenta);
  color: var(--color-white);
}

/* ---------- Bloques de color por sección (como en la gráfica) ---------- */

.section-phrase {
  background: var(--brand-teal);
}

.section-milestones {
  background: var(--brand-cream);
}

.section-feel {
  background: #d0e6da;
}

.section-contact {
  background: #ffffff;
}

/* Las tarjetas blancas mantienen el contraste sobre los bloques de color */
.section-milestones .news-card,
.section-contact .contact-form {
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Acentos globales: cada sección con su color ---------- */

.eyebrow-dot {
  background: var(--brand-magenta);
}

.section-hero .eyebrow-dot { background: var(--brand-cream); }
.section-phrase .eyebrow-dot { background: var(--brand-magenta); }
.section-figures .eyebrow-dot { background: var(--brand-coral); }
.section-milestones .eyebrow-dot { background: var(--brand-teal-deep); }
.section-feel .eyebrow-dot { background: var(--brand-magenta); }
.section-connect .eyebrow-dot { background: var(--brand-coral); }
.section-contact .eyebrow-dot { background: var(--brand-teal-deep); }

.phrase-highlight,
.connect-highlight {
  background: #414d72;
}

/* El "#1" gigante en coral, como los numerales de la gráfica */
.figures-number {
  color: var(--brand-coral);
}

/* ---------- Botones (variables de Bootstrap) ---------- */

.btn-dark,
.btn-outline-dark {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-ink);
  --bs-btn-border-color: var(--color-ink);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--brand-magenta);
  --bs-btn-hover-border-color: var(--brand-magenta);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--brand-magenta);
  --bs-btn-active-border-color: var(--brand-magenta);
}

.btn-outline-dark {
  --bs-btn-color: var(--color-ink);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--brand-teal-deep);
  --bs-btn-hover-border-color: var(--brand-teal-deep);
  --bs-btn-active-bg: var(--brand-teal-deep);
  --bs-btn-active-border-color: var(--brand-teal-deep);
}

.btn-light {
  --bs-btn-hover-bg: var(--brand-cream);
  --bs-btn-hover-border-color: var(--brand-cream);
  --bs-btn-hover-color: var(--color-ink);
}

/* ---------- Sección: connect ---------- */

/* Iconos de las tarjetas: alternan los tonos de la paleta */
.connect-grid > div:nth-child(5n + 1) .connect-icon { background: var(--brand-rose); }
.connect-grid > div:nth-child(5n + 2) .connect-icon { background: var(--brand-teal); }
.connect-grid > div:nth-child(5n + 3) .connect-icon { background: var(--brand-cream); }
.connect-grid > div:nth-child(5n + 4) .connect-icon { background: var(--brand-coral); }
.connect-grid > div:nth-child(5n + 5) .connect-icon { background: var(--brand-rose); }

/* Franja decorativa: cada insignia toma un color de la campaña */
.connect-deco-icon:nth-child(1) { background: var(--brand-rose); }
.connect-deco-icon:nth-child(2) { background: var(--brand-teal); }
.connect-deco-icon:nth-child(3) { background: var(--brand-magenta); color: var(--color-white); border-color: var(--brand-magenta); }
.connect-deco-icon:nth-child(4) { background: var(--brand-cream); }
.connect-deco-icon:nth-child(5) { background: var(--brand-coral); }

.connect-deco-line {
  color: var(--brand-teal-deep);
}

/* ---------- Sección: feel ---------- */

/* Iconos de redes sociales: fondos pastel alternados y hover magenta */
.feel-icons li:nth-child(5n + 1) { background: var(--brand-rose); }
.feel-icons li:nth-child(5n + 2) { background: var(--brand-teal); }
.feel-icons li:nth-child(5n + 3) { background: var(--brand-cream); }
.feel-icons li:nth-child(5n + 4) { background: var(--brand-coral); }
.feel-icons li:nth-child(5n + 5) { background: var(--brand-rose); }

/* Al pasar el cursor, cada icono se enciende con la versión intensa de su tono */
.feel-icons li:nth-child(5n + 1):hover { background: var(--brand-magenta); color: var(--color-white); }
.feel-icons li:nth-child(5n + 2):hover { background: var(--brand-teal-deep); color: var(--color-white); }
.feel-icons li:nth-child(5n + 3):hover { background: var(--brand-gold); color: var(--color-white); }
.feel-icons li:nth-child(5n + 4):hover { background: var(--brand-magenta); color: var(--color-white); }
.feel-icons li:nth-child(5n + 5):hover { background: var(--brand-teal-deep); color: var(--color-white); }

.feel-slider-btn:hover:not(:disabled),
.feel-slider-btn:focus-visible {
  background: var(--brand-magenta);
  border-color: var(--brand-magenta);
  color: var(--color-white);
}

/* ---------- Sección: contact ---------- */

/* Cada dato de contacto con un color de la campaña */
.contact-list .contact-item:nth-child(4n + 1) .contact-icon { background: var(--brand-magenta); }
.contact-list .contact-item:nth-child(4n + 2) .contact-icon { background: var(--brand-coral); }
.contact-list .contact-item:nth-child(4n + 3) .contact-icon { background: var(--brand-teal-deep); }
.contact-list .contact-item:nth-child(4n + 4) .contact-icon { background: var(--brand-gold); }

.form-control:focus {
  border-color: var(--brand-magenta);
  box-shadow: 0 0 0 0.25rem rgba(217, 85, 133, 0.18);
}

/* ---------- Rueda giratoria ---------- */

.spin-badge {
  background: #e98788;
  box-shadow: 0 14px 32px rgba(217, 85, 133, 0.4);
  color: #d0e6da;
}

/* El icono central en dorado, como el laurel de la gráfica */
.spin-badge-icon {
  color: #d0e6da;
}
.photo-card {
  background: none;
}

.news-card-img {
    filter: grayscale(0);
}
.news-card-side-img {
    filter: grayscale(0);
}
.article-body img{ width: 100%;}

 .hero-slide-img {
	object-fit: contain;
}
.section-hero {
	background: #c1e2e5;
}