/* =============================================================================
   WHA 2026 — capa de estilo para las páginas de avalwha/
   -----------------------------------------------------------------------------
   Aplica la identidad del Branding Kit WHA (Plus Jakarta Sans, #6A1B6C) SIN
   tocar los CSS existentes. Se carga ÚLTIMA, justo antes de </head>, en:
     - avalwha/index.html
     - avalwha/alumnos-wap.html
   Para deshacer: borrar la línea <link ... wha-2026.css> de cada página.

   NOTAS TÉCNICAS
   - Los estilos viejos usan selectores con #id (#divHtml p, #estructura
     .structure h4...). Acá se repite el mismo selector con "html body" delante
     para ganar siempre, sin !important.
   - Las páginas tienen colores escritos en el propio HTML (style="..."). Esos
     solo se pueden pisar con !important: se hace solo para esos casos.
   - style-atw.css fija html{font-size:10px}, así que 1rem = 10px en estas
     páginas. Por eso acá todo va en px, no en rem.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

:root{
  --wha-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --wha-primary: #6A1B6C;
  --wha-primary-hover: #7E2B80;
  --wha-primary-dark: #5A155C;
  --wha-accent-soft: #F9F0F9;

  --wha-heading: #43103F;
  --wha-text: #2B2230;
  --wha-text-muted: #6E6173;

  --wha-bg: #FAF6FA;
  --wha-surface: #FFFFFF;
  --wha-surface-2: #F6F1F6;
  --wha-border: #ECE4EC;
  --wha-border-strong: #DCD0DC;

  --wha-success: #2C6B58;

  --wha-radius: 16px;
  --wha-radius-pill: 999px;
  --wha-shadow: 0 4px 18px rgba(67,16,63,.07), 0 2px 6px rgba(67,16,63,.04);
}

/* --- Base ------------------------------------------------------------------ */
html body{
  font-family: var(--wha-font);
  color: var(--wha-text);
  background: var(--wha-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body a{ color: var(--wha-primary-hover); }
html body a:hover{ color: var(--wha-primary-dark); }

/* --- Encabezado (bandas de color de arriba) -------------------------------- */
.structure[style*="#400043"]{ background-color: var(--wha-heading) !important; }
.structure[style*="#7b2799"]{ background-color: var(--wha-primary) !important; }

html body #estructura .structure h4,
html body #estructura .structure h5,
html body #estructura .structure h6{
  font-family: var(--wha-font);
  letter-spacing: -0.01em;
}
/* Los tres textos del encabezado, sin negrita (pedido 2026-09-27) */
html body #estructura .structure h6{ font-weight: 400; color: #fff; }
html body #estructura .structure h5{ font-weight: 400; color: #fff; line-height: 1.15; }
html body #estructura .structure h5 strong{ font-weight: 400; }
html body #estructura .structure h4{ font-weight: 400; color: var(--wha-primary); }

/* v3 — "Aval y Registro Profesional WHA": 1 punto menos, en negrita, y
   50% más de aire arriba y abajo.
   Antes: arriba 17 px (10 del texto anterior + 7 propios), abajo 20 px.
   Ahora: 26 px arriba (10 + 16) y 26 px abajo. */
html body #estructura .structure h5{
  font-size: 41px;          /* era 42 */
  font-weight: 700;
  padding-top: 16px;        /* era 7 */
  padding-bottom: 40px;     /* v5: 40 px (v4 31, original 20) */
}
html body #estructura .structure h5 strong{ font-weight: 700; }

/* "Puedes validar tu recorrido…": v3 24->23, v4 23->22, v5 en negrita */
html body #estructura .structure h4{ font-size: 22px; font-weight: 700; }

@media (max-width: 991px){
  html body #estructura .structure h5{
    font-size: 32px;        /* era 33 en celular/tablet */
    padding-top: 16px;      /* era 8 */
    padding-bottom: 40px;   /* v5 */
  }
  html body #estructura .structure h4{ font-size: 18px; } /* v3 20->19, v4 19->18 */
}

/* v3 — "Acceso mensual simple. / Puedes cancelar cuando quieras." en negrita
   (index.html). En alumnos-wap.html el texto equivalente es .nota-boton. */
html body #divHtml > p[style*="padding-bottom:30px; padding-top:15px"],
html body .nota-boton{
  font-weight: 700;
}

/* Imagen del encabezado 10% más chica (era max 600px y 90% de ancho) */
img[src$="head1.png"]{
  max-width: 540px !important;
  width: 81% !important;
}

/* --- Secciones ------------------------------------------------------------- */
html body #divHtml{ background-color: var(--wha-surface); }
html body #divHtml2{ background-color: var(--wha-surface-2); }

/* Fondos escritos en el HTML */
#divHtml2[style*="#fdf7db"]{ background-color: var(--wha-accent-soft) !important; }  /* amarillo -> lila suave */
#divHtml2[style*="#ededed"]{ background-color: var(--wha-surface-2) !important; }     /* gris -> superficie WHA */

/* --- v4: fondos de lado a lado (sin "cuadros" en PC) ----------------------- */
/* #divHtml mide como máximo 1024 px: en PC se veía como una caja blanca sobre
   el fondo lila. Técnica "full-bleed": la sombra extiende el color hacia los
   costados y el clip-path la recorta arriba y abajo, así ocupa todo el ancho
   de la pantalla sin generar scroll horizontal. */
html body #divHtml{
  background-color: var(--wha-surface);
  box-shadow: 0 0 0 100vmax var(--wha-surface);
  clip-path: inset(0 -100vmax);
}

/* Sin fondo blanco (se ve el fondo general), pedido 2026-09-27:
   1) La sección de "Acceso mensual simple. / Puedes cancelar cuando quieras." */
html body #divHtml:has(> p[style*="padding-bottom:30px; padding-top:15px"]),
/* 2) La sección "El Aval y Registro Profesional WHA no es solo formar parte de
      un directorio…": es el #divHtml que sigue al primer bloque amarillo
      (el segundo bloque amarillo tiene margin-top y queda excluido). */
html body #divHtml2[style*="#fdf7db"]:not([style*="margin-top"]) + #divHtml{
  background-color: transparent;
  box-shadow: none;
  clip-path: none;
}

/* Contenedor de las columnas de testimonios en PC: tiene columnas flotantes y
   no las envolvía, así que su fondo no cubría las imágenes. */
html body #pc::after{ content: ""; display: table; clear: both; }

/* Bloques sueltos que también van en blanco de lado a lado */
html body #pc:has(img[src$="test-1.jpg"]),              /* testimonios 1, versión PC */
html body p[style="text-align:center; margin:auto;"],   /* "Esto te permite empezar a ser visto…" */
html body p[style*="font-size:14px; color:#7b2799"],    /* "* Al dar clic verás el valor…" */
html body div:has(> img[src$="medios-de-pago-wha.jpg"]){
  background-color: var(--wha-surface);
  box-shadow: 0 0 0 100vmax var(--wha-surface);
  clip-path: inset(0 -100vmax);
}
html body p[style*="font-size:14px; color:#7b2799"]{ color: var(--wha-primary) !important; }

/* v5 — "Esto te permite empezar a ser visto…" al mismo tamaño que los párrafos
   de sección ("Cuando alguien ve tu perfil…": 17 px, interlineado 30 px). */
html body p[style="text-align:center; margin:auto;"]{
  font-size: 17px;
  line-height: 30px;
}

/* v5 — "$4,97 USD" destacado dentro de "Ingreso simple y accesible".
   Requiere envolver el precio en <strong class="precio-destacado"> en el HTML. */
html body .precio-destacado{ font-weight: 800; }

/* v6 — Línea chica con el precio debajo de los botones 3 y 4.
   Mismo tamaño que "Acceso mensual simple…" (15 px, negrita). */
html body p.nota-precio{
  font-family: var(--wha-font);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--wha-text);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 10px 16px 0;
  background-color: var(--wha-surface);
  box-shadow: 0 0 0 100vmax var(--wha-surface);
  clip-path: inset(0 -100vmax);
}
html body p.nota-precio--boton3{ padding-bottom: 40px; }  /* el aire que antes tenía el botón 3 */

/* v7 — En celular, la nota va en dos líneas:
   "USD 4,97 al mes." / "Cancelas cuando quieras." */
@media (max-width: 700px){
  html body .nota-precio-linea2{ display: block; }
}

/* v7 — Con la barra fija, el final de la página queda tapado: se agrega
   aire abajo solo en las páginas que tienen la barra y solo en celular. */
@media (max-width: 700px){
  html body:has(#wha-barra){ padding-bottom: 80px; }
}

/* v6 — Barra fija inferior, solo en celular (hasta 700 px, igual que el
   resto de la página). La muestra/oculta wha-barra.js. */
html body .wha-barra{ display: none; }
@media (max-width: 700px){
  html body .wha-barra{
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    box-shadow: 0 -4px 18px rgba(67,16,63,.12);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  html body .wha-barra--visible{
    transform: translateY(0);
    visibility: visible;
  }
  html body .wha-barra-btn{
    display: block;
    text-align: center;
    font-family: var(--wha-font);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    color: #fff;
    background: var(--wha-primary);
    border-radius: var(--wha-radius-pill);
    padding: 14px 18px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(106,27,108,.28);
  }
  html body .wha-barra-btn:hover{
    color: #fff;
    background: var(--wha-primary-hover);
    text-decoration: none;
  }
}

/* Botones 2, 3 y 4 con fondo blanco de lado a lado.
   Sus márgenes pasan a ser relleno para que el blanco no quede cortado. */
html body .container:has(a[href*="sck=boton2"]),
html body .container:has(a[href*="sck=boton3"]),
html body .container:has(a[href*="sck=boton4"]),
html body .container:has(a[href*="sck=wa_aval_b2"]),
html body .container:has(a[href*="sck=wa_aval_b3"]){
  background-color: var(--wha-surface);
  box-shadow: 0 0 0 100vmax var(--wha-surface);
  clip-path: inset(0 -100vmax);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body .container:has(a[href*="sck=boton2"]){ padding-top: 5px; padding-bottom: 0; }
html body .container:has(a[href*="sck=boton3"]){ padding-top: 15px; padding-bottom: 0; }   /* v6: el espacio de abajo lo da .nota-precio */
html body .container:has(a[href*="sck=boton4"]){ padding-top: 10px; padding-bottom: 5px; }
html body .container:has(a[href*="sck=wa_aval_b2"]){ padding-top: 5px; padding-bottom: 30px; }
html body .container:has(a[href*="sck=wa_aval_b3"]){ padding-top: 5px; padding-bottom: 0; }

/* --- Texto ----------------------------------------------------------------- */
html body #divHtml p,
html body #divHtml2 p,
html body p{
  font-family: var(--wha-font);
  color: var(--wha-text);
}

/* Destacados de color escritos en el HTML */
strong[style*="#ae15ae"]{ color: var(--wha-primary) !important; }
strong[style*="#00a053"]{ color: var(--wha-success) !important; }

/* --- Títulos de sección ---------------------------------------------------- */
html body #divHtml .titulo-violeta,
html body #divHtml2 .titulo-violeta{
  font-family: var(--wha-font);
  font-weight: 700;
  color: var(--wha-heading);
  letter-spacing: -0.01em;
  font-size: 24px;
  line-height: 1.3;
}

/* --- Listas con tilde ------------------------------------------------------ */
html body #divHtml .listado-v2,
html body #divHtml2 .listado-v2{
  font-family: var(--wha-font);
  color: var(--wha-text);
}

/* --- Botón principal (pill magenta) --------------------------------------- */
html body .btn-aval{
  font-family: var(--wha-font);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  border-radius: var(--wha-radius-pill);
  background: var(--wha-primary);
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(106,27,108,.28);
  color: #fff;
}
html body .btn-aval:hover{
  background: var(--wha-primary-hover);
  color: #fff;
  text-decoration: none;
}

/* --- Notas legales del pie ------------------------------------------------- */
html body #divHtml .texto-cbk{
  font-family: var(--wha-font);
  color: var(--wha-text-muted);
  font-size: 11px;
  line-height: 16px;
}

/* --- Componentes propios de alumnos-wap.html ------------------------------- */
html body .sello-alumno{
  background: var(--wha-success);
  border-radius: var(--wha-radius-pill);
  font-family: var(--wha-font);
}
html body .perfil{
  border-color: var(--wha-border);
  border-radius: var(--wha-radius);
  box-shadow: var(--wha-shadow);
}
html body .perfil .foto-pendiente{ background: var(--wha-accent-soft); }
html body .perfil .nombre{ color: var(--wha-heading); font-family: var(--wha-font); }
html body .perfil .detalle{ color: var(--wha-text-muted); }
html body .ver-directorio a{ color: var(--wha-primary); }

html body .pasos li::before{ background: var(--wha-primary); }

html body .faq details{
  border-color: var(--wha-border);
  border-radius: var(--wha-radius);
  background: var(--wha-surface);
}
html body .faq summary{ color: var(--wha-heading); font-family: var(--wha-font); }

html body .precio{
  border-color: var(--wha-primary);
  border-radius: var(--wha-radius);
  box-shadow: var(--wha-shadow);
}
html body .precio .grande{ color: var(--wha-success); font-family: var(--wha-font); }
html body .limite{ color: var(--wha-primary); }

/* Fondo de la sección de preguntas en alumnos-wap */
html body #divHtml[style*="#f7f1fb"]{
  background-color: var(--wha-accent-soft) !important;
  box-shadow: 0 0 0 100vmax var(--wha-accent-soft);
}