/* ============================================================
   ACTORES S.C.G — Estilos de AFILIACIÓN (ser-socio.html)
   Se carga junto a site.css
   ============================================================ */

/* ====== BENEFICIOS ====== */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
.benefit{border:1px solid var(--line); border-radius:18px; padding:32px 28px; background:var(--white); transition:transform .5s var(--ease), box-shadow .5s, border-color .3s}
.benefit:hover{transform:translateY(-6px); border-color:transparent; box-shadow:0 40px 70px -34px rgba(90,90,90,.45)}
.benefit .bico{width:50px; height:50px; border-radius:14px; background:var(--orange-100); color:var(--orange-700); display:flex; align-items:center; justify-content:center; margin-bottom:20px}
.benefit .bico svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.benefit h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 8px}
.benefit p{font-size:15px; color:#3a3a37; margin:0}
@media(max-width:860px){.benefits{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.benefits{grid-template-columns:1fr}}

/* ====== REQUISITOS ====== */
.reqs-sec{background:var(--paper)}
.reqs{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:52px}
.reqcard{background:#fff; border:1px solid var(--line); border-radius:20px; padding:38px clamp(28px,3vw,40px)}
.reqcard h3{font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 22px; display:flex; align-items:center; gap:12px}
.reqcard h3 .rn{width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px}
.checklist{list-style:none; padding:0; margin:0}
.checklist li{position:relative; padding-left:34px; margin-bottom:15px; font-size:16px; color:#333; line-height:1.45}
.checklist li:last-child{margin-bottom:0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; background:var(--orange-100); color:var(--orange-700); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
@media(max-width:760px){.reqs{grid-template-columns:1fr}}

/* ====== PROCESO ====== */
.proc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; border-top:1px solid var(--line)}
.proc{padding:36px 28px 8px; border-right:1px solid var(--line)}
.proc:last-child{border-right:none}
.proc .pn{font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--accent); line-height:1; margin-bottom:14px}
.proc h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 8px}
.proc p{font-size:15px; color:#444; margin:0; max-width:32ch}
@media(max-width:760px){.proc-grid{grid-template-columns:1fr} .proc{border-right:none; border-bottom:1px solid var(--line)}}

/* ====== FORMULARIO ====== */
.form-sec{background:var(--paper)}
.form-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start}
.form-aside .lab{margin-bottom:18px}
.form-aside h2{margin:0 0 16px}
.form-aside p{font-size:17px; color:#3a3a37; max-width:38ch; margin:0 0 26px}
.form-aside .assure{display:flex; align-items:center; gap:12px; font-size:14px; color:#444; margin-bottom:14px}
.form-aside .assure svg{width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.form-card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3.4vw,44px); box-shadow:0 40px 80px -44px rgba(0,0,0,.28)}
.form-legend{font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 18px; display:flex; align-items:center; gap:10px}
.form-legend .sn{width:26px; height:26px; border-radius:50%; background:var(--orange-100); color:var(--orange-700); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:var(--font-ui)}
.form-section{margin-bottom:30px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px; font-weight:600; color:var(--ink)}
.field label .req{color:var(--accent)}
.field input, .field select, .field textarea{border:1px solid var(--line); border-radius:12px; padding:13px 15px; font-size:15px; font-family:var(--font-ui); color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s; width:100%}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-100)}
.field textarea{resize:vertical; min-height:110px}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#444; line-height:1.45}
.check input{margin-top:2px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto}
.check a{color:var(--orange-700); border-bottom:1px solid var(--orange-100); font-weight:600}
.form-actions{margin-top:24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.form-note{font-size:13px; color:var(--g2); max-width:34ch}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr; gap:36px}}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}}

/* ====== FAQ ====== */
.faq{max-width:820px; margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 0; font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:26px; line-height:1; transition:transform .3s var(--ease); flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 22px; color:#444; font-size:16px; line-height:1.65; max-width:72ch}

/* ====== CTA ASESOR ====== */
.help{background:var(--ink); color:#fff; text-align:center; overflow:hidden}
.help .spiral{left:50%; top:-140px; width:320px; height:320px; opacity:.1; transform:translateX(-50%) rotate(var(--spin))}
.help .spiral path{stroke:var(--accent)}
.help .wrap{position:relative; z-index:2}
.help h2{font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.4vw,44px); color:#fff; margin:0 0 14px}
.help h2 em{font-style:italic; color:var(--accent)}
.help p{color:rgba(255,255,255,.8); max-width:46ch; margin:0 auto 30px}