/* "Pruébala con tu foto": texto a la izquierda, teléfono grande con flechas a la derecha. */
.try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(72px, 9vw, 120px) var(--gutter); background: #efe8e0; }
.try h2 { font-family: var(--serif); font-weight: 400; margin-bottom: 14px; }
.try__lead { color: var(--muted); max-width: 30em; margin-bottom: 26px; }
.try__upload { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 1em 1.8em; border-radius: 99px; background: var(--night); color: #fff; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.try__upload:hover, .try__upload:focus-within { background: #3a2a2c; }
.try__upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.try__clear { margin-left: 14px; padding: 0; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font: inherit; font-size: .9rem; }
.try__error { min-height: 1.2em; margin: 10px 0 0; color: #a0362e; font-size: .9rem; }
.try__current { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(58, 42, 44, .14); }
.try__count { margin: 0 0 6px; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.try__name { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; letter-spacing: .06em; text-transform: uppercase; }
.try__desc { color: var(--muted); margin: 0 0 18px; }
.try__cta { padding: .9em 1.6em; border: 1px solid var(--night); background: transparent; color: var(--night); font: inherit; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.try__cta:hover { background: var(--night); color: #fff; }

.try__stage { position: relative; display: grid; grid-template-columns: 56px auto 56px; align-items: center; justify-content: center; gap: 8px; }
.try__phone { width: 300px; }
.try__screen { background: #f4efe8; }
.try__frame { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--try-scale, .7446)); transform-origin: 0 0; pointer-events: none; }
.try__shield { position: absolute; inset: 0; z-index: 2; cursor: grab; touch-action: pan-y; }
.try__screen .phone__island { z-index: 3; }
.try__arrow { position: relative; width: 52px; height: 52px; border: 1px solid rgba(58, 42, 44, .25); border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; transition: background .2s, transform .2s; }
.try__arrow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1.5px solid var(--night); border-right: 1.5px solid var(--night); }
.try__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.try__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.try__arrow:hover { background: #fff; }
.try__hint { grid-column: 1 / -1; justify-self: center; margin: 14px 0 0; padding: .55em 1.1em; border-radius: 99px; background: rgba(255, 255, 255, .7); font-size: .78rem; letter-spacing: .08em; color: var(--night); transition: opacity .4s; }
.has-swiped .try__hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .try__hint span { display: inline-block; animation: try-nudge 1.4s ease-in-out infinite; }
}
@keyframes try-nudge { 50% { transform: translateX(6px); } }

@media (max-width: 900px) {
  .try { grid-template-columns: 1fr; }
  .try__stage { order: -1; grid-template-columns: 40px auto 40px; }
  .try__phone { width: 250px; }
  .try__frame { --try-scale: .6205; }
  .try__arrow { width: 40px; height: 40px; }
}