/* =========================================================
   Cerratto Outlet — el lado fucsia de la marca.
   Se carga DESPUÉS de estilos.css y solo en outlet.html.
   ========================================================= */
body.outlet {
  --papel: #fdeef4;
  --crema: #f9dbe7;
  --linea: #efc3d5;
  --tinta: #13182b;
  --gris: #6b5563;
  --acento: #e0157f;
  --denim: #13182b;
  --display: "Clash Display", "Manrope", system-ui, sans-serif;
  background: var(--papel);
}
.outlet .announce { background: var(--acento); color: #fff; }
.outlet .site-header { background: rgba(253, 238, 244, .94); }
.outlet .site-nav a[aria-current] { color: var(--acento); }

.outlet-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; min-height: min(86svh, 820px);
  background: var(--acento); color: #fff;
}
.outlet-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 110px) var(--gutter); position: relative; z-index: 1; }
.outlet-hero .logo-outlet { width: clamp(180px, 22vw, 300px); margin-bottom: 18px; }
.outlet-hero .script {
  font: 400 clamp(56px, 6vw, 92px)/1 "Mrs Saint Delafield", "Brush Script MT", cursive;
  transform: rotate(-6deg); transform-origin: left; margin: -6px 0 28px 6px;
}
.outlet-hero h1 {
  font: 700 clamp(56px, 9vw, 150px)/.86 var(--display);
  text-transform: uppercase; letter-spacing: -.02em;
}
.outlet-hero h1 span { color: var(--tinta); display: block; }
.outlet-hero p { margin-top: 26px; max-width: 38ch; font-size: 17px; opacity: .92; }
.outlet-hero .btn { margin-top: 34px; align-self: flex-start; background: #fff; color: var(--acento); border-color: #fff; }
.outlet-hero .btn:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.outlet-hero-media { position: relative; }
.outlet-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outlet-hero-media .sticker {
  position: absolute; left: -54px; top: 18%; z-index: 2;
  width: 132px; height: 132px; border-radius: 50%; background: var(--tinta); color: #fff;
  display: grid; place-content: center; text-align: center; transform: rotate(-10deg);
  font: 700 13px/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em;
}
.sticker b { display: block; font-size: 36px; color: var(--acento); }
@media (max-width: 860px) {
  .outlet-hero { grid-template-columns: 1fr; }
  .outlet-hero-media { aspect-ratio: 5 / 4; order: -1; }
  .outlet-hero-media .sticker { left: auto; right: 16px; top: auto; bottom: -40px; width: 110px; height: 110px; }
  .sticker b { font-size: 30px; }
}

.outlet .h2 { font: 700 clamp(30px, 4vw, 56px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.outlet .h2 em { font-style: normal; color: var(--acento); }
.outlet .chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); }
.outlet .filtros { background: rgba(253, 238, 244, .96); }
.outlet .card-media { background: var(--crema); }
.outlet .card-price .price-now { color: var(--acento); }
.outlet .btn-solid { background: var(--acento); border-color: var(--acento); }
.outlet .btn-solid:hover { background: var(--tinta); border-color: var(--tinta); }
.outlet .ficha { background: #fff; }
.outlet .ficha-info h2 { font: 700 clamp(26px, 2.6vw, 36px)/1 var(--display); text-transform: uppercase; }
.outlet .opciones input:checked + span { background: var(--acento); border-color: var(--acento); }

.reglas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.regla { background: #fff; padding: 28px; }
.regla b { display: block; font: 700 15px/1.3 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.regla p { font-size: 14.5px; color: var(--gris); }
@media (max-width: 760px) { .reglas { grid-template-columns: 1fr; } }

/* Piezas del outlet (sin fotos todavía): tarjetas que abren WhatsApp */
.sticker .sticker-precio { font-size: 26px; }
.outlet-nota { margin-bottom: 28px; }
.piezas-outlet { padding-bottom: clamp(48px, 7vw, 96px); }
.pieza-outlet { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; transition: transform .2s; }
.pieza-outlet:hover { transform: translateY(-3px); }
.pieza-precio { font: 700 22px/1 var(--display); color: var(--acento); margin-top: 12px; }
.pieza-outlet .link-arrow { margin-top: 10px; font-size: 13px; }
@media (max-width: 860px) { .sticker .sticker-precio { font-size: 22px; } }

.volver { background: var(--tinta); color: #fff; text-align: center; }
.volver .h2 { color: #fff; }
.volver p { color: rgba(255,255,255,.7); margin: 16px auto 30px; max-width: 44ch; }