:root{
    --bg:#f7f7f7;
    --text:#1f2937;
    --muted:#6b7280;
    --ad-bg:#ffffff;
    --ad-border:#e5e7eb;
    --ad-badge:#111827;
    --accent:#2f55a4;
  }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--text);
    background: var(--bg);
  }
  .wrap {
    min-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:2rem 1rem;
    gap:.9rem;
    width:100%;
    box-sizing:border-box;
  }
  .text-ad-slot {
    width:100%;
    background:var(--ad-bg);
    border:1px solid var(--ad-border);
    border-radius:10px;
    padding:.75rem .9rem;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    box-sizing:border-box;
  }
  .text-ad-title {
    font-weight:700;
    font-size:clamp(1rem, 2.2vw, 1.5rem);
    margin-bottom:.25rem;
    line-height:1.2;
    color:#2f55a4;
    text-decoration:underline;
  }
  .text-ad-title:hover { color:#004999; text-decoration:underline; }
  .text-ad-desc { font-size:1.05rem; color:var(--muted); line-height:1.5; }
  .text-ad-stats {
    margin-top:0;
    width:100%;
    max-width:680px;
    display:flex;
    gap:.40rem;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    color:var(--muted);
    font-size:.80rem;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
  }
  .text-ad-stats span { padding:.25rem .45rem; border:1px dashed var(--ad-border); border-radius:999px; background:#fafafa; white-space:nowrap; }
  .text-ad-stats .stat-label{margin-right:.25rem}
  .text-ad-slot--wide { width:100%; max-width:970px; margin:0 auto; }
  .wrap > .text-ad-slot.text-ad-slot--wide + .text-ad-stats { margin-top:-.55rem; }

  .logo { max-width:350px; max-height:350px; width:100%; height:auto; display:block; }
  @media (max-width: 640px){
  .logo{
    max-width: 280px;  /* antes 200px */
    max-height: 280px; /* subilo acorde o quitá el tope: max-height:none; */
  }
}


  .tagline {
    margin:.25rem 0 0;
    text-align:center;
    font-size:clamp(1rem, 2.8vw, 1.375rem);
    font-weight:600;
    line-height:1.28;
  }
  .top-links {
    display:flex;
    gap:.30rem;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    font-size:.95rem;
    margin-top:.25rem;
    color:var(--muted);
  }
  .top-links a { color:#2f55a4; text-decoration:underline; font-weight:600; }
  .top-links a:hover { text-decoration:underline; }

  .banner { margin-top:.75rem; width:100%; display:flex; justify-content:center; flex-direction:column; align-items:center; gap:.5rem; }
  .ad-box {
    width:100%; max-width:728px; aspect-ratio:728 / 90; position:relative;
    background:#fff; border:1px solid var(--ad-border); border-radius:8px; overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
  }
  .ad-box img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }

  .text-ad-group { width:100%; display:grid; grid-template-columns:1fr; place-items:center; gap:.35rem; margin-top:.75rem; }
  .text-ad-slot{ transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .06s ease; }
  .text-ad-slot:hover, .text-ad-slot:focus-within{
    background: #f3e4a5; border-color: #c7d2fe; box-shadow: 0 6px 20px rgba(0,0,0,.05); transform: translateY(-1px);
  }
  .text-ad-slot:hover .text-ad-title, .text-ad-slot:focus-within .text-ad-title{ color:#004999; text-decoration:underline; }

  .text-ad-stats {
    margin-top:0;
  }

  /* ===== Sign-up card ===== */
  .signup-card {
    width:100%; max-width:970px; background:#fff; border:1px solid var(--ad-border); border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,.05); padding:1rem 1.1rem; box-sizing:border-box;
  }
  .signup-card h3 { margin:0 0 1rem; font-size:1.4rem; text-align:center; }
  .signup-meta { color:var(--muted); font-size:.9rem; margin:0 0 .75rem; }

  .signup-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
  .signup-grid .full { grid-column:1 / -1; }

  /* CONTENEDOR DE LABEL FLOTANTE */
  .signup-card .floating{
    position:relative;
    overflow:hidden; /* evita cualquier desborde vertical u horizontal del label -->
    border-radius: 10px; /* igual al del input */
  }

  /* AUMENTO DE TAMAÑO EN INPUTS */
  .signup-card .form-control{
    width:100%; max-width:100%; padding:1rem .9rem; border-radius:10px; border:1px solid var(--ad-border); background:#fff; color:var(--text);
    outline:0; transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; box-sizing:border-box;background-clip: padding-box;
    font-size:1rem;      /* mismo tamaño que el label */
    line-height:1.35;
  }

  /* LABEL FLOTANTE CENTRADO Y MISMO TAMAÑO QUE INPUT */
  .signup-card .floating label{
    position:absolute;
    left:.9rem;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    color:var(--muted);
    font-size:1rem;      /* igual al input */
    line-height:1;       /* evita que "se pase" verticalmente */
    pointer-events:none;
    opacity:.9;
    transition: opacity .2s ease, color .2s ease, transform .2s ease;
  }

  .signup-card .form-control::placeholder{ color:transparent; }
  .signup-card .form-control:focus{ border-color: var(--accent); box-shadow: 0 0 0 .25rem rgba(47,85,164,.18); background:#fff; }
  .signup-card .form-control:focus + label{ color: var(--muted); opacity:.55; }
  .signup-card .form-control:not(:placeholder-shown) + label{ opacity:0; visibility:hidden; }

  .signup-card .floating.has-toggle .form-control{ padding-right:3.2rem; }

  /* === REPLACED: Show/Hide text button -> icon button === */
  .signup-card .showpass{
    position:absolute;
    right:.5rem;
    top:50%;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:2.25rem;
    height:2.25rem;
    border:1px solid var(--ad-border);
    border-radius:8px;
    background:#fafafa;
    color:#1f2937;
    opacity:.9;
    cursor:pointer;
    user-select:none;
    transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .signup-card .showpass:hover{ opacity:1; background:#f3f4f6; }
  .signup-card .showpass:focus{ outline:0; box-shadow: 0 0 0 .2rem rgba(47,85,164,.25); }

  /* Íconos dentro del botón */
  .showpass .icon { display:block; }
  .showpass .icon-eye-off { display:none; }
  .showpass[aria-pressed="true"] .icon-eye { display:none; }
  .showpass[aria-pressed="true"] .icon-eye-off { display:block; }

  /* Texto solo para lectores de pantalla */
  .sr-only{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }

  /* ===== Password meter (Yahoo-like) ===== */
  .pwd-meter{margin:.5rem 0 0;}
  .pwd-meter .track{
    width:100%; max-width:970px; height:10px; border-radius:999px; border:1px solid var(--ad-border);
    background:#f3f4f6; overflow:hidden; margin:0;
  }
  .pwd-meter .fill{
    height:100%; width:0%; background:#ef4444; transition:width .2s ease, background-color .2s ease;
  }
  .pwd-meter .status{
    text-align:left; font-weight:700; margin:.35rem 0 0; font-size:.9rem;
  }
  .pwd-meter .status .label{ text-transform:uppercase; letter-spacing:.02em; }
  .pwd-meter .status .weak{ color:#b91c1c; }
  .pwd-meter .status .medium{ color:#b91c1c; } /* rojo hasta Medium II */
  .pwd-meter .status .strong{ color:#0f766e; } /* verde oscuro */
  .pwd-meter .hint{font-size:.85rem;color:#6b7280;margin:.25rem 0 0;text-align:left}

  .alert-ok{border:1px solid #34d399;background:#ecfdf5;color:#065f46;border-radius:10px;padding:.6rem .8rem;margin:.6rem 0;}
  .alert-err{border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:10px;padding:.6rem .8rem;margin:.6rem 0;}
  .alert-warn{border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:10px;padding:.6rem .8rem;margin:.6rem 0;}
  .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
  .field-error{display:block;margin-top:6px;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:6px 10px;font-size:.9rem}
  .debug{font:12px/1.4 monospace;background:#111;color:#0f0;padding:8px;border-radius:8px;margin:.5rem 0;white-space:pre-wrap}

  body.hl-slot1 .wrap > .text-ad-slot.text-ad-slot--wide{
    background: #efe6c3; border-color: #f4eed7; box-shadow: 0 9px 30px rgba(47,85,164,.18); transform: translateY(-1px);
  }
  body.hl-slot1 .wrap > .text-ad-slot.text-ad-slot--wide .text-ad-title{
    color:#004999; text-decoration:underline;
  }

  .wrap > .text-ad-slot.text-ad-slot--wide:hover .text-ad-title,
  .wrap > .text-ad-slot.text-ad-slot--wide:focus-within .text-ad-title{
    text-decoration: underline;
  }

  /* Centrar botón submit y la frase inferior explícitamente */
  .signup-actions {
    margin-top:.9rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  }
  .signup-actions button {
    padding:.65rem 1rem; border:0; border-radius:10px; background:#2f55a4; color:#fff; cursor:pointer; font-size:1.125rem; font-weight:700;
  }
  .signup-actions button:hover{ filter:brightness(1.05); }
  .signup-actions button:active{ transform:translateY(1px); }
  .signin-note { font-size:.9rem; color:var(--muted); text-align:center; }

  /* NEW: T&C checkbox styling */
  .agree{ display:flex; gap:.5rem; align-items:flex-start; }
  .agree input{ margin-top:.2rem; }
  .agree label{ font-size:1rem; color:var(--text); }
  .agree label a{ color:#2f55a4; text-decoration:underline; font-weight:600; }
  
  /* Mejor espaciado para el checkbox de T&C */
.agree{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  margin:.6rem 0 1.30rem;
}

.agree input{
  margin-top:.35rem;
  flex-shrink:0;
}

.agree label{
  font-size:1rem;
  line-height:1.55;
}

@media (max-width:640px){
  .agree{ gap:1rem; }
  .agree label{ line-height:1.6; }
}

#submitBtn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}

#submitBtn::before{
  content:"";
  width:1.15em;
  height:1.15em;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'>\
<circle cx='12' cy='8' r='4'/>\
<path d='M4 20a8 8 0 0 1 16 0H4z'/>\
</svg>");
}

/* Solo en móvil, SOLO para métricas únicas (slots 1, 2 y 11) */
@media (max-width: 640px){
  .text-ad-slot[data-slot="1"] + .text-ad-stats,
  .ad-box[data-slot="2"] + .text-ad-stats,
  .ad-box[data-slot="11"] + .text-ad-stats{
    text-align:center;
    justify-content:center;
    gap:.5rem .6rem;
  }

  .text-ad-slot[data-slot="1"] + .text-ad-stats > span,
  .ad-box[data-slot="2"] + .text-ad-stats > span,
  .ad-box[data-slot="11"] + .text-ad-stats > span{
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:1.15;
    padding:.4rem .6rem;
  }

  .text-ad-slot[data-slot="1"] + .text-ad-stats .stat-label,
  .ad-box[data-slot="2"] + .text-ad-stats .stat-label,
  .ad-box[data-slot="11"] + .text-ad-stats .stat-label{
    margin:0 0 .15rem 0;
    display:block;
    white-space:normal;
  }
}

  .top-links a.login-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* Icono candado antes de "Log In" */
.top-links a.login-link::before{
  content:"";
  width:1em;
  height:1em;
  flex:0 0 auto;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F55A4'>\
<path d='M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 116 0v3H9z'/>\
</svg>");
}

/* === NEW: Glow highlight for T&C when invalid === */
@keyframes glowPulse{
  0%   { box-shadow: 0 0 0 .15rem rgba(239,68,68,0); }
  50%  { box-shadow: 0 0 0 .35rem rgba(239,68,68,.30); }
  100% { box-shadow: 0 0 0 .15rem rgba(239,68,68,0); }
}
.agree.glow{
  background: transparent;
  border: 0;
  padding: 0;
  animation: none;
}

@keyframes checkboxPulse {
  0%,100% { outline: 2px solid rgba(239,68,68,0);  outline-offset: 2px; }
  50%     { outline: 2px solid rgba(239,68,68,.65); outline-offset: 3px; }
}
.agree.glow input[type="checkbox"]{
  animation: checkboxPulse 1.2s ease-in-out infinite;
  border-radius: 4px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce){
  .agree.glow input[type="checkbox"]{ animation: none; }
}

.top-links{
  font-size:1.125rem;
  line-height:1.2;
}
.text-ad-group .text-ad-slot:hover,
.text-ad-group .text-ad-slot:focus-within{
  background:#efe6c3;
  border-color:#f4eed7;
  box-shadow: 0 9px 30px rgba(47,85,164,.18);
  transform: translateY(-1px);
}
.top-links + .banner{
  margin-top: -0.3rem;
}
.text-ad-group + .banner{
  margin-top: -0.3rem;
}
.top-links + .banner + .text-ad-group{
  margin-top: -0.1rem;
}
.text-ad-slot + .text-ad-stats{
  margin-top:-.2rem;
}
.banner{ gap:.25rem; }
.text-ad-slot[data-slot="1"]{
  padding-bottom:.55rem;
}
.wrap > .text-ad-slot.text-ad-slot--wide[data-slot="1"] + .text-ad-stats{
  margin-top:-.75rem;
}
@media (max-width:640px){
  .wrap > .text-ad-slot.text-ad-slot--wide[data-slot="1"] + .text-ad-stats{
    margin-top:-.5rem;
  }
}
.signup-card .floating{
  border-radius: 10px;
}
.signup-card .form-control{
  border: 1px solid var(--ad-border);
  border-radius: 10px;
  background-clip: padding-box;
}
.signup-card .form-control:focus,
.signup-card .form-control:focus-visible{
  border-color: var(--accent);
  border-width: 2px;
  border-radius: 10px;
  outline: none;
  box-shadow: none;
}
.signup-card .form-control::-moz-focus-inner{ border:0; }
.signup-card .form-control:-moz-focusring{ outline: none; }
.logo + .tagline{
  margin-top: -0.7rem;
}
.tagline + .top-links{
  margin-top: -0.5rem;
}
.top-links + .banner{
  margin-top: -0.1rem;
}
@media (max-width:640px){
  .top-links + .banner{
  margin-top: -0.55rem;
  }
}