:root {
  --main-bg: #fffbe8;
  --slide-bg: #fff;
  --accent: #00b3b3;
  --accent2: #ffe066;
  --border: #e0e0e0;
  --text: #222;
  --title: #0b7a6b;
  --shadow: 0 4px 24px 0 #0001;
  --header-height: 72px; /* will be updated dynamically */
  --footer-height: 10px; /* reserve space for footer */
  --peek-width: 15vw; /* width of the peek (15% of viewport width) */
}
/* Header variants */
header{background:linear-gradient(90deg,rgba(11,122,107,0.02),transparent);backdrop-filter:blur(4px);border-bottom:1px solid #e6f3ef}
.header-large{display:block}
.header-compact{display:none;align-items:center}
.header-compact .compact-title{letter-spacing:0.2px}
.header-compact .compact-icon svg{display:block}

/* Logo in the large header */
.header-logo{ max-height:48px; width:auto; }

/* When compact active */
.header-compact.active{display:flex;align-items:center;gap:8px}
.header-large.hidden{display:none}
/* make compact icon look clickable */
.header-compact .compact-icon{cursor:pointer}
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--main-bg);
  font-family: 'Segoe UI', 'Arial', sans-serif;
  color: var(--text);
  overflow: hidden;
}
#slider {
  width: 100vw; position: relative;
  height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow: hidden;
  background: var(--main-bg);
  margin-top: var(--header-height);
}
.slide {
  width: 100vw; height: 100%; position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: var(--slide-bg);
  transition: transform 0.5s cubic-bezier(.7,0,.3,1), opacity 0.4s;
  box-shadow: var(--shadow);
  opacity: 0;
  z-index: 1;
  padding: 0 8vw calc(48px + var(--footer-height)) 8vw; /* extra bottom padding for hints/footer */
  overflow-y: auto; /* allow vertical scroll when content overflows */
  -webkit-overflow-scrolling: touch;
}
.slide.active {
  opacity: 1;
  z-index: 2;
  transform: translateX(0);
  pointer-events: auto;
}
.slide.left { transform: translateX(-100vw); }
.slide.right { transform: translateX(100vw); }

/* Peek the next slide: shift active left to reveal part of the next slide */
/* show a soft, smoother peek: expand slightly and reveal next slide */
#slider.show-peek{ overflow: visible; }
#slider.show-peek .slide{ transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease; }
#slider.show-peek .slide.active{ transform: translateX(calc(-1 * var(--peek-width))); }
#slider.show-peek .slide.right{ transform: translateX(calc(100vw - var(--peek-width))); }

/* soft gradient on the right edge to suggest continuation */
#slider.show-peek::after{
  content: '';
  position: absolute; top:0; bottom:0; right:0;
  width: var(--peek-width);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.03) 35%, rgba(0,0,0,0.06) 65%);
  z-index: 1500;
}

/* left-pointing chevron centered vertically between header and footer */
/* animate its opacity & slight slide so it feels softer */
#slider::before{ content: ''; position: absolute; right: calc(var(--peek-width) / 2 - 12px); top:50%; transform: translateY(-50%) translateX(6px); width:22px;height:28px; opacity:0; pointer-events:none; transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease; background-repeat:no-repeat; background-position:center; background-size:contain; z-index:1600; }
#slider.show-peek::before{ opacity:0.98; transform: translateY(-50%) translateX(0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b7a6b' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"); }
.slide-content { width: 100%; max-width: 420px; margin: 0 auto; text-align: center; }
.slide-title {
  font-size: 2.1rem; font-weight: 800; color: var(--title); margin: 0 0 10px 0;
  letter-spacing: 0.5px;
}
.slide-subtitle {
  font-size: 1.1rem; color: #444; margin-bottom: 18px;
}
/* Emphasis for the free diagnosis/treatment phrase on slide 1 */
.highlight-cta{
  display: inline-block;
  background: linear-gradient(90deg, rgba(138,201,38,0.08), rgba(11,122,107,0.06));
  color: var(--title);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11,122,107,0.06);
  border: 1px solid rgba(11,122,107,0.08);
  transform-origin: center;
}
.highlight-cta::after{ content: '\1F48A'; margin-left:8px; opacity:0.9 } /* small pill emoji as emphasis */
.slide-img { margin: 0 auto 18px auto; }

/* Spacer to reserve footer space inside each slide (prevents footer overlapping content on mobile) */
.slide-footer-spacer{ height: var(--footer-height, 56px); min-height: 1px; width:100%; pointer-events:none }
.slide-list {
  text-align: left; margin: 0 auto; padding: 0; list-style: none;
  font-size: 1.08rem;
  width: 100%;
  max-width: 420px;
}
.slide-list li {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px #0001;
}
.slide-list .icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 44px; /* increased for better visibility */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0%;
}
.item-title {
  font-weight: bold;
  color: #0b7a6b;
  font-size: 1.05em;
  margin-bottom: 2px;
  line-height: 1.2;
}
.item-desc {
  color: #222;
  font-size: 0.98em;
  line-height: 1.3;
  word-break: break-word;
}
.slide-note {
  font-size: 1.05rem; color: #666; margin-top: 18px;
}
/* Scroll hint for slides that overflow vertically */
.scroll-hint{
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  bottom: calc(var(--footer-height, 48px) + 10px);
  width: 40px; height: 40px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.92); border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  pointer-events: none; z-index: 1600; opacity: 0; transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b7a6b' d='M12 16.5 5 9.5 6.41 8.09 12 13.67 17.59 8.09 19 9.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 60% 60%;
}
.slide.show-scroll-hint .scroll-hint{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* subtle pulse for the scroll hint */
@keyframes scrollPulse{
  0% { transform: translateX(-50%) translateY(0); opacity: 1 }
  50% { transform: translateX(-50%) translateY(6px); opacity: 0.9 }
  100% { transform: translateX(-50%) translateY(0); opacity: 1 }
}
.slide.show-scroll-hint .scroll-hint{ animation: scrollPulse 1600ms ease-in-out 2; }
/* Botones flecha */
.arrow-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: #fff; border: 2px solid var(--accent); color: var(--accent); border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; cursor: pointer; z-index: 20; opacity: 0.85;
  transition: background 0.2s, color 0.2s;
}
.arrow-btn:active { background: var(--accent2); color: #fff; }
.arrow-btn.left { left: 12px; }
.arrow-btn.right { right: 12px; }
@media (max-width: 600px) {
  .slide-content { max-width: 98vw; }
  .slide-title { font-size: 1.4rem; }
  .slide-img { max-width: 80vw; }
  /* smaller header on small screens */
  .header-large .slide-title{font-size:1.2rem}
  .header-compact .compact-title{font-size:0.95rem}
  .header-logo{ max-height:36px; }
}

  /* circular image utility */
  .circle-img{ width:220px; height:220px; border-radius:50%; overflow:hidden; display:inline-block; box-shadow:0 8px 30px rgba(0,0,0,0.12); }
  .circle-img img{ width:100%; height:100%; object-fit:cover; display:block }

  @media (max-width:420px){ .circle-img{ width:160px;height:160px } }

  /* small variant for list icons */
  .circle-img.small{ width:44px; height:44px; box-shadow:none; border-radius:50%; overflow:hidden; display:inline-block }
  .circle-img.small img{ object-fit:contain }

/* Modal overlay for raffle/quiz */
.modal-overlay{
  position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:2000;
}
.modal-card{background:#fff;border-radius:12px;padding:18px;max-width:420px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,0.2);text-align:center}
.modal-card h3{margin:0 0 8px 0;color:var(--title)}
.modal-actions{display:flex;gap:10px;justify-content:center}
.modal-card .muted{color:#666;font-size:0.95rem}
.option-btn{display:block;text-align:left;width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#fff;margin-bottom:8px}
.option-btn.selected{border-color:var(--accent);background:linear-gradient(90deg,var(--main-bg),#f8fffd)}
.option-btn.correct{border-color:#0b7a6b;background:#e6fbf4}
.option-btn.wrong{border-color:#f44336;background:#fff1f0}
.option-btn:focus{outline:2px solid #bfeee9}

/* Feedback text for quiz results (smaller font) */
.quiz-feedback{font-size:0.9rem; color:#333; line-height:1.2}

/* Footer visibility control */
#siteFooter{ will-change: transform, opacity; transition: transform 300ms ease, opacity 300ms ease; transform: translateY(100%); opacity: 0; }
#siteFooter.footer-visible{ transform: translateY(0); opacity: 1; }

/* Footer icon sizing and visibility */
.footer-icon{ height:22px; vertical-align:middle; display:inline-block }
@media (max-width:480px){ .footer-icon{ height:28px } }