:root {
  --ink: #080808;
  --paper: #f7f2e8;
  --paper-soft: #17110f;
  --muted: #7c756b;
  --line: rgba(8, 8, 8, 0.12);
  --accent: #b10317;
  --cyan: #c5a86a;
  --red: #d10d20;
  --surface: rgba(251, 251, 248, 0.92);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  --radius: 8px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:has(.cart-drawer.open),
body:has(.modal.open) {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(6, 4, 4, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--paper);
  display: grid;
  gap: 20px;
  grid-template-columns: auto 1fr auto;
  left: 0;
  padding: 14px clamp(18px, 4vw, 56px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  gap: 10px;
  letter-spacing: 0;
  min-width: max-content;
}

.main-nav {
  align-items: center;
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  justify-content: center;
}

.main-nav a {
  color: rgba(247, 242, 232, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.main-nav a:hover {
  color: var(--paper);
}

.icon-button {
  align-items: center;
  background: #f2e8da;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 42px;
}

.cart-trigger {
  background: var(--accent);
  color: #fff;
  transition: background 160ms ease;
}

.cart-trigger:hover {
  background: #8d0212;
}

.icon-button svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 22px;
}

.cart-count {
  align-items: center;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 19px;
  justify-content: center;
  min-width: 19px;
  padding: 0 5px;
  position: absolute;
  right: -7px;
  top: -7px;
}

.cart-trigger .cart-count {
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(6, 4, 4, 0.72);
  color: var(--accent);
}

.whatsapp-float {
  align-items: center;
  background: #25d366;
  border-radius: 999px;
  bottom: clamp(18px, 4vw, 32px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  height: 56px;
  justify-content: center;
  position: fixed;
  right: clamp(18px, 4vw, 32px);
  transition: transform 160ms ease, box-shadow 160ms ease;
  width: 56px;
  z-index: 45;
}

.whatsapp-float:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px) scale(1.05);
}

.whatsapp-float svg {
  fill: #fff;
  height: 30px;
  width: 30px;
}

.hero {
  display: grid;
  isolation: isolate;
  min-height: 92svh;
  overflow: hidden;
  padding: 140px clamp(18px, 5vw, 76px) 58px;
  place-items: end start;
  position: relative;
}

.hero-media {
  background: #050505;
  inset: 0;
  position: absolute;
  z-index: -2;
}

.hero-media img,
.hero-media video {
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  width: 100%;
}

.hero-media::after {
  background:
    radial-gradient(circle at 76% 32%, rgba(177, 3, 23, 0.35), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.26) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0) 44%);
  content: "";
  inset: 0;
  position: absolute;
}

.motion-scan {
  animation: scan 5s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(177, 3, 23, 0.25), transparent);
  inset: 0 auto 0 -35%;
  position: absolute;
  width: 34%;
}

.hero-content {
  color: var(--paper);
  max-width: 720px;
  padding-bottom: 20px;
}

.microcopy {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(56px, 12vw, 146px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.82;
  margin: 0;
  max-width: 900px;
  text-wrap: balance;
}

.hero-copy {
  color: rgba(251, 251, 248, 0.82);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  margin: 26px 0 0;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--accent);
  color: #fff;
}

.button-ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--paper);
}

.button-small {
  background: var(--ink);
  color: var(--paper);
  min-height: 40px;
  padding: 0 16px;
}

.button-whatsapp {
  background: #25d366;
  color: #fff;
}

.button-whatsapp:hover {
  background: #1ebe5b;
}

.full-width {
  width: 100%;
}

.hero-product {
  align-items: center;
  background: rgba(247, 242, 232, 0.94);
  bottom: 54px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  grid-template-columns: 110px 1fr;
  max-width: min(340px, calc(100vw - 36px));
  padding: 12px;
  position: absolute;
  right: clamp(18px, 5vw, 76px);
}

.hero-product img {
  background: #101010;
  height: 84px;
  object-fit: cover;
  padding: 0;
  width: 110px;
}

.hero-product span,
.hero-product small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.hero-product strong {
  display: block;
  font-size: 18px;
  margin: 4px 0;
}

.trust-strip {
  background: var(--ink);
  color: var(--paper);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.trust-strip div {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 12px;
  min-height: 82px;
  padding: 18px clamp(18px, 4vw, 54px);
}

.trust-strip span {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 950;
}

.trust-strip strong {
  font-size: clamp(14px, 2vw, 18px);
}

.section {
  padding: clamp(72px, 10vw, 124px) clamp(18px, 5vw, 76px);
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 34px;
  max-width: 1180px;
}

.section-heading h2,
.experience-copy h2 {
  font-size: clamp(36px, 7vw, 76px);
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0;
}

.filter-tabs {
  border: 1px solid var(--line);
  display: flex;
  padding: 4px;
}

.filter-tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  min-height: 38px;
  padding: 0 14px;
}

.filter-tab.active {
  background: var(--ink);
  color: var(--paper);
}

.product-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1180px;
}

.product-card {
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.product-media {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: #101010;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.product-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-media span {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  left: 12px;
  padding: 7px 9px;
  position: absolute;
  top: 12px;
}

/* [DLUXE] RF-D41: la segunda foto de la tarjeta aparece al pasar el cursor y la tarjeta crece un poco.
   Solo con puntero fino: en tactil no hay hover y dejaria la tarjeta "pegada" agrandada tras un toque. */
.product-media img.foto-hover {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card {
    transition: transform 240ms ease, box-shadow 240ms ease;
  }

  .product-card:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    position: relative;
    transform: scale(1.03);
    z-index: 2;
  }

  .product-card:hover .foto-hover,
  .product-card:focus-within .foto-hover {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-media img.foto-hover {
    transition: none;
  }

  .product-card:hover {
    transform: none;
  }
}

.product-body {
  display: grid;
  gap: 24px;
  padding: 18px;
}

.product-body h3 {
  font-size: 19px;
  line-height: 1.05;
  margin: 0 0 10px;
}

.product-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.product-bottom {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.product-bottom strong {
  font-size: 18px;
}

/* --- Recorrido del drop: carrusel, tipos y catalogo ------------------- */

.section-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 14px 0 0;
  max-width: 460px;
}

/* Las flechas son exclusivamente de escritorio: pantalla ancha Y puntero de
   mouse. En cualquier cosa mas chica que 981px, o con puntero grueso, el
   carrusel se desliza con el dedo o el trackpad y las flechas no ocupan sitio.
   Hacen falta las dos condiciones: un iPad en horizontal mide 1024px pero es
   tactil, y una ventana de escritorio angosta tiene mouse pero no es escritorio. */
.carousel-nav {
  display: none;
  gap: 8px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  .carousel-nav {
    display: flex;
  }
}

.carousel-arrow {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  padding: 0;
  transition: background 160ms ease, color 160ms ease;
  width: 46px;
}

.carousel-arrow:hover {
  background: var(--ink);
  color: var(--paper);
}

.carousel-arrow svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 20px;
}

/* Carrusel sin libreria: scroll nativo con snap. Las flechas solo hacen
   scrollBy, asi que el dedo en movil y el trackpad funcionan igual. */
.carousel-track {
  display: flex;
  gap: 18px;
  margin: -14px auto;
  max-width: 1180px;
  overflow-x: auto;
  padding: 14px 0;   /* RF-D41: aire para que la tarjeta que crece al pasar el cursor no se recorte */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > .product-card {
  flex: 0 0 clamp(240px, 74vw, 320px);
  scroll-snap-align: start;
}

.tipos-heading {
  margin: 72px auto 20px;
  max-width: 1180px;
}

.tipos-heading h3,
.tipo-panel h3,
.catalogo h3 {
  font-size: clamp(26px, 3.4vw, 32px);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.tipo-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1180px;
}

.tipo-card {
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  grid-template-rows: 3px auto 1fr;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease;
}

/* La franja roja marca la categoria activa sin mover el layout. */
.tipo-card::before {
  background: transparent;
  content: "";
  display: block;
  height: 3px;
}

.tipo-card.active {
  background: var(--ink);
  border-color: var(--ink);
}

.tipo-card.active::before {
  background: var(--accent);
}

.tipo-media {
  aspect-ratio: 4 / 3;
  background: #101010;
  display: block;
  overflow: hidden;
}

.tipo-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.tipo-body {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.tipo-body strong {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.tipo-body small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.tipo-card.active .tipo-body strong {
  color: var(--paper);
}

.tipo-card.active .tipo-body small {
  color: rgba(247, 242, 232, 0.62);
}

.tipo-panel {
  margin-top: 72px;
}

.tipo-panel .section-heading,
.catalogo .section-heading {
  margin-bottom: 24px;
}

.ver-todo {
  border-top: 1px solid var(--line);
  display: grid;
  justify-items: center;
  margin: 56px auto 0;
  max-width: 1180px;
  padding-top: 28px;
}

.catalogo {
  margin-top: 56px;
}

.experience-section {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.68)),
    #101010;   /* regla sin uso en la demo (.experience-section): se quito su imagen de 1,9 MB */
  color: var(--paper);
  display: grid;
  gap: clamp(34px, 8vw, 100px);
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
}

.experience-copy {
  max-width: 720px;
}

.experience-copy p:not(.microcopy) {
  color: rgba(251, 251, 248, 0.76);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.62;
}

.checkout-preview {
  background:
    linear-gradient(140deg, rgba(177, 3, 23, 0.16), rgba(197, 168, 106, 0.12)),
    #f7f2e8;
  color: var(--ink);
  padding: 22px;
}

.checkout-topbar {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}

.checkout-topbar span {
  background: #d7ddd3;
  height: 9px;
  width: 46px;
}

.checkout-row,
.checkout-total {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
}

.checkout-total {
  border: 0;
  font-size: 22px;
}

.payment-buttons {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}

.payment-buttons span {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 900;
  padding: 14px;
  text-align: center;
}

/* ── Familia section ──────────────────────────────── */
.familia-section {
  align-items: center;
  background: #080808;
  color: var(--paper);
  display: grid;
  gap: clamp(48px, 8vw, 100px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}

.familia-section::before {
  background: radial-gradient(ellipse at 0% 60%, rgba(177, 3, 23, 0.22), transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.familia-copy {
  max-width: 560px;
  position: relative;
  z-index: 1;
}

.familia-copy h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0 0 28px;
  text-wrap: balance;
}

.familia-body {
  color: rgba(247, 242, 232, 0.72);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.65;
  margin: 0 0 44px;
  max-width: 480px;
}

.familia-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  gap: 0;
  padding-top: 36px;
}

.familia-stat {
  flex: 1;
  padding-right: 24px;
}

.familia-stat + .familia-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 24px;
  padding-right: 0;
}

.familia-stat strong {
  color: var(--paper);
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 6px;
}

.familia-stat span {
  color: rgba(247, 242, 232, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Scattered photo gallery */
.familia-gallery {
  height: 480px;
  position: relative;
}

.scatter-photo {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: absolute;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
}

.scatter-photo::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  content: "";
  inset: 0;
  position: absolute;
  pointer-events: none;
}

.scatter-photo:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.7),
    0 4px 16px rgba(177, 3, 23, 0.3);
  transform: scale(1.04) rotate(0deg) !important;
  z-index: 10 !important;
}

.scatter-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.scatter-photo--1 {
  height: 300px;
  left: 10%;
  top: 4%;
  transform: rotate(-4.5deg);
  width: 220px;
  z-index: 3;
}

.scatter-photo--2 {
  height: 280px;
  left: 32%;
  top: 16%;
  transform: rotate(3.2deg);
  width: 210px;
  z-index: 2;
}

.scatter-photo--3 {
  height: 310px;
  left: 54%;
  top: 0%;
  transform: rotate(-1.8deg);
  width: 230px;
  z-index: 1;
}

@media (max-width: 980px) {
  .familia-section {
    grid-template-columns: 1fr;
  }

  .familia-gallery {
    height: 320px;
    width: 100%;
  }

  .scatter-photo--1 {
    height: 220px;
    left: 2%;
    top: 6%;
    width: 160px;
  }

  .scatter-photo--2 {
    height: 210px;
    left: 28%;
    top: 20%;
    width: 155px;
  }

  .scatter-photo--3 {
    height: 230px;
    left: 54%;
    top: 4%;
    width: 165px;
  }
}

/* ── end Familia section ──────────────────────────── */

.reviews-section {
  background: #f7f2e8;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.social-section {
  background: #f7f2e8;
  padding-bottom: clamp(36px, 4vw, 56px);
  padding-top: 0;
}

.social-panel {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.22), rgba(177, 3, 23, 0.38)),
    url("../img/comunidad/post-10.jpg") center / cover;
  color: var(--paper);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1180px;
  min-height: 260px;
  overflow: hidden;
  padding: clamp(26px, 5vw, 56px);
  position: relative;
}

.social-panel::after {
  color: rgba(251, 251, 248, 0.08);
  content: "DL";
  font-size: clamp(180px, 24vw, 360px);
  font-weight: 950;
  line-height: 1;
  position: absolute;
  right: -10px;
  top: -56px;
}

.social-panel > * {
  position: relative;
  z-index: 1;
}

.social-panel h2 {
  font-size: clamp(34px, 6vw, 72px);
  line-height: 0.96;
  margin: 0;
}

.social-panel p:not(.microcopy) {
  color: rgba(251, 251, 248, 0.74);
  font-size: 18px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 620px;
}

.text-link,
.footer-links a,
.footer-links button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.reviews-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1180px;
}

.review-card {
  background: var(--paper);
  border: 1px solid rgba(8, 8, 8, 0.08);
  padding: 20px 22px;
}

.stars {
  color: var(--red);
  font-size: 14px;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.review-card p {
  color: #32332f;
  font-size: 17px;
  line-height: 1.48;
  margin: 0 0 14px;
}

.site-footer {
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  padding: 44px clamp(18px, 5vw, 76px) clamp(100px, 14vw, 120px);
}

/* Empuja iconos y CTA al extremo derecho sin separarlos entre si. */
.footer-info {
  margin-right: auto;
}

.site-footer p {
  color: rgba(251, 251, 248, 0.65);
  margin: 14px 0 0;
}

.footer-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.footer-links a,
.footer-links button {
  color: var(--paper);
}

.footer-cta {
  border-radius: 12px;
  color: #fff;
  padding: 0 22px;
  text-decoration: none;
}

a.footer-icon {
  align-items: center;
  color: var(--paper);
  display: inline-flex;
  height: 24px;
  text-decoration: none;
  transition: color 160ms ease;
  width: 24px;
}

.footer-icon:hover {
  color: var(--accent);
}

.footer-icon svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.cart-drawer,
.modal {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 180ms ease;
  z-index: 100;
}

.cart-drawer.open,
.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-backdrop,
.modal-backdrop {
  background: rgba(0, 0, 0, 0.46);
  inset: 0;
  position: absolute;
}

.drawer-panel {
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  max-width: 430px;
  padding: 24px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 220ms ease;
  width: min(100%, 430px);
}

.cart-drawer.open .drawer-panel {
  transform: translateX(0);
}

.drawer-header,
.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.drawer-header h2,
.modal-header h2 {
  font-size: 30px;
  line-height: 1;
  margin: 0;
}

.cart-items {
  align-content: start;
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 26px 0;
}

.cart-line {
  align-items: center;
  border: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: 86px 1fr;
  padding: 10px;
}

.cart-line img {
  background: #111;
  height: 80px;
  object-fit: cover;
  padding: 0;
  width: 86px;
}

.cart-line strong,
.cart-line span {
  display: block;
}

.cart-line span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.quantity-control {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  margin-top: 12px;
}

.quantity-control button {
  background: var(--ink);
  border: 0;
  color: var(--paper);
  cursor: pointer;
  height: 30px;
  width: 30px;
}

.cart-summary {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.cart-summary div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.cart-summary small,
.empty-cart span {
  color: var(--muted);
}

.empty-cart {
  align-content: center;
  border: 1px dashed var(--line);
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
}

.modal {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 18px;
}

.modal-panel {
  background: var(--paper);
  max-height: calc(100svh - 36px);
  max-width: 720px;
  overflow: auto;
  padding: 28px;
  position: relative;
  transform: translateY(12px);
  transition: transform 180ms ease;
  width: min(100%, 720px);
}

.modal.open .modal-panel {
  transform: translateY(0);
}

.checkout-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.checkout-form label,
.payment-methods legend {
  color: #34362f;
  display: grid;
  font-size: 13px;
  font-weight: 900;
  gap: 8px;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"] {
  background: #fff;
  border: 1px solid var(--line);
  min-height: 48px;
  outline: none;
  padding: 0 14px;
}

.checkout-form input:focus {
  border-color: var(--ink);
}

.payment-methods {
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px;
}

.payment-methods label {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.payment-methods input {
  accent-color: var(--ink);
}

.checkout-confirm {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px;
}

.checkout-confirm span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.checkout-confirm strong {
  display: block;
  font-size: 24px;
}

.toast {
  background: var(--ink);
  bottom: 20px;
  box-shadow: var(--shadow);
  color: var(--paper);
  font-size: 14px;
  font-weight: 900;
  left: 50%;
  opacity: 0;
  padding: 14px 18px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 16px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 200;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes scan {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(420%);
  }
}

/* app.js marca .is-idle cuando el hero sale de vista, la pestana se oculta o
   el usuario deja de interactuar: nada repinta y el telefono puede dormir. */
.is-idle .motion-scan {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .main-nav {
    display: none;
  }

  .hero {
    min-height: 88svh;
    padding-top: 118px;
  }

  .hero-product {
    bottom: 22px;
    left: clamp(18px, 5vw, 76px);
    right: auto;
  }

  .trust-strip,
  .product-grid,
  .reviews-grid,
  .experience-section {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .tipo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tipos-heading,
  .tipo-panel {
    margin-top: 56px;
  }
}

@media (min-width: 621px) and (max-width: 980px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tablet: los iconos bajan al nivel de la linea de envios y el boton de
     WhatsApp pasa a su propia fila, centrado bajo todo. */
  .site-footer {
    align-items: end;
    gap: 22px 28px;
  }

  .footer-cta {
    flex-basis: 100%;
    margin: 0 auto;
    max-width: 340px;
  }
}

@media (max-width: 620px) {
  .brand {
    font-size: 13px;
  }

  .hero {
    min-height: 86svh;
    padding-bottom: 148px;
  }

  .hero h1 {
    font-size: clamp(50px, 18vw, 82px);
  }

  .hero-actions,
  .filter-tabs,
  .checkout-confirm,
  .site-footer,
  .social-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .trust-strip div {
    min-height: 68px;
  }

  .section {
    padding-bottom: 70px;
    padding-top: 70px;
  }

  .reviews-section {
    padding-bottom: 34px;
  }

  /* El panel de Instagram quedaba con 70px muertos arriba y abajo en movil. */
  .social-section {
    padding-bottom: 30px;
    padding-top: 0;
  }

  /* En columna no se usa flex-basis: sobre el eje vertical estiraria la altura. */
  .footer-cta {
    margin: 0 auto;
    max-width: 320px;
    width: 100%;
  }

  .payment-buttons {
    grid-template-columns: 1fr;
  }

  .modal-panel,
  .drawer-panel {
    padding: 20px;
  }

  .tipos-heading,
  .tipo-panel {
    margin-top: 48px;
  }

  .ver-todo {
    margin-top: 44px;
  }

  .catalogo {
    margin-top: 44px;
  }

  /* En celular no caben tres fotos: la tercera se salia del contenedor y se
     encimaba con las otras dos. Se oculta y las dos que quedan se reparten el
     ancho completo. Vuelve a aparecer sola desde 621px, que es donde el sitio
     ya considera tablet. Aca todo va en porcentaje -- alto de galeria incluido
     -- para que las proporciones y el solape se mantengan de 320 a 620px. */
  .scatter-photo--3 {
    display: none;
  }

  .familia-gallery {
    height: 62vw;
    max-height: 340px;
  }

  .scatter-photo--1 {
    height: 84%;
    left: 4%;
    top: 2%;
    width: 47%;
  }

  .scatter-photo--2 {
    height: 80%;
    left: 45%;
    top: 14%;
    width: 50%;
  }
}


/* ==========================================================================
   EXTENSIONES DE LA TIENDA PHP  [DLUXE] RF-D31
   Lo de arriba es styles.css de la demo, sin rediseñar. Lo de abajo es solo lo que la demo no
   tenia, escrito con sus mismos tokens (--ink, --paper, --accent, --gold, --line, --radius).
   ========================================================================== */

/* [hidden] no basta cuando el componente declara su propio display (flex/grid). */
.carousel-track[hidden],
.product-card[hidden] {
  display: none;
}

/* (Las tarjetas enlazan a la ficha; no hace falta regla: `a` ya hereda color y sin subrayado arriba.) */

/* El boton «Agregar» ahora vive dentro de un formulario (funciona sin JavaScript). */
.product-bottom form {
  margin: 0;
}

.product-bottom .button {
  text-align: center;
}

/* Precio anterior cuando el producto tiene rebaja. */
.price-was {
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 500;
  margin-left: 6px;
}

/* Aviso dentro de una linea del cajon (stock o cambio de precio). */
.cart-note {
  color: var(--accent);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

/* Tablets (621 a 980 px): «Codigo de familia» pasa a una sola columna, pero el texto (max 560 px) y el
   grupo de fotos (tres fotos de ancho fijo que en realidad ocupan ~524 px) quedaban pegados a la
   izquierda de una columna de ~690 px. Se centran con el mismo ancho, para que compartan borde.
   En moviles (hasta 620 px) rigen las reglas de la demo, que ya llenan el ancho. */
@media (min-width: 621px) and (max-width: 980px) {
  .familia-copy {
    margin: 0 auto;
    max-width: 524px;
    width: 100%;
  }

  .familia-gallery {
    margin: 0 auto;
    max-width: 100%;
    width: 524px;
  }

  .scatter-photo--1 {
    left: 0;
  }

  .scatter-photo--2 {
    left: 179px;
  }

  .scatter-photo--3 {
    left: 359px;
  }
}

/* ------------------------------------------------------------------ bordes rasgados
   Los cortes rectos de la portada pasan a ser un borde de papel rasgado, como la referencia que dio el
   dueno. La forma es /assets/img/marca/borde-rasgado.svg, usada como MASCARA: solo aporta el contorno y
   el color lo pone `background`, asi que la misma pieza sirve para el crema y para el negro.
   RF-D43 (DX-28): son DOS secciones crema, cada una entre dos bloques oscuros, y las dos llevan los mismos
   bordes: arriba, el crema sube rasgado sobre lo oscuro (hero, o «Codigo de familia»); abajo, el negro
   sube rasgado sobre el crema (hacia «Codigo de familia», o hacia «Ultimas piezas» o el pie).
   Cada borde se dibuja DESDE la seccion crema, para que no lo recorte el overflow:hidden del hero ni
   desplace nada del diseno. */
:root {
  --rasgado-alto: clamp(24px, 4.2vw, 60px);
}

.drop-section,
.estilo-section {
  position: relative;
}

/* Los bordes se dibujan desde la seccion crema, hacia fuera de ella, y cada uno se MONTA 2 px sobre
   el color que hay al otro lado de la union. Asi nunca queda una fila de pixeles sin cubrir entre las
   dos secciones: el hero mide una altura fraccionaria (92svh, p. ej. 901,11 px) y, con el borde dentro
   de el, una fila del fondo oscuro asomaba como una raya fina justo bajo el rasgado (mas en pantallas
   de doble densidad, como el iPad). El hero recorta con overflow:hidden; esta seccion no. */
.drop-section::before,
.drop-section::after,
.estilo-section::before,
.estilo-section::after {
  -webkit-mask: url("../img/marca/borde-rasgado.svg") repeat-x left bottom / auto 100%;
  content: "";
  height: calc(var(--rasgado-alto) + 2px);
  left: 0;
  mask: url("../img/marca/borde-rasgado.svg") repeat-x left bottom / auto 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 2;
}

/* Oscuro -> crema: el papel crema sube rasgado sobre el bloque oscuro. Su parte solida (abajo) entra
   2 px en la propia seccion crema, cubriendo la union. */
.drop-section::before,
.estilo-section::before {
  background: var(--paper);
  top: calc(var(--rasgado-alto) * -1);
}

/* Crema -> negro: el negro sube rasgado sobre el crema y baja 2 px sobre el negro que sigue. */
.drop-section::after,
.estilo-section::after {
  background: #080808;
  bottom: -2px;
}

/* Trocitos que se desprenden del rasgado y caen (marca/rasgado-caida.php). El contenedor no tiene alto:
   su borde superior es la linea de union entre las dos secciones, y cada pieza nace un poco por
   encima (dentro del borde) y cae sobre la seccion de abajo. Cada pieza trae sus propios valores
   (--x, --w, --h, --c, --poly, --k, --caida, --dx, --giro, --dur, --desfase); al ser las
   duraciones distintas, el bucle no se nota. Solo mueve transform y opacity (barato de pintar). */
.rasgado-caida {
  height: 0;
  pointer-events: none;
  position: relative;
  z-index: 3;
}

.rasgado-caida i {
  animation: rasgado-cae var(--dur) linear var(--desfase) infinite;
  background: var(--c);
  clip-path: var(--poly);
  height: var(--h);
  left: var(--x);
  opacity: 0;
  position: absolute;
  top: calc(var(--rasgado-alto) * var(--k));
  width: var(--w);
  will-change: transform, opacity;
}

/* 0-40 %: la pieza aun esta pegada al borde (invisible); despues se suelta, acelera y se desvanece.
   Ese tramo quieto es lo que hace que las piezas caigan de forma irregular y no como una lluvia. */
@keyframes rasgado-cae {
  0%,
  40% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.55);
  }

  46% {
    animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.75);
    opacity: 0.95;
    transform: translate3d(0, 2px, 0) rotate(calc(var(--giro) * 0.05)) scale(1);
  }

  /* Hasta aqui (86 %) ya recorrio ~80 % de la caida y sigue bien visible; solo el ultimo tramo se
     desvanece. Si se desvaneciera durante todo el recorrido, la pieza casi no se veria al bajar. */
  86% {
    animation-timing-function: ease-in;
    opacity: 0.85;
    transform: translate3d(calc(var(--dx) * 0.8), calc(var(--caida) * 0.8), 0) rotate(calc(var(--giro) * 0.8)) scale(0.95);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--caida), 0) rotate(var(--giro)) scale(0.8);
  }
}

/* Sin movimiento cuando el usuario lo pide. NO se ata a `.is-idle` de hero-reposo.js: esa clase
   tambien se activa cuando el hero sale de la vista, y esto vive justo debajo de el y en el segundo
   corte (mismo criterio que los carruseles de la demo, que tampoco dependen del reposo del hero). */
@media (prefers-reduced-motion: reduce) {
  .rasgado-caida {
    display: none;
  }
}

/* En moviles, la mitad de las piezas: menos ruido en una pantalla chica. */
@media (max-width: 620px) {
  .rasgado-caida i:nth-child(even) {
    display: none;
  }
}

/* ------------------------------------------------------------------ portada v2 (RF-D43, DX-28)
   «Elige tu estilo» es ahora su propia seccion: su titulo pasa a h2 y ya no necesita el margen que lo
   separaba del carrusel de destacados. */
:root {
  /* Rojo para TEXTO sobre negro: --accent (#b10317) da 2,4:1 sobre #080808 y --red (#d10d20) 3,6:1;
     este da 6,2:1. Los rojos de la demo siguen como relleno de botones e insignias (plan.md §6). */
  --red-claro: #ff4d5e;
}

.tipos-heading h2 {
  font-size: clamp(26px, 3.4vw, 32px);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.estilo-section .tipos-heading {
  margin-top: 0;
}

/* ------------------------------------------------------------------ «Ultimas piezas» (RF-D44, DX-29, DX-32)
   El bloque negro de la maqueta del dueno: tarjetas oscuras con las esquinas rectas de la tienda,
   insignia del descuento, precio ahora/antes, casilla «Añadir al pedido» y controles abajo.
   El fondo arranca en el mismo negro que el corte rasgado de arriba (DX-32): sin la primera capa, el
   resplandor rojo de la esquina llegaba hasta la union y se veia una raya de otro tono. */
.ultimas-section {
  background:
    linear-gradient(to bottom, var(--ink) 0, rgba(8, 8, 8, 0) 220px),
    radial-gradient(ellipse at 100% 30%, rgba(177, 3, 23, 0.24), transparent 55%),
    var(--ink);
  color: var(--paper);
  padding: clamp(72px, 9vw, 96px) clamp(18px, 5vw, 76px);
}

.ultimas-cabeza {
  margin: 0 auto;
  max-width: 1180px;
}

.ultimas-micro {
  align-items: center;
  color: var(--red-claro);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 12px;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.ultimas-micro::before {
  background: var(--red-claro);
  content: "";
  height: 1px;
  width: 36px;
}

.ultimas-cabeza h2 {
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
}

.ultimas-copy {
  color: rgba(247, 242, 232, 0.82);
  font-size: 15px;
  line-height: 1.7;
  margin: 22px 0 0;
  max-width: 560px;
}

.carousel-track.ultimas-track {
  gap: 20px;
  margin-top: 34px;
}

/* DX-32: con pocas piezas, centradas. Los margenes automaticos reparten el espacio que sobra y valen 0
   cuando no sobra, asi un carrusel lleno se sigue desplazando entero (justify-content: center cortaria
   la primera tarjeta por la izquierda, donde no se puede llegar). */
.ultimas-track > :first-child {
  margin-left: auto;
}

.ultimas-track > :last-child {
  margin-right: auto;
}

.ultima-card {
  background: #141010;
  border: 1px solid rgba(247, 242, 232, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex: 0 0 clamp(260px, 72vw, 300px);
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
}

/* 5:4 como en la maqueta. Sin overflow:hidden el aspect-ratio cede ante la miniatura cuadrada (1:1,
   RF-D32) y la foto queda cuadrada; con el, se recorta un 10 % arriba y abajo. */
.ultima-media {
  aspect-ratio: 5 / 4;
  background: #1a1414;
  display: block;
  overflow: hidden;
  position: relative;
}

.ultima-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* La misma insignia de las tarjetas de arriba (.product-media span). */
.ultima-insignia {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  left: 12px;
  padding: 7px 9px;
  position: absolute;
  top: 12px;
}

.ultima-cuerpo {
  border-top: 1px solid rgba(247, 242, 232, 0.08);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 22px;
}

.ultima-cuerpo h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
}

.ultima-cuerpo p {
  color: rgba(247, 242, 232, 0.68);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.ultima-precio {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.ultima-precio strong {
  font-size: 22px;
  font-weight: 900;
}

.ultima-precio s {
  color: rgba(247, 242, 232, 0.55);
  font-size: 13px;
}

.ultima-agregar {
  margin: 0;
}

/* La casilla, su boton de respaldo sin JavaScript y «Elegir talla» se ven igual. */
.ultima-accion {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(247, 242, 232, 0.22);
  color: var(--paper);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 12px;
  margin-top: 14px;
  min-height: 44px;
  padding: 0 14px;
  transition: border-color 160ms ease;
  width: 100%;
}

.ultima-accion:hover,
.ultima-accion:focus-within {
  border-color: rgba(247, 242, 232, 0.5);
}

.ultima-accion[hidden] {
  display: none;
}

.ultima-check input {
  accent-color: var(--red);
  height: 18px;
  margin: 0;
  width: 18px;
}

.ultima-check:has(input:checked) {
  border-color: var(--red-claro);
}

.ultimas-controles[hidden] {
  display: none;
}

.ultimas-controles {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

.ultimas-boton {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(247, 242, 232, 0.28);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.ultimas-boton:hover {
  border-color: var(--paper);
}

.ultimas-boton svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.ultimas-boton .icono-seguir {
  display: none;
  fill: currentColor;
  stroke: none;
}

.ultimas-boton.pausado .icono-pausa {
  display: none;
}

.ultimas-boton.pausado .icono-seguir {
  display: block;
}

.ultimas-puntos {
  align-items: center;
  display: flex;
  gap: 10px;
}

.ultimas-puntos span {
  background: rgba(247, 242, 232, 0.3);
  border-radius: 4px;
  height: 8px;
  transition: width 200ms ease, background 200ms ease;
  width: 8px;
}

.ultimas-puntos span.on {
  background: var(--red);
  width: 24px;
}

/* Sin movimiento automatico no hay nada que pausar. */
@media (prefers-reduced-motion: reduce) {
  [data-pausa] {
    display: none;
  }
}

@media (max-width: 620px) {
  .ultimas-controles {
    gap: 10px;
  }

  .ultimas-puntos {
    gap: 6px;
  }
}

/* ------------------------------------------------------------------ pie ampliado (RF-D45, DX-30)
   Sustituye al .site-footer de la demo. Abajo deja aire para el boton flotante de WhatsApp. */
.pie {
  background: var(--ink);
  border-top: 1px solid rgba(247, 242, 232, 0.1);
  color: var(--paper);
  padding: 64px clamp(18px, 5vw, 76px) clamp(84px, 10vw, 104px);
}

.pie-in {
  margin: 0 auto;
  max-width: 1180px;
}

.pie-columnas {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pie-nombre {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pie-marca p {
  color: rgba(247, 242, 232, 0.7);
  font-size: 14px;
  line-height: 1.65;
  margin: 14px 0 0;
  max-width: 300px;
}

.pie-redes {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.pie-redes a {
  align-items: center;
  border: 1px solid rgba(247, 242, 232, 0.22);
  border-radius: 50%;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  transition: border-color 160ms ease;
  width: 44px;
}

.pie-redes a:hover {
  border-color: var(--paper);
}

.pie-redes svg {
  fill: currentColor;
  height: 20px;
  width: 20px;
}

.pie-col h2 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 18px;
}

.pie-col ul {
  color: rgba(247, 242, 232, 0.78);
  display: grid;
  font-size: 14px;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-col a {
  color: rgba(247, 242, 232, 0.78);
  text-underline-offset: 4px;
}

.pie-col a:hover {
  color: var(--paper);
  text-decoration: underline;
}

.pie-col a.pie-destacado {
  color: var(--red-claro);
  font-weight: 600;
}

.pie-libro {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.pie-libro svg {
  fill: none;
  flex: 0 0 auto;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  width: 16px;
}

.pie-pago {
  align-items: center;
  border-top: 1px solid rgba(247, 242, 232, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 48px;
  padding: 24px 0;
}

.pie-pago p {
  align-items: center;
  color: rgba(247, 242, 232, 0.7);
  display: flex;
  font-size: 13px;
  gap: 10px;
  margin: 0;
}

.pie-pago p svg {
  fill: none;
  height: 18px;
  stroke: var(--paper);
  stroke-width: 1.8;
  width: 18px;
}

.pie-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-logos li {
  align-items: center;
  background: #fff;
  border-radius: 6px;
  display: flex;
  height: 32px;
  padding: 0 8px;
}

.pie-logos img {
  height: 20px;
  width: auto;
}

.pie-legal {
  border-top: 1px solid rgba(247, 242, 232, 0.1);
  color: rgba(247, 242, 232, 0.6);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  padding-top: 20px;
}