/* ==========================================================
   Ibarra House Body Shop — components.css
   Íconos, botones, badges, tiles del mosaico, media con respaldo,
   header, barra fija móvil, menú overlay, acordeón, comparador
   antes/después, tarjetas de TikTok
   ========================================================== */

/* ---------- Íconos ---------- */
.ih-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ih-i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -.2em;
}

/* ---------- Botones ---------- */
.ih-btn {
  --b-bg: var(--ih-n3);
  --b-fg: var(--ih-text);
  --b-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 56px;
  padding: .85rem 1.25rem .85rem 1.4rem;
  border-radius: var(--ih-radius-sm);
  border: 1px solid var(--b-bd);
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--ih-font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .25s var(--ih-ease), color .25s var(--ih-ease), border-color .25s var(--ih-ease), transform .2s var(--ih-ease);
}
.ih-btn .ih-i { width: 1.35rem; height: 1.35rem; transition: transform .3s var(--ih-ease); }
.ih-btn:hover .ih-i { transform: translate(2px, -2px); }
.ih-btn:active { transform: scale(.985); }
.ih-btn::after {
  /* destello al pasar el cursor */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ih-ease);
}
.ih-btn:hover::after { transform: translateX(120%); }

.ih-btn--red { --b-bg: var(--ih-red); --b-fg: #fff; }
.ih-btn--red:hover { --b-bg: var(--ih-red-hot); color: #fff; }
.ih-btn--ghost { --b-bg: rgba(255, 255, 255, .06); --b-bd: rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ih-btn--ghost:hover { --b-bg: #fff; --b-fg: #000; color: #000; }
.ih-btn--dark { --b-bg: var(--ih-n1); }
.ih-btn--dark:hover { --b-bg: var(--ih-n4); color: #fff; }
.ih-btn--sm { min-height: 44px; padding: .55rem .9rem .55rem 1rem; font-size: .975rem; gap: .75rem; }
.ih-btn--block { width: 100%; }

.ih-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Enlace con subrayado de acento */
.ih-link {
  color: var(--ih-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ih-red);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.ih-link:hover { color: var(--ih-red-hot); }

/* ---------- Badge de ícono (cuadro de acento) ---------- */
.ih-badge {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--ih-red);
  color: #fff;
  flex: none;
}
.ih-badge .ih-i { width: 24px; height: 24px; }
.ih-badge--sm { width: 36px; height: 36px; border-radius: 8px; }
.ih-badge--sm .ih-i { width: 20px; height: 20px; }
.ih-badge--dark { background: var(--ih-n4); }

/* ---------- Media con respaldo ----------
   Si la foto todavía no existe, se ve una textura de fibra de carbono
   con brillo rojo, en lugar de un hueco vacío. */
.ih-media {
  position: relative;
  overflow: hidden;
  background: var(--ih-carbon);
  background-color: #131315;
  background-size: 20px 20px;
}
.ih-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 30%, rgba(222, 43, 65, .22), transparent 70%),
              linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55));
}
.ih-media > img,
.ih-media > video,
.ih-media > picture,
.ih-media > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ih-media img.is-missing { display: none; }

/* ---------- Tiles del mosaico ---------- */
.ih-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  border-radius: var(--ih-radius);
  background: rgba(26, 26, 29, .78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .06);
  color: var(--ih-text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ih-ease), border-color .3s ease;
}
a.ih-tile:hover { color: var(--ih-text); border-color: rgba(222, 43, 65, .55); }
.ih-tile > .ih-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ih-tile > .ih-media img { transition: transform 1.1s var(--ih-ease); }
a.ih-tile:hover > .ih-media img { transform: scale(1.06); }
.ih-tile > .ih-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .78) 85%);
}
.ih-tile:has(> .ih-tile__badge) { padding-top: 4.75rem; }
.ih-tile__badge { position: absolute; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); }
.ih-tile__arrow { width: 30px; height: 30px; margin-top: .75rem; transition: transform .35s var(--ih-ease); }
a.ih-tile:hover .ih-tile__arrow { transform: translate(4px, -4px); color: var(--ih-red-hot); }
.ih-tile p { color: rgba(255, 255, 255, .82); margin: .65rem 0 0; max-width: 46ch; }
.ih-tile--plain { background: var(--ih-n3); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ih-tile--red { background: var(--ih-red); border-color: transparent; }
.ih-tile--red:hover { background: var(--ih-red-hot); }
.ih-tile--red p { color: rgba(255, 255, 255, .92); }
.ih-tile--sq { min-height: 0; aspect-ratio: 1; justify-content: center; align-items: center; text-align: center; gap: .4rem; font-weight: 600; font-size: .95rem; }
.ih-tile--sq .ih-i { width: 30px; height: 30px; }

/* Tile de estado (abierto/cerrado) */
.ih-status { justify-content: center; min-height: 0; gap: .15rem; }
.ih-status__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ih-status__state {
  font-family: var(--ih-font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
}
.ih-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ih-text-3);
  flex: none;
}
.is-open .ih-dot { background: var(--ih-ok); box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: ih-pulse 2s infinite; }
.is-closed .ih-dot { background: var(--ih-red); }
@keyframes ih-pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

/* ---------- Header de escritorio ---------- */
.ih-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: calc(env(safe-area-inset-top, 0px) + .75rem) 0 .75rem;
  transition: background-color .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
.ih-header.is-scrolled {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-top: calc(env(safe-area-inset-top, 0px) + .5rem);
  padding-bottom: .5rem;
}
.ih-header__in { display: flex; align-items: center; gap: var(--ih-gap); }
.ih-logo {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08);
  flex: none;
  transition: width .35s var(--ih-ease), height .35s var(--ih-ease);
}
.ih-logo img { width: 80px; height: 80px; transition: width .35s var(--ih-ease), height .35s var(--ih-ease); }
.is-scrolled .ih-logo { width: 70px; height: 70px; }
.is-scrolled .ih-logo img { width: 60px; height: 60px; }
@media (max-width: 991.98px) {
  .ih-logo { width: 80px; height: 80px; }
  .ih-logo img { width: 70px; height: 70px; }
  .is-scrolled .ih-logo { width: 62px; height: 62px; }
  .is-scrolled .ih-logo img { width: 54px; height: 54px; }
}

.ih-nav {
  display: none;
  align-items: center;
  gap: .25rem;
  padding: .35rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ih-nav a {
  color: var(--ih-text-2);
  text-decoration: none;
  font-weight: 500;
  padding: .55rem .9rem;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease;
}
.ih-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ih-nav a[aria-current="page"] { color: #fff; background: rgba(222, 43, 65, .22); }

.ih-header__status {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: .9375rem;
  color: var(--ih-text-2);
  white-space: nowrap;
  text-decoration: none;
}
.ih-header__status:hover { color: #fff; }
.ih-header__status strong { color: #fff; font-weight: 600; }
.ih-header__cta { display: none; margin-left: auto; }
.ih-header__status-m { margin-left: auto; }


/* Estado compacto para móvil (como el tile de clima de la referencia) */
.ih-header__status-m {
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 54px;
  padding: 0 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: .9rem;
  color: var(--ih-text-2);
  text-decoration: none;
}
.ih-header__status-m strong { color: #fff; font-weight: 600; }

@media (min-width: 992px) {
  .ih-nav { display: flex; margin-left: .5rem; }
  .ih-header__cta { display: inline-flex; }
  .ih-header__status { display: inline-flex; margin-left: auto; }
  .ih-header__status-m { display: none; }
  .ih-header__cta { margin-left: 0; }
}


/* ---------- Barra fija inferior (móvil) ---------- */
.ih-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px;
  background: var(--ih-n0);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.ih-bar a,
.ih-bar button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--ih-bar-h);
  padding: 0 1.25rem;
  border: 0;
  font: 600 1.0625rem/1 var(--ih-font-body);
  text-decoration: none;
}
.ih-bar__cta { background: var(--ih-red); color: #fff; }
.ih-bar__cta:hover { color: #fff; background: var(--ih-red-hot); }
.ih-bar__menu { background: var(--ih-n3); color: #fff; min-width: 120px; }
.ih-bar .ih-i { width: 26px; height: 26px; }
body { padding-bottom: calc(var(--ih-bar-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 992px) {
  .ih-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Menú overlay tipo mosaico ---------- */
.ih-menu {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ih-ease), visibility 0s linear .35s;
}
.ih-menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ih-ease), visibility 0s; }
.ih-menu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ih-gap);
  padding-bottom: 1rem;
}
.ih-menu__grid .ih-tile { min-height: 150px; }
.ih-menu__grid .ih-tile--wide { grid-column: 1 / -1; min-height: 190px; }
.ih-menu .ih-tile { opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ih-ease), transform .6s var(--ih-ease); }
.ih-menu.is-open .ih-tile { opacity: 1; transform: none; }
.ih-menu.is-open .ih-tile:nth-child(2) { transition-delay: .05s; }
.ih-menu.is-open .ih-tile:nth-child(3) { transition-delay: .1s; }
.ih-menu.is-open .ih-tile:nth-child(4) { transition-delay: .15s; }
.ih-menu.is-open .ih-tile:nth-child(5) { transition-delay: .2s; }
.ih-menu.is-open .ih-tile:nth-child(6) { transition-delay: .25s; }
.ih-menu.is-open .ih-tile:nth-child(7) { transition-delay: .3s; }
.ih-menu.is-open .ih-tile:nth-child(8) { transition-delay: .35s; }
.ih-menu__close {
  position: sticky;
  bottom: 0;
  margin: auto -1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--ih-bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 1.25rem env(safe-area-inset-bottom, 0px);
  background: var(--ih-n1);
  border: 0;
  color: #fff;
  font: 600 1.0625rem/1 var(--ih-font-body);
}
.ih-menu__close .ih-i { width: 26px; height: 26px; }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------- Acordeón (FAQ) con <details> nativo ---------- */
.ih-faq { border-top: 1px solid var(--ih-n5); }
.ih-faq details { border-bottom: 1px solid var(--ih-n5); }
.ih-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--ih-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.15;
}
.ih-faq summary::-webkit-details-marker { display: none; }
.ih-faq summary .ih-i { width: 26px; height: 26px; color: var(--ih-red); transition: transform .3s var(--ih-ease); }
.ih-faq details[open] summary .ih-i { transform: rotate(45deg); }
.ih-faq details p { color: var(--ih-text-2); margin: 0; padding: 0 2.5rem 1.5rem 0; max-width: 70ch; }

/* ---------- Comparador antes / después ---------- */
.ih-compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ih-radius);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}
.ih-compare > .ih-media { position: absolute; inset: 0; }
.ih-compare__after { clip-path: inset(0 0 0 var(--pos)); }
.ih-compare__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, .6);
  pointer-events: none;
}
.ih-compare__knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--ih-red);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.ih-compare__knob .ih-i { width: 26px; height: 26px; }
.ih-compare input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ih-compare__tag {
  position: absolute;
  bottom: 1rem;
  padding: .35rem .7rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .65);
  font-size: .875rem;
  font-weight: 600;
  pointer-events: none;
}
.ih-compare__tag--a { left: 1rem; }
.ih-compare__tag--b { right: 1rem; background: var(--ih-red); }

/* ---------- Tarjetas de video TikTok (fachada ligera) ---------- */
.ih-reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--ih-n2);
}
.ih-reel button {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.ih-reel__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 68px; height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: rgba(222, 43, 65, .92);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ih-ease);
}
.ih-reel button:hover .ih-reel__play { transform: scale(1.08); }
.ih-reel__play .ih-i { width: 30px; height: 30px; margin-left: 4px; }
.ih-reel__cap {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  text-align: left;
  font-size: .9375rem;
  line-height: 1.35;
}
.ih-reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Tarjeta de dato ---------- */
.ih-stat {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--ih-radius);
  background: var(--ih-n3);
  border: 1px solid rgba(255, 255, 255, .05);
  height: 100%;
}
.ih-stat .ih-num { display: flex; align-items: baseline; gap: .35rem; }
.ih-stat .ih-num small { font-size: .45em; color: var(--ih-red-hot); }
.ih-stat p { color: var(--ih-text-2); margin: .6rem 0 0; }

/* ---------- Tarjeta de reseñas ---------- */
.ih-rating {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--ih-radius);
  background: var(--ih-n3);
  border: 1px solid rgba(255, 255, 255, .05);
  height: 100%;
}
.ih-stars { display: flex; gap: .2rem; color: var(--ih-red-hot); }
.ih-stars .ih-i { width: 22px; height: 22px; }

/* ---------- Video de fondo: botón de pausa ---------- */
.ih-pause {
  position: absolute;
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .45);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ih-pause .ih-i { width: 18px; height: 18px; }
.ih-menu .ih-tile--sq { aspect-ratio: auto; min-height: 110px; }

/* ---------- Redes sociales ---------- */
.ih-social { display: flex; gap: .5rem; }
.ih-social a {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .2s ease, transform .2s ease;
}
.ih-social a:hover { background: var(--ih-red); color: #fff; transform: translateY(-2px); }
.ih-social .ih-i { width: 22px; height: 22px; }
.ih-tile--sq .ih-i { width: 34px; height: 34px; }

/* ---------- Perfil oficial de TikTok ---------- */
.ih-tt-profile {
  display: grid;
  justify-items: stretch;
  gap: 1rem;
  padding: clamp(.75rem, 2vw, 1.5rem);
  border-radius: calc(var(--ih-radius) + 6px);
  background: #2A2A2E;
  border: 1px solid rgba(255, 255, 255, .08);
}
.ih-tt-profile .tiktok-embed,
.ih-tt-profile blockquote {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 288px;
  border: 0 !important;
}
.ih-tt-profile iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 560px;
  border-radius: var(--ih-radius);
  background: #2A2A2E;
}
@media (min-width: 992px) { .ih-tt-profile iframe { min-height: 680px; } }
.ih-tt-loading { display: grid; place-items: center; min-height: 420px; width: 100%; border-radius: var(--ih-radius); color: var(--ih-text-2); text-align: center; padding: 2rem; }