/* ============================================================
   Sara & Dánae · LMS — Sistema de diseño de marca
   Colores y tipografía extraídos de saraydanae.com
   ============================================================ */

:root {
  --sd-teal:      #0F8B8D;   /* Botones / CTA principal */
  --sd-teal-dark: #0B6F71;
  --sd-teal-tint: #E7F2F2;
  --sd-rose:      #CC3366;   /* Acento / logo / precios */
  --sd-rose-soft: #F7E4EC;
  --sd-gold:      #D0A97F;   /* Nav / detalles */
  --sd-cream:     #F8EFE3;   /* Fondos suaves */
  --sd-ink:       #181818;   /* Texto principal */
  --sd-brown:     #513517;   /* Texto cálido */
  --sd-muted:     #69727D;   /* Texto secundario */
  --sd-line:      #EFE7DA;   /* Bordes suaves */
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: 'Albert Sans', system-ui, sans-serif;
  color: var(--sd-ink);
  background: #ffffff;
}

/* Logo manuscrito ---------------------------------------------------------- */
.sd-logo {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  line-height: 1;
  color: var(--sd-rose);
  letter-spacing: .5px;
}
.sd-logo .amp { color: var(--sd-gold); }

/* Botones ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .8rem 1.6rem; border-radius: 52px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer; border: 2px solid transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--sd-teal); color: #fff; box-shadow: 0 8px 20px -8px rgba(15,139,141,.55); }
.btn-primary:hover { background: var(--sd-teal-dark); }
.btn-rose { background: var(--sd-rose); color: #fff; box-shadow: 0 8px 20px -8px rgba(204,51,102,.55); }
.btn-rose:hover { background: #b02a58; }
.btn-outline { background: #fff; color: var(--sd-teal); border-color: var(--sd-teal); }
.btn-outline:hover { background: var(--sd-teal-tint); }
.btn-ghost { background: transparent; color: var(--sd-ink); }
.btn-ghost:hover { background: var(--sd-cream); }

/* Chips / tabs de filtro --------------------------------------------------- */
.chip {
  font-weight: 600; font-size: .9rem;
  padding: .55rem 1.25rem; border-radius: 52px;
  border: 1.5px solid var(--sd-line); color: var(--sd-muted);
  background: #fff; cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.chip:hover { border-color: var(--sd-gold); color: var(--sd-brown); }
.chip.is-active { background: var(--sd-teal); border-color: var(--sd-teal); color: #fff; box-shadow: 0 6px 16px -8px rgba(15,139,141,.6); }

/* Tarjeta de curso --------------------------------------------------------- */
.course-card {
  background: #fff; border: 1px solid var(--sd-line); border-radius: 22px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.course-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -24px rgba(24,24,24,.28); border-color: transparent; }
.course-card .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, var(--sd-cream), var(--sd-rose-soft)); }
.course-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.course-card:hover .thumb img { transform: scale(1.06); }

/* Placeholder degradado (si una imagen no carga) --------------------------- */
.ph-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sd-rose-soft), var(--sd-teal-tint)); color: #fff;
}
.ph-fallback svg { width: 2.5rem; height: 2.5rem; opacity: .55; }

/* Iconos de línea (estilo Tutor LMS) --------------------------------------- */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic-fill { fill: currentColor; stroke: none; }
.ic-star { color: var(--sd-gold); }

/* Badges ------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .3rem .7rem; border-radius: 52px; }
.badge-sale { background: var(--sd-rose); color: #fff; }
.badge-new  { background: var(--sd-gold); color: #fff; }
.badge-soft { background: var(--sd-cream); color: var(--sd-brown); }

/* Precio ------------------------------------------------------------------- */
.price { color: var(--sd-rose); font-weight: 800; }
.price-old { color: var(--sd-muted); text-decoration: line-through; font-weight: 500; font-size: .85em; }

/* Barra de progreso -------------------------------------------------------- */
.progress { height: 8px; border-radius: 52px; background: var(--sd-cream); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 52px; background: linear-gradient(90deg, var(--sd-teal), #2bb3b5); }

/* Utilidades --------------------------------------------------------------- */
.section-eyebrow { color: var(--sd-gold); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.link-underline { position: relative; }
.link-underline::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px; background: var(--sd-rose); transition: width .2s ease; }
.link-underline:hover::after { width:100%; }
.hide { display: none !important; }

/* Tabs estilo Tutor LMS ---------------------------------------------------- */
.tutor-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--sd-line); flex-wrap: wrap; }
.tutor-tab {
  font-weight: 700; font-size: .95rem; padding: .9rem 1.4rem;
  color: var(--sd-muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
  cursor: pointer; background: none; transition: color .15s ease, border-color .15s ease;
}
.tutor-tab:hover { color: var(--sd-ink); }
.tutor-tab.is-active { color: var(--sd-teal); border-bottom-color: var(--sd-teal); }
.tutor-pane { display: none; }
.tutor-pane.is-active { display: block; }

/* Scrollbar suave para el player ------------------------------------------- */
.sd-scroll::-webkit-scrollbar { width: 8px; }
.sd-scroll::-webkit-scrollbar-thumb { background: var(--sd-line); border-radius: 8px; }
.sd-scroll::-webkit-scrollbar-thumb:hover { background: var(--sd-gold); }

/* ============================================================
   Añadidos del TEMA (no van en el prototipo)
   ============================================================ */

/* Áreas táctiles. LECCIÓN DE DIELEC: el tamaño no se ata al ANCHO de pantalla
   —un iPad mide 810px y cruza el corte de `md:`— sino al PUNTERO. Con
   `pointer: coarse` entran teléfono y tableta, y queda fuera el ratón. */
@media (pointer: coarse) {
  header > div > a,   /* el logo también se toca: lleva al inicio */
  header nav a,
  footer a,
  #mobile-menu a {
    /* 44 de ALTO no basta: una palabra corta del pie («Ballet») mide 36 de ancho.
       El área que se toca son las dos medidas. Cachado al meter el pie nuevo. */
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  #menu-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: -10px; /* que el ícono no se despegue del borde al crecer */
  }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .btn  { min-height: 44px; }
  /* Los botones y enlaces que pinta WooCommerce, que no llevan nuestras clases */
  .woocommerce .button,
  .woocommerce button[type="submit"],
  .woocommerce input[type="submit"],
  .woocommerce-form-login__submit,
  .woocommerce-LostPassword a,
  .woocommerce-form-login .show-password-input {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* El ojito de «ver contraseña» medía 22 de ancho: alto no basta, también ancho. */
  .woocommerce .show-password-input,
  .woocommerce button:not(.button) { min-width: 44px; min-height: 44px; }
}

/* ------------------------------------------------------------------
   Puente con Tutor LMS
   Tutor pinta sus propios botones y precios (.tutor-btn, .tutor-fs-4…).
   No se reimplementan sus plantillas —ahí vive la lógica de compra que el
   arnés verificó—: se les pone la piel de la marca.
   ------------------------------------------------------------------ */
.sd-caja-compra .tutor-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 1rem 1.6rem; border-radius: 52px;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
}
.sd-caja-compra .tutor-btn:hover { transform: translateY(-1px); }
.sd-caja-compra .tutor-btn-primary {
  background: var(--sd-teal); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(15,139,141,.55);
}
.sd-caja-compra .tutor-btn-primary:hover { background: var(--sd-teal-dark); }
.sd-caja-compra .tutor-btn-outline-primary {
  background: #fff; color: var(--sd-teal); border-color: var(--sd-teal);
}
.sd-caja-compra .tutor-btn-outline-primary:hover { background: var(--sd-teal-tint); }
.sd-caja-compra .tutor-btn-block { width: 100%; }

/* El precio, con el rosa de la marca */
.sd-caja-compra .tutor-course-sidebar-card-pricing span { color: var(--sd-rose); font-weight: 800; }
.sd-caja-compra .tutor-course-sidebar-card-pricing del,
.sd-caja-compra .tutor-course-sidebar-card-pricing del span {
  color: var(--sd-muted); font-weight: 500; text-decoration: line-through;
}
.sd-caja-compra .tutor-fs-4 { font-size: 1.9rem; }
.sd-caja-compra .tutor-d-flex { display: flex; }
.sd-caja-compra .tutor-align-end { align-items: flex-end; }
.sd-caja-compra .tutor-justify-between { justify-content: space-between; }
.sd-caja-compra .tutor-mt-20 { margin-top: 1.25rem; }

/* El logo, a prueba de WooCommerce.
   WooCommerce trae `.woocommerce-page img { height: auto }` — especificidad (0,1,1),
   que le GANA a `.h-9` de Tailwind (0,1,0). En carrito y pago el logo se iba a su
   tamaño natural (1024px) y desbordaba la página entera en teléfono: 1,205 sobre 375.
   `header .sd-logo-img` es (0,2,1) y sí gana. Medido el 1-sep-2026. */
header .sd-logo-img,
footer .sd-logo-img { height: 2.25rem; width: auto; max-width: 100%; }
@media (min-width: 640px) { header .sd-logo-img { height: 2.5rem; } }
footer .sd-logo-pie { height: 1.75rem; }

/* Carrito del encabezado ---------------------------------------------------- */
.sd-carrito {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; color: var(--sd-ink);
  transition: background .18s ease, color .18s ease;
}
.sd-carrito:hover { background: var(--sd-cream); color: var(--sd-teal); }
.sd-carrito .ic { width: 1.35em; height: 1.35em; }
.sd-carrito__n {
  position: absolute; top: 1px; right: 0;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sd-rose); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1; border-radius: 52px;
  box-shadow: 0 0 0 2px #fff;
}
.sd-carrito--lleno { color: var(--sd-teal); }
@media (pointer: coarse) { .sd-carrito { min-width: 44px; min-height: 44px; } }
/* 🚨 El ícono del carrito empujó el botón de menú 6px fuera de la pantalla en
   teléfono. En pantallas chicas la barra aprieta el espacio, no el área táctil. */
@media (max-width: 480px) {
  header .sd-nav-acciones { gap: .25rem !important; }
  .sd-carrito { padding-left: .35rem; padding-right: .35rem; }
}

/* ── Entrar y crear cuenta (Tutor) ───────────────────────────────────────
   Tutor los pinta grises y cuadrados; aquí visten como los del checkout. */
.tutor-login-form-wrapper,
.sd-acceso--registro .tutor-card {
  border: 1px solid var(--sd-line); border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(24,24,24,.04), 0 18px 44px -30px rgba(24,24,24,.35);
}
.tutor-login-form-wrapper input[type="text"],
.tutor-login-form-wrapper input[type="email"],
.tutor-login-form-wrapper input[type="password"],
.sd-acceso .tutor-form-control,
.sd-acceso input[type="text"],
.sd-acceso input[type="email"],
.sd-acceso input[type="password"] {
  width: 100%; background: #fff !important; border: 1.5px solid var(--sd-line) !important;
  border-radius: 14px !important; padding: .85rem 1.05rem !important;
  font-family: 'Albert Sans', system-ui, sans-serif; font-size: .97rem; color: var(--sd-ink);
}
.tutor-login-form-wrapper input:focus,
.sd-acceso .tutor-form-control:focus,
.sd-acceso input:focus {
  outline: none; border-color: var(--sd-teal) !important;
  box-shadow: 0 0 0 3px var(--sd-teal-tint) !important;
}
.sd-acceso label,
.tutor-login-form-wrapper label { font-weight: 600; font-size: .9rem; color: var(--sd-ink); }
.sd-acceso .tutor-btn-primary,
.sd-acceso button[type="submit"],
.tutor-login-form-wrapper button[type="submit"] {
  border-radius: 52px !important; padding: .95rem 1.5rem !important;
  font-weight: 700 !important; font-size: 1rem !important;
}
/* En teléfono la caja no se pega a los bordes. */
@media (max-width: 560px) {
  .tutor-login-form-wrapper, .sd-acceso--registro .tutor-card { border-radius: 18px; }
  .tutor-login-form-wrapper.tutor-p-8 { padding: 1.4rem !important; }
}
/* El campo escondido no deja hueco (una clase con display le gana a [hidden]). */
.tutor-form-group[hidden] { display: none !important; }

/* ── Entrar / Crear cuenta: las dos cajas en una pantalla ────────────────── */
.sd-acceso-wrap { max-width: 1000px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.sd-acceso-h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .4rem; text-align: center; color: var(--sd-ink);
}
.sd-acceso-bajada { text-align: center; color: var(--sd-muted); margin: 0 auto 2.2rem; max-width: 46ch; }

.sd-acceso-cajas { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .sd-acceso-cajas { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.sd-acceso-caja {
  background: #fff; border: 1px solid var(--sd-line); border-radius: 22px;
  padding: 1.6rem 1.5rem 1.8rem;
  box-shadow: 0 1px 2px rgba(24,24,24,.04), 0 18px 44px -30px rgba(24,24,24,.35);
}
/* La de crear cuenta se distingue sin gritar: crema en vez de blanco. */
.sd-acceso-caja--nueva { background: var(--sd-cream); border-color: transparent; }
.sd-acceso-tit { font-size: 1.15rem; font-weight: 800; margin: 0 0 .25rem; color: var(--sd-ink); }
.sd-acceso-sub { font-size: .9rem; color: var(--sd-muted); margin: 0 0 1.2rem; }

/* Los formularios de Tutor, dentro de las cajas, sin su propia tarjeta. */
.sd-acceso-doble .tutor-login-form-wrapper,
.sd-acceso-doble .tutor-card {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}
.sd-acceso-doble .tutor-login-wrap { max-width: none !important; width: auto !important; margin: 0 !important; }
/* El título propio de Tutor sobra: cada caja ya tiene el suyo. */
.sd-acceso-doble .tutor-login-form-wrapper > .tutor-h3,
.sd-acceso-doble .tutor-login-form-wrapper > .tutor-fs-4 { display: none !important; }
/* Y el enlace de «¿no tienes cuenta?» también: la otra caja está al lado. */
/* El enlace «¿todavía no tienes cuenta?» sobra: la caja está al lado.
   El selector viejo (`.tutor-text-center:last-child`) no pegaba porque Tutor lo
   envuelve en otro nodo; se apunta por el enlace a la página de registro. */
.sd-acceso-doble form a[href*="registration"],
.sd-acceso-doble form a[href*="crear-cuenta"] { display: none !important; }
/* Y el renglón entero que lo contiene, o queda el «¿Todavía no tienes cuenta?»
   huérfano sin el enlace. `:has()` sirve aquí porque el texto y el enlace son
   hermanos dentro del mismo bloque. */
.sd-acceso-doble .sd-acceso-caja p:has(a[href*="registration"]),
.sd-acceso-doble .sd-acceso-caja div:has(> a[href*="registration"]) { display: none !important; }
.sd-acceso-doble .tutor-form-control, .sd-acceso-doble input[type="text"],
.sd-acceso-doble input[type="email"], .sd-acceso-doble input[type="password"] {
  width: 100%; background: #fff !important; border: 1.5px solid var(--sd-line) !important;
  border-radius: 14px !important; padding: .85rem 1.05rem !important;
  font-family: 'Albert Sans', system-ui, sans-serif; font-size: .97rem; color: var(--sd-ink);
}
.sd-acceso-doble .tutor-form-control:focus, .sd-acceso-doble input:focus {
  outline: none; border-color: var(--sd-teal) !important; box-shadow: 0 0 0 3px var(--sd-teal-tint) !important;
}
.sd-acceso-doble label { font-weight: 600; font-size: .9rem; color: var(--sd-ink); }
.sd-acceso-doble .tutor-btn-primary, .sd-acceso-doble button[type="submit"] {
  width: 100%; border-radius: 52px !important; padding: .95rem 1.5rem !important;
  font-weight: 700 !important; font-size: 1rem !important; min-height: 48px;
}

/* El botón de Google (aparece solo cuando haya credenciales) */
.sd-google { margin-top: 1.1rem; }
.sd-google-o {
  display: block; text-align: center; font-size: .78rem; color: var(--sd-muted);
  margin: 0 0 .8rem; position: relative;
}
.sd-google-o::before, .sd-google-o::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 1.2rem);
  border-top: 1px solid var(--sd-line);
}
.sd-google-o::before { left: 0; } .sd-google-o::after { right: 0; }
.sd-google-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 48px; background: #fff; color: var(--sd-ink);
  border: 1.5px solid var(--sd-line); border-radius: 52px; text-decoration: none;
  font-weight: 600; font-size: .95rem;
}
.sd-google-btn:hover { border-color: var(--sd-ink); color: var(--sd-ink); }