:root{
  --bg: #ffffff;
  --surface: #f6f8fb;
  --brand-dark: #2F455C; /* from attachment */
  --muted: rgba(47,69,92,0.68);
  --blue-700: #1DCDFE; /* primary cyan */
  --blue-600: #21D0B2; /* teal accent */
  --blue-400: #34F5C5; /* mint */
  --glass: rgba(255,255,255,0.6);
  --radius:12px;
  --max-width:1100px;
}

/* Basic reset */
* , *::before, *::after{box-sizing:border-box;min-width:0}
html,body{height:100%;max-width:100vw;overflow-x:hidden}
body{
  margin:0;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial;
  color:var(--brand-dark);
  background:linear-gradient(180deg,var(--bg),#f8fbff 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* view-toggle removed */

/* Forzar vista móvil: aplicable en cualquier ancho */
body.force-mobile .hero-inner,
body.force-mobile .fortuno-grid,
body.force-mobile .sheetly-grid,
body.force-mobile .map-wrap,
body.force-mobile .contact-inner,
body.force-mobile .footer-grid,
body.force-mobile .studio-game-grid{grid-template-columns:1fr !important}
body.force-mobile .nav{position:fixed;top:64px;right:12px;left:12px;background:linear-gradient(180deg,white,rgba(255,255,255,0.98));box-shadow:0 12px 40px rgba(2,6,23,0.08);border-radius:12px;padding:1rem;display:block;z-index:60;max-height:60vh;overflow:auto}
body.force-mobile .header-inner{gap:.5rem}

/* Forzar vista escritorio: emula layouts de escritorio en pantallas pequeñas */
body.force-desktop .hero-inner{grid-template-columns:1fr 480px !important}
body.force-desktop .fortuno-grid{grid-template-columns:420px 1fr !important}
body.force-desktop .sheetly-grid{grid-template-columns:460px 1fr !important}
body.force-desktop .map-wrap{grid-template-columns:1fr 340px !important}
body.force-desktop .contact-inner{grid-template-columns:1fr 320px !important}
body.force-desktop .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 320px !important}

/* Small helpers to ensure no overflow when forcing desktop */
/* avoid global overflow hidden; prefer targeted rules */

/* Evitar que medios desborden la pantalla en móviles */
img, picture, video, svg, iframe {max-width:100%;height:auto;display:block}

.container{max-width:var(--max-width);width:100%;margin:0 auto;padding:1rem}

/* Evitar que flex/grid children causen overflow por ancho mínimo */
.header-inner,.hero-inner,.products-grid,.studio-game-grid,.fortuno-grid,.contact-inner,.map-wrap,.footer-grid,.brands-track,.products-wrap{min-width:0}

/* Defensive: prevent flex/grid children from forcing page wider than viewport */
body *{min-width:0}

/* Asegurar que ilustraciones del hero no excedan */
.hero-illustration, .hero-illustration img{max-width:100%;width:100%;height:auto}

/* Asegurar que la ilustración del hero no provoque overflow */
.hero-illustration{overflow:hidden;max-width:100%}
.hero-illustration img,.hero-illustration svg{display:block;max-width:100%;width:100%;height:auto;object-fit:contain}

/* Header */
.site-header{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45));box-shadow:0 1px 0 rgba(15,23,42,0.04);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.logo{width:38px;height:38px}
.brand-name{font-weight:600}

.nav{display:flex;align-items:center}
.nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:.5rem .75rem;border-radius:8px}
.nav a:hover{background:rgba(30,111,255,0.08);color:var(--blue-700)}

/* Icono pequeño junto al enlace 'Socio' */
.nav .icon-apoyo{width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:.45rem}

/* Estilos específicos para el enlace 'Acceso Socio' */
.nav .nav-socio{display:flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border-radius:999px}
.nav .nav-socio .nav-label{display:inline-block;font-weight:700;color:var(--blue-700)}

/* En móviles mostrar sólo el icono para evitar un botón grande que sobreponga la cabecera */
@media(max-width:900px){
  .nav .nav-socio{padding:.15rem .25rem;background:transparent}
  .nav .nav-socio .nav-label{display:none}
}

/* Productos section */
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.product-card{background:white;padding:1rem;border-radius:12px;box-shadow:0 6px 20px rgba(15,23,42,0.04)}
.product-card h3{margin:0 0 .5rem}
.product-card .tag{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:rgba(15,23,42,0.04)}
.product-card.coming-up{opacity:.95}

/* Dropdown Productos */
/* Dropdown removed: styles cleaned */

.menu-toggle{display:none;background:none;border:0;padding:.5rem;border-radius:8px}
.hamburger{display:inline-block;width:28px;height:2px;background:var(--blue-700);position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:28px;height:2px;background:var(--blue-700);transition:transform .25s}
.hamburger::before{top:-8px}
.hamburger::after{top:8px}

/* Hero */
.hero{padding:4rem 0}
.hero-inner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}

/* Desktop: layout de dos columnas para hero */
@media (min-width:900px){
  .hero-inner{grid-template-columns:1fr 480px}
}
 .hero h1{font-size:2.1rem;margin:0 0 .5rem}

/* Mejoras visuales al contenedor del hero */
.hero-content{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,253,255,0.95));padding:1.6rem;border-radius:14px;box-shadow:0 18px 48px rgba(47,69,92,0.06);max-width:760px}
.hero-content::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-top-left-radius:14px;border-bottom-left-radius:14px;background:linear-gradient(180deg,var(--blue-700),var(--blue-600));opacity:0.12}
.hero-inner{position:relative}
.hero h1{font-size:2.25rem;line-height:1.02;margin:0 0 .6rem}
.hero .lead{font-size:1.02rem;color:var(--muted);margin-bottom:1rem}
.hero-features{margin:1rem 0;padding-left:0}
.hero-features li{display:flex;gap:.6rem;align-items:flex-start;padding:6px 0}

@media(min-width:900px){
  .hero-inner{grid-template-columns:1fr 480px}
  .hero-content{padding:2rem}
  .hero h1{font-size:2.6rem}
}

/* Tarjeta en la parte derecha del hero: Desarrollo y soluciones */
.hero-illustration{display:flex;align-items:center;justify-content:center}
.hero-illustration-graphic{display:flex;align-items:center;justify-content:center;max-width:460px;width:100%}
.hero-illustration-graphic svg{width:100%;height:auto;display:block}

@media(max-width:900px){
  .hero-illustration-graphic{max-width:320px}
}

.illustration-caption{margin-top:.75rem;text-align:center;background:linear-gradient(90deg,rgba(33,208,178,0.06),rgba(29,205,254,0.04));padding:.45rem .6rem;border-radius:8px;color:var(--brand-dark);font-weight:600;font-size:.95rem}

/* Ajustes puntuales para que el SVG destaque y conserve la paleta */
.hero-illustration-graphic svg text{font-family: "Segoe UI", Inter, Arial; font-weight:700}

@media(max-width:480px){
  .illustration-caption{font-size:.9rem;padding:.45rem .5rem}
}

/* Animación sutil para el engranaje: animar los elementos internos para no interferir
   con el atributo `transform` del <g> (que posiciona el engranaje en el SVG). */
.hero-illustration-graphic svg .hero-gear .gear-outer{
  transform-box:fill-box;
  transform-origin:36px 36px;
  animation:gear-rotate 3s ease-in-out infinite;
}
.hero-illustration-graphic svg .hero-gear .gear-core{
  transform-box:fill-box;
  transform-origin:36px 36px;
  animation:core-pulse 2.4s ease-in-out infinite;
}

@keyframes gear-rotate{
  0%{transform:rotate(0deg) scale(1)}
  35%{transform:rotate(-6deg) scale(1.03)}
  60%{transform:rotate(6deg) scale(1.02)}
  100%{transform:rotate(0deg) scale(1)}
}

@keyframes core-pulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.12);opacity:.95}
  100%{transform:scale(1);opacity:1}
}

@media(max-width:480px){
  .hero-content{padding:1rem;border-radius:12px}
  .hero h1{font-size:1.6rem}
}

.hero-illustration img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 18px 48px rgba(47,69,92,0.08)}
.hero-features{margin:1rem 0;padding-left:1.1rem;color:var(--muted)}
.hero-features li{margin-bottom:.5rem}
.lead{color:var(--muted);margin:0 0 1rem}
.hero-cta{display:flex;gap:.75rem}

.phone-mock{display:flex;align-items:center;justify-content:center}
.phone-mock svg{width:100%;max-width:320px}

.btn{display:inline-block;padding:.7rem 1rem;border-radius:10px;border:0;cursor:pointer;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--blue-600),var(--blue-400));color:white;box-shadow:0 6px 18px rgba(30,111,255,0.16)}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--blue-700)}

/* Sections */
.section{padding:3rem 0}
.section-title{font-size:1.4rem;margin:0 0 .4rem}
.section-subtitle{color:var(--muted);margin:0 0 1.25rem}

/* Sheetly Suite: tarjeta destacada */
.sheetly-suite{background:linear-gradient(180deg,#ffffff,#fbfdff);}
.sheetly-card{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center;margin-top:1rem;background:linear-gradient(180deg,#ffffff,#f8fdff);padding:1.1rem;border-radius:14px;box-shadow:0 18px 48px rgba(47,69,92,0.06)}
.sheetly-media-img{width:100%;height:auto;border-radius:10px;box-shadow:0 12px 36px rgba(47,69,92,0.06);object-fit:cover}
.sheetly-badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:linear-gradient(90deg,var(--blue-700),var(--blue-600));color:white;font-weight:700;font-size:.8rem}
.sheetly-title{font-size:1.6rem;margin:.5rem 0}
.sheetly-desc{margin:0 0 .75rem}
.feature-list{list-style:none;padding:0;margin:0 0 1rem}
.feature-list li{display:flex;gap:.6rem;align-items:flex-start;padding:8px 0;color:var(--muted)}
.feature-list li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue-700);margin-top:.45rem;flex:0 0 auto}
.sheetly-actions{display:flex;gap:.75rem}

@media(max-width:980px){
  .sheetly-card{grid-template-columns:1fr;}
  .sheetly-media{order:1}
  .sheetly-content{order:2}
}

/* Studio Game section */
.studio-game{background:linear-gradient(180deg, #ffffff, #fbfdff);}
.studio-game-grid{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.studio-game-media{flex:1}
.studio-game-img{width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,0.06);display:block}
.studio-game-content{flex:1}

/* Fortuno Suite */
.fortuno-suite{background:linear-gradient(180deg, #fff, #fbfdff);} 
.fortuno-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center;margin-top:1rem}
.fortuno-media{display:flex;align-items:center;justify-content:center}
.fortuno-img{width:100%;max-width:420px;height:auto;border-radius:12px;box-shadow:0 18px 48px rgba(47,69,92,0.06);display:block;object-fit:cover}
.fortuno-content.card{padding:1.25rem}
.fortuno-content h3{margin-top:0}

@media(max-width:900px){
  .fortuno-grid{grid-template-columns:1fr;gap:1rem}
  .fortuno-media{order:1}
  .fortuno-content{order:2}
}

/* Leaders */
.leaders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.leader-card{background:white;padding:1rem;border-radius:12px;box-shadow:0 8px 28px rgba(47,69,92,0.04);text-align:center}
.leader-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(90deg,var(--blue-700),var(--blue-600));color:white;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:.75rem}
.leader-card h4{margin:0 0 .25rem}
.leader-card .muted{color:var(--muted)}

/* Brands (marcas utilizadas) */
.brands-wrap{overflow:hidden;margin-top:1rem}
.brands-track{display:flex;gap:1.25rem;align-items:center;animation:scroll-left 20s linear infinite;padding:8px 0}
.brands-track{will-change:transform}
.brand-item{flex:0 0 auto;max-width:140px;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;background:rgba(255,255,255,0.6)}
.brand-item img{max-width:100%;height:56px;object-fit:contain;display:block;filter:grayscale(20%);transition:transform .25s,filter .25s}
.brand-item img:hover{transform:scale(1.06);filter:grayscale(0)}

@keyframes scroll-left{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

@media(max-width:900px){
  .leaders-grid{grid-template-columns:1fr}
  .brands-track{animation-duration:26s}
}

/* Banner for brands section */
.brands-banner{display:flex;justify-content:center;margin-top:0.5rem}
.brands-banner img{max-width:780px;width:100%;height:auto;border-radius:12px;box-shadow:0 12px 36px rgba(47,69,92,0.06)}

@media(max-width:900px){
  .studio-game-grid{flex-direction:column}
}

/* Brief section */
.brief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.brief-card{background:white;padding:1rem;border-radius:12px;box-shadow:0 6px 20px rgba(15,23,42,0.04)}
.brief-card h4{margin:0 0 .5rem}

/* Products + Services side-by-side */
.products-wrap{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem;align-items:start}
.products-grid{display:grid;grid-template-columns:1fr;gap:1rem}
/* Side menu removed; layout adjusted for single-column products */

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:white;padding:1.25rem;border-radius:12px;box-shadow:0 6px 20px rgba(15,23,42,0.04)}

/* Ilustraciones pequeñas dentro de las tarjetas de servicios */
.card-illustration{display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.card-illustration svg{width:72px;height:72px;display:block}

@media(max-width:900px){
  .card-illustration{justify-content:flex-start}
  .card-illustration svg{width:64px;height:64px}
}

.about-inner{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem;align-items:start}
.about-stats ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.about-stats strong{display:block;font-size:1.25rem;color:var(--blue-700)}

.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.tech-card{background:white;padding:1rem;border-radius:12px;box-shadow:0 8px 28px rgba(47,69,92,0.04)}
.tech-card h4{margin:0 0 .5rem;color:var(--brand-dark);font-size:1rem}
.tech-card ul{margin:0;padding-left:1rem;color:var(--muted);font-size:.95rem}
.tech-illustration{display:flex;align-items:center;justify-content:flex-start;margin-bottom:.6rem}
.tech-illustration svg{width:56px;height:56px}
.tech-card li{margin-bottom:.45rem}
.tech{background:rgba(52,245,197,0.08);color:var(--blue-600);padding:.4rem .6rem;border-radius:999px;font-weight:600}

.contact-inner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
form input,form textarea{width:100%;padding:.75rem;border-radius:8px;border:1px solid rgba(15,23,42,0.06);margin-bottom:.75rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-actions{display:flex;gap:.5rem;align-items:center}
.form-feedback{color:var(--muted);margin-top:.5rem}

/* Footer */
.site-footer{border-top:1px solid rgba(15,23,42,0.04);padding:1.25rem 0;background:transparent}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;padding:2rem 0}
.footer-brand .muted{color:var(--muted);margin-top:.5rem}
.social-link{padding:.4rem .6rem;border-radius:8px;background:rgba(33,208,178,0.08);color:var(--blue-700);text-decoration:none;font-weight:600}
.footer-contact h4,.footer-legal h4{margin:0 0 .5rem}
.footer-legal ul{list-style:none;padding:0;margin:0}
.footer-legal a{color:var(--muted);text-decoration:none}
.footer-bottom{border-top:1px solid rgba(15,23,42,0.02);padding-top:1rem;margin-top:1rem;display:flex;justify-content:space-between}
/* Footer - modernized */
.site-footer{padding:3rem 0;background:linear-gradient(180deg,var(--blue-700),var(--blue-600));color:white}
.site-footer a{color:inherit}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 320px;gap:1.5rem;max-width:var(--max-width);margin:0 auto;padding:0 1.25rem}
.footer-brand .muted{color:rgba(255,255,255,0.85);margin-top:.5rem}
.social{display:flex;gap:.5rem;margin-top:.75rem}
.social-link{padding:.45rem .6rem;border-radius:8px;background:rgba(255,255,255,0.08);color:white;text-decoration:none;font-weight:600}
.footer-contact h4,.footer-legal h4{margin:0 0 .5rem}
.footer-legal ul{list-style:none;padding:0;margin:0}
.footer-legal li{margin-bottom:.45rem}
.footer-legal a{color:rgba(255,255,255,0.95);text-decoration:none}
.footer-bottom{max-width:var(--max-width);margin:1.5rem auto 0;padding:1rem 1.25rem;border-radius:12px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,rgba(255,255,255,0.06),transparent)}
.footer-brand .logo{width:44px;height:44px}
.footer-newsletter{display:flex;gap:.5rem;align-items:center}
.footer-newsletter input{padding:.6rem .75rem;border-radius:8px;border:0;min-width:0;flex:1}
.footer-newsletter button{padding:.6rem .9rem;border-radius:8px;border:0;background:white;color:var(--brand-dark);font-weight:700}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr;gap:1rem;padding:0 1rem}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}

/* Back to top button */
.back-to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:999px;background:var(--blue-600);color:white;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(30,111,255,0.14);cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.back-to-top.show{opacity:1;transform:none}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr}
  .brief-grid{grid-template-columns:1fr}
  .products-wrap{grid-template-columns:1fr}
}

@media(max-width:900px){
  /* Mobile / tablet: menú desplegable y ajustes de header */
  .menu-toggle{display:block}
  .nav{position:fixed;top:64px;right:12px;left:12px;background:linear-gradient(180deg,white,rgba(255,255,255,0.98));box-shadow:0 12px 40px rgba(2,6,23,0.08);border-radius:12px;padding:1rem;display:none;z-index:60;max-height:60vh;overflow:auto}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:.5rem}
  .dropdown-menu{position:static;margin-top:6px}
}

/* Apps grid (cards like the attachment) */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.app-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 12px 36px rgba(47,69,92,0.06);display:flex;flex-direction:column}
.app-card .thumb{height:160px;background:linear-gradient(180deg,#f6fbff,#eef7ff);display:flex;align-items:center;justify-content:center}
.app-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.app-card .thumb .thumb-label{font-weight:700;color:var(--brand-dark);font-size:1.05rem}
.app-card .card-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.app-card h3{margin:0;font-size:1.05rem}
.app-card p{margin:0;color:var(--muted);flex:1}
.app-card .cta{margin-top:8px}
.app-card .cta .btn.primary{width:100%;padding:.8rem;border-radius:10px}

@media(max-width:900px){
  .apps-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* Global reach map section */
.map-section{padding:3rem 0;background:linear-gradient(180deg,rgba(29,205,254,0.02),transparent)}
.map-wrap{max-width:var(--max-width);margin:0 auto;padding:1rem;display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start}
.globe-card{background:white;padding:18px;border-radius:12px;box-shadow:0 18px 48px rgba(47,69,92,0.06);display:flex;align-items:center;justify-content:center;min-height:320px}
.globe-svg{width:100%;height:auto;max-width:560px;display:block}
.node{fill:var(--blue-600);stroke:white;stroke-width:1.5px}
.node-strong{fill:var(--blue-700)}
.map-legend{background:white;padding:14px;border-radius:12px;box-shadow:0 8px 28px rgba(47,69,92,0.04)}

/* Estética tecnológica para el globo */
.globe-card{position:relative;overflow:visible}
.globe-card::after{content:"";position:absolute;inset:-28px;pointer-events:none;border-radius:16px;filter:blur(18px);background:radial-gradient(circle at 20% 20%, rgba(33,208,178,0.06), transparent 10%), radial-gradient(circle at 80% 80%, rgba(29,205,254,0.04), transparent 18%)}
.connector{stroke:rgba(15,23,42,0.14);stroke-width:2;stroke-linecap:round;stroke-dasharray:8 6;animation:dash 6s linear infinite}
.node-core{fill:var(--blue-700);stroke:white;stroke-width:1.5px}
.node-pulse{fill:var(--blue-400);opacity:0.22;transform-origin:center center;animation:pulse 2.6s infinite}
.globe-svg text{fill:rgba(15,23,42,0.7);font-weight:600}

@keyframes pulse{
  0%{transform:scale(0.8);opacity:0.35}
  50%{transform:scale(1.6);opacity:0}
  100%{transform:scale(0.8);opacity:0.35}
}

@keyframes dash{to{stroke-dashoffset:-56}}

/* small hover lift for map card */
.globe-card:hover{transform:translateY(-6px);transition:transform .28s ease}

.legend-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.legend-dot{width:12px;height:12px;border-radius:50%}
.legend-dot.primary{background:var(--blue-700)}
.legend-dot.secondary{background:var(--blue-600)}
.legend-dot.light{background:var(--blue-400)}

@media(max-width:900px){.map-wrap{grid-template-columns:1fr}.map-section{padding:2rem 0}}

/* Styles for Store page removed */

/* Desktop layouts: aplicar columnas fijas solo en pantallas grandes */
@media(min-width:900px){
  .fortuno-grid{grid-template-columns:420px 1fr}
  .sheetly-grid{grid-template-columns:460px 1fr}
  .map-wrap{grid-template-columns:1fr 340px}
  .contact-inner{grid-template-columns:1fr 320px}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 320px}
  .hero-inner{grid-template-columns:1fr 480px}
}

/* Evitar que la decoración del globo genere overflow en pantallas pequeñas */
@media(max-width:900px){
  .globe-card::after{display:none}
}

/* Pequeñas mejoras específicas para pantallas muy pequeñas */
@media (max-width:480px){
  .container{padding:.6rem}
  .hero{padding:2rem 0}
  .hero h1{font-size:1.4rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-features{padding-left:0;margin-left:0}
  .hero-illustration{order:2}
  .hero-content{order:1}
  .products-grid{grid-template-columns:1fr}
  .leaders-grid{grid-template-columns:1fr}
  .footer-grid{padding:0 .75rem}
  .footer-newsletter{flex-direction:column;align-items:stretch}
  .footer-newsletter input{width:100%}
  .map-wrap{grid-template-columns:1fr}
}

/* Evitar desplazamiento horizontal en móviles (solo cuando la pantalla es pequeña) */
/* global overflow-x:hidden aplicado en la raíz */

/* En pantallas muy pequeñas ocultar la laptop decorativa para evitar offsets inesperados */
@media (max-width:480px){
  .sheetly-laptop{display:none !important}
  /* view-toggle removed */
}

/* Sheetly Suite - sección destacada */
.sheetly-suite{background:linear-gradient(180deg, rgba(33,208,178,0.03), rgba(29,205,254,0.02));padding:3.4rem 0}
.sheetly-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center}
.sheetly-media{position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;min-height:360px}
.sheetly-img{width:100%;max-width:560px;border-radius:14px;box-shadow:0 26px 60px rgba(47,69,92,0.08);object-fit:cover;display:block}
.sheetly-visual{width:100%;max-width:560px;height:320px;border-radius:14px;box-shadow:0 26px 60px rgba(47,69,92,0.08);background-image:none;background-size:cover;background-position:center;display:block}
.sheetly-laptop{position:absolute;right:-28px;top:50%;width:260px;box-shadow:0 20px 48px rgba(47,69,92,0.10);border-radius:12px;background:white;padding:8px;z-index:2;transform:translateY(-50%) rotate(-3deg);transition:transform .18s ease,box-shadow .18s ease;max-width:40%}
.sheetly-laptop:hover{transform:translateY(-50%) rotate(-1deg) translateY(-4px);box-shadow:0 28px 60px rgba(47,69,92,0.12)}
.sheetly-content{padding:1.25rem}
.sheetly-badge{display:inline-block;background:linear-gradient(90deg,var(--blue-600),var(--blue-400));color:white;padding:.35rem .6rem;border-radius:999px;font-weight:700;margin-bottom:.6rem}
.sheetly-title{margin:.35rem 0 0;font-size:1.35rem}
.sheetly-features li{margin-bottom:.5rem}

@media(max-width:900px){
  .sheetly-grid{grid-template-columns:1fr;gap:1rem}
  .sheetly-media{order:1}
  .sheetly-content{order:2}
  .sheetly-img{max-width:100%;height:auto}
  .sheetly-visual{height:220px;background-size:cover}
  .sheetly-laptop{position:static;width:180px;margin-top:10px;transform:none}
}

/* En pantallas muy pequeñas colapsar el espacio de la visual */
@media(max-width:600px){
  .sheetly-media{min-height:0}
}

/* Reduce offset and size for intermediate widths to avoid overflow */
@media (max-width:1200px){
  .sheetly-laptop{right:-12px;width:220px}
}

@media (max-width:1000px){
  .sheetly-laptop{right:-6px;width:200px}
}