/* /soporte/ — formulario de tickets (Zammad) e ideas de producto. 10/09/2026 */
.sop .sop-h2{font-family:var(--font-serif,Georgia,serif);font-size:var(--text-xl,1.5rem);color:var(--navy-900,#0E1F38);margin:4px 0 14px}
.antes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 18px;padding:12px 16px;border-radius:var(--radius-md,10px);background:var(--navy-50,#f1f4f9);font-size:var(--text-sm,.875rem)}
.antes-t{color:var(--navy-600,#2f4a78);font-weight:600}
.antes a{color:var(--teal-700,#0f766e);font-weight:600;text-decoration:none}
.antes a:hover{text-decoration:underline}
.sop-panel{padding:22px 24px}
.tipos{border:0;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tipos legend{font-weight:700;color:var(--navy-900,#0E1F38);margin-bottom:10px;padding:0}
.tipo{position:relative;cursor:pointer}
.tipo input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tipo-c{display:block;height:100%;padding:12px 14px;border:1.5px solid var(--navy-200,#c5d0e0);border-radius:var(--radius-md,10px);background:#fff;transition:border-color .15s,background .15s}
.tipo-c b{display:block;color:var(--navy-900,#0E1F38);margin-bottom:4px}
.tipo-c small{display:block;color:var(--navy-600,#2f4a78);font-size:var(--text-xs,.8rem);line-height:1.4}
.tipo input:checked+.tipo-c{border-color:var(--teal-600,#11998a);background:var(--teal-50,#ecfdfa);box-shadow:0 0 0 1px var(--teal-600,#11998a)}
.tipo input:focus-visible+.tipo-c{outline:2px solid var(--teal-500,#2DD4BF);outline-offset:2px}
.sop-panel .campos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
.sop-panel .campos.sub{padding:14px 16px;border-radius:var(--radius-md,10px);background:var(--navy-50,#f1f4f9)}
.sop-panel .ancho{grid-column:1/-1}
.sop-panel label{display:block;font-size:var(--text-sm,.875rem);color:var(--navy-700,#22406b);font-weight:600;margin-bottom:4px}
.sop-panel input[type=text],.sop-panel input:not([type]),.sop-panel input[type=email],.sop-panel input[type=tel],.sop-panel select,.sop-panel textarea{width:100%;padding:10px 12px;border:1px solid var(--navy-200,#c5d0e0);border-radius:var(--radius-md,10px);font:inherit;font-size:1rem;background:#fff;color:var(--navy-900,#0E1F38);box-sizing:border-box}
.sop-panel textarea{resize:vertical;line-height:1.5}
.sop-panel input:focus,.sop-panel select:focus,.sop-panel textarea:focus{outline:2px solid var(--teal-500,#2DD4BF);outline-offset:1px;border-color:var(--teal-600,#11998a)}
.sop-panel .invalido{border-color:var(--rojo-600,#dc2626)!important}
.sop-panel .ayuda{display:block;margin-top:4px;font-size:var(--text-xs,.78rem);color:var(--navy-400,#6a82aa)}
.sop-panel .check{display:flex;align-items:flex-start;gap:8px;font-weight:500;color:var(--navy-800,#16294a)}
.sop-panel .check input{width:auto;margin-top:3px}
.check-c{display:flex;align-items:flex-end;padding-bottom:10px}
.sop-panel .rgpd{margin:16px 0 4px;font-size:var(--text-sm,.875rem)}
.sop-panel .rgpd a{color:var(--teal-700,#0f766e)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.idea-sel{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--teal-600,#11998a);background:var(--teal-50,#ecfdfa);border-radius:0 var(--radius-md,10px) var(--radius-md,10px) 0;font-size:var(--text-sm,.875rem)}
.enlace{background:none;border:0;padding:0;font:inherit;color:var(--teal-700,#0f766e);text-decoration:underline;cursor:pointer}
.hecho{padding:26px 24px;border-radius:var(--radius-md,10px);background:var(--navy-900,#0E1F38);color:#fff}
.hecho:focus{outline:none}
.hecho-lbl{margin:0 0 4px;font-size:var(--text-xs,.75rem);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-300,#93ebe0)}
.hecho-num{font-family:var(--font-serif,Georgia,serif);font-size:clamp(1.6rem,4vw,2.3rem);margin:0 0 10px}
.hecho p{line-height:1.55}
.hecho .btn-secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.receta li{margin:10px 0}
.comparar{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin:18px 0 8px}
.cmp{padding:14px 16px;border-radius:var(--radius-md,10px);font-size:var(--text-sm,.9rem);line-height:1.55}
.cmp p{margin:0}
.cmp .cmp-t{font-size:var(--text-xs,.75rem);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.cmp.mal{background:#fdf2f2;border:1px solid #f5d0d0}.cmp.mal .cmp-t{color:#8f1d1d}
.cmp.bien{background:#effbf7;border:1px solid #bfeadf}.cmp.bien .cmp-t{color:#0b5f52}
.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:6px 0 34px}
.idea{display:flex;flex-direction:column;padding:16px 18px;border:1px solid var(--navy-100,#e3e9f2);border-radius:var(--radius-md,10px);background:#fff;box-shadow:0 4px 14px rgba(14,31,56,.04)}
.idea h3{margin:0 0 6px;font-size:var(--text-md,1.05rem);color:var(--navy-900,#0E1F38)}
.idea p{margin:0 0 14px;font-size:var(--text-sm,.875rem);color:var(--navy-600,#2f4a78);line-height:1.5;flex:1}
.idea .btn{align-self:flex-start;min-height:38px;padding:8px 14px}
.idea.elegida{border-color:var(--teal-600,#11998a);box-shadow:0 0 0 1px var(--teal-600,#11998a)}
.lista-check{list-style:none;padding-left:0}
.lista-check li{position:relative;padding-left:26px}
.lista-check li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--teal-600,#11998a);border-bottom:2px solid var(--teal-600,#11998a);transform:rotate(-45deg)}
@media (max-width:760px){
  .tipos{grid-template-columns:repeat(2,1fr)}
  .sop-panel .campos{grid-template-columns:1fr}
  .comparar{grid-template-columns:1fr}
  .sop-panel{padding:16px}
}