/* ==========================================================================
   María Camila — tema del sitio (va DESPUÉS de styles.css)

   styles.css es el motor (catálogo, carrito, panel). Esta hoja le da la cara de
   la marca: azul petróleo de las letras del logo, fucsia de la acuarela para lo
   que se pulsa, capitales romanas (Marcellus) como el "MARÍA CAMILA" del logo.

   La firma del sitio es la REGLA DEL ZAPATERO: una regla en centímetros con la
   línea de corte del cuero, donde se toca la talla (portada y ficha).
   ========================================================================== */

/* ---------- tipografía ---------- */
h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; letter-spacing: .01em; line-height: 1.08; }
.script {
  font-family: var(--ff-display); font-weight: 400; font-variation-settings: normal; letter-spacing: .005em; line-height: 1;
  background: var(--acuarela); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker { font-size: .7rem; letter-spacing: .2em; color: var(--gold-deep); }
.btn { font-family: var(--ff-body); font-weight: 600; letter-spacing: .02em; border-radius: 999px; }
.btn-gold { --bg-btn: var(--gold); --fg-btn: #fff; }
.btn-gold:hover { --bg-btn: var(--gold-deep); background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; box-shadow: 0 14px 30px -14px rgba(194,24,122,.6); }
.btn-ghost { --fg-btn: var(--azul); }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3rem); }

/* ---------- barra superior y navegación ---------- */
.utilbar { background: var(--azul-tinta); color: rgba(255,255,255,.86); }
.utilbar-in { justify-content: center; text-align: center; }
.utilbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acuarela); }
/* el logo es oscuro: la barra va siempre clara, también sobre la portada */
.nav, .nav.is-solid {
  --nav-fg: var(--ink); --nav-fg-mute: var(--ink-soft); --nav-line: var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-2), 0 12px 30px -26px rgba(17,31,39,.55);
  padding-block: .55rem;
}
.brand-logo-img { height: 50px; max-width: 220px; }
.nav.is-solid .brand-logo-img { height: 44px; }
.nav-links a.link::after { background: var(--acuarela); }
.cart-btn { order: 3; margin-left: .2rem; border-color: var(--line); color: var(--azul); background: var(--paper); border-radius: 999px; }
.cart-btn:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.cart-badge { background: var(--gold); color: #fff; }
.nav-burger { order: 4; }
@media (max-width: 940px) { .brand-logo-img, .nav.is-solid .brand-logo-img { height: 38px; } .cart-btn { margin-left: auto; } }

/* ---------- splash ---------- */
.splash-mark img { width: 92px; height: auto; margin: 0 auto .6rem; }
.splash-mark .m { font-family: var(--ff-display); font-weight: 400; letter-spacing: .32em; text-transform: uppercase; font-size: 1.05rem; }
.splash-bar::after { background: var(--acuarela); }

/* ==========================================================================
   PORTADA
   ========================================================================== */
.mc-hero {
  background:
    radial-gradient(60% 55% at 82% 38%, rgba(194,24,122,.22) 0%, transparent 62%),
    radial-gradient(45% 45% at 70% 70%, rgba(44,159,214,.16) 0%, transparent 60%),
    linear-gradient(165deg, var(--azul) 0%, var(--azul-tinta) 100%);
  padding-top: calc(7.4rem + var(--utilbar-h));
  min-height: min(92vh, 860px);
}
.mc-hero::before { display: none; }
.mc-hero .hero-grid { grid-template-columns: 1fr; }
@media (min-width: 941px) { .mc-hero .hero-grid { grid-template-columns: 1.08fr .92fr; } }
.mc-hero .kicker { color: #f3b6d6; }
.mc-hero .kicker::before { background: var(--acuarela); height: 2px; opacity: 1; }
.mc-hero .hero-title { max-width: 14ch; font-size: clamp(2.5rem, 5.4vw, 4.3rem); color: #fff; }
.mc-hero .hero-title .lg { font-weight: 400; }
.mc-hero .hero-title .script { font-size: clamp(2.9rem, 6.6vw, 5.4rem); margin: .06em 0 .08em; padding-bottom: .06em; }
.mc-hero .hero-sub { color: rgba(255,255,255,.8); font-size: 1.08rem; }
.mc-hero .btn-ghost { --fg-btn: #fff; border-color: rgba(255,255,255,.45); background: transparent; color: #fff; }
.mc-hero .btn-ghost:hover { background: #fff; color: var(--azul); border-color: #fff; }

.hero-search { display: flex; align-items: center; gap: .4rem; margin-top: 1.6rem; max-width: 560px; background: #fff; border-radius: 999px; padding: .32rem .32rem .32rem 1.1rem; box-shadow: 0 24px 50px -26px rgba(0,0,0,.6); }
.hero-search .ic { width: 18px; height: 18px; color: var(--ink-mute); flex: none; }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: .98rem; color: var(--ink); padding: .55rem .2rem; }
.hero-search .btn { padding: .7em 1.3em; }
.mc-hero .hero-actions { margin-top: 1.2rem; }

/* el zapato del logo, de pie sobre la línea — como en el logo cuadrado */
.mc-shoe { position: relative; margin: 0 auto; width: min(100%, 470px); padding-bottom: 3.2rem; }
.mc-shoe-glow { position: absolute; inset: 12% 8% 20%; background: var(--acuarela); filter: blur(70px); opacity: .45; border-radius: 50%; }
.mc-shoe-img { position: relative; width: 88%; height: auto; margin: 0 auto; filter: drop-shadow(0 30px 34px rgba(0,0,0,.35)); animation: mcFloat 7s ease-in-out infinite; }
.mc-shoe-photo { display: none; }
.mc-shoe-photo[src]:not([src=""]) { display: block; position: absolute; right: -4%; bottom: 3.6rem; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.55); }
.mc-shoe-floor { position: absolute; left: 4%; right: 4%; bottom: 2.4rem; height: 2px; background: rgba(255,255,255,.55); }
.mc-shoe-floor::before, .mc-shoe-floor::after { content: ""; position: absolute; top: -5px; width: 1px; height: 12px; background: rgba(255,255,255,.55); }
.mc-shoe-floor::before { left: 0; } .mc-shoe-floor::after { right: 0; }
.mc-shoe-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.mc-shoe-cap span { color: #f3b6d6; }
@keyframes mcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 940px) { .mc-shoe { width: min(78%, 340px); order: -1; } .mc-hero { min-height: 0; } }

/* barra de confianza: clara, pegada al hero */
.trustbar { background: var(--paper); border-bottom: 1px solid var(--line-2); }
.trust svg { color: var(--gold); }
.trust h4 { font-family: var(--ff-display); font-weight: 400; font-size: 1.12rem; }

/* ---------- LA FIRMA: regla del zapatero ---------- */
.mc-tallas { padding: clamp(3.4rem, 7vw, 5.2rem) 0; background: var(--bg); position: relative; }
.mc-tallas::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acuarela); }
.mc-tallas-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.mc-tallas h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-top: .7rem; }
.mc-tallas p { color: var(--ink-mute); margin-top: .8rem; max-width: 40ch; }
.mc-ruler-out { font-family: var(--ff-mono); font-size: .9rem; color: var(--ink); margin-top: 1.2rem; min-height: 1.4em; }
.mc-ruler-out b { color: var(--gold-deep); font-weight: 500; }
@media (max-width: 860px) { .mc-tallas-grid { grid-template-columns: 1fr; } }

.mc-ruler-wrap, .sg-modal .ruler { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: .4rem; }
.ruler { position: relative; min-width: 520px; padding: 0 22px; }
.rl-sizes { position: relative; height: 78px; }
.rl-size {
  position: absolute; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: 58px; padding: .45rem 0 .4rem; border-radius: 10px;
  background: var(--paper); border: 1.5px solid var(--line); color: var(--ink);
  cursor: pointer; transition: transform .2s var(--ease-out), background .2s, border-color .2s, color .2s;
}
.rl-size::after { content: ""; position: absolute; left: 50%; bottom: -15px; width: 2px; height: 14px; background: var(--line); transform: translateX(-50%); }
.rl-size b { font-family: var(--ff-display); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.rl-size span { font-family: var(--ff-mono); font-size: .62rem; color: var(--ink-mute); white-space: nowrap; }
.rl-size:hover { transform: translateX(-50%) translateY(-3px); border-color: var(--gold); }
.rl-size.is-on { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateX(-50%) translateY(-6px); box-shadow: 0 14px 26px -14px rgba(194,24,122,.7); }
.rl-size.is-on span { color: rgba(255,255,255,.86); }
.rl-size.is-on::after { background: var(--gold); height: 20px; bottom: -21px; }
.rl-bar {
  position: relative; height: 58px; border-radius: 8px;
  background: linear-gradient(180deg, #fff, var(--paper));
  border: 1.5px solid var(--azul); box-shadow: inset 0 -10px 18px -14px rgba(37,65,79,.35);
}
.rl-cut { position: absolute; left: 8px; right: 8px; bottom: 9px; border-top: 2px dashed color-mix(in srgb, var(--gold) 70%, transparent); }
.tk { position: absolute; top: 0; width: 1px; height: 9px; background: var(--azul); }
.tk-cm { height: 17px; }
.tk i { position: absolute; top: 19px; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--ff-mono); font-size: .62rem; color: var(--ink-soft); }

/* ---------- accesos por tipo ---------- */
.rooms { background: var(--paper); }
.rooms-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.rooms-grid { grid-template-columns: repeat(4, 1fr); }
.room { background: #fff; border-radius: 16px; }
.room svg { width: 56px; height: 56px; color: var(--azul); }
.room .rn { font-family: var(--ff-display); font-weight: 400; font-size: 1.4rem; }
.room .rk { color: var(--gold-deep); }
.room:hover { background: var(--azul); }
.room:hover svg { color: #f3b6d6; }
@media (max-width: 860px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   CATÁLOGO — tarjetas tipo vitrina
   ========================================================================== */
.catalogo { background: var(--bg); }
.destacados { background: var(--paper); }
.feat-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: .8rem 1rem; align-items: center; margin-bottom: .6rem; }
.feat-controls .filters { grid-column: 1 / -1; order: 3; }
.search input { border-radius: 999px; }
.filter { border-radius: 999px; font-family: var(--ff-body); font-weight: 500; }
.filter.is-active { background: var(--azul); border-color: var(--azul); }
.sort { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.sort select { font-family: var(--ff-body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); padding: .6em 2em .6em .9em; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
.cat-count { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-mute); margin: .4rem 0 1rem; }
@media (max-width: 640px) { .feat-controls { grid-template-columns: 1fr; } .sort { justify-content: space-between; } }

.grid-products { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: clamp(.8rem, 1.6vw, 1.3rem); }
.card { background: #fff; border-radius: 14px; border: 1px solid var(--line-2); }
.card:hover { box-shadow: 0 26px 46px -30px rgba(17,31,39,.45); border-color: var(--line); transform: translateY(-3px); }
.card-media { aspect-ratio: 1 / 1; background: var(--photo-bg, #fff); }
.card-media img { object-fit: contain; padding: 6%; }
.card:hover .card-media img { transform: scale(1.06); }
.card-line { height: 3px; }
.card-fav { background: var(--azul); color: #fff; right: .6rem; top: .6rem; border-radius: 999px; }
.card-flag { position: absolute; z-index: 3; left: .6rem; bottom: .6rem; font-family: var(--ff-body); font-weight: 600; font-size: .78rem; padding: .22em .6em; border-radius: 6px; }
.card-flag.is-offer { background: var(--oferta); color: #fff; }
.card-social { top: auto; bottom: .6rem; left: auto; right: .6rem; }
.card-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.card-kicker { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.card h3 { font-family: var(--ff-body); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--ink); letter-spacing: 0; }
.card-title-link:hover h3 { color: var(--gold-deep); }
.card-colors { display: flex; align-items: center; gap: .3rem; margin: .25rem 0 .1rem; }
.cdot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); display: inline-block; }
.cdot.is-gloss { background-image: linear-gradient(135deg, rgba(255,255,255,.45), transparent 45%) !important; background-color: #0b0b0d !important; }
.cdot-lg { width: 22px; height: 22px; }
.cdot-more { font-family: var(--ff-mono); font-size: .66rem; color: var(--ink-mute); }
.card-buy { margin-top: auto; padding-top: .55rem; }
.card-size { border-radius: 999px; font-family: var(--ff-body); }
.btn-add { border-radius: 999px; background: var(--azul); border-color: var(--azul); font-family: var(--ff-body); }
.btn-add:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* precios (tarjeta y ficha) */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin-top: .2rem; }
.price-now { font-family: var(--ff-body); font-weight: 600; font-size: 1.22rem; color: var(--ink); letter-spacing: -.01em; }
.price-now.is-offer { color: var(--oferta); }
.price-pct { font-family: var(--ff-body); font-weight: 600; font-size: .74rem; color: #fff; background: var(--oferta); padding: .1em .45em; border-radius: 5px; }
.price-old { flex-basis: 100%; font-size: .86rem; color: var(--ink-mute); text-decoration: line-through; }
.price-ask { font-family: var(--ff-mono); font-size: .78rem; color: var(--gold-deep); }
.price-big .price-now { font-size: clamp(1.8rem, 3.4vw, 2.2rem); }
.price-big .price-pct { font-size: .9rem; }
.price-big .price-old { font-size: 1rem; }

/* tarjeta sin foto: silueta del modelo sobre papel de patronaje */
.card-seal, .pd-main .card-seal {
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 18px 100%,
    #fff;
  color: var(--accent);
}
.card-seal::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; pointer-events: none; }
.card-seal .cs-mark { width: 46%; height: auto; aspect-ratio: 1; background: none; border: 0; }
.card-seal .cs-mark svg { width: 100%; height: 100%; color: var(--accent); }
.card-seal .cs-name { font-family: var(--ff-mono); font-size: .9rem; letter-spacing: .12em; color: var(--accent-2); }
.card-seal .cs-sub { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }

/* pedido por mayor */
.cotiza { background: var(--gold); color: #fff; }
.cotiza .kicker { color: #ffd6ea; }
.cotiza h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cotiza p { color: rgba(255,255,255,.86); }
.cotiza-panel { box-shadow: 0 34px 60px -34px rgba(80,0,40,.8); }

/* ---------- taller, respaldo, preguntas, contacto ---------- */
.historia { background: var(--azul-hondo); color: #fff; }
.historia h2 { color: #fff; }
.historia p { color: rgba(255,255,255,.78); }
.historia .kicker { color: #f3b6d6; }
.pillar h4 { font-family: var(--ff-display); font-weight: 400; }
.historia .pillar { border-color: rgba(255,255,255,.14); }
.historia .pillar p { color: rgba(255,255,255,.66); }
.historia .pillar .n { color: #f3b6d6; }
.stats-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.8rem; }
.stats-inline .stat-item { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; }
.stats-inline .stat-icon svg { width: 22px; height: 22px; color: #f3b6d6; }
.stats-inline .stat-number { font-family: var(--ff-display); font-weight: 400; color: #fff; font-size: 1.8rem; }
.stats-inline .stat-label { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.historia-figure .tagchip { background: var(--gold); color: #fff; }
.marquee { background: var(--azul-tinta); color: #fff; }
.marquee-track span { font-family: var(--ff-display); }
.marquee-track .dot { background: var(--gold); }
.awards { background: var(--paper); color: var(--ink); }
.awards .kicker { color: var(--gold-deep); }
.awards .section-head h2 { color: var(--ink); }
.award { background: #fff; border-color: var(--line-2); color: var(--ink); }
.award .cat { font-family: var(--ff-display); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
.award .ev { color: var(--ink-soft); }
.medal.oro { background: var(--azul); } .medal.plata { background: var(--gold); } .medal.bronce { background: var(--acu-violeta); }
.medal svg { color: #fff; }
.faq { background: var(--bg); }
.contacto-card { background: var(--azul); }
.contacto-card::before { background: var(--acuarela); opacity: .18; }
.contacto-card .kicker { color: #f3b6d6; }
.contacto-card h2 .script { display: inline; font-size: inherit; }
.contact-item svg { color: #f3b6d6; }

/* ---------- pie claro: el logo es oscuro y aquí se ve completo ---------- */
.footer { background: #fff; color: var(--ink-soft); border-top: 4px solid transparent; border-image: var(--acuarela) 1; }
.footer .brand-logo-img { height: 58px; max-width: 240px; }
.footer-about { color: var(--ink-mute); }
.footer h5 { color: var(--ink-mute); }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--gold-deep); }
.socials a { border-color: var(--line); color: var(--azul); }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.footer-base { border-top-color: var(--line); color: var(--ink-mute); }
.footer-base a, .footer-base-icons a { color: var(--ink-soft); border-color: var(--line); }
.footer-base a:hover { color: var(--gold-deep); }
.footer .contact-mini a, .footer a[href^="tel"], .footer a[href^="mailto"] { color: var(--ink-soft); }

/* ==========================================================================
   FICHA DE PRODUCTO — esquema de tienda por departamento, con zoom
   ========================================================================== */
.pd { padding-top: calc(6.4rem + var(--utilbar-h)); }
.breadcrumb { font-size: .7rem; }
.breadcrumb a:hover { color: var(--gold-deep); }
.pd-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; gap: clamp(1.4rem, 3.4vw, 3rem); }

.pd-gallery { position: sticky; top: calc(5.6rem + var(--utilbar-h)); display: grid; grid-template-columns: 1fr; gap: .8rem; }
.pd-gallery.has-thumbs { grid-template-columns: 78px minmax(0, 1fr); }
.pd-thumbs { display: flex; flex-direction: column; gap: .55rem; max-height: min(620px, 70vh); overflow-y: auto; margin: 0; flex-wrap: nowrap; scrollbar-width: thin; padding: 2px; }
.pd-thumb { width: 74px; flex: none; aspect-ratio: 1; border-radius: 10px; background: #fff; border: 1.5px solid var(--line); padding: 0; cursor: pointer; overflow: hidden; transition: border-color .2s; }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb:hover { border-color: var(--azul-claro); }
.pd-thumb.is-active { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }

.pd-main { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--photo-bg, #fff); border: 1px solid var(--line-2); }
.pd-main .card-line { display: none; }
.pd-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .28s var(--ease-out); transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }
.pd-main.can-zoom { cursor: zoom-in; }
.pd-main.is-zoomed { cursor: zoom-out; }
.pd-main.is-zoomed img { transform: scale(var(--zoom, 2.5)); transition: transform .28s var(--ease-out), transform-origin 0s; }
.pd-main.is-zoomed .pd-arrow, .pd-main.is-zoomed .pd-flags { opacity: 0; pointer-events: none; }
.pd-flags { position: absolute; z-index: 3; top: .8rem; left: .8rem; display: flex; gap: .4rem; }
.pd-flags .card-flag, .pd-flags .card-fav { position: static; }
.pd-arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92);
  display: grid; place-content: center; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, opacity .2s;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.4);
}
.pd-arrow svg { width: 18px; height: 18px; }
.pd-arrow:hover { background: var(--azul); color: #fff; }
.pd-arrow.prev { left: .7rem; } .pd-arrow.next { right: .7rem; }
.pd-zoom-hint { position: absolute; z-index: 3; right: .8rem; bottom: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35em .75em; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid var(--line-2); font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .08em; color: var(--ink-soft); pointer-events: none; transition: opacity .2s; }
.pd-zoom-hint svg { width: 14px; height: 14px; }
.pd-main.is-zoomed .pd-zoom-hint { opacity: .6; }
.pd-main:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.pd-info { padding-top: .2rem; }
.pd-brandline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.pd-brand { color: var(--gold-deep); font-weight: 500; }
.pd-code { padding-left: .8rem; border-left: 1px solid var(--line); }
.pd-info h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin: .5rem 0 .2rem; color: var(--ink); }
.pd-rating { margin: .5rem 0 .6rem; }
.pd-lead { margin: .4rem 0 1rem; font-size: 1rem; }

.pd-buy { margin-top: .6rem; padding: 0; background: none; border: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.pd-field { gap: .55rem; }
.pd-flabel { font-family: var(--ff-body); font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.pd-flabel b { color: var(--ink); font-weight: 600; }
.pd-flabel-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pd-guide { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--ff-body); font-size: .86rem; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.pd-guide svg { width: 16px; height: 16px; }
.pd-guide:hover { color: var(--gold-deep); }
.color-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.color-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .3rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: .86rem; color: var(--ink-soft); transition: border-color .2s; }
.color-pill:hover { border-color: var(--azul-claro); }
.color-pill.active { border-color: var(--azul); color: var(--ink); box-shadow: 0 0 0 1px var(--azul); }
.size-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .45rem; max-width: 420px; }
.size-pill { min-height: 46px; padding: 0; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-family: var(--ff-body); font-weight: 500; font-size: 1rem; color: var(--ink); cursor: pointer; }
.size-pill:hover { border-color: var(--azul); }
.size-pill.active { background: var(--azul); border-color: var(--azul); color: #fff; }
.size-pills.shake { animation: mcShake .4s; }
.pd-size-msg { color: var(--oferta); font-size: .86rem; }
@keyframes mcShake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pd-buy-row { display: flex; flex-wrap: nowrap; gap: .7rem; margin: 0; align-items: stretch; }
.pd-buy-row .stepper { border-radius: 999px; padding: 0 .3rem; background: #fff; }
.pd-buy-row .stepper button { width: 38px; height: 46px; }
.pd-add { flex: 1; justify-content: center; }
.pd-wa { justify-content: center; width: 100%; }
.pd-attrs { margin: 1.2rem 0 .4rem; }
.attr-badge-circle { background: var(--azul); }
.pd-social.card-social { position: relative; inset: auto; margin-top: .8rem; }

.pd-more { grid-column: 1 / -1; margin-top: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.pd-acc { border-bottom: 1px solid var(--line); }
.pd-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem .2rem; font-family: var(--ff-display); font-size: 1.3rem; color: var(--ink); }
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease-out); margin-right: .4rem; }
.pd-acc[open] summary::after { transform: rotate(-135deg); }
.pd-acc summary:hover { color: var(--gold-deep); }
.pd-acc-body { padding: 0 .2rem 1.4rem; color: var(--ink-soft); max-width: 80ch; }
.pd-bullets { display: grid; gap: .45rem; padding-left: 0; }
.pd-bullets li { position: relative; padding-left: 1.3rem; }
.pd-bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.pd-uses { margin-top: .8rem; }
.pd-spec { border-top: 0; margin: 0; }
.pd-spec .row { grid-template-columns: minmax(130px, 220px) 1fr; }

.related { background: var(--paper); }
.related .section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

@media (max-width: 860px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-gallery { position: relative; top: auto; }
  .pd-gallery.has-thumbs { grid-template-columns: 1fr; }
  .pd-thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .pd-thumb { width: 64px; }
  .pd-arrow { width: 36px; height: 36px; }
}

/* ---------- tabla de tallas (ventana) ---------- */
.sg-overlay { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 1rem; background: rgba(17,31,39,.55); opacity: 0; transition: opacity .2s; }
.sg-overlay.open { opacity: 1; }
.sg-modal { position: relative; width: min(680px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--paper); border-radius: 18px; padding: clamp(1.3rem, 3vw, 2rem); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.sg-modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--acuarela); border-radius: 18px 18px 0 0; }
.sg-modal h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: .5rem 0 .6rem; }
.sg-how, .sg-note { color: var(--ink-soft); font-size: .92rem; }
.sg-note { font-size: .82rem; color: var(--ink-mute); margin-top: .8rem; }
.sg-modal .ruler { margin-top: 1.2rem; }
.sg-close { position: absolute; top: .8rem; right: .8rem; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bg-2); cursor: pointer; display: grid; place-content: center; }
.sg-close svg { width: 18px; height: 18px; }

/* ---------- foto a pantalla completa (celular) ---------- */
.lb { position: fixed; inset: 0; z-index: 180; background: #fff; display: flex; flex-direction: column; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--line-2); }
.lb-count { font-family: var(--ff-mono); font-size: .8rem; color: var(--ink-mute); }
.lb-close { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--bg-2); display: grid; place-content: center; cursor: pointer; }
.lb-close svg { width: 20px; height: 20px; }
.lb-stage { flex: 1; overflow: auto; touch-action: pinch-zoom pan-x pan-y; display: flex; align-items: center; }
.lb-stage img { width: 100%; height: auto; max-height: 100%; object-fit: contain; margin: auto; transition: width .25s var(--ease-out); }
.lb-stage img.is-big { width: 250%; max-width: none; max-height: none; }
.lb-help { text-align: center; font-family: var(--ff-mono); font-size: .7rem; color: var(--ink-mute); padding: .7rem; }

/* ---------- carrito ---------- */
.cart-head h3 { font-family: var(--ff-display); font-weight: 400; }
.cart-line h4 { font-family: var(--ff-body); font-weight: 500; }
.cart-line h4 small { font-family: var(--ff-mono); font-size: .7rem; color: var(--ink-mute); font-weight: 400; }
.cart-line .thumb.seal { background: #fff; border: 1px dashed var(--line); color: var(--azul); }
.cart-line .thumb.seal svg { width: 70%; height: 70%; margin: auto; }
.cl-size { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cl-size select { border-radius: 999px; }
.cl-color { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ink-soft); }
.cl-controls { justify-content: flex-start; }
.cl-price { font-family: var(--ff-body); font-weight: 600; margin-left: auto; color: var(--ink); }
.cl-price.is-ask { font-family: var(--ff-mono); font-weight: 400; font-size: .72rem; color: var(--ink-mute); }
.cl-remove { padding: .3rem; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; }
.cart-total span { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.cart-total b { font-family: var(--ff-body); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.toast { font-family: var(--ff-body); }

@media (prefers-reduced-motion: reduce) {
  .mc-shoe-img { animation: none; }
  .pd-main img, .rl-size, .card, .card-media img { transition: none; }
}

/* ---------- ajustes tras la prueba en celular ---------- */
.utilbar-in span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .utilbar { font-size: .6rem; letter-spacing: .03em; } }
@media (max-width: 940px) {
  .mc-shoe { width: min(54%, 260px); padding-bottom: 2.4rem; }
  .mc-shoe-floor { bottom: 1.8rem; }
  .mc-shoe-cap { font-size: .58rem; letter-spacing: .14em; }
  .mc-hero { padding-top: calc(5.6rem + var(--utilbar-h)); }
}
.room { text-align: left; align-items: flex-start; }
/* la columna única del celular no debe crecer con su contenido */
@media (max-width: 860px) {
  .pd-grid, .pd-gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); }
  .pd-grid > *, .pd-gallery > * { min-width: 0; }
  .pd { padding-inline: 1rem; }
}
.pd-buy-row .pd-add { min-width: 0; white-space: nowrap; }

/* ---------- ciclo 1: etiqueta "Nuevo", cómo calza, medidas, "a pedido" y confianza ---------- */
.card-flag.is-new { left: .6rem; top: .6rem; bottom: auto; background: var(--acu-violeta); color: #fff; letter-spacing: .02em; }
.pd-flags .card-flag.is-new { background: var(--acu-violeta); }
.pd-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .2rem; padding: 0; list-style: none; }
.pd-facts li { display: inline-flex; align-items: baseline; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .86rem; }
.pd-facts li span { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.pd-facts li b { font-weight: 600; color: var(--ink); }
.pd-fit { display: flex; align-items: flex-start; gap: .5rem; margin: .1rem 0 .2rem; padding: .55rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--azul) 7%, #fff); border: 1px solid color-mix(in srgb, var(--azul) 18%, transparent); font-size: .88rem; color: var(--ink-soft); }
.pd-fit svg { width: 18px; height: 18px; flex: none; color: var(--azul); margin-top: .1rem; }
.pd-fit b { color: var(--ink); font-weight: 600; }
.pd-custom { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .88rem; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.pd-custom svg { width: 16px; height: 16px; flex: none; }
.pd-custom:hover { color: var(--azul); }
.pd-trust { list-style: none; padding: .9rem 1rem; margin: .2rem 0 0; display: grid; gap: .55rem; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); }
.pd-trust li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.pd-trust svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: .05rem; }
/* me gusta y compartir: en la esquina inferior derecha de la FOTO (la foto es cuadrada: alto = ancho de la tarjeta) */
.card { container-type: inline-size; }
.card-social { top: calc(100cqw - 2.5rem); bottom: auto; left: auto; right: .6rem; }