/* ===== Base y centrado global (excepto navbar) ===== */
body{font-family:sans-serif;margin:0;background:#f5f5f5;color:#333}
main.container.centered{max-width:900px;margin:0 auto;padding:18px;text-align:center}
a{color:inherit;text-decoration:none}

/* ===== Navbar ===== */
.navbar{background:#2f8d7e;color:#fff;padding:8px 14px;display:flex;justify-content:space-between;align-items:center}
.navbar a{color:#fff}
.navbar ul{list-style:none;display:flex;margin:0;padding:0;gap:10px}
.brand{display:flex;align-items:center;gap:6px}
.brand-logo{width:22px;height:auto;max-height:24px;object-fit:contain;border-radius:4px;background:#fff}
.brand-text{font-weight:700;letter-spacing:.4px;font-size:14px}

/* ===== Botones y tarjetas ===== */
.btn{display:inline-block;padding:7px 11px;border-radius:8px;background:#ccc;color:#000}
.btn.primary{background:#2f8d7e;color:#fff}
.card{background:#fff;padding:14px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin:0 auto}
.alert{padding:9px;border-radius:8px;margin:10px 0}
.alert.danger{background:#d83a3a;color:#fff}
.alert.success{background:#2f8d7e;color:#fff}

/* ===== Splash (index con logo) ===== */
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64vh;text-align:center}
.splash-logo{width:110px;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12))}
.splash-logo-link{display:inline-block}

/* ===== Auth (login/registro/reset centrados) ===== */
.auth-wrapper{min-height:62vh;display:flex;align-items:center;justify-content:center}
.auth-card{width:100%;max-width:360px}
.auth-title{margin-top:0}
.auth-form{display:flex;flex-direction:column;gap:9px;text-align:left}
.auth-form label{display:flex;flex-direction:column;gap:6px}
.auth-form input,.auth-form select,.auth-form textarea{padding:9px;border:1px solid #ddd;border-radius:8px}
.auth-links{margin-top:8px}
.auth-links.stacked{display:flex;flex-direction:column;gap:8px}
.auth-links.stacked .btn.block{display:block;width:100%}

/* ===== Home + Carrusel (compacto) ===== */
.home-hero{max-width:680px;margin:0 auto}
.carousel{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);background:#000}
.carousel.center{margin:10px auto 0;max-width:640px;height:200px}
.carousel-track{display:flex;transition:transform .4s ease}
.carousel-slide{flex:0 0 auto;width:100%;height:100%}
.carousel-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.85);padding:5px 9px;border-radius:50%;cursor:pointer}
.carousel-btn:hover{background:#fff}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}
.carousel-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px}
.carousel-dots .dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer}
.carousel-dots .dot.active{background:#fff}

/* ===== Grids centradas ===== */
.grid{display:grid;gap:14px;justify-items:center}
.center-grid{max-width:680px;margin:0 auto}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}

/* ===== Comparativa de planes ===== */
.section-title{text-align:center;margin:6px 0 10px}
.compare-card{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:12px;display:inline-block;margin:0 auto}
.table-wrapper{overflow:auto}
table.compare{width:100%;border-collapse:collapse;min-width:560px;background:#fff}
table.compare th,table.compare td{padding:9px 8px;border-bottom:1px solid #eee;text-align:center;vertical-align:middle;font-size:14px}
table.compare thead th{background:#f7faf9;font-weight:600}
table.compare tbody tr:hover{background:#fafafa}
table.compare td.yes{color:#2e7d32;font-weight:bold}
table.compare td.no{color:#9e9e9e}

/* Cards de planes debajo de la tabla */
.plans-grid{display:grid;gap:14px;grid-template-columns:repeat(1,1fr);margin-top:6px;justify-items:center}
@media(min-width:720px){.plans-grid{grid-template-columns:repeat(3,1fr)}}
.plan-card{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:14px;display:flex;flex-direction:column;justify-content:space-between;max-width:280px}
.plan-card h3{margin:0 0 8px 0}
.plan-card .features{list-style:none;margin:0 0 10px 0;padding:0;text-align:left}
.plan-card.plan-gratuito{border-top:3px solid #ccc}
.plan-card.plan-estudiantil{border-top:3px solid #2f8d7e}
.plan-card.plan-premium{border-top:3px solid #d4af37}

/* ===== Chips filtros contenido ===== */
.chip-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid #2f8d7e;background:#fff;color:#2f8d7e;border-radius:999px;padding:5px 9px;cursor:pointer;font-size:14px}
.chip.active,.chip:hover{background:#2f8d7e;color:#fff}
.filters-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.filters select{padding:6px;border-radius:6px;border:1px solid #ddd}
.video-wrap{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}
.video-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%}

/* ===== Plan detail ===== */
.plan-detail{display:grid;gap:14px;justify-items:center}
@media(min-width:900px){.plan-detail{grid-template-columns:1fr 1fr}}
.centered-list{list-style:none;margin:0;padding:0}
.centered-list li{margin:6px 0}
.bars{display:flex;flex-direction:column;gap:7px;align-items:center}
.bar-row{display:flex;align-items:center;gap:8px;justify-content:center}
.bar-label{width:38px;text-align:right;font-size:14px}
.bar{width:58%;height:9px;background:#eee;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:#2f8d7e}
.bar-pct{width:40px;text-align:left;font-size:13px}
.stars{color:#f5c518} /* amarillo */

/* Pie chart */
.pie-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.pie{--yes:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(#1f6f62 calc(var(--yes)*1%), #e0e0e0 0);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.legend{display:flex;align-items:center;gap:6px}
.leg{display:inline-flex;align-items:center}
.yes-box,.no-box{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:4px}
.yes-box{background:#1f6f62}.no-box{background:#e0e0e0}

/* Comentarios */
.feedback-form{display:flex;flex-direction:column;gap:9px}
.feedback-form textarea{resize:vertical}
.comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:380px;overflow:auto}
.comment{max-width:620px;margin:0 auto}
.comment-head{display:flex;align-items:center;gap:8px;color:#666;justify-content:center;flex-wrap:wrap}
.comment-head .dot{width:4px;height:4px;border-radius:50%;background:#bbb;display:inline-block}
.reco-tag{padding:2px 8px;border-radius:999px;font-size:12px}
.reco-tag.yes{background:#e6f3f0;color:#1f6f62}
.reco-tag.no{background:#f8e6e6;color:#a33}

/* ===== Carrusel FADE ===== */
.carousel-fade{position:relative;overflow:hidden;border-radius:12px;background:#000}
.carousel-fade .fade-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.carousel-fade .fade-img.active{opacity:1}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.85);padding:5px 9px;border-radius:50%;cursor:pointer}
.carousel-btn:hover{background:#fff}
.carousel-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px}
.carousel-dots .dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer}
.carousel-dots .dot.active{background:#fff}

/* ====== POLISH PACK ====== */
:root{--primary:#2f8d7e;--primary-600:#277a6e;--ring:#72d1c3;--bg:#f5f5f5;--text:#333;--shadow:0 2px 8px rgba(0,0,0,.08)}
*{box-sizing:border-box} body{line-height:1.45}
footer{display:flex;justify-content:center} footer p{margin:18px 0;color:#667;font-size:13px}
.btn{transition:transform .05s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.10)} .btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.btn.primary{background:var(--primary)} .btn.primary:hover{background:var(--primary-600)}
.btn.outline,.auth-links .btn,.auth-links.stacked .btn.block{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn.outline:hover,.auth-links .btn:hover,.auth-links.stacked .btn.block:hover{background:var(--primary);color:#fff}
.navbar ul{gap:14px}
.card{border:1px solid #eee;box-shadow:var(--shadow)}
.filters.card{border:1px solid #eaeaea;box-shadow:0 6px 18px rgba(0,0,0,.06);backdrop-filter:saturate(115%) blur(2px)}
.chip{transition:transform .05s ease, box-shadow .2s ease} .chip:hover{box-shadow:0 3px 10px rgba(47,141,126,.18);transform:translateY(-1px)}
.home-hero .btn.primary{min-width:230px}
.compare-card{max-width:980px} .table-wrapper{overflow:auto} table.compare thead th{position:sticky;top:0;z-index:1}
.plan-detail + .card, .plan-detail .card{max-width:520px}
.plan-detail h3{margin-top:0} .plan-detail .btn.primary{min-width:200px}
.center-grid{margin-top:10px} .center-grid .card{min-height:220px}
.carousel-btn{box-shadow:0 2px 8px rgba(0,0,0,.2)} .carousel-btn:hover{transform:scale(1.05)}
.carousel-dots .dot{transition:transform .1s ease} .carousel-dots .dot:hover{transform:scale(1.2)}
.carousel-fade .fade-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.carousel-fade .fade-slide.active{opacity:1}
.carousel-fade .fade-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel-caption{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f5e55;border:1px solid #2f8d7e;font-weight:700;font-size:clamp(12px,1.8vw,16px);box-shadow:0 6px 18px rgba(0,0,0,.12);text-align:center;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}

/* ===== Pago / Portal / Agenda ===== */
.pay-wrap{max-width:560px;margin:0 auto}
.form-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.form-row > label{flex:1 1 240px;text-align:left}
.form-row input, .form-row select{width:100%;padding:9px;border:1px solid #ddd;border-radius:8px}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e6f3f0;color:#1f6f62;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:740px;margin:10px auto}
.kpi{background:#fff;border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.kpi h4{margin:0 0 6px 0} .kpi p{margin:0;color:#555}
.pro-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:12px;max-width:820px;margin:0 auto}
@media(min-width:700px){.pro-grid{grid-template-columns:repeat(3,1fr)}}
.pro-card{background:#fff;border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.pro-card h4{margin:0 0 6px 0}
.slot{display:inline-block;margin:4px;padding:6px 8px;border:1px solid #2f8d7e;border-radius:8px;cursor:pointer}
.slot.booked{opacity:.4;pointer-events:none}
.bookings{max-width:820px;margin:10px auto}
.meeting-video{width:100%;max-width:780px;aspect-ratio:16/9;border:0;border-radius:12px;box-shadow:var(--shadow);background:#000}

/* === FIX CARRUSEL FADE (pegar al FINAL) === */
#fadeCarousel{max-width:640px;height:200px;margin:10px auto;}

.carousel-fade{
  position:relative; overflow:hidden; border-radius:12px; background:#000;
}

/* El fade va en la SLIDE */
.carousel-fade .fade-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
}
.carousel-fade .fade-slide.active{ opacity:1; }

/* La imagen SIEMPRE visible (anula reglas previas) */
.carousel-fade .fade-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1 !important; transition:none !important;
}

/* Controles y dots (ya los tenías, los dejo aquí por si acaso) */
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.85);padding:5px 9px;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.carousel-btn:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.carousel-btn.prev{left:8px} .carousel-btn.next{right:8px}
.carousel-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px}
.carousel-dots .dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;transition:transform .1s ease}
.carousel-dots .dot.active{background:#fff} .carousel-dots .dot:hover{transform:scale(1.2)}

/* Botones bloques grandes y centrados (para formularios de admin) */
.btn.block{
  display:block;
  width:100%;
  max-width:320px;
  margin:10px auto;
}
.btn.lg{
  padding:10px 16px;
  font-weight:600;
}


/* ===== Mobile Fix ===== */
html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; } /* evita zoom raro o texto mini */

@media (max-width: 520px){
  main.container.centered{ padding: 14px; }
  .navbar{ flex-wrap: wrap; gap: 10px; }
  .navbar ul{ flex-wrap: wrap; justify-content: center; }

  /* Botones más cómodos */
  .btn{ padding: 10px 14px; border-radius: 10px; }

  /* Evitar que KPIs y grids queden apretados */
  .kpis{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr !important; }

  /* Tablas: scroll horizontal y no romper */
  table.compare{ min-width: 680px; }
}