:root { --white: rgba(255,255,255,.9); --green: #6b913f; --orange: #db850b; --cream: #f3eddf; --ink: #173424; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #111; color: #fff; font-family: Poppins, Arial, sans-serif; }
button, input { font: inherit; }

.products-figma { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: #121312; }
.products-background { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s ease; }
.products-figma:hover .products-background { transform: scale(1.018); }
.products-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(7,10,9,.9) 0%, rgba(8,11,9,.58) 48%, rgba(8,8,8,.11) 100%); }

.products-nav { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 25px 4.2%; color: var(--white); }
.products-nav nav { display: flex; gap: 42px; }
.products-nav a { color: inherit; text-decoration: none; font-size: 15px; font-weight: 600; }
.products-nav nav a:hover, .products-nav .active { color: #fff; }
.products-logo { display: block; width: 128px; line-height: 0; }
.products-logo img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.nav-tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.contact-button, .menu-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(10,18,10,.16); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.contact-button:hover, .menu-button:hover { border-color: var(--orange); color: #fff; }
.menu-button { display: none; }
.menu-button > span:first-child, .contact-button > span:first-child { font-size: 17px; line-height: 1; }

.products-intro { position: relative; max-width: 690px; padding: 112px 4.2% 278px; }
.eyebrow { margin: 0 0 18px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
h1 { margin: 0; color: var(--white); font-size: clamp(55px,7.2vw,110px); font-weight: 600; letter-spacing: -.07em; line-height: 1.06; }
.product-search { width: min(460px,100%); margin-top: 34px; }
.product-search label { display: flex; align-items: center; min-height: 65px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.66); border-radius: 40px; background: rgba(0,0,0,.14); }
.location { display: flex; align-items: center; gap: 9px; min-height: 53px; padding: 0 16px; border-radius: 29px 10px 29px 10px; background: var(--green); font-size: 14px; white-space: nowrap; }
.location span { font-size: 18px; }
.product-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; color: #fff; font-size: 14px; }
.product-search input::placeholder { color: rgba(255,255,255,.82); }
.product-search button { display: grid; width: 53px; height: 53px; place-items: center; border: 0; border-radius: 50%; background: var(--orange); color: #fff; cursor: pointer; font-size: 28px; line-height: 1; }
.product-search button:hover { background: #ef9c29; }
.search-status { min-height: 21px; margin: 8px 0 -29px; color: #ffe4ac; font-size: 12px; }
.trust { display: flex; align-items: center; gap: 15px; width: max-content; max-width: 100%; margin-top: 43px; padding: 14px 24px; border-radius: 40px; background: rgba(255,255,255,.12); backdrop-filter: blur(11px); font-size: 13px; }
.trust strong { font-weight: 500; line-height: 1.1; }
.stars { display: flex; gap: 2px; color: #fff; letter-spacing: 1px; }.stars i { color: rgba(255,255,255,.4); font-style: normal; }
.scroll-cue { position: absolute; top: 45%; right: 3.1%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; color: rgba(255,255,255,.8); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; writing-mode: vertical-rl; }.scroll-cue span { color: var(--orange); font-size: 18px; }

.product-glassbar { position: absolute; bottom: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; width: 100%; padding: 38px max(7%,calc((100% - 1180px)/2)) 39px; border-radius: 70px 70px 0 0; background: rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.figma-product-card { display: grid; grid-template-columns: minmax(92px,130px) 1fr; align-items: center; gap: 20px; min-width: 0; transition: opacity .25s, transform .25s; }
.figma-product-card[hidden] { display: none; }
.product-photo { width: min(100%,130px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 14px 18px rgba(0,0,0,.28); transition: transform .35s ease; }.figma-product-card:hover .product-photo { transform: rotate(-3deg) scale(1.04); }
.limon-photo { object-position: center; }
.figma-product-card .future-product-image{position:relative;width:min(100%,130px);aspect-ratio:1;overflow:hidden;border-radius:50%;box-shadow:0 14px 18px rgba(0,0,0,.28)}
.figma-product-card .future-product-image img{display:block;width:100%;height:100%;object-fit:cover}
.figma-product-card .future-product-image::after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,rgba(10,22,11,.1),rgba(10,22,11,.78))}
.figma-product-card .future-product-image span{position:absolute;z-index:1;top:50%;left:50%;color:#fff;font-size:10px;font-weight:600;line-height:1.1;text-align:center;text-transform:uppercase;transform:translate(-50%,-50%)}
.availability { margin: 0 0 5px; color: #d1eeae; font-size: 9px; font-weight: 700; letter-spacing: .08em; }.figma-product-card h2 { margin: 0; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.2; }.figma-product-card p:not(.availability) { margin: 3px 0 9px; color: #fff; font-size: 13px; font-weight: 300; }
.details-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; background: rgba(255,255,255,.11); color: #fff; cursor: pointer; font-size: 11px; font-weight: 600; text-decoration: none; }.details-trigger:hover { border-color: var(--orange); background: var(--orange); }

.product-dialog { width: min(880px,calc(100% - 32px)); padding: 0; border: 0; background: var(--cream); color: var(--ink); box-shadow: 0 20px 70px rgba(0,0,0,.45); }.product-dialog::backdrop { background: rgba(14,31,20,.72); backdrop-filter: blur(4px); }.dialog-layout { display: grid; grid-template-columns: 1fr 1.08fr; }.dialog-layout > img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; }.dialog-layout > div { padding: 66px 55px 46px; }.dialog-close { position: absolute; z-index: 1; top: 15px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; font-size: 27px; line-height: 1; }.micro { margin: 0; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .13em; }.dialog-layout h2 { margin: 14px 0; color: var(--ink); font-size: 47px; font-weight: 500; letter-spacing: -.05em; }.dialog-description { margin: 0 0 27px; line-height: 1.65; }dl { margin: 0; border-top: 1px solid rgba(23,52,36,.26); }dl div { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(23,52,36,.26); font-size: 13px; }dt { font-weight: 700; }dd { margin: 0; }.dialog-contact { display: inline-block; margin-top: 30px; padding: 12px 15px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }

@media (max-width:1100px) { .product-glassbar { position: relative; grid-template-columns: repeat(2,1fr); padding: 36px; border-radius: 50px 50px 0 0; } .products-intro { padding-bottom: 98px; } .products-figma { min-height: auto; } .scroll-cue { display: none; } }
@media (max-width:680px) { .products-background { object-position: 65% center; }.products-shade { background: linear-gradient(90deg,rgba(7,10,9,.84),rgba(8,11,9,.39)); }.products-nav { grid-template-columns: 1fr auto; padding: 16px 5%; }.products-nav nav { position: absolute; top: 78px; right: 5%; display: none; flex-direction: column; gap: 0; min-width: 155px; padding: 9px; border-radius: 13px; background: rgba(18,26,15,.94); box-shadow: 0 10px 30px rgba(0,0,0,.22); }.products-nav nav.is-open { display: flex; }.products-nav nav a { padding: 10px; }.products-logo { width: 112px; }.contact-button { min-width: 38px; padding: 8px; }.menu-button { display: inline-flex; min-width: 38px; padding: 8px; }.nav-tools .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.products-intro { padding: 108px 7% 72px; }.eyebrow { font-size: 9px; }h1 { font-size: clamp(45px,14vw,65px); }.product-search { margin-top: 27px; }.location { padding: 0 11px; font-size: 11px; }.product-search input { padding: 0 9px; font-size: 12px; }.trust { width: 100%; gap: 10px; padding: 12px 15px; font-size: 11px; }.product-glassbar { grid-template-columns: 1fr; gap: 19px; padding: 27px 22px; border-radius: 35px 35px 0 0; }.figma-product-card { grid-template-columns: 94px 1fr; gap: 18px; }.product-photo,.figma-product-card .future-product-image { width: 94px; }.figma-product-card h2 { font-size: 18px; }.figma-product-card p:not(.availability) { font-size: 12px; }.details-trigger { min-width: 37px; min-height: 37px; justify-content: center; padding: 8px; }.details-trigger .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.details-trigger > span:first-child { font-size: 18px; }.dialog-layout { grid-template-columns: 1fr; }.dialog-layout > img { min-height: 260px; max-height: 320px; }.dialog-layout > div { padding: 36px 28px 34px; }.dialog-layout h2 { font-size: 40px; } }

/* Ajustes de legibilidad y espacio para el buscador y las fichas en pantallas pequeñas. */
.location { min-height: auto; padding: 0 4px; border-radius: 0; background: transparent; color: rgba(255,255,255,.9); font-size: 12px; }
.location span { color: var(--orange); }
@media (max-width:680px) {
  .product-search label { flex-wrap: wrap; min-height: 0; padding: 9px 11px; border-radius: 25px; }
  .location { width: 100%; padding: 0 3px 3px; font-size: 10px; }
  .product-search input { min-height: 40px; padding: 0 7px; }
  .product-search button { width: 42px; height: 42px; font-size: 24px; }
  .product-dialog { width: calc(100% - 18px); max-height: calc(100svh - 18px); overflow-y: auto; }
  .dialog-layout > img { min-height: 210px; height: 210px; max-height: none; }
  .dialog-layout > div { padding: 34px 24px 48px; }
  .dialog-layout h2 { font-size: 36px; line-height: 1.05; }
  .dialog-description { font-size: 14px; line-height: 1.65; }
  dl div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; font-size: 14px; }
  .dialog-contact { width: 100%; padding: 14px; text-align: center; }
}

.hero-reliability { position: absolute; z-index: 2; bottom: 211px; left: 4.2%; display: flex; align-items: center; gap: 11px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(17,28,14,.28); color: #fff; backdrop-filter: blur(10px); font-size: 12px; }
.reliability-score { font-weight: 700; }.reliability-stars { color: #efb334; letter-spacing: 1px; }.hero-reliability span:last-child { color: rgba(255,255,255,.82); }
@media (max-width:1100px) { .product-reliability { position: relative; bottom: auto; left: auto; width: max-content; max-width: calc(100% - 44px); margin: 0 22px 33px; } }
@media (max-width:680px) { .hero-reliability { gap: 8px; padding: 10px 13px; font-size: 10px; }.reliability-stars { font-size: 11px; } }

@media (max-width:680px) {
  .details-trigger { min-width: auto; padding: 8px 10px; }
  .details-trigger .button-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

.products-footer { display: flex; justify-content: center; gap: 30px; padding: 22px 6%; background: var(--ink); }
.products-footer a { color: #fff; font-size: 12px; text-decoration: none; }.products-footer a:hover { color: var(--orange); }
@media (max-width:680px) { .products-footer { flex-direction: column; gap: 9px; padding: 20px 7%; text-align: center; } }
@media (min-width:681px) and (max-width:1100px) { .product-glassbar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:32px 8%; } .figma-product-card { grid-template-columns:92px 1fr; gap:14px; } .product-photo,.figma-product-card .future-product-image { width:92px; } }

.products-footer a{max-width:100%;overflow-wrap:anywhere}