/* ═══════════════════════════════════════════════════════════════
   zclaude73-home.css — Rediseño visual de la home pública
   Carga DESPUÉS de ccp-loreto.css y design-tokens.css.
   Sobreescribe paleta y tipografía sin reescribir markup.
   ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. HEADER + LOGO SVG
   ────────────────────────────────────────────────────────────── */
body.ccpl-tokens .header {
  background: var(--ccpl-verde-900);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* zClaude-75: brand con dos líneas (jerarquía sin "60 AÑOS") */
body.ccpl-tokens .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

body.ccpl-tokens .brand-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}

body.ccpl-tokens .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .01em;
  min-width: 0;
}
body.ccpl-tokens .brand-text strong {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  letter-spacing: -.005em;
}

@media (max-width: 480px) {
  body.ccpl-tokens .brand-logo { width: 36px; height: 36px; }
  body.ccpl-tokens .brand-text { font-size: 11px; }
  body.ccpl-tokens .brand-text strong { font-size: 13px; }
}



body.ccpl-tokens .btn-acceder {
  background: var(--ccpl-dorado);
  color: var(--ccpl-verde-900);
  font-weight: var(--fw-bold);
  border: none;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  transition: var(--t-base);
}
body.ccpl-tokens .btn-acceder:hover {
  background: var(--ccpl-dorado-h);
  transform: translateY(-1px);
}


/* ──────────────────────────────────────────────────────────────
   2. HERO + CARRUSEL — sobre las clases legacy
   ────────────────────────────────────────────────────────────── */
body.ccpl-tokens .hero { background: var(--ccpl-verde-900); }

/* zClaude-74: gradient más sutil — foto limpia hasta el 55% */
body.ccpl-tokens .slide-overlay {
  background: linear-gradient(
    to bottom,
    rgba(14, 58, 31, .00) 0%,
    rgba(14, 58, 31, .00) 55%,
    rgba(14, 58, 31, .55) 80%,
    rgba(14, 58, 31, .92) 100%
  );
}

/* zClaude-74: bloque de texto más compacto, alineado abajo-izquierda */
body.ccpl-tokens .slide-content {
  max-width: 540px;
  padding: var(--sp-4) var(--sp-6) var(--sp-8);
}
@media (max-width: 768px) {
  body.ccpl-tokens .slide-content {
    padding: var(--sp-3) var(--sp-4) var(--sp-6);
  }
}

/* zClaude-74: título 35-40% más pequeño, peso semibold */
body.ccpl-tokens .slide-content h2 {
  font-family: var(--font-display);
  font-size: clamp(18px, 3.8vw, 30px);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-2);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  max-width: 28ch;
}

/* zClaude-74: subtítulo más discreto */
body.ccpl-tokens .slide-content p {
  font-size: clamp(12px, 2.6vw, 14px);
  color: rgba(255, 255, 255, .92);
  opacity: .88;
  margin: 0 0 var(--sp-4);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  max-width: 38ch;
}

/* zClaude-74: CTA más sobrio */
body.ccpl-tokens .slide-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--ccpl-dorado);
  color: var(--ccpl-verde-900);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-tiny);
  padding: 10px var(--sp-4);
  border: none;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: var(--t-base);
}
body.ccpl-tokens .slide-btn:hover {
  background: var(--ccpl-dorado-h);
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

body.ccpl-tokens .carousel-ctrl {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  transition: var(--t-fast);
}
body.ccpl-tokens .carousel-ctrl:hover {
  background: rgba(255, 255, 255, .32);
}
@media (max-width: 480px) {
  body.ccpl-tokens .carousel-ctrl { width: 36px; height: 36px; font-size: 20px; }
}

body.ccpl-tokens .car-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  border: none;
  cursor: pointer;
  transition: var(--t-fast);
}
body.ccpl-tokens .car-dot.car-dot-active {
  background: var(--ccpl-dorado);
  width: 24px;
  border-radius: 4px;
}


/* ──────────────────────────────────────────────────────────────
   3. FRANJA 60° ANIVERSARIO — protagonista institucional (zClaude-74)
   ────────────────────────────────────────────────────────────── */
.franja-60 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 169, 51, .18) 0%, transparent 60%),
    linear-gradient(135deg, var(--ccpl-verde-700), var(--ccpl-verde-900));
  color: #fff;
  padding: var(--sp-12) var(--sp-4);
  border-bottom: 4px solid var(--ccpl-dorado);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.franja-60::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  background-image:
    radial-gradient(circle, rgba(212, 169, 51, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .4;
  pointer-events: none;
}
.franja-60-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.franja-60-titulo {
  font-family: var(--font-display);
  margin: 0 0 var(--sp-3);
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}

/* zClaude-75: dígitos uniformes — Bodoni Moda + tnum/lnum */
.num-60 {
  font-family: 'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, serif;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  font-size: clamp(72px, 16vw, 128px);
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #F4D78A 0%, #D4A933 50%, #B8901F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .2),
    0 6px 14px rgba(212, 169, 51, .4);
  position: relative;
}
.grado {
  font-family: 'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 6vw, 48px);
  color: var(--ccpl-dorado);
  font-weight: 400;
  margin-left: -6px;
  align-self: flex-start;
  margin-top: .4em;
}
.aniv-text {
  font-size: clamp(20px, 4.5vw, 36px);
  color: #fff;
  letter-spacing: .15em;
  font-weight: var(--fw-bold);
  align-self: center;
  margin-left: var(--sp-3);
}

@media (max-width: 480px) {
  .franja-60-titulo {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* La regla nueva — mantener 60 y ° en línea aunque el padre sea columna */
  .num-grupo {
    display: inline-flex;
    align-items: baseline;
  }

  .aniv-text { margin-left: 0; margin-top: var(--sp-1); letter-spacing: .25em; }
}

.franja-60-sub {
  margin: 0;
  font-size: clamp(14px, 3vw, 17px);
  color: rgba(255, 255, 255, .92);
  letter-spacing: .02em;
}
.franja-60-sub strong {
  color: var(--ccpl-dorado);
  font-weight: var(--fw-bold);
  font-size: 1.15em;
}


/* ──────────────────────────────────────────────────────────────
   4. ATAJOS — sobreescribe acciones-strip / accion-item legacy
   ────────────────────────────────────────────────────────────── */
body.ccpl-tokens .acciones-strip {
  background: var(--ccpl-bg);
  padding: var(--sp-8) var(--sp-4);
}
body.ccpl-tokens .acciones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  body.ccpl-tokens .acciones-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
}

body.ccpl-tokens .accion-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ccpl-superficie);
  border: 1px solid var(--ccpl-borde);
  border-right: 1px solid var(--ccpl-borde);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-3);
  text-decoration: none;
  color: var(--ccpl-texto);
  box-shadow: var(--shadow-1);
  transition: var(--t-base);
  min-height: 120px;
}
body.ccpl-tokens .accion-item:hover {
  background: var(--ccpl-superficie);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--ccpl-verde-300);
}
body.ccpl-tokens .ai-icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--ccpl-verde-50);
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
body.ccpl-tokens .ai-icon-wrap .mi {
  font-size: 26px;
  color: var(--ccpl-verde-700);
}
body.ccpl-tokens .accion-item:hover .ai-icon-wrap {
  background: var(--ccpl-verde-300);
}
body.ccpl-tokens .accion-item:hover .ai-icon-wrap .mi {
  color: #fff;
}
body.ccpl-tokens .ai-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--ccpl-verde-900);
  text-transform: none;
  letter-spacing: 0;
}


/* ──────────────────────────────────────────────────────────────
   5. PULIDO POR SECCIÓN
   ────────────────────────────────────────────────────────────── */

/* 5.4 Ambientes — alternar fondo card par/impar */
body.ccpl-tokens #ambientes .amb-card:nth-child(even) {
  background: #fff;
  color: var(--ccpl-verde-900);
  border: 1px solid var(--ccpl-verde-300);
}
body.ccpl-tokens #ambientes .amb-card:nth-child(even) .amb-title,
body.ccpl-tokens #ambientes .amb-card:nth-child(even) .amb-text {
  color: var(--ccpl-verde-900);
}

/* CTA disponibilidad: fondo blanco + borde dorado para mejorar contraste */
body.ccpl-tokens #ambientes .amb-cta {
  background: #fff;
  color: var(--ccpl-verde-900);
  border: 2px solid var(--ccpl-dorado);
  font-weight: var(--fw-bold);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  transition: var(--t-base);
}
body.ccpl-tokens #ambientes .amb-cta:hover {
  background: var(--ccpl-dorado);
  color: var(--ccpl-verde-900);
  border-color: var(--ccpl-dorado);
}

/* 5.5 Tienda — emoji dentro de círculo claro */
body.ccpl-tokens #tienda .tienda-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--ccpl-verde-50);
  border-radius: 50%;
  font-size: 32px;
  margin: 0 auto var(--sp-3);
}
.tienda-eyebrow {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  color: var(--ccpl-dorado);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

/* 5.6 Guías del sistema — placeholder verde con play */
body.ccpl-tokens #videos .video-thumb .vt-img[src*="unsplash"],
body.ccpl-tokens #videos .video-thumb-placeholder {
  background: linear-gradient(135deg, var(--ccpl-verde-500), var(--ccpl-verde-900));
  position: relative;
}
.video-disclaimer {
  border-left: 3px solid var(--ccpl-dorado);
  background: rgba(212, 169, 51, .08);
  color: rgba(255, 255, 255, .92);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  margin-top: var(--sp-4);
  display: inline-block;
}

/* 5.1 Comunicados — placeholder institucional */
.comunicado-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, var(--ccpl-verde-50) 0%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid var(--ccpl-borde);
}
.comunicado-placeholder img {
  width: 38%;
  opacity: .35;
  filter: grayscale(40%);
}


/* ──────────────────────────────────────────────────────────────
   5.7 MÉTODOS DE PAGO — colores de marca (zClaude-74)
   ────────────────────────────────────────────────────────────── */
.pagos {
  max-width: 540px;
  margin: var(--sp-12) auto;
  padding: 0 var(--sp-4);
}
.pagos-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  color: var(--ccpl-verde-900);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h2);
}
.pagos-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--ccpl-verde-50);
  border-radius: var(--r-sm);
}
.pagos-icon .mi { font-size: 20px; color: var(--ccpl-verde-700); }

/* zClaude-75: defensivos contra cualquier regla mobile que pise */
.pagos-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-3);
}

.pago-card,
.pagos .pago-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--ccpl-superficie);
  border: 1px solid var(--ccpl-borde);
  border-left-width: 4px;
  box-shadow: var(--shadow-1);
  transition: var(--t-base);
  text-decoration: none;
  color: inherit;
}
.pago-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.pago-logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: -.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.pago-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  flex: 1;
}
.pago-marca {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ccpl-texto);
}
.pago-detalle {
  font-size: var(--fs-small);
  color: var(--ccpl-texto-2);
  font-variant-numeric: tabular-nums;
}

/* Marcas: borde izquierdo + color de logo */
.pago-yape  { border-left-color: #722F8E; }
.pago-yape  .pago-logo { background: linear-gradient(135deg, #8E3CB0, #5E1D78); }

.pago-plin  { border-left-color: #00BFA5; }
.pago-plin  .pago-logo { background: linear-gradient(135deg, #00D4B0, #009A85); }

.pago-bcp   { border-left-color: #002F6C; }
.pago-bcp   .pago-logo { background: linear-gradient(135deg, #0050AA, #002F6C); font-size: 13px; }

.pago-bn    { border-left-color: #B8901F; }
.pago-bn    .pago-logo { background: linear-gradient(135deg, #D4A933, #8B6914); font-size: 14px; }

@media (max-width: 480px) {
  .pago-card { padding: var(--sp-3); gap: var(--sp-3); }
  .pago-logo { width: 40px !important; height: 40px !important; font-size: 13px; }
  .pago-bcp .pago-logo,
  .pago-bn  .pago-logo { font-size: 11px; }
  .pago-marca { font-size: var(--fs-small); }
  .pago-detalle { font-size: var(--fs-tiny); }
}


/* ──────────────────────────────────────────────────────────────
   6. FOOTER INSTITUCIONAL
   ────────────────────────────────────────────────────────────── */
body.ccpl-tokens footer {
  background: var(--ccpl-verde-900);
  color: rgba(255, 255, 255, .9);
  padding: var(--sp-12) var(--sp-4) var(--sp-6);
  margin-top: var(--sp-16);
}
body.ccpl-tokens .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-8);
}
@media (max-width: 768px) {
  body.ccpl-tokens .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  body.ccpl-tokens .footer {
    padding-bottom: 96px; /* ~80px del bottom-nav + 16px de aire */
  }
}

/* 6.1 Bloque marca — logo + texto a la derecha (zClaude-74) */
body.ccpl-tokens .footer-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
body.ccpl-tokens .footer-brand .footer-logo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
  margin-bottom: 0;
}
body.ccpl-tokens .footer-brand-text { min-width: 0; flex: 1; }
body.ccpl-tokens .footer-brand .footer-name {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: #fff;
}
body.ccpl-tokens .footer-brand .footer-name strong {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
body.ccpl-tokens .footer-brand .footer-aniv {
  margin: var(--sp-3) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .75);
}
body.ccpl-tokens .footer-brand .aniv-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--fw-bold);
  background: linear-gradient(180deg, #F4D78A, #D4A933);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
body.ccpl-tokens .footer-brand .aniv-label {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .75);
}

body.ccpl-tokens footer h4 {
  font-family: var(--font-body);
  color: var(--ccpl-dorado);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--sp-3);
}
body.ccpl-tokens .footer-links a,
body.ccpl-tokens .footer-links span {
  display: block;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  margin: 0 0 var(--sp-2);
}
body.ccpl-tokens .footer-links a:hover { color: var(--ccpl-dorado); }

/* 6.2 Email roto → botón WhatsApp (zClaude-74) */
.footer-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: #25D366;
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: var(--fs-small);
  margin-top: var(--sp-3);
  transition: var(--t-fast);
}
.footer-wa-btn:hover { background: #1DA851; transform: translateY(-1px); }
.wa-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  flex-shrink: 0;
}
.footer-wa-btn strong { display: block; line-height: 1.2; }
.footer-wa-btn small { font-size: 11px; opacity: .9; display: block; }

body.ccpl-tokens .footer-social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
body.ccpl-tokens .footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border-radius: 50%;
}
body.ccpl-tokens .footer-social a:hover { background: var(--ccpl-dorado); }
body.ccpl-tokens .footer-social svg {
  width: 16px;
  height: 16px;
  fill: rgba(255, 255, 255, .85);
}

/* 6.3 Accesos / Legal: doble columna en mobile (zClaude-74) */
body.ccpl-tokens .footer-col-links a {
  display: block;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  margin: 0;
  padding: var(--sp-2) 0;
}
body.ccpl-tokens .footer-col-links a:hover { color: var(--ccpl-dorado); }

@media (max-width: 768px) {
  body.ccpl-tokens .footer-col-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sp-4);
  }
  body.ccpl-tokens .footer-col-links h4 {
    grid-column: 1 / -1;
  }
}

body.ccpl-tokens .footer-bottom {
  grid-column: 1 / -1;
  max-width: 1100px;
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  font-size: var(--fs-tiny);
  color: rgba(255, 255, 255, .6);
}
body.ccpl-tokens .footer-bottom p { margin: 0 0 var(--sp-2); }

/* 6.4 Crédito de creadores estilizado (zClaude-74) */
.footer-credit {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px dashed rgba(212, 169, 51, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.credit-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-tiny);
  color: rgba(255, 255, 255, .7);
}
.credit-tag {
  font-family: 'Courier New', monospace;
  background: rgba(212, 169, 51, .15);
  color: var(--ccpl-dorado);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
}
.credit-line a {
  color: var(--ccpl-dorado);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--t-fast);
}
.credit-line a:hover { border-bottom-color: var(--ccpl-dorado); }
.credit-brand span {
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .4);
}
.credit-brand strong {
  font-size: var(--fs-tiny);
  color: var(--ccpl-dorado);
  letter-spacing: 1px;
}