/* Áreas Contable y Legal (contable.html y legal.html, ES y EN): se carga después de styles.css, y
   legal.css después de esta. La base de las interiores (header de escritorio, hero, grillas, FAQ,
   formularios) está en styles.css; acá va lo que sólo usan estas dos páginas.

   Lo que sigue hasta «Encabezado» vivía en styles.css y sólo lo usan contable y legal (PR 21): va
   primero, así conserva su lugar en la cascada (antes que todo lo de esta hoja). */
.contact{background:#ded7cb;padding-block:120px}
.contact h2{font-size:clamp(3rem,5vw,5.5rem)}

/* Contacto: el NAP de #contacto (dirección, teléfono y WhatsApp del área, horario) */
.contact-info{margin:56px 0 0;display:grid;gap:0;border-top:1px solid var(--ink);max-width:520px}
.contact-info>div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info dt{font:11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:4px}
.contact-info dd{margin:0;font:400 1.12rem/1.35 var(--serif)}
@media(max-width:800px){.contact-info>div{grid-template-columns:1fr;gap:4px}}

/* Tarjetas de "Servicios" (contable.html y legal.html).
   Hover suave en las seis: fondo y título en rojo, sin movimiento, porque son texto
   informativo y no llevan a ningún lado. La única que sí tiene link (.text-link) se
   queda con el efecto completo de la home (.cards article en home-redesign.css):
   el gesto fuerte señala que ahi hay algo para clickear.
   Navegadores sin :has() muestran el hover suave en las seis: degrada bien. */
.feature-grid.hoverable article{position:relative;transition:transform .25s,box-shadow .25s,background .25s}
.feature-grid.hoverable h3{transition:color .25s}
@media(hover:hover) and (pointer:fine){.feature-grid.hoverable article:hover{z-index:2;background:#fbf8f2;box-shadow:0 14px 34px #342c2114}}
@media(hover:hover) and (pointer:fine){.feature-grid.hoverable article:hover h3{color:var(--red)}}
@media(hover:hover) and (pointer:fine){.feature-grid.hoverable article:has(.text-link):hover{transform:translateY(-8px);box-shadow:0 24px 55px #342c211f;outline:2px solid var(--red);outline-offset:-2px}}
@media(prefers-reduced-motion:reduce){.feature-grid.hoverable article,.feature-grid.hoverable h3{transition:none}.feature-grid.hoverable article:has(.text-link):hover{transform:none}}
.grid-foot{margin:24px 0 0;max-width:840px;font-size:15.2px;color:var(--muted)}
.grid-foot strong{color:var(--ink)}

/* Encabezado: igual que el de RR.HH. (marca + área, CTA rojo) y el WhatsApp al lado. */
@media(min-width:900px){.inner-header .header-actions{gap:8px}
.inner-header .wa-head{width:46px;height:46px;margin:0;border-radius:0;border-color:var(--ink);vertical-align:0}}

/* Organismos */
.org-band{background:var(--soft);border-bottom:1px solid var(--line)}
.org-band .shell{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;padding:26px 0}
.org-band p{margin:0;font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.org-band ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.org-band li{padding:4px 22px;border-left:1px solid var(--line)}
.org-band b{display:block;font:400 1.2rem/1.3 var(--serif)}
.org-band span{font-size:.8rem;color:var(--muted)}

/* Servicios: 6 tarjetas en 3x2 */
.feature-grid.cols-3 article{display:flex;flex-direction:column}
.feature-grid.cols-3 .text-link{align-self:flex-start}
@media(min-width:801px){
  .feature-grid.cols-3 article:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .feature-grid.cols-3 article:nth-child(3n){border-right:0}
}
.tags{list-style:none;margin:auto 0 0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:5px 9px;border:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grid-foot .text-link{margin:0 0 0 6px;padding-bottom:2px;gap:0}

/* Mapa de obligaciones */
.oblig-lead{max-width:640px;margin:22px 0 0;color:var(--muted);font-size:1.05rem}
.oblig{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);background:var(--paper)}
.oblig-controls{display:block;padding:34px;border-right:1px solid var(--line)}
.oblig fieldset{border:0;margin:0 0 30px;padding:0;min-width:0}
.oblig legend{padding:0;margin-bottom:14px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.chip,.check{display:block;position:relative;cursor:pointer}
.chip input,.check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.chip span{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:var(--tap);margin-bottom:8px;padding:14px 16px;border:1px solid var(--line);background:#f8f5ee;font:400 1.1rem var(--serif);color:var(--ink);text-transform:none;letter-spacing:0;transition:background .18s,border-color .18s,color .18s}
.chip span::after{content:"";flex:0 0 12px;height:12px;border:1px solid var(--muted);border-radius:50%}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#f4eee5}
.chip input:checked+span::after{background:#e85960;border-color:#e85960}
.check span{display:block;position:relative;min-height:var(--tap);margin-bottom:4px;padding:10px 0 10px 34px;font:400 1rem/1.45 var(--sans);color:var(--ink);text-transform:none;letter-spacing:0}
.check span::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border:1px solid var(--ink);background:#f8f5ee;transition:background .18s,border-color .18s}
.check input:checked+span::before{background:var(--red);border-color:var(--red)}
.check input:checked+span::after{content:"";position:absolute;left:7px;top:14px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chip input:focus-visible+span,.check input:focus-visible+span::before{outline:2px solid var(--red);outline-offset:2px}
.oblig-note{margin:0;max-width:380px;font-size:.8rem;color:var(--muted)}
.oblig-result{padding:34px 38px;min-width:0}
.oblig-count{margin:0 0 22px;font:400 clamp(1.5rem,2.4vw,2rem)/1.2 var(--serif)}
.oblig-count strong{font-weight:400;color:var(--red)}
.oblig-count em{color:var(--muted)}
.oblig-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.oblig-list li{display:grid;grid-template-columns:1fr auto 24px;gap:4px 18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);animation:oblig-in .35s ease both}
.oblig-list b{display:block;font:400 1.15rem/1.25 var(--serif)}
.oblig-list small{display:block;margin-top:2px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.oblig-list em{padding:5px 9px;border:1px solid var(--line);font:500 .66rem var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.oblig-list em.is-monthly{border-color:var(--red);color:var(--red)}
.oblig-list i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font:600 .72rem var(--sans);font-style:normal}
@keyframes oblig-in{from{opacity:0;transform:translateY(6px)}}

/* Paneles estáticos (mejora progresiva, también en legal.html): el contenido del mapa y de los
   primeros pasos está entero en el HTML, un <details class="oblig-panel"> por régimen o por caso,
   y los ítems que dependen de algo llevan data-si con su condición a la vista (.oblig-si).
   - Con JS: un <script> inline, primer hijo de .oblig, le pone .is-js antes de que se pinte nada
     (consulta.js también, por si el inline no corriera). Es el widget de siempre y ya sale en su
     estado inicial: sólo el panel abierto, sin su <summary> ni las condiciones, y sin los ítems de
     convenio o empleados. Al arrancar, consulta.js pone .is-ready y desde ahí manda su `hidden`:
     el primer pintado y el de después son el mismo, así nada salta al cargar.
   - Sin JS se leen todos, en una columna (el primero abierto) y sin los controles, que sin JS no
     hacen nada.
   styles.css le pone a todo details/summary el aspecto de las FAQ: acá se ajusta. */
.oblig [hidden]{display:none!important}
.oblig-panel{border-bottom:0}
.oblig-panel p{max-width:none;padding:0}
.oblig-panel .oblig-count{color:var(--ink)}
.oblig-panel>summary h3{display:inline;margin:0;font:inherit}
.oblig-si{display:block;margin-bottom:4px;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
/* La cuenta de contable: con JS arranca con el caso elegido (.oblig-caso, lo escribe contable.js);
   sin JS el caso ya está en el <summary> y la cuenta aclara qué cambia o se suma (.oblig-base). */
.oblig-caso{display:block;margin-bottom:10px;font:500 11px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.oblig-caso span{white-space:nowrap}
.oblig-base{display:block;margin-top:8px;font:400 .95rem/1.5 var(--sans);color:var(--muted)}
.oblig.is-js .oblig-base,.oblig:not(.is-js) .oblig-caso{display:none}
.oblig.is-js .oblig-panel:not([open]),.oblig.is-js .oblig-panel>summary,.oblig.is-js .oblig-si{display:none}
.oblig.is-js:not(.is-ready) .oblig-list li:is([data-si="convenio"],[data-si="empleados"]){display:none}
.oblig:not(.is-js){grid-template-columns:1fr}
.oblig:not(.is-js) fieldset{display:none}
.oblig:not(.is-js) .oblig-controls{padding-block:24px;border-right:0;border-bottom:1px solid var(--line)}
.oblig:not(.is-js) .oblig-note{max-width:none}
.oblig:not(.is-js) .oblig-result{padding-top:10px}
.oblig:not(.is-js) .oblig-panel{border-bottom:1px solid var(--line)}
.oblig:not(.is-js) .oblig-panel>summary{min-height:var(--tap);padding:22px 44px 22px 0;font:400 clamp(1.3rem,2.2vw,1.6rem)/1.2 var(--serif)}
.oblig:not(.is-js) .oblig-panel[open]{padding-bottom:30px}
.oblig:not(.is-js) .oblig-count{margin-bottom:14px;font-size:1.15rem}
.oblig:not(.is-js) .oblig-list li{animation:none}

/* Celular: después de un toque, consulta.js sube el resultado hasta debajo del header (lo descuenta
   el scroll-padding-top de html, en base.css; esto suma un respiro). Con un min-height de una
   pantalla menos el cromo fijo, lo que sigue queda fuera de la vista: si la lista crece o se
   achica, nada visible salta. */
@media(max-width:899.98px){
  .oblig-result{scroll-margin-top:8px}
  .chip span{padding-block:11px}
}
@media(max-width:599.98px){
  .oblig.is-js .oblig-result{min-height:calc(100vh - var(--header-h) - var(--bar-h) - 16px);min-height:calc(100svh - var(--header-h) - var(--bar-h) - 16px)}
}

/* Método */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;border-top:1px solid var(--ink)}
.steps li{position:relative;padding:30px 0 0}
.steps li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--red)}
.steps h3{font:400 1.6rem/1.15 var(--serif);margin:14px 0 12px}
.steps p{margin:0;max-width:300px;font-size:15.2px;color:var(--muted)}

/* Contacto */
.contact-lead{margin:22px 0 0;color:var(--muted)}
.contact label>input,.contact label>select,.contact label>textarea{display:block;margin-top:6px}
.contact form small{color:var(--muted)}
/* La ayuda de los canales («Con un email o un teléfono alcanza», aria-describedby del correo y el
   teléfono), pegada a esos campos como en la home: la fila del form tiene 25px de separación y la
   ayuda queda a 10px del campo. */
.contact .form-hint{margin:-15px 0 0;font-size:.875rem;line-height:1.4;color:var(--muted)}
.contact form .button{cursor:pointer}
.wa{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:10px;border:1px solid var(--line);border-radius:50%;vertical-align:-7px;transition:background .18s,border-color .18s}
.wa svg{width:15px;height:15px;fill:#128c4a;transition:fill .18s}
.wa:hover{background:#128c4a;border-color:#128c4a}
.wa:hover svg{fill:#fff}
.contact form.is-prefilled textarea{animation:prefill 1.6s ease}
@keyframes prefill{0%,40%{background:#a5101b14}}

@media(max-width:1080px){
  .org-band .shell{grid-template-columns:1fr;gap:14px}
  .org-band li:first-child{border-left:0;padding-left:0}
  .steps{grid-template-columns:1fr 1fr;gap:40px 32px;border-top:0}
  .steps li{border-top:1px solid var(--ink)}
}
@media(max-width:900px){
  .oblig{grid-template-columns:1fr}
  .oblig-controls{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:800px){
  .org-band ul{grid-template-columns:1fr 1fr;gap:14px 0}
  .org-band li:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:560px){
  .oblig-controls,.oblig-result{padding:24px 20px}
  .oblig-list li{grid-template-columns:1fr 24px}
  .oblig-list em{grid-column:1;grid-row:2;justify-self:start}
  .oblig-list i{grid-row:1/3;grid-column:2}
  .steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .oblig-list li,.contact form.is-prefilled textarea{animation:none}
  .chip span,.check span::before{transition:none}
}

/* Preguntas frecuentes (#preguntas, PR 19; también en legal.html). Es el .faq de styles.css, el de
   RR.HH.: cada <details> dentro de .faq es una pregunta del FAQPage del JSON-LD (ver «Head SEO…» en el
   README). Acá: sin la línea de arriba (la sección ya tiene fondo), el H2 del mismo tamaño que los de
   las otras secciones y, en el celular, compacta como la de la familia RR.HH. Todas plegadas. Los
   enlaces dentro de una respuesta van subrayados: en estas páginas el color solo no los distingue. */
#preguntas .faq{border-top:0}
#preguntas .faq h2{font-size:clamp(2.8rem,5vw,5rem);line-height:1}
#preguntas summary::after{top:25px}
#preguntas .accordion p a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){#preguntas .accordion p a:hover{color:var(--red)}}
@media(max-width:800px){
  #preguntas .faq{gap:24px}
  #preguntas summary{padding:16px 40px 16px 0;font-size:1.125rem;line-height:1.3}
  #preguntas summary::after{top:16px}
  #preguntas details p{padding-right:0}
}