/* hecho por r3k1 */
@layer components {
  .btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 30px; border-radius: 99px;
    font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    transition: transform .6s var(--suave), box-shadow .5s, background-color .3s, color .3s, border-color .3s;
  }
  .btn:active { transform: scale(.96); }
  .btn--s { height: 40px; padding: 0 20px; font-size: 12px; }
  .btn--oro { background: var(--oro); color: var(--sobre-oro); }
  .btn--oro:hover { background: var(--oro-hi); }
  .btn--linea { border: 1px solid var(--linea); color: var(--tinta); }
  .btn--linea:hover { border-color: var(--oro); color: var(--oro); }

  .enlace { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tinta); padding-bottom: 4px; background: linear-gradient(var(--oro), var(--oro)) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--suave), color .3s; }
  .enlace:hover { color: var(--oro); background-size: 40% 1px; }

  .estado { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--suave-t); }
  .estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); }
  .estado[data-abierto="1"]::before { --c: rgb(95 211 138 / .55); background: #5fd38a; }
  .estado[data-abierto="0"]::before { background: #d98a4e; }
  .estado b { color: var(--tinta); font-weight: 500; }

  .estrellas { --e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E");
    display: inline-block; width: 5.4em; height: 1em; font-size: 14px;
    background: linear-gradient(90deg, var(--oro) calc(var(--v) / 5 * 100%), var(--linea) 0);
    -webkit-mask: var(--e) 0 0 / 1.08em 1em repeat-x; mask: var(--e) 0 0 / 1.08em 1em repeat-x; }
  .estrellas--g { font-size: 22px; }

  .nota { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--suave-t); }
  .nota b { color: var(--tinta); font-weight: 600; }

  .tallas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 26px; }
  .talla { display: grid; justify-items: center; gap: 4px; padding: 11px 2px 10px; border: 1px solid var(--linea); border-radius: var(--r-s); transition: border-color .3s, background-color .3s, color .3s, transform .5s var(--muelle); }
  .talla b { font: 500 17px/1 var(--serif); }
  .talla span { font-size: 10px; letter-spacing: .02em; color: var(--tenue); white-space: nowrap; }
  .talla:hover { border-color: var(--oro); }
  .talla.is-on { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); transform: translateY(-3px); }
  .talla.is-on span { color: inherit; opacity: .75; }

  .precios { border-top: 1px solid var(--linea); }
  .precio { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
  .precio__n { font-size: 16px; }
  .precio__n small { display: block; font-size: 13px; color: var(--tenue); margin-top: 2px; }
  .precio__l { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--linea); transform: translateY(-4px); }
  .precio__v { font: 500 20px/1 var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .4s; }
  .precio:not(.precio--fijo) .precio__v { color: var(--oro); }
  .precio__v.is-cambia { animation: salta .7s var(--lento); }
  @keyframes salta { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }

  .comp { position: relative; aspect-ratio: 1 / 2; max-height: 78svh; width: 100%; max-width: 440px; border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); user-select: none; justify-self: center; }
  .comp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .comp__a { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
  .comp__t { position: absolute; top: 16px; padding: 7px 13px; border-radius: 99px; background: rgb(11 9 7 / .72); color: #f1e9da; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
  .comp__t--a { left: 16px; } .comp__t--d { right: 16px; }
  .comp__r { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
  .comp__h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--oro-hi); pointer-events: none; }
  .comp__h i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--oro-g); box-shadow: 0 8px 24px rgb(0 0 0 / .45); transition: transform .5s var(--muelle); }
  .comp__h i::before, .comp__h i::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: solid var(--sobre-oro); border-width: 0 0 2px 2px; margin-top: -4px; }
  .comp__h i::before { left: 12px; transform: rotate(45deg); } .comp__h i::after { right: 12px; transform: rotate(-135deg); }
  .comp:active .comp__h i { transform: scale(.9); }
  .comp.is-pista .comp__h, .comp.is-pista .comp__a { transition: left 1.2s var(--suave), clip-path 1.2s var(--suave); }

  .chip { height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--linea); font-size: 14px; color: var(--suave-t); white-space: nowrap; transition: all .35s var(--suave); }
  .chip:hover { border-color: var(--oro); color: var(--tinta); }
  .chip.is-on { background: var(--tinta); border-color: var(--tinta); color: var(--bg); }

  .canales { border-top: 1px solid var(--linea); }
  .canal { position: relative; display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "n t g" "n d g"; column-gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--linea); }
  .canal span { grid-area: n; font-size: 12px; color: var(--oro); letter-spacing: .1em; padding-top: 10px; }
  .canal b { grid-area: t; font: 400 clamp(30px, 3.4vw, 44px)/1.1 var(--serif); transition: color .3s, transform .6s var(--suave); }
  .canal em { grid-area: d; font-style: normal; font-size: 14px; color: var(--tenue); margin-top: 6px; }
  .canal i { grid-area: g; align-self: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; font-style: normal; transition: all .5s var(--muelle); }
  .canal:hover b { color: var(--oro); transform: translateX(8px); }
  .canal:hover i { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); }

  .horario li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 15px; color: var(--suave-t); }
  .horario i { flex: 1; }
  .horario b { font-weight: 500; color: var(--tinta); text-align: right; }
  .horario li[data-dia="6"] b, .horario li[data-dia="0"] b { font-weight: 400; color: var(--tenue); }
  .horario li.is-hoy { color: var(--oro); }
  .horario li.is-hoy span::after { content: "hoy"; margin-left: 10px; padding: 3px 8px; border-radius: 99px; background: var(--oro); color: var(--sobre-oro); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }

  .cita { font: italic 400 clamp(22px, 2.2vw, 30px)/1.3 var(--serif); padding-left: 22px; border-left: 2px solid var(--oro); margin-top: 10px; }

  .duda { border-bottom: 1px solid var(--linea); }
  .duda summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font: 400 clamp(20px, 2vw, 26px)/1.25 var(--serif); cursor: pointer; transition: color .3s; }
  .duda summary::-webkit-details-marker { display: none; }
  .duda summary:hover { color: var(--oro); }
  .duda summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); transition: transform .5s var(--muelle), background-color .3s; }
  .duda summary i::before, .duda summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
  .duda summary i::after { transform: rotate(90deg); transition: transform .4s var(--suave); }
  .duda[open] summary i { transform: rotate(180deg); background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); }
  .duda[open] summary i::after { transform: rotate(0); }
  .duda p { padding: 0 50px 26px 0; color: var(--suave-t); max-width: 62ch; }
  .duda p a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 980px) { .cab .btn { display: none; } }
}