/* =====================================================================
   OROVERDE JOYAS — PROPUESTA VISUAL
   Banda de garantias (.trust-strip) — DIRECCION "SELLOS DE GARANTIA"
   ---------------------------------------------------------------------
   Idea: cada garantia deja de ser un iconito y se convierte en un SELLO
   circular grabado — disco de metal oscuro, doble aro dorado y una orla
   de microtrazos (canto moleteado de moneda / lacre de casa) girando muy
   despacio alrededor. La etiqueta baja al pie del sello, en versalitas
   anchas, separada por un filete dorado. Lee como una acreditacion, no
   como una fila de iconos de ecommerce.

   Restricciones respetadas:
   - Cero cambios de DOM. Todo se construye con ::before / ::after sobre
     .trust-strip, .trust-strip__item y su <span>. El <svg> solo se
     re-escala; no se le pide nada que no pueda dar.
   - Cero !important. Este archivo se carga DESPUES de css/styles.css y
     gana por orden con la misma especificidad.
   - Cero imagenes, cero fuentes nuevas, cero filter / backdrop-filter.
     Todo son gradientes y sombras; el movimiento es solo `rotate` sobre
     elementos de ~150px, que el compositor resuelve en GPU.
   - Paleta 100% del sistema existente (oro / esmeralda / marfil).

   Aplica tambien a /sobre, que usa la misma banda: es deseable, la
   acreditacion debe verse igual en todo el sitio.

   Contraste verificado (WCAG 2.1 AA, texto normal, exige 4.5:1):
   - Etiqueta #c8c1b3 (--ivory-soft) sobre el fondo real de la banda
     (#0a0a0a → #0d0c0a → #080807) = 10.8:1 · 11.1:1
   - Peor caso de la banda, zona inferior con el velo esmeralda (#0b1610)
     = 10.3:1
   - Etiqueta en hover #f0ebe1 (--ivory) sobre lo mismo = 14.9:1
   - Icono de trazo #c5a465 sobre el disco #0f0d0a = 8.2:1 (decorativo y
     aria-hidden, pero pasa de sobra el 3:1 de graficos)
   La etiqueta sube de rgba(245,241,232,.6) (6.6:1) a un color solido:
   el rediseno MEJORA el contraste actual, no lo empeora.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. EL HUECO NEGRO DE /coleccion
   .collection-page traia padding-bottom: 10rem (160px) y encima la banda
   abria con otros 2.6rem: ~200px de negro muerto sin nada que mirar.
   Se recorta el colchon de la rejilla y se traslada ese aire ADENTRO de
   la banda, donde si trabaja (respira alrededor de los sellos).
   .collection-page solo existe en coleccion.html — no afecta a nada mas.
   --------------------------------------------------------------------- */
.collection-page {
  padding-bottom: 4rem;
}


/* ---------------------------------------------------------------------
   1. LA BANDA — placa de acreditacion
   Doble filete arriba y abajo (regla gruesa + hairline interior que se
   desvanece por los lados, como el borde de un certificado grabado),
   un halo dorado que cae desde arriba y un velo esmeralda muy tenue
   al pie para amarrarla con la marca.
   --------------------------------------------------------------------- */
.trust-strip {
  /* medidas del sello, unicas: las media queries solo tocan estas dos */
  --seal: 118px;   /* diametro del disco */
  --orla: 148px;   /* diametro de la orla moleteada exterior */

  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0 1.5rem;

  padding: 5rem 5vw 5.4rem;

  border-top: 1px solid rgba(197, 164, 101, 0.30);
  border-bottom: 1px solid rgba(197, 164, 101, 0.30);

  background-color: #0a0a0a;
  background-image:
    /* 1 · hairline interior superior (se apaga en los extremos) */
    linear-gradient(90deg, rgba(197, 164, 101, 0) 0%, rgba(197, 164, 101, 0.15) 14%, rgba(197, 164, 101, 0.15) 86%, rgba(197, 164, 101, 0) 100%),
    /* 2 · hairline interior inferior */
    linear-gradient(90deg, rgba(197, 164, 101, 0) 0%, rgba(197, 164, 101, 0.15) 14%, rgba(197, 164, 101, 0.15) 86%, rgba(197, 164, 101, 0) 100%),
    /* 3 · halo dorado que entra desde el filete de arriba */
    radial-gradient(115% 130% at 50% 0%, rgba(197, 164, 101, 0.055) 0%, rgba(197, 164, 101, 0.018) 34%, rgba(197, 164, 101, 0) 66%),
    /* 4 · velo esmeralda al pie */
    radial-gradient(78% 96% at 50% 122%, rgba(15, 81, 50, 0.14) 0%, rgba(15, 81, 50, 0) 60%),
    /* 5 · base: arranca exactamente en el negro de la pagina, sin costura */
    linear-gradient(180deg, #0a0a0a 0%, #0d0c0a 46%, #080807 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 6px, 0 calc(100% - 6px), 50% 0, 50% 100%, 0 0;
}

/* Rombos de orfebreria montados sobre los filetes: marca de casa que
   "cose" la banda al resto de la pagina y cierra el hueco de arriba. */
.trust-strip::before,
.trust-strip::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  translate: -50% -50%;
  rotate: 45deg;
  border: 1px solid rgba(197, 164, 101, 0.55);
  z-index: 3;
  pointer-events: none;
}
.trust-strip::before { top: 0;    background: #0a0a0a; }
.trust-strip::after  { top: 100%; background: #080807; }


/* ---------------------------------------------------------------------
   2. EL ITEM — columna sello + etiqueta
   Se resetea la tipografia heredada; toda la etiqueta se controla desde
   el <span> para poder darle su propio filete y su propio remate.
   --------------------------------------------------------------------- */
.trust-strip__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ivory-soft, #c8c1b3);
}


/* 2.1 · EL DISCO — metal grabado.
   Doble aro: el exterior es el `border`, el interior es un corte duro del
   primer gradiente. El punto de luz esta descentrado a las 10 en punto,
   asi la rotacion lentisima lo pasea por el canto: el metal "vive". */
.trust-strip__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--seal) / -2);   /* centrado por margin: dejo
                                            transform/translate libre */
  width: var(--seal);
  height: var(--seal);
  border-radius: 50%;
  border: 1px solid rgba(197, 164, 101, 0.45);
  z-index: 0;
  pointer-events: none;
  background:
    /* aro interior grabado */
    radial-gradient(circle closest-side at 50% 50%,
      rgba(197, 164, 101, 0) calc(100% - 9px),
      rgba(197, 164, 101, 0.22) calc(100% - 9px),
      rgba(197, 164, 101, 0.22) calc(100% - 8px),
      rgba(197, 164, 101, 0) calc(100% - 8px)),
    /* punto de luz del metal */
    radial-gradient(70% 70% at 33% 25%, rgba(224, 192, 137, 0.16) 0%, rgba(224, 192, 137, 0) 70%),
    /* cuerpo del disco */
    radial-gradient(circle closest-side at 50% 50%, #16130e 0%, #0f0d0a 60%, #0a0908 100%);
  box-shadow:
    inset 0 12px 24px rgba(0, 0, 0, 0.55),
    inset 0 -6px 16px rgba(197, 164, 101, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.5);
  animation: ov-sello-luz 64s linear infinite;
  transition:
    translate 0.6s var(--ease),
    border-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}


/* 2.2 · LA ORLA — canto moleteado.
   ~80 microtrazos en conic-gradient, recortados a un anillo de 3px con
   mask. A este tamano lee como microtipografia grabada alrededor del
   sello (que es lo unico que se puede hacer sin tocar el DOM: el texto
   curvo real exigiria un <textPath> nuevo).
   Gira en sentido contrario al disco: contraste de orfebreria. */
.trust-strip__item::after {
  content: '';
  position: absolute;
  top: calc((var(--seal) - var(--orla)) / 2);
  left: 50%;
  margin-left: calc(var(--orla) / -2);
  width: var(--orla);
  height: var(--orla);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-conic-gradient(from 0deg,
    rgba(197, 164, 101, 0.62) 0deg 0.95deg,
    rgba(197, 164, 101, 0) 0.95deg 4.5deg);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%,
    transparent calc(100% - 5px), #000 calc(100% - 5px),
    #000 calc(100% - 2px), transparent calc(100% - 2px));
          mask-image: radial-gradient(circle closest-side at 50% 50%,
    transparent calc(100% - 5px), #000 calc(100% - 5px),
    #000 calc(100% - 2px), transparent calc(100% - 2px));
  animation: ov-sello-orla 34s linear infinite;
  transition: opacity 0.55s var(--ease), scale 0.55s var(--ease);
}

/* Seguro: sin soporte de mask la orla se pintaria como un disco solido de
   trazos encima del sello. En ese caso simplemente no existe. */
@supports not ((mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000))) {
  .trust-strip__item::after { display: none; }
}

/* Desfase por sello: los cuatro nunca estan en la misma pose. */
.trust-strip__item:nth-child(1)::after { animation-delay:  -0s; }
.trust-strip__item:nth-child(2)::after { animation-delay:  -8s; }
.trust-strip__item:nth-child(3)::after { animation-delay: -17s; }
.trust-strip__item:nth-child(4)::after { animation-delay: -25s; }
.trust-strip__item:nth-child(1)::before { animation-delay:  -0s; }
.trust-strip__item:nth-child(2)::before { animation-delay: -16s; }
.trust-strip__item:nth-child(3)::before { animation-delay: -32s; }
.trust-strip__item:nth-child(4)::before { animation-delay: -48s; }


/* 2.3 · EL ICONO.
   Truco sin DOM: el <svg> ocupa TODO el disco y se le mete un padding
   grande; el viewBox se reescala solo y el glifo queda centrado al
   milimetro sobre el sello, sin numeros magicos. El trazo se afina para
   que parezca buril y no marcador. */
.trust-strip__item svg {
  position: relative;
  z-index: 2;
  width: var(--seal);
  height: var(--seal);
  padding: calc(var(--seal) * 0.335);
  fill: none;
  stroke: var(--gold, #c5a465);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transition: stroke 0.5s var(--ease), scale 0.6s var(--ease);
}


/* 2.4 · LA ETIQUETA — al pie del sello, en versalitas anchas.
   El ancho va en `em` (nunca en px) y el tracking es el mismo en todos
   los cortes, de modo que la caja mide SIEMPRE 10.8 anchos de caracter:
   - mas ancha que la palabra mas larga ("CERTIFICADO", 9.9em) → nunca
     desborda ni parte una palabra;
   - mas estrecha que la cadena mas corta ("PAGO PROTEGIDO", 12em) →
     los cuatro rotulos caen siempre en DOS lineas, en cualquier
     breakpoint y aunque la fuente entre por fallback.
   Ese margen del ~10% por ambos lados es lo que mantiene la fila
   alineada como una hilera de acreditaciones y no como texto suelto.
   Color solido en vez de rgba(.6): el contraste sube de 6.6:1 a 11.8:1. */
.trust-strip__item span {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 10.8em;
  min-height: calc(1.05rem + 3.4em);   /* reserva 2 lineas: los punzones
                                          de los 4 sellos se alinean */
  margin: 1.55rem auto 0;
  padding-top: 1.05rem;
  font-family: var(--sans);
  font-size: 0.645rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-soft, #c8c1b3);
  transition: color 0.5s var(--ease);
}

/* Filete dorado que separa el sello de su rotulo. Se abre en hover. */
.trust-strip__item span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 22px;
  height: 1px;
  opacity: 0.7;
  background: linear-gradient(90deg,
    rgba(197, 164, 101, 0) 0%,
    rgba(197, 164, 101, 0.85) 50%,
    rgba(197, 164, 101, 0) 100%);
  transition: width 0.55s var(--ease), opacity 0.55s var(--ease);
}

/* Punzon de cierre: rombo minusculo al pie de cada acreditacion.
   Como todos los rotulos ocupan dos lineas, los cuatro se alinean. */
.trust-strip__item span::after {
  content: '';
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  width: 5px;
  height: 5px;
  translate: -50% 0;
  rotate: 45deg;
  border: 1px solid rgba(197, 164, 101, 0.5);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease), translate 0.55s var(--ease);
}


/* ---------------------------------------------------------------------
   3. HOVER — el sello se levanta y se enciende
   El cliente dijo que la banda era "muy estatica": en reposo hay un giro
   lentisimo (vida, no ruido); al pasar por encima el sello se despega,
   florece un halo esmeralda, la orla se abre y el rotulo se aclara.
   Todo son propiedades compuestas (translate / scale / opacity) o
   color / box-shadow: ni un reflow.
   --------------------------------------------------------------------- */
@media (hover: hover) {
  .trust-strip__item:hover::before {
    translate: 0 -6px;
    border-color: rgba(197, 164, 101, 0.72);
    box-shadow:
      inset 0 12px 24px rgba(0, 0, 0, 0.5),
      inset 0 -6px 18px rgba(224, 192, 137, 0.10),
      0 22px 44px rgba(0, 0, 0, 0.55),
      0 0 34px rgba(15, 81, 50, 0.55);   /* halo esmeralda */
  }

  .trust-strip__item:hover::after {
    opacity: 0.95;
    scale: 1.04;
  }

  .trust-strip__item:hover svg {
    stroke: var(--gold-bright, #e0c089);
    scale: 1.07;
  }

  .trust-strip__item:hover span {
    color: var(--ivory, #f0ebe1);
  }

  .trust-strip__item:hover span::before {
    width: 44px;
    opacity: 1;
  }

  .trust-strip__item:hover span::after {
    opacity: 0.9;
    translate: -50% -3px;
  }
}


/* ---------------------------------------------------------------------
   4. KEYFRAMES
   Se usa la propiedad `rotate` (no transform) para no pisar el
   translate / scale del hover. Si el navegador no la soporta, el sello
   simplemente queda quieto: degradacion limpia.
   --------------------------------------------------------------------- */
@keyframes ov-sello-orla { from { rotate: 0deg; }    to { rotate: 360deg; } }
@keyframes ov-sello-luz  { from { rotate: 0deg; }    to { rotate: -360deg; } }


/* ---------------------------------------------------------------------
   5. RESPONSIVE — 1440 / 1024 / 768 / 390
   Solo cambian --seal, --orla, el aire y (abajo) el numero de columnas.
   La orla nunca supera el ancho de columna en ningun corte.
   --------------------------------------------------------------------- */

/* 1024–1200: el sello baja un punto para no comerse el aire lateral */
@media (max-width: 1200px) {
  .trust-strip {
    --seal: 106px;
    --orla: 134px;
    padding: 4.4rem 5vw 4.8rem;
  }
}

/* 768–900: 4 columnas todavia, sellos mas compactos
   (768px → columna de 172px, orla de 118px: sobra sitio) */
@media (max-width: 900px) {
  .trust-strip {
    --seal: 94px;
    --orla: 118px;
    gap: 0 1rem;
  }
  /* Solo cambia el cuerpo: el tracking y el max-width en `em` se
     mantienen para no romper el corte en dos lineas. */
  .trust-strip__item span {
    font-size: 0.6rem;
    margin-top: 1.2rem;
    padding-top: 0.9rem;
  }
}

/* < 700: 2 x 2. Gana espacio y el sello vuelve a crecer.
   Sobrescribe el @media (max-width:600px) de styles.css por orden.
   390px → columna de ~167px con orla de 120px: sin desborde.
   Row-gap de 3.2rem: la orla de la fila 2 asoma 13px por arriba y el
   punzon de la fila 1 baja ~19px → quedan ~19px de aire limpio. */
@media (max-width: 699px) {
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem 1rem;
    padding: 3.8rem 5vw 4.2rem;
    --seal: 96px;
    --orla: 120px;
  }
  .collection-page {
    padding-bottom: 2.6rem;
  }
}

/* 390 y menos: ultimo escalon, margen de sobra contra el desborde */
@media (max-width: 400px) {
  .trust-strip {
    --seal: 84px;
    --orla: 106px;
    gap: 2.8rem 0.6rem;
    padding: 3.2rem 5vw 3.6rem;
  }
  .trust-strip__item span {
    font-size: 0.575rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
  }
}


/* ---------------------------------------------------------------------
   6. PREFERS-REDUCED-MOTION
   Se apaga TODO el movimiento propio: los dos giros infinitos y los
   desplazamientos / escalados del hover. Se conservan solo los cambios
   de color y de opacidad, que no producen sensacion de movimiento y
   siguen dando feedback de interaccion.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .trust-strip__item::before,
  .trust-strip__item::after {
    animation: none;
    rotate: none;
  }
  .trust-strip__item::before,
  .trust-strip__item::after,
  .trust-strip__item svg,
  .trust-strip__item span::before,
  .trust-strip__item span::after {
    transition-property: opacity, color, stroke, border-color, box-shadow;
  }
  .trust-strip__item:hover::before  { translate: none; }
  .trust-strip__item:hover::after   { scale: none; }
  .trust-strip__item:hover svg      { scale: none; }
  .trust-strip__item:hover span::before { width: 22px; }
  .trust-strip__item:hover span::after  { translate: -50% 0; }
}

/* ============================================================================
   INJERTOS DEL PANEL DE JUECES — 2026-08-02
   Cuatro correcciones concretas que el juez marco sobre esta propuesta, tomando
   lo que resolvian mejor las otras dos.
   ========================================================================= */

/* 1 · ROTULO LEGIBLE EN MOVIL.
   La propuesta bajaba a 0.6rem (9,6px) y a 0.575rem (9,2px) en los dos saltos
   moviles. El texto mas pequeno que ya usa el sitio son 10,56px, asi que esto
   quedaba por debajo de todo lo demas. Se pone piso en 0.7rem (11,2px) y se
   afloja el tracking, que a ese cuerpo es lo que de verdad ahoga la palabra. */
@media (max-width: 699px) {
  .trust-strip__item span { font-size: 0.7rem; letter-spacing: 0.18em; }
}
@media (max-width: 420px) {
  .trust-strip__item span { font-size: 0.7rem; letter-spacing: 0.16em; }
}

/* 2 · SELLOS FLUIDOS, NO A SALTOS.
   --seal y --orla iban en px fijos con cuatro escalones; entre escalon y escalon
   (un iPad de 820px, por ejemplo) los sellos se quedaban pequenos con demasiado
   aire al lado. Con clamp() escalan de forma continua. */
.trust-strip { --seal: clamp(84px, 8.6vw, 118px); --orla: clamp(108px, 10.8vw, 148px); }

/* 3 · LA BANDA SE ANCLA A LA MISMA RETICULA QUE LOS PRODUCTOS.
   Con 5vw pelado, en una pantalla de 1920 los cuatro sellos se abrian mas que la
   rejilla de la coleccion y la banda se leia descolgada del resto de la pagina. */
.trust-strip { padding-inline: max(5vw, calc((100% - 1400px) / 2)); }

/* 4 · UN SOLO VALOR PARA EL HUECO NEGRO DE ARRIBA.
   Estaba declarado dos veces (4rem y luego 2.6rem dentro de una media query), lo
   que obliga a mantener dos numeros sincronizados. Un clamp y se acabo. */
.collection-page { padding-bottom: clamp(3rem, 6vw, 5rem); }