/* ============================================================
   TARJETAS DE SERVICIO + ICONOS ANIMADOS · Tintorería La Puebla
   Compartido por index.html, servicios.html y páginas de servicio.

   Temas de icono por contexto:
   · .on-dark  → trazos claros, acento amarillo (sección oscura del index)
   · .on-light → trazos tinta, acento blanco (páginas sobre amarillo)
   ============================================================ */

.on-dark  { --icA: #f2f4ff; --icB: #FFD000; }
.on-light { --icA: #0a0a0f; --icB: #ffffff; }
.on-paper { --icA: #0a0a0f; --icB: #FFD000; }   /* sección blanca: símbolos oscuros, acento amarillo */

.ic { display: block; }
.ic .st     { stroke: var(--icA); fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ic .st-acc { stroke: var(--icB); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ic .fl     { fill: var(--icA); }
.ic .fl-acc { fill: var(--icB); }

/* ============================================================
   GRID DE TARJETAS
   ============================================================ */
.cards { display: grid; gap: clamp(.7rem, 1.8vw, 1.15rem); }
.cards--compact { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.cards--roomy   { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 18px;
  border: 1px solid transparent;
  text-align: left;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease);
}
.card .ic { width: clamp(56px, 7vw, 72px); height: auto; margin-bottom: .15rem; }
.cards--roomy .card { padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.cards--roomy .card .ic { width: clamp(76px, 9vw, 100px); }

.card h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cards--roomy .card h3 { font-size: 1.15rem; }
.card p { font-family: var(--font-ui); font-size: .85rem; line-height: 1.5; }
.cards--roomy .card p { font-size: .95rem; }

.card__go {
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card__go::after { content: "→"; transition: transform .3s var(--ease); }
.card:hover .card__go::after { transform: translateX(4px); }

/* Tema oscuro (index → sección servicios) */
.on-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: #f5f5f5; }
.on-dark .card p { color: rgba(255,255,255,.62); }
.on-dark .card__go { color: #FFD000; }
.on-dark .card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.085);
  border-color: rgba(255,208,0,.5);
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
}

/* Tema claro (hub sobre amarillo) · glass como la tarjeta de reseña */
.on-light .card {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  color: #0a0a0f;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 14px 34px rgba(10,10,15,.08);
}
.on-light .card p { color: rgba(10,10,15,.66); }
.on-light .card__go { color: #0a0a0f; }
.on-light .card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.26);
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 22px 48px rgba(10,10,15,.16);
}

/* Tema papel (sección blanca del index) · tarjetas claras, letras y símbolos oscuros */
.on-paper .card {
  background: #f4f4f2;
  border-color: rgba(10,10,15,.08);
  color: #0a0a0f;
  box-shadow: 0 10px 28px rgba(10,10,15,.05);
}
.on-paper .card p { color: rgba(10,10,15,.62); }
.on-paper .card__go { color: #0a0a0f; }
.on-paper .card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  border-color: rgba(255,208,0,.9);
  box-shadow: 0 20px 44px rgba(10,10,15,.14);
}
.on-paper .cards__all { color: #0a0a0f; }
.on-paper .contactline__addr { color: rgba(10,10,15,.6); }

/* Enlace "ver todos" */
.cards__all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFD000;
}
.cards__all::after { content: "→"; transition: transform .3s var(--ease); }
.cards__all:hover::after { transform: translateX(4px); }

/* ============================================================
   ANIMACIONES DE ICONO
   · Siempre activas (escritorio y táctil), rápidas y visibles.
   · Además los iconos "cuelgan": reaccionan al scroll y al ratón
     vía --swing (assets/swing.js) con retorno elástico de péndulo.
   ============================================================ */
.card .ic, .icon-stage .ic {
  transform: rotate(var(--swing, 0deg));   /* el ángulo lo mueve swing.js (rAF) frame a frame */
  transform-origin: 50% 8%;
  will-change: transform;
}

/* Trajes · percha que se balancea */
.ic-swing { transform-origin: 60px 14px; animation: icSwing 1.4s ease-in-out infinite alternate; }
@keyframes icSwing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* Vestidos · vaivén con la falda en contrafase */
.ic-sway { transform-origin: 60px 24px; animation: icSway 1.6s ease-in-out infinite alternate; }
@keyframes icSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.ic-hem { transform-origin: 60px 58px; animation: icHem 1.6s ease-in-out infinite alternate-reverse; }
@keyframes icHem { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* Abrigos · mecido suave + bufanda ondeando */
.ic-bob { animation: icBob 1.7s ease-in-out infinite alternate; }
@keyframes icBob { from { transform: translateY(-2.5px); } to { transform: translateY(3px); } }
.ic-scarf { transform-origin: 57px 46px; animation: icScarf 1.2s ease-in-out infinite alternate; }
@keyframes icScarf { from { transform: rotate(-11deg); } to { transform: rotate(12deg); } }

/* Alfombras · alfombra voladora + sombra + destellos */
.ic-fly { animation: icFly 1.8s ease-in-out infinite alternate; }
@keyframes icFly { from { transform: translateY(-6px) rotate(-2.5deg); } to { transform: translateY(6px) rotate(2.5deg); } }
.ic-shadow { transform-origin: 60px 104px; animation: icShadow 1.8s ease-in-out infinite alternate; }
@keyframes icShadow { from { transform: scaleX(.78); opacity: .32; } to { transform: scaleX(1.1); opacity: .15; } }
.ic-tw { transform-box: fill-box; transform-origin: center; animation: icTwinkle 1.1s ease-in-out infinite; }
.ic-tw--2 { animation-delay: .45s; }
@keyframes icTwinkle { 0%, 100% { opacity: .15; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }

/* Edredones · respiración esponjosa + plumita */
.ic-breathe { transform-origin: 60px 78px; animation: icBreathe 1.5s ease-in-out infinite alternate; }
@keyframes icBreathe { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.07) scaleX(.985); } }
.ic-feather { transform-box: fill-box; transform-origin: center; animation: icFeather 2.2s ease-in-out infinite alternate; }
@keyframes icFeather { from { transform: translate(-5px, 9px) rotate(-16deg); } to { transform: translate(5px, -8px) rotate(12deg); } }

/* ============================================================
   REVEAL AL HACER SCROLL (acompaña la lectura)
   ============================================================ */
.sreveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}
.sreveal.in-view { opacity: 1; transform: none; }

/* ============================================================
   MINI-BLOQUE DE CONTACTO (sección oscura del index)
   ============================================================ */
.contactline {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.contactline__addr {
  font-family: var(--font-label);
  font-weight: 300;
  letter-spacing: .14em;
  font-size: .8rem;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  background: #FFD000;
  color: #0a0a0f;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-call:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255,208,0,.35); }
.btn-call svg { width: 17px; height: 17px; }

/* ============================================================
   ACCESIBILIDAD · reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sreveal { opacity: 1; transform: none; transition: none; }
  .anim { animation: none !important; }
  .card .ic, .icon-stage .ic { transition: none; transform: none; }
}