/* ===== Página inicial tipo tienda online (solo index.html, body.inicio) =====
   Colores del logo: azul #0556B6, celeste #1E9BDC / #5BB3E4, marino #062A5E.
   Acento que combina y llama la atención: naranja #D9480F (botones de compra y ofertas). */
body.inicio{
  --marino:#062A5E; --marino2:#0d3d82; --azul:#0556B6; --cielo:#1E9BDC; --claro:#5BB3E4; --hielo:#eaf4fb;
  --naranja:#D9480F; --naranja2:#a8370b; --sol:#FFC72C;
  --fondo:#ffffff; --gris-f:#f4f7fa; --tinta:#14233a; --linea:#dce8f2; --gris:#5d6b7f;
  --disp:"Bricolage Grotesque",system-ui,sans-serif; --texto:"DM Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  background:var(--fondo);font-family:var(--texto);color:var(--tinta)
}
.inicio h1,.inicio h2,.inicio h3{font-family:var(--disp);letter-spacing:-.02em}
.inicio section{padding:0}
.inicio .wrap{max-width:1180px;padding:0 16px}
.inicio h2 em,.inicio h1 em{font-style:normal}

/* encabezado */
.inicio .ti-head{background:#fff;border-bottom:1px solid var(--linea)}
.inicio .ti-head .wrap{display:flex;align-items:center;gap:14px;height:66px}
.inicio .logo{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:1.02rem;color:var(--marino);text-decoration:none}
.inicio .ti-head .logo{margin-right:auto}
.inicio .logo img{width:auto;height:30px}
.ti-nav{display:none;gap:2px}
.ti-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem;color:var(--marino);text-transform:uppercase;letter-spacing:.02em}
.ti-nav a:hover{color:var(--azul);background:var(--hielo)}
.ti-wa{display:flex;align-items:center;gap:6px;background:#25D366;color:#fff;text-decoration:none;border-radius:999px;padding:9px 14px;font-size:.88rem;font-weight:700}
.ti-wa b{display:none}
@media(min-width:900px){.ti-nav{display:flex}.ti-wa b{display:inline}}

/* botones */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:15px 26px;cursor:pointer;text-decoration:none;
  background:var(--sol);color:var(--marino);font-family:var(--disp);font-weight:800;font-size:1.08rem;letter-spacing:.01em;
  box-shadow:0 6px 0 -1px #d9a400,0 14px 26px rgba(255,199,44,.35);transition:transform .15s ease,filter .15s ease}
.cta span{font-size:1.4rem;line-height:1}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:translateY(3px)}
.cta-2{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--azul);color:var(--azul);border-radius:12px;padding:13px 22px;font-weight:700;text-decoration:none;background:#fff}
.cta-2:hover{background:var(--hielo)}
.cta:focus-visible,.cta-2:focus-visible{outline:3px solid var(--cielo);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  @keyframes salto{0%,72%,100%{transform:translateY(0)}78%{transform:translateY(-9px)}84%{transform:translateY(0)}89%{transform:translateY(-4px)}94%{transform:translateY(0)}}
  .hero-btns .cta{animation:salto 3s ease-in-out infinite}
  .hero-btns .cta:hover,.hero-btns .cta:active,.hero-btns .cta:focus-visible{animation:none}
}

/* portada (fondo claro, producto grande sobre una forma azul del logo) */
.hero-t{background:linear-gradient(180deg,#f3f8fc,#fff);overflow:hidden}
.hero-t-in{display:grid;gap:8px;padding-top:22px !important;padding-bottom:24px !important}
.chip{display:inline-block;margin:0;border:1.5px solid var(--azul);color:var(--azul);background:#fff;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:8px}
.hero-t h1{font-size:clamp(2.3rem,9.5vw,4.4rem);font-weight:800;line-height:.98;margin:14px 0 0;color:var(--marino);text-align:left;text-transform:uppercase;max-width:none}
.hero-t h1 em{display:block;color:var(--azul)}
.hero-sub{color:var(--gris);margin:14px 0 0;max-width:42ch;font-size:1rem;text-align:left}
.hero-precio{display:flex;align-items:baseline;gap:12px;margin-top:18px;flex-wrap:wrap}
.hero-precio s{color:var(--gris)}
.hero-precio strong{font-family:var(--disp);font-size:2.5rem;font-weight:800;line-height:1;color:var(--marino)}
.hero-precio span{background:var(--sol);color:var(--marino);font-family:var(--mono);font-weight:700;font-size:.72rem;padding:5px 9px;border-radius:6px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-btns .cta{flex:1 1 200px}
.hero-btns .cta-2{flex:0 1 auto}
.hero-mini{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hero-mini li{display:flex;flex-direction:column;gap:4px;font-size:.74rem;color:var(--gris);line-height:1.25}
.hero-mini i{font-style:normal;font-size:1.1rem}
.hero-mini b{display:block;color:var(--marino);font-size:.8rem}
/* zona de la foto: círculo azul del logo centrado + foto con marco + datos flotantes */
.hero-foto{position:relative;display:grid;place-items:center;order:-1;min-height:400px;text-decoration:none;isolation:isolate}
.hero-forma{position:absolute;width:min(92%,360px);aspect-ratio:1;border-radius:50%;z-index:-2;
  background:radial-gradient(circle at 30% 25%,var(--claro),var(--azul) 55%,var(--marino));box-shadow:0 30px 60px rgba(5,86,182,.25)}
.hero-aro{position:absolute;width:min(104%,410px);aspect-ratio:1;border-radius:50%;border:2px dashed rgba(5,86,182,.25);z-index:-1}
.hero-marco{position:relative;display:block;background:#fff;padding:7px;border-radius:24px;transform:rotate(-3deg);
  box-shadow:0 24px 44px rgba(6,42,94,.3);transition:transform .3s ease}
.hero-foto:hover .hero-marco{transform:rotate(0) scale(1.02)}
.hero-marco img{display:block;height:340px;width:auto;border-radius:18px;object-fit:cover}
.hero-sello{position:absolute;top:-18px;right:-26px;width:84px;height:84px;border-radius:50%;background:var(--sol);color:var(--marino);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;line-height:1;transform:rotate(12deg);box-shadow:0 10px 24px rgba(0,0,0,.2);border:3px solid #fff}
.hero-sello b{font-size:1.6rem}.hero-sello small{font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;margin-top:3px}
.hero-dato{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:8px 12px;box-shadow:0 12px 28px rgba(6,42,94,.18);
  color:var(--gris);font-size:.7rem;line-height:1.2;white-space:nowrap}
.hero-dato i{font-style:normal;font-size:1.1rem}
.hero-dato b{display:block;color:var(--marino);font-size:.82rem}
.hero-dato.d1{left:0;top:16%}
.hero-dato.d2{right:0;top:46%}
.hero-dato.d3{left:2%;bottom:8%}
@media (prefers-reduced-motion:no-preference){
  @keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .hero-dato{animation:flota 4s ease-in-out infinite}
  .hero-dato.d2{animation-delay:-1.3s}.hero-dato.d3{animation-delay:-2.6s}
}
@media(min-width:900px){
  .hero-t-in{grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding-top:44px !important;padding-bottom:44px !important}
  .hero-foto{order:0;min-height:580px}
  .hero-forma{width:470px}
  .hero-aro{width:540px}
  .hero-marco img{height:470px}
  .hero-dato{font-size:.78rem;padding:10px 14px}
  .hero-dato b{font-size:.92rem}
  .hero-dato.d1{left:2%;top:18%}
  .hero-dato.d2{right:0;top:44%}
  .hero-dato.d3{left:6%;bottom:12%}
  .hero-mini{max-width:520px}
  .hero-mini li{flex-direction:row;align-items:center;gap:8px}
}

/* franja de garantías */
.franja{background:var(--gris-f);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.franja .wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding-top:16px;padding-bottom:16px}
.franja div{display:flex;gap:10px;align-items:center}
.franja i{font-style:normal;font-size:1.3rem;flex:none}
.franja span{font-size:.76rem;color:var(--gris);line-height:1.3}
.franja b{display:block;color:var(--marino);font-size:.84rem;text-transform:uppercase;letter-spacing:.02em}
@media(min-width:900px){.franja .wrap{grid-template-columns:repeat(4,1fr)}}

/* títulos de sección centrados con palabra en azul y raya debajo */
.inicio .ti-cats h2,.inicio .ti-prod h2,.inicio .porque h2,.inicio .ti-faq h2{font-size:clamp(1.5rem,5vw,2rem);font-weight:800;color:var(--marino);text-align:center;margin:0 0 18px;text-transform:uppercase}
.inicio h2 em{color:var(--azul)}
.inicio .ti-cats h2:after,.inicio .porque h2:after,.inicio .ti-faq h2:after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:var(--naranja);margin:8px auto 0}
.ti-cats{margin-top:36px}
.ti-prod{margin-top:40px}
.porque{margin-top:44px}
.ti-faq{margin-top:44px;padding-bottom:34px !important}

/* categorías en círculos con foto (orden del generador: pijamas, morrales, bolsos y maletas) */
.inicio .catgrid{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.inicio .catcard{display:flex;flex-direction:column;align-items:center;gap:8px;width:100px;padding:0;border:0;background:none;text-decoration:none;text-align:center}
.inicio .catcard:before{content:"";width:100px;height:100px;border-radius:50%;background:var(--hielo) center/cover no-repeat;border:3px solid #fff;box-shadow:0 0 0 2px var(--linea),0 8px 18px rgba(6,42,94,.12);transition:transform .2s ease,box-shadow .2s ease}
.inicio .catgrid .catcard:nth-child(1):before{background-image:url(../img/vaquera.webp);background-position:center 20%}
.inicio .catgrid .catcard:nth-child(2):before{background-image:url(../img/morral-vinotinto.webp)}
.inicio .catgrid .catcard:nth-child(3):before{background-image:url(../img/maletin-viajero-4.webp);background-position:center 55%}
.inicio .catcard:hover:before{transform:translateY(-3px);box-shadow:0 0 0 2px var(--azul),0 12px 22px rgba(6,42,94,.18)}
.inicio .catcard b{color:var(--marino);font-family:var(--texto);font-weight:700;font-size:.86rem;line-height:1.2}
.inicio .catcard span{display:none}
@media(min-width:760px){.inicio .catgrid{gap:44px}.inicio .catcard{width:150px}.inicio .catcard:before{width:150px;height:150px}.inicio .catcard b{font-size:1rem}}

/* productos */
.ti-prod-top{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:18px}
.ti-prod-top h2{margin:0 !important}
.inicio .search{margin:0;max-width:420px;width:100%;border-radius:999px;border-color:var(--linea);background:#fff}
.inicio .card{border:1px solid var(--linea);border-radius:14px;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease;position:relative}
.inicio .card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(5,86,182,.14)}
.inicio .thumb{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--hielo)}
.inicio .thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
.inicio .card-b p{font-size:.86rem;flex:0}
.inicio .card-b .btn{margin-top:auto}
.inicio .card-b h3{font-family:var(--texto);font-weight:700;letter-spacing:0;color:var(--tinta);font-size:1rem;line-height:1.3}
.inicio .card .price .small{flex-basis:100%;margin:0}
.inicio .price b{color:var(--marino);font-family:var(--disp);font-weight:800}
/* etiqueta de descuento sobre la foto, como en las tiendas */
.inicio .card .tag-off{position:absolute;top:10px;left:10px;z-index:2;background:var(--sol);color:var(--marino);border-radius:6px;font-family:var(--mono);font-size:.68rem;padding:3px 8px}
.inicio .card .tag-off:before{content:"AHORRA "}
.inicio .card .btn{background:var(--azul);border-radius:10px;font-size:.9rem;padding:10px 12px;font-weight:700}
.inicio .card .btn:hover{filter:brightness(1.07)}
/* producto destacado: borde y etiqueta "Más pedido" a la derecha */
.inicio .card.es-dest{border:2px solid var(--azul)}
.inicio .card.es-dest:after{content:"⭐ Más pedido";position:absolute;top:10px;right:10px;z-index:2;background:var(--azul);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:.64rem;padding:4px 8px;border-radius:6px}

/* banner de oferta */
.oferta{margin-top:44px}
.oferta-in{background:linear-gradient(120deg,var(--marino),var(--marino2) 60%,var(--azul));color:#fff;border-radius:18px;padding:24px 20px;display:grid;gap:14px;position:relative;overflow:hidden}
.oferta-in:after{content:"";position:absolute;width:300px;height:300px;right:-90px;bottom:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,179,228,.45),rgba(91,179,228,0))}
.oferta-ico{font-size:2.6rem;line-height:1}
.oferta-tx p{margin:0;color:var(--sol);font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.inicio .oferta-tx h2{color:#fff;text-align:left;margin:6px 0 4px;font-size:clamp(1.7rem,6vw,2.6rem);font-weight:800;text-transform:uppercase}
.inicio .oferta-tx h2 em{color:#ff9a62}
.oferta-tx span{color:#d4e4f5}
.oferta .cta{justify-self:start;position:relative;z-index:1}
@media(min-width:900px){.oferta-in{grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:30px 40px}}

/* por qué comprar con nosotros */
.porque-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.porque-g div{border:1px solid var(--linea);border-radius:14px;padding:16px 14px;text-align:center;background:#fff}
.porque-g i{font-style:normal;font-size:1.6rem;display:block}
.porque-g b{display:block;color:var(--marino);margin-top:6px;font-size:.95rem}
.porque-g span{display:block;color:var(--gris);font-size:.82rem;margin-top:4px;line-height:1.35}
@media(min-width:900px){.porque-g{grid-template-columns:repeat(4,1fr);gap:14px}}

/* preguntas */
.inicio #faq details{border-color:var(--linea);border-radius:12px;max-width:none}
.inicio #faq summary{color:var(--marino)}
@media(min-width:900px){.inicio #faq{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}}

/* pie de página completo */
.inicio footer.pie{background:var(--marino);color:#c9d8ea;text-align:left;border:0;padding:34px 0 20px;margin-top:10px}
.pie-g{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.pie-marca{grid-column:1/-1}
.inicio .pie .logo{color:#fff}
.inicio .pie .logo img{background:#fff;border-radius:10px;padding:5px 7px;height:40px;box-sizing:content-box}
.pie-marca p{margin:10px 0 0;font-size:.88rem;max-width:36ch}
.pie-g b{display:block;color:#fff;margin-bottom:8px;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em}
.inicio .pie-g a,.pie-g>div>span{display:block;color:#c9d8ea;text-decoration:none;font-size:.88rem;margin:0 0 6px}
.inicio .pie-g a:hover{color:#fff}
.inicio .pie .social a{display:inline-block;margin:0 12px 0 0;color:#fff;font-weight:700}
.pie-fin{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:14px;font-size:.8rem}
.inicio .pie-fin a{color:#c9d8ea;margin:0}
.pie-meta{font-size:.72rem;margin:10px 0 0;opacity:.7}
@media(min-width:900px){.pie-g{grid-template-columns:1.4fr 1fr 1fr 1fr}.pie-marca{grid-column:auto}}
/* en el destacado, la etiqueta de descuento va debajo de "Más pedido" para que no se tapen */
.inicio .card.es-dest:after{left:10px;right:auto}
.inicio .card.es-dest .tag-off{top:40px}