.paso-num { font-family:var(--title); font-size:3.5rem; font-weight:300; color:var(--green-dark); line-height:1; display:block; margin-bottom:.75rem; }
.deduccion-box p { font-size:1rem; color:var(--text-muted); line-height:1.7; margin:0; }

/* Opciones */
.opciones-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.opcion-card {
  border-radius:1.5rem; padding:2rem 2.75rem; text-align:center;
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.06), 0 30px 45px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.opcion-card.secundaria { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border: 2px solid var(--green); }
.opcion-tag { display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:.75rem; }
.opcion-card h3 { font-family:var(--title); font-size:1.4rem; font-weight:400; margin-bottom:.75rem; }
.opcion-card p { font-size:1rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.5rem; }

/* Formulario */

.validacion-img { width:100%; height:540px; object-fit:cover; object-position:center center; border-radius:2.25rem; display:block; margin-top:152px; opacity:.65; border:1px solid rgba(255,255,255,0.50); box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.06), 0 30px 45px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6); }
/* la lista a dos columnas, cinco puntos en cada una */
.socios-cols { display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,auto); column-gap:3.5rem; }
.socio-card { text-align:center; padding:2.5rem; max-width:30rem; margin:64px auto 0; }
.socios-cols + .deduccion-box { margin:40px 0 0; }
.socio-precio { font-family:var(--title); font-size:4rem; font-weight:300; color:var(--green-dark); line-height:1; margin-bottom:.5rem; }
.socio-precio-pie { font-size:.85rem; color:var(--text-muted); margin-bottom:2rem; }
.socio-card p { font-size:1rem; color:var(--text-muted); line-height:1.7; margin-bottom:2rem; }
@media(max-width:800px){ .socios-cols { grid-auto-flow:row; grid-template-rows:none; } }
.form-wrap { margin:3rem 0 0; }
.form-fieldset { border:none; padding:0; margin:0 0 2rem; }
.form-legend { font-family:var(--title); font-size:1.1rem; font-weight:400; color:var(--text); padding-bottom:.6rem; border-bottom:1px solid #e8e4df; display:block; width:100%; margin-bottom:1.25rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.form-group label { font-size:.85rem; font-weight:500; color:var(--text); }
.form-group input, .form-group select {
  border: 1px solid rgba(255,255,255,0.65);
  border-radius:10px;
  padding:.75rem .9rem;
  font-size:.95rem;
  font-family:inherit;
  color:var(--text);
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.06), 0 30px 45px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: box-shadow .2s, border-color .2s;
  outline:none;
  width:100%;
  box-sizing:border-box;
}
.form-group input::placeholder { color:var(--text-muted); opacity:.75; }
.form-group input:focus-visible, .form-group select:focus-visible { border-color:var(--green); box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.06), 0 30px 45px rgba(0,0,0,0.08), inset 0 0 0 1.5px var(--green); }
.form-radio-group { display:flex; gap:1.5rem; flex-wrap:wrap; }
.form-radio { display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--text); cursor:pointer; }
.form-radio input { accent-color:var(--green); width:1rem; height:1rem; }
.form-check { display:flex; align-items:flex-start; gap:.6rem; font-size:1rem; color:var(--text-muted); line-height:1.55; cursor:pointer; margin-bottom:.65rem; }
.form-check input { accent-color:var(--green); width:1rem; height:1rem; flex-shrink:0; margin-top:.15rem; }
.form-check a { color:var(--green); }
/* El enlace de email despliega dónde redactarlo: mailto solo funciona si el
   navegador tiene un gestor asociado, y muchos usuarios de webmail no lo tienen. */
.mail-opciones { display:inline-block; position:relative; }
.mail-opciones summary { list-style:none; cursor:pointer; display:inline-flex; }
.mail-opciones summary::-webkit-details-marker { display:none; }
.mail-menu { position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + .75rem); z-index:20;
  display:flex; flex-direction:column; min-width:14rem; padding:.5rem; border-radius:1rem; text-align:left;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(60px) saturate(200%); backdrop-filter:blur(60px) saturate(200%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 3px rgba(0,0,0,.05), 0 10px 15px rgba(0,0,0,.06), 0 30px 45px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6); }
.mail-menu a { padding:.6rem .85rem; border-radius:.65rem; font-size:.95rem; font-weight:500; color:var(--text); text-decoration:none; }
@media (min-width:601px){
.mail-menu a:hover { background:rgba(89,178,166,.12); color:var(--green-dark); }
}

/* Ritmo del cierre del formulario, igual que en Contacto: check -> captcha -> boton -> nota.
   El captcha y la nota van alineados a la izquierda; solo el boton se centra. */
.form-captcha { margin-top:1.75rem; }
.form-submit-area { text-align:center; margin-top:2rem; padding-bottom:40px; }
.form-submit-area button { background:var(--green-dark); color:#fff; border:1.5px solid transparent; border-radius:100px; padding:1rem 2rem; height:52px; box-sizing:border-box; font-weight:600; line-height:1; font-size:1rem; font-family:inherit; cursor:pointer; transition:background .2s, transform .2s, box-shadow .2s; }
@media (min-width:601px){
.form-submit-area button:hover { background:var(--green-dark); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,136,118,.32); }
}

.form-submit-area button.btn-secundario {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1.5px solid var(--green-dark);
  color: var(--green-dark);
  box-shadow: none;
}
@media (min-width:601px){
.form-submit-area button.btn-secundario:hover {
  background: var(--green-dark);
  color: #fff;
}
}

.form-nota { font-size:10px; font-style:italic; color:var(--text-muted); line-height:1.6; margin:.5rem 0 .75rem; text-align:left; }
.form-ko { font-size:.95rem; color:#b23b3b; line-height:1.6; margin-top:1.25rem; }
.form-ko a { color:#b23b3b; }
.hidden { display:none; }

/* Card de confirmacion de envio: sustituye la pagina "Thank you" de Netlify.
   Aparece sobre la pagina, sin redirigir. Se cierra con la X, al hacer clic fuera,
   o sola a los 6 s si no se cierra a mano. */
.form-ok { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(30,50,48,.25); -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%); opacity:0; transition:opacity .45s ease; }
.form-ok[hidden] { display:none; }
.form-ok.is-visible { opacity:1; }
.form-ok-card { position:relative; max-width:24rem; width:100%; padding:2.75rem 2.5rem; text-align:center; border-radius:1.75rem; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(30px) saturate(200%); backdrop-filter:blur(30px) saturate(200%); border:1px solid rgba(255,255,255,.65); box-shadow:0 1px 3px rgba(0,0,0,.05), 0 10px 15px rgba(0,0,0,.06), 0 30px 45px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); transform:translateY(10px) scale(.98); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.form-ok.is-visible .form-ok-card { transform:none; }
.form-ok-x { position:absolute; top:.85rem; right:.85rem; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-muted); cursor:pointer; transition:background .2s, color .2s; }
.form-ok-x svg { width:1.05rem; height:1.05rem; }
.form-ok-x:hover { background:rgba(0,0,0,.06); color:var(--text); }
.form-ok-check { width:3rem; height:3rem; margin:0 auto 1.25rem; display:block; color:var(--green); }
.form-ok-card h3 { font-family:var(--title); font-weight:300; font-size:1.9rem; color:var(--green-dark); margin:0 0 .5rem; }
.form-ok-card p { font-size:1.05rem; line-height:1.6; color:var(--text-muted); margin:0; }
@media (prefers-reduced-motion:reduce) { .form-ok, .form-ok-card { transition:none; } }
.divisor-via { display:flex; align-items:center; gap:1rem; margin:3rem 0; }
.divisor-via::before, .divisor-via::after { content:''; flex:1; height:1px; background:var(--green); }
.divisor-via span { font-size:.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
@media(max-width:680px) { .form-row { grid-template-columns:1fr; } .opciones-grid { grid-template-columns:1fr; } .form-radio-group { flex-direction:column; gap:.75rem; } }

/* ── Portátiles (≤1440px) ── */
@media(min-width:901px) and (max-width:1440px){
  #content #cta-socio .section-title { font-size:clamp(1.3rem,2.4vw,2.4rem); }
  #content #cta-socio blockquote { font-size:clamp(1rem,1.9vw,1.7rem); }
  #content .validacion-img { margin-top:88px !important; }
  #content .deduccion-box p { font-size:clamp(.9rem,1.27vw,1rem); }
  #content #formulario-online .section-header { margin-bottom:28px; }
  #content .form-submit-area button { font-size:clamp(.85rem,1.1vw,1rem); padding:.8rem clamp(1.2rem,2.2vw,2rem); height:clamp(42px,4vw,52px); }
  #content .form-legend { font-size:18px; }
  #content form .deduccion-box p { font-size:12px !important; }   /* aviso legal del final del formulario */
}

/* Movil: mismos criterios que en el resto de la web. */
@media(max-width:600px){
  /* Los grupos del formulario sumaban su propio margen al row-gap de .form-row, asi
     que la separacion salia 32px dentro de la rejilla y 16px en el fieldset. Se anula
     el row-gap y manda solo el margen: 16px en todos los casos. */
  .form-row{ row-gap:0; }

  /* Menos capsula en los campos. */
  .form-group input, .form-group select, .form-group textarea{ border-radius:10px; }

  /* Nota de deduccion fiscal. */
  .deduccion-box p{ font-size:12px; }
}