/* Hero */
.hero-copa-menstrual {
  position: relative;
  min-height: 85vh;
  background-color: #f7fafc;
  background-image: url("../img/copa-menstrual/hero-copa-menstrual.jpg");
  background-size: cover;
  background-position: center;
}

.horizontal-line .brand-name,
.page-copa-menstrual .horizontal-line .brand-name{
  line-height: 1.05 !important;
  padding-top: 0.08em; 
}

/* Separadores / bloques */
.horizontal-line {
  border-bottom: 1px solid #668d9d;
}

.caracteristica:not(:last-child) {
  border-bottom: 1px solid var(--brand-primary);
}

.caracteristica .title {
  font-weight: 600;
  font-size: 1.3rem;
}

.text-brand-accent {
  font-weight: 400;
}

/* Features: imágenes + texto */
@media (max-width: 991.98px) {
  .features-images-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .features-images-stack .features-img {
    width: 80% !important;
    max-width: 360px !important;
    height: auto !important;
    object-fit: contain;
    display: block;
  }
}

@media (min-width: 992px) {
  .features-row {
    align-items: stretch;
  }

  .features-images-col,
  .features-text-col {
    display: flex;
  }

  .features-images-stack {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    --overlap: 120px;
    --img-max-w: 300px;
    --mid-scale: 1.18;
  }

  .features-images-stack .features-img {
    width: auto !important;
    max-width: var(--img-max-w) !important;
    align-self: center;
    height: calc((100% + (2 * var(--overlap))) / 3);
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
  }

  .features-images-stack .features-img:nth-child(2),
  .features-images-stack .features-img:nth-child(3) {
    margin-top: calc(-1 * var(--overlap));
  }

  .features-images-stack .features-img:nth-child(2) {
    z-index: 3;
    transform: scale(var(--mid-scale));
    transform-origin: center;
  }
}

/* Scroll steps (pin + altura) */
@media (min-width: 992px) {
  .features-scroll {
    min-height: 220vh;
  }

  .features-pin {
    position: sticky;
    top: 96px;
    z-index: 2;
  }
}

/* Scroll steps: estados del texto */
.js-feature-item {
  opacity: 0.28;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

.js-feature-item.is-active {
  opacity: 1;
  transform: translateY(-2px);
}

.js-feature-item.is-active {
  text-shadow: none;
}

.js-feature-item,
.js-feature-item * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll steps: transiciones imágenes */
@media (min-width: 992px) {
  .features-images-stack .features-img {
    transition: transform 0.25s ease, margin-top 0.25s ease;
    will-change: transform, margin-top;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-feature-item,
  .features-images-stack .features-img {
    transition: none !important;
  }
}

@media (min-width: 992px) {
  .features-images-stack {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.68s ease, transform 0.68s ease;
  }

  .features-images-stack.is-switching {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ====== Imagen única (nuevo comportamiento) ====== */

@media (min-width: 992px) {
  .features-images-stack {
    justify-content: center;
    --single-max-w: 420px;
  }

  .features-images-stack .features-img-single {
    width: auto;
    max-width: var(--single-max-w);
    height: auto;
    margin: 0;
    position: relative;
    align-self: center;
    object-fit: contain;
    display: block;
    transform: none;
  }
}

.features-images-stack .features-img-single {
  opacity: 1;
  transition: opacity 0.12s ease;
  will-change: opacity;
}
.features-images-stack.is-fading .features-img-single {
  opacity: 0;
}

/* Sizes Section */
.sizes-section {
  background: #fff;
}

.sizes-title {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.sizes-intro {
  color: #3d4a57;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.sizes-pack {
  width: 100%;
  max-width: 450px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sizes-diagram {
  width: 100%;
  max-width: 290px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.size-name {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  margin: 0;
  font-size: 2rem;
}

.size-desc {
  color: #5b6a78;
  line-height: 1.6;
  max-width: 280px;
  margin: 8px auto 0;
}

.sizes-footnote {
  color: #6c7a88;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/*  (packaging + diagramas) */
.sizes-section .row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

@media (max-width: 991.98px) {
  .sizes-pack {
    max-width: 270px;
  }
  .sizes-diagram {
    max-width: 230px;
  }
  .sizes-section .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }
}

@media (max-width: 575.98px) {
  .sizes-intro {
    padding-left: 8px;
    padding-right: 8px;
  }
  .sizes-pack {
    max-width: 230px;
  }
  .sizes-diagram {
    max-width: 220px;
  }
  .size-desc {
    max-width: 320px;
  }
  .sizes-section .row {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
  }
}

/* Beneficios (texto) */
.benefits-section {
  position: relative;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.benefits-overlay {
  position: absolute;
  inset: 0;
  background: rgba(88, 132, 146, 0.78);
}

.benefits-container {
  position: relative;
  z-index: 1;
  text-align: left;
  padding-top: 64px;
  padding-bottom: 64px;
}

.benefits-copy {
  max-width: 860px;
  margin: 0 auto;
}

.benefits-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.12;
  font-size: clamp(28px, 3vw, 44px);
  margin: 0 0 22px 0;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}

.benefits-list li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1.6;
}

.benefits-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.9);
}

.benefits-list strong {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .benefits-container {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .benefits-list li {
    font-size: 15px;
  }
}

/* Especificaciones Técnicas */
.tech-specs-section {
  background: #fff;
  margin-top: 30px;
}

.tech-specs-title {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  letter-spacing: 0.2px;
  margin: 0 0 18px 0;
  max-width: 560px;
  margin-left: auto;
}

.tech-specs-image-wrap {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}

.tech-specs-image {
  width: 100%;
  height: auto;
  display: block;
}

.tech-specs-list {
  position: relative;
  max-width: 560px;
  margin-left: auto;
}

.tech-spec {
  position: relative;
  margin-bottom: 18px;
}

.tech-title {
  position: relative;
  margin: 0 0 6px 0;
  font-weight: 700;
  color: #243241;
  font-size: 16px;
  letter-spacing: 0.6px;
}

.tech-desc {
  margin: 0;
  color: #66758a;
  font-size: 16px;
  line-height: 1.55;
}

@media (min-width: 992px) {
  .tech-specs-text-col {
    --line-gap: 14px;
  }

  .tech-specs-list {
    transform: translateY(-18px);
  }

  .tech-title::before {
    content: "";
    position: absolute;
    left: calc(-1 * (var(--line-l, 320px) + var(--line-gap)));
    top: 50%;
    transform: translateY(-50%);
    width: var(--line-l, 320px);
    height: 1px;
    background: #668d9d;
  }

  .tech-title::after {
    content: "";
    position: absolute;
    left: calc(-1 * (var(--line-l, 320px) + var(--line-gap)));
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #668d9d;
  }

  .tech-1 {
    --line-l: 400px;
  }
  .tech-2 {
    --line-l: 400px;
  }
  .tech-3 {
    --line-l: 330px;
  }
  .tech-4 {
    --line-l: 315px;
  }
  .tech-5 {
    --line-l: 400px;
  }
}

@media (max-width: 991.98px) {
  .tech-specs-title {
    max-width: none;
    margin-left: 0;
  }

  .tech-specs-list {
    max-width: none;
    margin-left: 0;
  }
}

/* ===== DETALLES: scroll por pasos ===== */

.js-tech-item {
  opacity: 0.28;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

.js-tech-item.is-active {
  opacity: 1;
  transform: translateY(-2px);
}

.js-tech-item.is-current {
  opacity: 1;
}

@media (min-width: 992px) {
  .tech-specs-scroll {
    --steps: 5;
    --step-vh: 35vh;
    min-height: calc(100vh + (var(--steps) - 1) * var(--step-vh));
  }

  .tech-specs-pin {
    position: sticky;
    top: 190px;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-tech-item {
    transition: none !important;
  }
}

@media (min-width: 992px) {
  .js-tech-item .tech-title::before {
    transform: translateY(-50%) scaleX(0);
    transform-origin: right center; 
    transition: transform 0.45s ease;
  }

  .js-tech-item .tech-title::after {
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.25s ease;
  }

  .js-tech-item.is-active .tech-title::before {
    transform: translateY(-50%) scaleX(1);
  }

  .js-tech-item.is-active .tech-title::after {
    transform: translate(-50%, -50%) scale(1);
  }

  .js-tech-item.is-current .tech-title::after {
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Normas de Uso */
.use-rules-section {
  background: #fff;
}

.use-rules-header {
  max-width: 820px;
  margin: 0 auto 44px;
}

.use-rules-main-title {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  letter-spacing: 0.2px;
  margin: 0 0 10px;
  font-size: 2rem;
}

.use-rules-intro {
  color: #3d4a57;
  line-height: 1.65;
  margin: 0;
  font-size: 19px;
}

.use-rules-subtitle {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 16px;
  max-width: 420px;
  font-size: 2rem;
  margin-top: -13px;
}

.use-rules-text {
  color: #3d4a57;
  line-height: 1.7;
  margin: 0;
  max-width: 520px;
  font-size: 17px;
}

/* Bloque 3 pasos */
.use-step {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 150px;
}

.use-step-number {
  position: absolute;
  top: -6px;
  left: 6px;
  color: var(--brand-accent, #e79a90);
  font-weight: 600;
  font-size: 24px;
}

.use-step-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Tamaños individuales (desktop/tablet) */
.use-step-img-1a {
  max-width: 180px;
}
.use-step-img-1b {
  max-width: 180px;
}

.use-step-img-2 {
  max-width: 200px;
}
.use-step-img-3 {
  max-width: 260px;
}

@media (max-width: 575.98px) {
  .use-step-img-1a {
    max-width: 200px;
  }
  .use-step-img-1b {
    max-width: 110px;
  }
  .use-step-img-2 {
    max-width: 220px;
  }
  .use-step-img-3 {
    max-width: 220px;
  }
}

@media (max-width: 991.98px) {
  .use-rules-header {
    margin-bottom: 32px;
  }
  .use-rules-subtitle {
    max-width: none;
  }
  .use-rules-text {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .use-step-img {
    max-width: 220px;
  }
  .use-step {
    min-height: 140px;
  }
}

@media (min-width: 992px) {
  .use-rules-two-cols .col-lg-6:last-child .use-rules-text {
    padding-top: 78px;
  }
}

/* Cómo insertar la copa */
.insert-section {
  background: #fff;
}

.insert-title {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  letter-spacing: 0.2px;
  margin: 0 0 14px;
  line-height: 1.15;
}

.insert-subtitle {
  margin: 0 0 6px;
  color: #243241;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 15px;
}

.insert-text {
  margin: 0;
  color: #3d4a57;
  line-height: 1.7;
  max-width: 520px;
  font-size: 17px;
}

/* Grid */
.insert-grid-title {
  margin: 0;
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  font-size: 1.6rem;
}

.insert-img {
  width: 100%;
  max-width: 290px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.insert-step-label {
  margin: 0;
  color: #668d9d;
  font-weight: 500;
  font-size: 1.4rem;
}

@media (max-width: 767.98px) {
  .insert-grid .col-4 {
    width: 100%;
  }
  .insert-img {
    max-width: 260px;
  }
  .insert-grid-title,
  .insert-step-label {
    margin-top: 10px;
  }
}

/* Inserción + Posición (2 cols con imagen debajo) */
.insert-position-section {
  background: #fff;
}

.ip-subtitle {
  margin: 0 0 10px 0;
  color: #243241;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 15px;
}

.ip-text {
  margin: 0;
  color: #3d4a57;
  line-height: 1.5;
  font-size: 17px;
  max-width: 520px;
}

.ip-img {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  margin: 36px auto 0;
}

@media (min-width: 992px) {
  .ip-img {
    margin-top: 54px;
  }
}

/* ¿Cómo retirar la copa? */
.remove-section {
  background: #fff;
}

.remove-title {
  color: var(--brand-accent, #e79a90);
  font-weight: 500;
  letter-spacing: 0.2px;
  margin: 0 0 18px 0;
}

.remove-text {
  margin: 0;
  color: #3d4a57;
  line-height: 1.75;
  font-size: 17px;
  max-width: 520px;
}

.remove-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 46px auto 0;
}

@media (min-width: 992px) {
  .remove-row {
    align-items: stretch;
  }

  .remove-col {
    display: flex;
    flex-direction: column;
  }

  .remove-img {
    margin-top: auto;
    padding-top: 48px;
  }
}

.remove-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 46px auto 0;
}

.remove-img-1 {
  max-width: 360px;
}
.remove-img-2 {
  max-width: 260px;
}

@media (min-width: 992px) {
  .remove-img {
    margin-top: auto;
    padding-top: 48px;
  }
}

/* Vaciado, enjuagado y reinserción */
.empty-clean-section {
  background: #fff;
}

.empty-clean-title {
  margin: 0 0 10px 0;
  color: #243241;
  font-weight: 700;
  letter-spacing: 0.8px;
  font-size: 15px;
  text-transform: uppercase;
}

.empty-clean-text {
  margin: 0;
  color: #3d4a57;
  line-height: 1.5;
  font-size: 17px;
  max-width: 540px;
}

.empty-clean-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty-clean-img {
  width: 100%;
  height: auto;
  display: block;
}

.empty-clean-img-1 {
  max-width: 260px;
}
.empty-clean-img-2 {
  max-width: 220px;
}

@media (min-width: 992px) {
  .empty-clean-images {
    padding-top: 10px;
  }
}

/* Padding lateral extra SOLO para estas secciones */
.use-rules-section .container,
.insert-section .container,
.insert-position-section .container,
.remove-section .container,
.empty-clean-section .container {
  padding-left: 34px;
  padding-right: 324px;
}

@media (min-width: 992px) {
  .use-rules-section .container,
  .insert-section .container,
  .insert-position-section .container,
  .remove-section .container,
  .empty-clean-section .container {
    padding-left: 70px;
    padding-right: 70px;
  }
}