/* Componentes: íconos, botones, chips, tarjetas bento, píldoras con flecha. */

/* Íconos recoloreables por máscara (heredan currentColor) */
.icon{
  display:inline-block; flex:none; width:1.2em; height:1.2em; background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
}
.icon-phone{ --i:url(/assets/icons/ui/phone.svg); }
.icon-whatsapp{ --i:url(/assets/icons/platforms/whatsapp.svg); }
.icon-facebook{ --i:url(/assets/icons/platforms/facebook.svg); }
.icon-pin{ --i:url(/assets/icons/ui/map-pin.svg); }
.icon-clock{ --i:url(/assets/icons/ui/clock.svg); }
.icon-arrow{ --i:url(/assets/icons/ui/arrow-right.svg); }
.icon-bone{ --i:url(/assets/icons/ui/bone.svg); }
.icon-star{ --i:url(/assets/icons/ui/star.svg); }

/* Botones — Llamar y WhatsApp comparten forma y hover; solo cambia el color obligatorio de cada uno */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:48px; padding:.85em 1.4em; border-radius:var(--btn-radius);
  font:600 1rem/1 var(--font-text); white-space:nowrap; text-decoration:none; border:0; cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-3); }
.btn:active{ transform:translateY(0); }
.btn__txt strong{ font-weight:700; letter-spacing:.01em; }
.btn-call{ background:var(--acento); color:var(--acento-contraste); }
.btn-call:hover{ background:var(--acento-oscuro); }
.btn-whatsapp{ background:var(--wa-btn); color:var(--white); }
.btn-whatsapp:hover{ background:var(--wa-btn-dark); }
.btn-outline{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Sobre fondos oscuros, "Llamar" pasa a claro para no perderse (sigue siendo el botón de acento) */
.band--navy .btn-call, .tile--dark .btn-call{ background:var(--white); color:var(--navy); }
.band--navy .btn-call:hover, .tile--dark .btn-call:hover{ background:var(--mist); }

/* Píldora con círculo-flecha */
.pill-arrow{
  display:inline-flex; align-items:center; gap:.9em; padding:.35em .35em .35em 1.2em;
  background:var(--navy); color:var(--white); border-radius:var(--radius-pill);
  font-weight:600; font-size:.95rem; text-decoration:none; min-height:44px;
  transition:background-color .2s ease, transform .25s var(--ease-out);
}
.pill-arrow__dot{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--white); color:var(--navy); transition:transform .25s var(--ease-out);
}
.pill-arrow__dot .icon{ width:16px; height:16px; transform:rotate(-45deg); }
.pill-arrow:hover{ background:var(--steel-deep); }
.pill-arrow:hover .pill-arrow__dot{ transform:rotate(45deg); }
.pill-arrow--light{ background:var(--white); color:var(--navy); }
.pill-arrow--light .pill-arrow__dot{ background:var(--navy); color:var(--white); }
.pill-arrow--light:hover{ background:var(--mist); }

/* Tarjetas bento */
.tile{
  position:relative; overflow:hidden; background:var(--white); color:var(--ink);
  border-radius:var(--radius-tile); padding:clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  box-shadow:var(--shadow-1);
}
.tile--mist{ background:var(--mist); box-shadow:none; }
.tile--paper{ background:var(--paper); box-shadow:none; }
.tile--ice{ background:var(--ice); box-shadow:none; }
.tile--dark{ background:var(--navy); color:var(--on-navy); box-shadow:var(--shadow-3); }
.tile--dark h1,.tile--dark h2,.tile--dark h3,.tile--dark h4{ color:var(--on-navy); }
.tile--dark p{ color:var(--on-navy-muted); }
.tile--glass{
  background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-2);
}
.tile--link{ display:block; text-decoration:none; color:inherit; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.tile--link:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); }

.bento{ display:grid; gap:14px; grid-template-columns:repeat(12, minmax(0, 1fr)); }
.bento > *{ grid-column:span 12; min-width:0; }
@media (min-width:760px){
  .bento .span-4{ grid-column:span 4; } .bento .span-5{ grid-column:span 5; } .bento .span-6{ grid-column:span 6; }
  .bento .span-7{ grid-column:span 7; } .bento .span-8{ grid-column:span 8; }
}

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:.5em; padding:.45em .9em; border-radius:var(--radius-pill);
  background:var(--mist); color:var(--navy); font-size:.85rem; font-weight:500; line-height:1.2;
}
.chip strong{ font-weight:700; letter-spacing:.02em; }
.chip__label{ color:var(--ink-muted); }
.chip--dark{ background:rgba(255,255,255,.14); color:var(--on-navy); }
.chip--glass{ background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.cedulas{ display:flex; flex-wrap:wrap; gap:.5rem; }
.band--navy .chip, .tile--dark .chip{ background:rgba(255,255,255,.14); color:var(--on-navy); }
.tile--dark .chip__label, .band--navy .chip__label{ color:var(--on-navy-muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:1rem;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-deep);
}
.eyebrow::before{ content:""; width:28px; height:1.5px; background:currentColor; }
.band--navy .eyebrow, .tile--dark .eyebrow{ color:var(--on-navy-muted); }

/* Íconos de plataformas/redes (siempre con su ícono real) */
.socials{ display:flex; gap:.5rem; }
.chip-ico{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--white); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background-color .2s ease, transform .25s var(--ease-out);
}
.chip-ico:hover{ background:var(--mist); transform:translateY(-2px); }
.chip-ico img{ width:20px; height:20px; }
.chip-ico .icon{ width:20px; height:20px; }
.band--navy .chip-ico{ background:rgba(255,255,255,.12); color:var(--white); box-shadow:none; }
.band--navy .chip-ico:hover{ background:rgba(255,255,255,.22); }

/* Lista numerada con líneas finas (01 / 02 ...) */
.index-list{ border-top:1.5px solid var(--navy); }
.index-list li{
  display:grid; grid-template-columns:3.2rem 1fr auto; gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1.5px solid var(--line);
}
.index-list__n{ font:700 1.6rem/1 var(--font-display); color:var(--navy); }

/* Teléfono/dirección como dato de contacto (siempre con su ícono) */
.contact-link{ display:inline-flex; align-items:center; gap:.6em; color:inherit; text-decoration:none; font-weight:500; }
.contact-link:hover{ text-decoration:underline; }

/* WhatsApp flotante: solo ícono, esquina inferior derecha, todas las páginas */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:80; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; background:var(--wa-btn); color:var(--white); box-shadow:var(--shadow-4);
  transition:transform .2s var(--ease-out);
}
.wa-float .icon{ width:32px; height:32px; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float:focus-visible{ outline:2.5px solid var(--navy); outline-offset:3px; }
.wa-float:hover{ background:var(--wa-btn-dark); }
@media (max-width:600px){ .wa-float{ width:52px; height:52px; right:16px; bottom:16px; } .wa-float .icon{ width:28px; height:28px; } }
@media (prefers-reduced-motion: reduce){ .btn,.btn:hover,.tile--link:hover,.wa-float:hover{ transform:none; } }

/* Foco legible sobre tarjetas oscuras (WCAG 1.4.11) y objetivos táctiles >=44px */
.tile--dark :focus-visible{ outline-color:var(--on-navy); }

/* Calificación cualitativa: 5 estrellas rellenas + frase (sin cifra: menos de 50 opiniones en total) */
.rating{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .7rem; }
.rating__stars{ display:inline-flex; gap:2px; color:var(--star-yellow); }
.rating__stars .icon{ width:20px; height:20px; }
.rating__txt{ font-size:.92rem; font-weight:500; color:var(--ink-muted); }
.band--navy .rating__txt{ color:var(--on-navy-muted); }