/* ═══════════════════════════════════════════════════════════════════
   paginas.css — estilos compartidos por las páginas de servicio
   Lo específico de cada página (hero y secciones propias) va en su
   propio <style>. Aquí solo lo que se repite en todas.
   ═══════════════════════════════════════════════════════════════════ */

/* Migas sobre fondo claro */
.migas{padding:calc(var(--nav-alto) + 22px) 0 0}
.migas ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:.86rem;color:var(--color-texto-soft)}
.migas a{color:var(--color-texto-soft);text-decoration:none}
.migas a:hover{color:var(--color-principal)}
.migas li+li::before{content:"›";margin-right:8px;color:var(--color-borde)}
.migas [aria-current]{color:var(--color-principal);font-weight:600}

/* Botón principal */
.btn-principal{
  display:inline-block;padding:15px 30px;border-radius:var(--radio-sm);
  background:linear-gradient(160deg,var(--color-principal),var(--color-principal-dark));
  color:#fff;text-decoration:none;font-weight:700;
  box-shadow:0 12px 26px -12px rgba(var(--color-principal-rgb),.75);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-principal:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(var(--color-principal-rgb),.8)}

/* Cabecera de sección */
.cab{max-width:58ch;margin-bottom:clamp(28px,4vw,44px)}
.cab p{color:var(--color-texto-soft);font-size:1.05rem}

/* Tabla de precios */
.tabla-precio{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--color-borde);border-radius:var(--radio);overflow:hidden}
.tabla-precio th,.tabla-precio td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--color-borde);font-size:.96rem}
.tabla-precio thead th{background:rgba(var(--color-principal-rgb),.07);font-size:.87rem;color:var(--color-principal-dark)}
.tabla-precio tbody th{font-weight:600}
.tabla-precio td:last-child{font-weight:700;color:var(--color-principal-dark);white-space:nowrap}
.tabla-precio tr:last-child th,.tabla-precio tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .tabla-precio,.tabla-precio tbody,.tabla-precio tr,.tabla-precio th,.tabla-precio td{display:block;width:100%;box-sizing:border-box}
  .tabla-precio{background:none;border:0;border-radius:0}
  .tabla-precio thead{position:absolute;left:-9999px}
  .tabla-precio tr{background:#fff;border:1px solid var(--color-borde);border-radius:var(--radio-sm);
    margin-bottom:12px;padding:16px 18px}
  .tabla-precio th,.tabla-precio td{padding:0;border:0!important}
  .tabla-precio tbody th{font-size:1.02rem;margin-bottom:6px}
  .tabla-precio td{color:var(--color-texto-soft);line-height:1.55}
  .tabla-precio td:last-child{margin-top:10px;color:var(--color-principal-dark);font-size:1.05rem}
}
.nota-precio{margin-top:16px;font-size:.9rem;color:var(--color-texto-soft);max-width:70ch}

/* Servicios relacionados */
.relacionados{padding:clamp(56px,7vw,88px) 0;background:linear-gradient(180deg, var(--color-fondo-alt) 0%, #fff 100%)}
.rejilla-rel{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card-rel{
  display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--color-borde);border-radius:var(--radio);
  padding:24px 22px;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card-rel:hover{transform:translateY(-4px);box-shadow:var(--sombra-md);border-color:var(--color-principal)}
.card-rel h3{margin:0;font-size:1.12rem}
.card-rel p{margin:0;font-size:.93rem;color:var(--color-texto-soft);line-height:1.55}
.card-rel span{margin-top:auto;padding-top:12px;font-size:.88rem;font-weight:600;color:var(--color-principal)}

/* FAQ */
.faq{
  position:relative;padding:clamp(60px,8vw,96px) 0 clamp(70px,9vw,110px);
  background:
    radial-gradient(42ch 30ch at 95% 6%, rgba(var(--color-principal-rgb),.08), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--color-fondo-alt) 100%);
}
.faq-lista{max-width:820px}
.faq details{background:#fff;border:1px solid var(--color-borde);border-radius:var(--radio-sm);margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:var(--color-principal);box-shadow:var(--sombra)}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;position:relative;font-family:var(--font-display);font-size:1.1rem;font-weight:500;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:
    linear-gradient(var(--color-principal),var(--color-principal)) center/14px 2px no-repeat,
    linear-gradient(var(--color-principal),var(--color-principal)) center/2px 14px no-repeat;
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .respuesta{padding:0 22px 22px;color:var(--color-texto-soft);line-height:1.68;max-width:70ch}

/* Contenido legal */
.legal{padding:clamp(28px,4vw,44px) 0 clamp(64px,8vw,100px);background:linear-gradient(180deg,#fff 0%, var(--color-fondo-alt) 100%)}
.legal .caja{max-width:78ch;background:#fff;border:1px solid var(--color-borde);border-radius:var(--radio);padding:clamp(28px,4vw,48px)}
.legal h1{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:.4em}
.legal .actualizado{color:var(--color-texto-soft);font-size:.9rem;margin:0 0 30px}
.legal h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:36px 0 12px}
.legal h3{font-size:1.12rem;margin:22px 0 8px}
.legal p,.legal li{color:var(--color-texto-soft);line-height:1.7}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0}
.legal th,.legal td{padding:12px 14px;border:1px solid var(--color-borde);text-align:left;font-size:.92rem}
.legal thead th{background:rgba(var(--color-principal-rgb),.07);color:var(--color-principal-dark)}
.legal a{color:var(--color-principal)}
.legal td,.legal th{overflow-wrap:anywhere}
@media (max-width:640px){
  .legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:100%;box-sizing:border-box}
  .legal thead{position:absolute;left:-9999px}
  .legal tr{border:1px solid var(--color-borde);border-radius:var(--radio-sm);margin-bottom:12px;overflow:hidden}
  .legal th,.legal td{border:0;border-bottom:1px solid var(--color-borde)}
  .legal tr>:last-child{border-bottom:0}
  /* tabla de cookies (4 columnas sin th de fila): etiquetas al ocultar el thead */
  .legal tr:has(> td:first-child) td::before{display:block;font-size:.76rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;color:var(--color-principal-dark);margin-bottom:2px}
  .legal tr:has(> td:first-child) td:nth-child(1)::before{content:"Nombre"}
  .legal tr:has(> td:first-child) td:nth-child(2)::before{content:"Tipo"}
  .legal tr:has(> td:first-child) td:nth-child(3)::before{content:"Finalidad"}
  .legal tr:has(> td:first-child) td:nth-child(4)::before{content:"Duración"}
  .legal tbody th[scope="row"]{background:rgba(var(--color-principal-rgb),.07);color:var(--color-principal-dark)}
}

@media (max-width:900px){
  .rejilla-rel{grid-template-columns:1fr}
}