/* ============================================================
   Aula Online · Centro Náutico Murcia
   Hoja de estilos compartida (portada + acceso)
   CSS plano con variables. Sin frameworks.
   ============================================================ */

:root{
  /* Marca */
  --cian:        #00B4D8;
  --cian-hover:  #16c2e6;
  --cian-dark:   #0091b3;
  --cian-soft:   #7fe0f5;
  --navy:        #0A2A4A;
  --navy-2:      #0e3a63;
  --navy-deep:   #071e36;
  --ink-on-cian: #06283d;  /* texto sobre cian */

  /* Neutros */
  --bg:        #eef3f7;
  --bg-field:  #f6f9fb;
  --line:      #dce6ee;
  --line-soft: #e7eef4;
  --text:      #0A2A4A;
  --muted:     #5a7184;
  --muted-2:   #7c8ca0;
  --white:     #ffffff;

  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius:    14px;
  --radius-lg: 24px;
  --maxw:      1240px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:"Manrope", system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
}
a{ text-decoration:none; color:inherit }
img{ max-width:100%; display:block }

.container{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(16px,3vw,28px) }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  border:none; border-radius:var(--radius);
  font-family:inherit; font-weight:800; line-height:1; cursor:pointer;
  text-decoration:none; transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-cian{ background:var(--cian); color:var(--ink-on-cian); box-shadow:0 10px 24px rgba(0,180,216,.35) }
.btn-cian:hover{ background:var(--cian-hover); transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,180,216,.45) }
.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 8px 22px rgba(6,40,61,.3) }
.btn-navy:hover{ background:var(--navy-2) }
.btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55) }
.btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff }

.btn-sm{ padding:13px 24px; font-size:16px }
.btn-md{ min-height:64px; padding:0 34px; font-size:clamp(18px,2.3vw,21px) }
.btn-lg{ min-height:68px; padding:0 28px; font-size:clamp(19px,2.4vw,23px) }
.btn-block{ flex:1 1 280px } /* a pantalla completa en móvil, lado a lado en desktop */

/* ---------- Logo ---------- */
.brand{ display:flex; align-items:center; gap:13px }
.brand-mark{
  display:inline-flex; width:50px; height:50px; flex:0 0 auto;
  align-items:center; justify-content:center;
  background:var(--navy); border-radius:13px;
}
.brand-mark--ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16) }
.brand-name{ display:block; font-weight:800; font-size:18px; letter-spacing:-.2px }
.brand-sub{ display:block; font-weight:600; font-size:12.5px; letter-spacing:.4px; text-transform:uppercase; color:#5a7184 }
.brand--light .brand-name{ color:#fff }
.brand--light .brand-sub{ color:#9fc6dd }

/* Rótulo monoespaciado (eyebrow) */
.eyebrow{
  display:inline-block; font-family:var(--mono);
  font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase;
}

/* ============================================================
   CABECERA (portada)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #dfe8ef;
  box-shadow:0 2px 10px rgba(10,42,74,.04);
}
.site-header .container{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px;
  padding-block:14px;
}
.site-header .brand-mark{ width:46px; height:46px }
.site-header .brand-name{ font-size:18px }
.nav{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 4px; margin-left:auto }
.nav-link{ padding:11px 16px; border-radius:10px; font-weight:700; font-size:16px; color:var(--navy) }
.nav-link:hover{ background:var(--bg) }

/* ============================================================
   HERO (portada)
   ============================================================ */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(160deg,#0A2A4A 0%,#0e3a63 52%,#071e36 122%);
}
.hero-frame{
  position:absolute; inset:clamp(14px,1.6vw,26px);
  border:1px solid rgba(255,255,255,.13); border-radius:18px; pointer-events:none;
}
.hero-compass{
  position:absolute; right:clamp(-120px,-6vw,-30px); top:50%; transform:translateY(-50%);
  width:clamp(300px,36vw,500px); opacity:.8; pointer-events:none;
}
.hero-waves{ position:absolute; left:0; bottom:0; width:100%; height:110px; opacity:.45; pointer-events:none }
.hero-inner{ position:relative; padding-block:clamp(48px,6.5vw,96px) }
.overline{ display:flex; align-items:center; gap:14px; margin-bottom:24px }
.overline .rule{ width:42px; height:2px; background:var(--cian); display:block; flex:0 0 auto }
.overline .eyebrow{ color:var(--cian-soft) }
.hero h1{
  margin:0; font-weight:800; font-size:clamp(34px,5.4vw,60px);
  line-height:1.04; letter-spacing:-1px; max-width:16ch;
}
.hero h1 em{ font-style:normal; color:#3ad0ef }
.hero-lede{
  margin:18px 0 0; font-size:clamp(18px,2.3vw,23px); line-height:1.5;
  color:#cfe0ee; font-weight:500; max-width:34ch;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px }

/* ============================================================
   FRANJA DE AYUDA (portada)
   ============================================================ */
.help-band{ background:var(--cian); color:var(--ink-on-cian) }
.help-band .container{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; padding-block:clamp(26px,3.4vw,40px) }
.help-icon{
  flex:0 0 auto; display:flex; width:56px; height:56px;
  align-items:center; justify-content:center;
  background:rgba(6,40,61,.12); border:1px solid rgba(6,40,61,.18); border-radius:14px;
}
.help-text{ flex:1 1 320px }
.help-text h2{ margin:0; font-weight:800; font-size:clamp(23px,3vw,32px); line-height:1.12; letter-spacing:-.5px }
.help-text p{ margin:8px 0 0; font-size:clamp(16px,2vw,20px); font-weight:600; color:#0a3a4d }

/* ============================================================
   TITULACIONES (portada)
   ============================================================ */
.section{ padding-block:clamp(48px,6vw,84px) }
.section-head{ text-align:center; max-width:38ch; margin:0 auto }
.section-head .eyebrow{ color:var(--cian-dark) }
.section-head h2{ margin:10px 0 0; font-weight:800; font-size:clamp(28px,3.8vw,42px); line-height:1.08; letter-spacing:-.8px }
.section-head p{ margin:14px 0 0; font-size:clamp(17px,2vw,20px); color:#506478; font-weight:500 }

.grid-courses{
  display:grid; gap:22px; margin-top:clamp(32px,4vw,52px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%,300px), 1fr));
}
.course-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #e2eaf1; border-radius:20px; overflow:hidden;
  box-shadow:0 6px 20px rgba(10,42,74,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.course-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(10,42,74,.13); border-color:#bfe6f1 }
.course-cover{
  position:relative; height:158px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0A2A4A 0%,#10547f 55%,#00B4D8 130%);
}
.course-badge{
  position:absolute; top:15px; left:16px;
  background:rgba(7,30,54,.34); border:1px solid rgba(255,255,255,.32); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:12.5px; letter-spacing:1px;
  padding:5px 11px; border-radius:8px;
}
.course-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 }
.course-body h3{ margin:0; font-weight:800; font-size:21px; line-height:1.15; letter-spacing:-.3px }
.course-body p{ margin:7px 0 0; font-size:16px; color:var(--muted); font-weight:500; line-height:1.4; flex:1 }
.course-link{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--cian-dark) }

/* ============================================================
   QUÉ INCLUYE (portada)
   ============================================================ */
.features{ background:var(--navy); color:#fff }
.features .section-head .eyebrow{ color:var(--cian-soft) }
.grid-features{
  display:grid; gap:18px; margin-top:clamp(32px,4vw,52px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,240px), 1fr));
}
.feature{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:26px 24px }
.feature-icon{
  display:inline-flex; width:60px; height:60px; align-items:center; justify-content:center;
  background:rgba(0,180,216,.18); border-radius:14px; margin-bottom:16px; color:#3ad0ef;
}
.feature h3{ margin:0; font-weight:800; font-size:20px }
.feature p{ margin:8px 0 0; font-size:16.5px; color:#bcd0e2; line-height:1.5; font-weight:500 }

/* ============================================================
   PIE (portada)
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:#cfdded }
.site-footer .container{ display:flex; flex-wrap:wrap; align-items:center; gap:26px 40px; padding-block:clamp(36px,4vw,56px) }
.site-footer .brand-mark{ width:46px; height:46px; background:var(--navy); border:1px solid rgba(255,255,255,.12) }
.site-footer .brand-name{ font-size:17px; color:#fff }
.site-footer .brand-sub{ font-size:12.5px; color:#8aa6bd }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 26px; font-weight:700; font-size:17px; margin-left:auto }
.footer-links a:hover{ color:var(--cian) }
.footer-legal{ border-top:1px solid rgba(255,255,255,.08) }
.footer-legal .container{ padding-block:18px; font-size:14.5px; color:#7c98af }

/* ============================================================
   ACCESO (login)
   ============================================================ */
.auth{ display:flex; flex-wrap:wrap; min-height:100vh; background:var(--bg) }

.auth-brand{
  position:relative; overflow:hidden; color:#fff;
  flex:1 1 430px; min-height:clamp(260px,34vh,100%);
  padding:clamp(30px,4vw,56px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(48px,7vh,90px);
  background:linear-gradient(158deg,#0A2A4A 0%,#0e3a63 46%,#0090b8 118%,#00B4D8 150%);
}
.auth-frame{ position:absolute; inset:clamp(15px,1.8vw,26px); border:1px solid rgba(255,255,255,.15); border-radius:18px; pointer-events:none }
.auth-compass{ position:absolute; right:clamp(-70px,-4vw,-44px); top:50%; bottom:auto; transform:translateY(-50%); width:clamp(230px,32vw,380px); pointer-events:none }
.auth-waves{ position:absolute; left:0; bottom:0; width:100%; height:120px; opacity:.5; pointer-events:none }
.auth-brand .brand{ position:relative }
.auth-brand-text{ position:relative; max-width:24ch }
.auth-brand-text .eyebrow{ color:var(--cian-soft); margin-bottom:16px; letter-spacing:1.5px }
.auth-brand-text h2{ margin:0; font-weight:800; font-size:clamp(30px,3.6vw,44px); line-height:1.08; letter-spacing:-.8px }
.auth-coords{ margin:18px 0 0; font-family:var(--mono); font-size:13px; letter-spacing:.5px; color:rgba(255,255,255,.6) }

.auth-form-zone{ flex:1 1 540px; display:flex; align-items:center; justify-content:center; padding:clamp(28px,4vw,60px) }
.auth-card{
  width:100%; max-width:448px; background:#fff;
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(28px,3.6vw,46px);
  box-shadow:0 30px 60px -22px rgba(10,42,74,.28), 0 8px 22px rgba(10,42,74,.05);
}
.auth-card h1{ margin:0; font-weight:800; font-size:clamp(27px,3.4vw,35px); line-height:1.1; letter-spacing:-.6px }
.auth-card .lede{ margin:10px 0 0; font-size:17.5px; line-height:1.5; color:var(--muted); font-weight:500 }

.field{ margin-top:20px }
.field:first-of-type{ margin-top:30px }
.field > label{ display:block; font-weight:700; font-size:16px; margin-bottom:9px }
.input{
  width:100%; height:60px; padding:0 18px;
  font-family:inherit; font-size:18px; font-weight:600; color:var(--text);
  background:var(--bg-field); border:2px solid var(--line); border-radius:var(--radius);
}
.input::placeholder{ color:#9aacbd; font-weight:500 }
.input:focus{ border-color:var(--cian); background:#fff; box-shadow:0 0 0 4px rgba(0,180,216,.18); outline:none }
.input-wrap{ position:relative }
.input-wrap .input{ padding-right:56px }
.toggle-pass{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:10px; cursor:pointer; color:var(--muted);
}
.toggle-pass:hover{ background:var(--bg); color:var(--text) }

.auth-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:20px }
.remember{ display:flex; align-items:center; gap:11px; background:none; border:none; cursor:pointer; font-family:inherit; font-size:16.5px; font-weight:600; color:var(--text); padding:6px 2px }
.checkbox{ width:27px; height:27px; border-radius:8px; border:2px solid #c2d2df; background:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto }
.remember[aria-pressed="true"] .checkbox{ border-color:var(--cian); background:var(--cian) }
.remember[aria-pressed="true"] .checkbox svg{ display:block }
.remember .checkbox svg{ display:none }
.link{ font-size:16px; font-weight:700; color:var(--cian-dark) }
.link:hover{ color:var(--cian); text-decoration:underline }

.auth-card .btn{ margin-top:24px; width:100%; height:64px; font-size:21px }
.help-line{ margin:24px 0 0; text-align:center; font-size:15.5px; line-height:1.5; color:var(--muted-2); font-weight:500 }
.help-line a{ color:var(--cian-dark); font-weight:700 }
.help-line a:hover{ text-decoration:underline }

/* Accesibilidad: respeta el "reduce motion" del usuario */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
}

/* ============================================================
   AÑADIDOS CNM (integración WordPress)
   ============================================================ */
/* Logo oficial como imagen (sustituye al marcador SVG del handoff) */
.brand-logo{ height:46px; width:auto; display:block }
.site-footer .brand-logo{ height:42px }
.auth-brand .brand-logo{ height:50px }

/* Portadas reales de curso dentro de la tarjeta */
.course-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.course-cover .course-badge{ z-index:2 }
.course-cover::after{ /* velo sutil para legibilidad del badge */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,30,54,.18) 0%, rgba(7,30,54,0) 38%);
  pointer-events:none;
}

/* Desplazar la cabecera sticky bajo la barra de admin (solo admins) */
body.admin-bar .site-header{ top:32px }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px } }

/* La portada/login viven en <body> del tema: neutralizamos paddings del tema */
body.cnm-aula-page{ margin:0 !important; padding:0 !important }
body.cnm-aula-page .wp-site-blocks,
body.cnm-aula-page > .wp-site-blocks{ padding:0 !important; margin:0 !important }

/* Checkbox real "Recordarme" (WordPress) con el estilo del diseño */
.remember{ position:relative }
.remember input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0 }
.remember input[type=checkbox] + .checkbox svg{ display:none }
.remember input[type=checkbox]:checked + .checkbox{ border-color:var(--cian); background:var(--cian) }
.remember input[type=checkbox]:checked + .checkbox svg{ display:block }
.remember input[type=checkbox]:focus-visible + .checkbox{ box-shadow:0 0 0 4px rgba(0,180,216,.25) }
/* Aviso de error de acceso */
.auth-error{ margin:18px 0 0; padding:12px 16px; border-radius:12px; background:#fdecec; border:1px solid #f5c2c2; color:#9b2226; font-size:15.5px; font-weight:600 }