/* Portada: las cuatro áreas principales y la franja de la tienda (solo se carga en la portada). */

/* Luz que sigue al puntero en las tarjetas .spot (site.js pone --mx y --my). */
.spot{--mx:50%;--my:0%;position:relative;isolation:isolate;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(460px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 24%,transparent),transparent 65%)}
.spot:hover::before,.spot:focus-within::before{opacity:1}

/* Áreas principales */
.home-areas{position:relative;overflow:hidden}
.home-areas::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 30% 50%,rgba(31,91,255,.16),transparent 70%),radial-gradient(40% 50% at 75% 60%,rgba(255,106,0,.1),transparent 70%)}
.home-areas .in{position:relative;z-index:1}
.hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hub-card{--accent:var(--azul-claro);display:flex;flex-direction:column;gap:20px;min-width:0;padding:14px 14px 30px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--carbon);border:1px solid var(--linea-o);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.hub-card::after{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:2px;opacity:.7;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.hub-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 50%,var(--linea-o));
  box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--accent) 14%,transparent)}
.hub-scene{display:block;border-radius:16px;overflow:hidden}
.hub-scene .scene{aspect-ratio:480/230;border-radius:16px;transition:transform .8s var(--ease)}
.hub-card:hover .hub-scene .scene{transform:scale(1.025)}
.hub-body{display:flex;flex:1;flex-direction:column;gap:14px;padding-inline:16px}
.hub-num{font:500 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hub-num i{font-style:normal;color:var(--niebla);opacity:.6}
.hub-card h3{font:800 clamp(1.7rem,2.6vw,2.3rem)/1.04 var(--display);letter-spacing:-.04em}
.hub-card h3 a{color:var(--blanco);text-decoration:none}
.hub-card h3 a:hover{color:var(--accent)}
.hub-text{color:var(--niebla);font-size:1rem;max-width:34em}
.hub-links{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hub-links a{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid var(--linea-o);background:rgba(255,255,255,.02);
  color:var(--blanco);font-size:.86rem;line-height:1.3;text-decoration:none;transition:border-color .25s,background .25s,color .25s}
.hub-links a:hover,.hub-links a:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.hub-card .link{margin-top:auto;align-self:flex-start}
.hub-card .link .arrow{color:var(--accent)}

/* Franja de la tienda */
.store-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 56px;align-items:center;
  padding:clamp(26px,4.5vw,56px);border-radius:26px;color:var(--blanco);
  background:radial-gradient(80% 120% at 100% 0%,rgba(31,91,255,.38),transparent 60%),radial-gradient(60% 90% at 0% 100%,rgba(255,106,0,.18),transparent 60%),var(--negro);
  box-shadow:0 40px 100px rgba(10,11,13,.24),inset 0 0 0 1px rgba(255,255,255,.06)}
.store-band-txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.store-band-txt .note{color:var(--niebla);font-size:1.05rem;max-width:30em}
.store-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.store-tile{--accent:var(--azul);display:flex;flex-direction:column;gap:8px;min-width:0;padding:26px 24px 24px;border-radius:18px;
  background:var(--blanco);border:1px solid var(--linea);color:var(--negro);text-decoration:none;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.store-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease)}
.store-tile:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,var(--linea));box-shadow:0 26px 60px rgba(15,35,95,.14)}
.store-tile:hover::after{transform:scaleX(1)}
.store-tile .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:6px;
  background:color-mix(in srgb,var(--accent) 12%,var(--blanco));color:var(--accent);transition:background .3s,color .3s}
.store-tile:hover .ico{background:var(--accent);color:var(--blanco)}
.store-tile .ico svg{width:24px;height:24px}
.store-tile-label{font:500 .7rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.store-tile h3{font:800 1.28rem/1.15 var(--display);letter-spacing:-.03em}
.store-tile-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin-top:4px}
.store-tile-price b{font:800 1.5rem/1.1 var(--display);letter-spacing:-.03em;color:var(--negro)}
.store-tile-price span{font-size:.84rem;color:var(--gris)}
.store-tile-price span:first-child{flex-basis:100%;font:500 .7rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.store-tile-sub{font-size:.9rem;color:var(--gris)}
.store-tile .link{margin-top:auto;padding-top:10px;font-size:.92rem}
.store-tile .link .arrow{color:var(--naranja)}

/* Productos propios dentro de «Trabajo que se puede ver» */
.own-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:clamp(48px,6vw,72px) 0 26px;padding-top:28px;border-top:1px solid var(--linea)}
.own-head .eyebrow{margin:0}
.own-head h3{font:800 clamp(1.4rem,2.2vw,1.9rem)/1.1 var(--display);letter-spacing:-.03em}
.cases.own-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.case.own .lamina{position:relative;display:block}
.own-logo{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;height:42px;padding:6px 12px;border-radius:10px;background:var(--blanco);
  box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .5s var(--ease)}
.own-logo{grid-auto-flow:column;gap:8px}
.own-logo img{width:auto;height:30px;max-width:110px;object-fit:contain}
.own-logo b{font:800 .95rem/1 var(--display);letter-spacing:-.02em;color:var(--negro)}
.case.own:hover .own-logo{transform:translateY(-3px)}
.case.own:hover .own-logo img{transform:none}
.case.own h3{font-size:1.32rem}
.case.own h3 a{color:inherit;text-decoration:none}
.case.own h3 a:hover{color:var(--naranja)}
.case.own p:not(.eyebrow){font-size:.95rem}
.own-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:auto;padding-top:4px}
.own-site{font:500 .72rem/1.3 var(--mono);letter-spacing:.06em;color:var(--gris);text-decoration:none;border-bottom:1px dashed var(--linea)}
.own-site:hover{color:var(--negro);border-bottom-color:var(--naranja)}

@media (max-width:1060px){.cases.own-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cases.own-products{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1060px){.store-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.store-band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.hub{grid-template-columns:minmax(0,1fr)}.hub-body{padding-inline:8px}}
@media (max-width:520px){.store-tiles{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hub-card,.store-tile,.hub-scene .scene,.store-tile::after{transition:none}.hub-card:hover,.store-tile:hover{transform:none}}