/* ═══════════════════════════════════════
   HOME.CSS — Secondary site styles
   Last updated: May 2026
   ═══════════════════════════════════════ */

/* ── Page system ── */
.page        { display: none; }
.page.active { display: block; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero-cutout {
  background: var(--bg);
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 80px;
  overflow: hidden;
  position: relative;
}
.hero-cutout .h-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 56px 60px 64px;
}
.hero-cutout .h-img {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero-cutout .h-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: contrast(1.02) saturate(.92);
  mix-blend-mode: multiply;
}
.hero-cutout .h-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 18%);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   SOBRE MÍ
══════════════════════════════════════════ */
.sobre-2col     { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.sobre-2col-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* ══════════════════════════════════════════
   PRODUCTS GRID (acompañamientos)
══════════════════════════════════════════ */
.pgrid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.pcard  { background: var(--bg); padding: 40px 32px; transition: transform .3s, box-shadow .3s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pcard h3 { font-size: 24px; margin: 8px 0 5px; }
.ptag  { display: inline-block; padding: 3px 11px; background: var(--cta); color: #fff; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.price { font-family: var(--font-serif); font-size: 44px; font-weight: 300; color: var(--cta); line-height: 1; margin: 14px 0 5px; }
.pnote { font-size: 10px; color: var(--tlight); letter-spacing: .07em; text-transform: uppercase; }
.pdiv  { height: 1px; background: var(--line); margin: 16px 0; }
.pcard ul { list-style: none; margin: 10px 0 24px; }
.pcard ul li { font-size: 13px; color: var(--tmid); padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 7px; }
.pcard ul li::before { content: '—'; color: var(--cta); flex-shrink: 0; }

/* ══════════════════════════════════════════
   SOBRE — RESONA LIST
══════════════════════════════════════════ */
.resona-list { display: flex; flex-direction: column; gap: 0; margin: 24px 0; }
.resona-item { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--tmid); }
.resona-item:last-child { border: none; }
.resona-item::before { content: '—'; color: var(--cta); flex-shrink: 0; font-family: var(--font-serif); }

/* ══════════════════════════════════════════
   CONFERENCIAS — ANGELA SECTION
══════════════════════════════════════════ */
.ca-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 52px;
}
.ca-photo { overflow: hidden; height: 480px; }
.ca-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.9); mix-blend-mode: multiply; }
.topics-box { padding: 18px 24px; background: var(--bg2); margin-top: 20px; }
.topics-box p { font-size: 12px; line-height: 1.9; }

/* ══════════════════════════════════════════
   FAQ ACCORDION
══════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 0; margin-top: 28px; }
.faq-item {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
  gap: 16px;
  transition: color .3s;
  user-select: none;
}
.faq-q:hover { color: var(--cta); }
.faq-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
  transition: transform .35s var(--ease-std);
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.faq-icon::before { width: 100%; height: 1px; top: 50%; transform: translateY(-50%); }
.faq-icon::after  { width: 1px; height: 100%; left: 50%; transform: translateX(-50%); transition: transform .35s, opacity .35s; }
.faq-item.open .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-std);
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p {
  font-size: 14px;
  color: var(--tmid);
  line-height: 1.85;
  padding: 0 0 20px;
}

/* ══════════════════════════════════════════
   TEST PAGE
══════════════════════════════════════════ */
.test-hero { padding: 120px 0 60px; background: var(--bg); text-align: center; }
.test-body  { padding: 48px 0 80px; background: var(--bg); }

/* ══════════════════════════════════════════
   TESTIMONIOS CARRUSEL
══════════════════════════════════════════ */
.test-carousel { overflow: hidden; position: relative; }
.test-track    { display: flex; transition: transform .5s ease; }
.test-slide    { flex: 0 0 100%; min-width: 100%; }

/* ══════════════════════════════════════════
   FASES — CARRUSEL INFINITO
══════════════════════════════════════════ */
.fases-grid  { overflow: hidden; position: relative; width: 100%; }
.fases-track {
  display: flex !important;
  animation: fasesScroll 25s linear infinite;
  width: max-content !important;
  will-change: transform;
}
.fases-track:hover { animation-play-state: paused; }
.fase {
  flex: 0 0 260px !important;
  width: 260px;
  padding: 44px 28px;
  background: var(--bg2);
  text-align: center;
  margin-right: 2px;
  box-sizing: border-box;
}
.fase:nth-child(even) { background: var(--bg3); }
.fase-num {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 200;
  color: var(--cta);
  opacity: .35;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.fase-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--text);
  display: block;
  margin-bottom: 8px;
}
@keyframes fasesScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════
   CHECKOUT OVERLAY
══════════════════════════════════════════ */
#checkout-overlay-home {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(46,39,35,.75);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
#checkout-overlay-home.open {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════
   MENTORIA — CALENDAR WIDGET
══════════════════════════════════════════ */
#cal-mentoria {
  background: var(--bg2);
  padding: 20px;
  user-select: none;
}
#cal-mentoria div[style*="grid"] > div {
  transition: background .2s, color .2s;
  border-radius: 2px;
}
#cal-mentoria div[style*="grid"] > div:hover:not([style*="not-allowed"]) {
  background: var(--bg3) !important;
}

/* ══════════════════════════════════════════
   reCAPTCHA — align with form
══════════════════════════════════════════ */
.g-recaptcha {
  margin: 16px 0;
  transform-origin: left top;
}
@media (max-width: 400px) {
  .g-recaptcha { transform: scale(.85); }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-cutout {
    grid-template-columns: 1fr;
  }
  .hero-cutout .h-img {
    height: 58vw;
  }
  .hero-cutout .h-img::after {
    background: linear-gradient(to bottom, transparent 40%, var(--bg));
  }
  .hero-cutout .h-text {
    padding: 52px 24px;
  }

  .sobre-2col,
  .sobre-2col-alt {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ca-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 24px;
  }
  .ca-photo { height: 56vw; }

  .pgrid3 { grid-template-columns: 1fr; }

  .fases-track { animation-duration: 18s; }
  .fase { flex: 0 0 80vw !important; width: 80vw; }

  .test-slide > div { padding: 32px 24px !important; }

  .faq-q { font-size: 16px; }
}

@media (max-width: 640px) {
  .faq-q { font-size: 15px; padding: 16px 0; }
}

/* ══════════════════════════════════════════
   PAGE SECTION FIXES — spacing under fixed nav
══════════════════════════════════════════ */

/* Pages that DON'T have a hero image need padding-top for nav */
#home.active > section:first-child,
#sobre.active > section:first-child,
#acomp.active > section:first-child,
#conf.active > section:first-child,
#test.active > section:first-child,
#contacto.active > section:first-child {
  padding-top: calc(80px + var(--space-xl));
}

/* Hero sections already have padding-top:80px in their grid, skip */
#home .hero-cutout,
#sobre [id="sobre-hero-grid"],
#punto [id="punto-hero-grid"],
#acomp [id="acomp-hero-grid"],
#conf  [id="conf-hero-grid"] {
  padding-top: 80px;
}

/* Acomp hero text — ensure it has content padding */
#acomp-hero-grid .h-text,
#acomp-hero-grid > div:last-child {
  padding: 60px 56px 60px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ══════════════════════════════════════════
   TESTIMONIOS CARRUSEL — full styles
══════════════════════════════════════════ */
.test-carousel {
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.test-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.test-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.test-slide > div {
  padding: 44px 40px;
  min-height: 260px;
  box-sizing: border-box;
}

/* Carousel controls */
.test-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.test-carousel-controls button {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cta);
  transition: background .3s, color .3s;
}
.test-carousel-controls button:hover {
  background: var(--cta);
  color: #fff;
}

/* Testimonial quote style */
.test-slide blockquote,
.test-slide p.quote {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--text);
}
.test-slide .author {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cta);
  margin-top: 20px;
}

/* Video slide play button */
.test-video-thumb {
  background: var(--bg2);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: background .3s;
}
.test-video-thumb:hover { background: var(--bg3); }
.test-play-icon {
  width: 64px; height: 64px;
  background: var(--cta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .3s;
}
.test-video-thumb:hover .test-play-icon {
  background: var(--ctah);
  transform: scale(1.08);
}

/* ── Page hero (inner pages) ── */
.page-hero { padding:0; background:var(--bg); min-height:88vh; display:flex; align-items:stretch; }
.page-hero-inner { display:grid; grid-template-columns:1fr 1fr; width:100%; padding-top:80px; }
.ph-text { display:flex; flex-direction:column; justify-content:center; padding:60px 56px 60px 64px; background:var(--bg); }
.ph-img { overflow:hidden; position:relative; background:var(--bg2); }
.ph-img img { width:100%; height:100%; object-fit:cover; object-position:top center; filter:saturate(.9); mix-blend-mode:multiply; display:block; }
.ph-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,var(--bg) 0%,transparent 18%); pointer-events:none; }
@media(max-width:960px){
  .page-hero { min-height:auto; }
  .page-hero-inner { grid-template-columns:1fr; padding-top:0; }
  .ph-img { height:64vw; }
  .ph-img::after { background:linear-gradient(to bottom,transparent 50%,var(--bg)); }
  .ph-text { padding:48px 24px; }
}

/* ── Inner hero grids — image column fills height ── */
#punto-hero-grid,
#acomp-hero-grid,
#conf-hero-grid {
  min-height: 88vh;
}

#punto-hero-grid > div:last-child,
#conf-hero-grid > div:last-child {
  overflow: hidden;
  position: relative;
}
#acomp-hero-grid > div:first-child {
  overflow: hidden;
  position: relative;
}

#punto-hero-grid > div:last-child img,
#conf-hero-grid > div:last-child img,
#acomp-hero-grid > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}