/* Welcome screen, matched to the approved MundoPet composition. */
:root {
  --blue: #073d76;
  --ink: #082f5b;
  --turquoise: #009ea6;
  --yellow: #ffcf22;
  --paper: #f1faff;
}
body { background: var(--paper); }
.prototype { padding: 4px 12px; background: #e7f6fc; color: #335a74; font-size: 9px; }
.prototype span { display: inline; margin-left: 7px; font-size: 9px; }
header { max-width: 1184px; padding: 6px 18px; margin: auto; background: white; border: 0; }
.brand img { width: 93px; height: auto; }
.brand span, .logo-note { display: none; }
nav { gap: 12px; }
header nav a:first-child { display: inline-grid; }
nav a { display: inline-grid; place-items: center; min-height: 44px; font-weight: 650; }
nav a[href="#inicio"] { color: var(--ink); background: #fff1b0; padding: 0 12px; border-radius: 16px; }
main { min-height: 0; }
.store-home { max-width: 1184px; margin: auto; background: white; overflow: hidden; padding-bottom: 24px; }
.store-hero { position: relative; isolation: isolate; overflow: hidden; background: #e6f8ff; min-height: 333px; text-align: center; padding: 22px 22px 148px; }
.hero-blobs { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 50%, #fff 22%, transparent 80%); }
.hero-blobs::before, .hero-blobs::after { content:""; position:absolute; border-radius:50% 40% 54% 46%; }
.hero-blobs::before { width:130px; height:165px; transform:rotate(36deg); left:-98px; top:38px; background:#80d5ff; box-shadow:35px 170px 0 6px #ffed98; }
.hero-blobs::after { width:146px; height:160px; transform:rotate(-40deg); right:-109px; top:-62px; background:#21addb; box-shadow:-95px 270px 0 5px #8ee5e5; }
.store-hero::before,.store-hero::after { content:""; position:absolute; width:46px; height:46px; background:#50bced; mask:url('../assets/paw.svg') center/contain no-repeat; opacity:.24; transform:rotate(-18deg); left:4%; top:48%; }
.store-hero::after { left:auto; right:2%; top:35%; transform:rotate(15deg); width:35px; height:35px; }
.hero-text { position:relative; z-index:1; margin:auto; width:fit-content; }
.hero-text h1 { font-family:"Trebuchet MS","Segoe UI",sans-serif; font-size:clamp(34px,8vw,41px); line-height:1.02; letter-spacing:-1.6px; font-weight:900; max-width:290px; margin:0 auto 12px; color:#07346b; }
.hero-text strong { display:block; color:#008e98; }
.hero-text p { color:#174977; font-size:14px; line-height:1.45; margin:0 auto; max-width:250px; }
.hero-pets { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(90%,330px); height:auto; mix-blend-mode:multiply; }
.store-entries { display:grid; gap:9px; margin:-5px 12px 0; position:relative; }
.entry-card { --tile:#fff3be; --button:var(--yellow); position:relative; isolation:isolate; overflow:hidden; border:6px solid white; border-radius:24px; background:var(--tile); padding:17px 16px 14px; box-shadow:0 4px 14px #006a9720; }
.entry-card.wholesale { --tile:#dbf6f4; --button:#007e86; }
.entry-copy { position:relative; z-index:1; width:60%; }
.entry-copy h2 { font-family:"Trebuchet MS","Segoe UI",sans-serif; font-weight:900; color:#07346b; letter-spacing:-1px; font-size:27px; line-height:.98; margin:0 0 8px; }
.entry-copy h2 strong { font-weight:900; }
.wholesale .entry-copy strong { color:#00858e; }
.entry-copy p { font-size:13px; line-height:1.5; margin:0; color:#174977; }
.entry-symbol { position:absolute; left:43%; top:15px; color:var(--blue); }
.entry-symbol svg { width:26px; height:26px; }
.entry-art { position:absolute; right:1%; bottom:28px; width:45%; max-height:84%; object-fit:contain; mix-blend-mode:multiply; z-index:-1; }
.wholesale .entry-art { right:0; top:12px; bottom:auto; width:36%; }
.entry-action { display:inline-flex; align-items:center; gap:9px; background:var(--button); color:var(--ink); border:0; border-radius:24px; padding:7px 8px 7px 14px; margin-top:15px; min-height:44px; font-size:12px; font-weight:750; transition:box-shadow .18s; }
.entry-action i { display:grid; place-items:center; width:25px; height:25px; background:#035385; color:white; border-radius:50%; }
.entry-action svg { width:17px; height:17px; }
.wholesale .entry-action { color:white; }
.entry-action:hover, .entry-action:focus-visible { box-shadow:0 3px 12px #00395c33; }
.store-section { padding:24px 16px 0; }
.store-section h2 { font-size:20px; letter-spacing:-.6px; line-height:1.25; font-weight:800; margin:0; }
.store-section-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.store-section-head a { color:var(--blue); font-size:12px; font-weight:650; text-decoration:none; padding:12px 0; }
.store-categories { display:flex; gap:10px; overflow:auto; margin-top:12px; padding:3px 3px 8px; scroll-snap-type:x proximity; }
.store-categories button { background:white; color:var(--ink); border:0; padding:0; flex:0 0 71px; scroll-snap-align:start; display:grid; justify-items:center; gap:7px; font-size:11px; font-weight:650; border-radius:10px; }
.store-categories img { display:block; border-radius:14px; width:100%; height:auto; }
.section-note { font-size:11px; color:var(--muted); margin:4px 0 13px; }
.featured-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.featured-card { min-width:0; border:1px solid #d8eaf5; border-radius:18px; overflow:hidden; background:white; box-shadow:0 3px 10px #00679a06; }
.featured-photo { padding:10px 8px 0; aspect-ratio:1.45; }
.featured-photo img { display:block; width:100%; height:100%; object-fit:contain; border-radius:8px; }
.preview-label { display:none; }
.featured-body { padding:10px 11px 12px; }
.featured-category { color:#176b7e; font-size:10px; }
.featured-card h3 { font-size:14px; line-height:1.3; min-height:36px; margin:5px 0 7px; }
.featured-card p { font-size:11px; color:#495f74; margin:0 0 9px; }
.consult-product { min-height:44px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:3px; background:#e9f5fc; color:var(--blue); border:0; border-radius:12px; font-weight:650; font-size:10px; padding:8px; }
.consult-product svg,.empty-category>svg { width:20px; height:20px; }
.empty-category { padding:22px; text-align:center; border:1px dashed #adcddd; border-radius:20px; }
.product-card:focus { outline:3px solid #cb9e12; outline-offset:4px; }
footer { max-width:1184px; margin:auto; font-size:11px; background:#e3f6fb; }
@media(min-width:650px) {
  header { padding:9px 24px; }
  .brand img { width:108px; }
  .brand span { display:block; }
  .store-hero { min-height:285px; padding:35px 14% 50px 34%; }
  .hero-text h1 { max-width:560px; font-size:clamp(36px,4vw,52px); }
  .hero-text strong { display:inline; }
  .hero-text p { max-width:360px; font-size:16px; }
  .hero-pets { left:2%; transform:none; width:34%; max-width:372px; bottom:7px; }
  .hero-blobs::after { width:260px; height:210px; }
  .store-entries { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:-13px 20px 0; }
  .entry-card { padding:20px; min-height:181px; }
  .entry-copy h2 { font-size:31px; }
  .entry-art { max-width:210px; bottom:8px; }
  .store-section { padding:27px 26px 0; }
  .store-categories { max-width:960px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:15px; }
  .store-categories img { width:82px; }
  .featured-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .featured-body { padding:13px; }
}
@media(min-width:1000px) {
  .store-hero { min-height:284px; padding:40px 19% 65px 30%; }
  .store-hero::before { left:35%; top:74%; }
  .store-hero::after { right:13%; top:36%; width:65px; height:65px; }
  .store-entries { margin-inline:26px; }
  .entry-card { padding:20px 23px; min-height:188px; }
  .entry-copy h2 { font-size:34px; }
  .entry-action,.store-categories button { font-size:13px; }
  .entry-symbol { left:36%; }
  .store-section h2 { font-size:24px; }
  .featured-card h3 { font-size:17px; }
  .featured-photo { aspect-ratio:1.65; }
  .consult-product { font-size:12px; }
}