/* footer-v2.css — Hechizos de Amor, footer nuevo (estilo Pebble Little/Shopify).
   Prefijo hf2-. Colores SOLO en tokens .hf2. Toda regla propia lleva ".hf2" como
   ancestro para llegar a especificidad >= (0,2,0) y ganarle al hover beige de Astra
   y al text-shadow del kit sobre "button" (gotcha 54). Breakpoint mobile/desktop: 768px. */

.hf2 {
  /* Tokens (spec footer-v2.md §3 / brief) */
  --hf2-bg: #000;
  --hf2-cream: #FEF3E7;
  --hf2-cream-70: rgba(254, 243, 231, .7);
  --hf2-line: rgba(254, 243, 231, .16);
  --hf2-field-bg: #fff;
  --hf2-ink: #111;
  --hf2-ink-45: rgba(17, 17, 17, .45); /* placeholder del campo */
  --hf2-white: #fff;
  --hf2-btn-hover: #222; /* estado hover/focus del botón circular negro */
  --hf2-social-bg: #232323;
  --hf2-social-bg-hover: #333;
  --hf2-ig-placeholder: #1a1a1a; /* fondo mientras carga la foto (lazy) */
  --hf2-msg-ok: #a9e0b4;
  --hf2-msg-error: #f3b0b0;
  --hf2-font-display: "Qalogre fit", Georgia, serif;
  --hf2-font-text: "Founders Grotesk Official", Arial, sans-serif;
  --hf2-pad-x: 20px;
  --hf2-pad-x-desktop: 48px;

  display: block;
  position: relative;
  background: var(--hf2-bg);
  color: var(--hf2-cream);
  border-radius: 30px 30px 0 0;
  font-family: var(--hf2-font-text);
  box-sizing: border-box;
}
.hf2 *,
.hf2 *::before,
.hf2 *::after {
  box-sizing: border-box;
}

.hf2 .hf2__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--hf2-pad-x) 28px;
}

.hf2 .hf2__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foco: visible sobre negro, y solo con navegación por teclado (gotcha 54: el foco que
   mueve el JS de accesibilidad del acordeón no matchea :focus-visible en algunos
   navegadores, así que se apaga con :not(:focus-visible), no con la regla vieja de Astra). */
.hf2 a:focus,
.hf2 button:focus {
  outline: 2px solid var(--hf2-cream);
  outline-offset: 2px;
}
.hf2 a:focus:not(:focus-visible),
.hf2 button:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------- boletín */
.hf2 .hf2__newsletter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 28px;
}
.hf2 .hf2__brand-logo {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 4px;
}
.hf2 .hf2__newsletter-copy {
  max-width: 480px;
}
.hf2 .hf2__newsletter-title {
  margin: 0;
  font-family: var(--hf2-font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  text-transform: none; /* gotcha 85: el sitio pone h2{text-transform:capitalize} */
  color: var(--hf2-cream);
}
.hf2 .hf2__newsletter-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.hf2 .hf2__newsletter-form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 52px;
  background: var(--hf2-field-bg);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
}
/* Foco del campo: el outline cuadrado se recorta feo en un campo redondo, así que el foco
   se dibuja en el contenedor con un anillo crema separado del blanco por uno negro. */
.hf2 .hf2__newsletter-form:focus-within {
  box-shadow: 0 0 0 2px var(--hf2-bg), 0 0 0 4px var(--hf2-cream);
}
.hf2 .hf2__newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--hf2-ink);
  font-family: var(--hf2-font-text);
  font-size: 15px;
}
.hf2 .hf2__newsletter-input:focus {
  outline: none;
}
.hf2 .hf2__newsletter-input::placeholder {
  color: var(--hf2-ink-45);
}
.hf2 .hf2__newsletter-submit {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  /* padding:0 explícito: el tema pone 10px 20px a todo "button" (regla .menu-toggle,
     button,... del theme) y sin esto el mínimo automático de flex-item (min-width:auto)
     infla el botón a ~40px aunque width:36px gane la cascada (gotcha 54, variante flex). */
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--hf2-bg);
  color: var(--hf2-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none; /* gotcha 54: el kit de Elementor pone text-shadow a todo button */
}
.hf2 .hf2__newsletter-submit:hover,
.hf2 .hf2__newsletter-submit:focus {
  background: var(--hf2-btn-hover); /* neutraliza el beige de Astra en button:hover/focus (gotcha 54) */
}
.hf2 .hf2__newsletter-submit svg {
  transform: translateX(1px);
}
.hf2 .hf2__newsletter-legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hf2-cream-70);
}
.hf2 .hf2__newsletter-legal a {
  color: var(--hf2-cream-70);
  text-decoration: underline;
}
.hf2 .hf2__newsletter-legal a:hover {
  color: var(--hf2-cream);
}
.hf2 .hf2__newsletter-msg {
  margin: 0;
  min-height: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--hf2-cream-70);
}
.hf2 .hf2__newsletter-msg--ok {
  color: var(--hf2-msg-ok);
}
.hf2 .hf2__newsletter-msg--error {
  color: var(--hf2-msg-error);
}

/* --------------------------------------------------------------- divisor */
.hf2 .hf2__divider {
  border: 0;
  border-top: 1px solid var(--hf2-line);
  margin: 0;
}

/* -------------------------------------------------------------- columnas */
.hf2 .hf2__columns {
  display: flex;
  flex-direction: column;
  padding: 8px 0 4px;
}
.hf2 .hf2__col {
  border-bottom: 1px solid var(--hf2-line);
}
.hf2 .hf2__col--instagram {
  order: -1;
  border-top: none;
}
.hf2 .hf2__col:first-child {
  border-top: none;
}
.hf2 .hf2__col-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  text-transform: none; /* gotcha 85 */
}
.hf2 .hf2__col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 2px;
  border: 0;
  background: transparent;
  color: var(--hf2-cream);
  font-family: var(--hf2-font-text);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
  text-transform: none; /* gotcha 34 y 85: font no cubre text-transform/letter-spacing */
  letter-spacing: normal;
  text-shadow: none; /* gotcha 54 */
  border-radius: 0; /* el tema pone 3px a todo "button" */
  cursor: pointer;
}
.hf2 .hf2__chevron {
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.hf2 .hf2__col-toggle[aria-expanded="true"] .hf2__chevron {
  transform: rotate(180deg);
}
.hf2 .hf2__col-list {
  list-style: none;
  margin: 0;
  padding: 0 2px 18px;
  display: none;
  flex-direction: column;
  gap: 14px;
}
.hf2 .hf2__col-list.hf2__col-list--open {
  display: flex;
}
.hf2 .hf2__link {
  color: var(--hf2-cream-70);
  text-decoration: none;
  font-size: 15px;
}
.hf2 .hf2__link:hover {
  color: var(--hf2-cream);
  text-decoration: underline;
}

.hf2 .hf2__col-panel {
  display: none;
  padding: 0 2px 20px;
}
.hf2 .hf2__col-panel.hf2__col-panel--open {
  display: block;
}
.hf2 .hf2__ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 12px;
  max-width: 340px;
}
.hf2 .hf2__ig-photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hf2-ig-placeholder);
}
.hf2 .hf2__ig-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hf2 .hf2__ig-handle {
  display: inline-block;
  color: var(--hf2-cream-70);
  font-size: 14px;
  text-decoration: none;
}
.hf2 .hf2__ig-handle:hover {
  color: var(--hf2-cream);
}

/* -------------------------------------------------------------- meta row */
.hf2 .hf2__meta-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 0;
}
.hf2 .hf2__socials {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hf2 .hf2__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--hf2-social-bg);
  color: var(--hf2-cream);
  text-decoration: none;
}
.hf2 .hf2__social:hover,
.hf2 .hf2__social:focus {
  background: var(--hf2-social-bg-hover);
}
.hf2 .hf2__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hf2 .hf2__legal-links a {
  color: var(--hf2-cream);
  text-decoration: none;
  font-size: 14px;
}
.hf2 .hf2__legal-links a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------- bottom row */
.hf2 .hf2__bottom-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
}
.hf2 .hf2__copyright {
  margin: 0;
  font-size: 13px;
  color: var(--hf2-cream-70);
}
.hf2 .hf2__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hf2 .hf2__pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--hf2-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--hf2-cream);
  white-space: nowrap;
}
.hf2 .hf2__pay-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hf2 .hf2__pay-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 9px;
  background: var(--hf2-white);
  border-radius: 6px;
}
.hf2 .hf2__pay-logo {
  /* el ancho/alto reales van como atributos HTML (viewBox medido por logo, ver
     generar-footer.py): esto solo es un tope de seguridad. */
  display: block;
  width: auto;
  height: 16px;
  max-width: 56px;
}

/* =========================================================== ESCRITORIO */
@media (min-width: 768px) {
  .hf2 .hf2__wrap {
    padding: 64px var(--hf2-pad-x-desktop) 32px;
  }

  .hf2 .hf2__newsletter {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 32px;
  }
  .hf2 .hf2__brand-logo {
    position: absolute;
    left: var(--hf2-pad-x-desktop);
    top: -8px;
  }
  .hf2 .hf2__newsletter-copy {
    flex: 1 1 auto;
    padding-top: 4px;
  }
  .hf2 .hf2__newsletter-title {
    font-size: 40px;
  }
  .hf2 .hf2__newsletter-form-wrap {
    flex: 0 0 410px;
    max-width: 410px;
  }
  .hf2 .hf2__newsletter-form {
    height: 56px;
  }

  .hf2 .hf2__columns {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 0;
  }
  .hf2 .hf2__col {
    flex: 1 1 0;
    border-bottom: none;
  }
  .hf2 .hf2__col--instagram {
    order: 0;
    /* la referencia da a Instagram ~2,8 veces una columna de enlaces: con 2,6 las fotos
       quedan en ~150 px (medido) sin apretar las tres columnas de texto */
    flex: 2.6 1 0;
  }
  .hf2 .hf2__col-toggle {
    padding: 0 0 18px;
    cursor: default;
    pointer-events: none;
  }
  .hf2 .hf2__chevron {
    display: none;
  }
  .hf2 .hf2__col-list,
  .hf2 .hf2__col-panel {
    display: block;
    padding: 0;
  }
  .hf2 .hf2__col-list {
    display: flex;
  }
  .hf2 .hf2__ig-grid {
    max-width: 100%;
  }

  .hf2 .hf2__meta-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
  }

  .hf2 .hf2__bottom-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
  }
}

/* El logo de Nequi es blanco con un punto rosa (está hecho para el fondo negro del footer
   viejo): sobre la ficha blanca solo se veía el punto. Ficha en el morado de la marca Nequi. */
.hf2 .hf2__pay-item--nequi {
  background: #200020;
}