/*
  Skin temporal: Día de Muertos
  Se carga después de styles.css y solo sobrescribe el diseño.
  Para quitarla, elimina el <link> de este archivo en index.html.
*/

:root {
  --red: #d1006f;
  --red-dark: #a3005a;
  --black: #1b0f2a;
  --surface: #fbf1e3;
  --surface-red: #ffe6f2;
  --surface-dark: #12081f;
  --text: #22162e;
  --muted: #6b5f73;
  --border: #eadccb;
  --border-dark: #5b4870;
  --cempasuchil: #f7941d;
  --cempasuchil-light: #ffc20e;
  --morado: #7b3fa0;
  --turquesa: #00a6a6;
  --papel-picado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='46' viewBox='0 0 300 46'%3E%3Cdefs%3E%3Cpath id='f' fill-rule='evenodd' d='M0 0H52V32L45.5 38L39 32L32.5 38L26 32L19.5 38L13 32L6.5 38L0 32Z M26 7L33 15L26 23L19 15Z M23.5 15a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0Z M7 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M41 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M7 25a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M41 25a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M24 28a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z'/%3E%3C/defs%3E%3Cpath d='M0 3.5H300' stroke='%23f6e7c8' stroke-width='1.5'/%3E%3Cuse href='%23f' x='4' y='4' fill='%23e4007c'/%3E%3Cuse href='%23f' x='64' y='4' fill='%23f7941d'/%3E%3Cuse href='%23f' x='124' y='4' fill='%237b3fa0'/%3E%3Cuse href='%23f' x='184' y='4' fill='%2300a6a6'/%3E%3Cuse href='%23f' x='244' y='4' fill='%23ffc20e'/%3E%3C/svg%3E");
  --franja-ofrenda: repeating-linear-gradient(90deg,
      #e4007c 0 1.1rem,
      var(--cempasuchil) 1.1rem 2.2rem,
      var(--morado) 2.2rem 3.3rem,
      var(--turquesa) 3.3rem 4.4rem,
      var(--cempasuchil-light) 4.4rem 5.5rem)
}

body {
  background: #fffaf3
}

a:focus-visible,
button:focus-visible,
.review-card[data-google-review]:focus-visible {
  outline-color: rgba(209, 0, 111, .4)
}

/* Navegación con papel picado */
.navbar {
  background: rgba(27, 15, 42, .95)
}

.navbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--papel-picado) repeat-x 0 0 / 210px 32px;
  filter: drop-shadow(0 .35rem .4rem rgba(0, 0, 0, .18));
  pointer-events: none
}

@media(max-width:575.98px) {
  .navbar::after {
    height: 24px;
    background-size: 158px 24px
  }
}

/* Hero: noche de ofrenda y camino de pétalos */
.hero-section::after {
  background:
    radial-gradient(ellipse at 12% 100%, rgba(247, 148, 29, .32), transparent 55%),
    linear-gradient(90deg,
      rgba(27, 10, 45, .66) 0,
      rgba(60, 12, 72, .42) 45%,
      rgba(209, 0, 111, .1) 100%)
}

@media(max-width:767.98px) {
  .hero-section::after {
    background:
      radial-gradient(ellipse at 10% 100%, rgba(247, 148, 29, .3), transparent 60%),
      linear-gradient(90deg,
        rgba(27, 10, 45, .72) 0,
        rgba(60, 12, 72, .55) 62%,
        rgba(209, 0, 111, .2) 100%)
  }
}

@media(max-width:575.98px) {
  .hero-section::after {
    background:
      radial-gradient(ellipse at 10% 100%, rgba(247, 148, 29, .3), transparent 60%),
      rgba(27, 10, 45, .6)
  }
}

.hero-section::before {
  background-color: var(--black);
  background-image:
    radial-gradient(circle at 1.4rem 42%, var(--cempasuchil) 0 .34rem, transparent .4rem),
    radial-gradient(circle at 2.9rem 66%, #e4007c 0 .2rem, transparent .26rem),
    radial-gradient(circle at 4.3rem 38%, var(--cempasuchil-light) 0 .26rem, transparent .32rem);
  background-position: 0 50%;
  background-size: 5.75rem 100%;
  border-top: 3px solid var(--cempasuchil)
}

.hero-title span {
  color: var(--cempasuchil)
}

/* Saludo de temporada */
@keyframes saludo-in {
  from {
    opacity: 0;
    transform: translateY(-.75rem)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-section .container::before {
  content: "\273F  Felices fiestas de Día de Muertos  \273F";
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .45rem 1rem;
  color: var(--cempasuchil-light);
  font-family: var(--heading);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: pre-wrap;
  border: 1px solid rgba(247, 148, 29, .7);
  border-radius: 999px;
  background: rgba(27, 15, 42, .62);
  box-shadow: 0 0 1.5rem rgba(247, 148, 29, .25);
  animation: saludo-in .8s .2s both var(--ease-out)
}

@media(max-width:575.98px) {
  .hero-section .container::before {
    margin-bottom: 1.1rem;
    padding: .4rem .85rem;
    font-size: .85rem;
    letter-spacing: .05em
  }
}

@media(hover:hover) and (pointer:fine) {
  .hero-title:hover span {
    text-shadow: 0 .5rem 1.8rem rgba(247, 148, 29, .45)
  }

  .navbar-brand:hover img {
    filter: drop-shadow(0 .45rem .8rem rgba(247, 148, 29, .35))
  }
}

/* Franja de colores bajo los títulos */
.benefits-heading h2::after,
.courses-heading h2::after,
.process-intro h2::after,
.reels-heading h2::after,
.reviews-heading h2::after,
#ubicacion-title::after,
#faq-title::after,
.final-cta h2::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 6px;
  margin-top: 1rem;
  background: var(--franja-ofrenda)
}

.final-cta h2::after {
  margin-right: auto;
  margin-left: auto
}

/* Beneficios */
.benefit-item h3::before {
  content: "\273F";
  display: block;
  margin-bottom: .6rem;
  color: var(--cempasuchil);
  font-size: 1.6rem;
  line-height: 1
}

.benefits-strip>div:nth-child(2) .benefit-item h3::before {
  color: #e4007c
}

.benefits-strip>div:nth-child(3) .benefit-item h3::before {
  color: var(--morado)
}

.benefits-section .section-after-content {
  border-left-color: var(--cempasuchil)
}

/* Tarjetas de cursos */
.price-card {
  border-top: 4px solid var(--cempasuchil)
}

.swiper-slide:nth-child(5n+2) .price-card {
  border-top-color: var(--morado)
}

.swiper-slide:nth-child(5n+3) .price-card {
  border-top-color: var(--red)
}

.swiper-slide:nth-child(5n+4) .price-card {
  border-top-color: var(--turquesa)
}

.swiper-slide:nth-child(5n) .price-card {
  border-top-color: var(--cempasuchil-light)
}

.recommended-label {
  color: var(--black);
  background: var(--cempasuchil)
}

.recommended-label::before {
  content: "\273F  "
}

.courses-note a,
.reviews-footer .google-link {
  border-bottom-color: rgba(209, 0, 111, .3)
}

/* Proceso */
.process-step:nth-child(3) .process-icon {
  color: var(--black);
  background: var(--cempasuchil)
}

.process-link {
  border-bottom-color: rgba(209, 0, 111, .3)
}

/* Reels: noche de velas */
.reels-section {
  background:
    radial-gradient(ellipse at 85% 0, rgba(209, 0, 111, .22), transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(247, 148, 29, .18), transparent 55%),
    var(--black)
}

.reel-frame {
  border-color: rgba(247, 148, 29, .35)
}

/* Opiniones */
.review-stars {
  color: #e07b00
}

/* Preguntas frecuentes */
.accordion-button:focus {
  box-shadow: 0 0 0 .25rem rgba(209, 0, 111, .14)
}

/* Cierre con papel picado */
.final-cta {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(247, 148, 29, .45), transparent 60%),
    linear-gradient(165deg, #2a1240 0%, #6d145e 55%, var(--red) 100%)
}

.final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--papel-picado) repeat-x 0 0 / 210px 32px;
  pointer-events: none
}

.final-cta .btn-light {
  color: var(--black)
}

/* Footer */
.footer-brand span,
.footer-contact-link:hover {
  color: var(--cempasuchil)
}

.site-footer {
  border-top: 6px solid transparent;
  border-image: var(--franja-ofrenda) 1
}