/* ============================================================
   Power Flow Club — capa de diseño (dirección "1a")
   
   COMPLEMENTARIA, NO REEMPLAZA TU CSS.
   · Se carga DESPUÉS de tu hoja actual.
   · No define reglas globales (body, a, img, h1...): todo vive
     bajo .pf-page o bajo clases .pf-*  →  no rompe lo existente.
   · Uso: <link rel="stylesheet" href="/assets/css/powerflow.css">
          después de tu <link> actual, y envuelve la plantilla
          rediseñada en <div class="pf-page"> ... </div>
   · Si alguna regla tuya gana por especificidad, sube la tuya o
     agrega .pf-page delante del selector propio — no uses !important.
   ============================================================ */

/* Tipografías: Cormorant Garamond sustituye a CoFo Raffin (de pago).
   Si compras la licencia web de CoFo Raffin, reemplaza --font-display. */
/* Fuentes servidas desde el propio sitio (assets/fonts, solo caracteres
   latinos: incluye acentos, ñ, ¿ y ¡). Antes se pedian a Google con @import,
   lo que encadenaba HTML -> CSS -> Google -> archivo de letra y retrasaba la
   primera pintura en celular. Cormorant y Jost son variables (un archivo cubre
   todos los grosores). Bodoni: solo los digitos, para la cifra de paquetes. */
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* digitos */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bodoni-moda-digits.woff2') format('woff2');
  unicode-range: U+30-39;
}

:root{
  /* Color */
  --pf-bg:#F2F1F0;          /* fondo principal */
  --pf-bg-alt:#DDD8D0;      /* bandas y fondos secundarios */
  --pf-surface:#FFFFFF;      /* inputs, tarjetas sobre fondo claro */
  --pf-ink:#50403D;          /* texto principal y botones */
  --pf-ink-soft:#6B5854;     /* texto secundario (contraste OK en claro) */
  --pf-line:#DDD8D0;         /* líneas divisorias */
  --pf-line-strong:#C9C2BB;  /* bordes de input */
  --pf-accent:#A3958F;       /* taupe de marca: SOLO sobre fondo oscuro */
  --pf-dark:#272727;         /* carbón, uso puntual */
  --pf-on-dark:#F2F1F0;      /* texto sobre --pf-ink / --pf-dark */
  --pf-on-dark-soft:#DDD8D0; /* texto secundario sobre oscuro */

  /* Tipografía */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Jost', system-ui, -apple-system, sans-serif;
  --font-number:'Bodoni Moda', 'Cormorant Garamond', Georgia, serif; /* solo cifras de paquetes */
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Escala de espaciado (px) */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:56px; --s-7:72px; --s-8:96px;

  --pf-maxw:1320px;   /* ancho de contenido */
  --pf-pad:56px;      /* padding lateral desktop */
}

/* ------------------------------------------------------------
   BASE OPT-IN — no toca body, a, img ni ningún selector global.
   Envuelve con class="pf-page" la parte de la plantilla que ya
   esté rediseñada; el resto de tu sitio sigue con tu CSS actual.
   Se puede migrar pantalla por pantalla.
   ------------------------------------------------------------ */
.pf-page,
.pf-page *,
.pf-page *::before,
.pf-page *::after{box-sizing:border-box}

.pf-page{
  background:var(--pf-bg); color:var(--pf-ink);
  font-family:var(--font-ui); font-weight:300; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.pf-page a{color:inherit;text-decoration:none;transition:color .2s ease}
.pf-page a:hover{color:var(--pf-ink-soft)}
.pf-page img{display:block;max-width:100%;height:auto}
.pf-page p{margin:0 0 1em}
.pf-page h1,.pf-page h2,.pf-page h3{margin:0}
.pf-page ul{margin:0;padding:0;list-style:none}

/* Si quieres el fondo crema en toda la página, agrega también la clase
   al <body>: <body class="pf-page">. No es obligatorio. */

/* ---------- Tipografía ---------- */
.pf-eyebrow{           /* etiqueta pequeña sobre cada sección */
  font-family:var(--font-ui); font-weight:500; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-ink-soft);
}
.pf-h1{font-family:var(--font-display);font-weight:300;font-size:clamp(48px,7vw,112px);line-height:.96;letter-spacing:-.02em;margin:0}
.pf-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(36px,4.5vw,56px);line-height:1.05;margin:0}
.pf-h3{font-family:var(--font-display);font-weight:400;font-size:36px;line-height:1.1;margin:0}
.pf-lead{font-family:var(--font-display);font-weight:300;font-size:27px;line-height:1.5;margin:0;text-wrap:pretty}
.pf-body{font-size:17px;line-height:1.75;color:var(--pf-ink-soft);margin:0;text-wrap:pretty}
.pf-quote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:24px;line-height:1.55;
  padding:12px 0 12px 24px;border-left:1px solid var(--pf-line-strong);margin:0}
.pf-num{font-family:var(--font-display);font-weight:300;font-size:52px;line-height:1;color:var(--pf-ink-soft)}

/* ---------- Layout ---------- */
.pf-section{padding:var(--s-8) var(--pf-pad)}
.pf-section--tint{background:var(--pf-bg-alt)}
.pf-section--dark{background:var(--pf-ink);color:var(--pf-on-dark)}
.pf-section--dark .pf-eyebrow{color:var(--pf-on-dark-soft)}
.pf-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
.pf-rule{height:1px;background:var(--pf-line);border:0;margin:0}

/* ---------- Navegación ---------- */
.pf-nav{display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--pf-pad);border-bottom:1px solid var(--pf-line);background:var(--pf-bg)}
.pf-nav__logo{height:26px;width:auto}
.pf-nav__links{display:flex;align-items:center;gap:34px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.pf-nav__links a[aria-current="page"],.pf-nav__links a.is-active{border-bottom:1px solid var(--pf-ink);padding-bottom:3px}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}

/* ---------- Botones ---------- */
.pf-btn{display:inline-block;padding:17px 32px;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--pf-ink);cursor:pointer;font-family:var(--font-ui);
  background:var(--pf-ink);color:var(--pf-on-dark);border-radius:6px;position:relative;overflow:hidden;z-index:0;
  box-shadow:0 8px 20px -10px rgba(80,64,61,.55);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1),color .2s ease}
.pf-btn::before{content:'';position:absolute;inset:0;background:#2E2422;transform:scaleX(0);
  transform-origin:left;transition:transform .35s cubic-bezier(.65,0,.35,1);z-index:-1;border-radius:inherit}
.pf-btn:active{transform:scale(.97);box-shadow:0 6px 14px -10px rgba(80,64,61,.5);transition-duration:.08s}
.pf-btn--ghost{background:transparent;color:var(--pf-ink);border-color:var(--pf-line-strong);box-shadow:none}
.pf-btn--ghost::before{background:var(--pf-ink)}
@media not (hover:hover) {
  /* Sin hover real (tactil), la cortina no tiene forma de dispararse
     ni de deshacerse limpiamente -- en algunos navegadores el
     scaleX(0) se renderiza como una franja visible en vez de
     desaparecer del todo. Como el efecto no cumple ninguna funcion
     sin mouse, quitamos la capa por completo en vez de solo ocultarla. */
  .pf-btn::before{content:none}
}
@media(hover:hover) and (pointer:fine){
  /* La cortina y el levantamiento son un efecto de mouse; en tactil el
     :hover simulado se queda pegado a medio deslizar al tocar y salir
     de scroll, por eso solo corre en dispositivos con hover real. */
  .pf-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(80,64,61,.62)}
  .pf-btn:hover::before{transform:scaleX(1)}
  .pf-btn--ghost:hover{border-color:var(--pf-ink);color:var(--pf-on-dark);box-shadow:0 12px 22px -12px rgba(80,64,61,.4)}
}
.pf-btn--block{display:block;width:100%;text-align:center;padding:18px 0}
.pf-btn--light{background:var(--pf-on-dark);color:var(--pf-ink);border-color:var(--pf-on-dark);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.pf-btn--light::before{background:#DDD8D0}
.pf-btn[disabled],.pf-btn--disabled{opacity:.45;pointer-events:none;transform:none;box-shadow:none}
.pf-link{border-bottom:1px solid var(--pf-line-strong);padding-bottom:2px}

/* ---------- Formularios ---------- */
.pf-field{display:flex;flex-direction:column;gap:10px;margin-bottom:36px}
.pf-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-ink-soft)}
.pf-input{border:none;border-bottom:1px solid var(--pf-line-strong);background:transparent;
  padding:10px 2px;font-size:16px;font-family:var(--font-ui);color:var(--pf-ink);border-radius:0;width:100%;
  transition:border-color .2s ease}
.pf-input:focus{outline:none;border-bottom-color:var(--pf-ink);box-shadow:none}
.pf-hint{font-family:var(--font-ui);font-size:11px;color:var(--pf-ink-soft)}
.pf-error{font-family:var(--font-ui);font-size:11px;color:#8C3B32}
.pf-input--error{border-bottom-color:#8C3B32}
.pf-auth{display:grid;grid-template-columns:1.1fr .9fr;min-height:100vh}
.pf-auth__form{padding:0 var(--s-7);display:flex;flex-direction:column;justify-content:center;gap:var(--s-4)}
.pf-auth__media{background:var(--pf-bg-alt);display:flex;flex-direction:column;justify-content:space-between;padding:40px}
/* Con foto (helpers.php -> authMediaAttrs): la foto cubre el panel. El logo
   y la frase caen sobre el fondo gris de las fotos, asi que no llevan velo. */
.pf-auth__media--photo{background-size:cover;background-repeat:no-repeat}

/* ---------- Enlace "volver" ---------- */
.pf-back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-style:italic;font-size:16px;color:var(--pf-ink-soft);margin-bottom:32px;text-decoration:none;
  transition:color .2s ease}
.pf-back-link:hover{color:var(--pf-ink)}
.pf-back-link svg{width:16px;height:16px;flex-shrink:0}

/* ---------- Horario / reserva ---------- */
.pf-days{display:flex;gap:10px;flex-wrap:wrap}
.pf-day{border:none;border-bottom:2px solid var(--pf-line);padding:0 4px 10px;font-size:13px;color:var(--pf-ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.pf-day:hover{color:var(--pf-ink);border-bottom-color:var(--pf-line-strong)}
.pf-day span{font-family:var(--font-ui);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.pf-day .pf-day__num{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--pf-ink)}
.pf-day--active{border-bottom-color:var(--pf-ink);color:var(--pf-ink)}
.pf-class{display:grid;grid-template-columns:120px 1.2fr .8fr 140px 150px;align-items:center;
  gap:20px;padding:22px 0;border-top:1px solid var(--pf-line)}
.pf-class:last-child{border-bottom:1px solid var(--pf-line)}
.pf-class__time{font-family:var(--font-display);font-size:28px;font-weight:300}
.pf-class__name{font-size:17px;font-weight:400}
.pf-class__meta{font-size:14px;color:var(--pf-ink-soft)}
.pf-class__spots{font-family:var(--font-ui);font-weight:500;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pf-ink-soft)}
.pf-class--full{opacity:.45}
.pf-class--selected{border:1px solid var(--pf-ink);background:var(--pf-surface);padding:22px 20px}

/* ---------- Panel del alumno ---------- */
.pf-card{border:1px solid var(--pf-line);padding:34px;display:flex;flex-direction:column;gap:18px}
.pf-card--dark{background:var(--pf-ink);color:var(--pf-on-dark);border-color:var(--pf-ink)}
.pf-credits{display:flex;align-items:flex-end;gap:14px}
.pf-credits__n{font-family:var(--font-display);font-size:64px;font-weight:300;line-height:.9}
.pf-credits__breakdown{display:flex;flex-direction:column;}
.pf-credits__row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;
  border-top:1px solid #6E5B57;color:var(--pf-on-dark-soft)}
.pf-row{display:grid;grid-template-columns:160px 1fr 200px;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--pf-line);font-size:15px}
.pf-row__date{font-family:var(--font-mono);font-size:12px;color:var(--pf-ink-soft)}

/* ---------- Paquetes ---------- */
.pf-packages-head{position:relative;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--pf-line-strong)}
.pf-packages-head--dark{border-bottom-color:#6E5B57}
.pf-packages-eyebrow{display:flex;align-items:center;gap:10px}
.pf-packages-eyebrow img{height:15px;width:auto;opacity:.85}
.pf-packages-watermark{position:absolute;right:-40px;bottom:-30px;width:420px;height:auto;max-width:60%;opacity:.05;
  pointer-events:none;z-index:0}
.pf-packages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px;position:relative;z-index:1}
.pf-package{padding:0;display:flex;flex-direction:column;gap:14px}
.pf-package__name{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:20px}
.pf-package__price{font-family:var(--font-display);font-size:44px;font-weight:300;line-height:1;margin-top:6px}
.pf-package__meta{font-family:var(--font-ui);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pf-on-dark-soft);}
.pf-package__cta{margin-top:6px;font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pf-on-dark-soft);position:relative;
  padding-bottom:4px;display:inline-flex;align-items:center;gap:6px;width:fit-content;background:none;
  transition:color .2s ease}
.pf-package__cta::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--pf-on-dark);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.pf-package__cta::after{content:'\2192';transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.pf-package__cta:hover{color:var(--pf-on-dark)}
.pf-package__cta:hover::before{transform:scaleX(1)}
.pf-package__cta:hover::after{transform:translateX(4px)}

/* Tarjetas de paquetes (includes/package_cards.php). La envoltura
   .pf-pkgcard-wrap hace la entrada en cascada (.pf-stagger); la tarjeta
   interior hace el hover, asi las dos animaciones no se pisan. */
.pf-pkgcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative;z-index:1;padding-top:12px}
.pf-pkgcard{position:relative;height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;
  padding:26px 22px 24px;border:1px solid rgba(242,241,240,.24);border-radius:16px;color:var(--pf-on-dark);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease,background-color .35s ease}
.pf-pkgcard--featured{background:#654C42;border-color:#654C42}
.pf-pkgcard__badge{position:absolute;top:-11px;left:22px;background:#F6E9D7;color:#3D2E28;border-radius:999px;
  padding:5px 12px;font-family:var(--font-ui);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.pf-pkgcard__num{font-family:var(--font-number);font-weight:400;font-size:58px;line-height:.9;
  font-variant-numeric:lining-nums;letter-spacing:-.01em}
.pf-pkgcard__meta{font-family:var(--font-ui);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pf-on-dark-soft)}
.pf-pkgcard__name{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:20px;margin-top:4px}
.pf-pkgcard__price{font-family:var(--font-ui);font-size:16px;letter-spacing:.02em}
.pf-page a.pf-pkgcard__cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border:1.5px solid #F6E9D7;border-radius:999px;color:#F6E9D7;
  font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease}
.pf-pkgcard__cta span{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.pf-page .pf-pkgcard--featured a.pf-pkgcard__cta,
.pf-page a.pf-pkgcard__cta:hover{background:#F6E9D7;color:#3D2E28}
.pf-pkgcard__name + .pf-pkgcard__price{margin-bottom:10px}
@media (hover:hover){
  .pf-pkgcard:hover{transform:translateY(-6px);border-color:rgba(246,233,215,.7)}
  .pf-pkgcard--featured:hover{border-color:#F6E9D7}
  .pf-pkgcard:hover .pf-pkgcard__cta span{transform:translateX(4px)}
}
@media (max-width:1100px){.pf-pkgcards{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}

/* Etiqueta de evento en Horarios (book.php) */
.pf-class__event{display:inline-block;background:var(--pf-ink);color:var(--pf-on-dark);border-radius:999px;padding:4px 10px;
  font-family:var(--font-ui);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* Eventos (events.php): mismas tarjetas que paquetes, un poco mas anchas */
.pf-eventcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,340px));justify-content:center;gap:22px;position:relative;z-index:1}
.pf-eventcard{gap:8px}
.pf-eventcard__state{margin-top:auto;align-self:flex-start;padding:9px 16px;border-radius:999px;background:rgba(246,233,215,.14);
  color:#F6E9D7;font-family:var(--font-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Franja del proximo evento (includes/events.php -> eventBannerHtml) */
.pf-event-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;position:relative;
  background:var(--pf-ink);color:var(--pf-on-dark);padding:10px 52px;font-family:var(--font-ui);font-size:13px;letter-spacing:.02em}
.pf-event-bar[hidden]{display:none}
.pf-event-bar__eyebrow{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pf-on-dark-soft)}
.pf-event-bar__name{font-family:var(--font-display);font-style:italic;font-size:18px}
.pf-page a.pf-event-bar__link{color:#F6E9D7;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--pf-accent);padding-bottom:2px;white-space:nowrap}
.pf-event-bar__more{color:var(--pf-on-dark-soft)}
.pf-event-bar__close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--pf-on-dark-soft);font-size:15px;cursor:pointer;padding:8px;line-height:1}
.pf-event-bar__close:hover{color:var(--pf-on-dark)}
@media (max-width:767px){
  .pf-event-bar{flex-direction:column;gap:3px;padding:12px 44px;text-align:center}
  .pf-event-bar__date{font-size:12px}
  .pf-event-bar__sep{display:none}
}
@media (max-width:767px){
  .pf-pkgcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;row-gap:24px}
  .pf-pkgcard{padding:22px 16px 18px}
  .pf-pkgcard__num{font-size:46px}
  .pf-pkgcard__badge{left:16px;font-size:9px;padding:4px 10px}
  .pf-page a.pf-pkgcard__cta{padding:8px 14px;font-size:10px}
}

/* ---------- Imagen ---------- */
.pf-media{background:var(--pf-bg-alt);display:flex;align-items:flex-end;overflow:hidden}
/* El relleno (y las rayas) solo aplican al recuadro sin foto: .pf-placeholder */
.pf-media img{width:100%;height:100%;object-fit:cover}
/* <picture> (version WebP / celular, helpers.php -> renderPhotoBlock) no
   debe alterar el tamano: la foto sigue llenando su recuadro. */
.pf-media picture,.pf-instructor-photo picture{display:contents}
.pf-instructor-photo{overflow:hidden}
.pf-instructor-photo img{width:100%;height:100%;object-fit:cover;display:block}


/* ============================================================
   EFECTOS DE SCROLL  (sutiles — nada de paralaje agresivo)
   Se activan agregando la clase al elemento en el HTML.
   Todos respetan prefers-reduced-motion.
   ============================================================ */

/* 1. Aparecer de abajo hacia arriba (el efecto base) */
.pf-reveal{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.pf-reveal.is-in{opacity:1;transform:none}

/* 2. Aparecer en cascada: ponlo en el contenedor, los hijos entran uno tras otro */
.pf-stagger > *{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.pf-stagger.is-in > *{opacity:1;transform:none}
.pf-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.pf-stagger.is-in > *:nth-child(2){transition-delay:90ms}
.pf-stagger.is-in > *:nth-child(3){transition-delay:180ms}
.pf-stagger.is-in > *:nth-child(4){transition-delay:270ms}
.pf-stagger.is-in > *:nth-child(5){transition-delay:360ms}

/* 3. Título display que entra por líneas (envuelve cada línea en <span>) */
.pf-lines span{display:block;overflow:hidden}
.pf-lines span > i{display:block;font-style:inherit;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.pf-lines.is-in span > i{transform:none}
.pf-lines.is-in span:nth-child(2) > i{transition-delay:120ms}

/* 4. Foto que hace un zoom-out lento al entrar (da vida sin mover el layout) */
.pf-media--zoom img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.pf-media--zoom.is-in img{transform:scale(1)}

/* 5. Línea divisoria que se dibuja de izquierda a derecha */
.pf-draw{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.pf-draw.is-in{transform:scaleX(1)}

/* 6. Nav que se compacta al bajar (la clase la pone el JS en el <nav>) */
.pf-nav{transition:padding .3s ease,background .3s ease,border-color .3s ease;
  position:sticky;top:0;z-index:50}
.pf-nav.is-stuck{padding-top:14px;padding-bottom:14px;
  background:rgba(242,241,240,.94)}
  /* Sin backdrop-filter: crea un containing block nuevo para los
     descendientes position:fixed (el menu de pantalla completa vive
     dentro de <nav>), lo que rompe su posicionamiento en cuanto el
     nav se vuelve "is-stuck" al hacer scroll -- el menu quedaba
     comprimido dentro de la barra del nav y su boton de cerrar
     dejaba de ser alcanzable. */

/* Ocultos por defecto en escritorio; el media query de movil los vuelve a mostrar */
.pf-nav__toggle{display:none;}
.pf-nav__drawer{display:none;}

/* 7. Cifra de créditos / precios que cuentan hacia arriba: ver powerflow.js (data-count) */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pf-reveal,.pf-stagger > *,.pf-lines span > i,.pf-media--zoom img,.pf-draw{
    opacity:1!important;transform:none!important;transition:none!important}
  .pf-btn:hover,.pf-btn:active,.pf-pkgcard:hover{transform:none!important}
  .pf-btn::before{transition:none!important}
}

/* ============================================================
   RESPONSIVO — móvil 360–767, tablet 768–1023, desktop 1024+
   Diseñado mobile-first en el uso: todo lo de arriba es desktop
   y aquí se reordena. Botones y filas nunca bajan de 44px de alto.
   ============================================================ */

/* ---- Tablet (768–1023) ---- */
@media (max-width:1023px){
  :root{--pf-pad:32px}
  .pf-section{padding:64px var(--pf-pad)}
  .pf-h1{font-size:64px}
  .pf-h2{font-size:42px}
  .pf-lead{font-size:23px}
  .pf-split{gap:32px}
  .pf-packages{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  /* hero: texto arriba, foto abajo a 420px */
  .pf-hero{grid-template-columns:1fr}
  .pf-hero .pf-media{min-height:420px;order:2}
  /* reserva: el panel de confirmación pasa a barra fija abajo */
  .pf-book{grid-template-columns:1fr}
  .pf-book__panel{position:sticky;bottom:0;background:var(--pf-bg-alt);
    border-top:1px solid var(--pf-line-strong);padding:24px var(--pf-pad)}
}

/* ---- Móvil (hasta 767) ---- */
@media (max-width:767px){
  :root{--pf-pad:20px}
  .pf-section{padding:48px var(--pf-pad)}
  .pf-h1{font-size:46px;line-height:1}
  .pf-h2{font-size:34px}
  .pf-h3{font-size:28px}
  .pf-lead{font-size:20px;line-height:1.5}
  .pf-body{font-size:16px}
  .pf-quote{font-size:20px;padding-left:16px}
  .pf-num{font-size:40px}
  .pf-eyebrow{font-size:11px}

  /* Nav: logo + botón; el resto va en menú hamburguesa */
  .pf-nav{padding:16px var(--pf-pad); gap:10px;}
  .pf-nav__logo{height:20px}
  .pf-wordmark{white-space:nowrap; flex-shrink:0;}
  .pf-wordmark .pf-wordmark__text{height:24px;}
  .pf-nav .pf-nav__links > a.pf-btn{padding:11px 16px; font-size:11px; white-space:nowrap;}
  .pf-nav__links > a:not(.pf-btn){display:none}
  .pf-nav__toggle{display:block;position:relative;z-index:61;background:none;border:0;padding:10px;cursor:pointer}
  /* El fondo fijo y el contenido con scroll van en dos cajas separadas:
     position:fixed + overflow-y:auto en el mismo elemento no repinta
     bien el scroll en algunos navegadores moviles (el contenido se
     mueve logicamente pero la pantalla no lo refleja). Por eso
     .pf-nav__drawer solo cubre y pinta el fondo, y .pf-nav__drawer-inner
     -- una caja normal (no fija) por dentro -- es la que hace scroll. */
  .pf-nav__drawer{position:fixed;inset:0;background:var(--pf-bg);z-index:60;display:none}
  .pf-nav__drawer.is-open{display:block}
  .pf-nav__drawer-inner{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;touch-action:pan-y;
    display:flex;flex-direction:column;gap:8px;padding:80px var(--pf-pad);box-sizing:border-box}
  .pf-nav__drawer a:not(.pf-btn){font-family:var(--font-display);font-size:32px;font-weight:300;
    padding:12px 0;border-bottom:1px solid var(--pf-line)}

  /* Todo a una columna */
  .pf-split,.pf-auth,.pf-packages,.pf-hero,.pf-book{grid-template-columns:1fr}
  .pf-auth{min-height:0}
  .pf-auth__media{min-height:200px;order:-1}
  .pf-auth__form{padding:40px var(--pf-pad)}
  .pf-card{padding:24px}
  .pf-credits__n{font-size:52px}

  /* Chips de día: scroll horizontal en lugar de romper línea */
  .pf-days{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;margin:0 calc(var(--pf-pad) * -1);padding:0 var(--pf-pad)}
  .pf-days::-webkit-scrollbar{display:none}
  .pf-day{flex:0 0 auto;scroll-snap-align:start;min-width:64px;min-height:56px}

  /* Fila de clase: dos columnas + botón de ancho completo */
  .pf-class{grid-template-columns:72px 1fr;grid-template-areas:
    "time name" "time meta" "spots spots" "cta cta";row-gap:6px;padding:20px 0}
  .pf-class--selected{padding:20px 16px}
  .pf-class__time{grid-area:time;font-size:24px}
  .pf-class__name{grid-area:name}
  .pf-class__meta{grid-area:meta;font-size:13px}
  .pf-class__spots{grid-area:spots}
  .pf-class .pf-btn{grid-area:cta;width:100%;text-align:center;padding:14px 0;margin-top:8px}

  /* Movimientos: fecha y monto en la misma línea */
  .pf-row{grid-template-columns:1fr auto;row-gap:4px}
  .pf-row__date{grid-column:1/-1}

  /* Paquetes apiladas: en una sola columna sí conviene una linea sutil que las separe */
  .pf-packages{grid-template-columns:1fr;gap:0}
  .pf-package{padding:28px 0;border-top:1px solid #6E5B57}
  .pf-package:first-child{border-top:0;padding-top:0}
  .pf-package__price{font-size:34px}
  .pf-packages-watermark{width:260px}

  /* Área táctil mínima */
  .pf-btn,.pf-input,.pf-day,.pf-nav__links a{min-height:44px}
  .pf-btn{padding:15px 24px}
}

/* ---- Ajuste fino para pantallas muy angostas ---- */
@media (max-width:380px){
  .pf-h1{font-size:40px}
  .pf-credits__n{font-size:44px}
}

/* ---------- Wordmark (logo real, assets/img/logo-wordmark.png) ---------- */
.pf-wordmark{display:inline-flex;align-items:center;}
.pf-wordmark .pf-wordmark__text{height:29px;width:auto;display:block;}
.pf-wordmark--sm .pf-wordmark__text{height:21px;}

/* ---------- Marcador de foto pendiente (patron de rayas, no bloque plano) ---------- */
.pf-placeholder{
  background:repeating-linear-gradient(135deg,#DDD8D0 0 10px,#E9E6E1 10px 20px);
  display:flex; align-items:flex-end; padding:22px;
}
.pf-placeholder__label{
  font-family:var(--font-ui); font-weight:500; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--pf-ink-soft);
}
.pf-placeholder--dark{
  background:repeating-linear-gradient(135deg,#2E2E2E 0 12px,#353535 12px 24px);
}
.pf-placeholder--dark .pf-placeholder__label{ color:var(--pf-on-dark-soft); }

/* ---------- Menú de cuenta (avatar + desplegable) ---------- */
.pf-account{position:relative;}
.pf-account__toggle{background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;}
.pf-avatar{width:34px;height:34px;border-radius:50%;background:var(--pf-ink);color:var(--pf-on-dark);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;flex-shrink:0;}
.pf-account__menu{position:absolute;top:calc(100% + 18px);right:0;min-width:220px;
  background:var(--pf-surface);border:1px solid var(--pf-line-strong);
  padding:18px 20px;display:none;flex-direction:column;gap:2px;z-index:60;}
.pf-account__menu.is-open{display:flex;}
.pf-account__name{font-family:var(--font-display);font-size:18px;}
.pf-account__email{font-size:13px;color:var(--pf-ink-soft);word-break:break-all;margin-top:2px;}
.pf-account__menu a{font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:10px 0 0;border-top:1px solid var(--pf-line);margin-top:10px;}
.pf-account__menu a:first-of-type{border-top:1px solid var(--pf-line-strong);margin-top:12px;}
.pf-drawer__account{padding:0 0 16px;margin-bottom:8px;border-bottom:1px solid var(--pf-line);}
.pf-drawer__account .pf-account__name{font-size:24px;}
@media(max-width:767px){
  .pf-account{display:none;} /* en móvil todo pasa por el drawer */
}

/* ---------- Correccion de especificidad ----------
   La regla base ".pf-page a{color:inherit}" tiene mas especificidad que
   clases sueltas como .pf-btn, asi que cuando el boton es un <a> el texto
   se volvia invisible (heredaba el mismo color que su propio fondo).
   Estas reglas devuelven el color correcto sin tocar el resto del sistema. */
.pf-page a.pf-btn{color:var(--pf-on-dark);}
.pf-page a.pf-btn--ghost{color:var(--pf-ink);}
.pf-page a.pf-btn--ghost:hover{color:var(--pf-on-dark);}
.pf-page a.pf-btn--light{color:var(--pf-ink);}
.pf-page a.pf-btn--light:hover{color:var(--pf-ink);}
.pf-page a.pf-package__cta{color:var(--pf-on-dark);transition:color .2s ease,border-color .2s ease;}
.pf-page a.pf-back-link{color:var(--pf-ink-soft);}
.pf-page a.pf-back-link:hover{color:var(--pf-ink);}

/* ============================================================
   PANEL (admin / instructor) — mismos tokens y componentes que
   el sitio publico, aplicados a tablas de datos, formularios
   compactos y tarjetas de resumen.
   ============================================================ */

/* ---------- Subnav de secciones del panel ---------- */
.pf-subnav{display:flex;gap:6px;flex-wrap:wrap;padding:16px var(--pf-pad);
  border-bottom:1px solid var(--pf-line);background:var(--pf-bg-alt);}
.pf-subnav a{font-family:var(--font-ui);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 14px;color:var(--pf-ink-soft);border:1px solid transparent;white-space:nowrap;}
.pf-subnav a:hover{color:var(--pf-ink);}
.pf-subnav a[aria-current="page"]{color:var(--pf-ink);border-color:var(--pf-line-strong);background:var(--pf-surface);}
@media(max-width:767px){
  .pf-subnav{padding:14px 20px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
}

/* ---------- Encabezado de pagina ---------- */
.pf-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  flex-wrap:wrap;margin-bottom:var(--s-5);}

/* ---------- Avisos ---------- */
.pf-alert{font-size:14px;padding:14px 18px;border:1px solid var(--pf-line-strong);
  color:var(--pf-ink);margin-bottom:28px;}
.pf-alert--error{border-color:#8C3B32;color:#8C3B32;}

/* ---------- Tarjetas de estadistica (dashboard) ---------- */
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:var(--s-6);}
.pf-stat{border:1px solid var(--pf-line);padding:26px 24px;display:flex;flex-direction:column;gap:6px;}
.pf-stat__n{font-family:var(--font-display);font-size:44px;font-weight:300;line-height:1;}
@media(max-width:1023px){.pf-stats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:767px){.pf-stats{grid-template-columns:1fr;}}

/* ---------- Dos columnas (formularios lado a lado) ---------- */
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:1023px){.pf-two{grid-template-columns:1fr;}}

/* ---------- Tabla de datos ---------- */
.pf-table-wrap{border:1px solid var(--pf-line);overflow-x:auto;}
.pf-table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap;}
.pf-table th{text-align:left;padding:14px 18px;border-bottom:1px solid var(--pf-line-strong);
  font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pf-ink-soft);font-weight:500;background:var(--pf-bg-alt);}
.pf-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--pf-line);
  vertical-align:middle;white-space:normal;}
.pf-table tr:last-child td{border-bottom:0;}
.pf-table tr:hover td{background:var(--pf-bg);}
.pf-table td.pf-table__actions{white-space:nowrap;text-align:right;}
.pf-table td.pf-table__num{font-family:var(--font-mono);font-size:13px;color:var(--pf-ink-soft);}

/* ---------- Estado / badges ---------- */
.pf-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--pf-line-strong);
  color:var(--pf-ink-soft);}
.pf-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--pf-line-strong);flex:none;}
.pf-badge--on{border-color:var(--pf-ink);color:var(--pf-ink);}
.pf-badge--on::before{background:#4B7A52;}
.pf-badge--off{opacity:.55;}
.pf-badge--warn{border-color:#8C3B32;color:#8C3B32;}
.pf-badge--warn::before{background:#8C3B32;}

/* ---------- Botones pequenos / de texto (acciones de fila) ---------- */
.pf-btn--sm{padding:9px 16px;font-size:11px;margin-top:0;width:auto;}
.pf-btn--text{background:none;border:0;padding:0;margin:0;color:var(--pf-ink-soft);
  text-decoration:underline;text-underline-offset:3px;font-family:var(--font-ui);
  font-size:13px;cursor:pointer;}
.pf-btn--text:hover{color:var(--pf-ink);}

/* ---------- Chips de seleccion (dias, filtros) ---------- */
.pf-chip-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.pf-chip{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--pf-ink);
  border:1px solid var(--pf-line-strong);padding:9px 14px;cursor:pointer;margin:0;}
.pf-chip input{width:auto;accent-color:var(--pf-ink);}

/* ---------- Formulario en linea (fila editable dentro de tabla) ---------- */
.pf-inline-form{margin:0;display:inline;}

/* ---------- Grilla editable (una fila = un form, ej. paquetes) ---------- */
.pf-edit-grid{display:grid;gap:12px;align-items:center;padding:16px 18px;border-top:1px solid var(--pf-line);}
.pf-edit-grid input.pf-input{padding:11px 14px;font-size:13px;}
.pf-edit-header{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pf-ink-soft);padding:0 18px 12px;}